/* SMA48 Nexus — design system: modern, premium, minimal, 8px grid */

:root {
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50: #f8fafc;
  --white: #ffffff;

  --brand-700: #4338ca;
  --brand-600: #4f46e5;
  --brand-500: #6366f1;
  --brand-100: #e0e7ff;
  --brand-50: #eef2ff;
  --brand-25: #f7f8ff;
  --brand-300: #a5b4fc;

  --success-600: #16a34a;
  --success-100: #dcfce7;
  --warning-600: #d97706;
  --warning-100: #fef3c7;
  --danger-600: #dc2626;
  --danger-100: #fee2e2;
  --info-600: #0284c7;
  --info-100: #e0f2fe;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.055);
  --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.085);
  --shadow-lg: 0 24px 56px rgba(15, 23, 42, 0.14);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink-900);
  background: #f6f8fc;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: fixed; left: var(--space-4); top: -64px; z-index: 200;
  padding: 10px 16px; border-radius: var(--radius-sm); background: var(--ink-900);
  color: white; font-weight: 700; box-shadow: var(--shadow-lg); transition: top .15s ease;
}
.skip-link:focus { top: var(--space-4); }

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

h1, h2, h3, h4 { margin: 0 0 var(--space-2); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 var(--space-3); color: var(--ink-700); }

.muted { color: var(--ink-500); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }

/* Layout shell */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 280px;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 0 0, rgba(99, 102, 241, .09), transparent 240px),
    var(--white);
  border-right: 1px solid var(--ink-200);
  padding: var(--space-5) var(--space-4) var(--space-6);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-5);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink-900);
  border-bottom: 1px solid rgba(226, 232, 240, .8);
}
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
}
.brand small { display: block; font-weight: 500; color: var(--ink-500); font-size: 0.7rem; }

.nav-group { margin-bottom: var(--space-5); }
.nav-group-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-500); font-weight: 800; padding: 0 var(--space-3); margin-bottom: var(--space-2);
}
.nav-link {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: 10px;
  color: var(--ink-700);
  font-size: 0.9rem; font-weight: 500;
  margin-bottom: 3px; border: 1px solid transparent;
  transition: background .14s ease, color .14s ease, transform .14s ease, border-color .14s ease;
}
.nav-link:hover { background: rgba(241, 245, 249, .9); color: var(--ink-900); text-decoration: none; transform: translateX(2px); }
.nav-link.active {
  background: linear-gradient(135deg, var(--brand-50), #f5f3ff);
  color: var(--brand-700); font-weight: 750; border-color: rgba(165, 180, 252, .38);
  box-shadow: inset 3px 0 0 var(--brand-600);
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-200);
  position: sticky; top: 0; z-index: 20; min-height: 72px;
}
.topbar .who { display: flex; align-items: center; gap: var(--space-3); }
.topbar-context { display: flex; flex-direction: column; min-width: 0; }
.topbar-context-label { font-size: .78rem; font-weight: 800; color: var(--ink-900); letter-spacing: .01em; }
.topbar-context-date { font-size: .72rem; color: var(--ink-500); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
  object-fit: cover;
}

/* Profil Saya */
.profile-hero { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.profile-hero-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-hero-avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 700;
}
.profile-hero-avatar-fallback { background: var(--brand-100); color: var(--brand-700); }
.profile-hero-avatar-edit {
  position: absolute; bottom: 0; right: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-600); color: white; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid var(--white); transition: background .12s ease;
}
.profile-hero-avatar-edit:hover { background: var(--brand-700); }
.profile-hero-info { flex: 1; min-width: 200px; }
.profile-hero-remove {
  display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 600;
  color: var(--danger-600); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit;
}
.profile-hero-remove:hover { text-decoration: underline; }
.profile-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.profile-row-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--ink-50); color: var(--ink-500);
  display: flex; align-items: center; justify-content: center;
}
.profile-row-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-500); font-weight: 700; }
.profile-row-value { font-size: 0.92rem; color: var(--ink-900); font-weight: 600; }

/* Profil guru — an operational dossier instead of a stack of generic cards. */
.staff-profile-page { display: grid; gap: var(--space-5); }
.staff-profile-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: 28px 30px; border: 1px solid rgba(165, 180, 252, .48); border-radius: 20px;
  background:
    radial-gradient(circle at 94% 10%, rgba(99, 102, 241, .14), transparent 210px),
    linear-gradient(135deg, var(--white), var(--brand-25));
  box-shadow: 0 16px 42px rgba(79, 70, 229, .08);
}
.staff-profile-hero::after {
  content: ''; position: absolute; right: -34px; bottom: -74px; width: 210px; height: 210px;
  border: 34px solid rgba(99, 102, 241, .055); border-radius: 50%; pointer-events: none;
}
.staff-profile-person { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.staff-profile-avatar-wrap { position: relative; flex: 0 0 auto; }
.staff-profile-avatar {
  width: 82px; height: 82px; display: flex; align-items: center; justify-content: center;
  border: 4px solid var(--white); border-radius: 22px; object-fit: cover;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .14);
}
.staff-profile-avatar-fallback {
  color: var(--brand-700); background: linear-gradient(145deg, var(--brand-100), #f5f3ff);
  font-size: 1.65rem; font-weight: 800; letter-spacing: -.04em;
}
.staff-profile-status-dot {
  position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px;
  border: 4px solid var(--white); border-radius: 50%; background: var(--ink-300);
}
.staff-profile-status-dot.is-active { background: var(--success-600); }
.staff-profile-identity { min-width: 0; }
.staff-profile-eyebrow {
  display: block; margin-bottom: 4px; color: var(--brand-600);
  font-size: .68rem; font-weight: 850; letter-spacing: .11em;
}
.staff-profile-identity h1 { margin-bottom: 5px; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.18; }
.staff-profile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--ink-500); font-size: .79rem; }
.staff-profile-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.staff-profile-meta > span + span:not(.staff-profile-account-status)::before { content: '•'; margin-right: 3px; color: var(--ink-300); }
.staff-profile-account-status {
  padding: 3px 9px; border-radius: 999px; color: var(--ink-500); background: var(--ink-100);
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.staff-profile-account-status.is-active { color: var(--success-600); background: var(--success-100); }
.staff-profile-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.staff-profile-roles span {
  padding: 4px 10px; border: 1px solid rgba(165, 180, 252, .35); border-radius: 999px;
  color: var(--brand-700); background: rgba(238, 242, 255, .82); font-size: .66rem; font-weight: 800; letter-spacing: .03em;
}
.staff-profile-actions { position: relative; z-index: 1; display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }

.staff-profile-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.staff-profile-kpi {
  min-width: 0; min-height: 128px; display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.staff-profile-kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ink-300); }
.staff-profile-kpi-icon {
  flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; color: var(--ink-500); background: var(--ink-100);
}
.staff-profile-kpi.is-brand::before { background: var(--brand-500); }
.staff-profile-kpi.is-brand .staff-profile-kpi-icon { color: var(--brand-700); background: var(--brand-100); }
.staff-profile-kpi.is-info::before { background: var(--info-600); }
.staff-profile-kpi.is-info .staff-profile-kpi-icon { color: var(--info-600); background: var(--info-100); }
.staff-profile-kpi.is-green::before { background: var(--success-600); }
.staff-profile-kpi.is-green .staff-profile-kpi-icon { color: var(--success-600); background: var(--success-100); }
.staff-profile-kpi.is-amber::before { background: var(--warning-600); }
.staff-profile-kpi.is-amber .staff-profile-kpi-icon { color: var(--warning-600); background: var(--warning-100); }
.staff-profile-kpi-copy { flex: 1; min-width: 0; }
.staff-profile-kpi-copy > span { display: block; color: var(--ink-500); font-size: .67rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.staff-profile-kpi-copy > strong { display: block; margin: 2px 0 1px; color: var(--ink-900); font-size: 1.55rem; line-height: 1.2; letter-spacing: -.03em; }
.staff-profile-kpi-copy > strong small { font-size: .72rem; letter-spacing: 0; }
.staff-profile-kpi-copy p { margin: 0; color: var(--ink-500); font-size: .7rem; line-height: 1.35; }
.staff-profile-progress { height: 4px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: var(--ink-100); }
.staff-profile-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-500), #8b5cf6); }

.staff-profile-primary-grid { display: grid; grid-template-columns: minmax(365px, .86fr) minmax(0, 1.14fr); gap: var(--space-5); align-items: stretch; }
.staff-profile-secondary-grid, .staff-profile-bottom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.staff-profile-panel {
  min-width: 0; padding: var(--space-5); border: 1px solid var(--ink-200); border-radius: 18px;
  background: var(--white); box-shadow: var(--shadow-sm);
}
.staff-profile-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.staff-profile-section-head > div > span {
  display: block; margin-bottom: 2px; color: var(--brand-600); font-size: .65rem; font-weight: 850; letter-spacing: .1em;
}
.staff-profile-section-head h2 { margin: 0; font-size: 1.08rem; letter-spacing: -.015em; }
.staff-profile-head-count, .staff-profile-semester, .staff-profile-readonly {
  flex: 0 0 auto; padding: 5px 10px; border-radius: 999px; color: var(--ink-500); background: var(--ink-100);
  font-size: .67rem; font-weight: 750;
}
.staff-profile-id-panel { display: flex; flex-direction: column; }
.staff-profile-card-preview {
  flex: 1; min-width: 0; overflow-x: auto; display: flex; align-items: center; justify-content: center;
  padding: 18px; border: 1px solid var(--ink-200); border-radius: 14px;
  background: radial-gradient(circle at 50% 0, var(--brand-50), var(--ink-50) 68%);
}
.staff-profile-card-preview .idcard { flex: 0 0 auto; box-shadow: 0 14px 30px rgba(15, 23, 42, .12); }
.staff-profile-panel-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: var(--space-3) 0 0; color: var(--ink-500); font-size: .7rem; }
.staff-profile-panel-note svg { color: var(--success-600); }

.staff-profile-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 1px solid var(--ink-200); border-radius: 14px; overflow: hidden; }
.staff-profile-info-grid > div { min-width: 0; padding: 13px 15px; border-bottom: 1px solid var(--ink-100); }
.staff-profile-info-grid > div:nth-child(odd) { border-right: 1px solid var(--ink-100); }
.staff-profile-info-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.staff-profile-info-grid > div.is-wide { grid-column: 1 / -1; border-right: 0; }
.staff-profile-info-grid > div.is-wide:nth-last-child(2) { border-bottom: 1px solid var(--ink-100); }
.staff-profile-info-grid dt { margin-bottom: 3px; color: var(--ink-500); font-size: .67rem; font-weight: 750; text-transform: uppercase; letter-spacing: .035em; }
.staff-profile-info-grid dd { margin: 0; color: var(--ink-900); font-size: .84rem; font-weight: 650; overflow-wrap: anywhere; }
.staff-profile-missing { color: var(--ink-300); font-weight: 550; font-style: italic; }

.staff-profile-subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.staff-profile-subject {
  display: flex; align-items: center; gap: var(--space-3); padding: 12px;
  border: 1px solid var(--ink-200); border-radius: 12px; background: var(--ink-50);
}
.staff-profile-subject > span { flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--brand-700); background: var(--brand-100); }
.staff-profile-subject strong, .staff-profile-subject small { display: block; }
.staff-profile-subject strong { color: var(--ink-900); font-size: .82rem; }
.staff-profile-subject small { margin-top: 1px; color: var(--ink-500); font-size: .68rem; }
.staff-profile-subsection-title { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); color: var(--ink-500); font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.staff-profile-subsection-title i { flex: 1; height: 1px; background: var(--ink-100); }
.staff-profile-homerooms { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.staff-profile-homerooms > div { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--ink-200); border-radius: 9px; }
.staff-profile-homerooms span { color: var(--ink-500); font-size: .68rem; }
.staff-profile-homerooms strong { color: var(--ink-900); font-size: .76rem; }

.staff-profile-contributions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--ink-200); border-radius: 14px; }
.staff-profile-contributions > div { min-width: 0; padding: 15px; text-align: center; border-right: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
.staff-profile-contributions > div:nth-child(3n) { border-right: 0; }
.staff-profile-contributions > div:nth-last-child(-n+3) { border-bottom: 0; }
.staff-profile-contributions span, .staff-profile-contributions strong { display: block; }
.staff-profile-contributions span { min-height: 30px; color: var(--ink-500); font-size: .68rem; line-height: 1.3; }
.staff-profile-contributions strong { margin-top: 3px; color: var(--ink-900); font-size: 1.35rem; }

.staff-profile-empty { min-height: 118px; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); border: 1px dashed var(--ink-300); border-radius: 14px; color: var(--ink-300); background: var(--ink-50); }
.staff-profile-empty.is-compact { min-height: 92px; }
.staff-profile-empty.is-warning { color: var(--warning-600); border-color: #fde68a; background: #fffbeb; }
.staff-profile-empty > div { display: flex; flex-direction: column; }
.staff-profile-empty strong { color: var(--ink-700); font-size: .84rem; }
.staff-profile-empty span { margin-top: 2px; color: var(--ink-500); font-size: .74rem; }

.staff-profile-schedule { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: var(--space-3); }
.staff-profile-day { min-width: 0; overflow: hidden; border: 1px solid var(--ink-200); border-radius: 14px; background: var(--ink-50); }
.staff-profile-day-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 10px 12px; color: var(--white); background: linear-gradient(135deg, var(--brand-600), #6d5df4); }
.staff-profile-day-head strong { font-size: .79rem; }
.staff-profile-day-head span { color: rgba(255,255,255,.78); font-size: .65rem; }
.staff-profile-day-slots { display: grid; gap: 1px; background: var(--ink-100); }
.staff-profile-slot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 9px; padding: 11px 12px; background: var(--white); }
.staff-profile-slot time { grid-row: span 2; padding: 3px 7px; align-self: start; border-radius: 7px; color: var(--brand-700); background: var(--brand-50); font-size: .64rem; font-weight: 800; }
.staff-profile-slot strong { min-width: 0; color: var(--ink-900); font-size: .76rem; overflow-wrap: anywhere; }
.staff-profile-slot > span { color: var(--ink-500); font-size: .68rem; }

.staff-profile-table { border: 1px solid var(--ink-200); border-radius: 14px; }
.staff-profile-table table { margin: 0; }
.staff-profile-table th { background: var(--ink-50); font-size: .67rem; }
.staff-profile-table td { padding-top: 13px; padding-bottom: 13px; }
.staff-profile-table-number { display: inline-flex; min-width: 32px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; color: var(--brand-700); background: var(--brand-50); font-size: .76rem; font-weight: 800; }

.staff-profile-history { display: grid; gap: var(--space-2); }
.staff-profile-history details { overflow: hidden; border: 1px solid var(--ink-200); border-radius: 12px; background: var(--white); }
.staff-profile-history summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 12px 14px; cursor: pointer; background: var(--ink-50); }
.staff-profile-history summary::-webkit-details-marker { display: none; }
.staff-profile-history summary > div { display: flex; flex-direction: column; }
.staff-profile-history summary strong { font-size: .8rem; }
.staff-profile-history summary span { color: var(--ink-500); font-size: .67rem; }
.staff-profile-history summary svg { color: var(--ink-500); transition: transform .15s ease; }
.staff-profile-history details[open] summary svg { transform: rotate(180deg); }
.staff-profile-history-rows { display: grid; }
.staff-profile-history-rows > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 14px; border-top: 1px solid var(--ink-100); }
.staff-profile-history-rows > div > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.staff-profile-history-rows strong { color: var(--ink-900); font-size: .76rem; }
.staff-profile-history-rows small { color: var(--ink-500); font-size: .68rem; }
.staff-profile-proctoring { max-height: 320px; overflow-y: auto; display: grid; gap: var(--space-2); }
.staff-profile-proctoring > div { display: flex; align-items: center; gap: var(--space-3); padding: 11px 12px; border: 1px solid var(--ink-200); border-radius: 11px; background: var(--ink-50); }
.staff-profile-proctoring > div > span { flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--success-600); background: var(--success-100); }
.staff-profile-proctoring strong, .staff-profile-proctoring small { display: block; }
.staff-profile-proctoring strong { color: var(--ink-900); font-size: .77rem; }
.staff-profile-proctoring small { margin-top: 2px; color: var(--ink-500); font-size: .66rem; }

@media (max-width: 1150px) {
  .staff-profile-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-profile-primary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .staff-profile-hero { align-items: flex-start; flex-direction: column; padding: var(--space-5); }
  .staff-profile-actions { width: 100%; justify-content: flex-start; }
  .staff-profile-secondary-grid, .staff-profile-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .staff-profile-page { gap: var(--space-4); }
  .staff-profile-hero { padding: var(--space-4); border-radius: var(--radius-lg); }
  .staff-profile-person { align-items: flex-start; gap: var(--space-3); }
  .staff-profile-avatar { width: 58px; height: 58px; border-radius: 16px; }
  .staff-profile-status-dot { width: 15px; height: 15px; border-width: 3px; }
  .staff-profile-identity h1 { font-size: 1.18rem; }
  .staff-profile-actions .btn { flex: 1; padding-left: 10px; padding-right: 10px; }
  .staff-profile-kpis { grid-template-columns: 1fr; gap: var(--space-2); }
  .staff-profile-kpi { min-height: 106px; }
  .staff-profile-panel { padding: var(--space-4); border-radius: var(--radius-lg); }
  .staff-profile-info-grid { grid-template-columns: 1fr; }
  .staff-profile-info-grid > div, .staff-profile-info-grid > div:nth-child(odd), .staff-profile-info-grid > div:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--ink-100); }
  .staff-profile-info-grid > div:last-child { border-bottom: 0; }
  .staff-profile-info-grid > div.is-wide { grid-column: auto; }
  .staff-profile-subjects { grid-template-columns: 1fr; }
  .staff-profile-contributions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-profile-contributions > div:nth-child(3n) { border-right: 1px solid var(--ink-100); }
  .staff-profile-contributions > div:nth-child(2n) { border-right: 0; }
  .staff-profile-contributions > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--ink-100); }
  .staff-profile-contributions > div:nth-last-child(-n+2) { border-bottom: 0; }
  .staff-profile-section-head { flex-wrap: wrap; }
}

@media print {
  .staff-profile-actions { display: none !important; }
  .staff-profile-page {
    gap: 4mm; color: #0f172a;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .staff-profile-hero {
    padding: 5mm; border-radius: 4mm; box-shadow: none; break-inside: avoid;
    background: linear-gradient(135deg, #fff, #f7f8ff);
  }
  .staff-profile-hero::after { display: none; }
  .staff-profile-avatar { width: 18mm; height: 18mm; border-radius: 4mm; box-shadow: none; }
  .staff-profile-identity h1 { font-size: 16pt; }
  .staff-profile-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2mm; break-inside: avoid; }
  .staff-profile-kpi { min-height: 25mm; padding: 3mm; gap: 2mm; border-radius: 3mm; box-shadow: none; }
  .staff-profile-kpi-icon { flex-basis: 8mm; width: 8mm; height: 8mm; border-radius: 2mm; }
  .staff-profile-kpi-copy > span { font-size: 6.5pt; }
  .staff-profile-kpi-copy > strong { font-size: 14pt; }
  .staff-profile-kpi-copy p { font-size: 6.5pt; }
  .staff-profile-primary-grid { grid-template-columns: 92mm minmax(0, 1fr); gap: 4mm; align-items: stretch; }
  .staff-profile-secondary-grid, .staff-profile-bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; }
  .staff-profile-panel { padding: 4mm; border-radius: 4mm; box-shadow: none; }
  .staff-profile-primary-grid, .staff-profile-secondary-grid { break-inside: avoid; }
  .staff-profile-section-head { margin-bottom: 3mm; }
  .staff-profile-section-head h2 { font-size: 11pt; }
  .staff-profile-card-preview { padding: 2.5mm; border-radius: 3mm; overflow: visible; }
  .staff-profile-card-preview .idcard { box-shadow: none; }
  .staff-profile-info-grid > div { padding: 2.5mm 3mm; }
  .staff-profile-info-grid dt, .staff-profile-info-grid dd { font-size: 7pt; }
  .staff-profile-subject { padding: 2.5mm; }
  .staff-profile-contributions > div { padding: 3mm; }
  .staff-profile-contributions span { min-height: 6mm; font-size: 6.5pt; }
  .staff-profile-contributions strong { font-size: 12pt; }
  .staff-profile-schedule { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2mm; }
  .staff-profile-day, .staff-profile-history details, .staff-profile-proctoring > div { break-inside: avoid; }
  .staff-profile-table { overflow: visible; }
  .staff-profile-table thead { display: table-header-group; }
  .staff-profile-table tr { break-inside: avoid; }
  .staff-profile-empty { min-height: 22mm; padding: 4mm; }
}

/* Profil siswa — academic overview, family context and longitudinal results. */
.student-profile-page { display: grid; gap: var(--space-5); }
.student-profile-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: 28px 30px; border: 1px solid rgba(125, 211, 252, .55); border-radius: 20px;
  background: radial-gradient(circle at 94% 8%, rgba(14, 165, 233, .14), transparent 220px), linear-gradient(135deg, var(--white), #f4f9ff);
  box-shadow: 0 16px 42px rgba(2, 132, 199, .08);
}
.student-profile-hero::after { content: ''; position: absolute; right: -30px; bottom: -78px; width: 210px; height: 210px; border: 34px solid rgba(14, 165, 233, .05); border-radius: 50%; pointer-events: none; }
.student-profile-person { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.student-profile-avatar-wrap { position: relative; flex: 0 0 auto; }
.student-profile-avatar {
  width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; object-fit: cover;
  border: 4px solid var(--white); border-radius: 22px; box-shadow: 0 12px 26px rgba(15, 23, 42, .14);
}
.student-profile-avatar-fallback { color: var(--info-600); background: linear-gradient(145deg, var(--info-100), #eef2ff); font-size: 1.65rem; font-weight: 800; letter-spacing: -.04em; }
.student-profile-status-dot { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border: 4px solid var(--white); border-radius: 50%; background: var(--ink-300); }
.student-profile-status-dot.is-active { background: var(--success-600); }
.student-profile-identity { min-width: 0; }
.student-profile-eyebrow { display: block; margin-bottom: 4px; color: var(--info-600); font-size: .68rem; font-weight: 850; letter-spacing: .11em; }
.student-profile-identity h1 { margin-bottom: 5px; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.18; }
.student-profile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--ink-500); font-size: .79rem; }
.student-profile-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.student-profile-meta > span + span::before { content: '•'; margin-right: 3px; color: var(--ink-300); }
.student-profile-statuses { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.student-profile-completeness { padding: 4px 9px; border-radius: 999px; color: var(--info-600); background: var(--info-100); font-size: .66rem; font-weight: 800; }
.student-profile-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

.student-profile-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.student-profile-kpi {
  position: relative; overflow: hidden; min-width: 0; min-height: 124px; display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm);
}
.student-profile-kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ink-300); }
.student-profile-kpi-icon { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--ink-500); background: var(--ink-100); }
.student-profile-kpi > div:nth-child(2) { min-width: 0; }
.student-profile-kpi > div:nth-child(2) > span { display: block; color: var(--ink-500); font-size: .67rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.student-profile-kpi > div:nth-child(2) > strong { display: block; margin: 2px 0 1px; color: var(--ink-900); font-size: 1.55rem; line-height: 1.2; letter-spacing: -.03em; }
.student-profile-kpi > div:nth-child(2) > p { margin: 0; color: var(--ink-500); font-size: .7rem; line-height: 1.35; }
.student-profile-kpi.is-brand::before { background: var(--brand-500); }
.student-profile-kpi.is-brand .student-profile-kpi-icon { color: var(--brand-700); background: var(--brand-100); }
.student-profile-kpi.is-info::before { background: var(--info-600); }
.student-profile-kpi.is-info .student-profile-kpi-icon { color: var(--info-600); background: var(--info-100); }
.student-profile-kpi.is-green::before { background: var(--success-600); }
.student-profile-kpi.is-green .student-profile-kpi-icon { color: var(--success-600); background: var(--success-100); }
.student-profile-kpi.is-danger::before { background: var(--danger-600); }
.student-profile-kpi.is-danger .student-profile-kpi-icon { color: var(--danger-600); background: var(--danger-100); }
.student-profile-kpi-progress { position: absolute; left: var(--space-4); right: var(--space-4); bottom: 13px; height: 4px; overflow: hidden; border-radius: 999px; background: var(--ink-100); }
.student-profile-kpi-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--success-600), #4ade80); }

.student-profile-primary-grid { display: grid; grid-template-columns: minmax(365px, .86fr) minmax(0, 1.14fr); gap: var(--space-5); align-items: stretch; }
.student-profile-secondary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.student-profile-panel { min-width: 0; padding: var(--space-5); border: 1px solid var(--ink-200); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); }
.student-profile-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.student-profile-section-head > div > span { display: block; margin-bottom: 2px; color: var(--info-600); font-size: .65rem; font-weight: 850; letter-spacing: .1em; }
.student-profile-section-head h2 { margin: 0; font-size: 1.08rem; letter-spacing: -.015em; }
.student-profile-head-pill { flex: 0 0 auto; padding: 5px 10px; border-radius: 999px; color: var(--ink-500); background: var(--ink-100); font-size: .67rem; font-weight: 750; }
.student-profile-id-panel { display: flex; flex-direction: column; }
.student-profile-card-preview { flex: 1; min-width: 0; overflow-x: auto; display: flex; align-items: center; justify-content: center; padding: 18px; border: 1px solid var(--ink-200); border-radius: 14px; background: radial-gradient(circle at 50% 0, var(--info-100), var(--ink-50) 68%); }
.student-profile-card-preview .idcard { flex: 0 0 auto; box-shadow: 0 14px 30px rgba(15, 23, 42, .12); }
.student-profile-panel-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: var(--space-3) 0 0; color: var(--ink-500); font-size: .7rem; }
.student-profile-panel-note svg { color: var(--success-600); }
.student-profile-completeness-bar { height: 5px; margin: -5px 0 var(--space-4); overflow: hidden; border-radius: 999px; background: var(--ink-100); }
.student-profile-completeness-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--info-600), var(--brand-500)); }
.student-profile-info-grid, .student-profile-family-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; overflow: hidden; border: 1px solid var(--ink-200); border-radius: 14px; }
.student-profile-info-grid > div, .student-profile-family-grid > div { min-width: 0; padding: 13px 15px; border-right: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
.student-profile-info-grid > div:nth-child(2n), .student-profile-family-grid > div:nth-child(2n) { border-right: 0; }
.student-profile-info-grid > div.is-wide, .student-profile-family-grid > div.is-wide { grid-column: 1 / -1; border-right: 0; }
.student-profile-info-grid > div:last-child, .student-profile-family-grid > div:last-child { border-bottom: 0; }
.student-profile-info-grid dt, .student-profile-family-grid dt { margin-bottom: 3px; color: var(--ink-500); font-size: .67rem; font-weight: 750; text-transform: uppercase; letter-spacing: .035em; }
.student-profile-info-grid dd, .student-profile-family-grid dd { margin: 0; color: var(--ink-900); font-size: .84rem; font-weight: 650; overflow-wrap: anywhere; }
.student-profile-missing { color: var(--ink-300); font-weight: 550; font-style: italic; }

.student-profile-current-class { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); padding: 14px; border: 1px solid rgba(125, 211, 252, .6); border-radius: 14px; background: linear-gradient(135deg, var(--info-100), var(--white)); }
.student-profile-current-class-icon { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--info-600); background: var(--white); }
.student-profile-current-class > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.student-profile-current-class span { color: var(--ink-500); font-size: .65rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.student-profile-current-class strong { color: var(--ink-900); font-size: 1rem; }
.student-profile-current-class small { margin-top: 1px; color: var(--ink-500); font-size: .69rem; }
.student-profile-attendance { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: var(--space-3); overflow: hidden; border: 1px solid var(--ink-200); border-radius: 12px; }
.student-profile-attendance > div { padding: 11px 8px; text-align: center; border-right: 1px solid var(--ink-100); }
.student-profile-attendance > div:last-child { border-right: 0; }
.student-profile-attendance strong, .student-profile-attendance span { display: block; }
.student-profile-attendance strong { color: var(--ink-900); font-size: 1rem; }
.student-profile-attendance span { color: var(--ink-500); font-size: .64rem; text-transform: uppercase; }
.student-profile-attendance .is-present strong { color: var(--success-600); }
.student-profile-attendance .is-sick strong { color: var(--info-600); }
.student-profile-attendance .is-permit strong { color: var(--warning-600); }
.student-profile-attendance .is-absent strong { color: var(--danger-600); }
.student-profile-placement-list { display: grid; gap: var(--space-2); }
.student-profile-placement-list > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 12px; border: 1px solid var(--ink-200); border-radius: 10px; }
.student-profile-placement-list > div > span:first-child { display: flex; flex-direction: column; }
.student-profile-placement-list strong { color: var(--ink-900); font-size: .77rem; }
.student-profile-placement-list small { color: var(--ink-500); font-size: .68rem; }

