/* yaoyao overlay — generated by migration/final/overlay/build.mjs; edit src/, not dist/ */
/* =============================================================================
 * 耀耀 · 曜纹 Motion（最终版）— 设计令牌
 * -----------------------------------------------------------------------------
 * 母题：日轮雕纹（guilloché）—— 表盘与钞票上的玫瑰线雕刻。
 * 视觉：暖纸底 + 日光橙细线（1px，取 yaoyaozzz.com 线上「曜光」的 #e96835 / #c84722 一系）；
 *       遮挡靠景深（虚化 / 后退 / 压暗），不靠大色块。
 * 动作：平静、精确、有阻尼。少弹跳，多「落定」。加载进度 = 雕纹被刻出来的进度。
 * ========================================================================== */

:root {
  /* ---------- 纸与墨 ---------- */
  --s-bg: #f6f3ec;
  --s-bg-2: #efebe2;
  --s-surface: #fffdf8;
  --s-surface-2: #f3efe6;
  --s-line: #e6e0d3;
  --s-line-2: #d2cab9;
  --s-text: #1d1b16;
  --s-muted: #6e6a5e;
  --s-accent: #e96835;
  --s-accent-ink: #aa3f1d;
  --s-accent-soft: #fbede4;
  --s-ok: #3f6f57;
  --s-danger: #b2453a;

  /* ---------- 日光橙阶（细线、光、点缀；不做大面积平涂） ---------- */
  --sun-0: #fff1e8;
  --sun-1: #f7b48c;
  --sun-2: #ee8655;
  --sun-3: #e96835;
  --sun-4: #c84722;
  --sun-5: #8a3216;

  /* 雕纹线色（在纸上） */
  --engrave: #c84722;
  --engrave-soft: color-mix(in srgb, #c84722 45%, transparent);
  --glow: transparent; /* 白天不发光 */

  /* 日心与刻刀的「最亮」：纸上用深橙，夜里用白橙 */
  --thread-hot: #e96835;
  --glow-strong: transparent;

  /* 光丝（canvas）：尾部浅橙、头部日光橙、柔光头的芯 */
  --yw-thread-hot: #e96835;
  --yw-thread-soft: #eea569;
  --yw-thread-core: #fffaf3;

  /* 夜色（日出前）与暮色（日落）：两个主题都是深底，橙线在上面自己发光 */
  --night-0: #120f0b;
  --night-1: #2a2117;
  --night-ink: #f3ede2;
  --night-muted: #a39a89;
  --night-gold: #ee8655;
  --night-glow: color-mix(in srgb, #ee8655 55%, transparent);
  --dawn-glow: color-mix(in srgb, #e96835 32%, transparent);
  --dawn-glow-0: transparent;
  --day-edge: #f7c4a5;
  --day-edge-0: transparent;
  --dusk-0: #1c1a2a;
  --dusk-1: #6b4030;
  --sea-0: #2a2030;
  --sea-1: #0e0d14;
  --horizon: #ffb38e;
  --horizon-0: transparent;
  --horizon-glow: color-mix(in srgb, #e96835 60%, transparent);
  /* 月影：纸上是一枚墨色月轮 */
  --moon: #2a241c;
  --moon-rim: #c84722;

  /* 景深遮挡 */
  --veil: #f6f3ec;
  --veil-max: 0.84;
  --depth-blur: 12px;
  --z-area: 40;
  /* 阻尼最重的弹簧：过冲 0.5%，用于指示块、落点 */
  --e-spring-settle: linear(0, 0.0459, 0.1517, 0.2824, 0.4162, 0.5406, 0.6491, 0.7397, 0.8126, 0.8694, 0.9123, 0.9439, 0.9664, 0.9819, 0.9921, 0.9985, 1.0023, 1.0042, 1.005, 1.0049, 1.0045, 1.0039, 1.0032, 1.0026, 1.002, 1.0015, 1.0011, 1.0008, 1.0005, 1.0003, 1);
  /* 光丝与导航纸片共用的滑行曲线：起步柔、收尾长 */
  --e-glide: cubic-bezier(0.5, 0, 0.15, 1);

  /* ---------- 时长 ---------- */
  --t-tap: 90ms;
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 460ms;
  --t-hero: 1000ms;
  --t-epic: 2200ms;

  /* ---------- 缓动：以 expo / quint 为主，弹簧只取阻尼最重的一档 ---------- */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in: cubic-bezier(0.7, 0, 0.84, 0);
  --e-inout: cubic-bezier(0.83, 0, 0.17, 1);
  --e-anticip: cubic-bezier(0.5, -0.25, 0.6, 1);
  --e-spring-soft: linear(0, 0.0336, 0.1191, 0.236, 0.3677, 0.5017, 0.6286, 0.7426, 0.84, 0.9194, 0.9811, 1.0261, 1.0564, 1.0744, 1.0825, 1.083, 1.078, 1.0695, 1.0591, 1.0479, 1.0369, 1.0267, 1.0177, 1.0103, 1.0043, 0.9998, 0.9966, 0.9945, 0.9934, 0.993, 0.9932, 0.9938, 0.9946, 0.9955, 0.9964, 0.9973, 0.9981, 0.9988, 0.9994, 0.9998, 1);
  --e-spring-bouncy: var(--e-spring-soft);
  --e-spring-snappy: linear(0, 0.051, 0.1692, 0.3153, 0.4639, 0.6001, 0.7163, 0.8102, 0.8823, 0.935, 0.9717, 0.9955, 1.0098, 1.0171, 1.0198, 1.0195, 1.0175, 1.0147, 1.0117, 1.0089, 1.0064, 1.0044, 1.0028, 1.0016, 1.0008, 1.0002, 0.9999, 0.9997, 0.9996, 0.9996, 0.9996, 0.9997, 0.9997, 0.9998, 0.9999, 0.9999, 0.9999, 1, 1, 1, 1);

  /* ---------- 层级 ---------- */
  --z-overlay: 2147483000;
  --z-toast: 2147482000;
  --z-modal: 1000;

  --radius: 16px;
  --font: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  --font-display: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  color-scheme: light;
}

/* ---------- 黑夜：深墨底，橙线自己发光 ---------- */
html[data-theme='dark'] {
  --s-bg: #0f0e0c;
  --s-bg-2: #15130f;
  --s-surface: #181612;
  --s-surface-2: #201d18;
  --s-line: #2b2821;
  --s-line-2: #3b372e;
  --s-text: #f1ece2;
  --s-muted: #9c9688;
  --s-accent: #ee8655;
  --s-accent-ink: #ffb38e;
  --s-accent-soft: #3b2b22;
  --s-ok: #8fbf9f;
  --s-danger: #ec9a8c;

  --sun-0: #fff1e8;
  --sun-1: #ffc2a0;
  --sun-2: #f39a6c;
  --sun-3: #ee8655;
  --sun-4: #d55a2c;
  --sun-5: #8f3a1a;

  --engrave: #ee8655;
  --engrave-soft: color-mix(in srgb, #ee8655 40%, transparent);
  --glow: color-mix(in srgb, #f39a6c 22%, transparent);

  --veil: #0f0e0c;
  --veil-max: 0.88;
  --thread-hot: #fff1e8;
  --glow-strong: color-mix(in srgb, #f39a6c 55%, transparent);
  --yw-thread-hot: #ee8655;
  --yw-thread-soft: #ffb38e;
  --yw-thread-core: #fff3e6;
  --night-0: #060504;
  --night-1: #17130e;
  --dawn-glow: color-mix(in srgb, #e96835 24%, transparent);
  --day-edge: #3b2b22;
  --dusk-0: #07070c;
  --dusk-1: #2c1a12;
  --sea-0: #0f0c12;
  --sea-1: #050407;
  --moon: #050403;
  --moon-rim: #ee8655;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-hero: 220ms; --t-epic: 400ms; --depth-blur: 0px; }
}

/* =============================================================================
 * 耀耀 · 曜纹 Motion（最终版）— 页面切换样式 (yw-motion.css)  依赖 yw-tokens.css
 * ========================================================================== */

/* ---------------- 舞台 ---------------- */
.yw-stage { position: fixed; z-index: var(--z-overlay); pointer-events: none; overflow: hidden; contain: strict; }
.yw-stage > svg { display: block; overflow: visible; }
/* 区域型（漩涡 / 共享元素）只盖内容区，压在全局控件之下；全屏型（日出 / 日落 / 光圈）在最上 */
.yw-vortex, .yw-shell { z-index: var(--z-area); }
.yw-sunwrap { z-index: calc(var(--z-overlay) + 2); will-change: transform; contain: layout; overflow: visible; }
.yw-threads { position: fixed; left: 0; top: 0; z-index: calc(var(--z-overlay) + 4); pointer-events: none; display: none; }
.yw-quiet { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: var(--z-overlay); font: 500 11px/1 var(--mono); letter-spacing: 0.2em; color: var(--s-muted); pointer-events: none; }

/* ---------------- 日轮雕纹 ---------------- */
.yw-rose { transition: filter 900ms var(--e-soft); }
.yw-rose path, .yw-rose circle { fill: none; stroke: var(--engrave); stroke-linecap: round; stroke-linejoin: round; transition: stroke 900ms var(--e-soft); }
.yw-r-bezel  { stroke-width: 1.2; opacity: 0.95; }
.yw-r-bezel2 { stroke-width: 0.8; opacity: 0.7; }
.yw-r-tick   { stroke-width: 0.9; opacity: 0.8; }
.yw-band path { transition: opacity 500ms var(--e-soft), stroke 900ms var(--e-soft); }
.yw-r-braid  { stroke-width: 0.55; opacity: 0.5; }
.yw-r-braid2 { stroke-width: 0.5; opacity: 0.42; }
.yw-r-lace   { stroke-width: 0.7; opacity: 0.82; }
.yw-r-ray    { stroke-width: 0.6; opacity: 0.6; }
.yw-rose circle.yw-r-core { fill: var(--sun-2); stroke: none; }
.yw-rose circle.yw-r-tool { fill: var(--thread-hot); stroke: none; filter: drop-shadow(0 0 3px var(--sun-1)); }
.yw-rose.is-lit .yw-r-braid, .yw-rose.is-lit .yw-r-braid2 { opacity: 0.95; }
.yw-rose--l0 .yw-r-bezel { stroke-width: 1.4; }
.yw-rose--l0 .yw-r-lace  { stroke-width: 0.9; opacity: 0.95; }
.yw-r-shock { fill: none; stroke: var(--sun-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.yw-r-flare { fill: none; stroke: var(--sun-2); stroke-width: 1; stroke-linecap: round; }
html[data-theme='dark'] .yw-rose { filter: drop-shadow(0 0 2.5px var(--glow-strong)); }
html[data-theme='dark'] .yw-r-braid  { opacity: 0.62; }
html[data-theme='dark'] .yw-r-braid2 { opacity: 0.5; }
html[data-tier='low'] .yw-rose { filter: none !important; }

/* ---------------- 进度文案 ---------------- */
.yw-plabel { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; pointer-events: none; }
.yw-plabel-num { font: 400 30px/1 var(--font-display); letter-spacing: 0.02em; color: var(--s-text); font-variant-numeric: tabular-nums lining-nums; }
.yw-plabel-cap { margin-top: 10px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.22em; color: var(--s-muted); }
.yw-plabel--hero .yw-plabel-num { font-size: 40px; }
.yw-plabel.is-fail .yw-plabel-num, .yw-plabel.is-fail .yw-plabel-cap { color: var(--s-danger); }
.yw-sky .yw-plabel-num { color: var(--night-ink); }
.yw-sky .yw-plabel-cap { color: var(--night-muted); }
/* ---------------- 月影（失败）：墨色月轮 + 日冕 + 钻石环 ---------------- */
.yw-moon-disc { fill: var(--moon); stroke: var(--moon-rim); stroke-width: 1; }
.yw-moon-ring { fill: none; stroke: var(--moon-rim); stroke-width: 0.6; opacity: 0.45; }
.yw-corona { fill: none; stroke: var(--sun-2); stroke-width: 0.9; stroke-linecap: round; }
.yw-gem { fill: var(--sun-0); filter: drop-shadow(0 0 6px var(--sun-1)); }

/* ---------------- 漩涡：纸幕 + 线条层（中心实、边缘虚） ---------------- */
.yw-veil { fill: var(--veil); opacity: var(--veil-max); }
.yw-weave {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, #000 30%, rgb(0 0 0 / 0.5) 70%, rgb(0 0 0 / 0.14) 100%);
  mask-image: radial-gradient(closest-side, #000 0%, #000 30%, rgb(0 0 0 / 0.5) 70%, rgb(0 0 0 / 0.14) 100%);
}
.yw-weave > svg { display: block; overflow: visible; }
html[data-tier='low'] .yw-weave { -webkit-mask-image: none; mask-image: none; }
.yw-vx-a path { fill: none; stroke: var(--engrave); stroke-width: 0.7; opacity: 0.6; }
.yw-vx-b path { fill: none; stroke: var(--engrave); stroke-width: 0.6; opacity: 0.34; }
.yw-vx-rings path { fill: none; stroke: var(--engrave); stroke-width: 0.6; opacity: 0.3; }
.yw-vx-dot { fill: var(--thread-hot); }
.yw-vx-halo { fill: none; stroke: var(--sun-2); stroke-width: 0.9; }

/* ---------------- 防伪底纹（光圈叶面） ---------------- */
.yw-pat-bg--a { fill: var(--s-surface); }
.yw-pat-bg--b { fill: color-mix(in srgb, var(--s-surface) 55%, var(--s-bg-2)); }
.yw-pat-line { fill: none; stroke: var(--engrave); stroke-width: 0.6; opacity: 0.22; }
/* ---------------- 光圈：八叶（high 档叶面是防伪底纹）+ 风车接缝 + 光孔橙线 ---------------- */
.yw-leaf { stroke: none; }
html[data-tier='low'] .yw-leaf--a { fill: var(--s-surface); }
html[data-tier='low'] .yw-leaf--b { fill: color-mix(in srgb, var(--s-surface) 55%, var(--s-bg-2)); }
.yw-seam { fill: none; stroke: var(--engrave); stroke-width: 0.8; opacity: 0.7; }
.yw-rim { fill: none; stroke: var(--thread-hot); stroke-width: 1; opacity: 0.85; }
.yw-iris-title { position: absolute; left: 50%; transform: translateX(-50%); font: 400 22px/1 var(--font-display); letter-spacing: 0.12em; color: var(--s-text); white-space: nowrap; }

/* ---------------- 卡片 ⇄ 详情（详情页真页面也用同一套 .yw-hero，交接无缝） ---------------- */
.yw-shell { position: fixed; pointer-events: none; background: var(--s-bg); overflow: hidden; will-change: clip-path; }
.yw-hero {
  position: relative;
  height: 232px;
  padding: 0 40px;
  overflow: hidden;
  border-bottom: 1px solid var(--s-line);
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--sun-1) 22%, #f7d08a00) 0%, #f7d08a00 60%), var(--s-surface);
}
.yw-hero-title { position: absolute; left: 40px; bottom: 64px; font: 400 40px/1.1 var(--font-display); letter-spacing: 0.01em; color: var(--s-text); white-space: nowrap; }
.yw-hero-sub { position: absolute; left: 40px; bottom: 34px; font: 500 11px/1 var(--mono); letter-spacing: 0.2em; color: var(--s-muted); font-variant-numeric: tabular-nums; }
.yw-hero-rose { position: absolute; right: -40px; top: -34px; width: 300px; height: 300px; }
.yw-hero-rose svg { display: block; overflow: visible; }
.yw-shell.is-fail .yw-hero-sub { color: var(--s-danger); }
.yw-shell-body { padding: 28px 40px; display: grid; gap: 14px; }
.yw-rule { height: 10px; border-radius: 5px; background: var(--s-surface-2); position: relative; overflow: hidden; }
.yw-rule:nth-child(1) { width: 58%; }
.yw-rule:nth-child(2) { width: 86%; }
.yw-rule:nth-child(3) { width: 72%; }
.yw-rule:nth-child(4) { width: 80%; }
.yw-rule:nth-child(5) { width: 40%; }
.yw-rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #f7d08a00 20%, color-mix(in srgb, var(--sun-1) 30%, #f7d08a00) 50%, #f7d08a00 80%);
  transform: translateX(-100%);
  animation: yw-rule 1.6s var(--e-inout) infinite;
}
@keyframes yw-rule { to { transform: translateX(100%); } }

/* ---------------- 页内滑动的进度橙线 ---------------- */
.yw-panel-bar { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--thread-hot); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------------- 日出：夜色 → 天光 ---------------- */
.yw-sunwrap.is-night .yw-rose { --engrave: var(--night-gold); filter: drop-shadow(0 0 3px var(--night-glow)); }
.yw-sky { background: radial-gradient(ellipse at 50% 50%, var(--night-1) 0%, var(--night-0) 75%); }
.yw-sky-glow {
  position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; border-radius: 50%;
  background: radial-gradient(closest-side, var(--dawn-glow) 0%, var(--dawn-glow-0) 100%);
  transform: translate(-50%, -50%) scale(0.35); opacity: 0; will-change: transform, opacity;
}
/* 天光：一枚纸色圆盘从日轮处铺开，边缘带一圈暖色的晨光 */
.yw-sky-day {
  position: absolute; left: 50%; top: 50%; width: 260vmax; height: 260vmax; border-radius: 50%;
  background: radial-gradient(closest-side, var(--s-bg) 0%, var(--s-bg) 84%, var(--day-edge) 93%, var(--day-edge-0) 100%);
  transform: translate(-50%, -50%) scale(0); will-change: transform;
}

/* ---------------- 日落：暮色 + 地平线 + 水面倒影 ---------------- */
.yw-dusk { background: linear-gradient(180deg, var(--dusk-0) 0%, var(--dusk-1) calc(var(--hy) - 1px), var(--sea-0) var(--hy), var(--sea-1) 100%); }
.yw-dusk-up { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; }
.yw-dusk-sea { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }
.yw-sunbox { position: absolute; }
.yw-sunbox > svg { display: block; overflow: visible; }
.yw-dusk .yw-rose { --engrave: var(--night-gold); filter: drop-shadow(0 0 3px var(--night-glow)); }
.yw-mirror > svg { opacity: 0.42; }
.yw-mirror .yw-rose { filter: none; }
.yw-mirror {
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 3px, rgb(0 0 0 / 0.2) 3px 6px);
  mask-image: repeating-linear-gradient(180deg, #000 0 3px, rgb(0 0 0 / 0.2) 3px 6px);
}
.yw-horizon { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--horizon-0), var(--horizon) 50%, var(--horizon-0)); box-shadow: 0 0 14px 1px var(--horizon-glow); }
.yw-dusk-note { position: absolute; left: 50%; transform: translateX(-50%); font: 500 10.5px/1 var(--mono); letter-spacing: 0.22em; color: var(--night-muted); white-space: nowrap; }
.yw-dusk-bye { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.yw-dusk-bye b { display: block; font: 400 30px/1.2 var(--font-display); font-weight: 400; letter-spacing: 0.08em; color: var(--night-ink); }
.yw-dusk-bye span { display: block; margin-top: 12px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.22em; color: var(--night-muted); }

/* ---------------- 落点脉冲（光丝本身画在 canvas 上，见引擎第 8 节） ---------------- */
.yw-pulse { position: fixed; z-index: calc(var(--z-overlay) + 3); pointer-events: none; border-radius: 50%; border: 1px solid var(--sun-3); }
/* ---------------- 导航胶囊 ---------------- */
.yw-nav { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--s-line); background: var(--s-bg-2); }
.yw-nav > a { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; font: 500 13px/1 var(--font); color: var(--s-muted); text-decoration: none; cursor: pointer; white-space: nowrap; transition: color 300ms var(--e-out); }
.yw-nav > a:hover, .yw-nav > a[aria-current='page'] { color: var(--s-text); }
.yw-chip {
  position: absolute; z-index: 0; left: 0; top: 3px; bottom: 3px; border-radius: 999px; background: var(--s-surface);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, #ffffff00) inset, 0 4px 14px -8px rgba(40, 30, 10, 0.32), 0 0 0 1px var(--s-line);
  transition: transform 560ms var(--e-glide), width 560ms var(--e-glide), opacity 200ms;
  pointer-events: none;
}
.yw-chip::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--thread-hot); transition: opacity 260ms var(--e-out); }
.yw-chip.is-moving::after { opacity: 0; transition-duration: 120ms; }
html[data-theme='dark'] .yw-chip { box-shadow: 0 0 0 1px var(--s-line), 0 6px 18px -10px rgba(0, 0, 0, 0.8); }
/* 手机底栏：指示是上沿一道橙线 */
.yw-nav--bar { display: flex; gap: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.yw-nav--bar > a { flex: 1; justify-content: center; flex-direction: column; gap: 5px; height: 56px; padding: 0; border-radius: 0; font-size: 11px; }
.yw-nav--bar .yw-chip { top: 0; bottom: auto; height: 2px; border-radius: 0 0 2px 2px; background: var(--thread-hot); box-shadow: 0 0 10px 0 var(--sun-1); }
.yw-nav--bar .yw-chip::after { display: none; }

/* ---------------- 跨文档登场：闭合的光圈出来之前，页面先藏住 ---------------- */
html.yw-arriving body > *:not(.yw-stage) { visibility: hidden; }
html.yw-arriving body { background: var(--s-surface); }

/* ---------------- 减少动效 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .yw-rule::after { animation: none; }
  .yw-chip { transition-duration: 1ms; }
}
html[data-motion='off'] .yw-rule::after { animation: none; }
html[data-motion='off'] .yw-chip { transition-duration: 1ms; }

/* =============================================================================
 * 耀耀 · 曜纹 Motion（最终版）— 微交互样式 (yw-ui.css)  依赖 yw-tokens.css
 * ========================================================================== */

/* ---------------- 按钮 ---------------- */
.yw-btn, .ink-btn, .ghost { position: relative; overflow: hidden; isolation: isolate; }
.yw-ink {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--sun-2) 80%, #efa45100);
  background: color-mix(in srgb, var(--sun-1) 16%, #f7d08a00);
  pointer-events: none;
}
.ink-btn .yw-ink { border-color: color-mix(in srgb, var(--sun-1) 60%, #f7d08a00); background: color-mix(in srgb, var(--sun-1) 22%, #f7d08a00); }
.is-busy { color: transparent !important; pointer-events: none; }
.yw-btn-fx { position: absolute; inset: 0; display: grid; place-items: center; }
.yw-btn-fx svg { overflow: visible; }
.yw-busy-ring { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ink-btn .yw-busy-ring, .ink-btn .yw-busy-mark { stroke: var(--s-bg); }
.yw-busy-mark { fill: none; stroke: var(--s-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.is-err { background: var(--s-danger) !important; }
.is-err .yw-busy-mark { stroke: #fff; }

/* ---------------- 表单：下划线 ---------------- */
.yw-field { position: relative; display: block; padding-top: 18px; margin-bottom: 18px; }
.yw-field input {
  width: 100%;
  height: 36px;
  border: 0;
  border-bottom: 1px solid var(--s-line-2);
  background: none;
  outline: none;
  padding: 0 2px;
  font-size: 14px;
  color: var(--s-text);
}
.yw-field label {
  position: absolute;
  left: 2px;
  top: 26px;
  font-size: 14px;
  color: var(--s-muted);
  transform-origin: 0 0;
  transition: transform 420ms var(--e-out), color 300ms;
  pointer-events: none;
}
.yw-field input:focus + label,
.yw-field input:not(:placeholder-shown) + label { transform: translateY(-24px) scale(0.76); letter-spacing: 0.08em; }
.yw-field input:focus + label { color: var(--s-accent); }
.yw-field::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 53px;
  height: 1px;
  background: var(--s-accent);
  transform: scaleX(0);
  transition: transform 520ms var(--e-out);
}
.yw-field:focus-within::after { transform: scaleX(1); }
.yw-field.is-error::after { background: var(--s-danger); transform: scaleX(1); }
.yw-field.is-ok::after { background: var(--s-ok); transform: scaleX(1); }
.yw-field-hint { display: block; min-height: 16px; margin-top: 6px; font-size: 11.5px; color: var(--s-muted); }
.yw-field.is-error .yw-field-hint { color: var(--s-danger); }
.yw-field.is-ok .yw-field-hint { color: var(--s-ok); }

/* 开关：小日轮在轨道里滚动 */
.yw-switch { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; }
.yw-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.yw-switch .trk { position: absolute; inset: 0; border-radius: 999px; border: 1px solid var(--s-line-2); background: var(--s-bg-2); transition: background 400ms var(--e-out), border-color 400ms; }
.yw-switch .knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--s-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 560ms var(--e-spring-soft), background 300ms;
  display: grid;
  place-items: center;
}
.yw-switch .knob::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--s-line-2);
  transition: all 400ms var(--e-out);
}
.yw-switch input:checked ~ .trk { background: var(--s-text); border-color: var(--s-text); }
.yw-switch input:checked ~ .knob { transform: translateX(20px) rotate(180deg); }
.yw-switch input:checked ~ .knob::after { border-color: var(--sun-2); background: var(--sun-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun-1) 30%, #f7d08a00); }
.yw-switch input:focus-visible ~ .trk { outline: 2px solid var(--s-accent); outline-offset: 2px; }

/* 复选 / 单选 */
.yw-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; }
.yw-check input { position: absolute; opacity: 0; }
.yw-check .box {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--s-line-2);
  transition: background 300ms, border-color 300ms, transform 400ms var(--e-spring-soft);
}
.yw-check .box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--s-bg);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 420ms var(--e-spring-soft) 80ms;
}
.yw-check input:checked + .box { background: var(--s-text); border-color: var(--s-text); }
.yw-check input:checked + .box::after { transform: rotate(45deg) scale(1); }
.yw-check input:active + .box { transform: scale(0.88); }
.yw-check.radio .box { border-radius: 50%; }
.yw-check.radio .box::after { left: 4px; top: 4px; width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--sun-2); transform: scale(0); }
.yw-check.radio input:checked + .box { background: var(--s-surface); border-color: var(--s-text); }
.yw-check.radio input:checked + .box::after { transform: scale(1); }

/* ---------------- 数字 ---------------- */
.yw-odo { display: inline-flex; vertical-align: bottom; line-height: 1em; height: 1em; overflow: hidden; }
.yw-odo-col { display: inline-block; height: 1em; overflow: hidden; }
.yw-odo-reel { display: flex; flex-direction: column; }
.yw-odo-reel > span { display: block; height: 1em; line-height: 1em; }
.yw-odo-sep { display: inline-block; }
.yw-up { animation: yw-up 1.2s var(--e-out); }
.yw-down { animation: yw-down 1.2s var(--e-out); }
@keyframes yw-up { 0% { color: var(--s-accent); } 100% { color: inherit; } }
@keyframes yw-down { 0% { color: var(--s-muted); } 100% { color: inherit; } }
.yw-tick-arrow { position: absolute; margin-left: 6px; font-size: 12px; }
.yw-tick-arrow.is-up { color: var(--s-accent); }
.yw-tick-arrow.is-down { color: var(--s-muted); }

/* ---------------- 进度 ---------------- */
.yw-progress { position: relative; display: block; height: 1px; background: var(--s-line-2); border-radius: 1px; }
.yw-progress-fill { position: absolute; inset: 0; background: var(--s-text); transform: scaleX(0); transform-origin: 0 50%; }
.yw-progress-head { position: absolute; top: -3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--sun-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun-1) 34%, #f7d08a00); }
.yw-ringmeter { position: relative; width: 140px; height: 140px; }
.yw-ringmeter svg { width: 100%; height: 100%; overflow: visible; }
.yw-rm-ticks { stroke: var(--engrave); stroke-width: 0.6; opacity: 0.55; fill: none; }
.yw-rm-arc { fill: none; stroke: var(--s-accent); stroke-width: 1.4; stroke-linecap: round; }
.yw-rm-num { position: absolute; inset: 0; display: grid; place-items: center; font: 400 28px/1 var(--font-display); font-variant-numeric: tabular-nums lining-nums; }
.yw-rm-cap { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font: 500 9.5px/1 var(--mono); letter-spacing: 0.2em; color: var(--s-muted); }

/* ---------------- 图表 ---------------- */
.yw-ch-grid { stroke: var(--s-line); stroke-width: 1; stroke-dasharray: 2 5; }
.yw-ch-line { fill: none; stroke: var(--s-accent); stroke-width: 1.6; stroke-linecap: round; }
.yw-ch-area { fill: color-mix(in srgb, var(--sun-1) 18%, #f7d08a00); }
.yw-ch-dot { fill: var(--s-surface); stroke: var(--s-accent); stroke-width: 1.2; }
.yw-ch-cross { stroke: var(--engrave); stroke-width: 0.8; stroke-dasharray: 3 3; opacity: 0; transition: opacity 200ms; }
.yw-ch-focus { fill: none; stroke: var(--s-accent); stroke-width: 1.2; opacity: 0; transition: opacity 200ms; }
svg.is-hover .yw-ch-cross, svg.is-hover .yw-ch-focus { opacity: 1; }
.yw-ch-tip {
  position: absolute;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--s-text);
  color: var(--s-bg);
  font: 500 11px/1.3 var(--mono);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  opacity: 0;
  transition: opacity 200ms, left 220ms var(--e-out), top 220ms var(--e-out);
}
.yw-ch-tip.is-on { opacity: 1; }

/* ---------------- 骨架 ---------------- */
.yw-skel-on > * { position: relative; color: transparent !important; border-radius: 6px; background: var(--s-surface-2); overflow: hidden; }
.yw-skel-on > * * { visibility: hidden; }
.yw-skel-on > *::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #f7d08a00 20%, color-mix(in srgb, var(--sun-1) 28%, #f7d08a00) 50%, #f7d08a00 80%);
  transform: translateX(-100%);
  animation: yw-skel 1.6s var(--e-inout) infinite;
}
@keyframes yw-skel { to { transform: translateX(100%); } }

/* ---------------- Toast ---------------- */
.yw-toasts { position: fixed; z-index: var(--z-toast); right: 22px; top: 22px; display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 32px)); }
.yw-toast {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--s-surface);
  border: 1px solid var(--s-line);
  box-shadow: 0 24px 48px -32px rgba(30, 20, 10, 0.45);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.yw-toast-mark { flex: 0 0 26px; width: 26px; height: 26px; }
.yw-toast-mark svg { width: 26px; height: 26px; overflow: visible; }
.yw-toast-text b { display: block; font: 400 15px/1.3 var(--font-display); }
.yw-toast-text span { display: block; margin-top: 2px; font-size: 12px; color: var(--s-muted); }
.yw-toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--sun-2); transform-origin: 0 50%; }
.yw-toast.is-err .yw-toast-bar { background: var(--s-danger); }

