/* ============================================
   青祁问卷 — 设计系统 v13.0「现代柔和」
   亮色 / 暗色双套令牌
   ============================================ */

:root {
  color-scheme: light;

  /* ---------- 主色：墨青 ---------- */
  --primary: #0F766E;
  --primary-light: #14B8A6;
  --primary-dark: #115E59;
  --primary-deep: #0B4F4A;
  --primary-glow: rgba(15, 118, 110, 0.28);
  --primary-glow-strong: rgba(15, 118, 110, 0.48);
  --primary-soft: #E4F1EF;
  --primary-softer: #F1F8F7;
  --primary-ink: #0A3F3B;

  /* ---------- 强调色：琥珀金 ---------- */
  --accent: #B45C08;
  --accent-light: #F59E0B;
  --accent-dark: #92400E;
  --accent-glow: rgba(217, 119, 6, 0.28);
  --accent-soft: #FDF1DF;
  --accent-softer: #FEF8EE;

  /* ---------- 辅助色 ---------- */
  --cyan: var(--info);
  --cyan-glow: rgba(14, 116, 144, 0.24);
  --amber: #B45309;
  --amber-glow: rgba(180, 83, 9, 0.24);
  --teal: #0E7490;
  --teal-soft: #E0F2FE;

  /* ---------- 功能色 ---------- */
  --success: #0F8A5F;
  --success-bg: #E7F6EF;
  --success-border: #A9DFC7;
  --success-soft: #F2FBF7;

  --error: #C62F2F;
  --error-bg: #FCEDED;
  --error-border: #F3B9B9;
  --error-soft: #FEF6F6;

  --warning: #B45309;
  --warning-bg: #FDF3E3;
  --warning-border: #F0D09A;
  --warning-soft: #FEFAF3;

  --info: #38BDF8;
  --info-bg: #E6F4F8;
  --info-border: #A8D8E5;
  --info-a1: rgba(14, 116, 144, 0.10);
  --info-a2: rgba(14, 116, 144, 0.18);

  /* ---------- 答题页专用玻璃层 ---------- */
  --answer-glass: rgba(255, 253, 249, 0.78);
  --answer-glass-strong: rgba(255, 253, 249, 0.92);
  --answer-paper: rgba(255, 253, 249, 0.96);
  --pending-veil: rgba(253, 241, 223, 0.90);
  /* ---------- 页面底色 ---------- */
  --bg: #F6F4EF;
  --bg-tint-a: rgba(15, 118, 110, 0.10);
  --bg-tint-b: rgba(217, 119, 6, 0.07);
  --bg-tint-c: rgba(14, 116, 144, 0.06);
  --bg-tint-d: rgba(15, 118, 110, 0.05);
  --particle-a: rgba(15, 118, 110, 0.42);
  --particle-b: rgba(217, 119, 6, 0.38);
  --particle-c: rgba(14, 116, 144, 0.34);

  /* ---------- 表面 ---------- */
  --surface: #FFFDF9;
  --surface-alt: #F3F1EA;
  --surface-sunken: #EFEDE4;
  --surface-hover: #EDF5F3;
  --surface-active: #E3EFEC;
  --surface-inverse: #12201F;
  --surface-glass: rgba(255, 253, 249, 0.78);
  --surface-glass-strong: rgba(255, 253, 249, 0.92);
  --surface-scrim: rgba(28, 26, 22, 0.42);
  --overlay-veil: rgba(246, 244, 239, 0.72);

  /* ---------- 文字 ---------- */
  --text: #1A2422;
  --text-secondary: #5C6664;
  --text-tertiary: #8A9391;
  --text-disabled: #B4BBB9;
  --text-inverse: #FBF9F4;

  /* ---------- 半透明色阶（供分隔线/浅底统一调用） ---------- */
  --tint-1: rgba(15, 118, 110, 0.04);
  --tint-2: rgba(15, 118, 110, 0.09);
  --tint-3: rgba(15, 118, 110, 0.14);
  --tint-4: rgba(15, 118, 110, 0.20);
  --tint-5: rgba(15, 118, 110, 0.30);
  --on-primary-a30: rgba(255, 255, 255, 0.30);
  --on-primary-a40: rgba(255, 255, 255, 0.40);
  --on-primary-a50: rgba(255, 255, 255, 0.50);
  --on-primary-a60: rgba(255, 255, 255, 0.60);
  --on-primary-a88: rgba(255, 255, 255, 0.88);
  --on-primary-a100: rgba(255, 255, 255, 1);

  /* ---------- 功能色深浅阶 ---------- */
  --success-dark: #047857;
  --success-ink: #065F46;
  --success-a1: rgba(15, 138, 95, 0.08);
  --success-a2: rgba(15, 138, 95, 0.14);
  --success-a3: rgba(15, 138, 95, 0.30);
  --error-dark: #B91C1C;
  --error-ink: #991B1B;
  --error-a1: rgba(198, 47, 47, 0.09);
  --error-a2: rgba(198, 47, 47, 0.13);
  --error-a3: rgba(198, 47, 47, 0.32);
  --warning-dark: #92400E;
  --warning-a1: rgba(180, 83, 9, 0.09);
  --warning-a2: rgba(180, 83, 9, 0.14);
  --teal-deep: #155E75;
  --teal-a1: rgba(14, 116, 144, 0.10);
  --accent-a1: rgba(217, 119, 6, 0.08);
  --accent-a2: rgba(217, 119, 6, 0.14);

  /* ---------- 彩色底上的前景色 ---------- */
  --on-primary: #FFFFFF;
  --on-accent: #FFFFFF;
  --on-success: #FFFFFF;
  --on-error: #FFFFFF;
  --on-teal: #FFFFFF;

  /* ---------- 中性透明 ---------- */
  --black-a06: rgba(0, 0, 0, 0.06);
  --black-a08: rgba(0, 0, 0, 0.08);
  --black-a10: rgba(0, 0, 0, 0.10);
  --black-a40: rgba(0, 0, 0, 0.40);
  --black-a60: rgba(0, 0, 0, 0.60);

  /* ---------- 边框 ---------- */
  --border: #DFDBD0;
  --border-light: #EAE6DC;
  --border-strong: #CBC5B7;
  --border-focus: #14B8A6;

  /* ---------- 圆角：收紧，走印刷品质感 ---------- */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-full: 9999px;

  /* ---------- 线宽 ---------- */
  --bw-hairline: 1px;
  --bw-thick: 2px;

  /* ---------- 阴影：变浅、去发光 ---------- */
  --shadow-sm: 0 1px 2px rgba(38, 34, 26, 0.05);
  --shadow-md: 0 2px 8px rgba(38, 34, 26, 0.06), 0 1px 2px rgba(38, 34, 26, 0.04);
  --shadow-lg: 0 8px 24px rgba(38, 34, 26, 0.08), 0 2px 6px rgba(38, 34, 26, 0.04);
  --shadow-xl: 0 18px 40px rgba(38, 34, 26, 0.10), 0 6px 14px rgba(38, 34, 26, 0.05);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-glow: 0 0 0 3px var(--primary-glow);
  --shadow-glow-accent: 0 0 0 3px var(--accent-glow);

  /* ---------- 柔和阴影（v13）：带墨青色相，更轻更现代 ---------- */
  --shadow-soft: 0 2px 10px rgba(15, 118, 110, 0.06), 0 1px 3px rgba(38, 34, 26, 0.04);
  --shadow-soft-md: 0 6px 20px rgba(15, 118, 110, 0.08), 0 2px 6px rgba(38, 34, 26, 0.05);
  --shadow-soft-lg: 0 14px 34px rgba(15, 118, 110, 0.10), 0 4px 10px rgba(38, 34, 26, 0.05);
  --shadow-soft-xl: 0 24px 56px rgba(15, 118, 110, 0.12), 0 8px 18px rgba(38, 34, 26, 0.06);
  --primary-glow-soft: rgba(15, 118, 110, 0.16);

  /* ---------- 过渡 ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --duration-slow: 360ms;
  --duration-slower: 560ms;

  /* ---------- 间距 ---------- */
  --space: 4px;

  /* ---------- 主题按钮 ---------- */
  --theme-toggle-size: 36px;
}

/* ============================================
   暗色：显式指定 [data-theme="dark"]
   ============================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --primary: #2DD4BF;
  --primary-light: #5EEAD4;
  --primary-dark: #14B8A6;
  --primary-deep: #0D9488;
  --primary-glow: rgba(45, 212, 191, 0.26);
  --primary-glow-strong: rgba(45, 212, 191, 0.44);
  --primary-soft: #10312F;
  --primary-softer: #0C2322;
  --primary-ink: #CFEDE8;

  --accent: #F0A030;
  --accent-light: #FBBF24;
  --accent-dark: #D97706;
  --accent-glow: rgba(240, 160, 48, 0.26);
  --accent-soft: #33240E;
  --accent-softer: #221A0B;

  --cyan: #38BDF8;
  --cyan-glow: rgba(56, 189, 248, 0.22);
  --amber: #FBBF24;
  --amber-glow: rgba(251, 191, 36, 0.22);
  --teal: #38BDF8;
  --teal-soft: #0C2430;

  --success: #34D399;
  --success-bg: #0D2A22;
  --success-border: #1D5B47;
  --success-soft: #0A211B;

  --error: #F87171;
  --error-bg: #2E1414;
  --error-border: #6B2626;
  --error-soft: #200F0F;

  --warning: #FBBF24;
  --warning-bg: #2C2010;
  --warning-border: #6B4E17;
  --warning-soft: #1F1710;

  --info: #38BDF8;
  --info-bg: #0C2430;
  --info-border: #1B4C63;
  --info-a1: rgba(56, 189, 248, 0.14);
  --info-a2: rgba(56, 189, 248, 0.22);

  --bg: #0B1414;
  --bg-tint-a: rgba(45, 212, 191, 0.09);
  --bg-tint-b: rgba(240, 160, 48, 0.05);
  --bg-tint-c: rgba(56, 189, 248, 0.05);
  --bg-tint-d: rgba(45, 212, 191, 0.04);
  --particle-a: rgba(45, 212, 191, 0.34);
  --particle-b: rgba(240, 160, 48, 0.28);
  --particle-c: rgba(56, 189, 248, 0.26);

  --surface: #111D1C;
  --surface-alt: #162423;
  --surface-sunken: #0D1817;
  --surface-hover: #1A2B29;
  --surface-active: #213634;
  --surface-inverse: #E8E4DA;
  --surface-glass: rgba(17, 29, 28, 0.80);
  --surface-glass-strong: rgba(17, 29, 28, 0.93);
  --surface-scrim: rgba(0, 0, 0, 0.62);
  --overlay-veil: rgba(11, 20, 20, 0.74);

  --text: #E6E9E6;
  --text-secondary: #A3AEAB;
  --text-tertiary: #74807D;
  --text-disabled: #4E5856;
  --text-inverse: #0B1414;

  /* ---------- 半透明色阶 ---------- */
  --tint-1: rgba(45, 212, 191, 0.06);
  --tint-2: rgba(45, 212, 191, 0.12);
  --tint-3: rgba(45, 212, 191, 0.18);
  --tint-4: rgba(45, 212, 191, 0.26);
  --tint-5: rgba(45, 212, 191, 0.38);
  --on-primary-a30: rgba(255, 255, 255, 0.30);
  --on-primary-a40: rgba(255, 255, 255, 0.40);
  --on-primary-a50: rgba(255, 255, 255, 0.50);
  --on-primary-a60: rgba(255, 255, 255, 0.60);
  --on-primary-a88: rgba(255, 255, 255, 0.88);
  --on-primary-a100: rgba(255, 255, 255, 1);

  /* ---------- 功能色深浅阶 ---------- */
  --success-dark: #6EE7B7;
  --success-ink: #A7F3D0;
  --success-a1: rgba(52, 211, 153, 0.14);
  --success-a2: rgba(52, 211, 153, 0.22);
  --success-a3: rgba(52, 211, 153, 0.36);
  --error-dark: #FCA5A5;
  --error-ink: #FECACA;
  --error-a1: rgba(248, 113, 113, 0.14);
  --error-a2: rgba(248, 113, 113, 0.20);
  --error-a3: rgba(248, 113, 113, 0.36);
  --warning-dark: #FCD34D;
  --warning-a1: rgba(251, 191, 36, 0.13);
  --warning-a2: rgba(251, 191, 36, 0.20);
  --teal-deep: #0EA5E9;
  --teal-a1: rgba(56, 189, 248, 0.14);
  --accent-a1: rgba(240, 160, 48, 0.12);
  --accent-a2: rgba(240, 160, 48, 0.20);

  /* ---------- 彩色底上的前景色 ---------- */
  --on-primary: #05201D;
  --on-accent: #241703;
  --on-success: #04241A;
  --on-error: #2A0D0D;
  --on-teal: #04222B;

  /* ---------- 中性透明 ---------- */
  --black-a06: rgba(0, 0, 0, 0.30);
  --black-a08: rgba(0, 0, 0, 0.38);
  --black-a10: rgba(0, 0, 0, 0.45);
  --black-a40: rgba(0, 0, 0, 0.62);
  --black-a60: rgba(0, 0, 0, 0.78);
  /* ---------- 答题页专用玻璃层 ---------- */
  --answer-glass: rgba(22, 36, 35, 0.80);
  --answer-glass-strong: rgba(22, 36, 35, 0.94);
  --answer-paper: rgba(17, 29, 28, 0.96);
  --pending-veil: rgba(51, 36, 14, 0.90);
  --border: #263634;
  --border-light: #1E2B2A;
  --border-strong: #354947;
  --border-focus: #2DD4BF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 18px 40px rgba(0, 0, 0, 0.58), 0 6px 14px rgba(0, 0, 0, 0.40);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.22);
  --shadow-soft-md: 0 6px 20px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.26);
  --shadow-soft-lg: 0 14px 34px rgba(0, 0, 0, 0.40), 0 4px 10px rgba(0, 0, 0, 0.28);
  --shadow-soft-xl: 0 24px 56px rgba(0, 0, 0, 0.48), 0 8px 18px rgba(0, 0, 0, 0.32);
  --primary-glow-soft: rgba(45, 212, 191, 0.20);
}

