:root {
    --bg-deep:#14100d; --bg-warm:#1e1815; --surface:#262019; --line:#3d332a;
    --line-soft:#2e261f; --ink:#f5efe6; --ink-mid:#b4a695; --ink-dim:#7d7062;
    --accent:#c9752e; --accent-soft:#e0954f; --accent-glow:rgba(201,117,46,.12);
    --radius-sm:6px;
  }
  .shell {
        background:radial-gradient(ellipse 80% 60% at 20% 0%,#241d17 0%,transparent 60%),
               radial-gradient(ellipse 70% 50% at 90% 100%,#1f1a20 0%,transparent 55%),var(--bg-deep);
               color:var(--ink);min-height:100vh;overflow-x:hidden
  }

  .brand{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em}
  .brand span{color:var(--accent)}
  .tagline{font-size:12.5px;color:var(--ink-dim);letter-spacing:.03em}
  .shell{display:grid;grid-template-columns:1fr 360px;min-height:calc(100vh - 68px)}
  .stage{
    position:relative;background:radial-gradient(ellipse 55% 45% at 50% 42%,rgba(201,117,46,.07) 0%,transparent 70%);
    display:flex;align-items:center;justify-content:center;min-height:460px;
    animation:fadeIn .9s .1s cubic-bezier(.2,.8,.3,1) both
  }
  #canvas-host{width:100%;height:100%;position:absolute;inset:0}
  #canvas-host canvas{display:block}
  .stage-hint{
    position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
    font-size:11.5px;color:var(--ink-dim);letter-spacing:.05em;pointer-events:none;display:flex;gap:16px
  }
  .dim-readout{
    position:absolute;top:20px;left:24px;font-family:'Syne',sans-serif;font-size:13px;
    font-weight:600;color:var(--ink-mid);letter-spacing:.04em;pointer-events:none
  }
  .dim-readout b{color:var(--accent-soft);font-weight:600}
  .slot-readout{
    position:absolute;top:52px;left:24px;font-size:12px;color:var(--accent-soft);
    letter-spacing:.05em;pointer-events:none;opacity:0;transition:opacity .25s
  }
  .slot-readout.show{opacity:1}
  .lid-toggle{
    position:absolute;top:18px;right:20px;background:var(--surface);border:1px solid var(--line);
    color:var(--ink-mid);padding:8px 15px;border-radius:100px;font-family:'DM Sans',sans-serif;
    font-size:12.5px;cursor:pointer;transition:all .25s ease
  }
  .lid-toggle:hover{border-color:var(--accent);color:var(--accent-soft)}
  .boot-msg{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;
    color:var(--ink-dim);font-size:13.5px;line-height:1.7;max-width:420px;padding:20px
  }
  .boot-msg b{color:var(--accent-soft);font-weight:500}
  .panel{
    background:var(--bg-warm);border-left:1px solid var(--line-soft);padding:26px 22px 40px;
    overflow-y:auto;max-height:calc(100vh - 68px);
    animation:fadeLeft .8s .15s cubic-bezier(.2,.8,.3,1) both
  }
  .group{margin-bottom:26px}
  .group-title{
    font-family:'Syne',sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-dim);margin-bottom:13px;display:flex;align-items:center;gap:9px
  }
  .group-title::after{content:'';flex:1;height:1px;background:var(--line-soft)}
  .slider-row{margin-bottom:14px}
  .slider-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
  .slider-head label{font-size:13px;color:var(--ink-mid)}
  .val-box{display:flex;align-items:baseline;gap:3px}
  .val-box input{
    width:48px;background:var(--surface);border:1px solid var(--line);color:var(--ink);
    font-family:'Syne',sans-serif;font-size:13px;font-weight:600;text-align:right;
    padding:3px 6px;border-radius:var(--radius-sm);outline:none;transition:border-color .2s
  }
  .val-box input:focus{border-color:var(--accent)}
  .val-box em{font-style:normal;font-size:11px;color:var(--ink-dim)}
  input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;height:3px;
    background:var(--line);border-radius:3px;outline:none
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;
    background:var(--accent);cursor:pointer;border:2.5px solid var(--bg-warm);
    box-shadow:0 0 0 1px var(--accent);transition:transform .15s
  }
  input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18)}
  input[type=range]::-moz-range-thumb{
    width:15px;height:15px;border-radius:50%;background:var(--accent);
    cursor:pointer;border:2.5px solid var(--bg-warm)
  }
  .swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:12px}
  .sw{aspect-ratio:1;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;
      transition:transform .18s,border-color .18s;position:relative}
  .sw:hover{transform:scale(1.12)}
  .sw.on{border-color:var(--accent)}
  .sw.on::after{content:'';position:absolute;inset:-5px;border-radius:9px;border:1px solid var(--accent);opacity:.4}
  .custom-color{
    display:flex;align-items:center;gap:10px;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 10px
  }
  .custom-color input[type=color]{width:26px;height:26px;padding:0;border:none;background:none;cursor:pointer;border-radius:4px}
  .custom-color input[type=text]{
    flex:1;background:none;border:none;color:var(--ink);font-family:'Syne',sans-serif;
    font-size:13px;letter-spacing:.04em;outline:none;text-transform:uppercase
  }
  .seg3{grid-template-columns:repeat(3,1fr)}
  .seg4{grid-template-columns:repeat(4,1fr)}
  .seg6{grid-template-columns:repeat(6,1fr)}
  #innerPartSeg button{font-size:11px;padding:6px 2px}
  .cmyk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
  .cmyk-cell{display:flex;align-items:center;gap:6px}
  .cmyk-cell label{width:16px;font-size:12px;font-weight:500;color:var(--ink-dim);text-align:center;flex:none}
  .cmyk-cell input{
    flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);color:var(--ink);
    font-family:'Syne',sans-serif;font-size:12.5px;font-weight:600;text-align:center;
    padding:6px 4px;border-radius:var(--radius-sm);outline:none
  }
  .cmyk-cell input:focus{border-color:var(--accent)}
  .cmyk-swatch{width:30px;height:30px;border-radius:var(--radius-sm);border:1px solid var(--line);flex:none;background:#fff}
  .pantone-sel{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--ink);
    padding:9px 11px;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;cursor:pointer}
  .pantone-sel:focus{border-color:var(--accent)}
  .color-note{font-size:11.5px;color:var(--ink-dim);margin-top:8px;line-height:1.5}
  .mat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
  .paper-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .paper-chip{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
    color:var(--ink-mid);font-family:'DM Sans',sans-serif;font-size:11.5px;padding:8px 6px;
    cursor:pointer;transition:all .2s;text-align:center;line-height:1.3;position:relative
  }
  .paper-chip small{display:block;font-size:9.5px;color:var(--ink-dim);margin-top:2px}
  .paper-chip:hover{border-color:var(--accent)}
  .paper-chip.on{background:var(--accent);border-color:var(--accent);color:#1a1209}
  .paper-chip.on small{color:rgba(26,18,9,.7)}
  .paper-chip .mat-thumb{
    display:block;width:100%;height:42px;border-radius:4px;margin-bottom:6px;
    border:1px solid var(--line-soft);overflow:hidden
  }
  .paper-chip .mat-thumb canvas{width:100%;height:100%;display:block}
  .craft-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .craft-chip{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
    color:var(--ink-mid);font-family:'DM Sans',sans-serif;font-size:11.5px;padding:8px 4px;
    cursor:pointer;transition:all .2s;text-align:center;line-height:1.3;position:relative
  }
  .craft-chip small{display:block;font-size:9.5px;color:var(--ink-dim);margin-top:2px}
  .craft-chip:hover{border-color:var(--accent)}
  .craft-chip.on{background:var(--accent);border-color:var(--accent);color:#1a1209}
  .craft-chip.on small{color:rgba(26,18,9,.7)}
  .craft-chip .cf-opt{
    display:none;position:absolute;bottom:-1px;left:-1px;right:-1px;
    background:var(--bg-warm);border:1px solid var(--line);border-top:none;
    border-radius:0 0 var(--radius-sm) var(--radius-sm);padding:4px;z-index:5
  }
  .craft-chip .cf-opt.show{display:block}
  .cf-opt .cf-opt-row{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
  .cf-opt button{
    background:var(--surface);border:1px solid var(--line);color:var(--ink-mid);
    font-size:10px;padding:3px 5px;border-radius:3px;cursor:pointer;font-family:'DM Sans',sans-serif
  }
  .cf-opt button.on{background:var(--accent);border-color:var(--accent);color:#1a1209}
  .dimmode-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .dimmode-hint{font-size:11px;color:var(--ink-dim);line-height:1.45;flex:1}
  .tray-area{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;background:var(--surface)}
  .tray-calc{
    background:var(--accent-glow);border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:10px 12px;margin-top:10px;font-size:12px;color:var(--ink-mid);line-height:1.6
  }
  .tray-calc b{color:var(--accent-soft);font-weight:500}
  .logo-size{font-size:11.5px;color:var(--accent-soft);margin-top:4px;letter-spacing:.02em}
  .slot-summary{margin-top:10px;font-size:11.5px;color:var(--ink-dim);line-height:1.7}
  .slot-summary b{color:var(--ink-mid);font-weight:500}
  .palette-wrap{margin-top:12px}
  .palette-wrap canvas{
    width:100%;height:150px;border-radius:var(--radius-sm);cursor:crosshair;
    border:1px solid var(--line);display:block;touch-action:none
  }
  .palette-wrap canvas:active{cursor:crosshair}
  .pal-value-row{display:flex;align-items:center;gap:10px;margin-top:8px}
  .pal-value-row label{font-size:12px;color:var(--ink-mid);flex:none}
  .pal-value-row input[type=range]{flex:1}
  .pal-value-row span{font-size:12px;color:var(--ink-dim);width:28px;text-align:right}
  .acc-row{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;background:var(--surface)}
  .acc-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px}
  .acc-name{font-size:13px;color:var(--ink);font-weight:500}
  .acc-toggle{
    background:var(--surface-lift);border:1px solid var(--line);color:var(--ink-dim);
    padding:5px 16px;border-radius:100px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;
    transition:all .2s
  }
  .acc-toggle.on{background:var(--accent);border-color:var(--accent);color:#1a1209}
  .acc-body{padding:0 12px 12px;border-top:1px solid var(--line-soft)}
  .seg{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);
       border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px;gap:3px}
  .seg button{
    background:none;border:none;color:var(--ink-dim);font-family:'DM Sans',sans-serif;
    font-size:12.5px;padding:7px;border-radius:4px;cursor:pointer;transition:all .2s
  }
  .seg button.on{background:var(--accent);color:#1a1209;font-weight:500}
  .slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:12px}
  .slot-btn{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
    color:var(--ink-mid);font-family:'DM Sans',sans-serif;font-size:12px;padding:8px 4px;
    cursor:pointer;transition:all .2s;position:relative
  }
  .slot-btn small{display:block;font-size:10px;color:var(--ink-dim);margin-top:2px;font-weight:400}
  .slot-btn:hover{border-color:var(--accent)}
  .slot-btn.on{background:var(--accent);border-color:var(--accent);color:#1a1209}
  .slot-btn.on small{color:rgba(26,18,9,.7)}
  .slot-btn .dot{
    position:absolute;top:4px;right:5px;width:6px;height:6px;border-radius:50%;
    background:var(--accent-soft);opacity:0;transition:opacity .2s
  }
  .slot-btn .dot.on{opacity:1}
  .field{margin-bottom:12px}
  .field label{display:block;font-size:12.5px;color:var(--ink-mid);margin-bottom:6px}
  .field input[type=text],.field select{
    width:100%;background:var(--surface);border:1px solid var(--line);color:var(--ink);
    padding:9px 11px;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;
    font-size:13.5px;outline:none;transition:border-color .2s
  }
  .field input[type=text]:focus,.field select:focus{border-color:var(--accent)}
  .field select{cursor:pointer}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .upload-zone{
    border:1px dashed var(--line);border-radius:var(--radius-sm);padding:14px 12px;
    text-align:center;cursor:pointer;transition:all .22s;background:var(--surface)
  }
  .upload-zone:hover{border-color:var(--accent);background:var(--accent-glow)}
  .upload-zone p{font-size:12.5px;color:var(--ink-mid)}
  .upload-zone small{font-size:11px;color:var(--ink-dim);display:block;margin-top:3px}
  .logo-chip{
    display:none;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius-sm);padding:8px 10px;margin-top:8px
  }
  .logo-chip.show{display:flex}
  .logo-chip img{width:30px;height:30px;object-fit:contain;background:#fff;border-radius:3px}
  .logo-chip span{flex:1;font-size:12px;color:var(--ink-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .logo-chip button{background:none;border:none;color:var(--ink-dim);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px}
  .logo-chip button:hover{color:var(--accent)}
  .actions{display:grid;gap:9px;margin-top:8px}
  .btn{
    padding:12px;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:13.5px;
    font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .22s;
    display:flex;align-items:center;justify-content:center;gap:8px
  }
  .btn-primary{background:var(--accent);color:#1a1209}
  .btn-primary:hover{background:var(--accent-soft);transform:translateY(-1px)}
  .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink-mid)}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent-soft)}
  .toast{
    position:fixed;bottom:26px;left:50%;transform:translate(-50%,70px);background:var(--accent);
    color:#1a1209;padding:11px 22px;border-radius:100px;font-size:13.5px;font-weight:500;
    opacity:0;transition:all .38s cubic-bezier(.2,.9,.3,1);z-index:99
  }
  .toast.show{opacity:1;transform:translate(-50%,0)}
  @keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
  @keyframes fadeLeft{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @media(max-width:900px){
    .shell{grid-template-columns:1fr}
    .stage{min-height:380px;height:52vh}
    .panel{max-height:none;border-left:none;border-top:1px solid var(--line-soft)}
  }