/* TCT glass theme (Toms, 2026-10-17): liquid-glass look from his "液态玻璃感" note.
   Loaded AFTER styles.css and shell.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}
main,header.bar,nav.tabs{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 ---- */
/* ⛔ Never on input, select or textarea (Toms, 2026-10-19: «一旦按了 edit 之后就变得 lagging»).
   Each blurred element is its own offscreen pass, and the Sample Desk Edit form has about sixty
   fields per sample (the tick boxes count): four samples was 250 blurs and dropped frames on every
   scroll. The fields sit on a blurred card already, so they look the same without it. */
header.bar,.card,.stat,.empty,.notice,.err,dialog{
  -webkit-backdrop-filter:blur(28px) saturate(140%); backdrop-filter:blur(28px) saturate(140%);
}
.card,.stat,.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}

.stat{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{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.bar{background:rgba(255,255,255,.42);border-bottom:1px solid var(--g-edge);color:var(--g-ink)}
header.bar h1,header.bar .who,header.bar h1 button.home,header.bar .who button.whoami{color:var(--g-copper);opacity:1}
header.bar h1{font-weight:750}
header.bar button{background:rgba(255,255,255,.7);color:var(--g-ink);border:1px solid var(--g-edge);border-radius:999px;padding:.25rem .8rem}
nav.tabs{background:rgba(255,255,255,.3);border-bottom:1px solid var(--g-edge);-webkit-backdrop-filter:blur(28px) saturate(140%);backdrop-filter:blur(28px) saturate(140%);padding:.35rem 1.2rem}
nav.tabs{scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs .tab,nav.tabs .tab:hover{position:relative;z-index:1;color:var(--g-mut);background:transparent;box-shadow:none;border:0;border-radius:999px;font-weight:600;padding:.5rem .9rem}
nav.tabs .tab:hover{color:var(--g-ink)}
nav.tabs .tab.on{background:transparent;color:var(--g-copper);font-weight:700;border:0}
.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) .tab.on{background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px #fff}


/* ---- 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}

/* ---- 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}
.stage,.verdict{border-radius:999px;border:0;background:rgba(182,109,68,.14);color:#8a4d2b;font-weight:650}
.stage.with_ra,.verdict.flagged{background:rgba(231,164,113,.34);color:#8a4d1b}
.stage.dropped,.verdict.blocked{background:rgba(165,42,42,.14);color:#8f2d2d}
.stage.closed,.verdict.off{background:rgba(255,255,255,.62);color:var(--g-mut)}
.stage.with_sales,.verdict.clean{background:rgba(70,140,100,.16);color:#2f6a4a}
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.clickable: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)}
/* Today: rows are soft glass lines, a block opens like a drawer */
.approw{border-top:0;background:rgba(255,255,255,.5);border-radius:16px;padding:.7rem 1rem;margin-top:.5rem;transition:background .2s}
.approw:hover{background:#fff}
.todayblock{border-top:0;padding:.55rem 0}
.todayblock summary::before{color:var(--g-copper)}
.todayblock[open]>summary strong{color:var(--g-copper)}
/* Today as clippings (2026-10-25): a folded headline, its count and the oldest wait; the dark one needs you most */
.todayblock.clip{padding:.55rem .8rem;margin:.35rem 0;border-radius:16px}
.todayblock.clip>summary{align-items:flex-start}
.todayblock.clip>summary::before{line-height:1.2rem}
.cliphead{display:block;min-width:0}
.clipn{margin-left:.2rem;white-space:nowrap;font-family:var(--g-num);font-variant-numeric:tabular-nums;font-weight:750;font-size:.85rem;padding:.05rem .5rem;border-radius:999px;background:rgba(182,109,68,.14);color:var(--g-copper)}
.cliplead{display:block;margin-top:.15rem;font-size:12.5px;font-weight:400;color:var(--g-mut)}
.todayblock.clip.hot:not([open]){background:radial-gradient(120% 90% at 50% -20%,rgba(182,109,68,.7),transparent 58%),var(--g-dark);color:#fff;box-shadow:0 14px 34px rgba(27,27,25,.28)}
.todayblock.clip.hot:not([open])>summary strong{color:#fff}
.todayblock.clip.hot:not([open]) .cliplead{color:rgba(255,255,255,.72)}
.todayblock.clip.hot:not([open]) .clipn{background:#e7a471;color:var(--g-dark)}
.todayblock.clip.hot[open]{box-shadow:inset 0 0 0 1.5px var(--g-copper)}
.clipclear{font-size:12.5px;padding:.45rem .8rem}
.clipweek{margin-top:.7rem;padding-top:.55rem;border-top:1px dashed var(--g-edge)}
.clipweek-h{margin-bottom:.4rem}
.clipweek-h .nowrap{white-space:nowrap}
.clipweek-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.5rem}
.clipstat{display:flex;flex-direction:column;gap:2px;padding:.55rem .75rem;border-radius:14px;background:rgba(255,255,255,.5)}
.clipstat strong{font-family:var(--g-num);font-variant-numeric:tabular-nums;font-size:22px;line-height:1.15}
.card h2{font-family:var(--g-num);font-size:1.15rem;letter-spacing:-.3px}
#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}
  nav.tabs{padding:.3rem .5rem}
}
@media(hover:none){.stat{transform:none!important}.card::before,.stat::before{display:none}}
@media(prefers-reduced-motion:reduce){.stat,.tabs .glass-pill{transition:none;transform:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.card,.stat,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}
}