/*@3.GARC.1*/

/*@3.GARC.460*/

/*@3.GARC.2*/
:root {
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
}

/*@3.GARC.471*/
:where(:root) {
  --gsf-tint: var(--st-accent, #a78bfa);
  --gsf-wash: color-mix(in oklab, var(--gsf-tint) 12%, transparent);
  --gsf-wash-2: color-mix(in oklab, var(--gsf-tint) 20%, transparent);
  --gsf-edge: color-mix(in oklab, var(--gsf-tint) 48%, transparent);
  --gsf-ring: color-mix(in oklab, var(--gsf-tint) 22%, transparent);
}

/*@3.GARC.3*/
[data-subject="SCI101"] {
  --brand-900: #631111;
  --brand-800: #841616;
  --brand-700: #b01e1e;
  --brand-600: #dc2626;
  --brand-500: #ef4444;
  --brand-400: #f87171;
  --brand-300: #faa2a2;
  --brand-glow: rgba(239, 68, 68, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="STAT101"] {
  --brand-900: #512504;
  --brand-800: #6c3105;
  --brand-700: #904207;
  --brand-600: #b45309;
  --brand-500: #d97706;
  --brand-400: #fbbf24;
  --brand-300: #fcd570;
  --brand-glow: rgba(217, 119, 6, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="ENG103"] {
  --brand-900: #653804;
  --brand-800: #864a05;
  --brand-700: #b46307;
  --brand-600: #ca8a04;
  --brand-500: #eab308;
  --brand-400: #facc15;
  --brand-300: #fde68a;
  --brand-glow: rgba(234, 179, 8, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="ISLAM101"] {
  --brand-900: #650d20;
  --brand-800: #87112b;
  --brand-700: #b41739;
  --brand-600: #b91c4c;
  --brand-500: #e11d6a;
  --brand-400: #f4448a;
  --brand-300: #f785b2;
  --brand-glow: rgba(225, 29, 106, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="ISLAM102"] {
  --brand-900: #6e2501;
  --brand-800: #923202;
  --brand-700: #c44402;
  --brand-600: #ea580c;
  --brand-500: #f97316;
  --brand-400: #fb923c;
  --brand-300: #fdb780;
  --brand-glow: rgba(249, 115, 22, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="ISLAM103"] {
  --brand-900: #02223a;
  --brand-800: #03304e;
  --brand-700: #04426b;
  --brand-600: #0369a1;
  --brand-500: #0284c7;
  --brand-400: #38bdf8;
  --brand-300: #8ad6fc;
  --brand-glow: rgba(2, 132, 199, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="ISLAM104"] {
  --brand-900: #1a1550;
  --brand-800: #231c6d;
  --brand-700: #302694;
  --brand-600: #4338ca;
  --brand-500: #4f46e5;
  --brand-400: #818cf8;
  --brand-300: #b4bafb;
  --brand-glow: rgba(79, 70, 229, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="MATH150"] {
  --brand-900: #094921;
  --brand-800: #0d612c;
  --brand-700: #11823b;
  --brand-600: #16a34a;
  --brand-500: #22c55e;
  --brand-400: #4ade80;
  --brand-300: #89e9ac;
  --brand-glow: rgba(34, 197, 94, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="MATH251"] {
  --brand-900: #0d1c4e;
  --brand-800: #122669;
  --brand-700: #18338c;
  --brand-600: #1e40af;
  --brand-500: #2563eb;
  --brand-400: #60a5fa;
  --brand-300: #97c4fb;
  --brand-glow: rgba(37, 99, 235, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="SCI201"] {
  --brand-900: #092a34;
  --brand-800: #0c3846;
  --brand-700: #104b5d;
  --brand-600: #155e75;
  --brand-500: #0891b2;
  --brand-400: #22d3ee;
  --brand-300: #6fe2f3;
  --brand-glow: rgba(8, 145, 178, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS499"] {
  --brand-900: #613502;
  --brand-800: #824703;
  --brand-700: #ad5f04;
  --brand-600: #d97706;
  --brand-500: #f59e0b;
  --brand-400: #fbbf24;
  --brand-300: #fcd570;
  --brand-glow: rgba(245, 158, 11, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS489"] {
  --brand-900: #650d20;
  --brand-800: #87112b;
  --brand-700: #b41739;
  --brand-600: #e11d48;
  --brand-500: #f43f5e;
  --brand-400: #fb7185;
  --brand-300: #fca2af;
  --brand-glow: rgba(244, 63, 94, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS481"] {
  --brand-900: #034150;
  --brand-800: #04576a;
  --brand-700: #06748e;
  --brand-600: #0891b2;
  --brand-500: #06b6d4;
  --brand-400: #22d3ee;
  --brand-300: #6fe2f3;
  --brand-glow: rgba(6, 182, 212, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS480"] {
  --brand-900: #05423d;
  --brand-800: #075851;
  --brand-700: #0a766c;
  --brand-600: #0d9488;
  --brand-500: #14b8a6;
  --brand-400: #2dd4bf;
  --brand-300: #76e3d5;
  --brand-glow: rgba(20, 184, 166, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS478"] {
  --brand-900: #530c22;
  --brand-800: #6f102d;
  --brand-700: #94163c;
  --brand-600: #b91c4c;
  --brand-500: #e11d6a;
  --brand-400: #f4448a;
  --brand-300: #f785b2;
  --brand-glow: rgba(225, 29, 106, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS477"] {
  --brand-900: #371a6a;
  --brand-800: #4a228e;
  --brand-700: #632ebd;
  --brand-600: #7c3aed;
  --brand-500: #8b5cf6;
  --brand-400: #a78bfa;
  --brand-300: #c5b3fb;
  --brand-glow: rgba(139, 92, 246, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS476"] {
  --brand-900: #094921;
  --brand-800: #0d612c;
  --brand-700: #11823b;
  --brand-600: #16a34a;
  --brand-500: #22c55e;
  --brand-400: #4ade80;
  --brand-300: #89e9ac;
  --brand-glow: rgba(34, 197, 94, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS475"] {
  --brand-900: #5a3e01;
  --brand-800: #795202;
  --brand-700: #a16e03;
  --brand-600: #ca8a04;
  --brand-500: #eab308;
  --brand-400: #facc15;
  --brand-300: #fbdd66;
  --brand-glow: rgba(234, 179, 8, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS479"] {
  --brand-900: #692705;
  --brand-800: #8c3407;
  --brand-700: #bb4609;
  --brand-600: #ea580c;
  --brand-500: #f97316;
  --brand-400: #fb923c;
  --brand-300: #fcb880;
  --brand-glow: rgba(249, 115, 22, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS471"] {
  --brand-900: #05423d;
  --brand-800: #075851;
  --brand-700: #0a766c;
  --brand-600: #0d9488;
  --brand-500: #14b8a6;
  --brand-400: #2dd4bf;
  --brand-300: #76e3d5;
  --brand-glow: rgba(20, 184, 166, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS470"] {
  --brand-900: #0d2361;
  --brand-800: #112e81;
  --brand-700: #173eac;
  --brand-600: #1d4ed8;
  --brand-500: #3b6ff6;
  --brand-400: #6490fa;
  --brand-300: #9ab6fb;
  --brand-glow: rgba(59, 111, 246, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS364"] {
  --brand-900: #692705;
  --brand-800: #8c3407;
  --brand-700: #bb4609;
  --brand-600: #ea580c;
  --brand-500: #f97316;
  --brand-400: #fb923c;
  --brand-300: #fcb880;
  --brand-glow: rgba(249, 115, 22, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS363"] {
  --brand-900: #613502;
  --brand-800: #824703;
  --brand-700: #ad5f04;
  --brand-600: #d97706;
  --brand-500: #f59e0b;
  --brand-400: #fbbf24;
  --brand-300: #fcd570;
  --brand-glow: rgba(245, 158, 11, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS362"] {
  --brand-900: #0d2361;
  --brand-800: #112e81;
  --brand-700: #173eac;
  --brand-600: #1d4ed8;
  --brand-500: #3b6ff6;
  --brand-400: #6490fa;
  --brand-300: #9ab6fb;
  --brand-glow: rgba(59, 111, 246, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS361"] {
  --brand-900: #04382f;
  --brand-800: #064b3f;
  --brand-700: #086454;
  --brand-600: #0a7e6a;
  --brand-500: #12c4a0;
  --brand-400: #40dbb8;
  --brand-300: #82e7d0;
  --brand-glow: rgba(18, 196, 160, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS360"] {
  --brand-900: #631111;
  --brand-800: #841616;
  --brand-700: #b01e1e;
  --brand-600: #dc2626;
  --brand-500: #ef4444;
  --brand-400: #f87171;
  --brand-300: #faa2a2;
  --brand-glow: rgba(239, 68, 68, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS243"] {
  --brand-900: #650d20;
  --brand-800: #87112b;
  --brand-700: #b41739;
  --brand-600: #e11d48;
  --brand-500: #f43f5e;
  --brand-400: #fb7185;
  --brand-300: #fca2af;
  --brand-glow: rgba(244, 63, 94, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS242"] {
  --brand-900: #102c69;
  --brand-800: #163b8d;
  --brand-700: #1d4fbc;
  --brand-600: #2563eb;
  --brand-500: #3b82f6;
  --brand-400: #60a5fa;
  --brand-300: #97c4fb;
  --brand-glow: rgba(59, 130, 246, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS241"] {
  --brand-900: #02432f;
  --brand-800: #035a3f;
  --brand-700: #047854;
  --brand-600: #059669;
  --brand-500: #10b981;
  --brand-400: #34d399;
  --brand-300: #7be2bc;
  --brand-glow: rgba(16, 185, 129, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS240"] {
  --brand-900: #692705;
  --brand-800: #8c3407;
  --brand-700: #bb4609;
  --brand-600: #ea580c;
  --brand-500: #f97316;
  --brand-400: #fb923c;
  --brand-300: #fcb880;
  --brand-glow: rgba(249, 115, 22, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS231"] {
  --brand-900: #631111;
  --brand-800: #841616;
  --brand-700: #b01e1e;
  --brand-600: #dc2626;
  --brand-500: #ef4444;
  --brand-400: #f87171;
  --brand-300: #faa2a2;
  --brand-glow: rgba(239, 68, 68, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS230"] {
  --brand-900: #613502;
  --brand-800: #824703;
  --brand-700: #ad5f04;
  --brand-600: #d97706;
  --brand-500: #f59e0b;
  --brand-400: #fbbf24;
  --brand-300: #fcd570;
  --brand-glow: rgba(245, 158, 11, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS353"] {
  --brand-900: #650d20;
  --brand-800: #87112b;
  --brand-700: #b41739;
  --brand-600: #e11d48;
  --brand-500: #f43f5e;
  --brand-400: #fb7185;
  --brand-300: #fca2af;
  --brand-glow: rgba(244, 63, 94, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS352"] {
  --brand-900: #102c69;
  --brand-800: #163b8d;
  --brand-700: #1d4fbc;
  --brand-600: #2563eb;
  --brand-500: #3b82f6;
  --brand-400: #60a5fa;
  --brand-300: #97c4fb;
  --brand-glow: rgba(59, 130, 246, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS350"] {
  --brand-900: #613502;
  --brand-800: #824703;
  --brand-700: #ad5f04;
  --brand-600: #d97706;
  --brand-500: #f59e0b;
  --brand-400: #fbbf24;
  --brand-300: #fcd570;
  --brand-glow: rgba(245, 158, 11, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

[data-subject="CS351"] {
  --brand-900: #02432f;
  --brand-800: #035a3f;
  --brand-700: #047854;
  --brand-600: #059669;
  --brand-500: #10b981;
  --brand-400: #34d399;
  --brand-300: #7be2bc;
  --brand-glow: rgba(16, 185, 129, 0.15);
  --display-font: 'Cairo', 'Inter', sans-serif;
}

/*@3.GARC.4*/
:root {
  --st-accent: #a78bfa;
  --st-warn:   #f59e0b;
  --st-ok:     #10b981;
  --st-danger: #ef4444;
}
[data-theme="light"] {
  --st-accent: #7c3aed;
  --st-warn:   #b45309;
  --st-ok:     #047857;
  --st-danger: #dc2626;
}

/*@3.GARC.5*/
:root {
  --card-base: var(--bg-surface);
  --card-base-back: var(--bg-surface);
  /*@3.GARC.6*/
  --card-tint-a: 0%;
  --card-rule: rgba(255, 255, 255, .05);   /*@3.GARC.7*/
  --card-rule-gap: 48px;
  --card-rule-top: 40px;
  --card-h: 400px;
  --card-edge: var(--border-color);
  --card-edge-a: 0%;
  --card-radius: 16px;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  --card-ghost: var(--card-base);          /*@3.GARC.8*/
  --card-note-a: 0%;
  --card-note-edge-a: 0%;
  --card-note-base: var(--bg-elevated);
  --card-note-ink: var(--text-secondary);
  --card-term-mix: 78%;           /*@3.GARC.9*/
  --card-meta-ink: var(--text-muted);
}
[data-theme="dim"] {
  --card-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  --card-rule: rgba(255, 255, 255, .045);
}
[data-theme="light"] {
  /*@3.GARC.10*/
  --card-base: #fdfbf7;
  --card-base-back: #fdfbf7;
  --card-tint-a: 0%;
  --card-rule: #e8e6df;
  --card-edge: #e2e0d8;
  --card-edge-a: 0%;
  /*@3.GARC.11*/
  --card-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  /*@3.GARC.12*/
  --card-ghost: var(--card-base);
  --card-note-a: 7%;
  --card-note-edge-a: 22%;
  --card-note-base: #ffffff;
  --card-note-ink: #3f4a4a;
  /*@3.GARC.13*/
  --card-term-mix: 52%;
  --card-meta-ink: #7b8687;
}

/*@3.GARC.14*/
[data-theme="dark"] {
  --bg-body: var(--gray-900);
  --bg-surface: var(--gray-800);
  --bg-card: var(--gray-800);
  --bg-elevated: var(--gray-700);
  --border-color: var(--gray-700);
  --border-hover: var(--gray-600);
  --text-primary: #ffffff;
  --text-secondary: var(--gray-300);
  --text-muted: var(--gray-400);
  --scrollbar-track: transparent;
  --code-bg: var(--gray-900);
  --shadow-base: rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

/*@3.GARC.477*/
[data-theme="dim"] {
  --bg-body: #0f111a;
  --bg-surface: #171923;
  --bg-card: #1a1d27;
  --bg-elevated: #202431;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  --text-primary: #f8fafc;
  --text-secondary: var(--gray-300);
  --text-muted: var(--gray-500);
  --scrollbar-track: transparent;
  --code-bg: #0b0d14;
  --shadow-base: rgba(0, 0, 0, 0.2);
  color-scheme: dark;
}

/*@3.GARC.479*/
:root[lang="ar"] .gsvg-en,
:root[lang="en"] .gsvg-ar { display: none; }

/*@3.GARC.478*/
:root {
  --on-brand-hi: #ffffff;
  --on-brand-lo: #0b1220;
  --brand-ink: var(--brand-400);
  --brand-ink-strong: var(--brand-300);
}
[data-theme="light"] {
  --brand-ink: var(--brand-700);
  --brand-ink-strong: var(--brand-800);
}

[data-theme="light"] {
  --bg-body: var(--gray-50);
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-elevated: var(--gray-50);
  --border-color: var(--gray-200);
  /*@3.GARC.15*/
  --border-hover: var(--brand-400, var(--gray-300));
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --scrollbar-track: transparent;
  --code-bg: var(--gray-50);
  --shadow-base: rgba(0, 0, 0, 0.05);
  color-scheme: light;
}

/*@3.GARC.16*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px
}

body {
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: 'Cairo', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.75;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

[dir="ltr"] body {
  font-family: 'Inter', 'Cairo', sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
}

/*@3.GARC.473*/
.gd-clock {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  letter-spacing: 0;
}

/*@3.GARC.17*/
a {
  color: var(--brand-500, inherit);
  text-decoration: none;
  transition: color 0.2s ease
}

a:hover {
  color: var(--brand-600, inherit)
}

img,
svg {
  max-width: 100%;
  height: auto
}

/*@3.GARC.18*/
button,
summary {
  outline: none;
  cursor: pointer;
}

button,
input,
select,
textarea {
  font-family: 'Cairo', sans-serif;
}
[dir="ltr"] button,
[dir="ltr"] input,
[dir="ltr"] select,
[dir="ltr"] textarea {
  font-family: 'Inter', 'Cairo', sans-serif;
}

/*@3.GARC.19*/
[dir="ltr"] .fa-arrow-right,
[dir="ltr"] .fa-arrow-left {
  transform: scaleX(-1);
  display: inline-block;
}

/*@3.GARC.20*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg-body);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/*@3.GARC.21*/
html[data-font-size="xs"] .main-content,
html[data-font-size="xs"] .subject-hub,
html[data-font-size="xs"] .dashboard {
  zoom: 0.82;
  -moz-transform: scale(0.82);
  -moz-transform-origin: top center;
}

html[data-font-size="sm"] .main-content,
html[data-font-size="sm"] .subject-hub,
html[data-font-size="sm"] .dashboard {
  zoom: 0.91;
  -moz-transform: scale(0.91);
  -moz-transform-origin: top center;
}

/*@3.GARC.22*/

html[data-font-size="lg"] .main-content,
html[data-font-size="lg"] .subject-hub,
html[data-font-size="lg"] .dashboard {
  zoom: 1.12;
  -moz-transform: scale(1.12);
  -moz-transform-origin: top center;
}

html[data-font-size="xl"] .main-content,
html[data-font-size="xl"] .subject-hub,
html[data-font-size="xl"] .dashboard {
  zoom: 1.25;
  -moz-transform: scale(1.25);
  -moz-transform-origin: top center;
}

/*@3.GARC.23*/
.font-size-group {
  display: inline-flex;
  align-items: center;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 0;
  transition: border-color 0.2s ease;
}

.font-size-group:hover {
  border-color: var(--brand-500);
}

.font-size-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.font-size-btn:hover {
  background: var(--bg-elevated);
  color: var(--brand-500);
}

.font-size-btn:active {
  transform: scale(0.9);
}

.font-size-btn.at-limit {
  opacity: 0.3;
  pointer-events: none;
}

.font-size-indicator {
  min-width: 26px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
  user-select: none;
  font-family: 'Inter', 'Cairo', sans-serif;
}

@media (max-width: 640px) {
  .font-size-group {
    padding: 1px;
  }

  .font-size-btn {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
  }

  .font-size-indicator {
    min-width: 20px;
    font-size: 0.65rem;
  }
}

/*@3.GARC.24*/
.font-display {
  font-family: var(--display-font)
}

.font-mono {
  font-family: 'JetBrains Mono', monospace
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  font-family: 'Cairo', sans-serif;
  letter-spacing: -0.01em;
}

[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] h3,
[dir="ltr"] h4 {
  font-family: 'Inter', 'Cairo', sans-serif;
  font-weight: 700;
}

h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  margin-bottom: 0.75rem;
}

h3 {
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  margin-bottom: 0.5rem;
}

/*@3.GARC.25*/
.text-gradient {
  background: linear-gradient(135deg, var(--text-primary) 20%, var(--brand-500) 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block;
  padding-bottom: 0.1em;
}

/*@3.GARC.26*/
.sec-icon {
  color: var(--text-muted);
  font-size: 0.82em;
  margin-inline-end: 0.15rem;
  flex-shrink: 0;
}

/*@3.GARC.27*/
.vault-type {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

/*@3.GARC.28*/
.quiz-results .score-emoji,
#final-emoji {
  color: var(--brand-500, var(--st-accent, #a78bfa));
}

/*@3.GARC.29*/
.summary-row.correct-row .row-icon {
  color: var(--algo-sorted, #10b981);
}

.summary-row.wrong-row .row-icon {
  color: var(--algo-swap, #ef4444);
}

/*@3.GARC.30*/
.page-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.content-wrapper {
  display: flex;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  flex: 1;
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: 3rem 3rem 6rem;
  max-width: 900px;
  margin: 0 auto;
}

@media(max-width:1024px) {
  .main-content {
    padding: 2rem 1.5rem 4rem;
  }
}

/*@3.GARC.31*/
.reading-progress {
  position: fixed;
  top: var(--sa-t);
  left: 0;
  height: 3px;
  background: var(--brand-500);
  width: 0%;
  z-index: 200;
  transition: width 0.1s ease;
}

/*@3.GARC.32*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /*@3.GARC.33*/
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  height: 72px;
  display: flex;
  align-items: center;
}

/*@3.GARC.34*/

.header-inner {
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem
}

.header-nav,
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem
}

/*@3.GARC.35*/
.header-center {
  display: inline-flex;
  align-items: center;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.5rem 0.35rem 0.35rem;
  transition: all 0.2s ease;
  direction: ltr !important;
  /*@3.GARC.36*/
  box-shadow: 0 2px 8px var(--shadow-base);
}

.header-center:hover {
  border-color: var(--brand-500);
}

/*@3.GARC.37*/
.header-center .subject-icon {
  order: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
}

/*@3.GARC.38*/
.header-center .subject-name {
  order: 2;
  font-family: var(--display-font);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin: 0 0.75rem 0 0.5rem;
  letter-spacing: 0.05em;
}

/*@3.GARC.39*/
.header-center .module-badge {
  order: 3;
  font-family: var(--display-font);
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--brand-glow);
  color: var(--brand-600);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.05em;
  margin: 0;
}

:is([data-theme="dark"],[data-theme="dim"]) .header-center .module-badge {
  color: var(--brand-400);
}

.nav-btn {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.nav-btn:hover {
  background: var(--bg-surface);
  color: var(--brand-500);
  border-color: var(--brand-500);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.nav-btn--icon {
  width: 40px;
  padding: 0;
}

/*@3.GARC.40*/
.g-nav-back {
  cursor: pointer;
  font-family: inherit;
}
.g-nav-home img {
  width: 17px; height: 17px; display: block;
}
/*@3.GARC.41*/

.toggle-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-family: 'Inter', 'Cairo', sans-serif;
  font-weight: 800;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.toggle-btn:hover {
  background: var(--bg-surface);
  color: var(--brand-500);
  border-color: var(--brand-500);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.divider-v {
  width: 1px;
  height: 24px;
  background: var(--border-color)
}

@media(max-width:640px) {

  .header-center .subject-name,
  .header-center .module-badge {
    display: none
  }

  .nav-btn span {
    display: none
  }

  .header-inner {
    padding: 0 0.6rem;
  }

  .divider-v {
    display: none
  }

  .header-nav,
  .header-actions,
  .dash-actions {
    gap: 0.35rem;
    flex-wrap: wrap;
  }
}

/*@3.GARC.42*/
.sidebar {
  width: 270px;
  flex-shrink: 0;
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  height: calc(100dvh - 72px);
  background: transparent;
  border-inline-end: 1px solid var(--border-color);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
}

/*@3.GARC.43*/
.sidebar-title {
  display: none !important;
}

.toc-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  flex: 1;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}

.toc-list::-webkit-scrollbar {
  display: none;
}

/*@3.GARC.44*/
.toc-link {
  display: block;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  border-inline-start: 3px solid transparent;
}

.toc-link:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.toc-link.active {
  background: var(--brand-glow);
  color: var(--brand-600);
  font-weight: 700;
  border-inline-start-color: var(--brand-500);
}

:is([data-theme="dark"],[data-theme="dim"]) .toc-link.active {
  color: var(--brand-400);
}

.toc-divider {
  height: 1px;
  background: var(--border-color);
  margin: 1rem 0.5rem;
  flex-shrink: 0;
}

/*@3.GARC.45*/
.toc-link--action {
  position: relative;
  background: transparent;
  border: 1px solid var(--brand-500);
  font-weight: 700;
  color: var(--brand-500) !important;
  transition: all 0.25s ease;
  border-radius: var(--radius-md);
}

.toc-link--action:hover {
  background: var(--brand-glow);
  border-color: var(--brand-500);
  transform: translateX(3px);
}

[dir="ltr"] .toc-link--action:hover {
  transform: translateX(-3px);
}

.toc-link--action .toc-action-icon {
  margin-inline-end: 0.4rem;
  font-size: 0.85rem;
}

:is([data-theme="dark"],[data-theme="dim"]) .toc-link--action {
  color: var(--brand-400) !important;
  border-color: var(--brand-400);
}

/*@3.GARC.46*/
.toc-link[href="#quiz"].toc-link--action {
  border: none;
  background: transparent;
}

.toc-link[href="#quiz"].toc-link--action:hover {
  background: var(--bg-elevated);
}

:is([data-theme="dark"],[data-theme="dim"]) .toc-link[href="#quiz"].toc-link--action {
  border: none;
}

@keyframes softPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 var(--brand-glow);
  }

  50% {
    box-shadow: 0 0 0 6px transparent;
  }
}

.toc-link--action.pulse {
  animation: softPulse 2s ease-in-out 3;
}

/*@3.GARC.47*/
.sidebar-widget {
  margin-top: auto;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  text-align: center;
  box-shadow: 0 4px 6px -1px var(--shadow-base);
  flex-shrink: 0;
  overflow: hidden;
}

.sm2-widget-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
}

.sm2-widget-toggle:hover {
  background: var(--brand-glow);
}

.sm2-widget-toggle>div {
  text-align: center;
  flex: 1;
}

.sm2-widget-toggle .widget-number {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--brand-500);
  font-family: var(--display-font);
  line-height: 1;
  text-align: center;
}

.sm2-widget-toggle .widget-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

.sm2-widget-toggle .widget-chevron {
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.3s ease;
  margin-inline-start: auto;
}

.sm2-widget-toggle[aria-expanded="true"] .widget-chevron {
  transform: rotate(180deg);
}

@keyframes widgetPulse {

  0%,
  100% {
    border-color: var(--border-color);
  }

  50% {
    border-color: var(--brand-500);
    box-shadow: 0 0 12px var(--brand-glow);
  }
}

.sidebar-widget.has-due {
  animation: widgetPulse 3s ease-in-out 2;
}

/*@3.GARC.48*/
.sm2-dashboard {
  display: none;
  position: fixed;
  width: 260px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  padding: 0.75rem 1rem 1rem;
  z-index: 9990;
}

.sm2-dashboard.open {
  display: block;
  animation: sm2PopIn 0.2s ease;
}

@keyframes sm2PopIn {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.sm2-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9989;
}

.sm2-overlay.open {
  display: block;
}

.sm2-dash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0;
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
}

.sm2-dash-row:last-child {
  border-bottom: none;
}

.sm2-dash-label {
  color: var(--text-muted);
}

.sm2-dash-value {
  color: var(--text-primary);
  font-weight: 800;
  font-family: var(--display-font);
}

.sm2-dash-bar {
  display: flex;
  height: 6px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 0.5rem;
  background: var(--bg-elevated);
}

.sm2-dash-bar span {
  height: 100%;
  transition: width 0.5s ease;
}

.sm2-bar-new {
  background: #6b7280;
}

.sm2-bar-learning {
  background: #f59e0b;
}

.sm2-bar-mastered {
  background: #10b981;
}

.sm2-dash-legend {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.sm2-dash-legend span {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.sm2-dash-legend span::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.sm2-legend-new::before {
  background: #6b7280;
}

.sm2-legend-learning::before {
  background: #f59e0b;
}

.sm2-legend-mastered::before {
  background: #10b981;
}

/*@3.GARC.49*/
.notes-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px var(--shadow-base);
  padding: 0.3rem;
  display: none;
  animation: tooltipFade 0.15s ease;
  /*@3.GARC.50*/
  margin-bottom: 6px;
}

/*@3.GARC.51*/
.notes-tip-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0;
  margin-inline-start: 0.15rem;
  transition: all 0.15s;
  flex-shrink: 0;
}
.notes-tip-pause:hover { border-color: #ef4444; color: #ef4444; }

/*@3.GARC.52*/
.notes-resume-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid #10b981;
  background: rgba(16,185,129,0.1);
  color: #10b981;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
}
.notes-resume-btn:hover { background: #10b981; color: #fff; }

/*@3.GARC.53*/
.cpm-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.65rem;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
}
.cpm-reset-btn:hover { color: var(--brand-500); border-color: var(--brand-500); }

.notes-tip-main { display: flex; align-items: center; gap: 0.25rem; }

.notes-tip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.notes-tip-btn i { font-size: 0.82rem; }

.notes-tip-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.notes-tip-note {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.3);
}

.notes-tip-note:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }

/*@3.GARC.54*/
.notes-tip-explain { color: var(--st-accent, #a78bfa); }
.notes-tip-explain:hover { background: color-mix(in srgb, var(--st-accent, #a78bfa) 16%, transparent); color: var(--st-accent, #a78bfa); }

/*@3.GARC.55*/
[data-theme="light"] .notes-tip-note:hover {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
}
[data-theme="light"] .notes-tip-note:hover i { color: #fff; }

.notes-tip-colors {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.3rem;
}

.notes-tip-dot {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--dot, #fde047);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}

.notes-tip-dot:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 3px var(--dot);
}

/*@3.GARC.56*/
.notes-tip-dot.active {
  box-shadow: 0 0 0 1.5px var(--bg-surface), 0 0 0 3px var(--dot, #c084fc);
  transform: scale(1.0);
}

@media (max-width: 1024px) {
  .notes-tip-dot:hover { transform: scale(1.05); }
  .notes-tip-dot.active { transform: scale(1.0); }
}

.notes-tip-dot-back {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.notes-tip-dot-back:hover { color: #ef4444; border-color: #ef4444; }

/*@3.GARC.57*/
.notes-cp { flex-direction: column; gap: 0; }
.notes-cp-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 0.35rem 0.4rem;
}
.notes-cp-extended {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 0.3rem 0.4rem 0.4rem;
  border-top: 1px dashed var(--border-color);
  animation: cpExtFade 0.15s ease;
}
@keyframes cpExtFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/*@3.GARC.58*/
.notes-tip-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}
.notes-tip-more-btn:hover { border-color: var(--brand-500); color: var(--brand-500); }

/*@3.GARC.59*/
.notes-tip-custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px dashed var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}
.notes-tip-custom-btn:hover { border-color: var(--brand-500); color: var(--brand-500); }

/*@3.GARC.60*/
.notes-cp-hidden-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/*@3.GARC.61*/
.notes-tip-dot.recent::before {
  content: '';
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--dot, #c084fc);
  pointer-events: none;
}

/*@3.GARC.62*/
.notes-tip-custom-dot { position: relative; }
.notes-tip-custom-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,0.5);
  pointer-events: none;
}

/*@3.GARC.63*/
.notes-cp-back-btn {
  width: 26px !important;
  height: 22px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.7rem;
  margin-inline-start: auto;
}
.notes-cp-back-btn:hover { color: var(--brand-500); border-color: var(--brand-500); }

/*@3.GARC.64*/

.note-color-swatches.notes-cp .notes-cp-primary { padding: 0; flex-wrap: wrap; gap: 6px; }
.note-color-swatches.notes-cp .notes-cp-extended { padding: 0.4rem 0 0; border-top: 1px dashed var(--border-color); gap: 6px; }
.note-color-swatches.notes-cp .notes-tip-dot { width: 26px; height: 26px; }
.note-color-swatches.notes-cp .notes-tip-more-btn { width: 30px; height: 26px; }
.note-color-swatches.notes-cp .notes-tip-custom-btn { width: 26px; height: 26px; }

/*@3.GARC.65*/
.notes-tip-manage-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border-color); background: var(--bg-elevated);
  color: var(--text-muted); font-size: 0.68rem;
  cursor: pointer; transition: all 0.15s; padding: 0; flex-shrink: 0;
}
.notes-tip-manage-btn:hover { border-color: var(--brand-500); color: var(--brand-500); }

/*@3.GARC.66*/
.notes-cp-manager {
  padding: 0.45rem 0.5rem 0.55rem;
  border-top: 1px solid var(--border-color);
}
.cpm-header {
  display: flex; align-items: center; gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.cpm-title { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); flex: 1; }
.cpm-close-btn {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border-color); background: var(--bg-elevated);
  color: var(--text-muted); font-size: 0.65rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: all 0.15s; flex-shrink: 0;
}
.cpm-close-btn:hover { color: #ef4444; border-color: #ef4444; }
.cpm-section { margin-bottom: 0.4rem; }
.cpm-label { font-size: 0.7rem; color: var(--text-muted); font-weight: 700; margin-bottom: 0.3rem; }
.cpm-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 0.25rem; }
.cpm-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cpm-item .notes-tip-dot { width: 20px; height: 20px; pointer-events: none; border: none; cursor: default; }
.cpm-act {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 14px; border-radius: 3px;
  border: 1px solid var(--border-color); background: var(--bg-elevated);
  color: var(--text-muted); font-size: 0.55rem;
  cursor: pointer; padding: 0; transition: all 0.12s;
}
.cpm-promote:hover { color: var(--brand-500); border-color: var(--brand-500); }
.cpm-demote:hover  { color: #f97316; border-color: #f97316; }
.cpm-delete:hover  { color: #ef4444; border-color: #ef4444; }
.cpm-add-row { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }
.cpm-add-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.55rem; border-radius: var(--radius-sm);
  border: 1px dashed var(--border-color); background: transparent;
  color: var(--text-muted); font-family: inherit; font-size: 0.73rem;
  font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.cpm-add-btn:hover { border-color: var(--brand-500); color: var(--brand-500); }

/*@3.GARC.67*/
@media (max-width: 480px) {
  .notes-cp-primary { gap: 4px; padding: 0.25rem 0.3rem; }
  .notes-cp-extended { gap: 4px; padding: 0.2rem 0.3rem 0.3rem; }
  .notes-tip-dot { width: 18px !important; height: 18px !important; }
  .notes-tip-dot.active { transform: scale(1.05) !important; }
  .notes-tip-more-btn { width: 22px !important; height: 18px !important; }
  .notes-tip-custom-btn, .notes-tip-manage-btn { width: 18px !important; height: 18px !important; font-size: 0.6rem !important; }
}

.sidebar-notes-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem;
  margin-top: 0.5rem;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  font-family: inherit;
}

.sidebar-notes-btn:hover {
  color: var(--brand-500);
  border-color: var(--brand-500);
  background: var(--brand-glow);
  transform: translateY(-1px);
}

.sidebar-notes-btn .notes-count {
  background: var(--brand-500);
  color: #fff;
  font-size: 0.65rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  font-weight: 800;
  min-width: 18px;
  text-align: center;
}

/*@3.GARC.68*/
.notes-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  display: none;
}

.notes-panel {
  position: fixed;
  top: var(--sa-t);
  inset-inline-end: 0;
  width: min(400px, 92vw);
  height: 100vh;
  height: calc(100dvh - var(--sa-t) - var(--sa-b));
  z-index: 9999;
  background: var(--bg-surface);
  border-inline-start: 1px solid var(--border-color);
  box-shadow: -8px 0 30px var(--shadow-base);
  display: flex;
  flex-direction: column;
  animation: notesPanelSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes notesPanelSlide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.notes-panel-header {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.notes-panel-header h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.notes-title-count {
  background: var(--brand-glow);
  color: var(--brand-500);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', monospace;
}

.notes-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.notes-add-free {
  background: var(--brand-glow);
  border: 1px solid var(--brand-500);
  color: var(--brand-500);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.notes-add-free:hover {
  background: var(--brand-500);
  color: #fff;
  transform: translateY(-1px);
}

.notes-panel-close {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.notes-panel-close:hover {
  color: #ef4444;
  border-color: #ef4444;
}

/*@3.GARC.69*/
.notes-search-wrap {
  position: relative;
  padding: 0.85rem 1.4rem 0.6rem;
}

.notes-search-wrap i {
  position: absolute;
  inset-inline-start: 1.85rem;
  top: 50%;
  transform: translateY(-30%);
  color: var(--text-muted);
  font-size: 0.8rem;
  pointer-events: none;
}

.notes-search {
  width: 100%;
  padding: 0.55rem 0.75rem;
  padding-inline-start: 2.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.2s;
}

.notes-search:focus {
  outline: none;
  border-color: var(--brand-500);
}

.notes-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1.4rem 1.4rem;
}

/*@3.GARC.70*/
.notes-panel-footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.notes-bulk-btn {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.notes-bulk-btn i { color: inherit; }

.notes-bulk-btn:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
}

.notes-bulk-danger:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}
.notes-bulk-danger:hover i { color: #fff; }

/*@3.GARC.71*/
.notes-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1.2rem, var(--sa-t)) max(1.2rem, var(--sa-r)) max(1.2rem, var(--sa-b)) max(1.2rem, var(--sa-l));
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.notes-confirm-overlay.visible { opacity: 1; }

.notes-confirm-box {
  width: 100%;
  max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px var(--shadow-base);
  padding: 1.6rem 1.5rem 1.3rem;
  text-align: center;
  transform: translateY(10px) scale(0.97);
  transition: transform 0.18s ease;
}
.notes-confirm-overlay.visible .notes-confirm-box { transform: translateY(0) scale(1); }

.notes-confirm-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

.notes-confirm-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.notes-confirm-msg {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1.3rem;
}

.notes-confirm-actions {
  display: flex;
  gap: 0.6rem;
}

.notes-confirm-actions button {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.notes-confirm-cancel {
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.notes-confirm-cancel:hover { color: var(--text-primary); border-color: var(--text-muted); }

.notes-confirm-ok {
  border: 1px solid #ef4444;
  background: #ef4444;
  color: #fff;
}
.notes-confirm-ok:hover { filter: brightness(1.08); }

.notes-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.notes-empty-icon {
  font-size: 2.6rem;
  margin-bottom: 0.75rem;
  opacity: 0.7;
}

.notes-empty-hint {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.85;
  line-height: 1.6;
}

/*@3.GARC.72*/
.note-card {
  --accent: #f59e0b;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, opacity 0.2s;
}

.note-card[data-color="yellow"]  { --accent: #fde047; }
.note-card[data-color="amber"]   { --accent: #fb923c; }
.note-card[data-color="red"]     { --accent: #f87171; }
.note-card[data-color="pink"]    { --accent: #f472b6; }
.note-card[data-color="violet"]  { --accent: #c084fc; }
.note-card[data-color="indigo"]  { --accent: #818cf8; }
.note-card[data-color="blue"]    { --accent: #60a5fa; }
.note-card[data-color="cyan"]    { --accent: #22d3ee; }
.note-card[data-color="teal"]    { --accent: #2dd4bf; }
.note-card[data-color="green"]   { --accent: #4ade80; }
.note-card[data-color="lime"]    { --accent: #a3e635; }
.note-card[data-color="rose"]    { --accent: #fb7185; }
/*@3.GARC.73*/

.note-card.is-navigable { cursor: pointer; }

.note-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px var(--shadow-base);
}

.note-card.removing {
  opacity: 0;
  transform: translateX(20px);
}

.note-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.note-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.45;
  flex: 1;
  word-break: break-word;
}

.note-card.is-navigable .note-card-title { cursor: pointer; }

.note-card.is-navigable .note-card-title:hover {
  color: var(--accent);
}

.note-card-actions {
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.note-card:hover .note-card-actions { opacity: 1; }

.note-act {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.note-act.note-edit:hover {
  color: var(--brand-500);
  border-color: var(--brand-500);
}

.note-act.note-delete:hover {
  color: #ef4444;
  border-color: #ef4444;
}

/*@3.GARC.74*/
.note-quote {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding: 0.45rem 0.6rem;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.note-quote i {
  color: var(--accent);
  margin-top: 0.18rem;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.note-quote:hover {
  background: var(--brand-glow);
  color: var(--text-primary);
}

.note-quote span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-user-text {
  font-size: 0.86rem;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.65;
  margin-top: 0.55rem;
  word-break: break-word;
}

/*@3.GARC.75*/
.note-user-text.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-user-text code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  background: var(--bg-elevated);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  color: var(--brand-500);
}

.note-user-text strong { font-weight: 800; color: var(--text-primary); }
.note-user-text em { font-style: italic; }

.note-user-text mark.md-hl {
  background: rgba(245, 158, 11, 0.25);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

.note-md-list {
  margin: 0.3rem 0 0;
  padding-inline-start: 1.2rem;
}

.note-md-list li {
  margin-bottom: 0.2rem;
}

.note-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.note-meta-date {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'JetBrains Mono', monospace;
}

.note-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.66rem;
  font-weight: 700;
}

.note-badge--source    { background: var(--brand-glow); color: var(--brand-500); }
.note-badge--free      { background: rgba(107, 114, 128, 0.18); color: var(--text-muted); }
.note-badge--highlight { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }

/*@3.GARC.76*/
.note-pop {
  --accent: #f59e0b;
  position: fixed;
  z-index: 10002;
  width: min(330px, 90vw);
  max-height: 60vh;
  display: none;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px var(--shadow-base);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
  overflow: hidden;
}

.note-pop.visible { opacity: 1; transform: translateY(0) scale(1); }

.note-pop[data-color="yellow"]  { --accent: #fde047; }
.note-pop[data-color="amber"]   { --accent: #fb923c; }
.note-pop[data-color="red"]     { --accent: #f87171; }
.note-pop[data-color="pink"]    { --accent: #f472b6; }
.note-pop[data-color="violet"]  { --accent: #c084fc; }
.note-pop[data-color="indigo"]  { --accent: #818cf8; }
.note-pop[data-color="blue"]    { --accent: #60a5fa; }
.note-pop[data-color="cyan"]    { --accent: #22d3ee; }
.note-pop[data-color="teal"]    { --accent: #2dd4bf; }
.note-pop[data-color="green"]   { --accent: #4ade80; }
.note-pop[data-color="lime"]    { --accent: #a3e635; }
.note-pop[data-color="rose"]    { --accent: #fb7185; }
/*@3.GARC.77*/

.note-pop-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
}

.note-pop-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.note-pop-title {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}

.note-pop-x {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.note-pop-x:hover { color: #ef4444; border-color: #ef4444; }

.note-pop-quote {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.7rem 0.85rem 0;
  padding: 0.5rem 0.65rem;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-style: italic;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.5;
}

.note-pop-quote i { color: var(--accent); font-size: 0.7rem; margin-top: 0.15rem; flex-shrink: 0; }

.note-pop-body {
  overflow-y: auto;
  padding: 0.7rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.65;
  word-break: break-word;
}

.note-pop-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  background: var(--bg-elevated);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  color: var(--brand-500);
}
.note-pop-body strong { font-weight: 800; }
.note-pop-body em { font-style: italic; }
.note-pop-body mark.md-hl { background: rgba(245, 158, 11, 0.25); border-radius: 3px; padding: 0 2px; }
.note-pop-body ul.note-md-list { margin: 0.3rem 0 0; padding-inline-start: 1.2rem; }

.note-pop-empty {
  padding: 0.9rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  font-style: italic;
}

.note-pop-actions {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--border-color);
}

.note-pop-act {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.note-pop-act:hover { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
.note-pop-act:hover i { color: #fff; }
.note-pop-del:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.note-pop-del:hover i { color: #fff; }

/*@3.GARC.78*/
.note-pop-hl-actions { flex-wrap: wrap; }
.note-pop-hl-actions .note-pop-act { flex: 1 1 calc(50% - 0.2rem); justify-content: center; }
.note-pop-colors {
  padding: 0.45rem 0.7rem 0.55rem;
  border-top: 1px dashed var(--border-color);
}
/*@3.GARC.79*/
.note-pop-colors .notes-tip-dot { width: 18px; height: 18px; }
.note-pop-colors .notes-tip-more-btn { width: 24px; height: 18px; }
.note-pop-colors .notes-tip-custom-btn,
.note-pop-colors .notes-tip-manage-btn { width: 18px; height: 18px; font-size: 0.62rem; }

/*@3.GARC.80*/
.note-editor { text-align: start; }

.note-editor-head { margin-bottom: 0.5rem; }

.note-editor-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.note-editor-icon { font-size: 1.3rem; }

.note-editor-quote {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  background: var(--brand-glow);
  border-inline-start: 3px solid var(--brand-500);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  margin: 0.85rem 0;
  font-size: 0.82rem;
  font-style: italic;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.55;
}

.note-editor-quote i {
  color: var(--brand-500);
  font-size: 0.78rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.note-field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0.85rem 0 0.35rem;
}

.note-title-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  transition: border-color 0.2s;
}

.note-title-input:focus { outline: none; border-color: var(--brand-500); }

.note-format-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.note-format-toolbar button {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.note-format-toolbar button:hover {
  background: var(--bg-card);
  color: var(--brand-500);
}

.note-preview-toggle.active {
  background: var(--brand-glow) !important;
  color: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
}

.note-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--border-color);
  margin: 0 0.25rem;
}

.note-body-input {
  width: 100%;
  padding: 0.7rem 0.75rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.6;
  resize: vertical;
}

.note-body-input:focus { outline: none; border-color: var(--brand-500); }

.note-preview {
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--bg-elevated);
  padding: 0.7rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.65;
  min-height: 90px;
}

.note-preview code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  background: var(--bg-card);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  color: var(--brand-500);
}

.note-preview strong { font-weight: 800; }
.note-preview em { font-style: italic; }
.note-preview mark.md-hl { background: rgba(245, 158, 11, 0.25); border-radius: 3px; padding: 0 2px; }
.note-preview ul { padding-inline-start: 1.2rem; margin: 0.3rem 0 0; }
.note-preview-empty { color: var(--text-muted); font-style: italic; font-weight: 500; }

/*@3.GARC.81*/
.note-color-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1rem;
}

.note-color-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.note-color-swatches { display: flex; gap: 0.4rem; }

.note-color-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--dot);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  padding: 0;
}

.note-color-dot:hover { transform: scale(1.12); }

.note-color-dot.active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--dot);
}

.note-save-btn {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.note-save-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

/*@3.GARC.82*/
.user-highlight {
  --hl: 245, 158, 11;
  background: rgba(var(--hl), 0.22);
  border-radius: 2px;
  box-shadow: inset 0 -2px 0 rgba(var(--hl), 0.55);
  color: inherit;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.user-highlight[data-color="yellow"]  { --hl: 253, 224, 71;  }
.user-highlight[data-color="amber"]   { --hl: 251, 146, 60;  }
.user-highlight[data-color="red"]     { --hl: 248, 113, 113; }
.user-highlight[data-color="pink"]    { --hl: 244, 114, 182; }
.user-highlight[data-color="violet"]  { --hl: 192, 132, 252; }
.user-highlight[data-color="indigo"]  { --hl: 129, 140, 248; }
.user-highlight[data-color="blue"]    { --hl: 96,  165, 250; }
.user-highlight[data-color="cyan"]    { --hl: 34,  211, 238; }
.user-highlight[data-color="teal"]    { --hl: 45,  212, 191; }
.user-highlight[data-color="green"]   { --hl: 74,  222, 128; }
.user-highlight[data-color="lime"]    { --hl: 163, 230, 53;  }
.user-highlight[data-color="rose"]    { --hl: 251, 113, 133; }
/*@3.GARC.83*/

.user-highlight:hover {
  background: rgba(var(--hl), 0.38);
}

.user-highlight.flash {
  animation: noteHighlightFlash 1.7s ease;
}

@keyframes noteHighlightFlash {
  0%   { background: rgba(var(--hl), 0.22); box-shadow: inset 0 -2px 0 rgba(var(--hl), 0.55); }
  18%  { background: rgba(var(--hl), 0.85); box-shadow: 0 0 0 4px rgba(var(--hl), 0.35); }
  40%  { background: rgba(var(--hl), 0.55); box-shadow: 0 0 0 6px rgba(var(--hl), 0.18); }
  100% { background: rgba(var(--hl), 0.22); box-shadow: inset 0 -2px 0 rgba(var(--hl), 0.55); }
}

/*@3.GARC.472*/
rect.user-highlight {
  fill: rgb(var(--hl));
  fill-opacity: 0.26;
  stroke: rgb(var(--hl));
  stroke-opacity: 0.55;
  stroke-width: 1;
  transition: fill-opacity 0.2s;
}
rect.user-highlight:hover { fill-opacity: 0.42; }
.user-highlight-txt { cursor: pointer; }
rect.user-highlight.flash { animation: noteSvgFlash 1.7s ease; }

@keyframes noteSvgFlash {
  0%   { fill-opacity: 0.26; stroke-opacity: 0.55; }
  18%  { fill-opacity: 0.85; stroke-opacity: 1; }
  40%  { fill-opacity: 0.55; stroke-opacity: 0.80; }
  100% { fill-opacity: 0.26; stroke-opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  rect.user-highlight.flash { animation: none; }
}

/*@3.GARC.84*/
.note-block-flash {
  animation: noteBlockFlash 1.7s ease;
  border-radius: var(--radius-md);
}

@keyframes noteBlockFlash {
  0%   { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
  20%  { box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.45); background: var(--brand-glow); }
  100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
}

/*@3.GARC.85*/
.notes-toast {
  position: fixed;
  bottom: calc(24px + var(--sa-b));
  /*@3.GARC.475*/
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 10001;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px var(--shadow-base);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}

.notes-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/*@3.GARC.474*/
@media (max-width: 768px) {
  .notes-toast { bottom: calc(56px + 1rem + var(--sa-b)); }
}



@media(max-width:1024px) {
  .sidebar {
    display: none
  }
}

/*@3.GARC.86*/
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 6px -1px var(--shadow-base);
  transition: all 0.3s ease;
}

.glass-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 12px 20px -5px var(--shadow-base);
}

/*@3.GARC.87*/
.concept-card:hover,
.professor-card:hover,
.objectives-card:hover {
  transform: translateY(-2px);
}

.quiz-card:hover,
.quiz-results:hover,
.flashcard-section .glass-card:hover {
  transform: none;
}

/*@3.GARC.88*/
.hero {
  padding: 2.5rem 0 2rem;
  margin-bottom: 1rem
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-family: var(--display-font);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px var(--shadow-base);
}

/*@3.GARC.89*/
.hero-eyebrow span {
  color: var(--brand-500);
}

.hero-description {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 680px;
  line-height: 1.8;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem
}

.tag {
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tag--accent {
  background: var(--brand-glow);
  color: var(--brand-600);
  border-color: transparent;
}

:is([data-theme="dark"],[data-theme="dim"]) .tag--accent {
  color: var(--brand-400);
}

/*@3.GARC.90*/
.objectives-card,
.professor-card {
  position: relative;
  border-inline-start: 4px solid var(--brand-500);
}
/*@3.GARC.91*/

/*@3.GARC.92*/
.objectives-card {
  padding: 2rem 2.5rem;
  margin-bottom: 2rem;
}

.objectives-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.objectives-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.objectives-list .obj-icon {
  color: var(--brand-500);
  margin-top: 0.35rem;
  flex-shrink: 0;
  font-size: 0.9rem;
}

/*@3.GARC.93*/
.concept-card {
  padding: 2.5rem;
  margin-bottom: 2.5rem;
}

.concept-header {
  margin-bottom: 1.5rem
}

.concept-header h2 {
  display: flex;
  align-items: center;
  gap: 0.85rem
}

.concept-number {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--brand-500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  font-family: var(--display-font);
  flex-shrink: 0;
}

.depth-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 1.5rem;
  background: var(--bg-elevated);
  padding: 4px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}

.depth-tab {
  padding: 0.4rem 1.25rem;
  border-radius: calc(var(--radius-lg) - 4px);
  font-size: 0.9rem;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  transition: all 0.2s;
}

.depth-tab:hover {
  color: var(--text-primary);
}

.depth-tab.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 3px var(--shadow-base);
  font-weight: 700;
}

.depth-layer {
  display: none;
  animation: layerFade 0.3s ease;
  color: var(--text-secondary);
}

.depth-layer.active {
  display: block
}

.depth-layer[data-layer="full"],
.depth-layer[data-layer="deep"] {
  border-inline-start: 3px solid var(--brand-500);
  padding-inline-start: 1.2rem;
  margin-top: 0.5rem;
  border-radius: 2px;
}

:is([data-theme="dark"],[data-theme="dim"]) .depth-layer[data-layer="full"],
:is([data-theme="dark"],[data-theme="dim"]) .depth-layer[data-layer="deep"] {
  border-inline-start-color: var(--brand-400);
}

.depth-layer p {
  margin-bottom: 1rem;
  line-height: 1.8;
}

.depth-layer p:last-child {
  margin-bottom: 0;
}

.depth-layer strong,
.depth-layer b {
  color: var(--text-primary);
  font-weight: 700;
}

.depth-layer ul,
.depth-layer ol {
  margin: 0.85rem 0 1.1rem 1.6rem;
  padding: 0;
}

[dir="rtl"] .depth-layer ul,
[dir="rtl"] .depth-layer ol {
  margin: 0.85rem 1.6rem 1.1rem 0;
}

.depth-layer li {
  margin-bottom: 0.65rem;
  line-height: 1.8;
}

.depth-layer li b,
.depth-layer li strong {
  color: var(--brand-600);
}

:is([data-theme="dark"],[data-theme="dim"]) .depth-layer li b,
:is([data-theme="dark"],[data-theme="dim"]) .depth-layer li strong {
  color: var(--brand-400);
}

@keyframes layerFade {
  from {
    opacity: 0;
    transform: translateY(4px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/*@3.GARC.94*/
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
  white-space: normal;
}

.comparison-table th {
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.comparison-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.7;
  vertical-align: top;
  transition: background 0.2s;
}

.comparison-table tr:last-child td {
  border-bottom: none
}

.comparison-table td:first-child {
  color: var(--text-primary);
  font-weight: 600;
  background: var(--bg-surface);
}

.comparison-table tr:hover td {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.td-good {
  color: #059669;
  font-weight: 700;
}

.td-bad {
  color: #dc2626;
  font-weight: 700;
}

:is([data-theme="dark"],[data-theme="dim"]) .td-good {
  color: #34d399;
}

:is([data-theme="dark"],[data-theme="dim"]) .td-bad {
  color: #f87171;
}

/*@3.GARC.95*/
.formula-block {
  background: var(--code-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  overflow-x: auto;
}

.formula-block [data-bilingual] {
  unicode-bidi: isolate;
}

.formula-block strong {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.code-block {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin: 1.5rem 0;
  overflow: hidden
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.code-block pre {
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  direction: ltr !important;
  text-align: left !important
}

.copy-btn {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit
}

.copy-btn:hover {
  color: var(--brand-500);
  border-color: var(--brand-500);
}

/*@3.GARC.96*/
.svg-placeholder {
  border-radius: var(--radius-lg);
  border: 2px dashed var(--border-color);
  background: var(--bg-elevated);
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 600;
  margin: 1.5rem 0;
}

.svg-diagram {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

/*@3.GARC.97*/
.smart-term {
  border-bottom: 2px dotted var(--brand-500);
  cursor: help;
  position: relative;
  color: var(--text-primary);
  font-weight: 700;
  transition: all 0.2s;
}

.smart-term:hover {
  color: var(--brand-600);
  background: var(--brand-glow);
  border-radius: var(--radius-sm);
}

:is([data-theme="dark"],[data-theme="dim"]) .smart-term:hover {
  color: var(--brand-400);
}

/*@3.GARC.98*/
.smart-term-tooltip {
  display: none;
  position: fixed;
  z-index: 9999;
  max-width: 340px;
  min-width: 160px;
  width: max-content;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  /*@3.GARC.99*/
  direction: ltr;
  text-align: left;
  font-family: 'Inter', 'Cairo', sans-serif;
  font-weight: 500;
  line-height: 1.55;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: none;
  /*@3.GARC.100*/
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700, var(--brand-600)));
  color: #fff;
  border: 1px solid var(--brand-500);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 0 1px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  /*@3.GARC.101*/
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.smart-term-tooltip.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/*@3.GARC.102*/
.smart-term-tooltip::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--brand-600);
  border-right: 1px solid var(--brand-500);
  border-bottom: 1px solid var(--brand-500);
  transform: rotate(45deg);
  bottom: -6px;
  left: var(--arrow-left, 50%);
  margin-left: -5px;
}

/*@3.GARC.103*/
.smart-term-tooltip.below::after {
  bottom: auto;
  top: -6px;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid var(--brand-500);
  border-top: 1px solid var(--brand-500);
}

/*@3.GARC.104*/
.smart-term-tooltip .tt-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-300, rgba(255,255,255,0.7));
  margin-bottom: 2px;
}

.smart-term-tooltip .tt-def {
  display: block;
}

/*@3.GARC.105*/
:is([data-theme="dark"],[data-theme="dim"]) .smart-term-tooltip {
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200, #e5e7eb));
  color: var(--gray-900);
  border-color: var(--brand-400);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--brand-glow);
}
:is([data-theme="dark"],[data-theme="dim"]) .smart-term-tooltip::after {
  background: var(--gray-100);
  border-color: var(--brand-400);
}
:is([data-theme="dark"],[data-theme="dim"]) .smart-term-tooltip .tt-label {
  color: var(--brand-500);
}

/*@3.GARC.106*/
.thinking-question {
  border-radius: var(--radius-lg);
  border: 1px solid var(--brand-300);
  background: var(--brand-glow);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

:is([data-theme="dark"],[data-theme="dim"]) .thinking-question {
  /*@3.GARC.107*/
  border-color: color-mix(in srgb, var(--brand-500) 30%, transparent);
}

.thinking-question summary {
  font-weight: 700;
  color: var(--brand-700);
  list-style: none;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

:is([data-theme="dark"],[data-theme="dim"]) .thinking-question summary {
  color: var(--brand-400);
}

.thinking-question summary::before {
  content: '\f0eb';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

.thinking-question[open] summary {
  margin-bottom: 0.75rem;
}

.thinking-question p {
  margin-top: 0.5rem;
  color: var(--text-primary);
  font-weight: 600;
}

/*@3.GARC.108*/
.professor-card {
  padding: 2.5rem;
  margin-bottom: 2.5rem;
}

.professor-card .professor-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem
}

/*@3.GARC.109*/
.professor-card .professor-icon {
  font-size: 2rem
}

.professor-card .professor-text {
  color: var(--text-secondary);
  font-size: 1.05rem;
  font-style: italic;
}

/*@3.GARC.110*/
.accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2.5rem
}

.accordion-item {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  overflow: hidden;
}

.accordion-trigger {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: inherit
}

.accordion-trigger .chevron {
  transition: transform 0.3s;
  color: var(--text-muted)
}

.accordion-item.open .accordion-trigger .chevron {
  transform: rotate(180deg);
  color: var(--brand-500);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease
}

.accordion-item.open .accordion-body {
  max-height: 800px
}

.accordion-body-inner {
  padding: 0 1.5rem 1.5rem;
  color: var(--text-secondary);
}

/*@3.GARC.111*/
.flashcard-section {
  margin-bottom: 3rem
}

.fc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  position: relative;
  z-index: 50;
  /*@3.GARC.112*/
  overflow: visible;
}

.fc-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: visible;
  position: relative;
}

.fc-mini-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.fc-mini-btn:hover {
  color: var(--brand-500);
  border-color: var(--brand-500);
  background: var(--brand-glow);
}

.fc-info-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  /*@3.GARC.113*/
  overflow: visible;
  z-index: 100;
}

.fc-info-btn:hover,
.fc-info-btn:focus {
  color: var(--brand-500);
  border-color: var(--brand-500);
  background: var(--brand-glow);
  box-shadow: 0 0 0 3px var(--brand-glow);
  outline: none;
}

.fc-info-tooltip {
  display: none;
  position: fixed;
  /*@3.GARC.114*/
  width: min(300px, calc(100vw - 32px));
  max-height: min(440px, 72vh);
  overflow-y: auto;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  z-index: 99999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  text-align: start;
  line-height: 1.7;
  pointer-events: none;
}

/*@3.GARC.115*/
.fc-info-tooltip::before {
  content: '';
  position: absolute;
  top: -7px;
  inset-inline-end: 14px;
  width: 12px;
  height: 12px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  border-inline-end: 1px solid var(--border-color);
  transform: rotate(-45deg);
  border-radius: 2px 0 0 0;
}

.fc-info-tooltip.open {
  display: block;
  animation: sm2PopIn 0.18s ease;
}

/*@3.GARC.116*/
.fc-info-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99998;
}

.fc-info-overlay.open {
  display: block;
}

@keyframes tooltipFade {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fc-report-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--brand-500);
  font-size: 0.85rem;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  letter-spacing: 0;
}

.fc-report-btn:hover {
  border-color: var(--brand-500);
  background: var(--brand-glow);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

/*@3.GARC.117*/
.flashcard-scene {
  perspective: 1500px;
  margin: 1rem 0 2rem;
  /*@3.GARC.118*/
  height: var(--card-h);
  position: relative;
  /*@3.GARC.119*/
  max-width: 720px;
  margin-inline: auto;
  /*@3.GARC.120*/
  --g-x: 6px;
  --g-y: 9px;
}

/*@3.GARC.121*/
.fc-ghost {
  position: absolute;
  inset-block: var(--gy) calc(-1 * var(--gy));
  inset-inline: calc(-1 * var(--gx));
  border-radius: var(--card-radius);
  background: var(--card-ghost);
  border: 1px solid var(--card-edge);
  box-shadow: var(--g-sh);
  /*@3.GARC.122*/
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
/*@3.GARC.123*/
.fc-ghost:nth-child(1) { --gx: var(--g-x);           --gy: var(--g-y);           --g-sh: 0 4px 10px rgba(0, 0, 0, .03); z-index: 3; }
.fc-ghost:nth-child(2) { --gx: calc(var(--g-x) * 2); --gy: calc(var(--g-y) * 2); --g-sh: 0 8px 20px rgba(0, 0, 0, .05); z-index: 2; }
.fc-ghost:nth-child(3) { --gx: calc(var(--g-x) * 3); --gy: calc(var(--g-y) * 3); --g-sh: 0 10px 26px rgba(0, 0, 0, .06); z-index: 1; }

/*@3.GARC.124*/
.fc-ghost--next {
  padding: 1.5rem 1.75rem 1.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  background-image: repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--card-rule-gap) - 1px),
      var(--card-rule) calc(var(--card-rule-gap) - 1px) var(--card-rule-gap));
  background-position: 0 var(--card-rule-top);
}
.fc-ghost--next .fc-g-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  direction: ltr; unicode-bidi: isolate;
  padding: .2rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  color: var(--card-meta-ink);
  opacity: .7;
}
.fc-ghost--next .fc-g-term {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.7;
  color: var(--card-meta-ink);
  opacity: .62;
  max-width: 34ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.flashcard-card {
  position: relative;
  z-index: 4;             /*@3.GARC.125*/
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /*@3.GARC.126*/
  transition: transform 0.8s cubic-bezier(.175, .885, .32, 1.275);
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(.175, .885, .32, 1.275);
  cursor: pointer;
  /*@3.GARC.127*/
}

/*@3.GARC.128*/
.flashcard-card.flipped {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
}

/*@3.GARC.129*/
.fc-exit-away,
.fc-exit-slide,
.fc-exit-back { pointer-events: none; }

.fc-exit-away  { animation: fcExitAway  .42s cubic-bezier(.4, 0, .8, .4) forwards; }
.fc-exit-slide { animation: fcExitSlide .42s cubic-bezier(.4, 0, .7, .5) forwards; }
.fc-exit-back  { animation: fcExitBack  .42s cubic-bezier(.5, 0, .6, 1) forwards; }

/*@3.GARC.130*/
@keyframes fcExitAway {
  from { transform: var(--fc-face, none) scale(1); }
  to   { transform: var(--fc-face, none) scale(1.14) translateZ(90px); }
}
@keyframes fcExitSlide {
  from { transform: var(--fc-face, none) translateX(0); }
  to   { transform: var(--fc-face, none) translateX(calc(var(--fan, -1) * 62%)) rotate(calc(var(--fan, -1) * -4deg)); }
}
/*@3.GARC.131*/
@keyframes fcExitBack {
  from { transform: var(--fc-face, none) scale(1) translateY(0); }
  60%  { transform: var(--fc-face, none) scale(.9)  translateY(calc(var(--g-y) * 3)); }
  to   { transform: var(--fc-face, none) scale(.88) translateY(calc(var(--g-y) * 3.4)); }
}

/*@3.GARC.132*/
.fc-exit-away  > .flashcard-face,
.fc-exit-slide > .flashcard-face { animation: fcFaceOut     .42s ease-in forwards; }
.fc-exit-back  > .flashcard-face { animation: fcFaceOutBack .42s ease-in forwards; }
@keyframes fcFaceOut     { from { opacity: 1; } to { opacity: 0; } }
@keyframes fcFaceOutBack { from { opacity: 1; } 60% { opacity: .75; } to { opacity: 0; } }
/*@3.GARC.133*/
.flashcard-card.flipped.fc-exit-away,
.flashcard-card.flipped.fc-exit-slide,
.flashcard-card.flipped.fc-exit-back { --fc-face: rotateY(-180deg); }

/*@3.GARC.134*/
.flashcard-scene { --fan: -1; }
[dir="ltr"] .flashcard-scene { --fan: 1; }

/*@3.GARC.464*/
@media (prefers-reduced-motion: reduce) {
  /*@3.GARC.465*/
  .flashcard-card {
    transform-style: flat !important;
    -webkit-transform-style: flat !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
  }
  .flashcard-card.flipped { transform: none !important; -webkit-transform: none !important; }
  .flashcard-face {
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: opacity .2s ease !important;
    transition-duration: .2s !important;
  }
  .flashcard-front { opacity: 1; }
  .flashcard-back  { opacity: 0; pointer-events: none; }
  .flashcard-card.flipped .flashcard-front { opacity: 0; pointer-events: none; }
  .flashcard-card.flipped .flashcard-back  { opacity: 1; pointer-events: auto; }

  /*@3.GARC.466*/
  .fc-exit-away, .fc-exit-slide, .fc-exit-back {
    animation: fcFadeOnly .2s linear forwards !important;
    animation-duration: .2s !important;
    animation-iteration-count: 1 !important;
  }
  .fc-exit-away  > .flashcard-face,
  .fc-exit-slide > .flashcard-face,
  .fc-exit-back  > .flashcard-face { animation: none !important; }
  @keyframes fcFadeOnly { from { opacity: 1; } to { opacity: 0; } }
}

.flashcard-face {
  /*@3.GARC.135*/
  --card-accent: var(--brand-500, #64748b);
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--card-radius);
  padding: 1.5rem 1.75rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--card-accent) var(--card-tint-a), var(--card-base));
  /*@3.GARC.136*/
  background-image: repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--card-rule-gap) - 1px),
      var(--card-rule) calc(var(--card-rule-gap) - 1px) var(--card-rule-gap));
  background-position: 0 var(--card-rule-top);
  border: 1px solid color-mix(in srgb, var(--card-accent) var(--card-edge-a), var(--card-edge));
  box-shadow: var(--card-shadow);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.flashcard-back {
  transform: rotateY(180deg);
  background-color: color-mix(in srgb, var(--card-accent) var(--card-tint-a), var(--card-base-back));
}

/*@3.GARC.137*/
.fc-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/*@3.GARC.138*/
.fc-pill {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--card-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-pill i { font-size: 0.7em; opacity: 0.9; }

.fc-pos {
  grid-column: 1;
  justify-self: start;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--card-meta-ink);
  letter-spacing: 0.04em;
}

/*@3.GARC.139*/
.fc-ans {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--card-accent) var(--card-term-mix), var(--text-primary));
}

.fc-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  overflow-y: auto;
}

/*@3.GARC.140*/
.fc-math {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .94em;
  letter-spacing: 0;
  /*@3.GARC.141*/
  white-space: normal;
}
.fc-term sup, .fc-term sub,
.fc-definition sup, .fc-definition sub,
.fc-example sup, .fc-example sub,
.fc-math sup, .fc-math sub {
  font-size: .66em;
  font-weight: 700;
  /*@3.GARC.142*/
  line-height: 0;
  position: relative;
}
.fc-term sup, .fc-definition sup, .fc-example sup, .fc-math sup { top: -.5em; vertical-align: baseline; }
.fc-term sub, .fc-definition sub, .fc-example sub, .fc-math sub { bottom: -.25em; vertical-align: baseline; }

/*@3.GARC.143*/
.fc-rule {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.fc-rule i {
  display: block;
  height: 1px;
  width: 5.5rem;
  background: linear-gradient(to var(--fc-rule-dir, left),
    color-mix(in srgb, var(--card-accent) 38%, transparent), transparent);
}
.fc-rule i:last-child { --fc-rule-dir: right; }
.fc-rule b {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-accent) 60%, transparent);
}

/*@3.GARC.144*/
.fc-tap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--card-meta-ink);
}
.fc-tap i { font-size: 0.9em; opacity: 0.75; }

.flashcard-counter {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/*@3.GARC.145*/
.flashcard-front .fc-term {
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 800;
  color: color-mix(in srgb, var(--card-accent) var(--card-term-mix), var(--text-primary));
  font-family: 'Cairo', sans-serif;
  line-height: 1.5;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
[dir="ltr"] .flashcard-front .fc-term { font-family: 'Inter', 'Cairo', sans-serif; }

/*@3.GARC.146*/
.fc-term-en {
  font-family: 'JetBrains Mono', monospace;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--card-meta-ink);
  letter-spacing: -0.01em;
}
.fc-term-en:empty { display: none; }

.flashcard-back .fc-definition {
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--text-primary);
  margin-bottom: 0;
  font-weight: 600;
  line-height: 1.75;
  max-width: 44ch;
  text-wrap: pretty;
}

/*@3.GARC.147*/
.flashcard-back .fc-example {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /*@3.GARC.148*/
  justify-content: center;
  gap: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--card-note-ink);
  background: color-mix(in srgb, var(--card-accent) var(--card-note-a), var(--card-note-base));
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--card-accent) var(--card-note-edge-a), var(--card-edge));
  text-align: center;
}
.flashcard-back .fc-example::before {
  content: '\f0eb';                      /*@3.GARC.149*/
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 1rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--card-accent) 72%, var(--text-primary));
}

/*@3.GARC.150*/
.sm2-grades[hidden],
.sm2-grades.hidden {
  /*@3.GARC.151*/
  display: flex !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}
.sm2-grades {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.7rem;
  flex-wrap: wrap;
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .34s var(--skin-ease-out, cubic-bezier(.22, 1, .36, 1)),
              transform .34s var(--skin-ease-out, cubic-bezier(.22, 1, .36, 1)),
              visibility 0s;
}
@media (prefers-reduced-motion: reduce) { .sm2-grades { transition: none; } }

.sm2-btn {
  --g: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 7rem;
  padding: 0.7rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-edge);
  background: var(--card-base);
  color: var(--text-primary);
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.3;
  box-shadow: var(--card-shadow);
  transition: background-color 0.18s var(--skin-ease, ease),
              color 0.18s var(--skin-ease, ease),
              border-color 0.18s var(--skin-ease, ease),
              transform 0.14s var(--skin-ease, ease),
              box-shadow 0.18s var(--skin-ease, ease);
}
[dir="ltr"] .sm2-btn { font-family: 'Inter', 'Cairo', sans-serif; }

.sm2-btn::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--g);
  transition: color 0.18s var(--skin-ease, ease), transform 0.18s var(--skin-ease, ease);
}

/*@3.GARC.152*/
.sm2-btn:hover,
.sm2-btn:focus-visible {
  background: var(--g);
  border-color: var(--g);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--g) 62%, transparent);
}
.sm2-btn:hover::before,
.sm2-btn:focus-visible::before { color: #fff; transform: scale(1.12); }
.sm2-btn:active { transform: scale(0.96); }

.sm2-btn--0 { --g: rgb(217, 69, 88); }
.sm2-btn--2 { --g: rgb(229, 99, 58); }
.sm2-btn--3 { --g: rgb(227, 159, 40); }
.sm2-btn--4 { --g: rgb(70, 151, 92); }
.sm2-btn--5 { --g: rgb(45, 159, 129); }

.sm2-btn--0::before { content: '\f059'; font-family: 'Font Awesome 6 Free'; }  /*@3.GARC.153*/
.sm2-btn--2::before { content: '\f119'; }   /*@3.GARC.154*/
.sm2-btn--3::before { content: '\f11a'; }   /*@3.GARC.155*/
.sm2-btn--4::before { content: '\f005'; }   /*@3.GARC.156*/
.sm2-btn--5::before { content: '\f118'; }   /*@3.GARC.157*/

/*@3.GARC.158*/
.fc-flip-btn {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 1.1rem auto 0;
  border-radius: 50%;
  border: none;
  background: var(--card-accent, var(--brand-500, #64748b));
  color: #fff;
  font-size: 1.15rem;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--card-accent, var(--brand-500, #64748b)) 12%, transparent),
              0 12px 26px -10px color-mix(in srgb, var(--card-accent, var(--brand-500, #64748b)) 70%, transparent);
  transition: transform 0.18s var(--skin-ease, ease), box-shadow 0.18s var(--skin-ease, ease);
}
.fc-flip-btn:hover { transform: translateY(-2px); }
.fc-flip-btn:active { transform: scale(0.94); }
.fc-flip-lbl {
  display: block;
  text-align: center;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--card-meta-ink);
}

.fc-empty {
  text-align: center;
  padding: 5rem 2rem;
  color: var(--text-muted);
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--border-color);
}

.fc-empty .fc-empty-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  animation: bounce 2s infinite;
}

.fc-reset-btn {
  margin-top: 1.5rem;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--brand-500);
  background: transparent;
  color: var(--brand-500);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.fc-reset-btn:hover {
  background: var(--brand-500);
  color: #fff;
}

/*@3.GARC.159*/
.sm2-report-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, var(--sa-t)) max(1rem, var(--sa-r)) max(1rem, var(--sa-b)) max(1rem, var(--sa-l));
  opacity: 0;
  transition: opacity 0.22s ease;
}

.sm2-report-overlay.open {
  opacity: 1;
}

.sm2-report-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  transform: translateY(16px);
  transition: transform 0.22s ease;
  overflow: hidden;
}

.sm2-report-overlay.open .sm2-report-modal {
  transform: translateY(0);
}

.sm2-report-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.sm2-report-header-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.sm2-report-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.sm2-report-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.sm2-report-close:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.sm2-report-body {
  overflow-y: auto;
  padding: 1rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.sm2-report-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
}

.sm2-rsec-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}

.sm2-rsec-title span:first-child {
  font-size: 1rem;
}

.sm2-rtotal-badge {
  margin-inline-start: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-500);
  background: var(--brand-glow);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  text-transform: none;
  letter-spacing: 0;
}

/*@3.GARC.160*/
.sm2-rpills {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.sm2-rpill {
  flex: 1;
  min-width: 70px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.5rem;
  text-align: center;
}

.sm2-rpill-n {
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.1;
  font-family: var(--display-font);
}

.sm2-rpill-l {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.sm2-rpill--blue .sm2-rpill-n {
  color: #60a5fa;
}

.sm2-rpill--green .sm2-rpill-n {
  color: #34d399;
}

.sm2-rpill--orange .sm2-rpill-n {
  color: #fb923c;
}

/*@3.GARC.161*/
.sm2-rstat-bar {
  display: flex;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--bg-surface);
  margin-bottom: 0.6rem;
}

.sm2-rsb-new {
  background: #6b7280;
  transition: width 0.6s ease;
}

.sm2-rsb-learning {
  background: #f59e0b;
  transition: width 0.6s ease;
}

.sm2-rsb-mastered {
  background: #10b981;
  transition: width 0.6s ease;
}

.sm2-rstat-legend {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.sm2-rsl {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.sm2-rsl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sm2-rsl-new {
  background: #6b7280;
}

.sm2-rsl-learning {
  background: #f59e0b;
}

.sm2-rsl-mastered {
  background: #10b981;
}

.sm2-rsl strong {
  color: var(--text-primary);
  margin-inline-start: 0.2rem;
}

.sm2-ref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
  margin-top: 0.4rem;
}

.sm2-ref-row strong {
  color: var(--brand-500);
  font-family: var(--display-font);
  font-size: 1rem;
}

/*@3.GARC.162*/
.sm2-rfc-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sm2-rfc-row {
  display: grid;
  grid-template-columns: 80px 1fr 36px;
  align-items: center;
  gap: 0.5rem;
}

.sm2-rfc-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.sm2-rfc-track {
  background: var(--bg-surface);
  border-radius: var(--radius-pill);
  height: 8px;
  overflow: hidden;
}

.sm2-rfc-bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--brand-500);
  opacity: 0.5;
  transition: width 0.5s ease;
}

.sm2-rfc-bar.sm2-rfc-today {
  opacity: 1;
  background: var(--brand-500);
}

.sm2-rfc-num {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary);
  text-align: end;
  font-family: var(--display-font);
}

.sm2-rfc-zero {
  color: var(--text-muted);
  font-weight: 600;
}

.sm2-report-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.75rem 0;
  font-weight: 600;
}

/*@3.GARC.163*/
.fc-practice-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--brand-glow), transparent);
  border: 1px solid var(--brand-500);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-500);
  margin-bottom: 0.75rem;
  text-align: center;
}

/*@3.GARC.164*/
.fc-practice-btn {
  border-color: var(--brand-500) !important;
  color: var(--brand-500) !important;
  font-weight: 800 !important;
}

.fc-practice-btn:hover {
  background: var(--brand-500) !important;
  color: #fff !important;
}

/*@3.GARC.165*/
.sm2-rmastery-note {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 0.75rem;
}

.sm2-rmastery-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  padding: 0.6rem;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}

.sm2-rmp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 52px;
}

.sm2-rmp-day {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
}

.sm2-rmp-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.sm2-rmp-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.sm2-rmp-s4 .sm2-rmp-label {
  color: var(--brand-500);
}

.sm2-rmp-arrow {
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 0 0.1rem;
  margin-top: 0.6rem;
}

.sm2-rmastery-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sm2-rmb-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.sm2-rmb-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/*@3.GARC.166*/
.sm2-rnext-date {
  text-align: center;
  padding: 0.5rem 0;
}

.sm2-rnd-big {
  font-size: 1rem;
  font-weight: 800;
  color: var(--brand-500);
  font-family: var(--display-font);
  margin-bottom: 0.25rem;
}

.sm2-rnd-sub {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

@media(max-width:480px) {
  .sm2-rmastery-path {
    gap: 0.1rem;
  }

  .sm2-rmp-step {
    min-width: 44px;
  }
}

/*@3.GARC.167*/
.sm2-report-howto {}

.sm2-rhow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.sm2-rhow-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-color);
}

.sm2-rhow-g {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.sm2-rhow-0 .sm2-rhow-g {
  background: #ef4444;
}

.sm2-rhow-2 .sm2-rhow-g {
  background: #f59e0b;
}

.sm2-rhow-3 .sm2-rhow-g {
  background: #3b82f6;
}

.sm2-rhow-5 .sm2-rhow-g {
  background: #10b981;
}

.sm2-rhow-item strong {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-primary);
  display: block;
  margin-bottom: 0.15rem;
}

.sm2-rhow-item p {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
  font-weight: 600;
}

/*@3.GARC.168*/
.sm2-rformula {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.75rem;
}

.sm2-rformula-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.sm2-rformula-code {
  display: block;
  font-size: 0.72rem;
  color: var(--brand-400);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.5;
  word-break: break-all;
}

.sm2-rformula-note {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
  font-weight: 600;
}

/*@3.GARC.169*/
.sm2-rgrade-stats {
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-color);
}

.sm2-rgs-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.sm2-rgs-pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.sm2-rgs-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.sm2-rgs-pill strong {
  color: var(--text-primary);
  font-weight: 900;
  font-family: var(--display-font);
  font-size: 0.82rem;
}

.sm2-rgs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sm2-rgs-pill-0 .sm2-rgs-dot {
  background: #ef4444;
}

.sm2-rgs-pill-2 .sm2-rgs-dot {
  background: #f59e0b;
}

.sm2-rgs-pill-3 .sm2-rgs-dot {
  background: #3b82f6;
}

.sm2-rgs-pill-5 .sm2-rgs-dot {
  background: #10b981;
}

.sm2-rgs-pill+.sm2-rgs-pill::before {
  content: '·';
  color: var(--border-color);
  margin-inline-end: -0.1rem;
}

/*@3.GARC.170*/
@media(max-width:480px) {
  .sm2-report-modal {
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    align-self: flex-end;
  }

  .sm2-report-overlay {
    align-items: flex-end;
    padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l);
  }

  .sm2-rhow-grid {
    grid-template-columns: 1fr;
  }

  .sm2-rfc-row {
    grid-template-columns: 70px 1fr 30px;
  }
}

/*@3.GARC.171*/
.quiz-section {
  margin-bottom: 3rem
}

.quiz-progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: var(--brand-500);
  transition: width 0.3s ease;
}

.quiz-card {
  min-height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem
}

.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
}

.quiz-question {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2rem;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem
}

.mcq-option {
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
  text-align: inherit;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.2s;
}

.mcq-option:hover:not(:disabled) {
  border-color: var(--brand-500);
  background: var(--bg-elevated);
}

.mcq-option.correct {
  background: rgba(16, 185, 129, 0.1);
  border-color: #10b981
}

.mcq-option.wrong {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444
}

.mcq-label {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.mcq-option:hover:not(:disabled) .mcq-label {
  background: var(--brand-500);
  color: #fff;
}

.mcq-option.correct .mcq-label {
  background: #10b981;
  color: #fff;
}

.mcq-option.wrong .mcq-label {
  background: #ef4444;
  color: #fff;
}

.quiz-hint-btn {
  margin-top: 1.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--brand-500);
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  align-self: flex-start;
}

.quiz-hint-btn:hover {
  background: var(--brand-glow);
  border-color: var(--brand-500);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--brand-glow);
}

.quiz-feedback {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
  font-size: 1.05rem;
  font-weight: 600;
}

.quiz-feedback--correct {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.3)
}

.quiz-feedback--wrong {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.3)
}

:is([data-theme="dark"],[data-theme="dim"]) .quiz-feedback--correct {
  color: #34d399;
}

:is([data-theme="dark"],[data-theme="dim"]) .quiz-feedback--wrong {
  color: #f87171;
}

.quiz-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem
}

.quiz-results {
  text-align: center;
  padding: 5rem 2rem
}

.quiz-results .score-display {
  font-size: 5rem;
  font-weight: 900;
  font-family: var(--display-font);
  color: var(--brand-500);
}

.quiz-results .score-emoji {
  font-size: 4rem;
  margin-bottom: 1rem
}

/*@3.GARC.172*/
.video-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.video-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all 0.2s;
}

.video-card:hover {
  border-color: var(--brand-500);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--shadow-base);
}

.video-card-lang {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}

.video-card-body {
  flex: 1;
  min-width: 0;
}

.video-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-card-channel {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.video-card-topic {
  font-size: 0.8rem;
  color: var(--brand-500);
  font-weight: 600;
  margin-top: 0.25rem;
}

.video-card-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-glow);
  color: var(--brand-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: all 0.2s;
}

.video-card:hover .video-card-play {
  background: var(--brand-500);
  color: #fff;
  transform: scale(1.1);
}

.video-section {
  margin-bottom: 2.5rem;
}

.video-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
}

.video-toggle:hover {
  border-color: var(--brand-500);
  box-shadow: 0 4px 12px var(--brand-glow);
}

.video-toggle-content {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
}

.video-toggle-chevron {
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: transform 0.3s ease;
}

.video-toggle[aria-expanded="true"] .video-toggle-chevron {
  transform: rotate(180deg);
}

.video-toggle[aria-expanded="true"] {
  border-color: var(--brand-500);
  background: var(--brand-glow);
}

.video-collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0;
}

.video-collapsible.open {
  max-height: 2000px;
  padding: 1rem 0 0;
}

.video-section-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 1rem;
}

/*@3.GARC.173*/
.vault-section {
  padding: 2rem;
  margin-bottom: 2.5rem;
  border: 2px solid rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.02);
  border-radius: var(--radius-xl);
}

.vault-entry {
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px var(--shadow-base);
}

.vault-type {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.vault-type--trap {
  color: #ef4444
}

.vault-type--secret {
  color: #10b981
}

.vault-type--key {
  color: #f59e0b
}

/*@3.GARC.174*/
.site-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  padding: 2.5rem 0;
  margin-top: auto;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0 2rem;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.2s ease;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid transparent;
}

.footer-link:hover {
  color: var(--brand-500);
  background: var(--bg-surface);
  border-color: var(--brand-500);
  transform: translateY(-2px);
}

.footer-brand {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-muted);
  font-family: var(--display-font);
  letter-spacing: 0.05em;
  text-align: center;
}

/*@3.GARC.175*/
/*@3.GARC.481*/
.fade-up {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up.fu-wait {
  opacity: 0;
  transform: translateY(10px)
}

.hidden {
  display: none !important
}

.section-gap {
  margin-bottom: 2.5rem
}

/*@3.GARC.176*/

/*@3.GARC.177*/
:root,
[data-theme="dark"],
[data-theme="dim"] {
  --syn-keyword: #FF7162;
  /*@3.GARC.178*/
  --syn-operator: #F472B6;
  /*@3.GARC.179*/
  --syn-type: #38BDF8;
  /*@3.GARC.180*/
  --syn-function: #818CF8;
  /*@3.GARC.181*/
  --syn-string: #34D399;
  /*@3.GARC.182*/
  --syn-number: #FBBF24;
  /*@3.GARC.183*/
  --syn-constant: #C084FC;
  /*@3.GARC.184*/
  --syn-comment: #6B7280;
  /*@3.GARC.185*/
  --syn-param: #F3F4F6;
  /*@3.GARC.186*/
  --syn-line-num: #4B5563;
  /*@3.GARC.187*/
}

/*@3.GARC.188*/
[data-theme="light"] {
  --syn-keyword: #E11D48;
  /*@3.GARC.189*/
  --syn-operator: #C026D3;
  /*@3.GARC.190*/
  --syn-type: #0284C7;
  /*@3.GARC.191*/
  --syn-function: #4F46E5;
  /*@3.GARC.192*/
  --syn-string: #059669;
  /*@3.GARC.193*/
  --syn-number: #D97706;
  /*@3.GARC.194*/
  --syn-constant: #7C3AED;
  /*@3.GARC.195*/
  --syn-comment: #9CA3AF;
  /*@3.GARC.196*/
  --syn-param: #111827;
  /*@3.GARC.197*/
  --syn-line-num: #9CA3AF;
  /*@3.GARC.198*/
}

/*@3.GARC.199*/
.code-block code .kw {
  color: var(--syn-keyword);
  font-weight: 600;
}

/*@3.GARC.200*/
.code-block code .fn {
  color: var(--syn-function);
}

/*@3.GARC.201*/
.code-block code .str {
  color: var(--syn-string);
}

/*@3.GARC.202*/
.code-block code .num {
  color: var(--syn-number);
}

/*@3.GARC.203*/
.code-block code .cm {
  color: var(--syn-comment);
  font-style: italic;
}

/*@3.GARC.204*/
.code-block code .op {
  color: var(--syn-operator);
}

/*@3.GARC.205*/
.code-block code .ty {
  color: var(--syn-type);
}

/*@3.GARC.206*/
.code-block code .ct {
  color: var(--syn-constant);
  font-weight: 600;
}

/*@3.GARC.207*/
.code-block code .pm {
  color: var(--syn-param);
}

/*@3.GARC.208*/

/*@3.GARC.209*/
.code-block code .ln {
  display: inline-block;
  width: 2.5em;
  text-align: right;
  color: var(--syn-line-num);
  margin-inline-end: 1em;
  user-select: none;
  opacity: 0.6;
}

/*@3.GARC.210*/
.code-block-header .lang-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--brand-glow);
  color: var(--brand-500);
}

/*@3.GARC.211*/
.garden-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, var(--sa-t)) max(1rem, var(--sa-r)) max(1rem, var(--sa-b)) max(1rem, var(--sa-l));
  animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.garden-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 2rem;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideUp 0.25s ease;
  text-align: center;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.garden-modal-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.garden-modal-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.garden-modal-message {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.garden-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.garden-modal-btn {
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.9rem;
  font-family: inherit;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
}

.garden-modal-btn--cancel {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.garden-modal-btn--cancel:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.garden-modal-btn--danger {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

.garden-modal-btn--danger:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/*@3.GARC.212*/
.depth-layer p b:not(:first-child) {
  display: inline;
}

/*@3.GARC.213*/
.depth-layer p {
  white-space: normal;
}

.depth-layer p>br+b,
.depth-layer p b+b {
  display: inline;
}

/*@3.GARC.214*/
.depth-layer li::marker {
  color: var(--brand-500);
  font-weight: 700;
  font-size: 1.05em;
}

/*@3.GARC.215*/
.depth-layer ul ul,
.depth-layer ol ol,
.depth-layer ul ol,
.depth-layer ol ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/*@3.GARC.216*/
[dir="rtl"] pre,
[dir="rtl"] code,
[dir="rtl"] .math-block,
[dir="rtl"] .mermaid,
[dir="rtl"] canvas,
[dir="rtl"] .font-mono,
[dir="rtl"] .pseudo-block,
[dir="rtl"] svg,
[dir="rtl"] .svg-diagram,
[dir="rtl"] .svg-placeholder {
  direction: ltr !important;
  text-align: left !important
}

/*@3.GARC.217*/
svg:not([data-font]),
svg:not([data-font]) text,
svg:not([data-font]) tspan,
.svg-diagram text,
.svg-diagram tspan {
  font-family: 'Inter', 'Cairo', sans-serif !important;
}

/*@3.GARC.218*/

/*@3.GARC.219*/
.sidebar.smart .toc-list {
  overflow: hidden;
  flex: 1;
  min-height: 0;
  padding-bottom: 0;
  justify-content: flex-start;
}

/*@3.GARC.220*/
.toc-pinned-top {
  flex-shrink: 0;
}

/*@3.GARC.221*/
.toc-pinned-bottom {
  flex-shrink: 0;
  padding-top: 0.25rem;
}

/*@3.GARC.222*/
.toc-concepts-wrapper {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/*@3.GARC.223*/
.toc-concepts-wrapper::before,
.toc-concepts-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.25s;
}

.toc-concepts-wrapper::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg-body) 0%, transparent 100%);
}

.toc-concepts-wrapper::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg-body) 0%, transparent 100%);
}

.toc-concepts-wrapper.at-top::before {
  opacity: 0;
}

.toc-concepts-wrapper.at-bottom::after {
  opacity: 0;
}

/*@3.GARC.224*/
.toc-inner-top,
.toc-inner-bottom {
  flex-shrink: 0;
}

/*@3.GARC.225*/
.toc-concepts {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.toc-concepts::-webkit-scrollbar {
  display: none;
}

/*@3.GARC.226*/
.toc-center-group {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*@3.GARC.227*/
.mobile-note-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--bg-surface);
  border-top: 2px solid var(--brand-500);
  padding: 0.6rem 1rem;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  box-shadow: 0 -4px 20px var(--shadow-base);
  animation: slideUpBar 0.25s ease;
}

@keyframes slideUpBar {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.mnb-text {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
}

.mnb-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.mnb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.mnb-color, .mnb-copy {
  width: 38px;
  height: 38px;
  justify-content: center;
  padding: 0;
}

.mnb-save {
  padding: 0.5rem 0.95rem;
  height: 38px;
  border: none;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.3);
}

.mnb-colors {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.35rem 0.15rem 0.1rem;
  flex-wrap: wrap;
}

/*@3.GARC.228*/
@media (max-width: 1024px) {
  .mobile-fab-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: fixed;
    top: calc(80px + var(--sa-t));
    z-index: 900;
    transition: opacity 0.3s, transform 0.3s;
  }

  [dir="rtl"] .mobile-fab-container {
    right: 0;
    left: auto;
  }

  [dir="ltr"] .mobile-fab-container {
    left: 0;
    right: auto;
  }

  .mobile-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 42px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    cursor: pointer;
    opacity: 0.45;
    transition: all 0.25s ease;
    font-size: 1rem;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  /*@3.GARC.229*/
  [dir="rtl"] .mobile-fab {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: none;
    box-shadow: -2px 2px 8px var(--shadow-base);
  }

  /*@3.GARC.230*/
  [dir="ltr"] .mobile-fab {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: none;
    box-shadow: 2px 2px 8px var(--shadow-base);
  }

  .mobile-fab:hover,
  .mobile-fab:active {
    opacity: 1;
    width: 46px;
    background: var(--brand-glow);
    border-color: var(--brand-500);
  }

  .mobile-fab .fab-badge {
    position: absolute;
    top: -4px;
    background: var(--brand-500);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 900;
    min-width: 16px;
    height: 16px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
  }

  [dir="rtl"] .mobile-fab .fab-badge {
    left: -4px;
    right: auto;
  }

  [dir="ltr"] .mobile-fab .fab-badge {
    right: -4px;
    left: auto;
  }

  .mobile-fab-container.scrolling-down {
    opacity: 0.15;
  }

  [dir="rtl"] .mobile-fab-container.scrolling-down {
    transform: translateX(20px);
  }

  [dir="ltr"] .mobile-fab-container.scrolling-down {
    transform: translateX(-20px);
  }

  .mobile-fab-container.docked {
    display: none !important;
  }

  /*@3.GARC.231*/
  .mobile-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 950;
    background: var(--bg-surface);
    border-top: 2px solid var(--brand-500);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 0.5rem 1.25rem 1rem;
    box-shadow: 0 -8px 30px var(--shadow-base);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mobile-bottom-sheet.open {
    transform: translateY(0);
  }

  .mbs-handle {
    width: 36px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    margin: 0 auto 0.75rem;
    cursor: pointer;
  }

  .mbs-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .mbs-icon {
    font-size: 1.5rem;
  }

  .mbs-info {
    flex: 1;
  }

  .mbs-count {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--brand-500);
    font-family: var(--display-font);
    line-height: 1;
  }

  .mbs-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
  }

  .mbs-go {
    padding: 0.55rem 1.2rem;
    border-radius: var(--radius-md);
    background: var(--brand-500);
    color: #fff;
    border: none;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
  }

  .mbs-go:hover {
    filter: brightness(1.1);
  }

  .mbs-dismiss {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.4rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
  }

  .mbs-dismiss:hover {
    color: var(--brand-500);
    border-color: var(--brand-500);
  }
}

/*@3.GARC.232*/

/*@3.GARC.233*/
[data-theme="dark"],
[data-theme="dim"] {
  --algo-compare: #FDE047;
  /*@3.GARC.234*/
  --algo-swap: #F472B6;
  /*@3.GARC.235*/
  --algo-sorted: #34D399;
  /*@3.GARC.236*/
  --algo-active: #C084FC;
  /*@3.GARC.237*/
  --algo-compare-glow: rgba(253, 224, 71, 0.35);
  --algo-swap-glow: rgba(244, 114, 182, 0.35);
  --algo-active-glow: rgba(192, 132, 252, 0.35);
  --algo-bg: var(--bg-elevated);
  --algo-bar: var(--brand-400);
  /*@3.GARC.238*/
  --algo-text: var(--text-primary);
  --algo-muted: var(--text-muted);
  --algo-border: var(--border-color);
  --algo-node-text: #0F172A;
  /*@3.GARC.239*/
  --algo-bar-label: #0F172A;
  --algo-canvas-bg: rgba(0, 0, 0, 0.22);
}

/*@3.GARC.240*/
[data-theme="light"] {
  --algo-compare: #CA8A04;
  --algo-swap: #DB2777;
  --algo-sorted: #059669;
  --algo-active: #9333EA;
  --algo-compare-glow: rgba(202, 138, 4, 0.25);
  --algo-swap-glow: rgba(219, 39, 119, 0.25);
  --algo-active-glow: rgba(147, 51, 234, 0.25);
  --algo-bg: #f1f5f9;
  --algo-bar: var(--brand-500);
  /*@3.GARC.241*/
  --algo-text: var(--text-primary);
  --algo-muted: var(--text-muted);
  --algo-border: var(--border-color);
  --algo-node-text: #ffffff;
  /*@3.GARC.242*/
  --algo-bar-label: #ffffff;
  --algo-canvas-bg: rgba(0, 0, 0, 0.03);
}

/*@3.GARC.243*/
.algo-widget {
  background: var(--algo-bg);
  border: 1px solid var(--algo-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin: 1.5rem 0;
  /*@3.GARC.244*/
}

.algo-widget * {
  box-sizing: border-box;
}

/*@3.GARC.245*/
.algo-widget svg,
.algo-widget canvas,
.algo-widget .algo-array,
.algo-widget .algo-graph,
.algo-widget table {
  direction: ltr !important;
}

/*@3.GARC.246*/
.algo-title {
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--brand-500);
  margin: 0 0 1rem 0;
  padding: 0;
  letter-spacing: 0.01em;
  direction: inherit !important;
}

/*@3.GARC.247*/
.algo-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: nowrap;
}

