/* 圆圆心理健康网站（代码名 qingyu）—— 界面语言取自 ShowRive（pan.xcmdy.top）那一套：
   浅蓝灰画布 + 白色圆角卡片 + 药丸主按钮 + 8 档字号阶梯 + M3 动效曲线。
   兼容底线：不用 :has() / :focus-visible / inset / color-mix / clamp 无兜底。 */

/* ============================================================
   1. 令牌
   ============================================================ */
:root,
[data-theme="light"] {
    /* 布局与尺寸 */
    --ctrl-h: auto; --row-h: 44px; --side-w: 264px; --nav-h: 60px;
    --content-max: 1180px;

    /* 字号阶梯：全部由 --fs-base 推导 */
    --fs-base: 15px;
    --fs-2xs: calc(var(--fs-base) * 0.714);
    --fs-xs:  calc(var(--fs-base) * 0.786);
    --fs-sm:  calc(var(--fs-base) * 0.857);
    --fs-cap: calc(var(--fs-base) * 0.929);
    --fs-md:  var(--fs-base);
    --fs-lead: calc(var(--fs-base) * 1.071);
    --fs-lg:  calc(var(--fs-base) * 1.143);
    --fs-xl:  calc(var(--fs-base) * 1.286);
    --fs-2xl: calc(var(--fs-base) * 1.571);
    --fs-3xl: calc(var(--fs-base) * 1.857);
    --fw-base: 400; --lh-base: 1.7;
    --fw-h: 600; --lh-h: 1.25;

    /* 内边距 */
    --pad-btn: 9px 18px; --pad-btn-sm: 5px 12px; --pad-btn-lg: 13px 26px;
    --pad-input: 11px 14px;
    --pad-card: 24px; --pad-stat: 20px;
    --pad-modal-head: 18px 22px; --pad-modal-body: 22px; --pad-modal-foot: 16px 22px;
    --pad-toast: 12px 22px; --pad-nav-a: 8px 12px; --pad-chip: 8px 16px;
    --gap-nav: 4px; --gap-topbar: 12px;
    --bar-h: 8px;

    /* 描边与圆角 */
    --bw: 1px;
    --radius-xs: 6px; --radius-sm: 8px; --radius: 14px;
    --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px;
    --r-btn: var(--radius-full); --r-input: var(--radius-sm);
    --r-card: var(--radius-lg); --r-modal: var(--radius-lg); --r-menu: var(--radius);

    /* 表面 */
    --bg: #f6f8fc;
    --bg-2: #eef1f7;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-container: #f1f4f9;
    --surface-container-high: #e8edf5;
    --art-bg: #ffffff;
    --art-fx: none;
    --topbar-bg: rgba(255, 255, 255, .85);

    /* 文字 */
    --text: #1f1f1f;
    --text-2: #5f6368;
    --text-3: #676d75;
    --text-inverse: #ffffff;

    /* 描边 */
    --border: #e6e9ef;
    --border-2: #dadce0;
    --border-strong: #bdc1c6;

    /* 主色 */
    --primary: #1565d0;
    --primary-hover: #185abc;
    --primary-active: #174ea6;
    --primary-text: #ffffff;
    --primary-container: #d3e3fd;
    --on-primary-container: #0842a0;
    --primary-soft: rgba(26, 115, 232, .09);
    --link: #1a73e8;
    --link-hover: #174ea6;

    /* 语义色 */
    --success: #1e8e3e; --success-bg: #e6f4ea; --success-border: #ceead6; --success-text: #137333;
    --warning: #b06000; --warning-bg: #fef7e0; --warning-border: #feefc3; --warning-text: #8a4b00;
    --danger: #c5221f;  --danger-bg: #fce8e6;  --danger-border: #f6c7c3;  --danger-text: #c5221f;
    --info: #1a73e8;    --info-bg: #e8f0fe;    --info-border: #d2e3fc;    --info-text: #174ea6;

    /* 输入 */
    --input-bg: #ffffff;
    --input-border: #dadce0;
    --input-border-hover: #1a73e8;
    --input-text: #1f1f1f;
    --input-placeholder: #676d75;
    --input-focus-ring: rgba(26, 115, 232, .16);

    /* 字体 */
    --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* 动效 */
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(.3, 0, 0, 1);
    --ease-decelerate: cubic-bezier(.05, .7, .1, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-1: 110ms; --dur-2: 180ms; --dur-3: 260ms; --dur-4: 380ms;

    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 4px 12px rgba(16, 24, 40, .05);
    --shadow-lg: 0 4px 8px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .12);
    --shadow-xl: 0 8px 16px rgba(16, 24, 40, .08), 0 28px 64px rgba(16, 24, 40, .16);
    --backdrop: rgba(16, 24, 40, .42);
    --selection-bg: #cfe4fd; --selection-text: #174ea6;
    --scrollbar-thumb: #c8ccd4; --scrollbar-thumb-hover: #9aa0a6;

    /* 渐变 */
    --gradient-brand: linear-gradient(135deg, #1a73e8, #1e8e3e);
    --gradient-brand-soft: linear-gradient(135deg, rgba(26, 115, 232, .10), rgba(52, 168, 83, .10));
    --gradient-hero: linear-gradient(135deg, rgba(26, 115, 232, .10), rgba(52, 168, 83, .10));

    /* 层级 */
    --z-topbar: 100; --z-side: 120; --z-bottom: 110; --z-modal: 300; --z-toast: 400;
}

[data-theme="dark"] {
    --bg: #0f1115; --bg-2: #151920;
    --surface: #171b21; --surface-2: #1c212a;
    --surface-container: #1c212a; --surface-container-high: #242a34;
    --art-bg: #1c212a;
    --art-fx: invert(1) hue-rotate(180deg);
    --topbar-bg: rgba(23, 27, 33, .85);

    --text: #e8eaed; --text-2: #9aa0a6; --text-3: #868d95; --text-inverse: #0f1115;

    --border: #262c35; --border-2: #30373f; --border-strong: #454c57;

    --primary: #8ab4f8; --primary-hover: #a8c7fa; --primary-active: #bcd7fb;
    --primary-text: #0b2b5c; --primary-container: #174a7c; --on-primary-container: #d3e3fd;
    --primary-soft: rgba(138, 180, 248, .14);
    --link: #8ab4f8; --link-hover: #a8c7fa;

    --success: #81c995; --success-bg: #0f2a19; --success-border: #1e4629; --success-text: #81c995;
    --warning: #fdd663; --warning-bg: #332500; --warning-border: #5a4400; --warning-text: #fdd663;
    --danger: #f28b82;  --danger-bg: #3c1614;  --danger-border: #5f2120;  --danger-text: #f28b82;
    --info: #8ab4f8;    --info-bg: #0d2136;    --info-border: #1a3d5c;    --info-text: #8ab4f8;

    --input-bg: #1c212a; --input-border: #30373f; --input-border-hover: #8ab4f8;
    --input-text: #e8eaed; --input-placeholder: #868d95; --input-focus-ring: rgba(138, 180, 248, .22);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .5);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, .45), 0 28px 64px rgba(0, 0, 0, .6);
    --backdrop: rgba(0, 0, 0, .6);
    --selection-bg: #174a7c; --selection-text: #d3e3fd;
    --scrollbar-thumb: #30373f; --scrollbar-thumb-hover: #454c57;

    --gradient-brand: linear-gradient(135deg, #8ab4f8, #81c995);
    --gradient-brand-soft: linear-gradient(135deg, rgba(138, 180, 248, .16), rgba(129, 201, 149, .16));
    --gradient-hero: linear-gradient(135deg, rgba(138, 180, 248, .14), rgba(129, 201, 149, .14));
}

/* ============================================================
   2. 基础
   ============================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: var(--font-sans); font-size: var(--fs-md);
    font-weight: var(--fw-base); line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
}
[hidden], .hide { display: none !important; }
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; transition: color var(--dur-2) var(--ease-standard); }
a:hover { color: var(--link-hover); }
h1, h2, h3, h4 { font-weight: var(--fw-h); line-height: var(--lh-h); margin: 0 0 12px; letter-spacing: -.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-left: 20px; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }
::selection { background: var(--selection-bg); color: var(--selection-text); }
.muted { color: var(--text-2); }
.acc { color: var(--primary); }
.err { color: var(--danger-text); font-size: var(--fs-sm); min-height: 20px; margin: 4px 0 10px; }
.note { color: var(--text-2); font-size: var(--fs-sm); }
.wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============================================================
   3. 外壳：侧栏 + 顶栏 + 主区 + 移动端底部导航
   ============================================================ */
.app-shell { display: block; }
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--z-side);
    width: var(--side-w); padding: 20px 16px 16px;
    background: var(--surface); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 18px; overflow-y: auto;
}
.app-main { min-width: 0; }
.topbar {
    position: sticky; top: 0; z-index: var(--z-topbar);
    background: var(--topbar-bg); border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px) saturate(1.8); -webkit-backdrop-filter: blur(12px) saturate(1.8);
}
.topbar-inner {
    max-width: var(--content-max); margin: 0 auto; padding: 0 24px;
    height: var(--nav-h); display: flex; align-items: center; gap: var(--gap-topbar);
}
.topbar-title { font-size: var(--fs-cap); color: var(--text-2); }