.student-profile-subsection-title { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); color: var(--ink-500); font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.student-profile-subsection-title i { flex: 1; height: 1px; background: var(--ink-100); }
.student-profile-guardians { display: grid; gap: var(--space-2); }
.student-profile-guardians > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; align-items: center; gap: var(--space-3); padding: 11px 12px; border: 1px solid var(--ink-200); border-radius: 11px; background: var(--ink-50); }
.student-profile-guardians > div > span { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--info-600); background: var(--info-100); }
.student-profile-guardians strong, .student-profile-guardians small { display: block; }
.student-profile-guardians strong { color: var(--ink-900); font-size: .77rem; }
.student-profile-guardians small { margin-top: 1px; color: var(--ink-500); font-size: .66rem; overflow-wrap: anywhere; }
.student-profile-guardians > div > i { color: var(--success-600); }
.student-profile-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }
.student-profile-guardians > div:has(form) { grid-template-columns: 34px minmax(0, 1fr) auto; }
.student-profile-guardians strong em { display: inline-flex; margin-left: 5px; padding: 2px 6px; border-radius: 999px; color: var(--info-600); background: var(--info-100); font-size: .58rem; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; vertical-align: 1px; }
.student-profile-guardians form { margin: 0; }
.student-profile-guardians form .btn { width: 30px; height: 30px; min-height: 30px; padding: 0; }
.student-profile-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.student-profile-choices > span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid rgba(165, 180, 252, .45); border-radius: 10px; color: var(--brand-700); background: var(--brand-50); font-size: .73rem; font-weight: 750; }
.student-profile-choices small { color: var(--ink-500); font-size: .63rem; font-weight: 600; }

.student-profile-subjects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.student-profile-subject { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 13px; border: 1px solid var(--ink-200); border-radius: 13px; background: var(--white); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.student-profile-subject:hover { transform: translateY(-2px); border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.student-profile-subject-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--brand-700); background: var(--brand-100); }
.student-profile-subject-copy { min-width: 0; }
.student-profile-subject-copy strong, .student-profile-subject-copy span, .student-profile-subject-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-profile-subject-copy strong { color: var(--ink-900); font-size: .8rem; }
.student-profile-subject-copy span { color: var(--ink-700); font-size: .69rem; }
.student-profile-subject-copy small { margin-top: 2px; color: var(--ink-500); font-size: .63rem; }
.student-profile-kkm { min-width: 42px; padding: 5px 7px; border-radius: 9px; text-align: center; background: var(--ink-50); }
.student-profile-kkm span, .student-profile-kkm strong { display: block; }
.student-profile-kkm span { color: var(--ink-500); font-size: .55rem; font-weight: 800; }
.student-profile-kkm strong { color: var(--ink-900); font-size: .78rem; }

.student-profile-grades { min-width: 0; }
.student-profile-grade-periods { display: grid; gap: var(--space-3); }
.student-profile-grade-periods details { overflow: hidden; border: 1px solid var(--ink-200); border-radius: 13px; }
.student-profile-grade-periods summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 13px 15px; cursor: pointer; background: var(--ink-50); }
.student-profile-grade-periods summary::-webkit-details-marker { display: none; }
.student-profile-grade-periods summary > div { display: flex; flex-direction: column; }
.student-profile-grade-periods summary strong { color: var(--ink-900); font-size: .83rem; }
.student-profile-grade-periods summary span { color: var(--ink-500); font-size: .68rem; }
.student-profile-grade-periods summary svg { color: var(--ink-500); transition: transform .15s ease; }
.student-profile-grade-periods details[open] summary svg { transform: rotate(180deg); }
.student-profile-grade-content { display: grid; gap: var(--space-3); padding: var(--space-3); background: var(--ink-50); border-top: 1px solid var(--ink-200); }
.student-profile-grade-subject { overflow: hidden; border: 1px solid var(--ink-200); border-radius: 11px; background: var(--white); }
.student-profile-grade-subject-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 10px 12px; border-bottom: 1px solid var(--ink-100); }
.student-profile-grade-subject-head strong { color: var(--ink-900); font-size: .78rem; }
.student-profile-grade-subject-head span { color: var(--ink-500); font-size: .66rem; }
.student-profile-grade-table { border: 0; border-radius: 0; }
.student-profile-grade-table table { margin: 0; }
.student-profile-grade-table th { background: var(--white); font-size: .64rem; }
.student-profile-grade-table td { padding-top: 10px; padding-bottom: 10px; font-size: .74rem; }
.student-profile-score { display: inline-flex; min-width: 45px; justify-content: center; padding: 4px 8px; border-radius: 8px; color: var(--ink-500); background: var(--ink-100); font-weight: 850; }
.student-profile-score.is-passed { color: var(--success-600); background: var(--success-100); }
.student-profile-score.is-low { color: var(--danger-600); background: var(--danger-100); }

.student-profile-empty { min-height: 118px; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); border: 1px dashed var(--ink-300); border-radius: 14px; color: var(--ink-300); background: var(--ink-50); }
.student-profile-empty.is-compact { min-height: 90px; }
.student-profile-empty.is-warning { color: var(--warning-600); border-color: #fde68a; background: #fffbeb; }
.student-profile-empty > div { display: flex; flex-direction: column; }
.student-profile-empty strong { color: var(--ink-700); font-size: .84rem; }
.student-profile-empty span { margin-top: 2px; color: var(--ink-500); font-size: .74rem; }

@media (max-width: 1150px) {
  .student-profile-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-profile-primary-grid { grid-template-columns: 1fr; }
  .student-profile-subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .student-profile-hero { align-items: flex-start; flex-direction: column; padding: var(--space-5); }
  .student-profile-actions { width: 100%; justify-content: flex-start; }
  .student-profile-secondary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .student-profile-page { gap: var(--space-4); }
  .student-profile-hero { padding: var(--space-4); border-radius: var(--radius-lg); }
  .student-profile-person { align-items: flex-start; gap: var(--space-3); }
  .student-profile-avatar { width: 58px; height: 58px; border-radius: 16px; }
  .student-profile-status-dot { width: 15px; height: 15px; border-width: 3px; }
  .student-profile-identity h1 { font-size: 1.18rem; }
  .student-profile-actions .btn { flex: 1; padding-left: 10px; padding-right: 10px; }
  .student-profile-kpis { grid-template-columns: 1fr; gap: var(--space-2); }
  .student-profile-kpi { min-height: 106px; }
  .student-profile-panel { padding: var(--space-4); border-radius: var(--radius-lg); }
  .student-profile-info-grid, .student-profile-family-grid { grid-template-columns: 1fr; }
  .student-profile-info-grid > div, .student-profile-family-grid > div { border-right: 0; }
  .student-profile-info-grid > div.is-wide, .student-profile-family-grid > div.is-wide { grid-column: auto; }
  .student-profile-subjects { grid-template-columns: 1fr; }
  .student-profile-section-head { flex-wrap: wrap; }
}

@media print {
  .student-profile-actions { display: none !important; }
  .student-profile-page { gap: 4mm; color: #0f172a; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .student-profile-hero { padding: 5mm; border-radius: 4mm; box-shadow: none; break-inside: avoid; background: linear-gradient(135deg, #fff, #f4f9ff); }
  .student-profile-hero::after { display: none; }
  .student-profile-avatar { width: 18mm; height: 18mm; border-radius: 4mm; box-shadow: none; }
  .student-profile-identity h1 { font-size: 16pt; }
  .student-profile-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2mm; break-inside: avoid; }
  .student-profile-kpi { min-height: 25mm; padding: 3mm; gap: 2mm; border-radius: 3mm; box-shadow: none; }
  .student-profile-kpi-icon { flex-basis: 8mm; width: 8mm; height: 8mm; border-radius: 2mm; }
  .student-profile-kpi > div:nth-child(2) > span, .student-profile-kpi > div:nth-child(2) > p { font-size: 6.5pt; }
  .student-profile-kpi > div:nth-child(2) > strong { font-size: 14pt; }
  .student-profile-primary-grid { grid-template-columns: 92mm minmax(0, 1fr); gap: 4mm; }
  .student-profile-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; }
  .student-profile-panel { padding: 4mm; border-radius: 4mm; box-shadow: none; }
  .student-profile-primary-grid, .student-profile-secondary-grid { break-inside: avoid; }
  .student-profile-section-head { margin-bottom: 3mm; }
  .student-profile-section-head h2 { font-size: 11pt; }
  .student-profile-card-preview { padding: 2.5mm; overflow: visible; }
  .student-profile-card-preview .idcard { box-shadow: none; }
  .student-profile-info-grid > div, .student-profile-family-grid > div { padding: 2.5mm 3mm; }
  .student-profile-info-grid dt, .student-profile-info-grid dd, .student-profile-family-grid dt, .student-profile-family-grid dd { font-size: 7pt; }
  .student-profile-subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2mm; }
  .student-profile-subject { padding: 2.5mm; break-inside: avoid; }
  .student-profile-grade-periods details, .student-profile-grade-subject, .student-profile-placement-list > div { break-inside: avoid; }
  .student-profile-grade-table { overflow: visible; }
  .student-profile-grade-table thead { display: table-header-group; }
  .student-profile-grade-table tr { break-inside: avoid; }
  .student-profile-empty { min-height: 22mm; padding: 4mm; }
}

/* Guardian account workflow */
.guardian-link-modal { max-width: 700px; padding: 0; overflow: hidden; }
.guardian-link-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--ink-200); background: linear-gradient(135deg, var(--brand-50), var(--white)); }
.guardian-link-head-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; color: var(--brand-700); background: var(--brand-100); }
.guardian-link-head span { display: block; color: var(--brand-700); font-size: .62rem; font-weight: 850; letter-spacing: .1em; }
.guardian-link-head h3 { margin: 1px 0 2px; font-size: 1.08rem; }
.guardian-link-head p { margin: 0; color: var(--ink-500); font-size: .76rem; }
.guardian-link-body { display: grid; gap: var(--space-4); padding: var(--space-5); }
.guardian-link-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.guardian-link-mode label { position: relative; cursor: pointer; }
.guardian-link-mode input { position: absolute; opacity: 0; pointer-events: none; }
.guardian-link-mode label > span { min-height: 86px; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-2); align-content: center; padding: 13px; border: 1px solid var(--ink-200); border-radius: 13px; color: var(--ink-500); background: var(--white); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.guardian-link-mode label > span svg { grid-row: 1 / 3; align-self: center; }
.guardian-link-mode label > span strong { color: var(--ink-900); font-size: .79rem; }
.guardian-link-mode label > span small { font-size: .66rem; line-height: 1.35; }
.guardian-link-mode input:checked + span { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); box-shadow: 0 0 0 2px rgba(99, 102, 241, .08); }
.guardian-link-mode input:focus-visible + span { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.guardian-link-mode input:disabled + span { opacity: .5; cursor: not-allowed; }
.guardian-link-new-fields { padding: var(--space-4); border: 1px solid var(--ink-200); border-radius: 13px; background: var(--ink-50); }
.guardian-link-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--ink-200); background: var(--ink-50); }
.guardian-link-footer > span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-500); font-size: .68rem; }
.guardian-link-footer > span svg { color: var(--success-600); }
.guardian-link-footer > div { display: flex; gap: var(--space-2); }

/* Student directory — compact operational view for large rosters. */
.student-roster-page { display: grid; gap: var(--space-5); }
.student-roster-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 30px 36px; border: 1px solid rgba(165, 180, 252, .5); border-radius: 20px; background: linear-gradient(135deg, var(--white), var(--brand-25)); box-shadow: var(--shadow-sm); }
.student-roster-hero::after { content: ''; position: absolute; width: 210px; height: 210px; right: -80px; top: -115px; border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, .12), rgba(99, 102, 241, 0) 70%); pointer-events: none; }
.student-roster-hero > div { position: relative; z-index: 1; }
.student-roster-eyebrow { display: block; margin-bottom: 3px; color: var(--brand-700); font-size: .66rem; font-weight: 850; letter-spacing: .11em; }
.student-roster-hero h1 { margin: 0 0 3px; font-size: 1.7rem; }
.student-roster-hero p { margin: 0; color: var(--ink-500); font-size: .83rem; }
.student-roster-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.student-roster-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.student-roster-kpi { position: relative; min-width: 0; display: flex; align-items: center; gap: var(--space-3); min-height: 104px; padding: var(--space-4); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.student-roster-kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: var(--ink-300); }
.student-roster-kpi > span { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; color: var(--ink-500); background: var(--ink-100); }
.student-roster-kpi div { min-width: 0; }
.student-roster-kpi small, .student-roster-kpi strong, .student-roster-kpi p { display: block; }
.student-roster-kpi small { color: var(--ink-500); font-size: .63rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.student-roster-kpi strong { margin: 1px 0; color: var(--ink-900); font-size: 1.35rem; line-height: 1.2; }
.student-roster-kpi p { margin: 0; color: var(--ink-500); font-size: .67rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.student-roster-kpi.is-brand::before { background: var(--brand-500); }
.student-roster-kpi.is-brand > span { color: var(--brand-700); background: var(--brand-100); }
.student-roster-kpi.is-success::before { background: var(--success-600); }
.student-roster-kpi.is-success > span { color: var(--success-600); background: var(--success-100); }
.student-roster-kpi.is-info::before { background: var(--info-600); }
.student-roster-kpi.is-info > span { color: var(--info-600); background: var(--info-100); }
.student-roster-kpi.is-warning::before { background: var(--warning-600); }
.student-roster-kpi.is-warning > span { color: var(--warning-600); background: var(--warning-100); }
.student-roster-kpi.is-danger::before { background: var(--danger-600); }
.student-roster-kpi.is-danger > span { color: var(--danger-600); background: var(--danger-100); }
.student-roster-filter, .student-roster-results { min-width: 0; padding: var(--space-5); border: 1px solid var(--ink-200); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); }
.student-roster-status-tabs { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-4); padding-bottom: var(--space-3); overflow-x: auto; border-bottom: 1px solid var(--ink-100); }
.student-roster-status-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 9px; color: var(--ink-500); font-size: .75rem; font-weight: 750; }
.student-roster-status-tabs a:hover { color: var(--ink-900); background: var(--ink-50); text-decoration: none; }
.student-roster-status-tabs a span { min-width: 22px; padding: 2px 6px; border-radius: 999px; text-align: center; background: var(--ink-100); font-size: .62rem; }
.student-roster-status-tabs a.is-active { color: var(--brand-700); background: var(--brand-100); }
.student-roster-status-tabs a.is-active span { color: var(--brand-700); background: var(--white); }
.student-roster-filter-form { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(150px, .28fr) minmax(165px, .32fr) auto auto; align-items: end; gap: var(--space-3); }
.student-roster-search { position: relative; }
.student-roster-search > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-300); pointer-events: none; }
.student-roster-search input { width: 100%; padding-left: 40px; }
.student-roster-select label { display: block; margin-bottom: 5px; color: var(--ink-500); font-size: .65rem; font-weight: 750; }
.student-roster-select select { width: 100%; }
.student-roster-results { padding: 0; overflow: visible; }
.student-roster-results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); }
.student-roster-results-head span { display: block; color: var(--info-600); font-size: .64rem; font-weight: 850; letter-spacing: .1em; }
.student-roster-results-head h2 { margin: 1px 0 0; font-size: 1.06rem; }
.student-roster-results-head p { margin: 0; color: var(--ink-500); font-size: .68rem; }
.student-roster-table-wrap { overflow: visible; border: 0; border-top: 1px solid var(--ink-200); border-radius: 0; }
.student-roster-table { margin: 0; }
.student-roster-table th { padding: 11px 16px; background: var(--ink-50); font-size: .64rem; letter-spacing: .065em; }
.student-roster-table td { padding: 12px 16px; vertical-align: middle; font-size: .76rem; }
.student-roster-table tbody tr:hover { background: #fbfcff; }
.student-roster-person { min-width: 200px; display: flex; align-items: center; gap: var(--space-3); color: inherit; }
.student-roster-person:hover { text-decoration: none; }
.student-roster-person > img, .student-roster-person > span { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; object-fit: cover; }
.student-roster-person > span { display: inline-flex; align-items: center; justify-content: center; color: var(--brand-700); background: var(--brand-100); font-size: .7rem; font-weight: 850; }
.student-roster-person div, .student-roster-cell-stack, .student-roster-status { display: flex; flex-direction: column; min-width: 0; }
.student-roster-person strong { color: var(--ink-900); font-size: .78rem; }
.student-roster-person small, .student-roster-cell-stack small, .student-roster-status small { margin-top: 2px; color: var(--ink-500); font-size: .63rem; }
.student-roster-cell-stack strong { color: var(--ink-700); font-size: .73rem; }
.student-roster-class-badge { display: inline-flex; padding: 5px 9px; border-radius: 8px; color: var(--info-600); background: var(--info-100); font-size: .69rem; font-weight: 800; }
.student-roster-muted { color: var(--ink-300); font-size: .68rem; font-style: italic; }
.student-roster-guardian { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; font-size: .67rem; font-weight: 750; }
.student-roster-guardian:hover { text-decoration: none; }
.student-roster-guardian.is-linked { color: var(--success-600); background: var(--success-100); }
.student-roster-guardian.is-unlinked { color: var(--warning-600); background: var(--warning-100); }
.student-roster-status { align-items: flex-start; gap: 1px; }
.student-roster-status small.is-danger { color: var(--danger-600); font-weight: 750; }
.student-roster-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.student-roster-action-menu { position: relative; }
.student-roster-action-menu > summary { list-style: none; cursor: pointer; }
.student-roster-action-menu > summary::-webkit-details-marker { display: none; }
.student-roster-action-menu > div { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: 190px; overflow: hidden; padding: 5px; border: 1px solid var(--ink-200); border-radius: 11px; background: var(--white); box-shadow: var(--shadow-md); }
.student-roster-action-menu a, .student-roster-action-menu button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 7px; text-align: left; color: var(--ink-700); background: transparent; font: inherit; font-size: .7rem; cursor: pointer; }
.student-roster-action-menu a:hover, .student-roster-action-menu button:hover { color: var(--ink-900); background: var(--ink-50); text-decoration: none; }
.student-roster-action-menu button.is-danger { color: var(--danger-600); }
.student-roster-action-menu form { margin: 0; }
.student-roster-empty { min-height: 250px; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-6); color: var(--ink-300); border-top: 1px solid var(--ink-200); }
.student-roster-empty div { display: flex; flex-direction: column; }
.student-roster-empty strong { color: var(--ink-700); font-size: .86rem; }
.student-roster-empty span { color: var(--ink-500); font-size: .73rem; }
.student-roster-results > .pagination { padding: var(--space-4) var(--space-5); margin: 0; border-top: 1px solid var(--ink-100); }
.student-roster-edit-modal { padding: var(--space-5); }
.student-roster-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--ink-200); }
.student-roster-modal-head span { display: block; color: var(--brand-700); font-size: .62rem; font-weight: 850; letter-spacing: .1em; }
.student-roster-modal-head h3 { margin: 1px 0 2px; }
.student-roster-modal-head p { margin: 0; color: var(--ink-500); font-size: .72rem; }
.student-roster-modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Guru & staf directory additions — shares the roster language, adds workload detail. */
.staff-directory-hero { background: linear-gradient(135deg, var(--white), #f2f8ff); }
.staff-directory-filter-form { grid-template-columns: minmax(300px, 1fr) minmax(175px, .28fr) auto auto; }
.staff-directory-filter-form .student-roster-search input { padding-left: 13px; }
.staff-directory-table th:first-child { min-width: 245px; }
.staff-directory-table th:nth-child(4) { min-width: 180px; }
.staff-directory-code { display: inline-flex; min-width: 36px; justify-content: center; padding: 5px 8px; border-radius: 8px; color: var(--brand-700); background: var(--brand-100); font-size: .68rem; font-weight: 850; }
.staff-directory-roles, .staff-directory-subjects { display: flex; flex-wrap: wrap; gap: 5px; }
.staff-directory-roles span { display: inline-flex; padding: 4px 7px; border-radius: 7px; color: var(--info-600); background: var(--info-100); font-size: .6rem; font-weight: 800; line-height: 1.25; }
.staff-directory-subjects span { display: inline-flex; padding: 4px 7px; border: 1px solid var(--ink-200); border-radius: 7px; color: var(--ink-700); background: var(--ink-50); font-size: .64rem; font-weight: 650; }
.staff-directory-attention { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; color: var(--warning-600); background: var(--warning-100); font-size: .64rem; font-weight: 750; white-space: nowrap; }
.staff-directory-class-count { min-width: 52px; display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; padding: 6px 9px; border-radius: 9px; color: var(--success-600); background: var(--success-100); }
.staff-directory-class-count strong { font-size: .82rem; }
.staff-directory-class-count small { font-size: .59rem; font-weight: 750; text-transform: uppercase; }
.staff-directory-edit-modal { max-width: 680px; }
.staff-directory-edit-modal select[multiple] { min-height: 170px; padding: 6px; }
.staff-directory-edit-modal select[multiple] option { padding: 7px 9px; border-radius: 6px; }
.staff-directory-edit-modal select[multiple] option:checked { color: var(--brand-700); background: var(--brand-100) linear-gradient(0deg, var(--brand-100), var(--brand-100)); }

@media (max-width: 1100px) {
  .student-roster-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-roster-filter-form { grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(150px, .45fr)); }
  .student-roster-filter-form > .btn { grid-row: 2; }
  .staff-directory-filter-form { grid-template-columns: minmax(260px, 1fr) minmax(175px, .35fr) auto auto; }
  .staff-directory-filter-form > .btn { grid-row: auto; }
}
@media (max-width: 760px) {
  .student-roster-page { gap: var(--space-4); }
  .student-roster-hero { align-items: flex-start; flex-direction: column; padding: var(--space-5); }
  .student-roster-hero-actions { width: 100%; justify-content: flex-start; }
  .student-roster-filter, .student-roster-results-head { padding: var(--space-4); }
  .student-roster-filter-form { grid-template-columns: 1fr; }
  .student-roster-filter-form > .btn { grid-row: auto; }
  .student-roster-results-head { align-items: flex-start; flex-direction: column; }
  .guardian-link-mode { grid-template-columns: 1fr; }
  .guardian-link-footer { align-items: stretch; flex-direction: column; }
  .guardian-link-footer > div { justify-content: flex-end; }
  .staff-directory-filter-form { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .student-roster-kpis { grid-template-columns: 1fr; gap: var(--space-2); }
  .student-roster-kpi { min-height: 92px; }
  .student-roster-hero-actions .btn { flex: 1; }
  .guardian-link-head { grid-template-columns: 40px minmax(0, 1fr) auto; padding: var(--space-4); }
  .guardian-link-head-icon { width: 40px; height: 40px; }
  .guardian-link-body { padding: var(--space-4); }
}

/* Notification bell + dropdown */
.notif-dropdown { position: relative; }
.notif-dropdown > summary { list-style: none; }
.notif-dropdown > summary::-webkit-details-marker { display: none; }
.notif-bell {
  position: relative; cursor: pointer; font-size: 1.2rem; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.notif-bell:hover { background: var(--ink-100); }
.notif-badge {
  position: absolute; top: 2px; right: 2px; background: var(--danger-600); color: white;
  font-size: 0.62rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 320px; max-height: 420px; overflow-y: auto;
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); z-index: 50;
}
.notif-panel-header { padding: var(--space-3) var(--space-4); font-weight: 700; border-bottom: 1px solid var(--ink-100); }
.notif-item { display: block; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ink-100); color: inherit; }
.notif-item:hover { background: var(--ink-50); text-decoration: none; }
.notif-item.unread { background: var(--brand-50); }
.notif-item.unread .notif-title { font-weight: 700; }
.notif-title { font-size: 0.85rem; }
.notif-body { font-size: 0.78rem; color: var(--ink-500); margin-top: 2px; }
.notif-time { font-size: 0.7rem; color: var(--ink-500); margin-top: 4px; }
.notif-empty { padding: var(--space-5) var(--space-4); text-align: center; color: var(--ink-500); font-size: 0.85rem; }
.notif-viewall { display: block; text-align: center; padding: var(--space-3); font-size: 0.82rem; font-weight: 600; border-top: 1px solid var(--ink-100); }

/* Account dropdown (name + avatar in topbar) */
.user-dropdown { position: relative; }
.user-dropdown > summary { list-style: none; }
.user-dropdown > summary::-webkit-details-marker { display: none; }
.user-summary {
  cursor: pointer; display: flex; align-items: center; gap: var(--space-3);
  padding: 4px 8px 4px 12px; border-radius: var(--radius-md);
}
.user-summary:hover { background: var(--ink-100); }
.user-summary-copy { text-align: right; min-width: 0; max-width: 290px; }
.user-summary-name { font-weight: 750; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-summary-role { color: var(--ink-500); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 220px;
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); z-index: 50; overflow: hidden; padding: 6px;
}
.user-panel-item {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 600; color: var(--ink-700); background: none; border: none; cursor: pointer; font-family: inherit;
}
.user-panel-item:hover { background: var(--ink-100); text-decoration: none; }
.user-panel-logout { color: var(--danger-600); }
.user-panel-logout:hover { background: var(--danger-100); }

.content {
  padding: clamp(20px, 2.35vw, 40px);
  max-width: 1680px; width: 100%; margin: 0 auto;
  background:
    radial-gradient(circle at 94% 0, rgba(99, 102, 241, .055), transparent 330px),
    transparent;
}

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-5); flex-wrap: wrap;
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid rgba(199, 210, 254, .7); border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(238,242,255,.88));
  box-shadow: 0 10px 30px rgba(79, 70, 229, .065);
}
.page-header::after {
  content: ''; position: absolute; z-index: -1; width: 220px; height: 220px;
  right: -76px; top: -118px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.2), rgba(99,102,241,0) 70%);
}
.page-header h1 { font-size: clamp(1.55rem, 2.2vw, 2rem); line-height: 1.2; margin-bottom: 7px; }
.page-header p { max-width: 82ch; margin-bottom: 0; line-height: 1.55; }
.page-header > .btn, .page-header > div:last-child:not(:first-child) { position: relative; z-index: 1; }
/* The title block (always the first child — h1/status-badge/subtitle) is a
   flex item whose default min-width:auto refused to shrink below its content's
   natural width, which is what was actually forcing the whole page wider than
   the viewport on mobile (the button group's own overflow was already handled
   by flex-wrap above — this was the other half of the bug). */
.page-header > div:first-child { min-width: 0; overflow-wrap: break-word; }

