/* ============================================================================
 * 设计系统 —— 奶油卡通（浅色 · 温暖 · 可爱）
 *
 * 设计语言：
 *   · 浅色奶油底 + 大团柔和粉彩光晕，像晒着太阳的午后
 *   · 卡片是"贴纸"：白色、2px 粉色描边、大圆角、底部一条实色错位影
 *   · 按钮是"软糖"：圆润饱满，按下去会往下陷（位移 + 影子变矮）
 *   · 大量 emoji 充当插图与图标，替代冷冰冰的线条
 *
 * 兼容性约束（踩过坑，别再引入）：
 *   · 不用 @layer —— 它需要 Safari 15.4+，而旧版 Safari 会**整块跳过**，
 *     一旦把全部样式包在里面，旧设备上就是白底黑字的裸网页
 *   · 不用 :has() / :is() / 容器查询 —— 同样有版本门槛
 *   · color-mix() 只在有 rgb() 回退的前提下使用（见各处的两行写法）
 *   · dvh 依赖 html/body 的 height:100% 作为回退
 *   · backdrop-filter 必须带 -webkit- 前缀
 * ==========================================================================*/

/* ===== tokens ===== */
  :root {
    color-scheme: light;

    /* —— 奶油基色：暖白偏蜜桃，温柔不刺眼 —— */
    --bg:        #fff6f1;
    /* 卡片底色（半透明）：让背景的粉彩光晕与漂浮 emoji 透上来 */
    --glass:     rgb(255 255 255 / 82%);
    --glass-2:   rgb(255 242 246 / 82%);
    /* 预测卡的三段渐变（跟着主题走，不要硬编码浅色） */
    --predict-1: rgb(255 228 238 / 82%);
    --predict-2: rgb(255 248 242 / 86%);
    --predict-3: rgb(244 240 255 / 84%);
    /* 背景光晕（暗色下要压暗，否则会把整页照亮） */
    --aurora-1: rgb(255 183 209 / 60%);
    --aurora-2: rgb(255 214 170 / 55%);
    --aurora-3: rgb(216 197 246 / 50%);
    --aurora-o: .8;
    /* 底栏上方那条渐隐带的中间色 */
    --fade-mid: rgb(255 246 241 / 60%);
    /* 品牌标与选中标签底泡 */
    --mark-1: #ffe1ec;  --mark-2: #ffe9d6;  --mark-bd: #f6c3d6;
    /* 底栏 / 吐司 / 区间条：原来都硬编码成白色，夜间模式不会变（实测发现的） */
    --tabbar-bg: rgb(255 255 255 / 92%);
    --toast-bg:  rgb(255 255 255 / 96%);
    --mix-base:  #ffffff;
    --pin-bg:    #ffffff;
    --tab-active: #d6477f;
    --bg-2:      #ffeef4;
    --bg-deep:   #ffe7ee;

    --surface:   #ffffff;
    --surface-2: #fff2f6;
    --surface-3: #ffe9f0;
    --border:    #f6cfdd;
    --border-2:  #f0b9cc;

    --text:  #5b3a46;
    --muted: #7d5a68;
    --faint: #87636f;

    /* —— 主题色：玫瑰粉（经期）、蜜橙（活力）、薰衣草（辅助） —— */
    --rose:   #ff6fa5;
    --coral:  #ff9671;
    --mauve:  #b99be0;
    --peach:  #ffc7a3;
    --butter: #ffd98e;
    --mint:   #8fe0c0;

    /* 语义色 */
    --ok:     #35bd8f;   /* 薄荷绿：一切按计划 */
    --warn:   #ef9f2e;   /* 蜂蜜黄：临近 */
    --danger: #e8556f;   /* 深玫瑰：逾期 */
    --brand:  var(--rose);

    /* ── 配色分工：装饰 vs 可点 ──────────────────────────────────────
       之前"能点的粉"和"好看的粉"混用同一个 --rose，导致浅粉文字只有 2.3:1。
       现在分两档，规则很简单：
         --brand  装饰用：圆环、插图、点缀、非交互的色块
         --action 可点用：链接、选中态、需要读清的小字（浅色底上要 ≥4.5:1）
         --cta-*  主按钮的渐变两端（白字要压在它上面，也必须 ≥4.5:1）
       深色主题下 --action 会换成更亮的一档（深底上深粉读不清），见夜间变量组。 */
    --action:   #c9336b;
    --action-2: #bf4a2e;
    --cta-1: #c9336b;
    --cta-2: #bf4a2e;

    /* 时段氛围的基准值（白天）。其余时段在下面按 data-daypart 覆盖，
       只改这些"光"的变量：天色 / 光晕 / 圆环渐变。 */
    --sky-tint: rgb(255 255 255 / 0%);
    --ring-a: #ff7da9;
    --ring-b: #ffab87;
    --ring-c: #c3a3ec;

    /* 顶栏的玻璃渐变：以前写死成浅奶油色，夜间就变成一条发灰的横带 */
    --topbar-1: rgb(255 246 241 / 88%);
    --topbar-2: rgb(255 246 241 / 55%);

    --r-sm: 14px;
    --r:    20px;
    --r-lg: 26px;
    --r-xl: 30px;

    /* 卡通贴纸影：一条实色错位影 + 一团柔光 */
    --shadow:  0 14px 30px -14px rgb(214 110 145 / 35%);
    --sticker: 0 5px 0 rgb(246 205 222 / 85%);
    --glow:    0 6px 0 rgb(232 90 140 / 90%), 0 16px 30px -12px rgb(255 111 165 / 65%);

    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);

    /* 安全区一律在具体属性里直接用 env()，不要再包一层自定义属性：
       iOS Safari 对「自定义属性里放 env() 再参与 calc」的解析不可靠，
       实测会把 --safe-b 当成 0，导致底栏只有 78px、Home 指示条那一截露白（灰条）。 */
    /* 78px：图标 30 + 文字 13.5 + 上下留白。手机上足够舒展，平板上也不显小 */
    --tabbar-h: 78px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable",
            "Segoe UI", system-ui, "PingFang SC", "HarmonyOS Sans SC",
            "Microsoft YaHei", sans-serif;
  }

  /* 依据当前周期状态切换强调色 */
  [data-state="ok"]   { --accent: var(--coral); }
  [data-state="soon"] { --accent: var(--warn); }
  [data-state="late"] { --accent: var(--danger); }
  :root { --accent: var(--rose); }