/* 汉堡菜单按钮：只在窄屏出现，宽屏用左侧固定侧栏，不需要它。 */
.burger { display: none; }
.burger i {
    display: block; width: 18px; height: 2px; margin: 0 auto;
    border-radius: 2px; background: currentColor;
    transition: transform 180ms cubic-bezier(.2,0,0,1), opacity 120ms linear;
}
.burger i + i { margin-top: 4px; }
.nav-scrim { display: none; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.user-box { display: flex; align-items: center; gap: 8px; margin-left: 4px; }
.page { padding: 28px 0 8px; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-mark {
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px;
    background: var(--gradient-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
}
.brand-mark svg { display: block; }
.brand-text { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.brand-sub { font-size: var(--fs-sm); color: var(--text-2); margin-left: 2px; }

.side-title {
    font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-3); padding: 0 10px 6px; margin: 0;
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
    display: flex; align-items: center; gap: 10px; padding: var(--pad-nav-a);
    border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--fs-md);
    transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard),
                transform var(--dur-2) var(--ease-standard);
}
.side-nav a:hover { background: var(--bg-2); color: var(--text); }
.side-nav a i {
    font-style: normal; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-3);
    width: 18px; flex: 0 0 auto; font-family: var(--font-mono);
}
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }

.icon-btn {
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent;
    color: var(--text-2);
    transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), transform var(--dur-3) var(--ease-spring);
}
.icon-btn:hover { background: var(--bg-2); color: var(--text); transform: rotate(15deg); }