/* Cards */
.card {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.card-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.card-title h3 { margin: 0; }

.grid { display: grid; gap: var(--space-4); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
}

.stat-card {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, var(--white), #fbfcff); border: 1px solid var(--ink-200); border-radius: 16px;
  padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm);
}
.stat-card::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--brand-500), var(--brand-300)); }
.stat-card .value { font-size: 1.8rem; font-weight: 800; color: var(--ink-900); }
.stat-card .label { color: var(--ink-500); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-card .delta { font-size: 0.8rem; margin-top: var(--space-1); }

/* Icon-badged variant — additive, opt-in per card so the many other pages already
   using plain .stat-card (exam player, reports, homeroom, parent, etc.) are unaffected. */
.stat-card-icon { display: flex; align-items: center; gap: var(--space-3); }
.stat-card-icon-badge {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.stat-card-icon-badge-brand { background: var(--brand-100); color: var(--brand-700); }
.stat-card-icon-badge-green { background: var(--success-100); color: var(--success-600); }
.stat-card-icon-badge-amber { background: var(--warning-100); color: var(--warning-600); }
.stat-card-icon-badge-info { background: var(--info-100); color: var(--info-600); }

/* Dashboard "hari ini" hero — highlights the current-day schedule card */
.today-hero { border-color: var(--brand-300, var(--brand-200)); box-shadow: 0 0 0 2px var(--brand-100), var(--shadow-sm); }

/* Dashboard workspace -------------------------------------------------------
   Dashboard-only primitives keep the information density high without
   changing generic cards used across the rest of the application. */
.dashboard-shell { display: grid; gap: 22px; }
.dashboard-shell > * { min-width: 0; }
.dashboard-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  min-height: 194px; padding: clamp(25px, 3vw, 40px);
  border: 1px solid rgba(199, 210, 254, .9); border-radius: 24px;
  background:
    radial-gradient(circle at 88% 12%, rgba(99,102,241,.22), transparent 27%),
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(238,242,255,.93));
  box-shadow: 0 16px 42px rgba(79,70,229,.09);
}
.dashboard-hero::after {
  content: ''; position: absolute; z-index: -1; width: 270px; height: 270px;
  right: -120px; bottom: -180px; border-radius: 50%;
  border: 42px solid rgba(255,255,255,.42);
}
.dashboard-hero-copy { min-width: 0; max-width: 900px; }
.dashboard-eyebrow, .dashboard-section-kicker {
  display: block; color: var(--brand-600); font-size: .72rem; line-height: 1.2;
  font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
.dashboard-hero h1 { margin: 7px 0 8px; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.12; letter-spacing: -.035em; }
.dashboard-hero-copy > p { max-width: 760px; margin: 0; color: var(--ink-600); font-size: .98rem; line-height: 1.6; }
.dashboard-context { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.dashboard-context span {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 10px;
  border: 1px solid rgba(199,210,254,.85); border-radius: 999px;
  background: rgba(255,255,255,.78); color: var(--ink-600); font-size: .76rem; font-weight: 650;
}
.dashboard-context svg { flex: 0 0 auto; color: var(--brand-600); }
.dashboard-hero-actions { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex: 0 0 auto; }
.dashboard-card {
  min-width: 0; margin: 0; padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--ink-200); border-radius: 20px; background: var(--white);
  box-shadow: 0 9px 27px rgba(15,23,42,.045);
}
.dashboard-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.dashboard-section-heading.compact { align-items: center; }
.dashboard-section-heading h2 { margin: 5px 0 0; font-size: 1.18rem; line-height: 1.25; letter-spacing: -.015em; }
.dashboard-section-heading p { margin: 6px 0 0; color: var(--ink-500); font-size: .84rem; line-height: 1.5; }
.dashboard-count-badge, .dashboard-score {
  flex: 0 0 auto; padding: 7px 11px; border-radius: 999px;
  background: var(--ink-100); color: var(--ink-600); font-size: .75rem; font-weight: 750;
}
.dashboard-score.is-good { background: var(--success-100); color: var(--success-600); }
.dashboard-score.is-warning { background: var(--warning-100); color: var(--warning-600); }
.dashboard-text-link { flex: 0 0 auto; color: var(--brand-600); font-size: .79rem; font-weight: 700; }
.dashboard-text-link:hover { color: var(--brand-700); }

.dashboard-action-center { border-color: #fed7aa; background: linear-gradient(145deg, #fff, #fffcf7); }
.dashboard-action-list { display: grid; gap: 9px; }
.dashboard-action {
  display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 13px;
  padding: 13px 14px; border: 1px solid var(--ink-200); border-radius: 14px; background: rgba(255,255,255,.94);
}
.dashboard-action-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; }
.dashboard-action-warning .dashboard-action-icon { background: var(--warning-100); color: var(--warning-600); }
.dashboard-action-danger .dashboard-action-icon { background: var(--danger-100); color: var(--danger-600); }
.dashboard-action-info .dashboard-action-icon { background: var(--info-100); color: var(--info-600); }
.dashboard-action-copy { min-width: 0; }
.dashboard-action-copy h3 { margin: 0; font-size: .9rem; }
.dashboard-action-copy p { margin: 3px 0 0; color: var(--ink-500); font-size: .78rem; line-height: 1.4; }
.dashboard-clear-state {
  display: flex; align-items: center; gap: 13px; padding: 16px 19px; border: 1px solid #bbf7d0;
  border-radius: 16px; background: linear-gradient(135deg,#f0fdf4,#ecfdf5); color: var(--success-600);
}
.dashboard-clear-state div { display: grid; gap: 2px; }
.dashboard-clear-state strong { color: #166534; font-size: .88rem; }
.dashboard-clear-state span { color: #4d7c5d; font-size: .76rem; }

.dashboard-metrics { display: grid; gap: 14px; }
.dashboard-metrics-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-metric {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
  min-width: 0; padding: 18px; border: 1px solid var(--ink-200); border-radius: 17px;
  background: linear-gradient(145deg,#fff,#fbfcff); box-shadow: 0 6px 19px rgba(15,23,42,.04);
}
.dashboard-metric::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: currentColor; opacity: .72; }
.dashboard-metric-icon { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border-radius: 13px; background: currentColor; }
.dashboard-metric-icon svg { color: white; }
.dashboard-metric > div { display: grid; min-width: 0; }
.dashboard-metric > div > span { color: var(--ink-500); font-size: .69rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.dashboard-metric strong { margin-top: 2px; color: var(--ink-900); font-size: 1.62rem; line-height: 1.12; letter-spacing: -.03em; }
.dashboard-metric strong em { margin-left: 3px; color: var(--ink-400); font-size: .83rem; font-style: normal; font-weight: 700; }
.dashboard-metric small { margin-top: 3px; overflow: hidden; color: var(--ink-500); font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-metric.metric-brand { color: var(--brand-600); }
.dashboard-metric.metric-info { color: var(--info-600); }
.dashboard-metric.metric-success { color: var(--success-600); }
.dashboard-metric.metric-warning { color: var(--warning-600); }
.dashboard-metric.metric-danger { color: var(--danger-600); }

.dashboard-grid { display: grid; gap: 22px; }
.dashboard-grid-equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-grid-focus { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); }
.dashboard-empty { display: flex; min-height: 165px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--ink-400); text-align: center; }
.dashboard-empty.small { min-height: 105px; }
.dashboard-empty strong { color: var(--ink-700); font-size: .89rem; }
.dashboard-empty span { max-width: 390px; color: var(--ink-500); font-size: .78rem; }
.dashboard-empty .btn { margin-top: 5px; }

.dashboard-ratio-summary { display: flex; align-items: center; justify-content: center; gap: clamp(27px, 6vw, 70px); min-height: 185px; }
.dashboard-ring {
  --progress: 0; display: grid; place-items: center; align-content: center; flex: 0 0 126px; height: 126px;
  border-radius: 50%; background: radial-gradient(circle at center,#fff 57%,transparent 59%), conic-gradient(var(--brand-500) calc(var(--progress) * 1%), var(--ink-100) 0);
}
.dashboard-ring strong { color: var(--ink-900); font-size: 1.55rem; line-height: 1; }
.dashboard-ring span { margin-top: 4px; color: var(--ink-500); font-size: .7rem; }
.dashboard-ratio-list { display: grid; min-width: 210px; }
.dashboard-ratio-list > div { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--ink-100); }
.dashboard-ratio-list span { color: var(--ink-500); font-size: .79rem; }
.dashboard-ratio-list strong { color: var(--ink-900); font-size: .9rem; }

.dashboard-progress-list { display: grid; gap: 22px; padding: 13px 0 7px; }
.dashboard-progress-row { display: grid; grid-template-columns: 110px minmax(90px,1fr) 43px; align-items: center; gap: 13px; }
.dashboard-progress-row > div:first-child { display: grid; gap: 2px; }
.dashboard-progress-row strong { font-size: .82rem; }
.dashboard-progress-row div > span { color: var(--ink-500); font-size: .67rem; }
.dashboard-progress-row > b { color: var(--ink-600); font-size: .75rem; text-align: right; }
.dashboard-progress { display: block; overflow: hidden; height: 7px; border-radius: 99px; background: var(--ink-100); }
.dashboard-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--brand-500),#818cf8); }

.dashboard-workload-list { display: grid; gap: 13px; }
.dashboard-workload-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 11px; }
.dashboard-avatar-mini { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-100); color: var(--brand-700); font-size: .72rem; font-weight: 800; }
.dashboard-workload-row > div { display: grid; min-width: 0; gap: 6px; }
.dashboard-workload-row strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-workload-row > b { color: var(--ink-600); font-size: .72rem; }
.dashboard-quick-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.dashboard-quick-grid > a { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 13px; border: 1px solid var(--ink-200); border-radius: 13px; color: var(--ink-800); background: #fbfcff; }
.dashboard-quick-grid > a:hover { border-color: var(--brand-300); background: var(--brand-50); text-decoration: none; transform: translateY(-1px); }
.dashboard-quick-grid > a > span { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 10px; background: var(--brand-100); color: var(--brand-600); }
.dashboard-quick-grid div { display: grid; min-width: 0; }
.dashboard-quick-grid strong { font-size: .78rem; }
.dashboard-quick-grid small { overflow: hidden; color: var(--ink-500); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }

.dashboard-timeline { position: relative; display: grid; }
.dashboard-timeline::before { content: ''; position: absolute; top: 20px; bottom: 20px; left: 82px; width: 2px; background: var(--ink-100); }
.dashboard-timeline-item { position: relative; display: grid; grid-template-columns: 65px 16px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 67px; padding: 7px 0; }
.dashboard-time { display: grid; color: var(--ink-500); text-align: right; }
.dashboard-time strong { color: var(--ink-800); font-size: .81rem; }
.dashboard-time span { font-size: .66rem; }
.dashboard-timeline-dot { z-index: 1; display: block; width: 12px; height: 12px; margin: auto; border: 3px solid white; border-radius: 50%; background: var(--ink-300); box-shadow: 0 0 0 2px var(--ink-200); }
.dashboard-timeline-copy { display: grid; min-width: 0; }
.dashboard-timeline-copy strong { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-timeline-copy span { color: var(--ink-500); font-size: .7rem; }
.dashboard-state-pill { justify-self: end; padding: 5px 8px; border-radius: 999px; background: var(--ink-100); color: var(--ink-500); font-size: .65rem; font-weight: 700; white-space: nowrap; }
.dashboard-timeline-item.is-live .dashboard-timeline-dot { background: var(--success-500); box-shadow: 0 0 0 3px var(--success-100); }
.dashboard-timeline-item.is-live .dashboard-state-pill { background: var(--success-100); color: var(--success-600); }
.dashboard-timeline-item.is-upcoming .dashboard-timeline-dot { background: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.dashboard-timeline-item.is-upcoming .dashboard-state-pill { background: var(--brand-100); color: var(--brand-700); }
.dashboard-timeline-item.is-done { opacity: .67; }

.dashboard-priority-card, .dashboard-student-focus { background: linear-gradient(150deg,#fff,#fbfcff); }
.dashboard-priority-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--ink-100); color: var(--ink-800); }
.dashboard-priority-row:hover { color: var(--brand-700); text-decoration: none; }
.dashboard-priority-row > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--ink-100); color: var(--ink-600); }
.dashboard-priority-row.has-alert > span { background: var(--warning-100); color: var(--warning-600); }
.dashboard-priority-row div { display: grid; min-width: 0; }
.dashboard-priority-row strong { font-size: .8rem; }
.dashboard-priority-row small { color: var(--ink-500); font-size: .69rem; }
.dashboard-priority-row > b { color: var(--ink-400); }
.dashboard-inline-success { display: flex; align-items: center; gap: 8px; margin-top: 15px; padding: 11px; border-radius: 11px; background: var(--success-100); color: var(--success-600); font-size: .75rem; font-weight: 700; }

.dashboard-deadline-grid, .dashboard-class-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.dashboard-deadline-card { display: grid; gap: 4px; min-width: 0; padding: 14px; border: 1px solid var(--ink-200); border-radius: 13px; background: #fbfcff; color: var(--ink-800); }
.dashboard-deadline-card:hover { border-color: var(--brand-300); background: var(--brand-50); text-decoration: none; }
.dashboard-deadline-card > span { color: var(--brand-600); font-size: .67rem; font-weight: 700; }
.dashboard-deadline-card strong { overflow: hidden; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-deadline-card small { color: var(--ink-500); font-size: .67rem; }
.dashboard-class-card { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 13px; border: 1px solid var(--ink-200); border-radius: 13px; color: var(--ink-800); background: #fff; }
.dashboard-class-card:hover { border-color: var(--brand-300); background: var(--brand-50); text-decoration: none; transform: translateY(-1px); }
.dashboard-class-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-100); color: var(--brand-600); }
.dashboard-class-card div { display: grid; min-width: 0; }
.dashboard-class-card strong { overflow: hidden; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-class-card div > span { color: var(--ink-500); font-size: .68rem; }
.dashboard-class-card > b { color: var(--ink-400); }
.dashboard-guidance-banner { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 15px; padding: 18px 20px; border: 1px solid #bae6fd; border-radius: 17px; background: linear-gradient(135deg,#f0f9ff,#eff6ff); }
.dashboard-guidance-banner > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: #dbeafe; color: #2563eb; }
.dashboard-guidance-banner strong { font-size: .88rem; }
.dashboard-guidance-banner p { margin: 3px 0 0; color: var(--ink-500); font-size: .73rem; }

.dashboard-subsection-label { margin: 14px 0 3px; color: var(--brand-600); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dashboard-subsection-label.is-danger { color: var(--danger-600); }
.dashboard-task-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--ink-100); color: var(--ink-800); }
.dashboard-task-row:hover { color: var(--brand-700); text-decoration: none; }
.dashboard-task-row > div { display: grid; min-width: 0; }
.dashboard-task-row strong { overflow: hidden; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-task-row span { color: var(--ink-500); font-size: .67rem; }
.dashboard-task-row b { flex: 0 0 auto; padding: 5px 7px; border-radius: 7px; background: var(--brand-50); color: var(--brand-600); font-size: .64rem; }
.dashboard-task-row.is-overdue b { background: var(--danger-100); color: var(--danger-600); }
.dashboard-quiz-list, .dashboard-grade-list { display: grid; }
.dashboard-quiz-list > a { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--ink-100); color: var(--ink-800); }
.dashboard-quiz-list > a:hover { color: var(--brand-700); text-decoration: none; }
.dashboard-quiz-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--info-100); color: var(--info-600); }
.dashboard-quiz-list div { display: grid; min-width: 0; }
.dashboard-quiz-list strong { overflow: hidden; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-quiz-list small { color: var(--ink-500); font-size: .67rem; }
.dashboard-quiz-list > a > span:last-child { color: var(--ink-500); font-size: .66rem; white-space: nowrap; }
.dashboard-grade-list > div { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--ink-100); }
.dashboard-grade-mark { display: grid; place-items: center; min-height: 34px; padding: 4px 7px; border-radius: 9px; background: var(--brand-100); color: var(--brand-700); font-size: .72rem; font-weight: 800; }
.dashboard-grade-list div > div { display: grid; min-width: 0; }
.dashboard-grade-list strong { overflow: hidden; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-grade-list small { color: var(--ink-500); font-size: .67rem; }

.dashboard-guidance-home { display: grid; grid-template-columns: 74px minmax(0,1fr) auto; align-items: center; gap: 22px; min-height: 190px; background: linear-gradient(135deg,#fff,#f5f7ff); }
.dashboard-guidance-illustration { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 21px; background: var(--brand-100); color: var(--brand-600); }
.dashboard-guidance-home h2 { margin: 5px 0; font-size: 1.25rem; }
.dashboard-guidance-home p { margin: 0; color: var(--ink-500); font-size: .82rem; }

.dashboard-announcement-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.dashboard-announcement-card { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; padding: 14px; border: 1px solid var(--ink-200); border-radius: 14px; background: #fbfcff; }
.dashboard-announcement-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-100); color: var(--brand-600); }
.dashboard-announcement-card > div { min-width: 0; }
.dashboard-announcement-card strong { display: block; font-size: .82rem; }
.dashboard-announcement-card p { display: -webkit-box; overflow: hidden; margin: 5px 0; color: var(--ink-600); font-size: .73rem; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dashboard-announcement-card small { display: block; color: var(--ink-400); font-size: .64rem; }
.dashboard-attachment { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--brand-600); font-size: .68rem; font-weight: 700; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: var(--space-4); }
.modal-heading h3 { margin: 5px 0 0; }

@media (max-width: 1180px) {
  .dashboard-metrics-four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-deadline-grid, .dashboard-class-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .dashboard-hero { align-items: flex-start; flex-direction: column; min-height: 0; }
  .dashboard-hero-actions { justify-content: flex-start; }
  .dashboard-grid-equal, .dashboard-grid-focus { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 650px) {
  .dashboard-shell { gap: 15px; }
  .dashboard-hero, .dashboard-card { border-radius: 17px; }
  .dashboard-hero { padding: 22px 18px; }
  .dashboard-hero-actions { width: 100%; }
  .dashboard-hero-actions .btn { flex: 1 1 150px; }
  .dashboard-context span { width: 100%; border-radius: 10px; }
  .dashboard-metrics-four { grid-template-columns: minmax(0,1fr); gap: 9px; }
  .dashboard-metric { padding: 14px; }
  .dashboard-action { grid-template-columns: 34px minmax(0,1fr); }
  .dashboard-action .btn { grid-column: 2; justify-self: start; }
  .dashboard-section-heading { align-items: flex-start; }
  .dashboard-section-heading.compact { align-items: flex-start; }
  .dashboard-ratio-summary { align-items: stretch; flex-direction: column; }
  .dashboard-ring { align-self: center; }
  .dashboard-progress-row { grid-template-columns: 85px minmax(70px,1fr) 37px; gap: 8px; }
  .dashboard-quick-grid, .dashboard-deadline-grid, .dashboard-class-grid, .dashboard-announcement-grid { grid-template-columns: minmax(0,1fr); }
  .dashboard-timeline::before { left: 61px; }
  .dashboard-timeline-item { grid-template-columns: 44px 14px minmax(0,1fr); }
  .dashboard-state-pill { grid-column: 3; justify-self: start; margin-top: -8px; }
  .dashboard-time strong { font-size: .75rem; }
  .dashboard-guidance-banner, .dashboard-guidance-home { grid-template-columns: 52px minmax(0,1fr); }
  .dashboard-guidance-banner .btn, .dashboard-guidance-home .btn { grid-column: 1 / -1; width: 100%; }
  .dashboard-guidance-illustration { width: 52px; height: 52px; border-radius: 15px; }
  .dashboard-quiz-list > a { grid-template-columns: 36px minmax(0,1fr); }
  .dashboard-quiz-list > a > span:last-child { grid-column: 2; }
}

/* Pengumuman attachments */
.announcement-attachment-thumb { display: inline-block; margin-top: var(--space-2); }
.announcement-attachment-thumb img {
  max-width: 220px; max-height: 160px; border-radius: var(--radius-md); border: 1px solid var(--ink-200); display: block;
}
.announcement-attachment-file {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2);
  font-size: 0.82rem; font-weight: 600; color: var(--brand-700); background: var(--brand-50);
  border-radius: var(--radius-sm); padding: 6px 12px;
}
.announcement-attachment-file:hover { background: var(--brand-100); text-decoration: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px 18px; border-radius: 10px;
  font-weight: 600; font-size: 0.9rem; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  min-height: 44px;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--brand-600), #5b4ff0); color: white; box-shadow: 0 7px 16px rgba(79,70,229,.2); }
.btn-primary:hover { background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); box-shadow: 0 9px 20px rgba(79,70,229,.25); }
.btn-secondary { background: var(--white); color: var(--ink-700); border-color: var(--ink-300); }
.btn-secondary:hover { background: var(--ink-100); }
.btn-danger { background: var(--danger-600); color: white; }
.btn-danger:hover { background: #b91c1c; }
.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { background: var(--ink-100); }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; min-height: 32px; }
.btn-icon { padding: 6px; width: 32px; min-width: 32px; gap: 0; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Forms */
.form-group { margin-bottom: var(--space-4); }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }
label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: var(--space-1); color: var(--ink-700); }
.hint { font-size: 0.78rem; color: var(--ink-500); margin-top: var(--space-1); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="url"],
select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ink-300); border-radius: 10px;
  font-size: 0.9rem; font-family: inherit; color: var(--ink-900); background: var(--white);
  min-height: 44px; box-shadow: inset 0 1px 2px rgba(15,23,42,.025);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(99,102,241,.12); outline: none; }
.field-error { color: var(--danger-600); font-size: 0.8rem; margin-top: var(--space-1); }
.input-error { border-color: var(--danger-600) !important; }
.checkbox-row { display: flex; align-items: center; gap: var(--space-2); }
.checkbox-row input { width: 18px; height: 18px; min-height: unset; }

/* Table */
/* Live table search box */
.table-search {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--white); border: 1px solid var(--ink-200); border-radius: 12px;
  padding: 9px 13px; margin-bottom: var(--space-4); box-shadow: var(--shadow-xs);
}
.table-search-icon { font-size: 0.85rem; opacity: 0.6; }
.table-search-input {
  flex: 1; border: none; background: transparent; padding: 0; min-height: auto;
  font-size: 0.88rem; color: var(--ink-900);
}
.table-search-input:focus { outline: none; }
.table-search-count { white-space: nowrap; }

/* Server-side pagination controls (App\Core\Paginator + pagination_links()) */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.pagination-controls { display: flex; align-items: center; gap: var(--space-3); }
.pagination-disabled { opacity: 0.45; pointer-events: none; }

/* Drag-and-drop reorder list (Susun Urutan Guru) */
.reorder-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ink-200); border-radius: var(--radius-md); overflow: hidden; }
.reorder-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); background: var(--white); border-bottom: 1px solid var(--ink-100);
  cursor: grab;
}
.reorder-item:last-child { border-bottom: none; }
.reorder-item.is-dragging { opacity: 0.4; background: var(--brand-50); }
.reorder-handle { color: var(--ink-300); font-size: 1.1rem; user-select: none; }
.reorder-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.reorder-name { font-weight: 600; }
.reorder-move { display: flex; gap: var(--space-1); }

/* -webkit-overflow-scrolling:touch gives real momentum scroll on iOS Safari
   (without it, older iOS versions can feel like dragging does nothing at all).
   The explicit scrollbar styling below makes the scrollbar a visible, always-on
   ~10px bar instead of the OS/browser-default thin overlay one that only shows
   on hover — on a table wider than its container, a hidden-until-hover scrollbar
   gives no visual clue that dragging it (or swiping) would reveal more columns. */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ink-200); border-radius: 14px; background: var(--white);
  scrollbar-width: auto; scrollbar-color: var(--ink-300) var(--ink-100);
}
.table-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
.table-wrap::-webkit-scrollbar-track { background: var(--ink-100); }
.table-wrap::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 999px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 560px; }
thead th {
  text-align: left; background: #f8faff; color: var(--ink-500);
  font-weight: 700; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ink-200);
}
tbody td { padding: 14px var(--space-4); border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: #fafbff; }
tbody tr.row-self-checkin { background: var(--brand-50, #eef2ff); }
tbody tr.row-self-checkin:hover { background: var(--brand-100); }

/* Below this width a wide data-table (NIS/Nama/Ruang, Status/Nilai, etc.) never
   reads well no matter how good the horizontal-scroll affordance is — content
   at the far edge is still effectively hidden until a reader notices they can
   scroll. Switch to one stacked mini-card per row instead: no scrolling
   needed, everything is simply visible top-to-bottom. app.js populates each
   <td>'s data-label from the table's own <thead th> text so this works for
   every table already in the app without touching any view file. */
@media (max-width: 640px) {
  .table-wrap { overflow-x: visible; border: none; }
  .table-wrap table { min-width: 0; }
  .table-wrap thead { display: none; }
  .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap tbody tr {
    background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-md);
    margin-bottom: var(--space-3); padding: 0 var(--space-4);
  }
  .table-wrap tbody tr:last-child { margin-bottom: 0; }
  .table-wrap tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    padding: var(--space-3) 0; border-bottom: 1px solid var(--ink-100); text-align: right;
  }
  .table-wrap tbody td:last-child { border-bottom: none; }
  .table-wrap tbody td[data-label]::before {
    content: attr(data-label); font-weight: 700; color: var(--ink-500); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.03em; text-align: left; margin-right: auto;
  }
  .table-wrap tbody td:empty { display: none; }
}

/* Badges */
.badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.badge-neutral { background: var(--ink-100); color: var(--ink-700); }
.badge-success { background: var(--success-100); color: var(--success-600); }
.badge-warning { background: var(--warning-100); color: var(--warning-600); }
.badge-danger { background: var(--danger-100); color: var(--danger-600); }
.badge-info { background: var(--info-100); color: var(--info-600); }
.badge-muted { background: var(--ink-100); color: var(--ink-500); }

/* Alerts / flash */
.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); font-size: 0.9rem; display: flex; gap: var(--space-2); align-items: flex-start; }
.alert-success { background: var(--success-100); color: #14532d; }
.alert-error { background: var(--danger-100); color: #7f1d1d; }
.alert-info { background: var(--info-100); color: #0c4a6e; }
.alert-warning { background: var(--warning-100); color: #78350f; }

/* Empty state */
.empty-state { text-align: center; padding: var(--space-8) var(--space-4); color: var(--ink-500); }
.empty-state .icon { font-size: 2rem; margin-bottom: var(--space-2); }

/* Progress bar */
.progress { height: 8px; background: var(--ink-100); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand-500); border-radius: 999px; }

/* Auth page */
.auth-shell {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
  background: radial-gradient(circle at top, var(--brand-50), var(--ink-50));
  padding: var(--space-5);
}
.auth-card {
  width: 100%; max-width: 400px; background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-6); border: 1px solid var(--ink-200);
}
.auth-card .brand { justify-content: center; padding: 0 0 var(--space-5); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center;
  background: var(--ink-100); color: var(--ink-700); border: 1px solid transparent; border-radius: 999px; padding: 5px 12px; font-size: 0.78rem; font-weight: 650;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.tag-list a.chip:hover { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); text-decoration: none; }

.divider { height: 1px; background: var(--ink-200); margin: var(--space-4) 0; border: none; }

/* Main content + narrower action rail. Used where a page has one primary form
   and a set of secondary/batch actions that would otherwise leave the right
   half of a wide screen empty. minmax(0,…) so long content can shrink instead
   of forcing the grid wider than the viewport. */
.layout-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 1000px) { .layout-sidebar { grid-template-columns: minmax(0, 1fr); } }

/* Segmented filter — a link-based pill toggle (plain GET navigation, no JS),
   used where a small fixed set of mutually-exclusive filter values reads
   better as tabs than a <select> (e.g. Jenis: Semua/Reguler/PTS/PAS). */
.segmented {
  display: inline-flex; border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  overflow: hidden; background: var(--white);
}
.segmented a {
  padding: 9px 16px; font-size: 0.85rem; font-weight: 600; color: var(--ink-700);
  border-right: 1px solid var(--ink-200); white-space: nowrap;
}
.segmented a:last-child { border-right: none; }
.segmented a:hover { background: var(--ink-50); text-decoration: none; }
.segmented a.active { background: var(--brand-600); color: white; }
.segmented a.active:hover { background: var(--brand-700); }

/* Criteria step cards — used on the Generate Otomatis page to show generation rules */
.criteria-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (max-width: 900px) { .criteria-grid { grid-template-columns: 1fr; } }
.criteria-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); background: var(--ink-50); border-radius: var(--radius-md); }
.criteria-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-md);
  background: var(--brand-100); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.criteria-item strong { display: block; font-size: 0.88rem; color: var(--ink-900); margin-bottom: 2px; }