/* ---------------- Modal ---------------- */
.yw-modal-back { position: fixed; inset: 0; z-index: var(--z-modal); background: color-mix(in srgb, var(--s-bg) 60%, #f6f3ec00); backdrop-filter: blur(6px); }
.yw-modal {
  position: fixed;
  z-index: calc(var(--z-modal) + 1);
  left: 50%;
  top: 50%;
  width: min(420px, calc(100vw - 32px));
  margin-left: calc(min(420px, calc(100vw - 32px)) / -2);
  margin-top: -120px;
  border-radius: 20px;
  background: var(--s-surface);
  border: 1px solid var(--s-line);
  box-shadow: 0 50px 100px -50px rgba(30, 20, 10, 0.5);
  overflow: hidden;
}
.yw-modal-in { padding: 28px 28px 22px; }
.yw-modal h3 { margin: 10px 0 8px; font: 400 24px/1.25 var(--font-display); }
.yw-modal-body { color: var(--s-muted); font-size: 13.5px; }
.yw-modal-act { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---------------- 菜单 / 提示 ---------------- */
.yw-menu { position: fixed; z-index: var(--z-toast); min-width: 180px; padding: 6px; border-radius: 14px; background: var(--s-surface); border: 1px solid var(--s-line); box-shadow: 0 24px 48px -28px rgba(30, 20, 10, 0.45); }
.yw-menu-item { position: relative; z-index: 1; display: block; width: 100%; height: 34px; padding: 0 12px; border: 0; background: none; text-align: left; font-size: 13px; border-radius: 9px; cursor: pointer; color: var(--s-text); }
.yw-menu-hl { position: absolute; left: 6px; right: 6px; top: 0; border-radius: 9px; background: var(--s-bg-2); opacity: 0; transition: transform 320ms var(--e-out), height 320ms var(--e-out), opacity 160ms; }
.yw-tip { position: fixed; z-index: calc(var(--z-overlay) + 5); padding: 6px 10px; border-radius: 8px; background: var(--s-text); color: var(--s-bg); font-size: 11.5px; pointer-events: none; white-space: nowrap; opacity: 0; }

/* ---------------- Tabs / Stepper ---------------- */
.tabs, .yw-tabs { position: relative; }
.yw-tab-line { position: absolute; left: 0; bottom: -1px; height: 1px; background: var(--s-text); width: 0; pointer-events: none; }
.yw-steps { display: flex; justify-content: space-between; position: relative; padding: 0 6px; }
.yw-steps::before { content: ''; position: absolute; left: 20px; right: 20px; top: 9px; height: 1px; background: var(--s-line-2); }
.yw-step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; font-size: 12px; color: var(--s-muted); }
.yw-step-dot { width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--s-line-2); background: var(--s-bg); transition: background 300ms, border-color 300ms; }
.yw-step.is-done .yw-step-dot { background: var(--s-text); border-color: var(--s-text); }
.yw-step.is-on .yw-step-dot { border-color: var(--s-accent); box-shadow: inset 0 0 0 4px var(--s-bg), inset 0 0 0 10px var(--sun-2); }
.yw-step.is-on, .yw-step.is-done { color: var(--s-text); }

/* ---------------- 插画 ---------------- */
.yw-empty { display: grid; place-items: center; }
.yw-empty svg, .yw-eclipse svg { overflow: visible; }
.yw-eclipse { position: relative; }
.yw-eclipse svg, .yw-empty svg { display: block; }

/* ---------------- 焦点 ---------------- */
.ink-btn:focus-visible, .ghost:focus-visible, .yw-nav > a:focus-visible, .yw-menu-item:focus-visible, .yw-tile:focus-visible, [data-model]:focus-visible { outline: 1.5px solid var(--s-accent); outline-offset: 3px; }
[tabindex='-1']:focus { outline: none; }

/* ---------------- 光尘 ---------------- */
.yw-dust { position: fixed; inset: 0; z-index: calc(var(--z-overlay) + 6); pointer-events: none; }
.yw-dust-dot, .yw-dust-ring { position: absolute; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--sun-2); }
.yw-dust-ring { width: 8px; height: 8px; margin: -4px; background: none; border: 1px solid var(--sun-3); }

