/* =============================================================================
 *  Lyra · DESIGN SYSTEM  (styles.css)
 *  深色 Nocturne 基底。变量、reset、外壳（桌面手机框 + 背景氛围）、状态栏、
 *  底部 tab bar、.screen 基类，以及供所有屏幕复用的共享组件。
 *  屏幕作者只用这里定义的 class / 变量；细节见 CONTRACT.md。
 * ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  /* ===== v5 canonical 双主题令牌（深默认 = 夜空星图 + 星云） ===== */
  --canvas:#080A14;
  --surface:#10131F; --surface-2:#161A28;
  --ink:#F2EEE3; --ink-muted:#A6A092; --ink-subtle:#6E6A5E;
  --hairline:rgba(232,200,130,.13); --hairline-strong:rgba(232,200,130,.22);
  --accent:#E8B964;
  --s-new:#FFB27A; --s-learn:#FFD9A8; --s-review:#FFF4E0; --s-done:#CDD9FF;
  --sky-top:#0C1430; --sky-mid:#0B2A2C; --sky-bottom:#04060E;
  --neb-teal:rgba(46,140,134,.11); --neb-rose:rgba(232,168,124,.10); --neb-milk:rgba(150,170,220,.06);
  --neb-fade:#080A14;
  --band-top:rgba(8,10,20,0); --band-mid:rgba(8,10,20,.55); --band-bottom:#080A14;
  --fig-line:rgba(170,196,255,.22); --fig-line-anchor:rgba(232,200,130,.30);
  --const-line:rgba(214,222,255,.20); --const-line-soft:rgba(214,222,255,.12);
  --field:#C7D2EC; --caps:rgba(232,200,130,.46);
  --frame-bg:#05070C;
  /* —— FE-13：派生表面填充/态色（令牌化裸 rgba(255,255,255,.0x) 与黑环，使浅色随翻） —— */
  --fill-soft:rgba(255,255,255,.04);   /* 卡/按钮静态微填充（深=白微亮；浅见 light 覆盖） */
  --fill-hover:rgba(255,255,255,.07);  /* hover 微填充 */
  --fill-line:rgba(255,255,255,.12);   /* 进度槽等中性填充 */
  --frame-ring:#050507;                /* .phone 外环（手机框边）—— 浅色翻成暖灰，不显黑环 */
  --frame-ring-hl:rgba(255,255,255,.04);
  --frame-inset:rgba(255,255,255,.05); /* .phone 顶部内白边 */
  --frame-drop:rgba(0,0,0,.8);         /* .phone 落影 */
  --tabbar-bg:color-mix(in srgb, var(--canvas) 78%, transparent);  /* tab 条底（随主题翻，浅色即浅条） */
  --primary-ink:#241108;               /* primary 渐变按钮上的暖深字（amber 上保对比；浅色见覆盖） */
  --on-mint:#13241D;                   /* 薄荷/已会底上的深字（"已会"chip 文字；浅色见覆盖） */
  --amber-top:#FFE0BE;                 /* amber 渐变高光顶（btn/星核渐变上沿；浅色见覆盖） */
  --mint-top:#B8F0DA;                  /* 薄荷渐变高光顶；浅色见覆盖 */
  --thumb:#fff;                        /* scrubber 拖块（深=白；浅色覆盖为深色见下） */
  --rad-xs:6px; --rad-sm:8px; --rad-md:12px; --rad-lg:16px;
  --elev:0 0 0 1px var(--hairline);

  /* ===== 旧→新 compat 别名（既有 screens 立即换肤；引用 canonical→自动随主题） ===== */
  --bg:var(--canvas); --bg-2:var(--canvas);
  --panel:var(--surface); --panel-2:var(--surface-2);
  --line:var(--hairline); --line-strong:var(--hairline-strong);
  --ink-dim:var(--ink-muted); --ink-faint:var(--ink-muted);  /* faint→muted：保 11-13px 文案 AA≥4.5（--ink-subtle 仅留给装饰性微标） */
  --amber:var(--accent); --coral:var(--s-new); --mint:var(--s-done); --grey:var(--ink-subtle);
  --display:'Cormorant Garamond',Georgia,serif;
  --ui:'Geist','Schibsted Grotesk',system-ui,sans-serif;
  --mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  --jp:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',sans-serif;

  /* 保留原值（勿改，screens 依赖）：--r --r-sm --r-lg --shadow-pop --shadow-soft --tabbar-h */
  --r:22px; --r-sm:14px; --r-lg:26px;
  --shadow-pop:0 26px 50px -24px rgba(0,0,0,.85);
  --shadow-soft:0 18px 40px -28px rgba(0,0,0,.7);
  --tabbar-h:64px;
}
[data-theme="light"]{
  /* ===== light = 羊皮纸刻印古星图（只覆盖 canonical；compat 别名自动随之翻） ===== */
  --canvas:#F2EBDA; --surface:#FAF5E9; --surface-2:#F5EEDD;
  --ink:#2A2620; --ink-muted:#6E665A; --ink-subtle:#9A9080;
  --hairline:rgba(80,64,36,.16); --hairline-strong:rgba(80,64,36,.30);
  --accent:#A8722A;
  --s-new:#C0703A; --s-learn:#C79A3E; --s-review:#8A8474; --s-done:#3A4E86;
  --sky-top:#EDE3CD; --sky-mid:#E9E1D3; --sky-bottom:#E2D8C4;
  --neb-teal:rgba(90,128,116,.08); --neb-rose:rgba(176,120,70,.07); --neb-milk:rgba(150,130,90,.05);
  --neb-fade:#F2EBDA;
  --band-top:rgba(242,235,218,0); --band-mid:rgba(242,235,218,.5); --band-bottom:#F2EBDA;
  --fig-line:rgba(74,58,34,.34); --fig-line-anchor:rgba(120,80,28,.46);
  --const-line:rgba(80,64,36,.34); --const-line-soft:rgba(80,64,36,.18);
  --field:#5A4E38; --caps:rgba(120,80,28,.62);
  --frame-bg:#D9CFB7;
  /* 浅色下旧暗阴影太重，压淡 */
  --shadow-pop:0 26px 50px -24px rgba(60,46,20,.30);
  --shadow-soft:0 18px 40px -28px rgba(60,46,20,.22);
  /* —— FE-13：浅色覆盖派生填充/环（白微填在羊皮纸上不可见 → 改墨微填；黑环 → 暖灰） —— */
  --fill-soft:rgba(80,64,36,.05);
  --fill-hover:rgba(80,64,36,.09);
  --fill-line:rgba(80,64,36,.16);
  --frame-ring:#C6BBA1;
  --frame-ring-hl:rgba(80,64,36,.06);
  --frame-inset:rgba(255,255,255,.55);
  --frame-drop:rgba(60,46,20,.22);
  --primary-ink:#2A1A06;
  --on-mint:#FAF5E9;       /* 浅色：s-done=深蓝墨 → 其上用纸白字 */
  --amber-top:#D89A4E;     /* 浅色：青铜金高光顶（比 accent 略亮） */
  --mint-top:#5A6FA8;      /* 浅色：done 墨蓝高光顶 */
  --thumb:#FAF5E9;
}

