/* ==========================================================================
   FPT Study Companion · Modern SaaS Bento UI & Tactile Neo-Glassmorphism
   Standards: Linear / Vercel / Raycast precision + Duolingo Gamification
   ========================================================================== */

/* 1. Global Surface Hierarchy & Typography */
body {
  font-family: var(--font-body);
  background-color: var(--bg-canvas);
  background-image: var(--bg-dot-pattern);
  background-size: var(--bg-dot-size);
  color: var(--text-primary);
}

.main {
  margin-left: var(--sidebar-width);
  min-height: 100svh;
  background-color: var(--bg-canvas);
  background-image: var(--bg-dot-pattern);
  background-size: var(--bg-dot-size);
}

h1, h2, h3, .brand, .profile-card h2 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  font-weight: 750;
  color: var(--text-primary);
}
h1 { font-size: 28px; line-height: 1.28; font-weight: 800; }
h2 { font-size: 16px; line-height: 1.45; font-weight: 750; }
h3 { font-size: 14px; line-height: 1.5; font-weight: 700; }

p { color: var(--text-secondary); }
.muted, small.muted { color: var(--text-muted); }

/* Tabular Monospace Numbers */
.stat-value,
.score-chip,
.result-score,
.xp-total strong,
.daily-xp strong,
.effort-xp-total,
.topbar-xp-trigger strong,
.bar-value,
.bar-label,
.lesson-count-chip,
.nav-count,
.profile-numbers strong,
.practice-clock [data-time],
.task-progress-pill,
#sync-status,
.today {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* 2. Tactile Controls, Buttons & Inputs */
button, a, input, select, textarea, summary, .task, .choice, .subject-card, .effort-mini-card {
  transition:
    background-color var(--motion) var(--ease),
    border-color var(--motion) var(--ease),
    box-shadow var(--motion) var(--ease),
    color var(--motion) var(--ease),
    transform var(--motion) var(--ease);
}

button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.45);
  outline-offset: 2px;
}

.btn {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline);
  min-height: 40px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 650;
  background: var(--surface-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs), var(--inner-glow);
}
.btn:hover:not(:disabled) {
  background: var(--surface-subtle);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.1), var(--inner-glow);
}
.btn:active:not(:disabled),
button.subject-card:active:not(:disabled),
.choice:active {
  transform: scale(0.98);
}
.btn-primary {
  color: #FFFFFF;
  border-color: #1D4ED8;
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
  box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-primary:hover:not(:disabled) {
  color: #FFFFFF;
  background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%);
  border-color: #1E40AF;
  box-shadow: 0 12px 26px -6px rgba(37, 99, 235, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-sm {
  min-height: 34px;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 10px;
}
.btn-ghost {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  color: var(--brand-blue);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface-blue);
  border-color: transparent;
  box-shadow: none;
}
.btn:disabled {
  transform: none;
  box-shadow: none;
}
.icon-button {
  border-radius: 11px;
}
.icon-button:hover {
  transform: translateY(-1px);
}

input, select, textarea {
  background: var(--surface-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  min-height: 42px;
  padding: 10px 13px;
  color: var(--text-primary);
  font-size: 13px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
}
input:hover, select:hover, textarea:hover {
  border-color: var(--border-strong);
  background: var(--surface-primary);
}
input:focus, select:focus, textarea:focus {
  background: var(--surface-primary);
  border-color: var(--brand-blue);
  outline: none;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-muted);
  color: var(--text-muted);
  box-shadow: none;
}
textarea { line-height: 1.65; resize: vertical; }
.form-field { margin-bottom: 16px; }
.form-field > span, .filters label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.5;
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--brand-blue);
  box-shadow: none;
}

/* 3. Bento Panels & Multi-Layered Elevation */
.panel, .stat, .daily-panel, .profile-card, .shop-card {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.panel-header {
  padding: 20px 22px 16px;
  align-items: flex-start;
}
.panel-header h2 {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--text-primary);
}
.panel-header p {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.55;
}
.panel-body {
  padding: 0 22px 22px;
}

