/* ============================================================
   UAA · NOIR 主题层（影院 · 明暗双模）
   覆盖 tokens.css 的品牌/中性/字体令牌，并重塑 AppShell 壳层(顶栏/页脚/标签栏/模态)
   与通用原子(按钮/chip/封面/卡片) 的视觉，使 5 个发现层页面统一为「Noir 影院」语言。
   招牌=深色影院(暗红辉光点睛 · 金色热度 · 高对比衬线大数字 · 深色玻璃)，默认 dark；
   亮模式=暖象牙/米白底 · 炭黑文字 · 浅暖灰浮层 · 发丝线 · 轻柔投影，仍是电影感而非普通后台。
   颜色全部 token 驱动：两套完整 token + :root 兜底，☾/☀ 一键切换、持久化。
   引入顺序：tokens.css → reset.css → components.css → noir.css → (home|channel).css
   ============================================================ */

/* ============================================================
   令牌 · 共享(不随主题变化的：强调红/金、字体、圆角、布局)
   注意：强调红 #FF3B5C / 次金 #E6B873 在两套主题里都保留。
   ============================================================ */
:root,
:root[data-theme="dark"],
:root[data-theme="light"]{
  /* 主强调：暗红 / 次：金（两模式共用品牌色） */
  --peri:#FF3B5C;        --peri-600:#FF5570;   --peri-700:#FF3B5C;
  --accent:#FF6177;
  --crimson:#FF3B5C;
  --gold:#E6B873;

  /* 圆角：影院感利落 */
  --r-cover:6px;  --r-card:16px;  --r-pill:999px;  --r-field:11px;
  --maxw:1280px;  --top-h:64px;

  /* 字体：大标题高对比衬线 Playfair。
     数字例外："UAA Num"(tokens.css 头部的 0-9 专用 @font-face)前置接管所有数字——
     Playfair/Georgia 的老式数字高低不齐(3/4/5/7/9 下沉)，数字一律用本地等高衬线字形，
     字母仍走 Playfair(kicker/键帽/EN 副标不受影响)。 */
  --font-serif:"UAA Num","Playfair Display","Songti SC","Source Han Serif SC","Noto Serif CJK SC",Georgia,serif;
  --font-latin:"UAA Num","Playfair Display",Georgia,"Times New Roman",serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;

  --m-novel:#FF3B5C;   --m-video:#FF3B5C;   --m-comic:#FF3B5C;   --m-audio:#FF3B5C;   --m-ai:#7BE0C6;
}

/* ============================================================
   令牌 · DARK（招牌：深色影院。:root 兜底也用 dark，保证未设 theme 时即影院黑）
   语义令牌新增：--title(纯标题色) / --on-accent(强调底上的字) / --fill-1·2(玻璃浮层填充)
   --hero-fade(Hero 底渐隐到页底色) / --vignette(暗角) / --glass(吸顶玻璃) / --cover-grad(封面底渐变)
   ============================================================ */