/* ------------------------------------------------------------------- reset */
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }

body {
  font-family:var(--ui);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100%;
  /* —— 中性外底色（手机框外）：随主题翻；星云在 .phone 上 —— */
  background:var(--frame-bg);
  transition:background .45s ease;
}

/* —— 细颗粒 overlay（inline svg data-uri，与 A 一致） —— */
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img, svg { display:block; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input, textarea { font:inherit; color:inherit; }
::selection { background:color-mix(in srgb, var(--accent) 30%, transparent); color:var(--ink); }

/* ============================================================ phone shell */
/* 桌面：居中 ~430px 手机框 + 暗氛围背景。移动端：全屏满铺。 */
.app-backdrop {
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:32px 20px;
}

.phone {
  position:relative;
  width:430px;
  height:min(900px, calc(100svh - 64px));
  max-height:932px;
  border-radius:46px;
  overflow:hidden;
  /* 顶部安全留白：原状态栏移除后，避免内容贴住圆角；刘海屏取 safe-area */
  padding-top:max(14px, env(safe-area-inset-top));
  display:flex; flex-direction:column;
  /* —— 星云 + 天空渐变铺底（深=夜空、浅=羊皮纸；向底部控制带渐暗） —— */
  background:
    radial-gradient(120% 60% at 18% 16%, var(--neb-teal) 0%, transparent 60%),
    radial-gradient(110% 55% at 84% 24%, var(--neb-rose) 0%, transparent 62%),
    radial-gradient(130% 40% at 50% 6%, var(--neb-milk) 0%, transparent 58%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 30%, var(--neb-fade) 64%, var(--sky-bottom) 100%),
    var(--canvas);
  transition:background .45s ease;
  border:1px solid var(--line-strong);
  box-shadow:
    0 1px 0 var(--frame-inset) inset,
    0 50px 90px -40px var(--frame-drop),
    0 0 0 9px var(--frame-ring),
    0 0 0 10px var(--frame-ring-hl);
}

/* —— 屏幕挂载区 —— */
/* 透明：让 .phone 的星云透到首屏（各屏若自带不透明底盖住星云，留各屏任务处理） */
#app, .screen { background:transparent; }
#app {
  flex:1; min-height:0; position:relative; display:flex; flex-direction:column;
}

