/* =========================================================
   Medaka Survey — Player Theme
   三段式布局：顶部导航 / 中部主体 / 底部页脚
   对齐 reward.medaka-studio.top 设计系统
   ========================================================= */

/* ---------- 设计令牌：深色（默认） ---------- */
:root, .theme-dark {
    --ink-50:#f4f7fa; --ink-100:#e7ecf0; --ink-200:#d6dbe2; --ink-300:#b5bbc4;
    --ink-400:#88909a; --ink-500:#646c79; --ink-600:#454e5c; --ink-700:#2b3341;
    --ink-800:#181f2d; --ink-850:#0f1623; --ink-900:#080e1a; --ink-950:#030610; --ink-1000:#010308;
    --aqua-300:#76e2e2; --aqua-400:#2bd7d6; --aqua-500:#00c5c2; --aqua-600:#00a1a2; --aqua-700:#00797c;
    --violet-300:#d1befe; --violet-400:#bc9cfe; --violet-500:#a67bf8; --violet-600:#8a5ddf;
    --gold-400:#fac54f; --gold-500:#f0ac27;
    --green-300:#97eebc; --green-500:#24c27d;
    --amber-300:#fed48d; --amber-500:#f2a635;
    --red-300:#ffb8b5; --red-500:#ed4952;

    --canvas:#010308;
    --canvas-veil:rgba(1,3,8,.72);
    --surface:#030610;
    --surface-raised:#080e1a;
    --surface-overlay:#0f1623;
    --surface-sunken:#010205;
    --surface-translucent:rgba(15,22,35,.72);
    --surface-hover:rgba(43,215,214,.06);

    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.17);
    --grid-line:rgba(255,255,255,.045);

    --text:#f4f7fa;
    --text-muted:#b5bbc4;
    --text-subtle:#88909a;
    --text-faint:#646c79;
    --text-inverted:#010308;

    --primary:#2bd7d6;
    --primary-hover:#76e2e2;
    --primary-active:#00c5c2;
    --primary-contrast:#000b11;
    --primary-soft:rgba(43,215,214,.14);
    --primary-soft-hover:rgba(43,215,214,.22);
    --primary-ring:rgba(43,215,214,.5);
    --primary-tint:rgba(43,215,214,.30);

    --violet:#bc9cfe;
    --violet-soft:rgba(188,156,254,.16);
    --gold:#fac54f;
    --gold-soft:rgba(250,197,79,.14);

    --success:#97eebc; --success-soft:rgba(36,194,125,.16); --success-tint:rgba(151,238,188,.25);
    --warning:#fed48d; --warning-soft:rgba(242,166,53,.16);
    --danger:#ffb8b5;  --danger-strong:#ed4952; --danger-soft:rgba(237,73,82,.16); --danger-tint:rgba(237,73,82,.30);

    --gradient-brand:linear-gradient(135deg,#2bd7d6 0%,#a67bf8 100%);
    --gradient-brand-soft:linear-gradient(135deg,rgba(43,215,214,.16),rgba(166,123,248,.16));
    --gradient-aurora:
        radial-gradient(58% 55% at 12% 0%, rgba(0,197,194,.22) 0%, transparent 72%),
        radial-gradient(52% 50% at 88% 6%, rgba(166,123,248,.20) 0%, transparent 72%),
        radial-gradient(46% 46% at 62% 100%, rgba(240,172,39,.10) 0%, transparent 72%);
    --gradient-sheen:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.01) 45%, transparent 100%);

    --elevation-xs:0 1px 2px rgba(0,0,0,.4);
    --elevation-sm:0 2px 6px rgba(0,0,0,.35);
    --elevation-md:0 10px 24px -8px rgba(0,0,0,.6);
    --elevation-lg:0 24px 48px -16px rgba(0,0,0,.7);
    --glow-primary:0 0 0 1px rgba(43,215,214,.30), 0 12px 40px -12px rgba(0,197,194,.50);

    --nav-bg:rgba(3,6,16,.72);
    --announce-bg:rgba(43,215,214,.08);
    --toggle-track:rgba(255,255,255,.08);

    --radius-xs:.375rem; --radius-sm:.5rem; --radius-md:.75rem;
    --radius-lg:1rem; --radius-xl:1.375rem; --radius-full:999px;

    --font-sans:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
    --font-display:'Sora','Noto Sans SC',system-ui,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,monospace;

    --ease-out-quint:cubic-bezier(.22,1,.36,1);
    --ease-soft:cubic-bezier(.4,0,.2,1);
    --ease-spring:cubic-bezier(.34,1.46,.64,1);
    --dur-fast:.16s; --dur-normal:.24s;
}