:root,
:root[data-theme="dark"]{
  --peri-100:#2A1620;    --peri-050:#1E141A;
  --crimson-soft:rgba(255,59,92,.14);
  --gold-soft:rgba(230,184,115,.14);

  /* 文字三级 + 纯标题白 */
  --ink:#F2F0F2;   --ink-2:#C7C4CE;   --ink-3:#9A98A2;   --title:#FFFFFF;
  --on-accent:#FFFFFF;          /* 暗红实色按钮上的文字 */

  /* 影院深色背景阶梯 */
  --paper:#0C0C10;       --bg-2:#111118;
  --surface:#1A1A22;     --surface-2:#20202A;   --surface-3:#262631;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --hair:rgba(255,255,255,.08);

  /* 玻璃浮层填充(chip/搜索/图标按钮/ghost) + hover */
  --fill-1:rgba(255,255,255,.05);
  --fill-2:rgba(255,255,255,.06);
  --fill-hover:rgba(255,255,255,.05);

  /* 阴影：柔和外发光 + 红/金辉光（暗模式招牌） */
  --shadow-s:0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-m:0 24px 60px -24px rgba(0,0,0,.85);
  --shadow-cover:0 18px 44px -20px rgba(0,0,0,.8);
  --glow-red:0 0 0 1px rgba(255,59,92,.35),0 18px 50px -16px rgba(255,59,92,.55);
  --glow-gold:0 0 0 1px rgba(230,184,115,.32),0 16px 44px -18px rgba(230,184,115,.4);
  --shadow-primary:0 14px 34px -12px rgba(255,59,92,.7);
  --shadow-primary-h:0 18px 44px -12px rgba(255,59,92,.9);
  --shadow-card-h:var(--glow-red);

  /* 玻璃 / 渐隐 / 暗角 / 封面渐变（页面级氛围） */
  --bar-bg:rgba(12,12,16,.72);
  --bg-glow:radial-gradient(1100px 620px at 84% -12%,rgba(255,59,92,.12),transparent 60%),
            radial-gradient(900px 560px at -8% 108%,rgba(230,184,115,.07),transparent 58%);
  --hero-veil-top:rgba(12,12,16,.6);
  --hero-veil-mid:rgba(12,12,16,.15);
  --hero-veil-bot:rgba(12,12,16,.78);
  --hero-glow:rgba(255,59,92,.22);
  --vignette:rgba(8,8,12,.9);
  --cover-grad:linear-gradient(180deg,transparent 52%,rgba(8,8,12,.72) 100%);
  --cover-fb:linear-gradient(150deg,#2a2230,#15131a);
  --cover-fb-ink:rgba(255,255,255,.85);
  --cover-inset:rgba(255,255,255,.06);
  --on-cover:#FFFFFF;            /* 封面/Hero 大图上恒为白字 */
  --mask:rgba(6,6,10,.78);
  --agegate-bg:rgba(6,6,10,.94);
  --ai-cine-bg:linear-gradient(120deg,#15131c,#0E0D14);

  --toast-bg:#20202A;  --toast-fg:#F2F0F2;
  --ghost-bg:rgba(255,255,255,.06);
}

/* ============================================================
   令牌 · LIGHT（暖象牙影院 · 不是普通亮色后台）
   暖象牙/米白底、炭黑文字、很浅暖灰浮层、浅发丝线；
   强调红/金不变；暗模式的红色外发光 → 亮模式轻柔中性投影；
   Hero/封面大图上的白字 + 暗角保留(图上恒暗)，但页底渐隐到象牙、玻璃转浅。
   ============================================================ */
:root[data-theme="light"]{
  --peri-100:#FBE4E9;    --peri-050:#FCEEF1;
  --crimson-soft:rgba(255,59,92,.10);
  --gold-soft:rgba(196,142,58,.14);

  /* 文字：炭黑三级 + 纯标题更黑 */
  --ink:#1C1A1E;   --ink-2:#534E55;   --ink-3:#8A848E;   --title:#141217;
  --on-accent:#FFFFFF;

  /* 暖象牙背景阶梯（米白纸感 · 略带暖意） */
  --paper:#F6F2EC;       --bg-2:#EFEAE2;
  --surface:#FFFDF9;     --surface-2:#F4EFE7;   --surface-3:#EDE7DD;
  --line:rgba(28,24,18,.10);
  --line-2:rgba(28,24,18,.16);
  --hair:rgba(28,24,18,.08);

  /* 很浅暖灰浮层填充 + hover（替暗模式的白色半透明） */
  --fill-1:rgba(28,24,18,.04);
  --fill-2:rgba(28,24,18,.05);
  --fill-hover:rgba(28,24,18,.05);

  /* 阴影：轻柔中性投影(无红色辉光铺张)；card hover 改轻投影 + 细红描边 */
  --shadow-s:0 6px 18px -10px rgba(40,30,24,.20);
  --shadow-m:0 22px 50px -24px rgba(40,30,24,.28);
  --shadow-cover:0 16px 38px -18px rgba(40,30,24,.30);
  --glow-red:0 0 0 1px rgba(255,59,92,.22),0 18px 40px -18px rgba(40,30,24,.30);
  --glow-gold:0 0 0 1px rgba(196,142,58,.30),0 16px 38px -18px rgba(40,30,24,.26);
  --shadow-primary:0 12px 28px -12px rgba(255,59,92,.45);
  --shadow-primary-h:0 16px 36px -12px rgba(255,59,92,.55);
  --shadow-card-h:0 20px 44px -20px rgba(40,30,24,.32);

  /* 玻璃 / 渐隐 / 暗角 / 封面渐变 —— 浅版本 */
  --bar-bg:rgba(246,242,236,.78);
  --bg-glow:radial-gradient(1100px 620px at 84% -12%,rgba(255,59,92,.06),transparent 60%),
            radial-gradient(900px 560px at -8% 108%,rgba(196,142,58,.05),transparent 58%);
  /* Hero 大图上保持电影暗角(图上恒暗白字)，但底部渐隐到象牙纸色 */
  --hero-veil-top:rgba(20,16,12,.34);
  --hero-veil-mid:rgba(20,16,12,.06);
  --hero-veil-bot:rgba(30,24,18,.46);
  --hero-glow:rgba(255,59,92,.18);
  --vignette:rgba(20,16,12,.42);
  --cover-grad:linear-gradient(180deg,transparent 58%,rgba(20,16,12,.40) 100%);
  --cover-fb:linear-gradient(150deg,#e7ddcf,#cdbfa9);
  --cover-fb-ink:rgba(40,30,20,.78);
  --cover-inset:rgba(28,24,18,.08);
  --on-cover:#FFFFFF;
  --mask:rgba(40,32,26,.42);
  --ai-cine-bg:linear-gradient(120deg,#FFFDF9,#F1EBE0);

  --toast-bg:#221E1A;  --toast-fg:#F6F2EC;
  --ghost-bg:rgba(28,24,18,.04);
}

/* —— 页面底：底色 + 氛围光斑(随主题轻重切换) —— */
.noir{background:var(--paper);min-height:100vh;font-family:var(--font-sans);color:var(--ink);
  transition:background-color .35s ease,color .35s ease}
.noir::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--bg-glow),var(--paper)}
.noir ::selection{background:var(--crimson);color:#fff}

/* ============================================================
   顶栏 · 玻璃
   ============================================================ */
.ds-topbar{position:sticky;top:0;z-index:var(--z-sticky);height:var(--top-h);
  display:flex;align-items:center;gap:16px;padding:0 22px;
  background:var(--bar-bg);backdrop-filter:saturate(150%) blur(18px);-webkit-backdrop-filter:saturate(150%) blur(18px);
  border-bottom:1px solid var(--hair)}
.ds-brand{display:flex;align-items:center;gap:9px;flex-shrink:0}
.ds-brand__img{height:30px;width:auto;display:block;filter:drop-shadow(0 0 14px rgba(255,59,92,.55))}
.ds-brand__sub{font-family:var(--font-serif);font-style:italic;font-size:13px;color:var(--ink-3);letter-spacing:.04em;align-self:flex-end;margin-bottom:5px}

.ds-topnav{display:none;align-items:center;gap:2px;margin-left:8px}
.ds-navlink{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:10px;
  font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);transition:.18s;position:relative}
.ds-navlink svg{width:18px;height:18px;opacity:.85}
.ds-navlink:hover{background:var(--fill-hover);color:var(--ink)}
.ds-navlink--on{color:var(--title)}
.ds-navlink--on::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;
  background:var(--crimson);box-shadow:0 0 10px rgba(255,59,92,.8)}
.ds-navlink__tag{position:absolute;top:5px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--crimson);box-shadow:0 0 8px var(--crimson)}

