/* Control Room: the plain skin (2026-09-28). The owner asked for "easy to read, high contrast, not cluttered", not cool.
   Loaded LAST, after the pane's own styles, store-admin.css and media.css, and only overrides them:
   one normal font, real text sizes, near-white text on solid black panels, no glow / scanlines / stripes / gradients.
   Colours mean one thing each: white = the main button, red = danger or needs attention, green = on / in stock.
   Delete its <link> in admin/index.html to get the old look back. */
:root{
 --bg:#000;--panel:#161616;--panel2:#161616;--edge:#444;--line:#3d3d3d;
 --ink:#fff;--dim:#dcdcdc;--faint:#b4b4b4;
 --vfd:#ff4d5e;--vfdglow:transparent;--red:#ff5c5c;--stamp:#ff5c5c;--ok:#4ade80;
 --gold:#fff;--gold2:#fff;--blue:#fff;--blue2:#fff;--paper:#fff;
 --mono:Archivo,'Helvetica Neue',Arial,sans-serif;--disp:Archivo,'Helvetica Neue',Arial,sans-serif;
}
html,body{background:#000;font-family:var(--body);font-size:15px}
body{background:#000!important}
*,*:before,*:after{letter-spacing:normal!important;text-shadow:none!important}
svg{filter:none!important}
.vfdtxt{color:#fff}

/* ---------- sign-in */
.seal{box-shadow:none;border:2px solid #fff;background:#000}
.seal img{filter:none}
.t-k{color:var(--dim)}
.t-h{font-weight:800;font-size:28px}
.box{background:#161616;border:2px solid #555;box-shadow:none}
.box:after{display:none}
.box.cur{border-color:#fff;box-shadow:none}
.box i{background:#fff;box-shadow:none}
.key{background:#1e1e1e;border:1px solid #555;box-shadow:none;font-family:var(--body);font-weight:700}
.key:active{background:#333}
.key.fn{color:#fff}
.key.go{background:#fff;color:#000;border-color:#fff}
.msg.bad{color:var(--red)}.msg.good{color:var(--ok)}
.granted b{font-family:var(--body);font-weight:800;text-shadow:none}

/* ---------- header + tabs */
.top{background:#000;border-bottom:1px solid #444;box-shadow:none}
.top:before{display:none}
.brand b{font-weight:800;font-size:20px}
.brand small{color:var(--dim)}
.live{background:#161616;border:1px solid #444;box-shadow:none}
.live i{box-shadow:none;animation:none}
.live b{font-family:var(--body);font-weight:800}
.upd b{color:#fff}
.ghost{border:1px solid #777;color:#fff;border-radius:6px;padding:8px 12px}
.ghost:hover{border-color:#fff;background:#222}
.tabs{background:#000;border-top:1px solid #444;box-shadow:none}
.tab{color:#c8c8c8;font-weight:700}
.tab.on{color:#000;background:#fff;text-shadow:none}
.tab.on svg{filter:none}
@media(min-width:860px){.tabs{border:0}.tab{border:1px solid #444;border-radius:8px}.tab.on{background:#fff;border-color:#fff}}
.tab[data-badge]:not([data-badge=""]):before{box-shadow:none;background:#ff2b3f;font-family:var(--body);font-weight:800}

/* ---------- section titles + panels */
h2{font-weight:800;font-size:17px;color:#fff;margin:28px 0 12px}
h2:after{background:#444}
.card{background:#161616;border:1px solid #3d3d3d;box-shadow:none;border-radius:10px}
.note{color:var(--dim);line-height:1.55}
.empty{color:var(--dim)}

/* ---------- buttons + inputs */
.btn{background:#2a2a2a;border:1px solid #666;box-shadow:none;color:#fff;font-weight:700;border-radius:8px;padding:11px 15px}
.btn:hover{border-color:#fff}
.btn.gold,.btn.amber{background:#fff;color:#000;border-color:#fff}
.btn.gold:hover{background:#e6e6e6}
.btn.red{background:#d9142b;border-color:#d9142b;color:#fff}
.ib{background:#2a2a2a;border:1px solid #666;box-shadow:none;color:#fff}
.ib.del{color:#ff6b6b}
.ib.playing{color:var(--ok)}
input[type=datetime-local],input[type=date],input[type=text],input[type=password],input[type=search],input[type=number],input[type=tel],input:not([type]),select,textarea{background:#000!important;border:1px solid #777!important;color:#fff!important;font-family:var(--body)!important;font-size:15px!important}
input::placeholder,textarea::placeholder{color:#9a9a9a}
input:focus,select:focus,textarea:focus{border-color:#fff!important;box-shadow:0 0 0 2px #fff!important}
:focus-visible{outline:2px solid #fff!important;outline-offset:2px}

/* ---------- switches: plain pill, green when on, red for the danger ones */
.tg{background:#333;border:1px solid #777;box-shadow:none}
.tg i{background:#fff;box-shadow:none}
.tg.on{background:#16a34a;border-color:#16a34a;box-shadow:none}
.tg.on i{background:#fff;box-shadow:none}
.tg.danger.on{background:#d9142b;border-color:#d9142b;box-shadow:none}
.tg.danger.on i{background:#fff;box-shadow:none}
.sw{border-bottom:1px solid #333}
.sw b{font-weight:800;font-size:16px}
.sw small{color:var(--dim)}

/* ---------- new-order alert: one solid red box, no stripes, no pulsing */
#alert{background:#2a0508;border:2px solid #ff2b3f;box-shadow:none;animation:none}
#alert .al1,#alert .al1.ord{background:#ff2b3f;color:#fff;font-family:var(--body);font-weight:800;font-size:16px}
#alert .al1 i,#alert .al1.ord i{background:#fff;box-shadow:none;animation:none}
#alert .al2{border-top:0;color:#fff}
#alert .al2 em{color:#fff}

/* ---------- pulse */
.meter .v{font-family:var(--body);font-weight:800;background:#000;box-shadow:none;color:#fff}
.meter .v:before{display:none}
.meter.hot .v{color:var(--ok)}
.meter .l{color:var(--dim)}
.rng button{background:#000;border:1px solid #666;color:#fff}
.rng button.on{background:#fff;color:#000;border-color:#fff}
.bar{background:#ff4d5e;box-shadow:none}
.col.today .bar{background:#fff;box-shadow:none}
.col small{color:var(--dim)}
.hr .n{color:#fff}
.hr .tr i{background:#ff4d5e;box-shadow:none}
.fe,.ae,.wv{border-bottom:1px solid #2e2e2e}
.fe time,.ae time,.wv1 time{color:var(--faint)}
.k-play{color:#fff}.k-gate2,.k-mcu{color:#fff}
.ip{color:#fff;text-decoration:underline}
.tag{border-color:#666;color:var(--dim)}

/* ---------- music */
.drop{border-color:#777;background:#111}
.drop:hover,.drop.over{background:#1e1e1e;border-color:#fff}
.drop b{color:#fff;font-family:var(--body);font-weight:800}
.prog i,.trk .rbar i{background:#fff}
.trk.first{box-shadow:0 0 0 2px #fff}
.trk .num{font-family:var(--body);font-weight:800}
.trk.first .num{color:#fff}
.rep{background:#2a2a2a;border:1px solid #666;box-shadow:none;color:#fff;font-family:var(--body)}
.trk.over{box-shadow:0 0 0 2px #fff}
.savebar{background:#161616;border:2px solid #fff;box-shadow:none}
.banprev{background:#ff1f3d}

/* ---------- toast + confirm sheet */
.toast{background:#fff;color:#000;border:0;box-shadow:0 8px 24px rgba(0,0,0,.6);font-weight:700}
.toast.bad{background:#d9142b;color:#fff}
.sheet{background:rgba(0,0,0,.85)}
.sheet h3{font-family:var(--body);font-weight:800}
.sheet p{color:var(--dim)}

/* ---------- orders + products (store-admin.css) */
.sa-c{background:#000;border:1px solid #666;color:#fff;font-family:var(--body);font-weight:700}
.sa-c.on{background:#fff;border-color:#fff;color:#000;box-shadow:none}
.sa-c.hot:not(.on){border-color:#ff4d5e;color:#ff6b78}
.sa-search{background:#000;border:1px solid #777}
.sa-search input,.md-search input{background:none!important;border:0!important;box-shadow:none!important}
.sa-search:focus-within,.md-search:focus-within{border-color:#fff;box-shadow:0 0 0 2px #fff}
.sa-demo{border:1px solid #777;background:#161616}
.sa-demo b{color:#fff}
.sa-row.out{box-shadow:0 0 0 1px #7a2a2a}
.sa-mid small{color:var(--dim)}
.t-new{color:#fff}.t-hid{color:var(--faint)}.t-demo{color:var(--faint)}
.sa-tags i{border-color:#777}
.sa-th{background:#000;border:1px solid #444}

/* ---------- media (media.css) */
.md-search{background:#000;border:1px solid #777}
.md-c{background:#000;border:1px solid #666;color:#fff}
.md-c b{color:var(--dim)}
.md-c.on,.md-c.star.on{background:#fff;border-color:#fff;color:#000}
.md-c.on b{color:#000}
.md-bar{color:var(--dim)}

/* ---------- text-size floor: every label that was 8.5-12.5px, bumped (generated from the three stylesheets) */
.pill,
.sa-tags i,
.tag{font-size:11.5px!important}
.t-k{font-size:12px!important}
.t-s{font-size:12.5px!important}
#saAlerts span,
.bar em,
.brand small,
.col small,
.ghost,
.md-bd,
.md-f>span,
.md-ic span,
.md-info b,
.md-more,
.md-qi .s,
.md-qi .th,
.md-saved,
.md-use,
.meter .l,
.rep,
.rng button,
.sa-c.sm,
.sa-cat-h span,
.sa-kv span,
.sa-oh span,
.sa-pic em,
.sa-pic.add,
.sa-sw,
.seg.sa-st button,
.src,
.tab{font-size:13px!important}
.ae b,
.ae time,
.btn,
.fe .fl,
.fe time,
.md-bar,
.md-bar select,
.md-c,
.md-vh .n,
.rh .id,
.sa-ago,
.sa-f>span,
.sa-lbl,
.sa-mid small,
.sa-tgc small,
.sa-tgc.none,
.seg button,
.upd,
.wv1 time,
.wv3{font-size:13.5px!important}
.drop small,
.live,
.md-info,
.md-opt,
.md-pub,
.md-qi,
.md-sb b,
.md-tag,
.sa-c,
.sa-o,
.sa-oh2 span,
.sa-take small,
.sa-tgbot small,
.savebar,
.sw small,
.tab,
.toast{font-size:14px!important}
#alert .al2,
.note{font-size:14.5px!important}
.ae,
.banprev,
.empty,
.fe,
.hr,
.key.fn,
.md-empty,
.md-pv .md-ic span,
.md-tag button,
.msg,
.sa-demo,
.sa-items .tot,
.sa-new,
.sa-tglink small,
.sheet p,
.trk .fields input,
.wv{font-size:15px!important}

/* ---------- stock switches + size/flavor chips: solid green = in stock, solid red = sold out */
.sa-sw{background:#b91c1c;border:1px solid #b91c1c;color:#fff;font-family:var(--body);font-weight:800}
.sa-sw i{background:#fff;box-shadow:none}
.sa-sw.on{background:#15803d;border-color:#15803d;color:#fff}
.sa-sw.on i{background:#fff;box-shadow:none}
.sa-o{background:#000;border:1px solid #4ade80;color:#4ade80;font-family:var(--body);font-weight:700}
.sa-o.out{border-color:#ff6b6b;color:#ff6b6b;background:#000}

/* ---------- order cards: a solid coloured edge says the status (red new, white confirmed, green done), no glow */
.sa-ord:before{width:6px;box-shadow:none!important}
.sa-ord.st-new{border:2px solid #ff2b3f;box-shadow:none}
.sa-ord.st-new:before{background:#ff2b3f}
.sa-ord.st-confirmed:before{background:#fff}
.seg{background:#000;border:1px solid #555;box-shadow:none}
.seg button{color:#d0d0d0;font-weight:700}
.seg.sa-st button.on[data-st],.seg.sa-seg4 button.on,.seg.sa-seg2 button.on{background:#fff;color:#000;box-shadow:none}
.seg.sa-st button.on[data-st=new]{background:#ff2b3f;color:#fff}
.seg.sa-st button.on[data-st=done]{background:#15803d;color:#fff}
.sa-steps a{color:#fff}
.sa-dot.on{box-shadow:none}

/* ---------- orders top row: on a phone the switch gets its own line, the Telegram / pop-up pills wrap under it */
.sa-otop{flex-wrap:wrap;row-gap:10px}
.sa-take{flex:1 1 220px}
.sa-take b{font-family:var(--body);font-weight:800;font-size:17px}
#saAlerts span{font-size:13px!important}
@media(max-width:859px){.tab{font-size:12px!important}}

/* ================= "grandma mode" forms (2026-09-29): the owner could barely tell the dark boxes were editable.
   Every place you type is a white box with black text, like a paper form; labels are big and plain. */
input[type=text],input[type=password],input[type=search],input[type=number],input[type=tel],input[type=date],input[type=datetime-local],input:not([type]),select,textarea{
 background:#fff!important;color:#000!important;border:2px solid #fff!important;border-radius:8px!important;font-size:17px!important;padding:12px 14px!important;color-scheme:light!important}
input::placeholder,textarea::placeholder{color:#6b6b6b!important;opacity:1}
input:focus,select:focus,textarea:focus{border-color:#ff2b3f!important;box-shadow:0 0 0 3px #ff2b3f!important}
.sa-search,.md-search{background:#fff!important;border:2px solid #fff!important;color:#000}
.sa-search svg,.md-search svg{stroke:#000!important;color:#000}
.sa-search input,.md-search input{background:none!important;border:0!important;box-shadow:none!important;padding:12px 0!important}
.sa-search:focus-within,.md-search:focus-within{border-color:#ff2b3f!important;box-shadow:0 0 0 3px #ff2b3f}

/* a label + hint + box, one per row */
.sa-info{display:grid;gap:24px;padding:18px}
.sa-g{display:grid;gap:6px;min-width:0}
.sa-g>b{font:800 17px/1.25 var(--body);color:#fff}
.sa-g>small{font-size:14.5px!important;line-height:1.4;color:#d4d4d4;margin-top:-2px}
.sa-lbl2{font:700 14.5px var(--body);color:#d4d4d4;margin-bottom:6px}
.sa-info .sw{border-bottom:0;padding:0}
.sa-more summary{cursor:pointer;font:800 16px var(--body);color:#fff;padding:4px 0;list-style-position:inside}
.sa-more[open] summary{margin-bottom:16px}

/* one big save per part: grey "ALL SAVED" until you type, then green "SAVE CHANGES" (sticks to the bottom of the screen) */
.sa-save{width:100%;padding:17px 14px;border-radius:10px;border:2px solid #4a4a4a;background:#1f1f1f;color:#bdbdbd;font:800 17px var(--body);cursor:default}
.sa-save.dirty{background:#22c55e;border-color:#22c55e;color:#000;cursor:pointer;position:sticky;bottom:calc(88px + env(safe-area-inset-bottom));z-index:5;box-shadow:0 6px 20px rgba(0,0,0,.7)}
@media(min-width:860px){.sa-save.dirty{bottom:16px}}
#pinGo{background:#fff;border-color:#fff;color:#000;cursor:pointer}

/* open / paused: a big card that says it in words, green or red */
.sa-open{display:flex;align-items:center;gap:16px;padding:18px;margin-bottom:14px;border:3px solid #ff2b3f;background:#2a0508}
.sa-open.on{border-color:#22c55e;background:#06200f}
.sa-open b{display:block;font:800 19px/1.2 var(--body);color:#fff}
.sa-open small{display:block;margin-top:4px;font-size:14.5px!important;color:#e5e5e5}

/* switches say ON / OFF in words */
.tg{width:76px!important;height:38px!important;border-radius:19px!important;flex:none}
.tg i{width:30px!important;height:30px!important;top:3px!important;left:3px!important}
.tg.on i{left:41px!important}
.tg:before{content:"OFF";position:absolute;right:10px;top:50%;transform:translateY(-50%);font:800 13px/1 var(--body);color:#fff}
.tg.on:before{content:"ON";right:auto;left:11px}

/* ================= Wikipedia-night palette (2026-09-29): softer charcoal instead of pure black, blue for the
   main buttons and whatever is selected, serif section titles with a hairline under them. Green = save / on,
   red = danger / needs attention, as before. The fields stay white (the owner reads those best). */
html,body,body{background:#101418!important}
.top,.tabs{background:#101418}
.top{border-bottom-color:#3a4046}
.card,.sa-ed-in{background:#1c2126;border-color:#3a4046}
.sa-ed-h{background:#1c2126!important;border-bottom:1px solid #3a4046}
.sa-ed-h b{font:800 20px/1.1 var(--body)}
:root{--ink:#eaecf0;--dim:#c8ccd1;--faint:#a2a9b1;--line:#3a4046}
a,.ip,.sa-steps a{color:#88a3e8}
.ghost{border-color:#72777d}
.btn{background:#27292d;border-color:#72777d}
.btn.gold,.btn.amber,#pinGo{background:#3366cc!important;border-color:#3366cc!important;color:#fff!important}
.btn.gold:hover,#pinGo:hover{background:#4b77d6!important}
.btn.red{background:#d73333;border-color:#d73333}
.tab.on,.sa-c.on,.rng button.on,.md-c.on,.md-c.star.on{background:#3366cc!important;border-color:#3366cc!important;color:#fff!important}
.md-c.on b{color:#fff}
.seg.sa-st button.on[data-st],.seg.sa-seg4 button.on,.seg.sa-seg2 button.on{background:#3366cc;color:#fff}
.seg{background:#101418;border-color:#72777d}
@media(min-width:860px){.tab{border-color:#3a4046}}

/* section titles: serif, sentence case, hairline under (like a Wikipedia article) */
h2{font:400 24px/1.2 Georgia,'Linux Libertine','Times New Roman',serif!important;color:#eaecf0;text-transform:lowercase;border-bottom:1px solid #54595d;padding-bottom:6px;margin:32px 0 14px}
h2::first-letter{text-transform:uppercase}
h2:after{display:none}

/* field labels ("Your hours", "Price in $"...): a blue bar on the left so each one stands out from its hint */
.sa-g>b,.sw>b{border-left:4px solid #6485d1;padding-left:10px;font-size:17.5px!important;color:#fff}
.sa-g>small,.sw>small{padding-left:14px}
.lock .sw>b{border-left-color:#d73333}

/* ================= Products tab, grandma mode */
.sa-help{margin:4px 0 12px;font-size:15px;line-height:1.45;color:#c8ccd1}
.sa-help b{color:#fff}
.sa-mid b{font-size:17px}
.sa-mid small{font-size:14.5px!important}
.sa-new{font-size:15px!important}
.sa-sec{gap:22px;border-bottom:1px solid #3a4046}
.sa-ed-b{background:#101418}
/* each size / flavor is its own little card: name on top, price + sale side by side, in-stock switch + remove below */
.sa-optrows{gap:12px}
.sa-or{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;padding:14px;border:1px solid #3a4046;border-radius:10px;background:#1c2126}
.sa-or-l{grid-column:1/-1}
.sa-or .sa-g>b{font-size:15.5px!important}
.sa-or-f{grid-column:1/-1;display:flex;align-items:center;gap:10px}
.sa-or-f span{font:800 16px var(--body);color:#fff}
.sa-or-f .btn{margin-left:auto}
.sa-orb{align-items:center;gap:8px}
.sa-orq{font:700 14.5px var(--body);color:#c8ccd1;margin-left:6px}
.sa-edsave{margin:18px 0 6px}
.sa-save.dirty.sa-edsave{bottom:8px}
h2{display:block!important}
h2 .rng{float:right;margin-top:2px}
.sa-pic.add{border:2px dashed #72777d!important;background:#1c2126!important;color:#fff!important}