/* ---------- 设计令牌：浅色 ---------- */
.theme-light {
    --canvas:#f7f8fa;
    --canvas-veil:rgba(247,248,250,.78);
    --surface:#ffffff;
    --surface-raised:#ffffff;
    --surface-overlay:#ffffff;
    --surface-sunken:#f0f3f7;
    --surface-translucent:rgba(255,255,255,.78);
    --surface-hover:rgba(0,161,162,.06);

    --line:rgba(3,6,16,.10);
    --line-strong:rgba(3,6,16,.20);
    --grid-line:rgba(3,6,16,.05);

    --text:#080e1a;
    --text-muted:#454e5c;
    --text-subtle:#646c79;
    --text-faint:#88909a;
    --text-inverted:#ffffff;

    --primary:#00797c;
    --primary-hover:#005356;
    --primary-active:#005356;
    --primary-contrast:#ffffff;
    --primary-soft:rgba(0,161,162,.12);
    --primary-soft-hover:rgba(0,161,162,.20);
    --primary-ring:rgba(0,121,124,.40);
    --primary-tint:rgba(0,121,124,.30);

    --violet:#653eae;
    --violet-soft:rgba(101,62,174,.10);
    --gold:#a25f12;
    --gold-soft:rgba(240,172,39,.16);

    --success:#067d4d; --success-soft:rgba(36,194,125,.12); --success-tint:rgba(6,125,77,.25);
    --warning:#a55d00; --warning-soft:rgba(242,166,53,.14);
    --danger:#be2130;  --danger-strong:#be2130; --danger-soft:rgba(237,73,82,.10); --danger-tint:rgba(190,33,48,.28);

    --gradient-brand:linear-gradient(135deg,#00a1a2 0%,#653eae 100%);
    --gradient-brand-soft:linear-gradient(135deg,rgba(0,161,162,.10),rgba(101,62,174,.10));
    --gradient-aurora:
        radial-gradient(58% 55% at 12% 0%, rgba(0,197,194,.16) 0%, transparent 72%),
        radial-gradient(52% 50% at 88% 6%, rgba(166,123,248,.12) 0%, transparent 72%),
        radial-gradient(46% 46% at 62% 100%, rgba(240,172,39,.08) 0%, transparent 72%);
    --gradient-sheen:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 45%, transparent 100%);

    --elevation-xs:0 1px 2px rgba(3,6,16,.06);
    --elevation-sm:0 2px 6px rgba(3,6,16,.07);
    --elevation-md:0 10px 24px -10px rgba(3,6,16,.16);
    --elevation-lg:0 24px 48px -20px rgba(3,6,16,.22);
    --glow-primary:0 0 0 1px rgba(0,121,124,.22), 0 14px 36px -14px rgba(0,121,124,.35);

    --nav-bg:rgba(255,255,255,.80);
    --announce-bg:rgba(0,161,162,.08);
    --toggle-track:rgba(3,6,16,.10);
}

/* ---------- 基础重置 ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
    font-family:var(--font-sans);
    font-size:.9375rem;
    line-height:1.5;
    background:var(--canvas);
    color:var(--text);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    -webkit-tap-highlight-color:transparent;
    transition:background-color var(--dur-normal) var(--ease-soft), color var(--dur-normal) var(--ease-soft);
}
a { color:inherit; text-decoration:none; }
img, svg { display:block; max-width:100%; }
button, input, select, textarea { font:inherit; color:inherit; }
::selection { background:var(--primary-soft-hover); color:var(--text); }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:var(--radius-xs); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:var(--radius-full); border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--text-faint); background-clip:content-box; }

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

.eyebrow {
    font-size:.6875rem; line-height:1rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--text-subtle); font-weight:600;
}

/* =========================================================
   顶部：公告条
   ========================================================= */