.ds-more{position:relative}
.ds-more__panel{position:absolute;top:48px;left:0;min-width:230px;padding:8px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-m);
  display:none;grid-template-columns:1fr 1fr;gap:2px;z-index:var(--z-modal)}
.ds-more.open .ds-more__panel{display:grid}
.ds-more__item{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:9px;font-size:13.5px;
  font-weight:600;color:var(--ink-2);transition:.15s}
.ds-more__item svg{width:18px;height:18px;color:var(--ink-3)}
.ds-more__item:hover{background:var(--fill-hover);color:var(--title)}
.ds-more__item:hover svg{color:var(--crimson)}

.ds-search{display:none;align-items:center;gap:9px;flex:1;max-width:380px;height:40px;padding:0 16px;margin:0 4px;
  border-radius:var(--r-pill);background:var(--fill-1);border:1px solid var(--line);color:var(--ink-3)}
.ds-search svg{opacity:.7}
.ds-search input{flex:1;border:none;outline:none;background:none;font-size:13.5px;color:var(--ink)}
.ds-search input::placeholder{color:var(--ink-3)}
.ds-spacer{flex:1}

.ds-icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);
  border:1px solid var(--line);background:var(--fill-1);transition:.2s;flex-shrink:0}
.ds-icon-btn:hover{border-color:var(--crimson);color:var(--crimson)}
/* ☾/☀ 昼夜切换按钮：明暗双模可见可用 */
[data-ds-theme]{display:grid!important}

/* ============================================================
   按钮 · chip
   ============================================================ */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;
  border-radius:var(--r-pill);font-size:14px;font-weight:700;letter-spacing:.02em;
  transition:transform .15s,box-shadow .25s,background .2s,border-color .2s,color .2s;white-space:nowrap}
.ds-btn:active{transform:scale(.97)}
/* 同 .ds-root .cn-cbtn--go 的理由：reset.css 的 .ds-root a{color:inherit} (0,1,1) 压过 (0,1,0)。
   漫画详情的「立即阅读」与首页轮播的 CTA 都是 <a class="ds-btn ds-btn--primary">，不补这条就会继承正文色。 */
