/* Qalam for eSkooly. Built by design/qalam/tools/build_eskooly.py from the design system: do not edit. */
@layer override, legacy, tokens, base, components, bridge, shell, utilities;
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
@layer tokens {
:root, [data-theme="light"] {
  color-scheme: light;
  --q-canvas: #f3f4f7;
  --q-surface: #ffffff;
  --q-surface-raised: #ffffff;
  --q-fill: #ebedf1;
  --q-fill-strong: #dfe1e6;
  --q-hairline: #dde0e4;
  --q-border-control: #858991;
  --q-ink: #14171d;
  --q-ink-secondary: #595e66;
  --q-ink-tertiary: #95989f;
  --q-lapis: #0071e3;
  --q-lapis-strong: #0058b0;
  --q-lapis-soft: #e8f2fe;
  --q-on-lapis: #ffffff;
  --q-accent: var(--q-lapis);
  --q-accent-strong: var(--q-lapis-strong);
  --q-accent-soft: var(--q-lapis-soft);
  --q-on-accent: var(--q-on-lapis);
  --q-focus-ring: #2b8af7;
  --q-gold: #ecba4f;
  --q-gold-ink: #865812;
  --q-on-gold: #14171d;
  --q-success: #05773b;
  --q-success-soft: #dcf7e2;
  --q-success-fill: #0e8142;
  --q-done: var(--q-success);
  --q-done-soft: var(--q-success-soft);
  --q-on-success: #ffffff;
  --q-warning: #995600;
  --q-warning-soft: #ffeecc;
  --q-on-warning: #ffffff;
  --q-danger: #c02525;
  --q-danger-soft: #ffe9e5;
  --q-on-danger: #ffffff;
  --q-info: #076c92;
  --q-info-soft: #e0f4fe;
  --q-chart-1: #0071e3;
  --q-chart-2: #d4652a;
  --q-glass: rgba(249, 250, 252, 0.72);
  --q-glass-thick: rgba(255, 255, 255, 0.86);
  --q-scrim: rgba(10, 12, 16, 0.28);
  --q-plate: transparent;
  --q-shadow-control: 0 1px 3px rgba(20, 23, 29, 0.14), 0 1px 1px rgba(20, 23, 29, 0.06);
  --q-shadow-raised: 0 12px 32px rgba(20, 23, 29, 0.14), 0 2px 8px rgba(20, 23, 29, 0.08);
  --q-shadow-sheet: 0 -12px 48px rgba(20, 23, 29, 0.18);
  --q-shadow-float: 0 8px 28px rgba(20, 23, 29, 0.16), inset 0 0.5px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] {
  color-scheme: dark;
  --q-canvas: #1c1e22;
  --q-surface: #25282d;
  --q-surface-raised: #2e3137;
  --q-fill: #32363c;
  --q-fill-strong: #3d4148;
  --q-hairline: #3b3f45;
  --q-border-control: #7d8189;
  --q-ink: #eceef1;
  --q-ink-secondary: #bdc1c8;
  --q-ink-tertiary: #73777e;
  --q-lapis: #409cff;
  --q-lapis-strong: #8cc4ff;
  --q-lapis-soft: #15324f;
  --q-on-lapis: #04111f;
  --q-focus-ring: #8cc4ff;
  --q-gold: #e2b34d;
  --q-gold-ink: #f0c876;
  --q-on-gold: #140f06;
  --q-success: #71d790;
  --q-success-soft: #183a25;
  --q-success-fill: #46b86e;
  --q-on-success: #09120b;
  --q-warning: #f7c15f;
  --q-warning-soft: #47320e;
  --q-on-warning: #1a1003;
  --q-danger: #ff8880;
  --q-danger-soft: #561f1c;
  --q-on-danger: #1f0806;
  --q-info: #80c8ee;
  --q-info-soft: #133849;
  --q-chart-1: #409cff;
  --q-chart-2: #cf6f30;
  --q-glass: rgba(37, 40, 45, 0.72);
  --q-glass-thick: rgba(46, 49, 55, 0.86);
  --q-scrim: rgba(0, 0, 0, 0.55);
  --q-plate: #ffffff;
  --q-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --q-shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.10);
  --q-shadow-sheet: 0 -12px 48px rgba(0, 0, 0, 0.7);
  --q-shadow-float: 0 8px 28px rgba(0, 0, 0, 0.6), inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --q-canvas: #1c1e22;
  --q-surface: #25282d;
  --q-surface-raised: #2e3137;
  --q-fill: #32363c;
  --q-fill-strong: #3d4148;
  --q-hairline: #3b3f45;
  --q-border-control: #7d8189;
  --q-ink: #eceef1;
  --q-ink-secondary: #bdc1c8;
  --q-ink-tertiary: #73777e;
  --q-lapis: #409cff;
  --q-lapis-strong: #8cc4ff;
  --q-lapis-soft: #15324f;
  --q-on-lapis: #04111f;
  --q-focus-ring: #8cc4ff;
  --q-gold: #e2b34d;
  --q-gold-ink: #f0c876;
  --q-on-gold: #140f06;
  --q-success: #71d790;
  --q-success-soft: #183a25;
  --q-success-fill: #46b86e;
  --q-on-success: #09120b;
  --q-warning: #f7c15f;
  --q-warning-soft: #47320e;
  --q-on-warning: #1a1003;
  --q-danger: #ff8880;
  --q-danger-soft: #561f1c;
  --q-on-danger: #1f0806;
  --q-info: #80c8ee;
  --q-info-soft: #133849;
  --q-chart-1: #409cff;
  --q-chart-2: #cf6f30;
  --q-glass: rgba(37, 40, 45, 0.72);
  --q-glass-thick: rgba(46, 49, 55, 0.86);
  --q-scrim: rgba(0, 0, 0, 0.55);
  --q-plate: #ffffff;
  --q-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --q-shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.10);
  --q-shadow-sheet: 0 -12px 48px rgba(0, 0, 0, 0.7);
  --q-shadow-float: 0 8px 28px rgba(0, 0, 0, 0.6), inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
  }
}
[data-palette="navy"]:not([data-theme="dark"]) {
  --q-lapis: #1b3a6b;
  --q-lapis-strong: #132b52;
  --q-lapis-soft: #e7edf7;
  --q-on-lapis: #ffffff;
  --q-focus-ring: #2f5aa0;
  --q-chart-1: #1b3a6b;
  --q-done: #865812;
  --q-done-soft: #fbf1d9;
}
[data-palette="navy"][data-theme="dark"] {
  --q-lapis: #7fa7e6;
  --q-lapis-strong: #a9c4ef;
  --q-lapis-soft: #1f3150;
  --q-on-lapis: #0c1626;
  --q-focus-ring: #a9c4ef;
  --q-chart-1: #7fa7e6;
  --q-done: #f0c876;
  --q-done-soft: #45350f;
}
@media (prefers-color-scheme: dark) {
  [data-palette="navy"]:not([data-theme="light"]) {
  --q-lapis: #7fa7e6;
  --q-lapis-strong: #a9c4ef;
  --q-lapis-soft: #1f3150;
  --q-on-lapis: #0c1626;
  --q-focus-ring: #a9c4ef;
  --q-chart-1: #7fa7e6;
  --q-done: #f0c876;
  --q-done-soft: #45350f;
  }
}
@media print {
  :root:root:root {
  color-scheme: light;
  --q-canvas: #f3f4f7;
  --q-surface: #ffffff;
  --q-surface-raised: #ffffff;
  --q-fill: #ebedf1;
  --q-fill-strong: #dfe1e6;
  --q-hairline: #dde0e4;
  --q-border-control: #858991;
  --q-ink: #14171d;
  --q-ink-secondary: #595e66;
  --q-ink-tertiary: #95989f;
  --q-lapis: #0071e3;
  --q-lapis-strong: #0058b0;
  --q-lapis-soft: #e8f2fe;
  --q-on-lapis: #ffffff;
  --q-accent: var(--q-lapis);
  --q-accent-strong: var(--q-lapis-strong);
  --q-accent-soft: var(--q-lapis-soft);
  --q-on-accent: var(--q-on-lapis);
  --q-focus-ring: #2b8af7;
  --q-gold: #ecba4f;
  --q-gold-ink: #865812;
  --q-on-gold: #14171d;
  --q-success: #05773b;
  --q-success-soft: #dcf7e2;
  --q-success-fill: #0e8142;
  --q-done: var(--q-success);
  --q-done-soft: var(--q-success-soft);
  --q-on-success: #ffffff;
  --q-warning: #995600;
  --q-warning-soft: #ffeecc;
  --q-on-warning: #ffffff;
  --q-danger: #c02525;
  --q-danger-soft: #ffe9e5;
  --q-on-danger: #ffffff;
  --q-info: #076c92;
  --q-info-soft: #e0f4fe;
  --q-chart-1: #0071e3;
  --q-chart-2: #d4652a;
  --q-glass: rgba(249, 250, 252, 0.72);
  --q-glass-thick: rgba(255, 255, 255, 0.86);
  --q-scrim: rgba(10, 12, 16, 0.28);
  --q-plate: transparent;
  --q-shadow-control: 0 1px 3px rgba(20, 23, 29, 0.14), 0 1px 1px rgba(20, 23, 29, 0.06);
  --q-shadow-raised: 0 12px 32px rgba(20, 23, 29, 0.14), 0 2px 8px rgba(20, 23, 29, 0.08);
  --q-shadow-sheet: 0 -12px 48px rgba(20, 23, 29, 0.18);
  --q-shadow-float: 0 8px 28px rgba(20, 23, 29, 0.16), inset 0 0.5px 0 rgba(255, 255, 255, 0.7);
  }
  [data-palette="navy"]:root:root:root {
  --q-lapis: #1b3a6b;
  --q-lapis-strong: #132b52;
  --q-lapis-soft: #e7edf7;
  --q-on-lapis: #ffffff;
  --q-focus-ring: #2f5aa0;
  --q-chart-1: #1b3a6b;
  --q-done: #865812;
  --q-done-soft: #fbf1d9;
  }
}
:root {
  --q-space-1: 4px;
  --q-space-2: 8px;
  --q-space-3: 12px;
  --q-space-4: 16px;
  --q-space-5: 20px;
  --q-space-6: 24px;
  --q-space-8: 32px;
  --q-space-12: 48px;
  --q-radius-xs: 6px;
  --q-radius-sm: 10px;
  --q-radius-md: 14px;
  --q-radius-lg: 20px;
  --q-radius-xl: 28px;
  --q-radius-full: 9999px;
  --q-control-sm: 32px;
  --q-control-md: 40px;
  --q-control-touch: 44px;
  --q-control-lg: 52px;
  --q-duration-press: 100ms;
  --q-duration-quick: 180ms;
  --q-duration-spring: 514ms;
  --q-duration-spring-large: 734ms;
  --q-duration-spring-bounce: 472ms;
  --q-font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --q-font-arabic: "IBM Plex Sans Arabic", "SF Arabic", "Segoe UI", Tahoma, sans-serif;
  --q-font-quran: "KFGQPC HAFS Uthmanic Script", "Amiri Quran", "Scheherazade New", serif;
  --q-font-urdu: "Qalam Urdu", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", "Noto Nastaliq Urdu", "Urdu Typesetting", serif;
  --q-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}