/* ============================================
   暗色：跟随系统（用户未手动指定时生效）
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --primary: #2DD4BF;
    --primary-light: #5EEAD4;
    --primary-dark: #14B8A6;
    --primary-deep: #0D9488;
    --primary-glow: rgba(45, 212, 191, 0.26);
    --primary-glow-strong: rgba(45, 212, 191, 0.44);
    --primary-soft: #10312F;
    --primary-softer: #0C2322;
    --primary-ink: #CFEDE8;

    --accent: #F0A030;
    --accent-light: #FBBF24;
    --accent-dark: #D97706;
    --accent-glow: rgba(240, 160, 48, 0.26);
    --accent-soft: #33240E;
    --accent-softer: #221A0B;

    --cyan: #38BDF8;
    --cyan-glow: rgba(56, 189, 248, 0.22);
    --amber: #FBBF24;
    --amber-glow: rgba(251, 191, 36, 0.22);
    --teal: #38BDF8;
    --teal-soft: #0C2430;

    --success: #34D399;
    --success-bg: #0D2A22;
    --success-border: #1D5B47;
    --success-soft: #0A211B;

    --error: #F87171;
    --error-bg: #2E1414;
    --error-border: #6B2626;
    --error-soft: #200F0F;

    --warning: #FBBF24;
    --warning-bg: #2C2010;
    --warning-border: #6B4E17;
    --warning-soft: #1F1710;

    --info: #38BDF8;
    --info-bg: #0C2430;
    --info-border: #1B4C63;
    --info-a1: rgba(56, 189, 248, 0.14);
    --info-a2: rgba(56, 189, 248, 0.22);

    --bg: #0B1414;
    --bg-tint-a: rgba(45, 212, 191, 0.09);
    --bg-tint-b: rgba(240, 160, 48, 0.05);
    --bg-tint-c: rgba(56, 189, 248, 0.05);
    --bg-tint-d: rgba(45, 212, 191, 0.04);
    --particle-a: rgba(45, 212, 191, 0.34);
    --particle-b: rgba(240, 160, 48, 0.28);
    --particle-c: rgba(56, 189, 248, 0.26);

    --surface: #111D1C;
    --surface-alt: #162423;
    --surface-sunken: #0D1817;
    --surface-hover: #1A2B29;
    --surface-active: #213634;
    --surface-inverse: #E8E4DA;
    --surface-glass: rgba(17, 29, 28, 0.80);
    --surface-glass-strong: rgba(17, 29, 28, 0.93);
    --surface-scrim: rgba(0, 0, 0, 0.62);
    --overlay-veil: rgba(11, 20, 20, 0.74);

    --text: #E6E9E6;
    --text-secondary: #A3AEAB;
    --text-tertiary: #74807D;
    --text-disabled: #4E5856;
    --text-inverse: #0B1414;

    /* ---------- 半透明色阶 ---------- */
    --tint-1: rgba(45, 212, 191, 0.06);
    --tint-2: rgba(45, 212, 191, 0.12);
    --tint-3: rgba(45, 212, 191, 0.18);
    --tint-4: rgba(45, 212, 191, 0.26);
    --tint-5: rgba(45, 212, 191, 0.38);
    --on-primary-a30: rgba(255, 255, 255, 0.30);
    --on-primary-a40: rgba(255, 255, 255, 0.40);
    --on-primary-a50: rgba(255, 255, 255, 0.50);
    --on-primary-a60: rgba(255, 255, 255, 0.60);
    --on-primary-a88: rgba(255, 255, 255, 0.88);
    --on-primary-a100: rgba(255, 255, 255, 1);

    /* ---------- 功能色深浅阶 ---------- */
    --success-dark: #6EE7B7;
    --success-ink: #A7F3D0;
    --success-a1: rgba(52, 211, 153, 0.14);
    --success-a2: rgba(52, 211, 153, 0.22);
    --success-a3: rgba(52, 211, 153, 0.36);
    --error-dark: #FCA5A5;
    --error-ink: #FECACA;
    --error-a1: rgba(248, 113, 113, 0.14);
    --error-a2: rgba(248, 113, 113, 0.20);
    --error-a3: rgba(248, 113, 113, 0.36);
    --warning-dark: #FCD34D;
    --warning-a1: rgba(251, 191, 36, 0.13);
    --warning-a2: rgba(251, 191, 36, 0.20);
    --teal-deep: #0EA5E9;
    --teal-a1: rgba(56, 189, 248, 0.14);
    --accent-a1: rgba(240, 160, 48, 0.12);
    --accent-a2: rgba(240, 160, 48, 0.20);

    /* ---------- 彩色底上的前景色 ---------- */
    --on-primary: #05201D;
    --on-accent: #241703;
    --on-success: #04241A;
    --on-error: #2A0D0D;
    --on-teal: #04222B;

    /* ---------- 中性透明 ---------- */
    --black-a06: rgba(0, 0, 0, 0.30);
    --black-a08: rgba(0, 0, 0, 0.38);
    --black-a10: rgba(0, 0, 0, 0.45);
    --black-a40: rgba(0, 0, 0, 0.62);
    --black-a60: rgba(0, 0, 0, 0.78);
    /* ---------- 答题页专用玻璃层 ---------- */
    --answer-glass: rgba(22, 36, 35, 0.80);
    --answer-glass-strong: rgba(22, 36, 35, 0.94);
    --answer-paper: rgba(17, 29, 28, 0.96);
    --pending-veil: rgba(51, 36, 14, 0.90);
    --border: #263634;
    --border-light: #1E2B2A;
    --border-strong: #354947;
    --border-focus: #2DD4BF;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 18px 40px rgba(0, 0, 0, 0.58), 0 6px 14px rgba(0, 0, 0, 0.40);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.22);
    --shadow-soft-md: 0 6px 20px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.26);
    --shadow-soft-lg: 0 14px 34px rgba(0, 0, 0, 0.40), 0 4px 10px rgba(0, 0, 0, 0.28);
    --shadow-soft-xl: 0 24px 56px rgba(0, 0, 0, 0.48), 0 8px 18px rgba(0, 0, 0, 0.32);
    --primary-glow-soft: rgba(45, 212, 191, 0.20);
  }
}

/* ============================================
   全局重置
   ============================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  transition: background-color var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out);
}

/* ========== 动态渐变背景 ========== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, var(--bg-tint-a) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 80% 20%, var(--bg-tint-b) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 100%, var(--bg-tint-c) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 10% 80%, var(--bg-tint-d) 0%, transparent 50%);
  z-index: -3;
  pointer-events: none;
  animation: bgShift 24s ease-in-out infinite;
  will-change: opacity;
}

@keyframes bgShift {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.85; }
  50% { opacity: 1; }
  75% { opacity: 0.9; }
}

/* ========== 浮动粒子层 ========== */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 15% 25%, var(--particle-a), transparent),
    radial-gradient(2px 2px at 35% 65%, var(--particle-b), transparent),
    radial-gradient(1.5px 1.5px at 55% 35%, var(--particle-c), transparent),
    radial-gradient(2px 2px at 75% 15%, var(--particle-a), transparent),
    radial-gradient(1.5px 1.5px at 85% 75%, var(--particle-b), transparent),
    radial-gradient(2px 2px at 25% 85%, var(--particle-c), transparent),
    radial-gradient(1.5px 1.5px at 45% 45%, var(--particle-a), transparent),
    radial-gradient(1.5px 1.5px at 65% 55%, var(--particle-a), transparent),
    radial-gradient(1.5px 1.5px at 5% 50%, var(--particle-a), transparent),
    radial-gradient(2px 2px at 95% 45%, var(--particle-b), transparent);
  background-size: 800px 800px;
  animation: floatParticles 40s linear infinite;
  z-index: -2;
  pointer-events: none;
  opacity: 0.7;
  will-change: transform;
}

@keyframes floatParticles {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(15px, -10px) rotate(1deg); }
  50% { transform: translate(-5px, -20px) rotate(-1deg); }
  75% { transform: translate(-15px, -5px) rotate(0.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* ========== 文本选择 ========== */
::selection {
  background: var(--primary-glow);
  color: var(--primary-ink);
}

/* ========== 链接 ========== */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--primary-dark); }

/* ========== 容器 ========== */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* ========== 头部导航 ========== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--tint-2);
  padding: 0;
  transition: all var(--duration-normal) var(--ease-out);
}
.header.scrolled {
  box-shadow: 0 1px 20px var(--tint-2);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 不能写死 height:64px —— 超管有 9 个导航项，窄窗口下 .nav 会换行，
     固定高会把溢出的行挤到容器外，看起来像「下面的内容全被遮住了」。
     min-height 保证单行时仍是 64px，多行时能自然撑开。 */
  min-height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.3px;
  transition: all var(--duration-normal) var(--ease-out);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  /* 品牌区不参与收缩：否则导航一多，logo 会被挤扁折行 */
  flex: 0 0 auto;
  white-space: nowrap;
}
.logo:hover {
  background: var(--tint-2);
  color: var(--primary-dark);
}
.logo svg {
  width: 34px;
  height: 34px;
  transition: transform var(--duration-normal) var(--ease-spring);
}
.logo:hover svg {
  transform: rotate(-8deg) scale(1.08);
}