.uchip { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--radius-full); min-width: 0; }
.uchip i {
    font-style: normal; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
    background: var(--primary-container); color: var(--on-primary-container);
    display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 600;
}
.uchip b { font-weight: 500; font-size: var(--fs-cap); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkbtn {
    background: none; border: none; padding: 4px 6px; color: var(--text-2);
    font-size: var(--fs-sm); border-radius: var(--radius-xs);
}
.linkbtn:hover { color: var(--primary); }
.todo {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-radius: var(--radius-full); background: var(--warning-bg); color: var(--warning-text);
    border: 1px solid var(--warning-border); font-size: var(--fs-sm); font-weight: 500;
}
.todo:hover { background: var(--warning-border); color: var(--warning-text); }

.bottom-nav { display: none; }

/* ============================================================
   4. 按钮 / 标签 / 输入
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--ctrl-h); padding: var(--pad-btn);
    border-radius: var(--r-btn); border: 1px solid var(--border-2); background: var(--surface);
    color: var(--text); font-size: var(--fs-md); font-weight: 500; text-decoration: none;
    transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard),
                box-shadow var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-emphasized),
                color var(--dur-2) var(--ease-standard);
}
.btn:hover { background: var(--bg-2); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); color: var(--text); }
.btn:active { transform: scale(.97); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); font-weight: 600; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-text); box-shadow: 0 2px 8px rgba(21, 101, 208, .28); }
.btn-ghost { background: transparent; border-color: var(--border-2); color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-2); border-color: var(--border-strong); color: var(--text); box-shadow: none; }
.btn-sm { padding: var(--pad-btn-sm); font-size: var(--fs-sm); }
.btn-lg { padding: var(--pad-btn-lg); font-size: var(--fs-lg); }
.btn-block { width: 100%; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px;
    border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 500; line-height: 1.6;
    background: var(--surface-container); color: var(--text-2); border: 1px solid var(--border);
}
.badge-primary { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; }
.tag {
    display: inline-block; padding: 3px 10px; border-radius: var(--radius-full);
    background: var(--primary-soft); color: var(--primary-active);
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
}
[data-theme="dark"] .tag { color: var(--on-primary-container); }

label { display: block; font-size: var(--fs-cap); font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.input, input[type="text"], input[type="email"], input[type="password"] {
    width: 100%; min-height: var(--ctrl-h); padding: var(--pad-input);
    border-radius: var(--r-input); border: 1px solid var(--input-border); background: var(--input-bg);
    color: var(--input-text); font-size: var(--fs-md);
    transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.input::placeholder, input::placeholder { color: var(--input-placeholder); }
.input:focus, input:focus {
    outline: none; border-color: var(--input-border-hover); box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.field { margin-bottom: 16px; }
.field > span { display: block; font-size: var(--fs-cap); font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.form-row { display: block; }
.form-row:after { content: ""; display: table; clear: both; }

/* 自写下拉框（不用原生 select） */
.sel { position: relative; margin-bottom: 16px; }
.sel-lb { display: block; font-size: var(--fs-cap); font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.sel-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: var(--pad-input); min-height: var(--ctrl-h);
    background: var(--input-bg); color: var(--input-text); text-align: left;
    border: 1px solid var(--input-border); border-radius: var(--r-input); font-size: var(--fs-md);
    transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.sel-btn:hover { border-color: var(--border-strong); }
.sel-btn:focus { outline: none; border-color: var(--input-border-hover); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.sel.blank .sel-val { color: var(--input-placeholder); }
.sel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-ar {
    width: 0; height: 0; flex: 0 0 auto; border-style: solid;
    border-width: 5px 5px 0; border-color: var(--text-3) transparent transparent;
    transition: transform var(--dur-2) var(--ease-standard);
}
.sel.open .sel-ar { transform: rotate(180deg); }
.sel-list {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60; margin: 6px 0 0; padding: 6px;
    list-style: none; max-height: 268px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-menu); box-shadow: var(--shadow-lg);
}
.sel-list li {
    padding: 9px 12px; border-radius: var(--radius-sm); font-size: var(--fs-md); color: var(--text);
    cursor: pointer; transition: background var(--dur-1) var(--ease-standard);
}
.sel-list li:hover, .sel-list li.on { background: var(--bg-2); }
.sel-list li[aria-selected="true"] { background: var(--primary-container); color: var(--on-primary-container); font-weight: 500; }
.sel-row { display: block; }
.sel-row .sel { margin-bottom: 16px; }

/* ============================================================
   5. 卡片 / 区块
   ============================================================ */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: var(--pad-card); margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard),
                transform var(--dur-2) var(--ease-spring);
}
.card:hover { box-shadow: var(--shadow); border-color: var(--border-2); }
.card:last-child { margin-bottom: 0; }
.card-title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.card-sub { color: var(--text-2); font-size: var(--fs-cap); margin-bottom: 14px; }

.grid { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; }
.grid > * { flex: 1 1 260px; min-width: 0; }
.grid-2 > * { flex-basis: 380px; }
.grid-3 > * { flex-basis: 280px; }
.grid-4 > * { flex-basis: 210px; }
.gap-top { margin-top: 16px; }

.sec { padding: 44px 0; }
.sec-alt > .wrap > .card, .sec-alt .panel { background: var(--surface); }
.sec-no {
    font-size: var(--fs-sm); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--primary); margin-bottom: 8px;
}
.sec h2 { font-size: var(--fs-2xl); margin-bottom: 10px; }
.sec-lead { color: var(--text-2); font-size: var(--fs-lead); max-width: 72ch; margin-bottom: 24px; }

