/* ============================================
   调色实验室样式
   ============================================ */
.cg-panel{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--card);margin:22px 0;box-shadow:var(--shadow-sm);
}
.cg-stage{position:relative;background:#0b0f16;line-height:0}
.cg-canvas{width:100%;height:auto;display:block;touch-action:none;cursor:ew-resize}
.cg-divider{
  position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.85);
  transform:translateX(-1px);pointer-events:none;transition:box-shadow .2s;
}
.cg-handle{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.96);
  box-shadow:0 3px 14px rgba(0,0,0,.42);display:grid;place-items:center;
}
.cg-handle::before,.cg-handle::after{
  content:"";position:absolute;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.cg-handle::before{left:8px;border-right:6px solid var(--ink-2)}
.cg-handle::after{right:8px;border-left:6px solid var(--ink-2)}
.cg-badge{
  position:absolute;top:14px;padding:5px 12px;border-radius:8px;
  background:rgba(11,15,22,.62);color:#fff;font-size:12.5px;font-weight:600;
  backdrop-filter:blur(8px);pointer-events:none;line-height:1.5;
}
.cg-left{left:14px}
.cg-right{right:14px}
.cg-hint{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  padding:5px 14px;border-radius:100px;background:rgba(11,15,22,.62);color:#fff;
  font-size:12px;backdrop-filter:blur(8px);pointer-events:none;line-height:1.6;
}
.cg-controls{padding:20px 22px 22px}
.cg-title{font-size:16px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cg-title span{font-size:13px;color:var(--ink-4);font-weight:400}
.cg-presets{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.cg-preset{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 9px;
  border:1px solid var(--line);border-radius:100px;font-size:13px;transition:.18s;
  background:#fff;color:var(--ink-2);
}
.cg-preset i{width:22px;height:16px;border-radius:5px;display:block}
.cg-preset:hover{border-color:var(--brand);color:var(--brand)}
.cg-preset.on{border-color:var(--brand);background:rgba(91,75,219,.08);color:var(--brand);font-weight:600}
.cg-sliders{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:11px 26px;margin-bottom:18px;
}
.cg-row{display:flex;align-items:center;gap:11px;font-size:13.5px}
.cg-row>span{width:78px;flex-shrink:0;color:var(--ink-3)}
.cg-row>b{width:46px;text-align:right;font-size:12.5px;color:var(--brand);font-variant-numeric:tabular-nums}
.cg-row input[type=range]{
  flex:1;height:5px;-webkit-appearance:none;appearance:none;border-radius:3px;
  background:var(--line);outline:none;cursor:pointer;min-width:60px;
}
.cg-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--brand);cursor:pointer;box-shadow:0 2px 6px rgba(91,75,219,.4);
}
.cg-row input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--brand);
  cursor:pointer;border:none;box-shadow:0 2px 6px rgba(91,75,219,.4);
}
.cg-colors{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:15px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);margin-bottom:15px}
.cg-color{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.cg-color input[type=color]{
  width:40px;height:30px;border:1px solid var(--line);border-radius:8px;
  padding:2px;background:#fff;cursor:pointer;
}
.cg-file{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.cg-file input[type=file]{font-size:12px;color:var(--ink-4)}
.cg-file input[type=file]::file-selector-button{
  padding:6px 13px;border:1px solid var(--line);border-radius:8px;background:#fff;
  cursor:pointer;margin-right:8px;font-size:12.5px;
}
.cg-file input[type=file]::file-selector-button:hover{border-color:var(--brand);color:var(--brand)}
.cg-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cg-btn{
  height:34px;padding:0 16px;border:1px solid var(--line);border-radius:9px;
  font-size:13px;background:#fff;color:var(--ink-2);transition:.18s;
}
.cg-btn:hover{border-color:var(--brand);color:var(--brand)}
.cg-mode{font-size:12.5px;color:var(--ink-4);margin-left:auto}
@media(max-width:600px){
  .cg-controls{padding:16px}
  .cg-row>span{width:66px;font-size:12.5px}
  .cg-row>b{width:40px;font-size:11.5px}
  .cg-title{font-size:15px}
}