/* The hidden attribute always hides, whatever display a component sets (.q-field is a grid). */
[hidden] { display: none !important; }

:root {
  /* Springs as CSS linear(): Apple damping/response, sampled. Settle times are the duration-* tokens. */
  --q-ease-spring: linear(0, 0.0344, 0.1143, 0.2148, 0.3205, 0.4225, 0.5161, 0.599, 0.6707, 0.7317, 0.7828, 0.8251, 0.8598, 0.8882, 0.9111, 0.9295, 0.9443, 0.9561, 0.9655, 0.973, 0.9788, 0.9835, 0.9871, 0.9899, 0.9922, 0.9939, 0.9953, 0.9963, 0.9972, 0.9978, 0.9983, 0.9987, 1);
  --q-ease-spring-bounce: linear(0, 0.0304, 0.1054, 0.2054, 0.3159, 0.4272, 0.5326, 0.6281, 0.7118, 0.783, 0.8419, 0.8894, 0.9268, 0.9555, 0.9768, 0.992, 1.0025, 1.0092, 1.013, 1.0148, 1.0151, 1.0145, 1.0132, 1.0117, 1.01, 1.0083, 1.0067, 1.0053, 1.0041, 1.0031, 1.0022, 1.0015, 1);
  --q-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --q-blur-chrome: 14px;
  --q-blur-thick: 20px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --q-duration-spring: 180ms; --q-duration-spring-large: 180ms; --q-duration-spring-bounce: 180ms; --q-ease-spring: ease; --q-ease-spring-bounce: ease; }
}


}
@layer base {

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--q-canvas); color: var(--q-ink); font-family: var(--q-font-sans); font-size: 0.9375rem; line-height: 22px; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (max-width: 640px) { body { font-size: 1.0625rem; line-height: 24px; letter-spacing: -0.01em; } }
:lang(ar), [lang="ar"] { font-family: var(--q-font-arabic); letter-spacing: 0; line-height: 1.65; }
/* Urdu in Nastaliq (urdu-body, the user's choice, 22 Oct 2026): Jameel Noori Nastaleeq as "Qalam Urdu", for Arabic script
   only, with the device's own Nastaliq behind it; names and numbers in an Urdu page keep the system face. Nastaliq stacks
   diagonally, so Urdu text gets tall lines and a control grows with its text instead of keeping a fixed height. Arabic script
   is never letter-spaced: spacing breaks its joins, so no component's tracking applies in Urdu. */
@font-face { font-family: "Qalam Urdu"; src: local("Jameel Noori Nastaleeq"), local("JameelNooriNastaleeq"), local("Noto Nastaliq Urdu"), local("NotoNastaliqUrdu-Regular"), local("Urdu Typesetting"); font-weight: 400 700; font-display: swap; size-adjust: 125%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
:lang(ur), [lang="ur"] { font-family: var(--q-font-urdu); letter-spacing: 0; line-height: 2.2; }
:lang(ur) * { letter-spacing: 0 !important; line-height: 2.2 !important; }
:lang(ur) :is(h1, h2, h3, .q-card-title, .q-stat-value) { line-height: 1.8 !important; }
:lang(ur) :is(.q-btn, .q-pill, .q-chip, .q-seg, .q-tab, .q-nav-item, .q-menu-item, .q-select, .q-filter) { height: auto !important; min-height: var(--_h, 32px); padding-block: 2px; }
.q-quran { font-family: var(--q-font-quran); font-size: 1.75rem; line-height: 2; letter-spacing: 0; direction: rtl; text-align: right; }
.q-num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--q-focus-ring); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--q-font-sans); }
.q-sheet h2, .q-card-title, .q-page-head h1, .q-empty h3, .q-dialog h2 { color: var(--q-ink); }
.q-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.q-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.q-icon-sm { width: 16px; height: 16px; }
[dir="rtl"] .q-icon-dir { transform: scaleX(-1); }
/* Changing Appearance: every colour changes together, not each at its own transition speed. */
.q-theme-swap, .q-theme-swap *, .q-theme-swap *::before, .q-theme-swap *::after { transition: none !important; }


}
@layer components {

.q-btn { --_h: var(--q-control-md); --_px: 18px; display: inline-flex; align-items: center; justify-content: center; gap: var(--q-space-2); height: var(--_h); padding-inline: var(--_px); border: 0; border-radius: var(--q-radius-full); font: inherit; font-size: 0.9375rem; font-weight: 590; letter-spacing: -0.008em; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; text-decoration: none; transition: background-color var(--q-duration-quick) ease, color var(--q-duration-quick) ease, transform var(--q-duration-press) var(--q-ease-out), box-shadow var(--q-duration-quick) ease; }
.q-btn:active:not(:disabled) { transform: scale(0.97); }
.q-btn:disabled { cursor: default; opacity: 1; background: var(--q-fill); color: var(--q-ink-tertiary); }
.q-btn-filled { background: var(--q-accent); color: var(--q-on-accent); }
.q-btn-filled:hover:not(:disabled) { background: var(--q-accent-strong); }
.q-btn-tinted { background: var(--q-accent-soft); color: var(--q-accent-strong); }
.q-btn-gray { background: var(--q-fill); color: var(--q-ink); }
.q-btn-gray:hover:not(:disabled) { background: var(--q-fill-strong); }
.q-btn-plain { --_px: 10px; background: none; color: var(--q-accent); }
.q-btn-plain:hover:not(:disabled) { background: var(--q-accent-soft); }
.q-btn-danger { background: var(--q-danger-soft); color: var(--q-danger); }
.q-btn-sm { --_h: var(--q-control-sm); --_px: 14px; font-size: 0.875rem; }
.q-btn-lg { --_h: var(--q-control-lg); --_px: 24px; font-size: 1.0625rem; }
.q-btn-icon { width: var(--_h); padding: 0; }
/* An icon's drawing is narrower than its 20px box, so with even padding an icon and label sit off to the
   label's side. The icon's side gets 4px less (Material does the same, 16 against 24): the pair then
   looks centred. A trailing icon is one after another element. */
.q-btn:not(.q-btn-icon):has(> .q-icon:first-child) { padding-inline-start: calc(var(--_px) - 4px); }
.q-btn:not(.q-btn-icon):has(> .q-icon:last-child:not(:first-child)) { padding-inline-end: calc(var(--_px) - 4px); }
.q-btn-block { width: 100%; }
@media (pointer: coarse) { .q-btn { --_h: max(var(--q-control-touch), var(--q-control-md)); } .q-btn-lg { --_h: var(--q-control-lg); } }

/* ---------- Segmented control ---------- */
.q-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--q-radius-full); background: var(--q-fill); isolation: isolate; }
.q-seg input { position: absolute; opacity: 0; pointer-events: none; }
.q-seg label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: calc(var(--q-control-md) - 6px); padding-inline: 14px; border-radius: var(--q-radius-full); font-size: 0.875rem; font-weight: 510; color: var(--q-ink-secondary); cursor: pointer; transition: color var(--q-duration-quick) ease; white-space: nowrap; }
.q-seg input:checked + label { color: var(--q-ink); font-weight: 600; }
.q-seg input:focus-visible + label { outline: 2px solid var(--q-focus-ring); outline-offset: 1px; }
.q-seg-thumb { position: absolute; z-index: 0; inset-block: 3px; inset-inline-start: 0; border-radius: var(--q-radius-full); background: var(--q-surface); box-shadow: var(--q-shadow-control); transition: transform var(--q-duration-spring) var(--q-ease-spring), width var(--q-duration-spring) var(--q-ease-spring); }
@media (pointer: coarse) { .q-seg label { min-height: calc(var(--q-control-touch) - 6px); } }

/* ---------- Switch ---------- */
.q-switch { position: relative; display: inline-flex; align-items: center; gap: var(--q-space-3); cursor: pointer; }
.q-switch input { position: absolute; opacity: 0; }
.q-switch-track { position: relative; width: 51px; height: 31px; border-radius: var(--q-radius-full); background: var(--q-fill-strong); box-shadow: inset 0 0 0 1px var(--q-border-control); transition: background-color var(--q-duration-quick) ease, box-shadow var(--q-duration-quick) ease; flex: none; }
.q-switch-track::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 27px; height: 27px; border-radius: 50%; background: #ffffff; box-shadow: var(--q-shadow-control); transition: transform var(--q-duration-spring) var(--q-ease-spring); }
.q-switch input:checked + .q-switch-track { background: var(--q-accent); box-shadow: none; }
.q-switch input:checked + .q-switch-track::after { transform: translateX(20px); }
[dir="rtl"] .q-switch input:checked + .q-switch-track::after { transform: translateX(-20px); }
.q-switch input:focus-visible + .q-switch-track { outline: 2px solid var(--q-focus-ring); outline-offset: 2px; }