.criteria-item p { margin: 0; font-size: 0.82rem; color: var(--ink-700); line-height: 1.5; }

/* Day-picker pills (Hari Operasional toggle) */
.day-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.day-pill { position: relative; }
.day-pill input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.day-pill span {
  display: flex; align-items: center; justify-content: center;
  min-width: 60px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ink-300);
  font-size: 0.85rem; font-weight: 600; color: var(--ink-700); background: var(--white);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.day-pill input:checked + span { background: var(--brand-600); border-color: var(--brand-600); color: white; }
.day-pill input:focus-visible + span { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* Kelas Digital cards */
.course-card {
  display: flex; flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 8px 20px rgba(0,0,0,.08)); border-color: var(--brand-300, var(--brand-200)); }
.course-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-3); }
.course-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--brand-100); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 700;
}
.course-card-title { margin: 0 0 4px; }
.course-card-sub { margin-bottom: var(--space-3); }
.course-card-schedule {
  margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--ink-100);
  font-size: 0.78rem; color: var(--ink-600);
  display: flex; align-items: center; gap: 6px;
}
.course-card-icon { display: inline-flex; flex-shrink: 0; }
.course-card-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.course-card-stat {
  display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 600;
  color: var(--ink-600); background: var(--ink-50); border-radius: 999px; padding: 3px 10px;
}
.course-card-stat-warning { color: var(--warning-600); background: var(--warning-100); }
.course-card-enter {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; margin-top: var(--space-3);
}
.course-card-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--ink-100); }
.course-card-action {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.76rem; font-weight: 600; color: var(--ink-700);
  background: var(--ink-50); border-radius: var(--radius-sm); padding: 6px 4px; text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.course-card-action:hover { background: var(--brand-100); color: var(--brand-700); }

/* Reusable collection cards for quizzes, exams and future content indexes. */
.resource-card {
  display: flex; flex-direction: column; min-height: 250px; position: relative; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.resource-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-300));
}
.resource-card-exam::before { background: linear-gradient(90deg, #0284c7, #818cf8); }
.resource-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.resource-card-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); min-height: 25px; }
.resource-card-title { margin-bottom: 5px; line-height: 1.35; }
.resource-card-subtitle { margin-bottom: var(--space-3); }
.resource-card-time {
  display: flex; align-items: flex-start; gap: 7px; margin-bottom: var(--space-4);
  padding: 10px 12px; border-radius: 10px; background: var(--ink-50);
  color: var(--ink-500); font-size: .78rem; line-height: 1.45;
}
.resource-card-footer {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--ink-100);
}

/* Absen Mengajar (teacher check-in/out) — attendance/session-show.php */
.attendance-window-card {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm);
}
.attendance-window-icon { display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; background: var(--ink-100); color: var(--ink-500); }
.attendance-window-title { margin-bottom: 2px; color: var(--ink-900); font-size: .95rem; font-weight: 800; }
.attendance-window-detail { color: var(--ink-500); font-size: .78rem; }
.attendance-window-detail strong { margin-left: 5px; color: var(--ink-700); white-space: nowrap; }
.attendance-window-badge { padding: 5px 10px; border-radius: 999px; background: var(--ink-100); color: var(--ink-500); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.attendance-window-card.is-open { border-color: #86efac; background: linear-gradient(105deg, var(--success-100), var(--white) 45%); }
.attendance-window-card.is-open .attendance-window-icon, .attendance-window-card.is-open .attendance-window-badge { background: var(--success-600); color: white; }
.attendance-window-card.is-before { border-color: #bae6fd; background: linear-gradient(105deg, var(--info-100), var(--white) 45%); }
.attendance-window-card.is-before .attendance-window-icon, .attendance-window-card.is-before .attendance-window-badge { background: var(--info-600); color: white; }
.attendance-window-card.is-after { border-color: var(--ink-300); background: linear-gradient(105deg, var(--ink-100), var(--white) 45%); }
.attendance-window-card.is-after .attendance-window-icon { color: var(--ink-700); }
.attendance-audit-alert { align-items: center; }
.attendance-audit-alert svg { flex-shrink: 0; }
.teaching-attendance-card { position: relative; overflow: hidden; }
.teaching-attendance-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand-500); }
.teaching-attendance { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.teaching-attendance-step { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 220px; }
.teaching-attendance-step + .teaching-attendance-step { border-left: 1px solid var(--ink-200); padding-left: var(--space-5); }
@media (max-width: 700px) { .teaching-attendance-step + .teaching-attendance-step { border-left: none; padding-left: 0; } }
.teaching-attendance-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: var(--ink-100); color: var(--ink-400, var(--ink-500));
  transition: background .15s ease, color .15s ease;
}
.teaching-attendance-icon.is-done { background: var(--success-100); color: var(--success-600); }
.teaching-attendance-icon.is-blocked { background: var(--warning-100); color: var(--warning-600); }
.teaching-attendance-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-500); margin-bottom: 2px; }
.teaching-attendance-value { font-size: 0.92rem; font-weight: 600; color: var(--ink-900); }
.teaching-attendance-hint { font-size: 0.78rem; color: var(--ink-500); margin-top: 2px; }

.attendance-roster-card { padding: 0; overflow: hidden; }
.attendance-roster-card form > input[type="hidden"] { display: none; }
.attendance-topic-field { margin: 0; padding: var(--space-5); border-bottom: 1px solid var(--ink-200); background: linear-gradient(180deg, var(--white), var(--ink-50)); }
.attendance-topic-field input { background: var(--white); }
.attendance-roster-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-3); }
.attendance-roster-heading h3 { margin: 0; }
.attendance-roster-eyebrow { display: block; margin-bottom: 2px; color: var(--brand-600); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.attendance-roster-actions { display: flex; align-items: center; gap: var(--space-2); }
.attendance-summary { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: var(--space-2); padding: 0 var(--space-5) var(--space-4); }
.attendance-summary > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 9px 11px; border: 1px solid var(--ink-200); border-radius: 10px; background: var(--ink-50); }
.attendance-summary span { color: var(--ink-500); font-size: .7rem; font-weight: 700; }
.attendance-summary strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.attendance-summary .is-hadir strong { color: var(--success-600); }
.attendance-summary .is-izin strong { color: var(--info-600); }
.attendance-summary .is-sakit strong { color: var(--warning-600); }
.attendance-summary .is-alpa strong { color: var(--danger-600); }
.attendance-table-wrap { margin: 0 var(--space-5); border: 1px solid var(--ink-200); border-radius: var(--radius-md); }
.attendance-table { margin: 0; }
.attendance-table thead th { background: var(--ink-50); }
.attendance-table tbody tr { transition: background .15s ease; }
.attendance-table tbody tr:hover { background: var(--brand-50); }
.attendance-table tbody tr.row-self-checkin { background: #f5f7ff; }
.attendance-table tbody tr.row-checkin-outside-window { background: #fff7ed; box-shadow: inset 3px 0 var(--danger-600); }
.attendance-table tbody tr.row-checkin-outside-window:hover { background: var(--warning-100); }
.attendance-checkin-origin { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--brand-600); font-size: .68rem; font-weight: 700; flex-wrap: wrap; }
.attendance-checkin-origin svg { flex-shrink: 0; }
.attendance-checkin-origin.is-invalid-time { color: var(--danger-600); }
.attendance-checkin-origin strong { padding: 2px 6px; border-radius: 999px; background: var(--danger-100); font-size: .62rem; text-transform: uppercase; }
.attendance-save-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--ink-200); background: var(--ink-50); }
.attendance-save-bar > span { color: var(--ink-500); font-size: .74rem; }

@media (max-width: 700px) {
  .attendance-window-card { grid-template-columns: 42px minmax(0, 1fr); }
  .attendance-window-icon { width: 42px; height: 42px; }
  .attendance-window-badge { grid-column: 2; justify-self: start; }
  .attendance-roster-heading { align-items: flex-start; flex-direction: column; }
  .attendance-roster-actions { width: 100%; justify-content: space-between; }
  .attendance-summary { grid-template-columns: repeat(2, 1fr); }
  .attendance-table-wrap { margin: 0 var(--space-3); border: 0; }
  .attendance-save-bar { position: sticky; bottom: 0; z-index: 5; }
}

/* Roll-call status pills — replaces a plain <select> in attendance tables so
   hadir/izin/sakit/alpa are readable at a glance across a long roster. */
.status-pills { display: flex; gap: 5px; }
.status-pill { position: relative; }
.status-pill input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.status-pill span {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; font-size: 0.72rem; font-weight: 800;
  border: 1.5px solid transparent; background: var(--ink-100); color: var(--ink-400, var(--ink-500));
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .1s ease;
}
.status-pill input:focus-visible + span { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.status-pill input:checked + span { transform: scale(1.06); }
.status-pill-hadir span { border-color: var(--success-100); color: var(--success-600); }
.status-pill-hadir input:checked + span { background: var(--success-600); color: white; border-color: var(--success-600); }
.status-pill-izin span { border-color: var(--info-100); color: var(--info-600); }
.status-pill-izin input:checked + span { background: var(--info-600); color: white; border-color: var(--info-600); }
.status-pill-sakit span { border-color: var(--warning-100); color: var(--warning-600); }
.status-pill-sakit input:checked + span { background: var(--warning-600); color: white; border-color: var(--warning-600); }
.status-pill-alpa span { border-color: var(--danger-100); color: var(--danger-600); }
.status-pill-alpa input:checked + span { background: var(--danger-600); color: white; border-color: var(--danger-600); }

/* Weekly schedule day-cards — used on Jadwal Mengajar / Jadwal Belajar */
.day-card.is-today { border-color: var(--brand-500); box-shadow: 0 0 0 2px var(--brand-100), var(--shadow-sm); }
.day-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.day-card-header h3 { margin: 0; }
.schedule-slot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--ink-100); }
.schedule-slot:last-child { border-bottom: none; }
.schedule-time { font-weight: 700; font-size: 0.78rem; color: var(--brand-600); }
.schedule-status-link { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-decoration: none; }
.schedule-status-link:hover .badge { filter: brightness(0.95); }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

@media (max-width: 900px) {
  .sidebar { position: fixed; left: -280px; z-index: 30; transition: left .2s ease; box-shadow: var(--shadow-lg); }
  .sidebar.open { left: 0; }
  .content { padding: var(--space-4); }
  .topbar { padding: var(--space-3) var(--space-4); }
  body.menu-open { overflow: hidden; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 25; border: 0; padding: 0;
    background: rgba(15, 23, 42, .44); opacity: 0; pointer-events: none;
    backdrop-filter: blur(2px); transition: opacity .2s ease;
  }
  body.menu-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

  /* .notif-panel/.user-panel are position:absolute anchored to their own trigger
     (the bell/avatar), not to the topbar's right edge — on narrow screens the bell
     sits well left of the screen edge (the avatar+name block is what's flush right),
     so the 320px/220px-wide panel overflowed off-canvas to the left, cutting its
     own text off. Anchor to the viewport instead so width becomes fluid and it
     always fits regardless of where the trigger happens to sit. */
  .notif-panel, .user-panel {
    position: fixed; left: var(--space-4); right: var(--space-4); top: 72px;
    width: auto; max-width: none;
  }
}

.menu-toggle { display: none; align-items:center; justify-content:center; width:40px; height:40px; background: var(--white); border: 1px solid var(--ink-300); border-radius: 10px; padding: var(--space-2); cursor: pointer; }
@media (max-width: 900px) { .menu-toggle { display: inline-flex; } }

@media (max-width: 640px) {
  .content { padding: var(--space-3); }
  .page-header { padding: var(--space-4); border-radius: 16px; }
  .page-header > .btn, .page-header > div:not(:first-child) { width: 100%; }
  .page-header > .btn { justify-content: center; }
  .page-header > div:not(:first-child).flex { flex-wrap: wrap; }
  .page-header > div:not(:first-child).flex .btn { flex: 1 1 auto; }
  .card { padding: var(--space-4); border-radius: 16px; }
  .card-title { align-items: flex-start; flex-wrap: wrap; }
  .topbar-context-date, .user-summary-copy { display: none; }
  .topbar-context-label { font-size: .74rem; }
  .table-search { margin-bottom: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Course detail workspace — role-aware, hash-addressable tabs replace the old
   single long page. The cdw namespace keeps this richer layout isolated from
   generic cards/tables used across the rest of the LMS. */
.cdw-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
  padding: clamp(24px, 3vw, 38px);
  overflow: visible;
  border: 1px solid #d9ddff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 8%, rgba(99, 102, 241, .16), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(241,244,255,.96));
  box-shadow: 0 18px 45px rgba(79, 70, 229, .08);
}
.cdw-hero::after {
  content: '';
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 4px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(var(--brand-500), #8b5cf6);
}
.cdw-hero-main { min-width: 0; }
.cdw-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; color: var(--ink-500); font-size: .73rem; font-weight: 700; }
.cdw-eyebrow > span:not(.badge) { padding-left: 9px; border-left: 1px solid var(--ink-200); }
.cdw-hero h1 { margin: 0; color: var(--ink-950); font-size: clamp(1.75rem, 3vw, 2.35rem); letter-spacing: -.035em; line-height: 1.12; }
.cdw-hero-main > p { margin: 8px 0 0; color: var(--ink-500); font-size: .96rem; }
.cdw-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cdw-hero-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(148,163,184,.22); border-radius: 10px; color: var(--ink-600); background: rgba(255,255,255,.72); font-size: .76rem; font-weight: 650; }
.cdw-hero-actions { position: relative; z-index: 4; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cdw-more { position: relative; }
.cdw-more > summary { list-style: none; cursor: pointer; }
.cdw-more > summary::-webkit-details-marker { display: none; }
.cdw-more[open] > summary svg { transform: rotate(180deg); }
.cdw-more-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 210px; padding: 7px; border: 1px solid var(--ink-200); border-radius: 14px; background: var(--white); box-shadow: 0 18px 40px rgba(15,23,42,.16); }
.cdw-more-menu form { margin: 0; }
.cdw-more-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 11px; border: 0; border-radius: 9px; color: var(--ink-700); background: transparent; font: inherit; font-size: .83rem; font-weight: 650; text-align: left; cursor: pointer; }
.cdw-more-menu button:hover { background: var(--ink-50); color: var(--brand-700); }
.cdw-more-menu button.is-danger { color: var(--danger-600); }