/* ===== base ===== */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }
  /* 页面底色必须挂在 html 上，不能挂在 body：
     .aurora / .sky 是 z-index:-1 的固定底层，按 CSS 绘制顺序，负层级元素画在
     "块级后代的背景"之下 —— body 只要有不透明背景，就会把这两层整个盖住。
     实测症状：时段配色只影响圆环（SVG 在正常流里），整页永远是白的。
     底色放 html + body 透明，氛围层才真正可见。 */
  html { -webkit-text-size-adjust: 100%; background: var(--bg); }

  /* 关键：作者样式里的 display 会覆盖 hidden 属性自带的 display:none。
     我们的 .chip 是 inline-flex、.alert 是 flex，于是 JS 里设 el.hidden = true 根本不起作用
     （离线标记、示例标记、状态提示都会一直显示）。用一条全局规则兜住。 */
  [hidden] { display: none !important; }

  body {
    margin: 0;
    font-family: var(--font);
    /* 透明：底色在 html 上。body 一旦不透明，.aurora / .sky 会被整个盖住 */
    background: transparent;
    color: var(--text);
    line-height: 1.5;
    overflow: hidden;                     /* 由各屏自己滚动 */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* —— iOS「像 App 一点」的四条 —— */
    /* 1. 长按不要弹出"拷贝/查询"菜单（输入框和正文除外） */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* 2. 去掉双击缩放带来的 300ms 延迟 */
    touch-action: manipulation;
    /* 3. 关掉整页橡皮筋回弹（独立模式下最容易露馅的地方） */
    overscroll-behavior: none;
  }
  /* 需要选中/输入的地方把选择能力还回去 */
  input, textarea, .about-p, .kbd-row, .tech, .alert-text, .list-meta,
  .meta-line, .empty, .stat-k, .card-hint { -webkit-user-select: text; user-select: text; }

  button, input, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  h1, h2, h3, h4, p { margin: 0; }
  ul { margin: 0; padding: 0; list-style: none; }

  /* 数字用等宽字形，避免跳动 */
  .num, .big { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

  :focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 8px; }

  ::-webkit-scrollbar { width: 0; height: 0; }