.nav {
  display: flex;
  align-items: center;
  /* 导航分三段：左侧主导航（窄屏可横向滚动）、中间「更多」下拉、
     右侧工具区（前台/语言/主题/用户/退出）。
     「更多」和工具区都是 flex:0 0 auto —— 永远完整可见，
     只有主导航会被压缩并横向滚动（1100px 下主导航 4 项 + 更多，实测刚好放下）。 */
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.nav-main {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 0 1 auto;
  /* 不换行：一换行就会撑破 header 高度，把下方内容全遮住。
     宽度不够时横向滚动，比换行稳得多。 */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* 关键：给「更多」下拉留出不被裁剪的空间。
     .nav-more 自身 overflow:visible，但父级 overflow-x:auto 仍会裁掉
     溢出部分（备份恢复被切、更多按钮直接消失）。这里用 padding-right
     补一段可滚动区，滚到最右时下拉按钮才完整可见。 */
  padding-right: 4px;
}
.nav-main::-webkit-scrollbar { display: none; }
.nav-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;   /* 工具区永不收缩 */
  white-space: nowrap;
  margin-left: auto;  /* 贴右对齐；主导航横向滚动时不会被顶到中间 */
}
.nav a {
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: 14px;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.nav a:hover {
  color: var(--primary);
  background: var(--tint-2);
}
.nav a.active {
  color: var(--text-inverse);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 2px 12px var(--primary-glow);
}

/* ========== 按钮系统 ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all var(--duration-fast) var(--ease-out);
  font-family: inherit;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  letter-spacing: -0.1px;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--on-primary-a30) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: var(--text-inverse);
  box-shadow: 0 2px 12px var(--primary-glow), 0 1px 3px var(--black-a08);
}
.btn-primary:hover {
  box-shadow: 0 6px 24px var(--primary-glow-strong), 0 2px 6px var(--black-a10);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--tint-2);
  color: var(--primary);
}
.btn-secondary:hover {
  background: var(--tint-3);
  color: var(--primary-dark);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--tint-4);
}
.btn-outline:hover {
  border-color: var(--primary);
  background: var(--tint-1);
}

.btn-danger {
  background: linear-gradient(135deg, var(--error), var(--error-dark));
  color: var(--text-inverse);
  box-shadow: 0 2px 12px var(--error-a3);
}
.btn-danger:hover {
  box-shadow: 0 6px 24px var(--error-a3);
  transform: translateY(-1px);
}

.btn-success {
  background: linear-gradient(135deg, var(--success), var(--success-dark));
  color: var(--text-inverse);
  box-shadow: 0 2px 12px var(--success-a3);
}
.btn-success:hover {
  box-shadow: 0 6px 24px var(--success-a3);
  transform: translateY(-1px);
}

.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-lg { padding: 14px 32px; font-size: 16px; }
.btn-block { width: 100%; }

.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: var(--radius-full);
}

/* ========== 卡片 ========== */
.card, .glass-card {
  background: var(--surface-glass-strong);
  border: 1px solid var(--on-primary-a50);
  border-radius: var(--radius-xl);
  padding: 32px;
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-md);
  position: relative;
  contain: layout style;
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .card, .glass-card {
    background: var(--surface-glass);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
  }
}
.card:hover, .glass-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--tint-3);
}

/* ========== Hero 区域 ========== */
.hero {
  text-align: center;
  padding: 72px 24px 48px;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--tint-2) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero h1 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -1px;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 50%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: gradientText 6s ease-in-out infinite;
  background-size: 200% 200%;
}

@keyframes gradientText {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero p {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: 40px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

/* ========== 搜索框 ========== */
.search-box {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
}
.search-box input {
  width: 100%;
  padding: 16px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  font-size: 15px;
  background: var(--surface-glass-strong);
  color: var(--text);
  outline: none;
  font-family: inherit;
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) var(--ease-out);
}
.search-box input:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--tint-3);
}
.search-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--tint-2), var(--shadow-lg);
  background: var(--surface);
}
.search-box input::placeholder { color: var(--text-tertiary); }

/* ========== 特性卡片 ========== */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 48px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.feature-card {
  background: var(--surface-glass);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--on-primary-a50);
  border-radius: var(--radius-xl);
  padding: 36px 28px;
  text-align: center;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--cyan));
  transform: scaleX(0);
  transition: transform var(--duration-slow) var(--ease-out);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  border-color: var(--tint-4);
}
.feature-card .icon, .admin-card .icon {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--tint-2), var(--accent-a2));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: all var(--duration-normal) var(--ease-spring);
  position: relative;
  /* 描边图标用主色（继承 currentColor），hover 时切到主色底 + 反白 */
  color: var(--primary);
}
.feature-card:hover .icon, .admin-card:hover .icon {
  transform: scale(1.12) rotate(-5deg);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 8px 24px var(--primary-glow);
  color: var(--on-primary);
}
.feature-card:hover .icon svg, .admin-card:hover .icon svg { stroke: var(--on-primary); }
/* 64px 方块里的图标略大一点，视觉重量与 emoji 原字号持平 */
.feature-card .icon svg, .admin-card .icon svg,
.empty-state .icon svg, .stat-card .icon svg { width: 28px; height: 28px; stroke-width: 1.75; }
.feature-card h3, .admin-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.feature-card p, .admin-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ========== 管理后台卡片 ========== */
.admin-card {
  background: var(--surface-glass);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--on-primary-a50);
  border-radius: var(--radius-xl);
  padding: 36px 28px;
  text-align: center;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.admin-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--tint-2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.admin-card:hover::before { opacity: 1; }
.admin-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--tint-4);
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

/* ========== 统计卡片 ========== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--surface-glass);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--on-primary-a50);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  text-align: center;
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transition: transform var(--duration-slow) var(--ease-out);
}
.stat-card:hover::after { transform: scaleX(1); }
.stat-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.stat-value {
  font-size: 40px;
  font-weight: 800;
  /* 统计数字统一用主色墨青，不再给每张卡配不同颜色。
     之前 5 张卡 5 种色（绿/绿/红/紫/绿）会让视线无处落点，看着很吵。
     需要强调的指标交给 .stat-label 上的语义徽标，不靠数字变色。 */
  color: var(--primary);
  margin-bottom: 4px;
  line-height: 1.2;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* 唯一的强调色：待批阅数量 > 0 时用琥珀金提示，= 0 时回到主色（无需提醒） */
.stat-value.is-alert { color: var(--accent); }
.stat-card.is-alert { border-color: var(--accent-light); background: var(--accent-softer); }

/* ========== 表单 ========== */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.2px;
}
.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
  background: var(--surface);
  color: var(--text);
  transition: all var(--duration-fast) var(--ease-out);
  outline: none;
  font-family: inherit;
}
.form-control:hover {
  border-color: var(--border-strong);
  background: var(--surface-alt);
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--tint-2);
  background: var(--surface);
}
.form-control::placeholder { color: var(--text-tertiary); }
textarea.form-control { min-height: 120px; resize: vertical; line-height: 1.7; }
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
  padding-right: 44px;
  cursor: pointer;
}
.form-help {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 6px;
  line-height: 1.4;
}
.required-tag { color: var(--error); font-weight: 700; margin-left: 2px; }

/* ========== 徽章 ========== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.badge-active { background: var(--success-a1); color: var(--success-dark); }
.badge-inactive { background: var(--error-a1); color: var(--error-dark); }
.badge-graded { background: var(--tint-2); color: var(--primary); }
.badge-pending { background: var(--warning-a1); color: var(--accent); }

.result-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.result-correct { background: var(--success-bg); color: var(--success-dark); }
.result-incorrect { background: var(--error-bg); color: var(--error-dark); }
.result-partial { background: var(--warning-bg); color: var(--accent); }

/* ========== 警报/提示 ========== */
.alert {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  border-left: 4px solid;
  animation: slideIn 0.3s var(--ease-out);
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.alert-success { background: var(--success-bg); color: var(--success-ink); border-left-color: var(--success); }
.alert-error { background: var(--error-bg); color: var(--error-ink); border-left-color: var(--error); }
.alert-info { background: var(--tint-2); color: var(--primary-dark); border-left-color: var(--primary); }
.alert-warn { background: var(--warning-a1); color: var(--warning-dark); border-left-color: var(--accent-light); }

.info-box {
  padding: 16px 20px;
  background: var(--tint-2);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  color: var(--primary-dark);
  font-size: 14px;
  line-height: 1.6;
  border-left: 4px solid var(--primary);
}

/* ========== 表格 ========== */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
th, td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}
th {
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--surface-alt);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
tbody tr {
  transition: background var(--duration-fast) var(--ease-out);
}
tbody tr:hover { background: var(--surface-hover); }
tr:last-child td { border-bottom: none; }

/* ========== 问卷题目 ========== */
.question-item, .question-card {
  background: var(--surface-glass);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--on-primary-a50);
  border-radius: var(--radius-xl);
  padding: 28px;
  margin-bottom: 20px;
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.question-item:hover, .question-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--tint-3);
}
.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}
.question-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
  flex: 1;
}
.question-type {
  background: var(--tint-2);
  color: var(--primary);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.question-score {
  font-size: 13px;
  color: var(--primary);
  padding: 6px 14px;
  background: var(--tint-2);
  border-radius: var(--radius-full);
  font-weight: 700;
  white-space: nowrap;
}
.question-text {
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}

/* 选项 */
.radio-group, .checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.radio-item, .checkbox-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  background: var(--surface);
  border: 1.5px solid var(--border);
  position: relative;
}
.radio-item:hover, .checkbox-item:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.radio-item:has(input:checked), .checkbox-item:has(input:checked) {
  background: var(--tint-2);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--tint-2);
}
.radio-item input, .checkbox-item input {
  width: 20px; height: 20px;
  accent-color: var(--primary);
  flex-shrink: 0;
  cursor: pointer;
}
.option-text {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
}

/* 类型选择器 */
.type-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.type-btn {
  padding: 10px 18px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}
.type-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border-strong);
}
.type-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  border-color: transparent;
  color: var(--text-inverse);
  box-shadow: 0 2px 12px var(--primary-glow);
}

/* 选项字母 */
.option-letter {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--tint-2), var(--accent-a1));
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
  font-size: 14px;
  border: 1.5px solid var(--tint-3);
}

/* 选项行 */
.option-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: all var(--duration-fast) var(--ease-out);
  border: 1px solid transparent;
}
.option-item:hover {
  background: var(--surface-hover);
  border-color: var(--border);
}

/* 问卷头部 */
.survey-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 48px 32px;
  background: linear-gradient(135deg, var(--tint-1), var(--accent-a1));
  border-radius: var(--radius-2xl);
  border: 1px solid var(--tint-2);
  box-shadow: var(--shadow-sm);
}
.survey-header h1 {
  font-size: 30px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}
.survey-code {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 12px;
}
.survey-code span {
  background: linear-gradient(135deg, var(--tint-2), var(--accent-a1));
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  border: 1px solid var(--tint-3);
  font-weight: 600;
  color: var(--primary);
  margin-left: 6px;
}
.survey-description {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
  margin-top: 8px;
}

.optional-tag {
  background: var(--surface-alt);
  color: var(--text-tertiary);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
  margin-left: 4px;
}