.cdw-notice { display: flex; align-items: flex-start; gap: 12px; margin-bottom: var(--space-4); padding: 14px 16px; border-radius: 14px; font-size: .84rem; }
.cdw-notice-warning { border: 1px solid #fde68a; color: #92400e; background: #fffbeb; }
.cdw-notice svg { flex: 0 0 auto; margin-top: 1px; }
.cdw-notice strong { display: block; margin-bottom: 2px; }
.cdw-notice p { margin: 0; color: inherit; opacity: .86; }

.cdw-tabs {
  position: sticky;
  top: 76px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--space-4);
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}
.cdw-tabs::-webkit-scrollbar { display: none; }
.cdw-tabs button { position: relative; display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 13px; border: 0; border-radius: 11px; color: var(--ink-500); background: transparent; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cdw-tabs button:hover { color: var(--brand-700); background: #f5f6ff; }
.cdw-tabs button[aria-selected="true"] { color: var(--brand-700); background: #eef0ff; box-shadow: inset 0 0 0 1px #d9ddff; }
.cdw-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 24%; right: 24%; bottom: 3px; height: 2px; border-radius: 3px; background: var(--brand-500); }
.cdw-tabs b { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: var(--ink-500); background: rgba(148,163,184,.14); font-size: .67rem; }
.cdw-tabs button[aria-selected="true"] b { color: var(--brand-700); background: var(--white); }
.cdw-panel[hidden] { display: none !important; }

.cdw-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--space-4); }
.cdw-stats article { position: relative; min-width: 0; padding: 18px 20px; overflow: hidden; border: 1px solid var(--ink-200); border-radius: 16px; background: var(--white); box-shadow: 0 7px 22px rgba(15,23,42,.045); }
.cdw-stats article::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: #818cf8; }
.cdw-stats article.is-attention::before { background: #f59e0b; }
.cdw-stats span { display: block; color: var(--ink-500); font-size: .7rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.cdw-stats strong { display: block; margin: 5px 0 2px; color: var(--ink-950); font-size: 1.6rem; line-height: 1.1; }
.cdw-stats small { display: block; overflow: hidden; color: var(--ink-500); font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }
.cdw-overview-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--space-4); }
.cdw-section-card { margin-bottom: 0; padding: clamp(18px, 2vw, 26px); }
.cdw-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: 20px; }
.cdw-section-head h2 { margin: 2px 0 0; color: var(--ink-950); font-size: 1.13rem; letter-spacing: -.015em; }
.cdw-section-head p { margin: 5px 0 0; color: var(--ink-500); font-size: .78rem; line-height: 1.5; }
.cdw-kicker { color: var(--brand-600); font-size: .65rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.cdw-schedule-list { display: flex; flex-wrap: wrap; gap: 9px; }
.cdw-schedule { display: flex; flex: 1 1 190px; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--ink-200); border-radius: 13px; background: var(--ink-25, #fbfcfe); }
.cdw-schedule.has-warning { border-color: #fde68a; background: #fffbeb; }
.cdw-schedule-icon { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; flex: 0 0 auto; border-radius: 10px; color: var(--brand-600); background: #eef0ff; }
.cdw-schedule > div { min-width: 0; flex: 1; }
.cdw-schedule strong, .cdw-schedule small { display: block; }
.cdw-schedule strong { color: var(--ink-800); font-size: .8rem; }
.cdw-schedule small { margin-top: 1px; color: var(--ink-500); font-size: .72rem; }
.cdw-latest-session { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: 12px; padding: 14px 15px; border-radius: 13px; color: inherit; background: linear-gradient(135deg, #f8f9ff, #f2f7ff); text-decoration: none; }
.cdw-latest-session:hover { background: #eef1ff; }
.cdw-latest-session span > * { display: block; }
.cdw-latest-session small { margin-bottom: 3px; color: var(--brand-600); font-size: .6rem; font-weight: 850; letter-spacing: .09em; }
.cdw-latest-session strong { color: var(--ink-850, var(--ink-900)); font-size: .84rem; }
.cdw-latest-session em { margin-top: 2px; color: var(--ink-500); font-size: .7rem; font-style: normal; }
.cdw-latest-session b { color: var(--brand-700); font-size: .76rem; white-space: nowrap; }
.cdw-priority-list { display: grid; gap: 9px; }
.cdw-priority { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--ink-200); border-radius: 12px; color: var(--brand-600); }
.cdw-priority.warning { border-color: #fde68a; color: #d97706; background: #fffbeb; }
.cdw-priority > svg { justify-self: center; }
.cdw-priority strong, .cdw-priority p { display: block; }
.cdw-priority strong { color: var(--ink-800); font-size: .79rem; }
.cdw-priority p { margin: 2px 0 0; color: var(--ink-500); font-size: .7rem; line-height: 1.35; }
.cdw-priority a, .cdw-priority button { padding: 5px 8px; border: 0; border-radius: 7px; color: var(--brand-700); background: rgba(79,70,229,.08); font: inherit; font-size: .7rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.cdw-quick-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: var(--space-4); padding: 11px 13px; border: 1px solid var(--ink-200); border-radius: 14px; background: rgba(255,255,255,.72); }
.cdw-quick-actions > span { margin-right: 3px; color: var(--ink-500); font-size: .67rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.cdw-quick-actions button, .cdw-quick-actions a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 8px; color: var(--ink-700); background: var(--ink-50); font: inherit; font-size: .72rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.cdw-quick-actions button:hover, .cdw-quick-actions a:hover { color: var(--brand-700); background: #eef0ff; }

.cdw-empty { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 170px; padding: 24px; border: 1px dashed var(--ink-300); border-radius: 14px; color: var(--ink-400); text-align: left; background: var(--ink-25, #fbfcfe); }
.cdw-empty.compact { min-height: 84px; justify-content: flex-start; padding: 15px; }
.cdw-empty.is-success { border-color: #bbf7d0; color: #16a34a; background: #f0fdf4; }
.cdw-empty strong { display: block; color: var(--ink-700); font-size: .82rem; }
.cdw-empty p { margin: 3px 0 0; color: var(--ink-500); font-size: .73rem; line-height: 1.4; }
.cdw-inline-alert { display: flex; align-items: center; gap: 10px; margin: -5px 0 17px; padding: 11px 13px; border: 1px solid #fde68a; border-radius: 11px; color: #92400e; background: #fffbeb; font-size: .75rem; }
.cdw-inline-alert svg { flex: 0 0 auto; }
.cdw-inline-alert span { flex: 1; }
.cdw-inline-alert a { color: #92400e; font-weight: 750; white-space: nowrap; }
.cdw-table td > strong, .cdw-table td > small { display: block; }
.cdw-table td > small { margin-top: 2px; color: var(--ink-500); font-size: .69rem; }
.cdw-row-action { text-align: right; }
.cdw-total-pill { padding: 7px 10px; border-radius: 999px; color: var(--brand-700); background: #eef0ff; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.cdw-auto-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #bbf7d0; border-radius: 999px; color: #15803d; background: #f0fdf4; font-size: .7rem; font-weight: 750; white-space: nowrap; }

.cdw-material-list { overflow: hidden; border: 1px solid var(--ink-200); border-radius: 14px; background: var(--white); }
.cdw-material-row { padding: 14px 16px; }
.cdw-material-row:last-child { border-bottom: 0; }
.cdw-resource-links { display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px !important; margin-top: 8px; }
.cdw-resource-links a { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--ink-200); border-radius: 8px; color: var(--brand-700); background: var(--ink-50); font-size: .68rem; font-weight: 700; text-decoration: none; }
.cdw-resource-links a:hover { border-color: var(--brand-300); background: #eef0ff; }

.cdw-student-cell { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.cdw-student-cell > span:last-child { min-width: 0; }
.cdw-student-cell strong, .cdw-student-cell small { display: block; }
.cdw-student-cell strong { color: var(--ink-850, var(--ink-900)); line-height: 1.3; }
.cdw-student-cell small { margin-top: 3px; color: var(--ink-500); font-size: .68rem; line-height: 1.2; }
.cdw-student-avatar { width: 38px; height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid var(--white); border-radius: 12px; color: var(--brand-700); background: linear-gradient(145deg, #e0e7ff, #f5f3ff); box-shadow: 0 0 0 1px var(--ink-200); font-size: .7rem; font-weight: 850; }
.cdw-student-avatar img { width: 100%; height: 100%; object-fit: cover; }

.cdw-course-lock { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 10px 12px; border: 1px solid #bbf7d0; border-radius: 11px; color: #15803d; background: #f0fdf4; font-size: .71rem; }
.cdw-course-lock > svg { flex: 0 0 auto; }
.cdw-course-lock span, .cdw-course-lock strong { display: block; }
.cdw-course-lock strong { margin-bottom: 1px; font-size: .72rem; }
.cdw-resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.cdw-resource-grid .form-group { margin-bottom: 0; }
.cdw-resource-grid label { display: flex; align-items: center; gap: 6px; }
.cdw-upload-box { padding: 12px; border: 1px dashed #a5b4fc; border-radius: 11px; background: #f8f9ff; }
.cdw-upload-box input[type="file"] { padding: 8px; background: var(--white); }
.cdw-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cdw-check-grid label { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid var(--ink-200); border-radius: 11px; background: var(--ink-50); cursor: pointer; }
.cdw-check-grid input { flex: 0 0 auto; margin-top: 2px; }
.cdw-check-grid strong, .cdw-check-grid small { display: block; }
.cdw-check-grid strong { color: var(--ink-800); font-size: .71rem; }
.cdw-check-grid small { margin-top: 2px; color: var(--ink-500); font-size: .63rem; line-height: 1.35; }
.cdw-current-file { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: var(--space-4); padding: 11px 12px; border: 1px solid var(--ink-200); border-radius: 11px; background: var(--ink-50); }
.cdw-current-file > span { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--brand-700); background: #e9edff; }
.cdw-current-file strong, .cdw-current-file small { display: block; }
.cdw-current-file strong { color: var(--ink-800); font-size: .74rem; }
.cdw-current-file small { margin-top: 2px; color: var(--ink-500); font-size: .68rem; overflow-wrap: anywhere; }

.assignment-resource-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); border-color: #c7d2fe; background: linear-gradient(135deg, #f8f9ff, var(--white)); }
.assignment-resource-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; color: var(--brand-700); background: #e9edff; }
.assignment-resource-card h3 { margin: 2px 0 3px; color: var(--ink-900); font-size: .95rem; }
.assignment-resource-card p { margin: 0; color: var(--ink-500); font-size: .72rem; }
.assignment-reader-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); padding: clamp(20px, 3vw, 30px); border: 1px solid #d9ddff; border-radius: 20px; background: linear-gradient(135deg, var(--white), #f1f4ff); }
.assignment-reader-head h1 { margin: 3px 0 6px; font-size: clamp(1.4rem, 2.5vw, 2rem); }
.assignment-reader-head p { margin: 0; color: var(--ink-500); font-size: .8rem; }
.assignment-reader-notice { display: flex; align-items: flex-start; gap: 9px; margin-bottom: var(--space-3); padding: 11px 13px; border: 1px solid #bfdbfe; border-radius: 12px; color: #1d4ed8; background: #eff6ff; font-size: .72rem; }
.assignment-reader-notice svg { flex: 0 0 auto; }
.assignment-reader-notice strong { display: block; margin-bottom: 2px; }
.assignment-reader-frame { min-height: 72vh; overflow: auto; border: 1px solid var(--ink-200); border-radius: 16px; background: #dfe3ea; box-shadow: var(--shadow-sm); user-select: none; }
.assignment-reader-frame iframe { display: block; width: 100%; min-height: 72vh; border: 0; background: var(--white); }
.assignment-reader-frame img { display: block; max-width: 100%; margin: 0 auto; pointer-events: none; }

.cdw-curriculum { display: grid; gap: 10px; }
.cdw-chapter { overflow: hidden; border: 1px solid var(--ink-200); border-radius: 14px; background: var(--white); }
.cdw-chapter > summary { display: grid; grid-template-columns: 42px minmax(0, 1fr) 22px; align-items: center; gap: 11px; padding: 14px 16px; list-style: none; cursor: pointer; }
.cdw-chapter > summary::-webkit-details-marker { display: none; }
.cdw-chapter > summary:hover { background: #fafbff; }
.cdw-chapter > summary > span:nth-child(2) strong, .cdw-chapter > summary > span:nth-child(2) small { display: block; }
.cdw-chapter > summary strong { color: var(--ink-850, var(--ink-900)); font-size: .84rem; }
.cdw-chapter > summary small { margin-top: 2px; color: var(--ink-500); font-size: .68rem; }
.cdw-chapter > summary > svg { color: var(--ink-400); transition: transform .2s ease; }
.cdw-chapter[open] > summary > svg { transform: rotate(180deg); }
.cdw-chapter-number { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; color: var(--brand-700); background: #eef0ff; font-size: .75rem; font-weight: 850; }
.cdw-lessons { padding: 0 14px 14px; border-top: 1px solid var(--ink-100); background: #fcfcff; }
.cdw-lesson { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: start; gap: 11px; padding: 14px 2px; border-bottom: 1px solid var(--ink-100); }
.cdw-lesson.is-done { opacity: .82; }
.cdw-lesson-icon { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 10px; color: var(--brand-600); background: #eef0ff; }
.cdw-lesson-copy { min-width: 0; }
.cdw-lesson-copy > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.cdw-lesson-copy strong { color: var(--ink-850, var(--ink-900)); font-size: .82rem; }
.cdw-type { color: var(--brand-600); font-size: .61rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.cdw-lesson-copy p { display: -webkit-box; margin: 6px 0 0; overflow: hidden; color: var(--ink-500); font-size: .72rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cdw-lesson-copy > a { display: inline-block; margin-top: 6px; font-size: .71rem; font-weight: 700; }
.cdw-lesson-actions { display: flex; align-items: center; gap: 6px; }
.cdw-add-lesson { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 10px; border: 1px dashed #a5b4fc; border-radius: 9px; color: var(--brand-700); background: #f6f7ff; font: inherit; font-size: .72rem; font-weight: 750; cursor: pointer; }

.cdw-activity-list { overflow: hidden; border: 1px solid var(--ink-200); border-radius: 14px; }
.cdw-activity { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 24px; align-items: center; gap: 11px; min-height: 70px; padding: 11px 14px; border-bottom: 1px solid var(--ink-100); color: inherit; text-decoration: none; }
.cdw-activity:last-child { border-bottom: 0; }
.cdw-activity:hover { background: #fafbff; }
.cdw-activity-icon { display: inline-flex; align-items: center; justify-content: center; width: 39px; height: 39px; border-radius: 11px; color: var(--brand-600); background: #eef0ff; }
.cdw-activity-icon.quiz { color: #7c3aed; background: #f3e8ff; }
.cdw-activity-copy { min-width: 0; }
.cdw-activity-copy strong, .cdw-activity-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdw-activity-copy strong { color: var(--ink-850, var(--ink-900)); font-size: .82rem; }
.cdw-activity-copy small { margin-top: 4px; color: var(--ink-500); font-size: .7rem; }
.cdw-activity-arrow { color: var(--ink-400); font-weight: 800; }

.cdw-modal { padding: 0; overflow: hidden; }
.cdw-modal > form { padding: 20px 22px 22px; }
.cdw-modal-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) 34px; align-items: start; gap: 11px; padding: 18px 20px; border-bottom: 1px solid var(--ink-200); background: linear-gradient(135deg, #f7f8ff, #fff); }
.cdw-modal-head > span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; color: var(--brand-600); background: #e9edff; }
.cdw-modal-head h3 { margin: 1px 0 3px; font-size: 1rem; }
.cdw-modal-head p { margin: 0; color: var(--ink-500); font-size: .72rem; }
.cdw-modal-head > button { width: 32px; height: 32px; border: 0; border-radius: 9px; color: var(--ink-500); background: var(--white); font-size: 1.25rem; cursor: pointer; }
.cdw-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

@media (max-width: 1100px) {
  .cdw-hero { flex-direction: column; }
  .cdw-hero-actions { justify-content: flex-start; }
  .cdw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdw-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cdw-hero { padding: 22px 18px; border-radius: 18px; }
  .cdw-hero-actions, .cdw-hero-actions > .btn { width: 100%; }
  .cdw-hero-actions > .btn { justify-content: center; }
  .cdw-more { flex: 1; }
  .cdw-more > summary { justify-content: center; width: 100%; }
  .cdw-more-menu { left: 0; right: auto; width: min(260px, calc(100vw - 48px)); }
  .cdw-tabs { top: 66px; margin-left: -4px; margin-right: -4px; border-radius: 13px; }
  .cdw-tabs button { flex: 0 0 auto; }
  .cdw-tabs button span { display: inline; }
  .cdw-section-head { flex-direction: column; }
  .cdw-section-head .btn { width: 100%; justify-content: center; }
  .cdw-lesson { grid-template-columns: 36px minmax(0, 1fr); }
  .cdw-lesson-actions { grid-column: 2; flex-wrap: wrap; }
  .cdw-activity { grid-template-columns: 40px minmax(0, 1fr) 20px; }
  .cdw-activity > .badge { grid-column: 2; justify-self: start; }
  .cdw-activity-arrow { grid-column: 3; grid-row: 1 / span 2; }
  .cdw-resource-grid, .cdw-check-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .cdw-hero-meta span:last-child { width: 100%; }
  .cdw-stats { gap: 8px; }
  .cdw-stats article { padding: 15px 14px; }
  .cdw-stats strong { font-size: 1.35rem; }
  .cdw-stats small { white-space: normal; }
  .cdw-section-card { padding: 16px; }
  .cdw-priority { grid-template-columns: 32px minmax(0, 1fr); }
  .cdw-priority > a, .cdw-priority > button { grid-column: 2; justify-self: start; }
  .cdw-latest-session { align-items: flex-start; flex-direction: column; }
  .cdw-quick-actions > span { width: 100%; }
  .cdw-chapter > summary { padding: 12px; }
  .cdw-lessons { padding: 0 10px 10px; }
  .cdw-modal > form { padding: 18px; }
  .cdw-modal-actions .btn { flex: 1; }
  .cdw-current-file { grid-template-columns: 36px minmax(0, 1fr); }
  .cdw-current-file .btn { grid-column: 2; justify-self: start; }
  .assignment-resource-card { grid-template-columns: 42px minmax(0, 1fr); }
  .assignment-resource-card .btn { grid-column: 2; justify-self: start; }
  .assignment-reader-head { flex-direction: column; }
  .assignment-reader-head .btn { width: 100%; justify-content: center; }
}

/* Modal system — shared by the confirm-action modal (pengganti window.confirm())
   and edit modals; each usage nests its own content inside .modal-box. */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
  align-items: center; justify-content: center; z-index: 100; padding: var(--space-4);
}
.modal-overlay.is-open { display: flex; }
.modal-box {
  width: 100%; max-width: 420px; background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-6); border: 1px solid var(--ink-200);
  max-height: calc(100vh - var(--space-8)); overflow-y: auto;
}
.modal-box-wide { max-width: 560px; }
.confirm-modal-message { margin: 0 0 var(--space-5); font-size: 0.95rem; color: var(--ink-900); line-height: 1.5; white-space: pre-line; }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* Create-exam modal — a compact three-step form instead of a full empty page. */
.modal-box-exam-create {
  max-width: 820px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--space-8));
}
.exam-create-modal-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 38px;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: linear-gradient(135deg, rgba(238, 242, 255, .9), rgba(255, 255, 255, .96));
  border-bottom: 1px solid var(--ink-200);
}
.exam-create-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: linear-gradient(135deg, var(--brand-600), #7c3aed);
  box-shadow: 0 10px 24px rgba(79, 70, 229, .22);
}
.exam-create-eyebrow {
  display: block;
  margin: 1px 0 3px;
  color: var(--brand-600);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.exam-create-modal-head h2 { margin-bottom: 3px; font-size: 1.3rem; }
.exam-create-modal-head p { margin: 0; font-size: .86rem; color: var(--ink-500); }
.exam-create-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ink-500);
  cursor: pointer;
}
.exam-create-close:hover { background: var(--white); color: var(--ink-900); box-shadow: var(--shadow-xs); }
.exam-create-form { min-height: 0; display: flex; flex-direction: column; }
.exam-create-modal-body {
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: grid;
  gap: var(--space-3);
  background: var(--ink-50);
}
.exam-form-section {
  padding: var(--space-4);
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-xs);
}
.exam-form-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.exam-form-section-head > span {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-700);
  background: var(--brand-50);
  font-size: .77rem;
  font-weight: 800;
}
.exam-form-section-head strong { display: block; font-size: .9rem; color: var(--ink-900); }
.exam-form-section-head small { display: block; margin-top: 1px; font-size: .75rem; color: var(--ink-500); font-weight: 500; }
.exam-duration-field { max-width: 240px; }
.exam-number-suffix { position: relative; }
.exam-number-suffix input { padding-right: 62px; }
.exam-number-suffix span {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-500);
  font-size: .78rem;
  pointer-events: none;
}
.exam-policy-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink-700);
  background: var(--brand-25);
  font-size: .76rem;
  line-height: 1.45;
}
.exam-policy-note svg { flex: 0 0 auto; color: var(--brand-600); margin-top: 1px; }
.exam-create-modal-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--ink-200);
  background: var(--white);
}
.exam-create-modal-actions > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-500);
  font-size: .76rem;
}
.exam-create-modal-actions > span svg { color: var(--success-600); }
.exam-create-modal-actions > div { display: flex; gap: var(--space-2); }

@media (max-width: 640px) {
  .modal-box-exam-create { max-height: calc(100dvh - var(--space-4)); }
  .exam-create-modal-head { grid-template-columns: 40px minmax(0, 1fr) 34px; gap: var(--space-3); padding: var(--space-4); }
  .exam-create-modal-icon { width: 40px; height: 40px; border-radius: 12px; }
  .exam-create-modal-head h2 { font-size: 1.08rem; }
  .exam-create-modal-head p { display: none; }
  .exam-create-modal-body { padding: var(--space-3); }
  .exam-form-section { padding: var(--space-3); }
  .exam-form-section-head small { display: none; }
  .exam-duration-field { max-width: none; }
  .exam-create-modal-actions { align-items: stretch; flex-direction: column; padding: var(--space-3); }
  .exam-create-modal-actions > span { display: none; }
  .exam-create-modal-actions > div { width: 100%; }
  .exam-create-modal-actions .btn { flex: 1; justify-content: center; }
}

/* Print / "Simpan sebagai PDF" — sembunyikan chrome navigasi, tampilkan konten laporan bersih */
@media print {
  .sidebar, .topbar, .menu-toggle, form button, .btn, [data-flash], .modal-overlay { display: none !important; }
  .app-shell, .main, .content { display: block !important; padding: 0 !important; margin: 0 !important; }
  body { background: white; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  a[href]:after { content: ""; }
  .table-wrap { overflow: visible; }
}

/* ============================================================
   Landing page (halaman publik "/") — prefixed .lp- so none of
   it can leak into the authenticated dashboard styles above.
   ============================================================ */
.lp-container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--space-5); }

.lp-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-200);
}
.lp-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.lp-brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-900); }
.lp-brand:hover { text-decoration: none; }
.lp-brand-mark {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: #fff; font-weight: 800; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.lp-brand-text { font-weight: 800; font-size: 1.02rem; line-height: 1.2; }
.lp-brand-text small { display: block; font-weight: 500; font-size: 0.72rem; color: var(--ink-500); }

.lp-hero { background: radial-gradient(ellipse at top, var(--brand-50), var(--ink-50) 70%); border-bottom: 1px solid var(--ink-200); }
.lp-hero-inner { padding: clamp(56px, 9vw, 104px) var(--space-5); text-align: center; }
.lp-eyebrow {
  margin: 0 0 var(--space-3); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-600);
}
.lp-title {
  margin: 0 0 var(--space-4); font-size: clamp(1.9rem, 5vw, 3.1rem);
  line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance;
}
.lp-lede {
  margin: 0 auto var(--space-6); max-width: 58ch;
  font-size: clamp(0.98rem, 1.6vw, 1.12rem); color: var(--ink-700);
}
.lp-cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.btn-lg { padding: 14px 28px; font-size: 1rem; min-height: 52px; }
.lp-cta-note { font-size: 0.82rem; color: var(--ink-500); }

.lp-stats { background: var(--white); border-bottom: 1px solid var(--ink-200); }
.lp-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4); padding: var(--space-6) var(--space-5); text-align: center;
}
.lp-stat { display: flex; flex-direction: column; gap: 2px; }
.lp-stat-num { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: var(--brand-700); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lp-stat-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-500); }

.lp-section { padding: clamp(48px, 7vw, 80px) 0; }
.lp-section-alt { background: var(--white); border-top: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); }
.lp-h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); letter-spacing: -0.015em; margin: 0 0 var(--space-5); text-wrap: balance; }
.lp-muted { color: var(--ink-500); }

.lp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.lp-feature {
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.lp-feature h3 { font-size: 1.02rem; margin: var(--space-3) 0 var(--space-2); }
.lp-feature p { margin: 0; font-size: 0.9rem; color: var(--ink-700); }
.lp-feature-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
}
.lp-icon-brand { background: var(--brand-100); color: var(--brand-700); }
.lp-icon-green { background: var(--success-100); color: var(--success-600); }
.lp-icon-amber { background: var(--warning-100); color: var(--warning-600); }
.lp-icon-info  { background: var(--info-100); color: var(--info-600); }

.lp-roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-6); align-items: start; }
.lp-role-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lp-role-list li { padding: var(--space-4) 0; border-bottom: 1px solid var(--ink-200); display: flex; flex-direction: column; gap: 4px; }
.lp-role-list li:last-child { border-bottom: none; }
.lp-role-list strong { font-size: 0.95rem; }
.lp-role-list span { font-size: 0.88rem; color: var(--ink-700); }

.lp-footer { background: var(--white); border-top: 1px solid var(--ink-200); }
.lp-footer-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; padding: var(--space-5);
}
.lp-footer-inner strong { display: block; }
.lp-footer-inner span { font-size: 0.85rem; }

@media (max-width: 900px) {
  .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-roles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lp-features { grid-template-columns: minmax(0, 1fr); }
  .lp-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Logo sekolah — dipakai di sidebar, halaman login, dan halaman depan.
   object-fit:contain supaya lambang bulat tidak terpotong atau gepeng,
   dan latar gradasi merek dimatikan karena logonya punya warna sendiri. */
.mark-logo { background: none !important; box-shadow: none; object-fit: contain; padding: 0; }
.lp-brand-logo { background: none !important; box-shadow: none; object-fit: contain; padding: 0; }

/* Nav links halaman depan */
.lp-nav-links { display: flex; align-items: center; gap: var(--space-5); }
.lp-nav-links > a:not(.btn) { font-size: 0.9rem; font-weight: 600; color: var(--ink-700); }
.lp-nav-links > a:not(.btn):hover { color: var(--brand-600); text-decoration: none; }
@media (max-width: 640px) { .lp-nav-links > a:not(.btn) { display: none; } }

/* Landing header on a phone. At 378px the brand, the language switch and the Masuk
   button together wanted 364px of a 314px row, so the button was pushed off the edge.
   Each piece gives up what it can spare, in order of how little it costs:
     - the "SMAN 48 Jakarta" subtitle goes (logo + name already identify the school)
     - the language switch drops its ID/EN letters (the flag alone reads as the language,
       and on Windows the flag itself renders as those very letters)
     - padding shrinks everywhere
   That leaves roughly 280px used of 334px available — room to spare down to 320px. */
@media (max-width: 640px) {
  .lp-nav-inner { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .lp-brand { min-width: 0; gap: var(--space-2); }
  .lp-brand-mark { width: 34px; height: 34px; }
  .lp-brand-text {
    font-size: 0.95rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .lp-brand-text small { display: none; }

  .lp-nav-links { gap: var(--space-2); flex-shrink: 0; }
  .lp-nav-links .lang-switch { margin-right: 0; padding: 2px; }
  .lp-nav-links .lang-code { display: none; }
  .lp-nav-links .lang-switch-item { padding: 5px 7px; }
  .lp-nav-links .btn { padding: 8px 12px; font-size: 0.85rem; }
}

/* 320px (iPhone SE) is 10px short even after the trims above. The brand carries the
   shortfall via ellipsis rather than the button being pushed off-screen, but shaving
   the mark and the gap keeps the name readable instead of truncated. */
@media (max-width: 360px) {
  .lp-nav-inner { padding: var(--space-3); gap: var(--space-2); }
  .lp-brand-mark { width: 30px; height: 30px; }
  .lp-brand-text { font-size: 0.88rem; }
  .lp-nav-links .btn { padding: 8px 10px; }
}

/* Panduan per peran */
.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.lp-step {
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.lp-step-badge {
  display: inline-block; margin-bottom: var(--space-4); padding: 4px 12px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-700);
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
}
.lp-step ol { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--space-2); }
.lp-step li { font-size: 0.88rem; color: var(--ink-700); }
@media (max-width: 900px) { .lp-steps { grid-template-columns: minmax(0, 1fr); } }

/* Tanya jawab — <details> bawaan browser, tanpa JS, tetap bisa diakses keyboard */
.lp-faq { border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; }
.lp-faq details { border-bottom: 1px solid var(--ink-200); }
.lp-faq details:last-child { border-bottom: none; }
.lp-faq summary {
  cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: 600; font-size: 0.95rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: var(--ink-500); flex-shrink: 0; }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq summary:hover { background: var(--ink-50); }
.lp-faq details[open] summary { color: var(--brand-700); }
.lp-faq p { margin: 0; padding: 0 var(--space-5) var(--space-4); font-size: 0.9rem; color: var(--ink-700); }

/* Muncul-saat-digulir. Dimulai dari keadaan terlihat, lalu JS menandai
   .lp-reveal-ready — jadi kalau JS mati atau gagal, isinya tetap terbaca
   (bukan halaman kosong permanen, kegagalan paling umum pola animasi ini). */
.lp-reveal-ready .lp-reveal { opacity: 0; transform: translateY(14px); }
.lp-reveal-ready .lp-reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease;
}

/* ============================================================
   Landing page 2026 — public-facing product story.
   Kept under .lp-* so the authenticated workspace remains isolated.
   ============================================================ */
.public-page { background: #f8faff; overflow-x: hidden; }
.public-page main { display: block; }
.public-page .lp-container { max-width: 1200px; padding-inline: clamp(18px, 3vw, 32px); }

.public-page .lp-nav {
  background: rgba(255, 255, 255, .86); border-bottom-color: rgba(226, 232, 240, .82);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.public-page .lp-nav-inner { min-height: 76px; padding-block: 12px; }
.public-page .lp-brand-mark { width: 44px; height: 44px; }
.public-page .lp-brand-text { font-size: 1.06rem; letter-spacing: -.01em; }
.public-page .lp-nav-links { gap: clamp(14px, 2vw, 28px); }
.public-page .lp-nav-links > a:not(.btn) { position: relative; font-size: .84rem; }
.public-page .lp-nav-links > a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px;
  border-radius: 99px; background: var(--brand-600); transition: right .16s ease;
}
.public-page .lp-nav-links > a:not(.btn):hover::after { right: 0; }

.public-page .lp-hero {
  position: relative; overflow: hidden; border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(238,242,255,.9), rgba(248,250,255,.92) 74%, #fff 100%);
}
.lp-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .34;
  background-image: radial-gradient(rgba(79,70,229,.2) .7px, transparent .7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.lp-hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.lp-hero-orb-one { width: 420px; height: 420px; top: -250px; left: -150px; background: rgba(99,102,241,.14); }
.lp-hero-orb-two { width: 360px; height: 360px; right: -150px; bottom: -210px; background: rgba(14,165,233,.12); }
.public-page .lp-hero-inner {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .96fr) minmax(500px, 1.04fr);
  align-items: center; gap: clamp(40px, 6vw, 84px); padding-block: clamp(72px, 9vw, 124px) 118px;
  text-align: left;
}
.lp-hero-copy { min-width: 0; }
.public-page .lp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; padding: 7px 12px;
  border: 1px solid rgba(165,180,252,.58); border-radius: 999px; background: rgba(255,255,255,.76);
  color: var(--brand-700); font-size: .7rem; letter-spacing: .11em; box-shadow: var(--shadow-xs);
}
.lp-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-600); box-shadow: 0 0 0 4px rgba(22,163,74,.12); }
.public-page .lp-title {
  max-width: 760px; margin-bottom: 22px; font-size: clamp(2.55rem, 5.1vw, 4.45rem);
  line-height: 1.035; letter-spacing: -.048em; text-wrap: balance;
}
.public-page .lp-title span {
  background: linear-gradient(105deg, var(--brand-700), #6366f1 60%, #0284c7);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.public-page .lp-lede { max-width: 60ch; margin: 0 0 28px; font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.72; }
.lp-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.lp-hero-actions .btn-secondary { background: rgba(255,255,255,.78); }
.lp-hero-assurance { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--ink-700); font-size: .78rem; font-weight: 650; }
.lp-hero-assurance span { display: inline-flex; align-items: center; gap: 6px; }
.lp-hero-assurance svg { color: var(--success-600); }
.public-page .lp-cta-note { margin-top: 14px; display: block; }

/* Code-native product preview: no student data, screenshot, or heavy image asset. */
.lp-product-stage { position: relative; min-width: 0; perspective: 1100px; }
.lp-product-glow {
  position: absolute; inset: 8% 3% -4%; border-radius: 44px;
  background: linear-gradient(135deg, rgba(79,70,229,.26), rgba(14,165,233,.18));
  filter: blur(38px); opacity: .7;
}
.lp-product-window {
  position: relative; overflow: hidden; border: 1px solid rgba(199,210,254,.9); border-radius: 22px;
  background: #fff; box-shadow: 0 30px 70px rgba(30,41,59,.18), 0 8px 24px rgba(79,70,229,.1);
  transform: rotateY(-2deg) rotateX(1deg);
}
.lp-product-bar {
  height: 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 14px; border-bottom: 1px solid var(--ink-100); background: #fbfcff;
}
.lp-window-dots { display: flex; gap: 5px; }
.lp-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-300); }
.lp-window-dots i:first-child { background: #fca5a5; }
.lp-window-dots i:nth-child(2) { background: #fcd34d; }
.lp-window-dots i:last-child { background: #86efac; }
.lp-product-address { color: var(--ink-500); font-size: .65rem; font-weight: 700; }
.lp-product-live { justify-self: end; display: inline-flex; align-items: center; gap: 5px; color: var(--success-600); font-size: .62rem; font-weight: 800; }
.lp-product-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(22,163,74,.1); }
.lp-product-body { display: grid; grid-template-columns: 54px minmax(0,1fr); min-height: 390px; }
.lp-product-sidebar {
  display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 13px 9px;
  border-right: 1px solid var(--ink-100); background: #fff;
}
.lp-mini-brand { width: 30px; height: 30px; margin-bottom: 7px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg,var(--brand-700),var(--brand-500)); color:#fff; font-size:.62rem; font-weight:900; }
.lp-product-sidebar > span { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-300); }
.lp-product-sidebar > span.is-active { background: var(--brand-50); color: var(--brand-600); }
.lp-product-main { min-width: 0; padding: 22px; background: #f7f9fd; }
.lp-product-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.lp-product-heading div { display: flex; flex-direction: column; }
.lp-product-heading small { color: var(--ink-500); font-size: .62rem; }
.lp-product-heading strong { font-size: .92rem; }
.lp-product-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-size: .6rem; font-weight: 900; }
.lp-product-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 12px; }
.lp-product-metrics > div { display: grid; grid-template-columns: 29px 1fr; column-gap: 8px; padding: 11px; border: 1px solid var(--ink-100); border-radius: 11px; background: #fff; }
.lp-product-metric-icon { grid-row: 1/3; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; }
.lp-product-metric-icon.is-purple { background: var(--brand-100); color: var(--brand-700); }
.lp-product-metric-icon.is-blue { background: var(--info-100); color: var(--info-600); }
.lp-product-metric-icon.is-green { background: var(--success-100); color: var(--success-600); }
.lp-product-metrics small { color: var(--ink-500); font-size: .53rem; }
.lp-product-metrics strong { font-size: .8rem; line-height: 1.2; }
.lp-product-grid { display: grid; grid-template-columns: 1.5fr .8fr; gap: 12px; }
.lp-product-panel { border: 1px solid var(--ink-100); border-radius: 12px; background: #fff; padding: 14px; }
.lp-product-panel-title { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-size: .61rem; }
.lp-product-panel-title span { color: var(--brand-600); font-size: .52rem; font-weight: 700; }
.lp-schedule-row { display: grid; grid-template-columns: 32px 5px 1fr; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ink-100); }
.lp-schedule-row:last-child { border: 0; }
.lp-schedule-row time { color: var(--ink-500); font-size: .51rem; font-weight: 700; }
.lp-schedule-row > i { width: 5px; height: 24px; border-radius: 99px; background: var(--brand-500); }
.lp-schedule-row > i.is-blue { background: var(--info-600); }
.lp-schedule-row > i.is-green { background: var(--success-600); }
.lp-schedule-row div { display: flex; flex-direction: column; }
.lp-schedule-row strong { font-size: .58rem; }
.lp-schedule-row small { color: var(--ink-500); font-size: .48rem; }
.lp-product-progress { text-align: center; }
.lp-progress-ring { width: 82px; height: 82px; margin: 18px auto 13px; padding: 8px; border-radius: 50%; background: conic-gradient(var(--brand-600) 84%, var(--brand-100) 0); }
.lp-progress-ring span { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; background:#fff; font-size:1rem; font-weight:850; }
.lp-progress-ring small { font-size:.5rem; }
.lp-product-progress p { margin: 0 0 11px; color: var(--ink-500); font-size: .52rem; }
.lp-progress-line { height: 5px; border-radius:99px; background:var(--ink-100); overflow:hidden; }
.lp-progress-line span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand-600),var(--brand-300)); }
.lp-float-card {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; min-width: 164px;
  padding: 10px 12px; border: 1px solid rgba(226,232,240,.9); border-radius: 12px;
  background: rgba(255,255,255,.92); box-shadow: 0 12px 30px rgba(15,23,42,.13); backdrop-filter: blur(9px);
}
.lp-float-card-score { left: -32px; bottom: 38px; }
.lp-float-card-secure { right: -24px; top: 72px; }
.lp-float-icon { width: 31px; height:31px; display:grid; place-items:center; border-radius:9px; flex-shrink:0; }
.lp-float-icon.is-green { background:var(--success-100); color:var(--success-600); }
.lp-float-icon.is-purple { background:var(--brand-100); color:var(--brand-700); }
.lp-float-card div { display:flex; flex-direction:column; }
.lp-float-card small { color:var(--ink-500); font-size:.53rem; }
.lp-float-card strong { color:var(--ink-900); font-size:.64rem; }

.public-page .lp-stats { position: relative; z-index: 3; border: 0; background: transparent; }
.public-page .lp-stats-grid {
  margin-top: -48px; padding-block: 0; gap: 0; border: 1px solid rgba(226,232,240,.9);
  border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 16px 42px rgba(15,23,42,.09);
  overflow: hidden; text-align: left;
}
.public-page .lp-stat { flex-direction: row; align-items: center; gap: 13px; padding: 22px; border-right: 1px solid var(--ink-100); }
.public-page .lp-stat:last-child { border-right: 0; }
.lp-stat-icon { width: 42px; height:42px; display:grid; place-items:center; border-radius:12px; flex-shrink:0; }
.lp-stat-icon.is-purple { background:var(--brand-100); color:var(--brand-700); }
.lp-stat-icon.is-blue { background:var(--info-100); color:var(--info-600); }
.lp-stat-icon.is-green { background:var(--success-100); color:var(--success-600); }
.lp-stat-icon.is-amber { background:var(--warning-100); color:var(--warning-600); }
.public-page .lp-stat > div { display:flex; flex-direction:column; }
.public-page .lp-stat-num { color:var(--ink-900); font-size:1.45rem; line-height:1.1; }
.public-page .lp-stat-label { margin-top:3px; font-size:.62rem; letter-spacing:.04em; }