.announce-bar {
    background:var(--announce-bg);
    border-bottom:1px solid var(--line);
    position:relative; z-index:60;
}
.announce-inner {
    max-width:80rem; margin:0 auto;
    display:flex; align-items:center; gap:.625rem;
    padding:.4375rem 1.5rem;
}
.announce-dot {
    width:.4375rem; height:.4375rem; border-radius:50%;
    background:var(--primary); flex-shrink:0;
    box-shadow:0 0 0 0 var(--primary-ring);
    animation:pulseRing 2.4s var(--ease-soft) infinite;
}
@keyframes pulseRing {
    0%   { box-shadow:0 0 0 0 var(--primary-ring); }
    70%  { box-shadow:0 0 0 8px transparent; }
    100% { box-shadow:0 0 0 0 transparent; }
}
.announce-tag {
    font-size:.625rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--primary-contrast); background:var(--gradient-brand);
    padding:.125rem .5rem; border-radius:var(--radius-full); flex-shrink:0;
}
.announce-text {
    font-size:.75rem; color:var(--text-muted);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* =========================================================
   顶部：玻璃拟态 sticky 导航栏
   ========================================================= */
.site-nav {
    position:sticky; top:0; z-index:50;
    background:var(--nav-bg);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
    backdrop-filter:blur(20px) saturate(1.4);
    border-bottom:1px solid var(--line);
    transition:background-color var(--dur-normal) var(--ease-soft);
}
.nav-inner {
    max-width:80rem; margin:0 auto;
    display:flex; align-items:center; gap:1.5rem;
    padding:.75rem 1.5rem;
    min-height:3.75rem;
}
.site-nav.is-compact .nav-inner { min-height:3.25rem; padding:.5rem 1.5rem; }

.nav-brand { display:flex; align-items:center; gap:.625rem; flex-shrink:0; }
.brand-mark { border-radius:.5625rem; box-shadow:var(--elevation-sm); }
.nav-brand-text { display:flex; flex-direction:column; line-height:1.1; }
.nav-brand-text strong {
    font-family:var(--font-display); font-size:.9375rem; font-weight:700;
    letter-spacing:-.02em; color:var(--text);
}
.nav-brand-text em {
    font-style:normal; font-size:.625rem; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase;
    background:var(--gradient-brand);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
}

.nav-links { display:flex; align-items:center; gap:.25rem; margin-left:.5rem; }
.nav-link {
    position:relative; padding:.4375rem .75rem; border-radius:var(--radius-sm);
    font-size:.8125rem; font-weight:500; color:var(--text-subtle);
    transition:color var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft);
}
.nav-link:hover { color:var(--text); background:var(--surface-hover); }
.nav-link.is-active { color:var(--text); }
.nav-link.is-active::after {
    content:""; position:absolute; left:.75rem; right:.75rem; bottom:.125rem;
    height:2px; border-radius:var(--radius-full); background:var(--gradient-brand);
}

.nav-controls { display:flex; align-items:center; gap:.625rem; margin-left:auto; }
.nav-admin {
    display:inline-flex; align-items:center; gap:.375rem;
    padding:.4375rem .875rem; border-radius:var(--radius-sm);
    border:1px solid var(--line); background:var(--surface-overlay);
    font-size:.75rem; font-weight:600; color:var(--text-muted);
    transition:all var(--dur-fast) var(--ease-soft);
}
.nav-admin:hover { color:var(--primary); border-color:var(--primary-tint); background:var(--primary-soft); }

.nav-burger {
    display:none; flex-direction:column; justify-content:center; gap:4px;
    width:2.25rem; height:2.25rem; padding:0;
    border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--surface-overlay); cursor:pointer;
}
.nav-burger span {
    display:block; width:14px; height:1.5px; margin:0 auto;
    background:var(--text-muted); border-radius:var(--radius-full);
    transition:transform var(--dur-normal) var(--ease-out-quint), opacity var(--dur-fast);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }

.nav-mobile {
    display:none; flex-direction:column; gap:.125rem;
    padding:.5rem 1rem .875rem;
    border-top:1px solid var(--line);
    background:var(--nav-bg);
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
}
.nav-mobile.is-open { display:flex; }
.nav-mobile .nav-link { padding:.625rem .75rem; }

/* =========================================================
   顶部：主题切换开关（风格化组件）
   ========================================================= */