/*@3.GARC.248*/
[dir="rtl"] .algo-controls-row {
  flex-direction: row;
}

/*@3.GARC.249*/
[dir="ltr"] .algo-controls-row {
  flex-direction: row-reverse;
}

.algo-controls-row .step-counter {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--algo-muted);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

.algo-controls-row .algo-speed {
  margin-bottom: 0;
  flex-shrink: 0;
}

/*@3.GARC.250*/
.algo-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.algo-toolbar button {
  padding: 0.45rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--algo-border);
  background: var(--bg-surface);
  color: var(--algo-text);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.algo-toolbar button:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
  background: var(--brand-glow);
}

.algo-toolbar button:active {
  transform: scale(0.95);
}

.algo-toolbar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/*@3.GARC.251*/
.algo-toolbar .step-counter {
  margin-inline-start: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--algo-muted);
  font-family: 'JetBrains Mono', monospace;
}

/*@3.GARC.252*/
.algo-speed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--algo-muted);
  direction: ltr !important;
}

/*@3.GARC.253*/
[dir="rtl"] .algo-speed {
  flex-direction: row-reverse;
}

[dir="rtl"] .algo-speed input[type="range"] {
  direction: ltr !important;
}

.algo-speed input[type="range"] {
  width: 100px;
  accent-color: var(--brand-500);
  cursor: pointer;
  direction: ltr !important;
}