/* ========== 登录卡片 ========== */
.login-card {
  max-width: 440px;
  margin: 80px auto;
  padding: 48px 40px;
  background: var(--surface-glass-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--on-primary-a60);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  text-align: center;
}
.login-card h2 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  background-clip: text;
}
.login-card p {
  color: var(--text-secondary);
  margin-bottom: 32px;
  font-size: 14px;
}
.login-card .btn {
  width: 100%;
  margin-top: 8px;
}

/* ========== 成功消息 ========== */
.success-message {
  text-align: center;
  padding: 48px 24px;
}
.success-icon {
  width: 88px; height: 88px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 12px 40px var(--primary-glow);
  animation: successPulse 2s ease-in-out infinite;
}
@keyframes successPulse {
  0%, 100% { box-shadow: 0 12px 40px var(--primary-glow); }
  50% { box-shadow: 0 20px 60px var(--primary-glow-strong); }
}
.success-message h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
}
.success-message p {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
}

/* ========== 分数展示 ========== */
.score-display {
  text-align: center;
  padding: 40px;
  background: linear-gradient(135deg, var(--tint-2), var(--accent-a1));
  border-radius: var(--radius-2xl);
  margin-bottom: 32px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--tint-2);
}
.score-display .score {
  font-size: 80px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  line-height: 1;
  letter-spacing: -2px;
}
.score-display .label {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
}

/* ========== 答题结果 ========== */
.question-review {
  padding: 24px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.question-review:hover {
  box-shadow: var(--shadow-md);
}
.question-review.correct {
  border-left: 4px solid var(--success);
  background: var(--success-soft);
}
.question-review.incorrect {
  border-left: 4px solid var(--error);
  background: var(--error-soft);
}
.question-review.partial {
  border-left: 4px solid var(--warning);
  background: var(--accent-softer);
}
.question-review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.question-review-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.6;
  flex: 1;
}

.answer-section {
  padding: 16px;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  margin: 12px 0;
  border-left: 3px solid transparent;
}
.answer-section.your-answer { border-left-color: var(--teal); }
.answer-section.correct-answer { border-left-color: var(--success); }
.answer-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.answer-value {
  font-size: 15px;
  color: var(--text);
  line-height: 1.7;
}
.empty-answer { color: var(--text-tertiary); font-style: italic; }

/* ========== 统计摘要 ========== */
.stats-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
@media (max-width: 600px) {
  .stats-summary { grid-template-columns: repeat(2, 1fr); }
}
.stat-item {
  text-align: center;
  padding: 20px 16px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  transition: all var(--duration-fast) var(--ease-out);
}
.stat-item:hover { border-color: var(--tint-4); box-shadow: var(--shadow-sm); }
.stat-item .stat-value { font-size: 32px; }
.stat-item .stat-value.correct-count { background: linear-gradient(135deg, var(--success), var(--success-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }
.stat-item .stat-value.incorrect-count { background: linear-gradient(135deg, var(--error), var(--error-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }
.stat-item .stat-value.partial-count { background: linear-gradient(135deg, var(--accent-light), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }
.stat-item .stat-value.total-count { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }
.stat-item .stat-label { font-size: 12px; }

/* ========== 提交卡片 ========== */
.submission-card { margin-bottom: 32px; }
.submission-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 32px;
  gap: 16px;
  flex-wrap: wrap;
}
.submission-header h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.4;
}
.submission-info {
  display: flex;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* ========== 留言区域 ========== */
.comment-box {
  margin-bottom: 32px;
  padding: 20px;
  background: var(--tint-1);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--primary);
}
.comment-box h4 {
  color: var(--primary-dark);
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}
.comment-box p {
  color: var(--text);
  line-height: 1.7;
  font-size: 15px;
}

.comment-section {
  padding: 20px;
  background: var(--tint-1);
  border-radius: var(--radius-lg);
  margin-top: 16px;
}
.comment-section textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
  transition: all var(--duration-fast) var(--ease-out);
}
.comment-section textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--tint-2);
}

/* ========== 搜索结果 ========== */
.search-results-card {
  margin-bottom: 24px;
}
.search-results-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 24px;
  text-align: center;
}
.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}
.search-results-count {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 14px;
}
.result-item {
  display: block;
  padding: 20px 24px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.result-item:hover {
  border-color: var(--tint-4);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.result-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.result-item-title { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.4; }
.result-item-code { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.result-item-date { font-size: 13px; color: var(--text-tertiary); margin-top: 8px; }
.result-item-score {
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  background-clip: text;
  margin-top: 12px;
}

/* ========== 添加题目标题按钮 ========== */
.add-question-btn {
  width: 100%;
  padding: 20px;
  border: 2px dashed var(--tint-4);
  border-radius: var(--radius-xl);
  background: var(--tint-1);
  color: var(--primary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  font-weight: 600;
  font-size: 15px;
  font-family: inherit;
  margin-top: 8px;
  margin-bottom: 24px;
}
.add-question-btn:hover {
  border-color: var(--primary);
  background: var(--tint-2);
  border-style: solid;
  box-shadow: 0 0 0 4px var(--tint-2);
}

/* 删除按钮 */
.remove-btn {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 20px;
  transition: all var(--duration-fast) var(--ease-out);
  padding: 0;
  line-height: 1;
}
.remove-btn:hover {
  background: var(--error);
  color: white;
  border-color: var(--error);
  transform: rotate(90deg);
}

/* ========== 页脚 ========== */
.footer {
  text-align: center;
  padding: 40px 24px;
  color: var(--text-tertiary);
  margin-top: 80px;
  background: var(--on-primary-a50);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--tint-2);
  font-size: 13px;
  font-weight: 500;
}

/* ========== 页面标题 ========== */
.page-title {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0 20px;
}
.page-title h1 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.8px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  background-clip: text;
}
.page-title p {
  color: var(--text-secondary);
  font-size: 16px;
}

/* ========== 区块标题 ========== */
.section-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 20px;
  text-align: center;
}

/* ========== 正确答案区域 ========== */
.correct-answer-section {
  padding: 20px;
  background: var(--success-a1);
  border-radius: var(--radius-lg);
  margin-top: 16px;
  border: 1px solid var(--success-a1);
}
.correct-answer-section h4 {
  color: var(--success-dark);
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
}
.correct-answers-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-inline, .checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.radio-inline:hover, .checkbox-inline:hover {
  background: var(--tint-1);
}
.radio-inline input, .checkbox-inline input {
  accent-color: var(--primary);
  width: 18px; height: 18px;
}
.radio-inline span, .checkbox-inline span {
  font-size: 14px;
  color: var(--text);
}

/* ========== 按钮组 ========== */
.button-group {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ========== 返回链接 ========== */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
}
.back-link:hover {
  color: var(--primary);
  background: var(--tint-2);
}

/* ========== 评分控件 ========== */
.grade-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.grade-score-input { max-width: 140px; }
.grade-score-input input {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}
.grade-correct-check { display: flex; align-items: center; }
.grade-max-score {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* ========== 信息网格 ========== */
.info-grid {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: center;
}
.info-grid .text-muted {
  color: var(--text-secondary);
  font-size: 13px;
  margin-right: 6px;
}
.score-highlight {
  font-weight: 800;
  font-size: 18px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  background-clip: text;
}

/* ========== 工具类 ========== */
.text-center { text-align: center; }
.text-muted { color: var(--text-secondary); }
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }
.mb-20 { margin-bottom: 20px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-20 { gap: 20px; }

/* ========== Toast 通知 ========== */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: var(--surface-glass-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--on-primary-a60);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  pointer-events: all;
  animation: toastIn 0.4s var(--ease-spring);
  min-width: 280px;
  max-width: 420px;
}
.toast.removing {
  animation: toastOut 0.3s var(--ease-out) forwards;
}
.toast-success { border-left: 4px solid var(--success); }
.toast-error { border-left: 4px solid var(--error); }
.toast-info { border-left: 4px solid var(--primary); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%) scale(0.9); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(100%) scale(0.9); }
}

/* ========== 滚动渐显动画 ========== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== 涟漪效果 ========== */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: var(--on-primary-a40);
  transform: scale(0);
  animation: rippleAnim 0.6s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ========== 代码高亮 ========== */
code {
  background: var(--tint-2);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
  font-weight: 600;
}

.code-highlight {
  background: linear-gradient(135deg, var(--tint-2), var(--accent-a1));
  color: var(--primary);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid var(--tint-3);
}

/* ========== 禁用状态 ========== */
.btn:disabled, .form-control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
  .header .container { min-height: 0; flex-direction: column; gap: 12px; padding: 12px 0; }
  .hero { padding: 48px 16px 32px; }
  .hero h1 { font-size: 34px; }
  .hero p { font-size: 15px; }
  .features { grid-template-columns: 1fr; gap: 16px; }
  .admin-grid { grid-template-columns: 1fr; gap: 16px; }
  .card, .glass-card { padding: 24px; }
  .login-card { padding: 36px 24px; margin: 40px 16px; }
  .score-display { padding: 32px 24px; }
  .score-display .score { font-size: 56px; }
  .submission-header { flex-direction: column; gap: 12px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .page-title { padding: 28px 0 16px; }
  .page-title h1 { font-size: 28px; }
  .container { padding: 0 16px; }
  .survey-header { padding: 32px 20px; }
  .survey-header h1 { font-size: 24px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 28px; }
  .score-display .score { font-size: 44px; }
  .login-card h2 { font-size: 24px; }
  .stat-value { font-size: 32px; }
}

/* ========== 减少动画偏好 ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========== 焦点可见 ========== */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ========== 卡片入场动画 ========== */
.card, .glass-card, .feature-card, .admin-card, .question-card, .question-item,
.question-review, .login-card, .stat-card, .result-item, .submission-card, .search-results-card {
  animation: fadeInUp 0.5s var(--ease-out);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== 复选框标签 ========== */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
  background: var(--surface);
  border: 1.5px solid var(--border);
}
.checkbox-label:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.checkbox-label input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.checkbox-label input[type="checkbox"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.checkbox-label:has(input:checked) {
  background: var(--tint-2);
  border-color: var(--primary);
}

/* ========== 选项输入行（创建/编辑页） ========== */
.option-input {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1.5px solid var(--border);
  transition: all var(--duration-fast) var(--ease-out);
}
.option-input:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.option-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.remove-option-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

/* ========== 问卷填写进度条 ========== */
.survey-progress {
  position: sticky;
  top: 64px;
  z-index: 50;
  background: var(--on-primary-a88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 24px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border-bottom: 1px solid var(--tint-2);
}
.survey-progress-bar {
  height: 6px;
  background: var(--border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}
.survey-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--radius-full);
  transition: width 0.4s var(--ease-out);
  width: 0%;
}
.survey-progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 600;
}
.survey-progress-text .progress-count {
  color: var(--primary);
  font-weight: 700;
}

/* ========== 搜索加载态 ========== */
.search-loading.is-loading input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='2'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 20px;
  animation: spin 0.8s linear infinite;
  pointer-events: none;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.search-loading.is-loading input {
  animation: searchPulse 1.5s ease-in-out infinite;
}
@keyframes searchPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ========== 得分进度条 ========== */
.score-progress {
  margin-top: 20px;
  padding: 0 8px;
}
.score-progress-bar {
  height: 12px;
  background: var(--border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}
.score-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--radius-full);
  transition: width 1s var(--ease-out);
  position: relative;
}
.score-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--on-primary-a30), transparent);
  animation: shimmer 2s linear infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.score-progress-label {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}
.score-progress-label .percentage {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: 16px;
  font-weight: 800;
}

