/* ============================================================
   遴选自习室 · 多主题设计系统
   深色 5 套 + 浅色 5 套，随主题切换；浅/深可按时段自动切换
   按「N. 模块」分节编号
   ============================================================ */

/* ---------- 1. 主题变量 ---------- */
/* 默认 = 深色·深空蓝（JS 未执行时兜底） */
:root,
html[data-theme="dark-blue"] {
  color-scheme: dark;
  --bg:        #070b14;
  --bg-2:      #0a101d;
  --surface:   #0f1626;
  --surface-2: #141d31;
  --surface-3: #1a2540;
  --line:      rgba(120, 165, 225, .13);
  --line-2:    rgba(120, 165, 225, .22);
  --hover:     rgba(120, 180, 255, .07);
  --active:    rgba(47, 123, 255, .14);
  --track:     rgba(120, 165, 225, .10);
  --veil:      rgba(4, 8, 16, .72);

  --text:      #e8f0fd;
  --text-2:    #b7c8e2;
  --text-3:    #8397b8;
  --text-4:    #5f7396;

  --brand-1:   #2f7bff;
  --brand-2:   #38d6ff;
  --brand-text:#7fc4ff;
  --grad:      linear-gradient(120deg, #2f7bff 0%, #38d6ff 100%);
  --grad-soft: linear-gradient(120deg, rgba(47,123,255,.16), rgba(56,214,255,.10));
  --ring:      rgba(47, 123, 255, .16);
  --ring-2:    rgba(47, 123, 255, .13);
  --glow:      rgba(47, 123, 255, .35);

  --danger:    #ff5c72;  --danger-soft: rgba(255,92,114,.13);  --danger-text:#ff8b9c;  --danger-line: rgba(255,92,114,.45);
  --warn:      #ffb547;  --warn-soft:   rgba(255,181,71,.13);   --warn-text:  #ffcb80;
  --success:   #2ee6a8;  --success-soft:rgba(46,230,168,.13);   --success-text:#6bf0c4; --success-line: rgba(46,230,168,.5);
  --gold:      #ffd479;  --gold-soft:   rgba(255,212,121,.13);  --gold-line:  rgba(255,212,121,.3); --gold-text:#ffe0a3;
  --info:      #7f9cff;  --info-soft:   rgba(127,156,255,.13);

  --body-glow-1: rgba(47,123,255,.16);
  --body-glow-2: rgba(56,214,255,.10);
  --body-grad:  linear-gradient(180deg, #070b14, #05080f);
  --scroll:     rgba(120,165,225,.22);
  --scroll-h:   rgba(120,165,225,.36);
  --glass:      rgba(10,16,29,.86);
  --glass-2:    rgba(9,14,26,.72);
  --card-grad:  linear-gradient(180deg, rgba(20,29,49,.72), rgba(15,22,38,.72));
  --kpi-grad:   linear-gradient(160deg, rgba(20,29,49,.9), rgba(12,18,31,.86));
  --qcard-grad: linear-gradient(180deg, rgba(20,29,49,.7), rgba(15,22,38,.7));
  --login-card: rgba(13,19,33,.82);
  --login-mask: linear-gradient(105deg, rgba(5,9,18,.94) 0%, rgba(5,9,18,.78) 44%, rgba(5,9,18,.4) 100%);
  --feat-bg:    rgba(15,22,38,.6);
  --legend-bg:  rgba(12,18,31,.8);
  --tip-bg:     rgba(12,18,31,.86);
  --toast-bg:   rgba(20,29,49,.96);
  --sb-veil:    rgba(4,8,16,.6);
  --shadow:     0 12px 40px rgba(2,6,16,.55);
  --shadow-sm:  0 4px 16px rgba(2,6,16,.4);
  --logo-glow:  rgba(47,123,255,.4);

  --grid:       rgba(120,165,225,.12);
  --axis:       #5f7396;
  --node-stroke:#0a101d;
  --node-text:  #b7c8e2;
  --ring-track: rgba(120,165,225,.14);
  --chart-1:#2f7bff; --chart-2:#38d6ff; --chart-3:#2ee6a8; --chart-4:#ffd479; --chart-5:#a78bfa;
  --chart-6:#7f9cff; --chart-7:#ff8b9c; --chart-8:#4ade80; --chart-9:#fb923c; --chart-10:#22d3ee;
}

/* 深色 · 墨玉青 */
html[data-theme="dark-cyan"] {
  color-scheme: dark;
  --bg:#06120f; --bg-2:#091a16; --surface:#0d211c; --surface-2:#122b25; --surface-3:#17372f;
  --line:rgba(120,225,205,.13); --line-2:rgba(120,225,205,.22); --hover:rgba(120,255,225,.07);
  --active:rgba(23,184,166,.16); --track:rgba(120,225,205,.10); --veil:rgba(3,14,11,.72);
  --text:#e6faf5; --text-2:#b3dfd5; --text-3:#7fb3a8; --text-4:#5c8b82;
  --brand-1:#17b8a6; --brand-2:#4fe3c1; --brand-text:#74e8cf;
  --grad:linear-gradient(120deg,#17b8a6 0%,#4fe3c1 100%);
  --grad-soft:linear-gradient(120deg, rgba(23,184,166,.16), rgba(79,227,193,.10));
  --ring:rgba(23,184,166,.18); --ring-2:rgba(23,184,166,.13); --glow:rgba(23,184,166,.35);
  --body-glow-1:rgba(23,184,166,.16); --body-glow-2:rgba(79,227,193,.10);
  --body-grad:linear-gradient(180deg,#06120f,#040d0b);
  --scroll:rgba(120,225,205,.22); --scroll-h:rgba(120,225,205,.38);
  --glass:rgba(9,26,22,.86); --glass-2:rgba(8,22,19,.74);
  --card-grad:linear-gradient(180deg, rgba(18,43,37,.72), rgba(13,33,28,.72));
  --kpi-grad:linear-gradient(160deg, rgba(18,43,37,.9), rgba(10,26,22,.86));
  --qcard-grad:linear-gradient(180deg, rgba(18,43,37,.7), rgba(13,33,28,.7));
  --login-card:rgba(12,30,26,.84);
  --login-mask:linear-gradient(105deg, rgba(4,15,12,.94) 0%, rgba(4,15,12,.78) 44%, rgba(4,15,12,.4) 100%);
  --feat-bg:rgba(13,33,28,.6); --legend-bg:rgba(10,26,22,.82); --tip-bg:rgba(10,26,22,.88);
  --toast-bg:rgba(18,43,37,.96); --sb-veil:rgba(3,14,11,.6);
  --shadow:0 12px 40px rgba(1,10,8,.55); --shadow-sm:0 4px 16px rgba(1,10,8,.4);
  --logo-glow:rgba(23,184,166,.4);
  --grid:rgba(120,225,205,.12); --axis:#5c8b82; --node-stroke:#091a16; --node-text:#b3dfd5;
  --ring-track:rgba(120,225,205,.14);
  --chart-1:#17b8a6; --chart-2:#4fe3c1; --chart-3:#2ee6a8; --chart-4:#ffd479; --chart-5:#5eead4;
  --chart-6:#7fd8c4; --chart-7:#ff8b9c; --chart-8:#4ade80; --chart-9:#fb923c; --chart-10:#22d3ee;
}

/* 深色 · 夜幕紫 */
html[data-theme="dark-violet"] {
  color-scheme: dark;
  --bg:#0b0817; --bg-2:#100c1f; --surface:#161028; --surface-2:#1d1635; --surface-3:#241c42;
  --line:rgba(190,170,255,.14); --line-2:rgba(190,170,255,.24); --hover:rgba(200,180,255,.08);
  --active:rgba(139,92,246,.18); --track:rgba(190,170,255,.10); --veil:rgba(8,5,18,.72);
  --text:#efe9ff; --text-2:#c6b9ea; --text-3:#9584bb; --text-4:#6f5f93;
  --brand-1:#8b5cf6; --brand-2:#c084fc; --brand-text:#c4a8ff;
  --grad:linear-gradient(120deg,#8b5cf6 0%,#c084fc 100%);
  --grad-soft:linear-gradient(120deg, rgba(139,92,246,.18), rgba(192,132,252,.10));
  --ring:rgba(139,92,246,.20); --ring-2:rgba(139,92,246,.14); --glow:rgba(139,92,246,.4);
  --body-glow-1:rgba(139,92,246,.18); --body-glow-2:rgba(192,132,252,.10);
  --body-grad:linear-gradient(180deg,#0b0817,#070512);
  --scroll:rgba(190,170,255,.22); --scroll-h:rgba(190,170,255,.38);
  --glass:rgba(16,12,31,.86); --glass-2:rgba(14,10,28,.74);
  --card-grad:linear-gradient(180deg, rgba(29,22,53,.72), rgba(22,16,40,.72));
  --kpi-grad:linear-gradient(160deg, rgba(29,22,53,.9), rgba(17,12,32,.86));
  --qcard-grad:linear-gradient(180deg, rgba(29,22,53,.7), rgba(22,16,40,.7));
  --login-card:rgba(22,16,40,.84);
  --login-mask:linear-gradient(105deg, rgba(9,6,20,.94) 0%, rgba(9,6,20,.78) 44%, rgba(9,6,20,.4) 100%);
  --feat-bg:rgba(22,16,40,.6); --legend-bg:rgba(17,12,32,.82); --tip-bg:rgba(17,12,32,.88);
  --toast-bg:rgba(29,22,53,.96); --sb-veil:rgba(8,5,18,.6);
  --shadow:0 12px 40px rgba(5,3,14,.6); --shadow-sm:0 4px 16px rgba(5,3,14,.42);
  --logo-glow:rgba(139,92,246,.45);
  --grid:rgba(190,170,255,.12); --axis:#6f5f93; --node-stroke:#100c1f; --node-text:#c6b9ea;
  --ring-track:rgba(190,170,255,.14);
  --chart-1:#8b5cf6; --chart-2:#c084fc; --chart-3:#2ee6a8; --chart-4:#ffd479; --chart-5:#38d6ff;
  --chart-6:#a78bfa; --chart-7:#ff8b9c; --chart-8:#4ade80; --chart-9:#fb923c; --chart-10:#22d3ee;
}

/* 深色 · 暗夜金 */
html[data-theme="dark-amber"] {
  color-scheme: dark;
  --bg:#120d06; --bg-2:#1a1208; --surface:#22180c; --surface-2:#2c2010; --surface-3:#382917;
  --line:rgba(255,210,140,.14); --line-2:rgba(255,210,140,.24); --hover:rgba(255,220,160,.08);
  --active:rgba(240,160,32,.17); --track:rgba(255,210,140,.10); --veil:rgba(14,9,4,.72);
  --text:#fdf2e0; --text-2:#e5cdac; --text-3:#b89a71; --text-4:#8b7350;
  --brand-1:#f0a020; --brand-2:#ffd479; --brand-text:#ffce7a;
  --grad:linear-gradient(120deg,#f0a020 0%,#ffd479 100%);
  --grad-soft:linear-gradient(120deg, rgba(240,160,32,.18), rgba(255,212,121,.10));
  --ring:rgba(240,160,32,.20); --ring-2:rgba(240,160,32,.14); --glow:rgba(240,160,32,.4);
  --body-glow-1:rgba(240,160,32,.16); --body-glow-2:rgba(255,212,121,.10);
  --body-grad:linear-gradient(180deg,#120d06,#0a0703);
  --scroll:rgba(255,210,140,.22); --scroll-h:rgba(255,210,140,.38);
  --glass:rgba(26,18,8,.86); --glass-2:rgba(23,16,7,.74);
  --card-grad:linear-gradient(180deg, rgba(44,32,16,.72), rgba(34,24,12,.72));
  --kpi-grad:linear-gradient(160deg, rgba(44,32,16,.9), rgba(26,18,9,.86));
  --qcard-grad:linear-gradient(180deg, rgba(44,32,16,.7), rgba(34,24,12,.7));
  --login-card:rgba(34,24,12,.84);
  --login-mask:linear-gradient(105deg, rgba(15,10,5,.94) 0%, rgba(15,10,5,.78) 44%, rgba(15,10,5,.4) 100%);
  --feat-bg:rgba(34,24,12,.6); --legend-bg:rgba(26,18,9,.82); --tip-bg:rgba(26,18,9,.88);
  --toast-bg:rgba(44,32,16,.96); --sb-veil:rgba(14,9,4,.6);
  --shadow:0 12px 40px rgba(10,6,2,.6); --shadow-sm:0 4px 16px rgba(10,6,2,.42);
  --logo-glow:rgba(240,160,32,.45);
  --grid:rgba(255,210,140,.12); --axis:#8b7350; --node-stroke:#1a1208; --node-text:#e5cdac;
  --ring-track:rgba(255,210,140,.14);
  --chart-1:#f0a020; --chart-2:#ffd479; --chart-3:#2ee6a8; --chart-4:#38d6ff; --chart-5:#a78bfa;
  --chart-6:#ffce7a; --chart-7:#ff8b9c; --chart-8:#4ade80; --chart-9:#fb923c; --chart-10:#22d3ee;
}

/* 深色 · 玄石红 */
html[data-theme="dark-rose"] {
  color-scheme: dark;
  --bg:#140609; --bg-2:#1d0a0f; --surface:#260e15; --surface-2:#31131b; --surface-3:#3e1822;
  --line:rgba(255,170,190,.14); --line-2:rgba(255,170,190,.24); --hover:rgba(255,190,205,.08);
  --active:rgba(240,80,110,.17); --track:rgba(255,170,190,.10); --veil:rgba(16,5,8,.72);
  --text:#fdeef1; --text-2:#e6c4cc; --text-3:#b88b96; --text-4:#8b6670;
  --brand-1:#f0506e; --brand-2:#ff8ba0; --brand-text:#ff9fb2;
  --grad:linear-gradient(120deg,#f0506e 0%,#ff8ba0 100%);
  --grad-soft:linear-gradient(120deg, rgba(240,80,110,.18), rgba(255,139,160,.10));
  --ring:rgba(240,80,110,.20); --ring-2:rgba(240,80,110,.14); --glow:rgba(240,80,110,.4);
  --body-glow-1:rgba(240,80,110,.17); --body-glow-2:rgba(255,139,160,.10);
  --body-grad:linear-gradient(180deg,#140609,#0c0406);
  --scroll:rgba(255,170,190,.22); --scroll-h:rgba(255,170,190,.38);
  --glass:rgba(29,10,15,.86); --glass-2:rgba(26,9,13,.74);
  --card-grad:linear-gradient(180deg, rgba(49,19,27,.72), rgba(38,14,21,.72));
  --kpi-grad:linear-gradient(160deg, rgba(49,19,27,.9), rgba(30,11,17,.86));
  --qcard-grad:linear-gradient(180deg, rgba(49,19,27,.7), rgba(38,14,21,.7));
  --login-card:rgba(38,14,21,.84);
  --login-mask:linear-gradient(105deg, rgba(17,6,9,.94) 0%, rgba(17,6,9,.78) 44%, rgba(17,6,9,.4) 100%);
  --feat-bg:rgba(38,14,21,.6); --legend-bg:rgba(30,11,17,.82); --tip-bg:rgba(30,11,17,.88);
  --toast-bg:rgba(49,19,27,.96); --sb-veil:rgba(16,5,8,.6);
  --shadow:0 12px 40px rgba(12,4,6,.6); --shadow-sm:0 4px 16px rgba(12,4,6,.42);
  --logo-glow:rgba(240,80,110,.45);
  --grid:rgba(255,170,190,.12); --axis:#8b6670; --node-stroke:#1d0a0f; --node-text:#e6c4cc;
  --ring-track:rgba(255,170,190,.14);
  --chart-1:#f0506e; --chart-2:#ff8ba0; --chart-3:#2ee6a8; --chart-4:#ffd479; --chart-5:#a78bfa;
  --chart-6:#ff9fb2; --chart-7:#38d6ff; --chart-8:#4ade80; --chart-9:#fb923c; --chart-10:#22d3ee;
}

/* 浅色 · 晨光蓝 */
html[data-theme="light-blue"] {
  color-scheme: light;
  --bg:#f2f6fd; --bg-2:#eaf0fa; --surface:#ffffff; --surface-2:#f5f8fd; --surface-3:#eceff7;
  --line:rgba(40,80,150,.13); --line-2:rgba(40,80,150,.22); --hover:rgba(47,123,255,.06);
  --active:rgba(47,123,255,.11); --track:rgba(40,80,150,.10); --veil:rgba(25,40,70,.35);
  --text:#0f1a2e; --text-2:#35465f; --text-3:#5f7290; --text-4:#8a9ab2;
  --brand-1:#2f7bff; --brand-2:#1aa8d4; --brand-text:#1f6fe0;
  --grad:linear-gradient(120deg,#2f7bff 0%,#1aa8d4 100%);
  --grad-soft:linear-gradient(120deg, rgba(47,123,255,.12), rgba(26,168,212,.08));
  --ring:rgba(47,123,255,.18); --ring-2:rgba(47,123,255,.14); --glow:rgba(47,123,255,.28);
  --danger:#e5445c; --danger-soft:rgba(229,68,92,.10); --danger-text:#c62b44; --danger-line:rgba(229,68,92,.38);
  --warn:#d68a10; --warn-soft:rgba(214,138,16,.12); --warn-text:#a9670a;
  --success:#12a06a; --success-soft:rgba(18,160,106,.12); --success-text:#0b7a50; --success-line:rgba(18,160,106,.4);
  --gold:#b58516; --gold-soft:rgba(181,133,22,.13); --gold-line:rgba(181,133,22,.28); --gold-text:#8f6a0d;
  --info:#4f74e8; --info-soft:rgba(79,116,232,.12);
  --body-glow-1:rgba(47,123,255,.10); --body-glow-2:rgba(26,168,212,.08);
  --body-grad:linear-gradient(180deg,#f2f6fd,#e8eef8);
  --scroll:rgba(70,110,170,.26); --scroll-h:rgba(70,110,170,.42);
  --glass:rgba(255,255,255,.86); --glass-2:rgba(255,255,255,.78);
  --card-grad:linear-gradient(180deg,#ffffff,#fafcff);
  --kpi-grad:linear-gradient(160deg,#ffffff,#f2f7fd);
  --qcard-grad:linear-gradient(180deg,#ffffff,#fbfcff);
  --login-card:rgba(255,255,255,.92);
  --login-mask:linear-gradient(100deg, rgba(242,246,253,.97) 0%, rgba(242,246,253,.92) 34%, rgba(242,246,253,.48) 58%, rgba(242,246,253,.12) 100%);
  --feat-bg:rgba(255,255,255,.72); --legend-bg:rgba(255,255,255,.86); --tip-bg:rgba(255,255,255,.92);
  --toast-bg:rgba(255,255,255,.97); --sb-veil:rgba(30,45,80,.32);
  --shadow:0 12px 40px rgba(30,60,120,.14); --shadow-sm:0 4px 16px rgba(30,60,120,.10);
  --logo-glow:rgba(47,123,255,.3);
  --grid:rgba(40,80,150,.12); --axis:#8a9ab2; --node-stroke:#ffffff; --node-text:#35465f;
  --ring-track:rgba(40,80,150,.14);
  --chart-1:#2f7bff; --chart-2:#1aa8d4; --chart-3:#12a06a; --chart-4:#d99a15; --chart-5:#7c5cf0;
  --chart-6:#4f74e8; --chart-7:#e04b6c; --chart-8:#31b46a; --chart-9:#e07a2a; --chart-10:#0f9bb8;
}

/* 浅色 · 竹青 */
html[data-theme="light-emerald"] {
  color-scheme: light;
  --bg:#f0f8f6; --bg-2:#e8f3f0; --surface:#ffffff; --surface-2:#f3faf8; --surface-3:#e9f2ef;
  --line:rgba(30,110,95,.13); --line-2:rgba(30,110,95,.22); --hover:rgba(18,160,134,.07);
  --active:rgba(18,160,134,.12); --track:rgba(30,110,95,.10); --veil:rgba(20,60,52,.32);
  --text:#0c211d; --text-2:#2f4f48; --text-3:#577872; --text-4:#80a09a;
  --brand-1:#12a08c; --brand-2:#0f8f79; --brand-text:#0d806d;
  --grad:linear-gradient(120deg,#12a08c 0%,#3fc9ab 100%);
  --grad-soft:linear-gradient(120deg, rgba(18,160,140,.13), rgba(63,201,171,.08));
  --ring:rgba(18,160,140,.20); --ring-2:rgba(18,160,140,.14); --glow:rgba(18,160,140,.26);
  --danger:#e0455c; --danger-soft:rgba(224,69,92,.10); --danger-text:#c02a42; --danger-line:rgba(224,69,92,.36);
  --warn:#cf8a12; --warn-soft:rgba(207,138,18,.12); --warn-text:#a2660b;
  --success:#12a06a; --success-soft:rgba(18,160,106,.12); --success-text:#0b7a50; --success-line:rgba(18,160,106,.4);
  --gold:#a98416; --gold-soft:rgba(169,132,22,.13); --gold-line:rgba(169,132,22,.28); --gold-text:#836309;
  --info:#4a72d8; --info-soft:rgba(74,114,216,.12);
  --body-glow-1:rgba(18,160,140,.11); --body-glow-2:rgba(63,201,171,.08);
  --body-grad:linear-gradient(180deg,#f0f8f6,#e4f1ee);
  --scroll:rgba(50,110,100,.26); --scroll-h:rgba(50,110,100,.42);
  --glass:rgba(255,255,255,.86); --glass-2:rgba(255,255,255,.78);
  --card-grad:linear-gradient(180deg,#ffffff,#f9fdfc);
  --kpi-grad:linear-gradient(160deg,#ffffff,#f1faf8);
  --qcard-grad:linear-gradient(180deg,#ffffff,#fbfdfd);
  --login-card:rgba(255,255,255,.92);
  --login-mask:linear-gradient(100deg, rgba(240,248,246,.97) 0%, rgba(240,248,246,.92) 34%, rgba(240,248,246,.48) 58%, rgba(240,248,246,.12) 100%);
  --feat-bg:rgba(255,255,255,.72); --legend-bg:rgba(255,255,255,.86); --tip-bg:rgba(255,255,255,.92);
  --toast-bg:rgba(255,255,255,.97); --sb-veil:rgba(24,70,62,.32);
  --shadow:0 12px 40px rgba(20,80,70,.13); --shadow-sm:0 4px 16px rgba(20,80,70,.09);
  --logo-glow:rgba(18,160,140,.3);
  --grid:rgba(30,110,95,.12); --axis:#80a09a; --node-stroke:#ffffff; --node-text:#2f4f48;
  --ring-track:rgba(30,110,95,.14);
  --chart-1:#12a08c; --chart-2:#0f8f79; --chart-3:#3fc9ab; --chart-4:#cf8a12; --chart-5:#7c5cf0;
  --chart-6:#4a72d8; --chart-7:#e0455c; --chart-8:#31b46a; --chart-9:#e07a2a; --chart-10:#0f9bb8;
}

/* 浅色 · 紫罗兰 */
html[data-theme="light-violet"] {
  color-scheme: light;
  --bg:#f5f3fd; --bg-2:#efeafb; --surface:#ffffff; --surface-2:#f8f6fe; --surface-3:#f0ecfa;
  --line:rgba(90,60,170,.13); --line-2:rgba(90,60,170,.22); --hover:rgba(124,77,255,.07);
  --active:rgba(124,77,255,.12); --track:rgba(90,60,170,.10); --veil:rgba(45,30,90,.32);
  --text:#1a1030; --text-2:#40325e; --text-3:#6a5a8c; --text-4:#9385b0;
  --brand-1:#7c4dff; --brand-2:#9b6bff; --brand-text:#6531e8;
  --grad:linear-gradient(120deg,#7c4dff 0%,#b06bff 100%);
  --grad-soft:linear-gradient(120deg, rgba(124,77,255,.13), rgba(176,107,255,.08));
  --ring:rgba(124,77,255,.20); --ring-2:rgba(124,77,255,.14); --glow:rgba(124,77,255,.28);
  --danger:#e0455c; --danger-soft:rgba(224,69,92,.10); --danger-text:#c02a42; --danger-line:rgba(224,69,92,.36);
  --warn:#cf8a12; --warn-soft:rgba(207,138,18,.12); --warn-text:#a2660b;
  --success:#12a06a; --success-soft:rgba(18,160,106,.12); --success-text:#0b7a50; --success-line:rgba(18,160,106,.4);
  --gold:#a98416; --gold-soft:rgba(169,132,22,.13); --gold-line:rgba(169,132,22,.28); --gold-text:#836309;
  --info:#4a72d8; --info-soft:rgba(74,114,216,.12);
  --body-glow-1:rgba(124,77,255,.11); --body-glow-2:rgba(176,107,255,.08);
  --body-grad:linear-gradient(180deg,#f5f3fd,#ece7fa);
  --scroll:rgba(100,70,170,.26); --scroll-h:rgba(100,70,170,.42);
  --glass:rgba(255,255,255,.86); --glass-2:rgba(255,255,255,.78);
  --card-grad:linear-gradient(180deg,#ffffff,#fbfaff);
  --kpi-grad:linear-gradient(160deg,#ffffff,#f6f3fe);
  --qcard-grad:linear-gradient(180deg,#ffffff,#fcfbff);
  --login-card:rgba(255,255,255,.92);
  --login-mask:linear-gradient(100deg, rgba(245,243,253,.97) 0%, rgba(245,243,253,.92) 34%, rgba(245,243,253,.48) 58%, rgba(245,243,253,.12) 100%);
  --feat-bg:rgba(255,255,255,.72); --legend-bg:rgba(255,255,255,.86); --tip-bg:rgba(255,255,255,.92);
  --toast-bg:rgba(255,255,255,.97); --sb-veil:rgba(50,35,95,.32);
  --shadow:0 12px 40px rgba(60,40,120,.13); --shadow-sm:0 4px 16px rgba(60,40,120,.09);
  --logo-glow:rgba(124,77,255,.3);
  --grid:rgba(90,60,170,.12); --axis:#9385b0; --node-stroke:#ffffff; --node-text:#40325e;
  --ring-track:rgba(90,60,170,.14);
  --chart-1:#7c4dff; --chart-2:#9b6bff; --chart-3:#12a06a; --chart-4:#d99a15; --chart-5:#2f7bff;
  --chart-6:#4a72d8; --chart-7:#e04b6c; --chart-8:#31b46a; --chart-9:#e07a2a; --chart-10:#0f9bb8;
}

/* 浅色 · 暖阳 */
html[data-theme="light-amber"] {
  color-scheme: light;
  --bg:#fdf7ee; --bg-2:#fbf1e2; --surface:#ffffff; --surface-2:#fdf9f2; --surface-3:#f7efe2;
  --line:rgba(150,100,30,.14); --line-2:rgba(150,100,30,.24); --hover:rgba(217,128,20,.08);
  --active:rgba(217,128,20,.13); --track:rgba(150,100,30,.10); --veil:rgba(80,50,10,.3);
  --text:#2a1c08; --text-2:#5c4522; --text-3:#8a6e44; --text-4:#b09670;
  --brand-1:#d98014; --brand-2:#f0a020; --brand-text:#b26708;
  --grad:linear-gradient(120deg,#d98014 0%,#f5b23c 100%);
  --grad-soft:linear-gradient(120deg, rgba(217,128,20,.14), rgba(245,178,60,.09));
  --ring:rgba(217,128,20,.22); --ring-2:rgba(217,128,20,.14); --glow:rgba(217,128,20,.28);
  --danger:#dc3f56; --danger-soft:rgba(220,63,86,.10); --danger-text:#bc263c; --danger-line:rgba(220,63,86,.36);
  --warn:#c47f0a; --warn-soft:rgba(196,127,10,.13); --warn-text:#9a6206;
  --success:#12a06a; --success-soft:rgba(18,160,106,.12); --success-text:#0b7a50; --success-line:rgba(18,160,106,.4);
  --gold:#a98416; --gold-soft:rgba(169,132,22,.14); --gold-line:rgba(169,132,22,.3); --gold-text:#836309;
  --info:#4a72d8; --info-soft:rgba(74,114,216,.12);
  --body-glow-1:rgba(217,128,20,.12); --body-glow-2:rgba(245,178,60,.09);
  --body-grad:linear-gradient(180deg,#fdf7ee,#f8efdf);
  --scroll:rgba(150,110,50,.26); --scroll-h:rgba(150,110,50,.42);
  --glass:rgba(255,255,255,.86); --glass-2:rgba(255,255,255,.78);
  --card-grad:linear-gradient(180deg,#ffffff,#fffdf9);
  --kpi-grad:linear-gradient(160deg,#ffffff,#fdf8ef);
  --qcard-grad:linear-gradient(180deg,#ffffff,#fffdfb);
  --login-card:rgba(255,255,255,.92);
  --login-mask:linear-gradient(100deg, rgba(253,247,238,.97) 0%, rgba(253,247,238,.92) 34%, rgba(253,247,238,.48) 58%, rgba(253,247,238,.12) 100%);
  --feat-bg:rgba(255,255,255,.72); --legend-bg:rgba(255,255,255,.86); --tip-bg:rgba(255,255,255,.92);
  --toast-bg:rgba(255,255,255,.97); --sb-veil:rgba(90,60,20,.3);
  --shadow:0 12px 40px rgba(120,80,20,.14); --shadow-sm:0 4px 16px rgba(120,80,20,.1);
  --logo-glow:rgba(217,128,20,.3);
  --grid:rgba(150,100,30,.12); --axis:#b09670; --node-stroke:#ffffff; --node-text:#5c4522;
  --ring-track:rgba(150,100,30,.14);
  --chart-1:#d98014; --chart-2:#f0a020; --chart-3:#12a06a; --chart-4:#2f7bff; --chart-5:#7c4dff;
  --chart-6:#4a72d8; --chart-7:#e04b6c; --chart-8:#31b46a; --chart-9:#e07a2a; --chart-10:#0f9bb8;
}

/* 浅色 · 绯樱 */
html[data-theme="light-rose"] {
  color-scheme: light;
  --bg:#fdf3f6; --bg-2:#fbeaef; --surface:#ffffff; --surface-2:#fdf7f9; --surface-3:#f7ecf0;
  --line:rgba(170,60,95,.13); --line-2:rgba(170,60,95,.22); --hover:rgba(224,65,107,.07);
  --active:rgba(224,65,107,.12); --track:rgba(170,60,95,.10); --veil:rgba(90,25,45,.3);
  --text:#2e0f1a; --text-2:#5e2f40; --text-3:#8c5c6c; --text-4:#b58e9a;
  --brand-1:#e0416b; --brand-2:#ff6b8f; --brand-text:#c22a55;
  --grad:linear-gradient(120deg,#e0416b 0%,#ff7a9c 100%);
  --grad-soft:linear-gradient(120deg, rgba(224,65,107,.13), rgba(255,122,156,.08));
  --ring:rgba(224,65,107,.20); --ring-2:rgba(224,65,107,.14); --glow:rgba(224,65,107,.28);
  --danger:#d83a52; --danger-soft:rgba(216,58,82,.10); --danger-text:#b72239; --danger-line:rgba(216,58,82,.36);
  --warn:#c47f0a; --warn-soft:rgba(196,127,10,.13); --warn-text:#9a6206;
  --success:#12a06a; --success-soft:rgba(18,160,106,.12); --success-text:#0b7a50; --success-line:rgba(18,160,106,.4);
  --gold:#a98416; --gold-soft:rgba(169,132,22,.14); --gold-line:rgba(169,132,22,.3); --gold-text:#836309;
  --info:#4a72d8; --info-soft:rgba(74,114,216,.12);
  --body-glow-1:rgba(224,65,107,.11); --body-glow-2:rgba(255,122,156,.08);
  --body-grad:linear-gradient(180deg,#fdf3f6,#f9e9ef);
  --scroll:rgba(160,80,110,.26); --scroll-h:rgba(160,80,110,.42);
  --glass:rgba(255,255,255,.86); --glass-2:rgba(255,255,255,.78);
  --card-grad:linear-gradient(180deg,#ffffff,#fffafc);
  --kpi-grad:linear-gradient(160deg,#ffffff,#fdf5f8);
  --qcard-grad:linear-gradient(180deg,#ffffff,#fffbfc);
  --login-card:rgba(255,255,255,.92);
  --login-mask:linear-gradient(100deg, rgba(253,243,246,.97) 0%, rgba(253,243,246,.92) 34%, rgba(253,243,246,.48) 58%, rgba(253,243,246,.12) 100%);
  --feat-bg:rgba(255,255,255,.72); --legend-bg:rgba(255,255,255,.86); --tip-bg:rgba(255,255,255,.92);
  --toast-bg:rgba(255,255,255,.97); --sb-veil:rgba(95,30,50,.3);
  --shadow:0 12px 40px rgba(140,50,80,.13); --shadow-sm:0 4px 16px rgba(140,50,80,.09);
  --logo-glow:rgba(224,65,107,.3);
  --grid:rgba(170,60,95,.12); --axis:#b58e9a; --node-stroke:#ffffff; --node-text:#5e2f40;
  --ring-track:rgba(170,60,95,.14);
  --chart-1:#e0416b; --chart-2:#ff6b8f; --chart-3:#12a06a; --chart-4:#d99a15; --chart-5:#7c4dff;
  --chart-6:#4a72d8; --chart-7:#2f7bff; --chart-8:#31b46a; --chart-9:#e07a2a; --chart-10:#0f9bb8;
}

/* 尺寸与字体（与主题无关） */
:root {
  --r-xs: 6px; --r-sm: 9px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-title: 17px; --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --sidebar-w: 224px;
}

/* ---------- 2. 基础 ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
  font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  overflow: hidden;
  transition: background-color .35s ease, color .35s ease;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 620px at 82% -8%, var(--body-glow-1), transparent 60%),
    radial-gradient(900px 520px at 6% 104%, var(--body-glow-2), transparent 62%),
    var(--body-grad);
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-h); }
::-webkit-scrollbar-track { background: transparent; }
a { color: var(--brand-text); text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
h1,h2,h3,h4 { margin: 0; font-weight: 600; }
.hidden { display: none !important; }

/* ---------- 3. 登录页 ---------- */
#login-view { position: fixed; inset: 0; z-index: 50; display: flex; align-items: stretch; }
#login-view.hidden { display: none !important; }
.lg-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity .8s; }
.lg-bg-mask { position: absolute; inset: 0; background: var(--login-mask); }
.lg-wrap { position: relative; display: flex; width: 100%; align-items: center; padding: 4vh 6vw; gap: 4vw; }
.lg-hero { flex: 1; max-width: 620px; animation: fadeUp .7s ease both; }
.lg-hero .badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius: var(--r-pill); background: var(--grad-soft); border:1px solid var(--line-2); color: var(--brand-text); font-size: var(--fs-xs); letter-spacing:.04em; }
.lg-hero h1 { font-size: 42px; line-height: 1.22; margin: 22px 0 14px; letter-spacing: .02em; color: var(--text); }
.lg-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lg-hero p.sub { color: var(--text-2); font-size: 15px; max-width: 520px; }
.lg-metrics { display: flex; gap: 28px; margin-top: 34px; flex-wrap: wrap; }
.lg-metrics .m b { display:block; font-size: 26px; font-family: var(--mono); background: var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent; }
.lg-metrics .m span { color: var(--text-3); font-size: var(--fs-xs); }
.lg-feats { display:flex; flex-wrap:wrap; gap:10px; margin-top: 30px; }
.lg-feats .f { padding: 7px 13px; border-radius: var(--r-pill); border:1px solid var(--line); background: var(--feat-bg); color: var(--text-2); font-size: var(--fs-xs); backdrop-filter: blur(6px); }

.lg-card {
  position: relative; width: 400px; margin-left: auto; align-self: center;
  background: var(--login-card); border: 1px solid var(--line-2); border-radius: var(--r-xl);
  padding: 34px 32px; backdrop-filter: blur(18px); box-shadow: var(--shadow); animation: fadeUp .7s .1s ease both;
}
.lg-card .logo { display:flex; align-items:center; gap:12px; margin-bottom: 6px; }
.lg-card .logo .mark { width: 42px; height: 42px; border-radius: 12px; background: var(--grad); display:grid; place-items:center; box-shadow: 0 6px 20px var(--logo-glow); }
.lg-card h2 { font-size: 20px; }
.lg-card .tip { color: var(--text-3); font-size: var(--fs-xs); margin-bottom: 22px; }
.lg-field { margin-bottom: 14px; }
.lg-field label { display:block; font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 7px; }
.lg-field .ipt { position: relative; display:flex; align-items:center; }
/* ⚠️ 图标必须自己撑满输入框高度并用 flex 居中：只给 svg 定 left 时 top 由静态位置决定，
   会贴着输入框顶部（密码锁图标看起来「没对齐」）。 */
.lg-field .ipt > span { position:absolute; left:13px; top:0; bottom:0; z-index:1;
  display:flex; align-items:center; justify-content:center; pointer-events:none; }
.lg-field .ipt svg { display:block; width:16px; height:16px; }
.lg-field input { width:100%; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r); padding: 11px 13px 11px 40px; outline:none; transition:.2s; }
.lg-field input:focus { border-color: var(--brand-1); box-shadow: 0 0 0 3px var(--ring); }
.lg-row { display:flex; align-items:center; justify-content: space-between; margin: 4px 0 18px; font-size: var(--fs-xs); color: var(--text-3); }
.lg-row .chk { display:flex; align-items:center; gap: 7px; cursor:pointer; user-select:none; }
.lg-row .chk input { accent-color: var(--brand-1); width:15px; height:15px; }
.lg-btn { width:100%; border:0; border-radius: var(--r); padding: 12px; background: var(--grad); color:#fff; font-weight: 600; font-size: 15px; cursor:pointer; transition:.2s; box-shadow: 0 8px 24px var(--glow); }
.lg-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lg-btn:disabled { opacity:.6; cursor: default; transform:none; }
.lg-err { color: var(--danger-text); font-size: var(--fs-xs); margin-top: 10px; min-height: 16px; }
.lg-foot { position:absolute; bottom: 22px; left: 0; width:100%; text-align:center; color: var(--text-4); font-size: var(--fs-xs); }

/* ---------- 4. 主框架 ---------- */
#app { position: relative; z-index: 1; height: 100vh; display: flex; flex-direction: column; }
#app.hidden { display:none; }
.topbar {
  height: 60px; flex: 0 0 60px; display:flex; align-items:center; gap: 16px; padding: 0 20px;
  background: var(--glass); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); z-index: 20;
}
.topbar .brand { display:flex; align-items:center; gap:11px; font-weight: 600; letter-spacing:.02em; white-space:nowrap; }
.topbar .brand .mark { width: 32px; height:32px; border-radius: 9px; background: var(--grad); display:grid; place-items:center; box-shadow: 0 4px 14px var(--logo-glow); }
.topbar .brand small { display:block; color: var(--text-3); font-size: 11px; font-weight: 400; }
.topbar .gsearch { flex:1 1 auto; max-width: 720px; position: relative; }
.topbar .gsearch input { width:100%; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-pill); padding: 9px 14px 9px 38px; outline:none; }
.topbar .gsearch input:focus { border-color: var(--brand-1); }
/* 放大镜 = 可点击按钮：点它直接进「搜索中心」（不再是纯装饰） */
.topbar .gsearch .gi { position:absolute; left:5px; top:50%; transform: translateY(-50%);
  width:30px; height:30px; display:grid; place-items:center; border-radius:9px;
  cursor:pointer; color: var(--text-3); transition:.16s; z-index:2; }
.topbar .gsearch .gi:hover { background: var(--hover); color: var(--brand-text); }
.topbar .gsearch .gi svg { position:static; transform:none; opacity:1; width:16px; height:16px; }
.topbar .spacer { flex: 1; }
.topbar .tb-btn { position: relative; width: 38px; height:38px; border-radius: 10px; border:1px solid var(--line); background: var(--surface-2); display:grid; place-items:center; cursor:pointer; transition:.2s; }
.topbar .tb-btn:hover { border-color: var(--line-2); background: var(--surface-3); }
.topbar .tb-btn .dot { position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background: var(--danger); box-shadow: 0 0 0 2px var(--bg-2); }
/* 右侧动作区分组：图标按钮一组 + 分隔线 + 用户胶囊（用上左侧富余空间，避免全部挤在最右） */
.topbar .tb-acts { display:flex; align-items:center; gap:12px; flex:none; margin-left:auto; }
.topbar .tb-sep { width:1px; height:26px; background: var(--line-2); flex:none; }
.topbar .me { display:flex; align-items:center; gap:11px; padding: 5px 18px 5px 6px; border-radius: var(--r-pill); border:1px solid var(--line); background: var(--surface-2); cursor:pointer; transition:.2s; }
.topbar .me:hover { border-color: var(--line-2); }
.topbar .me .nm { font-size: var(--fs-sm); font-weight:600; line-height:1.25; }
.topbar .me .rl { font-size: 11px; color: var(--gold-text); line-height:1.25; }

/* 主题选择器 */
.theme-btn { position: relative; }
.theme-pop {
  position: fixed; top: 68px; right: 22px; width: 306px; z-index: 90;
  background: var(--bg-2); border:1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 14px; display:none;
}
.theme-pop.on { display:block; animation: fadeUp .18s ease both; }
.theme-pop h4 { font-size: var(--fs-sm); margin-bottom: 3px; }
.theme-pop .sub { color: var(--text-3); font-size: 11px; margin-bottom: 12px; }
.theme-pop .grp-t { font-size: 11px; color: var(--text-4); letter-spacing:.08em; margin: 10px 0 8px; }
.theme-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.theme-sw { position: relative; cursor:pointer; border-radius: 10px; border:1px solid var(--line); padding: 7px 6px 6px; text-align:center; transition:.16s; background: var(--surface-2); }
.theme-sw:hover { border-color: var(--line-2); transform: translateY(-1px); }
.theme-sw.on { border-color: var(--brand-1); box-shadow: 0 0 0 2px var(--ring); }
.theme-sw .sw-dot { width: 100%; height: 26px; border-radius: 7px; margin-bottom: 5px; }
.theme-sw .sw-nm { font-size: 10px; color: var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.theme-sw.on .sw-nm { color: var(--text); }
.theme-auto { display:flex; align-items:center; justify-content:space-between; margin-top: 12px; padding-top: 12px; border-top:1px solid var(--line); }
.theme-auto .lbl { font-size: var(--fs-xs); color: var(--text-2); }
.theme-auto .lbl small { display:block; color: var(--text-4); font-size: 10px; }
.switch { position: relative; width: 40px; height: 22px; border-radius: var(--r-pill); background: var(--track); cursor:pointer; transition:.2s; flex:0 0 auto; }
.switch.on { background: var(--brand-1); }
.switch i { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.2s; }
.switch.on i { left: 20px; }

.layout { flex:1; display:flex; min-height: 0; }
.sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--glass-2); border-right: 1px solid var(--line); padding: 14px 12px; overflow-y: auto; }
.nav-group { margin-bottom: 6px; }
.nav-group > .gt { font-size: 11px; color: var(--text-4); padding: 12px 12px 6px; letter-spacing: .1em; }
.nav-item { display:flex; align-items:center; gap: 11px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--text-2); cursor:pointer; transition:.16s; margin-bottom: 2px; font-size: var(--fs-sm); }
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.on { background: var(--active); color: var(--text); box-shadow: inset 2px 0 0 var(--brand-2); }
.nav-item.on svg { color: var(--brand-2); }
.nav-item svg { flex:0 0 auto; opacity:.86; }
.nav-item .badge-n { margin-left:auto; font-size: 11px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--brand-1); color:#fff; }
.nav-parent { display:flex; align-items:center; gap:11px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--text-2); cursor:pointer; font-size: var(--fs-sm); }
.nav-parent:hover { background: var(--hover); }
.nav-parent .caret { margin-left:auto; transition:.2s; opacity:.6; }
.nav-parent.open .caret { transform: rotate(90deg); }
.nav-kids { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.nav-kids.open { max-height: 520px; }
.nav-kids .nav-item { padding-left: 34px; font-size: var(--fs-xs); }

.main { flex:1; min-width:0; overflow-y: auto; padding: 22px 26px 40px; }
.page-head { display:flex; align-items:flex-end; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h2 { font-size: 21px; }
.page-head .desc { color: var(--text-3); font-size: var(--fs-sm); }
.page-head .spacer { flex:1; }
.crumb { color: var(--text-4); font-size: var(--fs-xs); margin-bottom: 4px; }

/* ---------- 5. 组件 ---------- */
.btn { display:inline-flex; align-items:center; gap:7px; padding: 8px 15px; border-radius: var(--r-sm); border:1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); cursor:pointer; transition:.18s; font-size: var(--fs-sm); }
.btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--brand-1); }
.btn.primary { background: var(--grad); border:0; color:#fff; font-weight: 600; box-shadow: 0 6px 18px var(--glow); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger-text); border-color: var(--danger-line); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.sm { padding: 5px 11px; font-size: var(--fs-xs); }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ---------- 语音录入按钮（手机端长文本作答） ---------- */
.vbtn.rec { color: var(--danger-text); border-color: var(--danger-line); background: var(--danger-soft); }
.vbtn.rec svg { animation: micPulse 1.05s ease-in-out infinite; }
.vbtn.is-off { opacity:.6; }
@keyframes micPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.86); } }

.card { background: var(--card-grad); border:1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm); }
.card-h { display:flex; align-items:center; gap:10px; margin-bottom: 14px; }
.card-h h3 { font-size: 15px; }
.card-h .spacer { flex:1; }
.card-h .more { color: var(--text-3); font-size: var(--fs-xs); cursor:pointer; }
.card-h .more:hover { color: var(--brand-text); }

.kpi { position: relative; overflow:hidden; min-height: 116px; display:flex; flex-direction:column; padding: 17px 18px; border-radius: var(--r-lg); border:1px solid var(--line); background: var(--kpi-grad); }
.kpi::after { content:""; position:absolute; right:-30px; top:-30px; width: 110px; height:110px; border-radius:50%; background: var(--grad-soft); }
.kpi .ic { width:38px; height:38px; border-radius: 11px; display:grid; place-items:center; background: var(--active); color: var(--brand-2); margin-bottom: 12px; }
.kpi .num { font-size: 27px; font-family: var(--mono); font-weight: 600; letter-spacing: -.02em; }
.kpi .lbl { color: var(--text-3); font-size: var(--fs-xs); }
.kpi .foot { margin-top:auto; font-size: 11px; color: var(--text-4); display:flex; gap:6px; align-items:center; }
.kpi.gold .ic { background: var(--gold-soft); color: var(--gold-text); }
.kpi.green .ic { background: var(--success-soft); color: var(--success-text); }
.kpi.red .ic { background: var(--danger-soft); color: var(--danger-text); }

.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.grid > * { min-width: 0; }
.g2 { grid-column: span 2; } .g3 { grid-column: span 3; } .g4 { grid-column: span 4; }
.g5 { grid-column: span 5; } .g6 { grid-column: span 6; } .g7 { grid-column: span 7; }
.g8 { grid-column: span 8; } .g9 { grid-column: span 9; } .g12 { grid-column: span 12; }
.grid > * > .kpi { height: 100%; }
/* ⚠️ 同排栅格列**必须**等高对齐（2026-10-11 修：学习中台左列「最近更新的资料」与右列底部差 16px）
   栅格的 align-items:stretch 已经让「列」等高，缺的是「卡片没跟着长」。两条兜底：
   ① 列内只有一张卡片 → 撑满列高，自动与同排最高的列对齐；
   ② 列内是卡片栈 → 加 .gstack，末张卡片吸收剩余高度（末张的 margin 会顶开底部，故一并归零）。 */
.grid > * > .card:only-child { height: 100%; }
.gstack { display:flex; flex-direction:column; }
.gstack > *:last-child { flex: 1 1 auto; margin-bottom: 0; }

.tag { display:inline-flex; align-items:center; gap:5px; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11px; background: var(--surface-3); color: var(--text-2); border:1px solid var(--line); white-space: nowrap; }
.tag.brand { background: var(--active); color: var(--brand-text); border-color: var(--line-2); }
.tag.gold { background: var(--gold-soft); color: var(--gold-text); border-color: var(--gold-line); }
.tag.green { background: var(--success-soft); color: var(--success-text); }
.tag.red { background: var(--danger-soft); color: var(--danger-text); }
.tag.warn { background: var(--warn-soft); color: var(--warn-text); }
.tag.plain { background: transparent; }

.chip { display:inline-flex; align-items:center; gap:6px; padding: 6px 13px; border-radius: var(--r-pill); border:1px solid var(--line); background: var(--surface-2); color: var(--text-2); cursor:pointer; font-size: var(--fs-xs); transition:.16s; }
.chip:hover { border-color: var(--line-2); color: var(--text); }
.chip.on { background: var(--active); border-color: var(--brand-1); color: var(--text); }

table.tb { width:100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.tb th { text-align:left; color: var(--text-3); font-weight: 500; padding: 10px 12px; border-bottom:1px solid var(--line); font-size: var(--fs-xs); white-space:nowrap; }
table.tb td { padding: 11px 12px; border-bottom:1px solid var(--line); vertical-align: middle; }
table.tb tr:hover td { background: var(--hover); }
table.tb .acts { display:flex; gap:6px; justify-content:flex-end; white-space:nowrap; }
table.tb td .btn { white-space: nowrap; }
table.tb .t-title { color: var(--text); font-weight: 500; }
table.tb .t-title:hover { color: var(--brand-text); cursor:pointer; }

.pager { display:flex; align-items:center; justify-content:flex-end; gap: 8px; margin-top: 16px; color: var(--text-3); font-size: var(--fs-xs); }
.pager button { min-width: 32px; height:32px; border-radius: var(--r-xs); border:1px solid var(--line); background: var(--surface-2); color: var(--text-2); cursor:pointer; }
.pager button.on { background: var(--grad); border:0; color:#fff; }
.pager button:disabled { opacity:.4; cursor:default; }

.filters { display:flex; gap: 10px; flex-wrap: wrap; align-items:center; margin-bottom: 16px; }
.filters input, .filters select { background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; outline:none; }
.filters input:focus, .filters select:focus { border-color: var(--brand-1); }
.form-row { margin-bottom: 15px; }
.form-row label { display:block; font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 7px; }
.form-row label .req { color: var(--danger-text); }
.input, .textarea, select.input { width:100%; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; outline:none; transition:.2s; }
.input:focus, .textarea:focus, select.input:focus { border-color: var(--brand-1); box-shadow: 0 0 0 3px var(--ring-2); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.7; }
.form-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-hint { font-size: 11px; color: var(--text-4); margin-top: 6px; }

.empty { text-align:center; padding: 46px 20px; color: var(--text-4); }
.empty svg { opacity:.4; margin-bottom: 12px; }
.skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--hover), var(--track), var(--hover)); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { 0%{background-position: 200% 0} 100%{background-position:-200% 0} }

/* 抽屉 / 弹窗 */
/* 遮罩：隐藏时绝对不能吞事件（否则弹窗关闭后整站点不动） */
.mask { position: fixed; inset: 0; background: var(--veil); z-index: 100; opacity: 0; transition: opacity .2s;
  backdrop-filter: blur(3px); pointer-events: none; }
.mask.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top:0; right:0; height:100%; width: 560px; max-width: 94vw; background: var(--bg-2); border-left:1px solid var(--line-2); z-index:101; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; box-shadow: var(--shadow); }
.drawer.on { transform: none; }
.drawer-h { display:flex; align-items:center; gap:12px; padding: 18px 22px; border-bottom:1px solid var(--line); }
.drawer-h h3 { font-size: 16px; flex:1; }
.drawer-b { flex:1; overflow-y:auto; padding: 20px 22px; }
.drawer-f { padding: 14px 22px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; }
.modal { position: fixed; top:50%; left:50%; transform: translate(-50%,-46%); width: 620px; max-width: 94vw; max-height: 88vh; background: var(--bg-2); border:1px solid var(--line-2); border-radius: var(--r-lg); z-index:101; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:.24s; box-shadow: var(--shadow); }
.modal.on { opacity:1; pointer-events:auto; transform: translate(-50%,-50%); }
.modal.sm { width: 460px; } .modal.lg { width: 860px; }
.modal-h { display:flex; align-items:center; gap:12px; padding: 18px 22px; border-bottom:1px solid var(--line); }
.modal-h h3 { flex:1; font-size: 16px; }
.modal-b { padding: 20px 22px; overflow-y:auto; }
.modal-f { padding: 14px 22px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; }
.icon-btn { width: 30px; height:30px; border-radius: 8px; border:1px solid var(--line); background: var(--surface-2); display:grid; place-items:center; cursor:pointer; color: var(--text-3); }
.icon-btn:hover { color: var(--text); border-color: var(--line-2); }

/* Toast */
#toasts { position: fixed; top: 20px; left:50%; transform: translateX(-50%); z-index: 300; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast { padding: 11px 20px; border-radius: var(--r-pill); background: var(--toast-bg); border:1px solid var(--line-2); color: var(--text); box-shadow: var(--shadow); font-size: var(--fs-sm); animation: toastIn .3s ease; display:flex; gap:9px; align-items:center; }
.toast.ok { border-color: var(--success-line); } .toast.ok svg { color: var(--success-text); }
.toast.err { border-color: var(--danger-line); } .toast.err svg { color: var(--danger-text); }
@keyframes toastIn { from{opacity:0; transform: translateY(-10px)} to{opacity:1; transform:none} }

/* 标签页 */
.tabs { display:flex; gap: 4px; border-bottom:1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button { border:0; background:transparent; color: var(--text-3); padding: 10px 16px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:.16s; font-size: var(--fs-sm); }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--brand-text); border-bottom-color: var(--brand-2); }

/* 进度条 */
.bar { height: 7px; border-radius: var(--r-pill); background: var(--track); overflow:hidden; }
.bar > i { display:block; height:100%; border-radius: var(--r-pill); background: var(--grad); transition: width .6s; }

/* 列表项 */
.li { display:flex; gap:13px; padding: 13px 0; border-bottom:1px solid var(--line); }
.li:last-child { border-bottom:0; }
.li .ic { flex:0 0 auto; width:40px; height:40px; border-radius: 11px; display:grid; place-items:center; background: var(--surface-3); color: var(--brand-2); }
.li .bd { flex:1; min-width:0; }
.li .tt { font-weight: 500; margin-bottom: 3px; }
.li .tt:hover { color: var(--brand-text); cursor:pointer; }
.li .ds { color: var(--text-3); font-size: var(--fs-xs); overflow:hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.li .meta { display:flex; gap:12px; color: var(--text-4); font-size: 11px; margin-top: 6px; align-items:center; flex-wrap:wrap; }
.li .seq { flex:0 0 auto; width:22px; text-align:right; font-size:12px; color:var(--text-4); font-variant-numeric: tabular-nums; padding-top: 2px; }

/* 知识点树 */
.tree { font-size: var(--fs-sm); }
.tree-node { position: relative; }
.tree-row { display:flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: var(--r-xs); cursor:pointer; }
.tree-row:hover { background: var(--hover); }
.tree-row.on { background: var(--active); }
.tree-row .tw { width:16px; color: var(--text-4); transition:.2s; }
.tree-row.open .tw { transform: rotate(90deg); }
.tree-kids { margin-left: 16px; border-left:1px dashed var(--line); padding-left: 4px; }
.tree-kids.hidden { display:none; }

/* 思维导图 SVG —— 纵向由「整页」滚动承载，容器只负责横向拖动 */
.mm-wrap { overflow-x: auto; overflow-y: hidden; border-radius: var(--r);
  background: radial-gradient(circle at 30% 20%, var(--body-glow-1), transparent 60%), var(--surface);
  border:1px solid var(--line); min-height: 240px; }
.mm-wrap svg { display:block; }
.mm-node rect { transition: .18s; cursor:pointer; }
.mm-node:hover rect { filter: brightness(1.06); }
.mm-node text { pointer-events:none; font-size: 12px; }

/* 知识图谱 */
/* ⚠️ 高度必须随视口自适应：写死 620px 时，矮屏上图谱底部会被顶出可视区（用户报障「显示不全」） */
.gph-wrap { position: relative; height: clamp(400px, calc(100vh - 372px), 800px); border-radius: var(--r); background: radial-gradient(circle at 50% 50%, var(--body-glow-1), transparent 70%), var(--surface); border:1px solid var(--line); overflow:hidden; }
@media (max-width: 900px) { .gph-wrap { height: clamp(360px, calc(100vh - 270px), 620px); } }
.gph-wrap svg { width:100%; height:100%; display:block; cursor: grab; }
.gph-wrap svg:active { cursor: grabbing; }
.gph-legend { position:absolute; left:14px; bottom:14px; display:flex; gap:14px; flex-wrap:wrap; background: var(--legend-bg); padding: 9px 14px; border-radius: var(--r); border:1px solid var(--line); font-size: 11px; }
.gph-legend span { display:flex; align-items:center; gap:6px; color: var(--text-3); }
.gph-legend i { width:10px; height:10px; border-radius:50%; display:inline-block; }
/* 节点标签描边：关系连线从文字下方穿过时仍清晰可读（paint-order 让描边落在填充之下） */
.gph-wrap .g-txt { paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round; }
.gph-tip { position:absolute; right:14px; top:14px; background: var(--tip-bg); border:1px solid var(--line-2); border-radius: var(--r); padding: 10px 14px; font-size: var(--fs-xs); max-width: 260px; pointer-events:none; }
.gph-tip b { color: var(--brand-text); }

/* 答题 */
.q-card { background: var(--qcard-grad); border:1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.q-stem { font-size: 16px; line-height: 1.8; margin-bottom: 18px; }
.q-opt { display:flex; gap:12px; padding: 13px 16px; border-radius: var(--r); border:1px solid var(--line); background: var(--surface-2); margin-bottom: 10px; cursor:pointer; transition:.16s; }
.q-opt:hover { border-color: var(--line-2); background: var(--surface-3); }
.q-opt.sel { border-color: var(--brand-1); background: var(--active); }
.q-opt.right { border-color: var(--success-line); background: var(--success-soft); }
.q-opt.wrong { border-color: var(--danger-line); background: var(--danger-soft); }
.q-opt .k { flex:0 0 26px; height:26px; border-radius: 50%; background: var(--surface-3); display:grid; place-items:center; font-size: var(--fs-xs); font-weight:600; }
.q-opt.sel .k { background: var(--brand-1); color:#fff; }
.q-opt.right .k { background: var(--success); color:#fff; }
.q-opt.wrong .k { background: var(--danger); color:#fff; }
.q-exp { margin-top: 16px; padding: 16px; border-radius: var(--r); background: var(--surface-2); border-left: 3px solid var(--brand-2); }
.q-exp b { color: var(--brand-text); }
.q-nav { display:flex; gap:8px; flex-wrap:wrap; }
.q-nav .qn { width:34px; height:34px; border-radius: 9px; border:1px solid var(--line); background: var(--surface-2); display:grid; place-items:center; cursor:pointer; font-size: var(--fs-xs); }
.q-nav .qn.done { background: var(--success-soft); border-color: var(--success-line); color: var(--success-text); }
.q-nav .qn.cur { background: var(--grad); color:#fff; border:0; }
.q-nav .qn.wrong { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); }

/* 万能框架 */
.step-flow { display:flex; align-items:stretch; gap: 0; flex-wrap:wrap; }
.step-flow .st { flex:1; min-width: 130px; position: relative; padding: 16px 14px; background: var(--surface-2); border:1px solid var(--line); border-right:0; }
.step-flow .st:first-child { border-radius: var(--r) 0 0 var(--r); }
.step-flow .st:last-child { border-radius: 0 var(--r) var(--r) 0; border-right:1px solid var(--line); }
.step-flow .st .n { width:26px; height:26px; border-radius:50%; background: var(--grad); color:#fff; display:grid; place-items:center; font-size: var(--fs-xs); font-weight:600; margin-bottom: 9px; }
.step-flow .st b { display:block; margin-bottom: 4px; }
.step-flow .st span { color: var(--text-3); font-size: var(--fs-xs); }
.dim-card { padding: 14px; border-radius: var(--r); background: var(--surface-2); border:1px solid var(--line); }
.dim-card b { color: var(--brand-text); }

/* AI 问答 */
.chat-wrap { display:flex; flex-direction:column; height: calc(100vh - 210px); }
.chat-list { flex:1; overflow-y:auto; padding: 8px 2px; }
.chat-msg { display:flex; gap:12px; margin-bottom: 18px; }
.chat-msg .av { flex:0 0 34px; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
.chat-msg.user .av { background: var(--grad); }
.chat-msg.ai .av { background: var(--surface-3); color: var(--brand-2); }
.chat-msg .bb { flex:1; }
.chat-msg .bb .nm { font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 5px; }
.chat-msg .bubble { background: var(--surface-2); border:1px solid var(--line); border-radius: 4px 12px 12px 12px; padding: 12px 15px; line-height: 1.75; white-space: pre-wrap; }
.chat-msg.user .bubble { background: var(--active); border-color: var(--line-2); border-radius: 12px 4px 12px 12px; }
.chat-input { display:flex; gap:10px; margin-top: 14px; }
.chat-input textarea { flex:1; min-height: 46px; max-height: 140px; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r); padding: 12px 14px; outline:none; resize:none; }
.chat-input textarea:focus { border-color: var(--brand-1); }
.src-chip { display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-3); font-size: 11px; color: var(--text-2); margin: 4px 6px 0 0; cursor:pointer; border:1px solid var(--line); }

/* 上传拖拽 */
.drop { border: 1.5px dashed var(--line-2); border-radius: var(--r); padding: 30px; text-align:center; color: var(--text-3); cursor:pointer; transition:.2s; background: var(--surface-2); }
.drop:hover, .drop.over { border-color: var(--brand-1); background: var(--active); color: var(--text); }
.drop svg { margin-bottom: 10px; opacity:.6; }
.bg-prev { height:104px; margin-top:10px; border-radius: var(--r); border:1px solid var(--line);
  background: var(--surface-3) center/cover no-repeat; }

/* ---------- 6. 新增组件（工作台滚动 / 热力图） ---------- */
.roll-card { display:flex; flex-direction:column; height: 100%; min-height: 268px; }
.roll-head { display:flex; align-items:center; gap:9px; margin-bottom: 12px; }
.roll-head h3 { font-size: 15px; }
.roll-head .ic { width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--active);color:var(--brand-2); }
.marquee { position: relative; flex:1; min-height: 190px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.marquee-track { display:flex; flex-direction:column; gap:12px; animation: rollUp var(--roll-dur, 34s) linear infinite; }
.marquee-track.pause, .marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes rollUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.q-item { background: var(--surface-2); border:1px solid var(--line); border-left: 3px solid var(--brand-2); border-radius: var(--r); padding: 13px 16px; }
.q-item .qt { font-size: var(--fs-sm); line-height: 1.7; color: var(--text); }
.q-item .qa { margin-top: 8px; font-size: 11px; color: var(--text-3); text-align:right; }
.q-item .qa b { color: var(--gold-text); }
.act-item { display:flex; gap:12px; padding: 11px 13px; border-radius: var(--r); background: var(--surface-2); border:1px solid var(--line); cursor:pointer; transition:.16s; }
.act-item:hover { border-color: var(--line-2); background: var(--surface-3); }
.act-item .aic { flex:0 0 34px; width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--active);color:var(--brand-2); }
.act-item .abd { flex:1; min-width:0; }
.act-item .at { font-size: var(--fs-sm); font-weight:500; margin-bottom: 2px; }
.act-item .ad { font-size: 11px; color: var(--text-3); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.act-item .am { font-size: 11px; color: var(--text-4); display:flex; gap:9px; margin-top: 5px; flex-wrap:wrap; }

/* 掌握热力图 */
.heat-grid { display:grid; gap: 6px; }
.heat-cell { border-radius: 7px; padding: 9px 6px; text-align:center; font-size: 11px; border:1px solid var(--line); min-height: 54px; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.heat-cell b { font-size: 14px; font-family: var(--mono); }
.heat-cell .hn { font-size: 10px; color: var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.legend-scale { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-3); }
.legend-scale i { width: 16px; height: 12px; border-radius: 4px; display:inline-block; }

/* 五维评分 */
.score-row { display:flex; align-items:center; gap:12px; padding: 9px 0; border-bottom:1px solid var(--line); }
.score-row:last-child { border-bottom:0; }
.score-row .sl { flex:0 0 84px; font-size: var(--fs-xs); color: var(--text-2); }
.score-row .sv { font-family: var(--mono); font-weight:600; flex:0 0 44px; text-align:right; }
.score-bar { flex:1; height: 8px; border-radius: var(--r-pill); background: var(--track); overflow:hidden; }
.score-bar > i { display:block; height:100%; border-radius: var(--r-pill); background: var(--grad); }

/* 数字滚动等 */
.mono { font-family: var(--mono); }
.muted { color: var(--text-3); }
.tiny { font-size: 11px; }
.mt8{margin-top:8px} .mt12{margin-top:12px} .mt16{margin-top:16px} .mt24{margin-top:24px}
.mb8{margin-bottom:8px} .mb12{margin-bottom:12px} .mb16{margin-bottom:16px}
.flex{display:flex} .aic{align-items:center} .jcb{justify-content:space-between} .gap8{gap:8px} .gap12{gap:12px}
.wrap{flex-wrap:wrap} .grow{flex:1}

@keyframes fadeUp { from{opacity:0; transform: translateY(14px)} to{opacity:1; transform:none} }
.anim { animation: fadeUp .4s ease both; }

/* ---------- 7. 响应式（3.12）---------- */
@media (max-width: 1240px) {
  .g3 { grid-column: span 4; } .g4 { grid-column: span 6; }
  .g5, .g7, .g8, .g9 { grid-column: span 12; }
  .drawer { width: 92vw; }
}
@media (max-width: 900px) {
  /* ⚠️ 登录页：窄屏/矮屏下 .lg-foot 是「绝对定位」会被垂直居中的卡片顶穿 → 改为纵向流式布局，
     页脚回归文档流（永远在内容之后，不再重叠）；垂直居中改用 margin:auto 惯用法：
     有富余空间时上下均分（视觉居中），内容超高时自动塌缩为 0（回落顶部并可滚动）。 */
  #login-view { flex-direction: column; align-items: stretch; overflow-y: auto; }
  .lg-wrap { flex: 0 0 auto; flex-direction: column; align-items: stretch; justify-content: flex-start;
             margin: auto; width: 100%; padding: 30px 20px 18px; gap: 20px; }
  .lg-foot { position: static; margin: 0 0 14px; padding: 0 16px; }
  .lg-hero { max-width: 100%; text-align: center; }
  .lg-hero h1 { font-size: 30px; }
  .lg-hero p.sub, .lg-metrics, .lg-feats { display: none; }
  .lg-card { width: 100%; max-width: 420px; margin: 0; }
  /* ⚠️ 移动端侧栏是抽屉：必须用**不透明**底色。
     原来沿用 --glass-2（半透明玻璃），划出时下层正文透上来，字全糊在一起看不清。
     ⚠️ box-shadow 只在 .open 时给：收起态 translateX(-100%) 时元素右边缘正好在 x=0，
        阴影（14px 偏移 + 36px 模糊）会溢到视口最左侧 → 页面左边多出一条"影子"。 */
  .sidebar { position: fixed; left:0; top:60px; bottom:0; z-index: 30; transform: translateX(-100%);
             width: 268px; flex-basis: 268px; background: var(--bg-2); padding-bottom: 26px;
             transition: transform .25s ease; }
  .sidebar.open { transform: none; box-shadow: 14px 0 36px rgba(0,0,0,.36); }
  .topbar { padding: 0 10px; gap: 9px; }
  .topbar .brand > div { display: none; }
  /* 顶栏搜索框：窄屏下拿掉 .spacer 的争抢，并收窄按钮，让搜索框真正变宽 */
  .topbar .spacer { display: none; }
  .topbar .gsearch { flex: 1 1 auto; min-width: 104px; max-width: none; }
  .topbar .gsearch input { height: 38px; padding: 9px 12px 9px 42px; font-size: 13px; }
  .topbar .tb-btn { width: 34px; height: 34px; flex: 0 0 auto; }
  .topbar .tb-acts { gap: 8px; }
  .topbar .tb-sep { display: none; }
  .topbar .me { padding: 4px; }
  .topbar .me > div:last-child { display: none; }
  .main { padding: 16px 14px 40px; }
  .g2,.g3,.g4 { grid-column: span 6; }
  .form-2 { grid-template-columns: 1fr; }
  .menu-toggle { display: grid !important; }
  .page-head h2 { font-size: 19px; }
  .theme-pop { right: 12px; left: 12px; width: auto; }
}
@media (max-width: 560px) {
  .g2,.g3,.g4 { grid-column: span 12; }
  .lg-hero { display: none; }
  .drawer { width: 100vw; }
  table.tb { font-size: 12px; }
  table.tb th, table.tb td { padding: 8px; }
  .theme-grid { grid-template-columns: repeat(3, 1fr); }
}
.menu-toggle { display: none; }

/* ============================================================
   8. 迭代新增（名言滚动条 / 活动横向卡片 / 视图切换 / 彩色标签）
   ============================================================ */

/* ---------- 8.1 名言滚动条（参考瑞亿平台 .qbar：单行 + 定时向上翻动） ---------- */
.qbar { display:flex; align-items:center; gap:14px; margin-bottom:16px; padding: 11px 16px;
  border:1px solid var(--line); border-radius: var(--r-lg); background: var(--card-grad); position:relative; overflow:hidden; }
.qbar::before { content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, var(--grad-soft), transparent 72%); }
.qb-badge { display:inline-flex; align-items:center; gap:6px; flex:none; position:relative;
  padding:5px 12px; border-radius: var(--r-pill); font-size:12px; font-weight:600; color:#fff;
  background: var(--grad); box-shadow: 0 3px 10px var(--glow); letter-spacing:.04em; }
.qb-badge svg { width:13px; height:13px; }
.qb-slot { flex:1 1 auto; min-width:0; position:relative; height:26px; overflow:hidden; display:flex; align-items:center; }
.qb-txt { font-size:14px; color: var(--text); line-height:26px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; width:100%; }
.qb-from { flex:none; max-width:260px; font-size:12px; color: var(--text-3); text-align:right; position:relative;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qb-txt.roll, .qb-from.roll { animation: qRollUp .5s cubic-bezier(.22,.8,.36,1); }
@keyframes qRollUp { from { transform: translateY(115%); opacity:.15; } to { transform:none; opacity:1; } }
.qb-next { flex:none; width:28px; height:28px; border-radius:9px; border:1px solid var(--line);
  background: var(--surface-2); color: var(--text-3); display:grid; place-items:center; cursor:pointer; transition:.18s; position:relative; }
.qb-next:hover { color: var(--brand-2); border-color: var(--brand-1); transform: rotate(90deg); }
.qb-next svg { width:14px; height:14px; }

/* ---------- 8.2 遴选推荐内容：右向左滚动卡片 ---------- */
.acro { position:relative; overflow:hidden; padding: 2px 0 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%); }
.acro-track { display:flex; gap:14px; will-change: transform; }
.acard { flex:0 0 272px; width:272px; display:flex; flex-direction:column; gap:9px; padding:14px;
  border-radius: var(--r-lg); border:1px solid var(--line); background: var(--surface-2);
  cursor:pointer; transition: border-color .18s, background .18s, transform .18s, box-shadow .18s; }
.acard:hover { border-color: var(--brand-1); background: var(--surface-3); transform: translateY(-2px); box-shadow: var(--shadow); }
.acard .ah { display:flex; align-items:center; gap:10px; }
.acard .aic { flex:0 0 34px; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background: var(--active); color: var(--brand-2); }
.acard .at { font-size: var(--fs-sm); font-weight:600; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.acard .ad { font-size:12px; color: var(--text-3); line-height:1.7; flex:1; min-height:40px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.acard .am { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.acro-dots { display:flex; gap:5px; justify-content:center; margin-top:12px; }
.acro-dots i { width:6px; height:6px; border-radius:50%; background: var(--track); transition:.2s; }
.acro-dots i.on { background: var(--brand-1); width:16px; border-radius:var(--r-pill); }

/* ---------- 8.3 视图切换（卡片 / 列表） ---------- */
.vsw { display:inline-flex; border:1px solid var(--line); border-radius: var(--r-sm); overflow:hidden; background: var(--surface-2); }
.vsw button { border:0; background:transparent; color: var(--text-3); padding: 7px 11px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-xs); transition:.16s; }
.vsw button svg { width:14px; height:14px; }
.vsw button:hover { color: var(--text); }
.vsw button.on { background: var(--active); color: var(--brand-text); }

/* ---------- 8.4 分页：每页条数 ---------- */
.pager .pinfo { margin-right:auto; }
.pager .psz { height:32px; background: var(--surface-2); border:1px solid var(--line);
  border-radius: var(--r-xs); color: var(--text-2); padding: 0 8px; cursor:pointer; font-size: var(--fs-xs); }
.pager .psz:focus { outline:none; border-color: var(--brand-1); }

/* ---------- 8.5 列表视图（资料 / 素材共用的行样式） ---------- */
.lview { display:flex; flex-direction:column; gap:9px; }
.lrow { display:flex; align-items:center; gap:13px; padding: 11px 14px; border:1px solid var(--line);
  border-radius: var(--r); background: var(--surface-2); cursor:pointer; transition:.16s; }
.lrow:hover { border-color: var(--line-2); background: var(--surface-3); }
.lrow .seq { flex:0 0 32px; text-align:center; font-family: var(--mono); font-size:12px; color: var(--text-4); }
.lrow .ic { flex:0 0 36px; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background: var(--active); color: var(--brand-2); }
.lrow .bd { flex:1; min-width:0; }
/* ⚠️ 必须 display:block —— 行内元素上 overflow:hidden/text-overflow:ellipsis 不生效，
   否则标题与摘要会串在同一行并溢出覆盖右侧标签 */
.lrow .tt { display:block; font-weight:600; font-size: var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrow .ds { display:block; font-size:12px; color: var(--text-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrow .ds.hint { color: var(--brand-text); opacity:.8; }
.lrow .ds.hint::after { content:' ›'; }
.lrow .mt { flex:0 0 auto; display:flex; gap:8px; align-items:center; font-size:11px; color: var(--text-4); white-space:nowrap; }

/* ---------- 8.6 序号列（表格） ---------- */
table.tb td.seq, table.tb th.seq { width:56px; text-align:center; font-family: var(--mono); color: var(--text-4); font-size:12px; }

/* ---------- 8.7 彩色标签：宽度自适应 + 按类别着色 ---------- */
.tag.k { background: color-mix(in srgb, var(--tc, var(--brand-1)) 15%, transparent);
  border-color: color-mix(in srgb, var(--tc, var(--brand-1)) 34%, transparent);
  color: var(--text); gap:6px; }
.tag.k::before { content:''; width:5px; height:5px; border-radius:50%; background: var(--tc, var(--brand-1)); flex:none; }
.tag.k.on { border-color: var(--tc, var(--brand-1));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc, var(--brand-1)) 22%, transparent); }

/* 分类快选：自适应宽度的胶囊，不再等宽分栏 */
.cat-wrap { display:flex; flex-wrap:wrap; gap:9px; }
.cat-wrap .chip { padding: 7px 14px; }
.cat-wrap .chip b { font-family: var(--mono); font-size:11px; opacity:.75; }

/* ---------- 8.8 抽屉去掉阻断遮罩（页面仍可滚动、侧栏仍可点击） ---------- */
.shade { position: fixed; inset: 0; z-index:100; background: var(--veil); backdrop-filter: blur(2px);
  opacity:0; transition: opacity .2s; pointer-events:none; }
.shade.on { opacity: 1; }

/* ---------- 8.9 策论实例卡 ---------- */
.ecase { border:1px solid var(--line); border-radius: var(--r-lg); background: var(--card-grad); overflow:hidden; }
.ecase-h { display:flex; align-items:center; gap:10px; padding: 13px 16px; border-bottom:1px solid var(--line); }
.ecase-h .t { font-weight:600; flex:1; min-width:0; }
.ecase-b { padding: 14px 16px; }
.ept { padding: 10px 0 10px 0; border-bottom:1px dashed var(--line); }
.ept:last-child { border-bottom:0; }
.ept .h { font-weight:600; font-size: var(--fs-sm); line-height:1.7; }
.ept .d { font-size:12.5px; color: var(--text-3); line-height:1.8; margin-top:4px; }
.ept .q { margin-top:6px; font-size:12.5px; line-height:1.8; color: var(--gold-text);
  background: var(--gold-soft); border-left:3px solid var(--gold-line); border-radius: 0 var(--r-xs) var(--r-xs) 0; padding: 6px 10px; }
.ecase-grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ecase-mini { border:1px solid var(--line); border-radius: var(--r); background: var(--surface-2); padding: 13px 15px;
  cursor:pointer; transition:.16s; display:flex; flex-direction:column; gap:8px; }
.ecase-mini:hover { border-color: var(--brand-1); background: var(--surface-3); transform: translateY(-2px); }
.ecase-mini .t { font-weight:600; font-size: var(--fs-sm); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ecase-mini .p { font-size:12px; color: var(--text-3); line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* 勾选态 */
.pick-box { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line-2); flex:none;
  display:grid; place-items:center; cursor:pointer; transition:.15s; background: var(--surface-2); }
.pick-box.on { background: var(--grad); border-color: transparent; color:#fff; }
.pick-box svg { width:12px; height:12px; }

/* ---------- 8.10 打印（策论实例 / 素材背诵纸） ---------- */
@media print {
  body { overflow: visible !important; background:#fff !important; color:#000 !important; }
  .sidebar, .topbar, .page-head .spacer, .filters, .pager, .no-print, #sb-backdrop { display:none !important; }
  .app, .main { display:block !important; padding:0 !important; overflow:visible !important; height:auto !important; }
  .card, .ecase, .ecase-mini { border:1px solid #ccc !important; background:#fff !important; box-shadow:none !important;
    break-inside: avoid; page-break-inside: avoid; }
  .ept .q { background:#f5f5f5 !important; color:#333 !important; border-left-color:#999 !important; }
  .print-title { display:block !important; }
}
.print-title { display:none; font-size:20px; font-weight:700; margin: 0 0 14px; }

/* ---------- 8.11 双轨分类页签 ---------- */
.trackbar { display:inline-flex; gap:6px; padding:4px; border-radius: var(--r-sm);
  background: var(--surface-2); border:1px solid var(--line); }
.trackbar button { border:0; background:transparent; color: var(--text-3); padding: 7px 15px; border-radius: var(--r-xs);
  cursor:pointer; font-size: var(--fs-xs); font-weight:500; transition:.16s; display:inline-flex; align-items:center; gap:6px; }
.trackbar button:hover { color: var(--text); }
.trackbar button.on { background: var(--grad); color:#fff; box-shadow: 0 2px 8px var(--glow); }

/* ---------- 8.12 打印稿容器（屏幕隐藏，打印时替换整个应用） ---------- */
#print-root { display: none; }
#print-root .p-h1 { font-size:19px; font-weight:700; margin: 18px 0 6px; padding-bottom:5px; border-bottom:1px solid #ccc; }
#print-root .p-h2 { font-size:16px; font-weight:700; margin: 14px 0 5px; }
#print-root .p-h3 { font-size:14.5px; font-weight:600; margin: 10px 0 3px; }
#print-root .p-p { font-size:14px; line-height:1.95; margin: 4px 0; text-align:justify; }
#print-root .p-q { font-size:14px; line-height:1.9; margin: 6px 0 6px 14px; padding: 6px 11px;
  background:#f6f4ec; border-left:3px solid #b8a24a; }
#print-root .p-meta { font-size:12px; color:#666; margin: 5px 0; }
#print-root .p-li { font-size:14px; line-height:1.9; margin-left:16px; }
#print-root .p-hr { border:0; border-top:1px dashed #ccc; margin: 16px 0; }
#print-root .p-pb { page-break-after: always; break-after: page; height:0; }
#print-root .p-svg { text-align:center; }
#print-root .p-svg svg { max-width:100%; height:auto; }
@media print {
  body.printing > #app { display: none !important; }
  body.printing #print-root { display: block !important; padding: 0 4mm; }
  body.printing > #login-view { display: none !important; }
}

/* ============================================================
   9. 迭代第二批（列表页能力 / 批量选择 / 知识点详解）
   ============================================================ */
/* 工具条：双轨页签 + 视图切换 + 导出，同一行 */
.listbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.listbar .spacer { flex:1; }

/* 批量选择工具条 */
.selbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding: 10px 14px; margin-bottom:12px;
  border:1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.selbar .cnt { font-size: var(--fs-xs); color: var(--text-3); }
.selbar .cnt b { color: var(--brand-text); font-family: var(--mono); }

/* 选中态 */
.ecase-mini.sel, .lrow.sel { border-color: var(--brand-1); box-shadow: 0 0 0 2px var(--glow); }
.lrow .pick-wrap, .ecase-mini .pick-wrap { flex:none; display:flex; align-items:center; }

/* 卡片视图下的「相关资料」可点 */
.rel-link { cursor:pointer; color: var(--text); transition:.15s; }
.rel-link:hover { color: var(--brand-text); text-decoration: underline; }
.li.is-link:hover { background: var(--surface-3); border-radius: var(--r-xs); }

/* 知识点详解正文 */
.kp-content { line-height:2; white-space:pre-wrap; font-size: 13.5px; color: var(--text-2);
  background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }

/* 列表视图的批量勾选列 */
.lrow .tsel { flex:0 0 auto; display:flex; align-items:center; }

/* 行内的「每页条数」与分页保持一致间距 */
.pager select.psz { margin-left:8px; }

/* 响应式补充 */
@media (max-width: 900px) {
  .qbar { flex-wrap:wrap; gap:9px; padding:10px 13px; }
  .qb-slot { flex:1 1 100%; order:3; }
  .qb-from { margin-left:auto; max-width:46%; }
  .acard { flex:0 0 232px; width:232px; }
  .ecase-grid { grid-template-columns: 1fr; }
  .pager { flex-wrap:wrap; }
  .pager .pinfo { width:100%; margin-right:0; }
  .listbar { gap:8px; }
  .listbar .spacer { flex:1 1 100%; }
  .selbar { gap:8px; }
  .lrow .mt { display:none; }
  .lrow .ds { white-space:normal; -webkit-line-clamp:1; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
}


/* ============================================================
   10. 题目详情 / 批量导入（题库管理）
   ============================================================ */
.q-stem { font-size:15px; line-height:1.9; color: var(--text-1); white-space:pre-wrap; padding:14px 16px;
  background: var(--bg-2); border:1px solid var(--line); border-left:3px solid var(--brand-2); border-radius:10px; }
/* 材料 / 案例背景（UI.caseBlock）：长材料在块内下拉查看全部，不截断、不撑破布局 */
.qcase { margin-bottom:14px; border:1px solid var(--line); border-left:3px solid var(--brand-1);
  border-radius:10px; background: var(--bg-2); overflow:hidden; }
.qcase-h { display:flex; align-items:center; gap:8px; padding:9px 14px; font-size:12px; color: var(--text-3);
  background: var(--bg-3); border-bottom:1px dashed var(--line); }
.qcase-h b { font-size:12.5px; color: var(--brand-text); }
.qcase-h .tiny { margin-left:auto; }
.qcase-b { padding:13px 16px; font-size:13.5px; line-height:1.9; color: var(--text-1); white-space:pre-wrap;
  max-height:min(300px, 46vh); overflow-y:auto; overscroll-behavior:contain; }
.qcase-b::-webkit-scrollbar { width:8px; }
.qcase-b::-webkit-scrollbar-thumb { background: var(--line-2); border-radius:4px; }
.q-opts { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.q-opt { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:9px;
  border:1px solid var(--line); background: var(--bg-3); line-height:1.7; font-size:13.5px; }
.q-opt b { flex:0 0 18px; color: var(--text-4); }
.q-opt.on { border-color: color-mix(in srgb, var(--success-text) 55%, transparent);
  background: color-mix(in srgb, var(--success-text) 12%, transparent); }
.q-opt.on b { color: var(--success-text); }
.q-ans { margin-top:16px; padding:12px 16px; border-radius:10px; background: color-mix(in srgb, var(--chart-3) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--chart-3) 30%, transparent); }
.q-ans-v { font-size:18px; font-weight:600; letter-spacing:1px; color: var(--brand-text); }
.q-ana { margin-top:12px; }

/* 导入弹窗 */
.qi-guide { display:flex; flex-direction:column; gap:8px; font-size:12.5px; line-height:1.8; color: var(--text-3);
  background: var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:12px 15px; }
.qi-guide b { color: var(--text-1); }
.qi-sum { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.qi-list { max-height: 42vh; overflow-y:auto; border:1px solid var(--line); border-radius:10px; background: var(--bg-2); }
.qi-item { padding:10px 13px; border-bottom:1px solid var(--line); }
.qi-item:last-child { border-bottom:0; }
.qi-item.dup { opacity:.55; }
.qi-h { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:5px; }
.qi-h b { color: var(--text-4); font-size:11px; }
.qi-s { font-size:13px; line-height:1.7; color: var(--text-1); }
.qi-o { font-size:12px; color: var(--text-3); margin-top:4px; line-height:1.7; }
.qi-a { font-size:12px; color: var(--text-4); margin-top:4px; }
.qi-a b { color: var(--success-text); }

/* 策论范文段落 */
.epara { text-indent: 2em; line-height: 2.05; margin-bottom: 10px; font-size: 13.5px; color: var(--text-2); }

/* ============================================================
   备考方向多选 chips
   ============================================================ */
.f-label { font-size:12px; color: var(--text-4); align-self:center; }
.chipbar { display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
.chip { border:1px solid var(--line-2); background: var(--bg-2); color: var(--text-3); border-radius:999px;
  padding:5px 13px; font-size:12.5px; cursor:pointer; transition:.18s; }
.chip:hover { color: var(--text-1); border-color: var(--brand-2); }
.chip.on { background: var(--active); color: var(--brand-text); border-color: color-mix(in srgb, var(--brand-1) 55%, transparent);
  font-weight:600; }

/* ============================================================
   学习备考路线（学习中台）
   ============================================================ */
.road-card { background: var(--grad-soft); border-color: var(--line-2); }
.road { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.road-step { position:relative; display:flex; gap:10px; padding:13px 14px; border-radius:12px;
  background: var(--surface-2); border:1px solid var(--line); }
.road-step.done { border-color: color-mix(in srgb, var(--success-text) 45%, transparent); }
.rs-idx { flex:0 0 26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700;
  background: var(--active); color: var(--brand-text); border:1px solid var(--line-2); }
.road-step.done .rs-idx { background: color-mix(in srgb, var(--success-text) 18%, transparent); color: var(--success-text);
  border-color: color-mix(in srgb, var(--success-text) 45%, transparent); }
.rs-body { flex:1; min-width:0; }
.rs-h { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.rs-h b { font-size:14px; color: var(--text-1); }
.rs-tasks { display:flex; flex-direction:column; gap:2px; }
.rs-task { font-size:11.8px; color: var(--text-3); line-height:1.7; }

/* ============================================================
   悬停详情卡（题干预览）
   ============================================================ */
.hovercard { position:fixed; z-index:320; max-width:430px; display:none; pointer-events:none;
  background: var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:14px 16px;
  box-shadow: 0 18px 46px rgba(0,0,0,.42); backdrop-filter: blur(8px); }
.hovercard.on { display:block; }
.hc-h { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:9px; }
.hc-stem { font-size:13.5px; line-height:1.75; color: var(--text-1); margin-bottom:9px; }
.hc-opts { display:flex; flex-direction:column; gap:5px; margin-bottom:9px; }
.hc-opt { display:flex; gap:8px; font-size:12.5px; color: var(--text-2); line-height:1.6; padding:4px 8px; border-radius:7px;
  background: var(--bg-2); }
.hc-opt.on { background: color-mix(in srgb, var(--success-text) 12%, transparent); color: var(--text-1); }
.hc-opt.on b { color: var(--success-text); }
.hc-opt b { color: var(--text-4); min-width:14px; }
.hc-ans { font-size:12.5px; color: var(--text-2); padding-top:8px; border-top:1px dashed var(--line); }
.hc-ans b { color: var(--brand-text); }
.hc-ana { font-size:12.5px; color: var(--text-3); line-height:1.75; margin-top:7px; }
.hc-ana b { color: var(--text-4); }
.hc-foot { font-size:11px; color: var(--text-4); margin-top:9px; }

/* ============================================================
   党史国史 · 党代会时间轴
   ============================================================ */
.timeline { position:relative; padding-left:6px; }
.ct-item { display:flex; gap:14px; }
.ct-node { flex:0 0 20px; display:flex; flex-direction:column; align-items:center; }
.ct-node::after { content:''; flex:1; width:2px; background: var(--line-2); }
.ct-item:last-child .ct-node::after { display:none; }
.ct-dot { width:12px; height:12px; border-radius:50%; margin-top:20px;
  background: var(--grad); box-shadow: 0 0 0 4px var(--ring); }
.ct-card { flex:1; min-width:0; margin-bottom:12px; padding:12px 15px; border-radius:12px;
  background: var(--surface-2); border:1px solid var(--line); cursor:pointer; transition:.18s; }
.ct-card:hover { border-color: var(--line-2); background: var(--surface-3); }
.ct-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:7px; }
.ct-toggle { margin-left:2px; }
.ct-point { font-size:13px; line-height:1.8; color: var(--text-2); }
.ct-body { margin-top:11px; padding-top:11px; border-top:1px dashed var(--line); }
.ct-sig { font-size:12.5px; line-height:1.8; color: var(--text-3); }
.ct-sig b { color: var(--brand-text); }

/* ============================================================
   后台：分组标签栏 + 平台设置预览
   ============================================================ */
.tabs-grouped { flex-wrap:wrap; gap:14px; align-items:center; }
.tab-group { display:flex; align-items:center; gap:6px; padding-right:14px; border-right:1px solid var(--line); }
.tab-group:last-child { border-right:0; padding-right:0; }
.tg-label { font-size:11px; color: var(--text-4); letter-spacing:.5px; }
.prev-brand { display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px; background: var(--grad-soft);
  border:1px solid var(--line-2); }
.prev-brand .mark { width:38px; height:38px; border-radius:11px; background: var(--grad); display:grid; place-items:center; }
.prev-brand .pb-name { font-size:16px; font-weight:700; color: var(--text-1); }
.prev-brand small { color: var(--text-3); font-size:11.5px; }

/* ============================================================
   统一选择框 / 输入框观感
   ============================================================ */
select, select.input, .filters select, .pager select.psz, .listbar select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 0 34px 0 12px !important;
  background-color: var(--surface-2);
  border: 1px solid var(--line);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238397b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 14px 14px;
  border-radius: 10px; min-height: 38px; cursor: pointer; color: var(--text-1);
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.filters select, .filters input, .filters .btn { min-height: 38px; }
select:hover, select.input:hover, .filters select:hover { border-color: var(--line-2); background-color: var(--surface-3); }
select:focus, select.input:focus { border-color: var(--brand-1); box-shadow: 0 0 0 3px var(--ring-2); }
select option { background: var(--surface); color: var(--text-1); }
.filters { background: var(--surface); border:1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.filters:empty { display:none; }
input.input:hover, .textarea:hover { border-color: var(--line-2); }

/* 备考方向 chips：更精致的选择态 */
.chipbar { gap:7px; }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 15px;
  border-radius: 10px; border:1px solid var(--line); background: var(--surface-2); color: var(--text-3);
  font-size: 12.5px; cursor:pointer; transition:.18s; }
.chip:hover { border-color: var(--line-2); background: var(--surface-3); color: var(--text-1); }
.chip.on { background: var(--grad-soft); border-color: color-mix(in srgb, var(--brand-1) 60%, transparent);
  color: var(--brand-text); font-weight:600; box-shadow: 0 0 0 2px var(--ring-2); }
.chip.on::before { content:'✓'; font-size:11px; }

/* 收藏按钮（列表内小星标） */
.fav-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:8px; color: var(--text-4); cursor:pointer; border:1px solid transparent; transition:.18s; flex:none; }
.fav-btn:hover { color: var(--warn-text); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.fav-btn.on { color: var(--warn-text); background: var(--warn-soft); }
.fav-btn.on svg { fill: currentColor; }
.fav-btn svg { width:14px; height:14px; }

/* ============================================================
   卡片等高对齐（学习中台 / 各页面网格）
   ⚠️ 只对「单元格内仅有一张卡」的情况拉伸到行高。
   若单元格里放了多张卡（如学习中台右栏「快捷入口 + 标签云」），
   旧的 `height:100%` 会让每张卡都撑满整列 → 卡片相互挤压、底部大片空白错乱。
   ============================================================ */
.grid > * > .card:only-child,
.grid > * > .kpi:only-child { height: 100%; }
.grid > * > .card { display: flex; flex-direction: column; }
.grid > * > .card > .card-h { flex: none; }
.grid > * > .card + .card { margin-top: 16px; }
.card .grid { height: auto; }
.dash-row { align-items: stretch; }
/* 首页 KPI 行统一最小高度，避免高低不齐 */
.grid > .g3 > .kpi { min-height: 128px; }
.grid > .g6 > .kpi, .grid > .g4 > .kpi { min-height: 116px; }
.listbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.listbar .spacer { flex:1; }

@media (max-width: 900px) {
  .road { grid-template-columns: 1fr; }
  .tabs-grouped { gap:8px; }
  .tab-group { border-right:0; padding-right:0; }
}

/* ============================================================
   标签云（学习中台右侧底部）
   ============================================================ */
/* ⚠️ 这里**不要**再写 margin-bottom：它是右列最后一张卡片，
   多出的 16px 会让卡片底部比左列高 16px（上下不齐）。 */
.tcloud-card { margin-bottom: 0; }
.tcloud { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:2px; }
.tcloud .tc {
  display:inline-block; cursor:pointer; line-height:1.5; white-space:nowrap;
  padding:3px 10px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text-2);
  font-size:12px; transition:transform .16s, color .16s, border-color .16s, background .16s;
}
.tcloud .tc:hover {
  transform:translateY(-1px); color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2));
}
.tcloud .tc.lv0 { font-size:12px; opacity:.82; }
.tcloud .tc.lv1 { font-size:12.5px; }
.tcloud .tc.lv2 { font-size:13.5px; color:var(--text); }
.tcloud .tc.lv3 { font-size:14.5px; font-weight:600; color:var(--text); }
.tcloud .tc.lv4 { font-size:16px; font-weight:700; color:var(--brand-2); border-color:var(--brand-1); background:var(--active); }

/* ============================================================
   刷题训练模式卡（自适应列数） / 历年真题场次卡
   ============================================================ */
.mode-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap:16px; margin-bottom:16px; }
.mode-grid > .kpi { height: 100%; }
.real-card { cursor:pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.real-card:hover { transform: translateY(-2px); border-color: var(--brand-1); box-shadow: 0 10px 28px var(--glow); }
.real-card .rc-h { display:flex; align-items:center; gap:8px; font-size:13.5px; line-height:1.45; }
.real-card .rc-h svg { flex:none; color: var(--brand-2); }
.real-card .rc-h b { font-weight:600; }
@media (max-width: 560px) {
  .mode-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   考试信息 · 报名时限分级（正在报名 / ≤5 / ≤3 / ≤1 天）
   ============================================================ */
.tag.dl-ok     { background: var(--success-soft); color: var(--success-text); border-color: var(--success-line); }
.tag.dl-info   { background: var(--info-soft);    color: var(--info); }
.tag.dl-warn   { background: var(--warn-soft);    color: var(--warn-text); }
.tag.dl-urgent { background: var(--danger-soft);  color: var(--danger-text); border-color: var(--danger-line); }
.tag.dl-over   { background: var(--surface-3);    color: var(--text-4); }
.tag.dl-urgent::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--danger); animation: lxPulse 1.4s ease-in-out infinite; }
@keyframes lxPulse { 0%,100% { opacity:1 } 50% { opacity:.25 } }

.xcard { position:relative; transition: transform .18s, border-color .18s, box-shadow .18s; }
.xcard:hover { transform: translateY(-2px); border-color: var(--brand-1); box-shadow: 0 10px 28px var(--glow); }
.xcard.hot-ok     { box-shadow: inset 3px 0 0 var(--success); }
.xcard.hot-info   { box-shadow: inset 3px 0 0 var(--info); border-color: color-mix(in srgb, var(--info) 34%, transparent); }
.xcard.hot-warn   { box-shadow: inset 3px 0 0 var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.xcard.hot-urgent { box-shadow: inset 3px 0 0 var(--danger); border-color: var(--danger-line); }
.xcard.hot-over   { opacity:.68; }
.xcard.hot-urgent:hover { box-shadow: inset 3px 0 0 var(--danger), 0 10px 28px var(--glow); }

/* 关键信息（列表卡片内） */
.xk { display:flex; flex-direction:column; gap:5px; }
.xk-row { display:flex; gap:8px; align-items:baseline; }
.xk-k { flex:none; min-width:56px; color: var(--text-4); font-size:12px; }
.xk-v { color: var(--text); font-weight:600; font-size:12.5px; font-variant-numeric: tabular-nums; }
.xk-none { font-size:12.5px; line-height:1.7; }

/* 关键信息（列表视图行内） */
.lrow .xk-mini { display:inline-block; margin-right:14px; font-size:12px; color: var(--text-2); }
.lrow .xk-mini b { color: var(--text-4); font-weight:400; margin-right:5px; }

/* 关键信息（详情抽屉大号） */
.xkgrid { display:grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap:14px 20px; }
.xkg .xk-k { font-size:11.5px; margin-bottom:4px; min-width:0; }
.xkg .xk-v { font-size:15px; font-weight:700; color: var(--brand-text); }

/* ============================================================
   左侧「考试信息」重点菜单：加粗 + 招考数字徽标（不用常驻底纹）
   ============================================================ */
.nav-item.hot { position:relative; }
.nav-item.hot > span { font-weight:700; color: var(--text); letter-spacing:.01em; }
.nav-item.hot svg { opacity:1; color: var(--brand-2); }
.nav-item.hot:hover { background: var(--hover); }
.nav-item.hot.on { background: var(--active); color: var(--text); box-shadow: inset 2px 0 0 var(--brand-2); }
.nav-item .badge-n.soft { background: var(--surface-3); color: var(--text-3); border: 1px solid var(--line); }
.nav-item .badge-n[hidden] { display:none; }

/* ============================================================
   顶栏铃铛未读徽标 / 右下角提醒弹窗
   ============================================================ */
#btn-notice { position:relative; }
#btn-notice .badge { position:absolute; top:-5px; right:-6px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background: var(--danger); color:#fff; font-size:10px; font-weight:700; line-height:16px;
  text-align:center; box-shadow: 0 0 0 2px var(--bg); }

.alert-pop { position:fixed; right:20px; bottom:20px; z-index:9600; width:330px; max-width: calc(100vw - 32px);
  display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.alert-card { pointer-events:auto; background: var(--surface-2); border:1px solid var(--line-2);
  border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow);
  animation: acIn .28s cubic-bezier(.2,.8,.3,1) both; }
.alert-card.out { animation: acOut .22s ease both; }
@keyframes acIn  { from { opacity:0; transform: translateY(16px) scale(.97) } to { opacity:1; transform:none } }
@keyframes acOut { to   { opacity:0; transform: translateX(28px) } }
.alert-card.lv-urgent { border-left:3px solid var(--danger); }
.alert-card.lv-warn   { border-left:3px solid var(--warn); }
.alert-card.lv-info   { border-left:3px solid var(--info); }
.ac-h { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.ac-lv { font-size:10.5px; padding:1px 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-3); }
.alert-card.lv-urgent .ac-lv { background: var(--danger-soft); color: var(--danger-text); }
.alert-card.lv-warn   .ac-lv { background: var(--warn-soft);   color: var(--warn-text); }
.alert-card.lv-info   .ac-lv { background: var(--info-soft);   color: var(--info); }
.ac-t { font-size:11.5px; color: var(--text-4); }
.ac-x { margin-left:auto; display:inline-flex; cursor:pointer; opacity:.55; }
.ac-x:hover { opacity:1; }
.ac-title { font-size:13.5px; font-weight:600; line-height:1.5; }
.ac-body { font-size:12px; color: var(--text-3); line-height:1.65; margin-top:5px; }
.ac-f { display:flex; gap:8px; justify-content:flex-end; margin-top:11px; }

/* 铃铛抽屉：提醒列表 */
.alist { display:flex; flex-direction:column; gap:9px; }
.alrow { padding:11px 13px; border:1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.alrow.read { opacity:.6; }
.alrow .ic { width:36px; height:36px; border-radius:10px; }
.alrow .ic.lv-urgent { background: var(--danger-soft); color: var(--danger-text); }
.alrow .ic.lv-warn   { background: var(--warn-soft);   color: var(--warn-text); }
.alrow .ic.lv-info   { background: var(--info-soft);   color: var(--info); }
.alrow .bd .tt { font-size:13.5px; }
.alrow .bd .meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:11.5px; color: var(--text-4); margin-top:5px; }
.alrow .ops { flex:none; display:flex; gap:8px; align-items:center; }

@media (max-width: 640px) {
  .alert-pop { right:10px; left:10px; bottom:10px; width:auto; }
}

/* ============================================================
   前台自助注册：登录页入口 + 注册表单
   ============================================================ */
.lg-links { display:inline-flex; align-items:center; gap:8px; }
.lg-links em { color: var(--text-4); font-style:normal; }
.lg-links span { cursor:pointer; transition:.16s; }
.lg-links span:hover { color: var(--brand-text); }
.lg-links .hot-link { color: var(--brand-2); font-weight:600; position:relative; }
.lg-links .hot-link::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); opacity:.9; }
.reg-note { background: var(--grad-soft); border:1px solid var(--line-2); border-radius: var(--r-sm);
  padding:10px 12px; font-size: var(--fs-xs); color: var(--text-2); line-height:1.7; margin-bottom:16px; }
.reg-done { display:flex; gap:14px; align-items:flex-start; }
.reg-done > svg { flex:none; width:34px; height:34px; padding:7px; border-radius: 50%;
  background: var(--success-soft); color: var(--success-text); }
.reg-done b { display:block; margin-bottom:6px; }
.reg-done p { margin:0; line-height:1.75; }

/* 后台「待审核」徽标 */
.tag.pending { background: var(--warn-soft); color: var(--warn-text); }
.tag.rejected { background: var(--danger-soft); color: var(--danger-text); }
.urow.pending { border-color: var(--warn-line, var(--warn-soft)); }

/* ============================================================
   彩色封面 / 彩色缩略图（给卡片与列表行增加「图片感」的视觉层次）
   配色全部取自主题变量 --chart-1..10 → 10 套深浅主题自动适配
   ============================================================ */
.cover { position:relative; display:flex; flex:none; align-items:center; gap:10px; padding:0 14px;
  border-radius: var(--r-md); overflow:hidden; color:#fff; isolation:isolate; }
.cover::after { content:''; position:absolute; inset:0; z-index:0;
  background: linear-gradient(120deg, rgba(0,0,0,.30), rgba(0,0,0,.04) 55%, rgba(255,255,255,.10)); }
.cover.bleed { margin: -18px -18px 14px; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.cover .cv-p { position:absolute; inset:0; z-index:0; width:100%; height:100%; }
.cover .cv-ic { position:relative; z-index:1; display:inline-flex; opacity:.96; }
.cover .cv-ic svg { width:24px; height:24px; }
.cover .cv-tx { position:relative; z-index:1; display:flex; flex-direction:column; min-width:0; }
.cover .cv-tx b { font-size:13.5px; font-weight:700; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow: 0 1px 6px rgba(0,0,0,.28); }
.cover .cv-tx small { font-size:11px; opacity:.9; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cover .cv-lb { position:absolute; right:12px; bottom:7px; z-index:1; font-size:10.5px; letter-spacing:.08em;
  opacity:.9; text-transform:uppercase; }
.cover.sm { padding:0 10px; }
.cover.sm .cv-ic svg { width:18px; height:18px; }

.cv0 { background: linear-gradient(135deg, var(--chart-1), var(--chart-2)); }
.cv1 { background: linear-gradient(135deg, var(--chart-2), var(--chart-3)); }
.cv2 { background: linear-gradient(135deg, var(--chart-3), var(--chart-4)); }
.cv3 { background: linear-gradient(135deg, var(--chart-4), var(--chart-5)); }
.cv4 { background: linear-gradient(135deg, var(--chart-5), var(--chart-6)); }
.cv5 { background: linear-gradient(135deg, var(--chart-6), var(--chart-7)); }
.cv6 { background: linear-gradient(135deg, var(--chart-7), var(--chart-8)); }
.cv7 { background: linear-gradient(135deg, var(--chart-8), var(--chart-9)); }
.cv8 { background: linear-gradient(135deg, var(--chart-9), var(--chart-10)); }
.cv9 { background: linear-gradient(135deg, var(--chart-10), var(--chart-1)); }

/* 列表行左侧的彩色小方砖 */
.tile { flex:0 0 36px; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  color:#fff; position:relative; overflow:hidden; box-shadow: var(--shadow-sm); }
.tile.sm { flex:0 0 26px; width:26px; height:26px; border-radius:8px; }
.tile.sm svg { width:15px; height:15px; }
.tile::after { content:''; position:absolute; inset:0; background: linear-gradient(140deg, rgba(255,255,255,.22), rgba(0,0,0,.18)); }
.tile svg { position:relative; z-index:1; }
.lrow .tile:not(.sm), .li .tile:not(.sm) { flex:0 0 36px; }

/* ---------- 带数量的多选下拉（资料中心分类筛选） ---------- */
.msel { position:relative; display:inline-block; }
.msel-btn { display:inline-flex; align-items:center; gap:7px; height:38px; min-width:150px; max-width:250px;
  padding:0 11px; border:1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--text-3); font-size: var(--fs-xs); font-family:inherit; cursor:pointer; transition:.16s; }
.msel-btn:hover { border-color: var(--line-2); background: var(--surface-3); color: var(--text-1); }
.msel-btn.on { border-color: var(--brand-1); color: var(--brand-text); background: var(--active); }
.msel-btn .ellipsis { flex:1; text-align:left; }
.msel-n { font-style:normal; font-size:10px; line-height:1; padding:3px 6px; border-radius:99px;
  background: var(--brand-1); color:#fff; font-variant-numeric: tabular-nums; }
.msel-ar { display:inline-flex; opacity:.7; }
.msel-ar svg { width:14px; height:14px; }
.msel-btn.on .msel-ar { transform: rotate(180deg); }
.msel-panel { position:absolute; z-index:80; top:calc(100% + 6px); left:0; width:262px; max-height:330px; overflow:auto;
  display:none; padding:6px; background: var(--surface); border:1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--shadow); }
.msel-panel.on { display:block; }
.msel-top { position:sticky; top:-6px; z-index:1; display:flex; align-items:center; gap:12px; line-height:1.4;
  padding:7px 9px; margin-bottom:3px; border-bottom:1px solid var(--line); background: var(--surface); }
.msel-top a { font-size:11px; color: var(--brand-text); cursor:pointer; }
.msel-top em { font-style:normal; font-size:11px; color: var(--text-4); }
.msel-top .spacer { flex:1; }
.msel-i { display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius: var(--r-xs);
  cursor:pointer; font-size: var(--fs-xs); color: var(--text-2); transition:.14s; }
.msel-i:hover { background: var(--surface-3); color: var(--text-1); }
.msel-i.on { background: var(--active); color: var(--brand-text); }
/* ⚠️ 复选框必须显式定尺寸：`.filters input { min-height:38px }` 会把它撑成 38px（行距巨大的根因） */
.msel-i input[type="checkbox"] { flex:none; width:15px; height:15px; min-height:0; max-height:none;
  padding:0; margin:0; accent-color: var(--brand-1); }
.msel-i > span { flex:1; min-width:0; }
.msel-i > i { font-style:normal; font-size:11px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.msel-i.on > i { color: var(--brand-text); }
@media (max-width: 900px) { .msel { width:100%; } .msel-btn { width:100%; max-width:none; } .msel-panel { width:100%; } }

/* ============================================================
   9. 后台「我的资料」/ 系统设置 / KPI 彩色条
   —— 2026-10-11 后台菜单按导航重新整理后引入
   ⚠️ 页面内不再放二级菜单（侧栏「管理员后台 / 系统设置」即导航），因此无 .admenu 相关样式
   ============================================================ */
.kpi-bar { position:absolute; left:0; right:0; top:0; height:4px; z-index:2;
  border-radius: var(--r-lg) var(--r-lg) 0 0; }
.kpi-bar::after { content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0) 70%); }

/* 「我的资料」资料行 / 头像块 / 概览数字 */
.mrow { display:flex; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line); }
.mrow:last-child { border-bottom:0; }
.mrow .k { flex:none; width:88px; color:var(--text-4); font-size:var(--fs-xs); }
.mrow .v { flex:1; min-width:0; color:var(--text-1); font-size:var(--fs-sm); word-break:break-all; }
.me-profile { display:flex; align-items:center; gap:13px; padding:2px 0 13px; border-bottom:1px solid var(--line); }
.me-profile .av { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; flex:none;
  background:var(--grad); color:#fff; font-size:21px; font-weight:600; }
.me-profile .nm { font-size:16px; font-weight:600; color:var(--text-1); }
.me-profile .rl { display:flex; align-items:center; gap:8px; margin-top:5px; flex-wrap:wrap; }
.ov-i { display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface-2); }
.ov-i b { font-size:22px; font-family:var(--mono); color:var(--brand-text); font-variant-numeric:tabular-nums; }
.ov-i span { color:var(--text-3); font-size:var(--fs-xs); }
.me-logs .li { padding:9px 0; border-bottom:1px dashed var(--line); }
.me-logs .li:last-child { border-bottom:0; }

/* 「系统设置」内的分组小节（原平台设置里的注册区块抽到独立菜单后用同一套外观） */
.set-sec { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.set-sec-h { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--text-1);
  font-size:var(--fs-sm); margin-bottom:12px; }
.set-sec-h svg { width:16px; height:16px; color:var(--brand-2); }
.switch-row { display:flex; align-items:flex-start; gap:13px; }

/* 彩色小圆点（列表前的色标，让「我的学习数据」等行也有颜色） */
.cdot { display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; }

/* ============================================================
   10. 「考试信息」新公告提示（红字 + 「新」标）
   —— 只在用户上次查看之后新增的公告上出现；点开考
      试信息页即推进已读游标，下次进入自动恢复常规配色
   ============================================================ */
.xcard.is-new .xt,
.lrow.is-new .tt,
.drawer-h h3.is-new { color: var(--danger-text); }
.xcard.is-new .xt { font-weight: 700; }
.lrow.is-new .tt { font-weight: 600; }
.xcard.is-new { border-color: var(--danger-line); }
.lrow.is-new .tile, .lrow.is-new .ic { box-shadow: 0 0 0 2px var(--danger-soft); }

/* 图谱 / 思维导图：可拖动 + 一键美化 */
.mm-wrap, .gph-wrap { cursor: grab; }
.mm-wrap.dragging, .gph-wrap.dragging { cursor: grabbing; }
.mm-node, .gnode { cursor: move; }
.mm-node.drag, .gnode.drag { opacity: .92; }
.map-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.map-tip { margin-left:auto; color: var(--text-4); font-size: var(--fs-xs); }

/* ============================================================
   11. 知识点悬浮卡（知识图谱 / 思维导图节点 hover）
   —— 与 .hovercard 的区别：这张卡是「可交互」的
      （pointer-events:auto），条目能点进资料 / 试题详情
   ============================================================ */
.kpcard { position:fixed; z-index:340; width:330px; display:none; pointer-events:none;
  background: var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:13px 15px 10px;
  box-shadow: 0 18px 46px rgba(0,0,0,.42); backdrop-filter: blur(8px); }
.kpcard.on { display:block; pointer-events:auto; }
.kpc-h { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px; }
.kpc-t { font-size:14.5px; font-weight:700; color: var(--text); line-height:1.5; margin-bottom:5px; }
.kpc-s { font-size:12.3px; color: var(--text-3); line-height:1.7; margin-bottom:9px; }
.kpc-stats { display:flex; gap:14px; padding:8px 0 9px; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); }
.kpc-stats span { font-size:11.5px; color: var(--text-4); display:flex; align-items:baseline; gap:4px; }
.kpc-stats b { font-size:14px; color: var(--brand-text); font-weight:700; }
.kpc-sec { display:flex; align-items:center; font-size:11px; color: var(--text-4); letter-spacing:.4px;
  margin:9px 0 4px; }
.kpc-sec .more { margin-left:auto; color: var(--text-4); font-weight:400; }
.kpc-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer;
  transition: background .15s; }
.kpc-item:hover { background: var(--bg-2); }
.kpc-item.off { cursor:default; }
.kpc-item.off:hover { background:transparent; }
.kpc-item.off:hover .tx { color: var(--text-1); }
.kpc-item .ic { flex:none; display:flex; align-items:center; color: var(--brand-text); }
.kpc-item .ic svg { width:14px; height:14px; }
.kpc-item .tx { flex:1; min-width:0; font-size:12.5px; color: var(--text-1); line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kpc-item:hover .tx { color: var(--brand-text); }
.kpc-item .go { flex:none; color: var(--text-4); font-size:12px; }
.kpc-f { margin-top:9px; padding-top:8px; border-top:1px dashed var(--line); font-size:11px; color: var(--text-4); }

/* ============================================================
   11. 启动遮罩 / 窄屏顶栏 / 个人中心彩色概览
   ============================================================ */

/* ---------- 11.1 启动遮罩：先判会话再决定显示登录页还是主应用 ---------- */
.boot-splash { position:fixed; inset:0; z-index:300; display:none; place-items:center; background: var(--bg); }
body.booting .boot-splash { display:grid; }
body.booting #login-view, body.booting #app { visibility: hidden; }
.boot-splash .bs-in { display:flex; flex-direction:column; align-items:center; gap:14px; }
.boot-splash .bs-mark { width:58px; height:58px; border-radius:17px; background: var(--grad);
  display:grid; place-items:center; box-shadow: 0 10px 30px var(--logo-glow); }
.boot-splash .bs-mark svg { width:30px; height:30px; }
.boot-splash .bs-t { font-size:13px; letter-spacing:.2em; color: var(--text-3); }
.boot-splash .bs-bar { width:132px; height:3px; border-radius:3px; background: var(--track); overflow:hidden; }
.boot-splash .bs-bar i { display:block; width:38%; height:100%; border-radius:3px; background: var(--grad);
  animation: bsRun 1.05s ease-in-out infinite; }
@keyframes bsRun { 0%{ transform: translateX(-110%); } 100%{ transform: translateX(300%); } }

/* ---------- 11.2 窄屏顶栏让位给搜索框 ---------- */
@media (max-width: 700px) {
  /* AI 问答在侧栏已有入口，窄屏隐藏以给搜索框腾空间 */
  #btn-ai { display: none; }
}
@media (max-width: 420px) {
  .topbar .brand .mark { display: none; }
}

/* ---------- 11.3 个人中心 · 彩色概览 ---------- */
.me-head { background: var(--card-grad); border:1px solid var(--line-2); border-radius: var(--r-lg); padding: 16px 18px; }
.me-ava { width:62px; height:62px; border-radius:18px; background: var(--grad); display:grid; place-items:center;
  font-size:22px; font-weight:600; color:#fff; box-shadow: 0 8px 22px var(--logo-glow); flex:none; }
.me-kpis { display:grid; grid-template-columns: repeat(5, 1fr); gap:12px; margin-top:16px; }
@media (max-width: 1100px) { .me-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .me-kpis { grid-template-columns: repeat(2, 1fr); } }
.me-kpi { position:relative; overflow:hidden; border-radius: var(--r-md); border:1px solid var(--line-2);
  background: var(--surface-2); padding: 12px 14px 13px; }
.me-kpi .bar { position:absolute; left:0; right:0; top:0; height:4px; }
.me-kpi .ic { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; margin-bottom:8px; color:#fff; }
.me-kpi .ic svg { width:16px; height:16px; }
.me-kpi .num { font-size:24px; font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.me-kpi .lbl { font-size:11.5px; color: var(--text-3); margin-top:3px; }

.me-sec { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 10px 12px; border-radius: var(--r-sm); margin-bottom:8px; border:1px solid var(--line); }
.me-sec:last-child { margin-bottom:0; }
.me-sec .k { display:flex; align-items:center; gap:9px; font-size:13px; color: var(--text-2); }
.me-sec .k .ic { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff; flex:none; }
.me-sec .k .ic svg { width:14px; height:14px; }
.me-sec .v { font-weight:700; font-size:15px; }

/* ============================================================
   12. 学习中台顶部：个人学习进展 + 相关考试 / 推荐内容
   ============================================================ */

/* ---------- 12.1 顶部横幅：左边本人学习统计、右边正确率环、底部相关考试 ---------- */
.dash-hero { display:flex; align-items:center; gap:24px; padding: 16px 2px 2px; flex-wrap:wrap; }
.dash-hero .dh-left { flex:1 1 420px; min-width:0; }
.dh-ht { font-size:15.5px; font-weight:600; color: var(--text-1); letter-spacing:.01em; }
.dh-hs { font-size:12.5px; color: var(--text-3); margin-top:5px; }
.dh-stats { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin-top:15px; }
.dh-stat { position:relative; overflow:hidden; border:1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface-2); padding: 14px 15px 13px; }
.dh-bar { position:absolute; left:0; right:0; top:0; height:3px; display:block; }
.dh-n { font-size:26px; font-weight:700; line-height:1.05; letter-spacing:-.02em; color: var(--text-1); }
.dh-n em { font-size:12px; font-weight:500; font-style:normal; color: var(--text-3); margin-left:3px; }
.dh-l { font-size:12.5px; color: var(--text-2); margin-top:6px; }
.dh-right { flex:0 0 auto; text-align:center; padding: 0 10px; }
.dh-rl { font-size:13.5px; font-weight:600; color: var(--text-2); margin-top:8px; }
.dh-rs { font-size:11.5px; color: var(--text-4); margin-top:4px; }

/* 相关考试：整行可点，进入考试信息 */
.dh-exam { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px;
  padding: 13px 16px; border-radius: var(--r); border:1px solid var(--line-2);
  background: var(--card-grad); cursor:pointer; transition:.18s; }
.dh-exam:hover { border-color: var(--brand-1); background: var(--active); }
.dh-exam .de-ic { width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background: var(--grad); color:#fff; flex:none; box-shadow: 0 4px 12px var(--logo-glow); }
.dh-exam .de-ic svg { width:16px; height:16px; }
.dh-exam .de-tx { font-size:13.5px; color: var(--text-2); }
.dh-exam .de-tx b { font-size:22px; font-weight:700; color: var(--brand-text); margin-right:2px; }
.dh-exam .de-all { color: var(--text-4); font-size:12px; margin-left:8px; }
.dh-exam .de-next { display:inline-flex; align-items:center; gap:5px; font-size:12px; color: var(--gold-text);
  background: var(--gold-soft); border:1px solid var(--gold-line); border-radius: var(--r-pill); padding:3px 10px; }
.dh-exam .de-next svg { width:13px; height:13px; }
.dh-exam .de-go { margin-left:auto; font-size:12.5px; color: var(--brand-text);
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
@media (max-width: 980px) { .dh-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px) {
  .dash-hero { gap:16px; }
  .dh-right { width:100%; padding:0; display:flex; align-items:center; gap:14px; text-align:left; }
  .dh-right .dh-rl { margin-top:0; }
  .dh-right .dh-rs { margin-top:2px; }
  .dh-exam .de-go { margin-left:0; }
}

/* ---------- 12.2 推荐内容卡片：标题加粗、来源标签区分人工/热度 ---------- */
.roll-card .acard { cursor:pointer; }
.roll-card .acard:hover .at { color: var(--brand-text); }

/* ---------- 12.3 平台设置：页签（把 6 个设置模块合并到一页） ---------- */
.set-tabs { display:flex; gap:6px; flex-wrap:wrap; background: var(--surface-2); border:1px solid var(--line);
  border-radius: var(--r-lg); padding:6px; margin-bottom:16px; }
.set-tabs button { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:0; background:transparent;
  color: var(--text-3); border-radius: var(--r-sm); cursor:pointer; font-size:13px; transition:.16s; }
.set-tabs button svg { width:15px; height:15px; }
.set-tabs button:hover { color: var(--text-2); background: var(--hover); }
.set-tabs button.on { background: var(--grad); color:#fff; font-weight:600; }
@media (max-width: 700px) { .set-tabs button { padding:7px 11px; font-size:12.5px; } }