/* BandGap control-app theme (12 Oct 2026).
   The commissioning WORKFLOW is unchanged; this file is the LOOK, and the look is BandGap's own:
   rounded-square tiles, one dark surface throughout (no white settings lists), BandGap blue,
   line icons. Loaded from app.html <head>. Every selector is prefixed `html body` so it outranks
   the single-class rules app-config.js injects at runtime, whatever order they load in. */

html body{
  --bg-ink:#121418; --bg-card:#1d2026; --bg-card2:#23272e; --bg-line:#2a2e36;
  --bg-text:#eef1f4; --bg-text2:#9aa3ae; --bg-text3:#6f7884;
}

/* ---- phone chrome ---- */
html body .phone{border-radius:28px;background:var(--bg-ink);box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px #262a31}
html body .topbar{border-bottom:1px solid var(--bg-line)}
html body .topbar .title{font-weight:650;letter-spacing:-.01em}

/* ---- tiles: rounded squares, not circles ---- */
html body .disc{border-radius:22px;width:72px;height:72px}
html body .tile.lum .disc{background:#e4ebf1}
html body .tile.lum .disc .glyph{color:#18202a}
html body .tile.lum .disc.off{background:#2b2f36}
html body .tile.lum .disc.off .glyph{color:#7d8792}
html body .tile.grp .disc{background:#22262d}
html body .master .disc{background:linear-gradient(160deg,#272b33,#1d2026)}
html body .master .disc .cnt{color:var(--accent-ink);border-radius:6px}
html body .tile.sel .disc{border-color:var(--accent);box-shadow:0 0 0 3px rgba(62,166,221,.18)}
html body .level{width:48px;height:4px;border-radius:2px;background:rgba(255,255,255,.12)}
html body .tile .lbl{color:var(--bg-text2);font-size:11.5px}
html body .scene .sc{border-radius:22px;width:72px;height:72px}
html body .scene.on .sc{border-color:var(--accent);box-shadow:0 0 0 3px rgba(62,166,221,.18)}
html body .gcard{border-radius:14px}

/* ---- tab bar: line icons, accent bar over the active tab ---- */
html body .tabs{background:#16181d;border-top:1px solid var(--bg-line)}
html body .tab{position:relative}
html body .tab svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html body .tab.on{color:var(--accent)}
html body .tab.on::before{content:"";position:absolute;top:0;left:50%;width:26px;height:3px;margin-left:-13px;border-radius:0 0 3px 3px;background:var(--accent)}

/* ---- control sheet ---- */
html body .sheet{background:var(--bg-card);border-top:1px solid var(--bg-line)}
html body .modes button{background:var(--bg-card2);border-radius:10px}
html body .modes button.on{color:var(--accent-ink)}
html body .sw.on{background:var(--accent)}

/* ---- Settings tab list (static, app.html) ---- */
html body .slist{background:var(--bg-card);color:var(--bg-text)}
html body .srow{border-bottom:1px solid var(--bg-line)}
html body .srow .ic{background:rgba(62,166,221,.16);color:var(--accent)}
html body .srow .badge{background:var(--bg-card2);color:var(--bg-text2)}
html body .srow .chev{color:#4b525c}

/* ---- settings screens (injected by app-config.js): one dark surface, no white lists ---- */
html body .cfgscr{background:var(--bg-ink);color:var(--bg-text)}
html body .cfghead{background:#16181d;border-bottom:1px solid var(--bg-line)}
html body .cfgback,html body .cfgact{color:var(--accent)}
html body .cfgact.off{color:#4b525c}
html body .cfghint,html body .cfgcap{color:var(--bg-text2)}
html body .cfgsec{color:var(--bg-text3)}
html body .cfglist{background:var(--bg-card)}
html body .cfgrow{border-bottom:1px solid var(--bg-line)}
html body .cfgrow .ic{background:rgba(62,166,221,.16);color:var(--accent)}
html body .cfgrow .tx i,html body .cfgrow .rr,html body .cfgrow .val{color:var(--bg-text2)}
html body .cfgrow .chev{color:#4b525c}
html body .cfgrow .pill{background:var(--bg-card2);color:var(--bg-text2)}
html body .cfgrow .pill.set{background:var(--accent);color:var(--accent-ink)}
html body .cfgbtn{color:var(--accent-ink);font-weight:600}
html body .cfgbtn:disabled{background:#2f343c;color:#6f7884}
html body .cfgbtn.ghost{background:var(--bg-card2);color:var(--accent)}
html body .cfgfield{background:var(--bg-card)}
html body .cfgfield label{color:var(--bg-text3)}
html body .cfgfield input,html body .cfgfield select{color:var(--bg-text)}
html body .cfgfield.inline label{color:var(--bg-text)}
html body .cfgfield.inline input{color:var(--bg-text2)}
html body .cfgfield.inline input:focus{color:var(--bg-text)}
html body .cfgnote{background:rgba(62,166,221,.12);color:#9fd3ef}
html body .tog{background:#3a3f47}
html body .rad{border-color:#4b525c}
html body .cfgsearch{background:var(--bg-card2);color:var(--bg-text)}
html body .cfgsearch input{color:var(--bg-text)}
html body .chip{background:var(--bg-card2);color:#c9d0d8}
html body .chip.on{background:var(--accent);color:var(--accent-ink)}
html body .nbrow .ic{background:var(--bg-card2);color:var(--bg-text);border:1px solid #2f343c}
html body .sig b{background:#3a3f47}
html body .sig b.on{background:var(--bg-text)}
html body .sl{background:var(--bg-card)}
html body .sl .h{color:var(--bg-text)}
html body .sl .pm{background:#2f343c}
html body .sl input[type=range]{background:#3a3f47}
html body .seg{background:var(--bg-card2)}
html body .seg span{color:#c9d0d8}
html body .seg span.on{color:var(--accent-ink)}
html body .ashg{background:var(--bg-card)}
html body .asht{color:var(--bg-text2);border-bottom:1px solid var(--bg-line)}
html body .ashb{border-bottom:1px solid var(--bg-line)}
html body .ashb.cancel{background:var(--bg-card2)}
html body .spinc{background:var(--bg-card);color:var(--bg-text)}
html body .lumempty svg{color:#3a3f47}
html body .nbbar{background:var(--bg-card);border-color:var(--bg-line)}
html body .nbbar button{color:var(--accent-ink)}