/* ==========================================================================
   吃榴莲拌饭 · 起始页  —  Deep Space Glass v1
   设计令牌 / 背景层 / Bento 布局 / 卡片配方 / 浮层
   约定：组件内永不写裸 hex，只用 --c-* / --sp-* / --r-* / --t-* / --ease-*
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--c-canvas);color:var(--c-ink-2);
  font-family:var(--font-ui);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  scrollbar-gutter:stable;overflow-x:hidden}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--c-accent-wash);color:var(--c-ink-1)}
html{scrollbar-width:thin;scrollbar-color:var(--c-line-strong) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-line-strong);border-radius:var(--r-pill)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-64px;left:var(--sp-5);z-index:var(--z-toast);
  padding:var(--sp-4) var(--sp-6);border-radius:var(--r-md);
  background:var(--c-accent);color:var(--c-on-accent);font-weight:600;
  transition:top var(--t-fast) var(--ease-out-quart)}
.skip-link:focus{top:var(--sp-5)}
[hidden]{display:none !important}

/* ---------- 2. Design tokens ---------- */
:root,[data-theme="dark"]{
  color-scheme:dark;

  /* canvas / surface —— OLED 友好炭黑 */
  --c-canvas:#0f1116; --c-canvas-2:#0c0e12;
  /* 卡片底色 = 主题色(rgb) + 可调透明度(alpha)，两者分离：
     切换深浅色只改 --surface-rgb，用户调透明度只改 --surface-a，互不覆盖 */
  --surface-rgb:22,24,31; --surface-a:.72;
  --c-surface:rgba(var(--surface-rgb),var(--surface-a));
  --c-surface-solid:#16181f;
  --c-surface-raised:#1b1e26;
  --c-surface-hi:rgba(255,255,255,.05);
  --c-surface-press:rgba(255,255,255,.08);

  /* hairline —— 细边框代替阴影 */
  --c-line:rgba(255,255,255,.10);
  --c-line-soft:rgba(255,255,255,.065);
  --c-line-strong:rgba(255,255,255,.18);
  --c-ring:rgba(76,141,255,.60);

  /* ink —— 低对比度，保护阅读 */
  --c-ink-1:#e7e9ee; --c-ink-2:#b9bfca; --c-ink-3:#8e95a1;
  --c-ink-4:#6d7480; --c-ink-5:#4d545e;

  /* accent —— 商务蓝（深色下提亮以保证对比） */
  --c-accent:#4c8dff; --c-accent-ink:#8fb6ff; --c-on-accent:#0b1220;
  --c-accent-wash:rgba(76,141,255,.12); --c-accent-glow:rgba(76,141,255,.16);
  --c-accent-soft:rgba(76,141,255,.08);

  /* semantic —— 柔和功能色 */
  --c-love:#e879a6;  --c-love-ink:#f0a3c0; --c-love-wash:rgba(232,121,166,.12);
  --c-jade:#3fb950;  --c-jade-ink:#7ee787; --c-jade-wash:rgba(63,185,80,.12);
  --c-sky:#4aa8e0;   --c-sky-ink:#8ecdf0;  --c-sky-wash:rgba(74,168,224,.12);
  --c-warn:#e3893b;  --c-warn-wash:rgba(227,137,59,.12);
  --c-danger:#f0616d;--c-danger-ink:#ff9aa2;--c-danger-wash:rgba(240,97,109,.12);

  /* material —— 克制的磨砂 */
  --glass-blur:12px; --glass-sat:110%; --sheet-blur:20px; --bar-blur:10px;
  --scrim-solid:rgba(15,17,22,.62);
  --scrim-grad:linear-gradient(180deg,rgba(15,17,22,.78) 0%,rgba(15,17,22,.58) 40%,rgba(15,17,22,.72) 100%);

  /* radius —— 硬朗直角 */
  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px; --r-2xl:12px; --r-pill:999px;
  --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:12px; --sp-6:16px;
  --sp-7:20px; --sp-8:24px; --sp-9:32px; --sp-10:40px; --sp-11:56px; --sp-12:72px;
  --card-pad:var(--sp-7);

  /* shadow —— 几乎不用阴影，靠边框分层 */
  --shadow-1:0 1px 2px rgba(0,0,0,.30);
  --shadow-2:0 1px 2px rgba(0,0,0,.24);
  --shadow-3:0 8px 24px -10px rgba(0,0,0,.55);
  --shadow-pop:0 12px 32px -10px rgba(0,0,0,.65);
  --inset-hi:none;

  /* motion —— 克制 */
  --t-instant:60ms; --t-fast:120ms; --t-base:180ms; --t-slow:260ms; --t-enter:320ms;
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.4,1.2,.6,1);
  --stagger:24ms; --stagger-cap:8;

  /* layout */
  --bento-gap:var(--sp-5); --bento-row:92px; --page-max:1320px; --page-pad:var(--sp-9);

  /* type —— 无衬线主字体 + 等宽数据字体 */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter","PingFang SC",
    "Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC",
    "Source Han Sans SC",system-ui,sans-serif;
  --font-num:"SF Mono",ui-monospace,"JetBrains Mono","Cascadia Mono","Roboto Mono",
    Menlo,Consolas,monospace;
  --font-quote:var(--font-ui);

  /* z */
  --z-wall:-3; --z-scrim:-2; --z-page:0; --z-hero:10;
  --z-sticky:100; --z-sheet:900; --z-modal:1000; --z-toast:2000;
}