.ds-root .ds-btn--primary{color:var(--on-accent)}
.ds-btn--primary{background:linear-gradient(135deg,#FF3B5C,#FF6177);color:var(--on-accent);
  box-shadow:var(--shadow-primary)}
.ds-btn--primary:hover{box-shadow:var(--shadow-primary-h);transform:translateY(-1px)}
.ds-btn--ghost{background:var(--fill-2);color:var(--ink);border:1px solid var(--line-2);backdrop-filter:blur(8px)}
.ds-btn--ghost:hover{border-color:var(--crimson);color:var(--crimson)}
.ds-btn--lg{height:50px;padding:0 30px;font-size:15.5px}
.ds-btn--block{width:100%}

.ds-chip{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;background:var(--fill-1);color:var(--ink-2);
  border:1px solid var(--line);cursor:pointer;transition:.2s}
.ds-chip:hover{border-color:var(--line-2);color:var(--ink)}
.ds-chip--on{background:var(--crimson-soft);color:var(--crimson);border-color:rgba(255,59,92,.4);box-shadow:0 0 18px -6px rgba(255,59,92,.5)}

/* ============================================================
   节标题 — 衬线大字 + 暗红/金小字
   ============================================================ */
.ds-wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.ds-sec{padding:38px 0}
.ds-sec__head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.ds-sec__head h2{font-family:var(--font-serif);font-weight:900;font-size:clamp(26px,3.4vw,34px);color:var(--title);
  letter-spacing:.01em;padding-left:0}
.ds-sec__head h2::before{display:none}
.ds-sec__head .en{font-family:var(--font-latin);font-style:italic;font-size:14px;color:var(--crimson);letter-spacing:.14em;text-transform:uppercase}
.ds-sec__more{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-3);display:inline-flex;align-items:center;gap:5px;align-self:center;transition:.18s}
.ds-sec__more:hover{color:var(--crimson)}

.ds-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;box-shadow:var(--shadow-s)}

/* ============================================================
   封面 / 卡片 — 大图 + 悬停辉光(暗:红辉光 / 亮:轻投影+细红描边)
   ============================================================ */
.ds-cover{position:relative;aspect-ratio:3/4;border-radius:var(--r-cover);overflow:hidden;flex-shrink:0;
  background:var(--surface-2);box-shadow:var(--shadow-cover);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.ds-cover--wide{aspect-ratio:16/9}
.ds-cover img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ds-cover__fb{position:absolute;inset:0;z-index:0;display:grid;place-items:center;text-align:center;padding:12px;
  color:var(--cover-fb-ink);font-family:var(--font-serif);font-weight:700;font-size:15px;line-height:1.3;letter-spacing:.01em;
  background:var(--cover-fb)}
.ds-cover::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--cover-inset);
  background:var(--cover-grad)}
.ds-cover__tag{position:absolute;z-index:4;top:9px;left:9px;padding:3px 10px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#fff;background:rgba(255,59,92,.92);
  box-shadow:0 6px 18px -6px rgba(255,59,92,.8);backdrop-filter:blur(4px)}