/* 首屏 */
.hero {
    background: var(--gradient-hero); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 40px; margin-bottom: 8px;
    display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.hero-copy { flex: 1 1 380px; min-width: 0; }
.hero-art { flex: 1 1 300px; margin: 0; min-width: 0; }
.hero-art img { width: 100%; height: auto; background: var(--art-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; filter: var(--art-fx); }
.hero-art figcaption { font-size: var(--fs-sm); color: var(--text-3); text-align: right; margin-top: 8px; }
.hero h1 { font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1.22; margin-bottom: 14px; }
.hero .lead { color: var(--text-2); font-size: var(--fs-lead); max-width: 46ch; margin-bottom: 22px; }
.hero-act { display: flex; gap: 12px; flex-wrap: wrap; }


/* 统计卡 */
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--pad-stat); margin-bottom: 0; }
.stat-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.stat-card .value { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.02em; color: var(--primary); line-height: 1.15; margin: 0 0 6px; }
.stat-card .label { font-size: var(--fs-cap); color: var(--text); margin: 0 0 4px; }
.stat-card .sub { font-size: var(--fs-sm); color: var(--text-3); margin: 0; }
.stat-card.sm .value { font-size: var(--fs-2xl); }

/* 横条 */
.bars { list-style: none; margin: 0 0 16px; padding: 0; }
.bars li { margin-bottom: 16px; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-cap); margin-bottom: 6px; }
.bar-head b { font-weight: 600; color: var(--text); font-size: var(--fs-md); }
.bar { height: var(--bar-h); background: var(--surface-container); border-radius: var(--radius-full); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--gradient-brand); border-radius: var(--radius-full); transition: width var(--dur-4) var(--ease-emphasized); }
.bar > i.acc-bar { background: var(--danger); }
/* 宽度走类名，模板里不再写 style="..."：CSP 的 style-src 就能收掉 unsafe-inline。 */
.bar > i.bar-w-5 { width: 5%; }
.bar > i.bar-w-10 { width: 10%; }
.bar > i.bar-w-14 { width: 14%; }
.bar > i.bar-w-30 { width: 30%; }
.bar > i.bar-w-40 { width: 40%; }
.bar > i.bar-w-44 { width: 44%; }
.bar > i.bar-w-100 { width: 100%; }
.bar-desc { font-size: var(--fs-sm); color: var(--text-3); margin: 6px 0 0; }

.funnel { margin-bottom: 20px; }
.fn { margin-bottom: 14px; }
.fn-top { display: flex; justify-content: space-between; font-size: var(--fs-cap); margin-bottom: 6px; }
.fn-top b { font-weight: 600; }

.split { display: flex; gap: 20px; flex-wrap: wrap; }
.split-l, .split-r { flex: 1 1 400px; min-width: 0; }
.split h3 { margin-bottom: 16px; }

.callout {
    background: var(--surface-container); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; margin-top: 8px;
}
.c-num { font-size: var(--fs-3xl); font-weight: 700; color: var(--primary); margin: 0 0 4px; line-height: 1.1; }
.c-txt { margin: 0; color: var(--text-2); font-size: var(--fs-cap); }

/* 功能模块卡 */
.mod { position: relative; padding-top: 20px; }
.mod-no {
    font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; color: var(--primary);
    letter-spacing: .08em; margin: 0 0 8px;
}
.mod h4 { margin-bottom: 6px; font-size: var(--fs-lg); }
.mod p:last-child { margin-bottom: 0; color: var(--text-2); font-size: var(--fs-cap); }

/* 小画 */
.comics .comic { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 0; overflow: hidden; margin: 0; }
.comic img { width: 100%; height: auto; background: var(--art-bg); border-bottom: 1px solid var(--border); filter: var(--art-fx); }
.comic figcaption { padding: 16px 18px 18px; }
.comic-tag { margin: 0 0 8px; }
.comic h4 { margin-bottom: 6px; }
.comic p:last-child { margin: 0; color: var(--text-2); font-size: var(--fs-cap); }

/* 隐私清单 */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
    position: relative; padding: 12px 14px 12px 40px; margin-bottom: 8px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: var(--fs-cap); color: var(--text-2);
}
.ticks li b { color: var(--text); font-weight: 600; }
.ticks li:before {
    content: ""; position: absolute; left: 16px; top: 19px; width: 12px; height: 6px;
    border-left: 2px solid var(--success); border-bottom: 2px solid var(--success);
    transform: rotate(-45deg);
}
.privacy { display: flex; gap: 24px; flex-wrap: wrap; }
.privacy > div { flex: 1 1 300px; min-width: 0; }
.privacy > ul { flex: 1 1 420px; min-width: 0; }

/* 问答 */
details {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0; margin-bottom: 10px; overflow: hidden;
}
summary {
    cursor: pointer; padding: 16px 20px; font-weight: 500; font-size: var(--fs-md);
    list-style: none; position: relative; padding-right: 44px;
}
summary::-webkit-details-marker { display: none; }
summary:after {
    content: ""; position: absolute; right: 22px; top: 22px; width: 0; height: 0;
    border-style: solid; border-width: 5px 5px 0; border-color: var(--text-3) transparent transparent;
    transition: transform var(--dur-2) var(--ease-standard);
}
details[open] summary:after { transform: rotate(180deg); }
details p { padding: 0 20px 18px; margin: 0; color: var(--text-2); font-size: var(--fs-cap); }