/* 强调色皮肤：低饱和蓝系三档 */
[data-accent="indigo"]{--c-accent:#6470e8;--c-accent-ink:#a5adf5;--c-on-accent:#0b0f1c;
  --c-accent-wash:rgba(100,112,232,.12);--c-accent-glow:rgba(100,112,232,.16);
  --c-accent-soft:rgba(100,112,232,.08);--c-ring:rgba(100,112,232,.60)}
[data-accent="teal"]{--c-accent:#2fa8a0;--c-accent-ink:#79d6cf;--c-on-accent:#04120f;
  --c-accent-wash:rgba(47,168,160,.12);--c-accent-glow:rgba(47,168,160,.16);
  --c-accent-soft:rgba(47,168,160,.08);--c-ring:rgba(47,168,160,.60)}

[data-theme="light"]{
  color-scheme:light;
  --c-canvas:#ffffff; --c-canvas-2:#f7f8fa;
  --surface-rgb:255,255,255; --surface-a:.86;
  --c-surface:rgba(var(--surface-rgb),var(--surface-a));
  --c-surface-solid:#ffffff; --c-surface-raised:#f7f8fa;
  --c-surface-hi:rgba(15,23,42,.04); --c-surface-press:rgba(15,23,42,.07);
  --c-line:rgba(15,23,42,.10); --c-line-soft:rgba(15,23,42,.06); --c-line-strong:rgba(15,23,42,.18);
  --c-ring:rgba(0,82,217,.45);
  --c-ink-1:#0f172a; --c-ink-2:#334155; --c-ink-3:#64748b; --c-ink-4:#94a3b8; --c-ink-5:#b6bfcc;
  --c-accent:#0052d9; --c-accent-ink:#0052d9; --c-on-accent:#ffffff;
  --c-accent-wash:rgba(0,82,217,.08); --c-accent-glow:rgba(0,82,217,.10);
  --c-accent-soft:rgba(0,82,217,.05);
  --c-love:#c02668; --c-jade:#15803d; --c-sky:#0369a1; --c-warn:#b45309; --c-danger:#b91c1c;
  --c-love-ink:#c02668; --c-jade-ink:#15803d; --c-sky-ink:#0369a1; --c-danger-ink:#b91c1c;
  --c-love-wash:rgba(192,38,104,.08); --c-jade-wash:rgba(21,128,61,.08);
  --c-sky-wash:rgba(3,105,161,.08); --c-warn-wash:rgba(180,83,9,.08); --c-danger-wash:rgba(185,28,28,.08);
  --glass-blur:10px; --glass-sat:105%;
  --scrim-solid:rgba(255,255,255,.72);
  --scrim-grad:linear-gradient(180deg,rgba(255,255,255,.86),rgba(247,248,250,.66) 40%,rgba(255,255,255,.80));
  --shadow-1:0 1px 2px rgba(16,24,40,.06);
  --shadow-2:0 1px 2px rgba(16,24,40,.05);
  --shadow-3:0 8px 24px -12px rgba(16,24,40,.18);
  --shadow-pop:0 12px 32px -12px rgba(16,24,40,.22);
  --inset-hi:none;
}
[data-theme="light"][data-accent="indigo"]{--c-accent:#4048b8;--c-on-accent:#fff;--c-ring:rgba(64,72,184,.45)}
[data-theme="light"][data-accent="teal"]{--c-accent:#0f766e;--c-on-accent:#fff;--c-ring:rgba(15,118,110,.45)}

/* ---------- 3. Base type ---------- */
html{font-feature-settings:"kern","liga","calt" 1;text-rendering:optimizeLegibility;
  font-synthesis:none;font-variant-numeric:tabular-nums}
.num,.clock,.count{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.card-title{display:flex;align-items:center;gap:var(--sp-3);font-size:14px;font-weight:600;
  color:var(--c-ink-1);line-height:1.4;letter-spacing:0}
.card-title::before{content:"";flex:none;width:2px;height:14px;border-radius:1px;
  background:var(--c-accent);opacity:.9}
.card-title > .i{width:15px;height:15px;flex:none;color:var(--c-ink-3);opacity:1}
.muted{font-size:13px;color:var(--c-ink-3);line-height:1.6}
.stamp{font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--c-ink-4)}
.tiny{font-size:12px;color:var(--c-ink-4)}
i,.i{font-style:normal}
.i{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* ---------- 4. Background stack ---------- */
.bg-stack{position:fixed;inset:0;z-index:var(--z-wall);pointer-events:none;contain:strict}
.bg-base{position:absolute;inset:0;background:var(--c-canvas)}
.bg-layer{position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat;opacity:0;transition:opacity var(--t-slow) var(--ease-out-quart);
  will-change:opacity}
.bg-layer[data-active="true"]{opacity:1}
html[data-blur-wall="1"] .bg-layer[data-active="true"]{filter:blur(6px) scale(1.03)}
.bg-scrim{position:absolute;inset:0;background:var(--scrim-grad)}
html[data-wallpaper="none"] .bg-scrim{background:var(--scrim-solid)}
.bg-amb{display:none}   /* 规范：不使用装饰性光晕 */
.bg-veil{position:absolute;inset:0;background:var(--c-canvas);opacity:calc(1 - var(--wall-vis,1));
  transition:opacity var(--t-slow) linear}

/* ---------- 5. Page shell ---------- */
.page{position:relative;z-index:var(--z-page);max-width:var(--page-max);
  margin-inline:auto;padding:0 var(--page-pad) var(--sp-12)}
.top-bar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;
  gap:var(--sp-5);height:56px;margin:0 calc(var(--page-pad) * -1);
  padding:0 var(--page-pad);
  background:color-mix(in srgb,var(--c-canvas) 62%,transparent);
  backdrop-filter:blur(var(--bar-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--bar-blur)) saturate(var(--glass-sat));
  border-bottom:1px solid var(--c-line-soft)}
.brand{display:flex;align-items:center;gap:var(--sp-4);min-width:0}
.brand-mark{width:30px;height:30px;flex:none;border-radius:var(--r-sm);
  display:grid;place-items:center;font-size:14px;font-weight:600;
  color:var(--c-on-accent);background:var(--c-accent);box-shadow:var(--shadow-1)}
.brand-mark img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.brand-name{font-size:15px;font-weight:600;color:var(--c-ink-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}

.icon-btn{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--c-ink-3);border:1px solid transparent;font-size:16px;
  transition:background-color var(--t-fast) linear,color var(--t-fast) linear,
             border-color var(--t-fast) linear,transform var(--t-instant) var(--ease-out-quart)}
.icon-btn:hover{background:var(--c-surface-hi);color:var(--c-ink-1);border-color:var(--c-line)}
.icon-btn:active{transform:scale(.94)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);
  height:34px;padding:0 var(--sp-6);border-radius:var(--r-sm);font-size:13px;font-weight:500;
  border:1px solid var(--c-line);color:var(--c-ink-2);background:transparent;
  transition:filter var(--t-fast) linear,background-color var(--t-fast) linear,
             border-color var(--t-fast) linear,transform var(--t-instant) var(--ease-out-quart)}
.btn:hover{background:var(--c-surface-hi);border-color:var(--c-line-strong);color:var(--c-ink-1)}
.btn:active{background:var(--c-surface-press)}
.btn--primary{background:var(--c-accent);border-color:transparent;color:var(--c-on-accent);font-weight:600}
.btn--ghost{border-color:transparent}
.btn--sm{height:28px;padding:0 var(--sp-5);font-size:12px;border-radius:var(--r-xs)}
.btn--danger{color:var(--c-danger);border-color:var(--c-danger-wash)}
.btn--danger:hover{background:var(--c-danger-wash);color:var(--c-danger)}
.btn .i{font-size:14px}
.avatar{width:28px;height:28px;border-radius:var(--r-pill);flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:600;color:var(--c-on-accent);background:var(--c-accent)}
.avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + var(--sp-3));min-width:188px;z-index:var(--z-sheet);
  padding:var(--sp-2);border-radius:var(--r-md);background:var(--c-surface-solid);
  border:1px solid var(--c-line);box-shadow:var(--shadow-pop);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;
  transition:opacity var(--t-fast) linear,transform var(--t-base) var(--ease-out-expo)}