/* ---------- Text field, select, search ---------- */
.q-field { display: grid; gap: 6px; min-width: 0; }
fieldset.q-field { margin: 0; padding: 0; border: 0; }
fieldset.q-field > legend { padding: 0; margin-bottom: 6px; }
.q-field-label { font-size: 0.8125rem; line-height: 18px; font-weight: 600; color: var(--q-ink); }
.q-field-help { font-size: 0.8125rem; line-height: 18px; color: var(--q-ink-secondary); }
.q-field-error { font-size: 0.8125rem; line-height: 18px; color: var(--q-danger); display: flex; gap: 6px; align-items: flex-start; }
.q-input, .q-select { width: 100%; height: var(--q-control-md); padding-inline: 14px; border: 1px solid var(--q-border-control); border-radius: var(--q-radius-md); background: var(--q-surface); color: var(--q-ink); font: inherit; font-size: 1rem; letter-spacing: -0.01em; transition: border-color var(--q-duration-quick) ease, box-shadow var(--q-duration-quick) ease, background-color var(--q-duration-quick) ease; }
.q-input::placeholder { color: var(--q-ink-tertiary); }
.q-input:hover, .q-select:hover { background-color: var(--q-fill); }
.q-input:focus, .q-select:focus { outline: none; border-color: var(--q-accent); box-shadow: 0 0 0 3px var(--q-accent-soft), 0 0 0 1px var(--q-accent) inset; background-color: var(--q-surface); }
.q-input[aria-invalid="true"] { border-color: var(--q-danger); }
.q-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--q-danger-soft), 0 0 0 1px var(--q-danger) inset; }
textarea.q-input { height: auto; min-height: 96px; padding-block: 10px; resize: vertical; line-height: 22px; }
.q-select { appearance: none; padding-inline-end: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23858991' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
[dir="rtl"] .q-select { background-position: left 14px center; }
@media (pointer: coarse) { .q-input, .q-select { height: var(--q-control-touch); } }
.q-search { position: relative; display: flex; align-items: center; }
.q-search .q-icon { position: absolute; inset-inline-start: 12px; color: var(--q-ink-secondary); pointer-events: none; }
.q-search .q-input { padding-inline-start: 40px; border-color: transparent; background: var(--q-fill); border-radius: var(--q-radius-full); }
.q-search .q-input:hover { background-color: var(--q-fill-strong); }
.q-search .q-input:focus { background-color: var(--q-surface); }
.q-kbd { display: inline-flex; align-items: center; height: 20px; padding-inline: 6px; border-radius: var(--q-radius-xs); background: var(--q-surface); box-shadow: inset 0 0 0 1px var(--q-hairline); color: var(--q-ink-secondary); font: 500 12px/1 var(--q-font-sans); }
.q-search .q-kbd { position: absolute; inset-inline-end: 10px; }

/* ---------- Checkbox and radio ---------- */
.q-choice { display: flex; align-items: flex-start; gap: var(--q-space-3); cursor: pointer; min-height: var(--q-control-sm); padding-block: 5px; }
.q-choice input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--q-border-control); border-radius: var(--q-radius-xs); background: var(--q-surface); display: grid; place-content: center; transition: background-color var(--q-duration-quick) ease, border-color var(--q-duration-quick) ease; }
.q-choice input[type="radio"] { border-radius: 50%; }
.q-choice input:checked { background: var(--q-accent); border-color: var(--q-accent); }
.q-choice input[type="checkbox"]:checked::after { content: ""; width: 12px; height: 9px; background: var(--q-on-accent); clip-path: polygon(0 52%, 14% 38%, 38% 62%, 86% 0, 100% 14%, 38% 92%); }
.q-choice input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--q-on-accent); }
.q-choice-text { display: grid; gap: 2px; }
.q-choice-text small { color: var(--q-ink-secondary); font-size: 0.8125rem; line-height: 18px; }

/* ---------- Pill (status) ---------- */
.q-pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding-inline: 10px; border-radius: var(--q-radius-full); font-size: 0.75rem; line-height: 16px; font-weight: 600; letter-spacing: 0.005em; white-space: nowrap; background: var(--q-fill); color: var(--q-ink-secondary); }
.q-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.q-pill-plain::before { display: none; }
.q-pill-success { background: var(--q-success-soft); color: var(--q-success); }
.q-pill-warning { background: var(--q-warning-soft); color: var(--q-warning); }
.q-pill-danger { background: var(--q-danger-soft); color: var(--q-danger); }
.q-pill-info { background: var(--q-info-soft); color: var(--q-info); }
.q-pill-accent { background: var(--q-accent-soft); color: var(--q-accent-strong); }
.q-pill-gold { background: var(--q-gold); color: var(--q-on-gold); }
.q-pill-gold::before { background: var(--q-on-gold); }

/* ---------- Grouped list (inset grouped, like Settings) ---------- */
.q-list-header { padding: 0 var(--q-space-4) 6px; font-size: 0.8125rem; line-height: 18px; font-weight: 600; color: var(--q-ink-secondary); }
.q-list { margin: 0; padding: 0; list-style: none; background: var(--q-surface); border-radius: var(--q-radius-lg); overflow: hidden; }
.q-row { position: relative; display: flex; align-items: center; gap: var(--q-space-3); min-height: 52px; padding: 10px var(--q-space-4); color: inherit; text-decoration: none; }
.q-row + .q-row::before { content: ""; position: absolute; top: 0; inset-inline: var(--_inset, var(--q-space-4)) 0; border-top: 1px solid var(--q-hairline); }
.q-row.has-lead { --_inset: 64px; }
a.q-row, button.q-row { width: 100%; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; transition: background-color var(--q-duration-quick) ease; }
a.q-row:hover, button.q-row:hover { background: var(--q-fill); }
a.q-row:active, button.q-row:active { background: var(--q-fill-strong); }
.q-row-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.q-row-title { font-size: 1rem; line-height: 21px; font-weight: 510; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-row-sub { font-size: 0.875rem; line-height: 19px; color: var(--q-ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-row-trail { display: flex; align-items: center; gap: var(--q-space-2); color: var(--q-ink-secondary); font-size: 0.9375rem; flex: none; }
.q-chevron { width: 8px; height: 13px; color: var(--q-ink-tertiary); flex: none; }
[dir="rtl"] .q-chevron { transform: scaleX(-1); }
.q-list-footer { padding: 6px var(--q-space-4) 0; font-size: 0.8125rem; line-height: 18px; color: var(--q-ink-secondary); }

/* ---------- Avatar ---------- */
.q-avatar { --_s: 40px; width: var(--_s); height: var(--_s); flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--q-accent-soft); color: var(--q-accent-strong); font-size: calc(var(--_s) * 0.38); font-weight: 650; letter-spacing: 0; }
.q-avatar img { width: 100%; height: 100%; object-fit: cover; }
.q-avatar-sm { --_s: 28px; }
.q-avatar-lg { --_s: 64px; }

/* ---------- Card, stat tile ---------- */
.q-card { background: var(--q-surface); border-radius: var(--q-radius-lg); padding: var(--q-space-5); min-width: 0; }
.q-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--q-space-3); margin-bottom: var(--q-space-3); }
.q-card-title { margin: 0; font-size: 1.0625rem; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; }
.q-stat { display: grid; gap: 4px; align-content: start; }
.q-stat-label { font-size: 0.8125rem; line-height: 18px; font-weight: 600; color: var(--q-ink-secondary); }
.q-stat-value { font-size: 1.75rem; line-height: 32px; font-weight: 650; letter-spacing: -0.012em; font-variant-numeric: tabular-nums; }
.q-stat-value small { font-size: 1.0625rem; font-weight: 500; color: var(--q-ink-secondary); letter-spacing: -0.01em; }
.q-stat-note { font-size: 0.8125rem; line-height: 18px; color: var(--q-ink-secondary); }
.q-meter { height: 6px; border-radius: var(--q-radius-full); background: var(--q-fill-strong); overflow: hidden; }
.q-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--q-accent); }