/* CTA + 热线 */
.cta-in { display: flex; gap: 20px; flex-wrap: wrap; align-items: stretch; }
.cta-in > div:first-child { flex: 1 1 420px; min-width: 0; }
.cta-in h2 { font-size: var(--fs-2xl); }
.sub { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.sub input { flex: 1 1 240px; }
.form-msg { font-size: var(--fs-sm); color: var(--text-2); margin: 10px 0 0; min-height: 20px; }
.hotline {
    flex: 1 1 300px; min-width: 0; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm);
}
.hotline p { margin: 0 0 6px; font-size: var(--fs-cap); color: var(--text-2); }
.hl-no { font-size: var(--fs-2xl); font-weight: 700; color: var(--primary); letter-spacing: -.01em; margin-bottom: 2px; }
.hl-tip { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid var(--border); color: var(--danger-text) !important; font-weight: 500; }

/* ============================================================
   6. 弹窗 / 提示
   ============================================================ */
.modal-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center; padding: 18px;
}
.modal-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--backdrop); }
.modal {
    position: relative; width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-modal); box-shadow: var(--shadow-xl);
    animation: pop var(--dur-3) var(--ease-spring) both;
}
.modal-head { padding: var(--pad-modal-head); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-title { font-size: var(--fs-lg); font-weight: 600; margin: 0; }
.modal-body { padding: var(--pad-modal-body); }
.modal-x {
    width: 30px; height: 30px; border-radius: var(--radius-sm); border: none; background: transparent;
    color: var(--text-2); font-size: 20px; line-height: 1;
}
.modal-x:hover { background: var(--bg-2); color: var(--text); }
.modal-sub { color: var(--text-2); font-size: var(--fs-cap); margin: 0 0 18px; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.tabs {
    display: flex; gap: 4px; padding: 4px; margin-bottom: 20px;
    background: var(--surface-container); border-radius: var(--radius-full);
}
.tab {
    flex: 1; padding: 8px 14px; border: none; background: transparent; color: var(--text-2);
    border-radius: var(--radius-full); font-size: var(--fs-md); font-weight: 500;
    transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.tab.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }

/* ============================================================
   7. 引导流程（资料 + 30 题）
   ============================================================ */
.ob { max-width: 760px; padding-top: 32px; padding-left: 24px; padding-right: 24px; }
.ob-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-sm); margin-bottom: 24px;
}
.ob-card h1 { font-size: var(--fs-2xl); margin-bottom: 10px; }
.ob-act { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.ob-note { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); color: var(--text-3); font-size: var(--fs-sm); }

.progress { height: var(--bar-h); background: var(--surface-container); border-radius: var(--radius-full); overflow: hidden; margin: 20px 0 6px; }
.progress > i { display: block; height: 100%; width: 0; background: var(--gradient-brand); border-radius: var(--radius-full); transition: width var(--dur-4) var(--ease-emphasized); }
.prog-txt { font-size: var(--fs-sm); color: var(--text-3); margin: 0 0 20px; }

.qpage { display: block; }
.qpage.off { display: none; }
.q { border: none; border-bottom: 1px solid var(--border); padding: 18px 0; margin: 0; }
.q:last-of-type { border-bottom: none; }
.q legend { padding: 0; font-size: var(--fs-md); color: var(--text); margin-bottom: 12px; }
.q legend b {
    display: inline-block; min-width: 24px; margin-right: 8px; color: var(--text-3);
    font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600;
}
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; flex: 1 1 120px; margin: 0; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span {
    display: block; padding: 10px 12px; text-align: center; font-size: var(--fs-cap); color: var(--text-2);
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard),
                color var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-emphasized);
}
.opt:hover span { border-color: var(--border-strong); background: var(--bg-2); }
.opt input:checked + span {
    background: var(--primary-container); border-color: var(--primary); color: var(--on-primary-container); font-weight: 600;
}
.opt input:focus + span { box-shadow: 0 0 0 3px var(--input-focus-ring); }
.qnav { justify-content: space-between; }
.qcount { font-size: var(--fs-cap); color: var(--text-3); }
.score { font-size: var(--fs-cap); color: var(--text-2); }
.score b { font-size: var(--fs-2xl); color: var(--primary); font-weight: 700; }
.crisis {
    background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius);
    padding: 18px 20px; margin: 18px 0;
}
.crisis h4 { color: var(--danger-text); margin-bottom: 6px; }
.crisis p { margin: 0; color: var(--danger-text); font-size: var(--fs-cap); }
.crisis a { color: var(--danger-text); text-decoration: underline; }

/* ============================================================
   7.5 个人中心（/me）
   ============================================================ */
.me-card { margin-bottom: 20px; }
.me-card h1, .me-card h2 { font-size: var(--fs-xl); }
.me-crisis { margin-bottom: 20px; }
.mood-opts .opt { flex-basis: calc(20% - 7px); }

/* 删数据是不可逆动作，视觉上要和「存好了」分开。 */
.btn-danger { background: transparent; border-color: var(--danger-border); color: var(--danger-text); font-weight: 600; }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-text); box-shadow: none; }

/* 历史里那句默认只是个提示，点开才换成原文。 */
.mlist li.has-note { cursor: pointer; }
.mlist li.has-note:hover { background: var(--bg-2); }
.mlist i.ml-note { border-bottom: 1px dashed var(--border-strong); color: var(--text-3); }
.mlist li.opened i.ml-note { border-bottom: 0; color: var(--text); }