.menu[data-open="true"] .menu-pop{opacity:1;transform:none;pointer-events:auto}
.menu-item{display:flex;align-items:center;gap:var(--sp-4);width:100%;padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-sm);font-size:13px;color:var(--c-ink-2);text-align:left;
  transition:background-color var(--t-instant) linear,color var(--t-instant) linear}
.menu-item:hover{background:var(--c-surface-hi);color:var(--c-ink-1)}
.menu-item .i{font-size:15px;color:var(--c-ink-4)}
.menu-sep{height:1px;margin:var(--sp-2) var(--sp-4);background:var(--c-line-soft)}

/* ---------- 6. Hero ---------- */
.hero{padding:var(--sp-9) 0 var(--sp-6);text-align:center;animation:hero-in 420ms var(--ease-out-quart) both}
@keyframes hero-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.hero-clock{font-family:var(--font-num);font-size:50px;font-weight:600;line-height:1;
  letter-spacing:-.02em;color:var(--c-ink-1)}
.hero-clock .sec{font-size:28px;color:var(--c-ink-4);margin-left:var(--sp-3)}
.hero-clock .ampm{font-size:16px;font-weight:500;color:var(--c-accent);margin-left:var(--sp-4);
  letter-spacing:.06em;vertical-align:middle}
.hero-meta{margin-top:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-3);
  align-items:center;justify-content:center;font-size:13px;color:var(--c-ink-3)}