.ds-cover__tag--done{background:rgba(230,184,115,.92);color:#1A1A22;box-shadow:0 6px 18px -6px rgba(230,184,115,.7)}
.ds-cover__dur{position:absolute;z-index:4;right:9px;bottom:9px;padding:3px 8px;border-radius:5px;
  font-size:10.5px;font-weight:600;font-family:var(--font-latin);color:#fff;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.ds-cover__play{position:absolute;z-index:4;inset:0;display:grid;place-items:center;opacity:0;transition:.3s}
.ds-cover__play b{width:54px;height:54px;border-radius:50%;background:rgba(255,59,92,.92);
  display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:0 0 30px rgba(255,59,92,.8);padding-left:3px}

.ds-bookcard{display:block;width:100%;cursor:pointer}
.ds-bookcard:hover .ds-cover{transform:translateY(-6px) scale(1.012);box-shadow:var(--shadow-card-h)}
.ds-bookcard:hover .ds-cover img{transform:scale(1.07)}
.ds-bookcard:hover .ds-cover__play{opacity:1}
.ds-bookcard__t{margin-top:11px;font-family:var(--font-serif);font-weight:700;font-size:15px;color:var(--ink);
  line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.ds-bookcard:hover .ds-bookcard__t{color:var(--crimson)}
.ds-bookcard--wide .ds-bookcard__t{-webkit-line-clamp:2;font-family:var(--font-sans);font-weight:600;font-size:13px}
.ds-bookcard__sub{margin-top:5px;font-size:12.5px;color:var(--ink-3);display:flex;gap:8px;align-items:center;min-width:0}
.ds-bookcard__sub .author{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-bookcard__sub .heat{margin-left:auto;flex-shrink:0;color:var(--gold);font-family:var(--font-latin);font-weight:700;font-size:13px}

/* ============================================================
   横滑 rail
   ============================================================ */
.ds-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 0 12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ds-rail::-webkit-scrollbar{display:none}
.ds-rail>*{scroll-snap-align:start;flex:0 0 auto}

.ds-cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 18px}
@media(min-width:600px){.ds-cardgrid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.ds-cardgrid{grid-template-columns:repeat(6,1fr);gap:30px 22px}}
.ds-cardgrid--wide{grid-template-columns:repeat(2,1fr)}
@media(min-width:600px){.ds-cardgrid--wide{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.ds-cardgrid--wide{grid-template-columns:repeat(4,1fr)}}

/* ============================================================
   底部标签栏（移动端）· 玻璃
   ============================================================ */
.ds-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tabbar);
  height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  display:flex;background:var(--bar-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--hair)}
.ds-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-3);transition:.2s;position:relative}
.ds-tab svg{width:22px;height:22px}
.ds-tab span{font-size:10px;font-weight:600;letter-spacing:.02em}
.ds-tab--on{color:var(--title)}
.ds-tab--on::before{content:"";position:absolute;top:7px;width:24px;height:3px;border-radius:3px;background:var(--crimson);box-shadow:0 0 10px var(--crimson)}

/* ============================================================
   页脚 · 随主题切换
   ============================================================ */
.ds-foot{margin-top:64px;border-top:1px solid var(--hair);background:var(--bg-2);padding:48px 0 30px}
.ds-foot__in{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:flex;flex-wrap:wrap;gap:34px 56px}
.ds-foot__brand{max-width:280px}
.ds-foot__brand .ds-brand__img{height:30px;filter:drop-shadow(0 0 14px rgba(255,59,92,.5))}
.ds-foot__brand p{font-size:12.5px;color:var(--ink-3);margin-top:14px;line-height:1.85}
.ds-foot__col h4{font-family:var(--font-serif);font-weight:700;font-size:15px;color:var(--title);margin-bottom:14px}
.ds-foot__col a{display:block;font-size:12.5px;color:var(--ink-3);padding:5px 0;transition:.15s}
.ds-foot__col a:hover{color:var(--crimson)}
.ds-foot__bar{max-width:var(--maxw);margin:30px auto 0;padding:22px 22px 0;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:11px;color:var(--ink-3)}
.ds-foot__age{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:#fff;background:var(--crimson);
  padding:3px 10px;border-radius:6px;font-size:10.5px;box-shadow:0 0 16px -4px rgba(255,59,92,.7)}

/* ============================================================
   模态 — 玻璃
   ============================================================ */
.ds-modal__mask{background:var(--mask);backdrop-filter:blur(6px)}
.ds-modal__card{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-m)}
.ds-modal__close{color:var(--ink-3)}
.ds-modal__close:hover{background:var(--fill-2);color:var(--crimson)}
.ds-modal__title{font-family:var(--font-serif);color:var(--title)}
.ds-modal__sub{color:var(--ink-3)}
.ds-tabs{background:var(--fill-1)}
.ds-tabs button{color:var(--ink-3)}
.ds-tabs button.on{background:var(--surface-3);color:var(--title);box-shadow:var(--shadow-s)}
.ds-field{background:var(--fill-1);border:1px solid var(--line)}
.ds-field:focus-within{border-color:var(--crimson);background:var(--fill-2)}
.ds-field svg{color:var(--ink-3)}
.ds-field input{color:var(--ink)}
.ds-field input::placeholder{color:var(--ink-3)}

/* ============================================================
   响应式
   ============================================================ */
@media (min-width:900px){
  :root{--top-h:70px}
  .ds-topnav{display:flex}
  .ds-search{display:flex}
  .ds-tabbar{display:none}
}
@media (max-width:899px){
  .ds-has-tabbar{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}
  .ds-topbar{padding:0 16px}
  .ds-wrap{padding:0 16px}
}

/* Toast */
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(16px);z-index:var(--z-toast);
  background:var(--toast-bg);color:var(--toast-fg);font-size:13px;font-weight:600;padding:12px 22px;border-radius:999px;
  box-shadow:var(--shadow-m);border:1px solid var(--line);opacity:0;pointer-events:none;transition:.3s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:900px){.toast{bottom:32px}}