/*@3.GARC.254*/
.algo-array {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-height: 180px;
  padding: 1rem 0;
  direction: ltr !important;
}

.algo-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 32px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--algo-bar);
  transition: all 0.3s ease;
  position: relative;
  /*@3.GARC.255*/
  color: var(--algo-node-text) !important;
  /*@3.GARC.256*/
  font-family: 'Inter', 'JetBrains Mono', sans-serif !important;
  /*@3.GARC.257*/
  font-weight: 800 !important;
  /*@3.GARC.258*/
  font-size: 0.95rem !important;
  padding-bottom: 0.4rem !important;
  /*@3.GARC.259*/
}

.algo-bar-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--algo-bar-label);
  padding: 0.35rem 0.25rem;
  font-family: 'Inter', 'JetBrains Mono', sans-serif;
  /*@3.GARC.260*/
  text-shadow: none;
  /*@3.GARC.261*/
}

.algo-bar.comparing {
  background: var(--algo-compare);
}

.algo-bar.swapping {
  background: var(--algo-swap);
}

.algo-bar.sorted {
  background: var(--algo-sorted);
}

.algo-bar.active {
  background: var(--algo-active);
}

/*@3.GARC.262*/
@keyframes algoPulseCompare {

  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }

  50% {
    box-shadow: 0 0 10px 3px var(--algo-compare-glow, var(--algo-compare));
  }
}