/* ---------------- 其它 ---------------- */
.yw-copy-ok { display: inline-block; color: var(--s-ok); }
.yw-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--s-accent); color: #fff; font: 600 10px/16px var(--font); text-align: center; }
.yw-tilt { transform-style: preserve-3d; will-change: transform; }
.yw-tilt::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--sun-1) 18%, #f7d08a00), #f7d08a00 60%);
  opacity: 0;
  transition: opacity 300ms;
}
.yw-tilt:hover::before { opacity: 1; }

/* ---------------- 减少动效 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .yw-skel-on > *::after { animation: none; }
  .yw-switch .knob, .yw-field label, .yw-field::after { transition-duration: 1ms; }
}
html[data-motion='off'] .yw-skel-on > *::after { animation: none; }

/* ============================================================
   yaoyao shell — 全站唯一顶栏（静态页与 sub2api 控制台共用）
   几何：48px / 胶囊导航 / 左品牌 · 中导航 · 右动作
   ============================================================ */
:root {
  --yao-bg: #f8f7f3;
  --yao-bg-soft: #f0eee7;
  --yao-surface: #fffefa;
  --yao-surface-2: #f4f2eb;
  --yao-text: #25251f;
  --yao-muted: #636659;
  --yao-border: #e5e3d9;
  --yao-border-strong: #cecec0;
  --yao-accent: #e96835;
  --yao-accent-2: #c84722;
  --yao-accent-ink: #aa3f1d;
  --yao-accent-soft: #fbede4;
  --yao-shadow: 0 18px 40px -24px rgba(40, 30, 10, .32), 0 2px 8px -4px rgba(40, 30, 10, .16);
  --yao-shadow-float: 0 26px 64px -30px rgba(40, 30, 10, .42), 0 4px 16px -10px rgba(40, 30, 10, .2);
  --yao-font: 'Inter', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  --yy-hdr-h: 48px;
}
html.dark, html[data-theme='dark'] {
  --yao-bg: #141712;
  --yao-bg-soft: #1b1f19;
  --yao-surface: #20241e;
  --yao-surface-2: #262b23;
  --yao-text: #f0f0e8;
  --yao-muted: #a6a89b;
  --yao-border: #32372e;
  --yao-border-strong: #454b3f;
  --yao-accent: #ee8655;
  --yao-accent-2: #e96835;
  --yao-accent-ink: #f3b08a;
  --yao-accent-soft: #3a2318;
  --yao-shadow: 0 18px 40px -24px rgba(0, 0, 0, .7), 0 2px 8px -4px rgba(0, 0, 0, .5);
  --yao-shadow-float: 0 26px 64px -30px rgba(0, 0, 0, .8), 0 4px 16px -10px rgba(0, 0, 0, .55);
}

