/* TCT glass theme (Toms, 2026-10-17): liquid-glass look from his "液态玻璃感" note.
   Loaded AFTER styles.css, so it restyles by selector and changes no logic.
   Print is untouched (all printing is A4, plain white): everything here is screen only. */
@media screen{
:root{
  --g-bg1:#E4C0A6; --g-bg2:#D4B8AC; --g-bg3:#EBD7CC;
  --g-copper:#B66D44; --g-copper-soft:#E7A471; --g-copper-end:#C5A0AB;
  --g-solid:#F3F1F1; --g-dark:#1B1B19;
  --g-ink:#2a211c; --g-mut:#7b6a60;
  --ink:var(--g-ink); --mut:var(--g-mut); --bg:var(--g-bg2); --accent:var(--g-copper); --info:var(--g-copper);
  --g-card:rgba(255,255,255,.52); --g-edge:rgba(255,255,255,.62);
  --g-shadow:0 18px 50px rgba(120,70,40,.16),0 2px 6px rgba(120,70,40,.08);
  --g-num:"Plus Jakarta Sans",Manrope,ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
html{background:var(--g-bg2)}
body{
  min-height:100vh; color:var(--g-ink);
  background:
    radial-gradient(1100px 700px at 8% -8%,var(--g-bg1) 0,transparent 60%),
    radial-gradient(900px 600px at 100% 30%,rgba(255,255,255,.55) 0,transparent 62%),
    radial-gradient(1000px 700px at 40% 108%,var(--g-bg3) 0,transparent 60%),
    linear-gradient(160deg,var(--g-bg1),var(--g-bg2) 52%,var(--g-bg3));
  background-attachment:fixed;
}
/* A white half-transparent arc, like dusk seen through frosted glass. */
body::before{content:"";position:fixed;inset:-20% -10% auto auto;width:70vmax;height:70vmax;border-radius:50%;
  border:2px solid rgba(255,255,255,.28);pointer-events:none;z-index:0}
.wrap,header.top{position:relative;z-index:1}
h1,h2,h3{color:var(--g-ink)}
h1{font-family:var(--g-num);font-weight:750;font-size:clamp(30px,4.6vw,48px);letter-spacing:-1.4px}
.eyebrow{color:var(--g-copper);letter-spacing:.22em}
.muted,.hint,.count-line,.meta{color:var(--g-mut)}
a{color:var(--g-copper)}

/* ---- glass surfaces ---- */
header.top,.card,.stat,.item,.empty,.notice,.err,dialog,input,select,textarea{
  -webkit-backdrop-filter:blur(28px) saturate(140%); backdrop-filter:blur(28px) saturate(140%);
}
.card,.stat,.item,.empty{
  position:relative; overflow:hidden; background:var(--g-card);
  border:1px solid var(--g-edge); border-radius:24px; box-shadow:var(--g-shadow),inset 0 1px 0 rgba(255,255,255,.85);
}
.card{padding:20px 22px;margin-bottom:16px}
.empty{border-style:solid;color:var(--g-mut);background:rgba(255,255,255,.34)}
.notice{border-radius:16px;border:1px solid var(--g-edge);background:rgba(255,248,235,.62);color:#7b5b29}

/* soft light that follows the pointer (glass.js sets --mx/--my); invisible until hovered */
.card::before,.stat::before,.item::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.65),transparent 62%);
}
.card.lit::before,.stat.lit::before,.item.lit::before{opacity:1}
.stat,.item{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.stat:hover,.item:hover{box-shadow:0 26px 60px rgba(120,70,40,.22),inset 0 1px 0 rgba(255,255,255,.9);border-color:#fff}

/* ---- top bar and the sliding pill ---- */
header.top{background:rgba(255,255,255,.42);border-bottom:1px solid var(--g-edge)}
.tabs{position:relative}
.tabs a{position:relative;z-index:1;color:var(--g-mut);border-radius:999px;font-weight:600;transition:color .2s}
.tabs a:hover{text-decoration:none;color:var(--g-ink)}
.tabs a.on{background:transparent;color:var(--g-copper);font-weight:650}
.tabs.has-pill a.on{background:transparent}
.tabs .glass-pill{position:absolute;top:0;left:0;height:34px;z-index:0;border-radius:999px;pointer-events:none;
  background:rgba(255,255,255,.82);box-shadow:0 3px 10px rgba(120,70,40,.16),inset 0 0 0 1px #fff;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1),width .42s cubic-bezier(.34,1.56,.64,1)}
.tabs:not(.has-pill) a.on{background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px #fff}
.brand{color:var(--g-copper);font-weight:750}

/* ---- the numbers: big, one per card ---- */
.stats{gap:18px}
.stat{padding:24px 24px 22px;border-left:1px solid var(--g-edge);color:var(--g-ink)}
.stat-label,.stat strong,.stat .hint{display:block}
.stat-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g-mut)}
.stat strong,.stat.info strong,.stat.ok strong,.stat.bad strong{font-family:var(--g-num);font-variant-numeric:tabular-nums;font-size:clamp(44px,5.2vw,60px);line-height:1.05;font-weight:750;letter-spacing:-2px;color:var(--g-ink);margin:10px 0 8px}
.stat.info,.stat.ok,.stat.bad,.stat.warn{border-left-color:var(--g-edge)}
.stat .hint{font-size:12.5px}
/* the one that needs a person: dark card with a copper glow on top */
.stat.warn{background:radial-gradient(120% 90% at 50% -20%,rgba(182,109,68,.7),transparent 58%),var(--g-dark);border-color:rgba(255,255,255,.12);color:#fff;box-shadow:0 24px 54px rgba(27,27,25,.35)}
.stat.warn .stat-label,.stat.warn .hint{color:rgba(255,255,255,.7)}
.stat.warn strong{color:#fff}
.stat.bad{background:linear-gradient(160deg,rgba(255,235,228,.78),rgba(231,164,113,.38))}
.stat.bad strong{color:#a23a2a}
.stat.warn::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(231,164,113,.35),transparent 62%)}

/* ---- buttons, badges, inputs ---- */
button{border-radius:999px;font-weight:650;transition:transform .18s ease,box-shadow .18s ease,background .18s}
button.primary{background:linear-gradient(160deg,var(--g-copper-soft),var(--g-copper));color:#fff;border:0;box-shadow:0 8px 20px rgba(182,109,68,.35),inset 0 1px 0 rgba(255,255,255,.35)}
button.primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(182,109,68,.42),inset 0 1px 0 rgba(255,255,255,.4)}
button,button.small{background:rgba(255,255,255,.62);color:var(--g-ink);border:1px solid var(--g-edge);box-shadow:inset 0 1px 0 #fff}
button:hover{background:#fff;border-color:#fff}
button.primary,button.primary:hover{border:0}
.badge{background:rgba(255,255,255,.62);border:0;color:var(--g-mut);border-radius:999px;padding:2px 10px;font-weight:650;letter-spacing:.02em}
.badge.cat,.badge.co{background:rgba(182,109,68,.14);color:#8a4d2b}
.badge.ref,.badge.eye{background:rgba(231,164,113,.34);color:#8a4d1b}
.badge.off{background:rgba(165,42,42,.14);color:#8f2d2d}
.chip{background:rgba(255,255,255,.62);border:1px solid var(--g-edge);border-radius:999px;color:var(--g-ink);box-shadow:inset 0 1px 0 #fff}
.chip.on{background:linear-gradient(160deg,var(--g-copper-soft),var(--g-copper));color:#fff;border-color:transparent}
.chip .n{opacity:.7;margin-left:6px}
.item,.item:hover{border-radius:22px;padding:0;color:var(--g-ink);text-decoration:none}
.item .line{color:var(--g-mut)}
.item .meta{padding:12px 14px 14px}
.item .nm{font-family:var(--g-num);font-weight:700;color:var(--g-ink)}
.item .price{font-family:var(--g-num);font-variant-numeric:tabular-nums;color:var(--g-copper);font-size:17px;letter-spacing:-.3px}
.shot,.hero{background:rgba(255,255,255,.55);border-radius:0}
.hero{border-radius:22px;border:1px solid var(--g-edge)}
.strip .sh{border-radius:14px;border:1px solid var(--g-edge);background:rgba(255,255,255,.6)}
.strip .sh.on{border-color:var(--g-copper);box-shadow:0 0 0 2px rgba(182,109,68,.25)}
.tabs a .pip{background:var(--g-copper)}
input,select,textarea{background:rgba(255,255,255,.62);border:1px solid var(--g-edge);border-radius:16px;box-shadow:inset 0 1px 0 #fff}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(182,109,68,.45);outline-offset:1px;background:#fff}

/* ---- tables: white space between rows, no lines ---- */
table{border-collapse:separate;border-spacing:0 8px}
th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--g-mut);font-weight:700;border:0;background:transparent}
td{background:rgba(255,255,255,.5);border:0;border-bottom:0}
tr[data-nav]:hover td{background:#fff}
td:first-child{border-radius:14px 0 0 14px}td:last-child{border-radius:0 14px 14px 0}

dialog{background:rgba(250,244,240,.78);border:1px solid var(--g-edge);border-radius:28px;box-shadow:0 40px 90px rgba(80,40,20,.35)}
dialog::backdrop{background:rgba(60,35,25,.35)}
.err{background:rgba(255,235,228,.7);border:1px solid #fff;color:#8f2d2d;border-radius:16px}
.band.now{border-left-color:var(--g-copper)}
.readystrip{background:rgba(255,248,235,.62)}
#toast{background:var(--g-dark);color:#fff;border-radius:999px}

@media(max-width:720px){
  .stat strong{font-size:38px}
  .card{padding:16px;border-radius:22px}
  .stat strong{font-size:40px}
  .stat{padding:18px}
  header.top .tabs{padding:2px 0 8px}
}
@media(hover:none){.stat,.item{transform:none!important}.card::before,.stat::before,.item::before{display:none}}
@media(prefers-reduced-motion:reduce){.stat,.item,.tabs .glass-pill{transition:none;transform:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.card,.stat,.item,header.top,dialog{background:rgba(250,244,240,.94)}}

/* ---- Today: one glass card per kind of thing waiting, the number is the point ---- */
.glass-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:6px 0 22px}
.glass-stats .stat{cursor:pointer;display:block;text-decoration:none;color:var(--g-ink)}
.glass-stats .stat:hover{text-decoration:none}
}
@media(max-width:720px){.glass-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media print{
  .glass-stats{display:none}
}