@keyframes algoPulseSwap {

  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }

  50% {
    box-shadow: 0 0 10px 3px var(--algo-swap-glow, var(--algo-swap));
  }
}

@keyframes algoPulseActive {

  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }

  50% {
    box-shadow: 0 0 12px 4px var(--algo-active-glow, var(--algo-active));
  }
}

.algo-bar.comparing {
  animation: algoPulseCompare 0.8s ease-in-out;
}

.algo-bar.swapping {
  animation: algoPulseSwap 0.8s ease-in-out;
}

.algo-node.current {
  animation: algoPulseActive 1s ease-in-out infinite;
}

/*@3.GARC.263*/
.algo-explanation {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--algo-border);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--algo-text);
  min-height: 2.5rem;
  line-height: 1.7;
  /*@3.GARC.264*/
  direction: inherit !important;
  text-align: inherit !important;
}

[dir="rtl"] .algo-explanation {
  direction: rtl !important;
  text-align: right !important;
}

[dir="ltr"] .algo-explanation {
  direction: ltr !important;
  text-align: left !important;
}

/*@3.GARC.265*/
.algo-toolbar,
.algo-legend,
[data-algo-text],
.algo-speed {
  direction: inherit !important;
  text-align: inherit !important;
}

[dir="rtl"] .algo-toolbar,
[dir="rtl"] .algo-legend,
[dir="rtl"] [data-algo-text],
[dir="rtl"] .algo-speed {
  direction: rtl !important;
}

