:root{
  --bg:#000; --tile:rgba(255,255,255,.085); --tile2:rgba(255,255,255,.14); --line:rgba(255,255,255,.1);
  --text:#f5f5f7; --muted:#9a9aa3; --accent:#ff4fa3; --ok:#34c759; --warn:#ffcc00; --bad:#ff453a; --cur:#ff4fa3;
  --sat:env(safe-area-inset-top,0px); --sar:env(safe-area-inset-right,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px);
  --g:clamp(8px,1.4vmin,16px); --r:clamp(18px,2.6vmin,28px); --h:44px; --fs:clamp(14px,1.9vmin,18px);
}
*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--bg);color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none;touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--text);font:var(--fs)/1.3 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow:hidden;overscroll-behavior:none}
[hidden]{display:none!important}
.glow{position:fixed;inset:-30vh -30vw auto -30vw;height:70vh;background:radial-gradient(closest-side,var(--cur),transparent);opacity:.2;pointer-events:none;transition:background .3s;z-index:0}
.status,.addr,.lead,.steps,.sheet p{-webkit-user-select:text;user-select:text}
.haptic{position:fixed;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-10px;top:-10px}
h1,h2,h3,p{margin:0}

/* buttons */
.btn{appearance:none;-webkit-appearance:none;border:0;border-radius:14px;font:inherit;font-weight:600;color:var(--text);background:var(--tile2);min-height:var(--h);padding:0 14px;cursor:pointer;touch-action:manipulation;transition:transform .12s,background .15s,filter .15s;-webkit-touch-callout:none}
.btn:active{transform:scale(.95);filter:brightness(1.25)}
.btn-primary{background:var(--accent);color:#14000a}
.btn-ghost{background:transparent;border:1px solid var(--line)}
.btn-small{min-height:var(--h);padding:0 12px;font-size:.9em}
.big{min-height:54px;font-size:1.1em}

/* no-bluetooth screen */
.screen{position:relative;z-index:1}
.nobt{display:flex;height:100dvh;overflow:auto;align-items:center;justify-content:center;padding:calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px)}
.nobt-card{background:var(--tile);border-radius:24px;padding:22px 20px;display:flex;flex-direction:column;gap:12px;width:100%;max-width:560px;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.nobt-card a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
.bulb{font-size:40px}
.lead{color:var(--muted)}
.steps{margin:0;padding-left:22px;color:var(--muted)}
.steps li{margin:5px 0}
.addr{color:var(--text);word-break:break-all;font-weight:600}
.netfind{display:flex;gap:10px;align-items:center;color:var(--muted)}
.netnote{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--tile);border-radius:16px}
.netnote h2{font-size:1.05em}
.netnote p{color:var(--muted);font-size:.9em}
.spinner{flex:none;display:inline-block;width:20px;height:20px;border-radius:50%;border:3px solid #444;border-top-color:var(--text);animation:spin .8s linear infinite;vertical-align:-4px}
.spinner.small{width:12px;height:12px;border-width:2px;margin-right:4px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.35}}

/* ===== the one-screen control panel ===== */
.app{position:fixed;inset:0;z-index:1;height:100dvh}
.cc{height:100%;display:grid;gap:var(--g);
  padding:calc(var(--sat) + var(--g)) calc(var(--sar) + var(--g)) calc(var(--sab) + var(--g)) calc(var(--sal) + var(--g));
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"bar" "color" "power" "bri" "fx";
  max-width:1400px;margin:0 auto}
.bar{grid-area:bar}.color-tile{grid-area:color}.power-tile{grid-area:power}.bri-tile{grid-area:bri}.fx-tile{grid-area:fx}
.tile{background:var(--tile);border-radius:var(--r);-webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4);min-width:0;min-height:0}