.theme-toggle {
    position:relative; flex-shrink:0;
    width:3.25rem; height:1.75rem;
    border:1px solid var(--line); border-radius:var(--radius-full);
    background:var(--toggle-track);
    cursor:pointer; overflow:hidden;
    transition:border-color var(--dur-normal) var(--ease-soft),
               background-color var(--dur-normal) var(--ease-soft),
               box-shadow var(--dur-normal) var(--ease-soft);
}
.theme-toggle:hover { border-color:var(--primary-tint); box-shadow:0 0 0 3px var(--primary-soft); }
.theme-toggle:active { transform:scale(.96); }

.tt-track {
    position:absolute; inset:0; border-radius:inherit;
    background:var(--gradient-brand-soft);
    opacity:0; transition:opacity var(--dur-normal) var(--ease-soft);
}
.theme-toggle:hover .tt-track { opacity:1; }

.tt-thumb {
    position:absolute; top:50%; left:.1875rem;
    width:1.25rem; height:1.25rem; border-radius:50%;
    transform:translateY(-50%);
    background:var(--gradient-brand);
    box-shadow:0 2px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.12) inset;
    transition:left .34s var(--ease-out-quint), box-shadow var(--dur-normal) var(--ease-soft);
    z-index:2;
}
.theme-light .tt-thumb {
    left:calc(100% - 1.4375rem);
    box-shadow:0 2px 8px rgba(0,121,124,.35), 0 0 0 1px rgba(255,255,255,.35) inset;
}
.theme-toggle:hover .tt-thumb { box-shadow:0 2px 12px var(--primary-ring), 0 0 0 1px rgba(255,255,255,.18) inset; }

.tt-icon {
    position:absolute; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center;
    width:1.25rem; height:1.25rem; pointer-events:none; z-index:1;
    transition:opacity var(--dur-normal) var(--ease-soft), transform .34s var(--ease-out-quint);
}
.tt-moon { left:.1875rem; color:var(--primary-contrast); opacity:0; transform:translateY(-50%) rotate(-90deg) scale(.6); }
.tt-sun  { right:.1875rem; color:var(--gold); opacity:.55; }

.theme-dark .tt-moon { opacity:1; transform:translateY(-50%) rotate(0) scale(1); }
.theme-dark .tt-sun  { opacity:.4; }
.theme-light .tt-moon { opacity:0; transform:translateY(-50%) rotate(90deg) scale(.6); }
.theme-light .tt-sun  { opacity:1; transform:translateY(-50%) rotate(0) scale(1); color:var(--primary-contrast); }

/* =========================================================
   顶部：语言分段控件（风格化组件）
   ========================================================= */
.lang-seg {
    display:inline-flex; align-items:center; gap:.125rem;
    padding:.1875rem;
    background:var(--toggle-track);
    border:1px solid var(--line);
    border-radius:var(--radius-full);
    flex-shrink:0;
    transition:border-color var(--dur-normal) var(--ease-soft);
}
.lang-seg:hover { border-color:var(--line-strong); }
.ls-btn {
    display:inline-flex; align-items:center; gap:.25rem;
    padding:.25rem .625rem;
    border:none; border-radius:var(--radius-full);
    background:transparent; cursor:pointer;
    font-size:.6875rem; font-weight:600; letter-spacing:.02em;
    color:var(--text-faint);
    transition:color var(--dur-fast) var(--ease-soft),
               background-color var(--dur-fast) var(--ease-soft),
               box-shadow var(--dur-fast) var(--ease-soft);
}
.ls-btn:hover { color:var(--text-muted); background:var(--surface-hover); }
.ls-btn.active {
    color:var(--primary-contrast);
    background:var(--gradient-brand);
    box-shadow:0 1px 6px var(--primary-ring);
}
.ls-flag { display:flex; align-items:center; opacity:.9; }
.ls-label { line-height:1; }

/* =========================================================
   中部：Hero 区
   ========================================================= */