/* 顶栏全站 fixed，正文统一让出同一高度 */
html.yy-shell body { padding-top: var(--yy-hdr-h); }
/* 设计稿用整页光圈遮住换页。阅读时那一下太重，正文始终可见。 */
html.yy-shell.yw-arriving body > * { visibility: visible; }

.yy-hdr {
  position: fixed; inset: 0 0 auto 0; height: var(--yy-hdr-h); z-index: 900;
  box-sizing: border-box; font-family: var(--yao-font);
  background: color-mix(in srgb, var(--yao-bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--yao-border) 55%, transparent);
}
.yy-hdr-in { position: relative; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 16px; }

.yy-brand { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; margin-left: -6px; border-radius: 8px; text-decoration: none; color: var(--yao-text); flex: none; }
.yy-brand img { width: 20px; height: 20px; border-radius: 6px; display: block; }
.yy-brand strong { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }

.yy-nav {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--yao-border) 60%, transparent);
  background: color-mix(in srgb, var(--yao-surface) 60%, transparent);
}
.yy-nav > a {
  position: relative; z-index: 1; display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
  border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1; color: var(--yao-muted);
  text-decoration: none; white-space: nowrap; transition: color .16s ease;
}
.yy-nav > a:hover { color: var(--yao-text); }
.yy-nav > a[aria-current='page'] { color: var(--yao-text); font-weight: 500; }
.yy-nav .yw-chip { top: 3px; bottom: 3px; background: var(--yao-surface); box-shadow: 0 1px 2px rgba(40, 30, 10, .07), 0 0 0 1px var(--yao-border); }
html.dark .yy-nav .yw-chip { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 1px var(--yao-border); }

