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

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

:root {
  --key-800:#1c3d5c; --key-700:#2a557f; --key-600:#3a6d9e; --key-500:#5089b8;
  --key-400:#77a8cd; --key-200:#bdd7ea; --key-100:#dcebf6; --key-50:#eef4fb;

  --ink-900:#1b2225; --ink-800:#2b3438; --ink-700:#3f4b50; --ink-600:#4e585c;
  --ink-500:#5b6569; --ink-400:#656e71; --ink-300:#868b8d;

  --bg:#f6f5f2; --surface:#fcfbf9; --surface-2:#f8f7f4;
  --line:#e3e0d8; --line-2:#ecebe5;

  --ok:#2e7d5b; --ok-bg:#e8f4ee;
  --warn:#8a5a12; --warn-bg:#fdf3e2;
  --danger:#b23a2e; --danger-bg:#fdeceb;

  --r-lg:16px; --r-md:12px; --r-sm:8px;
  --sp:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(20,35,50,.05), 0 4px 16px rgba(20,35,50,.06);

  /* 受试者端专用 */
  --tabh:58px; --toph:52px;
  /* 后台控制台专用 */
  --sidebar-w:236px; --topbar-h:56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --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:#1b2225; --ink-800:#2b3438; --ink-700:#3f4b50; --ink-600:#4e585c;
  --ink-500:#5b6569; --ink-400:#656e71; --ink-300:#868b8d;
  --bg:#f6f5f2; --surface:#fcfbf9; --surface-2:#f8f7f4; --line:#e3e0d8; --line-2:#ecebe5;
  --key-100:#dcebf6; --key-50:#eef4fb; --key-200:#bdd7ea;
  --ok:#2e7d5b; --ok-bg:#e8f4ee; --warn:#8a5a12; --warn-bg:#fdf3e2;
  --danger:#b23a2e; --danger-bg:#fdeceb;
}
: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.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
       "Microsoft YaHei", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.94em; }

/* ---------------------------------------------------------------- 徽标 / 提示 / 空态，两端共用 */
.tag {
  display:inline-block; padding:1px 7px; border-radius:5px; 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:11px 13px; 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，两端共用 */
#toasts { position:fixed; left:0; right:0; bottom:24px; z-index:80;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.toast {
  background:rgba(24,34,44,.94); color:#fff; padding:10px 18px; border-radius:20px;
  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);
}
.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; }
}