.chart { display: flex; gap: 10px; align-items: stretch; }
.chart .scale {
    list-style: none; margin: 0; padding: 0; min-width: 3.4em;
    display: flex; flex-direction: column; justify-content: space-between;
    font-size: var(--fs-2xs); color: var(--text-3); text-align: right;
}
.chart-plot { flex: 1; min-width: 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .grid line { stroke: var(--border); stroke-width: 1; }
.m-area { fill: var(--primary-soft); stroke: none; }
.m-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-dot { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
/* 一条记录都没有时，别把落在原点的默认点画出来。 */
.chart.empty .m-line, .chart.empty .m-area, .chart.empty .m-dot { opacity: 0; }
.chart-x { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--text-3); margin: 6px 0 0 calc(3.4em + 10px); }
.mlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.mlist li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-cap); }
.mlist b { color: var(--text-3); font-weight: 500; font-size: var(--fs-sm); min-width: 5.6em; }
.mlist span { color: var(--text); font-weight: 500; }
.mlist i { color: var(--text-2); font-style: normal; margin-left: auto; text-align: right; }
@media (max-width: 480px) {
    .mood-opts .opt { flex-basis: calc(33.333% - 4px); }
    .mlist li { flex-wrap: wrap; }
    .mlist i { margin-left: 0; text-align: left; flex-basis: 100%; }
}

/* 日记：一行是一篇，点开了正文才进页面。 */
textarea.input { resize: vertical; min-height: 132px; line-height: 1.6; }
.dlist { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--border); }
.dlist > li { border-bottom: 1px solid var(--border); }
.d-row {
    display: flex; gap: 10px; align-items: baseline; width: 100%;
    padding: 9px 4px; border: 0; border-radius: var(--radius-xs); background: none;
    box-shadow: none; text-align: left; color: var(--text); font-size: var(--fs-cap);
}
.d-row:hover { background: var(--bg-2); }
.d-row b { color: var(--text-3); font-weight: 500; font-size: var(--fs-sm); min-width: 5.6em; }
.d-row span { color: var(--text); font-weight: 500; }
.d-hint {
    margin-left: auto; font-style: normal; font-size: var(--fs-xs); color: var(--text-3);
    border-bottom: 1px dashed var(--border-strong);
}
.dlist li.opened .d-hint { border-bottom: 0; }
.d-body {
    margin: 0; padding: 12px 14px; border-left: 2px solid var(--primary-soft);
    border-radius: var(--radius-xs); background: var(--surface-2);
    font-size: var(--fs-cap); color: var(--text-2); line-height: 1.75;
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;
}
.d-act { margin: 8px 0 12px; text-align: right; }
@media (max-width: 480px) {
    .d-row { flex-wrap: wrap; }
    .d-hint { margin-left: 0; }
}

/* 烦恼：一行是一条，状态词是「点开」的入口；过去了就划掉。 */
.wlist { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--border); }
.wlist > li { border-bottom: 1px solid var(--border); }
.w-row {
    display: flex; gap: 10px; align-items: baseline; width: 100%;
    padding: 9px 4px; border: 0; border-radius: var(--radius-xs); background: none;
    box-shadow: none; text-align: left; color: var(--text); font-size: var(--fs-cap);
}
.w-row:hover { background: var(--bg-2); }
.w-row b { color: var(--primary-active); font-weight: 600; font-size: var(--fs-sm); min-width: 3.2em; }
.w-row span { color: var(--text-3); font-size: var(--fs-sm); }
.w-state {
    margin-left: auto; font-style: normal; font-size: var(--fs-xs); color: var(--text-3);
    border-bottom: 1px dashed var(--border-strong);
}
.wlist li.opened .w-state { border-bottom: 0; }
.wlist li.past .w-row b, .wlist li.past .w-row span { color: var(--text-3); text-decoration: line-through; }
.w-body {
    margin: 0; padding: 12px 14px; border-left: 2px solid var(--primary-soft);
    border-radius: var(--radius-xs); background: var(--surface-2);
    font-size: var(--fs-cap); color: var(--text-2); line-height: 1.75;
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;
}
.wlist li.past .w-body { color: var(--text-3); text-decoration: line-through; }
.w-act { margin: 8px 0 12px; text-align: right; }
.w-act .btn { margin-left: 8px; }
.w-filter .opt { flex-basis: calc(33.333% - 6px); }
@media (max-width: 480px) {
    .w-row { flex-wrap: wrap; }
    .w-state { margin-left: 0; }
}

/* ---------- 树洞：全站唯一公开的一块，正文直接显示 ---------- */
.tlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.tlist > li { padding: 14px 0; border-bottom: 1px solid var(--border); }
.tlist li.mine { padding-left: 12px; border-left: 2px solid var(--primary-soft); }
.t-meta { display: flex; gap: 10px; align-items: baseline; margin: 0; font-size: var(--fs-sm); }
.t-meta b { color: var(--primary-active); font-weight: 600; }
.t-meta span { color: var(--text-3); }
.t-body {
    margin: 5px 0 0; font-size: var(--fs-cap); color: var(--text); line-height: 1.75;
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;
}
.t-act { margin: 9px 0 0; }
.t-act .btn { margin-right: 8px; }
.t-hug i { font-style: normal; color: var(--text-3); }
.t-hug.on { background: var(--primary-soft); border-color: transparent; color: var(--primary-active); }
.t-hug.on i { color: var(--primary-active); }
.rule-list { margin: 0; padding-left: 1.2em; color: var(--text-2); font-size: var(--fs-cap); line-height: 1.95; }
.rule-list li { margin: 0; }