.yy-act { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.yy-ibtn {
  width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--yao-muted);
  cursor: pointer; padding: 0; transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.yy-ibtn:hover { background: var(--yao-bg-soft); color: var(--yao-text); }
.yy-ibtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.yy-ibtn[data-yy-cmd] svg { width: 15px; height: 15px; }

.yy-bal { font: 600 12.5px/1 var(--yao-font); font-variant-numeric: tabular-nums; color: var(--yao-text); padding: 0 2px; white-space: nowrap; }
.yy-user {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 3px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--yao-border) 80%, transparent); background: color-mix(in srgb, var(--yao-surface) 70%, transparent);
  color: var(--yao-text); cursor: pointer; font: 500 12.5px/1 var(--yao-font); max-width: 148px;
}
.yy-user:hover { border-color: var(--yao-border-strong); }
.yy-av {
  width: 24px; height: 24px; flex: none; border-radius: 999px; text-align: center;
  background: linear-gradient(140deg, var(--yao-accent), var(--yao-accent-2)); color: #fff;
  font: 600 10px/24px var(--yao-font); letter-spacing: .02em; text-transform: uppercase;
}
.yy-uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yy-user svg { width: 12px; height: 12px; flex: none; opacity: .55; }

.yy-cta {
  height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; flex: none;
  font: 500 13px/1 var(--yao-font); text-decoration: none; color: var(--yao-text);
  border: 1px solid color-mix(in srgb, var(--yao-border) 85%, transparent); background: transparent;
  transition: background-color .16s ease, border-color .16s ease;
}
.yy-cta:hover { background: var(--yao-bg-soft); }
.yy-cta.solid { background: var(--yao-text); color: var(--yao-bg); border-color: var(--yao-text); }
.yy-cta.solid:hover { background: var(--yao-accent); border-color: var(--yao-accent); color: #fff; }
.yy-menu { display: none; }

/* 气泡：公告 / 用户菜单 */
.yy-pop {
  position: fixed; top: calc(var(--yy-hdr-h) + 6px); right: 12px; z-index: 960; width: 300px; max-width: calc(100vw - 24px);
  background: var(--yao-surface); border: 1px solid var(--yao-border); border-radius: 14px;
  box-shadow: var(--yao-shadow-float); padding: 6px; font-family: var(--yao-font); color: var(--yao-text);
  animation: yy-pop-in .18s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes yy-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.yy-pop-h { padding: 8px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--yao-muted); }
.yy-pop a, .yy-pop button.yy-pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 10px;
  border: 0; border-radius: 9px; background: transparent; color: inherit; font: 500 13px/1.3 var(--yao-font);
  text-decoration: none; cursor: pointer; text-align: left;
}
.yy-pop a:hover, .yy-pop button.yy-pop-item:hover { background: var(--yao-bg-soft); }
.yy-pop-item small { display: block; font-weight: 400; font-size: 11.5px; color: var(--yao-muted); margin-top: 2px; }
.yy-pop-sep { height: 1px; margin: 5px 8px; background: var(--yao-border); }
.yy-pop-empty { padding: 14px 10px; font-size: 12.5px; color: var(--yao-muted); }
.yy-pop-ann { max-height: 320px; overflow: auto; }
.yy-pop-ann b { display: block; font-size: 13px; font-weight: 600; }
.yy-pop-ann p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--yao-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 抽屉：控制台移动端 */
.yy-drawer {
  position: fixed; top: var(--yy-hdr-h); left: 0; right: 0; z-index: 880; display: none;
  background: var(--yao-surface); border-bottom: 1px solid var(--yao-border); box-shadow: var(--yao-shadow);
  padding: 10px 12px 14px; font-family: var(--yao-font); max-height: calc(100vh - var(--yy-hdr-h)); overflow: auto;
}
html[data-yy-menu='open'] .yy-drawer { display: block; animation: yy-pop-in .16s cubic-bezier(.16, 1, .3, 1) both; }
.yy-drawer-h { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--yao-muted); }
.yy-drawer a { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 10px; color: var(--yao-text); text-decoration: none; font-size: 14px; }
.yy-drawer a:hover { background: var(--yao-bg-soft); }
.yy-drawer a[aria-current='page'] { background: var(--yao-accent-soft); color: var(--yao-accent-ink); font-weight: 500; }
.yy-drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }

@media (max-width: 1180px) {
  .yy-nav > a { padding: 0 9px; font-size: 12.5px; }
}
@media (max-width: 1080px) {
  .yy-nav { display: none; }
  .yy-menu { display: inline-flex; }
  .yy-uname { display: none; }
  .yy-user { padding: 0 6px 0 3px; }
}
@media (max-width: 620px) {
  .yy-hdr-in { padding: 0 8px; gap: 4px; }
  .yy-bal { font-size: 12px; }
  .yy-hide-s { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .yy-pop, .yy-drawer { animation: none; }
}

/* ---------- 静态页：沿用页面自带的 .site-header，只补动效指示片 ---------- */
html.yy-static .site-links > a { position: relative; z-index: 1; background: transparent; }
html.yy-static .site-links > a:hover { background: transparent; }
html.yy-static .site-links > a[aria-current] { color: var(--yao-text); font-weight: 500; }
html.yy-static .site-links .yw-chip {
  top: 2px; bottom: 2px; background: var(--yao-surface);
  box-shadow: 0 0 0 1px var(--yao-border), 0 1px 2px rgba(40, 30, 10, .06);
}
html.yy-static .site-actions .yy-cta { height: 28px; }

/* 窄屏：页面不横拖；人机验证用自然宽度并居中，不拉满贴到右边 */
@media (max-width: 640px) {
  html.yy-shell,
  html.yy-shell body { overflow-x: clip; max-width: 100%; }
  html.yy-shell input,
  html.yy-shell textarea,
  html.yy-shell select,
  html.yy-shell .btn { max-width: 100%; box-sizing: border-box; }
  html.yy-shell img,
  html.yy-shell main { max-width: 100%; }
  html.yy-shell .turnstile-wrapper,
  html.yy-shell .turnstile-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    overflow: hidden;
  }
  html.yy-shell .turnstile-container iframe {
    width: 300px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   太阳浮标：新手教程的唯一入口（右下角）
   ============================================================ */
.yy-sun {
  position: fixed; right: 24px; bottom: 24px; z-index: 940;
  font-family: var(--yao-font); color: var(--yao-text);
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.yy-sun > * { pointer-events: auto; }

/* —— 光球本体 —— */
.yy-sun-mark {
  position: relative; width: 50px; height: 50px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: transparent; isolation: isolate;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), filter .32s ease;
  filter: drop-shadow(0 10px 22px rgba(200, 71, 34, .28));
}
.yy-sun-mark::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background:
    radial-gradient(circle at 32% 26%, #fff6ec 0%, #f7b48c 38%, #e96835 66%, #c84722 100%);
  box-shadow: 0 0 0 1px rgba(170, 63, 29, .18) inset, 0 1px 0 rgba(255, 255, 255, .55) inset;
}
.yy-sun-mark::after {
  content: ''; position: absolute; inset: -7px; border-radius: inherit; z-index: -2;
  background: radial-gradient(circle, rgba(233, 104, 53, .34), rgba(233, 104, 53, 0) 68%);
  animation: yy-breathe 3.6s ease-in-out infinite;
}
.yy-sun-mark svg { width: 30px; height: 30px; display: block; animation: yy-turn 44s linear infinite; }
.yy-sun-rays {
  position: absolute; inset: -9px; border-radius: inherit; z-index: -3; pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(233, 104, 53, 0) 0deg 14deg, rgba(233, 104, 53, .42) 18deg, rgba(233, 104, 53, 0) 24deg 46deg,
    rgba(238, 134, 85, .34) 50deg, rgba(233, 104, 53, 0) 56deg 78deg, rgba(233, 104, 53, .38) 82deg,
    rgba(233, 104, 53, 0) 88deg 110deg, rgba(238, 134, 85, .3) 114deg, rgba(233, 104, 53, 0) 120deg 142deg,
    rgba(233, 104, 53, .4) 146deg, rgba(233, 104, 53, 0) 152deg 174deg, rgba(238, 134, 85, .32) 178deg,
    rgba(233, 104, 53, 0) 184deg 206deg, rgba(233, 104, 53, .38) 210deg, rgba(233, 104, 53, 0) 216deg 238deg,
    rgba(238, 134, 85, .3) 242deg, rgba(233, 104, 53, 0) 248deg 270deg, rgba(233, 104, 53, .4) 274deg,
    rgba(233, 104, 53, 0) 280deg 302deg, rgba(238, 134, 85, .32) 306deg, rgba(233, 104, 53, 0) 312deg 334deg,
    rgba(233, 104, 53, .38) 338deg, rgba(233, 104, 53, 0) 344deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
  mask: radial-gradient(circle, transparent 62%, #000 64%);
  animation: yy-turn 26s linear infinite;
}
.yy-sun-mark:hover { transform: translateY(-2px) scale(1.04); }
.yy-sun-mark:focus-visible { outline: 2px solid var(--yao-accent); outline-offset: 3px; }
.yy-sun-mark .yy-sun-tip {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(4px);
  white-space: nowrap; font-size: 12px; font-weight: 500; padding: 5px 9px; border-radius: 8px;
  background: var(--yao-text); color: var(--yao-bg); opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.yy-sun-mark:hover .yy-sun-tip { opacity: 1; transform: translateY(-50%); }
/* 卡片展开时不要再冒提示气泡（会压住卡片右下角） */
.yy-sun:has(.yy-sun-card) .yy-sun-tip { opacity: 0 !important; }

/* —— 展开卡片 —— */
.yy-sun-card {
  width: 300px; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: color-mix(in srgb, var(--yao-surface) 95%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--yao-border) 70%, transparent);
  border-radius: 20px; box-shadow: 0 24px 60px -28px rgba(60, 32, 12, .38), 0 2px 8px -2px rgba(60, 32, 12, .12);
  padding: 15px 16px 14px; position: relative; overflow: hidden;
  animation: yy-card-in .42s cubic-bezier(.16, 1, .3, 1) both;
}
.yy-sun-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%);
  mix-blend-mode: soft-light;
}
.yy-sun-card::before {
  content: ''; position: absolute; inset: -40% -30% auto auto; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 104, 53, .16), rgba(233, 104, 53, 0) 70%);
  pointer-events: none;
}
.yy-sun-head { display: flex; align-items: center; gap: 9px; }
.yy-sun-orb { width: 30px; height: 30px; flex: none; border-radius: 999px; display: grid; place-items: center; background: radial-gradient(circle at 32% 26%, #fff6ec, #f7b48c 40%, #e96835 72%, #c84722); }
.yy-sun-orb svg { width: 19px; height: 19px; }
.yy-sun-title { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.yy-sun-sub { font-size: 11.5px; color: var(--yao-muted); margin-top: 1px; }
.yy-sun-x { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 999px; border: 0; background: transparent; color: var(--yao-muted); cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; }
.yy-sun-x:hover { background: var(--yao-bg-soft); color: var(--yao-text); }
.yy-sun-points { margin: 11px 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
.yy-sun-points li { position: relative; padding-left: 16px; font-size: 12px; line-height: 1.5; color: var(--yao-muted); }
.yy-sun-points li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--yao-accent); box-shadow: 0 0 0 3px var(--yao-accent-soft); }
.yy-sun-actions { display: flex; align-items: center; gap: 10px; }
.yy-sun-go {
  flex: 1; height: 34px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, var(--yao-accent), var(--yao-accent-2)); color: #fff;
  font: 600 13px/1 var(--yao-font); letter-spacing: .01em;
  box-shadow: 0 8px 18px -10px rgba(200, 71, 34, .8);
  transition: transform .18s ease, filter .18s ease;
}
.yy-sun-go:hover { transform: translateY(-1px); filter: brightness(1.04); }
.yy-sun-dismiss { border: 0; background: transparent; color: var(--yao-muted); font: 500 12px/1 var(--yao-font); cursor: pointer; padding: 6px 2px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--yao-muted) 40%, transparent); }
.yy-sun-dismiss:hover { color: var(--yao-text); }