[dir="ltr"] .algo-toolbar,
[dir="ltr"] .algo-legend,
[dir="ltr"] [data-algo-text],
[dir="ltr"] .algo-speed {
  direction: ltr !important;
}

/*@3.GARC.266*/
.algo-legend {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.algo-legend span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--algo-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.algo-legend span::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.algo-legend .legend-compare::before {
  background: var(--algo-compare);
}

.algo-legend .legend-swap::before {
  background: var(--algo-swap);
}

.algo-legend .legend-sorted::before {
  background: var(--algo-sorted);
}

.algo-legend .legend-active::before {
  background: var(--algo-active);
}

/*@3.GARC.267*/
.algo-graph {
  position: relative;
  min-height: 200px;
  direction: ltr !important;
}

div.algo-node {
  /*@3.GARC.268*/
  min-width: 45px;
  min-height: 45px;
  border-radius: var(--radius-md);
  /*@3.GARC.269*/
  background: var(--algo-bar);
  color: var(--algo-node-text);
  /*@3.GARC.270*/
  font-family: 'Inter', 'JetBrains Mono', sans-serif;
  /*@3.GARC.271*/
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  /*@3.GARC.272*/
  position: absolute;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  box-shadow: 0 4px 6px var(--shadow-base);
  /*@3.GARC.273*/
}

.algo-node.visited {
  background: var(--algo-sorted);
}

.algo-node.current {
  background: var(--algo-active);
  border-color: #fff;
  box-shadow: 0 0 15px var(--algo-active-glow);
  transform: scale(1.1);
  /*@3.GARC.274*/
}

/*@3.GARC.275*/
.algo-canvas {
  position: relative;
  width: 100%;
  min-height: 300px;
  background: var(--algo-canvas-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--algo-border);
  overflow: hidden;
  direction: ltr !important;
}

/*@3.GARC.276*/
@media (max-width: 640px) {
  .algo-widget {
    padding: 1rem;
  }

  .algo-toolbar {
    gap: 0.35rem;
  }

  .algo-toolbar button {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
  }

  .algo-toolbar .step-counter {
    font-size: 0.7rem;
  }

  .algo-bar {
    min-width: 22px;
  }

  .algo-bar-label {
    font-size: 0.65rem;
  }

  .algo-legend {
    gap: 0.5rem;
  }

  .algo-legend span {
    font-size: 0.65rem;
  }

  .algo-speed input[type="range"] {
    width: 70px;
  }

  .algo-explanation {
    font-size: 0.82rem;
    padding: 0.7rem;
  }

  .algo-canvas {
    min-height: 220px;
  }
}

@media (max-width: 400px) {
  .algo-toolbar {
    flex-direction: column;
    gap: 0.4rem;
  }

  .algo-toolbar .step-counter {
    margin-inline-start: 0;
  }
}

/*@3.GARC.277*/

/*@3.GARC.278*/
.algo-canvas *,
.algo-array *,
.algo-graph *,
.algo-node,
.algo-node *,
.algo-bar-label {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

/*@3.GARC.279*/
[dir="ltr"] .algo-canvas *,
[dir="ltr"] .algo-array *,
[dir="ltr"] .algo-graph *,
[dir="ltr"] .algo-node,
[dir="ltr"] .algo-node *,
[dir="ltr"] .algo-bar-label {
  font-family: 'Inter', 'Cairo', sans-serif !important;
}

/*@3.GARC.280*/
.algo-bar-label {
  font-size: 0.85rem !important;
  color: var(--algo-bar-label) !important;
  text-shadow: none !important;
}

/*@3.GARC.281*/

/*@3.GARC.282*/
[data-page="review"] .hero,
[data-page="quiz"] .hero {
  padding: 2.5rem 0 1.5rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 2rem;
}

/*@3.GARC.283*/
.module-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 800;
  background: var(--brand-glow);
  color: var(--brand-500);
  font-family: var(--display-font);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

:is([data-theme="dark"],[data-theme="dim"]) .module-chip {
  color: var(--brand-400);
}

/*@3.GARC.284*/
.essay-score-tracker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-lg);
}