.public-page .lp-section { padding-block: clamp(76px, 8vw, 112px); }
.public-page .lp-section-alt { border-color:rgba(226,232,240,.8); background:#fff; }
.lp-section-head { max-width: 720px; margin: 0 auto 42px; text-align:center; }
.lp-section-kicker { display:inline-block; margin-bottom:10px; color:var(--brand-600); font-size:.7rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.public-page .lp-h2 { margin-bottom:13px; font-size:clamp(1.85rem,3.4vw,2.75rem); line-height:1.15; letter-spacing:-.035em; }
.lp-section-head p, .lp-faq-heading p, .lp-guide-intro > p { margin:0; color:var(--ink-500); font-size:.96rem; line-height:1.7; }

.public-page .lp-features { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.public-page .lp-feature {
  position:relative; overflow:hidden; min-height:280px; padding:28px; border-radius:18px;
  box-shadow:var(--shadow-sm); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.public-page .lp-feature:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--brand-100); }
.public-page .lp-feature-icon { width:46px; height:46px; border-radius:13px; }
.lp-feature-number { position:absolute; right:23px; top:22px; color:var(--ink-200); font-size:1.55rem; font-weight:900; letter-spacing:-.04em; }
.public-page .lp-feature h3 { margin-top:23px; font-size:1.1rem; }
.public-page .lp-feature p { min-height:84px; line-height:1.65; }
.lp-feature-link { display:flex; align-items:center; gap:7px; margin-top:20px; color:var(--brand-600); font-size:.76rem; font-weight:750; }
.lp-feature-dark { border-color:#253151 !important; background:linear-gradient(145deg,#111c35,#1e2d50) !important; }
.lp-feature-dark h3,.lp-feature-dark p,.lp-feature-dark .lp-feature-link { color:#fff !important; }
.lp-feature-dark p { opacity:.76; }
.lp-feature-dark .lp-feature-number { color:rgba(255,255,255,.12); }
.lp-feature-dark .lp-icon-info { background:rgba(56,189,248,.15); color:#7dd3fc; }

.lp-role-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.lp-role-card { position:relative; padding:30px; border:1px solid var(--ink-200); border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); }
.lp-role-card.is-featured { border-color:rgba(165,180,252,.75); background:linear-gradient(150deg,#fff,var(--brand-50)); box-shadow:0 14px 36px rgba(79,70,229,.09); }
.lp-role-avatar { width:48px; height:48px; display:grid; place-items:center; margin-bottom:20px; border-radius:14px; }
.lp-role-avatar.is-student { background:var(--info-100); color:var(--info-600); }
.lp-role-avatar.is-teacher { background:var(--brand-100); color:var(--brand-700); }
.lp-role-avatar.is-parent { background:var(--success-100); color:var(--success-600); }
.lp-role-label { color:var(--brand-600); font-size:.66rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.lp-role-card h3 { margin:5px 0 13px; font-size:1.15rem; line-height:1.35; }
.lp-role-card > p { min-height:72px; margin-bottom:20px; font-size:.88rem; line-height:1.65; }
.lp-role-card ul { list-style:none; margin:0; padding:16px 0 0; border-top:1px solid var(--ink-100); display:flex; flex-direction:column; gap:9px; }
.lp-role-card li { position:relative; padding-left:21px; color:var(--ink-700); font-size:.8rem; }
.lp-role-card li::before { content:'✓'; position:absolute; left:0; color:var(--success-600); font-weight:900; }

.lp-guide-shell { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(42px,8vw,96px); align-items:center; padding:clamp(32px,5vw,64px); border:1px solid rgba(199,210,254,.7); border-radius:24px; background:linear-gradient(135deg,#fff,var(--brand-50)); box-shadow:0 18px 48px rgba(79,70,229,.08); }
.lp-guide-intro .lp-h2 { font-size:clamp(1.7rem,3vw,2.4rem); }
.lp-guide-intro > p { margin-bottom:24px; }
.lp-guide-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.lp-guide-steps li { position:relative; display:grid; grid-template-columns:46px 1fr; gap:17px; padding:0 0 27px; }
.lp-guide-steps li:last-child { padding-bottom:0; }
.lp-guide-steps li:not(:last-child)::after { content:''; position:absolute; left:22px; top:45px; bottom:4px; width:1px; background:var(--brand-100); }
.lp-guide-steps li > span { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--brand-600); color:#fff; font-size:.72rem; font-weight:850; box-shadow:0 8px 18px rgba(79,70,229,.2); }
.lp-guide-steps strong { display:block; margin:2px 0 5px; font-size:.94rem; }
.lp-guide-steps p { margin:0; color:var(--ink-500); font-size:.82rem; line-height:1.6; }

.lp-faq-layout { display:grid; grid-template-columns:minmax(240px,.62fr) minmax(0,1.38fr); gap:clamp(42px,7vw,88px); align-items:start; }
.lp-faq-heading { position:sticky; top:112px; }
.lp-faq-heading .lp-h2 { font-size:clamp(1.7rem,3vw,2.35rem); }
.public-page .lp-faq { border-radius:18px; box-shadow:var(--shadow-sm); }
.public-page .lp-faq details { transition:background .12s ease; }
.public-page .lp-faq details[open] { background:#fbfcff; }
.public-page .lp-faq summary { padding:19px 22px; font-size:.9rem; }
.public-page .lp-faq p { padding:0 22px 20px; line-height:1.65; }

.lp-final-cta { padding:80px 0; background:#fff; }
.lp-cta-panel { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:36px; padding:clamp(34px,5vw,58px); border-radius:24px; background:linear-gradient(125deg,#101a33,#293b6a); box-shadow:0 22px 52px rgba(15,23,42,.2); }
.lp-cta-panel::after { content:''; position:absolute; width:320px; height:320px; right:-110px; top:-190px; border-radius:50%; background:rgba(99,102,241,.28); }
.lp-cta-panel > * { position:relative; z-index:1; }
.lp-cta-panel .lp-section-kicker { color:#a5b4fc; }
.lp-cta-panel h2 { max-width:680px; margin-bottom:9px; color:#fff; font-size:clamp(1.65rem,3vw,2.35rem); }
.lp-cta-panel p { margin:0; color:#cbd5e1; }
.lp-cta-panel .btn { flex-shrink:0; background:#fff; color:var(--brand-700); box-shadow:none; }
.lp-cta-panel .btn:hover { background:var(--brand-50); }

.public-page .lp-footer { background:#f8faff; }
.public-page .lp-footer-inner { display:grid; grid-template-columns:1fr auto; gap:24px 44px; padding-block:34px; }
.lp-footer-brand { display:flex; align-items:center; gap:12px; }
.lp-footer-logo { width:40px; height:40px; object-fit:contain; }
.lp-footer-logo-fallback { display:grid; place-items:center; border-radius:11px; background:var(--brand-600); color:#fff; font-size:.75rem; font-weight:900; }
.lp-footer-brand div { display:flex; flex-direction:column; }
.lp-footer-brand span { color:var(--ink-500); font-size:.75rem; }
.lp-footer-links { display:flex; align-items:center; gap:22px; }
.lp-footer-links a { color:var(--ink-700); font-size:.78rem; font-weight:650; }
.lp-footer-copy { grid-column:1/-1; padding-top:18px; border-top:1px solid var(--ink-200); color:var(--ink-500); font-size:.72rem; }

@media (max-width: 1080px) {
  .public-page .lp-hero-inner { grid-template-columns:minmax(0,1fr); max-width:820px; text-align:center; }
  .lp-hero-copy { display:flex; flex-direction:column; align-items:center; }
  .lp-hero-actions,.lp-hero-assurance { justify-content:center; }
  .lp-product-stage { width:100%; max-width:700px; margin:10px auto 0; text-align:left; }
  .lp-float-card-score { left:-18px; }
  .lp-float-card-secure { right:-18px; }
}
@media (max-width: 900px) {
  .public-page .lp-features,.lp-role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-role-card:last-child { grid-column:1/-1; }
  .lp-guide-shell,.lp-faq-layout { grid-template-columns:minmax(0,1fr); }
  .lp-faq-heading { position:static; max-width:640px; }
  .lp-cta-panel { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 720px) {
  .public-page .lp-nav-inner { min-height:66px; }
  .public-page .lp-brand-mark { width:36px; height:36px; }
  .public-page .lp-hero-inner { padding-block:58px 92px; }
  .public-page .lp-title { font-size:clamp(2.2rem,11vw,3.45rem); }
  .public-page .lp-lede { font-size:.98rem; }
  .lp-product-window { border-radius:17px; transform:none; }
  .lp-product-body { min-height:350px; }
  .lp-product-main { padding:15px; }
  .lp-product-grid { grid-template-columns:minmax(0,1fr); }
  .lp-product-progress { display:none; }
  .lp-float-card { display:none; }
  .public-page .lp-stats-grid { grid-template-columns:repeat(2,1fr); }
  .public-page .lp-stat:nth-child(2) { border-right:0; }
  .public-page .lp-stat:nth-child(-n+2) { border-bottom:1px solid var(--ink-100); }
  .public-page .lp-section { padding-block:68px; }
}
@media (max-width: 640px) {
  .public-page .lp-nav-links > a:not(.btn) { display:none; }
  .public-page .lp-nav-inner { padding-inline:16px; }
  .public-page .lp-hero-actions { width:100%; }
  .public-page .lp-hero-actions .btn { width:100%; }
  .lp-hero-assurance { flex-direction:column; align-items:flex-start; }
  .public-page .lp-features,.lp-role-grid { grid-template-columns:minmax(0,1fr); }
  .lp-role-card:last-child { grid-column:auto; }
  .public-page .lp-feature,.lp-role-card { padding:24px; }
  .lp-guide-shell { padding:27px 22px; border-radius:19px; }
  .lp-final-cta { padding-block:54px; }
  .lp-cta-panel { padding:30px 24px; border-radius:20px; }
  .lp-cta-panel .btn { width:100%; }
  .public-page .lp-footer-inner { grid-template-columns:1fr; }
  .lp-footer-links { flex-wrap:wrap; gap:12px 20px; }
  .lp-footer-copy { grid-column:auto; }
}
@media (max-width: 420px) {
  .public-page .lp-container { padding-inline:14px; }
  .public-page .lp-stat { padding:16px 13px; gap:9px; }
  .lp-stat-icon { width:34px; height:34px; border-radius:10px; }
  .public-page .lp-stat-num { font-size:1.18rem; }
  .public-page .lp-stat-label { font-size:.55rem; }
  .lp-product-body { grid-template-columns:42px minmax(0,1fr); }
  .lp-product-sidebar { padding-inline:6px; }
  .lp-product-sidebar > span { width:28px; height:28px; }
  .lp-product-metrics > div { display:flex; flex-direction:column; gap:4px; padding:8px; }
  .lp-product-metric-icon { width:25px; height:25px; }
}

/* Halaman login — pelengkap .auth-shell / .auth-card yang sudah ada */
.auth-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-500);
}
.auth-back:hover { color: var(--brand-600); text-decoration: none; }
/* Panah menghadap ke kiri: ikon 'enter' aslinya mengarah ke kanan (masuk). */
.auth-back-icon { transform: scaleX(-1); }

.auth-password { position: relative; display: flex; align-items: center; }
.auth-password input { padding-right: 92px; }
.auth-password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 0.78rem; font-weight: 700; color: var(--brand-600);
  padding: 6px 10px; border-radius: var(--radius-sm);
}
.auth-password-toggle:hover { background: var(--brand-50); }

.auth-roles { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--ink-200); }
.auth-roles-title {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-500); margin-bottom: var(--space-2);
}
.auth-roles ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.auth-roles li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 0.84rem; }
.auth-roles li strong { font-weight: 600; color: var(--ink-700); }
.auth-roles li span { color: var(--ink-500); }

/* Logo lebih besar & disusun menurun khusus di halaman login — di sini logo
   sekolah jadi penanda utama halaman, bukan sekadar label kecil seperti di
   sidebar, jadi ukurannya dinaikkan dan diletakkan di atas nama sistem. */
.auth-card .brand { flex-direction: column; gap: var(--space-3); text-align: center; }
.auth-card .brand .mark { width: 96px; height: 96px; font-size: 2rem; border-radius: var(--radius-lg); }
.auth-card .brand .mark-logo { width: 104px; height: 104px; border-radius: 0; }

/* ---------------------------------------------------------------- language switch */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  background: var(--surface, #fff);
}
.lang-switch-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-500);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.lang-switch-item:hover { background: var(--ink-100); color: var(--ink-900); }
.lang-switch-item.is-active { background: var(--brand-600, #4f46e5); color: #fff; }
.lang-flag { font-size: 1.05rem; line-height: 1; }
/* Windows renders regional-indicator pairs as letters, which would duplicate the code
   next to it — there the flag alone already reads as "ID"/"GB". */
.lang-switch-compact .lang-code { display: none; }
.lang-switch-compact .lang-switch-item { padding: 5px 8px; }
.auth-lang { display: flex; justify-content: center; margin-bottom: var(--space-4); }
.lp-nav-links .lang-switch { margin-right: var(--space-2); }
.auth-card-wide { max-width: 760px; }

/* ---------------------------------------------------------------- Auth experience 2026 */
.auth-page { min-height:100vh; background:#f6f8ff; }
.auth-page .auth-shell {
  min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto; gap:0;
  align-items:stretch; justify-content:normal; padding:0; background:
    radial-gradient(circle at 8% 10%,rgba(99,102,241,.12),transparent 300px),
    radial-gradient(circle at 92% 88%,rgba(14,165,233,.09),transparent 330px),
    #f7f9ff;
}
.auth-page-bar {
  width:100%; max-width:1280px; min-height:70px; margin:0 auto; padding:13px clamp(18px,3vw,34px);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
}
.auth-page-home { display:inline-flex; align-items:center; gap:7px; color:var(--ink-500); font-size:.8rem; font-weight:700; }
.auth-page-home:hover { color:var(--brand-600); text-decoration:none; }
.auth-page .auth-lang { margin:0; }
.auth-content {
  width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px clamp(18px,3vw,34px) 36px;
}
.auth-page-footer { padding:14px 20px 20px; color:var(--ink-500); font-size:.68rem; text-align:center; }
.auth-content > .auth-back { width:100%; max-width:400px; margin-bottom:4px; }
.auth-content > .auth-card { width:100%; }

.auth-login-shell {
  width:100%; max-width:1040px; min-height:620px; display:grid; grid-template-columns:minmax(0,.92fr) minmax(430px,1.08fr);
  overflow:hidden; border:1px solid rgba(199,210,254,.75); border-radius:26px; background:#fff;
  box-shadow:0 30px 80px rgba(30,41,59,.14),0 8px 26px rgba(79,70,229,.08);
}
.auth-story {
  position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(38px,5vw,58px); color:#fff;
  background:
    linear-gradient(145deg,rgba(15,23,42,.97),rgba(30,45,80,.96)),
    var(--ink-900);
}
.auth-story::before {
  content:''; position:absolute; inset:0; z-index:-1; opacity:.25;
  background-image:radial-gradient(rgba(255,255,255,.25) .7px,transparent .7px); background-size:22px 22px;
  mask-image:linear-gradient(145deg,#000,transparent 82%);
}
.auth-story-orb { position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.auth-story-orb-one { width:360px; height:360px; right:-190px; top:-170px; background:rgba(99,102,241,.4); }
.auth-story-orb-two { width:250px; height:250px; left:-140px; bottom:-100px; background:rgba(14,165,233,.22); }
.auth-story-content { position:relative; z-index:1; }
.auth-story-brand { display:flex; align-items:center; gap:13px; margin-bottom:clamp(55px,8vw,92px); }
.auth-story-logo { width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 6px 12px rgba(0,0,0,.18)); }
.auth-story-logo-fallback { display:grid; place-items:center; border-radius:15px; background:linear-gradient(135deg,var(--brand-600),var(--brand-500)); font-size:.8rem; font-weight:900; }
.auth-story-brand div { display:flex; flex-direction:column; }
.auth-story-brand strong { color:#fff; font-size:1.05rem; }
.auth-story-brand span { color:#aebbd1; font-size:.72rem; }
.auth-story-kicker { display:inline-flex; align-items:center; gap:8px; margin-bottom:15px; color:#c7d2fe; font-size:.68rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.auth-story-kicker i { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.12); }
.auth-story-copy h1 { margin-bottom:16px; color:#fff; font-size:clamp(2rem,3.1vw,2.8rem); line-height:1.08; letter-spacing:-.04em; }
.auth-story-copy p { margin:0; color:#bdc8d9; font-size:.92rem; line-height:1.72; }
.auth-story-benefits { list-style:none; margin:34px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.auth-story-benefits li { display:flex; align-items:flex-start; gap:12px; }
.auth-story-benefits li > span { width:36px; height:36px; display:grid; place-items:center; flex-shrink:0; border:1px solid rgba(165,180,252,.18); border-radius:11px; background:rgba(99,102,241,.13); color:#a5b4fc; }
.auth-story-benefits div { display:flex; flex-direction:column; }
.auth-story-benefits strong { color:#f8fafc; font-size:.8rem; }
.auth-story-benefits small { margin-top:2px; color:#94a3b8; font-size:.68rem; line-height:1.45; }
.auth-story-foot { position:relative; z-index:1; display:flex; align-items:center; gap:7px; margin-top:32px; color:#aebbd1; font-size:.68rem; }
.auth-story-foot svg { color:#4ade80; }

.auth-form-panel { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:clamp(38px,5vw,66px); background:#fff; }
.auth-mobile-brand { display:none; align-items:center; gap:10px; margin-bottom:28px; }
.auth-mobile-brand > img,.auth-mobile-brand > span { width:43px; height:43px; object-fit:contain; }
.auth-mobile-brand > span { display:grid; place-items:center; border-radius:12px; background:var(--brand-600); color:#fff; font-size:.7rem; font-weight:900; }
.auth-mobile-brand div { display:flex; flex-direction:column; }
.auth-mobile-brand strong { font-size:.92rem; }
.auth-mobile-brand small { color:var(--ink-500); font-size:.66rem; }
.auth-form-heading { margin-bottom:25px; }
.auth-form-kicker { display:block; margin-bottom:7px; color:var(--brand-600); font-size:.68rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.auth-form-heading h2 { margin-bottom:8px; font-size:clamp(1.65rem,2.4vw,2rem); letter-spacing:-.035em; }
.auth-form-heading p { margin:0; color:var(--ink-500); font-size:.84rem; }
.auth-login-alert { align-items:center; margin-bottom:19px; }
.auth-login-alert svg { flex-shrink:0; }
.auth-login-form label { margin-bottom:7px; }
.auth-input-wrap { position:relative; display:flex; align-items:center; }
.auth-input-wrap .auth-input-icon { position:absolute; left:13px; z-index:1; display:flex; color:var(--ink-500); pointer-events:none; }
.auth-input-wrap input { min-height:50px; padding-left:43px; border-radius:12px; background:#fbfcff; }
.auth-input-wrap input::placeholder { color:#94a3b8; }
.auth-input-wrap:focus-within .auth-input-icon { color:var(--brand-600); }
.auth-input-wrap.has-error input { border-color:var(--danger-600); }
.auth-label-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.auth-label-row a { margin-bottom:var(--space-1); font-size:.75rem; font-weight:750; }
.auth-password input { padding-left:43px; padding-right:94px; }
.auth-password-toggle { right:7px; }
.auth-caps-lock { display:flex; align-items:center; gap:5px; margin-top:7px; color:var(--warning-600); font-size:.72rem; font-weight:650; }
.auth-caps-lock[hidden] { display:none; }
.auth-submit { width:100%; min-height:50px; margin-top:24px; border-radius:12px; }
.auth-submit:disabled { transform:none; }

.auth-identity-guide { margin-top:25px; padding-top:20px; border-top:1px solid var(--ink-100); }
.auth-identity-title { margin-bottom:10px; color:var(--ink-500); font-size:.64rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.auth-identity-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.auth-identity-options > div { display:grid; grid-template-columns:27px 1fr; column-gap:7px; align-items:center; min-width:0; padding:9px; border:1px solid var(--ink-100); border-radius:10px; background:#fbfcff; }
.auth-identity-options span { grid-row:1/3; width:27px; height:27px; display:grid; place-items:center; border-radius:8px; }
.auth-identity-options span.is-student { background:var(--info-100); color:var(--info-600); }
.auth-identity-options span.is-teacher { background:var(--brand-100); color:var(--brand-700); }
.auth-identity-options span.is-parent { background:var(--success-100); color:var(--success-600); }
.auth-identity-options strong { overflow:hidden; color:var(--ink-700); font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }
.auth-identity-options small { color:var(--ink-500); font-size:.58rem; }
.auth-security-note { display:flex; align-items:flex-start; gap:7px; margin-top:16px; padding:10px 12px; border-radius:10px; background:var(--ink-50); color:var(--ink-500); font-size:.67rem; line-height:1.5; }
.auth-security-note svg { flex-shrink:0; margin-top:1px; color:var(--success-600); }

@media (max-width:900px) {
  .auth-login-shell { max-width:620px; min-height:0; grid-template-columns:minmax(0,1fr); }
  .auth-story { padding:28px 34px; }
  .auth-story-brand { margin:0; }
  .auth-story-copy,.auth-story-benefits,.auth-story-foot { display:none; }
  .auth-form-panel { padding:38px 42px 44px; }
}
@media (max-width:640px) {
  .auth-page-bar { min-height:60px; padding-inline:16px; }
  .auth-page-home { font-size:.72rem; }
  .auth-content { justify-content:flex-start; padding:10px 14px 28px; }
  .auth-login-shell { border-radius:20px; }
  .auth-story { display:none; }
  .auth-form-panel { padding:30px 23px; }
  .auth-mobile-brand { display:flex; }
  .auth-form-heading { margin-bottom:22px; }
  .auth-form-heading h2 { font-size:1.65rem; }
  .auth-identity-options { grid-template-columns:minmax(0,1fr); }
  .auth-identity-options > div { grid-template-columns:30px 1fr auto; }
  .auth-identity-options span { grid-row:auto; }
  .auth-identity-options small { justify-self:end; }
  .auth-page-footer { padding-top:6px; }
}
@media (max-width:380px) {
  .auth-page-bar .lang-switch { padding:2px; }
  .auth-page-bar .lang-code { display:none; }
  .auth-page-bar .lang-switch-item { padding:5px 7px; }
  .auth-page-home { max-width:126px; }
  .auth-form-panel { padding-inline:19px; }
}
.onboard-step { border-top: 1px solid var(--ink-100); padding-top: var(--space-5); margin-top: var(--space-5); }
.onboard-step:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.onboard-step-head { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.onboard-step-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-600); color: #fff; font-weight: 800; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------- ID cards
   CR80 (85.6 × 54 mm), the same as a bank card. Dimensions are in mm because px
   would render at whatever DPI the printer happens to use.

   The card is a three-row grid with FIXED row heights rather than flex, because
   the first attempt let the QR stretch the footer, which squeezed the body until
   a 26 mm photo overflowed straight through the footer's top border — the stray
   line across the middle. Fixed rows make that overflow impossible:
       header 11mm + body 31mm + footer 6mm = 48mm, plus 3mm padding top/bottom. */
.print-body { background: var(--ink-100); padding: var(--space-5); }
.print-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  max-width: 720px; margin: 0 auto var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.print-hint { max-width: 720px; margin: 0 auto var(--space-5); font-size: 0.8rem; color: var(--ink-500); }

.card-sheet { display: flex; gap: 8mm; justify-content: center; flex-wrap: wrap; }

.idcard {
  width: 85.6mm; height: 54mm;
  box-sizing: border-box;
  position: relative;
  background: var(--white);
  border-radius: 3mm;
  padding: 3mm;
  display: grid;
  grid-template-rows: 11mm 31mm 6mm;
  font-size: 2.7mm; line-height: 1.3;
  color: var(--ink-900);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* A diagonal wash in the school's colour: enough personality to look issued rather
   than printed from a spreadsheet, faint enough not to fight the photo or the QR. */
.idcard::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60mm 40mm at 100% 0%, var(--brand-50) 0%, transparent 70%),
    linear-gradient(160deg, transparent 60%, var(--brand-50) 100%);
  pointer-events: none;
}
.idcard > * { position: relative; }

.idcard-head { display: flex; align-items: center; gap: 2.5mm; min-width: 0; }
.idcard-logo { width: 9mm; height: 9mm; object-fit: contain; flex-shrink: 0; }
.idcard-head-text { display: flex; flex-direction: column; min-width: 0; }
.idcard-school { font-weight: 800; font-size: 3.2mm; letter-spacing: -0.02em; line-height: 1.1; }
.idcard-kind {
  font-size: 2.2mm; font-weight: 800; letter-spacing: 0.16em; color: var(--brand-600);
  margin-top: 0.6mm;
}
/* The rule under the header is a deliberate accent, not a divider that can drift. */
.idcard-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0.6mm;
  border-radius: 1mm;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-500) 40%, transparent 100%);
}

.idcard-body { display: grid; grid-template-columns: 20mm 1fr auto; gap: 3mm; padding-top: 2.5mm; min-height: 0; }

.idcard-photo {
  width: 20mm; height: 25mm;
  border-radius: 1.5mm; overflow: hidden;
  background: var(--brand-100); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0.3mm var(--white), 0 0 0 0.6mm var(--brand-100);
}
.idcard-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Only one account in the roster has a photo, so the fallback has to look
   deliberate rather than like a failed image. */
.idcard-initials { font-size: 8mm; font-weight: 800; letter-spacing: -0.03em; }

.idcard-fields { min-width: 0; display: flex; flex-direction: column; gap: 0.8mm; overflow: hidden; }
.idcard-name {
  font-size: 3.7mm; font-weight: 800; line-height: 1.1; margin-bottom: 1.2mm;
  letter-spacing: -0.02em; overflow-wrap: anywhere;
}
.idcard-row { display: flex; gap: 1.5mm; align-items: baseline; }
.idcard-row > span {
  width: 13mm; flex-shrink: 0; color: var(--ink-500); font-size: 2.2mm;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.idcard-row > strong { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.idcard-row-wrap { align-items: flex-start; }

/* QR sits in its own grid column so it can never push anything else around. */
.idcard-qr {
  width: 15mm; height: 15mm; align-self: end;
  padding: 0.6mm; background: var(--white);
  border-radius: 1mm; box-shadow: 0 0 0 0.25mm var(--ink-200);
}
.idcard-qr svg { width: 100%; height: 100%; display: block; }

.idcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 2mm;
  font-size: 2.3mm; color: var(--ink-500);
  border-top: 0.25mm solid var(--ink-200); padding-top: 1.2mm;
}
.idcard-qr-hint { font-weight: 600; color: var(--brand-600); }

.idcard-back { grid-template-rows: 1fr auto auto; }
.idcard-back-fields { display: flex; flex-direction: column; gap: 1.2mm; padding-top: 1mm; }
.idcard-note {
  font-size: 2.2mm; color: var(--ink-500); line-height: 1.35;
  border-top: 0.25mm solid var(--ink-200); padding-top: 1.5mm;
}
.idcard-sign { display: flex; flex-direction: column; align-items: flex-end; font-size: 2.3mm; padding-top: 1mm; }
.idcard-sign-role { color: var(--ink-500); }
.idcard-sign-line { height: 6mm; }
.idcard-sign-name { font-weight: 700; border-top: 0.3mm solid var(--ink-900); padding-top: 0.5mm; }
.idcard-sign-nip { color: var(--ink-500); font-size: 2.1mm; }

@media print {
  @page { margin: 8mm; }
  .print-body { background: none; padding: 0; }
  .print-toolbar, .print-hint { display: none; }
  .card-sheet { gap: 6mm; }
  /* Borders replace the shadow, which most printers drop anyway, and give a
     cutting line. print-color-adjust keeps the brand wash, photo and QR from
     being stripped by the browser's ink-saving default. */
  .idcard {
    box-shadow: none;
    border: 0.3mm solid var(--ink-300);
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.card-preview { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }

/* ---------------------------------------------------------------- weekly schedule
   Replaces the plain card-per-day grid. The point of each addition is scanning
   speed, not decoration: a duration on every slot makes an absurd entry obvious at
   a glance, and a per-subject hue lets the eye follow one subject across the week
   without reading any text. */
.sched-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--white); border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}
.sched-metric { display: flex; flex-direction: column; gap: 2px; }
.sched-metric-num { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.sched-metric-label { font-size: 0.72rem; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.05em; }
/* Pushed to the far end so "what's next" reads as an answer, not another statistic. */
.sched-next {
  margin-left: auto; display: flex; flex-direction: column; gap: 1px;
  padding: var(--space-2) var(--space-4);
  background: var(--brand-50); border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-600);
}
.sched-next-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-600); }
.sched-next-meta { font-size: 0.78rem; color: var(--ink-500); }

/* align-items:start supaya kartu hari setinggi isinya sendiri. Tanpa ini hari kosong
   ikut memanjang menyamai hari terpadat, dan kolom Selasa–Kamis jadi kotak kosong
   setinggi Senin tanpa alasan. */
.sched-week {
  display: grid; gap: var(--space-4); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.sched-day {
  background: var(--white); border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
/* Empty days recede instead of shouting the same sentence five times over. */
.sched-day.is-empty { background: transparent; border-style: dashed; box-shadow: none; }
.sched-day.is-today { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }

.sched-day-head { display: flex; align-items: center; gap: var(--space-2); }
.sched-day-head h3 { margin: 0; font-size: 1rem; }
.sched-today-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand-600);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.sched-day-total { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--ink-500); }
.sched-free { margin: 0; font-size: 0.82rem; color: var(--ink-300); font-style: italic; }

/* Stacked, not side-by-side. Each day is a ~260px column in the week grid, and an
   action button next to the text left roughly 90px for it — enough to snap
   "11:14 – 14:00" onto three lines and split "Informatika" mid-word. Vertical costs
   a little height and gives the text the whole column. */
.sched-slot {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: hsl(var(--slot-hue) 70% 97%);
  border-left: 3px solid hsl(var(--slot-hue) 55% 60%);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sched-slot:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); }
.sched-slot.is-open { box-shadow: 0 0 0 2px var(--success-100); }
.sched-slot-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sched-slot-time {
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  font-size: 0.78rem; font-weight: 700; color: hsl(var(--slot-hue) 55% 32%);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sched-slot-time span { font-weight: 600; opacity: 0.75; }
.sched-slot-time em { font-style: normal; font-weight: 600; font-size: 0.7rem; color: var(--ink-500); margin-left: 4px; }
.sched-slot-subject { font-weight: 700; overflow-wrap: break-word; line-height: 1.3; }
.sched-slot-class { font-size: 0.75rem; color: var(--ink-500); }
.sched-slot-action { text-align: left; }
.sched-slot-action .btn { width: 100%; justify-content: center; }
.sched-slot-action .schedule-status-link { align-items: flex-start; }

@media (max-width: 640px) {
  .sched-summary { gap: var(--space-4); padding: var(--space-4); }
  .sched-next { margin-left: 0; width: 100%; }
  .sched-week { grid-template-columns: minmax(0, 1fr); }
}
/* Day colour tells you at a glance whether attendance can happen at all: green when
   this is the day, red when it is not. Kept as a left rail plus a tinted header rather
   than a full red card, so four red days do not drown the one that matters. */
.sched-day.is-today { border-color: var(--success-600); box-shadow: 0 0 0 3px var(--success-100); }
.sched-day.is-today .sched-day-head h3 { color: var(--success-600); }
.sched-day.is-today .sched-today-dot { background: var(--success-600); box-shadow: 0 0 0 3px var(--success-100); }
.sched-day.is-other { border-color: var(--danger-100); }
.sched-day.is-other .sched-day-head h3 { color: var(--danger-600); }
.sched-day.is-other.is-empty { border-color: var(--danger-100); background: transparent; }
.sched-window-note { font-size: 0.7rem; color: var(--ink-500); margin-top: 4px; }
/* What is inside a digital class, shown on the card. 432 of 433 classes were empty
   shells and nothing on this page said so — the teacher had to open each one to find
   out. An empty class now reads as unfinished rather than as merely another card. */
.course-fill {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px dashed var(--ink-200);
  font-size: 0.76rem; color: var(--ink-500);
}
.course-fill-item { display: inline-flex; align-items: center; gap: 5px; }
.course-fill-item strong { color: var(--ink-900); font-weight: 700; }
.course-fill.is-empty { border-top-color: var(--warning-100); }
.course-fill-empty { color: var(--warning-600); font-weight: 600; }

/* ---------------------------------------------------------------- exam player
   The old page was a page-header, one timer card, and a plain card per question —
   no dedicated CSS at all. On a 40-question exam a student could not see how many
   were still blank, could not jump to question 25, and submitted blind. */
.xp { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: var(--space-5); align-items: start; }
.xp-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }

.xp-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
}
.xp-head h1 { margin-bottom: 2px; }
.xp-conn {
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  background: var(--success-100); color: var(--success-600);
}
.xp-conn.is-down { background: var(--danger-100); color: var(--danger-600); }

.xp-q {
  background: var(--white); border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg); padding: var(--space-5);
  border-left: 4px solid var(--ink-200);
  transition: border-color .15s ease;
  scroll-margin-top: var(--space-5);
}
.xp-q.is-answered { border-left-color: var(--success-600); }

.xp-q-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.xp-q-num {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--brand-600); color: #fff; font-weight: 800; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.xp-q-type {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand-600); background: var(--brand-50); padding: 3px 9px; border-radius: 999px;
}
.xp-q-points { font-size: 0.72rem; color: var(--ink-500); }
.xp-q-status { margin-left: auto; font-size: 0.72rem; color: var(--ink-500); }
.xp-flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 600; font-family: inherit;
  padding: 4px 9px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--ink-200); color: var(--ink-500);
}
.xp-flag:hover { border-color: var(--warning-600); color: var(--warning-600); }
.xp-flag.is-on { background: var(--warning-100); border-color: var(--warning-600); color: var(--warning-600); }

.xp-q-stem { font-size: 1rem; line-height: 1.6; margin-bottom: var(--space-4); overflow-wrap: anywhere; }
.xp-q-image { max-width: 100%; max-height: 380px; display: block; border-radius: var(--radius-md); margin-bottom: var(--space-4); }

.xp-options { display: flex; flex-direction: column; gap: var(--space-2); }
.xp-option {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  cursor: pointer; font-weight: 400; margin: 0;
  transition: border-color .12s ease, background .12s ease;
}
.xp-option:hover { border-color: var(--brand-500); background: var(--brand-50); }
.xp-option input { margin-top: 3px; flex-shrink: 0; }
.xp-option-key {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px;
  background: var(--ink-100); color: var(--ink-700); font-weight: 700; font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
}
.xp-option:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); }
.xp-option:has(input:checked) .xp-option-key { background: var(--brand-600); color: #fff; }
.xp-option-text { min-width: 0; overflow-wrap: anywhere; }
.xp-textarea { width: 100%; }

/* Rail stays in view so the timer and the blank-question count are never scrolled away. */
.xp-rail { position: sticky; top: var(--space-5); }
.xp-rail-inner {
  background: var(--white); border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.xp-timer {
  text-align: center; padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--ink-50); border: 1px solid var(--ink-200);
}
.xp-timer-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); font-weight: 700; }
.xp-timer-value { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.xp-timer.is-warning { background: var(--warning-100); border-color: var(--warning-600); }
.xp-timer.is-warning .xp-timer-value { color: var(--warning-600); }
.xp-timer.is-critical { background: var(--danger-100); border-color: var(--danger-600); }
.xp-timer.is-critical .xp-timer-value { color: var(--danger-600); }

.xp-progress-text { font-size: 0.82rem; margin-bottom: 6px; }
.xp-progress-bar { height: 7px; border-radius: 999px; background: var(--ink-100); overflow: hidden; }
.xp-progress-bar > span { display: block; height: 100%; background: var(--success-600); transition: width .2s ease; }

.xp-nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.xp-nav-item {
  aspect-ratio: 1; border-radius: 7px; cursor: pointer; font-family: inherit;
  font-size: 0.76rem; font-weight: 700;
  background: var(--ink-100); color: var(--ink-500); border: 1px solid transparent;
}
.xp-nav-item:hover { border-color: var(--brand-500); }
.xp-nav-item.is-answered { background: var(--success-100); color: var(--success-600); }
.xp-nav-item.is-flagged { background: var(--warning-100); color: var(--warning-600); box-shadow: inset 0 0 0 2px var(--warning-600); }

.xp-legend { display: flex; flex-direction: column; gap: 4px; font-size: 0.7rem; color: var(--ink-500); }
.xp-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--ink-100); margin-right: 5px; }
.xp-legend .dot.is-answered { background: var(--success-100); box-shadow: inset 0 0 0 1px var(--success-600); }
.xp-legend .dot.is-flagged { background: var(--warning-100); box-shadow: inset 0 0 0 2px var(--warning-600); }

.xp-submit { width: 100%; }
.xp-help { font-size: 0.7rem; color: var(--ink-500); margin: 0; line-height: 1.4; }

@media (max-width: 900px) {
  .xp { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the rail leads: the timer and the blank count matter more than the
     first question, which is one scroll away regardless. */
  .xp-rail { position: static; order: -1; }
  .xp-nav { grid-template-columns: repeat(8, 1fr); }
}
/* Exam rules, shown before the student can start. */
.exam-rules { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.exam-rules li { font-size: 0.88rem; line-height: 1.5; color: var(--ink-700); }
.exam-rules li::marker { font-weight: 700; color: var(--brand-600); }
.exam-agree {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--radius-md); cursor: pointer; font-weight: 500; font-size: 0.88rem;
}
.exam-agree input { margin-top: 3px; flex-shrink: 0; }

/* QR Absensi — dipakai siswa untuk ditunjukkan ke pemindai dari layar HP.
   Sengaja hitam-putih murni dan tidak mengikuti tema gelap: pemindai membaca
   kontras, dan QR putih di atas latar gelap gagal dibaca banyak pembaca murah. */
.qrs { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.qrs-box {
  background: #ffffff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-6) var(--space-5); text-align: center; max-width: 420px; width: 100%;
}
.qrs-school {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #64748b; margin-bottom: var(--space-4);
}
.qrs-code { display: flex; justify-content: center; }
.qrs-code svg { width: 100%; height: auto; max-width: 320px; display: block; }
.qrs-id { margin-top: var(--space-4); font-size: 1.05rem; color: #0f172a; font-variant-numeric: tabular-nums; }
.qrs-id strong { letter-spacing: 0.06em; }
.qrs-name { margin-top: 2px; font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.qrs-class { margin-top: 2px; font-size: 0.9rem; color: #475569; }
.qrs-hint { margin: var(--space-4) 0 0; font-size: 0.8rem; color: #64748b; line-height: 1.5; }
.qrs-actions { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-5); flex-wrap: wrap; }

/* Teacher exam workspace — dense information, clear decisions, fewer long-page trips. */
.exam-workspace-hero {
  position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5);
  overflow: hidden; margin-bottom: var(--space-4); padding: var(--space-5); border: 1px solid var(--brand-100);
  border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--brand-50), var(--white) 58%, #ecfeff); box-shadow: var(--shadow-sm);
}
.exam-workspace-hero::after { content: ''; position: absolute; right: -50px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: rgba(99,102,241,.06); pointer-events: none; }
.exam-workspace-main { position: relative; z-index: 1; min-width: 0; }
.exam-workspace-kicker { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.exam-workspace-kicker > span:first-child { color: var(--brand-600); font-size: .69rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.exam-workspace-hero h1 { margin-bottom: 4px; font-size: clamp(1.45rem, 2vw, 1.9rem); }
.exam-workspace-hero p { max-width: 760px; margin-bottom: var(--space-3); color: var(--ink-500); font-size: .82rem; }
.exam-workspace-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.exam-workspace-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(203,213,225,.8); border-radius: 999px; background: rgba(255,255,255,.78); color: var(--ink-700); font-size: .68rem; font-weight: 650; }
.exam-workspace-meta svg { color: var(--brand-600); }
.exam-workspace-actions { position: relative; z-index: 1; display: flex; max-width: 440px; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.exam-workspace-actions form { margin: 0; }

.exam-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.exam-overview-card { display: flex; min-width: 0; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.exam-overview-icon { display: flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; border-radius: 12px; }
.exam-overview-icon.is-brand { background: var(--brand-100); color: var(--brand-600); }
.exam-overview-icon.is-success { background: var(--success-100); color: var(--success-600); }
.exam-overview-icon.is-warning { background: var(--warning-100); color: var(--warning-600); }
.exam-overview-icon.is-info { background: var(--info-100); color: var(--info-600); }
.exam-overview-card > div { display: flex; min-width: 0; flex-direction: column; }
.exam-overview-card small { color: var(--ink-500); font-size: .64rem; font-weight: 700; }
.exam-overview-card strong { color: var(--ink-900); font-size: 1.12rem; font-variant-numeric: tabular-nums; line-height: 1.25; }
.exam-overview-card strong span { color: var(--ink-500); font-size: .72rem; }
.exam-overview-card em { overflow: hidden; color: var(--ink-500); font-size: .61rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.exam-section-nav { position: sticky; top: 76px; z-index: 8; display: flex; align-items: center; gap: 4px; width: max-content; max-width: 100%; overflow-x: auto; margin: 0 auto var(--space-5); padding: 4px; border: 1px solid var(--ink-200); border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-md); backdrop-filter: blur(10px); }
.exam-section-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; color: var(--ink-700); font-size: .7rem; font-weight: 750; white-space: nowrap; }
.exam-section-nav a:hover { background: var(--brand-50); color: var(--brand-600); text-decoration: none; }
.exam-section-nav a span { min-width: 20px; padding: 1px 5px; border-radius: 999px; background: var(--ink-100); color: var(--ink-500); font-size: .59rem; text-align: center; }
.exam-context-alert { display: flex; align-items: center; gap: var(--space-2); }
.exam-context-alert svg { flex-shrink: 0; }
.exam-management-grid { align-items: start; }
.exam-management-card, .exam-package-card, .exam-results-card { scroll-margin-top: 135px; }

.exam-package-card { padding: 0; }
.exam-package-summary { display: grid; grid-template-columns: 42px minmax(150px, 1fr) auto auto 20px; align-items: center; gap: var(--space-3); padding: var(--space-4); cursor: pointer; list-style: none; }
.exam-package-summary::-webkit-details-marker { display: none; }
.exam-package-summary-icon { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; background: var(--brand-100); color: var(--brand-600); }
.exam-package-summary > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.exam-package-summary small { color: var(--ink-500); font-size: .62rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.exam-package-summary strong { font-size: .9rem; }
.exam-package-types { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.exam-package-types em { padding: 4px 7px; border-radius: 999px; background: var(--ink-100); color: var(--ink-500); font-size: .61rem; font-style: normal; font-weight: 700; }
.exam-package-chevron { color: var(--ink-500); transition: transform .18s ease; }
.exam-package-card[open] .exam-package-chevron { transform: rotate(180deg); }
.exam-package-body { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--ink-100); }
.exam-package-body > p:first-child { margin-top: var(--space-3); }

.exam-results-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.exam-section-eyebrow { display: block; margin-bottom: 2px; color: var(--brand-600); font-size: .65rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.exam-results-heading h3 { margin-bottom: 2px; }
.exam-results-heading p { margin: 0; color: var(--ink-500); font-size: .74rem; }
.exam-release-state { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 11px; }
.exam-release-state.is-released { background: var(--success-100); color: var(--success-600); }
.exam-release-state > span { display: flex; flex-direction: column; }
.exam-release-state strong { font-size: .68rem; }
.exam-release-state small { font-size: .58rem; }
.exam-result-insights { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; margin-bottom: var(--space-4); border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--ink-200); gap: 1px; }
.exam-result-insights > div { display: flex; min-width: 0; flex-direction: column; padding: 9px 12px; background: var(--ink-50); }
.exam-result-insights span { color: var(--ink-500); font-size: .61rem; }
.exam-result-insights strong { font-size: .98rem; font-variant-numeric: tabular-nums; }
.exam-result-insights strong.is-good { color: var(--success-600); }
.exam-result-insights strong.is-low { color: var(--danger-600); }
.exam-result-insights strong.is-warning { color: var(--warning-600); }
.exam-result-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.exam-result-toolbar .table-search { margin: 0; }
.exam-result-filters { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--ink-100); }
.exam-result-filter { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-500); font: inherit; font-size: .65rem; font-weight: 750; white-space: nowrap; cursor: pointer; }
.exam-result-filter:hover { color: var(--ink-900); }
.exam-result-filter.is-active { background: var(--white); color: var(--brand-600); box-shadow: var(--shadow-sm); }
.exam-result-filter span { min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--ink-200); color: var(--ink-500); font-size: .57rem; }
.exam-results-table-wrap { border: 1px solid var(--ink-200); border-radius: var(--radius-md); }
.exam-results-table { margin: 0; }
.exam-results-table thead th { background: var(--ink-50); color: var(--ink-500); font-size: .63rem; }
.exam-results-table tbody tr[data-attempt-row]:hover { background: var(--brand-50); }
.exam-participant-cell { display: flex; min-width: 190px; align-items: center; gap: var(--space-2); }
.exam-participant-cell > span { display: flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border-radius: 10px; background: var(--brand-100); color: var(--brand-700); font-size: .65rem; font-weight: 850; }
.exam-participant-cell > div { display: flex; min-width: 0; flex-direction: column; }
.exam-participant-cell strong { overflow: hidden; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.exam-participant-cell small { color: var(--ink-500); font-size: .61rem; }
.exam-activity { display: block; margin-top: 4px; font-size: .6rem; }
.exam-activity.is-live { color: var(--success-600); }
.exam-activity.is-stale { color: var(--danger-600); }
.exam-integrity-state { display: inline-flex; align-items: center; gap: 5px; max-width: 340px; padding: 5px 7px; border-radius: 8px; font-size: .66rem; font-weight: 700; }
.exam-integrity-state.is-clean { background: var(--success-100); color: var(--success-600); }
.exam-integrity-state.is-flagged { background: var(--warning-100); color: var(--warning-600); }
button.exam-integrity-state { border: 0; font-family: inherit; text-align: left; cursor: pointer; }
button.exam-integrity-state:hover { box-shadow: inset 0 0 0 1px rgba(217,119,6,.28); }
button.exam-integrity-state > span { display: flex; min-width: 0; flex-direction: column; }
button.exam-integrity-state > span > small { color: inherit; font-size: .56rem; font-weight: 650; opacity: .8; }
.exam-integrity-chevron { flex-shrink: 0; transition: transform .16s ease; }
button.exam-integrity-state[aria-expanded="true"] .exam-integrity-chevron { transform: rotate(180deg); }
.exam-integrity-detail-row > td { padding: 0 !important; border-top: 0; background: var(--ink-50); }
.exam-integrity-detail { margin: 0 var(--space-3) var(--space-3); padding: var(--space-4); border: 1px solid var(--warning-100); border-radius: var(--radius-md); background: linear-gradient(145deg, #fffbeb, var(--white) 35%); box-shadow: inset 3px 0 0 var(--warning-600); }
.exam-integrity-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--ink-200); }
.exam-integrity-detail-heading > div { display: flex; flex-direction: column; }
.exam-integrity-detail-heading strong { font-size: .86rem; }
.exam-integrity-detail-heading small { color: var(--ink-500); font-size: .63rem; }
.exam-integrity-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.exam-integrity-detail-section { min-width: 0; padding: var(--space-3); border: 1px solid var(--ink-200); border-radius: 11px; background: rgba(255,255,255,.82); }
.exam-integrity-detail-section h4 { display: flex; align-items: center; gap: 6px; margin-bottom: var(--space-3); color: var(--ink-700); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.exam-integrity-detail-section h4 svg { color: var(--brand-600); }
.exam-audit-item { position: relative; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: flex-start; gap: 8px; padding: 8px 0; border-top: 1px solid var(--ink-100); }
.exam-audit-item:first-of-type { padding-top: 0; border-top: 0; }
.exam-audit-item:last-child { padding-bottom: 0; }
.exam-audit-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--ink-300); }
.exam-audit-item.is-warning .exam-audit-dot { background: var(--warning-600); }
.exam-audit-item.is-critical .exam-audit-dot { background: var(--danger-600); box-shadow: 0 0 0 3px var(--danger-100); }
.exam-audit-item.is-info .exam-audit-dot { background: var(--info-600); }
.exam-audit-item.is-success .exam-audit-dot { background: var(--success-600); }
.exam-audit-item > div { display: flex; min-width: 0; flex-direction: column; }
.exam-audit-item > div > strong { color: var(--ink-700); font-size: .69rem; }
.exam-audit-item small { color: var(--ink-500); font-size: .6rem; line-height: 1.45; }
.exam-audit-item p { margin: 3px 0 0; color: var(--ink-700); font-size: .63rem; }
.exam-audit-item > .badge { align-self: start; font-size: .53rem; }
.exam-integrity-disclaimer { display: flex; align-items: center; gap: 6px; margin: var(--space-3) 0 0; color: var(--ink-500); font-size: .61rem; }
.exam-integrity-disclaimer svg { flex-shrink: 0; }
.exam-score-value { display: inline-flex; min-width: 64px; justify-content: center; padding: 6px 9px; border-radius: 9px; background: var(--ink-100); font-size: .86rem; font-variant-numeric: tabular-nums; }
.exam-score-value.is-good { background: var(--success-100); color: var(--success-600); }
.exam-score-value.is-low { background: var(--danger-100); color: var(--danger-600); }
.exam-score-value.is-empty { color: var(--ink-500); }
.exam-manual-answer-row { background: var(--ink-50); }
.exam-filter-empty { padding: var(--space-5); color: var(--ink-500); text-align: center; font-size: .78rem; }

@media (max-width: 1050px) {
  .exam-workspace-hero { flex-direction: column; }
  .exam-workspace-actions { max-width: none; justify-content: flex-start; }
  .exam-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-result-toolbar { grid-template-columns: 1fr; }
  .exam-result-filters { width: max-content; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 700px) {
  .exam-workspace-hero { padding: var(--space-4); }
  .exam-overview-grid { grid-template-columns: 1fr; }
  .exam-section-nav { top: 64px; margin-left: 0; }
  .exam-package-summary { grid-template-columns: 38px minmax(0, 1fr) 18px; }
  .exam-package-summary-icon { width: 38px; height: 38px; }
  .exam-package-types, .exam-package-summary > .badge { grid-column: 2; justify-content: flex-start; justify-self: start; }
  .exam-package-chevron { grid-column: 3; grid-row: 1; }
  .exam-results-heading { flex-direction: column; }
  .exam-result-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-integrity-detail-grid { grid-template-columns: 1fr; }
}

/* Automatic gradebook — source-driven components and read-only derived scores. */
.gradebook-page-header { margin-bottom: var(--space-4); }
.gradebook-eyebrow { display: block; margin-bottom: 3px; color: var(--brand-600); font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.gradebook-automation-hero {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--brand-100);
  border-radius: var(--radius-lg); background: linear-gradient(110deg, var(--brand-50), var(--white) 55%); box-shadow: var(--shadow-sm);
}
.gradebook-automation-icon { display: flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 15px; background: var(--brand-600); color: white; box-shadow: 0 8px 18px rgba(79, 70, 229, .24); }
.gradebook-automation-copy h2 { margin: 0 0 2px; font-size: 1.05rem; }
.gradebook-automation-copy p { margin: 0; max-width: 700px; color: var(--ink-500); font-size: .79rem; }
.gradebook-automation-stats { display: flex; align-items: stretch; gap: 1px; overflow: hidden; border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--ink-200); }
.gradebook-automation-stats > div { display: flex; min-width: 96px; flex-direction: column; justify-content: center; padding: 9px 12px; background: var(--white); text-align: center; }
.gradebook-automation-stats strong { color: var(--ink-900); font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.gradebook-automation-stats span { color: var(--ink-500); font-size: .62rem; white-space: nowrap; }
.gradebook-automation-stats .is-weight strong { color: var(--success-600); }
.gradebook-excluded { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px dashed var(--ink-300); border-radius: var(--radius-md); background: var(--ink-50); }
.gradebook-excluded > div:first-child { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-500); }
.gradebook-excluded > div:first-child > span { display: flex; flex-direction: column; }
.gradebook-excluded strong { color: var(--ink-700); font-size: .78rem; }
.gradebook-excluded small { font-size: .68rem; }
.gradebook-excluded-list { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.gradebook-empty .empty-state .icon { display: inline-flex; color: var(--brand-600); }
.gradebook-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.gradebook-section-heading h3 { margin: 0 0 2px; }
.gradebook-section-heading p { margin: 0; color: var(--ink-500); font-size: .76rem; }
.gradebook-weight-action { display: flex; align-items: center; gap: var(--space-3); }
.gradebook-weight-action > span { color: var(--ink-500); font-size: .72rem; text-align: right; }
.gradebook-weight-action > span strong { display: block; color: var(--ink-900); font-size: 1rem; font-variant-numeric: tabular-nums; }
.gradebook-weight-action > span.is-exact strong { color: var(--success-600); }
.gradebook-weight-action > span.is-normalized strong { color: var(--warning-600); }
.gradebook-component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.gradebook-component { --component-color: var(--brand-600); --component-soft: var(--brand-50); display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: linear-gradient(135deg, var(--component-soft), var(--white) 52%); transition: border-color .15s ease, box-shadow .15s ease; }
.gradebook-component:hover { border-color: var(--component-color); box-shadow: var(--shadow-md); }
.gradebook-component-exam_regular { --component-color: var(--info-600); --component-soft: var(--info-100); }
.gradebook-component-pts { --component-color: var(--warning-600); --component-soft: #fff7ed; }
.gradebook-component-pas { --component-color: #9333ea; --component-soft: #f3e8ff; }
.gradebook-component-legacy { --component-color: var(--ink-500); --component-soft: var(--ink-100); }
.gradebook-component-top { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.gradebook-component-mark { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; background: var(--component-color); color: white; font-size: .68rem; font-weight: 900; }
.gradebook-component-top h4 { margin: 0 0 2px; font-size: .9rem; }
.gradebook-component-top > div > span { display: block; overflow: hidden; color: var(--ink-500); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.gradebook-component-top > .badge { font-size: .58rem; }
.gradebook-source-list { display: flex; min-width: 0; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.72); color: var(--ink-500); font-size: .67rem; }
.gradebook-source-list svg { flex-shrink: 0; color: var(--component-color); }
.gradebook-source-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gradebook-component-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--ink-200); }
.gradebook-component-bottom > label { display: grid; grid-template-columns: auto auto; align-items: center; gap: 3px 9px; color: var(--ink-500); font-size: .68rem; font-weight: 700; }
.gradebook-weight-input { display: flex; align-items: center; gap: 5px; }
.gradebook-weight-input input { width: 82px; height: 38px; font-size: .9rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.gradebook-weight-input strong { color: var(--ink-500); }
.gradebook-component-bottom label > small { grid-column: 2; min-height: 14px; color: var(--warning-600); font-size: .62rem; font-weight: 700; }
.gradebook-matrix-card { overflow: hidden; }
.gradebook-table-wrap { border: 1px solid var(--ink-200); border-radius: var(--radius-md); }
.gradebook-table { margin: 0; }
.gradebook-table thead th { vertical-align: bottom; background: var(--ink-50); }
.gradebook-table thead th > span { display: block; color: var(--ink-700); font-size: .7rem; white-space: nowrap; }
.gradebook-table thead th > small { display: block; margin-top: 2px; color: var(--ink-500); font-size: .58rem; font-weight: 600; white-space: nowrap; }
.gradebook-table .gradebook-student-column { min-width: 220px; }
.gradebook-table tbody td:not(:first-child) { text-align: center; }
.gradebook-student { display: flex; align-items: center; gap: var(--space-2); }
.gradebook-student > span { display: flex; width: 34px; height: 34px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 10px; background: var(--brand-100); color: var(--brand-700); font-size: .67rem; font-weight: 800; }
.gradebook-student > div { display: flex; min-width: 0; flex-direction: column; }
.gradebook-student strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.gradebook-student small { color: var(--ink-500); font-size: .63rem; }
.gradebook-score { display: inline-flex; min-width: 58px; justify-content: center; padding: 5px 8px; border-radius: 8px; background: var(--ink-100); color: var(--ink-700); font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.gradebook-score.is-good { background: var(--success-100); color: var(--success-600); }
.gradebook-score.is-low { background: var(--danger-100); color: var(--danger-600); }
.gradebook-score.is-empty { color: var(--ink-500); }
.gradebook-final { font-size: .96rem; font-variant-numeric: tabular-nums; }
.gradebook-final.is-good { color: var(--success-600); }
.gradebook-final.is-low { color: var(--danger-600); }
.gradebook-final.is-running { color: var(--ink-500); }

@media (max-width: 950px) {
  .gradebook-automation-hero { grid-template-columns: 52px minmax(0, 1fr); }
  .gradebook-automation-stats { grid-column: 1 / -1; }
  .gradebook-automation-stats > div { flex: 1; }
}
@media (max-width: 700px) {
  .gradebook-excluded, .gradebook-section-heading { align-items: stretch; flex-direction: column; }
  .gradebook-excluded-list { justify-content: flex-start; }
  .gradebook-weight-action { justify-content: space-between; }
  .gradebook-component-grid { grid-template-columns: 1fr; }
  .gradebook-component-top { grid-template-columns: 38px minmax(0, 1fr); }
  .gradebook-component-mark { width: 38px; height: 38px; }
  .gradebook-component-top > .badge { grid-column: 2; justify-self: start; }
}

/* Modern question picker: type is visible before a teacher attaches a question. */
.question-picker-title { align-items: flex-start; gap: var(--space-4); }
.question-picker-title h3 { margin-bottom: 3px; }
.question-picker-title p { margin: 0; color: var(--ink-500); font-size: .82rem; }
.question-picker-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.question-picker-toolbar {
  display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: var(--space-3); align-items: center;
  margin-bottom: var(--space-4); padding: var(--space-3); border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--ink-50);
}
.question-picker-search input { width: 100%; min-height: 40px; background: var(--white); }
.question-picker-filters { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--ink-100); }
.question-picker-filter {
  min-height: 34px; padding: 5px 9px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-500); font: inherit; font-size: .72rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.question-picker-filter:hover { color: var(--ink-900); }
.question-picker-filter.is-active { color: var(--brand-700); background: var(--white); box-shadow: var(--shadow-sm); }
.question-picker-filter > span { display: inline-flex; min-width: 18px; justify-content: center; margin-left: 3px; color: inherit; font-size: .65rem; }
.question-picker-bank { margin-top: var(--space-4); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); overflow: hidden; }
.question-picker-bank[hidden], .question-picker-item[hidden], .question-picker-no-results[hidden] { display: none !important; }
.question-picker-bank-heading {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ink-200); background: linear-gradient(90deg, var(--brand-50), var(--white));
}
.question-picker-bank-heading > div { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.question-picker-bank-heading h4 { overflow: hidden; margin: 0; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.question-picker-bank-heading > span { color: var(--ink-500); font-size: .72rem; white-space: nowrap; }
.question-picker-bank-icon { display: inline-flex; padding: 6px; border-radius: 8px; background: var(--brand-100); color: var(--brand-700); }
.question-picker-bank-empty { margin: 0; padding: var(--space-4); color: var(--ink-500); font-size: .82rem; }
.question-picker-list { display: flex; flex-direction: column; }
.question-picker-item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  min-width: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ink-100);
  background: var(--white); color: inherit; cursor: pointer; transition: background .15s ease, box-shadow .15s ease;
}
.question-picker-item:last-child { border-bottom: 0; }
.question-picker-item:not(.is-attached):hover { background: var(--brand-50); }
.question-picker-item.is-selected { background: var(--brand-50); box-shadow: inset 3px 0 var(--brand-600); }
.question-picker-item.is-attached { background: var(--ink-50); cursor: default; }
.question-picker-check { display: flex; align-items: center; justify-content: center; }
.question-picker-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.question-picker-check input + span {
  display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center;
  border: 1.5px solid var(--ink-300); border-radius: 6px; background: var(--white); transition: all .15s ease;
}
.question-picker-check input:focus-visible + span { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.question-picker-check input:checked + span { border-color: var(--brand-600); background: var(--brand-600); }
.question-picker-check input:checked + span::after { content: ''; width: 8px; height: 4px; border-bottom: 2px solid white; border-left: 2px solid white; transform: translateY(-1px) rotate(-45deg); }
.question-picker-sequence { color: var(--ink-300); font-size: .7rem; font-weight: 800; }
.question-picker-content { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.question-picker-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.question-picker-stem { color: var(--ink-900); font-size: .84rem; line-height: 1.45; }
.question-type-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border-radius: 999px;
  font-size: .67rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
}
.question-type-badge > span { display: inline-flex; min-width: 24px; height: 20px; align-items: center; justify-content: center; border-radius: 999px; color: white; font-size: .58rem; letter-spacing: .02em; }
.question-type-mcq { color: var(--brand-700); background: var(--brand-50); }
.question-type-mcq > span { background: var(--brand-600); }
.question-type-short_answer { color: var(--info-600); background: var(--info-100); }
.question-type-short_answer > span { background: var(--info-600); }
.question-type-essay { color: #7e22ce; background: #f3e8ff; }
.question-type-essay > span { background: #9333ea; }
.question-difficulty, .question-has-image { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-500); font-size: .67rem; font-weight: 700; }
.question-difficulty::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); }
.question-difficulty-mudah::before { background: var(--success-600); }
.question-difficulty-sedang::before { background: var(--warning-600); }
.question-difficulty-sulit::before { background: var(--danger-600); }
.question-has-image svg { color: var(--info-600); }
.question-picker-state { min-width: 104px; color: var(--ink-500); font-size: .7rem; font-weight: 700; text-align: right; white-space: nowrap; }
.question-picker-item.is-selected .question-picker-state { color: var(--brand-700); }
.question-picker-no-results { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: var(--space-4); padding: var(--space-6); border: 1px dashed var(--ink-300); border-radius: var(--radius-md); color: var(--ink-500); font-size: .8rem; }
.question-picker-no-results strong { color: var(--ink-700); font-size: .9rem; }

@media (max-width: 1000px) {
  .question-picker-toolbar { grid-template-columns: 1fr; }
  .question-picker-filters { overflow-x: auto; }
}
@media (max-width: 700px) {
  .question-picker-title { flex-direction: column; }
  .question-picker-actions { width: 100%; }
  .question-picker-actions .btn { flex: 1; }
  .question-picker-filter { flex: 1; }
  .question-picker-item { grid-template-columns: 24px minmax(0, 1fr); padding: var(--space-3); }
  .question-picker-state { grid-column: 2; min-width: 0; text-align: left; }
}

/* Bulk grading workspace — built for checking a full class without page reloads. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.quiz-grading { scroll-margin-top: 88px; overflow: visible; }
.quiz-grading-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5);
  margin-bottom: var(--space-3);
}
.quiz-grading-heading h3 { margin-bottom: 3px; font-size: 1.25rem; }
.quiz-grading-heading p { margin: 0; font-size: .875rem; }
.quiz-grading-eyebrow {
  display: block; margin-bottom: 3px; color: var(--brand-600); font-size: .7rem;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.quiz-grading-progress-summary { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; color: var(--ink-500); font-size: .78rem; }
.quiz-grading-progress-summary strong { color: var(--ink-900); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.quiz-grading-progress { height: 7px; margin-bottom: var(--space-4); overflow: hidden; border-radius: 999px; background: var(--ink-100); }
.quiz-grading-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-500), var(--success-600)); transition: width .25s ease; }

.quiz-grading-toolbar {
  position: sticky; top: 69px; z-index: 8;
  display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: center; gap: var(--space-3);
  margin: 0 calc(var(--space-5) * -1) var(--space-4); padding: var(--space-3) var(--space-5);
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05); backdrop-filter: blur(10px);
}
.quiz-grading-search input { width: 100%; min-height: 40px; padding-left: var(--space-3); background: var(--ink-50); }
.quiz-grading-filters { display: flex; padding: 3px; border-radius: 10px; background: var(--ink-100); }
.quiz-grading-filter {
  min-height: 34px; padding: 5px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-500); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer;
}
.quiz-grading-filter:hover { color: var(--ink-900); }
.quiz-grading-filter.is-active { color: var(--brand-700); background: var(--white); box-shadow: var(--shadow-sm); }
.quiz-grading-filter span { display: inline-flex; min-width: 19px; justify-content: center; margin-left: 3px; padding: 1px 5px; border-radius: 999px; background: var(--warning-100); color: var(--warning-600); }
.quiz-grading-save-group { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.quiz-grading-save-state { max-width: 170px; color: var(--ink-500); font-size: .74rem; text-align: right; line-height: 1.3; }
.quiz-grading-save-state.is-dirty { color: var(--warning-600); font-weight: 700; }
.quiz-grading-save-state.is-saving { color: var(--info-600); }
.quiz-grading-save-state.is-success { color: var(--success-600); font-weight: 700; }
.quiz-grading-save-state.is-error { color: var(--danger-600); font-weight: 700; }
.quiz-grading-save-group .btn { white-space: nowrap; }

.quiz-grading-students { display: flex; flex-direction: column; gap: var(--space-4); }
.quiz-grading-student {
  overflow: hidden; border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-sm);
}
.quiz-grading-student-header {
  display: grid; grid-template-columns: 28px 42px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ink-200); background: linear-gradient(90deg, var(--brand-50), var(--white) 42%);
}
.quiz-grading-student-number { color: var(--ink-300); font-size: .76rem; font-weight: 800; text-align: center; }
.quiz-grading-avatar {
  display: flex; width: 42px; height: 42px; align-items: center; justify-content: center;
  border: 1px solid var(--brand-100); border-radius: 12px; background: var(--brand-100); color: var(--brand-700); font-size: .8rem; font-weight: 800;
}
.quiz-grading-student-identity { min-width: 0; }
.quiz-grading-student-identity h4 { overflow: hidden; margin: 0 0 1px; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.quiz-grading-student-identity span { color: var(--ink-500); font-size: .74rem; }
.quiz-grading-student-result { display: flex; align-items: center; gap: var(--space-3); }
.quiz-grading-current-score { color: var(--ink-500); font-size: .72rem; white-space: nowrap; }
.quiz-grading-current-score strong { margin-left: 3px; color: var(--ink-900); font-size: .9rem; font-variant-numeric: tabular-nums; }

.quiz-grading-answer { display: grid; grid-template-columns: minmax(0, 1fr) 178px; transition: background .2s ease, box-shadow .2s ease; }
.quiz-grading-answer + .quiz-grading-answer { border-top: 1px solid var(--ink-100); }
.quiz-grading-answer[hidden], .quiz-grading-student[hidden], .quiz-grading-empty[hidden] { display: none !important; }
.quiz-grading-answer.is-dirty { background: #fffbeb; box-shadow: inset 3px 0 var(--warning-600); }
.quiz-grading-answer.is-just-saved { background: var(--success-100); }
.quiz-grading-question { min-width: 0; padding: var(--space-4); }
.quiz-grading-question-meta { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--ink-500); font-size: .7rem; font-weight: 700; }
.quiz-grading-stem { margin-bottom: var(--space-3); color: var(--ink-700); font-size: .82rem; line-height: 1.55; }
.quiz-grading-response { padding: var(--space-3); border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--ink-50); }
.quiz-grading-response > span { display: block; margin-bottom: 4px; color: var(--ink-500); font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.quiz-grading-response p { margin: 0; color: var(--ink-900); font-size: .9rem; line-height: 1.55; white-space: pre-line; }
.quiz-grading-response.is-empty p { color: var(--ink-500); font-style: italic; }
.quiz-grading-score-panel { display: flex; flex-direction: column; justify-content: center; padding: var(--space-4); border-left: 1px solid var(--ink-100); background: rgba(248, 250, 252, .65); }
.quiz-grading-score-owner { overflow: hidden; margin-bottom: var(--space-2); color: var(--brand-700); font-size: .68rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.quiz-grading-score-panel > label { margin-bottom: 5px; color: var(--ink-700); font-size: .72rem; font-weight: 800; }
.quiz-grading-score-input { display: flex; align-items: center; gap: 7px; }
.quiz-grading-score-input input { width: 88px; height: 42px; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.quiz-grading-score-input span { color: var(--ink-500); font-size: .74rem; }
.quiz-grading-quick { display: flex; gap: 4px; margin-top: 7px; }
.quiz-grading-quick button {
  flex: 1; min-height: 28px; padding: 3px 6px; border: 1px solid var(--ink-200); border-radius: 7px;
  background: var(--white); color: var(--ink-700); font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer;
}
.quiz-grading-quick button:hover { border-color: var(--brand-500); color: var(--brand-700); background: var(--brand-50); }
.quiz-grading-row-state { margin-top: 7px; color: var(--ink-500); font-size: .65rem; }
.quiz-grading-answer.is-dirty .quiz-grading-row-state { color: var(--warning-600); font-weight: 700; }
.quiz-grading-empty { padding: var(--space-6); border: 1px dashed var(--ink-300); border-radius: var(--radius-md); color: var(--ink-500); text-align: center; font-size: .85rem; }
.quiz-grading-footnote { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); color: var(--ink-500); font-size: .7rem; }
.quiz-grading-footnote kbd { padding: 1px 5px; border: 1px solid var(--ink-300); border-bottom-width: 2px; border-radius: 5px; background: var(--white); color: var(--ink-700); font-family: inherit; font-size: .65rem; }

@media (max-width: 1100px) {
  .quiz-grading-toolbar { grid-template-columns: minmax(220px, 1fr) auto; }
  .quiz-grading-save-group { grid-column: 1 / -1; justify-content: space-between; }
  .quiz-grading-save-state { max-width: none; text-align: left; }
}
@media (max-width: 700px) {
  .quiz-grading-heading { flex-direction: column; gap: var(--space-2); }
  .quiz-grading-toolbar { position: static; grid-template-columns: 1fr; margin-right: calc(var(--space-4) * -1); margin-left: calc(var(--space-4) * -1); padding: var(--space-3) var(--space-4); }
  .quiz-grading-filters { overflow-x: auto; }
  .quiz-grading-filter { flex: 1; white-space: nowrap; }
  .quiz-grading-save-group { grid-column: auto; }
  .quiz-grading-student-header { grid-template-columns: 24px 38px minmax(0, 1fr); }
  .quiz-grading-avatar { width: 38px; height: 38px; }
  .quiz-grading-student-result { grid-column: 2 / -1; justify-content: space-between; }
  .quiz-grading-answer { grid-template-columns: 1fr; }
  .quiz-grading-score-panel { border-top: 1px solid var(--ink-100); border-left: 0; }
  .quiz-grading-score-input input { width: 110px; }
  .quiz-grading-footnote { flex-direction: column; }
}

/* Layar sempit: kode dibesarkan sampai hampir selebar layar, karena jarak pindai
   di gerbang sering lebih jauh dari jarak baca. */
@media (max-width: 420px) {
  .qrs-box { padding: var(--space-5) var(--space-4); }
  .qrs-code svg { max-width: 100%; }
}

/* ---------------------------------------------------------------- course workspace
   Kelas Digital is an operational queue for teachers and students, not a passive
   catalogue. The cw namespace keeps this denser, priority-led UI isolated from the
   legacy course detail components. */
.cw { display: grid; gap: var(--space-4); }
.cw-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: clamp(24px, 3vw, 38px); border: 1px solid rgba(199, 210, 254, .75);
  border-radius: 22px; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(238,242,255,.9));
  box-shadow: 0 12px 34px rgba(79, 70, 229, .07);
}
.cw-hero::after {
  content: ''; position: absolute; z-index: -1; width: 300px; height: 300px; right: -105px; top: -175px;
  border-radius: 50%; background: radial-gradient(circle, rgba(99,102,241,.22), rgba(99,102,241,0) 70%);
}
.cw-hero-copy { min-width: 0; }
.cw-eyebrow { display: block; margin-bottom: 5px; color: var(--brand-600); font-size: .67rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.cw-hero h1 { margin-bottom: 7px; font-size: clamp(1.65rem, 2.4vw, 2.15rem); letter-spacing: -.035em; }
.cw-hero p { max-width: 770px; margin: 0; color: var(--ink-500); font-size: .92rem; line-height: 1.55; }
.cw-hero-context { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-4); }
.cw-hero-context span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(199,210,254,.6); border-radius: 9px; color: var(--ink-700); background: rgba(255,255,255,.76); font-size: .7rem; font-weight: 700; }
.cw-hero-art { flex: 0 0 76px; width: 76px; height: 76px; display: inline-flex; align-items: center; justify-content: center; border-radius: 22px; color: var(--white); background: linear-gradient(145deg, var(--brand-600), #7c3aed); box-shadow: 0 16px 34px rgba(79,70,229,.22); transform: rotate(3deg); }

.cw-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.cw-metric { position: relative; overflow: hidden; min-height: 116px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--ink-200); border-radius: 17px; background: var(--white); box-shadow: var(--shadow-sm); }
.cw-metric::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand-500); }
.cw-metric-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; color: var(--brand-700); background: var(--brand-100); }
.cw-metric div > span, .cw-metric div > strong, .cw-metric div > small { display: block; }
.cw-metric div > span { color: var(--ink-500); font-size: .66rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.cw-metric div > strong { margin: 1px 0; color: var(--ink-900); font-size: 1.45rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cw-metric div > small { color: var(--ink-500); font-size: .65rem; line-height: 1.35; }
.cw-metric.is-success::before { background: var(--success-600); }
.cw-metric.is-success .cw-metric-icon { color: var(--success-600); background: var(--success-100); }
.cw-metric.is-warning::before { background: var(--warning-600); }
.cw-metric.is-warning .cw-metric-icon { color: var(--warning-600); background: var(--warning-100); }
.cw-metric.is-danger::before { background: var(--danger-600); }
.cw-metric.is-danger .cw-metric-icon { color: var(--danger-600); background: var(--danger-100); }
.cw-metric.is-info::before { background: var(--info-600); }
.cw-metric.is-info .cw-metric-icon { color: var(--info-600); background: var(--info-100); }

.cw-priority { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: var(--space-3); padding: 13px 15px; border: 1px solid #fde68a; border-radius: 15px; background: linear-gradient(100deg, #fffbeb, var(--white)); }
.cw-priority.has-alert { border-color: #fecaca; background: linear-gradient(100deg, #fff7ed, var(--white)); }
.cw-priority-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--warning-600); background: var(--warning-100); }
.cw-priority.has-alert .cw-priority-icon { color: var(--danger-600); background: var(--danger-100); }
.cw-priority strong { display: block; margin-bottom: 3px; color: var(--ink-900); font-size: .82rem; }
.cw-priority p { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; color: var(--ink-500); font-size: .7rem; }
.cw-priority p span { position: relative; }
.cw-priority p span + span::before { content: '·'; position: absolute; left: -9px; }

.cw-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--ink-200); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); }
.cw-search { position: relative; min-width: 0; display: flex; align-items: center; }
.cw-search > span:first-child { position: absolute; left: 13px; z-index: 1; color: var(--ink-400, var(--ink-500)); font-size: 1.25rem; line-height: 1; }
.cw-search input { width: 100%; height: 44px; padding-left: 40px; background: var(--ink-50); }
.cw-filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; }
.cw-filters button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 10px; border: 1px solid transparent; border-radius: 999px; color: var(--ink-600); background: var(--ink-100); font: inherit; font-size: .7rem; font-weight: 750; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.cw-filters button:hover { color: var(--brand-700); border-color: var(--brand-200); background: var(--brand-50); }
.cw-filters button.is-active { color: var(--white); border-color: var(--brand-600); background: var(--brand-600); }
.cw-filters button span { display: inline-flex; min-width: 20px; height: 20px; align-items: center; justify-content: center; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,.65); color: var(--ink-700); font-size: .62rem; }
.cw-result-count { align-self: center; justify-self: end; color: var(--ink-500); font-size: .67rem; white-space: nowrap; }

.cw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-4); align-items: start; }
.cw-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: var(--space-5); border: 1px solid var(--ink-200); border-radius: 19px; background: var(--white); box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.cw-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--brand-500), var(--brand-300)); }
.cw-card.is-warning::before { background: linear-gradient(90deg, var(--warning-600), #fbbf24); }
.cw-card.is-danger::before { background: linear-gradient(90deg, var(--danger-600), #fb923c); }
.cw-card.is-ready::before { background: linear-gradient(90deg, var(--success-600), #4ade80); }
.cw-card:hover { transform: translateY(-2px); border-color: var(--brand-200); box-shadow: var(--shadow-md); }
.cw-card[hidden] { display: none !important; }
.cw-card-head { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: start; gap: var(--space-3); }
.cw-subject-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; color: var(--brand-700); background: linear-gradient(145deg, var(--brand-100), #f5f3ff); font-size: 1.15rem; font-weight: 850; }
.cw-class-label { display: block; margin-bottom: 1px; color: var(--brand-600); font-size: .62rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.cw-card-identity { min-width: 0; }
.cw-card-identity h2 { overflow: hidden; margin: 0; color: var(--ink-900); font-size: 1rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.cw-card-identity p { overflow: hidden; margin: 2px 0 0; color: var(--ink-500); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.cw-status { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; border-radius: 999px; color: var(--ink-600); background: var(--ink-100); font-size: .59rem; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.cw-status.is-published { color: var(--success-600); background: var(--success-100); }
.cw-status.is-draft, .cw-status.is-review, .cw-status.is-preparing { color: var(--warning-600); background: var(--warning-100); }
.cw-status.is-archived { color: var(--ink-500); background: var(--ink-100); }

.cw-schedule { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; margin-top: var(--space-4); padding: 10px 11px; border: 1px solid var(--ink-100); border-radius: 11px; background: var(--ink-50); }
.cw-schedule > span { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--brand-600); background: var(--brand-100); }
.cw-schedule strong, .cw-schedule div > span { display: block; }
.cw-schedule strong { margin-bottom: 2px; color: var(--ink-700); font-size: .67rem; }
.cw-schedule div > span { color: var(--ink-500); font-size: .68rem; line-height: 1.45; overflow-wrap: anywhere; }
.cw-schedule.has-alert { border-color: #fecaca; background: #fff7ed; }
.cw-schedule.has-alert > span { color: var(--danger-600); background: var(--danger-100); }
.cw-schedule.has-alert strong { color: var(--danger-600); }

.cw-readiness { margin-top: var(--space-4); }
.cw-readiness > div { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: 6px; color: var(--ink-500); font-size: .68rem; }
.cw-readiness > div strong { color: var(--ink-900); font-size: .72rem; font-variant-numeric: tabular-nums; }
.cw-progress { height: 7px; display: block; overflow: hidden; border-radius: 999px; background: var(--ink-100); }
.cw-progress i { display: block; width: var(--cw-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-500), #8b5cf6); transition: width .3s ease; }
.cw-readiness > small { display: block; margin-top: 5px; color: var(--ink-500); font-size: .61rem; line-height: 1.35; }
.cw-readiness.is-student .cw-progress i { background: linear-gradient(90deg, var(--info-600), var(--brand-500)); }

.cw-resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--space-4); }
.cw-resources > a, .cw-resources > span { min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--ink-100); border-radius: 10px; color: var(--ink-700); background: var(--ink-50); text-decoration: none; }
.cw-resources > a:hover { border-color: var(--brand-200); color: var(--brand-700); background: var(--brand-50); }
.cw-resources > a > span, .cw-resources > span > b { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--brand-600); background: var(--brand-100); font-weight: inherit; }
.cw-resources strong, .cw-resources small { display: block; }
.cw-resources strong { color: inherit; font-size: .8rem; line-height: 1; }
.cw-resources small { margin-top: 2px; color: var(--ink-500); font-size: .58rem; }
.cw-card-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: var(--space-3); color: var(--ink-500); font-size: .65rem; }
.cw-card-meta span { display: inline-flex; align-items: center; gap: 5px; }

.cw-card-alert, .cw-card-note { display: flex; align-items: center; gap: 9px; margin-top: var(--space-3); padding: 9px 10px; border: 1px solid #fde68a; border-radius: 10px; color: var(--warning-600); background: #fffbeb; font-size: .66rem; text-decoration: none; }
.cw-card-alert:hover { color: var(--warning-600); border-color: #fbbf24; text-decoration: none; }
.cw-card-alert > svg, .cw-card-note > svg { flex: 0 0 auto; }
.cw-card-alert > span { min-width: 0; flex: 1; }
.cw-card-alert strong, .cw-card-alert small { display: block; }
.cw-card-alert strong { color: var(--warning-600); font-size: .68rem; }
.cw-card-alert small { margin-top: 1px; color: var(--ink-500); font-size: .61rem; }
.cw-card-alert b { font-size: 1rem; }
.cw-card-alert.is-danger { color: var(--danger-600); border-color: #fecaca; background: #fff7ed; }
.cw-card-alert.is-danger strong { color: var(--danger-600); }
.cw-card-note.is-action { color: var(--brand-700); border-color: var(--brand-200); background: var(--brand-50); }
.cw-card-note.is-clear { color: var(--success-600); border-color: #bbf7d0; background: var(--success-100); }
.cw-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); }
.cw-card-footer .btn { width: 100%; justify-content: center; }
.cw-card-footer small { color: var(--ink-500); font-size: .63rem; }

.cw-empty, .cw-filter-empty { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-6); border: 1px dashed var(--ink-300); border-radius: 18px; color: var(--ink-400, var(--ink-500)); background: var(--ink-50); }
.cw-empty > span { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 15px; color: var(--brand-600); background: var(--brand-100); }
.cw-empty strong, .cw-filter-empty strong, .cw-filter-empty span { display: block; }
.cw-empty p { max-width: 620px; margin: 3px 0 0; color: var(--ink-500); font-size: .76rem; }
.cw-filter-empty { min-height: 140px; flex-direction: column; gap: 5px; text-align: center; }
.cw-filter-empty span { color: var(--ink-500); font-size: .72rem; }

@media (max-width: 1100px) {
  .cw-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .cw-hero { align-items: flex-start; padding: var(--space-5); }
  .cw-hero-art { flex-basis: 54px; width: 54px; height: 54px; border-radius: 16px; }
  .cw-hero-art svg { width: 28px; height: 28px; }
  .cw-priority { grid-template-columns: 38px minmax(0,1fr); }
  .cw-priority-icon { width: 38px; height: 38px; }
  .cw-priority .btn { grid-column: 2; justify-self: start; }
  .cw-toolbar { grid-template-columns: 1fr; }
  .cw-result-count { grid-row: 2; justify-self: start; }
  .cw-filters { grid-column: auto; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: thin; }
  .cw-filters button { flex: 0 0 auto; }
}
@media (max-width: 520px) {
  .cw { gap: var(--space-3); }
  .cw-hero { border-radius: 17px; }
  .cw-hero-art { display: none; }
  .cw-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cw-metric { min-height: 102px; grid-template-columns: 34px minmax(0,1fr); gap: 8px; padding: 11px; border-radius: 13px; }
  .cw-metric-icon { width: 34px; height: 34px; border-radius: 10px; }
  .cw-metric-icon svg { width: 17px; height: 17px; }
  .cw-metric div > span { font-size: .57rem; }
  .cw-metric div > strong { font-size: 1.18rem; }
  .cw-metric div > small { display: none; }
  .cw-priority { padding: 11px; }
  .cw-priority p span + span::before { display: none; }
  .cw-card { padding: var(--space-4); border-radius: 16px; }
  .cw-card-head { grid-template-columns: 42px minmax(0,1fr); }
  .cw-subject-icon { width: 42px; height: 42px; }
  .cw-status { grid-column: 2; justify-self: start; margin-top: 2px; }
  .cw-resources { gap: 5px; }
  .cw-resources > a, .cw-resources > span { grid-template-columns: 1fr; justify-items: center; gap: 4px; padding: 7px 4px; text-align: center; }
}