.preview-shell{
    --led-blue:#2a8bff;
    --led-orange:#ff9a3c;
    --txt:#cfd6e4;
    --txt-dim:#7a8398;
    --txt-cyan:#5fe6ff;
    --txt-cyan-soft:#9af3ff;
    --ok:#27c97a;
  }
  .preview-shell *{box-sizing:border-box}
  .stage{padding:0 24px 48px 24px;display:flex;flex-direction:column;align-items:center;gap:28px}
  .stage h1{margin:0;font-size:18px;letter-spacing:.5px;color:#dfe5f3;font-weight:500}
  .stage h1 small{color:#7a8398;margin-left:8px;font-weight:400;font-size:12px}

  /* Status row */
  .preview-shell{
    width:min(580px,96vw);
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:18px 20px 20px;
    box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02) inset;
  }
  .preview-head{
    display:flex;align-items:center;justify-content:space-between;
    font-family:"SF Mono","IBM Plex Mono",ui-monospace,monospace;
    font-size:11.5px;letter-spacing:1.6px;color:#9aa4bd;text-transform:uppercase;
    margin-bottom:14px;
  }
  .status-pill{
    display:inline-flex;align-items:center;gap:8px;
    color:#b7e6c8;font-size:11.5px;letter-spacing:1px;
    background:rgba(39,201,122,.08);border:1px solid rgba(39,201,122,.25);
    padding:4px 10px;border-radius:999px;
  }
  .status-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
  .status-dot.flash{animation:flash 1.2s ease-in-out 3}
  @keyframes flash{0%,100%{opacity:1}50%{opacity:.15}}

  /* Physical panel — now inside panel-wrap (no fixed aspect-ratio) */
  .panel{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    background:
      radial-gradient(circle at 30% 25%, #2a2f3d 0%, #0e1118 60%, #05070b 100%);
    border-radius:14px;
    box-shadow:
      0 1px 0 rgba(255,255,255,.05) inset,
      0 0 0 1px rgba(255,255,255,.04) inset,
      0 25px 60px rgba(0,0,0,.55);
    padding:7%;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:0;
    user-select:none;
  }
  /* 4 corner buttons — frosted glass, no solid background */
  .preview-shell .btn{
    position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    cursor:pointer;
    color:#9aa4bd;
    text-align:center;
    padding:8px 14px;
    font-size:16px;
    font-weight:500;
    letter-spacing:1.5px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04) !important;
    -webkit-backdrop-filter:blur(12px) saturate(140%);
            backdrop-filter:blur(12px) saturate(140%);
    box-shadow:0 4px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
    transition:color .18s ease, text-shadow .18s ease, border-color .18s ease, background .18s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .preview-shell .btn:active{transform:scale(.97)}
  .preview-shell .btn.tl{align-self:start;justify-self:start}
  .preview-shell .btn.tr{align-self:start;justify-self:end}
  .preview-shell .btn.bl{align-self:end;justify-self:start}
  .preview-shell .btn.br{align-self:end;justify-self:end}
  /* Active: bright orange text + subtle glass tint, no solid background */
  .preview-shell .btn.active{
    color:var(--led-orange);
    text-shadow:0 0 10px rgba(255,154,60,.55);
    border-color:rgba(255,154,60,.35);
    background:rgba(255,154,60,.06) !important;
  }
  .btn .press-ring{
    position:absolute;border-radius:50%;
    width:14px;height:14px;top:6px;right:6px;
    background:transparent;
    border:1.5px solid transparent;
    transition:border-color .2s;
  }
  .btn.holding .press-ring{border-color:var(--led-orange);animation:holdPulse 1s ease-in-out infinite}
  @keyframes holdPulse{0%,100%{box-shadow:0 0 0 rgba(255,154,60,0)}50%{box-shadow:0 0 6px rgba(255,154,60,.7)}}

  /* Center knob */
  .center{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:62%;aspect-ratio:1/1;
  }
  .knob-outer{
    position:relative;width:100%;height:100%;
    border-radius:50%;
    /* Metallic brushed-silver look with concentric rings */
    background:
      /* Outer ring — metallic concentric rings */
      radial-gradient(circle at 50% 50%,
        #4a505c 0%, #3a3f4a 3%, #2c313a 6%, #3a404a 9%, #22272f 12%, #2e333d 15%,
        #1e222a 19%, #2a2f38 22%, #161a20 26%, #252830 30%,
        #1a1e24 34%, #20242c 38%, #181b22 42%, #1e2129 46%,
        #15171d 50%, #1a1c22 54%, #12141a 58%, #17191f 62%,
        #0f1116 66%, #14161c 70%, #0c0e13 74%, #111217 78%,
        #090a0f 82%, #0d0e13 86%, #07080c 90%, #0a0b10 94%,
        #040508 97%, #06070a 100%);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06),
      0 0 0 3px #2a2f3a,
      0 0 0 4px #1a1e26,
      0 0 0 7px #0e1117,
      0 18px 40px rgba(0,0,0,.6),
      inset 0 0 0 1px rgba(255,255,255,.05);
    cursor:grab;
    touch-action:none;
    transform:rotate(var(--knob-rot, 0deg));
    transition:transform .08s ease-out;
  }
  /* Indicator dot on the knob ring */
  .knob-outer::after{
    content:''; position:absolute;
    left:50%; top:7%;
    width:4px; height:12px;
    background:var(--led-orange);
    border-radius:2px;
    transform:translate(-50%, 0);
    box-shadow:0 0 6px var(--led-orange), 0 0 12px rgba(255,154,60,.5);
    pointer-events:none;
    z-index:10;
  }
  .knob-outer.dragging{cursor:grabbing; transition:none}
  .knob-outer.dragging .knob-inner{transition:none}
  /* Bulb stage on the right — brightness + CCT visualized */
  .main-row{
    display:flex; gap:14px; align-items:stretch;
  }
  .panel-wrap{
    flex:0 0 58%; display:flex; flex-direction:column;
  }
  .bulb-strip{
    flex:0 0 42%; display:flex; flex-direction:column; gap:8px;
  }
  .bulb-stage{
    flex:1; border-radius:12px;
    position:relative; overflow:hidden; min-height:0;
    background:linear-gradient(#0a0f18 0%, #0c1220 30%, #0e1424 100%);
  }
  /* Ceiling bar at top */
  .ceiling{
    position:absolute;top:0;left:0;right:0;height:16%;
    background:linear-gradient(#0f1522, #0a0f18);
    border-bottom:1px solid rgba(255,255,255,.04);
    z-index:5;
    display:flex; align-items:flex-end; justify-content:center;
  }
  /* Recessed fixture housing in the ceiling */
  .fixture-trim{
    width:22px;height:7px;
    border-radius:10px 10px 0 0;
    background:#1a1f2a;
    border:1px solid rgba(255,255,255,.08);
    border-bottom:none;
    margin-bottom:-1px;
  }
  .fixture-lens{
    position:absolute;left:50%;transform:translateX(-50%);
    top:calc(16% - 4px);
    width:12px;height:12px;border-radius:50%;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    z-index:6;
    transition:background .18s, box-shadow .18s, border-color .18s;
  }
  .fixture-lens.on{
    border-color:rgba(255,255,255,.35);
    box-shadow:0 0 2px rgba(255,255,255,.15);
  }
  /* Light cone — 15° beam, spread from fixture down to floor */
  .beam{
    position:absolute;left:50%;transform:translateX(-50%);
    top:calc(16% + 2px); /* just below ceiling */
    width:0;height:0;
    border-style:solid;
    /* 15° beam: half-angle = 7.5°, tan(7.5°) ≈ 0.1317
       For a stage height where the cone reaches the bottom (~84% of stage),
       the beam width at bottom = 2 * height * tan(7.5°) */
    z-index:2;
    pointer-events:none;
    transition:opacity .25s;
  }
  /* Multi-layered beams for volumetric light */
  .beam-layer{
    position:absolute; left:0; top:0;
    width:100%; height:100%;
    pointer-events:none;
    z-index:2;
    transition:opacity .25s;
  }
  .beam-layer.beam-soft{filter:blur(4px)}
  .beam-layer.beam-haze{filter:blur(10px)}

  /* Floor glow spot */
  .floor-spot{
    position:absolute;bottom:5%;left:50%;transform:translateX(-50%);
    width:40%;height:12%;
    border-radius:50%;
    z-index:1;
    pointer-events:none;
    transition:opacity .25s, background .18s, box-shadow .18s;
  }
  .preview-shell .bulb-label{
    font-family:"SF Mono","IBM Plex Mono",ui-monospace,monospace;
    font-size:11px; color:#d6e0f0; text-align:center;
    display:flex; justify-content:center; gap:12px;
  }
  .preview-shell .bulb-label span{color:#ff9a3c; font-weight:600;font-size:11.5px;text-shadow:0 0 6px rgba(255,154,60,.35)}
  .knob-inner{
    position:absolute;inset:10%;border-radius:50%;
    background:radial-gradient(circle at 50% 35%, #161a24 0%, #08090d 70%, #000 100%);
    box-shadow:inset 0 0 18px rgba(0,0,0,.85);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:3% 5% 2%;
    /* Counter-rotate to keep display upright */
    transform:rotate(calc(var(--knob-rot, 0deg) * -1));
    transition:transform .08s ease-out;
  }
  /* Indicator row — Bri first, CCT second (swapped) */
  .indicators{
    display:flex;gap:18px;
    font-family:"SF Mono","IBM Plex Mono",ui-monospace,monospace;
    font-size:9.5px;letter-spacing:1.2px;
    margin-bottom:10px;
  }
  .indicators .ind{
    display:inline-flex;align-items:center;gap:5px;
    color:#4a5366;transition:color .15s;
  }
  .indicators .ind::before{
    content:"";width:5px;height:5px;border-radius:50%;
    background:#2a3142;box-shadow:0 0 0 1px #1a1f2c inset;
    transition:background .15s, box-shadow .15s;
  }
  .indicators .ind.on{color:var(--led-orange);text-shadow:0 0 4px rgba(255,154,60,.5)}
  .indicators .ind.on::before{background:var(--led-orange);box-shadow:0 0 6px var(--led-orange)}

  /* Big number display */
  .display{
    display:flex;align-items:flex-end;gap:4px;
    font-family:"DSEG7-Classic","SF Mono",ui-monospace,monospace;
    color:var(--txt-cyan);
    text-shadow:0 0 8px rgba(95,230,255,.7), 0 0 18px rgba(95,230,255,.4);
    letter-spacing:2px;
    margin-bottom:12px;
  }
  .display .num{
    font-size:40px;font-weight:700;line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .display .unit{
    font-size:13px;margin-bottom:5px;color:var(--txt-cyan-soft);
    letter-spacing:0;font-weight:600;
  }
  .display .num.k-mode{font-size:32px}

  /* Memory row M1 M2 M3 */
  .mem-row{
    display:flex;justify-content:center;gap:12px;
    font-family:"SF Mono","IBM Plex Mono",ui-monospace,monospace;
    font-size:10.5px;letter-spacing:1.5px;color:#5a6378;
    margin-top:4px;
    min-height:13px;
  }
  .mem-row .m.on{color:var(--led-orange);text-shadow:0 0 5px rgba(255,154,60,.7);font-weight:600}

  /* Tip area */
  .preview-shell .tip{
    margin-top:10px;
    font-size:12.5px;color:#ffd49a;line-height:1.7;
    font-family:"SF Mono",ui-monospace,monospace;
    text-align:center;letter-spacing:.3px;
    padding:8px 14px;
    background:rgba(255,154,60,.08);
    border-radius:10px;
    border:1px solid rgba(255,154,60,.18);
  }
  .preview-shell .tip b{color:#ff9a3c;font-weight:600;text-shadow:0 0 6px rgba(255,154,60,.4)}

  /* Toast */
  .toast{
    position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);
    background:rgba(15,20,30,.95);border:1px solid rgba(255,154,60,.4);
    color:#ffd9b0;font-size:13px;padding:10px 16px;border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.5);
    opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;
    z-index:50;
  }
  .toast.show{opacity:1;transform:translate(-50%,0)}

  @media (max-width:480px){
    .stage{padding:24px 12px}
    .btn{font-size:14px}
    .display .num{font-size:32px}
    .display .num.k-mode{font-size:26px}
  }