/* —— 收起态 —— */
.yy-sun.is-min .yy-sun-mark { width: 44px; height: 44px; }
.yy-sun.is-min .yy-sun-mark svg { width: 26px; height: 26px; }
.yy-sun.is-off { display: none !important; }
/* 右下角教程胶囊退役，太阳浮标是唯一入口 */
.yao-tour-launcher,
[data-yao-tour='tour-launcher'] { display: none !important; }
body[data-yao-tour='active'] .yy-sun { opacity: 0; pointer-events: none; transition: opacity .2s; }

/* —— 「不再显示」后的指引气泡 —— */
.yy-coach {
  position: fixed; z-index: 980; width: 268px; max-width: calc(100vw - 24px);
  background: var(--yao-text); color: var(--yao-bg); border-radius: 12px; padding: 11px 13px 12px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6); font-family: var(--yao-font);
  animation: yy-card-in .3s cubic-bezier(.16, 1, .3, 1) both;
}
.yy-coach::before { content: ''; position: absolute; top: -5px; left: var(--yy-coach-arrow, 50%); width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.yy-coach b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.yy-coach p { margin: 0; font-size: 12px; line-height: 1.55; opacity: .78; }
.yy-coach-act { display: flex; justify-content: flex-end; margin-top: 8px; }
.yy-coach-act button { border: 0; border-radius: 7px; padding: 5px 10px; font: 600 11.5px/1 var(--yao-font); background: var(--yao-bg); color: var(--yao-text); cursor: pointer; }
.yy-glow { position: fixed; z-index: 930; border-radius: 999px; pointer-events: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--yao-accent) 60%, transparent), 0 0 26px 6px color-mix(in srgb, var(--yao-accent) 30%, transparent); animation: yy-glow 1.4s ease-out forwards; }

