/* Appearance: Classic Dark (the base look) and OLED Black. Loaded last. */
.btn-primary,.btn-connect,.effect[aria-pressed=true],.strip-list.empty .add-strip{color:var(--on-accent,#14000a)}

/* ---------- icons ---------- */
.ico{display:inline-flex;align-items:center;justify-content:center;line-height:0;vertical-align:middle}
.gi{width:1.15em;height:1.15em;display:block}
.gear-btn .gi{width:24px;height:24px}
.nobt .bulb .gi{width:56px;height:56px}
.add-strip .plus .gi{width:20px;height:20px}
.h-ico{margin-right:6px}.h-ico .gi{width:1em;height:1em}
.off-ico{opacity:.7}
.nobt .bulb{align-self:center}

/* ---------- OLED black ---------- */
html[data-theme=oled]{--bg:#000;--tile:#0e0e10;--tile2:#1a1a1d;--card:#0a0a0c;--card2:#141417;--line:#1f1f23}
html[data-theme=oled],html[data-theme=oled] body{background:#000}
html[data-theme=oled] .glow{display:none}
html[data-theme=oled] .tile,html[data-theme=oled] .nobt-card{-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme=oled] .sheet,html[data-theme=oled] .sheet-head{background:#0b0b0d}

/* ---------- Appearance settings ---------- */
.appearance .ap-label{margin:8px 0 2px;font-size:13px;font-weight:600;color:#8e8e93;text-transform:uppercase;letter-spacing:.04em}
.appearance .ap-seg{display:flex}
.appearance .ap-seg button{flex:1 1 0;min-width:0}
.ap-accents{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ap-accents .acc{width:44px;height:44px;border-radius:50%;border:0;background:var(--c);cursor:pointer;box-shadow:inset 0 1px 1px rgba(255,255,255,.5);padding:0}
.ap-accents .acc-auto{width:auto;padding:0 14px;border-radius:999px;background:conic-gradient(from 0deg,#ff3b30,#ffcc00,#34c759,#5ac8fa,#0a84ff,#bf5af2,#ff3b30);color:#fff;font:700 14px/1 -apple-system,system-ui,sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.ap-accents .acc[aria-checked=true]{outline:3px solid #fff;outline-offset:2px}
.ap-appicons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ap-appicons button{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:#f5f5f7;font:500 13px/1.2 -apple-system,system-ui,sans-serif;padding:6px 0;border-radius:14px;cursor:pointer;min-height:44px}
.ap-appicons img{width:56px;height:56px;border-radius:13px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.ap-appicons button[aria-checked=true]{background:rgba(10,132,255,.22)}
.ap-appicons button[aria-checked=true] img{outline:3px solid #0a84ff;outline-offset:2px}

/* per-strip checkmarks: controls only go to checked strips */
.strip-check{position:relative;flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:-10px;margin-right:-6px}
.strip-check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.strip-check .ck{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.55);display:block;position:relative;transition:background .15s,border-color .15s}
.strip-check input:checked+.ck{background:var(--accent);border-color:transparent}
.strip-check input:checked+.ck::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--on-accent,#fff);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.strip-check input:focus-visible+.ck{outline:3px solid #fff;outline-offset:2px}
.strip.unsel .strip-text{opacity:.55}
html[data-layout=desktop] .strip-check{margin-left:-8px}

/* ---------- power buttons: text only ---------- */
.power-btn .pw-ico{display:none!important}
.power-btn{font-weight:600;letter-spacing:.01em}

/* ---------- auto-reconnect: amber pulsing dot while it retries ---------- */
@keyframes elpulse{0%,100%{opacity:1}50%{opacity:.35}}
.strip[data-state=reconnecting] .dot,.set-strip[data-state=reconnecting] .dot,.rset[data-state=reconnecting]::before{background:#ff9f0a;animation:elpulse 1s infinite}
.strip[data-state=connecting] .dot,.set-strip[data-state=connecting] .dot{animation:elpulse 1s infinite}

/* ---------- remote: the hub's strips, with checkmarks, on this device ---------- */
.remote-mode .strip-list.has-remote{display:flex!important}
.remote-mode .strip.rstrip{display:block!important}
.rstrip .strip-main{cursor:default}
.rstrip .strip-head{padding-right:14px}
.rstrip[data-state=connected]{background:rgba(52,199,89,.16)}
html[data-layout=desktop] .rstrip[data-state=connected]{background:var(--card2)}
.remote-mode .remote-box .remote-strips.has-chips{display:none!important}
html:not([data-layout=desktop]) .remote-mode .bar .remote-box.has-chips[data-state=connected]{display:none!important}
.set-remote li.rset{display:flex;align-items:center;gap:8px;min-height:44px}
.set-remote li.rset::before{margin-right:0;flex:none}
.set-remote li.rset[data-state=connected]::before{background:#34c759}
.set-remote li.rset .strip-check{margin:0 -6px 0 -10px}
.set-remote li.rset .rs-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-remote li.rset.unsel .rs-text{opacity:.55}
.compact .strip[data-state=reconnecting] .btn-connect{font-size:0;width:44px;padding:0}
.compact .strip[data-state=reconnecting] .btn-connect::after{content:"↻";font-size:18px}