/* ---------- Banner and toast ---------- */
.q-banner { display: flex; gap: var(--q-space-3); align-items: flex-start; padding: 14px var(--q-space-4); border-radius: var(--q-radius-lg); background: var(--q-info-soft); color: var(--q-ink); }
.q-banner .q-icon { color: var(--q-info); margin-top: 1px; }
.q-banner-title { font-weight: 600; }
.q-banner-warning { background: var(--q-warning-soft); } .q-banner-warning .q-icon { color: var(--q-warning); }
.q-banner-danger { background: var(--q-danger-soft); } .q-banner-danger .q-icon { color: var(--q-danger); }
.q-banner-success { background: var(--q-success-soft); } .q-banner-success .q-icon { color: var(--q-success); }
.q-banner-actions { display: flex; gap: var(--q-space-2); margin-top: var(--q-space-2); }
.q-toast { display: inline-flex; align-items: center; gap: var(--q-space-3); min-height: 48px; padding: 8px 8px 8px 16px; border-radius: var(--q-radius-full); background: var(--q-glass-thick); -webkit-backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); box-shadow: var(--q-shadow-raised); color: var(--q-ink); font-weight: 510; }
.q-toast .q-icon { color: var(--q-success); }
.q-toast-error .q-icon { color: var(--q-danger); }
.q-toast.is-entering { animation: q-materialize var(--q-duration-spring) var(--q-ease-spring) both; }
@keyframes q-materialize { from { opacity: 0; transform: translateY(-12px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ---------- Table (desktop) that becomes rows (phone) ---------- */
.q-table-wrap { background: var(--q-surface); border-radius: var(--q-radius-lg); overflow: auto; }
.q-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 20px; }
.q-table th { position: sticky; top: 0; z-index: 1; padding: 10px var(--q-space-4); background: var(--q-surface); text-align: start; font-size: 0.8125rem; font-weight: 600; color: var(--q-ink-secondary); white-space: nowrap; box-shadow: inset 0 -1px 0 var(--q-hairline); }
.q-table td { padding: 12px var(--q-space-4); border-top: 1px solid var(--q-hairline); vertical-align: middle; }
.q-table tbody tr:first-child td { border-top: 0; }
.q-table tbody tr { transition: background-color var(--q-duration-quick) ease; }
.q-table tbody tr:hover { background: var(--q-fill); }
.q-table tr[aria-selected="true"] { background: var(--q-accent-soft); }
.q-table .num { text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .q-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .q-table, .q-table tbody, .q-table tr, .q-table td { display: block; }
  .q-table tr { position: relative; padding: 12px var(--q-space-4); border-top: 1px solid var(--q-hairline); }
  .q-table tbody tr:first-child { border-top: 0; }
  .q-table td { padding: 0; border: 0; }
  .q-table td[data-role="title"] { font-size: 1rem; font-weight: 510; }
  /* The trail sits over the title's line, so a long title wraps before it instead of running under it. */
  .q-table tr:has(> td[data-role="trail"]) > td[data-role="title"] { padding-inline-end: 124px; }
  .q-table td[data-role="meta"] { display: inline; color: var(--q-ink-secondary); }
  .q-table td[data-role="meta"] + td[data-role="meta"]::before { content: " · "; }
  .q-table td[data-role="trail"] { position: absolute; inset-inline-end: var(--q-space-4); top: 14px; }
  .q-table td[data-role="hide-phone"] { display: none; }
}

/* ---------- Lists: the toolbar, filters, sortable headings and the pager (ListToolbar, Pager) ---------- */
.q-listing { position: relative; display: grid; gap: var(--q-space-4); min-width: 0; scroll-margin-top: 80px; }
.q-listing table:focus { outline: none; }
/* While a change loads, the rows stay where they are; only after 300ms are they dimmed. No spinner, no bar. */
.q-listing[aria-busy="true"] :is(.q-table-wrap, .q-list, .q-pager) { opacity: 0.5; transition: opacity var(--q-duration-quick) ease 300ms; }
.q-toolbar { display: grid; gap: var(--q-space-3); min-width: 0; }
.q-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--q-space-2) var(--q-space-3); min-width: 0; }
.q-toolbar .q-search { flex: 1 1 280px; max-width: 420px; }
.q-toolbar .q-search .q-input { font-size: 1rem; }
.q-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--q-space-2); min-width: 0; }
/* A filter is a pill: grey at rest, tinted once it is set, so the bar itself shows what is filtered. */
.q-filter { width: auto; max-width: 13rem; height: var(--q-control-sm); padding-inline: 12px 32px; border-color: transparent; border-radius: var(--q-radius-full); background-color: var(--q-fill); background-position: right 12px center; font-size: 0.875rem; text-overflow: ellipsis; }
.q-filter:hover { background-color: var(--q-fill-strong); }
.q-filter[data-on] { background-color: var(--q-accent-soft); color: var(--q-accent-strong); font-weight: 600; }
input.q-filter { padding-inline: 12px; }
.q-filter-field { display: inline-flex; align-items: center; gap: 6px; color: var(--q-ink-secondary); font-size: 0.8125rem; font-weight: 510; white-space: nowrap; }
.q-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--q-control-sm); padding-inline: 12px; border-radius: var(--q-radius-full); background: var(--q-fill); font-size: 0.875rem; white-space: nowrap; cursor: pointer; user-select: none; }
.q-chip:hover { background: var(--q-fill-strong); }
.q-chip input { position: absolute; opacity: 0; pointer-events: none; }
.q-chip:has(input:checked) { background: var(--q-accent-soft); color: var(--q-accent-strong); font-weight: 600; }
.q-chip:has(input:focus-visible) { outline: 2px solid var(--q-focus-ring); outline-offset: 2px; }
.q-clear { padding-inline: 6px; color: var(--q-accent); font-size: 0.875rem; font-weight: 510; text-decoration: none; white-space: nowrap; }
.q-clear:hover { text-decoration: underline; }
/* The order, for phones, where the headings are hidden. */
.q-filter-sort { display: none; }
.q-filter-sort.is-always { display: inline-block; }
/* A bar holding only the order (for phones) takes no room on wide screens. */
@media (min-width: 641px) { .q-filterbar:not(:has(> :not(.q-filter-sort:not(.is-always)))) { display: none; } }
.q-table th a.q-sort { display: inline-flex; align-items: center; gap: 4px; margin: -4px -6px; padding: 4px 6px; border-radius: var(--q-radius-xs); color: inherit; text-decoration: none; }
.q-table th a.q-sort:hover { background: var(--q-fill); color: var(--q-ink); }
.q-table th a.q-sort:focus-visible { outline: 2px solid var(--q-focus-ring); outline-offset: 0; }
.q-table th.num a.q-sort { flex-direction: row-reverse; }
.q-table th[aria-sort] { color: var(--q-ink); }
.q-sort .q-icon { width: 14px; height: 14px; stroke-width: 2.2; }
/* A heading that sorts but isn't the order shows its chevrons faintly on hover and focus (Carbon: a hover-only cue is hard to find, so the sorted one always shows). */
.q-sort .q-sort-idle { opacity: 0; transition: opacity var(--q-duration-quick) ease; }
.q-sort:hover .q-sort-idle, .q-sort:focus-visible .q-sort-idle { opacity: 0.55; }
.q-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--q-space-2) var(--q-space-4); color: var(--q-ink-secondary); font-size: 0.875rem; }
.q-pager-count { font-variant-numeric: tabular-nums; }
.q-pager-nav { display: flex; align-items: center; gap: var(--q-space-1); }
.q-pager-pages { display: flex; align-items: center; gap: 2px; }
.q-pager-page { display: inline-flex; align-items: center; justify-content: center; min-width: var(--q-control-sm); height: var(--q-control-sm); padding-inline: 8px; border-radius: var(--q-radius-full); color: var(--q-ink); font-weight: 510; font-variant-numeric: tabular-nums; text-decoration: none; }
.q-pager-page:hover { background: var(--q-fill); }
.q-pager-page[aria-current="page"] { background: var(--q-accent-soft); color: var(--q-accent-strong); font-weight: 600; }
.q-pager-gap { min-width: 20px; text-align: center; }
.q-pager-where { display: none; font-variant-numeric: tabular-nums; }
.q-pager-size { display: flex; align-items: center; gap: var(--q-space-2); }
@media (pointer: coarse) { .q-filter, .q-chip, .q-pager-page { height: var(--q-control-md); } .q-pager-page { min-width: var(--q-control-md); } }
@media (max-width: 640px) {
  .q-toolbar .q-search { flex-basis: 100%; max-width: none; }
  /* The pills scroll sideways under the search, as on iOS, edge to edge. */
  .q-filterbar { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--q-space-4)); padding: 2px var(--q-space-4); scrollbar-width: none; overscroll-behavior-x: contain; }
  .q-filterbar::-webkit-scrollbar { display: none; }
  .q-filterbar > * { flex: none; }
  .q-filter-sort { display: inline-block; order: -1; }
  .q-pager { justify-content: center; }
  .q-pager-count { flex-basis: 100%; text-align: center; }
  .q-pager-pages { display: none; }
  .q-pager-where { display: inline; padding-inline: var(--q-space-2); }
}

/* ---------- Sheet (bottom on phones, side on wide screens) and dialog ---------- */
.q-scrim { position: fixed; inset: 0; background: var(--q-scrim); opacity: 0; transition: opacity var(--q-duration-spring) var(--q-ease-spring); }
.q-sheet { position: fixed; z-index: 50; background: var(--q-surface); color: var(--q-ink); box-shadow: var(--q-shadow-sheet); display: flex; flex-direction: column; max-height: 100dvh; transition: transform var(--q-duration-spring) var(--q-ease-spring); }
.q-sheet-grabber { width: 36px; height: 5px; border-radius: var(--q-radius-full); background: var(--q-fill-strong); margin: 6px auto 0; flex: none; touch-action: none; }
.q-sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--q-space-2); padding: 10px var(--q-space-4) 8px; }
.q-sheet-head h2 { grid-column: 2; margin: 0; font-size: 1.0625rem; line-height: 22px; font-weight: 600; text-align: center; }
.q-sheet-head .end { justify-self: end; }
.q-sheet-body { overflow: auto; padding: var(--q-space-2) var(--q-space-4) var(--q-space-4); display: grid; gap: var(--q-space-4); overscroll-behavior: contain; }
/* While a sheet or dialog is open the page behind stays put: it neither scrolls nor reloads on a pull. */
:root:has(dialog[open]), :root:has(dialog[open]) body { overflow: hidden; overscroll-behavior: none; }
.q-sheet-foot { padding: var(--q-space-3) var(--q-space-4) max(var(--q-space-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--q-hairline); }
@media (max-width: 767px) {
  .q-sheet { inset: auto 0 0 0; max-height: calc(100dvh - 48px); border-radius: var(--q-radius-xl) var(--q-radius-xl) 0 0; }
  /* The title row drags the sheet down too (qalam.js), not just the grabber. */
  .q-sheet-head { touch-action: none; }
}
@media (min-width: 768px) { .q-sheet { top: 12px; bottom: 12px; inset-inline-start: auto; inset-inline-end: 12px; width: min(480px, calc(100vw - 24px)); border-radius: var(--q-radius-xl); } .q-sheet-grabber { display: none; } }
.q-dialog { width: min(360px, calc(100vw - 48px)); border: 0; padding: var(--q-space-6) var(--q-space-5) var(--q-space-5); border-radius: var(--q-radius-xl); background: var(--q-glass-thick); -webkit-backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); box-shadow: var(--q-shadow-raised); color: var(--q-ink); text-align: center; }
.q-dialog h2 { margin: 0 0 6px; font-size: 1.0625rem; line-height: 22px; font-weight: 600; }
.q-dialog p { margin: 0 0 var(--q-space-5); color: var(--q-ink-secondary); font-size: 0.875rem; line-height: 20px; }
.q-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--q-space-2); }

