/* TalaKlasi minimalist presentation layer.
   Screen-only: existing print/export styles and application logic are preserved.
   Important declarations in this layer take precedence over legacy unlayered
   page styles, including pages that load their styles after the shared header. */
@layer tk-minimal {
  @media screen {
    :root {
      color-scheme: light !important;
      --min-bg: #ffffff;
      --min-bg-base: #ffffff;
      --min-bg-tint: 7%;
      --min-surface: #ffffff;
      --min-soft: #f7fafc;
      --min-hover: #f0f6f9;
      --min-line: #dce9f1;
      --min-line-base: #e1e8ed;
      --min-line-strong: #b7cedb;
      --min-text: #202124;
      --min-muted: #606571;
      --min-accent: var(--accent-solid, var(--min-preset-accent, #1b6bf5));
      --min-accent-soft: color-mix(in srgb, var(--min-accent) 7%, var(--min-surface));
      --min-shadow: 0 12px 32px rgba(38, 91, 120, .075);
      --min-shadow-sm: 0 3px 12px rgba(38, 91, 120, .045);
      --min-overlay: rgba(24, 36, 48, .42);
      --min-success: #16805d;
      --min-warning: #936512;
      --min-danger: #bd3b52;
    }

    :root:is([data-theme="dark"], [data-mode="dark"], .dark),
    :root:has(.jp-wrap):not([data-mode="light"]) {
      color-scheme: dark !important;
      --min-bg: #101419;
      --min-bg-base: #101419;
      --min-bg-tint: 13%;
      --min-surface: #181e25;
      --min-soft: #1d252e;
      --min-hover: #232e39;
      --min-line: #2d3945;
      --min-line-base: #35414e;
      --min-line-strong: #4d6476;
      --min-text: #edf1f5;
      --min-muted: #a4b0be;
      --min-shadow: 0 12px 32px rgba(0, 0, 0, .14);
      --min-shadow-sm: 0 3px 12px rgba(0, 0, 0, .1);
      --min-overlay: rgba(0, 0, 0, .6);
      --min-success: #65c6a1;
      --min-warning: #e0b86b;
      --min-danger: #ed8c9e;
    }

    /* Standalone pages do not all load the header's preset definitions. */
    :root[data-accent="pink"] { --min-preset-accent: #db2777; }
    :root[data-accent="purple"] { --min-preset-accent: #8b5cf6; }
    :root[data-accent="green"] { --min-preset-accent: #059669; }
    :root[data-accent="teal"] { --min-preset-accent: #0d9488; }
    :root[data-accent="maroon"] { --min-preset-accent: #c2185b; }
    :root[data-accent="blue"] { --min-preset-accent: #3b82f6; }
    :root[data-accent="gold"] { --min-preset-accent: #a16207; }
    :root[data-accent="azure"] { --min-preset-accent: #007dcc; }
    :root[data-accent="amber"] { --min-preset-accent: #ffb900; }
    :root[data-accent="rose"] { --min-preset-accent: #d10056; }
    :root[data-accent="crimson"] { --min-preset-accent: #be123c; }
    :root[data-accent="sunflower"] { --min-preset-accent: #fcc737; }
    :root[data-accent="tangerine"] { --min-preset-accent: #f26b0f; }
    :root[data-accent="flamingo"] { --min-preset-accent: #e73879; }
    :root[data-accent="violet"] { --min-preset-accent: #7c3aed; }
    :root[data-accent="orange"] { --min-preset-accent: #ea580c; }
    :root[data-accent="cyan"] { --min-preset-accent: #0891b2; }
    :root[data-accent="slate"] { --min-preset-accent: #64748b; }

    /* Keep the chosen accent in the background, with quiet card surfaces. */
    @supports (color: color-mix(in srgb, red, white)) {
      :root,
      :root:is([data-theme="dark"], [data-mode="dark"], .dark),
      :root:has(.jp-wrap):not([data-mode="light"]) {
        --min-bg: color-mix(in srgb, var(--min-accent) var(--min-bg-tint), var(--min-bg-base));
        --min-soft: color-mix(in srgb, var(--min-accent) 3%, var(--min-surface));
        --min-hover: color-mix(in srgb, var(--min-accent) 6%, var(--min-surface));
        --min-line: color-mix(in srgb, var(--min-accent) 12%, var(--min-line-base));
        --min-line-strong: color-mix(in srgb, var(--min-accent) 25%, var(--min-line-base));
      }
    }

    /* Map every page's existing palette to the same quiet surfaces.
       Accents still follow the existing Appearance panel. */
    :root {
      --bg-body: var(--min-bg) !important;
      --bg-card: var(--min-surface) !important;
      --bg-surface: var(--min-soft) !important;
      --bg-elevated: var(--min-surface) !important;
      --bg-lift: var(--min-soft) !important;
      --text-main: var(--min-text) !important;
      --text-primary: var(--min-text) !important;
      --text-secondary: var(--min-muted) !important;
      --text-muted: var(--min-muted) !important;
      --border-color: var(--min-line) !important;
      --primary-color: var(--min-accent) !important;
      --success-color: var(--min-success) !important;
      --warning-color: var(--min-warning) !important;
      --danger-color: var(--min-danger) !important;
      --overlay-bg: var(--min-overlay) !important;
      --input-bg: var(--min-surface) !important;
      --table-head: var(--min-soft) !important;
      --row-hover: var(--min-hover) !important;
      --row-hover-bg: var(--min-hover) !important;
      --sidebar-bg: var(--min-surface) !important;
      --shadow-sm: var(--min-shadow-sm) !important;
      --shadow-md: var(--min-shadow) !important;
      --shadow-glow: none !important;
      --btn-bg: var(--min-accent) !important;
      --accent-gradient: var(--min-accent) !important;
      --heading-gradient: none !important;
      --tk-glass: var(--min-surface) !important;
      --tk-border-strong: var(--min-line-strong) !important;

      --sb-bg: var(--min-surface) !important;
      --sb-border: var(--min-line) !important;
      --sb-text: var(--min-muted) !important;
      --sb-text-strong: var(--min-text) !important;
      --sb-muted: var(--min-muted) !important;
      --sb-hover-bg: var(--min-hover) !important;
      --sb-active-bg: var(--min-accent-soft) !important;
      --sb-active-text: var(--min-accent) !important;
      --sb-card-bg: var(--min-surface) !important;
      --sb-card: var(--min-surface) !important;
      --sb-card-border: var(--min-line) !important;
      --sb-shadow: var(--min-shadow) !important;
      --sb-group-bg: transparent !important;
      --sb-sub-text: var(--min-muted) !important;
      --sb-accent: var(--min-accent) !important;
      --sb-accent-start: var(--min-accent) !important;
      --sb-accent-end: var(--min-accent) !important;
      --sb-lift: var(--min-soft) !important;

      --db-bg: var(--min-bg) !important;
      --db-surface: var(--min-surface) !important;
      --db-surface-solid: var(--min-surface) !important;
      --db-lift: var(--min-soft) !important;
      --db-border: var(--min-line) !important;
      --db-border-glow: var(--min-line-strong) !important;
      --db-text: var(--min-text) !important;
      --db-muted: var(--min-muted) !important;
      --db-faint: var(--min-muted) !important;
      --db-card-shadow: var(--min-shadow) !important;

      --sp-bg: var(--min-bg) !important;
      --sp-surface: var(--min-surface) !important;
      --sp-lift: var(--min-soft) !important;
      --sp-lift-bg: var(--min-soft) !important;
      --sp-lift-2: var(--min-hover) !important;
      --sp-glass: var(--min-surface) !important;
      --sp-glass-soft: var(--min-soft) !important;
      --sp-glass-strong: var(--min-surface) !important;
      --sp-glass-solid: var(--min-surface) !important;
      --sp-border: var(--min-line) !important;
      --sp-border-strong: var(--min-line-strong) !important;
      --sp-text: var(--min-text) !important;
      --sp-muted: var(--min-muted) !important;
      --sp-label: var(--min-muted) !important;
      --sp-shadow: var(--min-shadow) !important;
      --sp-shadow-sm: var(--min-shadow-sm) !important;
      --sp-card-accent: transparent !important;
      --sp-blue-dim: var(--min-accent-soft) !important;
      --sp-blue: var(--min-accent) !important;
      --sp-mint: var(--min-success) !important;
      --sp-rose: var(--min-danger) !important;
      --sp-amber: var(--min-warning) !important;
      --sp-mint-dim: color-mix(in srgb, var(--min-success) 9%, var(--min-surface)) !important;
      --sp-rose-dim: color-mix(in srgb, var(--min-danger) 9%, var(--min-surface)) !important;
      --sp-amber-dim: color-mix(in srgb, var(--min-warning) 9%, var(--min-surface)) !important;
      --sp-blue-glow: transparent !important;
      --sp-accent-soft: var(--min-accent-soft) !important;
      --sp-radius-lg: 20px !important;
      --sp-radius-md: 14px !important;
      --sp-radius-sm: 10px !important;

      --neu-bg: var(--min-bg) !important;
      --neu-surface: var(--min-surface) !important;
      --neu-surface-2: var(--min-soft) !important;
      --neu-surface-hover: var(--min-hover) !important;
      --neu-border: var(--min-line) !important;
      --neu-text: var(--min-text) !important;
      --neu-muted: var(--min-muted) !important;
      --neu-accent: var(--min-accent) !important;
      --neu-shadow: var(--min-shadow) !important;
      --neu-shadow-inset: none !important;
      --neu-accent-glow: var(--min-accent-soft) !important;

      --ps-bg: var(--min-bg) !important;
      --ps-card: var(--min-surface) !important;
      --ps-text: var(--min-text) !important;
      --ps-muted: var(--min-muted) !important;
      --ps-border: var(--min-line) !important;
      --ps-border-strong: var(--min-line-strong) !important;
      --ps-hover: var(--min-hover) !important;
      --ps-sunken: var(--min-soft) !important;
      --ps-sunken-2: var(--min-soft) !important;
      --ps-input-bg: var(--min-surface) !important;

      --cr-bg: var(--min-bg) !important;
      --cr-panel: var(--min-surface) !important;
      --cr-border: var(--min-line) !important;
      --cr-text: var(--min-text) !important;
      --cr-muted: var(--min-muted) !important;
      --cr-accent-glow: var(--min-accent-soft) !important;
      --cr-accent: var(--min-accent) !important;
      --ps-accent: var(--min-accent) !important;
      --db-accent: var(--min-accent) !important;
      --jp-accent: var(--min-accent) !important;
      --app-bg: var(--min-bg) !important;
      --card-bg: var(--min-surface) !important;
      --text-label: var(--min-muted) !important;
      --font-body: Inter, "Segoe UI", Arial, sans-serif !important;
      --font-head: Inter, "Segoe UI", Arial, sans-serif !important;

      --bg: var(--min-bg) !important;
      --surface: var(--min-surface) !important;
      --surface-2: var(--min-soft) !important;
      --border: var(--min-line) !important;
      --text: var(--min-text) !important;
      --heading: var(--min-text) !important;
      --grad: var(--min-accent) !important;
      --grad-soft: var(--min-accent-soft) !important;

      --jp-bg: var(--min-bg) !important;
      --jp-bg-2: var(--min-bg) !important;
      --jp-card: var(--min-surface) !important;
      --jp-card-2: var(--min-soft) !important;
      --jp-line: var(--min-line) !important;
      --jp-line-2: var(--min-line-strong) !important;
      --jp-text: var(--min-text) !important;
      --jp-mut: var(--min-muted) !important;
      --jp-dim: var(--min-muted) !important;

      --bg2: var(--min-soft) !important;
      --card: var(--min-surface) !important;
      --line: var(--min-line) !important;
      --tx: var(--min-text) !important;
      --mut: var(--min-muted) !important;
      --dim: var(--min-muted) !important;
    }

    body {
      background: var(--min-bg) !important;
      color: var(--min-text) !important;
      font-family: Inter, "Segoe UI", Arial, sans-serif !important;
      -webkit-font-smoothing: antialiased !important;
      text-shadow: none !important;
    }

    /* Decorative glows are independent of charts, loading indicators and data. */
    :is(.bg-elements, .sp-bg-elements, .oq-bg-elements, .portal-space-nebula,
        .sp-nebula, .orb, .glow-card-accent, .ambient-glow-blue,
        .ambient-glow-purple, .ambient-glow-emerald, .ambient-glow-amber,
        .header-wave-container, .header-wave-fill, .header-wave-stroke) {
      display: none !important;
    }
    body:has(.jp-wrap)::before { background: none !important; }

    :is(.card, .neu-card, .glass-card, .stat-card, .panel, .modal-content,
        .modal-card, .modal-box, .sp-card, .sp-grade-card, .sp-mat-card,
        .sp-stat-card, .sp-tbl-shell, .sp-access-card, .sp-highlight-card,
        .db-card, .dash-card, .widget, .content-card, .data-card, .section-card,
        .q-card, .chart-card, .tk-card, .auth-card, .lm-panel, .lm-chart-panel, .folder-card,
        .stud-mat-card, .att-controls-card, .att-table-wrap, .ps-modal-card,
        .student-header-card, .quiz-list-card, .quiz-card, .result-card,
        .gateway-wrap, .jp-card, .settings-card, .group-card, .crit-form-panel,
        .score-panel, .tile-card, .judging-main, .matrix-wrapper,
        .results-toolbar, .weights-bar, #resIndWrapper, #resGrpWrapper,
        .att-page-wrap, .cu-stats, .cu-filter, .cu-records-wrap, .lm-stat,
        .lm-student-portal, .lm-modal-box, .viewer-modal-box, .q-modal,
        .ps-tone-card, #modalBox, #customUserModalBox, #deptModalBox,
        #tblSummaryWrapper) {
      background: var(--min-surface) !important;
      border: 1px solid var(--min-line) !important;
      border-radius: 20px !important;
      box-shadow: var(--min-shadow) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    :is(.card, .neu-card, .stat-card, .db-card, .sp-grade-card,
        .sp-mat-card, .folder-card, .quiz-card):hover {
      border-color: var(--min-line-strong) !important;
      box-shadow: var(--min-shadow) !important;
      transform: none !important;
    }

    :is(h1, h2, h3, .font-black, .font-extrabold, .font-bold, .font-semibold) { font-weight: 500 !important; }
    :is(h1, .lm-title, .cu-page-title, .ps-title) {
      color: var(--min-text) !important;
      letter-spacing: -.035em !important;
      line-height: 1.2 !important;
      background-image: none !important;
      -webkit-text-fill-color: currentColor !important;
    }
    :is(.bg-clip-text, .grad-title, .brand-text, .sp-hero-main-title,
        .tk-headline, .oq-tile-number, .jp-title, .result-title) {
      background-image: none !important;
      -webkit-text-fill-color: currentColor !important;
      color: var(--min-text) !important;
      text-shadow: none !important;
      font-weight: 500 !important;
    }
    :is(.text-slate-100, .text-slate-200, .text-slate-700, .text-slate-800,
        .text-slate-900, .text-gray-800, .text-gray-900) {
      color: var(--min-text) !important;
    }
    :is(.text-slate-300, .text-slate-400, .text-slate-500, .text-slate-600,
        .text-gray-400, .text-gray-500, .text-gray-600) {
      color: var(--min-muted) !important;
    }
    :is(.bg-white, .bg-slate-800, .bg-slate-900, .bg-gray-900) {
      background-color: var(--min-surface) !important;
    }
    :is(.bg-slate-50, .bg-slate-100, .bg-gray-50, .bg-gray-100) {
      background-color: var(--min-soft) !important;
    }
    :is([class~="bg-[#070a13]"], [class~="bg-[#03050c]"], [class~="bg-[#0d1526]"]) { background-color: var(--min-surface) !important; }
    :root:not([data-theme="dark"]):not([data-mode="dark"]):not(.dark) :is(.text-emerald-300, .text-emerald-400, .text-green-400) { color: var(--min-success) !important; }
    :root:not([data-theme="dark"]):not([data-mode="dark"]):not(.dark) :is(.text-amber-300, .text-amber-400, .text-yellow-400) { color: var(--min-warning) !important; }
    :root:not([data-theme="dark"]):not([data-mode="dark"]):not(.dark) :is(.text-rose-300, .text-rose-400, .text-red-400) { color: var(--min-danger) !important; }
    :is(.shadow-lg, .shadow-xl, .shadow-2xl) { box-shadow: var(--min-shadow) !important; }

    /* Page-local <style> blocks have their own headings, buttons and panels. */
    :is(.btn, .att-btn, .cu-btn, .sp-cta, .btn-submit, .gradient-btn,
        #btnOpenAddUser, #btnOpenAddDept, #btnNewHoliday) {
      font-weight: 500 !important;
      box-shadow: none !important;
      text-shadow: none !important;
      border-radius: 10px !important;
    }
    :is(.btn-primary, .att-btn-save, .sp-cta, .btn-submit,
        #btnOpenAddUser, #btnOpenAddDept, #btnNewHoliday) {
      background: var(--min-accent) !important;
      color: #fff !important;
    }
    :is(.gradient-heading, .heading-gradient, .text-gradient, .grad-text, .cu-page-title,
        .lm-title, .font-extrabold):not(button):not(.btn) {
      background-image: none !important;
      -webkit-text-fill-color: currentColor !important;
      text-shadow: none !important;
      font-weight: 500 !important;
    }
    :is(.gradient-heading, .heading-gradient, .text-gradient, .grad-text, .cu-page-title, .lm-title) {
      color: var(--min-text) !important;
    }
    :is(.cu-stat-val, .stat-val, .lm-stat-value, .att-stat-value) { font-weight: 300 !important; }
    :is(.lm-eyebrow, .att-field-label, .cu-stat-label, .att-stat-label) { font-weight: 500 !important; }
    :is(.att-header-bar, .cu-header, .lm-panel-header, .lm-modal-header,
        .ps-tbl-header, .ps-sticky-action, .sp-tabs) {
      background: var(--min-surface) !important;
      border-color: var(--min-line) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
    }
    :is(.att-header-bar, .cu-header, .lm-hero, .lm-stat)::before,
    :is(.att-header-bar, .cu-header, .lm-hero, .lm-stat)::after { display: none !important; }
    #mainContentArea [class*="bg-gradient-"]:not(button):not(.btn) {
      background-image: none !important;
      background-color: var(--min-soft) !important;
      -webkit-text-fill-color: currentColor !important;
    }
    #mainContentArea :is(.bg-slate-50\/50, .bg-slate-50\/80, .bg-slate-100\/50) {
      background: var(--min-soft) !important;
    }
    :is(.att-page-wrap, #currPage, .lm-page, .cu-page, .sp-page, .judging-main) {
      font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    }
    .ps-tone-card { background: var(--min-surface) !important; }
    .ps-tone-wrap { background: var(--min-soft) !important; box-shadow: none !important; }

    /* Practical assessments also render cards and badges after AJAX loads. */
    .judging-main { overflow: hidden; }
    #view-dashboard > div:first-child {
      background: transparent !important;
      border-color: var(--min-line) !important;
      padding: 24px !important;
    }
    #view-dashboard > div:first-child .font-extrabold {
      font-size: clamp(20px, 1.6vw, 26px) !important;
      font-weight: 400 !important;
      letter-spacing: -.025em !important;
    }
    :is(.judging-main, #modalStudentLeader) :is(.bg-blue-50, .bg-blue-100,
        .bg-purple-50, .bg-purple-100, .bg-yellow-50, .bg-yellow-100,
        .btn-soft, .btn-outline) {
      background: var(--min-accent-soft) !important;
      color: var(--min-accent) !important;
      border-color: var(--min-line) !important;
      box-shadow: none !important;
    }
    :is(.judging-main, #modalStudentLeader) :is(.bg-blue-50, .bg-blue-100,
        .bg-purple-50, .bg-purple-100, .bg-yellow-50, .bg-yellow-100) i { color: inherit !important; }
    .judging-main [class*="bg-slate-50/"] { background: var(--min-soft) !important; }
    .judging-main :is(.border-slate-100, .border-slate-200) { border-color: var(--min-line) !important; }
    .judging-main .btn { border-radius: 10px !important; font-weight: 500 !important; }

    /* Floating header and rail; existing drawer and submenu states stay intact. */
    .glass-header {
      width: calc(100% - 48px) !important;
      margin: 16px 24px 12px !important;
      padding: 14px 24px !important;
      background: var(--min-surface) !important;
      border: 1px solid var(--min-line) !important;
      border-radius: 20px !important;
      box-shadow: var(--min-shadow) !important;
      backdrop-filter: none !important;
    }
    :is(.role-badge, .dept-badge, .mobile-user-panel, .glass-pill) {
      background: transparent !important;
      color: var(--min-muted) !important;
      box-shadow: none !important;
      font-weight: 400 !important;
    }
    .brand-tagline { display: none !important; }
    .glass-header > div:first-child > .border-l { border: 0 !important; padding-left: 0 !important; }
    .glass-header .brand-logo { height: 32px !important; max-width: 160px !important; object-fit: contain !important; }
    :is(.chip-ready, .user-panel, .user-name-inline) { box-shadow: none !important; font-weight: 400 !important; }
    .chip-ready { background: transparent !important; border-color: transparent !important; }
    #sidebarGlobalFilterCard { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
    #sidebarGlobalFilterCard select { padding: 10px 12px !important; font-size: 12px !important; }
    #mainSidebar {
      background: var(--min-surface) !important;
      border: 1px solid var(--min-line) !important;
      box-shadow: var(--min-shadow) !important;
    }
    #viewApp { transform: none !important; animation: none !important; }
    #mainSidebar :is(.side-card, .side-card-header, #sbBrandRow) {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }
    #sbBrandIcon { background: var(--min-accent-soft) !important; color: var(--min-accent) !important; box-shadow: none !important; }
    #sbBrandText { font-size: 15px !important; font-weight: 500 !important; letter-spacing: -.02em !important; }
    #desktopSidebarToggle {
      width: 36px !important;
      height: 36px !important;
      border-radius: 10px !important;
      background: var(--min-soft) !important;
      border: 1px solid var(--min-line) !important;
      color: var(--min-muted) !important;
      box-shadow: none !important;
    }
    #sidebarSearchWrap { padding: 12px 14px 8px; }
    #sidebarSearchWrap label { display: block; font-size: 11px; color: var(--min-muted); margin-bottom: 6px; }
    #sidebarNavSearch { width: 100%; font-size: 13px !important; min-height: 40px; padding: 9px 12px !important; }
    #sidebarSearchEmpty { padding: 16px 12px; font-size: 13px; color: var(--min-muted); }
    #sidebarScrollArea { display: block !important; }
    #sidebarScrollArea > .side-card { height: auto !important; }
    #sidebarScrollArea > .side-card + .side-card { margin-top: 12px; }
    #mainSidebar .sidebar-search-hidden { display: none !important; }
    #mainSidebar .nav-search-open > .nav-group-body { display: block !important; max-height: none !important; opacity: 1 !important; }
    #mainSidebar:not(.sidebar-collapsed) .nav-group:not(.nav-search-open) > .nav-group-body:not(.group-expanded) { display: none !important; }
    #mainSidebar :is(.nav-group-header, .side-nav-item, .side-nav-link) {
      min-height: 42px !important;
      font-size: 13px !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
      border-radius: 10px !important;
    }
    #mainSidebar :is(.nav-group-title > span, .side-nav-link > span, .side-nav-item > span) {
      font-size: 13px !important;
      line-height: 1.4 !important;
      white-space: normal;
      font-weight: 400 !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
    }
    #mainSidebar .nav-group-title { min-width: 0; gap: 10px; color: var(--min-muted) !important; }
    #mainSidebar .nav-group-header.group-open .nav-group-title { color: var(--min-text) !important; }
    #mainSidebar .nav-group-badge { display: none !important; }
    #mainSidebar .nav-group-divider { display: none !important; }
    #mainSidebar .nav-new-badge { display: none !important; }
    #mainSidebar .side-nav-active {
      background: var(--min-accent-soft) !important;
      color: var(--min-text) !important;
      font-weight: 500 !important;
      box-shadow: inset 3px 0 0 var(--min-accent) !important;
    }
    #mainSidebar .side-label { font-size: 10px !important; font-weight: 500 !important; letter-spacing: .08em !important; color: var(--min-muted) !important; }
    #mainSidebar .nav-group-items { margin-left: 4px !important; padding-left: 8px !important; }
    #mainSidebar .nav-group-items::before { background: var(--min-line) !important; }
    #closeSidebarBtn { width: 44px !important; height: 44px !important; border-radius: 10px !important; }
    #sidebarBackdrop { background: var(--min-overlay) !important; backdrop-filter: none !important; }
    #mainSidebar :is(.side-nav-link, .side-nav-item, .nav-group-header) {
      font-weight: 400 !important;
      color: var(--min-muted) !important;
      box-shadow: none !important;
    }
    #mainSidebar :is(.side-nav-link, .side-nav-item, .nav-group-header):hover {
      background: var(--min-hover) !important;
      color: var(--min-text) !important;
      transform: none !important;
    }
    #mainSidebar :is(.side-nav-link.active, .side-nav-item.active, .nav-group-header.group-open) {
      background: var(--min-accent-soft) !important;
      color: var(--min-accent) !important;
      border-color: var(--min-line) !important;
    }
    :is(.sb-flyout, .nav-flyout, .sidebar-flyout) {
      background: var(--min-surface) !important;
      border-color: var(--min-line) !important;
      box-shadow: var(--min-shadow) !important;
    }
    :is(.sb-flyout-link, .sb-flyout-head span) { font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; }
    .sb-flyout-link { min-height: 42px; }
    .sb-flyout-link.is-active { color: var(--min-text) !important; background: var(--min-accent-soft) !important; }
    .sb-flyout-new { display: none !important; }

    /* Keep native field sizes and table geometry, including editable grade cells. */
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]),
        select, textarea, .inp, .neu-input, .sp-input, .q-input, .q-select,
        .q-textarea, .att-input, .att-search-input, .lm-input, .ps-input,
        .tk-input, .settings-input) {
      background-color: var(--min-surface) !important;
      color: var(--min-text) !important;
      border: 1px solid var(--min-line) !important;
      border-radius: 10px !important;
      box-shadow: none !important;
      font-weight: 400 !important;
    }
    :is(input, select, textarea)::placeholder { color: var(--min-muted) !important; }
    :is(input, select, textarea):focus-visible {
      border-color: var(--min-accent) !important;
      outline: 2px solid var(--min-accent) !important;
      outline-offset: 2px !important;
    }
    :is(button, a, [tabindex="0"]):focus-visible {
      outline: 2px solid var(--min-accent) !important;
      outline-offset: 3px !important;
    }
    :is(.btn-gradient, .gradient-btn, .btn-primary, .btn-accent, .tk-btn-primary, .tk-cta,
        .tk-pnav-cta, .sp-continue-btn, .btn-install) {
      background: var(--min-accent) !important;
      color: #ffffff !important;
      border-color: transparent !important;
      box-shadow: none !important;
      font-weight: 500 !important;
      text-shadow: none !important;
    }
    .tk-btn-success { background: #16805d !important; color: #ffffff !important; }
    :is(.btn-gradient, .gradient-btn, .btn-primary, .btn-accent, .tk-cta,
        .sp-continue-btn, .btn-install) :is(span, i) { color: inherit !important; }
    :is(.btn-icon, .action-btn, .tk-btn, .db-card-action, .q-btn) {
      box-shadow: none !important;
      font-weight: 400 !important;
      text-shadow: none !important;
    }
    button:disabled, input:disabled, select:disabled { opacity: .55 !important; }
    :is(table th, table td) { border-color: var(--min-line) !important; }
    thead th {
      background-color: var(--min-soft) !important;
      color: var(--min-muted) !important;
      font-weight: 500 !important;
      border-bottom: 1px solid var(--min-line) !important;
    }
    :is(.sp-tbl, .db-table, .table) tbody tr:hover { background: var(--min-hover) !important; }

    /* Dashboard: quiet statistics first, followed by announcements and records. */
    .db-page {
      max-width: 1440px !important;
      padding: 20px 32px 48px !important;
      gap: 32px !important;
      background: transparent !important;
    }
    .db-page h1 { display: block !important; font-size: clamp(26px, 2.3vw, 36px) !important; font-weight: 400 !important; }
    .db-page h1 + p { font-size: 13px !important; font-weight: 400 !important; margin-top: 10px !important; }
    .db-page h2 { font-size: 10px !important; font-weight: 400 !important; letter-spacing: .12em !important; }
    .db-page > .grid:has(#announcementsContainer) {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 28px !important;
    }
    .db-page > .grid > .db-card:has([id^="stat"]) {
      order: -1 !important;
      grid-column: span 1 !important;
      min-height: 126px !important;
      padding: 22px 24px !important;
      justify-content: center !important;
    }
    .db-page [id^="stat"] { font-size: 46px !important; line-height: 1.2 !important; font-weight: 300 !important; }
    .db-page > .grid > .db-card:has([id^="stat"]) > .absolute.bottom-0 { display: none !important; }
    .db-page > .grid > .db-card:has([id^="stat"]) .justify-between > span:last-child { display: none !important; }
    .db-page .db-card { padding: 26px !important; }
    .db-page :is(.db-chip-blue, .db-chip-rose, .db-chip-amber, .db-chip-emerald, .db-datechip) {
      background: transparent !important;
      border-color: var(--min-line) !important;
      color: var(--min-muted) !important;
      box-shadow: none !important;
    }
    .db-page .db-card-action { padding: 5px 7px !important; border-color: transparent !important; font-size: 11px !important; }
    .db-page .db-card-action:hover { color: var(--min-accent) !important; background: var(--min-accent-soft) !important; transform: none !important; }
    #announcementsContainer { grid-column: 1 / -1 !important; }
    #announcementsContainer > .space-y-3 > :is(.p-3, .p-2\.5) {
      background: transparent !important;
      border: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .db-page :is(.db-rank, .db-count-rose, .db-count-amber) {
      background: transparent !important;
      color: var(--min-text) !important;
      border: 0 !important;
      font-weight: 400 !important;
    }
    .db-page .db-table tbody td { padding-top: 14px !important; padding-bottom: 14px !important; }
    .db-page .db-rank-name { font-size: 13px !important; font-weight: 500 !important; }
    .db-page .db-rank-meta { font-size: 11px !important; font-weight: 400 !important; }
    .db-page #chipOnline { box-shadow: none !important; animation: none !important; width: 6px !important; height: 6px !important; }

    /* Standalone sign-in, student, oral-quiz and public-results pages. */
    :is(.tk-login-shell, .tk-pnav, .topbar, .oq-header, #bar) {
      background: var(--min-surface) !important;
      border: 1px solid var(--min-line) !important;
      border-radius: 20px !important;
      box-shadow: var(--min-shadow) !important;
      backdrop-filter: none !important;
    }
    :is(.tk-brand, .sp-hero-section, .sp-hero, .lm-hero, .gateway-hero, .jp-hero) {
      background: var(--min-surface) !important;
      color: var(--min-text) !important;
      border-color: var(--min-line) !important;
      box-shadow: none !important;
    }
    :is(.tk-brand, .sp-hero-section, .sp-hero, .gateway-hero, .jp-hero)::before,
    :is(.tk-brand, .sp-hero-section, .sp-hero, .gateway-hero, .jp-hero)::after {
      background: none !important;
      box-shadow: none !important;
    }
    :is(.tk-brand, .sp-hero-section, .jp-hero) :is(h1, h2, h3, .tk-brand-tag, .tk-stat-val, .tk-stat-num) {
      color: var(--min-text) !important;
      -webkit-text-fill-color: currentColor !important;
    }
    :is(.tk-blurb, .tk-stat-label, .tk-brand-tag, .sp-hero-subtitle, .sp-hero-section .accent-b, .jp-sub) {
      color: var(--min-muted) !important;
    }
    :is(.tk-headline em, .tk-stat-n, .tk-welcome, .tk-role-t, .tk-blurb b, .tk-credit b) { color: var(--min-text) !important; }
    .tk-stat-n { font-weight: 400 !important; }
    :is(.tk-stat-l, .tk-credit, .tk-welcome-sub, .tk-role-d, .tk-role-arrow, .tk-hint, .tk-sep, .tk-help) { color: var(--min-muted) !important; }
    :is(.tk-auth, .tk-auth-card) { background: var(--min-surface) !important; }
    .tk-role { background: var(--min-surface) !important; color: var(--min-text) !important; border: 1px solid var(--min-line) !important; }
    .tk-role[aria-checked="true"] { background: var(--min-accent-soft) !important; border-color: var(--min-accent) !important; }
    .tk-stat { border-color: var(--min-line) !important; }
    .tk-stat-ic { background: var(--min-soft) !important; border-color: var(--min-line) !important; color: var(--min-muted) !important; }
    .tk-brand-logo { background: var(--min-surface) !important; box-shadow: none !important; }
    .tk-credit .status-badge { position: static !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; color: var(--min-success) !important; }
    .sp-hero-main-title :is(.accent-a, .accent-b) {
      color: var(--min-text) !important;
      background: none !important;
      -webkit-text-fill-color: currentColor !important;
      text-shadow: none !important;
    }
    .tk-hero-eyebrow { color: var(--min-muted) !important; }
    .sp-hl-icon-box { background: var(--min-accent-soft) !important; color: var(--min-accent) !important; box-shadow: none !important; }
    .auth-card :is(.card-title, .field-label, .chkline, .switch-text),
    #aboutModal :is(p, h4) { color: var(--min-text) !important; }
    .auth-card :is(.card-sub, .divider-text, .input-icon) { color: var(--min-muted) !important; }
    .input-container { background: var(--min-surface) !important; border-color: var(--min-line) !important; box-shadow: none !important; }
    :is(.tk-rule, .tk-hero-rule) { background: var(--min-line) !important; box-shadow: none !important; }
    :is(.sp-input-container, .field-wrap) { background: var(--min-surface) !important; border-color: var(--min-line) !important; box-shadow: none !important; }
    :is(.sp-access-title, .sp-access-subtitle, .sp-panel-title, .sp-hl-title, .sp-hl-desc, .sp-field-label) { color: var(--min-text) !important; }
    :is(.sp-access-subtitle, .sp-hl-desc, .sp-field-label) { color: var(--min-muted) !important; }
    :is(.sp-page, .lm-page, .cu-page, .sp-page-container) { background: transparent !important; }
    :is(.lm-panel-header, .lm-chart-header, .att-header, .q-modal-header,
        .ps-modal-header, .student-header, .quiz-header, .jp-card-hd) {
      background: transparent !important;
      border-color: var(--min-line) !important;
    }
    :is(.tile-card, .settings-card) { border-radius: 14px !important; }
    .cb.purple { color: var(--min-accent) !important; background: var(--min-accent-soft) !important; border-color: var(--min-line) !important; box-shadow: none !important; }
    .jp-btn.danger { color: var(--min-danger) !important; }
    #classInfo { background: var(--min-soft) !important; border-color: var(--min-line) !important; }
    .tk-w {
      --tkbg: var(--min-surface) !important;
      --tkbg2: var(--min-soft) !important;
      --tkln: var(--min-line) !important;
      --tktx: var(--min-text) !important;
      --tkmu: var(--min-muted) !important;
      color-scheme: inherit !important;
    }
    :is(.tk-pop, .tk-bot, .tk-fab) { box-shadow: var(--min-shadow) !important; }

    @media (min-width: 1024px) {
      #mainSidebar {
        --sidebar-w: 256px;
        width: 256px !important;
        min-width: 256px !important;
        flex-basis: 256px !important;
        height: calc(100dvh - 180px) !important;
        overflow: hidden !important;
        margin: 12px 0 20px 24px !important;
        border-radius: 24px !important;
      }
      #mainSidebar.sidebar-collapsed {
        width: 62px !important;
        min-width: 62px !important;
        flex-basis: 62px !important;
      }
      #mainSidebar.sidebar-collapsed #sidebarSearchWrap { display: none !important; }
      #sidebarScrollArea { min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; }
      #mainSidebar.sidebar-collapsed #sbBrandHeader { padding: 12px 7px !important; justify-content: center !important; }
      #mainSidebar.sidebar-collapsed #sbBrandLeft { display: none !important; }
      #mainSidebar.sidebar-collapsed :is(.side-nav-item, .nav-group-header) { border-radius: 12px !important; }
      #mainContentArea { width: auto !important; flex: 1 1 0% !important; min-width: 0 !important; padding: 0 24px 0 20px !important; }
      #announcementsContainer {
        display: grid !important;
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important;
        column-gap: 36px !important;
        align-items: start !important;
      }
      #announcementsContainer > .mt-3 {
        flex-direction: column !important;
        align-items: stretch !important;
        margin-top: 0 !important;
        padding: 0 0 0 28px !important;
        border-top: 0 !important;
        border-left: 1px solid var(--min-line) !important;
      }
      #announcementsContainer > .mt-3 > div { flex-direction: column !important; }
      #announcementsContainer > .mt-3 > div > span {
        display: flex !important;
        justify-content: space-between !important;
        padding: 15px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--min-line) !important;
        border-radius: 0 !important;
        background: transparent !important;
        font-size: 12px !important;
      }
      .db-page > .grid:has(#tblTopAbs) {
        background: var(--min-surface) !important;
        border: 1px solid var(--min-line) !important;
        border-radius: 20px !important;
        box-shadow: var(--min-shadow) !important;
        padding: 8px !important;
        gap: 0 !important;
      }
      .db-page > .grid:has(#tblTopAbs) > .db-card {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
      }
      .db-page > .grid:has(#tblTopAbs) .db-card > .space-y-3 > .flex {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
      }
      .db-page > .grid:has(#tblTopAbs) .db-card > .space-y-3 > .flex > .flex { flex-wrap: wrap !important; }
    }

    @media (max-width: 1023px) {
      #mainSidebar { width: 288px !important; max-width: 86vw !important; }
      #mainSidebar .nav-group-body { max-height: 0 !important; opacity: 0 !important; }
      #mainSidebar .nav-group-body.group-expanded { max-height: none !important; opacity: 1 !important; }
      #mainSidebar .nav-group-chevron { display: inline-block !important; }
      .db-page > .grid:has(#announcementsContainer) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
      .db-page { padding: 18px 20px 40px !important; gap: 24px !important; }
      #mainContentArea { padding: 0 12px !important; }
      #mobileSidebarToggle {
        top: auto !important;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        left: 16px !important;
        background: var(--min-surface) !important;
        color: var(--min-accent) !important;
        border: 1px solid var(--min-line) !important;
        box-shadow: var(--min-shadow) !important;
        width: 100px !important;
        height: 44px !important;
        border-radius: 12px !important;
        gap: 9px !important;
      }
    }
    @media (max-width: 640px) {
      .glass-header { width: calc(100% - 24px) !important; margin: 12px !important; padding: 12px 16px !important; border-radius: 16px !important; }
      .db-page { padding: 18px 8px 32px !important; gap: 20px !important; }
      .db-page > .grid:has(#announcementsContainer) { gap: 12px !important; }
      .db-page > .grid > .db-card:has([id^="stat"]) { padding: 18px 14px !important; min-height: 112px !important; }
      .db-page [id^="stat"] { font-size: 36px !important; }
      .db-page .db-card { padding: 18px !important; }
      .db-page h1 { font-size: 26px !important; }
      .db-page h1 + p { font-size: 12px !important; }
      #announcementsContainer .mt-3 { align-items: flex-start !important; }
      #sidebarGlobalFilterCard > .flex:first-of-type > span { display: none !important; }
      #sidebarGlobalFilterCard select { min-width: 0 !important; padding: 8px 10px !important; }
    }
  }
}