.hero-meta .dot{color:var(--c-ink-5)}
.hero-meta b{font-weight:500;color:var(--c-ink-2)}
.hero-greet{font-size:14px;color:var(--c-ink-3);margin-top:var(--sp-3)}

/* ---------- 7. Search ---------- */
.search{max-width:640px;margin:var(--sp-6) auto 0}
.search-shell{display:flex;align-items:center;gap:var(--sp-4);height:52px;
  padding:0 var(--sp-4) 0 var(--sp-3);border-radius:var(--r-xl);
  background:var(--c-surface);border:1px solid var(--c-line);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:var(--shadow-2),var(--inset-hi);
  transition:border-color var(--t-fast) linear,box-shadow var(--t-base) var(--ease-out-expo),
             transform var(--t-base) var(--ease-out-expo)}
.search-shell:focus-within{border-color:var(--c-line-strong);
  box-shadow:var(--shadow-3),var(--inset-hi),0 0 0 3px var(--c-accent-wash)}
.engine{position:relative;flex:none}
.engine-btn{display:flex;align-items:center;gap:var(--sp-3);height:38px;padding:0 var(--sp-5);
  border-radius:var(--r-md);font-size:13px;font-weight:500;color:var(--c-ink-2);
  background:var(--c-accent-wash);
  transition:background-color var(--t-fast) linear,color var(--t-fast) linear}