.essay-score-tracker strong {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--brand-500);
  font-family: var(--display-font);
}

/*@3.GARC.285*/
.essay-item {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-inline-start: 4px solid var(--brand-500);
  box-shadow: 0 4px 6px -1px var(--shadow-base);
  transition: all 0.3s ease;
}

.essay-item[data-graded="1"] {
  border-inline-start-color: #10b981;
}

.essay-item[data-graded="0"] {
  border-inline-start-color: #ef4444;
}

.essay-item:hover {
  border-color: var(--border-hover);
}

.essay-item-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.essay-question-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: 1rem;
}

/*@3.GARC.286*/
.essay-textarea {
  width: 100%;
  min-height: 110px;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.75;
  resize: vertical;
  transition: border-color 0.2s;
}

.essay-textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

[dir="rtl"] .essay-textarea {
  direction: rtl;
  text-align: right;
}

[dir="ltr"] .essay-textarea {
  direction: ltr;
  text-align: left;
}

/*@3.GARC.287*/
.essay-reveal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--brand-500);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.essay-reveal-btn:hover {
  background: var(--brand-glow);
  border-color: var(--brand-500);
  transform: translateY(-1px);
}

:is([data-theme="dark"],[data-theme="dim"]) .essay-reveal-btn {
  color: var(--brand-400);
  border-color: var(--brand-400);
}

/*@3.GARC.288*/
.essay-answer-box {
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-inline-start: 3px solid var(--brand-500);
  animation: layerFade 0.3s ease;
  line-height: 1.8;
  color: var(--text-secondary);
}

.essay-answer-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-500);
  margin-bottom: 0.6rem;
  display: block;
}

:is([data-theme="dark"],[data-theme="dim"]) .essay-answer-box {
  border-inline-start-color: var(--brand-400);
}

/*@3.GARC.289*/
.essay-grade-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.essay-grade-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.essay-grade-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.essay-grade-btn--correct {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.essay-grade-btn--correct:hover {
  background: rgba(16, 185, 129, 0.25);
}

.essay-grade-btn--correct.active {
  background: #10b981;
  color: #fff;
}

.essay-grade-btn--wrong {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.essay-grade-btn--wrong:hover {
  background: rgba(239, 68, 68, 0.25);
}

.essay-grade-btn--wrong.active {
  background: #ef4444;
  color: #fff;
}

.essay-grade-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/*@3.GARC.290*/
[data-page="quiz"] .main-content {
  max-width: 800px;
}

/*@3.GARC.291*/
[data-page="quiz"] .quiz-card {
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

/*@3.GARC.292*/
.quiz-module-badge {
  display: inline-flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/*@3.GARC.293*/
.final-score-screen {
  text-align: center;
  padding: 3rem 2rem;
  animation: layerFade 0.4s ease;
}

.final-score-screen .score-display {
  font-size: 4.5rem;
  font-weight: 900;
  font-family: var(--display-font);
  color: var(--brand-500);
  margin: 0.5rem 0;
}

.final-score-screen .motivational-msg {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 1rem 0 2rem;
  line-height: 1.7;
}

.final-score-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/*@3.GARC.294*/
#formula-panel table th:nth-child(3),
#formula-panel table td:nth-child(3) {
  direction: ltr !important;
  text-align: left !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}

/*@3.GARC.295*/
.vault-type-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

/*@3.GARC.296*/
.best-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--brand-glow);
  border: 1px solid var(--brand-500);
  color: var(--brand-500);
  font-weight: 800;
  font-size: 0.9rem;
  font-family: var(--display-font);
}

:is([data-theme="dark"],[data-theme="dim"]) .best-score-badge {
  color: var(--brand-400);
  border-color: var(--brand-400);
}

/*@3.GARC.297*/
.concept-review-divider {
  margin: 2rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}

/*@3.GARC.298*/
@media (max-width: 640px) {
  .essay-grade-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .final-score-screen .score-display {
    font-size: 3rem;
  }

  .essay-item {
    padding: 1rem;
  }
}


/*@3.GARC.299*/

/*@3.GARC.300*/

/*@3.GARC.301*/
.comparison-wrapper,
.equations-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  background: var(--bg-card, var(--bg-surface));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2);
  margin: 1.5rem 0;
  padding: 0;
}

/*@3.GARC.302*/
.comparison-wrapper>.comparison-table {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/*@3.GARC.303*/
.concept-card>.comparison-table,
.depth-layer>.comparison-table,
.glass-card>.comparison-table,
.main-content>.comparison-table,
section>.comparison-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-card, var(--bg-surface));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2);
}

/*@3.GARC.304*/
.formula-block {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  background: var(--bg-card, var(--bg-surface));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2);
  margin: 1.5rem 0;
  padding: 1.5rem;
}

/*@3.GARC.305*/
.comparison-table td.td-good .content-target,
.comparison-table td.td-bad .content-target {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 600;
}

.comparison-table td.td-good .content-target {
  color: #10b981;
}

.comparison-table td.td-bad .content-target {
  color: #ef4444;
}

.comparison-table td.td-good .content-target::before {
  content: '\f00c';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9em;
}

.comparison-table td.td-bad .content-target::before {
  content: '\f00d';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9em;
}

/*@3.GARC.306*/
.module-intro h2 {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  flex-wrap: wrap;
}

/*@3.GARC.307*/
mjx-container {
  max-width: 100% !important;
  min-width: 0 !important;
  /*@3.GARC.308*/
  overflow-x: auto !important;
  overflow-y: hidden !important;
  box-sizing: border-box;
  padding-bottom: 0.25rem;
  /*@3.GARC.309*/
}

/*@3.GARC.482*/
mjx-utext[variant="-explicitFont"] { width: auto !important; }

/*@3.GARC.310*/
.comparison-table td.math-cell {
  text-align: start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  direction: ltr;
  /*@3.GARC.311*/
}

/*@3.GARC.312*/
mjx-container::-webkit-scrollbar {
  height: 4px;
}

mjx-container::-webkit-scrollbar-thumb {
  background-color: var(--brand-500);
  border-radius: 4px;
}

/*@3.GARC.313*/

/*@3.GARC.314*/
@media (max-width: 1024px) {
  .content-wrapper {
    display: block;
    width: 100%;
  }

  .main-content {
    max-width: 100%;
    padding: 2rem 1.5rem 5rem;
    margin: 0 auto;
  }
}

/*@3.GARC.315*/
@media (max-width: 640px) {
  .main-content {
    padding: 1rem 0.9rem 5rem;
  }

  .concept-card {
    padding: 1.5rem 1rem;
  }

  .objectives-card {
    padding: 1.25rem 1rem;
  }

  .professor-card {
    padding: 1.5rem 1rem;
  }
}

/*@3.GARC.316*/
@media (max-width: 640px) {
  .depth-tabs {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }

  .depth-tab {
    flex: 1 1 auto;
    min-width: 80px;
    text-align: center;
    padding: 0.45rem 0.6rem;
    font-size: 0.82rem;
  }
}

/*@3.GARC.317*/
@media (max-width: 768px) {

  .comparison-wrapper,
  .concept-card>.comparison-table,
  .depth-layer>.comparison-table,
  .glass-card>.comparison-table,
  .main-content>.comparison-table,
  section>.comparison-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
  }

  .comparison-table {
    min-width: 420px;
    font-size: 0.85rem;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 0.7rem 0.6rem;
    font-size: 0.85rem;
  }
}

/*@3.GARC.318*/
@media (max-width: 640px) {

  .quiz-card,
  [data-page="quiz"] .quiz-card {
    padding: 1.25rem 1rem;
    min-height: auto;
  }

  .quiz-question {
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
  }

  .mcq-option {
    padding: 0.75rem 0.9rem;
    font-size: 0.9rem;
  }

  .mcq-label {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }
}

/*@3.GARC.319*/
@media (max-width: 640px) {

  .gauntlet-status-bar,
  .gauntlet-header {
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
  }

  .gauntlet-counter {
    font-size: 0.78rem;
  }

  /*@3.GARC.320*/
  .quiz-module-filters,
  .gauntlet-filters {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .gauntlet-filters .tag,
  .quiz-filter-btn {
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
  }
}

/*@3.GARC.321*/
@media (max-width: 640px) {
  .tag-list {
    gap: 0.35rem;
  }

  .tag {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
  }

  .hero-eyebrow {
    font-size: 0.78rem;
    padding: 0.35rem 0.85rem;
  }

  .hero-description {
    font-size: 0.97rem;
  }
}

/*@3.GARC.322*/
@media (max-width: 640px) {
  .formula-block {
    padding: 1rem;
    font-size: 0.9rem;
  }

  #formula-panel table {
    min-width: 360px;
  }
}

/*@3.GARC.323*/
@media (max-width: 480px) {
  /*@3.GARC.324*/

  /*@3.GARC.325*/

  .flashcard-front .fc-term {
    font-size: 1.4rem;
  }

  .flashcard-back .fc-definition {
    font-size: 1rem;
  }

  /*@3.GARC.326*/
  .sm2-grades {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }

  .sm2-btn {
    padding: 0.55rem 0.5rem;
    font-size: 0.82rem;
    min-width: 0;
  }

  /*@3.GARC.327*/
  .sm2-btn:nth-child(4),
  .sm2-btn:nth-child(5) {
    grid-column: span 1;
  }

  .sm2-grades .sm2-btn:nth-child(4) {
    grid-column: 1 / 2;
  }

  .sm2-grades .sm2-btn:nth-child(5) {
    grid-column: 3 / 4;
  }
}

/*@3.GARC.328*/
@media (max-width: 640px) {
  .module-intro {
    padding: 1.25rem 0.9rem;
  }

  /*@3.GARC.329*/
  .vault-section {
    padding: 1.25rem 0.9rem;
  }

  .vault-entry {
    padding: 0.9rem;
  }
}

/*@3.GARC.330*/
@media (max-width: 640px) {
  .code-block pre {
    font-size: 0.78rem;
    padding: 0.9rem 1rem;
  }
}

/*@3.GARC.331*/
@media (max-width: 360px) {
  .header-inner {
    gap: 0.4rem;
    padding: 0 0.6rem;
  }

  .nav-btn--icon,
  .toggle-btn {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }
}

/*@3.GARC.332*/
@media (max-width: 768px) {
  .svg-diagram {
    padding: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .svg-diagram svg {
    min-width: 600px;
    min-height: 280px;
    height: auto;
  }
}

@media (max-width: 480px) {
  .svg-diagram svg {
    min-width: 520px;
    min-height: 260px;
  }
}

/*@3.GARC.333*/
.garden-scroll-top {
  position: fixed;
  bottom: calc(1.75rem + var(--sa-b));
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 12px var(--shadow-base);
}

/*@3.GARC.334*/
.garden-scroll-top {
  inset-inline-start: 1.75rem;
  inset-inline-end: auto;
  left: auto;
  right: auto;
}

.garden-scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.garden-scroll-top:hover {
  background: var(--brand-500);
  color: #fff;
  border-color: var(--brand-500);
  transform: translateY(-2px);
}

/*@3.GARC.335*/
@media (max-width: 1024px) {
  .garden-scroll-top {
    bottom: calc(5.5rem + var(--sa-b));
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .garden-scroll-top {
    inset-inline-start: 1rem;
    inset-inline-end: auto;
    left: auto;
    right: auto;
  }
}

/*@3.GARC.336*/
.main-content {
  min-width: 0;
}

.main-content>* {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.concept-card,
.glass-card,
.professor-card,
.vault-section,
.quiz-section,
.flashcard-section {
  min-width: 0;
  overflow: hidden;
  /*@3.GARC.337*/
}

/*@3.GARC.338*/
.concept-card .depth-layer,
.concept-card .code-block,
.concept-card .formula-block,
.concept-card .svg-diagram,
.concept-card .comparison-wrapper,
.concept-card>.comparison-table {
  overflow-x: auto;
}

/*@3.GARC.339*/
table {
  max-width: 100%;
}

/*@3.GARC.340*/

/*@3.GARC.341*/
.ai-explain-btn {
  position: absolute;
  top: 1rem;
  z-index: 10;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid transparent;
  /*@3.GARC.342*/
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-400, #a78bfa);
  font-size: 0.82rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  /*@3.GARC.343*/
  cursor: pointer;
  transition: all 0.25s ease;
  opacity: 0.65;
  /*@3.GARC.344*/
  padding: 0;
}

/*@3.GARC.345*/
body.garden-selbar-open .ai-explain-btn { opacity: 0; pointer-events: none; }

/*@3.GARC.346*/
.flashcard-section .ai-explain-btn,
.professor-card .ai-explain-btn {
  display: none !important;
}

/*@3.GARC.347*/
.accordion-item .ai-explain-btn {
  display: none;
  /*@3.GARC.348*/
  top: auto;
  bottom: 0.75rem;
  /*@3.GARC.349*/
  z-index: 10;
}

/*@3.GARC.350*/
.accordion-item.open .ai-explain-btn {
  display: flex;
}

/*@3.GARC.351*/
[dir="rtl"] .accordion-item .ai-explain-btn {
  left: 1rem;
  right: auto;
}

/*@3.GARC.352*/
[dir="ltr"] .accordion-item .ai-explain-btn {
  right: 1rem;
  left: auto;
}

[dir="rtl"] .ai-explain-btn {
  left: 1rem;
  right: auto;
}

[dir="ltr"] .ai-explain-btn {
  right: 1rem;
  left: auto;
}

.ai-explain-btn:hover {
  opacity: 1;
  background-color: var(--bg-card);
  border-color: var(--brand-500);
  transform: scale(1.18) rotate(15deg);
  box-shadow: 0 0 14px var(--brand-glow), 0 0 4px rgba(139, 92, 246, 0.4);
}

/*@3.GARC.353*/
.ai-explain-btn:hover {
  background-size: 18px 18px;
}

/*@3.GARC.354*/
.ai-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, var(--sa-t)) max(1rem, var(--sa-r)) max(1rem, var(--sa-b)) max(1rem, var(--sa-l));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ai-modal-overlay.open {
  opacity: 1;
}

.ai-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s ease;
  overflow: hidden;
}

.ai-modal-overlay.open .ai-modal {
  transform: translateY(0) scale(1);
}

.ai-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.ai-modal-header h3 {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/*@3.GARC.355*/
.ai-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--brand-400, #a78bfa);
  font-size: 0.82rem;
  flex-shrink: 0;
}

/*@3.GARC.356*/
.ai-action-btn--regen {
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  color: var(--brand-400);
  border-color: color-mix(in srgb, var(--brand-500) 30%, transparent);
}
.ai-action-btn--regen:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand-500) 22%, transparent);
  border-color: var(--brand-400);
}
.ai-action-btn--regen:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ai-regen-spin {
  display: inline-block;
  animation: ai-spin 0.8s linear infinite;
}
@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

/*@3.GARC.357*/
.ai-intent-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.ai-chip-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.ai-chip-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-inline-end: 0.15rem;
  white-space: nowrap;
}

.ai-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
/*@3.GARC.358*/
.ai-chip i { font-size: 0.78em; opacity: 0.7; }
.ai-chip.active i { opacity: 1; }

.ai-chip:hover {
  border-color: var(--brand-500);
  color: var(--brand-400);
  transform: translateY(-1px);
}

.ai-chip.active {
  background: color-mix(in srgb, var(--brand-500) 15%, transparent);
  border-color: var(--brand-500);
  color: var(--brand-400);
}

.ai-q-row {
  display: flex;
  gap: 0.5rem;
}

.ai-q-input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.ai-q-input:focus {
  outline: none;
  border-color: var(--brand-500);
}

.ai-q-input::placeholder {
  color: var(--text-muted);
}

.ai-q-send {
  padding: 0.45rem 1rem;
  border-radius: var(--radius-md);
  border: none;
  background: linear-gradient(135deg, var(--brand-400, #a78bfa), var(--brand-600, #7c3aed));
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.ai-q-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--brand-glow, rgba(124, 58, 237, 0.3));
}

@media (max-width: 640px) {
  .ai-intent-bar {
    padding: 0.6rem 0.9rem;
  }

  .ai-chip {
    font-size: 0.7rem;
    padding: 0.24rem 0.6rem;
  }

  .ai-chip-label {
    width: 100%;
    margin-bottom: 0.1rem;
  }
}

/*@3.GARC.359*/
.ai-answer-holder {
  margin-bottom: 0.75rem;
}

.ai-user-q {
  max-width: 85%;
  margin: 0.25rem 0 0.75rem auto;
  padding: 0.5rem 0.9rem;
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-500) 28%, transparent);
  border-radius: var(--radius-lg);
  border-end-inline-end-radius: 4px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  width: fit-content;
}

[dir="ltr"] .ai-user-q {
  margin: 0.25rem auto 0.75rem 0;
}

/*@3.GARC.360*/
.ai-result.ai-streaming {
  white-space: pre-wrap;
}

.ai-result.ai-streaming::after {
  content: '▍';
  color: var(--brand-400, #a78bfa);
  animation: ai-cursor-blink 0.9s steps(2) infinite;
}

@keyframes ai-cursor-blink {
  50% { opacity: 0; }
}

/*@3.GARC.361*/
.ai-composer {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ai-feedback-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 28px;
}

.ai-fb-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.ai-fb-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.ai-fb-btn:hover {
  border-color: var(--brand-500);
  transform: translateY(-1px) scale(1.08);
}

.ai-fb-thanks {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.ai-followup-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.ai-followup-row .ai-q-input {
  flex: 1;
  min-width: 140px;
}

.ai-confused-btn {
  padding: 0.42rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.ai-confused-btn:hover {
  border-color: #f59e0b;
  color: #f59e0b;
  transform: translateY(-1px);
}

.ai-fu-limit {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/*@3.GARC.362*/
.ai-select-bubble {
  position: absolute;
  z-index: 999;
  padding: 0.38rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--brand-500) 45%, transparent);
  background: var(--bg-surface);
  color: var(--brand-400, #a78bfa);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 10px var(--brand-glow, rgba(139, 92, 246, 0.2));
  transition: transform 0.15s ease;
  animation: stepFadeIn 0.2s ease;
}

.ai-select-bubble:hover {
  transform: translateY(-2px);
  border-color: var(--brand-500);
}

/*@3.GARC.363*/
.ai-fresh-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--brand-400);
  padding: 0.2rem 0.6rem;
  background: color-mix(in srgb, var(--brand-500) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-500) 25%, transparent);
  border-radius: var(--radius-pill);
  margin-bottom: 0.75rem;
}

.ai-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.ai-modal-close:hover {
  background: var(--brand-500);
  color: #fff;
}

.ai-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

/*@3.GARC.364*/
.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0;
  color: var(--text-muted);
}