.page-hero {
    position:relative; overflow:hidden;
    padding:4.5rem 1.5rem 3.5rem;
    text-align:center;
    border-bottom:1px solid var(--line);
}
.page-hero.is-compact { padding:2.75rem 1.5rem 2rem; }
.hero-aurora { position:absolute; inset:0; background:var(--gradient-aurora); pointer-events:none; }
.hero-grid {
    position:absolute; inset:0; pointer-events:none; opacity:.55;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
    mask-image:radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
}
.hero-inner { position:relative; z-index:1; max-width:48rem; margin:0 auto; }
.hero-title {
    font-family:var(--font-display);
    font-size:3.25rem; font-weight:700;
    letter-spacing:-.035em; line-height:1.12;
    margin:.625rem 0 .875rem;
    background:var(--gradient-brand);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
}
.page-hero.is-compact .hero-title { font-size:1.75rem; letter-spacing:-.02em; margin:.375rem 0 .5rem; }
.hero-sub {
    font-size:1.0625rem; line-height:1.625; color:var(--text-muted);
    max-width:34rem; margin:0 auto;
}
.page-hero.is-compact .hero-sub { font-size:.875rem; }

/* =========================================================
   中部：主体内容
   ========================================================= */
.page-main { max-width:80rem; margin:0 auto; padding:2.5rem 1.5rem 4rem; }
.page-main.narrow { max-width:48rem; }

/* 数据概览行 */
.stat-row {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
    gap:1px; background:var(--line);
    border:1px solid var(--line); border-radius:var(--radius-lg);
    overflow:hidden; margin-bottom:2.5rem;
}
.stat-cell { background:var(--surface); padding:1.25rem 1rem; text-align:center; position:relative; }
.stat-cell::after { content:""; position:absolute; inset:0; background:var(--gradient-sheen); pointer-events:none; }
.stat-value {
    font-family:var(--font-display); font-size:1.9375rem; font-weight:800;
    letter-spacing:-.03em; line-height:1;
    background:var(--gradient-brand);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
}
.stat-name {
    margin-top:.5rem; font-size:.6875rem; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle);
}

/* 区块标题 */
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.section-head h2 { font-family:var(--font-display); font-size:1.25rem; font-weight:600; letter-spacing:-.015em; }
.section-head .eyebrow { margin-bottom:.25rem; }

/* 问卷卡片 */
.survey-list { display:flex; flex-direction:column; gap:1rem; }
.survey-card {
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius-lg); padding:1.5rem;
    position:relative; overflow:hidden;
    transition:border-color var(--dur-normal) var(--ease-soft),
               transform var(--dur-normal) var(--ease-out-quint),
               box-shadow var(--dur-normal) var(--ease-soft);
}
.survey-card::after { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--gradient-sheen); pointer-events:none; }
.survey-card::before {
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--gradient-brand); opacity:0;
    transition:opacity var(--dur-normal) var(--ease-soft);
}
.survey-card:hover { border-color:var(--primary-tint); transform:translateY(-2px); box-shadow:var(--glow-primary); }
.survey-card:hover::before { opacity:1; }
.survey-card.submitted { opacity:.62; }
.survey-card.submitted:hover { transform:none; }

.survey-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; margin-bottom:.75rem; }
.survey-card-header h3 {
    font-family:var(--font-display); font-size:1.0625rem; font-weight:600;
    letter-spacing:-.015em; line-height:1.45;
}
.deadline-tag {
    display:inline-flex; align-items:center; gap:.25rem;
    background:var(--danger-soft); color:var(--danger);
    border:1px solid var(--danger-tint);
    padding:.1875rem .625rem; border-radius:var(--radius-full);
    font-size:.625rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    white-space:nowrap; flex-shrink:0;
}
.survey-desc { font-size:.8125rem; color:var(--text-muted); line-height:1.7; margin-bottom:1rem; }
.survey-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem; }
.meta-chip {
    display:inline-flex; align-items:center; gap:.3125rem;
    font-size:.75rem; color:var(--text-subtle);
    background:var(--surface-overlay); border:1px solid var(--line);
    padding:.25rem .625rem; border-radius:var(--radius-full);
}
.submitted-notice {
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    background:var(--success-soft); border:1px solid var(--success-tint);
    padding:.875rem; border-radius:var(--radius-md);
    color:var(--success); font-size:.8125rem; font-weight:500;
}
.btn-fill {
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    width:100%; padding:.875rem;
    background:var(--gradient-brand); color:var(--primary-contrast);
    border:none; border-radius:var(--radius-md);
    font-size:.9375rem; font-weight:600; letter-spacing:-.01em;
    cursor:pointer; position:relative; overflow:hidden;
    transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-normal) var(--ease-soft);
}
.btn-fill::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
    transform:translateX(-100%);
    transition:transform .6s var(--ease-out-quint);
}
.btn-fill:hover { transform:translateY(-1px); box-shadow:var(--glow-primary); }
.btn-fill:hover::after { transform:translateX(100%); }
.btn-fill:active { transform:translateY(0) scale(.99); }