.engine-btn:hover{color:var(--c-ink-1)}
.engine-btn .i{font-size:13px;color:var(--c-accent);transition:transform var(--t-base) var(--ease-out-quart)}
.engine[data-open="true"] .engine-btn .i{transform:rotate(180deg)}
.engine-pop{position:absolute;left:0;top:calc(100% + var(--sp-3));min-width:160px;z-index:var(--z-sheet);
  padding:var(--sp-2);border-radius:var(--r-md);background:var(--c-surface-solid);
  border:1px solid var(--c-line);box-shadow:var(--shadow-pop);
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;
  transition:opacity var(--t-fast) linear,transform var(--t-base) var(--ease-out-expo)}
.engine[data-open="true"] .engine-pop{opacity:1;transform:none;pointer-events:auto}
.engine-opt{display:flex;align-items:center;gap:var(--sp-4);width:100%;
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-sm);font-size:13px;color:var(--c-ink-2);text-align:left}
.engine-opt:hover{background:var(--c-surface-hi);color:var(--c-ink-1)}
.engine-opt[aria-checked="true"]{color:var(--c-accent);background:var(--c-accent-wash)}
.engine-opt .tick{margin-left:auto;font-size:14px;opacity:0}
.engine-opt[aria-checked="true"] .tick{opacity:1}
.search-sep{width:1px;height:26px;background:var(--c-line-soft);flex:none}
.search-input{flex:1;min-width:0;height:100%;background:none;border:0;font-size:15px;color:var(--c-ink-1)}
.search-input::placeholder{color:var(--c-ink-4)}
.search-input:focus{outline:none}
.search-go{width:44px;height:44px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--c-accent);color:var(--c-on-accent);font-size:18px;
  transition:filter var(--t-fast) linear,transform var(--t-instant) var(--ease-out-quart)}
.search-go:hover{filter:brightness(1.1)}
.search-go:active{transform:scale(.94)}
.search-hint{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}
.kbd{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-4);
  border-radius:var(--r-xs);font-size:12px;color:var(--c-ink-4);
  border:1px solid var(--c-line-soft);background:var(--c-surface-hi)}
.kbd kbd{font-family:var(--font-num);font-size:11px;color:var(--c-ink-3)}

/* ---------- 8. Quote line ---------- */
.quote-line{max-width:820px;margin:var(--sp-8) auto var(--sp-9);display:flex;gap:var(--sp-5);
  align-items:flex-start;min-height:52px;padding:0 var(--sp-6);
  font-family:var(--font-quote);font-size:15px;line-height:1.75;color:var(--c-ink-3)}
.quote-line .mk{font-size:24px;line-height:1;color:var(--c-ink-5);opacity:.8;flex:none;
  font-family:Georgia,serif}
.quote-line .tx{flex:1}
.quote-line .by{display:block;margin-top:var(--sp-2);font-family:var(--font-ui);font-size:12px;
  font-weight:500;letter-spacing:.02em;color:var(--c-ink-4);text-align:right}
.quote-acts{display:flex;gap:var(--sp-2);flex:none;opacity:0;transition:opacity var(--t-fast) linear}
.quote-line:hover .quote-acts,.quote-line:focus-within .quote-acts{opacity:1}
.quote-acts button{width:28px;height:28px;border-radius:var(--r-xs);display:grid;place-items:center;
  color:var(--c-ink-4);font-size:14px;transition:color var(--t-instant) linear,background-color var(--t-instant) linear}
.quote-acts button:hover{color:var(--c-accent);background:var(--c-surface-hi)}