/* ---------- Menu / popover ---------- */
.q-menu { min-width: 220px; padding: 6px; border-radius: 16px; background: var(--q-glass-thick); -webkit-backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); box-shadow: var(--q-shadow-raised); transform-origin: var(--_origin, top left); }
.q-menu-item { display: flex; align-items: center; gap: var(--q-space-3); width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--q-radius-sm); background: none; color: var(--q-ink); font: inherit; font-size: 0.9375rem; text-align: start; text-decoration: none; cursor: pointer; }
.q-menu-item:hover, .q-menu-item:focus-visible { background: var(--q-accent); color: var(--q-on-accent); outline: none; }
.q-menu-item.danger { color: var(--q-danger); }
.q-menu-item.danger:hover { background: var(--q-danger); color: var(--q-on-danger); }
.q-menu-sep { height: 1px; margin: 5px 10px; background: var(--q-hairline); }
/* A setting inside a menu (the account menu's language): its control sits at the end; the row isn't an action. */
.q-menu-field { cursor: default; }
.q-menu-field:hover { background: none; color: var(--q-ink); }
.q-menu-field .q-select { width: auto; height: 32px; margin-inline-start: auto; font-size: 0.875rem; }
/* The account menu's head: who is signed in. */
.q-account-head { display: flex; align-items: center; gap: var(--q-space-3); padding: 8px 10px 4px; }
.q-account-head .q-avatar { flex: none; background: var(--q-accent-soft); color: var(--q-accent-strong); }
.q-account-who { display: grid; min-width: 0; line-height: 1.3; }
.q-account-who b { overflow: hidden; color: var(--q-ink); font-size: 0.9375rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.q-account-who small { overflow: hidden; color: var(--q-ink-secondary); font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.q-menu-item .q-kbd { margin-inline-start: auto; background: none; box-shadow: none; color: inherit; opacity: 0.7; }

/* ---------- Reduced transparency and more contrast ---------- */
@media (prefers-reduced-transparency: reduce) {
  .q-toast, .q-dialog, .q-menu { background: var(--q-surface-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .q-list, .q-card, .q-table-wrap, .q-menu, .q-dialog { box-shadow: 0 0 0 1px var(--q-border-control); }
  .q-pill { box-shadow: inset 0 0 0 1px currentColor; }
}

/* ======================= Madrasa components ======================= */

/* ---------- Juz grid: 30 paras, state shown by fill AND mark ---------- */
.q-juz { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 480px) { .q-juz { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.q-juz-cell { position: relative; aspect-ratio: 1; min-height: 40px; display: grid; place-items: center; align-content: center; gap: 1px; border: 0; border-radius: var(--q-radius-md); background: var(--q-fill); color: var(--q-ink-secondary); font: 600 13px/1 var(--q-font-sans); font-variant-numeric: tabular-nums; cursor: pointer; transition: transform var(--q-duration-press) var(--q-ease-out), background-color var(--q-duration-quick) ease; }
.q-juz-cell:active { transform: scale(0.94); }
.q-juz-cell .mark { font-size: 0.625rem; line-height: 1; font-weight: 700; }
.q-juz-cell[data-state="learning"] { background: var(--q-accent-soft); color: var(--q-accent-strong); box-shadow: inset 0 0 0 1.5px var(--q-accent); }
.q-juz-cell[data-state="memorised"] { background: var(--q-success-fill); color: var(--q-on-success); }
.q-juz-cell[data-state="tested"] { background: var(--q-gold); color: var(--q-on-gold); }
.q-juz-cell[data-state="due"] { background: var(--q-surface); color: var(--q-warning); box-shadow: inset 0 0 0 1.5px var(--q-warning); }
.q-juz-legend { display: flex; flex-wrap: wrap; gap: var(--q-space-4); font-size: 0.8125rem; color: var(--q-ink-secondary); }
.q-juz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.q-juz-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--q-fill); }
.q-juz-legend i.learning { background: var(--q-accent-soft); box-shadow: inset 0 0 0 1.5px var(--q-accent); }
.q-juz-legend i.memorised { background: var(--q-success-fill); }
.q-juz-legend i.tested { background: var(--q-gold); }
.q-juz-legend i.due { box-shadow: inset 0 0 0 1.5px var(--q-warning); background: var(--q-surface); }

/* ---------- Register row: one student, four statuses, thumb-sized ---------- */
.q-register { display: flex; align-items: center; gap: var(--q-space-3); min-height: 60px; padding: 8px var(--q-space-4); }
.q-register + .q-register { border-top: 1px solid var(--q-hairline); }
.q-register-name { flex: 1; min-width: 0; display: grid; }
.q-register-name b { font-weight: 510; font-size: 1rem; line-height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-register-name small { color: var(--q-ink-secondary); font-size: 0.8125rem; line-height: 18px; }
.q-register-marks { position: relative; display: flex; gap: 4px; padding: 3px; border-radius: var(--q-radius-full); background: var(--q-fill); }
.q-register-marks input { position: absolute; opacity: 0; pointer-events: none; }
.q-register-marks label { display: grid; place-items: center; width: 40px; height: 36px; border-radius: var(--q-radius-full); color: var(--q-ink-secondary); font-weight: 650; font-size: 0.875rem; cursor: pointer; transition: background-color var(--q-duration-quick) ease, color var(--q-duration-quick) ease, transform var(--q-duration-press) var(--q-ease-out); }
.q-register-marks label:active { transform: scale(0.92); }
.q-register-marks input:focus-visible + label { outline: 2px solid var(--q-focus-ring); outline-offset: 1px; }
.q-register-marks input[value="P"]:checked + label { background: var(--q-success-fill); color: var(--q-on-success); }
.q-register-marks input[value="L"]:checked + label { background: var(--q-warning-soft); color: var(--q-warning); box-shadow: inset 0 0 0 1.5px var(--q-warning); }
.q-register-marks input[value="A"]:checked + label { background: var(--q-danger); color: var(--q-surface); }
.q-register-marks input[value="E"]:checked + label { background: var(--q-info-soft); color: var(--q-info); box-shadow: inset 0 0 0 1.5px var(--q-info); }
@media (pointer: coarse) { .q-register-marks label { width: 44px; height: 40px; } }

/* ---------- Dual date: Gregorian first, Hijri beside it ---------- */
.q-date { display: inline-grid; line-height: 1.25; }
.q-date-greg { font-weight: 510; }
.q-date-hijri { font-size: 0.86em; color: var(--q-ink-secondary); }
.q-date-inline { display: inline-flex; gap: 0.5em; align-items: baseline; flex-wrap: wrap; }
.q-date-inline .q-date-hijri::before { content: "\00B7"; margin-inline-end: 0.5em; color: var(--q-ink-tertiary); }

/* ---------- Ayah range: surah, ayahs, Arabic name ---------- */
.q-ayah { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--q-radius-full); background: var(--q-fill); }
.q-ayah-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--q-surface); color: var(--q-accent-strong); font: 650 12px/1 var(--q-font-sans); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--q-hairline); }
.q-ayah-text { display: grid; line-height: 1.2; }
.q-ayah-text b { font-weight: 600; font-size: 0.9375rem; }
.q-ayah-text small { color: var(--q-ink-secondary); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.q-ayah-ar { font-family: var(--q-font-arabic); font-size: 1.125rem; line-height: 1; color: var(--q-ink); direction: rtl; margin-inline-start: 4px; }

/* ---------- Tabs: a record's sections, as a row of capsules that scrolls sideways on a phone ---------- */
.q-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.q-tabs::-webkit-scrollbar { display: none; }
.q-tabs a { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 14px; border-radius: var(--q-radius-full); color: var(--q-ink-secondary); font-size: 0.875rem; font-weight: 510; text-decoration: none; white-space: nowrap; transition: background-color var(--q-duration-quick) ease, color var(--q-duration-quick) ease; }
.q-tabs a:hover { background: var(--q-fill); color: var(--q-ink); }
.q-tabs a[aria-current="page"] { background: var(--q-accent-soft); color: var(--q-accent-strong); font-weight: 600; }
.q-tabs a[aria-current="true"] { background: var(--q-fill); color: var(--q-ink); font-weight: 600; }
.q-tabs a small { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: inherit; opacity: 0.7; }
:dir(rtl).q-tabs, [dir="rtl"] .q-tabs { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); }

/* ---------- File field: the system picker, with Qalam's button ---------- */
.q-file { display: block; width: 100%; min-height: var(--q-control-md); padding: 6px; border: 1px dashed var(--q-border-control); border-radius: var(--q-radius-md); background: var(--q-surface); color: var(--q-ink-secondary); font: inherit; font-size: 0.875rem; }
.q-file::file-selector-button { margin-inline-end: 12px; height: 32px; padding-inline: 14px; border: 0; border-radius: var(--q-radius-full); background: var(--q-fill); color: var(--q-accent); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.q-file:hover::file-selector-button { background: var(--q-fill-strong); }
.q-file:focus-visible { outline: 2px solid var(--q-focus-ring); outline-offset: 2px; }
.q-file-current { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.8125rem; color: var(--q-ink-secondary); }
.q-file-current a { color: var(--q-accent); font-weight: 510; text-decoration: none; }

/* ---------- Dialog as a <dialog> ---------- */
dialog.q-dialog { margin: auto; }
dialog.q-dialog::backdrop { background: var(--q-scrim); }

/* ---------- Bulk action bar (appears when rows are selected) ---------- */
.q-bulkbar { display: flex; align-items: center; gap: var(--q-space-2); padding: 8px 8px 8px 18px; border-radius: var(--q-radius-full); background: var(--q-glass-thick); -webkit-backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); box-shadow: var(--q-shadow-float); }
.q-bulkbar-count { font-weight: 600; margin-inline-end: auto; font-variant-numeric: tabular-nums; }

/* ---------- Child switcher (parents) ---------- */
.q-switcher { display: inline-flex; align-items: center; gap: var(--q-space-2); height: 40px; padding: 4px 12px 4px 4px; border: 0; border-radius: var(--q-radius-full); background: var(--q-fill); color: var(--q-ink); font: inherit; font-weight: 600; cursor: pointer; }
.q-switcher .q-icon { width: 16px; height: 16px; color: var(--q-ink-secondary); }

/* ---------- Pending sync marker ---------- */
.q-pending { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600; color: var(--q-ink-secondary); }
.q-pending .q-icon { width: 14px; height: 14px; }

/* ---------- Reduce transparency: the in-app switch (iOS does not pass its own to the web) and no-blur browsers ---------- */
:root[data-surfaces="solid"] .q-toast, :root[data-surfaces="solid"] .q-dialog, :root[data-surfaces="solid"] .q-menu,
:root[data-surfaces="solid"] .q-palette, :root[data-surfaces="solid"] .q-topbar.is-scrolled, :root[data-surfaces="solid"] .q-tabbar {
  background: var(--q-surface-raised); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--q-shadow-raised), 0 0 0 1px var(--q-hairline);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .q-toast, .q-dialog, .q-menu, .q-palette, .q-topbar.is-scrolled, .q-tabbar { background: var(--q-surface-raised); }
}