@keyframes yy-turn { to { transform: rotate(360deg); } }
@keyframes yy-breathe { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.08); opacity: .28; } }
@keyframes yy-card-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes yy-glow { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 620px) {
  .yy-sun { right: 14px; bottom: 84px; }
  .yy-sun-card { width: 272px; }
  .yy-sun.is-min .yy-sun-mark {
    width: 40px; height: 40px;
    box-shadow: 0 6px 18px rgba(200, 71, 34, .3), 0 0 0 6px rgba(233, 104, 53, .07);
  }
  .yy-sun.is-min .yy-sun-mark svg { width: 23px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .yy-sun-mark::after, .yy-sun-mark svg { animation: none; }
  .yy-sun-card, .yy-coach, .yy-glow { animation: none; }
}

/* 原生教程宿主按钮：由太阳浮标取代 */
.yao-tour-launcher { display: none !important; }



/* ============================================================
   sub2api 控制台适配层：把内核自带的两条横条收成「顶栏 + 页标题」
   ============================================================ */

/* 侧栏紧贴 48px 顶栏 */
html.yy-shell .sidebar {
  top: var(--yy-hdr-h) !important;
  height: calc(100vh - var(--yy-hdr-h)) !important;
  border-right: 1px solid color-mix(in srgb, var(--yao-border) 70%, transparent);
}
html.yy-shell .sidebar-header { display: none !important; }
html.yy-shell .sidebar-nav { padding-top: 14px !important; }

/* 原生 header.glass：从「第二条上边栏」降级成页面标题行 */
html.yy-shell header.glass {
  position: static !important;
  height: auto !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 26px 32px 0 !important;
}
html.yy-shell header.glass > div {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  align-items: flex-end !important;
}
html.yy-shell header.glass h1 {
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: var(--yao-text) !important;
}
html.yy-shell header.glass p {
  margin-top: 3px !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--yao-muted) !important;
}
/* 右侧的原生控件已经并进顶栏，这里整簇隐藏 */
html.yy-shell header.glass > div > div:last-child { display: none !important; }
html.yy-shell header.glass button[aria-label='切换菜单'] { display: none !important; }
/* 模型广场是另一套自带 logo 栏的页面 */
html.yy-shell header.glass:has(> .max-w-7xl) { display: none !important; }

html.yy-shell main { padding-top: 12px !important; }

/* 移动端：标题行更紧凑，且保留标题（原生在 lg 以下会隐藏） */
@media (max-width: 1023px) {
  html.yy-shell header.glass { padding: 18px 16px 0 !important; }
  html.yy-shell header.glass h1 { font-size: 18px !important; }
  html.yy-shell header.glass .hidden.lg\:block { display: block !important; }
  html.yy-shell main { padding: 10px 12px 24px !important; }
}

/* 内核里少量 10px 的标签在 1440 下几乎不可读 */
html.yy-shell [class*='text-[10px]'] { font-size: 11px !important; }

/* toast 不要压在顶栏下面 */
html.yy-shell .toast, html.yy-shell [class*='toast'] { margin-top: 8px; }

/* 原生教程按钮与宿主按钮一律不要（太阳浮标是唯一入口） */
html.yy-shell .yao-tour-launcher,
html.yy-shell [data-yao-tour='tour-launcher'].yao-tour-launcher { display: none !important; }

/* 背景 mesh 在深色下别太亮 */
html.yy-shell .bg-mesh-gradient { opacity: .55; }
html.dark.yy-shell .bg-mesh-gradient { opacity: .3; }

/* 公告弹窗（沿用生产 /landing/yao-popup.js）深色适配 */
html.dark.yy-shell .yao-popup-mask { background: rgba(0, 0, 0, .62) !important; }
html.dark.yy-shell .yao-popup-card { background: #20241e !important; color: #f0f0e8 !important; border-color: #32372e !important; }
html.dark.yy-shell .yao-popup-card h3, html.dark.yy-shell .yao-popup-card p { color: #f0f0e8 !important; }