/* ---------- 9. Bento grid ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:var(--bento-row);grid-auto-flow:dense;
  gap:var(--bento-gap);align-items:stretch}
.bento > *{min-width:0}
.c-2{grid-column:span 2}.c-3{grid-column:span 3}.c-4{grid-column:span 4}
.c-5{grid-column:span 5}.c-6{grid-column:span 6}.c-7{grid-column:span 7}
.c-8{grid-column:span 8}.c-9{grid-column:span 9}.c-12{grid-column:span 12}
.r-2{grid-row:span 2}.r-3{grid-row:span 3}.r-4{grid-row:span 4}.r-5{grid-row:span 5}

@keyframes card-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.bento > .card{animation:card-in var(--t-enter) var(--ease-out-expo) both;
  animation-delay:calc(var(--i,0) * var(--stagger))}

/* ---------- 10. The one card recipe ---------- */
.card{position:relative;isolation:isolate;padding:var(--card-pad);
  display:flex;flex-direction:column;gap:var(--sp-4);
  border-radius:var(--r-md);background:var(--c-surface);border:1px solid var(--c-line);
  box-shadow:none;
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition:transform var(--t-base) var(--ease-out-expo),
             box-shadow var(--t-base) var(--ease-out-expo),
             border-color var(--t-fast) linear}
/* 规范：不使用装饰性渐变与发光。卡片只用细边框分层，hover 仅改边框色 */
.card::before,.card::after{display:none}
.card:hover{border-color:var(--c-line-strong)}
.card:active{transform:translateY(0) scale(.995);transition-duration:var(--t-instant)}
.card-head{display:flex;align-items:center;gap:var(--sp-4);flex:none}
.card-head .card-title{flex:1;min-width:0}
.card-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.card-foot{flex:none;margin-top:auto;padding-top:var(--sp-4);
  border-top:1px solid var(--c-line-soft);display:flex;align-items:center;gap:var(--sp-4)}
.scroll{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--card-pad) * -1);padding-inline:var(--card-pad)}
.chip{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-sm);font-size:12px;font-weight:500;color:var(--c-ink-3);
  background:var(--c-surface-hi);border:1px solid var(--c-line-soft);white-space:nowrap}
.chip .i{font-size:13px;opacity:.8}
.chip b{font-weight:600;color:var(--c-ink-1);font-family:var(--font-num)}
.badge{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-4);
  border-radius:var(--r-pill);font-size:12px;font-weight:600;
  background:var(--c-accent-wash);color:var(--c-accent)}
.badge--love{background:var(--c-love-wash);color:var(--c-love)}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-4);color:var(--c-ink-4);font-size:13px;text-align:center;padding:var(--sp-6) 0}
.empty .i{font-size:26px;color:var(--c-ink-5)}

/* ---------- 11. Sheet / modal / toast ---------- */
.scrim{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(4,6,10,.62);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity var(--t-base) linear}
html[data-modal="open"] .scrim{opacity:1;pointer-events:auto}
.sheet{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);z-index:var(--z-sheet);
  display:flex;flex-direction:column;gap:var(--sp-6);padding:var(--sp-7);
  background:var(--c-surface-solid);border-left:1px solid var(--c-line);
  box-shadow:var(--shadow-pop);overflow-y:auto;
  transform:translateX(100%);transition:transform var(--t-slow) var(--ease-out-expo)}
.sheet[data-open="true"]{transform:none}
.sheet-title{display:flex;align-items:center;gap:var(--sp-4);font-size:16px;font-weight:600;color:var(--c-ink-1)}
.sheet-title .x{margin-left:auto}
.sect{display:flex;flex-direction:column;gap:var(--sp-5)}
.sect > h3{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-4)}
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--sp-6);
  opacity:0;pointer-events:none;transition:opacity var(--t-base) linear}
.modal[data-open="true"]{opacity:1;pointer-events:auto}
.modal-box{width:min(460px,100%);max-height:84vh;overflow:auto;display:flex;flex-direction:column;gap:var(--sp-6);
  padding:var(--sp-8);border-radius:var(--r-xl);background:var(--c-surface-solid);
  border:1px solid var(--c-line);box-shadow:var(--shadow-pop);
  transform:translateY(12px) scale(.98);transition:transform var(--t-slow) var(--ease-out-expo)}