/* Stats Bento Row */
.stats { gap: 18px; margin-bottom: 24px; }
.stat {
  padding: 20px 22px;
  transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
}
.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.stat-top { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.stat-value { font-size: 30px; margin-top: 10px; color: var(--text-primary); }
.stat-icon { border-radius: 12px; width: 34px; height: 34px; }
.stat-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* Semantic Pills */
.pill {
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 650;
  border: 1px solid var(--border-hairline);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}
.pill.blue { border-color: #DBEAFE; background: #EFF6FF; color: #1D4ED8; }
.pill.green { border-color: #A7F3D0; background: #ECFDF5; color: #047857; }
.pill.orange { border-color: #FDE68A; background: #FFFBEB; color: #B45309; }
.pill.red { border-color: #FECDD3; background: #FFF1F2; color: #BE123C; }

.page-heading { margin-bottom: 24px; align-items: center; }
.page-heading h1 { font-size: 27px; }
.page-heading p { font-size: 13px; margin-top: 6px; line-height: 1.65; color: var(--text-secondary); }

/* Segmented Tabs */
.tabs {
  gap: 4px;
  padding: 4px;
  margin: 0 20px 16px;
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  background: var(--surface-muted);
  overflow: visible;
  flex-wrap: wrap;
}
.tab {
  padding: 7px 12px;
  min-height: 32px;
  border: 0;
  border-radius: 9px;
  font-size: 11.5px;
  line-height: 1.4;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  color: var(--text-muted);
}
.tab.active {
  border: 0;
  background: var(--surface-primary);
  color: var(--brand-blue);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), inset 0 1px 0 #FFFFFF;
}
.tab:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.6);
}

.workspace-tabs {
  gap: 5px;
  padding: 5px;
  border-radius: 14px;
  border: 1px solid var(--border-hairline);
  background: var(--surface-muted);
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.workspace-tabs a {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  border: 0;
  background: transparent;
}
.workspace-tabs a[aria-current="page"] {
  background: var(--surface-primary);
  color: var(--brand-blue);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), inset 0 1px 0 #FFFFFF;
  font-weight: 700;
}

/* Data Tables */
.table-wrap { border-radius: 0 0 22px 22px; }
table { font-size: 12.5px; }
th {
  background: var(--surface-subtle);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-hairline);
  padding: 12px 18px;
}
td {
  padding: 14px 18px;
  border-bottom-color: var(--border-hairline);
  line-height: 1.6;
  color: var(--text-secondary);
}
td strong { color: var(--text-primary); }
tbody tr:hover { background: rgba(248, 250, 252, 0.85); }
.filters { gap: 14px; }
.filters input, .filters select { margin-top: 6px; background: var(--surface-primary); }
.setup-step { padding: 16px 0; }
.step-number { border-radius: 10px; background: var(--surface-blue); color: var(--brand-blue); font-family: var(--font-numbers); }
.insight { background: #F0F6FF; border: 1px solid #DBEAFE; border-radius: 14px; padding: 16px; }
.notice { border-radius: 12px; font-size: 12px; line-height: 1.7; padding: 13px 16px; }
.notice.neutral { background: #F8FAFC; border: 1px solid var(--border-hairline); border-left: 3px solid var(--brand-blue); color: var(--text-secondary); }
.empty { padding: 32px 22px; }
.empty h3 { font-size: 14px; color: var(--text-primary); }
.empty p { max-width: 340px; margin: 8px auto 0; color: var(--text-muted); font-size: 12px; line-height: 1.75; }

/* 4. Obsidian Navy Sidebar (.sidebar#app-navigation) */
.sidebar {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(37, 99, 235, 0.18) 0%, transparent 52%),
    radial-gradient(ellipse at 100% 100%, rgba(16, 185, 129, 0.06) 0%, transparent 45%),
    var(--brand-navy);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 16px 20px;
  box-shadow: 4px 0 24px -8px rgba(11, 17, 32, 0.35);
}
.brand-header {
  background: transparent;
  padding: 22px 14px 20px;
  margin: 0 -2px 18px;
  border-bottom: 1px solid var(--brand-navy-border);
}
.brand-logo { height: 46px; width: 156px; margin: 0 auto; }
.brand-header .brand {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 10px;
  text-align: center;
  color: #FFFFFF;
}
.sidebar .workspace {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  padding: 13px 14px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sidebar .workspace-mark {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: #93C5FD;
  border-radius: 11px;
}
.sidebar .workspace-mark .icon { width: 20px; height: 20px; }
.sidebar .workspace-copy { min-width: 0; }
.sidebar .workspace strong {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 750;
  color: #FFFFFF;
}
.sidebar .workspace .muted { font-size: 11px; color: #94A3B8; margin-top: 2px; }
.sidebar .workspace:has(.workspace-context) { display: block; background: none; border: 0; padding: 0; box-shadow: none; }
.workspace-caption { font-size: 9.5px; letter-spacing: 0.1em; margin-bottom: 8px; color: #94A3B8; font-weight: 700; }
.context-picker {
  padding: 13px 12px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75), rgba(15, 23, 42, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.context-picker .context-copy small { font-size: 10.5px; color: #94A3B8; }
.context-icon { background: rgba(37, 99, 235, 0.18); border: 1px solid rgba(96, 165, 250, 0.25); border-radius: 10px; color: #93C5FD; }
.context-hint { color: #64748B; }

.nav-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.1em;
  color: #64748B;
  margin: 0 12px 10px;
}
.nav-item {
  min-height: 44px;
  margin: 4px 0;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 550;
  gap: 12px;
  color: #CBD5E1;
}
.nav-item .icon { width: 18px; height: 18px; stroke-width: 1.85; }
.nav-item:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.06);
  transform: translateX(2px);
}
.nav-item.active {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  border-color: rgba(96, 165, 250, 0.4);
  box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  font-weight: 650;
}
.nav-count {
  padding: 2px 7px;
  min-width: 22px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}
.sidebar-bottom { padding-top: 24px; }
.profile { padding-top: 16px; border-top: 1px solid var(--brand-navy-border); gap: 10px; }
.profile-name { font-size: 12px; font-weight: 650; color: #F8FAFC; }
.profile .muted { font-size: 10.5px; color: #94A3B8; }
.sidebar .avatar { width: 35px; height: 35px; font-size: 11px; color: #DBEAFE; background: #1E293B; border: 1px solid rgba(255, 255, 255, 0.12); }
.profile .icon-button { min-width: 32px; min-height: 32px; padding: 6px; color: #94A3B8; }
.profile .icon-button:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.profile .icon-button .icon { width: 17px; height: 17px; }

/* 5. Compact 60px Frosted Glass Topbar (.topbar) */
.topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  isolation: isolate;
  height: var(--topbar-height, 60px);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--border-hairline);
  padding: 0 28px;
  gap: 16px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
}
.breadcrumb span { color: var(--border-strong); margin: 0; }
.breadcrumb strong { font-weight: 700; color: var(--text-primary); }
.top-tools { display: flex; align-items: center; gap: 16px; }
.top-tools .avatar {
  width: 34px;
  height: 34px;
  font-size: 11px;
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
  box-shadow: inset 0 1px 0 #FFFFFF;
}
.today, .sync-button {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.today .icon { width: 15px; height: 15px; color: var(--text-muted); }
.sync-button {
  border-radius: 9px;
  padding: 6px 10px;
  gap: 6px;
  border: 1px solid transparent;
}
.sync-button:hover {
  color: var(--brand-blue);
  background: var(--surface-blue);
  border-color: #DBEAFE;
}

.content {
  padding: 24px 28px 24px;
  max-width: var(--content-width, 1560px);
  margin: 0 auto;
}
.footer {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border-hairline);
  gap: 20px;
}
.footer .icon { width: 13px; height: 13px; }

/* 6. Login & Authentication Screen (.login-shell / .login-screen)
   Synchronized 100% with Dashboard Design Tokens */
.login-shell,
.login-screen {
  max-width: 1520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(410px, 0.95fr);
  gap: 24px;
  padding: 20px;
  min-height: 100svh;
  background-color: var(--bg-canvas);
  background-image: var(--bg-dot-pattern);
  background-size: var(--bg-dot-size);
}
body:has(.login-shell),
body:has(.login-screen) {
  background-color: var(--bg-canvas);
  background-image: var(--bg-dot-pattern);
  background-size: var(--bg-dot-size);
}
.login-story {
  position: sticky;
  top: 20px;
  height: calc(100svh - 40px);
  min-height: 720px;
  padding: 32px 38px 26px;
  border-radius: 28px;
  border: 1px solid rgba(191, 219, 254, 0.85);
  background:
    radial-gradient(ellipse at 10% 10%, rgba(59, 130, 246, 0.14), transparent 46%),
    radial-gradient(ellipse at 95% 25%, rgba(243, 112, 33, 0.1), transparent 42%),
    radial-gradient(ellipse at 15% 92%, rgba(16, 185, 129, 0.1), transparent 55%),
    linear-gradient(150deg, #EDF5FF 0%, #F5F9FF 50%, #E6F0FF 100%);
  box-shadow: var(--shadow-card);
}
.login-story::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(37, 99, 235, 0.1) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.45), transparent 72%);
}
.login-brand-row { position: relative; z-index: 1; gap: 18px; }
.login-brand-row img { width: 134px; height: 43px; }
.login-brand-row .brand {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  border-left: 1px solid var(--border-strong);
  padding-left: 18px;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  white-space: nowrap;
}
.login-story-copy { position: relative; margin: auto 0; padding: 26px 0 12px; }
.login-story .auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 12px;
  border: 1px solid #BFDBFE;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-xs);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-blue);
}
.status-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}
.login-story h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.1vw, 46px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}
.login-story h1 > span {
  background: linear-gradient(100deg, #1D4ED8 0%, #2563EB 55%, #059669 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.login-story p {
  font-size: 13.5px;
  line-height: 1.75;
  max-width: 430px;
  margin: 16px 0 0;
  color: var(--text-secondary);
}
.login-story-footer {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 14px;
}
.login-story-footer .icon { width: 15px; height: 15px; color: var(--brand-blue); }

.login-story .mascot-login { position: relative; margin: 18px auto 0; padding: 0; max-width: 520px; width: 100%; }
.login-story .mascot-login::before, .login-story .mascot-login::after { content: none; }
.mascot-stage { height: 286px; position: relative; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.mascot-aura { position: absolute; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, rgba(147, 197, 253, 0.42), rgba(191, 219, 254, 0.1) 62%, transparent 74%); filter: blur(8px); }
.mascot-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.75); pointer-events: none; }
.orbit-one { width: 258px; height: 258px; background: rgba(255, 255, 255, 0.2); transform: rotate(-18deg); }
.orbit-two { width: 292px; height: 176px; transform: rotate(-24deg); border-color: rgba(147, 197, 253, 0.45); }
.mascot-ground { position: absolute; bottom: 8px; width: 180px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse, rgba(30, 64, 175, 0.18), transparent 70%); }
.login-story .mascot-login .mascot-viewport { position: relative; z-index: 2; height: 265px; width: auto; margin: 0; max-width: 100%; overflow: hidden; filter: drop-shadow(0 12px 12px rgba(15, 23, 42, 0.08)); animation: mascot-breathe 7s ease-in-out infinite; }
.stage-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  max-width: 220px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.14), inset 0 1px 0 #FFFFFF;
}
.stage-card-study { left: 0; top: 32px; transform: rotate(-3deg); }
.stage-card-progress { right: 0; bottom: 26px; transform: rotate(3deg); }
.stage-card-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #EFF6FF; color: var(--brand-blue); flex-shrink: 0; }
.stage-card-progress .stage-card-icon { background: #FFFBEB; color: #D97706; }
.stage-card-icon .icon { width: 16px; height: 16px; }
.stage-card small { display: block; font-size: 8px; letter-spacing: 0.06em; font-weight: 800; color: var(--brand-blue); line-height: 1.5; }
.stage-card strong { display: block; font-size: 11px; font-weight: 700; color: var(--text-primary); margin-top: 2px; line-height: 1.4; }
.stage-card-progress small { color: #B45309; }
.stage-spark { position: absolute; color: #F59E0B; z-index: 3; }
.spark-one { right: 55px; top: 35px; font-size: 22px; }
.spark-two { left: 60px; bottom: 37px; font-size: 18px; color: #3B82F6; }
.login-story .mascot-login .illustration-caption { position: relative; margin-top: 12px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); gap: 8px; }
.caption-mark { width: 22px; height: 22px; background: #FFFFFF; box-shadow: var(--shadow-xs); color: var(--brand-green); }
.caption-mark .icon { width: 12px; height: 12px; }

/* Login Form Card (Neo-Glassmorphic Bento Panel) */
.login-side { padding: 24px 32px; position: relative; }
.login-form {
  width: 430px;
  max-width: 100%;
  position: relative;
  padding: 32px 34px;
  border-radius: 26px;
  border: 1px solid var(--border-hairline);
  background: var(--surface-glass-strong);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-card);
}
.language-control { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 11px; color: var(--text-muted); margin: 0 0 20px; }
.language-control select { font-size: 11px; min-height: 32px; padding: 4px 10px; width: auto; border-radius: 9px; background: var(--surface-primary); border-color: var(--border-hairline); }
.auth-intro-icon { width: 44px; height: 44px; border: 1px solid #DBEAFE; border-radius: 14px; background: #EFF6FF; color: var(--brand-blue); margin-bottom: 16px; box-shadow: inset 0 1px 0 #FFFFFF; }
.auth-intro-icon .icon { width: 22px; height: 22px; }
.login-form h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); }
.login-form > p { font-size: 13px; color: var(--text-secondary); margin: 8px 0 14px; }
.auth-domain { font-size: 10.5px; font-weight: 600; border: 1px solid #DBEAFE; background: #EFF6FF; color: #1D4ED8; padding: 5px 10px; border-radius: 8px; margin-bottom: 20px; }
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  background: var(--surface-muted);
  padding: 5px;
  border: 1px solid var(--border-hairline);
  border-radius: 13px;
  margin-bottom: 20px;
}
.auth-tabs button {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  padding: 9px 12px;
  min-height: 38px;
  font-size: 12.5px;
  font-weight: 600;
}
.auth-tabs button.active {
  background: var(--surface-primary);
  color: var(--brand-blue);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), inset 0 1px 0 #FFFFFF;
  font-weight: 700;
}
.auth-tabs button:hover:not(.active) { color: var(--text-primary); }
.google-button {
  border-radius: 12px;
  min-height: 46px;
  border: 1px solid var(--border-hairline);
  background: var(--surface-primary);
  font-size: 13px;
  font-weight: 650;
  color: var(--text-primary);
  box-shadow: var(--shadow-xs), var(--inner-glow);
}
.google-button:hover {
  background: var(--surface-subtle);
  border-color: var(--border-strong);
  box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}
.google-button:active { transform: scale(0.98); }
.google-mark { width: 18px; height: 18px; }
.auth-divider { font-size: 11px; color: var(--text-muted); margin: 18px 0; }
.auth-divider::before, .auth-divider::after { background: var(--border-hairline); }
.login-form .form-field { margin-bottom: 16px; }
.login-form .form-field > span { font-size: 12px; font-weight: 650; color: var(--text-secondary); margin-bottom: 6px; }
.login-form input {
  min-height: 45px;
  background: var(--surface-subtle);
  border-color: var(--border-hairline);
  border-radius: 12px;
  font-size: 13px;
  padding: 11px 14px;
}
.login-form input::placeholder { color: #94A3B8; }
.login-form input:focus {
  background: var(--surface-primary);
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.login-form .btn-primary { min-height: 46px; margin-top: 4px; font-size: 13px; border-radius: 12px; }
.password-control { position: relative; }
.password-control input { padding-right: 64px; }
.password-toggle {
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: 6px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 650;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
}
.password-toggle:hover { background: var(--surface-blue); color: var(--brand-blue); }
.auth-help-link { display: block; margin: 12px 0 0 auto; border: 0; background: none; color: var(--text-muted); font-size: 11.5px; font-weight: 500; padding: 0; }
.auth-help-link:hover { color: var(--brand-blue); text-decoration: underline; }
.auth-foot { font-size: 12px !important; color: var(--text-muted) !important; margin: 18px 0 0 !important; }
.auth-link { font-weight: 700; color: var(--brand-blue); }
.demo-box {
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  margin-top: 20px;
  background: var(--surface-subtle);
  overflow: hidden;
}
.demo-box summary { padding: 12px 15px; font-size: 11.5px; color: var(--text-secondary); gap: 9px; font-weight: 650; }
.demo-box summary .icon { width: 16px; height: 16px; color: var(--brand-blue); }
.demo-box > div { padding: 0 14px 14px; }
.demo-options { gap: 8px; }
.demo-options .btn { border-radius: 10px; min-height: 46px; padding: 8px; font-size: 11px; background: var(--surface-primary); }
.demo-options .icon { width: 16px; height: 16px; }
.demo-box p { font-size: 10.5px; line-height: 1.7; color: var(--text-muted); margin-top: 10px; font-family: var(--font-numbers); }
.login-bottom { font-size: 11px; color: var(--text-muted); margin-top: 18px; gap: 6px; }
.login-bottom .icon { width: 13px; height: 13px; color: var(--brand-green); }

/* 7. Student Overview: Hero Banner, 7-Subject Bento Strip & 3-Column Workspace */
.reference-overview .welcome-banner {
  min-height: 158px;
  padding: 26px 30px;
  margin-bottom: 24px;
  align-items: center;
  gap: 24px;
  isolation: isolate;
  border-radius: 24px;
  border: 1px solid rgba(191, 219, 254, 0.9);
  background:
    radial-gradient(ellipse at 82% 35%, rgba(255, 255, 255, 0.85), transparent 58%),
    linear-gradient(120deg, #E6F0FF 0%, #F0F6FF 55%, #E8F5FF 100%);
  box-shadow: var(--shadow-card);
}
.reference-overview .welcome-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.65));
}
.reference-overview .welcome-copy {
  flex: 1 1 54%;
  max-width: none;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.reference-overview .welcome-banner h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.32;
  color: var(--text-primary);
}
.welcome-wave {
  display: inline-block;
  font-size: 24px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  line-height: 1.2;
  transform-origin: 70% 80%;
  transition: transform 0.2s var(--ease);
}
.reference-overview .welcome-wave:hover { transform: rotate(16deg) scale(1.08); }
.reference-overview .welcome-banner p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 8px 0 0;
  padding: 0;
  min-height: 0;
}
.reference-overview .welcome-class {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-secondary);
}
.context-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(191, 219, 254, 0.85);
  border-radius: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  box-shadow: inset 0 1px 0 #FFFFFF;
}
.context-pill .icon { width: 13px; height: 13px; color: var(--brand-blue); }
.task-progress-pill {
  font-family: var(--font-numbers);
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-blue);
}