/* ---------- 心灵小窝：和树洞相反的一块，封面是现成的小画，内容全加密 ---------- */
.n-cover { margin: 0 0 16px; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.n-cover img { display: block; width: 100%; max-width: 420px; height: auto; background: var(--art-bg); filter: var(--art-fx); }
.scene-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.scene {
    flex: 0 0 calc(33.333% - 7px); padding: 6px 6px 8px; text-align: center; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
    box-shadow: none; color: var(--text); font-size: var(--fs-xs);
}
.scene img { display: block; width: 100%; height: auto; border-radius: var(--radius-xs); background: var(--art-bg); filter: var(--art-fx); }
.scene span { display: block; margin-top: 6px; color: var(--text-3); }
.scene:hover { border-color: var(--border-strong); }
.scene.on { border-color: var(--primary); background: var(--primary-soft); }
.scene.on span { color: var(--primary-active); }
.nlist { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--border); }
.nlist > li { border-bottom: 1px solid var(--border); }
.n-row {
    display: flex; gap: 10px; align-items: baseline; width: 100%;
    padding: 9px 4px; border: 0; border-radius: var(--radius-xs); background: none;
    box-shadow: none; text-align: left; color: var(--text); font-size: var(--fs-cap);
}
.n-row:hover { background: var(--bg-2); }
.n-row b { color: var(--primary-active); font-weight: 600; font-size: var(--fs-sm); min-width: 4.6em; }
.n-row span { color: var(--text-3); font-size: var(--fs-sm); }
.n-hint {
    margin-left: auto; font-style: normal; font-size: var(--fs-xs); color: var(--text-3);
    border-bottom: 1px dashed var(--border-strong);
}
.nlist li.opened .n-hint { border-bottom: 0; }
.n-body {
    margin: 0; padding: 12px 14px; border-left: 2px solid var(--primary-soft);
    border-radius: var(--radius-xs); background: var(--surface-2);
    font-size: var(--fs-cap); line-height: 1.75;
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;
}
.n-name { margin: 0; color: var(--text); font-weight: 600; }
.n-note { margin: 4px 0 0; color: var(--text-2); }
.n-act { margin: 8px 0 12px; text-align: right; }
.n-act .btn { margin-left: 8px; }
@media (max-width: 480px) {
    .n-row { flex-wrap: wrap; }
    .n-hint { margin-left: 0; }
    .scene { flex-basis: calc(50% - 5px); }
}

/* ============================================================
   8. 页脚
   ============================================================ */
.foot { border-top: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); margin-top: 32px; }
.foot .wrap { padding-top: 28px; padding-bottom: 28px; }
.foot-top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-links a { color: var(--text-2); }
.foot-links a:hover { color: var(--primary); }
.foot-links-wrap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.flabel { font-size: var(--fs-cap); font-weight: 600; letter-spacing: .08em; color: var(--text-3); margin: 0; white-space: nowrap; }
.src { border-top: 1px solid var(--border); padding-top: 18px; }
.src h4 { font-size: var(--fs-cap); color: var(--text); margin-bottom: 8px; }
.src ol { padding-left: 20px; margin: 0; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.7; }
.copy { margin: 18px 0 0; color: var(--text-3); font-size: var(--fs-sm); }
.foot-org { display: flex; flex-direction: column; gap: 2px; margin: 16px 0 0; font-size: var(--fs-sm); color: var(--text-2); }

/* 服务协议 / 隐私政策：窄栏、长文，不用侧栏和底部导航。 */
.is-legal .topbar-inner { max-width: 760px; }
.is-legal .topbar .brand { display: flex; }
.legal { padding: 32px clamp(20px, 5vw, 40px); }
.legal .card-title { font-size: var(--fs-2xl); }
.legal-intro { color: var(--text-2); line-height: 1.9; margin: 14px 0 8px; }
.legal-sec { margin-top: 28px; }
.legal-sec h2 { font-size: var(--fs-lg); margin-bottom: 10px; }
.legal-sec p { margin: 8px 0; line-height: 1.9; }
.legal-sec .rule-list { margin-top: 8px; }
.legal-sec .rule-list li { margin: 6px 0; }
.legal-meta {
    margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--border);
    color: var(--text-2); font-size: var(--fs-sm); line-height: 1.9;
}
.agree {
    display: flex; align-items: flex-start; gap: 8px;
    margin: -4px 0 8px; color: var(--text-2);
    font-size: var(--fs-xs); line-height: 1.7; text-align: left;
}
.agree input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; }
.agree a { color: var(--primary); text-decoration: underline; }
/* ShowBot 的盒子由对方脚本注入，这里只管外层间距和说明文字。 */
.sb-slot { margin: 0 0 14px; }
.sb-label { display: block; font-size: var(--fs-cap); font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.sb-slot #showbot { min-height: 64px; }
.sb-note { margin: 8px 0 0; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.7; }
.sb-note a { color: var(--primary); text-decoration: underline; }
@media (max-width: 820px) {
    .legal { padding: 22px 18px; }
}

/* ============================================================
   9. 断点（480 / 820，与参考系统一致）
   ============================================================ */
@media (min-width: 821px) {
    .app-main { margin-left: var(--side-w); }
    .topbar .user-box { display: none; }
    .topbar .brand { display: none; }
}
@media (max-width: 820px) {
    .app-main { margin-left: 0; }
    .page { padding: 20px 0 84px; }
    .wrap { padding: 0 16px; }
    .topbar-inner { padding: 0 12px; height: 56px; }
    .topbar-title { display: none; }

    /* 侧栏改成抽屉：默认推到屏幕外，点汉堡才拉出来，后面压一层半透明遮罩。
       宽屏那套固定侧栏完全不受影响。 */
    .sidebar {
        display: flex; top: 56px;
        width: 280px; max-width: 84vw;
        transform: translateX(-102%);
        transition: transform 260ms cubic-bezier(.2,0,0,1);
    }
    .app-shell.nav-open .sidebar { transform: none; box-shadow: 0 12px 40px rgba(15, 23, 42, .24); }
    /* 抽屉从顶栏下面拉出来，汉堡留在最上层，开着的时候变成叉。 */
    .app-shell.nav-open .topbar { z-index: 121; }
    .nav-scrim {
        display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
        z-index: 119; background: rgba(15, 23, 42, .42);
    }
    .burger {
        display: inline-flex; flex-direction: column; justify-content: center;
        width: 36px; height: 36px; padding: 0;
        border: 1px solid var(--border); border-radius: 10px;
        background: var(--surface); color: var(--text);
    }
    .app-shell.nav-open .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .app-shell.nav-open .burger i:nth-child(2) { opacity: 0; }
    .app-shell.nav-open .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .hero { padding: 24px 20px; border-radius: var(--radius-lg); gap: 20px; }
    .hero h1 { font-size: 26px; }
    .ob-card { padding: 22px 18px; border-radius: var(--radius-lg); }
    .ob { padding-top: 16px; }
    .sec { padding: 28px 0; }
    .grid > * { flex-basis: 100%; }
    .grid-2 > *, .grid-3 > *, .grid-4 > * { flex-basis: 100%; }
    .split-l, .split-r { flex-basis: 100%; }
    .opts { gap: 6px; }
    .opt { flex-basis: calc(50% - 3px); }
    .qnav { gap: 8px; }
    .qcount { width: 100%; order: -1; text-align: center; }
    .bottom-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottom);
        justify-content: space-around; padding: 6px 8px;
        padding-bottom: calc(6px + constant(safe-area-inset-bottom));
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--surface); border-top: 1px solid var(--border);
    }
    .bottom-nav a {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 6px 4px; border-radius: var(--radius); color: var(--text-3); font-size: var(--fs-2xs);
        background: none; border: none;
    }
    .bottom-nav a.on, .bottom-nav a:hover { color: var(--primary); background: var(--primary-soft); }
    .foot .wrap { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
    .form-row .sel { margin-bottom: 16px; }
    .opt { flex-basis: 100%; }
    .hero-act .btn { flex: 1 1 auto; }
    .sub { flex-direction: column; }
    .sub input { flex-basis: auto; }
}