/* 空状态 */
.empty-surveys { text-align:center; padding:4.5rem 1.25rem; }
.empty-icon {
    width:4.5rem; height:4.5rem; margin:0 auto 1.5rem;
    display:flex; align-items:center; justify-content:center;
    font-size:2rem; border-radius:var(--radius-lg);
    background:var(--gradient-brand-soft); border:1px solid var(--line);
}
.empty-surveys h2 { font-family:var(--font-display); font-size:1.25rem; font-weight:600; margin-bottom:.625rem; }
.empty-surveys p { color:var(--text-subtle); font-size:.875rem; max-width:24rem; margin:0 auto; line-height:1.625; }

/* =========================================================
   中部：问卷作答
   ========================================================= */
.progress-wrap { margin-bottom:1.75rem; }
.progress-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.625rem; }
.progress-pct { font-family:var(--font-mono); font-size:.75rem; font-weight:700; color:var(--primary); }
.progress-bar { height:4px; background:var(--surface-sunken); border:1px solid var(--line); border-radius:var(--radius-full); overflow:hidden; }
.theme-light .progress-bar { background:rgba(3,6,16,.07); }
.progress-fill {
    height:100%; width:0%;
    background:var(--gradient-brand);
    border-radius:var(--radius-full);
    box-shadow:0 0 12px var(--primary-ring);
    transition:width .45s var(--ease-out-quint);
}
.progress-text { text-align:center; margin-top:.625rem; font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); }

.question-area { min-height:14rem; }
.page-slide { animation:riseIn .38s var(--ease-out-quint) both; }
@keyframes riseIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }

.question-card {
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius-lg); padding:1.75rem 1.5rem;
    margin-bottom:1rem; position:relative; overflow:hidden;
    transition:border-color var(--dur-normal) var(--ease-soft), box-shadow var(--dur-normal) var(--ease-soft);
}
.question-card::after { content:""; position:absolute; inset:0; background:var(--gradient-sheen); pointer-events:none; }
.question-card:hover { border-color:var(--line-strong); }
.question-card.is-invalid { border-color:var(--danger-tint); animation:shake .4s var(--ease-soft); }

.q-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.625rem; flex-wrap:wrap; }
.q-num {
    font-family:var(--font-mono); font-size:.6875rem; font-weight:700;
    color:var(--primary); background:var(--primary-soft);
    padding:.125rem .5rem; border-radius:var(--radius-full);
    letter-spacing:.04em;
}
.q-type {
    font-size:.625rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-faint);
}
.q-required { font-size:.625rem; font-weight:700; color:var(--danger); letter-spacing:.06em; text-transform:uppercase; }
.question-title {
    font-family:var(--font-display); font-size:1.0625rem; font-weight:600;
    letter-spacing:-.015em; line-height:1.55; margin-bottom:1.25rem;
    position:relative; z-index:1;
}
.question-required { color:var(--danger-strong); margin-left:.25rem; }

/* 选项 */
.options-list { display:flex; flex-direction:column; gap:.625rem; position:relative; z-index:1; }
.option-item {
    display:flex; align-items:center; gap:.75rem;
    padding:.875rem 1rem;
    background:var(--surface-overlay); border:1px solid var(--line);
    border-radius:var(--radius-md); cursor:pointer;
    transition:border-color var(--dur-fast) var(--ease-soft),
               background-color var(--dur-fast) var(--ease-soft),
               box-shadow var(--dur-fast) var(--ease-soft),
               transform var(--dur-fast) var(--ease-spring);
}
.option-item:hover { border-color:var(--primary-tint); background:var(--surface-hover); transform:translateX(2px); }
.option-item.selected { border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 1px var(--primary-ring); }
.option-radio, .option-checkbox {
    width:1.25rem; height:1.25rem; flex-shrink:0;
    border:2px solid var(--line-strong); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:border-color var(--dur-fast), background-color var(--dur-fast);
}
.option-checkbox { border-radius:var(--radius-xs); }
.option-item.selected .option-radio,
.option-item.selected .option-checkbox { border-color:var(--primary); background:var(--primary); }
.option-item.selected .option-radio::after { content:""; width:.4375rem; height:.4375rem; border-radius:50%; background:var(--primary-contrast); }
.option-item.selected .option-checkbox::after {
    content:""; width:.3125rem; height:.5625rem;
    border:2px solid var(--primary-contrast); border-top:none; border-left:none;
    transform:rotate(45deg); margin-top:-.125rem;
}
.option-label { font-size:.9375rem; line-height:1.5; }