/* ------------------------------------------------------------------ 背景层 */
/* ===== layout ===== */
  #bg {
    position: fixed; inset: 0; z-index: 0;
    display: block; width: 100%; height: 100%;
    touch-action: none;
  }

  /* 触摸特效层：浮在界面之上（#app 是 2、底栏在它自己的层叠上下文里），
     但它永远不接收指针事件。toast(40) / 弹层(60) 仍然盖在它上面。 */
  #touchFx {
    position: fixed; inset: 0; z-index: 4;
    display: block; width: 100%; height: 100%;
    pointer-events: none;
    touch-action: none;
  }
  /* 夜间把触摸层当"光"来叠：玫瑰色在深棕卡片上才不会变成一块浑浊的粉。
     浅色主题保持正常混合，否则会把奶油底漂白。 */
  [data-theme="dark"] #touchFx { mix-blend-mode: screen; }

  /* 大团粉彩光晕：像奶油上化开的果酱 */
  .aurora {
    position: fixed; inset: -20%; z-index: 0; pointer-events: none;
    /* 用变量：这三团光晕原来是硬编码的亮粉色，夜间模式不会变暗，
       会把整页照亮、把文字对比度拉下来（实测发现的那个夜间对比度问题就是它）。 */
    background:
      radial-gradient(46vmax 46vmax at 12% 0%,  var(--aurora-1), transparent 66%),
      radial-gradient(42vmax 42vmax at 96% 22%, var(--aurora-2), transparent 64%),
      radial-gradient(50vmax 50vmax at 55% 108%, var(--aurora-3), transparent 66%);
    filter: blur(30px) saturate(108%);
    opacity: var(--aurora-o);
    animation: aurora 30s var(--ease-in-out) infinite alternate;
  }
  @keyframes aurora {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(1.2%, -1.6%, 0) scale(1.05); }
    100% { transform: translate3d(-1.2%, 1.2%, 0) scale(1.02); }
  }

  /* 天色层：一整块可过渡的色洗，压在光晕之上、内容之下。
     时段切换时它是"化开"的（background-color 能插值），不是突然跳色。 */
  .sky {
    /* z-index 必须是 0，不能是 -1：负层级在这个页面里会被整页底色盖掉，
       实测 .aurora 用 -1 时一直是隐形的（等于死代码）。0 才能压在 html 底色之上、
       #app(2) 之下。 */
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-color: var(--sky-tint);
    transition: background-color 1.6s var(--ease);
  }

  /* ── 时段氛围 ────────────────────────────────────────────────────
     只改"光"：天色、光晕、圆环渐变。
     **不碰** --text / --muted / --border / --surface —— 文字对比度因此完全不受影响，
     这也是这套方案能安全落地的原因。
     JS 只负责给 <html> 打 data-daypart，其余全交给 CSS。 */
  /* 清晨 5–8：暖橘晨光，光晕偏粉橘 */
  html[data-daypart="dawn"] {
    --sky-tint: rgb(255 198 176 / 32%);
    --ring-a: #ef6a90; --ring-b: #ffb98f; --ring-c: #c8a6ee;
    --aurora-1: rgb(255 176 190 / 62%);
    --aurora-2: rgb(255 208 158 / 58%);
    --aurora-3: rgb(212 190 246 / 50%);
  }
  /* 上午 8–11：清透，粉 + 薄荷 */
  html[data-daypart="morning"] {
    --sky-tint: rgb(224 248 238 / 26%);
    --ring-a: #ff7da9; --ring-b: #9fe0c8; --ring-c: #c3a3ec;
    --aurora-1: rgb(255 190 214 / 55%);
    --aurora-2: rgb(196 240 222 / 50%);
    --aurora-3: rgb(206 200 246 / 46%);
  }
  /* 白天 11–16：就是现在的基准色，不覆盖 */
  html[data-daypart="day"] { --sky-tint: rgb(255 255 255 / 0%); }
  /* 傍晚 16–19：橙金 + 紫，一天里最像"黄昏"的一段 */
  html[data-daypart="dusk"] {
    --sky-tint: rgb(255 186 140 / 34%);
    --ring-a: #f4557e; --ring-b: #ffab6b; --ring-c: #a98ce8;
    --aurora-1: rgb(255 160 160 / 58%);
    --aurora-2: rgb(255 190 130 / 56%);
    --aurora-3: rgb(186 160 240 / 52%);
  }
  /* 晚上 19–22（夜间主题）：深玫瑰 + 紫 */
  html[data-theme="dark"][data-daypart="evening"] {
    --sky-tint: rgb(126 44 84 / 26%);
    --ring-a: #ff6f9e; --ring-b: #ff9a6e; --ring-c: #b98ce0;
    --aurora-1: rgb(198 88 138 / 32%);
    --aurora-2: rgb(206 120 92 / 26%);
    --aurora-3: rgb(140 108 196 / 26%);
  }
  /* 深夜 22–5（夜间主题）：偏冷的靛蓝，安静、不刺眼 */
  html[data-theme="dark"][data-daypart="deepnight"] {
    --sky-tint: rgb(44 44 116 / 30%);
    --ring-a: #e070a8; --ring-b: #b090e0; --ring-c: #86a4f0;
    --aurora-1: rgb(140 96 176 / 26%);
    --aurora-2: rgb(96 108 190 / 24%);
    --aurora-3: rgb(120 140 220 / 22%);
    --aurora-o: .5;
  }
  /* 圆环渐变的三段色改由变量驱动，才能跟着时段走 */
  .ring linearGradient stop:nth-of-type(1) { stop-color: var(--ring-a); }
  .ring linearGradient stop:nth-of-type(2) { stop-color: var(--ring-b); }
  .ring linearGradient stop:nth-of-type(3) { stop-color: var(--ring-c); }

  /* 四处漂着的 emoji 装饰：边缘、半透明、慢慢浮动 */
  .deco { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  .deco span {
    position: absolute; font-size: 26px; opacity: .4;
    filter: saturate(1.05);
    animation: deco-float 9s var(--ease-in-out) infinite alternate;
  }
  .deco span:nth-child(1) { top: 9%;  left: 4%;   animation-delay: -1.2s; font-size: 30px; }
  .deco span:nth-child(2) { top: 16%; right: 6%;  animation-delay: -3.4s; }
  .deco span:nth-child(3) { top: 46%; left: 2%;   animation-delay: -5.1s; font-size: 22px; }
  .deco span:nth-child(4) { top: 60%; right: 3%;  animation-delay: -2.3s; font-size: 32px; }
  .deco span:nth-child(5) { top: 82%; left: 8%;   animation-delay: -6.6s; }
  .deco span:nth-child(6) { top: 88%; right: 10%; animation-delay: -4.4s; font-size: 20px; }
  @keyframes deco-float {
    0%   { transform: translateY(0) rotate(-8deg); }
    100% { transform: translateY(-16px) rotate(10deg); }
  }

  /* 细噪点，消除大面积渐变的色带 */
  .grain {
    position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .02;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  #app {
    position: relative; z-index: 2;
    height: 100dvh;
    max-width: 100vw;
    overflow-x: clip;                 /* 防止任一子元素过宽把整个网格撑开 */
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  .topbar {
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 10px;
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
    /* 顶栏不再铺半透明色块：让它完全透明，直接露出后面的萤火虫/天色背景。
       原来这里是 blur(10px) + 渐变（--topbar-1/2），在手机上会显示成一条长方形玻璃带。 */
    background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
  .brand > div { min-width: 0; }      /* 允许内部文字被截断，而不是撑宽父级 */
  .brand-name, .brand-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #demoChip { flex: none; }
  #btnSettings { flex: none; }
  /* 品牌标志：一朵放在蜜桃渐变方块上的小花 */
  .brand-mark {
    width: 34px; height: 34px; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    font-size: 19px; line-height: 1;
    background: linear-gradient(135deg, var(--mark-1), var(--mark-2));
    border: 2px solid var(--mark-bd);
    box-shadow: 0 3px 0 rgb(240 175 200 / 90%), 0 10px 18px -8px rgb(255 111 165 / 55%);
  }
  .brand-name { font-size: 16px; font-weight: 800; letter-spacing: .3px; }
  .brand-sub { font-size: 11px; color: var(--faint); margin-top: -1px; }
  .topbar-spacer { flex: 1; }

  .screens { position: relative; overflow: hidden; }
  /* 用 flex + gap 统一管理卡片间距。
     之前用 `.card + .card { margin-top }` 是错的：它只匹配相邻的两个 .card，
     而 .alert / .stat-grid / .predict-card 都不是 .card —— 那几对就成了 0 间距，
     边框直接贴在一起（看起来像"叠到一起"）。 */
  .screen {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 18px calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 34px);
    opacity: 0; visibility: hidden; transform: translateY(10px) scale(.99);
    transition: opacity .34s var(--ease), transform .34s var(--ease), visibility .34s;
  }
  /* 纵向不压缩：内容高于容器时交给滚动，而不是把卡片挤扁 */
  .screen > * { flex: 0 0 auto; }
  .screen.is-active { opacity: 1; visibility: visible; transform: none; }

  /* 内容底部渐隐：让滚动内容柔和地"化"进底栏，而不是被硬生生切断 */
  .fade-bottom {
    position: absolute; left: 0; right: 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    height: 46px; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, var(--bg) 18%, var(--fade-mid) 58%, transparent);
  }

  /* 底部标签栏：白底粉边，选中项是一枚粉泡泡 */
  .tabbar {
    /* 固定到视口最底部：不依赖 #app 的网格高度，任何机型的 Home 指示条区域都贴边。
       env() 直接写在这里（不再经过 --safe-b），Safari 才能正确解析。 */
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 30;
    width: 100%;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    border-top: 2px solid var(--border);
    background: var(--tabbar-bg);
    -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 -10px 30px -18px rgb(214 110 145 / 45%);
  }
  .tab {
    /* 撑满整格：每一格都是完整的可点区域，五格等分整个宽度 */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    font-size: 12px; line-height: 1; letter-spacing: .3px; font-weight: 600;
    color: var(--faint);
    position: relative; height: 100%; min-width: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color .22s var(--ease), transform .18s var(--ease-bounce);
  }
  /* emoji 图标装在泡泡里 */
  .tab .ico {
    width: 42px; height: 34px; display: grid; place-items: center;
    font-size: 21px; line-height: 1; border-radius: 999px;
    transition: background .25s var(--ease), transform .28s var(--ease-bounce);
  }
  .tab.is-active { color: var(--tab-active); }
  .tab.is-active .ico {
    background: linear-gradient(135deg, var(--mark-1), var(--mark-2));
    box-shadow: inset 0 0 0 2px var(--mark-bd), 0 4px 10px -4px rgb(255 111 165 / 60%);
    transform: translateY(-3px) scale(1.08);
  }
  /* 按下反馈：整格轻轻缩一下，指哪打哪 */
  .tab:active { transform: scale(.92); }
  .tab .ico, .tab span { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ 通用组件 */
/* ===== components ===== */
  .card {
    position: relative;
    border-radius: var(--r-lg);
    border: 2px solid var(--border);
    background: var(--surface);
    box-shadow: var(--sticker), var(--shadow);
    padding: 18px;
    overflow: hidden;
  }

  /* ── 卡片分三层 ────────────────────────────────────────────────
     之前所有卡片圆角/边框/阴影完全一样，看不出轻重。
     现在：
       信息层（下次大概 .predict-card）  影子更实更远 —— "这是结论，先看这里"
       操作层（今天来了 .action-card）    反过来贴地、影子最短 —— 像一颗按得下去的键帽
       辅助层（其余 .card）              保持默认，最轻
     深浅两套主题都要成立，所以夜间单独把"实"那一档调深。 */
  .action-card {
    padding: 15px 16px 13px;
    box-shadow: 0 3px 0 rgb(246 205 222 / 60%);
  }
  [data-theme="dark"] .action-card {
    box-shadow: 0 3px 0 rgb(52 36 45 / 92%);
  }

  .card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
  .card-title { font-size: 15px; font-weight: 800; letter-spacing: .2px; }
  .card-title .dot { color: var(--accent); }
  .card-hint { font-size: 12px; color: var(--faint); }

  /* 卡片头部的小链接按钮 */
  /* 用更深的玫瑰：原来的 var(--rose) 在浅粉底上只有约 2.3:1（远低于 4.5），实测不达标 */
  .link-btn { font-size: 12px; font-weight: 700; color: var(--action); padding: 4px 2px; transition: transform .2s var(--ease-bounce); }
  .link-btn:active { transform: scale(.94); }

  /* 卡片底部的单行元信息：用虚线收口，像手账里的分隔 */
  .meta-line {
    margin-top: 13px; padding-top: 11px;
    border-top: 2px dashed var(--border);
    font-size: 11.5px; color: var(--faint); line-height: 1.6;
  }
  .meta-line b { color: var(--muted); font-weight: 700; }
  .meta-line .sep { opacity: .55; margin: 0 6px; }

  .chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
    border: 2px solid var(--border-2); background: var(--surface-2); color: var(--muted);
  }
  .chip.is-ok     { color: var(--ok);     border-color: rgb(53 189 143 / 45%);  background: rgb(53 189 143 / 10%); }
  .chip.is-warn   { color: #d9831a;       border-color: rgb(239 159 46 / 50%);  background: rgb(255 217 142 / 22%); }
  .chip.is-danger { color: var(--danger); border-color: rgb(232 85 111 / 48%);  background: rgb(232 85 111 / 8%); }

  /* 软糖按钮：圆润 + 底部实影，按下往下陷 */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 12px 16px; border-radius: 16px; font-size: 14px; font-weight: 700;
    /* 44px 是触控目标的最小推荐高度；小号按钮（.tiny）靠它兜住，避免点不中 */
    min-height: 44px;
    border: 2px solid var(--border-2); background: var(--surface); color: var(--text);
    box-shadow: 0 4px 0 rgb(240 185 204 / 80%);
    transition: transform .16s var(--ease-bounce), box-shadow .16s var(--ease), background .2s;
  }
  .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgb(240 185 204 / 80%); }
  .btn.is-primary {
    background: linear-gradient(135deg, var(--rose), var(--coral));
    color: #fff; border-color: transparent;
    box-shadow: var(--glow);
    text-shadow: 0 1px 2px rgb(190 60 100 / 35%);
  }
  .btn.is-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 rgb(232 90 140 / 90%); }
  .btn.is-ghost { background: transparent; box-shadow: none; }
  .btn.is-ghost:active { box-shadow: none; }
  .btn.is-danger { color: var(--danger); border-color: rgb(232 85 111 / 45%); box-shadow: 0 4px 0 rgb(232 85 111 / 22%); }
  .btn.is-danger:active { box-shadow: 0 1px 0 rgb(232 85 111 / 22%); }
  .btn.is-block { width: 100%; }
  .btn.tiny { border-radius: 13px; font-size: 13px; }
  .btn[disabled] { opacity: .45; pointer-events: none; }

  /* ---------------------------------------------------------------- 主操作按钮
     整张卡只做一件事，所以给它足够的体量和触控面积（66px 高，远大于 44px 最小触控目标）。
     旁边**不再并排放第二个按钮** —— 误触一次「今天来了」的代价是记录错一天，
     而错的那一天会直接进模型、影响所有预测。
     内边距与"扁"的阴影见上面 .card 附近的 .action-card（操作层定义在一处）。 */

  .big-btn {
    width: 100%; min-height: 66px;
    display: flex; align-items: center; gap: 13px;
    padding: 13px 17px; border-radius: 18px;
    border: 0; font: inherit; text-align: left; cursor: pointer;
    /* 白字必须读得清：原来的 rose→coral 渐变下白字只有约 2.3:1（远低于 WCAG AA 的 4.5）。
       这里压深成莓红→赤陶，实测约 5:1，同一色系、但终于是"看得清"的对比度。 */
    background: linear-gradient(135deg, var(--cta-1), var(--cta-2));
    color: #fff;
    box-shadow: 0 5px 0 rgb(160 42 74 / 88%), var(--glow);
    text-shadow: 0 1px 2px rgb(90 20 40 / 30%);
    transition: transform .16s var(--ease-bounce), box-shadow .16s var(--ease), background .22s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .big-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgb(160 42 74 / 88%); }
  .big-btn-emoji { font-size: 25px; line-height: 1; flex: none; }
  .big-btn-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .big-btn-text b { font-size: 17px; font-weight: 800; letter-spacing: .01em; }
  .big-btn-text small { font-size: 11.5px; font-weight: 600; opacity: .9; }

  /* 待确认态：换成蜂蜜黄 + 文案也变 —— 颜色和文字双重区分，
     不会出现"我到底点上没有"的困惑。3.6 秒无操作自动退回正常态。 */
  .big-btn.is-arming {
    background: linear-gradient(135deg, var(--warn), #f7bf63);
    box-shadow: 0 5px 0 rgb(203 132 32 / 80%);
  }
  .big-btn.is-arming:active { box-shadow: 0 1px 0 rgb(203 132 32 / 80%); }

  .action-alt {
    display: flex; align-items: center; justify-content: center; gap: 2px;
    margin-top: 11px;
  }
  .action-alt .link-btn { font-size: 12.5px; }
  .action-card .meta-line { text-align: center; }

  [data-theme="dark"] .big-btn { box-shadow: 0 5px 0 rgb(148 64 94 / 85%), var(--glow); }
  [data-theme="dark"] .big-btn.is-arming { box-shadow: 0 5px 0 rgb(150 98 26 / 80%); }

  .row { display: flex; align-items: center; gap: 10px; }
  .row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .grow { flex: 1; min-width: 0; }
  .muted { color: var(--muted); }
  .faint { color: var(--faint); }
  .tiny { font-size: 11.5px; }
  .small { font-size: 12px; }

  .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat {
    border-radius: var(--r); border: 2px solid var(--border);
    background: var(--surface); padding: 12px 13px;
    box-shadow: 0 4px 0 rgb(246 205 222 / 60%);
  }
  .stat-k { font-size: 11.5px; font-weight: 600; color: var(--faint); }
  .stat-v { font-size: 20px; font-weight: 800; letter-spacing: -.4px; margin-top: 2px; }
  .stat-v small { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 3px; }

  .field {
    width: 100%; padding: 13px 14px; border-radius: 16px;
    border: 2px solid var(--border-2); background: var(--surface-2);
    font-size: 15px; appearance: none;
  }

  .list-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 4px; border-bottom: 2px dashed var(--border);
  }
  .list-item:last-child { border-bottom: 0; }
  .list-date { font-size: 13.5px; font-weight: 700; }
  .list-meta { font-size: 11.5px; color: var(--faint); }
  .len-badge {
    min-width: 58px; text-align: center; padding: 6px 8px; border-radius: 12px;
    background: var(--surface-2); border: 2px solid var(--border);
    font-size: 13px; font-weight: 800;
  }
  .len-badge.is-long { color: #d9831a; border-color: rgb(239 159 46 / 45%); background: rgb(255 217 142 / 20%); }

  .icon-btn {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    color: var(--faint); transition: color .2s, background .2s, transform .18s var(--ease-bounce);
  }
  .icon-btn:active { background: var(--surface-3); color: var(--danger); transform: scale(.9); }

  .empty { text-align: center; padding: 34px 10px; color: var(--faint); font-size: 13px; }
  .empty .empty-emoji { font-size: 34px; display: block; margin-bottom: 10px; }
  .empty svg { width: 34px; height: 34px; opacity: .5; margin-bottom: 10px; }

  .kbd-list { display: grid; gap: 9px; }
  .kbd-row { display: flex; gap: 10px; font-size: 13px; line-height: 1.6; color: var(--muted); }
  .kbd-row b { color: var(--text); font-weight: 700; }
  .kbd-dot {
    width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none;
    background: var(--accent); box-shadow: 0 0 0 3px rgb(255 111 165 / 18%);
  }

  .divider { height: 2px; background: var(--border); border-radius: 2px; margin: 14px 0; opacity: .7; }

/* ------------------------------------------------------------------ 概览屏 */
/* ===== screens ===== */
  .hero { text-align: center; padding: 6px 4px 4px; }

  .ring-wrap { position: relative; width: min(76vw, 268px); margin: 2px auto 6px; aspect-ratio: 1; }
  .ring { width: 100%; height: 100%; transform: rotate(-90deg); }
  .ring circle { fill: none; stroke-linecap: round; }
  .ring .track { stroke: rgb(255 143 178 / 16%); }
  .ring .prog  { stroke: url(#ringGrad); transition: stroke-dashoffset 1s var(--ease); }
  .ring-center {
    position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px;
  }
  .ring-emoji { font-size: 26px; line-height: 1; margin-bottom: 2px; animation: ring-bob 3.2s var(--ease-in-out) infinite alternate; }
  @keyframes ring-bob { from { transform: translateY(1px) rotate(-4deg); } to { transform: translateY(-4px) rotate(5deg); } }
  .ring-day { font-size: clamp(46px, 15vw, 62px); font-weight: 800; letter-spacing: -2px; line-height: 1; }
  .ring-day small { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
  .ring-label { font-size: 12px; color: var(--faint); }

  /* 内圈刻度：一天一格。要"看得见但不抢戏"—— 29 根刻度很容易变成自行车轮，
     所以线很短(3px)、很细(1.1)、透明度压到 10% 以下。 */
  .ring .tk {
    stroke: rgb(91 58 70 / 10%);
    stroke-width: 1.1;
    stroke-linecap: round;
  }
  /* 今天那一格：更长 + 更粗 + 品牌粉 —— 整个环上唯一的"指针"，
     和普通刻度在形状上也不一样，不只靠颜色区分。 */
  .ring .tk.is-now {
    stroke: var(--rose);
    stroke-width: 2.8;
  }
  /* 环内一层极淡的内阴影，避免中间那块"平得像一张纸"。
     范围要小、过渡要长，否则会出现一圈明显的圆盘边界。 */
  .ring-wrap::after {
    content: '';
    position: absolute; inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 36%,
      rgb(255 255 255 / 0%) 58%, rgb(198 120 150 / 7%) 100%);
    pointer-events: none;
  }
  [data-theme="dark"] .ring .tk { stroke: rgb(255 255 255 / 12%); }
  [data-theme="dark"] .ring-wrap::after {
    background: radial-gradient(circle at 50% 36%,
      rgb(255 255 255 / 0%) 58%, rgb(0 0 0 / 20%) 100%);
  }

  .predict-card {
    border-radius: var(--r-lg); padding: 18px;
    border: 2px solid rgb(255 178 205 / 80%);
    border: 2px solid color-mix(in oklab, var(--accent) 45%, #ffffff);
    background:
      linear-gradient(165deg, rgb(255 228 238 / 90%), rgb(255 248 242 / 96%) 58%, rgb(244 240 255 / 92%));
    /* 信息层：比默认卡片更重一点，视线先落在这张"结论"上 */
    box-shadow: var(--sticker), var(--shadow), 0 20px 34px -20px rgb(198 96 132 / 40%);
  }
  .predict-when { font-size: 12px; font-weight: 600; color: var(--muted); }
  .predict-date { font-size: 27px; font-weight: 800; letter-spacing: -.7px; margin: 1px 0 4px; }
  .predict-date .weekday { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 7px; letter-spacing: 0; }
  /* 还没有数据时，这一格放一句说明而不是占位破折号 */
  .predict-empty { font-size: 15px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
  .predict-range { font-size: 12.5px; color: var(--muted); }
  .range-bar {
    position: relative; height: 34px; margin: 13px 0 6px;
  }
  .range-track {
    position: absolute; top: 15px; height: 4px; width: 100%; border-radius: 4px;
    background: rgb(255 143 178 / 16%);
  }
  /* 80% 区间：更宽的半透明带，用来体现"越宽的区间越可能命中" */
  .range-band80 {
    position: absolute; top: 11px; height: 12px; border-radius: 7px;
    background: rgb(255 150 113 / 22%);
    background: color-mix(in oklab, var(--accent) 20%, var(--mix-base));
    border: 1.5px solid rgb(255 150 113 / 45%);
    border: 1.5px solid color-mix(in oklab, var(--accent) 42%, #ffffff);
    transition: left .8s var(--ease), width .8s var(--ease);
  }
  /* 90% 区间：最外层，仅描边 */
  .range-band90 {
    position: absolute; top: 15px; height: 4px; border-radius: 4px;
    background: rgb(255 150 113 / 32%);
    background: color-mix(in oklab, var(--accent) 34%, var(--mix-base));
    opacity: .6;
    transition: left .8s var(--ease), width .8s var(--ease);
  }
  .range-fill {
    position: absolute; top: 12px; height: 10px; border-radius: 6px;
    background: rgb(255 150 113 / 80%);
    background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 60%, var(--mix-base)), var(--accent));
    box-shadow: 0 3px 10px -2px var(--accent);
    transition: left .8s var(--ease), width .8s var(--ease);
  }
  .range-pin {
    position: absolute; top: 6px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
    background: var(--pin-bg);
    border: 2.5px solid var(--accent);
    box-shadow: 0 3px 8px -2px rgb(255 111 165 / 70%);
    transition: left .8s var(--ease);
  }
  /* 两端日期用等宽数字：否则 10月25日 → 11月16日 变化时，字宽不同会让整行左右跳 */
  .range-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

  .alert {
    display: flex; gap: 11px; padding: 14px; border-radius: var(--r-lg);
    border: 2px solid var(--border);
    background: var(--surface);
    box-shadow: 0 4px 0 rgb(246 205 222 / 55%);
  }
  .alert.is-ok {
    border-color: rgb(53 189 143 / 40%);
    background: rgb(143 224 192 / 18%);
  }
  .alert.is-warn {
    border-color: rgb(239 159 46 / 45%);
    background: rgb(255 217 142 / 26%);
  }
  .alert.is-danger {
    border-color: rgb(232 85 111 / 45%);
    background: rgb(232 85 111 / 9%);
  }
  .alert-emoji { flex: none; font-size: 22px; line-height: 1.2; }
  .alert-ico { flex: none; width: 22px; height: 22px; color: var(--ok); }
  .alert.is-warn  .alert-ico { color: var(--warn); }
  .alert.is-danger .alert-ico { color: var(--danger); }
  .alert-title { font-size: 13.5px; font-weight: 800; }
  .alert-text { font-size: 12px; color: var(--muted); margin-top: 3px; }

  /* 区间条（预测屏） */
  .levels { display: grid; gap: 10px; }
  .level-row { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 12px; }
  .level-tag { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .level-bar { position: relative; height: 10px; border-radius: 8px; background: rgb(255 143 178 / 14%); overflow: hidden; }
  .level-bar > i {
    position: absolute; top: 0; bottom: 0; border-radius: 8px;
    background: linear-gradient(90deg, rgb(255 111 165 / 80%), var(--coral));
    opacity: .9; transition: left .7s var(--ease), width .7s var(--ease);
  }
  .level-val { font-size: 12px; color: var(--muted); min-width: 96px; text-align: right; }

  .chart-wrap { position: relative; width: 100%; }
  .chart-wrap canvas { display: block; width: 100%; height: 158px; }
  .chart-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 11.5px; color: var(--faint); flex-wrap: wrap; }
  .legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .legend-swatch { width: 10px; height: 10px; border-radius: 4px; }

  .about-p { font-size: 13px; color: var(--muted); line-height: 1.7; }
  .about-p + .about-p { margin-top: 9px; }
  .tag { font-size: 10.5px; padding: 3px 8px; border-radius: 8px; background: var(--surface-2); border: 2px solid var(--border); color: var(--muted); }

  /* 可折叠的技术细节：用原生 <details>，不需要 JS */
  .tech { margin-top: 13px; border-top: 2px dashed var(--border); padding-top: 11px; }
  .tech > summary {
    font-size: 11.5px; font-weight: 600; color: var(--faint); cursor: pointer; list-style: none;
    display: flex; align-items: center; gap: 6px; padding: 2px 0;
    transition: color .2s var(--ease);
  }
  .tech > summary::-webkit-details-marker { display: none; }
  .tech > summary::before { content: "▸"; font-size: 10px; transition: transform .22s var(--ease); }
  .tech[open] > summary::before { transform: rotate(90deg); }
  .tech > summary:active { color: var(--rose); }
  .tech > p { margin-top: 9px; }

  .toast-host {
    position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 24px);
    display: grid; place-items: center; gap: 8px; z-index: 40; pointer-events: none;
  }
  .toast {
    padding: 11px 18px; border-radius: 999px; font-size: 13px; font-weight: 700;
    background: var(--toast-bg);
    color: var(--text);
    border: 2px solid var(--border-2);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 4px 0 rgb(246 205 222 / 80%), 0 14px 28px -12px rgb(214 110 145 / 45%);
    animation: toast-in .4s var(--ease-bounce) both;
  }
  @keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.9); } }