/* ========== 密码强度指示器 ========== */
.password-strength {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.password-strength-bar {
  flex: 1;
  height: 4px;
  background: var(--border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.password-strength-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: all 0.3s var(--ease-out);
  width: 0%;
}
.password-strength.weak .password-strength-fill { background: var(--error); width: 33%; }
.password-strength.medium .password-strength-fill { background: var(--warning); width: 66%; }
.password-strength.strong .password-strength-fill { background: var(--success); width: 100%; }
.password-strength.weak { color: var(--error); }
.password-strength.medium { color: var(--warning); }
.password-strength.strong { color: var(--success); }

/* ========== 空状态 ========== */
.empty-state {
  text-align: center;
  padding: 60px 24px;
}
.empty-state .icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.empty-state h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.empty-state p {
  color: var(--text-secondary);
  font-size: 15px;
}

/* ========== 分隔线 ========== */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 32px 0;
  border: none;
}

/* ========== 步骤指示器 ========== */
.step-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--tint-1);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--primary);
  margin-bottom: 24px;
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 15px;
}
.step-indicator .step-number {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ========== 模态框增强 ========== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: var(--black-a40);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 36px;
  animation: modalIn 0.3s var(--ease-spring);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ========== 表单提交加载态 ========== */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}
.btn.is-loading::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--on-primary-a30);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.btn.is-loading > * { opacity: 0.5; }

/* ========== 表单行布局 ========== */
.form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.form-row .form-group {
  flex: 1;
  min-width: 200px;
}

/* ========== 标签组 ========== */
.tag-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  background: var(--tint-2);
  color: var(--primary);
}

/* ========== 评分等级颜色 ========== */
.grade-excellent { color: var(--success); font-weight: 800; }
.grade-good { color: var(--primary); font-weight: 800; }
.grade-pass { color: var(--warning); font-weight: 700; }
.grade-fail { color: var(--error); font-weight: 700; }

/* ============================================================
   v6.0 视觉增强 · 交互组件
   ============================================================ */

/* ========== 背景动效降负（低端设备更流畅） ========== */
body::after {
  background-size: 900px 900px;
  animation-duration: 70s;
  opacity: 0.55;
}

/* ========== Logo ========== */
.logo {
  gap: 10px;
  padding: 4px 10px 4px 4px;
}
.logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-primary);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 4px 14px var(--primary-glow);
  flex-shrink: 0;
}
.logo-text {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  /* 侧边栏变窄时站名会被压成两行（"青祁/问卷"），这里锁死不换行且不参与收缩 */
  white-space: nowrap;
  flex: 0 0 auto;
}
.logo-text em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.logo:hover .logo-mark {
  transform: rotate(-8deg) scale(1.06);
}
.logo:hover .logo-text { color: var(--primary-dark); }

/* ========== 导航增强 ========== */
.nav { gap: 2px; }
.nav a {
  font-size: 14px;
  padding: 8px 14px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.nav-main > a, .nav-more-menu > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-tools .nav-external,
.nav-tools .nav-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-out);
}
.nav-tools .nav-external:hover,
.nav-tools .nav-logout:hover { background: var(--tint-2); color: var(--primary); }
.nav-tools .nav-logout:hover { color: var(--error) !important; background: var(--error-a1) !important; }
.nav-tools .nav-external svg, .nav-tools .nav-logout svg { flex: 0 0 auto; }

/* ========== 「更多」下拉 ========== */
.nav-more { position: relative; flex: 0 0 auto; margin-right: 2px; }
.nav-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-out);
}
.nav-more-btn:hover { color: var(--primary); background: var(--tint-2); }
.nav-more-btn svg { transition: transform var(--duration-fast) var(--ease-out); flex: 0 0 auto; }
.nav-more-btn[aria-expanded="true"] { color: var(--primary); background: var(--tint-2); }
.nav-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* 当前页在「更多」里时，按钮保持主色高亮，用户知道自己在哪 */
.nav-more.is-active .nav-more-btn {
  color: var(--text-inverse);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 2px 12px var(--primary-glow);
}
.nav-more.is-active .nav-more-btn:hover { color: var(--text-inverse); }

.nav-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 120;
}
.nav-more-menu.is-open { display: flex; }
.nav-more-menu > a {
  padding: 9px 14px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-out);
}
.nav-more-menu > a:hover { color: var(--primary); background: var(--tint-2); }
.nav-more-menu > a.active {
  color: var(--primary);
  background: var(--tint-2);
  font-weight: 600;
}
/* 下拉箭头：浮在主导航上方，抵消 overflow-x:auto 的裁剪 */
.nav-more::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.nav-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 8px;
}
.nav-external { color: var(--text-secondary); }
.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-full);
  background: var(--tint-2);
}
.nav-user .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.nav-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.nav-user-meta b { font-size: 13px; color: var(--text); font-weight: 600; }
.nav-user-meta i { font-style: normal; font-size: 11px; color: var(--text-tertiary); }
.nav-logout {
  color: var(--text-secondary) !important;
}
.nav-logout:hover {
  color: var(--error) !important;
  background: var(--error-a1) !important;
}

/* 移动端汉堡按钮 */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-secondary);
  transition: all 0.2s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ========== 页面头部（替代 page-title，保留旧类兼容） ========== */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 36px 0 20px;
  margin-bottom: 8px;
}
.page-head-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.25;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.page-head-sub {
  color: var(--text-secondary);
  font-size: 15px;
  margin-top: 6px;
}
.page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ========== Hero 增强 ========== */
.hero-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: var(--tint-2);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
  border: 1px solid var(--tint-3);
}

/* 搜索框按钮 */
.search-box form { position: relative; display: flex; }
.search-box .search-submit {
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: 6px;
  padding: 0 22px;
  border: none;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: var(--on-primary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  font-family: inherit;
}
.search-box .search-submit:hover { box-shadow: 0 4px 16px var(--primary-glow); }
.search-box input { padding-right: 96px; }

/* ========== 徽章补全 ========== */
.badge-your {
  background: var(--teal-a1);
  color: var(--teal-deep);
  margin-right: 6px;
}
.badge-correct {
  background: var(--success-a1);
  color: var(--success-dark);
  margin-right: 6px;
}
.score-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--tint-3);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 11px;
}
.ml-8 { margin-left: 8px; }

/* ========== 题号胶囊 ========== */
.q-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: var(--on-primary);
  font-size: 13px;
  font-weight: 700;
  margin-right: 10px;
  flex-shrink: 0;
}

/* ========== 筛选栏 ========== */
.filter-bar { padding: 20px 24px; }
.filter-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-field { flex: 1; min-width: 180px; }
.filter-form .form-control { margin: 0; }

/* ========== 分页 ========== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 4px 4px;
  flex-wrap: wrap;
}
.pagination-info {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ========== 登录页 ========== */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.login-links {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-tertiary);
}
.login-links a { font-size: 14px; }

/* ========== 问卷信息条 ========== */
.survey-meta {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.survey-meta span {
  padding: 4px 14px;
  border-radius: var(--radius-full);
  background: var(--tint-2);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 600;
}
.name-field {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--tint-1);
  border: 1px solid var(--tint-3);
}

/* ========== 批阅：题目卡片 ========== */
.grade-form .grade-question {
  padding: 26px 28px;
  border-left: 4px solid transparent;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.grade-form .grade-question:hover { transform: none; }
.grade-question.is-correct { border-left-color: var(--success); }
.grade-question.is-partial { border-left-color: var(--warning); }
.grade-question.is-wrong  { border-left-color: var(--error); }

.question-heading {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.6;
  flex: 1;
}
.question-heading .q-index { margin-top: 2px; }
.q-text { flex: 1; }

.grade-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 18px;
  margin-top: 6px;
  border-top: 1px dashed var(--border);
}
.grade-score { display: flex; flex-direction: column; gap: 6px; }
.grade-score > label { margin: 0; font-size: 12px; color: var(--text-secondary); font-weight: 600; }

.score-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 6px;
  transition: all var(--duration-fast) var(--ease-out);
}
.score-input-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--tint-3);
}
.score-step {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--tint-2);
  color: var(--primary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  font-family: inherit;
}
.score-step:hover { background: var(--primary); color: var(--on-primary); }
.score-input-wrap .form-control {
  width: 68px;
  border: none;
  background: transparent;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  padding: 4px 2px;
}
.score-input-wrap .form-control:focus { box-shadow: none; background: transparent; }
.score-sep { color: var(--text-tertiary); }
.score-max { font-weight: 700; color: var(--text-secondary); min-width: 22px; text-align: center; }

.grade-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-soft {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
}
.btn-soft:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--tint-1);
  transform: none;
  box-shadow: none;
}

.grade-status { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s var(--ease-out);
}
.status-pill .pill-icon { font-size: 14px; }
.status-pill.is-correct { background: var(--success-a1); color: var(--success-dark); }
.status-pill.is-partial { background: var(--warning-a2); color: var(--warning-dark); }
.status-pill.is-wrong   { background: var(--error-a1);  color: var(--error-dark); }
.checkbox-label.small {
  padding: 6px 12px;
  font-size: 13px;
}

.grade-tip {
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.7;
}
.submission-meta .info-grid > div { display: flex; align-items: center; gap: 4px; }

/* ========== 批阅：底部操作条 ========== */
.grade-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--on-primary-a88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--tint-3);
  box-shadow: 0 -8px 30px var(--black-a06);
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.grade-action-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.grade-total { display: flex; flex-direction: column; line-height: 1.2; }
.grade-total-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.grade-total-value b {
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.grade-total-max { font-size: 14px; color: var(--text-tertiary); font-weight: 600; margin-left: 4px; }
.grade-progress-text { font-size: 13px; color: var(--text-secondary); }
.grade-progress-text b { color: var(--primary); font-size: 15px; }
.grade-actions { display: flex; gap: 10px; flex-wrap: wrap; }
body.has-action-bar { padding-bottom: 110px; }

/* ========== 成绩详情工具条 ========== */
.detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 28px 0 14px;
}
.detail-toolbar h3 { font-size: 18px; font-weight: 700; color: var(--text); }
.review-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reviewer-info {
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: -16px;
  margin-bottom: 20px;
}
.score-slash { color: var(--text-tertiary); font-weight: 400; }
/* 作用域是「该答卷卡片」而非 body：
   一个学生可能有多份答卷，挂在 body 上会让所有答卷的正确题一起被隐藏。 */
.submission-card.only-wrong .question-review.correct,
.submission-card.only-wrong .question-review.partial { display: none; }