/*@3.GARC.459*/
.ai-wait {
  inline-size: 44px;
  block-size: 44px;
}
.ai-wait svg {
  inline-size: 100%;
  block-size: 100%;
  transform: rotate(-90deg);
  animation: aiTurn 3s linear infinite;
}
.ai-wait circle {
  fill: none;
  stroke-width: 3;
}
.ai-wait-t { stroke: var(--border-color); }
.ai-wait-b {
  stroke: var(--brand-500, var(--st-accent, #a78bfa));
  stroke-linecap: round;
  stroke-dasharray: 119.4;
  stroke-dashoffset: 119.4;
  animation: aiFill 60s cubic-bezier(.35, .5, .5, 1) forwards;
}

@keyframes aiTurn {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}
@keyframes aiFill {
  to { stroke-dashoffset: 11.9; }
}

.ai-loading-msg { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ai-wait svg { animation: none; }
}

/*@3.GARC.365*/
.ai-result {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--text-secondary);
}

.ai-result p {
  margin-bottom: 0.75rem;
}

.ai-result strong {
  color: var(--text-primary);
}

.ai-result code {
  background: var(--bg-elevated);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
}

.ai-result ul,
.ai-result ol {
  margin: 0 0 0.75rem;
  padding-inline-start: 1.4rem;
}

.ai-result li {
  margin-bottom: 0.35rem;
}

.ai-result h4 {
  color: var(--text-primary);
  font-size: 1rem;
  margin: 0.9rem 0 0.4rem;
}

.ai-result pre {
  direction: ltr;
  text-align: left;
  background: var(--bg-elevated);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin-bottom: 0.75rem;
}

.ai-result pre code {
  background: none;
  padding: 0;
  font-size: 0.82em;
}

/*@3.GARC.366*/
.ai-error {
  text-align: center;
  padding: 1.5rem 0;
  color: var(--text-muted);
}

.ai-error-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.ai-error-msg {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/*@3.GARC.367*/
.ai-modal-footer {
  border-top: 1px solid var(--border-color);
  padding: 0.75rem 1.25rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.ai-action-btn {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-family: inherit;
}

.ai-action-btn:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
}

/*@3.GARC.368*/
.ai-action-btn { overflow: hidden; }
.ai-action-btn .ai-btn-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-svc-ico { flex-shrink: 0; }
/*@3.GARC.369*/
.ai-action-btn:hover .ai-svc-ico { color: inherit; }

.ai-action-btn--primary {
  background: var(--brand-500);
  color: #fff;
  border-color: var(--brand-500);
}

.ai-action-btn--primary:hover {
  background: var(--brand-600);
  color: #fff;
}

/*@3.GARC.454*/
.ai-ico,
.pl-ai-answer .ai-ico {
  display: inline-block;
  inline-size: 1em;
  margin-inline-end: .3em;
  font-size: .92em;
  opacity: .72;
  vertical-align: -.05em;
}
h4 > .ai-ico:first-child,
li > .ai-ico:first-child,
p > .ai-ico:first-child { opacity: .85; }

@media (max-width: 640px) {
  .ai-modal {
    max-height: 90vh;
  }

  /*@3.GARC.371*/
  .ai-modal-footer {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .ai-action-btn {
    min-width: 0;
    flex: 1 1 0;
    padding: 0.5rem 0.4rem;
    justify-content: center;
  }

  /*@3.GARC.372*/
  .ai-action-btn:not(.ai-svc-btn) .ai-btn-label {
    display: none;
  }

  .ai-explain-btn {
    width: 28px;
    height: 28px;
    background-size: 14px 14px;
  }
}

/*@3.GARC.373*/

/*@3.GARC.374*/

/*@3.GARC.375*/
.sm2-rgs-pill-4 .sm2-rgs-dot {
  background: #a855f7;
}

.sm2-rhow-4 {
  border-color: #a855f7;
}

.sm2-rhow-4 .sm2-rhow-g {
  background: #a855f7;
}

/*@3.GARC.376*/
.fc-util-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.75rem;
}

.fc-util-btn {
  font-size: .78rem;
  font-weight: 600;
  padding: .3rem .9rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  letter-spacing: 0.01em;
}

.fc-util-btn:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
  background: var(--brand-glow);
}

.fc-undo-btn {
  /*@3.GARC.377*/
  border-color: var(--border-color);
  color: var(--text-secondary);
  background: transparent;
  box-shadow: none;
  font-size: 0.78rem;
  padding: .3rem .9rem;
}

.fc-undo-btn:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
  background: var(--brand-glow);
  filter: none;
  transform: none;
}

.fc-bury-btn {
  border-color: var(--warning, #f59e0b);
  color: var(--warning, #f59e0b);
}

.fc-bury-btn:hover {
  background: rgba(245, 158, 11, .1);
}

/*@3.GARC.378*/
.fc-leech-badge {
  position: absolute;
  top: .6rem;
  inset-inline-end: .6rem;
  font-size: .7rem;
  font-weight: 800;
  background: rgba(239, 68, 68, .15);
  color: #ef4444;
  border: 1.5px solid #ef4444;
  border-radius: var(--radius-pill);
  padding: .15rem .5rem;
  pointer-events: none;
  z-index: 2;
}

/*@3.GARC.379*/

/*@3.GARC.380*/
.fc-review-badge {
  font-size: .72rem;
  font-weight: 800;
  color: var(--brand-400);
  background: var(--brand-glow);
  border: 1.5px solid var(--brand-500);
  border-radius: var(--radius-pill);
  padding: .18rem .65rem;
  white-space: nowrap;
}

/*@3.GARC.381*/
.fc-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin-top: .9rem;
}

.fc-filter-btn {
  font-size: .72rem;
  font-weight: 700;
  padding: .22rem .7rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-subtle);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
}

.fc-filter-btn:hover,
.fc-filter-btn.active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}

/*@3.GARC.382*/
.sm2-rpill--red {
  background: rgba(239, 68, 68, .1);
  border: 1.5px solid rgba(239, 68, 68, .4);
}

.sm2-rpill--red .sm2-rpill-n {
  color: #ef4444;
}

/*@3.GARC.383*/
.sm2-heatmap {
  display: grid;
  grid-template-columns: repeat(84, 1fr);
  gap: 2px;
  margin: .5rem 0 .3rem;
}

.sm2-hm-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
}

.sm2-hm-i0 {
  background: var(--surface-3, rgba(255, 255, 255, .07));
}

.sm2-hm-i1 {
  background: rgba(99, 102, 241, .3);
}

.sm2-hm-i2 {
  background: rgba(99, 102, 241, .5);
}

.sm2-hm-i3 {
  background: rgba(99, 102, 241, .75);
}

.sm2-hm-i4 {
  background: rgba(99, 102, 241, 1);
}

.sm2-hm-legend {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: .65rem;
  color: var(--text-muted);
  margin-top: .3rem;
}

.sm2-hm-legend span {
  padding: 0 .2rem;
}

.sm2-hm-legend .sm2-hm-cell {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}


/*@3.GARC.384*/
.fc-toolbar-bury {
  height: 32px;
  padding: 0 0.8rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(245, 158, 11, .5);
  background: rgba(245, 158, 11, .08);
  color: #d97706;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s;
  white-space: nowrap;
}

/*@3.GARC.385*/
.fc-toolbar-bury { display: inline-flex; align-items: center; gap: .3rem; }

.fc-toolbar-bury:hover {
  background: rgba(245, 158, 11, .18);
  border-color: #f59e0b;
  color: #b45309;
  transform: scale(1.03);
}

:is([data-theme="dark"],[data-theme="dim"]) .fc-toolbar-bury {
  color: #fbbf24;
}

:is([data-theme="dark"],[data-theme="dim"]) .fc-toolbar-bury:hover {
  color: #fde68a;
}

/*@3.GARC.386*/
.fc-3d-btn {
  height: 30px;
  padding: 0 0.65rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 900;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  transition: all 0.2s;
  user-select: none;
}

.fc-3d-btn::before {
  content: '\f1b2';                       /*@3.GARC.387*/
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.72rem;
}

/*@3.GARC.388*/
@media (min-width: 481px) {
  .fc-3d-btn {
    display: none;
  }
}

/*@3.GARC.389*/
.fc-3d-btn:not(.active) {
  opacity: 0.55;
}

/*@3.GARC.390*/
.fc-3d-btn.active {
  background: var(--brand-glow);
  border-color: var(--brand-500);
  color: var(--brand-500);
  opacity: 1;
  box-shadow: 0 0 0 2px var(--brand-glow);
}

.fc-3d-btn:active {
  transform: scale(0.95);
}

/*@3.GARC.391*/
@media (max-width: 480px) {
  .mobile-3d-off .flashcard-card {
    transform-style: flat !important;
    -webkit-transform-style: flat !important;
    will-change: auto;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
  }

  .mobile-3d-off .flashcard-card.flipped {
    transform: none !important;
    -webkit-transform: none !important;
  }

  .mobile-3d-off .flashcard-face {
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    transition: opacity 0.22s ease;
    transform: none !important;
    -webkit-transform: none !important;
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
  }

  .mobile-3d-off .flashcard-front {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-3d-off .flashcard-back {
    opacity: 0;
    pointer-events: none;
  }

  .mobile-3d-off .flashcard-card.flipped .flashcard-front {
    opacity: 0;
    pointer-events: none;
  }

  .mobile-3d-off .flashcard-card.flipped .flashcard-back {
    opacity: 1;
    pointer-events: auto;
  }

  /*@3.GARC.392*/
  .mobile-3d-off .fc-exit-away  > .flashcard-face,
  .mobile-3d-off .fc-exit-slide > .flashcard-face,
  .mobile-3d-off .fc-exit-back  > .flashcard-face { animation: none !important; }

  .mobile-3d-off .fc-exit-away,
  .mobile-3d-off .fc-exit-slide,
  .mobile-3d-off .fc-exit-back { animation: fcFlatOut .42s ease-in forwards; }

  @keyframes fcFlatOut { from { opacity: 1; } to { opacity: 0; } }

  /*@3.GARC.393*/
}

/*@3.GARC.394*/

/*@3.GARC.395*/
.fc-ret-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  margin-bottom: 0.6rem;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.fc-ret-badge:hover {
  opacity: 1;
}

/*@3.GARC.396*/
.fc-ret--high {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/*@3.GARC.397*/
.fc-ret--mid {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/*@3.GARC.398*/
.fc-ret--low {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/*@3.GARC.399*/
.fc-daily-limit-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.fc-dl-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.fc-dl-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.25rem 0.5rem;
}

.fc-dl-btn {
  background: transparent;
  border: none;
  color: var(--brand-500);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0 0.3rem;
  line-height: 1;
  transition: color 0.15s, transform 0.1s;
}

.fc-dl-btn:hover {
  color: var(--brand-400);
  transform: scale(1.2);
}

.fc-dl-btn:active {
  transform: scale(0.9);
}

.fc-dl-value {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 2rem;
  text-align: center;
}

/*@3.GARC.400*/
.sm2-ease-warning {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 0.75rem;
  padding: 0.75rem 0.9rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-primary);
}

.sm2-ease-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.sm2-ease-warning strong {
  display: block;
  color: #ef4444;
  font-size: 0.82rem;
  margin-bottom: 0.25rem;
}

.sm2-ease-warning p {
  margin: 0;
  color: var(--text-secondary);
}

/*@3.GARC.401*/

/*@3.GARC.402*/
.svg-diagram text.svg-lang-ar,
.svg-diagram text.svg-lang-en {
  display: inline;
}

/*@3.GARC.403*/
[dir="rtl"] .svg-diagram text.svg-lang-en {
  display: none;
}

/*@3.GARC.404*/
[dir="ltr"] .svg-diagram text.svg-lang-ar {
  display: none;
}

/*@3.GARC.405*/
.locked-card {
  pointer-events: none !important; /*@3.GARC.406*/
  opacity: 0.45 !important; /*@3.GARC.407*/
}

/*@3.GARC.408*/
.locked-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 12px,
    rgba(128, 128, 128, 0.1) 12px,
    rgba(128, 128, 128, 0.1) 13px
  );
}

/*@3.GARC.409*/
.locked-card::before {
  opacity: 0 !important;
} /*@3.GARC.410*/


/*@3.GARC.411*/
.locked-card .subject-card-icon,
.locked-card .module-card-number {
  background: rgba(128, 128, 128, 0.15) !important; /*@3.GARC.412*/
  color: #8b8b8b !important; /*@3.GARC.413*/
  background-image: none !important; /*@3.GARC.414*/
  box-shadow: none !important; /*@3.GARC.415*/
  border: 1px solid rgba(128, 128, 128, 0.2) !important; /*@3.GARC.416*/
}

/*@3.GARC.417*/
@media (max-width: 768px) {
  .hub-section-header .section-count {
    display: none;
  }
}

/*@3.GARC.418*/

/*@3.GARC.419*/
[dir="ltr"] .kbd-tooltip-panel {
  right: auto;
  left: 0;
}
[dir="ltr"] .kbd-tooltip-panel::after {
  right: auto;
  left: 8px;
}

/*@3.GARC.420*/
@media (max-width: 640px) {
  [dir="ltr"] .kbd-tooltip-panel {
    right: auto;
    left: 0;
  }
  [dir="ltr"] .kbd-tooltip-panel::after {
    right: auto;
    left: 8px;
  }
}

/*@3.GARC.421*/
.module-filter-btn.tag--accent {
  box-shadow: 0 0 0 2px var(--brand-400), 0 0 8px var(--brand-glow);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}
.module-filter-btn {
  transition: all 0.2s ease;
  cursor: pointer;
}
/*@3.GARC.422*/
#mcq-selected-modules-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 0.25rem;
  min-height: 1em;
}

/*@3.GARC.423*/
#essay-module-toolbar {
  transition: opacity 0.2s ease;
}
#essay-module-toolbar .tag.tag--accent {
  box-shadow: 0 0 0 2px var(--brand-400);
}
/*@3.GARC.424*/

/*@3.GARC.425*/
@media (max-width: 640px) {
  .hub-quote { white-space: normal !important; }
}
.subject-hub { overflow-x: clip; }