/* Likert 量表 */
.likert-group { position:relative; z-index:1; }
.likert-scale-labels { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.625rem; font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.likert-scale { display:flex; align-items:center; gap:.375rem; }
.likert-btn {
    flex-shrink:0; width:2.75rem; height:2.75rem;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-overlay); border:1px solid var(--line);
    border-radius:var(--radius-sm);
    font-family:var(--font-mono); font-size:.875rem; font-weight:700; color:var(--text-subtle);
    cursor:pointer;
    transition:all var(--dur-fast) var(--ease-spring);
}
.likert-btn:hover { border-color:var(--primary-tint); background:var(--surface-hover); color:var(--primary); transform:translateY(-2px); }
.likert-btn.active { border-color:var(--primary); background:var(--gradient-brand); color:var(--primary-contrast); box-shadow:0 0 0 1px var(--primary-ring), 0 4px 14px -4px var(--primary-ring); transform:translateY(-2px); }
.likert-line { flex:1; height:2px; background:var(--line); border-radius:var(--radius-full); min-width:.5rem; }

/* 评分 */
.rating-input { display:flex; flex-wrap:wrap; gap:.5rem; position:relative; z-index:1; }
.rating-star {
    width:2.75rem; height:2.75rem;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-overlay); border:1px solid var(--line); border-radius:var(--radius-sm);
    font-family:var(--font-mono); font-size:1rem; font-weight:700; color:var(--text-subtle);
    cursor:pointer; transition:all var(--dur-fast) var(--ease-spring);
}
.rating-star:hover { border-color:var(--primary-tint); background:var(--surface-hover); color:var(--primary); transform:scale(1.08); }
.rating-star.active { border-color:var(--primary); background:var(--primary); color:var(--primary-contrast); box-shadow:0 0 0 1px var(--primary-ring); }
.rating-labels { display:flex; justify-content:space-between; width:100%; margin-top:.5rem; font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }

/* 文本输入 */
.text-input {
    width:100%; min-height:8rem; padding:.875rem 1rem;
    background:var(--surface-overlay); border:1px solid var(--line);
    border-radius:var(--radius-md); color:var(--text);
    font-size:.9375rem; line-height:1.7; font-family:var(--font-sans);
    resize:vertical; outline:none; position:relative; z-index:1;
    transition:border-color var(--dur-normal) var(--ease-soft), box-shadow var(--dur-normal) var(--ease-soft);
}
.text-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.text-input::placeholder { color:var(--text-faint); }