/* ========== 响应式表格：移动端卡片化 ========== */
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .header .container { flex-wrap: wrap; min-height: 0; padding: 10px 0; }
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: visible;
    gap: 4px;
    padding: 10px 0 4px;
    border-top: 1px solid var(--border-light);
    margin-top: 8px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 10px 12px; border-radius: var(--radius-md); white-space: normal; }
  .nav-divider { display: none; }
  .nav-user { justify-content: flex-start; background: transparent; padding: 6px 12px; }
  .nav-external { border-top: 1px solid var(--border-light); }

  /* 移动端纵向菜单：两组各自纵向铺开，「更多」下拉改为静态展开（浮层会超出屏幕） */
  .nav-main, .nav-tools, .nav-more {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    overflow-x: visible;
    width: 100%;
  }
  .nav-tools { margin-left: 0; }
  .nav-more { margin-right: 0; }
  .nav-main > a, .nav-more-menu > a { width: 100%; }
  .nav-more-btn { width: 100%; justify-content: space-between; padding: 10px 12px; }
  .nav-more-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--tint-3);
    border-radius: 0;
    margin: 2px 0 2px 14px;
    padding: 0 0 0 4px;
    min-width: 0;
  }
  .nav-more-menu.is-open { display: flex; }
  .nav-more-menu > a { padding: 9px 12px; }
  .nav-tools { border-top: 1px solid var(--border-light); margin-top: 6px; padding-top: 6px; }
  .nav-tools .nav-external, .nav-tools .nav-logout { width: 100%; padding: 10px 12px; border-radius: var(--radius-md); }
  .nav-tools .nav-external { border-top: none; }

  .table-wrapper {
    background: transparent;
    border: none;
    border-radius: 0;
  }
  .table-wrapper table,
  .table-wrapper thead,
  .table-wrapper tbody,
  .table-wrapper tr,
  .table-wrapper td { display: block; width: 100%; }
  .table-wrapper thead { display: none; }
  .table-wrapper tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 6px 0;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
  }
  .table-wrapper tr:hover { background: var(--surface); }
  .table-wrapper td {
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 16px;
    text-align: right;
  }
  .table-wrapper td[data-label]::before {
    content: attr(data-label);
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    flex-shrink: 0;
  }
  .table-wrapper td:not([data-label])::before { content: none; }
  .table-wrapper td .actions { justify-content: flex-end; }

  .page-head { padding: 24px 0 12px; }
  .page-head-title { font-size: 24px; }
  .grade-controls { gap: 14px; }
  .grade-status { margin-left: 0; width: 100%; justify-content: space-between; }
  .grade-action-inner { gap: 10px; }
  .grade-actions { width: 100%; }
  .grade-actions .btn { flex: 1; }
  body.has-action-bar { padding-bottom: 170px; }
  .survey-progress { top: 0; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .search-box .search-submit { padding: 0 16px; }
  .search-box input { padding-right: 76px; }
}

/* ============================================================
   v7 美化增强 — 学生端前台深度升级
   ============================================================ */

/* ========== Hero 徽章呼吸光效 ========== */
.hero-badge {
  position: relative;
  padding-left: 28px;
  animation: badgeGlow 2.6s ease-in-out infinite;
}
.hero-badge::before {
  content: '';
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: var(--radius-full);
  background: var(--accent);
  animation: dotBlink 2.2s ease-in-out infinite;
}
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--tint-5); }
  50% { box-shadow: 0 0 0 9px transparent; }
}
@keyframes dotBlink {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50% { opacity: 0.55; transform: translateY(-50%) scale(0.82); }
}
/* Hero 搜索框悬浮光晕 */
.hero .search-box {
  filter: drop-shadow(0 18px 36px var(--tint-3));
}
/* Hero 文案渐入 */
.hero h1, .hero p, .hero .search-box {
  animation: heroFadeUp 0.7s var(--ease-out) backwards;
}
.hero p { animation-delay: 0.12s; }
.hero .search-box { animation-delay: 0.22s; }
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ========== 题目卡片入场动画（staggered） ========== */
@media (prefers-reduced-motion: no-preference) {
  #survey-form .question-item {
    animation: qEnter 0.55s var(--ease-out) both;
    animation-delay: calc(min(var(--qi, 0), 14) * 48ms + 140ms);
  }
}
@keyframes qEnter {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* ========== 当前作答题高亮 ========== */
#survey-form .question-item:focus-within {
  border-color: var(--tint-5);
  box-shadow: 0 0 0 4px var(--tint-2), var(--shadow-lg);
}

/* ========== 选项选中态升级 ========== */
.radio-item:has(input:checked),
.checkbox-item:has(input:checked) {
  background: linear-gradient(135deg, var(--tint-2), var(--accent-a1));
  border-color: var(--primary);
}
.radio-item:has(input:checked) .option-letter,
.checkbox-item:has(input:checked) .option-letter {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: var(--text-inverse);
  border-color: transparent;
  box-shadow: 0 4px 14px var(--primary-glow);
  transform: scale(1.06);
}
.radio-item:has(input:checked)::after,
.checkbox-item:has(input:checked)::after {
  content: '✓';
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%) scale(1);
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--success), var(--success-dark));
  color: var(--on-primary);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: checkPop 0.35s var(--ease-spring);
  box-shadow: 0 3px 10px var(--success-a2);
}
.radio-item:has(input:checked) .option-text,
.checkbox-item:has(input:checked) .option-text {
  color: var(--primary-dark);
  font-weight: 600;
}
@keyframes checkPop {
  from { transform: translateY(-50%) scale(0); }
  60% { transform: translateY(-50%) scale(1.25); }
  to { transform: translateY(-50%) scale(1); }
}
/* 选中时给右侧对勾留位 */
.radio-item, .checkbox-item { padding-right: 52px; }

/* ========== 提交按钮流光 ========== */
#survey-form button[type="submit"] {
  position: relative;
  overflow: hidden;
}
#survey-form button[type="submit"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, var(--on-primary-a40) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: btnShine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnShine {
  0%, 55% { transform: translateX(-130%); }
  85%, 100% { transform: translateX(130%); }
}

/* ========== 右侧题目导航点（桌面端） ========== */
.q-nav {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 180;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 10px;
  background: var(--surface-glass-strong);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--tint-3);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  max-height: 78vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.q-nav::-webkit-scrollbar { display: none; }
.q-nav-dot {
  width: 26px; height: 26px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  background: var(--surface-alt);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all 0.22s var(--ease-spring);
  flex-shrink: 0;
  text-decoration: none;
  font-family: inherit;
}
.q-nav-dot:hover {
  color: var(--primary);
  border-color: var(--primary-light);
  transform: scale(1.14);
}
.q-nav-dot.answered {
  background: linear-gradient(135deg, var(--tint-3), var(--accent-a2));
  color: var(--primary-dark);
  border-color: var(--tint-5);
}
.q-nav-dot.current {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: var(--on-primary);
  border-color: transparent;
  transform: scale(1.18);
  box-shadow: 0 4px 14px var(--primary-glow);
}
/* 题目很多时切换为紧凑圆点 */
.q-nav.compact .q-nav-dot { width: 10px; height: 10px; font-size: 0; border-width: 1px; }
.q-nav.compact .q-nav-dot:hover::before {
  content: attr(data-num);
  position: absolute;
  right: 34px;
  padding: 3px 10px;
  background: var(--text);
  color: var(--on-primary);
  font-size: 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.q-nav.compact { position: fixed; } /* 保证 tooltip 定位 */
.q-nav.compact .q-nav-dot { position: relative; }
/* 窄屏下隐藏桌面端右侧悬浮导航（平板/手机由 q-nav-tablet / q-nav-phone 承接） */
@media (max-width: 1280px) {
  .q-nav:not(.q-nav-tablet):not(.q-nav-phone) { display: none !important; }
}

/* ========== 成绩页：圆环得分 ========== */
.score-display {
  display: flex;
  align-items: center;
  gap: 40px;
  text-align: left;
  padding: 36px 40px;
}
.score-ring-wrap {
  position: relative;
  width: 176px; height: 176px;
  flex-shrink: 0;
}
.score-ring-svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.ring-bg {
  fill: none;
  stroke: var(--tint-3);
  stroke-width: 11;
}
.ring-fill {
  fill: none;
  /* 渐变 id 由 PHP 按答卷生成（ringGrad{id}），因此不能写死 url(#ringGrad)。
     未匹配到时退回主色，保证任何情况下都有颜色可见。 */
  stroke: var(--primary);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 452;
  transition: stroke-dashoffset 1.3s var(--ease-out);
  filter: drop-shadow(0 4px 10px var(--tint-5));
}
.score-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}
.score-ring-center .score-num {
  font-size: 46px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  letter-spacing: -1px;
}
.score-ring-center .score-max { font-size: 13px; color: var(--text-tertiary); font-weight: 600; }
.score-info { flex: 1; min-width: 0; }
.score-info .label { font-size: 14px; color: var(--text-secondary); font-weight: 600; margin-bottom: 10px; }
.grade-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 14px;
  animation: gradePop 0.6s var(--ease-spring) 0.5s backwards;
}
.grade-badge .grade-icon { font-size: 20px; }
.grade-excellent { background: linear-gradient(135deg, var(--success-a2), var(--success-a1)); color: var(--success-dark); border: 1.5px solid var(--success-a2); }
.grade-good { background: linear-gradient(135deg, var(--info-a1), var(--info-a1)); color: var(--info); border: 1.5px solid var(--info-a2); }
.grade-pass { background: linear-gradient(135deg, var(--warning-a2), var(--accent-a1)); color: var(--warning-dark); border: 1.5px solid var(--warning-a2); }
.grade-fail { background: linear-gradient(135deg, var(--error-a2), var(--error-a1)); color: var(--error-dark); border: 1.5px solid var(--error-a3); }
@keyframes gradePop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
@media (max-width: 640px) {
  .score-display { flex-direction: column; text-align: center; gap: 24px; padding: 28px 20px; }
  .score-info .label { margin-bottom: 12px; }
}

/* ========== 统计卡片小图标 ========== */
.stat-item { position: relative; }
.stat-chip {
  width: 30px; height: 30px;
  margin: 0 auto 8px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}
.stat-chip.chip-correct { background: var(--success-a1); color: var(--success-dark); }
.stat-chip.chip-partial { background: var(--warning-a1); color: var(--accent); }
.stat-chip.chip-incorrect { background: var(--error-a2); color: var(--error-dark); }
.stat-chip.chip-total { background: var(--teal-a1); color: var(--teal-deep); }

/* ========== 待批阅徽章脉冲 ========== */
.badge-pending {
  position: relative;
  animation: pendingPulse 2.2s ease-in-out infinite;
}
@keyframes pendingPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--warning-a2); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

/* ========== 判题徽章图标 ========== */
.result-correct::before { content: '✓ '; }
.result-partial::before { content: '≈ '; }
.result-incorrect::before { content: '✕ '; }

/* ========== 提交成功：图标弹跳 + 彩带 ========== */
.success-icon {
  animation: iconPop 0.65s var(--ease-spring), successPulse 2s 0.8s ease-in-out infinite;
}
@keyframes iconPop {
  from { opacity: 0; transform: scale(0.3); }
  60% { transform: scale(1.18); }
  to { opacity: 1; transform: scale(1); }
}
.success-message h2 { animation: heroFadeUp 0.6s 0.25s var(--ease-out) backwards; }
.success-message p { animation: heroFadeUp 0.6s 0.4s var(--ease-out) backwards; }
.confetti-piece {
  position: fixed;
  top: -14px;
  z-index: 999;
  border-radius: 2px;
  pointer-events: none;
  animation: confettiFall var(--dur, 3s) cubic-bezier(0.25, 0.4, 0.6, 1) var(--delay, 0s) forwards;
  opacity: 0.95;
}
@keyframes confettiFall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0.95; }
  85% { opacity: 0.85; }
  100% { transform: translate(var(--x, 0px), 106vh) rotate(var(--r, 540deg)); opacity: 0; }
}

/* ========== 成绩卡入场（错题卡错落渐入） ========== */
@media (prefers-reduced-motion: no-preference) {
  .question-review {
    animation: qEnter 0.5s var(--ease-out) both;
    animation-delay: calc(min(var(--qi, 0), 12) * 42ms + 150ms);
  }
}

/* ============================================================
   v8 美化增强 — 学生端信息层级与移动端体验
   ============================================================ */

