/* ==========================================================================
   痛经确认性试验平台 · 设计令牌（受试者端 H5 + 后台控制台共用）

   色板与间距节奏移植自 /Users/wensen/Desktop/痛经音频小程序_MVP_V3.1_Mac联调版_完整源码
   的 app/css/app.css 与 console.css（同一设计者、同一色板，两端本就是一家人）。
   移植的是视觉风格——色彩、圆角、阴影、组件形状——不是业务逻辑；两个源文件里
   与旧研究强绑定的部分（天空背景动效、听觉产品文案）没有被带过来。
   ========================================================================== */

:root {
  /* 2026-09-05 重设计：受试者端从冷钢蓝换成暖玫瑰——用它的人正在痛经，
     界面该像一间温暖安静的房间，不该像一台仪器。主色取"藕粉/玫瑰木"一族，
     底色是带一点粉的象牙白，阴影带玫瑰色相。对比度：key-600 在 surface 上
     ≥ 4.5:1（AA），正文 ink-900/700 ≥ 7:1。 */
  --key-800:#5e2a41; --key-700:#823a59; --key-600:#a34a6d; --key-500:#c0667f;
  --key-400:#d58ea1; --key-200:#efcbd5; --key-100:#f8e3e9; --key-50:#fcf2f5;

  --ink-900:#2c2226; --ink-800:#3c2f35; --ink-700:#4f4148; --ink-600:#5f5158;
  --ink-500:#6e6067; --ink-400:#80737a; --ink-300:#a3969c;

  --bg:#fbf6f4; --surface:#fffdfc; --surface-2:#f8efee;
  --line:#ecdde1; --line-2:#f3e9eb;

  --ok:#3f7d5e; --ok-bg:#e8f3ec;
  --warn:#9a6318; --warn-bg:#fdf2de;
  --danger:#b8433f; --danger-bg:#fdebea;

  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --sp:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(120,60,80,.05), 0 6px 20px rgba(150,80,105,.08);

  /* 受试者端专用 */
  --tabh:60px; --toph:54px;
  /* 后台控制台专用（历史保留，后台现已自带主题变量） */
  --sidebar-w:236px; --topbar-h:56px;
}

/*
 * 受试者端 H5 在 public/index.html 钉死 data-theme="light"：
 * 受试者本身就不舒服，不要跟着系统深色模式变成近黑底。
 * 后台控制台仍可用 data-theme="dark" 或系统偏好。
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-900:#eef2f3; --ink-800:#dee5e7; --ink-700:#c4ced1; --ink-600:#a9b4b8;
    --ink-500:#94a0a5; --ink-400:#8a959b; --ink-300:#6d797f;
    --bg:#12181d; --surface:#1a2126; --surface-2:#1f272d;
    --line:#2a343b; --line-2:#232c33;
    --key-100:#20313f; --key-50:#1a252e; --key-200:#2c4257;
    --ok-bg:#16302a; --warn-bg:#2e2618; --danger-bg:#331f1d;
    --ok:#7fc9a6; --warn:#e3b567; --danger:#e8897c;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.24);
  }
}
:root[data-theme="light"] {
  --ink-900:#2c2226; --ink-800:#3c2f35; --ink-700:#4f4148; --ink-600:#5f5158;
  --ink-500:#6e6067; --ink-400:#80737a; --ink-300:#a3969c;
  --bg:#fbf6f4; --surface:#fffdfc; --surface-2:#f8efee; --line:#ecdde1; --line-2:#f3e9eb;
  --key-100:#f8e3e9; --key-50:#fcf2f5; --key-200:#efcbd5;
  --ok:#3f7d5e; --ok-bg:#e8f3ec; --warn:#9a6318; --warn-bg:#fdf2de;
  --danger:#b8433f; --danger-bg:#fdebea;
}
:root[data-theme="dark"] {
  --ink-900:#eef2f3; --ink-800:#dee5e7; --ink-700:#c4ced1; --ink-600:#a9b4b8;
  --ink-500:#94a0a5; --ink-400:#8a959b; --ink-300:#6d797f;
  --bg:#12181d; --surface:#1a2126; --surface-2:#1f272d; --line:#2a343b; --line-2:#232c33;
  --key-100:#20313f; --key-50:#1a252e; --key-200:#2c4257;
  --ok:#7fc9a6; --ok-bg:#16302a; --warn:#e3b567; --warn-bg:#2e2618;
  --danger:#e8897c; --danger-bg:#331f1d;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--ink-900);
  font:15px/1.65 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
       "Microsoft YaHei", "Helvetica Neue", sans-serif;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
}
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.94em; }

/* ---------------------------------------------------------------- 徽标 / 提示 / 空态，两端共用 */
.tag {
  display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:500;
  background:var(--line-2); color:var(--ink-500); white-space:nowrap;
}
.tag.key { background:var(--key-100); color:var(--key-700); }
.tag.ok { background:var(--ok-bg); color:var(--ok); }
.tag.warn { background:var(--warn-bg); color:var(--warn); }
.tag.danger { background:var(--danger-bg); color:var(--danger); }