.modal[data-open="true"] .modal-box{transform:none}
.modal-title{display:flex;align-items:center;gap:var(--sp-4);font-size:16px;font-weight:600;color:var(--c-ink-1)}
.modal-title .x{margin-left:auto}
.field{display:flex;flex-direction:column;gap:var(--sp-3)}
.field > label{font-size:12px;font-weight:500;color:var(--c-ink-3)}
.input,.textarea,.select{width:100%;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);
  background:var(--c-surface-hi);border:1px solid var(--c-line);color:var(--c-ink-1);font-size:14px;
  transition:border-color var(--t-fast) linear,box-shadow var(--t-fast) linear,background-color var(--t-fast) linear}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--c-line-strong);
  box-shadow:0 0 0 3px var(--c-accent-wash)}
.input::placeholder,.textarea::placeholder{color:var(--c-ink-4)}
.textarea{min-height:88px;resize:vertical;line-height:1.6;font-family:inherit}
.err{font-size:12px;color:var(--c-danger);min-height:16px}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.shake{animation:shake 240ms var(--ease-in-out)}
.toasts{position:fixed;left:50%;bottom:var(--sp-9);transform:translateX(-50%);z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:var(--sp-4);align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6);
  border-radius:var(--r-pill);font-size:13px;color:var(--c-ink-1);pointer-events:auto;
  background:var(--c-surface-solid);border:1px solid var(--c-line);box-shadow:var(--shadow-pop);
  animation:toast-in var(--t-slow) var(--ease-out-expo) both}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.toast[data-out="true"]{opacity:0;transform:translateY(6px);transition:all var(--t-base) var(--ease-in-out)}
.toast .i{font-size:15px;color:var(--c-accent)}
.toast[data-kind="ok"] .i{color:var(--c-jade)}
.toast[data-kind="err"] .i{color:var(--c-danger)}
.toast button{font-size:12px;font-weight:600;color:var(--c-accent);margin-left:var(--sp-2)}

/* segmented control */
.seg{display:flex;gap:var(--sp-1);padding:var(--sp-1);border-radius:var(--r-md);
  background:var(--c-surface-hi);border:1px solid var(--c-line-soft)}
.seg button{flex:1;height:30px;border-radius:var(--r-sm);font-size:12px;font-weight:500;
  color:var(--c-ink-3);display:grid;place-items:center;
  transition:background-color var(--t-fast) linear,color var(--t-fast) linear}
.seg button[aria-pressed="true"]{background:var(--c-ink-1);color:var(--c-canvas);font-weight:600}
/* slider */
.range{width:100%;height:4px;accent-color:var(--c-accent);cursor:pointer}
/* swatch */
.swatches{display:flex;gap:var(--sp-4)}
.swatch{width:30px;height:30px;border-radius:var(--r-pill);border:2px solid transparent;
  box-shadow:inset 0 0 0 2px var(--c-surface-solid);
  transition:transform var(--t-base) var(--ease-spring),border-color var(--t-fast) linear}
.swatch:hover{transform:scale(1.1)}
.swatch[aria-pressed="true"]{border-color:var(--c-ink-1)}
/* switch */
.switch{position:relative;width:40px;height:24px;flex:none;border-radius:var(--r-pill);
  background:var(--c-line-strong);transition:background-color var(--t-base) var(--ease-out-quart)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-1);transition:transform var(--t-base) var(--ease-spring)}
.switch[aria-checked="true"]{background:var(--c-accent)}
.switch[aria-checked="true"]::after{transform:translateX(16px)}
.row-toggle{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-3) 0}
.row-toggle > span{flex:1;font-size:14px;color:var(--c-ink-2)}