/*@3.GARC.426*/
.fc-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 0.8rem;
}
.fc-nav-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-edge);
  background: var(--card-base);
  color: var(--text-secondary);
  box-shadow: var(--card-shadow);
  transition: color .18s var(--skin-ease, ease), border-color .18s var(--skin-ease, ease), transform .18s var(--skin-ease, ease);
}
.fc-nav-btn:hover:not(:disabled) {
  color: var(--brand-500, var(--st-accent, #a78bfa));
  border-color: var(--brand-500, var(--st-accent, #a78bfa));
  transform: translateY(-1px);
}
.fc-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.fc-nav-pos {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
  font-size: .78rem; font-weight: 700;
  color: var(--text-muted);
  min-width: 4.5rem; text-align: center;
}

/*@3.GARC.427*/
.fc-undo-mini { position: relative; }
.fc-undo-mini:disabled { opacity: .3; cursor: not-allowed; }
.fc-undo-mini > b {
  position: absolute;
  inset-block-start: -4px; inset-inline-end: -4px;
  min-width: 15px; height: 15px;
  border-radius: var(--radius-pill);
  background: var(--brand-500, var(--st-accent, #a78bfa));
  color: #fff;
  font-size: .58rem; font-weight: 800; line-height: 15px;
  font-variant-numeric: tabular-nums;
}

/*@3.GARC.428*/
@media (max-width: 560px) {
  /*@3.GARC.429*/
  /*@3.GARC.463*/
  .flashcard-scene {
    --card-h: 340px; margin-block-end: 1.75rem; --g-x: 3px; --g-y: 5px;
    margin-inline: calc(var(--g-x) * 3 + 3px);
    margin-block-end: calc(1.75rem + var(--g-y) * 3);
  }
  .flashcard-face { padding: 1.1rem 1.15rem 1rem; }
  .sm2-btn { min-width: 0; flex: 1 1 5.6rem; padding: .6rem .5rem; font-size: .78rem; justify-content: center; }
  .sm2-grades { gap: .4rem; }
  .fc-nav-btn { width: 46px; height: 46px; }
}

/*@3.GARC.430*/

/*@3.GARC.431*/
:root[data-mod-theme] {
  --bg-body: var(--mt-bg);
  --bg-surface: var(--mt-panel);
  --bg-card: var(--mt-panel);
  --bg-elevated: var(--mt-raise);
  --border-color: var(--mt-border);
  --border-hover: var(--mt-border-2);
  --text-primary: var(--mt-fg);
  --text-secondary: var(--mt-fg-2);
  --text-muted: var(--mt-dim);
  --code-bg: var(--mt-bg);
  --scrollbar-track: var(--mt-panel);
  --shadow-base: var(--mt-shadow);

  /*@3.GARC.432*/
  --syn-keyword: var(--mt-key);
  --syn-string: var(--mt-str);
  --syn-number: var(--mt-num);
  --syn-comment: var(--mt-com);
  --syn-function: var(--mt-fn);
  --syn-operator: var(--mt-op);
  --syn-type: var(--mt-typ);
  --syn-constant: var(--mt-lit);
  --syn-param: var(--mt-fg);
  --syn-line-num: var(--mt-dim);

  /*@3.GARC.433*/

  /*@3.GARC.434*/
  background-color: var(--mt-bg);
  /*@3.GARC.435*/
  color-scheme: var(--mt-scheme, dark);
}

/*@3.GARC.436*/

/*@3.GARC.437*/

/*@3.GARC.438*/
:root[data-mod-theme="paper"], .mt-pal-paper {
  --mt-bg: #f6f0e4; --mt-panel: #fbf7ee; --mt-raise: #efe8d8;
  --mt-border: #ddd4bf; --mt-border-2: #c8bda4;
  --mt-fg: #2b2620; --mt-fg-2: #4a4238; --mt-dim: #6b6152;
  --mt-shadow: rgba(80, 60, 30, .10); --mt-scheme: light;
  --mt-key: #9a3b2f; --mt-str: #4a6b2a; --mt-num: #8a5a00;
  --mt-com: #857a67; --mt-fn: #2f5d7c; --mt-op: #7a4a2a;
  --mt-typ: #55508f; --mt-lit: #8a5a00;
}
/*@3.GARC.439*/
:root[data-mod-theme="github"], .mt-pal-github {
  --mt-bg: #ffffff; --mt-panel: #f6f8fa; --mt-raise: #eaeef2;
  --mt-border: #d0d7de; --mt-border-2: #afb8c1;
  --mt-fg: #1f2328; --mt-fg-2: #3d444d; --mt-dim: #59636e;
  --mt-shadow: rgba(31, 35, 40, .10); --mt-scheme: light;
  --mt-key: #cf222e; --mt-str: #0a3069; --mt-num: #0550ae;
  --mt-com: #6e7781; --mt-fn: #8250df; --mt-op: #0550ae;
  --mt-typ: #953800; --mt-lit: #0550ae;
}
/*@3.GARC.440*/
:root[data-mod-theme="solar"], .mt-pal-solar {
  --mt-bg: #fdf6e3; --mt-panel: #f4edda; --mt-raise: #eee8d5;
  --mt-border: #ded7c3; --mt-border-2: #c9c2ae;
  --mt-fg: #073642; --mt-fg-2: #3f5661; --mt-dim: #50666b;
  --mt-shadow: rgba(0, 43, 54, .10); --mt-scheme: light;
  --mt-key: #6b7d00; --mt-str: #0f7068; --mt-num: #d33682;
  --mt-com: #657b83; --mt-fn: #1d6fa5; --mt-op: #8a6800;
  --mt-typ: #565ba8; --mt-lit: #d33682;
}

/*@3.GARC.441*/

/*@3.GARC.442*/
:root[data-mod-theme="onedark"], .mt-pal-onedark {
  --mt-bg: #282c34; --mt-panel: #21252b; --mt-raise: #2c313a;
  --mt-border: #3e4451; --mt-border-2: #4f5666;
  --mt-fg: #dcdfe4; --mt-fg-2: #b6bdca; --mt-dim: #9aa2b1;
  --mt-shadow: rgba(0, 0, 0, .45); --mt-scheme: dark;
  --mt-key: #c678dd; --mt-str: #98c379; --mt-num: #d19a66;
  --mt-com: #8d98a8; --mt-fn: #61afef; --mt-op: #56b6c2;
  --mt-typ: #e5c07b; --mt-lit: #d19a66;
}
/*@3.GARC.443*/
:root[data-mod-theme="dracula"], .mt-pal-dracula {
  --mt-bg: #282a36; --mt-panel: #2f313f; --mt-raise: #3a3d4d;
  --mt-border: #44475a; --mt-border-2: #5a5d72;
  --mt-fg: #f8f8f2; --mt-fg-2: #d8d8d2; --mt-dim: #a7b0cf;
  --mt-shadow: rgba(0, 0, 0, .45); --mt-scheme: dark;
  --mt-key: #ff79c6; --mt-str: #f1fa8c; --mt-num: #bd93f9;
  --mt-com: #8f9ac0; --mt-fn: #50fa7b; --mt-op: #ff79c6;
  --mt-typ: #8be9fd; --mt-lit: #bd93f9;
}
/*@3.GARC.444*/
:root[data-mod-theme="nord"], .mt-pal-nord {
  --mt-bg: #2e3440; --mt-panel: #333b4a; --mt-raise: #3b4252;
  --mt-border: #4c566a; --mt-border-2: #5d6b83;
  --mt-fg: #eceff4; --mt-fg-2: #d8dee9; --mt-dim: #a9b4c6;
  --mt-shadow: rgba(0, 0, 0, .40); --mt-scheme: dark;
  --mt-key: #81a1c1; --mt-str: #a3be8c; --mt-num: #b48ead;
  --mt-com: #9aa5b6; --mt-fn: #88c0d0; --mt-op: #81a1c1;
  --mt-typ: #8fbcbb; --mt-lit: #b48ead;
}
/*@3.GARC.445*/
:root[data-mod-theme="gruvbox"], .mt-pal-gruvbox {
  --mt-bg: #282828; --mt-panel: #32302f; --mt-raise: #3c3836;
  --mt-border: #504945; --mt-border-2: #665c54;
  --mt-fg: #ebdbb2; --mt-fg-2: #d5c4a1; --mt-dim: #b6a692;
  --mt-shadow: rgba(0, 0, 0, .45); --mt-scheme: dark;
  --mt-key: #fb4934; --mt-str: #b8bb26; --mt-num: #d3869b;
  --mt-com: #a89984; --mt-fn: #8ec07c; --mt-op: #fe8019;
  --mt-typ: #fabd2f; --mt-lit: #d3869b;
}

/*@3.GARC.446*/

/*@3.GARC.447*/
:root[data-mod-theme="oled"], .mt-pal-oled {
  --mt-bg: #000000; --mt-panel: #0a0a0a; --mt-raise: #161616;
  --mt-border: #262626; --mt-border-2: #3a3a3a;
  --mt-fg: #e8e8e8; --mt-fg-2: #bdbdbd; --mt-dim: #8c8c8c;
  --mt-shadow: rgba(0, 0, 0, .70); --mt-scheme: dark;
  --mt-key: #5fd7ff; --mt-str: #98e06a; --mt-num: #ffb86c;
  --mt-com: #8a8a8a; --mt-fn: #ffd75f; --mt-op: #ff79c6;
  --mt-typ: #87d7ff; --mt-lit: #ff87af;
}
/*@3.GARC.448*/
:root[data-mod-theme="tokyo"], .mt-pal-tokyo {
  --mt-bg: #16161e; --mt-panel: #1a1b26; --mt-raise: #24283b;
  --mt-border: #2f3549; --mt-border-2: #414868;
  --mt-fg: #c0caf5; --mt-fg-2: #a9b1d6; --mt-dim: #8b93b8;
  --mt-shadow: rgba(0, 0, 0, .55); --mt-scheme: dark;
  --mt-key: #bb9af7; --mt-str: #9ece6a; --mt-num: #ff9e64;
  --mt-com: #8b93b8; --mt-fn: #7aa2f7; --mt-op: #89ddff;
  --mt-typ: #2ac3de; --mt-lit: #ff9e64;
}
/*@3.GARC.449*/
:root[data-mod-theme="amber"], .mt-pal-amber {
  --mt-bg: #0d0b06; --mt-panel: #14110a; --mt-raise: #1e1910;
  --mt-border: #2e2617; --mt-border-2: #443722;
  --mt-fg: #ffcf7a; --mt-fg-2: #e0b566; --mt-dim: #b28c4a;
  --mt-shadow: rgba(0, 0, 0, .70); --mt-scheme: dark;
  --mt-key: #ffb347; --mt-str: #d9c07a; --mt-num: #ffd28a;
  --mt-com: #a8834a; --mt-fn: #ffc45c; --mt-op: #ff9d3f;
  --mt-typ: #e8b968; --mt-lit: #ffd28a;
}

/*@3.GARC.461*/
:root[data-mod-theme="latte"], .mt-pal-latte {
  --mt-bg: #eff1f5; --mt-panel: #e6e9ef; --mt-raise: #dce0e8;
  --mt-border: #ccd0da; --mt-border-2: #bcc0cc;
  --mt-fg: #4c4f69; --mt-fg-2: #5c5f77; --mt-dim: #5f6271;
  --mt-shadow: rgba(76, 79, 105, .12); --mt-scheme: light;
  --mt-key: #8839ef; --mt-str: #3f9d2a; --mt-num: #ea5c0a;
  --mt-com: #858996; --mt-fn: #1e66f5; --mt-op: #0493cc;
  --mt-typ: #c07a19; --mt-lit: #ca66b0;
}
:root[data-mod-theme="everlight"], .mt-pal-everlight {
  --mt-bg: #fdf6e3; --mt-panel: #f4f0d9; --mt-raise: #efebd4;
  --mt-border: #ddd8be; --mt-border-2: #c9c4aa;
  --mt-fg: #4a555c; --mt-fg-2: #5c6a72; --mt-dim: #5e6c65;
  --mt-shadow: rgba(92, 106, 114, .12); --mt-scheme: light;
  --mt-key: #f85552; --mt-str: #839601; --mt-num: #d564b2;
  --mt-com: #878f82; --mt-fn: #3a94c5; --mt-op: #db7022;
  --mt-typ: #b88400; --mt-lit: #339f76;
}
:root[data-mod-theme="mocha"], .mt-pal-mocha {
  --mt-bg: #1e1e2e; --mt-panel: #181825; --mt-raise: #313244;
  --mt-border: #313244; --mt-border-2: #45475a;
  --mt-fg: #cdd6f4; --mt-fg-2: #bac2de; --mt-dim: #959bb3;
  --mt-shadow: rgba(0, 0, 0, .55); --mt-scheme: dark;
  --mt-key: #cba6f7; --mt-str: #a6e3a1; --mt-num: #fab387;
  --mt-com: #7f849c; --mt-fn: #89b4fa; --mt-op: #89dceb;
  --mt-typ: #f9e2af; --mt-lit: #f5c2e7;
}
:root[data-mod-theme="rosepine"], .mt-pal-rosepine {
  --mt-bg: #191724; --mt-panel: #1f1d2e; --mt-raise: #26233a;
  --mt-border: #2a273f; --mt-border-2: #403d52;
  --mt-fg: #e0def4; --mt-fg-2: #cdcbe4; --mt-dim: #908caa;
  --mt-shadow: rgba(0, 0, 0, .55); --mt-scheme: dark;
  --mt-key: #c4a7e7; --mt-str: #f6c177; --mt-num: #ebbcba;
  --mt-com: #6e6a86; --mt-fn: #9ccfd8; --mt-op: #eb6f92;
  --mt-typ: #56949f; --mt-lit: #ebbcba;
}
:root[data-mod-theme="everforest"], .mt-pal-everforest {
  --mt-bg: #2d353b; --mt-panel: #272e33; --mt-raise: #343f44;
  --mt-border: #3d484d; --mt-border-2: #4f585e;
  --mt-fg: #d3c6aa; --mt-fg-2: #c2bba0; --mt-dim: #a0aca3;
  --mt-shadow: rgba(0, 0, 0, .45); --mt-scheme: dark;
  --mt-key: #e67e80; --mt-str: #a7c080; --mt-num: #d699b6;
  --mt-com: #859289; --mt-fn: #7fbbb3; --mt-op: #e69875;
  --mt-typ: #dbbc7f; --mt-lit: #d699b6;
}
:root[data-mod-theme="nightowl"], .mt-pal-nightowl {
  --mt-bg: #011627; --mt-panel: #01111d; --mt-raise: #0b2942;
  --mt-border: #1d3b53; --mt-border-2: #2c4f6e;
  --mt-fg: #d6deeb; --mt-fg-2: #c5cee0; --mt-dim: #8badc1;
  --mt-shadow: rgba(0, 0, 0, .65); --mt-scheme: dark;
  --mt-key: #c792ea; --mt-str: #ecc48d; --mt-num: #f78c6c;
  --mt-com: #7893a4; --mt-fn: #82aaff; --mt-op: #7fdbca;
  --mt-typ: #ffcb8b; --mt-lit: #f78c6c;
}
:root[data-mod-theme="ayu"], .mt-pal-ayu {
  --mt-bg: #0b0e14; --mt-panel: #0d1017; --mt-raise: #131721;
  --mt-border: #1f2430; --mt-border-2: #2d3444;
  --mt-fg: #bfbdb6; --mt-fg-2: #a8a69f; --mt-dim: #8b93a1;
  --mt-shadow: rgba(0, 0, 0, .65); --mt-scheme: dark;
  --mt-key: #ff8f40; --mt-str: #aad94c; --mt-num: #d2a6ff;
  --mt-com: #7b8290; --mt-fn: #ffb454; --mt-op: #f29668;
  --mt-typ: #59c2ff; --mt-lit: #d2a6ff;
}
:root[data-mod-theme="carbon"], .mt-pal-carbon {
  --mt-bg: #161616; --mt-panel: #121212; --mt-raise: #262626;
  --mt-border: #333333; --mt-border-2: #474747;
  --mt-fg: #f4f4f4; --mt-fg-2: #c6c6c6; --mt-dim: #a8a8a8;
  --mt-shadow: rgba(0, 0, 0, .65); --mt-scheme: dark;
  --mt-key: #be95ff; --mt-str: #6fdc8c; --mt-num: #ff832b;
  --mt-com: #8d8d8d; --mt-fn: #78a9ff; --mt-op: #3ddbd9;
  --mt-typ: #f1c21b; --mt-lit: #ff7eb6;
}

/*@3.GARC.450*/
/*@3.GARC.455*/
:root[data-mod-font] body,
:root[data-mod-font] .main-content,
:root[data-mod-font] .card-content {
  font-family: var(--mt-font), "Cairo", sans-serif;
}
:root[data-mod-font] :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--mt-font), "Cairo", sans-serif;
}
:root[data-mod-font] :is(code, pre, kbd, samp, .gsf-code, .ai-result code, .ai-result pre) {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
/*@3.GARC.457*/
:root[data-mod-font] :is(.g-header, .g-tail, .g-menu, .g-more, .bottom-nav, .mt-dlg, .gtl-toast),
:root[data-mod-font] :is(.g-header, .g-tail, .g-menu, .g-more, .bottom-nav, .mt-dlg, .gtl-toast)
  :is(h1, h2, h3, h4, h5, h6) {
  font-family: "Cairo", "Inter", sans-serif;
}
/*@3.GARC.456*/
.mt-body { padding: .7rem 1.15rem 1.2rem; display: grid; gap: 1.35rem; align-content: start; }
.mt-sec { min-inline-size: 0; }
.mt-sec > .gsf-card-h { margin-block-end: .6rem; }
.mt-hnote {
  min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .74rem; font-weight: 600; color: var(--text-muted);
}

/*@3.GARC.480*/
@media (min-width: 641px) {
  .gsf.mt-dlg {
    inline-size: min(25rem, calc(100vw - 1.5rem));
    max-block-size: none; block-size: calc(100dvh - 5.25rem);
    margin-block: 4.5rem .75rem; margin-inline: auto .75rem;
  }
}
@media (max-width: 640px) {
  .gsf.mt-dlg { max-block-size: 74vh; }
}
.gsf.mt-dlg::backdrop { background: rgba(9, 7, 18, .18); }

.mt-dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.mt-dtile {
  display: flex; flex-direction: column; min-inline-size: 0;
  padding: .35rem .35rem .5rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  background: transparent; color: var(--text-secondary);
  font-family: inherit; text-align: start; cursor: pointer;
  transition: border-color .18s, color .18s;
}
.mt-dtile:hover { border-color: var(--text-muted); color: var(--text-primary); }
.mt-dtile:focus-visible { outline: 2px solid var(--gsf-tint); outline-offset: 2px; }
.mt-dtile.is-on { border-color: var(--st-ok); color: var(--text-primary); }
.mt-dname { display: flex; align-items: center; gap: .3rem; margin: .45rem .15rem 0; font-size: .8rem; font-weight: 800; }
.mt-dnote { margin: .1rem .15rem 0; font-size: .66rem; line-height: 1.45; color: var(--text-muted); }

.mt-pv {
  --pbg: var(--bg-body); --ppanel: var(--bg-card); --pfg: var(--text-primary); --pa: var(--brand-500, var(--gsf-tint));
  display: block; position: relative; overflow: hidden;
  block-size: 4rem; padding: .55rem;
  border-radius: var(--radius-md); background: var(--pbg);
}
.mt-pv :is(i, b, u) { display: block; text-decoration: none; font-style: normal; }
.mm-card { position: relative; display: flex; flex-direction: column; gap: 5px; block-size: 100%; padding: 7px; background: var(--ppanel); }
.mm-r12 { border-radius: 9px; } .mm-r6 { border-radius: 5px; } .mm-r3 { border-radius: 3px; }
.mm-sh { box-shadow: 0 5px 10px -6px rgba(0, 0, 0, .5); }
.mm-l { block-size: 3px; border-radius: 2px; background: color-mix(in oklab, var(--pfg) 32%, transparent); }
.mm-l.mm-ink { background: color-mix(in oklab, var(--pfg) 70%, transparent); }
.mm-w60 { inline-size: 60%; } .mm-w70 { inline-size: 70%; } .mm-w80 { inline-size: 80%; } .mm-w90 { inline-size: 90%; }
.mm-sq { inline-size: 12px; block-size: 12px; border-radius: 3px; background: var(--pa); }
.mm-room {
  display: flex; flex-direction: column; gap: 6px; block-size: calc(100% + 1.1rem); margin: -.55rem; padding: .55rem;
  background: radial-gradient(70% 70% at 50% 25%, rgba(255, 206, 140, .3), transparent 70%), color-mix(in oklab, var(--pbg) 75%, #000);
}
.mm-card.mm-lit { block-size: auto; border-radius: 7px; box-shadow: 0 0 18px -4px rgba(255, 206, 140, .45); }
.mm-card.mm-dim { block-size: auto; border-radius: 7px; opacity: .35; }
.mm-stamp { inline-size: 17px; block-size: 17px; border-radius: 50%; transform: rotate(-9deg); box-shadow: inset 0 0 0 1.4px var(--pa), inset 0 0 0 3px var(--ppanel), inset 0 0 0 3.8px var(--pa); }
.mm-vine {
  position: absolute; inset-block: .55rem; inset-inline-end: 8px; inline-size: 10px;
  display: flex; flex-direction: column; justify-content: space-around; align-items: center;
  border-inline-start: 1.5px solid color-mix(in oklab, var(--st-ok) 55%, var(--text-muted));
}
.mm-vine > b { inline-size: 7px; block-size: 7px; margin-inline-start: -4px; border-radius: 0 7px; background: color-mix(in oklab, var(--st-ok) 55%, var(--text-muted)); }
.mm-vine > .mm-bud { border-radius: 50%; background: var(--pa); }
.mm-vine > .mm-ghost { background: none; border: 1px solid color-mix(in oklab, var(--pfg) 30%, transparent); }
.mm-cornell { flex-direction: row; gap: 0; padding: 0; overflow: hidden; }
.mm-cue { display: flex; flex-direction: column; gap: 5px; inline-size: 34%; padding: 7px 5px; background: color-mix(in oklab, var(--pfg) 7%, var(--ppanel)); border-inline-end: 1.5px solid var(--pa); }
.mm-notes { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; background: repeating-linear-gradient(to bottom, transparent 0 8px, color-mix(in oklab, var(--pfg) 12%, transparent) 8px 9px); }
.mm-num { inline-size: 10px; block-size: 6px; border-radius: 1px; background: var(--pa); }
.mm-jbar { display: flex; gap: 2px; margin-block-end: 3px; }
.mm-jbar > b { flex: 1; block-size: 3px; border-radius: 2px; background: color-mix(in oklab, var(--pfg) 20%, transparent); }
.mm-jbar > .mm-d { background: var(--st-ok); }
.mm-jbar > .mm-cur { background: var(--pa); }
.mm-jnext { block-size: 7px; margin-block-start: auto; border-radius: 3px; background: color-mix(in oklab, var(--pa) 25%, transparent); }
.mm-rc { padding-block-start: 0; }
.mm-rc > .mm-q { margin: 0 -7px 3px; padding: 5px 7px; background: color-mix(in oklab, var(--pa) 14%, transparent); }
.mm-blur { filter: blur(1.5px); }
.mm-rate { display: flex; gap: 3px; margin-block-start: auto; }
.mm-rate > b { inline-size: 9px; block-size: 5px; border-radius: 3px; }
.mm-t1 { background: var(--st-ok); } .mm-t3 { background: var(--st-warn); } .mm-t5 { background: var(--st-danger); }
.mm-wbox { display: flex; align-items: center; gap: 2px; margin-block-start: auto; padding: 4px 5px; border-radius: 4px; border: 1px solid color-mix(in oklab, var(--pa) 55%, transparent); }
.mm-wbox > .mm-l { flex: none; }
.mm-caret { inline-size: 1.5px; block-size: 8px; background: var(--pa); }
.mm-shg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; block-size: 100%; }
.mm-shg > .mm-card { padding: 5px; gap: 4px; }
.mm-prm > .mm-q { display: flex; flex-direction: column; gap: 4px; padding: 4px 5px; border-radius: 4px; border: 1px solid color-mix(in oklab, var(--pfg) 18%, transparent); }
.mm-prm > .mm-back { border-style: dashed; }
.mm-g { display: flex; gap: 3px; }
.mm-g > b { inline-size: 12px; block-size: 5px; border-radius: 3px; }

.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .5rem; }
.mt-tile {
  display: flex; flex-direction: column; gap: .4rem; min-inline-size: 0;
  padding: .45rem .45rem .5rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  background: transparent; color: var(--text-secondary);
  font-family: inherit; font-size: .78rem; font-weight: 700; text-align: start;
  cursor: pointer; transition: border-color .18s, color .18s;
}
.mt-tile:hover { border-color: var(--text-muted); color: var(--text-primary); }
.mt-tile:focus-visible { outline: 2px solid var(--gsf-tint); outline-offset: 2px; }
.mt-tile.is-on { border-color: var(--st-ok); color: var(--text-primary); }
.mt-tname { display: flex; align-items: center; gap: .3rem; min-inline-size: 0; }
.mt-tname > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*@3.GARC.451*/
:is(.mt-tile.is-on .mt-tname, .mt-dtile.is-on .mt-dname)::after {
  content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  margin-inline-start: auto; font-size: .68rem; color: var(--st-ok);
}
/*@3.GARC.452*/
.mt-prev {
  display: flex; align-items: flex-end; gap: 2px;
  block-size: 2.6rem; padding: .4rem .45rem;
  border-radius: var(--radius-md); border: 1px solid var(--mt-border, var(--border-color));
  background: var(--mt-bg, var(--bg-card));
}
/*@3.GARC.458*/
.mt-prev > i { flex: 1 1 0; border-radius: 2px; background: var(--mt-dim, var(--text-muted)); }
.mt-prev > i:nth-child(1) { block-size: 60%; background: var(--mt-key, var(--syn-keyword)); }
.mt-prev > i:nth-child(2) { block-size: 92%; background: var(--mt-str, var(--syn-string)); }
.mt-prev > i:nth-child(3) { block-size: 42%; background: var(--mt-fn, var(--syn-function)); }
.mt-prev > i:nth-child(4) { block-size: 74%; background: var(--mt-typ, var(--syn-type)); }
.mt-fam { grid-column: 1 / -1; margin-block: .35rem 0; font-size: .7rem; font-weight: 800; color: var(--text-muted); }
.mt-fam:first-child { margin-block-start: 0; }

.mt-seg { display: inline-flex; gap: 2px; margin-inline-start: auto; padding: 2px; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.mt-seg > button {
  padding: .15rem .65rem; border: 0; border-radius: var(--radius-sm, 6px);
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer;
}
.mt-seg > button:hover { color: var(--text-primary); }
.mt-seg > button:focus-visible { outline: 2px solid var(--gsf-tint); outline-offset: 1px; }
.mt-seg > button[aria-pressed="true"] { background: var(--bg-elevated); color: var(--text-primary); }
.mt-fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.mt-ftile {
  display: flex; flex-direction: column; align-items: center; gap: .1rem; min-inline-size: 0;
  padding: .5rem .25rem .45rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  background: transparent; color: var(--text-secondary);
  font-family: inherit; cursor: pointer; transition: border-color .18s, color .18s;
}
.mt-ftile:hover { border-color: var(--text-muted); color: var(--text-primary); }
.mt-ftile:focus-visible { outline: 2px solid var(--gsf-tint); outline-offset: 2px; }
.mt-ftile.is-on { border-color: var(--st-ok); color: var(--text-primary); }
.mt-glyph { max-inline-size: 100%; overflow: hidden; white-space: nowrap; font-size: 1.3rem; line-height: 1.4; color: var(--text-primary); }
.mt-fname { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; font-weight: 700; }
.mt-ftile { position: relative; }
.mt-ftile.is-on::after {
  content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; inset-block-start: .3rem; inset-inline-end: .35rem;
  font-size: .58rem; color: var(--st-ok);
}

@media (prefers-reduced-motion: reduce) {
  .mt-tile, .mt-dtile, .mt-ftile { transition: none; }
}
/*@3.GARC.453*/

/*@3.GARC.467*/
:root[data-mod-font] {
  --display-font: var(--mt-font), "Cairo", sans-serif;
}
/*@3.GARC.468*/
:root[data-mod-font] :is(button, input, select, textarea) {
  font-family: var(--mt-font), "Cairo", sans-serif;
}
/*@3.GARC.469*/
:root[data-mod-font] .flashcard-front .fc-term,
:root[data-mod-font] .sm2-btn,
:root[data-mod-font] .accordion-trigger {
  font-family: var(--mt-font), "Cairo", sans-serif;
}
/*@3.GARC.470*/
:root[data-mod-font] :is(.g-header, .g-tail, .g-menu, .g-more, .bottom-nav, .mt-dlg, .gtl-toast)
  :is(button, input, select, textarea, .font-size-indicator) {
  font-family: "Cairo", "Inter", sans-serif;
}

/*@3.GARC.476*/
.hub-note {
  --hn-tint: var(--brand-500, var(--gsf-tint));
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-block: 1.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border-color);
  border-inline-start: 3px solid color-mix(in oklab, var(--hn-tint) 48%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--hn-tint) 12%, transparent);
  color: var(--text-secondary);
}
.hub-note > i {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--hn-tint);
}
.hub-note h3 {
  margin: 0 0 .4rem;
  font-size: 1.05rem;
  color: var(--text-primary);
}
.hub-note p { margin: 0; line-height: 1.85; }
.hub-note p + p { margin-block-start: .6rem; }
.hub-note ul {
  margin: .6rem 0 0;
  padding-inline-start: 1.15rem;
  line-height: 1.95;
}
@media (max-width: 640px) {
  .hub-note { flex-direction: column; gap: .6rem; padding: 1.1rem; }
}