/* Interactive Mascot Companion in Welcome Banner */
.welcome-companion {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex: 0 1 430px;
  min-width: 0;
  position: relative;
  align-self: stretch;
}
.mascot-trigger {
  position: relative;
  display: flex;
  flex: 0 0 114px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 114px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 18px;
  color: var(--text-secondary);
  isolation: isolate;
}
.mascot-trigger:hover { background: rgba(255, 255, 255, 0.35); }
.reference-overview .mascot-trigger .companion-robot {
  width: 114px;
  height: 122px;
  overflow: visible;
  margin: 0;
  filter: drop-shadow(0 8px 12px rgba(243, 112, 33, 0.16));
  animation: companion-float 5s ease-in-out infinite;
  transition: scale 0.2s var(--ease);
}
.mascot-trigger:hover .companion-robot { scale: 1.05; }
.mascot-trigger:active .companion-robot { scale: 0.97; }
.companion-eyes { transform-box: fill-box; transform-origin: center; animation: companion-blink 4.2s infinite; }
.companion-antennae { animation: companion-glow 2.5s ease-in-out infinite; }
.companion-arm { transform-box: view-box; transform-origin: 88px 162px; }
.mascot-trigger:hover .companion-arm, .is-speaking .companion-arm { animation: companion-wave 0.65s ease-in-out 2; }
.companion-shadow { display: block; width: 64px; height: 8px; border-radius: 50%; background: #1E293B; filter: blur(3px); margin: 0 auto; animation: companion-shadow 5s ease-in-out infinite; }
.companion-tap-hint { font-size: 9.5px; font-weight: 600; margin-top: 6px; white-space: nowrap; color: var(--text-secondary); opacity: 0.85; }
.mascot-speech {
  position: relative;
  min-width: 0;
  max-width: 295px;
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--brand-navy);
  color: #F8FAFC;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.65;
  box-shadow: 0 14px 30px -10px rgba(11, 17, 32, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform-origin: right center;
}
.mascot-speech::after {
  content: '';
  position: absolute;
  right: -6px;
  top: calc(50% - 7px);
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background: var(--brand-navy);
  transform: rotate(45deg);
}
.welcome-companion .mascot-speech {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(8px) scale(0.97);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.welcome-companion.is-speaking .mascot-speech {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* 8. Seven Subject Bento Strip (.subject-cards) */
.subject-navigation { margin-bottom: 24px; }
.subject-navigation-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.subject-navigation-head label { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--text-primary); }
.subject-navigation-head select { width: 170px; min-height: 36px; padding: 6px 12px; font-size: 12px; font-weight: 600; border-color: var(--border-hairline); background: var(--surface-primary); border-radius: 10px; box-shadow: var(--shadow-xs); }
.subject-navigation-head > span { font-size: 11px; color: var(--text-muted); margin-left: auto; font-weight: 500; }
.subject-cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.subject-card {
  border-radius: 18px;
  padding: 14px 12px;
  gap: 10px;
  position: relative;
  border: 1px solid var(--subject-border, rgba(226, 232, 240, 0.85));
  background: var(--subject-bg);
  box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  min-height: 90px;
  flex-direction: row;
  align-items: center;
}
.subject-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--subject-color) 45%, transparent);
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--subject-color) 32%, transparent), inset 0 1px 0 #FFFFFF;
}
.subject-card.selected {
  border-color: var(--subject-color);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--subject-color) 14%, transparent),
    0 10px 24px -10px color-mix(in srgb, var(--subject-color) 38%, transparent),
    inset 0 1px 0 #FFFFFF;
}
.subject-card-icon {
  width: 36px;
  height: 40px;
  border-radius: 11px;
  background: var(--subject-color);
  color: #FFFFFF;
  box-shadow: 0 6px 12px -4px color-mix(in srgb, var(--subject-color) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.subject-card-icon .icon { width: 19px; height: 19px; stroke-width: 1.9; }
.subject-card-copy { min-width: 0; flex: 1; }
.subject-card-copy strong {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.45;
  color: var(--text-primary);
  white-space: normal;
}
.subject-card-copy small {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.55;
  color: color-mix(in srgb, var(--subject-color) 65%, #475569);
}
.subject-card-progress {
  height: 4px;
  margin-top: 8px;
  background: color-mix(in srgb, var(--subject-color) 16%, rgba(255, 255, 255, 0.85));
  border-radius: 99px;
  overflow: hidden;
}
.subject-card-progress > span {
  display: block;
  height: 100%;
  background: var(--subject-color);
  border-radius: 99px;
}

/* Overview cards follow their own content height. */
.reference-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.reference-workspace > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.reference-workspace > div > .panel,
.reference-workspace .overview-feedback,
.reference-workspace .overview-feedback > .panel {
  flex: none;
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
}
.reference-overview .panel-header {
  padding: 20px 22px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.reference-overview .panel-header h2 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}
.reference-overview .panel-body {
  padding: 0 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.reference-overview .panel-header p {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.lesson-count-chip {
  display: inline-flex;
  white-space: nowrap;
  border: 1px solid #DDD6FE;
  background: #F5F3FF;
  color: #6D28D9;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
}

/* Column 1: Lesson List (.reference-lessons) */
.reference-overview .lesson-list .tabs { padding: 4px; margin: 0 18px 14px; gap: 4px; }
.reference-overview .lesson-list .tab { padding: 7px 8px; font-size: 11px; min-height: 32px; white-space: nowrap; }
.reference-overview .lesson-list .task {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0 18px 12px;
  padding: 15px 14px;
  border: 1px solid var(--border-hairline);
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border-radius: 16px;
  align-items: start;
  box-shadow: var(--shadow-xs), var(--inner-glow);
}
.reference-overview .lesson-list .task:hover {
  transform: translateY(-2px);
  border-color: #CBD5E1;
  box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.08), var(--inner-glow);
}
.reference-overview .lesson-list .task:last-child { margin-bottom: 18px; }
.reference-overview .lesson-list .subject-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  grid-row: 1 / 3;
}
.reference-overview .lesson-list .subject-icon .icon { width: 18px; height: 18px; }
.reference-overview .lesson-list .task-info { flex-basis: auto; min-width: 0; grid-column: 2; }
.reference-overview .lesson-list .task h3 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.reference-overview .lesson-list .task-meta { font-size: 11px; color: var(--text-muted); gap: 4px 10px; }
.reference-overview .lesson-list .task-right {
  grid-column: 2;
  width: 100%;
  margin: 8px 0 0;
  gap: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.reference-overview .lesson-list .task-right .pill { display: inline-flex; font-size: 10.5px; padding: 3px 8px; }
.reference-overview .lesson-list .task-right .score-chip { font-size: 17px; font-weight: 800; color: var(--brand-blue); }
.reference-overview .lesson-list .task-right .score-chip small { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.reference-overview .lesson-list .task-right .btn { min-height: 32px; padding: 5px 11px; border-radius: 9px; font-size: 11px; }

/* Column 2: Next Learning Step (.reference-checkin) */
.reference-overview .next-learning {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  border: 1px solid #BFDBFE;
  box-shadow: 0 14px 34px -10px rgba(37, 99, 235, 0.1), var(--inner-glow);
  position: relative;
  overflow: hidden;
}
.reference-overview .next-learning::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #2563EB 0%, #60A5FA 55%, #DBEAFE 100%);
}
.reference-overview .next-learning .panel-header { align-items: center; padding-top: 18px; }
.reference-overview .next-learning .panel-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  white-space: nowrap;
}
.reference-overview .next-learning .panel-header h2 > .icon {
  width: 34px;
  height: 34px;
  padding: 8px;
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  border-radius: 10px;
  margin: 0;
  color: var(--brand-blue);
  stroke-width: 2;
}
.step-badge {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1D4ED8;
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  padding: 4px 8px;
  border-radius: 7px;
  white-space: nowrap;
}
.reference-overview .next-learning .panel-body > .pill { align-self: flex-start; }
.reference-overview .next-learning h3 {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  margin: 14px 0 8px;
  color: var(--text-primary);
}
.reference-overview .next-learning p {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.reference-overview .next-learning .panel-body > .btn-primary,
.reference-overview .next-learning .panel-body > a.btn {
  margin-top: 4px;
}
.student-overview #quick-checkin-form { gap: 0 12px; }
.reference-overview .next-learning .form-field { margin-bottom: 14px; }
.reference-overview .next-learning .form-field > span { font-size: 12px; font-weight: 650; color: var(--text-secondary); }
.reference-overview .next-learning input,
.reference-overview .next-learning select,
.reference-overview .next-learning textarea {
  font-size: 13px;
  min-height: 42px;
  padding: 10px 12px;
  border-color: var(--border-hairline);
  background: var(--surface-subtle);
  border-radius: 11px;
}
.reference-overview .next-learning input:focus,
.reference-overview .next-learning select:focus,
.reference-overview .next-learning textarea:focus {
  background: var(--surface-primary);
  border-color: var(--brand-blue);
}
.reference-overview .next-learning textarea { min-height: 70px; line-height: 1.65; }
.reference-overview .next-learning .source-note {
  font-size: 10.5px;
  line-height: 1.6;
  background: var(--surface-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.reference-overview .next-learning .btn-primary { font-size: 13px; min-height: 44px; border-radius: 12px; }
.reference-overview .next-learning .btn-ghost { font-size: 11.5px; margin-top: 10px; padding: 7px 6px; min-height: 30px; color: var(--text-secondary); }

/* Column 3: Feedback & Support (.reference-feedback) */
.reference-overview .action-guidance {
  background: linear-gradient(135deg, #F0F6FF 0%, #F8FAFC 100%);
  border: 1px solid #DBEAFE;
  border-radius: 16px;
  padding: 16px;
  margin-top: 14px;
  box-shadow: inset 0 1px 0 #FFFFFF;
}
.reference-overview .action-guidance h3 { font-size: 14px; font-weight: 750; line-height: 1.55; margin-bottom: 6px; color: var(--text-primary); }
.reference-overview .action-guidance p { font-size: 12px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 14px; }
.reference-overview .action-guidance .btn { min-height: 40px; border-radius: 11px; font-size: 12.5px; }
.reference-overview .panel-body > p { font-size: 12px; color: var(--text-muted); }
.reference-overview .support-entry { margin-top: 14px; }
.reference-overview .support-entry .btn { font-size: 12px; border-color: var(--border-hairline); width: 100%; border-radius: 11px; }
.reference-overview .insight { margin-top: 14px; font-size: 12px; }
.reference-overview .secondary-details { padding-top: 14px; margin-top: auto; border-top: 1px solid var(--border-hairline); }
.reference-overview .secondary-details > summary { font-size: 11.5px; font-weight: 600; color: var(--text-muted); padding: 4px 0; }

.feedback-empty .panel-body { text-align: center; }
.feedback-emblem {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: linear-gradient(135deg, #EFF6FF, #F5F3FF);
  color: var(--brand-blue);
  border: 1px solid #DBEAFE;
  box-shadow: inset 0 1px 0 #FFFFFF;
  margin: 6px auto 14px;
  transform: rotate(-4deg);
}
.feedback-emblem .icon { width: 25px; height: 25px; stroke-width: 1.6; }
.feedback-empty .panel-body > h3 { font-size: 14px; color: var(--text-primary); }
.feedback-empty .panel-body > p { font-size: 12px; line-height: 1.75; max-width: 290px; margin: 8px auto 18px; color: var(--text-secondary); }
.learning-steps { list-style: none; margin: 0; padding: 0; text-align: left; }
.learning-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border-hairline); }
.learning-steps li > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #DBEAFE;
  border-radius: 8px;
  background: #EFF6FF;
  font-family: var(--font-numbers);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-blue);
  flex-shrink: 0;
}
.learning-steps strong { display: block; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.learning-steps small { display: block; font-size: 11px; line-height: 1.65; margin-top: 2px; color: var(--text-secondary); }
.feedback-note {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  margin-top: auto;
  background: var(--surface-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-muted);
}
.feedback-note .icon { width: 14px; height: 14px; color: var(--brand-blue); }

/* 10. Topbar HUD Pill & Floating Mint Gamification Popover
   (.xp-menu, .topbar-xp-trigger, .topbar-xp-popover, .effort-card-img1, .daily-panel) */
.xp-menu,
.topbar-xp-Anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.xp-menu > summary.topbar-xp-trigger,
.topbar-xp-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 6px 4px 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 100%);
  border: 1px solid var(--mint-border);
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.16), inset 0 1px 0 #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  color: var(--mint-ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.xp-menu > summary::-webkit-details-marker { display: none; }
.xp-menu > summary.topbar-xp-trigger:hover,
.xp-menu[open] > summary.topbar-xp-trigger,
.topbar-xp-trigger:hover,
.topbar-xp-trigger[aria-expanded="true"] {
  border-color: var(--mint-border-strong);
  box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.26), 0 0 0 3px rgba(16, 185, 129, 0.12), inset 0 1px 0 #FFFFFF;
  transform: translateY(-1px);
}
.xp-menu > summary.topbar-xp-trigger > .topbar-xp-streak-pill { border: 1px solid var(--streak-border); padding: 3px 9px; }
.topbar-xp-check {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 7px;
  background: #FFFFFF;
  border: 1px solid var(--mint-border);
  color: var(--mint-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar-xp-check .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.topbar-xp-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--streak-bg);
  border: 1px solid var(--streak-border);
  color: var(--streak-ink);
  font-family: var(--font-numbers);
  font-size: 11px;
  font-weight: 700;
}
.topbar-xp-streak-pill > .icon { display: block; flex: 0 0 12px; width: 12px; height: 12px; color: var(--streak-icon); }
.topbar-xp-trigger { line-height: 1; white-space: nowrap; }
.topbar-xp-trigger strong { display: inline-flex; align-items: center; line-height: 20px; }
.topbar-xp-streak-pill { min-height: 24px; line-height: 16px; }

/* Floating Popover Container */
.xp-popover.topbar-xp-popover,
.topbar-xp-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 420px;
  max-width: calc(100vw - 24px);
  max-height: calc(100svh - 88px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 24px;
  z-index: 80;
  overflow: visible;
  transform-origin: top right;
  animation: popover-enter 0.22s var(--ease) both;
}
@keyframes popover-enter {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.topbar-xp-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 52px;
  width: 14px;
  height: 14px;
  background: #ECFDF5;
  border-top: 1.5px solid var(--mint-border);
  border-left: 1.5px solid var(--mint-border);
  transform: rotate(45deg);
  z-index: 2;
}

/* Mint Gamification Card (.effort-card-img1 & .daily-panel) */
.effort-card-img1,
.daily-panel {
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.97) 0%, rgba(240, 253, 244, 0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid var(--mint-border);
  border-radius: 24px;
  padding: 20px 22px;
  box-shadow: var(--shadow-popover);
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--text-primary);
  text-align: left;
}
.effort-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.effort-check-box {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1.5px solid var(--mint-border);
  color: var(--mint-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -2px rgba(16, 185, 129, 0.12), inset 0 1px 0 #FFFFFF;
}
.effort-check-box .icon { width: 22px; height: 22px; stroke-width: 2.1; }
.effort-head-copy { flex: 1; min-width: 0; }
.effort-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}
.effort-head-row h3 {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  max-width: none;
  white-space: nowrap;
}
.effort-xp-total {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  color: var(--mint-ink);
  white-space: nowrap;
}
.effort-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--streak-bg);
  border: 1.5px solid var(--streak-border);
  color: var(--streak-ink);
  font-family: var(--font-numbers);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.effort-streak-badge .icon { width: 14px; height: 14px; color: var(--streak-icon); }