/* 两列并排的下拉（出生年 / 出生月） */
.sel-row .sel { float: left; width: calc(50% - 6px); }
.sel-row .sel + .sel { margin-left: 12px; }
@media (max-width: 480px) {
    .sel-row .sel { float: none; width: 100%; margin-left: 0 !important; }
}

/* ============================================================
   10. 动效（统一用 transform / opacity，别动布局）
   ============================================================ */
/* 进场：脚本先给 html 加 reveal-on，再把看得见的块标成 in。
   没有 IntersectionObserver 的浏览器根本不会加 reveal-on，内容照常显示。 */
.reveal { transition: opacity var(--dur-4) var(--ease-decelerate), transform var(--dur-4) var(--ease-decelerate); }
.reveal.setup { transition: none !important; }
html.reveal-on .reveal { opacity: 0; transform: translateY(14px); }
html.reveal-on .reveal.in { opacity: 1; transform: none; }

/* 下拉、遮罩、问答答案：出现时淡一下，不改变占位。 */
.sel-list { animation: qy-drop var(--dur-2) var(--ease-decelerate) both; }
.modal-back, .nav-scrim { animation: qy-fade var(--dur-2) var(--ease-standard) both; }
details[open] > p { animation: qy-fade var(--dur-2) var(--ease-standard) both; }
@keyframes qy-drop { from { opacity: 0; transform: translateY(-5px) scale(.985); } }
@keyframes qy-fade { from { opacity: 0; } }

/* 卡片和插图抬一下；插图再轻轻放大，鼠标移开自己回去。 */
.mod:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.comic { transition: transform var(--dur-3) var(--ease-standard), box-shadow var(--dur-3) var(--ease-standard); }
.comic:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.comic img { transition: transform var(--dur-4) var(--ease-standard); }
.comic:hover img { transform: scale(1.02); }
.hotline { transition: box-shadow var(--dur-2) var(--ease-standard); }
.hotline:hover { box-shadow: var(--shadow); }

/* 目录往右挪 2px；选项按下去缩一点，手感上是「按到了」。 */
.side-nav a:hover { transform: translateX(2px); }
.opt:active span { transform: scale(.98); }
summary { transition: background var(--dur-1) var(--ease-standard); }
summary:active { background: var(--bg-2); }

/* 管理员面板：三个数字与反馈条目 */
.admin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.admin-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.admin-stat b { display: block; font-size: var(--fs-2xl); color: var(--primary); line-height: 1.2; }
.admin-stat span { color: var(--text-2); font-size: var(--fs-sm); }
.admin-filter { display: flex; gap: 8px; margin-top: 18px; }
.admin-filter .is-on { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.fb-list { list-style: none; margin: 16px 0 0; padding: 0; }
.fb-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
    padding: 14px 16px; margin-bottom: 10px; }
.fb-item.done { opacity: .58; }
.fb-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-3); }
.fb-head b { color: var(--text); font-size: var(--fs-cap); }
.fb-head em { margin-left: auto; font-style: normal; font-size: var(--fs-xs); color: var(--text-3); }
.fb-text { margin: 10px 0 0; white-space: pre-wrap; word-break: break-word; line-height: 1.7; }
.fb-act { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ============================================================
   11. 滚动条 / 减弱动效
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

body.no-scroll { overflow: hidden; }

@media print {
    html.reveal-on .reveal { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    /* 减弱动效时不做进场：直接显示，别让内容等动画。 */
    html.reveal-on .reveal { opacity: 1; transform: none; }
}