.note {
  padding:12px 14px; border-radius:var(--r-md); font-size:13.5px; line-height:1.6;
  background:var(--key-50); color:var(--ink-700); margin-bottom:12px;
  border-left:3px solid var(--key-400);
}
.note.warn { background:var(--warn-bg); color:var(--warn); border-left-color:currentColor; }
.note.danger { background:var(--danger-bg); color:var(--danger); border-left-color:currentColor; }
.note.ok { background:var(--ok-bg); color:var(--ok); border-left-color:currentColor; }
.note.muted { background:var(--surface-2); color:var(--ink-400); border-left-color:var(--line); }

.empty { text-align:center; padding:38px 20px; color:var(--ink-400); }
.empty .em-t { font-size:14.5px; margin-bottom:6px; color:var(--ink-500); }
.empty .em-d { font-size:13px; line-height:1.6; margin-bottom:16px; }

.fine { font-size:12px; line-height:1.6; color:var(--ink-300); margin:10px 0 0; }
.center { text-align:center; }

/* ---------------------------------------------------------------- Toast，两端共用
   2026-09-29 审计：提示条原来贴在屏幕底部、层级（80）高于弹窗（60）、整条可点（点了就关）——
   正好压在底部弹窗的主按钮（「开始播放」「记下来」）和底栏上，她去点按钮，点到的是提示条，
   提示没了、按钮没按上。现在：
   - 挪到屏幕顶上（顶栏那一带）：底部弹窗的按钮都在下半屏，顶上是弹窗的暗色遮罩或顶栏标题，
     盖住一会儿不挡任何操作；层级仍高于弹窗，弹窗开着时提示照样看得见；
   - 整条不接点击（pointer-events:none，连同每一条），点击一律落到底下的页面。代价是不能再
     「点一下提前关掉」——提示按字数定时自动消失（ui-helpers.js 的 `toast`）。 */
#toasts { position:fixed; left:0; right:0; top:calc(8px + env(safe-area-inset-top)); bottom:auto; z-index:80;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.toast {
  background:rgba(70,40,52,.94); color:#fff; padding:10px 18px; border-radius:999px;
  font-size:13.5px; max-width:80%; text-align:center; line-height:1.5;
  animation:tin .26s var(--ease); box-shadow:0 6px 22px rgba(0,0,0,.2);
  pointer-events:none;
}
.toast.out { opacity:0; transition:opacity .3s; }
.toast.ok { background:rgba(30,95,70,.95); }
.toast.warn { background:rgba(125,80,20,.95); }
.toast.danger { background:rgba(120,40,30,.95); }
@keyframes tin { from { opacity:0; transform:translateY(-8px); } }

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