/* ========== 答题页头部信息 ========== */
.survey-header {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, var(--accent-a2), transparent 30%),
    radial-gradient(circle at 8% 0%, var(--tint-3), transparent 34%),
    linear-gradient(135deg, var(--answer-glass), var(--answer-paper));
  border: 1px solid var(--tint-3);
  border-radius: var(--radius-xl);
  padding: 34px 36px 28px;
  margin: -32px -32px 28px;
}
.survey-header::after {
  content: '';
  position: absolute;
  right: -38px;
  bottom: -66px;
  width: 180px;
  height: 180px;
  border: 24px solid var(--tint-2);
  border-radius: 50%;
  pointer-events: none;
}
.survey-header h1,
.survey-header .survey-code,
.survey-header .survey-description,
.survey-header .survey-meta,
.survey-header .survey-guide { position: relative; z-index: 1; }
.survey-header h1 { letter-spacing: -0.5px; }
.survey-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 5px 12px;
  border: 1px solid var(--tint-3);
  border-radius: var(--radius-full);
  background: var(--answer-glass);
  color: var(--text-secondary);
}
.survey-code span { color: var(--primary); font-weight: 800; letter-spacing: 0.6px; }
.survey-description {
  max-width: 720px;
  margin-top: 16px;
  padding-left: 14px;
  border-left: 3px solid var(--tint-4);
}
.survey-meta { gap: 18px; }
.survey-meta-item { display: inline-flex; align-items: center; gap: 7px; }
.meta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 0 4px var(--tint-2);
}
.survey-guide {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 720px;
  margin-top: 18px;
  padding: 11px 14px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid var(--tint-3);
  border-radius: var(--radius-md);
  background: var(--answer-glass);
}
.survey-guide b { color: var(--error); }
.survey-guide-icon { display: inline-flex; color: var(--primary); flex-shrink: 0; }

/* ========== 姓名填写区 ========== */
.name-field {
  position: relative;
  padding: 18px 20px 16px 22px;
  margin-bottom: 24px;
  border: 1px solid var(--tint-3);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--tint-1), var(--accent-a1));
}
.name-field::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}
.name-field label { font-size: 15px; font-weight: 800; }
.name-field .form-control { margin-top: 8px; background: var(--answer-glass-strong); }
.name-field .form-help { margin-top: 7px; }

/* ========== 提交区 ========== */
.survey-submit-area {
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}
.submit-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--text-tertiary);
  font-size: 12px;
}
.submit-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--success);
  background: var(--success-bg);
  font-size: 11px;
  font-weight: 800;
}
.survey-submit-area .btn-arrow { transition: transform var(--duration-fast) var(--ease-spring); }
.survey-submit-area .btn:hover .btn-arrow { transform: translateX(4px); }

/* ========== 成绩查询头部 ========== */
.results-search-card { padding: 24px 28px 28px; }
.search-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto 16px;
}
.search-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: var(--primary);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--tint-3), var(--accent-a2));
}
.search-panel-head h2 { font-size: 17px; font-weight: 800; }
.search-panel-head p { margin-top: 2px; color: var(--text-secondary); font-size: 12px; }

/* ========== 结果卡头部与错题区域 ========== */
.submission-header h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.submission-header h2 .ml-8 { margin-left: 2px; }
.submission-info > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.submission-info > span:first-child::before { content: '◷'; color: var(--primary-light); font-size: 15px; }
.answer-review-list { display: flex; flex-direction: column; gap: 0; }
.pending-result {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--warning-a1);
  background: linear-gradient(135deg, var(--pending-veil), var(--answer-glass-strong));
}
.pending-result-icon { display: inline-flex; color: var(--accent); flex-shrink: 0; }
.detail-toolbar {
  padding: 14px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--surface-glass);
}
.detail-toolbar h3 { display: flex; align-items: center; gap: 9px; }
.detail-toolbar h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}
.submission-card.only-wrong .only-wrong-empty { display: block; }
.only-wrong-empty { display: none; }

/* ========== 小屏精细适配 ========== */
@media (max-width: 720px) {
  .survey-header { margin: -24px -24px 22px; padding: 26px 22px 22px; border-radius: var(--radius-lg); }
  .survey-header h1 { font-size: 24px; }
  .survey-meta { gap: 10px 16px; flex-wrap: wrap; }
  .survey-guide { align-items: flex-start; }
  .name-field { padding-left: 18px; }
  .results-search-card { padding: 20px 16px 22px; }
  .search-panel-head { margin-bottom: 14px; }
  .submission-header { padding-bottom: 18px; margin-bottom: 22px; }
  .submission-header h2 { font-size: 20px; }
  .score-info { width: 100%; }
  .detail-toolbar { align-items: stretch; }
}
@media (max-width: 480px) {
  .survey-header { margin: -24px -24px 20px; padding: 24px 18px 20px; }
  .survey-header h1 { font-size: 22px; }
  .survey-code { font-size: 12px; }
  .survey-guide { font-size: 12px; }
  .question-item { padding: 20px 16px; }
  .question-header { align-items: flex-start; flex-direction: column; gap: 9px; }
  .question-type { align-self: flex-start; }
  .radio-item, .checkbox-item { padding: 13px 42px 13px 13px; gap: 10px; }
  .submit-hint { text-align: center; }
  .score-ring-wrap { width: 164px; height: 164px; }
  .score-ring-center .score-num { font-size: 40px; }
  .question-review { padding: 18px 15px; }
  .question-review-header h3 { font-size: 15px; }
  .answer-section { padding: 13px; }
}

/* ========== 可访问性：减少动画时保持布局 ========== */
@media (prefers-reduced-motion: reduce) {
  .hero h1,
  .hero p,
  .hero .search-box,
  .success-message h2,
  .success-message p,
  .grade-badge,
  .ring-fill,
  .confetti-piece { animation: none !important; transition: none !important; }
  .confetti-piece { display: none; }
}

/* ============================================================
   v9 设备适配 — 电脑端 / 平板 / 手机 独立交互优化
   ============================================================ */

/* ========== 通用：触屏设备交互增强 ========== */
.touch-ui .nav a,
.touch-ui .btn,
.touch-ui .search-submit,
.touch-ui .radio-item,
.touch-ui .checkbox-item {
  -webkit-tap-highlight-color: var(--tint-3);
}
.touch-ui .btn,
.touch-ui .nav a {
  touch-action: manipulation;
}
/* 触屏设备禁用悬停依赖，避免点按后 hover 状态粘滞 */
@media (hover: none) {
  .card:hover,
  .glass-card:hover,
  .question-item:hover,
  .question-card:hover,
  .feature-card:hover,
  .result-item:hover,
  .btn:hover,
  .nav a:hover { transform: none; }
  .radio-item:hover,
  .checkbox-item:hover { background: var(--surface); border-color: var(--border); }
}

/* ========== 电脑端（≥1280px）：充分留白与悬停反馈 ========== */
@media (min-width: 1280px) {
  .container { max-width: 1180px; }
  .hero { padding: 96px 24px 64px; }
  .hero h1 { font-size: 56px; }
  .question-item, .question-card { padding: 36px; }
  .radio-item, .checkbox-item { padding: 16px 54px 16px 20px; }
  .card, .glass-card { padding: 40px; }
}

/* ========== 平板（769px ~ 1279px）：紧凑两栏与横向导航 ========== */
@media (min-width: 769px) and (max-width: 1279px) {
  .container { max-width: 100%; padding: 0 32px; }
  .hero { padding: 72px 24px 48px; }
  .features { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .card, .glass-card { padding: 28px; }
  .question-item, .question-card { padding: 26px; }

  /* 平板：题目导航由右侧悬浮改为顶部横向胶囊，贴近内容便于点按 */
  .q-nav.q-nav-tablet {
    position: sticky;
    top: 64px;
    right: auto;
    left: 0;
    transform: none;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    max-height: none;
    padding: 10px 12px;
    margin: 0 0 16px;
    border-radius: var(--radius-lg);
    overflow-x: auto;
    z-index: 60;
    box-shadow: var(--shadow-sm);
    justify-content: flex-start;
  }
  .q-nav.q-nav-tablet .q-nav-dot { width: 32px; height: 32px; flex-shrink: 0; }
}

/* ========== 手机（≤768px）：触控优先，底部导航 ========== */
@media (max-width: 768px) {
  .container { padding: 0 14px; }
  .card, .glass-card { padding: 20px 16px; border-radius: var(--radius-lg); }
  .hero { padding: 48px 16px 32px; }
  .hero h1 { font-size: 30px; letter-spacing: -0.5px; }

  /* 手机：题目导航改为底部悬浮横向进度条，点按热区更大 */
  .q-nav.q-nav-phone {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    transform: none;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    max-height: none;
    padding: 8px 12px;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow-x: auto;
    z-index: 190;
    box-shadow: 0 -4px 20px var(--black-a08);
    justify-content: flex-start;
    border: none;
    border-top: 1px solid var(--tint-3);
  }
  .q-nav.q-nav-phone .q-nav-dot {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    font-size: 0;
  }
  .q-nav.q-nav-phone .q-nav-dot.answered { transform: scale(1.2); }
  .q-nav.q-nav-phone .q-nav-dot.current { transform: scale(1.45); }

  /* 手机：底部导航与回顶按钮错位，避免重叠 */
  .back-to-top { bottom: 84px; }

  /* 手机：提交按钮更大，便于拇指点按 */
  .survey-submit-area .btn { padding: 16px 24px; font-size: 16px; }

  /* 手机：选项触控热区加大 */
  .radio-item, .checkbox-item { min-height: 52px; }
  .radio-item input, .checkbox-item input { width: 20px; height: 20px; }

  /* 手机：分页按钮加大，筛选栏纵向堆叠 */
  .pagination { gap: 10px; }
  .pagination .btn { padding: 10px 16px; }
  .filter-form { flex-direction: column; align-items: stretch; }
  .filter-field { min-width: 0; }

  /* 手机：表格操作按钮全宽，便于点按 */
  .table-wrapper td .actions { justify-content: flex-start; flex-wrap: wrap; }
  .table-wrapper td .actions .btn { flex: 1; min-width: 72px; }
}

/* ========== 手机横屏 / 小平板提示 ========== */
@media (max-width: 768px) and (orientation: landscape) {
  .hero { padding: 28px 16px 20px; }
  .hero h1 { font-size: 26px; }
  .q-nav.q-nav-phone { padding: 6px 10px; }
}

/* ============================================================
   v10 多语言切换器
   ============================================================ */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 2px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.lang-switch .lang-opt {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.18s ease, color 0.18s ease;
}
.lang-switch .lang-opt:hover { color: var(--primary); }
.lang-switch .lang-opt.active {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--on-primary);
}
.lang-switch .lang-divider {
  color: var(--border);
  font-size: 11px;
}

/* 登录页内的语言切换器居中 */
.login-card > .lang-switch {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* ============================================
   主题切换按钮
   三态：auto（半圆）/ light（太阳）/ dark（月亮）
   ============================================ */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--theme-toggle-size);
  height: var(--theme-toggle-size);
  margin: 0 2px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  overflow: hidden;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover {
  color: var(--primary);
  border-color: var(--primary-light);
  box-shadow: var(--shadow-sm);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-glow);
}

.theme-toggle .theme-icon {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: rotate(-70deg) scale(0.4);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-spring);
  pointer-events: none;
}

/* 当前态对应的图标显示，其余淡出上移 */
.theme-toggle[data-mode="auto"]  .theme-icon-auto,
.theme-toggle[data-mode="light"] .theme-icon-sun,
.theme-toggle[data-mode="dark"]  .theme-icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.theme-toggle[data-mode="auto"]  .theme-icon-sun,
.theme-toggle[data-mode="auto"]  .theme-icon-moon,
.theme-toggle[data-mode="light"] .theme-icon-auto,
.theme-toggle[data-mode="light"] .theme-icon-moon,
.theme-toggle[data-mode="dark"]  .theme-icon-auto,
.theme-toggle[data-mode="dark"]  .theme-icon-sun {
  opacity: 0;
  transform: rotate(70deg) scale(0.4) translateY(-6px);
}