/* ---------- Unsaved changes bar ---------- */
.q-savebar { display: flex; align-items: center; gap: var(--q-space-2); padding: 8px 8px 8px 18px; border-radius: var(--q-radius-full); background: var(--q-ink); color: var(--q-canvas); box-shadow: var(--q-shadow-float); }
.q-savebar-text { margin-inline-end: auto; font-weight: 600; }
.q-savebar .q-btn-gray { background: transparent; color: var(--q-canvas); box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- Loader: the madrasah's mark writing itself (x-q.loader) ----------
   An SVG mark is drawn along its outlines, shape after shape in each one's own colour, the way a pen
   goes over the page; then the ink floods in and the outlines lift. A picture is uncovered right to
   left, as Arabic is written. Without a mark, Qalam's three nuqtas are set down one by one. Drawn
   once as the sign-in page opens; .is-looping draws it again and again, and .is-still holds the
   finished mark until it is set looping. A loader between pages was tried and taken out: pages came
   in under half a second, before it could write anything. With reduced motion the mark simply shows,
   and a looping one breathes. On a plate, so a dark emblem reads in dark mode. */
.q-loader { --q-loader-size: 96px; display: inline-grid; place-items: center; box-sizing: border-box; width: var(--q-loader-size); height: var(--q-loader-size); color: var(--q-ink); }
.q-loader > svg, .q-loader > img { width: 100%; height: 100%; object-fit: contain; overflow: visible; }
.q-loader-svg { --q-step: calc(1000ms / var(--q-n, 1)); stroke: currentColor; }
.q-loader-svg [data-w] { stroke-width: var(--q-sw, 1); stroke-opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .q-loader-svg [data-w] { stroke-dasharray: 1 1; animation: q-write 1000ms cubic-bezier(0.45, 0, 0.3, 1) calc(var(--q-i) * var(--q-step)) both, q-ink 600ms ease calc(1900ms + var(--q-i) * 30ms) both; }
  .q-loader.is-looping .q-loader-svg [data-w] { animation: q-write-loop 3400ms cubic-bezier(0.45, 0, 0.3, 1) calc(var(--q-i) * var(--q-step) * 0.6) infinite both; }
  .q-loader-picture { animation: q-uncover 1400ms cubic-bezier(0.45, 0, 0.3, 1) both; }
  .q-loader.is-looping .q-loader-picture { animation: q-uncover-loop 2400ms cubic-bezier(0.45, 0, 0.3, 1) infinite both; }
  .q-loader-nuqtas path { transform-box: fill-box; transform-origin: center; animation: q-nuqta 520ms var(--q-ease-spring-bounce) both; }
  .q-loader.is-looping .q-loader-nuqtas path { animation: q-nuqta-loop 1800ms var(--q-ease-out) infinite both; }
  .q-loader .q-loader-nuqtas path:nth-of-type(2) { animation-delay: 180ms; }
  .q-loader .q-loader-nuqtas path:nth-of-type(3) { animation-delay: 360ms; }
  .q-loader.is-still:not(.is-looping) :is([data-w], .q-loader-picture, .q-loader-nuqtas path) { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .q-loader.is-looping { animation: q-breathe 1600ms ease-in-out infinite alternate; }
}
@keyframes q-write { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes q-ink { from { fill-opacity: 0; stroke-opacity: 1; } to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes q-write-loop {
  0% { stroke-dashoffset: 1; stroke-opacity: 1; fill-opacity: 0; opacity: 1; }
  45% { stroke-dashoffset: 0; stroke-opacity: 1; fill-opacity: 0; }
  62%, 88% { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1; opacity: 1; }
  100% { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1; opacity: 0; }
}
@keyframes q-uncover { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes q-uncover-loop { 0% { clip-path: inset(0 0 0 100%); opacity: 1; } 55%, 85% { clip-path: inset(0); opacity: 1; } 100% { clip-path: inset(0); opacity: 0; } }
@keyframes q-nuqta { from { opacity: 0; transform: scale(0.3); } }
@keyframes q-nuqta-loop { 0% { opacity: 0; transform: scale(0.3); } 22%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes q-breathe { from { opacity: 0.45; } }

/* ---------- Skeleton: the shape of what is coming (x-q.skeleton, Qalam.skeleton) ----------
   Grey shapes where the content will be, the way Apple's placeholder (redacted) views do it: the
   layout shows at once and fills in where it stands, so nothing jumps. They breathe gently, one row
   a moment after another; with reduced motion they are still. The loading container carries
   aria-busy="true" and a hidden "Loading"; the shapes are hidden from screen readers. */
.q-skel { display: block; background: var(--q-fill); border-radius: 6px; }
.q-skel-line { height: 12px; width: var(--q-w, 100%); max-width: 100%; }
.q-skel-line + .q-skel-line { margin-top: 8px; }
.q-skel-title { height: 18px; width: var(--q-w, 45%); border-radius: 7px; }
.q-skel-circle { width: var(--q-s, 40px); height: var(--q-s, 40px); border-radius: 50%; flex: none; }
.q-skel-block { height: var(--q-h, 96px); border-radius: var(--q-radius-md); }
.q-skel-pill { height: 22px; width: var(--q-w, 64px); border-radius: var(--q-radius-full); flex: none; }
.q-skel-main { display: grid; gap: 8px; flex: 1; min-width: 0; }
.q-skel-main .q-skel-line + .q-skel-line { margin-top: 0; }
.q-skel-rows .q-row { min-height: 60px; }
.q-skel-table td { padding-block: 15px; }
.q-skel-stats { display: grid; gap: var(--q-space-5); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.q-skel-stats .q-card { display: grid; gap: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .q-skel { animation: q-skel 1100ms ease-in-out calc(var(--q-r, 0) * 90ms) infinite alternate both; }
}
@keyframes q-skel { to { opacity: 0.45; } }
/* What it fills turns up gently, not with a jump. */
@keyframes q-filled { from { opacity: 0; } }
.q-filled { animation: q-filled var(--q-duration-quick) var(--q-ease-out) both; }

/* ---------- Empty state ---------- */
.q-empty { display: grid; justify-items: center; gap: var(--q-space-2); padding: var(--q-space-12) var(--q-space-6); text-align: center; color: var(--q-ink-secondary); }
.q-empty h3 { margin: var(--q-space-2) 0 0; color: var(--q-ink); font-size: 1.25rem; line-height: 25px; font-weight: 600; letter-spacing: -0.01em; }
.q-empty p { margin: 0 0 var(--q-space-3); max-width: 36ch; }


}
@layer shell {


/* Moving between pages: the sidebar, top bar, tab bar and the module's tabs (view-transition-name)
   stay where they are; only the page itself changes. The old page is gone before the new one
   shows, so the two never show through each other. */
@keyframes q-page-out { to { opacity: 0; } }
@keyframes q-page-in { from { opacity: 0; } }
::view-transition-old(root) { animation: var(--q-duration-press) cubic-bezier(0.4, 0, 1, 1) both q-page-out; }
::view-transition-new(root) { animation: var(--q-duration-quick) var(--q-ease-out) 60ms both q-page-in; }
::view-transition-group(q-localnav), ::view-transition-old(q-localnav), ::view-transition-new(q-localnav) { animation-duration: var(--q-duration-quick); }
.q-app { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100dvh; background: var(--q-canvas); }
.q-sidebar { position: sticky; top: 0; height: 100dvh; padding-block: 8px; padding-inline: 8px 0; view-transition-name: q-sidebar; }
.q-sidebar-panel { height: 100%; display: flex; flex-direction: column; border-radius: var(--q-radius-lg); background: var(--q-surface); box-shadow: 0 0 0 1px var(--q-hairline); overflow: hidden; }
/* The head lines up with the top bar (56px: 40px buttons and 8px padding): the panel starts 8px down, so 48px. */
/* The madrasah's identity: its logo in a 40px tile and its full name on up to two balanced lines. A school's
   name is long ("Darul Uloom Zakariyya"), unlike a workspace's, so it wraps instead of being cut; past two
   lines it ends in an ellipsis and the full name shows on hover. In dark the plate reaches 5px past the
   emblem (a ring, so nothing moves and light, where the plate is clear, is unchanged): an emblem drawn to
   its edges otherwise touches the plate's. */
.q-sidebar-head { display: flex; align-items: center; gap: 6px; min-height: 64px; box-sizing: border-box; padding-block: 12px; padding-inline: 14px 8px; }
.q-sidebar-home { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--q-radius-sm); }
.q-sidebar-mark { width: 40px; height: 40px; border-radius: 11px; flex: none; background: var(--q-plate); object-fit: contain; }
img.q-sidebar-mark:not(.is-tile) { box-shadow: 0 0 0 5px var(--q-plate); }
.q-sidebar-mark.is-tile { background: none; } /* the initials made at setup: a tile of their own */
.q-sidebar-brand { display: grid; line-height: 1.15; min-width: 0; }
.q-sidebar-brand b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 0.9375rem; line-height: 19px; font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.q-sidebar-brand small { font-size: 0.75rem; color: var(--q-ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-sidebar-rail { flex: none; color: var(--q-ink-secondary); }
.q-sidebar .q-search { margin: 4px 10px 6px; }
.q-sidebar .q-search .q-input { height: 34px; font-size: 0.875rem; }

/* Navigation: areas (a link, or a disclosure that opens its modules), under optional group headings.
   Two levels at most; a module's own pages are tabs on the page (.q-localnav). */
.q-nav { flex: 1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 2px 10px 10px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; }
.q-nav-section + .q-nav-section { margin-top: 12px; }
.q-nav-heading { margin: 0; padding: 4px 10px; font-size: 0.71875rem; line-height: 16px; font-weight: 600; letter-spacing: 0.01em; color: var(--q-ink-tertiary); }
.q-nav-label { padding: 0 10px 4px; font-size: 0.75rem; line-height: 16px; font-weight: 600; color: var(--q-ink-secondary); }
.q-nav-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.q-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: var(--q-radius-sm); background: transparent; color: var(--q-ink); text-decoration: none; text-align: start; font: inherit; font-size: 0.875rem; font-weight: 510; letter-spacing: -0.006em; cursor: pointer; transition: background-color var(--q-duration-quick) ease, color var(--q-duration-quick) ease; }
.q-nav-item .q-icon { width: 18px; height: 18px; color: var(--q-ink-secondary); }
.q-nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-nav-item:hover { background: var(--q-fill); }
.q-nav-item:focus-visible, .q-nav-sub a:focus-visible { outline: 2px solid var(--q-accent); outline-offset: -2px; }
.q-nav-item.is-active .q-icon { color: var(--q-accent); }
.q-nav-item[aria-current="true"] { font-weight: 600; }
.q-nav-item[aria-current="page"] { background: var(--q-accent-soft); color: var(--q-accent-strong); font-weight: 600; }
.q-nav-item[aria-current="page"] .q-icon { color: var(--q-accent); }
.q-nav-chev.q-icon { width: 14px; height: 14px; margin-inline-start: auto; color: var(--q-ink-tertiary); transition: transform var(--q-duration-quick) ease; }
.q-nav-toggle[aria-expanded="true"] .q-nav-chev { transform: rotate(90deg); }
[dir="rtl"] .q-nav-toggle[aria-expanded="false"] .q-nav-chev { transform: scaleX(-1); }
.q-nav-quiet { color: var(--q-ink-secondary); font-weight: 450; }
.q-nav-quiet .q-icon { color: var(--q-ink-tertiary); }
.q-nav-end { margin-top: auto; padding-top: 12px; }
.q-nav-count { margin-inline-start: auto; min-width: 22px; height: 20px; padding-inline: 6px; border-radius: var(--q-radius-full); background: var(--q-fill-strong); color: var(--q-ink-secondary); font: 600 12px/20px var(--q-font-sans); text-align: center; font-variant-numeric: tabular-nums; }
.q-nav-count.attention { background: var(--q-danger); color: var(--q-surface); }
/* The account: the person's initials at the end of the top bar on every screen, where Google's, Apple's
   and Material's apps keep it, opening the account menu (#q-profile). */
.q-account-btn { background: var(--q-accent-soft); color: var(--q-accent-strong); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; }
.q-account-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--q-accent-soft), var(--q-accent) 14%); }

.q-main { min-width: 0; display: flex; flex-direction: column; }
.q-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--q-space-3); min-height: 52px; padding: 8px var(--q-space-6); view-transition-name: q-topbar; transition: background-color var(--q-duration-quick) ease, box-shadow var(--q-duration-quick) ease; }
.q-topbar.is-scrolled { background: var(--q-glass); -webkit-backdrop-filter: blur(var(--q-blur-chrome)) saturate(180%); backdrop-filter: blur(var(--q-blur-chrome)) saturate(180%); box-shadow: 0 1px 0 var(--q-hairline); }
.q-topbar-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; opacity: 0; transform: translateY(4px); transition: opacity var(--q-duration-quick) ease, transform var(--q-duration-spring) var(--q-ease-spring); }
.q-topbar.is-scrolled .q-topbar-title { opacity: 1; transform: none; }
/* Wide screens: the top bar floats like the sidebar, 8px in from the top and from the sidebar, with the
   same corners and edge, so the two read as a pair and the bar never runs straight into the sidebar's curve.
   48px tall from 8px down: its bottom meets the sidebar head's. */
@media (min-width: 1024px) {
  .q-topbar { top: 8px; margin: 8px 8px 0; min-height: 48px; padding: 4px 8px 4px var(--q-space-5); border-radius: var(--q-radius-lg); background: var(--q-surface); box-shadow: 0 0 0 1px var(--q-hairline); }
  .q-topbar.is-scrolled { background: var(--q-glass); box-shadow: 0 0 0 1px var(--q-hairline); }
}
.q-topbar-actions { margin-inline-start: auto; display: flex; gap: var(--q-space-2); align-items: center; }
/* Today's date, Gregorian and Hijri, on one line at the start of the actions; on a narrow screen
   the actions need the room. */
.q-topbar-date { margin-inline-end: var(--q-space-2); color: var(--q-ink-secondary); font-size: 0.8125rem; white-space: nowrap; }
.q-topbar-date .q-date-inline { flex-wrap: nowrap; }
@media (max-width: 899px) { .q-topbar-date { display: none; } }
/* The top bar gives way by its own width (the window less the sidebar), not the window's: first the date,
   then Search and New keep only their icons, then the year picker goes, as on phones. Nothing scrolls sideways. */
.q-topbar { container: q-topbar / inline-size; }
@container q-topbar (max-width: 1000px) { .q-topbar .q-topbar-date { display: none; } }
@container q-topbar (max-width: 820px) {
  .q-topbar .q-searchbtn { min-width: 0; width: 34px; padding: 0; justify-content: center; }
  .q-topbar :is(.q-searchbtn span, .q-searchbtn .q-kbd, .q-topbar-new span) { display: none; }
  .q-topbar .q-topbar-new { width: 34px; padding: 0; justify-content: center; }
}
@container q-topbar (max-width: 600px) { .q-topbar .q-year { display: none; } }
.q-back { display: inline-flex; align-items: center; gap: 4px; color: var(--q-accent); text-decoration: none; font-weight: 510; }
/* A link in running text (no class of its own): the accent, the same after a visit, underlined on hover. Zero specificity, so any component's link style wins. */
:where(a:not([class])) { color: var(--q-accent); text-decoration: none; }
:where(a:not([class])):hover { text-decoration: underline; }
/* One page frame for every screen: the content column (.q-content in the app) sets the width and the
   centring, so every page shares its edges. Forms take the narrow column; wide grids the full width. */
html { scrollbar-gutter: stable; }
.q-page { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--q-space-8); } /* minmax: a wide table scrolls in its own box, never widens the page */
.q-page-narrow { max-width: 760px; margin-inline: auto; }
.q-body { background: var(--q-canvas); }
/* The page starts a little below the top bar (it floats on wide screens), whether its first thing is the
   page tabs, the year banner or the large title. */