/* ===== motion ===== */
  /* 入场：逐块延迟上浮 */
  .reveal { animation: reveal .58s var(--ease) both; }
  .reveal:nth-child(1) { animation-delay: .02s; }
  .reveal:nth-child(2) { animation-delay: .07s; }
  .reveal:nth-child(3) { animation-delay: .12s; }
  .reveal:nth-child(4) { animation-delay: .17s; }
  .reveal:nth-child(5) { animation-delay: .22s; }
  .reveal:nth-child(6) { animation-delay: .27s; }
  @keyframes reveal { from { opacity: 0; transform: translateY(16px); } }

  .pulse-ring::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    border: 2px solid rgb(255 178 205 / 70%);
    border: 2px solid color-mix(in oklab, var(--accent) 55%, transparent);
    animation: pulsering 2.6s var(--ease-in-out) infinite;
  }
  @keyframes pulsering {
    0%   { opacity: .7; transform: scale(1); }
    70%  { opacity: 0;  transform: scale(1.14); }
    100% { opacity: 0;  transform: scale(1.14); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
    .aurora { animation: none; }
  }

/* 大屏（平板 / 桌面）不再把内容压成手机宽度。
   之前限制 470px 是为了"桌面预览像手机"，但在 iPad 上会让整个界面缩在中间一条，
   底栏只有 446px 宽、五个按钮分不满 —— 用户反馈的就是这个。
   现在只做一个宽松的上限（避免超宽屏拉得太散），底栏跟随 #app 铺满。 */
@media (min-width: 620px) {
  #app { max-width: 720px; margin: 0 auto; }
  .toast-host { max-width: 720px; margin: 0 auto; }
}

/* ============================================================ 新增功能组件 */

/* ---------------------------------------------------- 每天一句的关怀 */
.tip-card {
  /* 比普通卡片轻一点：它是一句话，不该比"记一笔"更抢眼 */
  padding: 15px 16px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.tip-row { display: flex; align-items: flex-start; gap: 13px; }
.tip-emoji {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px; line-height: 1;
  background: linear-gradient(135deg, rgb(255 157 192 / 30%), rgb(255 199 163 / 30%));
  border: 2px solid var(--border);
  box-shadow: var(--sticker);
}
.tip-title { font-size: 14.5px; font-weight: 800; margin-bottom: 3px; }
.tip-text { font-size: 13px; line-height: 1.65; color: var(--muted); }
[data-theme="dark"] .tip-emoji {
  background: linear-gradient(135deg, rgb(255 127 178 / 22%), rgb(255 208 176 / 18%));
}

/* 排卵日期要明显小于首页"下次月经"的 .predict-date（27px）——
   排卵只是"日期估算"，视觉权重必须低一级。 */
.predict-date.ovu-date { font-size: 21px; }

/* ---------------------------------------------------- 排卵期时间条
   颜色全部取自项目现有变量：受孕范围 = mint、排卵窗口 = mauve、中心点 = rose。
   不引入新的蓝色系，保持和整体一致。三层带子的位置/宽度由 JS 用百分比设置。 */
.ovulation-range {
  position: relative;
  height: 18px;
  margin: 15px 0 7px;
}
.ovu-track, .ovu-fertile, .ovu-window, .ovu-pin { position: absolute; }
.ovu-track {
  inset: 5px 0;
  border-radius: 999px;
  background: rgb(255 143 178 / 14%);
}
.ovu-fertile {
  top: 4px; height: 10px;
  border-radius: 999px;
  background: rgb(143 224 192 / 30%);
}
.ovu-window {
  top: 3px; height: 12px;
  border-radius: 999px;
  background: rgb(185 155 224 / 45%);
}
.ovu-pin {
  top: 0; width: 3px; height: 18px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: var(--rose);
  box-shadow: 0 0 0 3px rgb(255 111 165 / 12%);
}
/* 深色下要提亮一点，否则两层粉紫带子在暗底上看不出来 */
[data-theme="dark"] .ovu-track  { background: rgb(255 143 178 / 20%); }
[data-theme="dark"] .ovu-fertile { background: rgb(143 224 192 / 36%); }
[data-theme="dark"] .ovu-window  { background: rgb(185 155 224 / 50%); }

/* ---------------------------------------------------- 症状打卡 */
.sym-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sym {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 12px; min-width: 64px; min-height: 56px; justify-content: center;
  border-radius: 16px; border: 2px solid var(--border-2);
  background: var(--surface-2); color: var(--muted);
  box-shadow: var(--sticker);
  transition: transform .16s var(--ease-bounce), background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.sym-emoji { font-size: 20px; line-height: 1; }
.sym-label { font-size: 11.5px; font-weight: 700; }
.sym:active { transform: translateY(2px) scale(.96); box-shadow: none; }
.sym.is-on {
  background: linear-gradient(135deg, var(--rose), var(--coral));
  border-color: transparent; color: #fff;
  box-shadow: var(--glow);
}

/* ---------------------------------------------------- 撞期查询结果 */
.clash-verdict {
  font-size: 19px; font-weight: 800; text-align: center;
  padding: 15px; border-radius: var(--r);
  border: 2px solid var(--border-2); background: var(--surface-2); color: var(--text);
}
.clash-verdict.is-ok    { color: var(--ok);     border-color: rgb(53 189 143 / 45%);  background: rgb(53 189 143 / 12%); }
.clash-verdict.is-maybe { color: var(--warn);   border-color: rgb(239 159 46 / 48%);  background: rgb(239 159 46 / 13%); }
.clash-verdict.is-high  { color: var(--danger); border-color: rgb(232 85 111 / 50%);  background: rgb(232 85 111 / 13%); }

/* ---------------------------------------------------- 设置 */
.set-row { display: flex; align-items: center; gap: 12px; }
.set-label { font-size: 14px; font-weight: 700; }
.set-sub { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px;
  padding: 5px; border-radius: 16px;
  background: var(--surface-2); border: 2px solid var(--border);
}
.seg button {
  padding: 10px 8px; border-radius: 12px; font-size: 12.5px; font-weight: 700;
  color: var(--muted); transition: background .2s, color .2s, box-shadow .2s;
}
.seg button:active { transform: scale(.97); }
.seg button.is-active { background: var(--surface); color: var(--rose); box-shadow: var(--sticker); }

/* ---------------------------------------------------- 症状规律 */
.pat-emoji { font-size: 16px; width: 22px; text-align: center; flex: none; margin-top: 1px; }

/* ---------------------------------------------------- 行内小按钮（记录列表） */
.inline-btn {
  margin-left: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--rose);
  border: 1.5px solid var(--border-2); background: var(--surface);
  box-shadow: 0 2px 0 var(--border);
}
.inline-btn:active { transform: translateY(1px); box-shadow: none; }

/* ---------------------------------------------------- 锁屏 / 密码弹层 */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 24px;
  background: rgb(70 40 55 / 45%);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.overlay-box {
  width: 100%; max-width: 330px; text-align: center;
  padding: 26px 22px 24px;
  border-radius: var(--r-xl); border: 2px solid var(--border-2);
  background: var(--surface); box-shadow: var(--shadow);
  animation: pop-in .3s var(--ease-bounce) both;
}
@keyframes pop-in { from { opacity: 0; transform: scale(.9) translateY(12px); } }
.lock-emoji { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.overlay-title { font-size: 17px; font-weight: 800; }
.overlay-sub { font-size: 12px; color: var(--faint); margin-top: 5px; }
.lock-input {
  width: 100%; margin: 16px 0 0; padding: 14px;
  border-radius: 16px; border: 2px solid var(--border-2);
  background: var(--surface-2); text-align: center;
  font-size: 24px; letter-spacing: 10px; font-weight: 700;
}
.lock-input:focus { outline: none; border-color: var(--rose); }
/* 口令可以含字母，所以不要数字键盘那种夸张的宽字距 */
.pass-input { font-size: 18px; letter-spacing: 2px; }
.lock-err { min-height: 17px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--danger); }
.overlay .btn { margin-top: 14px; }
.overlay .row .btn { margin-top: 14px; }

/* ============================================================ 夜间模式
   保持"温暖"的底色，只是把它压暗：深棕紫 + 粉色强调，不变成冷灰。
   用变量覆盖，所有组件自动跟着变。 */
[data-theme="dark"] {
  --bg:        #241a20;
  --glass:     rgb(46 34 42 / 80%);
  --glass-2:   rgb(56 42 51 / 80%);
  --predict-1: rgb(78 48 63 / 84%);
  --predict-2: rgb(58 44 50 / 88%);
  --predict-3: rgb(62 54 82 / 86%);
  --aurora-1: rgb(198 88 138 / 26%);
  --aurora-2: rgb(198 128 88 / 22%);
  --aurora-3: rgb(136 108 196 / 24%);
  --aurora-o: .55;
  --fade-mid: rgb(36 26 32 / 62%);
  --mark-1: #4a2f3c;  --mark-2: #4a3a30;  --mark-bd: #6b4453;
  --tabbar-bg: rgb(30 21 26 / 94%);
  --toast-bg:  rgb(52 38 46 / 96%);
  --mix-base:  #241a20;
  --pin-bg:    #f7ecf1;
  --tab-active: #ff9dc0;
  --bg-2:      #2b1f26;
  --bg-deep:   #1b1318;
  --surface:   #2e222a;
  --surface-2: #382a33;
  --surface-3: #422f3a;
  --border:    #4a3540;
  --border-2:  #5d4350;
  --text:      #f7ecf1;
  --muted:     #c9a8b6;
  --faint:     #b092a0;
  --rose:      #ff7fb2;
  --coral:     #ffa184;
  --mauve:     #c3a4ea;
  --peach:     #ffd0b0;
  --butter:    #ffdf9c;
  --mint:      #93e6c9;
  --ok:        #43cfa0;
  --warn:      #f2ab42;
  --danger:    #f2677e;
  /* 深底上深粉读不清：可点色换成亮一档。
     --cta-* 不换 —— 它上面压的是白字，必须是深色，深浅两套主题共用。 */
  --action:    #ff7fb2;
  --action-2:  #ffa184;
  --topbar-1:  rgb(27 19 24 / 92%);
  --topbar-2:  rgb(27 19 24 / 58%);
  --shadow:    0 14px 30px -14px rgb(0 0 0 / 58%);
  --sticker:   0 5px 0 rgb(58 40 50 / 92%);
  --glow:      0 6px 0 rgb(170 55 100 / 95%), 0 16px 30px -12px rgb(255 111 165 / 45%);
}
/* 深色下这几处需要单独调，否则会"发白" */
[data-theme="dark"] .sym.is-on { color: #2a1620; }
[data-theme="dark"] .clash-verdict.is-ok    { background: rgb(67 207 160 / 14%); }
[data-theme="dark"] .clash-verdict.is-maybe { background: rgb(242 171 66 / 15%); }
[data-theme="dark"] .clash-verdict.is-high  { background: rgb(242 103 126 / 15%); }
[data-theme="dark"] .overlay { background: rgb(10 6 9 / 62%); }
[data-theme="dark"] .lock-input { background: var(--surface-2); }

/* ============================================================ 让背景装饰在手机上也能看见
 *
 * 问题：.deco 里那些漂浮 emoji 是按**视口百分比**定位在左右边缘的。
 *   桌面端 #app 只有 720px 居中，两侧留白正好把它们露出来；
 *   手机上 #app 占满全宽，它们就全压在卡片底下了（实测 6 个里 2 个全遮、2 个只剩一丝）。
 *
 * 两处一起改：
 *   1. 卡片改半透明 —— 底色是浅奶油色，所以卡片半透明之后底下仍是浅的，
 *      文字对比度不受影响，而背景的光晕和 emoji 会透上来（所有页面都受益）
 *   2. 手机上把装饰挪进首屏那块**本来就透明**的区域（顶部圆环周围）
 */
.card, .stat { background: var(--glass); }

/* 这两处本来有自己的背景，别被上面那条通用规则抹平 —— 换成半透明版本保留原设计 */
.card.tip-card {
  background: linear-gradient(180deg, var(--glass) 0%, var(--glass-2) 100%);
}
.predict-card {
  /* 用变量而不是硬编码：这张卡的渐变原来写死了浅色，夜间模式下会变成一块亮粉卡片 */
  background: linear-gradient(165deg,
    var(--predict-1), var(--predict-2) 58%, var(--predict-3));
}

/* 手机：把 6 个装饰铺在"顶栏以下、第一张卡片以上"这段空白里。
   注意避开中间的圆环（宽 min(76vw,268px) 居中 → 约 x=61~329），所以都贴左右边。 */
@media (max-width: 619px) {
  .deco span:nth-child(1) { top: 10%; left: 3%;  font-size: 27px; }
  .deco span:nth-child(2) { top: 15%; right: 5%; font-size: 24px; }
  .deco span:nth-child(3) { top: 24%; left: 1%;  font-size: 21px; }
  .deco span:nth-child(4) { top: 30%; right: 2%; font-size: 26px; }
  .deco span:nth-child(5) { top: 38%; left: 5%;  font-size: 23px; }
  .deco span:nth-child(6) { top: 43%; right: 6%; font-size: 20px; }
  /* 手机上装饰整体稍微淡一点，免得在圆环旁边抢视线 */
  .deco span { opacity: .46; }
}