.theme-toggle .theme-toggle-label {
  position: absolute;
  bottom: -18px;
  font-size: 10px;
  line-height: 1;
  color: var(--text-tertiary);
  white-space: nowrap;
  pointer-events: none;
}

/* 仅供读屏 */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 未启用 JS 时按钮无意义，隐藏 */
html.no-js .theme-toggle { display: none; }

/* ============================================================
   v12「墨青纸感」精修覆盖层
   放在文件末尾以覆盖前面的基础规则：
   1) 统一描边（印刷感的关键： everywhere 用边框而非阴影）
   2) 收紧阴影、加高光内线
   3) 暗色专用修正
   4) 暗色下的滚动条 / 选中文本 / 焦点环
   ============================================================ */

/* ---------- 1. 卡片：描边为主，阴影更浅 ---------- */
.card, .glass-card {
  border: var(--bw-hairline) solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
}
.card:hover, .glass-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* 卡片顶部一条主色细线，替代原来的发光边框 */
.card.accent-top::before,
.glass-card.accent-top::before {
  content: '';
  position: absolute;
  top: 0; left: var(--radius-lg); right: var(--radius-lg);
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--radius-full);
}

/* ---------- 2. 按钮：内高光 + 更实的按压反馈 ---------- */
.btn {
  border-radius: var(--radius-md);
  letter-spacing: 0;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn-primary,
.btn-danger,
.btn-success {
  border: var(--bw-hairline) solid transparent;
  box-shadow:
    inset 0 1px 0 var(--on-primary-a30),
    0 1px 2px var(--black-a08);
}
.btn-primary:hover,
.btn-danger:hover,
.btn-success:hover {
  transform: translateY(-1px);
}
.btn-primary:hover {
  box-shadow: inset 0 1px 0 var(--on-primary-a30), 0 4px 14px var(--primary-glow);
}
.btn-danger:hover {
  box-shadow: inset 0 1px 0 var(--on-primary-a30), 0 4px 14px var(--error-a3);
}
.btn-success:hover {
  box-shadow: inset 0 1px 0 var(--on-primary-a30), 0 4px 14px var(--success-a3);
}

/* 次要按钮改为描边式，层级更清楚 */
.btn-secondary {
  background: var(--surface);
  color: var(--primary);
  border: var(--bw-hairline) solid var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background: var(--surface-hover);
  border-color: var(--primary-light);
  color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
}
.btn-outline {
  border-width: var(--bw-hairline);
  border-radius: var(--radius-md);
}

/* ---------- 3. 表单：标签在上、控件有内高光 ---------- */
.form-control {
  border-width: var(--bw-hairline);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 2px var(--black-a06);
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ---------- 4. 表格：表头更轻，行分隔更淡 ---------- */
.table-wrapper {
  border: var(--bw-hairline) solid var(--border);
  box-shadow: var(--shadow-sm);
}
th {
  background: var(--surface-sunken);
  color: var(--text-tertiary);
  border-bottom: var(--bw-hairline) solid var(--border);
  font-size: 11px;
  letter-spacing: 0.6px;
}
th, td { padding: 12px 16px; }
tbody tr:nth-child(even) { background: var(--surface-alt); }
tbody tr:hover { background: var(--surface-hover); }

/* ---------- 5. 徽章：改为描边式小标签 ---------- */
.badge, .result-badge {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0.3px;
  border: var(--bw-hairline) solid transparent;
}
.badge-active { border-color: var(--success-border); }
.badge-inactive { border-color: var(--error-border); }
.badge-graded { border-color: var(--border); }
.badge-pending { border-color: var(--warning-border); }
.result-correct { border-color: var(--success-border); }
.result-incorrect { border-color: var(--error-border); }
.result-partial { border-color: var(--warning-border); }

/* ---------- 6. 提示条：左侧竖线更细 ---------- */
.alert, .info-box {
  border-left-width: 3px;
  border-radius: var(--radius-md);
}

/* ---------- 7. 暗色专用 ---------- */
[data-theme="dark"] .card,
[data-theme="dark"] .glass-card {
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .form-control {
  box-shadow: inset 0 1px 2px var(--black-a10);
}

/* 暗色下滚动条要更明显 */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* 暗色下原生控件（日期选择器等）反色 */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] select.form-control {
  color-scheme: dark;
}

/* 暗色下 select 的箭头图标（data-uri 里写死了灰色，需反色覆盖） */
[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23A3AEAB' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- 8. 选中态在暗色下要更亮 ---------- */
[data-theme="dark"] ::selection {
  background: var(--primary-glow-strong);
  color: var(--text);
}

/* ---------- 9. 焦点可见（键盘导航）统一 ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- 10. 打印样式：强制亮色，避免打印出黑底 ---------- */
@media print {
  :root, [data-theme="dark"] {
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --text: #000000;
    --text-secondary: #333333;
    --border: #CCCCCC;
  }
  body { background: #FFFFFF !important; }
  body::before, body::after { display: none !important; }
  .header, .footer, .theme-toggle, .nav, .btn { display: none !important; }
  .card, .glass-card {
    box-shadow: none !important;
    border: 1px solid #CCCCCC !important;
    backdrop-filter: none !important;
  }
}

/* ========== 描边图标（iconSvg() 输出）通用规则 ========== */
/* 标题里的图标必须垂直居中：inline svg 默认基线对齐，跟 26-38px 的中文标题
   放一起会明显偏低。改用 flex 居中 + 轻微上浮，视觉上与文字中线对齐。 */
h1 > svg, h2 > svg, h3 > svg, h4 > svg,
.page-head-title > svg, .section-title > svg, .correct-header > svg {
  vertical-align: -0.18em;
  stroke-width: 2;
}
/* empty-state / 卡片里的图标放大到与原 emoji 视觉重量相当 */
.empty-state .icon svg { width: 40px; height: 40px; stroke-width: 1.6; }
.empty-state .icon { color: var(--text-tertiary); opacity: 0.75; }
/* 成绩徽章里的图标：与等级文字基线对齐 */
.grade-icon { display: inline-flex; align-items: center; vertical-align: -0.22em; margin-right: 4px; }
.grade-icon svg { width: 20px; height: 20px; stroke-width: 2; }
/* 按钮里的图标：与按钮文字同高 */
.btn > svg, .type-btn > svg, .nav a > svg {
  flex: 0 0 auto;
  vertical-align: -0.15em;
}
/* 提示条里的图标（edit.php 的「提示」） */
strong > svg { vertical-align: -0.15em; margin-right: 2px; }


/* ========== 导航宽度自适应（中等宽度，720–1100px） ========== */
/* 1100px 以下工具区文字（「前台首页」「主题：跟随系统」）会把主导航挤到只剩一两项，
   用户还得横向滚动才能看到「答卷批阅」——比原来的换行更糟。
   这里让工具区在窄屏只留图标（title 已有完整文案），把宽度让给主导航。
   ≤720px 走汉堡菜单，工具区恢复完整文字（纵向排列，不占横向空间）。 */
@media (max-width: 1100px) and (min-width: 721px) {
  .nav-tools .nav-external span,
  .nav-tools .nav-logout span { display: none; }
  .nav-tools .nav-external,
  .nav-tools .nav-logout { padding: 7px 9px; }
  /* 主题按钮只留图标：隐藏状态文字，图标已是按钮主体 */
  .nav-tools .theme-toggle-label { display: none; }
  .nav-tools .theme-toggle { padding: 7px 9px; }
  .nav-tools .nav-user-meta { display: none; }
  .nav-tools .nav-user { padding: 3px; background: transparent; }
  .nav-tools .nav-user .avatar { width: 28px; height: 28px; }
  .nav-tools .nav-divider { margin: 0 2px; }
}

/* ============================================================
   v13「现代柔和」精修覆盖层
   放在文件末尾以覆盖 v12 的描边式硬朗风格：
   1) 柔和阴影回归（带墨青色相，比 v12 的纯黑投影更干净）
   2) 按钮回到全圆角胶囊，主按钮加通透的柔光投影
   3) 卡片/面板柔影 + 悬停轻微抬升
   4) 品牌色统一：残留紫色全部换成青蓝系
   5) 头部与评分页头部渐变更精致
   ============================================================ */

/* ---------- 1. 按钮：全圆角胶囊 + 柔光投影 ---------- */
.btn {
  border-radius: var(--radius-full);
  letter-spacing: 0.1px;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary,
.btn-danger,
.btn-success {
  border: var(--bw-hairline) solid transparent;
  box-shadow:
    inset 0 1px 0 var(--on-primary-a30),
    0 2px 6px var(--black-a06),
    0 10px 24px var(--primary-glow-soft);
}
.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 var(--on-primary-a30),
    0 4px 10px var(--black-a08),
    0 16px 34px var(--primary-glow-soft);
}
.btn-danger:hover {
  box-shadow:
    inset 0 1px 0 var(--on-primary-a30),
    0 4px 10px var(--black-a08),
    0 16px 34px var(--error-a3);
}
.btn-success:hover {
  box-shadow:
    inset 0 1px 0 var(--on-primary-a30),
    0 4px 10px var(--black-a08),
    0 16px 34px var(--success-a3);
}

/* 次级/描边按钮同样走胶囊，不再是直角小圆角 */
.btn-outline {
  border-radius: var(--radius-full);
  border-width: var(--bw-hairline);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.btn-outline:hover {
  background: var(--surface-hover);
  box-shadow: var(--shadow-soft-md);
}
.btn-secondary {
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-soft);
}
.btn-secondary:hover { box-shadow: var(--shadow-soft-md); }

/* ---------- 2. 卡片：柔影 + 悬停抬升 ---------- */
.card,
.glass-card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}
.card:hover,
.glass-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-soft-lg);
  transform: translateY(-2px);
}
/* v12 里 [data-theme="dark"] 的特异度更高，这里补一条让暗色同样走柔影 */
[data-theme="dark"] .card,
[data-theme="dark"] .glass-card {
  box-shadow: var(--shadow-soft);
}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .glass-card:hover {
  box-shadow: var(--shadow-soft-lg);
}

/* 特色卡 / 后台卡 / 统计卡：抬升更明显，配柔影 */
.feature-card,
.admin-card,
.stat-card {
  box-shadow: var(--shadow-soft);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}
.feature-card:hover,
.admin-card:hover,
.stat-card:hover {
  box-shadow: var(--shadow-soft-lg);
  transform: translateY(-5px);
}
.stat-card:hover { transform: translateY(-3px); }

/* ---------- 3. 头部：滚动时柔和投影 + 墨青渐变标识 ---------- */
.header.scrolled {
  box-shadow: 0 2px 18px var(--black-a06);
}
.logo-mark {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  box-shadow: 0 4px 14px var(--primary-glow);
}

/* ---------- 4. 浮层：面板、提示条、弹窗、菜单 ---------- */
.toast,
.modal-content,
.nav-more-menu,
.detail-toolbar {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft-lg);
}
.grade-action-bar {
  box-shadow: 0 -8px 30px var(--black-a06);
}

/* ---------- 5. 评分页头部：换成墨青系光晕 ---------- */
.survey-header {
  background:
    radial-gradient(circle at 92% 8%, var(--primary-glow-soft), transparent 32%),
    radial-gradient(circle at 8% 0%, var(--tint-3), transparent 34%),
    linear-gradient(135deg, var(--answer-glass), var(--answer-paper));
}

/* ---------- 6. 表单控件：柔焦而非硬描边 ---------- */
.form-control,
.checkbox-label,
.radio-item {
  box-shadow: var(--shadow-soft);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}
.form-control:focus {
  box-shadow: var(--shadow-soft-md), 0 0 0 3px var(--primary-glow);
}