.q-content { display: block; width: 100%; max-width: 1280px; margin-inline: auto; padding: var(--q-space-5) var(--q-space-6) var(--q-space-12); }
@media (max-width: 767px) { .q-content { padding: var(--q-space-3) var(--q-space-4) calc(104px + env(safe-area-inset-bottom)); } }
.q-content:has(> .q-page-wide) { max-width: none; }
.q-sidebar-head { color: inherit; text-decoration: none; }
.q-sidebar-head:hover { color: inherit; }
.q-nav-sep { height: 1px; margin: 10px; background: var(--q-hairline); }
.q-field-optional { font-weight: 400; color: var(--q-ink-secondary); }
.q-page-actions { display: flex; flex-wrap: wrap; gap: var(--q-space-2); }
.q-avatar-btn { padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
@supports not selector(:popover-open) { .q-popover { display: none; } .q-popover.is-open { display: block; } }
.q-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--q-space-4); flex-wrap: wrap; padding-top: 4px; }
.q-page-head h1 { margin: 0; font-size: 2.125rem; line-height: 40px; font-weight: 700; letter-spacing: -0.022em; text-wrap: balance; }
.q-page-sub { margin-top: 2px; color: var(--q-ink-secondary); font-size: 0.9375rem; }
.q-grid { display: grid; gap: var(--q-space-5); grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }

/* Second level: an area's modules */
.q-nav-sub { display: grid; gap: 1px; margin: 1px 0 6px; padding: 0; list-style: none; }
.q-nav-sub[hidden] { display: none; }
.q-nav-sub a { display: flex; align-items: center; min-height: 30px; padding: 4px 10px 4px 38px; border-radius: var(--q-radius-sm); color: var(--q-ink-secondary); text-decoration: none; font-size: 0.84375rem; line-height: 18px; transition: background-color var(--q-duration-quick) ease, color var(--q-duration-quick) ease; }
.q-nav-sub a:hover { background: var(--q-fill); color: var(--q-ink); }
.q-nav-sub a[aria-current="true"] { color: var(--q-ink); font-weight: 600; }
.q-nav-sub a[aria-current="page"] { color: var(--q-accent-strong); font-weight: 600; background: var(--q-accent-soft); }

/* Icon rail: the person's choice on wide screens (Ctrl/⌘ B). Labels stay as names and tooltips;
   an area's modules open as a flyout beside it. */
@media (min-width: 1024px) {
  .q-app.is-rail { grid-template-columns: 76px minmax(0, 1fr); }
  .is-rail .q-sidebar-head { flex-direction: column; gap: 8px; padding: 12px 8px 6px; }
  .is-rail .q-sidebar-home { flex: none; }
  .is-rail :is(.q-sidebar-brand, .q-nav-text, .q-nav-chev, .q-nav-heading) { display: none; }
  .is-rail .q-sidebar-rail .q-icon { transform: scaleX(-1); }
  .is-rail .q-nav { padding-inline: 8px; scrollbar-gutter: auto; }
  .is-rail .q-nav-section + .q-nav-section { padding-top: 8px; border-top: 1px solid var(--q-hairline); }
  .is-rail .q-nav-item { justify-content: center; height: 40px; padding: 0; }
  .is-rail .q-nav-item .q-icon { width: 20px; height: 20px; }
  .is-rail .q-nav-sub:not([hidden]) { position: fixed; z-index: 45; inset-inline-start: 88px; top: var(--q-flyout-top, 80px); min-width: 220px; margin: 0; padding: 6px; border-radius: 14px; background: var(--q-surface-raised); box-shadow: var(--q-shadow-raised); }
  .is-rail .q-nav-sub::before { content: attr(data-q-nav-label); display: block; padding: 6px 10px 4px; font-size: 0.75rem; font-weight: 600; color: var(--q-ink-secondary); }
  .is-rail .q-nav-sub a { padding-inline: 10px; }
}

/* The third level: the current module's pages as tabs at the top of the page */
.q-localnav { display: flex; align-items: center; gap: var(--q-space-3); flex-wrap: wrap; margin-bottom: var(--q-space-5); view-transition-name: q-localnav; }
.q-localnav .q-tabs { flex: 1 1 auto; min-width: 0; }
.q-localnav-back { flex: none; font-size: 0.875rem; }

/* Looking at another academic year */
.q-yearbanner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--q-space-5); padding: 10px 12px 10px 14px; border-radius: var(--q-radius-lg); background: var(--q-warning-soft); color: var(--q-ink); font-size: 0.875rem; }
.q-yearbanner > .q-icon { color: var(--q-warning); }
.q-yearbanner .q-btn { margin-inline-start: auto; }

/* Skip link */
.q-skip { position: fixed; z-index: 100; top: -60px; inset-inline-start: 12px; padding: 8px 14px; border-radius: var(--q-radius-full); background: var(--q-ink); color: var(--q-canvas); font-weight: 600; text-decoration: none; transition: top var(--q-duration-quick) ease; }
.q-skip:focus { top: 12px; }
.q-content:focus { outline: none; }