/* 导航按钮 */
.nav-buttons { display:flex; gap:.75rem; margin-top:1.75rem; }
.btn-nav {
    flex:1; padding:.875rem; border-radius:var(--radius-md);
    font-size:.9375rem; font-weight:600; letter-spacing:-.01em;
    cursor:pointer; border:1px solid transparent;
    transition:all var(--dur-fast) var(--ease-soft);
}
.btn-prev { background:var(--surface-overlay); color:var(--text-muted); border-color:var(--line); }
.btn-prev:hover { color:var(--text); border-color:var(--line-strong); background:var(--surface-raised); }
.btn-next, .btn-submit { background:var(--gradient-brand); color:var(--primary-contrast); }
.btn-next:hover, .btn-submit:hover { box-shadow:var(--glow-primary); transform:translateY(-1px); }
.btn-submit { background:linear-gradient(135deg, var(--aqua-500), var(--violet-500)); }
.btn-nav:disabled { opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* 加载 & 结果 */
.loading-spinner { text-align:center; padding:4rem 1rem; }
.spinner {
    width:2.5rem; height:2.5rem; margin:0 auto 1.25rem;
    border:3px solid var(--line); border-top-color:var(--primary);
    border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.loading-spinner p { color:var(--text-subtle); font-size:.8125rem; }

.result-card {
    text-align:center; padding:4rem 1.5rem;
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius-lg); position:relative; overflow:hidden;
}
.result-card::after { content:""; position:absolute; inset:0; background:var(--gradient-sheen); pointer-events:none; }
.result-icon {
    width:4.5rem; height:4.5rem; margin:0 auto 1.5rem;
    display:flex; align-items:center; justify-content:center;
    font-size:2rem; border-radius:var(--radius-lg);
    background:var(--gradient-brand-soft); border:1px solid var(--line);
    position:relative; z-index:1;
}
.result-card h2 { font-family:var(--font-display); font-size:1.375rem; font-weight:600; letter-spacing:-.02em; margin-bottom:.625rem; position:relative; z-index:1; }
.result-card p { color:var(--text-subtle); font-size:.875rem; line-height:1.625; position:relative; z-index:1; }
.result-card .btn-fill { display:inline-flex; width:auto; min-width:16rem; margin-top:1.75rem; position:relative; z-index:1; }
.success-anim { animation:successPop .5s var(--ease-spring); }
@keyframes successPop { 0%{transform:scale(.9);opacity:0} 55%{transform:scale(1.03)} 100%{transform:scale(1);opacity:1} }

/* =========================================================
   底部：页脚
   ========================================================= */
.site-footer { border-top:1px solid var(--line); background:var(--surface); margin-top:auto; }
.footer-inner {
    max-width:80rem; margin:0 auto;
    display:grid; grid-template-columns:minmax(15rem,1.2fr) 2.4fr;
    gap:2.5rem; padding:3rem 1.5rem 2.25rem;
}
.footer-brand .nav-brand { margin-bottom:.875rem; }
.footer-tagline { font-size:.8125rem; color:var(--text-subtle); line-height:1.625; max-width:18rem; }
.footer-cols { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; }
.footer-col h3 {
    font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--text); margin-bottom:.875rem;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer-col a {
    font-size:.8125rem; color:var(--text-subtle);
    transition:color var(--dur-fast) var(--ease-soft);
}
.footer-col a:hover { color:var(--primary); }
.footer-bottom {
    max-width:80rem; margin:0 auto;
    display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
    padding:1.125rem 1.5rem; border-top:1px solid var(--line);
    font-size:.75rem; color:var(--text-faint);
}
.footer-sep { width:3px; height:3px; border-radius:50%; background:var(--line-strong); }

/* =========================================================
   页面骨架
   ========================================================= */
.player-shell { display:flex; flex-direction:column; min-height:100vh; }

/* =========================================================
   响应式
   ========================================================= */
@media (max-width:64rem) {
    .footer-inner { grid-template-columns:1fr; gap:2rem; }
    .footer-cols { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem; }
}
@media (max-width:52rem) {
    .nav-links, .nav-admin { display:none; }
    .nav-burger { display:flex; margin-left:.5rem; }
    .nav-controls { gap:.5rem; }
    .hero-title { font-size:2.25rem; }
    .page-hero { padding:3rem 1rem 2.5rem; }
    .page-main { padding:2rem 1rem 3rem; }
    .announce-inner { padding:.4375rem 1rem; }
    .nav-inner { padding:.625rem 1rem; gap:.75rem; }
}
@media (max-width:40rem) {
    .hero-title { font-size:1.875rem; letter-spacing:-.025em; }
    .hero-sub { font-size:.9375rem; }
    .page-hero.is-compact { padding:2rem 1rem 1.5rem; }
    .page-hero.is-compact .hero-title { font-size:1.375rem; }
    .question-card { padding:1.25rem 1rem; }
    .question-title { font-size:.9375rem; }
    .stat-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .stat-value { font-size:1.5rem; }
    .likert-btn, .rating-star { width:2.375rem; height:2.375rem; font-size:.8125rem; }
    .likert-scale { gap:.25rem; }
    .nav-controls .ls-label { display:none; }
    .ls-btn { padding:.3125rem .5rem; }
    .footer-cols { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .nav-buttons { flex-direction:column-reverse; }
}