/* 登录页颠覆改版 · 共用外观（从首页颠覆改版 shared/ 原样拷来）：10-25 定稿「极光柔彩」——亮色「天光」（上冷下暖的清晨天空），暗色不动。
   取值一字不改摘自 docs/prototypes/2026-10-25-亮暗外观改版/skins/aurora/skin.css：亮色＝第一节令牌，再叠「暖色五套共用的暖中性底色」与 [data-au="skydawn"] 两块；暗色＝第二节。
   这里只放令牌、天空层、反馈层与最基础的重置；版式、组件、字号体系由各版本自己的 style.css 决定。
   规则（定稿外观的硬约束，各版本照守）：
   - 彩色只在天上（画布）与卡上沿那道 2px 彩边（--au-rim）里；唯一强调色是琥珀 --au-amber，只用在主按钮、选中与光；
   - 亮色暖色只当比底亮的光，比底暗的只用冷色（否则读成茶渍）；长文本与确认不上玻璃（用不透明的 --panel-bg）；
   - 不走红紫「AI 风」。 */

:root {
  /* ---------- 字体（系统字体，不引外部字体） ---------- */
  --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-big: -apple-system, "SF Pro Display", "Helvetica Neue", "PingFang SC", sans-serif;   /* 大数字：SF 细体 */
  --font-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", serif;
  --font-num: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;

  /* ---------- 天光：暖中性底、字、线，影偏冷灰（暖光冷影） ---------- */
  --bg: #EEEAE5; --bg-2: #E9E5DF;
  --surface: rgba(255, 255, 255, .78);
  --surface-2: rgba(250, 247, 243, .9);
  --surface-3: rgba(60, 48, 36, .06);
  --surface-raised: #FDFBF8;
  --pocket: rgba(255, 255, 255, .55); --pocket-2: rgba(255, 255, 255, .78);
  --topbar-bg: rgba(250, 247, 243, .32);
  --scrim: rgba(36, 34, 40, .22);
  --ink: #1C1A18; --ink-2: #4A4540; --ink-3: #67615A;     /* ink-3 对页底约 5.4、对卡约 5.9 */
  --line: rgba(60, 48, 36, .1); --line-strong: rgba(60, 48, 36, .18);

  /* ---------- 唯一强调色：琥珀 ---------- */
  --au-amber: #F2B33D; --au-amber-hover: #F7C25E; --au-amber-ink: #1C1608; --au-amber-rgb: 242, 179, 61;
  --au-amber-text: #7A5200;                                /* 亮底上的琥珀字 */
  --accent: #221F1C; --accent-hover: #36322D; --on-accent: #FDFBF8;
  --accent-soft: rgba(60, 48, 36, .06); --accent-line: rgba(60, 48, 36, .22);

  /* ---------- 状态信号色：等你定／逾期／今天／完成／安静 ---------- */
  --wait-dot: #D98A2B;  --wait-ink: #8A5210;  --wait-bg: rgba(217, 138, 43, .09);
  --late-dot: #CF4B34;  --late-ink: #A63823;  --late-bg: rgba(207, 75, 52, .08);
  --today-dot: #3C7FC0; --today-ink: #285F95; --today-bg: rgba(60, 127, 192, .08);
  --done-dot: #389A60;  --done-ink: #217546;  --done-bg: rgba(56, 154, 96, .08);
  --quiet-dot: #ABA49B; --quiet-ink: #4A4540; --quiet-bg: rgba(60, 48, 36, .05);
  --on-dot: #1C1A18;
  --mark: rgba(242, 179, 61, .3);
  --changed-ring: rgba(28, 26, 24, .24);
  --toast-bg: rgba(28, 26, 24, .9); --toast-fg: #FAF7F3;

  /* ---------- 圆角、阴影 ---------- */
  --radius-card: 18px; --radius-panel: 22px; --radius-ctl: 12px; --radius-sm: 9px; --radius-xs: 6px; --radius-pill: 999px;
  --au-hair: 0 0 0 1px rgba(60, 48, 36, .06);
  --au-drop: 0 1px 2px rgba(30, 32, 40, .04), 0 18px 40px -22px rgba(48, 52, 66, .28);
  --au-edge: 0 0 0 0 transparent;                          /* 亮色不放内描边：会盖住上沿彩边 */
  --shadow-card: var(--au-hair), var(--au-drop);
  --shadow-hover: var(--au-hair), 0 1px 2px rgba(30, 32, 40, .05), 0 24px 46px -20px rgba(48, 52, 66, .34);
  --shadow-pop: 0 0 0 1px rgba(60, 48, 36, .07), 0 2px 6px rgba(30, 32, 40, .06), 0 34px 66px -22px rgba(44, 48, 62, .36);

  /* ---------- 材质 ---------- */
  --card-bg: rgba(255, 255, 255, .7); --card-backdrop: blur(30px) saturate(.7) brightness(1.05);   /* 乳白玻璃 */
  --panel-bg: #FDFBF8; --modal-bg: #FCFAF7; --modal-foot-bg: #F4F1EC;       /* 不透明：长文本与确认 */
  --sheet-bg: rgba(251, 249, 246, .86); --page-bg: rgba(238, 234, 229, .84);
  --btn-bg: rgba(255, 255, 255, .8); --btn-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(20, 32, 56, .04);
  --btn-pri-bg: var(--au-amber); --btn-pri-fg: var(--au-amber-ink);

  /* ---------- 天光特有：卡上沿彩边、问候墨色、确认扫光、悬停光 ---------- */
  --au-rim: linear-gradient(90deg, rgba(157, 184, 214, 0) 2%, rgba(157, 184, 214, .9) 18%, rgba(214, 196, 190, .85) 52%, rgba(240, 188, 142, .9) 84%, rgba(240, 188, 142, 0) 98%);
  --au-ink-a: #26405E; --au-ink-b: #4A3E4A; --au-ink-c: #7A4A2A;      /* 问候用的极光墨：天蓝→暮色→暖褐，静止不动 */
  --au-sw-a: 157, 184, 214; --au-sw-b: 240, 188, 142;
  --glow-edge: rgba(200, 140, 90, .68); --glow-fill: rgba(240, 190, 140, .09);
  --backdrop: radial-gradient(60vmax 30vmax at 30% 0%, #DCE6F0 0%, transparent 70%), radial-gradient(60vmax 36vmax at 40% 70%, #FFEAD6 0%, transparent 70%),
    linear-gradient(180deg, #EEF1F4, #F2EEE9);
  --au-grain-alpha: .045; --au-grain-blend: soft-light;

  /* ---------- 动效节奏：一条弹性曲线＋一条利落曲线 ---------- */
  --ease: linear(0, 0.04, 0.134, 0.254, 0.381, 0.502, 0.61, 0.704, 0.781, 0.843, 0.892, 0.929, 0.956, 0.976, 0.989, 0.998, 1.003, 1.006, 1.007, 1.008, 1.007, 1.006, 1.006, 1.005, 1);
  --ease-snappy: linear(0, 0.035, 0.116, 0.218, 0.325, 0.428, 0.522, 0.605, 0.677, 0.737, 0.788, 0.83, 0.864, 0.892, 0.914, 0.932, 0.947, 0.958, 0.967, 0.974, 0.98, 0.984, 0.988, 0.991, 1);
  --ease-out: cubic-bezier(.22, .8, .24, 1);

  /* 原型控制条（shared/proto-bar.js）固定在底部正中，高 40px、离底 12px：各版本页面底部至少留这么多空，别让它盖住内容 */
  --proto-bar-space: 64px;

  color-scheme: light;
}

/* ============ 暗色：暗夜玻璃的石墨底、烟色玻璃、琥珀强调照旧，右上一角光换成极光（取值同定稿第二节） ============ */
[data-theme="dark"] {
  --bg: #0F1110; --bg-2: #141716;
  --surface: rgba(255, 255, 255, .07);
  --surface-2: rgba(255, 255, 255, .045);
  --surface-3: rgba(255, 255, 255, .08);
  --surface-raised: #242725;
  --pocket: rgba(255, 255, 255, .05); --pocket-2: rgba(255, 255, 255, .08);
  --topbar-bg: rgba(15, 17, 16, .42);
  --scrim: rgba(0, 0, 0, .58);
  --ink: #E8E6E0; --ink-2: #A9A69E; --ink-3: #918E87;
  --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .14);
  --accent: #E8E6E0; --accent-hover: #FFFFFF; --on-accent: #121413;
  --accent-soft: rgba(255, 255, 255, .07); --accent-line: rgba(255, 255, 255, .26);
  --au-amber-text: #F2B33D;

  --wait-dot: #F2B33D;  --wait-ink: #F5C873;  --wait-bg: rgba(242, 179, 61, .1);
  --late-dot: #E5604A;  --late-ink: #F0998A;  --late-bg: rgba(229, 96, 74, .1);
  --today-dot: #5AA0E8; --today-ink: #9DC6F1; --today-bg: rgba(90, 160, 232, .1);
  --done-dot: #4CC38A;  --done-ink: #8EDCB3;  --done-bg: rgba(76, 195, 138, .1);
  --quiet-dot: #6E6B65; --quiet-ink: #A9A69E; --quiet-bg: rgba(255, 255, 255, .04);
  --on-dot: #121413;
  --mark: rgba(242, 179, 61, .26);
  --changed-ring: rgba(232, 230, 224, .18);
  --toast-bg: rgba(232, 230, 224, .94); --toast-fg: #121413;

  --au-edge: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .07);
  --au-hair: 0 0 0 1px rgba(0, 0, 0, .3);
  --au-drop: 0 18px 40px -24px rgba(0, 0, 0, .8);
  --shadow-card: var(--au-edge), var(--au-hair), var(--au-drop);
  --shadow-hover: 0 0 0 1px rgba(255, 255, 255, .12), 0 22px 44px -20px rgba(0, 0, 0, .85);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 70px -20px rgba(0, 0, 0, .9);

  --card-bg: rgba(27, 30, 28, .72); --card-backdrop: blur(24px) saturate(1.05);   /* 烟色玻璃 */
  --panel-bg: #191C1A; --modal-bg: #1D201E; --modal-foot-bg: #171A18;
  --sheet-bg: rgba(26, 29, 27, .84); --page-bg: rgba(15, 17, 16, .86);
  --btn-bg: rgba(255, 255, 255, .06); --btn-shadow: inset 0 0 0 1px var(--line);

  --au-rim: linear-gradient(90deg, rgba(80, 214, 170, 0) 2%, rgba(80, 214, 170, .5) 22%, rgba(96, 160, 232, .5) 60%, rgba(96, 160, 232, 0) 96%);
  --au-ink-a: #E8E6E0; --au-ink-b: #E8E6E0; --au-ink-c: #E8E6E0;   /* 暗色问候不做渐变墨 */
  --au-sw-a: 69, 214, 166; --au-sw-b: 90, 158, 232;
  --glow-edge: rgba(120, 220, 200, .6); --glow-fill: rgba(90, 200, 180, .06);
  --backdrop: radial-gradient(46vmax 30vmax at 92% 0%, rgba(60, 190, 160, .16), transparent 70%),
    radial-gradient(30vmax 20vmax at 78% 6%, rgba(70, 140, 220, .12), transparent 70%),
    linear-gradient(200deg, #131614 0%, #0F1110 46%, #0C0D0D 100%);
  --au-grain-alpha: .05; --au-grain-blend: screen;

  color-scheme: dark;
}

/* ============ 最基础的重置 ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font-family: var(--font-ui); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "tnum" 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid rgba(var(--au-amber-rgb), .9); outline-offset: 2px; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 14px; height: 14px; }
svg.i.lg { width: 22px; height: 22px; }

/* ============ 天空层：sky.js 在 .wb-sky 里放两张画布（远层渐变网格、近层极光帘）＋颗粒；画布起不来时退回 --backdrop 静止渐变 ============ */
.wb-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--backdrop); background-color: var(--bg); }
.wb-sky canvas { position: absolute; left: 0; top: 0; width: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.wb-sky canvas.on { opacity: 1; }
.wb-sky .sky-mesh { height: 100%; }
[data-theme="dark"] .wb-sky .sky-curtain { mix-blend-mode: screen; }
.wb-sky .sky-grain { position: absolute; inset: 0; display: block; opacity: var(--au-grain-alpha); mix-blend-mode: var(--au-grain-blend);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>") 0 0 / 200px 200px repeat; }

/* ============ 反馈层：确认时一道极光沿元素上沿扫过（WB.fx.sweep）；状态变了圆点弹一下（WB.fx.pop 给元素加 .au-pop） ============ */
.au-sweep { position: fixed; z-index: 900; overflow: hidden; pointer-events: none; }
.au-sweep i { position: absolute; left: 0; top: 0; width: 46%; height: 100%; display: block;
  background: linear-gradient(90deg, rgba(var(--au-sw-a), 0), rgba(var(--au-sw-a), .95) 28%, #FFFFFF 50%, rgba(var(--au-sw-b), .95) 72%, rgba(var(--au-sw-b), 0)) 0 0 / 100% 2px no-repeat,
    radial-gradient(60% 100% at 50% 0, rgba(var(--au-sw-a), .28), rgba(var(--au-sw-b), .1) 55%, transparent 80%); }
[data-theme="dark"] .au-sweep i { mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(69, 214, 166, 0), rgba(69, 214, 166, .9) 28%, #E8FFF6 50%, rgba(90, 158, 232, .9) 72%, rgba(90, 158, 232, 0)) 0 0 / 100% 2px no-repeat,
    radial-gradient(60% 100% at 50% 0, rgba(69, 214, 166, .22), rgba(90, 158, 232, .08) 55%, transparent 80%); }
.au-pop { animation: au-pop .62s var(--ease) both; }
@keyframes au-pop { 0% { transform: scale(.3); } 45% { transform: scale(1.55); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .au-pop { animation: none; }
  .au-sweep { display: none; }
}