/* digi-app · ui/look.css
   HER LOOK AND HER HOME, REBUILT (Nov 10, 2026; Brian: "our classic strip down and rebuild"). Loaded after app.css.
   EVERY COLOR IS A TOKEN (--g-*). :root is Dark (the night the film plays on); html[data-look] switches the ground
   once the film has settled (ui/look.js). The older screens' own words (--text, --muted, --tile) follow the tokens
   too, so a screen not yet rebuilt still reads in every look.
   Her color: --acc (bright, for dark grounds) and --acc-l (deep, for light grounds), from ui/themes.js; --g-her picks
   the right one. Red means the FREE level only; her color is hers. Contrast: tests/ checks every look x every color. */

:root{
  --g-bg:transparent; --g-card:var(--tile); --g-card2:rgba(255,255,255,.07); --g-ink:#fff; --g-sub:rgba(255,255,255,.74);
  --g-line:rgba(255,255,255,.09); --g-her:var(--acc); --g-link:var(--acc); --g-herbg:color-mix(in srgb,var(--acc) 16%,transparent);
  --g-shadow:none; --g-gold:#ffd27a; --g-goldbg:rgba(255,210,122,.12); --g-dock:color-mix(in srgb,var(--acc) 5%,rgba(14,12,16,.92));
  --g-pill:#f5f5f8; --g-pillink:#212121; --g-pillsub:rgba(33,33,33,.5);
  --g-fill:var(--acc-l);   /* her color behind white words (the stub, PLAY): always her deep tone, so white reads in every look */
}
html[data-look=day]{
  --g-bg:#f5f5f8; --g-card:#ffffff; --g-card2:#f1f1f4; --g-ink:#1a1a1d; --g-sub:#5b5b66; --g-line:rgba(0,0,0,.08);
  --g-her:var(--acc-l); --g-link:var(--acc-l); --g-herbg:color-mix(in srgb,var(--acc-l) 9%,#fff); --g-shadow:0 2px 10px rgba(20,20,40,.06);
  --g-gold:#7a5000; --g-goldbg:#fff2d2; --g-dock:rgba(255,255,255,.94); --g-pill:#f1f1f4;
}
/* Dusk: digiECOSYSTEM's own (eco-app.css html[data-elight=dusk]): a softer Day, tinted with her color */
html[data-look=dusk]{
  --g-bg:color-mix(in srgb,var(--acc-l) 12%,#dcdce4); --g-card:color-mix(in srgb,var(--acc-l) 5%,#eeeef2); --g-card2:color-mix(in srgb,var(--acc-l) 9%,#e6e6ec);
  --g-ink:#1a1a1d; --g-sub:#4f4f5a; --g-line:color-mix(in srgb,var(--acc-l) 15%,#cdcdd7);
  --g-her:var(--acc-l); --g-link:color-mix(in srgb,var(--acc-l) 62%,#000); --g-herbg:color-mix(in srgb,var(--acc-l) 6%,#f4f4f7); --g-shadow:0 2px 10px rgba(20,20,40,.06);
  --g-gold:#6e4800; --g-goldbg:#f6e7c4; --g-dock:color-mix(in srgb,var(--acc-l) 5%,#eeeef2); --g-pill:color-mix(in srgb,var(--acc-l) 4%,#f7f7f9);
}
/* Twilight: the evening sky, purple, a warm glow at the top */
html[data-look=twilight]{
  --g-bg:linear-gradient(180deg,#5a3550 0%,#3a2a4a 22%,#2a2140 48%,#221b33 100%); --g-card:#3a2f52; --g-card2:#463a61;
  --g-ink:#fff; --g-sub:rgba(255,255,255,.8); --g-line:rgba(255,255,255,.11);
  --g-her:color-mix(in srgb,var(--acc) 80%,#fff); --g-link:color-mix(in srgb,var(--acc) 80%,#fff); --g-herbg:color-mix(in srgb,var(--acc) 8%,#30274a); --g-shadow:0 6px 20px rgba(10,0,20,.25);
  --g-gold:#ffd27a; --g-goldbg:rgba(255,210,122,.14); --g-dock:rgba(42,32,62,.94);
}
/* the older screens' words follow the ground */
html[data-look=day],html[data-look=dusk]{--text:var(--g-ink);--muted:var(--g-sub);--faint:rgba(26,26,29,.42);--tile:var(--g-card);--tile-edge:var(--g-line)}
html[data-look=twilight]{--tile:var(--g-card);--tile-edge:var(--g-line)}

/* the ground: Day, Dusk and Twilight have their own; Dark keeps the night and her backgrounds (app.css) */
html[data-look=day] body,html[data-look=dusk] body,html[data-look=twilight] body{background:var(--g-bg) fixed;color:var(--g-ink)}
html[data-look=day],html[data-look=dusk]{background:#f5f5f8}
html[data-look=twilight]{background:#221b33}
html[data-look]:not([data-look=dark]) #bg,html[data-look]:not([data-look=dark]) #scene,html[data-look]:not([data-look=dark]) #stars{opacity:0;pointer-events:none}
body{transition:background-color .5s ease,color .5s ease}

/* ── the top bar: dM on the left, her Ticket on the right ── */
.tb{grid-template-columns:auto 1fr auto;height:60px}
.tkb{position:relative;display:flex;align-items:stretch;height:46px;border-radius:10px;background:var(--g-card);border:1.5px solid var(--g-line);box-shadow:var(--g-shadow);color:var(--g-ink);
  -webkit-mask:radial-gradient(circle 7px at 46px 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 7px at 46px 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 7px at 46px 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 7px at 46px 100%,#0000 98%,#000) bottom/100% 51% no-repeat;transition:transform var(--t-fast) var(--ease)}
.tkb:active{transform:scale(.97)}
.tk-st{width:46px;display:grid;place-items:center;font-size:20px;font-weight:900;color:#fff;background:var(--g-fill)}
.tk-pf{width:0;border-left:2px dashed var(--g-line);margin:8px 0}
.tk-lv{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 14px 0 12px}
.tk-lv small{font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--g-sub)}
.tk-lv b{font-size:17px;font-weight:900;letter-spacing:.04em;line-height:1.1}
.tkb.none{border-style:dashed;background:transparent;box-shadow:none}
.tkb.none .tk-st{background:transparent;color:var(--g-sub)}
@media (max-width:350px){.tk-lv b{font-size:15px}}

/* ── her cheer and the thin line ── */
.greet{color:var(--g-ink);font-size:28px;font-weight:900;line-height:1.15;letter-spacing:-.01em;margin:8px 2px 12px}
.greet .nm{color:var(--g-her)}
.h-hl:empty{display:none}
.h-line{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:0 16px;border-radius:16px;background:var(--g-card);border:1px solid var(--g-line);box-shadow:var(--g-shadow);font-size:15px;font-weight:800;color:var(--g-ink);text-align:left}
.h-line span{display:flex;align-items:center;gap:6px;white-space:nowrap}.h-line svg{width:18px;height:18px}
.h-line i{font-style:normal;color:var(--g-her)}
.h-line b{margin-left:auto;display:grid}.h-line b svg{width:20px;height:20px;fill:none;stroke:var(--g-sub);stroke-width:2.4}

/* ── her sections ── */
.h-home{display:block}
.h-s{margin-top:22px}
.h-s.anim{opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease)}.h-s.anim.in{opacity:1;transform:none}
.h-sec{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 10px}
.h-sec h2{margin:0;font-size:20px;font-weight:900;color:var(--g-ink);text-transform:none;letter-spacing:0}
.h-a{font-size:15px;font-weight:800;color:var(--g-link);padding:6px 0 6px 12px}
.h-list{border-radius:20px;background:var(--g-card);border:1px solid var(--g-line);box-shadow:var(--g-shadow);overflow:hidden}
.h-row{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;padding:0 14px;border-top:1px solid var(--g-line);text-align:left;color:var(--g-ink)}
.h-row:first-child{border-top:0}
.h-row .sq,.h-fav .sq{width:50px;height:50px;border-radius:var(--r-sq);overflow:hidden;display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px var(--g-line)}
.h-row .sq img,.h-fav .sq img{width:100%;height:100%;object-fit:contain}
.h-row .t{flex:1;min-width:0}.h-row b{display:block;font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-row small{display:block;font-size:14px;font-weight:600;color:var(--g-sub);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-off{flex:none;padding:9px 12px;border-radius:12px;background:var(--g-herbg);color:var(--g-her);font-size:17px;font-weight:900;line-height:1;text-align:center;min-width:58px}
.h-off em{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;margin-top:3px}
.h-off.t{font-size:13px;padding:10px}
.h-more{display:block;width:100%;margin-top:10px;min-height:48px;border-radius:14px;background:var(--g-card2);font-size:15px;font-weight:800;color:var(--g-ink)}
.h-empty{margin:0;padding:16px;border-radius:18px;background:var(--g-card);border:1px solid var(--g-line);font-size:15px;font-weight:600;line-height:1.4;color:var(--g-sub)}
.h-favs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.h-fav{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:16px;background:var(--g-card);border:1px solid var(--g-line);box-shadow:var(--g-shadow);text-align:center;color:var(--g-ink);min-width:0}
.h-fav .sq{width:46px;height:46px}.h-fav b{font-size:12.5px;font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}.h-fav i{font-style:normal;color:var(--g-her);font-size:14px;font-weight:800}
.h-save{display:block;width:100%;padding:18px;border-radius:20px;background:var(--g-card);border:1px solid var(--g-line);box-shadow:var(--g-shadow);text-align:left;color:var(--g-ink)}
.h-save .k{display:block;font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--g-sub)}
.h-save .big{display:block;font-size:40px;font-weight:900;letter-spacing:-.02em;margin:4px 0 2px}
.h-save .s{display:block;font-size:15px;font-weight:600;color:var(--g-sub)}
.h-dia{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--g-goldbg);font-size:15px;font-weight:700;line-height:1.35}
.h-dia svg{width:28px;height:28px;flex:none;fill:none;stroke:var(--g-gold);stroke-width:1.6;stroke-linejoin:round}.h-dia b{color:var(--g-gold);font-weight:900}
.h-q{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:10px;padding:12px 14px;border-radius:14px;background:var(--g-herbg);font-size:15px;font-weight:800;color:var(--g-ink)}
.h-q .bar{flex:1;height:8px;border-radius:9px;background:var(--g-line);overflow:hidden;display:block}.h-q .bar i{display:block;height:100%;background:var(--g-her)}
.h-games{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.h-g{min-height:96px;padding:14px;border-radius:18px;background:var(--g-card);border:1px solid var(--g-line);box-shadow:var(--g-shadow);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;color:var(--g-ink)}
.h-g b{font-size:16.5px;font-weight:900;line-height:1.2}.h-g span{font-size:14px;font-weight:800;color:var(--g-her)}.h-g span.ok{color:var(--g-sub)}
.h-lh{display:flex;align-items:center;gap:12px;padding:16px;border-radius:20px;background:var(--g-card);border:1px solid var(--g-line);box-shadow:var(--g-shadow)}
.h-lh .t{flex:1}.h-lh b{display:block;font-size:17px;font-weight:900}.h-lh small{font-size:14px;font-weight:600;color:var(--g-sub)}
.h-pill{min-height:48px;padding:0 22px;border-radius:999px;background:var(--g-fill);color:#fff;font-weight:900;font-size:15px;letter-spacing:.04em}
.h-lh2{display:flex;gap:10px;margin-top:10px}.h-lh2 button{flex:1;min-height:48px;border-radius:14px;background:var(--g-card2);font-size:15px;font-weight:800;color:var(--g-ink)}
.h-tk{margin-top:12px}
.h-get{display:block;width:100%;margin-top:12px;padding:16px;border-radius:18px;border:2px dashed var(--g-line);text-align:left;color:var(--g-ink)}
.h-get b{display:block;font-size:17px;font-weight:900;color:var(--g-her)}.h-get small{font-size:14px;font-weight:600;color:var(--g-sub)}
.h-edit{display:block;margin:26px auto 0;min-height:48px;padding:0 20px;font-size:15px;font-weight:800;color:var(--g-sub)}
/* Who helped you? on the new ground */
.h-s[data-sec=thanks]{padding:16px;border-radius:20px;background:var(--g-card);border:1px solid var(--g-line);box-shadow:var(--g-shadow)}

/* ── the dock: the light digiAPP mark is the standard (Brian, Nov 10, 2026), so the pill is light in every look ── */
html[data-look] .dock{background:var(--g-dock);border-color:var(--g-line);box-shadow:0 10px 30px rgba(0,0,0,.18)}
html[data-look] .dock-s{background:var(--g-pill);border-color:transparent;color:var(--g-pillsub)}
html[data-look] .dock-s .mark{color:rgba(33,33,33,.45)}
html[data-look] .dock-s .mark b{color:#212121;text-shadow:none}

/* ── sheets on the ground (the rest of their insides come with phase 3) ── */
html[data-look=day] .sh,html[data-look=dusk] .sh{background:var(--g-bg);color:var(--g-ink);border-color:var(--g-line)}
html[data-look=twilight] .sh{background:#2a2140}
html[data-look] .opt{background:var(--g-card);border-color:var(--g-line);color:var(--g-ink)}






.sw-auto{background:linear-gradient(135deg,#f5f5f8 50%,#120708 50%)}.sw-day{background:#f5f5f8}.sw-dusk{background:#e2d4da}.sw-twilight{background:#3a2a4a}.sw-dark{background:#120708}
.ed-r{display:flex;align-items:center;gap:8px;min-height:64px;padding:0 10px 0 16px;margin-bottom:8px;border-radius:16px;background:var(--g-card);border:1px solid var(--g-line);color:var(--g-ink)}
.ed-r b{flex:1;font-size:16px;font-weight:900}.ed-r.off b{opacity:.45}.ed-r small{font-size:13px;font-weight:700;color:var(--g-sub);padding:0 6px}
.ed-sh{min-height:44px;padding:0 14px;border-radius:12px;background:var(--g-card2);font-size:14px;font-weight:800;color:var(--g-ink)}
.ed-ar{width:48px;height:48px;border-radius:12px;background:var(--g-card2);display:grid;place-items:center}
.ed-ar svg{width:24px;height:24px;fill:none;stroke:var(--g-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.ed-ar:disabled{opacity:.3}
@media (prefers-reduced-motion: reduce){body,.h-s.anim{transition:none}}

/* ── SEARCH ON THE GROUND (phase 2, Nov 10, 2026): the website's search, the same tiles, in her look. Big words, sentence
   case headings (no tracked capitals), her level's globe in the bar, his percent at her level on every tile we know it ── */
html[data-look] .srch-bar{background:var(--g-card);border:1.5px solid var(--g-line);box-shadow:var(--g-shadow);min-height:58px}
html[data-look] .srch-bar:focus-within{border-color:var(--g-her)}
html[data-look] .srch-bar input{color:var(--g-ink);font-size:18px}
html[data-look] .srch-bar input::placeholder{color:var(--g-sub)}
html[data-look] .mic{background:var(--g-card2)}html[data-look] .mic svg{stroke:var(--g-ink)}html[data-look] .mic.on{background:var(--g-fill)}html[data-look] .mic.on svg{stroke:#fff}
html[data-look] .sr-k{font-size:18px;font-weight:900;letter-spacing:0;text-transform:none;color:var(--g-ink);margin:18px 2px 10px}
html[data-look] .sr-clear{font-size:15px;font-weight:800;color:var(--g-link)}
html[data-look] .rchip{min-height:44px;padding:0 16px;background:var(--g-card);border:1px solid var(--g-line);font-size:15px;font-weight:700;color:var(--g-ink)}
html[data-look] .mt{background:var(--g-card);border:1px solid var(--g-line);box-shadow:var(--g-shadow);color:var(--g-ink);min-height:150px;padding:14px}
html[data-look] .mt b{font-size:16px}
html[data-look] .mt small{font-size:13.5px;color:var(--g-sub);font-weight:600}
html[data-look] .mt .far{font-size:13px;color:var(--g-her)}
.mt-off{margin-top:auto;padding:6px 10px;border-radius:10px;background:var(--g-herbg);color:var(--g-her);font-size:14px;font-weight:900}
html[data-look] .mt .sq{width:54px;height:54px;box-shadow:0 0 0 1px var(--g-line)}
html[data-look] .pt{background:var(--g-herbg);border:1px solid color-mix(in srgb,var(--g-her) 22%,transparent);color:var(--g-ink);min-height:84px;padding:14px}
html[data-look] .pt svg,html[data-look] .allt svg,html[data-look] .drill svg,html[data-look] .sr-map svg{stroke:var(--g-her)}
html[data-look] .pt b{font-size:16px}html[data-look] .pt small{font-size:13.5px;color:var(--g-sub);font-weight:600}
html[data-look] .allt,html[data-look] .sr-map{background:var(--g-card);border:1px solid var(--g-line);color:var(--g-ink);min-height:54px;font-size:16px}
html[data-look] .drill b{font-size:20px;font-weight:900;color:var(--g-ink)}html[data-look] .drill small{font-size:14px;color:var(--g-sub)}
html[data-look] .drill .icon{width:48px;height:48px;border-radius:14px;background:var(--g-card2);display:grid;place-items:center}
html[data-look] .drill .icon svg{width:24px;height:24px;fill:none;stroke:var(--g-ink);stroke-width:2.6}
html[data-look] .srch-hint{font-size:16px;color:var(--g-sub)}
html[data-look] .sh-x{background:var(--g-card2);color:var(--g-ink)}
.sh .srch-bar{margin-right:44px}   /* clear of the sheet's close button */

/* ── THE LIGHT SHEETS FOLLOW HER LOOK (phase 3, Nov 10, 2026): his card, Thank the team, CONNECT, her menus. Day and Dusk
   keep them light; Twilight and Dark make them their own night. Their colors are tokens (--l-*), Day's by default. ── */
:root{--l-bg:#fff;--l-fill:#f1f1f4;--l-fill2:#f5f5f8;--l-ink:#1a1a1d;--l-sub:#5a5a62;--l-sub2:#6b6b74;--l-dim:#6e6e77;--l-line2:#e4e4ea;--l-off:#d4d4dc;--l-on:#fff;--l-her:var(--acc-l)}
html[data-look=dusk]{--l-bg:color-mix(in srgb,var(--acc-l) 3%,#f7f7f9);--l-fill:color-mix(in srgb,var(--acc-l) 6%,#ececf1);--l-fill2:color-mix(in srgb,var(--acc-l) 5%,#f0f0f4);--l-sub:#4f4f5a;--l-line2:color-mix(in srgb,var(--acc-l) 12%,#dcdce4)}
html[data-look=twilight]{--l-bg:#2f2645;--l-fill:#3e3358;--l-fill2:#3a2f52;--l-ink:#fff;--l-sub:rgba(255,255,255,.8);--l-sub2:rgba(255,255,255,.74);--l-dim:rgba(255,255,255,.62);--l-line2:rgba(255,255,255,.12);--l-off:rgba(255,255,255,.22);--l-on:#55487a;--l-her:var(--g-her)}
html[data-look=dark]{--l-bg:color-mix(in srgb,var(--acc) 4%,#151113);--l-fill:color-mix(in srgb,var(--acc) 6%,#252022);--l-fill2:color-mix(in srgb,var(--acc) 5%,#201b1d);--l-ink:#fff;--l-sub:rgba(255,255,255,.78);--l-sub2:rgba(255,255,255,.72);--l-dim:rgba(255,255,255,.6);--l-line2:rgba(255,255,255,.12);--l-off:rgba(255,255,255,.22);--l-on:#3a3234;--l-her:var(--acc)}
html[data-look] .sh.light{border-color:var(--l-line2)}
html[data-look=twilight] .sh.light .sh-x svg,html[data-look=dark] .sh.light .sh-x svg{stroke:#fff}
html[data-look=twilight] .sh.light .btn.ghost,html[data-look=dark] .sh.light .btn.ghost{background:var(--l-fill)!important;color:#fff!important}
html[data-look=twilight] .code,html[data-look=dark] .code{border-color:color-mix(in srgb,var(--l-her) 55%,transparent)}
html[data-look=twilight] .cxt-news,html[data-look=dark] .cxt-news{background:var(--l-fill2);border-color:var(--l-line2)}
html[data-look=twilight] .btn.thx,html[data-look=dark] .btn.thx{background:rgba(255,210,122,.14)!important;color:#ffd27a!important;box-shadow:inset 0 0 0 1.5px rgba(255,210,122,.5)!important}
/* the sheets that were always dark (her menus, Edit home) take Day and Dusk's ground already (above); her sheets' plain words */
html[data-look=day] .sh p,html[data-look=dusk] .sh p{color:var(--g-sub)}

/* ── SAVINGS IN HER LOOK (phase 3): Day and Dusk light, Twilight its purple; Dark keeps the night in her color. Bigger
   words, sentence-case headings ── */
html[data-look]:not([data-look=dark]) .sv-mirror div,html[data-look]:not([data-look=dark]) .sv-pl {background:var(--g-card);border:1px solid var(--g-line);box-shadow:var(--g-shadow)}
html[data-look] .sv-pl-t b,html[data-look] .sv-row b{font-size:16px}html[data-look] .sv-pl-t small,html[data-look] .sv-row small{font-size:14px}
html[data-look] .icon{background:var(--g-card2);border-color:var(--g-line)}
html[data-look=day] .icon svg,html[data-look=dusk] .icon svg{stroke:var(--g-ink)}




html[data-look] .yd-tg{background:var(--g-card2);border-color:var(--g-line);color:var(--g-ink)}
html[data-look=day] .yd-tg .k,html[data-look=dusk] .yd-tg .k{background:#c9c9d2}
html[data-look] .yd-tg.on .k{background:var(--g-fill)}

/* ── HER ACCOUNT AND SETTINGS (phase 4, Nov 10, 2026): her Ticket on top, big tiles 2 across, one level in with Back ── */
.ac-sh{background:var(--g-bg)!important;color:var(--g-ink)}
html:not([data-look]) .ac-sh,html[data-look=dark] .ac-sh{background:color-mix(in srgb,var(--acc) 4%,#120d0f)!important;color:#fff}
.ac{padding-bottom:30px}
.ac-tk{margin:4px 0 14px}
.ac-get{display:block;width:100%;margin:6px 0 14px;padding:18px;border-radius:20px;border:2px dashed var(--g-line);text-align:left;color:var(--g-ink)}
.ac-get b{display:block;font-size:19px;font-weight:900;color:var(--g-her)}.ac-get small{font-size:15px;font-weight:600;color:var(--g-sub)}
.ac-h{margin:6px 0 4px;font-size:26px;font-weight:900;color:var(--g-ink)}
.ac-p{margin:0 0 14px;font-size:16px;font-weight:600;line-height:1.4;color:var(--g-sub)}
.ac-k{margin:20px 2px 10px;font-size:18px;font-weight:900;color:var(--g-ink)}
.ac-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ac-t{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:118px;padding:14px;border-radius:20px;background:var(--g-card);border:1px solid var(--g-line);box-shadow:var(--g-shadow);text-align:left;color:var(--g-ink)}
.ac-t b{font-size:17px;font-weight:900;line-height:1.2;margin-top:auto}
.ac-t small{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--g-sub)}
.ac-t small em{font-style:normal;font-weight:900}
.ac-i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--g-herbg);flex:none}
.ac-i svg{width:22px;height:22px;fill:none;stroke:var(--g-her);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ac-sw{display:inline-block;width:14px;height:14px;border-radius:50%}
.ac-t:active,.ac-r:active,.ac-o:active,.ac-c:active{transform:scale(.985)}
.ac-list{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.ac-r{display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:12px 14px;border-radius:18px;background:var(--g-card);border:1px solid var(--g-line);text-align:left;color:var(--g-ink)}
.ac-r b{display:block;font-size:16px;font-weight:900}.ac-r small{font-size:14px;font-weight:600;color:var(--g-sub)}
.ac-wipe{display:block;margin:26px auto 0;min-height:48px;padding:0 16px;font-size:15px;font-weight:700;color:var(--g-sub);text-decoration:underline;text-underline-offset:3px}
.ac-top{display:flex;align-items:center;min-height:52px}
.ac-back{display:flex;align-items:center;gap:6px;min-height:52px;padding:0 10px 0 0;font-size:18px;font-weight:800;color:var(--g-ink)}
.ac-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ac-rows{display:flex;flex-direction:column;gap:10px}
.ac-o{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:12px 16px;border-radius:18px;background:var(--g-card);border:2px solid var(--g-line);text-align:left;color:var(--g-ink)}
.ac-o.on{border-color:var(--g-her)}
.ac-o span{flex:1}.ac-o b{display:block;font-size:17px;font-weight:900}.ac-o small{display:block;font-size:14px;font-weight:600;color:var(--g-sub);margin-top:2px}
.ac-o > svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--g-her);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ac-o img{width:40px;height:40px;border-radius:50%;flex:none}
.ac-o .sw{width:40px;height:40px;border-radius:12px;flex:none;border:1px solid var(--g-line)}
.ac-pts .ac-o{min-height:60px;border-width:1px}
.ac-colors{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ac-c{display:flex;align-items:center;gap:12px;min-height:72px;padding:0 14px;border-radius:18px;background:var(--g-card);border:2px solid var(--g-line);text-align:left;color:var(--g-ink)}
.ac-c.on{border-color:var(--g-ink)}
.ac-c i{width:38px;height:38px;border-radius:50%;flex:none}.ac-c b{flex:1;font-size:16px;font-weight:900}
.ac-c svg{width:22px;height:22px;fill:none;stroke:var(--g-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ac-f{width:100%;min-height:58px;margin:0 0 12px;font-size:18px;font-weight:700;background:var(--g-card)!important;color:var(--g-ink)!important;border:1.5px solid var(--g-line)!important}
.ac-seg{display:flex;gap:6px;padding:5px;border-radius:16px;background:var(--g-card2)}
.ac-seg button{flex:1;min-height:48px;border-radius:12px;font-size:16px;font-weight:800;color:var(--g-sub)}.ac-seg button.on{background:var(--g-card);color:var(--g-ink);box-shadow:var(--g-shadow)}
.ac-chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.ac .lock{margin-top:14px}
.ac .btn{margin:0 0 14px}
html[data-look=day] .ac .btn,html[data-look=dusk] .ac .btn{background:var(--g-fill);color:#fff}

/* ── the first-time tour (phase 4): her color as named tiles, her look as a list ── */
.tr-colors{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 18px}
.tr-c{display:flex;align-items:center;gap:12px;min-height:64px;padding:0 14px;border-radius:16px;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.12);text-align:left;color:#fff}
.tr-c.on{border-color:#fff}.tr-c i{width:34px;height:34px;border-radius:50%;flex:none}.tr-c b{font-size:16px;font-weight:900}
.tr-looks{display:flex;flex-direction:column;gap:8px;margin:4px 0 18px}
.tr-l{display:flex;align-items:center;gap:14px;min-height:62px;padding:0 14px;border-radius:16px;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.12);text-align:left;color:#fff}
.tr-l.on{border-color:var(--acc)}.tr-l .sw{width:36px;height:36px;border-radius:10px;flex:none;border:1px solid rgba(255,255,255,.2)}
.tr-l b{display:block;font-size:17px;font-weight:900}.tr-l small{font-size:14px;color:rgba(255,255,255,.75)}

/* ── PHASE 5 (Nov 10, 2026): Local Heroes' screens, the boards and her quests in her look. Her streak, COMPLETED! and
   every celebration keep the night (like the games: a flame and a glow need the dark); the walk stays near black for
   her battery. ── */
/* the boards: its own screen, not a game, so it follows her look */
html[data-look=day] .ct.bd,html[data-look=dusk] .ct.bd,html[data-look=twilight] .ct.bd{background:var(--g-bg)}
html[data-look=day] .ct.bd .ct-in,html[data-look=dusk] .ct.bd .ct-in{color:var(--g-ink)}
html[data-look=day] .ct.bd .ct-back,html[data-look=dusk] .ct.bd .ct-back{color:var(--g-ink)}
html[data-look=day] .ct.bd .ct-back svg,html[data-look=dusk] .ct.bd .ct-back svg{stroke:var(--g-ink)}
html[data-look] .ct.bd .ct-sub{color:var(--g-link)}
html[data-look=day] .ct.bd .ct-wait,html[data-look=dusk] .ct.bd .ct-wait{color:var(--g-sub)}
html[data-look=day] .bd-me,html[data-look=dusk] .bd-me,html[data-look=day] .bd-c,html[data-look=dusk] .bd-c{background:var(--g-card);border:1px solid var(--g-line);box-shadow:var(--g-shadow)}
html[data-look=day] .bd-c li,html[data-look=dusk] .bd-c li,html[data-look=day] .bd-tabs button,html[data-look=dusk] .bd-tabs button,
html[data-look=day] .bd-lv button,html[data-look=dusk] .bd-lv button{background:var(--g-card2);color:var(--g-ink)}
html[data-look=day] .bd-chips,html[data-look=dusk] .bd-chips{background:var(--g-card2)}
html[data-look=day] .bd-chips button,html[data-look=dusk] .bd-chips button{color:var(--g-sub)}
html[data-look=day] .bd-chips button.on,html[data-look=dusk] .bd-chips button.on{background:var(--g-ink);color:#fff}
html[data-look=day] .bd-sw,html[data-look=dusk] .bd-sw{border-color:var(--g-line)}
html[data-look=day] :is(.bd-sw small,.bd-note,.bd-w,.bd-0,.bd-c li small,.bd-c li b),html[data-look=dusk] :is(.bd-sw small,.bd-note,.bd-w,.bd-0,.bd-c li small,.bd-c li b){color:var(--g-sub)}
html[data-look=day] .bd-tg,html[data-look=dusk] .bd-tg{background:#c9c9d2}
/* the three boards' colors, deep enough for a light ground (AA) */
html[data-look=day] .bd-tabs .on.h,html[data-look=dusk] .bd-tabs .on.h{border-color:#cf0202;color:#cf0202}
html[data-look=day] .bd-tabs .on.l,html[data-look=dusk] .bd-tabs .on.l{border-color:#05672a;color:#05672a}
html[data-look=day] .bd-tabs .on.s,html[data-look=dusk] .bd-tabs .on.s{border-color:#1557c0;color:#1557c0}
html[data-look=day] .bd-c,html[data-look=dusk] .bd-c{--c1:#cf0202}html[data-look=day] .bd-c.l,html[data-look=dusk] .bd-c.l{--c1:#05672a}html[data-look=day] .bd-c.s,html[data-look=dusk] .bd-c.s{--c1:#1557c0}
html[data-look=day] .bd-c li:first-child b,html[data-look=dusk] .bd-c li:first-child b{color:#8a5a00}
html[data-look=twilight] .bd-me,html[data-look=twilight] .bd-c{background:var(--g-card)}
/* her quests (from the bar on her home, and inside the games) */
html[data-look=day] .qs,html[data-look=dusk] .qs{background:var(--g-card2);color:var(--g-ink)}
html[data-look=day] .qs-r b,html[data-look=dusk] .qs-r b{border-color:#9a9aa6}
html[data-look=day] .qs-r.on span,html[data-look=dusk] .qs-r.on span{color:var(--g-sub)}
html[data-look=day] :is(.qs-pts),html[data-look=dusk] :is(.qs-pts){color:var(--g-sub)}
html[data-look=day] :is(.qs-hd em,.qs-p),html[data-look=dusk] :is(.qs-hd em,.qs-p){color:#157a43}
html[data-look=day] .qs-hl,html[data-look=dusk] .qs-hl{background:rgba(21,122,67,.1)}
html[data-look=day] .qs-hl button,html[data-look=dusk] .qs-hl button{background:var(--g-card);color:var(--g-ink)}
html[data-look] .qs-sh .qs{margin-top:0}
html[data-look] .qs-r{font-size:17px}
html[data-look=day] .qs-r i,html[data-look=dusk] .qs-r i{color:var(--g-her)}
html[data-look=twilight] .qs{background:var(--g-card)}
/* My finds, her Local Heroes sheets */
html[data-look=day] :is(.lh-city,.lh-stats>div),html[data-look=dusk] :is(.lh-city,.lh-stats>div){background:var(--g-card);border-color:var(--g-line)}
html[data-look=day] .lh-stats b,html[data-look=dusk] .lh-stats b,html[data-look=day] .lh-done,html[data-look=dusk] .lh-done{color:var(--g-ink)}
html[data-look=day] :is(.lh-stats span,.lh-left),html[data-look=dusk] :is(.lh-stats span,.lh-left){color:var(--g-sub)}
html[data-look=day] .lh-meter,html[data-look=dusk] .lh-meter{background:var(--g-line)}
html[data-look=day] .lh-pcd.q,html[data-look=dusk] .lh-pcd.q{background:var(--g-card2);box-shadow:inset 0 0 0 1.5px var(--g-line);color:var(--g-sub)}
html[data-look=day] .lh-q,html[data-look=dusk] .lh-q{background:var(--g-card);color:var(--g-sub)}
html[data-look] :is(.lh-ch span,.zi-mi){color:var(--g-her)}
html[data-look] .lh-meter i,html[data-look] .lh-done svg{background:var(--g-her);stroke:var(--g-her)}
html[data-look] .lh-done svg{background:none}

html[data-look=twilight] :is(.lh-city,.lh-stats>div){background:var(--g-card)}
html[data-look] :is(.zi-pick em,.zi-got,.zi-ic){color:var(--g-her)}
html[data-look] .zi-ic{background:var(--g-herbg)}
html[data-look=day] .zi-pick,html[data-look=dusk] .zi-pick{background:var(--g-card);border:1px solid var(--g-line);box-shadow:var(--g-shadow);color:var(--g-ink)}
html[data-look=twilight] .zi-pick{background:var(--g-card)}
html[data-look=day] .lock,html[data-look=dusk] .lock{background:var(--g-card2);border-color:var(--g-line);color:var(--g-sub)}
html[data-look] .lock svg{stroke:var(--g-her)}

/* ── PHASE 6 (Nov 10, 2026): THE NIGHT STAYS THE NIGHT. The games (Light the City, Local Trivia, Discount Math, Merchant
   Memory), her streak, COMPLETED!, her level-up and the walk keep their own night in every look: inside them every
   token is the night's again, so Day's ink never lands on their dark ground. The boards (.ct.bd) are a screen, not a
   game, and follow her look. ── */
.ct:not(.bd),.sk,.zi-walk {--text:#fff;--muted:rgba(255,255,255,.66);--faint:rgba(255,255,255,.38);--tile:color-mix(in srgb,var(--acc) 7%,rgba(16,9,10,.88));--tile-edge:rgba(255,255,255,.08);
  --g-ink:#fff;--g-sub:rgba(255,255,255,.74);--g-card:var(--tile);--g-card2:rgba(255,255,255,.07);--g-line:rgba(255,255,255,.09);--g-her:var(--acc);--g-link:var(--acc);
  --g-herbg:color-mix(in srgb,var(--acc) 16%,transparent);--g-shadow:none;--g-gold:#ffd27a;--g-goldbg:rgba(255,210,122,.12);
  --l-bg:#151113;--l-fill:#252022;--l-fill2:#201b1d;--l-ink:#fff;--l-sub:rgba(255,255,255,.78);--l-sub2:rgba(255,255,255,.72);--l-dim:rgba(255,255,255,.6);--l-line2:rgba(255,255,255,.12);--l-her:var(--acc)}
html[data-look] .ct:not(.bd) .qs{background:rgba(255,255,255,.07);color:#fff}