/* ============================================================ screen base */
.screen {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  overflow:hidden;
  opacity:0; transform:translateY(8px);
  transition:opacity .42s cubic-bezier(.2,.8,.2,1), transform .42s cubic-bezier(.2,.8,.2,1);
}
.screen.screen-in { opacity:1; transform:none; }

/* 屏内主滚动容器（屏幕作者可用）*/
.screen-scroll {
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.screen-scroll::-webkit-scrollbar { width:0; height:0; }

/* 占位（屏幕未实现时） */
.screen-placeholder {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:40px; text-align:center;
}
.screen-placeholder .ph-key {
  font-family:var(--display); font-style:italic; font-size:40px; color:var(--amber);
}
.screen-placeholder .ph-msg { color:var(--ink-dim); font-size:14px; max-width:260px; line-height:1.5; }

/* ============================================================== tab bar */
.tabbar {
  flex:none; height:var(--tabbar-h);
  display:flex;
  border-top:1px solid var(--line);
  background:var(--tabbar-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab {
  flex:1; min-height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--ink-faint);
  font-size:11.5px; font-weight:600; letter-spacing:.3px;
  transition:color .2s ease;
}
.tab svg { transition:transform .2s cubic-bezier(.2,.8,.2,1); }
.tab.on { color:var(--amber); }
.tab.on svg { transform:translateY(-1px); }
.tab:active svg { transform:scale(.9); }

/* ====================================================== SHARED COMPONENTS */
/* 屏幕作者复用以下组件；class 词表见 CONTRACT.md。 */

/* —— 圆形图标按钮 —— */
.iconbtn {
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink);
  background:var(--fill-soft);
  border:1px solid var(--line);
  transition:background .18s ease, transform .12s ease;
}
.iconbtn:hover { background:var(--fill-hover); }
.iconbtn:active { transform:scale(.92); }

/* —— 胶囊标签（小标识，等宽大写） —— */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ink-dim);
  border:1px solid var(--line); border-radius:999px;
  padding:5px 11px;
}
.pill.accent { color:var(--amber); border-color:color-mix(in srgb, var(--coral) 40%, transparent); }

/* —— 按钮 —— */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px; border-radius:var(--r-sm);
  font-size:14px; font-weight:600;
  color:var(--ink);
  background:var(--fill-soft); border:1px solid var(--line-strong);
  transition:background .18s ease, transform .12s ease, border-color .18s ease;
}
.btn:hover { background:var(--fill-hover); }
.btn:active { transform:scale(.97); }
.btn-primary {
  background:linear-gradient(180deg, var(--amber), var(--coral));
  color:var(--primary-ink); border:none;
  box-shadow:0 12px 28px -12px color-mix(in srgb, var(--coral) 60%, transparent);
}
.btn-primary:hover { background:linear-gradient(180deg, color-mix(in srgb, var(--amber) 80%, var(--ink)), var(--coral)); }
.btn-block { display:flex; width:100%; }

/* —— word chips（点词动作里的小按钮 / 释义里的）—— */
.chip {
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; border-radius:12px;
  font-size:13.5px; font-weight:600;
  color:var(--ink);
  background:var(--fill-soft); border:1px solid var(--line-strong);
  transition:background .18s ease, transform .12s ease;
}
.chip:active { transform:scale(.97); }
.chip.primary {
  background:linear-gradient(180deg, var(--amber), var(--coral));
  color:var(--primary-ink); border:none;
}

/* —— 词汇 chip（地图/解锁里展示一个词，日文）—— */
.vc {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--jp); font-size:13.5px; font-weight:500;
  color:var(--ink);
  background:var(--fill-soft); border:1px solid var(--line-strong);
  border-radius:999px; padding:6px 12px;
}
.vc .vc-dot { width:6px; height:6px; border-radius:50%; background:var(--amber); }

/* —— 状态徽章（词级状态）—— */
.tag-known, .tag-learning, .tag-new {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; letter-spacing:.2px;
  border-radius:999px; padding:3px 9px; line-height:1.3;
}
.tag-known   { color:var(--mint);  background:color-mix(in srgb, var(--s-done) 15%, transparent); border:1px solid color-mix(in srgb, var(--s-done) 38%, transparent); }
.tag-learning{ color:var(--amber); background:color-mix(in srgb, var(--coral) 15%, transparent); border:1px solid color-mix(in srgb, var(--coral) 38%, transparent); }
.tag-new     { color:var(--ink-dim); background:var(--fill-soft); border:1px solid var(--line); }

