/* Colour mode (2026-10-20): Light and Dark. Loaded AFTER glass.css, so it wins by selector.
   Both modes switch the glass look OFF on purpose (Saiful: the cream beige hurts, she wants plain
   black and white): flat surfaces, thin lines, no blur, no gradient. Auto on a light phone sets no
   data-theme and keeps the glass look as it was. Screen only: print is A4, plain white, and untouched. */
.themebtn{flex:0 0 auto; white-space:nowrap; min-height:34px; padding:4px 12px; font-size:13px}
@media(max-width:720px){ header.top .themebtn{order:2; min-height:32px; padding:3px 9px; font-size:12px} }
@media print{ .themebtn{display:none !important} }

@media screen{
:root[data-theme="light"]{
  color-scheme:light;
  --t-bg:#ffffff; --t-card:#ffffff; --t-soft:#f3f3f3; --t-line:#d4d4d4; --t-line2:#8f8f8f; --t-input:#ffffff;
  --t-ink:#111111; --t-mut:#4d4d4d;
  --t-accent:#2f6b4f; --t-accentink:#ffffff; --t-accentsoft:#e8f1ec;
  --t-ok:#1c6b45; --t-oksoft:#e6f3ec; --t-warn:#8a4f00; --t-warnsoft:#fdf1e0; --t-bad:#a52a2a; --t-badsoft:#fdecec;
  --t-strong:#111111; --t-strongink:#ffffff;
  --tint-g:#f3f3f3; --tint-y:#f3f3f3; --tint-b:#f3f3f3; --tint-r:#fdecec; --tint-w:#fdf1e0;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --t-bg:#101315; --t-card:#181c1f; --t-soft:#21262a; --t-line:#30373c; --t-line2:#4b555c; --t-input:#101315;
  --t-ink:#e9edf0; --t-mut:#a4afb7;
  --t-accent:#6cc79f; --t-accentink:#0b1a13; --t-accentsoft:#1a2e25;
  --t-ok:#6cc98a; --t-oksoft:#16291d; --t-warn:#e2ac5f; --t-warnsoft:#2e2412; --t-bad:#f08a7c; --t-badsoft:#331b18;
  --t-strong:#2b3136; --t-strongink:#ffffff;
  --tint-g:#1b2b23; --tint-y:#2a2618; --tint-b:#1c2630; --tint-r:#321d1b; --tint-w:#2e2513;
}
:root[data-theme]{
  background:var(--t-bg);
  --ink:var(--t-ink); --mut:var(--t-mut); --line:var(--t-line); --bg:var(--t-bg); --card:var(--t-card);
  --accent:var(--t-accent); --info:var(--t-accent); --ok:var(--t-ok); --warn:var(--t-warn); --bad:var(--t-bad); --ok-ink:var(--t-ok);
  --g-ink:var(--t-ink); --g-mut:var(--t-mut); --g-copper:var(--t-accent); --g-copper-soft:var(--t-accent);
  --g-edge:var(--t-line); --g-card:var(--t-card); --g-dark:var(--t-strong);
  --g-shadow:none;
}
:root[data-theme] body{background:var(--t-bg); color:var(--t-ink)}
:root[data-theme] body::before{display:none}
:root[data-theme] h1,:root[data-theme] h2,:root[data-theme] h3{color:var(--t-ink)}
:root[data-theme] h1{font-family:inherit; font-size:21px; font-weight:650; letter-spacing:0}
@media(max-width:720px){ :root[data-theme] h1{font-size:19px} }
:root[data-theme] a{color:var(--t-accent)}
:root[data-theme] .eyebrow{color:var(--t-accent)}
:root[data-theme] .muted,:root[data-theme] .hint,:root[data-theme] .count-line,:root[data-theme] .meta,:root[data-theme] .sub,:root[data-theme] label{color:var(--t-mut)}

/* flat surfaces: no blur, no gradient, thin line */
:root[data-theme] header.top,:root[data-theme] .card,:root[data-theme] .stat,:root[data-theme] .empty,
:root[data-theme] .notice,:root[data-theme] .err,:root[data-theme] dialog{
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
:root[data-theme] header.top{background:var(--t-card); border-bottom:1px solid var(--t-line)}
:root[data-theme] .card,:root[data-theme] .stat,:root[data-theme] .empty{
  background:var(--t-card); border:1px solid var(--t-line); border-radius:10px; box-shadow:none; color:var(--t-ink);
}
:root[data-theme] .card{padding:16px 18px}
@media(max-width:720px){ :root[data-theme] .card{padding:12px 10px; border-radius:10px} }
:root[data-theme] .empty{background:var(--t-card); color:var(--t-mut)}
:root[data-theme] .card::before,:root[data-theme] .stat::before{display:none}
:root[data-theme] .stat{transform:none; transition:none; padding:16px 18px}
:root[data-theme] .stat:hover{box-shadow:none; border-color:var(--t-line2)}
:root[data-theme] .stat strong,:root[data-theme] .stat.info strong,:root[data-theme] .stat.ok strong,:root[data-theme] .stat.bad strong{color:var(--t-ink); letter-spacing:-1px; font-size:clamp(34px,4.6vw,46px)}
:root[data-theme] .stat-label{color:var(--t-mut)}
:root[data-theme] .stat.bad{background:var(--t-badsoft)}
:root[data-theme] .stat.bad strong{color:var(--t-bad)}
:root[data-theme] .stat.warn{background:var(--t-strong); border-color:var(--t-strong); color:var(--t-strongink); box-shadow:none}
:root[data-theme] .stat.warn .stat-label,:root[data-theme] .stat.warn .hint{color:var(--t-strongink); opacity:.78}
:root[data-theme] .stat.warn strong{color:var(--t-strongink)}
:root[data-theme] .glass-stats .stat{color:var(--t-ink)}
:root[data-theme] .glass-stats .stat.warn{color:var(--t-strongink)}
:root[data-theme] .notice{background:var(--t-warnsoft); border:1px solid var(--t-line); color:var(--t-warn); border-radius:8px}
:root[data-theme] .err{background:var(--t-badsoft); border:1px solid var(--t-line); color:var(--t-bad); border-radius:8px}
:root[data-theme] .readystrip{background:var(--t-soft)}
:root[data-theme] .band.now{border-left-color:var(--t-accent)}
:root[data-theme] #toast{background:var(--t-strong); color:var(--t-strongink); border:1px solid var(--t-line2)}
:root[data-theme] dialog{background:var(--t-card); color:var(--t-ink); border:1px solid var(--t-line2); border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.35)}
:root[data-theme] dialog::backdrop{background:rgba(0,0,0,.5)}

/* tabs: no sliding pill */
:root[data-theme] .brand{color:var(--t-ink); font-weight:650}
:root[data-theme] .tabs a{color:var(--t-mut); border-radius:7px}
:root[data-theme] .tabs a:hover{color:var(--t-ink); background:var(--t-soft)}
:root[data-theme] .tabs a.on,:root[data-theme] .tabs.has-pill a.on,:root[data-theme] .tabs:not(.has-pill) a.on{background:var(--t-accentsoft); color:var(--t-accent); box-shadow:none}
:root[data-theme] .tabs .glass-pill{display:none}

/* buttons */
:root[data-theme] button,:root[data-theme] button.small{
  background:var(--t-card); color:var(--t-ink); border:1px solid var(--t-line2); border-radius:8px; box-shadow:none; font-weight:600;
}
:root[data-theme] button:hover{background:var(--t-soft); border-color:var(--t-ink); transform:none}
:root[data-theme] button.primary,:root[data-theme] button.primary:hover{
  background:var(--t-accent); border:1px solid var(--t-accent); color:var(--t-accentink); box-shadow:none; transform:none;
}
:root[data-theme] button.primary:hover{filter:brightness(.92)}
:root[data-theme] button.danger{color:var(--t-bad); border-color:var(--t-bad)}
:root[data-theme] button.tiny{border-radius:3px}
:root[data-theme] .turnbtn.on{background:var(--t-strong); color:var(--t-strongink); border-color:var(--t-strong)}
:root[data-theme] .themebtn{border-radius:999px}
:root[data-theme] .hubbtn{background:transparent; color:var(--t-accent); border-color:var(--t-accent)}
:root[data-theme] .hubbtn:hover{background:var(--t-accentsoft)}

/* fields */
:root[data-theme] input,:root[data-theme] select,:root[data-theme] textarea{
  background:var(--t-input); color:var(--t-ink); border:1px solid var(--t-line2); border-radius:8px; box-shadow:none;
}
:root[data-theme] input:focus,:root[data-theme] select:focus,:root[data-theme] textarea:focus{outline:2px solid var(--t-accent); outline-offset:1px; background:var(--t-input)}
:root[data-theme] input::placeholder,:root[data-theme] textarea::placeholder{color:var(--t-mut); opacity:.75}
:root[data-theme] input:disabled,:root[data-theme] select:disabled,:root[data-theme] textarea:disabled,:root[data-theme] input[readonly]{background:var(--t-soft); color:var(--t-mut)}
:root[data-theme] input[type="checkbox"],:root[data-theme] input[type="radio"]{accent-color:var(--t-accent)}

/* tables: ruled rows, not floating pills */
:root[data-theme] table{border-collapse:collapse; border-spacing:0}
:root[data-theme] th{color:var(--t-mut); background:transparent; border-bottom:1px solid var(--t-line2); letter-spacing:.04em; font-size:12px}
:root[data-theme] td{background:transparent; border-bottom:1px solid var(--t-line)}
:root[data-theme] td:first-child,:root[data-theme] td:last-child{border-radius:0}
:root[data-theme] tr[data-nav]:hover td{background:var(--t-soft)}
:root[data-theme] table.formula tr.over td{box-shadow:inset 0 2px 0 var(--t-accent)}
:root[data-theme] table.formula td.grip{color:var(--t-mut)}
@media(max-width:720px){
  :root[data-theme] table.formula th:first-child,:root[data-theme] table.formula td:first-child,
  :root[data-theme] table.formula th:nth-child(2),:root[data-theme] table.formula td:nth-child(2){background:var(--t-card)}
}
:root[data-theme] tr.stale td.price,:root[data-theme] .unknown{color:var(--t-warn)}
@keyframes moved{from{background:var(--t-accentsoft,#e6f3ea)}to{background:transparent}}

/* pills */
:root[data-theme] .pill{background:var(--t-accentsoft); color:var(--t-accent); border-radius:20px; padding:2px 9px; font-weight:600}
:root[data-theme] .pill.gray{background:var(--t-soft); color:var(--t-mut)}
:root[data-theme] .pill.warn{background:var(--t-warnsoft); color:var(--t-warn)}
:root[data-theme] .pill.bad{background:var(--t-badsoft); color:var(--t-bad)}
:root[data-theme] .pill.ok{background:var(--t-oksoft); color:var(--t-ok)}

/* the rest of the desk's own surfaces */
:root[data-theme] .remark,:root[data-theme] .gen-out,:root[data-theme] .gen-done,:root[data-theme] .gen-line{background:var(--t-soft); border-color:var(--t-line)}
:root[data-theme] .gen-line.gen{background:var(--t-accentsoft); border-color:var(--t-line)}
:root[data-theme] .gen-out.warn,:root[data-theme] .gen-done.warn{background:var(--t-warnsoft); border-color:var(--t-line); color:var(--t-warn)}
:root[data-theme] .gen-done.ok{background:var(--t-oksoft); border-color:var(--t-line); color:var(--t-ok)}
:root[data-theme] .remark.withdrawn{background:transparent}
:root[data-theme] .gen-panel{background:var(--t-card); border-color:var(--t-line2); color:var(--t-ink)}
:root[data-theme] .gen-fab{background:var(--t-accent); border-color:var(--t-accent); color:var(--t-accentink); box-shadow:0 2px 10px rgba(0,0,0,.25)}
:root[data-theme] .gen-left{color:var(--t-accent)}
:root[data-theme] .totals,:root[data-theme] .board{background:var(--t-soft)}
:root[data-theme] .totals .bad{color:var(--t-bad)}
:root[data-theme] .totals .ok{color:var(--t-ok)}
:root[data-theme] .idea{background:var(--t-card)}
:root[data-theme] .idea:hover{border-color:var(--t-accent)}
:root[data-theme] .turnrow{border-bottom-color:var(--t-line)}
:root[data-theme] .turnpill{background:var(--t-soft); color:var(--t-mut)}
:root[data-theme] .turnlate{color:var(--t-bad)}
:root[data-theme] .todo li.done .todo-text{color:var(--t-mut)}
:root[data-theme] .kv .k{color:var(--t-mut)}
:root[data-theme] .remark .pics img,:root[data-theme] .gen-thumb{border-color:var(--t-line)}
}