.effort-head-copy p {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 3 Milestone Mini Cards inside Mint Panel */
.effort-milestones-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  min-height: 112px;
}
.effort-mini-card {
  background: #FFFFFF;
  border: 1.5px solid var(--mint-border);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03), inset 0 1px 0 #FFFFFF;
}
.effort-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px rgba(16, 185, 129, 0.16);
}
.effort-mini-card.locked {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--border-default);
}
.effort-mini-card .icon {
  width: 16px;
  height: 16px;
  color: var(--mint-accent);
  flex: 0 0 16px;
}
.effort-mini-card.locked .icon { color: var(--text-muted); }
.effort-mini-card strong {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-primary);
}
.effort-mini-card small {
  font-family: var(--font-numbers);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--status-success);
  line-height: 1.35;
}
.effort-mini-card.locked small {
  color: var(--text-muted);
  font-weight: 600;
}
.effort-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}
.effort-reward-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-blue);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.effort-reward-link:hover { text-decoration: underline; }
.effort-card-footer .btn {
  font-size: 11px;
  min-height: 30px;
  padding: 4px 12px;
  background: #FFFFFF;
  border-color: var(--mint-border);
  border-radius: var(--radius-pill);
}

/* 11. Bottom Bento Section & Subject-Aware Bar Chart (.reference-bottom & .recent-results) */
.reference-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 20px;
  margin-top: 22px;
  align-items: stretch;
}
.reference-bottom:has(> .panel:only-child),
.reference-bottom:has(> .recent-results:only-child) {
  grid-template-columns: minmax(0, 1fr);
}
.recent-results {
  width: 100%;
  max-width: none;
}
.recent-results .panel-header h2 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.recent-results .panel-body { padding: 0 24px 22px; }
.recent-results .chart {
  height: 156px;
  padding: 18px 24px 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
  position: relative;
  overflow-x: auto;
}
.recent-results .chart::before {
  content: "100";
  position: absolute;
  top: 10px;
  left: 14px;
  font-family: var(--font-numbers);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.recent-results .bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  flex: 0 0 52px;
  min-width: 52px;
  gap: 6px;
}
.recent-results .bar-value {
  font-family: var(--font-numbers);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-blue);
}
.recent-results .practice-value { color: var(--status-success); }
.recent-results .bar {
  width: 100%;
  min-height: 6px;
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
  box-shadow: 0 6px 14px -3px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: height 0.6s var(--ease), transform 0.2s var(--ease);
}
.recent-results .bar-col:hover .bar { transform: scaleY(1.03); }
.recent-results .bar.bar-emerald {
  background: linear-gradient(180deg, #10B981 0%, #059669 100%);
  box-shadow: 0 6px 14px -3px rgba(16, 185, 129, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* Subject-Specific Identity Bars when scoped or tagged */
.chart .bar.subject-math { background: linear-gradient(180deg, #3B82F6, var(--subject-math)); }
.chart .bar.subject-literature { background: linear-gradient(180deg, #FB7185, var(--subject-literature)); }
.chart .bar.subject-english { background: linear-gradient(180deg, #F472B6, var(--subject-english)); }
.chart .bar.subject-physics { background: linear-gradient(180deg, #FBBF24, var(--subject-physics)); }
.chart .bar.subject-chemistry { background: linear-gradient(180deg, #A78BFA, var(--subject-chemistry)); }
.chart .bar.subject-biology { background: linear-gradient(180deg, #34D399, var(--subject-biology)); }
.chart .bar.subject-informatics { background: linear-gradient(180deg, #818CF8, var(--subject-informatics)); }

.recent-results .bar-label {
  font-family: var(--font-numbers);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.recent-results .recent-series-legend {
  display: flex;
  gap: 18px;
  font-size: 11.5px;
  font-weight: 500;
  margin-top: 14px;
  color: var(--text-secondary);
}
.recent-series-legend span { display: inline-flex; align-items: center; gap: 6px; }
.recent-series-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; background: var(--brand-blue); }
.recent-series-legend .practice-dot { background: #059669; }
.recent-results .panel-body > p { font-size: 12px; line-height: 1.7; margin-top: 12px; color: var(--text-muted); }

/* 12. Dialog Modal & Tactile Choice Cards (<dialog id="modal">) */
#modal {
  border: 1px solid var(--border-hairline);
  border-radius: 24px;
  background: var(--surface-primary);
  box-shadow: var(--dialog-shadow);
}
#modal::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-hairline);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
}
.modal-head h2 { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.modal-content { padding: 22px 24px 26px; }
.modal-content form .form-actions {
  border-top: 1px solid var(--border-hairline);
  padding-top: 18px;
  margin-top: 22px;
}
.practice-q {
  padding: 18px;
  margin: 18px 0;
  border: 1px solid var(--border-hairline);
  border-radius: 18px;
  background: var(--surface-subtle);
}
.choice {
  border-radius: 12px;
  border: 1px solid var(--border-hairline);
  background: var(--surface-primary);
  padding: 12px 14px;
  box-shadow: var(--shadow-xs);
}
.choice:hover {
  transform: translateY(-2px);
  border-color: #93C5FD;
  box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.15);
}
.choice:active { transform: scale(0.98); }
.choice:has(input:checked) {
  border-color: var(--brand-blue);
  background: #EFF6FF;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* 13. Secondary Workspace Components (Support, Worksheets, Homeroom, Profile) */
.support-panel { background: linear-gradient(135deg, #F8FAFC, #FFFFFF); border-color: var(--border-hairline); border-radius: 18px; padding: 20px; }
.support-message { border-radius: 14px; border-color: var(--border-hairline); }
.exercise-preview { border-radius: 16px; border-color: var(--border-hairline); }
.worksheet-slot { border-radius: 16px; border-color: var(--border-hairline); background: var(--surface-subtle); }
.preparation-steps { border-radius: 16px; background: var(--surface-subtle); border-color: var(--border-hairline); }
.preparation-steps span > b { background: #EFF6FF; color: var(--brand-blue); font-family: var(--font-numbers); }
.level-folder { border: 1px solid var(--border-hairline); border-radius: 16px; background: var(--surface-primary); margin-bottom: 14px; }
.level-folder > summary { padding: 16px; }
.lesson-library > .panel { border-radius: 22px; }
.lesson-choice { border-radius: 12px; border: 1px solid transparent; margin: 5px 10px; padding: 13px; width: calc(100% - 20px); }
.lesson-choice.active { border-color: #BFDBFE; background: #EFF6FF; color: var(--brand-blue); }
.lesson-choice strong { font-size: 12.5px; }
.lesson-choice small { font-size: 10.5px; }
.reward-item { padding: 13px 0; border-color: var(--border-hairline); font-size: 12.5px; }
.profile-cover { background: radial-gradient(ellipse at 70% 30%, #DBEAFE, transparent 65%), linear-gradient(120deg, #EFF6FF, #ECFDF5); }
.profile-card-body { padding: 0 24px 24px; }
.profile-card h2 { font-size: 21px; }
.profile-numbers { border-color: var(--border-hairline); }
.profile-numbers strong { font-size: 22px; color: var(--text-primary); }
.profile-numbers span { font-size: 11.5px; color: var(--text-muted); }
.profile-layout, .settings-grid { gap: 24px; }
.teacher-visuals { gap: 20px; }
.chart-grid { stroke: var(--border-default); }
.result-distribution { gap: 18px; }
.chart-empty { font-size: 12.5px; line-height: 1.85; color: var(--text-muted); }

/* Support Compose & Image Attachments */
.support-compose { position: relative; border: 1px solid var(--border-hairline); border-radius: 16px; padding: 15px; background: var(--surface-primary); margin: 16px 0; }
.support-compose .form-field { margin: 0; }
.support-compose textarea { border: 0; box-shadow: none !important; padding: 10px 0; min-height: 100px; background: transparent; }
.support-compose:focus-within { border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
.support-attach-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border-hairline); }
.support-attach-button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 0; border-radius: 9px; color: var(--brand-blue); background: #EFF6FF; font-size: 12px; font-weight: 650; cursor: pointer; }
.support-attach-button:hover { background: #DBEAFE; }
.support-attach-toolbar .small { font-size: 11px; }
.support-attach-limit { font-size: 10.5px; margin-top: 10px; }
.support-attach-drop { display: none; position: absolute; inset: 0; z-index: 3; align-items: center; justify-content: center; padding: 20px; text-align: center; color: var(--brand-blue); font-weight: 700; background: rgba(239, 246, 255, 0.95); border: 2px dashed var(--brand-blue); border-radius: 16px; pointer-events: none; }
.support-compose.is-dragging .support-attach-drop { display: flex; }
.support-compose.is-dragging { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14); }
.support-attach-preview { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.support-attach-preview:empty { display: none; }
.support-attach-preview figure { position: relative; margin: 0; width: 94px; }
.support-image-open { display: block; width: 94px; height: 78px; padding: 0; border: 1px solid var(--border-hairline); border-radius: 10px; overflow: hidden; background: var(--surface-subtle); cursor: zoom-in; }
.support-image-open img { width: 100%; height: 100%; object-fit: contain; }
.support-attach-preview figcaption { font-size: 10px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 5px; }
.support-image-remove { position: absolute; right: -5px; top: -7px; width: 24px; height: 24px; border: 1px solid var(--border-hairline); border-radius: 50%; background: #FFFFFF; color: var(--text-secondary); cursor: pointer; box-shadow: var(--shadow-xs); }
.support-image-remove:hover { color: var(--status-danger); background: var(--danger-bg); }
.support-image-dialog { width: min(1000px, 94vw); max-height: 92vh; padding: 16px; border: 0; border-radius: 20px; background: #FFFFFF; box-shadow: var(--dialog-shadow); }
.support-image-dialog::backdrop { background: var(--backdrop); }
.support-image-dialog > button { display: block; margin: 0 0 10px auto; }
.support-image-dialog img { display: block; max-width: 100%; max-height: 75vh; object-fit: contain; margin: auto; }
.support-saved-images { margin-top: 14px; }
.support-saved-images > strong { display: block; margin-bottom: 8px; }
.support-saved-image { padding: 4px; margin: 0 8px 8px 0; border: 1px solid var(--border-hairline); border-radius: 10px; background: #FFFFFF; cursor: zoom-in; }
.support-saved-image img { max-height: 150px; max-width: 170px; object-fit: contain; }

/* Teacher Monitoring, Homeroom & Work Review */
.lesson-management-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.lesson-management-actions .btn { min-height: 32px; padding: 6px 10px; font-size: 11.5px; }
.worksheet-format-options { display: grid; gap: 14px; margin-top: 20px; }
.worksheet-format-options > .btn { align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; padding: 20px; gap: 9px; }
.worksheet-format-options .small { display: block; flex-basis: 100%; text-align: left; white-space: normal; line-height: 1.75; }
.question-editor { border: 1px solid var(--border-hairline); border-radius: 14px; margin: 12px 0; overflow: hidden; }
.question-editor > summary { padding: 14px 17px; cursor: pointer; font-weight: 700; background: var(--surface-subtle); }
.question-editor > .panel-body { padding: 16px; }
.online-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.question-editor .question-image { max-height: 160px; }
.worksheet-version .inline-controls { flex-wrap: wrap; gap: 7px; }
.worksheet-version .btn { font-size: 11px; min-height: 32px; padding: 6px 10px; }
.monitor-toolbar { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) minmax(135px, 0.8fr) minmax(135px, 0.8fr) auto; gap: 12px; align-items: end; padding: 20px 22px; }
.monitor-toolbar label { font-size: 11.5px; font-weight: 650; color: var(--text-secondary); }
.monitor-toolbar input, .monitor-toolbar select { margin-top: 6px; min-height: 38px; font-size: 12px; padding: 8px 10px; }
.monitor-toolbar > .btn { min-height: 38px; }
.monitor-toolbar > .form-error { grid-column: 1 / -1; }
.monitor-toolbar > .form-error:empty { display: none; }
.monitor-toolbar ~ .table-caption { margin-top: 0; }
.table-wrap td .pill + .pill { margin-left: 6px; }
.homeroom-period { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0; }
.homeroom-period > .small { margin-left: auto; }
.homeroom-period .btn { font-size: 11.5px; min-height: 34px; padding: 6px 12px; }
.period-custom { position: relative; }
.period-custom > summary { cursor: pointer; color: var(--text-secondary); font-size: 11.5px; font-weight: 600; }
.period-custom > form { position: absolute; z-index: 9; top: 28px; left: 0; width: min(340px, 85vw); padding: 18px; background: #FFFFFF; border: 1px solid var(--border-hairline); border-radius: 16px; box-shadow: var(--shadow-hover); }
.homeroom-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
.homeroom-summary > div { display: flex; align-items: center; gap: 13px; border: 1px solid var(--border-hairline); background: var(--surface-glass); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow-card); }
.homeroom-summary strong { font-family: var(--font-numbers); font-size: 26px; color: var(--brand-blue); }
.homeroom-summary span { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.attention-reason { display: flex; align-items: center; gap: 9px; margin: 6px 0; font-size: 12px; }
.subject-summary-list article { padding: 12px 0; border-bottom: 1px solid var(--border-hairline); }
.subject-summary-list article > div:first-child { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 9px; }
.subject-summary-list article span { font-size: 11.5px; color: var(--text-muted); }
.profile-teaching-scope { margin-top: 18px; color: var(--text-secondary) !important; font-size: 12px; }
.work-review-section { border: 1px solid var(--border-hairline); border-radius: 18px; background: var(--surface-subtle); padding: 20px; margin-top: 24px; }
.work-review-section > h2 { font-size: 17px; margin-bottom: 16px; }
.review-source { display: inline-flex; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 5px 10px; }
.ai-source { color: #6D28D9; background: #F5F3FF; border: 1px solid #DDD6FE; }
.teacher-source { color: #047857; background: #ECFDF5; border: 1px solid #A7F3D0; }
.review-finding { padding: 15px 0; border-bottom: 1px solid var(--border-hairline); }
.review-finding h3 { font-size: 14px; }
.review-finding p { font-size: 13px; line-height: 1.8; margin-top: 8px; }
.review-next-step { padding: 16px; background: #EFF6FF; border: 1px solid #DBEAFE; border-radius: 14px; margin: 18px 0; }
.review-next-step p { margin-top: 8px; }
.review-empty h3 { font-size: 15px; }
.review-empty > p { font-size: 13px; line-height: 1.8; margin: 10px 0 15px; }
.modal-content > button { margin: 12px 9px 0 0; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Keyframe Animations */
@keyframes mascot-breathe {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(0.5deg); }
}
@keyframes companion-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-7px) rotate(0.8deg); }
}
@keyframes companion-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(0.08); }
}
@keyframes companion-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.36)); }
  50% { filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.65)); }
}
@keyframes companion-shadow {
  0%, 100% { transform: scale(1); opacity: 0.18; }
  50% { transform: scale(0.85); opacity: 0.1; }
}
@keyframes companion-wave {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-12deg); }
}

/* 14. Responsive Breakpoints */
@media (min-width: 1700px) {
  .content { padding: 30px 38px 24px; }
  .reference-overview .welcome-banner { min-height: 172px; padding: 28px 34px; }
  .reference-overview .welcome-banner h1 { font-size: 30px; }
  .reference-workspace { gap: 24px; }
  .reference-overview .panel-header { padding: 22px 24px 18px; }
  .reference-overview .panel-body { padding: 0 24px 24px; }
}

@media (max-width: 1200px) and (min-width: 1001px) {
  :root { --sidebar-width: 224px; }
  .content { padding: 22px 20px; }
  .topbar { padding: 0 22px; }
  .reference-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .reference-feedback { grid-column: 1 / -1; }
  .subject-card { flex-direction: column; align-items: flex-start; padding: 12px 10px; gap: 8px; }
  .subject-card-copy { width: 100%; }
  .subject-card-copy strong { font-size: 11px; }
  .subject-card-copy small { font-size: 9px; }
  .monitor-toolbar { grid-template-columns: 1fr 1fr; }
  .monitor-toolbar > .btn { justify-self: start; }
}

@media (max-width: 1000px) {
  .login-shell, .login-screen { grid-template-columns: minmax(0, 1fr) minmax(350px, 1fr); gap: 14px; padding: 14px; }
  .login-story { top: 14px; height: calc(100svh - 28px); padding: 28px 24px; min-height: 700px; }
  .login-form { padding: 26px 24px; }
  .subject-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .subject-card { flex-direction: row; }
  .reference-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .reference-feedback { grid-column: 1 / -1; }
  .reference-bottom { grid-template-columns: 1fr; }
  .monitor-toolbar { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .reference-workspace { grid-template-columns: 1fr; }
  .reference-feedback { grid-column: auto; }
  .content { padding-left: 20px; padding-right: 20px; }
  .topbar { padding-left: 20px; padding-right: 20px; }
  .top-tools { gap: 10px; }
  .today { display: none; }
}

@media (max-width: 800px) {
  .login-shell, .login-screen { display: block; padding: 18px; min-height: 100svh; }
  .login-story { display: none; }
  .login-side { padding: 12px 8px; min-height: calc(100svh - 36px); }
  .login-form { width: 430px; margin: 0 auto; }
}

@media (max-width: 760px) {
  :root { --sidebar-width: 248px; }
  .main { margin-left: 0; }
  .sidebar { padding: 0 16px 20px; }
  .topbar { height: 58px; padding: 0 16px; gap: 10px; }
  .breadcrumb { font-size: 11px; gap: 8px; }
  .top-tools { gap: 8px; }
  .top-tools .avatar { width: 32px; height: 32px; }
  .content { padding: 18px 15px; }
  .today { display: none; }
  .xp-menu > summary.topbar-xp-trigger > .topbar-xp-streak-pill { display: none; }
  .xp-popover.topbar-xp-popover {
    position: fixed;
    top: 66px;
    right: 12px;
    width: calc(100vw - 24px);
    max-width: 390px;
  }
  .xp-popover.topbar-xp-popover::before { display: none; }
  .effort-head-row { flex-wrap: wrap; gap: 8px; }
  .effort-head-row h3 { white-space: normal; font-size: 15.5px; }
  .subject-cards { display: flex; overflow-x: auto; gap: 10px; scroll-snap-type: x proximity; padding: 3px 2px 10px; }
  .subject-card { min-width: 154px; flex-shrink: 0; }
  .reference-workspace { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .reference-workspace > div > .panel { height: auto; }
  .overview-feedback, .overview-extra {
    background: var(--surface-primary);
    border: 1px solid var(--border-hairline);
    border-radius: 20px !important;
    overflow: hidden;
  }
  .overview-feedback > summary, .overview-extra > summary {
    display: block;
    cursor: pointer;
    padding: 16px 18px !important;
    font-family: var(--font-display);
    font-weight: 750;
    font-size: 13.5px !important;
  }
}

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

/* Hỏi Kiến & học cùng nhau */
.community-space{max-width:1480px;margin-inline:auto;min-width:0}.community-space .page-heading{margin-bottom:24px}.community-space label{display:grid;gap:8px;font-weight:650;font-size:13px}.community-space .form-error:empty{display:none}.community-space .icon{flex-shrink:0}.community-notice{padding:13px 18px;border:1px solid #FDE3A7;border-radius:14px;background:#FFFBEB;color:#90621F;font-size:12px;line-height:1.65}.community-author{display:inline-flex;align-items:center;gap:10px;min-width:0}.community-author .avatar{width:36px;height:36px;flex:0 0 36px;font-size:12px}.community-author strong{font-size:12px;display:block;overflow-wrap:anywhere}.community-author small{display:block;font-size:10px;color:var(--text-muted);margin-top:3px}.community-images{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.community-images button{padding:0;border:1px solid var(--border-hairline);border-radius:12px;background:white;overflow:hidden;cursor:zoom-in}.community-images img{display:block;max-width:170px;max-height:140px;object-fit:contain}.community-image-zoom{display:block;max-width:100%;max-height:70vh;object-fit:contain;margin:auto}.community-attachments{border:1px dashed transparent;padding:4px;border-radius:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;transition:background .15s,border-color .15s}.community-attachments.dragging{border-color:#2563EB;background:#EFF6FF}.community-attachments [data-community-previews]{width:100%}.community-attachments [data-community-previews]:empty{display:none}.community-paperclip{position:relative;overflow:hidden;display:inline-flex!important;align-items:center;gap:6px;cursor:pointer}.community-paperclip input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.community-consent{display:flex!important;align-items:flex-start;gap:9px!important;font-size:11px!important;font-weight:450!important;line-height:1.6;color:var(--text-secondary)}.community-consent input{width:15px;height:15px;margin:2px 0 0;flex:0 0 15px;accent-color:#2563EB}.community-empty{padding:52px 28px;text-align:center;display:grid;justify-items:center;gap:14px}.community-empty h2{font-size:20px;line-height:1.5}.community-empty p{max-width:460px;color:var(--text-muted);font-size:13px;line-height:1.8}.community-empty-icon{width:50px;height:50px;border-radius:16px;background:#EFF6FF;display:grid;place-items:center;color:#2563EB}.community-empty-icon .icon{width:24px;height:24px}
.ant-chat-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:stretch}.ant-chat-sidebar{padding:18px;display:flex;flex-direction:column;gap:22px;min-width:0}.ant-chat-sidebar>.btn{width:100%;font-size:12px}.ant-chat-history{display:flex;flex-direction:column;gap:8px;max-height:640px;overflow-y:auto;flex:1}.ant-chat-item{display:grid;text-align:left;gap:6px;border:1px solid transparent;background:transparent;padding:12px;border-radius:12px;cursor:pointer;color:var(--text-primary);min-width:0}.ant-chat-item:hover{background:#F8FAFC}.ant-chat-item.selected{background:#EFF6FF;border-color:#DBEAFE}.ant-chat-item small{font-size:10px;color:#2563EB;font-weight:700}.ant-chat-item strong{font-size:12px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ant-chat-item span{font-size:10px;color:var(--text-muted)}.ant-chat-main{min-width:0;overflow:hidden;display:flex;flex-direction:column;min-height:720px}.ant-chat-header{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border-hairline);padding:20px 26px;background:linear-gradient(110deg,#F8FBFF,#FFFFFF)}.ant-chat-header strong{font-size:14px}.ant-chat-header small{display:block;font-size:11px;color:var(--text-muted);margin-top:4px}.ant-chat-header>.btn{margin-left:auto}.ant-status-dot{height:9px;width:9px;border-radius:50%;background:#29B88B;box-shadow:0 0 0 5px #E6F8EF}.ant-chat-main>.community-notice{margin:14px 22px 0}.ant-messages{height:400px;min-height:280px;overflow-y:auto;padding:26px;display:flex;flex-direction:column;gap:22px;overscroll-behavior:contain}.ant-message{max-width:88%;align-self:flex-start}.ant-message.user{align-self:flex-end}.ant-message-label{display:block;font-size:10px;font-weight:750;color:var(--text-muted);margin-bottom:7px}.ant-message.user .ant-message-label{text-align:right}.ant-message-body{padding:15px 18px;background:#F3F6FC;border:1px solid #E7EDF7;border-radius:4px 18px 18px 18px;font-size:13px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}.ant-message.user .ant-message-body{background:#EFF5FF;border-color:#DDE9FF;border-radius:18px 4px 18px 18px;color:#1E3A6D}.ant-chat-empty{margin:auto;display:grid;justify-items:center;text-align:center;gap:12px;max-width:550px}.ant-chat-mascot{width:86px;height:96px}.ant-chat-mascot svg{width:100%;height:100%}.ant-chat-empty h2{font-size:23px;letter-spacing:-.6px}.ant-chat-empty p{font-size:13px;color:var(--text-muted);line-height:1.8;max-width:430px}.ant-prompts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:6px}.ant-prompts .btn{font-size:10px;min-height:32px;padding:7px 10px}.ant-composer{padding:20px 24px;border-top:1px solid var(--border-hairline);display:grid;gap:10px;background:#FCFDFF}.ant-composer textarea{min-height:86px;resize:vertical;line-height:1.7;font-size:13px}.ant-subject-label{display:flex!important;align-items:center;gap:12px!important}.ant-subject-label select{width:160px;padding:8px 12px;min-height:34px}.ant-composer-footer{display:flex;justify-content:space-between;align-items:center;gap:20px}.ant-composer-footer small{font-size:10px;color:var(--text-muted);max-width:420px;line-height:1.6}.ant-composer-footer .btn{flex-shrink:0}
.community-forum-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:24px;align-items:start}.community-filter{padding:16px;display:grid;grid-template-columns:minmax(120px,1fr) 145px 145px auto;gap:10px;margin-bottom:18px}.community-filter input,.community-filter select{min-width:0;min-height:40px;font-size:12px}.community-filter .form-error{grid-column:1/-1}.forum-feed{display:grid;gap:16px}.forum-post-card{padding:24px 26px}.forum-post-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.forum-post-meta .pill{font-size:10px;min-height:23px;padding:4px 8px}.forum-post-title{padding:0;margin:14px 0 10px;text-align:left;border:0;background:transparent;color:var(--text-primary);font-family:var(--font-display);font-size:18px;font-weight:750;line-height:1.6;cursor:pointer;overflow-wrap:anywhere}.forum-post-title:hover{color:#2563EB}.forum-post-bottom{margin-top:22px;display:flex;justify-content:space-between;gap:18px;align-items:center}.forum-post-bottom>small{font-size:10px;color:var(--text-muted)}.community-guide{padding:27px;position:sticky;top:24px;background:linear-gradient(150deg,#FFFFFF,#F4F8FF)}.community-guide .eyebrow{font-size:10px;color:#2563EB}.community-guide h2{font-size:20px;letter-spacing:-.5px;line-height:1.55;margin-top:12px}.community-guide p{font-size:12px;color:var(--text-secondary);line-height:1.85;margin:16px 0}.community-guide hr{border:0;border-top:1px solid var(--border-hairline);margin-top:24px}.community-guide .btn{font-size:12px;width:100%}.forum-verified{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:650;color:#15805F}.forum-verified .icon{width:13px;height:13px}.community-pagination{display:flex;gap:16px;align-items:center;justify-content:center;padding:22px;font-size:12px;color:var(--text-muted)}.forum-thread-layout{max-width:980px;margin:20px auto}.forum-thread{padding:32px 38px}.forum-thread>h1{font-size:27px;line-height:1.5;margin:20px 0;overflow-wrap:anywhere}.forum-body{font-size:14px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:20px}.forum-thread-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.forum-thread-actions .btn{font-size:11px;min-height:32px;padding:7px 12px}.forum-replies{display:grid;gap:16px;margin:20px 0 28px}.forum-reply{border:1px solid var(--border-hairline);border-radius:18px;padding:24px;background:#FCFDFF}.forum-reply.verified{border-color:#A7E8CD;background:#F4FCF8}.forum-reply>.forum-verified{margin:12px 0 0;display:flex}.forum-reply-form{border-top:1px solid var(--border-hairline);padding-top:24px;display:grid;gap:14px}#community-post-form,#community-reason-form{display:grid;gap:18px}#community-post-form .form-grid{display:grid;grid-template-columns:180px 1fr;gap:18px}
.contribution-board{max-width:1000px;margin-inline:auto;padding:32px}.contribution-intro{display:flex;align-items:center;gap:22px;margin-bottom:30px}.contribution-trophy{width:58px;height:58px;border-radius:18px;background:#FFFAE9;color:#B78114;display:grid;place-items:center;flex:0 0 58px}.contribution-trophy .icon{width:27px;height:27px}.contribution-intro h2{font-size:23px;letter-spacing:-.5px}.contribution-intro p{font-size:12px;color:var(--text-muted);line-height:1.8;margin-top:9px;max-width:420px}.contribution-intro form{margin-left:auto;display:flex;gap:8px}.contribution-intro input{max-width:170px;min-height:38px;font-size:12px}.contribution-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:8px}.contribution-list li{display:flex;align-items:center;gap:22px;padding:18px 20px;border:1px solid var(--border-hairline);border-radius:14px}.contribution-list li.is-me{background:#EFF6FF;border-color:#BFDBFE}.contribution-rank{font-family:var(--font-numbers);font-size:20px;color:#8B9AB1;width:30px;text-align:center}.contribution-list li:first-child .contribution-rank{color:#CC931F}.contribution-count{margin-left:auto;color:var(--text-muted);font-size:12px}.contribution-count strong{color:#1D4ED8;font-family:var(--font-numbers);font-size:19px;margin-right:5px}.profile-level{margin:22px 0 0;padding:16px;background:#F5F9FF;border:1px solid #E1EBFB;border-radius:14px;display:grid;grid-template-columns:1fr auto;gap:10px;text-align:left;font-size:12px}.profile-level .progress,.profile-level small{grid-column:1/-1}.profile-level small{color:var(--text-muted);font-size:10px}.effort-wallet{display:flex;justify-content:space-between;gap:12px;padding:12px 0;font-size:11px;border-top:1px solid #D8EEE4;margin-top:18px}.effort-wallet a{font-weight:700;color:#13715E}.coin-explainer{padding:26px;display:flex;align-items:center;gap:24px;justify-content:space-between;margin-bottom:22px}.coin-explainer h2{font-size:22px;margin:8px 0}.coin-explainer p{font-size:12px;color:var(--text-muted);line-height:1.8;max-width:650px}.coin-explainer .btn{flex-shrink:0}
@media(max-width:1150px){.community-forum-layout{grid-template-columns:minmax(0,1fr)}.community-guide{position:static;display:none}.ant-chat-layout{grid-template-columns:210px minmax(0,1fr)}.contribution-intro{flex-wrap:wrap}.contribution-intro form{margin-left:0}.coin-explainer{flex-wrap:wrap}}
@media(max-width:760px){.ant-chat-layout{grid-template-columns:1fr;gap:14px}.ant-chat-sidebar{padding:14px;gap:12px}.ant-chat-sidebar>.small{display:none}.ant-chat-history{max-height:120px;display:flex;flex-direction:row;overflow-x:auto}.ant-chat-history .ant-chat-item{min-width:160px;max-width:190px}.ant-chat-main{min-height:0}.ant-chat-header{padding:16px}.ant-chat-header strong{font-size:12px}.ant-chat-header .btn{font-size:10px}.ant-messages{height:340px;padding:18px}.ant-chat-empty h2{font-size:19px}.ant-chat-empty p{font-size:12px}.ant-composer{padding:16px}.ant-composer-footer{align-items:flex-end;gap:12px}.ant-composer-footer small{font-size:9px}.ant-composer-footer .btn{font-size:12px;padding:10px 14px}.community-filter{grid-template-columns:1fr 1fr;padding:12px}.community-filter input{grid-column:1/-1}.community-filter>.btn{grid-column:1/-1}.forum-post-card{padding:20px}.forum-post-title{font-size:16px}.forum-post-bottom{align-items:flex-start;flex-direction:column;gap:12px}.forum-thread{padding:22px 18px}.forum-thread>h1{font-size:22px}.forum-reply{padding:18px}.forum-body{font-size:13px}.contribution-board{padding:22px 16px}.contribution-intro{gap:14px}.contribution-intro h2{font-size:20px}.contribution-trophy{width:44px;height:44px;flex-basis:44px}.contribution-list li{padding:14px 10px;gap:10px}.contribution-rank{font-size:16px;width:20px}.contribution-count{font-size:10px;max-width:80px;text-align:right}.community-images img{max-width:120px;max-height:110px}#community-post-form .form-grid{grid-template-columns:1fr}.coin-explainer{padding:22px}.coin-explainer h2{font-size:19px}.coin-explainer .btn{font-size:11px;white-space:normal}}
.community-space label.community-consent{display:flex!important;flex-direction:row;align-items:flex-start;justify-content:flex-start;position:relative}.community-space .community-consent input[type="checkbox"]{position:static;inset:auto;order:0;align-self:flex-start;transform:none;margin:2px 0 0;min-height:15px;max-width:15px}.community-consent>span{order:1;flex:1;min-width:0}.forum-reply-form>.btn{justify-self:start;min-width:150px}
.classroom-switch{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,0.09);border-radius:14px;background:linear-gradient(135deg,rgba(30,41,59,0.75),rgba(15,23,42,0.85));box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);color:#fff;text-align:left;cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease)}.classroom-switch:hover{border-color:rgba(118,173,255,0.45);background:linear-gradient(135deg,rgba(33,53,80,0.9),rgba(17,28,48,0.95));transform:translateY(-1px)}.classroom-switch:active{transform:scale(0.99)}.classroom-switch:focus-visible{outline:2px solid #91baff;outline-offset:2px}.classroom-switch .context-copy{flex:1;min-width:0;display:grid;gap:2px}.classroom-switch .context-copy strong,.classroom-switch .context-copy small{display:block}.classroom-switch .context-copy strong{font-size:13.5px;font-weight:700;line-height:1.3;color:#f8fafc}.classroom-switch .context-copy small{margin-top:0;font-size:11px;line-height:1.35;color:#94a3b8}.classroom-switch>[aria-hidden="true"]{font-size:14px;line-height:1;color:#94a3b8;margin-left:2px;transition:transform .18s var(--ease),color .18s var(--ease)}.classroom-switch:hover>[aria-hidden="true"]{color:#e2e8f0;transform:translateY(1px)}.workspace-context .context-hint{display:none}.classroom-groups{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}.classroom-groups h3{font-size:14px;color:#687b94;margin:0 0 12px}.classroom-list{display:grid;gap:10px}.classroom-choice{display:flex;align-items:center;gap:12px;width:100%;padding:16px;border:1px solid #e0e8f2;border-radius:16px;background:#fff;color:#17263e;text-align:left;cursor:pointer}.classroom-choice:hover,.classroom-choice.is-current{border-color:#79a7fa;background:#eff5ff}.classroom-choice>span:nth-child(2){flex:1}.classroom-choice strong,.classroom-code-row strong{display:block;font-size:14px}.classroom-choice small,.classroom-code-row small{display:block;margin-top:5px;color:#71849d;font-size:12px}.classroom-choice>svg,.classroom-code-row>svg{width:18px;height:18px;flex-shrink:0}.classroom-choice-icon{display:grid;place-items:center;border-radius:12px;background:#edf4ff;color:#2466e8;width:42px;height:42px;flex-shrink:0}.classroom-choice-icon svg{width:22px;height:22px}.classroom-code-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;border:1px solid #e1e8f1;border-radius:14px}.classroom-student-entry{margin-top:14px!important;position:relative;z-index:2}.classroom-preview{text-align:center;padding:24px}.classroom-preview .classroom-choice-icon{margin:auto}.classroom-generated-code{user-select:all;font-size:clamp(22px,4vw,34px);letter-spacing:3px}#classroom-create-form,#classroom-preview-form{display:grid;gap:18px}#classroom-create-form label,#classroom-preview-form label{display:grid;gap:8px;font-size:14px;font-weight:600}#classroom-create-form [hidden]{display:none}@media(max-width:650px){.classroom-groups{grid-template-columns:1fr}.classroom-code-row{flex-wrap:wrap}.classroom-student-entry{font-size:11px}.classroom-generated-code{letter-spacing:1px}}

.demo-options{grid-template-columns:repeat(2,minmax(0,1fr))}

.worksheet-empty-level{padding:20px 22px 4px}.worksheet-add-row{padding:16px 20px 20px}.worksheet-level-content .worksheet-slot:last-of-type{border-bottom:1px solid var(--line,#e3eaf4)}

#modal:has(.worksheet-review-pair){width:min(1440px,96vw);max-width:1440px}.worksheet-review-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.worksheet-review-pair>section{min-width:0}.worksheet-review-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.worksheet-review-heading h3{font-size:15px}.worksheet-review-pair .exercise-preview iframe{height:58vh;min-height:340px}.vietnamese-date-input{display:flex;position:relative;align-items:center}.vietnamese-date-input>input{padding-right:56px}.date-calendar-control{position:absolute;right:8px;width:38px;height:38px;display:grid;place-items:center;border-radius:9px;color:var(--brand-blue)}.date-calendar-control:hover{background:#edf4ff}.date-calendar-control>svg{width:20px;height:20px}.date-calendar-control>input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;padding:0}.date-calendar-control>input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;margin:0}.date-calendar-control:focus-within{outline:2px solid #76a8ff}@media(max-width:850px){.worksheet-review-pair{grid-template-columns:1fr}}

.form-field>.vietnamese-date-input{display:flex;position:relative;width:100%;margin-bottom:0}.vietnamese-date-input>.date-calendar-control{top:50%;transform:translateY(-50%)}
#modal:has(.paper-editor-layout),#modal:has(.paper-student-layout){width:min(1540px,97vw);max-width:1540px}.paper-steps{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 18px;padding:14px 18px;background:#f4f7fc;border:1px solid #e4ebf5;border-radius:14px}.paper-steps>span{display:flex;align-items:center;gap:8px;font-size:12px;color:#7c8da5}.paper-steps b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e5edfa;color:#5880b6}.paper-steps .current{color:#1858d5;font-weight:700}.paper-steps .current b{background:#2563eb;color:#fff}.paper-steps .done b{background:#dcf8ee;color:#138467}.paper-editor-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:24px;align-items:start}.paper-source-column{min-width:0}.paper-editor-layout .paper-source-column{position:sticky;top:0}.paper-source-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.paper-editor-layout .exercise-preview iframe{height:70vh;min-height:400px}.paper-word-preview{padding:18px;border:1px solid #e0e8f4;background:#f8faff;border-radius:14px;max-height:70vh;overflow:auto}.paper-word-preview pre{white-space:pre-wrap;word-break:break-word;font:13px/1.7 var(--font-body,Arial)}.paper-answer-column{min-width:0}.paper-bulk{display:flex;align-items:end;gap:8px;background:#f5f9ff;padding:12px;border-radius:12px;margin:14px 0}.paper-bulk label{display:grid;gap:7px;font-size:12px;flex:1;min-width:0}.paper-bulk input{font-size:12px!important}.paper-key-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:18px}.paper-key-heading h3{font-size:15px;margin:0}.paper-key-heading>span{font-size:11px;color:#64809b}.paper-key-table{border:1px solid #e2e9f3;border-radius:14px;overflow:hidden}.paper-key-head,.paper-key-row{display:grid;grid-template-columns:40px minmax(80px,.8fr) minmax(110px,1.2fr);gap:10px;align-items:center;padding:11px 13px}.paper-key-head{font-size:11px;color:#71839a;background:#f4f7fb;font-weight:700}.paper-key-row{border-top:1px solid #e9eef6}.paper-key-row>strong{text-align:center;font-size:13px;color:#58718f}.paper-key-row.has-answer>strong{color:#108060}.paper-key-row select{padding:8px 9px!important;font-size:13px!important;min-height:38px!important}.paper-key-note{grid-column:2/-1;font-size:11px;color:#7588a0}.paper-key-note summary{cursor:pointer}.paper-key-note textarea{margin-top:8px;font-size:12px!important}.paper-question-warning{color:#a86316}.paper-import-warnings{padding:12px 15px;border:1px solid #f5dba6;background:#fffbef;border-radius:12px;font-size:12px;color:#8b5a14;margin-bottom:14px}.paper-import-warnings p{margin:4px 0}.paper-ai-tools,.paper-extra-files{border:1px solid #e2e9f3;border-radius:12px;padding:12px 14px;margin-top:16px;font-size:12px}.paper-ai-tools>summary,.paper-extra-files>summary{font-weight:650;cursor:pointer}.paper-ai-tools>.btn{margin-top:10px}.paper-extra-files label{margin-top:12px}.paper-review-confirm{font-size:12px!important;margin-top:18px}.paper-recommended-option{background:#f2f7ff!important;border-color:#8db4ff!important}.lesson-flow-explainer{padding:16px 20px;background:#eef5ff;border:1px solid #dbe8fc;border-radius:16px;margin:0 0 18px}.lesson-flow-explainer strong{font-size:14px;color:#2459a4}.lesson-flow-explainer p{font-size:12px;color:#6b809c;margin:7px 0 0;line-height:1.7}.paper-attempt-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;font-size:12px;color:#71829a}.paper-student-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(330px,.7fr);gap:24px}.paper-student-layout .exercise-preview iframe{height:72vh;min-height:450px}.paper-student-answers{min-width:0;max-height:78vh;overflow-y:auto;padding:0 4px 6px}.paper-student-answers .practice-clock{position:sticky;top:0;z-index:2;background:#f1f6ff;font-size:12px;margin:0 0 12px}.paper-answer-progress{font-size:12px;font-weight:650;color:#4378b7}.paper-student-row{padding:12px 14px 14px;border:1px solid #e1e8f2;border-radius:12px;margin:0 0 12px}.paper-student-row legend{font-size:12px;font-weight:700;padding:0 5px;color:#263a55}.paper-letter-options{display:flex;gap:8px;flex-wrap:wrap}.paper-letter{position:relative;cursor:pointer}.paper-letter input{position:absolute;opacity:0;width:1px;height:1px}.paper-letter span{display:grid;place-items:center;width:43px;height:41px;border-radius:10px;border:1px solid #d7e2f1;background:#fff;color:#627792;font-size:14px;font-weight:700;transition:background .15s,border-color .15s}.paper-letter input:checked+span{background:#2465e9;color:#fff;border-color:#2465e9}.paper-letter input:focus-visible+span{outline:3px solid #9cc4ff;outline-offset:2px}.paper-letter.right span{background:#e3f8ef!important;color:#13815d!important;border-color:#7ed3b0!important}.paper-letter.wrong input:checked+span{background:#fff0f0;color:#c94343;border-color:#efb6b6}.paper-student-answers .form-actions{position:sticky;bottom:0;background:#fff;padding:14px 0 4px;margin-top:12px}.paper-student-answers .form-actions>.btn{width:100%}@media(max-width:1000px){.paper-editor-layout{grid-template-columns:1fr}.paper-editor-layout .paper-source-column{position:static}.paper-editor-layout .exercise-preview iframe{height:48vh;min-height:280px}}@media(max-width:760px){.paper-student-layout{grid-template-columns:1fr}.paper-student-layout .exercise-preview iframe{height:45vh;min-height:260px}.paper-student-answers{max-height:none;overflow:visible}.paper-key-head,.paper-key-row{grid-template-columns:30px minmax(70px,.8fr) minmax(100px,1.2fr);gap:7px;padding:10px}.paper-bulk{align-items:stretch;flex-direction:column}.paper-steps{gap:10px;padding:12px}.paper-steps>span{font-size:10px}.paper-steps b{width:21px;height:21px}.paper-attempt-heading{align-items:start;flex-direction:column}.paper-student-answers .practice-clock{position:static}}
.paper-coverage{padding:16px;background:#f6f9ff;border:1px solid #dfe8f7;border-radius:14px;margin:0 0 20px}.paper-coverage>strong{font-size:13px}.paper-coverage-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}.paper-coverage-levels>div{display:grid;gap:5px;padding:12px;border:1px solid #dde6f2;border-radius:10px;background:#fff;font-size:12px}.paper-coverage-levels small{font-size:10px;color:#73859b}.paper-coverage-levels .available span{color:#13815d;font-weight:700}.paper-coverage-levels .missing span{color:#9a6c2a}.paper-coverage p{margin:8px 0 0;color:#657992;line-height:1.7}@media(max-width:500px){.paper-coverage-levels{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Student monitoring dialog: aligned toolbar and contained table. */
.student-monitor-detail{min-width:0}
.student-monitor-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px;padding:0 4px}
.student-monitor-toolbar h3{font-size:14px;font-weight:750;margin:0;line-height:1.5}
.student-monitor-toolbar p{font-size:12px;color:var(--text-muted);margin:5px 0 0}
.student-monitor-toolbar>.btn{min-height:38px;padding:8px 14px;font-size:12px;border-radius:11px;flex-shrink:0}
.student-monitor-detail>.table-wrap{border:1px solid var(--border-hairline);border-radius:14px;overflow-x:auto}
.student-monitor-detail table{margin:0}
.student-monitor-detail th,.student-monitor-detail td{padding:14px 18px}
.student-monitor-empty{padding:32px 22px;text-align:center;border:1px solid var(--border-hairline);border-radius:14px;background:var(--surface-subtle)}
.student-monitor-empty>.icon{width:28px;height:28px;color:var(--text-muted);margin-bottom:10px}
.student-monitor-empty h3{font-size:14px;line-height:1.5;margin:0 0 8px}
.student-monitor-empty p{font-size:12px;line-height:1.7;color:var(--text-muted);max-width:420px;margin:0 auto}
.student-monitor-pagination{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:16px;font-size:12px;color:var(--text-secondary)}
@media(max-width:500px){.student-monitor-toolbar{align-items:flex-start;flex-direction:column;gap:12px;padding:0}.student-monitor-toolbar>.btn{align-self:flex-start}.student-monitor-empty{padding:26px 16px}}

/* Results and study guidance have distinct, uncluttered workspaces. */
.paper-attempt-heading{flex-wrap:wrap}
.paper-result-nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.paper-result-current{font-size:12px;font-weight:750;padding:10px 14px;border-radius:10px;background:#eef4ff;color:#2459a4;border:1px solid #dce7fb}
.paper-result-nav>.btn{font-size:12px;min-height:38px;padding:9px 14px}
.paper-result-footer{display:flex;justify-content:flex-end;border-top:1px solid var(--border-hairline);padding-top:16px;margin-top:18px}
.paper-result-footer>.btn{min-width:112px}
.paper-student-answers .form-actions{position:static}
#modal:has(.work-review-page){width:min(940px,96vw);max-width:940px}
.work-review-page{max-width:850px;margin:0 auto;min-width:0}
.work-review-navigation{display:flex;align-items:center;margin-bottom:20px}
.work-review-navigation>.btn{font-size:12px;min-height:36px;padding:8px 12px}
.work-review-page #work-review-panel{padding:0;border:0;background:none;margin:0}
.work-review-page .report-text{font-size:14px;line-height:1.85;overflow-wrap:anywhere}
.work-review-page .review-next-step{margin:18px 0;padding:18px 20px;border-radius:14px}
.work-review-page .review-next-step p{white-space:pre-line;font-size:13px;line-height:1.85}
.work-review-page .review-finding{padding:16px 0;margin:0;border-bottom:1px solid var(--border-hairline)}
.work-review-page .review-finding>summary{font-size:14px;font-weight:750;cursor:pointer;color:var(--text-primary)}
.review-reflection{margin:22px 0 18px;border:1px solid #dce6f5;border-radius:14px;padding:15px 18px;background:#fafcff}
.review-reflection>summary{font-size:13px;font-weight:700;cursor:pointer}
.review-reasoning{margin:18px 0;padding:18px;border:1px solid #dce6f5;border-radius:14px;background:#f8fbff}
.review-reasoning h3{margin:0 0 7px;font-size:15px}
.review-reasoning>.small{font-size:12px;line-height:1.8;margin-bottom:15px}
.review-reasoning textarea{resize:vertical;min-height:100px;font-size:13px}
.review-choice-context{font-size:12px;color:#3567a9;margin:0 0 12px}
.work-review-page .completion-choice{font-size:12px;line-height:1.8}
@media(max-width:600px){.paper-result-nav{gap:7px}.paper-result-current,.paper-result-nav>.btn{font-size:11px;padding:8px 10px}.review-reasoning{padding:14px}.work-review-page .review-next-step{padding:15px}.work-review-page .form-actions{flex-wrap:wrap}}
.checkin-detail-actions{flex-wrap:wrap;gap:10px}.checkin-detail-actions>.btn{white-space:normal}@media(max-width:600px){.checkin-detail-actions>.btn{width:100%}}

.result-history-link{border:0;background:transparent;padding:0;cursor:pointer;font-family:inherit;text-align:right}
#modal:has(.result-history){width:min(980px,96vw);max-width:980px}
.result-history>p{margin:0 0 18px;line-height:1.8}
.result-history-list{border:1px solid var(--border-hairline);border-radius:14px;overflow:hidden}
.result-history-row{display:grid;grid-template-columns:130px minmax(0,1fr) 70px auto;align-items:center;gap:16px;padding:18px;border-bottom:1px solid var(--border-hairline)}
.result-history-row:last-child{border-bottom:0}
.result-history-row>time{font-size:11px;line-height:1.8;color:var(--text-muted)}
.result-history-content{display:grid;gap:8px;min-width:0;justify-items:start}
.result-history-content>strong{font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.result-history-content>.pill{font-size:10px}
.result-history-score{font-size:20px;color:var(--brand-blue);text-align:right;white-space:nowrap}
.result-history-score>small{font-size:11px;color:var(--text-muted);font-weight:500}
.result-history-row>.btn{font-size:11px;min-height:34px;padding:8px 12px}
@media(max-width:600px){.result-history-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:15px}.result-history-row>time{grid-column:1/-1}.result-history-row>.btn{grid-column:1/-1;justify-self:end}}