/* top bar: strip pills */
.bar{display:flex;gap:var(--g);align-items:stretch;min-width:0}
.pill{position:relative;flex:1 1 0;min-width:0;background:var(--tile);border-radius:999px;display:flex;align-items:center;gap:8px;padding:4px 4px 4px 14px;min-height:52px}
.strip.pill{display:block;padding:0}
.strip-head{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 14px;min-height:52px}
.strip-text{flex:1;min-width:0}
.strip-text h3{font-size:.95em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{font-size:.78em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-connect{border-radius:999px;padding:0 14px;font-size:.88em;background:#0a84ff;color:#fff;flex:none}
.strip[data-state=connected] .btn-connect,.strip[data-state=connecting] .btn-connect{background:var(--tile2);color:var(--text)}
.dot{width:10px;height:10px;border-radius:50%;background:#636366;flex:none}
.strip[data-state=connecting] .dot,.remote-box[data-state=connecting] .dot,.share[data-state=starting] .dot{background:var(--warn);animation:pulse 1s infinite}
.strip[data-state=connected] .dot,.remote-box[data-state=connected] .dot,.share[data-state=live] .dot{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.strip[data-state=lost] .dot,.remote-box[data-state=lost] .dot,.share[data-state=lost] .dot{background:var(--bad)}
.strip[data-state=connected]{background:rgba(52,199,89,.16)}
/* controller-type picker: small chip on the pill, opens as a popover */
.variant{position:absolute;right:6px;top:-8px}
.variant summary{list-style:none;font-size:11px;font-weight:600;background:#3a3a3c;color:var(--text);border-radius:999px;padding:3px 8px;cursor:pointer}
.variant summary::-webkit-details-marker{display:none}
.variant[open] label{position:absolute;right:0;top:26px;z-index:20;width:min(280px,80vw);background:#2c2c2e;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--muted);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.variant select{font:inherit;color:var(--text);background:#3a3a3c;border:0;border-radius:10px;min-height:44px;padding:0 10px}
.remote-box{padding-right:6px}
.remote-strips{display:none}
.gear-btn{flex:none;width:52px;min-height:52px;padding:0;border-radius:50%;background:var(--tile);font:600 20px/1 Georgia,"Times New Roman",serif;font-style:italic}
.demo-tag{align-self:center;flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;color:#000;background:var(--warn);border-radius:999px;padding:4px 8px}
.remote-mode .strip{display:none!important}

/* color: wheel + presets */
.color-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);gap:var(--g);padding:var(--g);align-items:center}
.wheel-box{min-width:0;min-height:0;height:100%;display:flex;align-items:center;justify-content:center}
.wheel-wrap{position:relative;width:var(--wheel,240px);height:var(--wheel,240px);touch-action:none;flex:none}
.wheel-wrap canvas{width:100%;height:100%;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.knob{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.6);pointer-events:none;background:var(--cur);left:50%;top:50%;transition:width .12s,height .12s,margin .12s}
.wheel-wrap.dragging .knob{width:48px;height:48px;margin:-24px 0 0 -24px}
.swatches{display:grid;grid-template-columns:repeat(2,var(--sw,44px));grid-auto-rows:var(--sw,44px);gap:clamp(6px,1vmin,12px);align-content:center}
.swatch{appearance:none;border:0;border-radius:50%;width:100%;height:100%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);transition:transform .12s}
.swatch:active{transform:scale(.9)}
.swatch[aria-pressed=true]{box-shadow:0 0 0 3px var(--bg),0 0 0 5px #fff}

/* power */
.power-tile{display:flex;gap:var(--g);padding:var(--g);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
.power-btn{flex:1;min-height:52px;border-radius:var(--r);font-size:1em;background:var(--tile)}
.power-btn.on{background:var(--cur);color:#000;text-shadow:0 0 1px rgba(255,255,255,.4)}
.pw-ico{font-size:1.1em}
.share{flex:1.3;min-width:0;display:flex;align-items:center;gap:8px;background:var(--tile);border-radius:var(--r);padding:0 10px 0 14px;min-height:52px}
.share-text{flex:1;min-width:0}
.share-text h3{font-size:.85em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.remote-mode .share{display:none!important}
.switch{position:relative;flex:none;width:51px;height:31px;cursor:pointer}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.switch span{position:absolute;inset:0;border-radius:999px;background:#39393d;transition:background .2s}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.switch input:checked+span{background:var(--ok)}
.switch input:checked+span::after{transform:translateX(20px)}

/* Control-Center sliders: one chunky rounded bar, filled to the value */
.bri-tile,.fx-tile{padding:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.fx-tile{display:flex;flex-direction:column;gap:var(--g)}
.cc-slider{position:relative;display:block;height:var(--slh,52px);border-radius:var(--r);overflow:hidden;background:var(--tile);touch-action:none}
.cc-slider::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,50%);background:rgba(255,255,255,.9);pointer-events:none}
#bri{}
.bri-tile .cc-slider::before{background:linear-gradient(90deg,rgba(255,255,255,.75),#fff)}
.cc-slider input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;touch-action:none}
.sl-ico,.sl-name,.cc-slider output{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;font-weight:600;mix-blend-mode:difference;color:#fff}
.sl-ico{left:16px;font-size:1.15em}
.sl-name{left:46px;font-size:.92em}
.cc-slider output{right:16px;font-size:.92em;font-variant-numeric:tabular-nums}

/* effects: one swipeable chip row on phones, a grid on iPad */
.effects{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:none;touch-action:pan-x;
  mask-image:linear-gradient(90deg,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}
.effects::-webkit-scrollbar{display:none}
.effect{flex:none;scroll-snap-align:start;border-radius:999px;background:var(--tile);font-size:.9em;padding:0 16px;white-space:nowrap}
.effect[aria-pressed=true]{background:#fff;color:#000}

/* help sheet */
.sheet-scrim{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;padding:0 calc(var(--sar) + 8px) 0 calc(var(--sal) + 8px)}
.sheet{width:100%;max-width:560px;max-height:85dvh;overflow:auto;background:#1c1c1e;border-radius:22px 22px 0 0;padding:16px 18px calc(var(--sab) + 18px);display:flex;flex-direction:column;gap:12px;color:var(--muted);font-size:15px}
.sheet-head{display:flex;align-items:center;justify-content:space-between}
.sheet-head h2{color:var(--text);font-size:19px}
.showall{display:flex;align-items:center;gap:10px;color:var(--text);min-height:44px}
.showall input{width:22px;height:22px}
.last-sent{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.toast{position:fixed;left:50%;bottom:calc(var(--sab) + 20px);transform:translateX(-50%);background:#2c2c2e;color:#fff;padding:12px 18px;border-radius:14px;z-index:40;max-width:min(90vw,520px);box-shadow:0 6px 24px rgba(0,0,0,.5);font-size:15px}

/* stacked color tile: wheel on top, presets in two rows of five underneath (chosen by script when it gives a bigger wheel) */
.color-tile.stack{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;justify-items:center}
.color-tile.stack .swatches{grid-template-columns:repeat(5,var(--sw,48px))}
/* compact connect button: a ✕ once connected, … while connecting */
.compact .strip[data-state=connected] .btn-connect,.compact .strip[data-state=connecting] .btn-connect{font-size:0;width:44px;padding:0}
.compact .strip[data-state=connected] .btn-connect::after{content:"✕";font-size:16px}
.compact .strip[data-state=connecting] .btn-connect::after{content:"…";font-size:18px}
.compact .variant{right:52px}
.compact .demo-tag{display:none}


/* ===== strips bar: chips scroll sideways, + Add strip, settings gear ===== */
.section-title{display:none}
.strip-list{flex:1 1 auto;min-width:0;display:flex;gap:var(--g);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.strip-list::-webkit-scrollbar{display:none}
.strip-list .strip.pill{flex:1 0 auto;min-width:118px;max-width:300px;scroll-snap-align:start}
.strip-main{appearance:none;-webkit-appearance:none;border:0;background:none;color:inherit;font:inherit;display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:0;margin:0;text-align:left;cursor:pointer;min-height:44px;-webkit-touch-callout:none}
.strip-text .nm{display:block;font-size:.95em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-text .status{display:block}
.strip[data-state=connected] .strip-head{padding-right:16px}
.add-strip{flex:none;border-radius:999px;min-height:52px;background:var(--tile);padding:0 16px;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:2px}
.plus{font-size:1.35em;font-weight:500;line-height:1}
.strip-list.many .add-label{display:none}
.strip-list.many .add-strip{width:52px;padding:0}
.strip-list.empty .add-strip{flex:1;background:#0a84ff;color:#fff}
.gear-btn{flex:none;width:52px;min-height:52px;padding:0;border-radius:50%;background:var(--tile);display:flex;align-items:center;justify-content:center;color:var(--text)}
.gear-btn svg{width:24px;height:24px}
.remote-mode .strip-list{display:none!important}
.remote-mode .remote-box{flex:1}

/* ---- tiny phones (iPhone SE): tighten ---- */
@media (max-height:700px) and (orientation:portrait){
  :root{--g:8px}
  .pill,.add-strip,.strip-head,.gear-btn,.power-btn,.share{min-height:48px}
  .cc-slider{--slh:46px}
  .status{display:none}
}
/* phones: hide the pill status line when the bar is too narrow */
@media (max-width:430px){
  .strip .status{display:none}
  .share .status{display:none}
  .share .long{display:none}
  .share .dot{display:none}
  .share{flex:1.4;padding-left:12px}
  .strip-head{padding-left:12px;gap:6px}
  .btn-connect{padding:0 10px;font-size:.8em}
  .remote-box h3{font-size:.85em}
}

/* ---- phones held sideways ---- */
@media (orientation:landscape) and (max-height:540px){
  :root{--g:8px}
  .cc{grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr);
    grid-template-areas:"color bar" "color power" "color bri" "color fx"}
  .color-tile{height:100%}
  .pill,.add-strip,.strip-head,.gear-btn,.power-btn,.share{min-height:44px}
  .gear-btn,.strip-list.many .add-strip{width:44px}
  .cc-slider{--slh:44px}
  .cc{grid-template-rows:auto repeat(3,minmax(0,1fr))}
  .share .status,.share .long,.share .dot{display:none}
  .share{flex:1.4;padding-left:12px}
  .power-tile,.bri-tile,.fx-tile{align-self:center}
  .strip .status{display:none}
}

/* ---- iPad portrait ---- */
@media (min-width:700px) and (min-height:900px) and (orientation:portrait){
  :root{--g:clamp(12px,1.6vmin,20px)}
  .cc{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto auto;
    grid-template-areas:"bar bar" "color color" "power fx" "bri fx"}
  .color-tile{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;justify-items:center}
  .swatches{grid-template-columns:repeat(10,var(--sw,48px))}
  .pill,.add-strip,.strip-head,.gear-btn{min-height:60px}
  .gear-btn,.strip-list.many .add-strip{width:60px}
  .power-btn,.share{min-height:72px}
  .cc-slider{--slh:72px}
  .fx-tile .cc-slider{--slh:60px}
  .effects{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;mask-image:none;-webkit-mask-image:none}
  .effect{min-height:52px;padding:0 8px;white-space:normal;line-height:1.1;border-radius:16px}
  .bri-tile{align-self:end}
  .fx-tile{grid-row:3 / span 2}
}

/* ---- iPad landscape / big screens ---- */
@media (min-width:1000px) and (min-height:700px) and (orientation:landscape){
  :root{--g:clamp(12px,1.6vmin,20px)}
  .cc{grid-template-columns:minmax(260px,1fr) minmax(0,1.6fr) minmax(260px,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"bar bar bar" "power color fx" "bri color fx"}
  .color-tile{grid-row:2 / span 2;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;justify-items:center}
  .swatches{grid-template-columns:repeat(5,var(--sw,48px))}
  .pill,.add-strip,.strip-head,.gear-btn{min-height:60px}
  .gear-btn,.strip-list.many .add-strip{width:60px}
  .cc{grid-template-rows:auto auto minmax(0,1fr)}
  .power-tile{flex-wrap:wrap}
  .power-btn{min-height:84px;flex:1 1 40%}
  .share{flex:1 1 100%;min-height:64px}
  .cc-slider{--slh:72px}
  .bri-tile .cc-slider{--vert:1;height:100%;border-radius:calc(var(--r) * 1.4)}
  .bri-tile .cc-slider::before{inset:auto 0 0 0;width:auto;height:var(--p,50%);background:linear-gradient(0deg,rgba(255,255,255,.8),#fff)}
  .bri-tile .sl-ico{left:50%;top:auto;bottom:22px;transform:translateX(-50%);font-size:1.6em}
  .bri-tile .sl-name{left:50%;top:22px;transform:translateX(-50%);mix-blend-mode:difference}
  .bri-tile .cc-slider output{right:auto;left:50%;top:52px;transform:translateX(-50%);font-size:1.3em}
  .fx-tile{grid-row:2 / span 2;background:var(--tile);border-radius:var(--r);padding:var(--g);justify-content:space-between}
  .effects{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible;mask-image:none;-webkit-mask-image:none;flex:1;align-content:start}
  .effect{min-height:52px;padding:0 8px;white-space:normal;line-height:1.1;border-radius:16px;background:var(--tile2)}
  .effect[aria-pressed=true]{background:#fff}
  .fx-tile .cc-slider{background:var(--tile2)}
}

@media (prefers-reduced-motion:reduce){
  .glow{display:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

.tab-share{margin-top:12px}