/* —— 数据数字（等宽，tabular-nums）—— */
.num-mono {
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
/* 大号叙事数字（Instrument Serif 斜体）—— 用于英雄指标 */
.num-display {
  font-family:var(--display); font-style:italic; line-height:1;
}

/* —— 覆盖率 SVG 环（容器）—— */
.ring { position:relative; display:inline-block; }
.ring svg { transform:rotate(-90deg); }
.ring .ring-val {
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); font-style:italic; color:var(--amber);
}

/* —— 面板卡片 —— */
.panel {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:16px;
}
.panel-2 { background:var(--panel-2); }
/* amber 调的「行动/解锁」卡片 */
.panel-accent {
  background:linear-gradient(180deg, color-mix(in srgb, var(--coral) 12%, transparent), color-mix(in srgb, var(--s-new) 5%, transparent));
  border:1px solid color-mix(in srgb, var(--coral) 28%, transparent); border-radius:18px; padding:16px;
}

/* —— 列表行 —— */
.row {
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-top:1px solid var(--line);
  min-height:44px;
}
.row:first-child { border-top:none; }
.row .row-main { min-width:0; flex:1; }
.row .row-aside { margin-left:auto; color:var(--ink-faint); font-size:12px; }

/* —— 弹出气泡（点词释义等）—— */
.pop {
  background:color-mix(in srgb, var(--surface-2) 88%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line-strong); border-radius:18px;
  padding:15px 16px 13px;
  box-shadow:var(--shadow-pop);
  animation:pop .28s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes pop {
  from { opacity:0; transform:translateY(10px) scale(.97); }
  to   { opacity:1; transform:none; }
}
.pop .pop-h { display:flex; align-items:baseline; gap:10px; }
.pop .pop-word { font-family:var(--jp); font-weight:700; font-size:21px; color:var(--amber); }
.pop .pop-pos {
  font-size:11.5px; color:var(--ink-dim);
  border:1px solid var(--line); border-radius:999px; padding:2px 9px;
}
.pop .pop-def { font-size:14.5px; color:var(--ink); margin-top:8px; line-height:1.5; }
.pop .pop-ctx { font-size:12.5px; color:var(--ink-dim); margin-top:5px; }
.pop .pop-acts { display:flex; gap:9px; margin-top:13px; }

/* —— 日文 ruby 注音（共享）—— */
ruby { ruby-position:over; }
rt {
  font-family:var(--jp); font-size:.46em; font-weight:500;
  color:var(--amber); opacity:.92; letter-spacing:0;
}

/* —— 进度条 / scrubber —— */
.scrub { height:3px; border-radius:3px; background:var(--fill-line); position:relative; }
.scrub .scrub-fill {
  position:absolute; left:0; top:0; bottom:0; border-radius:3px;
  background:linear-gradient(90deg, var(--amber), var(--coral));
}
.scrub .scrub-fill::after {
  content:""; position:absolute; right:-4px; top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:50%; background:var(--thumb);
  box-shadow:0 0 10px var(--coral);
}

/* —— 图例 —— */
.legend { display:flex; gap:12px; font-size:11.5px; color:var(--ink-dim); }
.legend span { display:flex; align-items:center; gap:5px; }
.legend i { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* ====================================================== motion utilities */
/* 淡入上移 + stagger（屏幕给元素加 .fade-up，再依次加 .in）*/
.fade-up { opacity:0; transform:translateY(12px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.fade-up.in { opacity:1; transform:none; }

/* 流光呼吸（专辑封面 glow 等）*/
@keyframes breathe { 0%,100% { opacity:.4; transform:scale(1); } 50% { opacity:.7; transform:scale(1.08); } }
.glow-breathe { animation:breathe 7s ease-in-out infinite; }

/* 节点绽放（星座）*/
@keyframes bloom { from { transform:scale(0); opacity:0; } to { transform:scale(1); opacity:1; } }
.bloom { animation:bloom .5s cubic-bezier(.2,1.4,.4,1) both; }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .screen { transition:none; }
  .fade-up { opacity:1; transform:none; }
  .glow-breathe, .bloom { animation:none; }
}

/* ============================================================ responsive */
/* 桌面 >=900px：手机框 + 暗背景（默认形态即如此）。*/

/* 移动端 <640px：全屏满铺，去掉框/阴影/圆角 */
@media (max-width:640px) {
  .app-backdrop { padding:0; min-height:100svh; align-items:stretch; }
  .phone {
    width:100%; height:100svh; max-height:none;
    border-radius:0; border:none; box-shadow:none;
  }
}

/* 中间窄屏（640–899）：框略缩，仍居中 */
@media (min-width:641px) and (max-width:899px) {
  .phone { width:min(430px, calc(100vw - 40px)); }
}