/* ---------- 12. Skeleton / motion prefs ---------- */
@keyframes shimmer{from{background-position:-160% 0}to{background-position:260% 0}}
.sk{border-radius:var(--r-sm);background:linear-gradient(90deg,
  var(--c-surface-hi) 0%,var(--c-surface-press) 40%,var(--c-surface-hi) 80%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.sk-row{height:14px}
.spinner{width:15px;height:15px;border-radius:50%;flex:none;
  border:1.5px solid var(--c-line-strong);border-top-color:var(--c-accent);
  animation:spin 800ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@keyframes beat{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}
.beat{animation:beat 2.4s var(--ease-in-out) infinite}

@media (prefers-reduced-motion:reduce){
  :root{--t-enter:1ms;--t-slow:1ms;--t-base:1ms;--t-fast:1ms;--stagger:0ms}
  .bento > .card,.hero{animation:none}
  .bg-amb,.beat,.spinner,.sk{animation:none !important}
  .sk{background:var(--c-surface-hi)}
  .spinner{border-top-color:var(--c-line-strong)}
  *{transition-duration:1ms !important;scroll-behavior:auto !important}
}
@media (hover:none){
  .card:hover{transform:none;box-shadow:var(--shadow-2),var(--inset-hi)}
  .card::after{display:none}
  .quote-acts{opacity:1}
}
@media (pointer:coarse){
  .icon-btn,.swatch,.menu-item{position:relative}
  .icon-btn::before{content:"";position:absolute;inset:-6px}
}

/* ---------- 13. Four mandated fallbacks ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.search-shell{background:var(--c-surface-solid)}
  .bg-scrim{background:var(--scrim-solid)}
}
@media (prefers-reduced-transparency:reduce){
  :root{--c-surface:var(--c-surface-solid);--glass-blur:0px;--bar-blur:0px}
  .bg-layer{display:none}
  .card,.search-shell{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  .card,.search-shell{background:var(--c-surface-solid);border-width:2px;
    border-color:var(--c-ink-3);backdrop-filter:none;-webkit-backdrop-filter:none}
  :root{--c-ink-2:#FFF;--scrim-solid:rgba(0,0,0,.86)}
}
@media (forced-colors:active){
  .card,.search-shell,.modal-box,.sheet{border:1px solid CanvasText;forced-color-adjust:none}
}

/* ---------- 14. Breakpoints ---------- */
@media (max-width:1279px){
  :root{--bento-gap:var(--sp-5);--bento-row:84px;--page-pad:var(--sp-8)}
  .c-8{grid-column:span 8}.c-4{grid-column:span 4}
}
@media (max-width:1023px){
  :root{--bento-gap:var(--sp-5);--bento-row:80px}
  .bento{grid-template-columns:repeat(8,minmax(0,1fr))}
  .c-8,.c-4,.c-12{grid-column:span 8}
  .c-3,.c-5,.c-6,.c-7,.c-9{grid-column:span 4}
  .hero-clock{font-size:46px}
  .quote-line{font-size:16px}
}
@media (max-width:767px){
  :root{--page-pad:var(--sp-6);--bento-gap:var(--sp-4);--bento-row:76px;--card-pad:var(--sp-5)}
  .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bento > .card{grid-column:1/-1}
  .hero{padding-top:var(--sp-8)}
  .hero-clock{font-size:38px}
  .hero-clock .sec{font-size:20px}
  .search-shell{height:56px;border-radius:var(--r-lg)}
  .quote-line{font-size:15px;padding:0 var(--sp-4);min-height:48px}
  .sheet{width:100%;top:auto;height:82vh;border-radius:var(--r-2xl) var(--r-2xl) 0 0;
    border-left:0;border-top:1px solid var(--c-line);
    transform:translateY(100%)}
  .top-bar{height:52px}
  .brand-name{max-width:44vw}
}
@media (max-width:479px){
  :root{--bento-row:72px;--page-pad:var(--sp-5)}
  .hero-clock{font-size:34px}
  .search{margin-top:var(--sp-6)}
  .top-actions .btn--hide-xs{display:none}
}

/* 内联 sprite 容器：不占位、不可见（替代内联 style，满足严格 CSP） */
.sprite-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.swatch[data-accent-val="blue"]   { background: #0052D9; }
.swatch[data-accent-val="indigo"] { background: #6470E8; }
.swatch[data-accent-val="teal"]   { background: #2FA8A0; }