/* Top bar options */
.q-topbar-new { height: 34px; padding-inline: 10px 14px; gap: 4px; font-size: 0.875rem; }
.q-pinbtn[aria-pressed="true"] { background: var(--q-accent-soft); color: var(--q-accent); }
/* Appearance: the button wears the current choice's icon (Auto, Light, Dark); its menu ticks it. */
.q-themebtn .q-icon { display: none; }
:root:not([data-q-appearance]) .q-themebtn .q-icon[data-for="auto"], [data-q-appearance="auto"] .q-themebtn .q-icon[data-for="auto"],
[data-q-appearance="light"] .q-themebtn .q-icon[data-for="light"], [data-q-appearance="dark"] .q-themebtn .q-icon[data-for="dark"] { display: block; }
.q-menu-label { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.q-menu-label small { color: var(--q-ink-secondary); font-size: 0.78125rem; }
.q-menu-item:hover .q-menu-label small, .q-menu-item:focus-visible .q-menu-label small { color: inherit; }
.q-menu-check.q-icon { visibility: hidden; color: var(--q-accent); }
.q-menu-item[aria-checked="true"] .q-menu-check { visibility: visible; }
.q-menu-item:hover .q-menu-check, .q-menu-item:focus-visible .q-menu-check { color: inherit; }
@media (max-width: 767px) {
  .q-topbar-opt, .q-topbar-lang { display: none; }
  .q-topbar-new { width: 34px; padding: 0; justify-content: center; }
  .q-topbar-new span { display: none; }
}

/* Customise sidebar / top bar */
.q-navcustom-note { margin: 0 0 var(--q-space-4); color: var(--q-ink-secondary); font-size: 0.875rem; line-height: 1.45; }
.q-navcustom-section + .q-navcustom-section { margin-top: var(--q-space-6); }
.q-navcustom-section h3 { margin: 0 0 var(--q-space-2); font-size: 0.8125rem; font-weight: 600; color: var(--q-ink-secondary); }
.q-navcustom-list { display: grid; gap: 2px; margin: 0; padding: 4px; list-style: none; border-radius: var(--q-radius-lg); background: var(--q-fill); }
.q-navcustom-row { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 4px 6px 4px 10px; border-radius: 12px; background: var(--q-surface); }
.q-navcustom-row.is-dragging { opacity: 0.45; }
.q-navcustom-row.is-off .q-navcustom-label { color: var(--q-ink-tertiary); }
.q-navcustom-grip.q-icon { color: var(--q-ink-tertiary); cursor: grab; stroke-width: 3; }
.q-navcustom-label { flex: 1; min-width: 0; display: grid; font-size: 0.9375rem; }
.q-navcustom-label small { font-size: 0.78125rem; color: var(--q-ink-secondary); }
.q-navcustom-row .q-switch { margin-inline-start: 4px; }
/* Display → Appearance: Auto, Light and Dark beside the label, or under it where the sheet is narrow. */
.q-navcustom-appearance { flex-wrap: wrap; padding-block: 8px; }
.q-navcustom-appearance .q-navcustom-label { min-width: 10em; }
.q-navcustom-appearance .q-seg { margin-inline-start: auto; }
.q-navcustom-appearance .q-seg label { min-height: 30px; padding-inline: 12px; font-size: 0.8125rem; }
.q-navcustom-foot { display: flex; justify-content: space-between; gap: var(--q-space-3); }

/* Setup guide (Dashboard and Settings) */
.q-guide { padding: var(--q-space-5) var(--q-space-5) var(--q-space-4); }
.q-guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--q-space-4); margin-bottom: var(--q-space-4); }
.q-guide-head h2 { margin: 0; font-size: 1.25rem; line-height: 26px; font-weight: 650; letter-spacing: -0.012em; }
.q-guide-head p { margin: 2px 0 0; color: var(--q-ink-secondary); font-size: 0.875rem; }
.q-guide-progress { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 6px; min-width: 120px; }
.q-guide-progress b { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.q-guide-progress > span { color: var(--q-ink-secondary); font-size: 0.8125rem; }
.q-guide-meter { grid-column: 1 / -1; height: 6px; border-radius: var(--q-radius-full); background: var(--q-fill-strong); overflow: hidden; }
.q-guide-meter span { display: block; height: 100%; border-radius: inherit; background: var(--q-accent); }
.q-guide-steps { margin: 0; padding: 0; list-style: none; }
@media (min-width: 1100px) { .q-guide-steps { columns: 2; column-gap: var(--q-space-5); } }
.q-guide-step { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 8px; border-radius: 12px; break-inside: avoid; }
.q-guide-step.is-next { background: var(--q-accent-soft); }
.q-guide-mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--q-fill-strong); color: var(--q-ink-secondary); font-size: 0.8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.q-guide-mark .q-icon { width: 14px; height: 14px; stroke-width: 2.6; }
.q-guide-step.is-done .q-guide-mark { background: var(--q-done-soft); color: var(--q-done); }
.q-guide-step.is-next .q-guide-mark { background: var(--q-accent); color: var(--q-on-accent); }
.q-guide-text { flex: 1; min-width: 0; display: grid; }
.q-guide-text b { font-size: 0.9375rem; font-weight: 600; }
.q-guide-step.is-done .q-guide-text b { color: var(--q-ink-secondary); font-weight: 510; }
.q-guide-text small { font-size: 0.8125rem; line-height: 18px; color: var(--q-ink-secondary); }
.q-guide-foot { display: flex; align-items: center; gap: 8px; margin-top: var(--q-space-2); color: var(--q-ink-secondary); font-size: 0.8125rem; }

/* Hubs (Reports, Settings): sections side by side on wide screens */
.q-hub { display: grid; gap: var(--q-space-6); grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); align-items: start; }

.q-menu-btn { display: none; }

/* Tablet and narrower: the sidebar becomes a sheet opened from the top bar */
@media (max-width: 1023px) {
  .q-app { grid-template-columns: minmax(0, 1fr); }
  .q-sidebar { display: none; }
  .q-menu-btn { display: inline-flex; }
}

/* Dialog-based sheets (navigation, search) */
dialog.q-sheet, dialog.q-palette-dialog { margin: 0; padding: 0; border: 0; max-width: none; color: var(--q-ink); }
dialog.q-sheet:not([open]), dialog.q-palette-dialog:not([open]) { display: none; }
dialog.q-sheet::backdrop, dialog.q-palette-dialog::backdrop { background: var(--q-scrim); }
/* A dialog is fit-content by default: the phone sheet spans the width, the side sheet the height. */
@media (max-width: 767px) { dialog.q-sheet { width: auto; } }
@media (min-width: 768px) { dialog.q-sheet { height: auto; } }
dialog.q-navsheet { inset-inline-start: 0; inset-inline-end: auto; }
@media (min-width: 768px) { dialog.q-navsheet { top: 12px; bottom: 12px; inset-inline-start: 12px; inset-inline-end: auto; width: 320px; height: auto; } }
@media (max-width: 767px) { dialog.q-navsheet { inset: auto 0 0 0; width: 100%; height: auto; max-height: calc(100dvh - 48px); } }
dialog.q-navsheet .q-nav { padding-bottom: 16px; }
dialog.q-palette-dialog { top: 12vh; inset-inline: 0; margin-inline: auto; background: transparent; overflow: visible; }
dialog[open].q-sheet, dialog[open].q-palette-dialog { animation: q-rise var(--q-duration-spring) var(--q-ease-spring) both; }
@keyframes q-rise { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Popovers from the top bar (notifications, profile) */
.q-popover { position: fixed; margin: 0; inset: auto; border: 0; padding: 6px; max-height: min(70dvh, 520px); overflow: auto; }
.q-popover:popover-open { animation: q-rise var(--q-duration-spring) var(--q-ease-spring) both; }
.q-popover-head { padding: 8px 10px 6px; font-size: 0.8125rem; font-weight: 600; color: var(--q-ink-secondary); }
.q-note { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--q-radius-sm); color: var(--q-ink); text-decoration: none; }
.q-note:hover { background: var(--q-fill); }
.q-note small { color: var(--q-ink-secondary); font-size: 0.75rem; }
.q-badge-count { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--q-radius-full); background: var(--q-danger); color: var(--q-surface); font: 700 11px/18px var(--q-font-sans); text-align: center; font-variant-numeric: tabular-nums; }
.q-topbar .q-btn-icon { position: relative; }
.q-year { height: 34px; width: auto; max-width: 200px; padding-inline: 12px 32px; border-radius: var(--q-radius-full); border-color: transparent; background-color: var(--q-fill); font-size: 0.875rem; }
.q-searchbtn { display: inline-flex; align-items: center; gap: 8px; height: 34px; min-width: 220px; padding-inline: 12px 8px; border: 0; border-radius: var(--q-radius-full); background: var(--q-fill); color: var(--q-ink-secondary); font: inherit; font-size: 0.875rem; cursor: pointer; }
.q-searchbtn .q-kbd { margin-inline-start: auto; }
.q-searchbtn:hover { background: var(--q-fill-strong); }
@media (max-width: 767px) { .q-searchbtn { min-width: 0; width: 34px; padding: 0; justify-content: center; } .q-searchbtn span, .q-searchbtn .q-kbd, .q-year { display: none; } }

/* Phone: no sidebar; floating glass tab bar */
.q-tabbar { display: none; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px; border-radius: var(--q-radius-full); background: var(--q-glass); -webkit-backdrop-filter: blur(var(--q-blur-chrome)) saturate(180%); backdrop-filter: blur(var(--q-blur-chrome)) saturate(180%); box-shadow: var(--q-shadow-float); view-transition-name: q-tabbar; }
@media (max-width: 767px) {
  .q-app { grid-template-columns: minmax(0, 1fr); }
  .q-sidebar { display: none; }
  .q-topbar { padding-inline: var(--q-space-4); }
  .q-page { gap: var(--q-space-6); }
  .q-page-head h1 { font-size: 1.875rem; line-height: 36px; }
  .q-tabbar { display: grid; position: fixed; z-index: 40; inset-inline: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  /* The tab bar's Menu opens the menu: no second button in the top bar. */
  .q-menu-btn { display: none; }
}
.q-tab { display: grid; justify-items: center; gap: 2px; padding: 6px 0 5px; border: 0; background: transparent; font-family: inherit; cursor: pointer; border-radius: var(--q-radius-full); color: var(--q-ink-secondary); text-decoration: none; font-size: 0.6875rem; line-height: 13px; font-weight: 600; letter-spacing: 0.012em; transition: background-color var(--q-duration-quick) ease, color var(--q-duration-quick) ease; }
.q-tab .q-icon { width: 24px; height: 24px; }
.q-tab[aria-current="page"] { color: var(--q-accent); background: var(--q-accent-soft); }
@media (prefers-reduced-transparency: reduce) { .q-topbar.is-scrolled, .q-tabbar { background: var(--q-surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Command palette (Cmd K / Ctrl K) */
.q-palette { width: min(640px, calc(100vw - 32px)); border-radius: var(--q-radius-xl); background: var(--q-glass-thick); -webkit-backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); box-shadow: var(--q-shadow-raised); overflow: hidden; }
.q-palette-input { display: flex; align-items: center; gap: var(--q-space-3); padding: 14px 18px; border-bottom: 1px solid var(--q-hairline); }
.q-palette-input input { flex: 1; border: 0; background: none; color: var(--q-ink); font: inherit; font-size: 1.1875rem; letter-spacing: -0.012em; outline: none; }
.q-palette-input input::placeholder { color: var(--q-ink-tertiary); }
.q-palette-list { max-height: 360px; overflow: auto; padding: 6px; }
.q-palette-group { padding: 10px 12px 4px; font-size: 0.75rem; font-weight: 600; color: var(--q-ink-secondary); }
.q-palette-item { display: flex; align-items: center; gap: var(--q-space-3); min-height: 44px; padding: 0 12px; border-radius: 14px; color: var(--q-ink); }
.q-palette-item[aria-selected="true"] { background: var(--q-accent); color: var(--q-on-accent); }
.q-palette-item[aria-selected="true"] .hint { color: var(--q-on-accent); }
.q-palette-item .hint { margin-inline-start: auto; font-size: 0.8125rem; color: var(--q-ink-secondary); }


}