/* AcadMates PH v1.0.76 / Build 275 — visual identity layer.
   Screen-only by design: official printed forms and workbook geometry remain unchanged. */

@media screen {
  :root {
    --navy-950: #151F3B;
    --navy-900: #151F3B;
    --navy-800: #516A91;
    --navy-700: #516A91;
    --blue-100: #E4F2F5;
    --blue-50: #F5F8FA;
    --teal-700: #2F817B;
    --teal-600: #8FD6D3;
    --teal-100: #E3F4F0;
    --gold-500: #8FD6D3;
    --green-700: #2F817B;
    --green-100: #E3F4F0;
    --amber-700: #516A91;
    --amber-100: #E4F2F5;
    --ink: #11192A;
    --muted: #636C77;
    --line: #D9E4E8;
    --surface: #FFFFFF;
    --page: #F5F8FA;
    --shadow-sm: 0 7px 22px rgba(21,31,59,.075);
    --shadow-md: 0 24px 64px rgba(21,31,59,.16);
    --radius: 16px;
    --sidebar: 236px;
    --sidebar-collapsed: 70px;
    --brand-navy: #151F3B;
    --brand-steel: #516A91;
    --brand-aqua: #8FD6D3;
    --brand-ice: #E4F2F5;
    --brand-cloud: #F5F8FA;
    --brand-white: #FFFFFF;
    --brand-border: #D9E4E8;
    --brand-ink: #11192A;
    --brand-muted: #636C77;
    --brand-mint: #E3F4F0;
    --brand-teal: #2F817B;
  }

  html, body { background: var(--brand-cloud); color: var(--brand-ink); }
  body { font-family: var(--font-sans); }
  button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline-color: rgba(81,106,145,.42);
  }

  .desktop-titlebar {
    color: rgba(255,255,255,.82);
    border-bottom-color: rgba(255,255,255,.08);
    background: var(--brand-navy);
  }
  .desktop-titlebar-brand { color: var(--brand-ice); }

  .app-loader {
    color: var(--brand-ink);
    background: rgba(245,248,250,.72);
  }
  .app-loader-glow {
    background: radial-gradient(circle, rgba(143,214,211,.32), rgba(228,242,245,.18) 45%, transparent 72%);
  }
  .app-loader-logo-wrap img {
    filter: drop-shadow(0 14px 28px rgba(21,31,59,.24));
  }
  .app-loader-orbit {
    border-color: rgba(81,106,145,.2);
    border-top-color: var(--brand-aqua);
    border-right-color: var(--brand-steel);
    box-shadow: 0 0 26px rgba(143,214,211,.28), inset 0 0 18px rgba(143,214,211,.12);
  }
  .app-loader-orbit::after { background: var(--brand-aqua); box-shadow: 0 0 13px var(--brand-aqua); }
  .app-loader-orbit-inner { border-right-color: rgba(143,214,211,.72); border-bottom-color: rgba(81,106,145,.72); }
  .app-loader-brand strong { color: var(--brand-navy); text-shadow: none; }
  .app-loader-brand span { color: var(--brand-teal); }
  .app-loader p { color: var(--brand-muted); text-shadow: none; }
  .app-loader-progress { background: rgba(81,106,145,.16); }
  .app-loader-progress span { background: linear-gradient(90deg, transparent, var(--brand-steel) 42%, var(--brand-aqua) 72%, transparent); }

  .activation-screen {
    color: var(--brand-ink);
    background:
      radial-gradient(circle at 83% 12%, rgba(143,214,211,.22), transparent 27%),
      radial-gradient(circle at 12% 88%, rgba(81,106,145,.12), transparent 30%),
      linear-gradient(145deg, #F5F8FA 0%, #FFFFFF 56%, #E4F2F5 100%);
  }
  .activation-screen::before, .activation-screen::after {
    background-image: radial-gradient(circle, rgba(81,106,145,.3) 1.6px, transparent 1.9px);
  }
  .activation-background-mark { border-color: rgba(81,106,145,.14); }
  .activation-background-mark::before { border-color: rgba(143,214,211,.22); }
  .activation-card {
    border-color: rgba(217,228,232,.96);
    background: rgba(255,255,255,.97);
    box-shadow: 0 28px 72px rgba(21,31,59,.15);
  }
  .activation-logo { filter: drop-shadow(0 12px 24px rgba(21,31,59,.18)); }
  .activation-mode-label { color: var(--brand-teal); background: var(--brand-mint); }
  .activation-heading h1 { color: var(--brand-navy); }
  .activation-heading p, .activation-note { color: var(--brand-muted) !important; }
  .activation-field {
    color: var(--brand-navy) !important;
    border-color: var(--brand-border);
    background: var(--brand-white);
  }
  .activation-field:focus-within { border-color: var(--brand-steel); box-shadow: 0 0 0 4px rgba(143,214,211,.22); }
  .activation-field-icon { color: var(--brand-steel); background: var(--brand-ice); }
  .activation-field input { color: var(--brand-ink); }
  .activation-field input::placeholder { color: #8A96A3; }
  .activation-submit {
    color: #FFFFFF;
    background: var(--brand-navy);
    box-shadow: 0 12px 26px rgba(21,31,59,.22);
  }
  .activation-submit:hover { background: #1C2A4E; filter: none; }
  .activation-submit svg { fill: var(--brand-aqua); }
  .activation-restore {
    color: var(--brand-navy);
    border-color: var(--brand-border);
    background: var(--brand-white);
  }
  .activation-restore:hover { border-color: var(--brand-aqua); background: var(--brand-ice); }
  .license-recovery-backdrop { background: rgba(21,31,59,.56); }
  .license-recovery-panel { border-color: var(--brand-border); box-shadow: var(--shadow-md); }
  .license-recovery-icon, .license-recovery-success-icon { color: var(--brand-steel); background: var(--brand-ice); }
  .license-recovery-kicker { color: var(--brand-teal); }
  .license-recovery-button.primary { color: #FFFFFF; background: var(--brand-navy); }
  .license-recovery-button.secondary { color: var(--brand-navy); border-color: var(--brand-border); background: #FFFFFF; }

  #app-shell.app-shell {
    grid-template-columns: var(--sidebar) minmax(0,1fr);
    background: var(--brand-cloud);
    transition: grid-template-columns .22s ease;
  }
  #app-shell .main-shell { grid-column: 2; min-width: 0; transition: margin .22s ease; }
  #app-shell .sidebar {
    width: var(--sidebar);
    padding: 14px 9px 14px;
    color: #FFFFFF;
    background: linear-gradient(180deg, #151F3B 0%, #182746 100%);
    border-right: 1px solid rgba(143,214,211,.12);
    box-shadow: 10px 0 30px rgba(21,31,59,.1);
    transition: width .22s ease, transform .25s ease;
  }
  #app-shell .sidebar .brand {
    position: relative;
    display: grid;
    grid-template-columns: 50px minmax(0,1fr) 34px;
    align-items: center;
    min-height: 68px;
    gap: 6px;
    padding: 4px 2px 6px;
    border-bottom: 0;
  }
  #app-shell .sidebar-history-controls {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin: 7px 2px 0;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(228,242,245,.12);
  }
  #app-shell .sidebar-history-button {
    display: inline-flex;
    min-width: 0;
    height: 32px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
    color: var(--brand-ice);
    border: 1px solid rgba(228,242,245,.14);
    border-radius: 10px;
    background: rgba(255,255,255,.055);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease;
  }
  #app-shell .sidebar-history-button:hover:not(:disabled) { color: #FFFFFF; border-color: rgba(143,214,211,.44); background: rgba(143,214,211,.14); }
  #app-shell .sidebar-history-button:focus-visible { outline: 2px solid var(--brand-aqua); outline-offset: 2px; }
  #app-shell .sidebar-history-button:disabled { opacity: .34; cursor: default; }
  #app-shell .sidebar-history-button svg { width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; }
  #app-shell .brand-logo {
    width: 50px;
    height: 50px;
    filter: drop-shadow(0 7px 13px rgba(0,0,0,.24));
  }
  #app-shell .brand-emblem-button {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
  }
  #app-shell .brand-copy { min-width: 0; text-align: center; }
  #app-shell .brand-copy strong {
    overflow: hidden;
    color: #FFFFFF;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .035em;
    white-space: nowrap;
  }
  #app-shell .brand-copy small {
    overflow: hidden;
    margin-top: 4px;
    color: var(--brand-aqua);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
    white-space: nowrap;
    opacity: 1;
  }
  .sidebar-collapse-button {
    position: static;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    color: var(--brand-ice);
    border: 1px solid rgba(228,242,245,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.045);
  }
  .sidebar-collapse-button:hover { color: #FFFFFF; border-color: rgba(143,214,211,.38); background: rgba(143,214,211,.12); }
  .sidebar-collapse-button svg { width: 19px; height: 19px; fill: currentColor; }
  #app-shell .side-nav {
    flex: 1 1 auto;
    min-height: 0;
    gap: 5px;
    margin: 14px -3px 8px 0;
    padding-right: 3px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(143,214,211,.28) transparent;
  }
  #app-shell .nav-item {
    position: relative;
    min-height: 43px;
    gap: 10px;
    padding: 9px 9px;
    color: #C7D6DF;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
  }
  #app-shell .nav-item svg { width: 19px; height: 19px; flex: 0 0 19px; }
  #app-shell .nav-item:hover { color: #FFFFFF; border-color: rgba(143,214,211,.13); background: rgba(228,242,245,.07); }
  #app-shell .nav-item.active {
    color: #FFFFFF;
    border-color: rgba(143,214,211,.2);
    background: rgba(81,106,145,.72);
    box-shadow: inset 4px 0 var(--brand-aqua), 0 8px 18px rgba(7,17,37,.13);
  }
  #app-shell .nav-badge { color: var(--brand-navy); background: var(--brand-aqua); }
  #app-shell .sidebar-motto {
    margin: 5px 8px 10px;
    padding-top: 12px;
    color: rgba(228,242,245,.66);
    border-top: 1px solid rgba(228,242,245,.12);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .18em;
    white-space: nowrap;
  }
  #app-shell .user-card {
    width: 100%;
    margin-top: 0;
    padding: 10px 8px;
    color: #FFFFFF;
    border: 1px solid rgba(228,242,245,.1);
    border-radius: 12px;
    background: rgba(255,255,255,.045);
    text-align: left;
  }
  #app-shell .user-card:hover { border-color: rgba(143,214,211,.28); background: rgba(143,214,211,.08); }
  #app-shell .user-card small { color: rgba(228,242,245,.66); }
  #app-shell .user-card-edit { color: var(--brand-aqua); }
  #app-shell .avatar { color: var(--brand-navy); background: var(--brand-aqua); }

  #app-shell .topbar {
    min-height: 72px;
    gap: 14px;
    padding: 10px clamp(18px,2.6vw,36px);
    border-bottom-color: var(--brand-border);
    background: rgba(255,255,255,.92);
    box-shadow: 0 5px 22px rgba(21,31,59,.045);
    backdrop-filter: blur(18px) saturate(1.1);
  }
  #app-shell .school-context-logo > span {
    color: var(--brand-navy);
    border-color: var(--brand-border);
    background: var(--brand-ice);
  }
  #app-shell .school-context strong { color: var(--brand-navy); }
  #app-shell .school-context span { color: var(--brand-muted); }
  #app-shell .top-action-button, #app-shell .text-button, #app-shell .icon-button {
    color: var(--brand-steel);
  }
  #app-shell .top-action-button {
    min-height: 38px;
    color: var(--brand-navy);
    border-color: var(--brand-border);
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(21,31,59,.055);
  }
  #app-shell .top-action-button:hover { color: var(--brand-navy); border-color: var(--brand-aqua); background: var(--brand-ice); }
  #app-shell .top-refresh-button { color: var(--brand-steel); }
  #app-shell .update-dot { width: 10px; height: 10px; top: 4px; right: 4px; background: #DC2626; box-shadow: 0 0 0 3px rgba(255,255,255,.96); }
  #app-shell .update-dot[hidden] { display: none !important; }
  #app-shell .view { max-width: 1700px; padding: 26px clamp(18px,2.5vw,36px) 70px; }

  .page-heading { align-items: center; margin-bottom: 20px; }
  .page-heading h1 { color: var(--brand-navy); font-weight: 800; }
  .page-heading p { color: var(--brand-muted); }
  .eyebrow, .text-button { color: var(--brand-teal); }
  .eyebrow.light { color: var(--brand-aqua); }

  .metric-grid { gap: 14px; }
  .metric-card, .panel, .class-card, .roster-card, .report-card, .settings-card, .form-card {
    border-color: var(--brand-border);
    border-radius: var(--radius);
    background: #FFFFFF;
    box-shadow: var(--shadow-sm);
  }
  .metric-card { min-height: 142px; padding: 18px 19px; }
  .metric-card::after { background: var(--brand-ice); }
  .metric-card .metric-icon {
    color: var(--brand-steel);
    background: linear-gradient(145deg, var(--brand-ice), #D6EEF2);
    box-shadow: inset 0 0 0 1px rgba(81,106,145,.08);
  }
  .metric-card strong, .panel-header h2, .class-card h3, .report-card h3, .settings-card h2 { color: var(--brand-navy); }
  .metric-card .trend { color: var(--brand-teal); }
  .panel { padding: 20px; }
  .progress-track { background: #EAF0F3; }
  .progress-fill { background: linear-gradient(90deg, var(--brand-steel), var(--brand-aqua)); }
  .quick-action {
    min-height: 104px;
    color: var(--brand-navy);
    border-color: var(--brand-border);
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(21,31,59,.04);
  }
  .quick-action::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 13px 0 0 13px;
    background: var(--brand-aqua);
  }
  .quick-action { position: relative; overflow: hidden; }
  .quick-action svg { color: var(--brand-steel); }
  .quick-action:hover { border-color: var(--brand-aqua); background: var(--brand-ice); transform: translateY(-1px); }
  .activity-dot { background: var(--brand-aqua); box-shadow: 0 0 0 4px rgba(143,214,211,.2); }
  .teacher-quest-panel { background: linear-gradient(145deg,#FFFFFF,#F5F8FA); }
  .quest-mascot { color: var(--brand-navy); border-color: var(--brand-border); background: var(--brand-ice); }
  .quest-progress { background: #EAF0F3; }
  .quest-progress span { background: linear-gradient(90deg,var(--brand-steel),var(--brand-aqua)); }
  .license-details > div { border-color: var(--brand-border); background: var(--brand-cloud); }

  .button.primary {
    color: #FFFFFF;
    background: var(--brand-steel);
    box-shadow: 0 6px 16px rgba(81,106,145,.2);
  }
  .button.primary:hover { color: #FFFFFF; background: var(--brand-navy); }
  .button.secondary {
    color: var(--brand-navy);
    border-color: var(--brand-border);
    background: #FFFFFF;
  }
  .button.secondary:hover { color: var(--brand-navy); border-color: var(--brand-aqua); background: var(--brand-ice); }
  .button.danger { box-shadow: none; }
  .icon-button:hover { color: var(--brand-navy); background: var(--brand-ice); }

  input, select, textarea {
    color: var(--brand-ink);
    border-color: var(--brand-border);
    background: #FFFFFF;
  }
  input:hover, select:hover, textarea:hover { border-color: #9BAFCA; }
  input:focus, select:focus, textarea:focus { border-color: var(--brand-steel); box-shadow: 0 0 0 3px rgba(143,214,211,.22); }
  .form-section { border-color: var(--brand-border); background: #FFFFFF; }
  .form-section > h2, .form-section h3 { color: var(--brand-navy); }
  .school-logo-uploader, .automation-note, .compliance-panel { border-color: var(--brand-border); background: var(--brand-cloud); }
  .school-logo-preview { color: var(--brand-navy); border-color: var(--brand-border); background: var(--brand-ice); }

  table:not(.sf9-exact-table):not(.sf2-sheet) { border-color: var(--brand-border); }
  table:not(.sf9-exact-table):not(.sf2-sheet) th { color: var(--brand-navy); border-color: var(--brand-border); background: var(--brand-ice); }
  table:not(.sf9-exact-table):not(.sf2-sheet) td { border-color: var(--brand-border); }
  .gradebook .group-head, .gradebook .group-head.performance, .gradebook .group-head.exam {
    color: #FFFFFF;
    background: var(--brand-steel);
  }
  .gradebook .group-head.exam { background: var(--brand-teal); }
  .gradebook .hps-row th, .gradebook .subweight, .gradebook .total-result { background: var(--brand-ice); }
  .gradebook .gradebook-gender-row td, .smart-sis-table .sis-group-row td { color: var(--brand-steel); border-bottom-color: var(--brand-border); background: var(--brand-cloud); }
  .gradebook .gradebook-gender-row .sticky-col, .smart-sis-table .sis-group-row .sis-sticky-col { background: var(--brand-ice); }
  .subject-order-item, .subject-order-actions button { border-color: var(--brand-border); background: #FFFFFF; }
  .subject-order-item.locked { background: var(--brand-cloud); }
  .subject-position { color: var(--brand-navy); background: var(--brand-aqua); }
  .required-subject { color: var(--brand-teal); background: var(--brand-mint); }
  .summary-tabs { background: var(--brand-ice); }
  .summary-tabs button.active { color: #FFFFFF; background: var(--brand-steel); }

  .tag, .status-chip, .nav-badge { color: var(--brand-steel); background: var(--brand-ice); }
  .tag.green, .status-chip.green, .connection-badge, .connection-badge.online { color: var(--brand-teal); background: var(--brand-mint); }
  .tag.amber, .status-chip.amber { color: var(--brand-steel); background: var(--brand-ice); }

  .modal-backdrop { background: rgba(21,31,59,.52); backdrop-filter: blur(5px); }
  .modal-panel { color: var(--brand-ink); border: 1px solid var(--brand-border); background: #FFFFFF; box-shadow: var(--shadow-md); }
  .modal-panel > header { border-bottom-color: var(--brand-border); background: #FFFFFF; }
  .modal-panel h2 { color: var(--brand-navy); }
  .toast { color: #FFFFFF; border-color: rgba(143,214,211,.28); background: var(--brand-navy); box-shadow: 0 14px 34px rgba(21,31,59,.25); }

  .special-feature-presentation .modal-panel > header,
  .special-popup-hero,
  .teacher-toolkit-hero {
    color: #FFFFFF;
    border-color: rgba(143,214,211,.18);
    background: linear-gradient(135deg,var(--brand-navy),#24385F);
  }
  .special-feature-presentation .modal-panel > header .icon-button { color: var(--brand-aqua); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
  .special-popup-icon { color: var(--brand-navy); background: linear-gradient(145deg,#FFFFFF,var(--brand-aqua)); box-shadow: 0 12px 26px rgba(7,17,37,.25); }
  .special-popup-hero span, .teacher-toolkit-hero .eyebrow, .teacher-toolkit-context > label { color: var(--brand-aqua); }
  .special-popup-hero p, .teacher-toolkit-hero-copy p { color: #DCE8EE; }
  .special-popup-metrics article, .special-popup-records article, .special-popup-insights article, .special-popup-form, .special-popup-role-grid article, .special-popup-users article, .special-popup-report {
    border-color: var(--brand-border);
    background: #FFFFFF;
  }
  .special-popup-metrics article::before { background: var(--brand-aqua); }
  .special-popup-metrics strong, .special-popup-records strong, .special-popup-insights strong, .special-popup-form-title strong, .special-popup-report > header strong { color: var(--brand-navy); }
  .special-popup-record-index, .special-popup-user-avatar { color: var(--brand-navy); background: var(--brand-ice); }
  .special-popup-insights span, .special-popup-form-title span, .special-popup-report > header span { color: var(--brand-teal); }
  .special-popup-note { color: #DCE8EE; border-color: rgba(143,214,211,.2); background: var(--brand-navy); }
  .special-popup-note .icon { color: var(--brand-aqua); }
  .special-popup-alert { border-color: var(--brand-border); background: var(--brand-cloud); }
  .special-popup-alert strong { color: var(--brand-navy); }
  .special-popup-empty { color: var(--brand-muted); border-color: var(--brand-border); background: var(--brand-cloud); }
  .special-popup-empty .icon { color: var(--brand-steel); }
  .teacher-toolkit-context select { color: var(--brand-ink); border-color: rgba(255,255,255,.2); background: #FFFFFF; }
  .teacher-toolkit-metrics article { border-color: rgba(143,214,211,.18); background: rgba(255,255,255,.07); }
  .teacher-toolkit-metrics strong { color: var(--brand-aqua); }
  .teacher-toolkit-metrics span { color: #DCE8EE; }
  .teacher-toolkit-tabs { border-color: var(--brand-border); background: var(--brand-ice); }
  .teacher-toolkit-tabs button.active { color: var(--brand-navy); border-color: var(--brand-aqua); background: #FFFFFF; box-shadow: 0 7px 20px rgba(21,31,59,.08), inset 0 -3px var(--brand-aqua); }
  .teacher-toolkit-protection { color: var(--brand-navy); border-color: var(--brand-border); background: var(--brand-ice); }
  .teacher-toolkit-protection svg { color: var(--brand-teal); }

  .settings-card-icon, .report-card-icon, .school-form-icon {
    color: var(--brand-steel);
    border-color: var(--brand-border);
    background: var(--brand-ice);
  }
  .settings-card-footer { border-top-color: var(--brand-border); }
  .report-card:hover, .class-card:hover, .roster-card:hover { border-color: var(--brand-aqua); box-shadow: 0 12px 30px rgba(21,31,59,.1); }
  .sf9-controls, .record-controls, .analysis-controls, .smart-tools, .summary-toolbar { border-color: var(--brand-border); background: #FFFFFF; }
  .sf9-grade-command-row .sf9-report-data-toggle-group { border-color: var(--brand-border) !important; background: var(--brand-cloud) !important; }
}
/* v1.0.78 screen-only dark mode. Generated workbooks and print layouts are untouched. */
@media screen {
  :root[data-theme="dark"] {
    --ink: #F3F7FC;
    --muted: #B4C1CF;
    --line: #34445D;
    --surface: #18243A;
    --page: #0E1728;
    --brand-cloud: #0E1728;
    --brand-white: #18243A;
    --brand-border: #34445D;
    --brand-ink: #F3F7FC;
    --brand-muted: #B4C1CF;
    --brand-ice: #22354D;
    --brand-mint: #183B3D;
    --shadow-sm: 0 8px 24px rgba(0,0,0,.22);
    --shadow-md: 0 28px 72px rgba(0,0,0,.38);
  }

  :root[data-theme="dark"],
  :root[data-theme="dark"] body,
  :root[data-theme="dark"] #app-shell,
  :root[data-theme="dark"] #app-shell .content,
  :root[data-theme="dark"] #app-shell .view {
    color: var(--brand-ink);
    background-color: var(--brand-cloud);
  }

  :root[data-theme="dark"] #app-shell .topbar {
    border-color: rgba(143,214,211,.2) !important;
    background: linear-gradient(135deg,rgba(21,31,59,.9),rgba(24,36,58,.78)) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  :root[data-theme="dark"] #app-shell .page-heading h1,
  :root[data-theme="dark"] #app-shell h2,
  :root[data-theme="dark"] #app-shell h3,
  :root[data-theme="dark"] #app-shell strong,
  :root[data-theme="dark"] #app-shell label,
  :root[data-theme="dark"] #app-shell .school-context strong {
    color: #F3F7FC;
  }

  :root[data-theme="dark"] #app-shell .page-heading p,
  :root[data-theme="dark"] #app-shell p,
  :root[data-theme="dark"] #app-shell small,
  :root[data-theme="dark"] #app-shell .form-help,
  :root[data-theme="dark"] #app-shell .settings-card-copy {
    color: #B4C1CF;
  }

  :root[data-theme="dark"] #app-shell .metric-card,
  :root[data-theme="dark"] #app-shell .panel,
  :root[data-theme="dark"] #app-shell .class-card,
  :root[data-theme="dark"] #app-shell .roster-card,
  :root[data-theme="dark"] #app-shell .report-card,
  :root[data-theme="dark"] #app-shell .settings-card,
  :root[data-theme="dark"] #app-shell .form-card,
  :root[data-theme="dark"] #app-shell .empty-state,
  :root[data-theme="dark"] #app-shell .settings-callout,
  :root[data-theme="dark"] #app-shell .modal-panel {
    color: #F3F7FC !important;
    border-color: #34445D !important;
    background: #18243A !important;
  }

  :root[data-theme="dark"] #app-shell input,
  :root[data-theme="dark"] #app-shell select,
  :root[data-theme="dark"] #app-shell textarea,
  :root[data-theme="dark"] #app-shell .button.secondary,
  :root[data-theme="dark"] #app-shell .icon-button,
  :root[data-theme="dark"] #app-shell .top-action {
    color: #F3F7FC !important;
    border-color: #41536D !important;
    background: #111D31 !important;
  }

  :root[data-theme="dark"] #app-shell input::placeholder,
  :root[data-theme="dark"] #app-shell textarea::placeholder { color: #8392A6; }

  :root[data-theme="dark"] #app-shell table,
  :root[data-theme="dark"] #app-shell th,
  :root[data-theme="dark"] #app-shell td {
    color: #EAF1F8;
    border-color: #34445D;
    background-color: #18243A;
  }
  :root[data-theme="dark"] #app-shell th { background-color: #22354D; }

  :root[data-theme="dark"] .notification-roll-down {
    border-color: #41536D;
    background: rgba(17,29,49,.96);
    box-shadow: 0 24px 64px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
  }
  :root[data-theme="dark"] .notification-panel-head,
  :root[data-theme="dark"] .notification-preview,
  :root[data-theme="dark"] .notification-panel-empty {
    color: #F3F7FC;
    border-color: #34445D;
    background: #18243A;
  }
  :root[data-theme="dark"] .notification-preview.unread { background: linear-gradient(135deg,#18243A,#183B3D); }
  :root[data-theme="dark"] .notification-preview-row strong,
  :root[data-theme="dark"] .notification-panel-head strong,
  :root[data-theme="dark"] .notification-panel-empty strong { color: #F3F7FC; }
  :root[data-theme="dark"] .notification-preview-message,
  :root[data-theme="dark"] .notification-preview-row small,
  :root[data-theme="dark"] .notification-panel-empty p { color: #B4C1CF; }

  .theme-mode-toggle {
    display: inline-flex; align-items: center; gap: 11px; min-width: 184px; padding: 10px 12px;
    border: 1px solid var(--brand-border); border-radius: 18px; color: var(--brand-ink);
    background: rgba(255,255,255,.78); box-shadow: var(--shadow-sm); backdrop-filter: blur(16px);
  }
  .theme-mode-toggle > span:nth-child(2) { display: grid; gap: 1px; margin-right: auto; text-align: left; }
  .theme-mode-toggle strong { font-size: 13px; line-height: 1.1; color: var(--brand-navy); }
  .theme-mode-toggle small { font-size: 10px; color: var(--brand-muted); }
  .theme-mode-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; color: var(--brand-navy); background: var(--brand-ice); font-size: 17px; }
  .theme-mode-switch { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #CAD7E2; transition: background .2s ease; }
  .theme-mode-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 7px rgba(21,31,59,.25); transition: transform .2s ease; }
  .theme-mode-toggle[aria-pressed="true"] .theme-mode-switch { background: var(--brand-aqua); }
  .theme-mode-toggle[aria-pressed="true"] .theme-mode-switch i { transform: translateX(18px); background: var(--brand-navy); }
  :root[data-theme="dark"] .theme-mode-toggle { color: #F3F7FC; border-color: #41536D; background: rgba(17,29,49,.9); }
  :root[data-theme="dark"] .theme-mode-toggle strong { color: #F3F7FC; }
  :root[data-theme="dark"] .theme-mode-toggle small { color: #B4C1CF; }
  :root[data-theme="dark"] .theme-mode-icon { color: #E4F2F5; background: #22354D; }

  @media (max-width: 720px) {
    #app-shell .route-settings .page-heading { align-items: flex-start; }
    #app-shell .route-settings .heading-actions { width: auto; }
    .theme-mode-toggle { min-width: 164px; padding: 9px 10px; }
  }
}


/* Official announcement feed */
#app-shell .announcement-feed{display:grid;gap:12px;max-height:min(62vh,620px);overflow:auto;padding:2px}
#app-shell .announcement-card{padding:16px;border:1px solid #D9E4E8;border-radius:18px;background:#F5F8FA;color:#11192A}
#app-shell .announcement-card.unread{border-left:5px solid #8FD6D3;background:linear-gradient(135deg,#fff,#E4F2F5)}
#app-shell .announcement-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#app-shell .announcement-card-head strong{font-size:16px}#app-shell .announcement-card-head span{font-size:10px;font-weight:800;text-transform:uppercase;color:#2F817B}
#app-shell .announcement-card p{margin:9px 0;color:#636C77;line-height:1.55}#app-shell .announcement-card small{color:#516A91}
#app-shell .announcement-empty{padding:26px;text-align:center;border:1px solid #D9E4E8;border-radius:18px;background:#F5F8FA}#app-shell .announcement-empty p{color:#636C77}

/* Build 275 visual correction: true full-sheet view, centered expand controls,
   palette-only grade surfaces, and flush learner columns. */
@media screen {
  #app-shell .sheet-wide-toggle,
  #app-shell #sheet-wide-exit {
    display: grid;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    place-items: center;
    padding: 0 !important;
    border-radius: 13px !important;
    line-height: 0;
  }
  #app-shell .sheet-wide-toggle svg,
  #app-shell #sheet-wide-exit svg {
    display: block;
    width: 21px;
    height: 21px;
    margin: 0;
  }
  #app-shell .sheet-wide-toggle:hover,
  body.sheet-wide #app-shell #sheet-wide-exit:hover {
    color: var(--brand-navy);
    border-color: var(--brand-aqua);
    background: var(--brand-ice);
  }

  /* Expanded sheets use the complete application canvas. */
  body.sheet-wide #app-shell.app-shell {
    grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important;
  }
  body.sheet-wide #app-shell .topbar {
    position: fixed !important;
    inset: calc(var(--desktop-titlebar-height) + 10px) 10px auto auto !important;
    z-index: 300;
    display: block !important;
    width: 42px !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body.sheet-wide #app-shell .topbar .school-context,
  body.sheet-wide #app-shell .topbar .top-actions { display: none !important; }
  body.sheet-wide #app-shell #sheet-wide-exit {
    position: absolute;
    inset: 0;
    margin: 0 !important;
    border-color: var(--brand-border);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(14px) saturate(135%);
  }
  body.sheet-wide #app-shell .main-shell {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
  }
  body.sheet-wide #app-shell .view.sheet-view {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
  }
  body.sheet-wide #app-shell .view.sheet-view.route-gradebook > .gradebook-wrap,
  body.sheet-wide #app-shell .view.sheet-view.route-smartsis > .smart-sis-table-wrap,
  body.sheet-wide #app-shell .view.sheet-view.route-mapeh > .mapeh-component-record,
  body.sheet-wide #app-shell .view.sheet-view.route-mapeh > .mapeh-table-wrap,
  body.sheet-wide #app-shell .view.sheet-view.route-sf2 > .sf2-workspace-scroll,
  body.sheet-wide #app-shell .view.sheet-view.route-sf5 > .sf5-record-panel,
  body.sheet-wide #app-shell .view.sheet-view.route-sf8 > .sf8-record-panel,
  body.sheet-wide #app-shell .view.sheet-view.route-sf10 > .sf10-data-preview,
  body.sheet-wide #app-shell .view.sheet-view.route-gradeslip > .grade-slip-preview-scroll,
  body.sheet-wide #app-shell .view.sheet-view.route-itemanalysis > .analysis-scroll {
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 0 !important;
  }

  /* Do not reserve a blank scrollbar gutter before the learner-name column. */
  #app-shell .route-gradebook .gradebook-wrap,
  #app-shell .route-smartsis .smart-sis-table-wrap,
  #app-shell .route-mapeh .gradebook-wrap,
  #app-shell .route-mapeh .mapeh-table-wrap,
  #app-shell .route-sf2 .sf2-workspace-scroll,
  #app-shell .route-sf5 .sf5-table-shell,
  #app-shell .route-sf8 .sf8-table-shell,
  #app-shell .route-sf10 .table-shell,
  #app-shell .route-gradeslip .grade-slip-preview-scroll,
  #app-shell .route-itemanalysis .analysis-scroll {
    scrollbar-gutter: auto !important;
  }

  /* Grade Sheet and E-Class surfaces use only the approved AcadMates palette. */
  #app-shell .route-gradebook .gradebook .group-head,
  #app-shell .route-gradebook .gradebook .group-head.performance { background: var(--brand-steel) !important; color: var(--brand-white) !important; }
  #app-shell .route-gradebook .gradebook .group-head.exam { background: var(--brand-teal) !important; color: var(--brand-white) !important; }
  #app-shell .route-gradebook .gradebook .hps-row th,
  #app-shell .route-gradebook .gradebook .subweight,
  #app-shell .route-gradebook .gradebook .total-result { background: var(--brand-ice) !important; color: var(--brand-navy) !important; }
  #app-shell .route-gradebook .gradebook .gradebook-gender-row td,
  #app-shell .route-smartsis .smart-sis-table .sis-group-row td { color: var(--brand-steel) !important; border-color: var(--brand-border) !important; background: var(--brand-cloud) !important; }
  #app-shell .route-gradebook .gradebook .gradebook-gender-row .sticky-col,
  #app-shell .route-smartsis .smart-sis-table .sis-group-row .sis-sticky-col,
  #app-shell .route-smartsis .smart-sis-table tbody .sis-group-row:hover td,
  #app-shell .route-smartsis .smart-sis-table tbody .sis-group-row:hover .sis-sticky-col { background: var(--brand-ice) !important; }
  #app-shell .route-gradebook .gradebook .gradebook-gender-row small,
  #app-shell .route-smartsis .smart-sis-table .sis-group-row small { color: var(--brand-muted) !important; }
  #app-shell .route-smartsis .smart-sis-table .sis-manual-grade-cell { background: var(--brand-cloud) !important; }
  #app-shell .route-smartsis .smart-sis-table .sis-manual-grade-cell input { color: var(--brand-navy) !important; border-color: var(--brand-steel) !important; background: var(--brand-white) !important; }
  #app-shell .route-smartsis .smart-sis-table .sis-manual-grade-cell input:focus { border-color: var(--brand-aqua) !important; outline: 3px solid rgba(143,214,211,.24) !important; }
  #app-shell .route-smartsis .smart-sis-table .sis-manual-grade-cell small { color: var(--brand-teal) !important; }
}

/* Build 275 top workspace bar — translucent liquid-glass navigation. */
@media screen {
  #app-shell .topbar {
    position: relative;
    isolation: isolate;
    width: calc(100% - 28px);
    min-height: 76px;
    margin: 14px 14px 0;
    padding: 10px 14px 10px 16px;
    gap: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 22px;
    background:
      linear-gradient(108deg,rgba(255,255,255,.50) 0%,rgba(242,250,252,.34) 43%,rgba(228,242,245,.28) 100%);
    box-shadow:
      0 16px 40px rgba(21,31,59,.11),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -1px 0 rgba(143,214,211,.22),
      inset 14px 0 34px rgba(255,255,255,.20);
    -webkit-backdrop-filter: blur(30px) saturate(1.55);
    backdrop-filter: blur(30px) saturate(1.55);
  }
  #app-shell .topbar::before,
  #app-shell .topbar::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(2px);
  }
  #app-shell .topbar::before {
    width: 260px;
    height: 105px;
    left: -74px;
    bottom: -68px;
    background: radial-gradient(ellipse,rgba(143,214,211,.30),rgba(228,242,245,.12) 62%,transparent 72%);
    transform: rotate(10deg);
  }
  #app-shell .topbar::after {
    width: 330px;
    height: 116px;
    right: 13%;
    top: -82px;
    background: radial-gradient(ellipse,rgba(81,106,145,.13),rgba(143,214,211,.08) 56%,transparent 73%);
    transform: rotate(-7deg);
  }
  #app-shell .topbar > * { position: relative; z-index: 1; }
  #app-shell .school-context { flex: 0 1 auto; min-width: 190px; }
  #app-shell .school-context-logo { width: 46px; height: 46px; }
  #app-shell .school-context-logo > span { border-radius: 14px; }
  #app-shell .school-context-copy { min-width: 0; }
  #app-shell .school-context-copy strong { overflow: hidden; max-width: 270px; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  #app-shell .school-context-copy > span { font-size: 10px; }

  #app-shell .workspace-slot { display: flex; align-items: center; margin-right: 2px; }
  #app-shell .key-stage-button {
    min-height: 40px;
    padding: 8px 13px;
    color: var(--brand-navy);
    border-color: rgba(81,106,145,.15);
    border-radius: 12px;
    background: rgba(255,255,255,.58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
  }
  #app-shell .key-stage-button::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-radius: 50%;
    background: var(--brand-aqua);
    box-shadow: 0 0 0 4px rgba(143,214,211,.18);
  }
  #app-shell .top-actions { gap: 8px; margin-left: auto; }
  #app-shell .top-actions .top-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    width: auto;
    min-width: auto;
    flex: 0 0 auto;
    padding: 8px 12px;
    color: var(--brand-navy);
    border-color: rgba(81,106,145,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 6px 17px rgba(21,31,59,.06),inset 0 1px 0 rgba(255,255,255,.9);
  }
  #app-shell .top-actions .top-action-button svg { width: 17px; height: 17px; fill: currentColor; }
  #app-shell .top-actions .top-action-button:hover { border-color: rgba(143,214,211,.7); background: rgba(255,255,255,.94); transform: translateY(-1px); }

  #app-shell .top-notification-button {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    color: var(--brand-navy);
    border: 1px solid transparent;
    border-radius: 50%;
    background: rgba(255,255,255,.38);
    cursor: pointer;
  }
  #app-shell .top-notification-button:hover { border-color: rgba(143,214,211,.45); background: rgba(255,255,255,.82); }
  #app-shell .top-notification-button svg { width: 20px; height: 20px; fill: currentColor; }
  #app-shell .notification-indicator {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,.96);
    border-radius: 50%;
    background: #22C55E;
  }
  #app-shell .notification-indicator[hidden] { display: none !important; }
  #app-shell .top-notification-button.has-notification .notification-indicator { animation: academates-notification-pulse 1.35s ease-in-out infinite; }
  @keyframes academates-notification-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
  #app-shell .top-profile {
    display: grid;
    grid-template-columns: auto minmax(0,auto);
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 3px 8px 3px 4px;
    color: var(--brand-navy);
    border: 1px solid rgba(81,106,145,.11);
    border-radius: 999px;
    background: rgba(255,255,255,.48);
    cursor: pointer;
  }
  #app-shell .top-profile:hover { border-color: rgba(143,214,211,.55); background: rgba(255,255,255,.9); }
  #app-shell .top-profile .avatar { width: 38px; height: 38px; color: #FFFFFF; background: linear-gradient(145deg,var(--brand-steel),var(--brand-navy)); }
  #app-shell .top-profile-copy { min-width: 0; text-align: left; }
  #app-shell .top-profile-copy strong,
  #app-shell .top-profile-copy small { display: block; overflow: hidden; max-width: 125px; text-overflow: ellipsis; white-space: nowrap; }
  #app-shell .top-profile-copy strong { font-size: 10px; }
  #app-shell .top-profile-copy small { margin-top: 2px; color: var(--brand-muted); font-size: 8px; }
  @media (max-width: 1180px) {
    #app-shell .top-profile-copy { display: none; }
    #app-shell .school-context-copy strong { max-width: 190px; }
  }
  @media (max-width: 940px) {
    #app-shell .topbar { width: calc(100% - 20px); margin: 10px 10px 0; padding-inline: 11px; border-radius: 18px; }
    #app-shell .school-context { min-width: 0; }
    #app-shell .school-context-copy { display: none; }
    #app-shell .key-stage-button { max-width: 155px; overflow: hidden; text-overflow: ellipsis; }
  }
  @media (max-width: 690px) {
    #app-shell .key-stage-button { max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
    #app-shell .top-actions .top-action-button { width: 40px; padding: 0; }
    #app-shell .top-actions .top-action-button > span:not(.update-dot) { display: none; }
    #app-shell .top-profile { grid-template-columns: auto; padding: 3px; }
  }
}

@media screen and (min-width: 901px) {
  #app-shell.sidebar-collapsed { grid-template-columns: var(--sidebar-collapsed) minmax(0,1fr); }
  #app-shell.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed); padding-inline: 7px; }
  #app-shell.sidebar-collapsed .sidebar-history-controls { grid-template-columns: repeat(2,1fr); gap: 4px; margin: 7px 0 0; padding-bottom: 10px; }
  #app-shell.sidebar-collapsed .sidebar-history-button { width: 29px; height: 30px; padding: 0; border-radius: 9px; }
  #app-shell.sidebar-collapsed .sidebar-history-button span { display: none; }
  #app-shell.sidebar-collapsed .sidebar-history-button svg { width: 15px; height: 15px; flex-basis: 15px; }
  #app-shell.sidebar-collapsed .sidebar .brand { display: grid; grid-template-columns: 1fr; justify-items: center; min-height: 58px; padding: 4px 0 2px; }
  #app-shell.sidebar-collapsed .brand-logo { width: 48px; height: 48px; }
  #app-shell.sidebar-collapsed .brand-copy,
  #app-shell.sidebar-collapsed .sidebar-motto,
  #app-shell.sidebar-collapsed .nav-item > span,
  #app-shell.sidebar-collapsed .nav-item > small,
  #app-shell.sidebar-collapsed .user-card > div,
  #app-shell.sidebar-collapsed .user-card-edit { display: none !important; }
  #app-shell.sidebar-collapsed .sidebar-collapse-button { display: none; }
  #app-shell.sidebar-collapsed .brand-emblem-button { cursor: pointer; }
  #app-shell.sidebar-collapsed .brand-emblem-button:hover { background: rgba(143,214,211,.12); box-shadow: 0 0 0 5px rgba(143,214,211,.08); }
  #app-shell.sidebar-collapsed .side-nav { margin-top: 12px; padding-right: 0; }
  #app-shell.sidebar-collapsed .nav-item { justify-content: center; gap: 0; min-height: 45px; padding: 10px; }
  #app-shell.sidebar-collapsed .nav-item.active { box-shadow: inset 3px 0 var(--brand-aqua), 0 7px 16px rgba(7,17,37,.15); }
  #app-shell.sidebar-collapsed .user-card { display: flex; justify-content: center; padding: 8px; }

  /* The navigation always fits the available device height. It compresses
     vertically instead of introducing a scrollbar or clipping menu items. */
  #app-shell .sidebar { overflow: hidden; }
  #app-shell .side-nav {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-auto-rows: minmax(30px,43px);
    align-content: space-between;
    gap: clamp(1px,.55vh,5px);
    margin-top: clamp(7px,1.5vh,14px);
    overflow: hidden !important;
  }
  #app-shell .nav-item { min-height: 0; height: 100%; padding-block: clamp(5px,1vh,10px); }
}

@media screen and (min-width: 901px) and (max-height: 760px) {
  #app-shell .sidebar { padding-block: 10px 8px; }
  #app-shell .sidebar-history-controls { margin-top: 5px; padding-bottom: 7px; }
  #app-shell .sidebar-history-button { height: 27px; }
  #app-shell .sidebar .brand { min-height: 54px; padding-block: 2px 8px; }
  #app-shell .brand-logo { width: 42px; height: 42px; }
  #app-shell .side-nav { grid-auto-rows: minmax(25px,36px); margin-top: 6px; }
  #app-shell .nav-item { gap: 9px; padding: 4px 9px; font-size: 11px; }
  #app-shell .nav-item svg { width: 17px; height: 17px; flex-basis: 17px; }
  #app-shell .sidebar-motto { margin-bottom: 5px; padding-top: 7px; font-size: 7px; }
  #app-shell .sidebar-collapse-button { top: 6px; width: 30px; height: 30px; }
}

@media screen and (min-width: 901px) and (max-height: 620px) {
  #app-shell .sidebar { padding-block: 6px; }
  #app-shell .sidebar-history-controls { margin-top: 3px; padding-bottom: 5px; }
  #app-shell .sidebar-history-button { height: 24px; font-size: 9px; }
  #app-shell .sidebar .brand { min-height: 45px; padding-bottom: 5px; }
  #app-shell .brand-logo { width: 35px; height: 35px; }
  #app-shell .brand-copy strong { font-size: 11px; }
  #app-shell .brand-copy small { margin-top: 2px; font-size: 7px; }
  #app-shell .side-nav { grid-auto-rows: minmax(22px,30px); margin-top: 4px; gap: 1px; }
  #app-shell .nav-item { gap: 7px; padding: 3px 8px; border-radius: 8px; font-size: 10px; }
  #app-shell .nav-item svg { width: 15px; height: 15px; flex-basis: 15px; }
  #app-shell .sidebar-motto { display: none; }
  #app-shell .sidebar-collapse-button { top: 4px; width: 28px; height: 28px; }
}

@media screen and (max-width: 900px) {
  #app-shell.app-shell { display: block; }
  #app-shell .sidebar { width: min(252px,86vw); }
  #app-shell .main-shell { grid-column: auto; }
  #app-shell .sidebar-collapse-button { display: none; }
  #app-shell .sidebar-motto { display: none; }
  #app-shell .topbar { padding-inline: 13px; }
  #app-shell .view { padding-inline: 14px; }
}

@media screen and (max-width: 620px) {
  #app-shell .brand-copy strong { font-size: 12px; }
  #app-shell .metric-card { min-height: 122px; }
  #app-shell .top-action-button { box-shadow: none; }
}

@media screen and (prefers-reduced-motion: reduce) {
  #app-shell.app-shell, #app-shell .sidebar, #app-shell .main-shell { transition: none; }
}

/* Build 275 full interface rebuild. These rules intentionally sit last so every
   legacy screen component adopts the approved identity without touching print. */
@media screen {
  :root {
    --gold: #8FD6D3;
    --gold-soft: #E4F2F5;
    --app-navy: #151F3B;
    --app-navy-2: #24385F;
    --app-gold: #8FD6D3;
    --surface-soft: #F5F8FA;
  }

  #app-shell .view {
    max-width: 1680px;
    margin-inline: auto;
    padding: clamp(24px,3vw,44px);
  }
  #app-shell .page-heading { margin-bottom: 22px; }
  #app-shell .page-heading .eyebrow { color: var(--brand-teal); }
  #app-shell .page-heading h1 { color: var(--brand-navy); font-size: clamp(28px,3vw,42px); }

  /* Dashboard: asymmetric workspace composition from the approved concept. */
  #app-shell .metric-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
  #app-shell .metric-card {
    min-height: 142px;
    padding: 18px;
    border: 1px solid var(--brand-border);
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(21,31,59,.055);
  }
  #app-shell .metric-card:nth-child(2) { background: linear-gradient(145deg,#FFFFFF,#F3FAFB); }
  #app-shell .metric-card:nth-child(3) { background: linear-gradient(145deg,#FFFFFF,#F4F7FB); }
  #app-shell .metric-icon { color: var(--brand-steel); background: var(--brand-ice); }
  #app-shell .metric-card:nth-child(2) .metric-icon { color: var(--brand-teal); background: var(--brand-mint); }
  #app-shell .metric-card > strong { color: var(--brand-navy); }
  #app-shell .metric-card .trend { color: var(--brand-muted); }
  #app-shell .dashboard-grid { grid-template-columns: repeat(12,minmax(0,1fr)); gap: 14px; }
  #app-shell .dashboard-grid > .panel { min-width: 0; border-radius: 19px; }
  #app-shell .dashboard-grid > .panel:nth-child(1) { grid-column: span 7; }
  #app-shell .dashboard-grid > .panel:nth-child(2) { grid-column: span 5; }
  #app-shell .dashboard-grid > .panel:nth-child(3) { grid-column: span 7; }
  #app-shell .dashboard-grid > .panel:nth-child(4) { grid-column: span 5; }
  #app-shell .dashboard-grid > .panel:nth-child(5) { grid-column: 1 / -1; }
  #app-shell .quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #app-shell .quick-action { min-height: 86px; border-radius: 15px; }
  #app-shell .progress-fill, #app-shell .quest-progress span { background: linear-gradient(90deg,var(--brand-steel),var(--brand-aqua)); }

  /* School Forms: compact connected-workspace layout, no legacy poster cards. */
  #app-shell .school-forms-workspace {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid var(--brand-border);
    border-radius: 20px;
    background: linear-gradient(120deg,#FFFFFF 0%,#F5FBFC 68%,#E4F2F5 100%);
    box-shadow: 0 10px 28px rgba(21,31,59,.06);
  }
  #app-shell .school-forms-workspace-icon {
    display: grid; width: 54px; height: 54px; place-items: center;
    color: #FFFFFF; border-radius: 17px; background: var(--brand-steel);
  }
  #app-shell .school-forms-workspace-icon svg { width: 25px; height: 25px; }
  #app-shell .school-forms-workspace span { color: var(--brand-teal); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
  #app-shell .school-forms-workspace h2 { margin: 4px 0 2px; color: var(--brand-navy); font-size: 20px; }
  #app-shell .school-forms-workspace p { margin: 0; color: var(--brand-muted); font-size: 12px; }
  #app-shell .school-forms-workspace > strong { display: grid; justify-items: center; color: var(--brand-navy); font-size: 28px; }
  #app-shell .school-forms-workspace > strong small { color: var(--brand-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
  #app-shell .school-forms-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  #app-shell .school-form-card {
    position: relative;
    min-height: 148px;
    display: grid;
    grid-template-columns: 52px minmax(0,1fr) auto;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 15px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--brand-border);
    border-radius: 18px;
    color: var(--brand-ink);
    background: #FFFFFF;
    box-shadow: 0 7px 20px rgba(21,31,59,.045);
  }
  #app-shell .school-form-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--brand-aqua); }
  #app-shell .school-form-card:hover { transform: translateY(-2px); border-color: var(--brand-aqua); box-shadow: 0 14px 30px rgba(21,31,59,.1); }
  #app-shell .school-form-card:focus-visible { outline: 3px solid rgba(143,214,211,.4); }
  #app-shell .school-form-card-icon { width: 52px; height: 52px; margin: 0; color: var(--brand-steel); border-radius: 16px; background: var(--brand-ice); }
  #app-shell .school-form-card-copy { display: grid; min-width: 0; margin: 0 !important; }
  #app-shell .school-form-card-code { color: var(--brand-teal); font-size: 10px; }
  #app-shell .school-form-card-copy > strong { margin-top: 5px; color: var(--brand-navy); font-size: 16px; }
  #app-shell .school-form-card-copy > span:last-child { margin-top: 6px; color: var(--brand-muted); font-size: 11px; line-height: 1.45; }
  #app-shell .school-form-card-footer { width: 112px; display: grid; justify-items: end; gap: 10px; margin: 0; padding: 0; color: var(--brand-steel); }
  #app-shell .school-form-card-footer em { color: var(--brand-teal); font-size: 8px; text-align: right; }
  #app-shell .school-form-card-footer > span { display: grid; width: 34px; height: 34px; place-items: center; color: #FFFFFF; border-radius: 11px; background: var(--brand-steel); }

  /* Special Features: light, compact tool library with optional instructions. */
  #app-shell .route-specialfeatures { background: var(--brand-cloud); }
  #app-shell .special-features-hero {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 18px;
    margin-bottom: 16px;
    padding: 19px 21px;
    color: var(--brand-ink);
    border: 1px solid var(--brand-border);
    border-radius: 20px;
    background: linear-gradient(120deg,#FFFFFF 0%,#F3FAFB 64%,#E4F2F5 100%);
    box-shadow: 0 10px 28px rgba(21,31,59,.065);
  }
  #app-shell .special-features-hero::after { display: none; }
  #app-shell .special-features-hero-icon { display: grid; width: 54px; height: 54px; place-items: center; color: #FFFFFF; border-radius: 17px; background: var(--brand-steel); }
  #app-shell .special-features-hero-icon svg { width: 25px; height: 25px; }
  #app-shell .special-features-hero-copy > span { margin: 0; color: var(--brand-teal); font-size: 9px; }
  #app-shell .special-features-hero h2 { margin: 4px 0 3px; color: var(--brand-navy); font-size: 21px; }
  #app-shell .special-features-hero p { color: var(--brand-muted); font-size: 12px; line-height: 1.5; }
  #app-shell .special-features-hero-count { min-width: 112px; padding: 10px 14px; border-color: rgba(81,106,145,.18); background: rgba(255,255,255,.64); }
  #app-shell .special-features-hero-count strong { color: var(--brand-navy); font-size: 30px; }
  #app-shell .special-features-hero-count span { color: var(--brand-muted); font-size: 8px; }
  #app-shell .special-guide-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  #app-shell .special-guide-card {
    min-height: 230px;
    padding: 18px;
    border-color: var(--brand-border);
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 7px 22px rgba(21,31,59,.05);
  }
  #app-shell .special-guide-card:hover { border-color: var(--brand-aqua); box-shadow: 0 13px 30px rgba(21,31,59,.09); }
  #app-shell .special-guide-card-top { align-items: flex-start; justify-content: flex-start; margin-bottom: 10px; }
  #app-shell .special-guide-number { flex: 0 0 42px; width: 42px; height: 42px; color: var(--brand-navy); border-radius: 13px; background: var(--brand-ice); box-shadow: none; }
  #app-shell .special-guide-title { min-width: 0; }
  #app-shell .special-guide-access { display: inline-flex; max-width: 100%; padding: 5px 8px; color: var(--brand-teal); border-color: rgba(47,129,123,.16); background: var(--brand-mint); text-align: left; }
  #app-shell .special-guide-card h2 { margin: 7px 0 0; color: var(--brand-navy); font-size: 17px; }
  #app-shell .special-guide-card > p { margin: 0 0 12px; color: var(--brand-muted); font-size: 11px; }
  #app-shell .special-guide-details { margin-bottom: 14px; border-top: 1px solid var(--brand-border); }
  #app-shell .special-guide-details summary { display: flex; justify-content: space-between; padding: 10px 2px; color: var(--brand-steel); font-size: 10px; font-weight: 850; cursor: pointer; list-style: none; }
  #app-shell .special-guide-details[open] summary span { transform: rotate(45deg); }
  #app-shell .special-guide-steps { padding: 13px; border-color: var(--brand-border); border-radius: 13px; background: var(--brand-cloud); }
  #app-shell .special-guide-steps > strong, #app-shell .special-guide-result span { color: var(--brand-teal); }
  #app-shell .special-guide-steps ol { color: var(--brand-ink); font-size: 10px; }
  #app-shell .special-guide-steps li::marker { color: var(--brand-steel); }
  #app-shell .special-guide-result { margin: 10px 0 0; padding-left: 11px; border-left-color: var(--brand-aqua); }
  #app-shell .special-guide-result p { color: var(--brand-muted); }
  #app-shell .special-guide-launch { margin-top: auto; }
  #app-shell .special-feature-safety { margin-top: 14px; padding: 15px 18px; color: var(--brand-ink); border: 1px solid rgba(47,129,123,.16); border-radius: 17px; background: var(--brand-mint); box-shadow: none; }
  #app-shell .special-feature-safety > div:first-child { width: 42px; height: 42px; color: var(--brand-teal); background: #FFFFFF; }
  #app-shell .special-feature-safety strong { color: var(--brand-teal); }
  #app-shell .special-feature-safety p { color: var(--brand-muted); }

  /* Remaining legacy gold/black surfaces, including Teacher Toolkit. */
  #app-shell .teacher-toolkit-hero { color: var(--brand-ink); border-color: var(--brand-border); background: linear-gradient(125deg,#FFFFFF,#E4F2F5); box-shadow: 0 12px 32px rgba(21,31,59,.08); }
  #app-shell .teacher-toolkit-hero::after { border-color: rgba(143,214,211,.24); box-shadow: 0 0 0 42px rgba(143,214,211,.05),0 0 0 84px rgba(81,106,145,.03); }
  #app-shell .teacher-toolkit-hero .eyebrow, #app-shell .teacher-toolkit-context > label { color: var(--brand-teal); }
  #app-shell .teacher-toolkit-hero-copy h2 { color: var(--brand-navy); }
  #app-shell .teacher-toolkit-hero-copy p { color: var(--brand-muted); }
  #app-shell .teacher-toolkit-context { border-color: rgba(81,106,145,.15); background: rgba(255,255,255,.7); }
  #app-shell .teacher-toolkit-metrics article { border-color: var(--brand-border); background: #FFFFFF; }
  #app-shell .teacher-toolkit-metrics strong { color: var(--brand-steel); }
  #app-shell .teacher-toolkit-metrics span { color: var(--brand-muted); }
  #app-shell .teacher-toolkit-tabs { border-color: var(--brand-border); background: var(--brand-ice); }
  #app-shell .teacher-toolkit-tabs button { color: var(--brand-muted); }
  #app-shell .teacher-toolkit-tabs button:hover { color: var(--brand-navy); background: rgba(255,255,255,.75); }
  #app-shell .teacher-toolkit-tabs button.active { color: var(--brand-navy); border-color: var(--brand-aqua); box-shadow: 0 7px 20px rgba(21,31,59,.08),inset 0 -3px var(--brand-aqua); }
  #app-shell .toolkit-card::before, #app-shell .toolkit-roadmap-card::before { background: var(--brand-aqua); }
  #app-shell .toolkit-card-icon { color: var(--brand-navy); background: var(--brand-ice); box-shadow: none; }
  #app-shell .toolkit-card-copy > span, #app-shell .toolkit-roadmap-card > div:nth-child(2) > span { color: var(--brand-teal); }
  #app-shell .teacher-toolkit-protection { color: var(--brand-ink); border-color: rgba(47,129,123,.18); background: var(--brand-mint); }
  #app-shell .teacher-toolkit-protection svg { color: var(--brand-teal); }
  #app-shell .gold-outline { color: var(--brand-steel); border-color: var(--brand-steel); background: #FFFFFF; }
  #app-shell .native-update-status.gold { border-color: rgba(81,106,145,.2); background: var(--brand-ice); }
  #app-shell .sf9-loading-line, #app-shell .sf9-preview-loading::after { background: linear-gradient(90deg,transparent,var(--brand-steel),var(--brand-aqua),transparent) !important; }
  #app-shell .tag.gold, #app-shell .badge.gold, #app-shell .update-version-chip { color: var(--brand-teal); background: var(--brand-mint); }
  #app-shell .tour-highlight { border-color: var(--brand-aqua); }
  #app-shell .tour-next { color: #FFFFFF; background: var(--brand-steel); }

  #app-shell .toolkit-rubric-center,
  #app-shell .toolkit-output-center {
    color: var(--brand-ink);
    border-color: var(--brand-border);
    background: linear-gradient(125deg,#FFFFFF,#E4F2F5);
    box-shadow: 0 11px 30px rgba(21,31,59,.07);
  }
  #app-shell .toolkit-rubric-center-copy > svg,
  #app-shell .toolkit-output-center-copy > svg,
  #app-shell .toolkit-rubric-center-copy span,
  #app-shell .toolkit-output-center-copy span { color: var(--brand-teal); }
  #app-shell .toolkit-rubric-center-copy h2,
  #app-shell .toolkit-output-center-copy h2 { color: var(--brand-navy); }
  #app-shell .toolkit-rubric-center-copy p,
  #app-shell .toolkit-output-center-copy p { color: var(--brand-muted); }
  #app-shell .toolkit-rubric-center-metrics article,
  #app-shell .toolkit-output-center-metrics article { color: var(--brand-ink); border-color: var(--brand-border); background: #FFFFFF; }
  #app-shell .toolkit-rubric-center-metrics strong,
  #app-shell .toolkit-output-center-metrics strong { color: var(--brand-steel); }
  #app-shell .toolkit-rubric-center-metrics span,
  #app-shell .toolkit-output-center-metrics span { color: var(--brand-muted); }

  .special-feature-presentation .toolkit-segmented,
  .toolkit-game-presentation .toolkit-game-format,
  .toolkit-activity-presentation .toolkit-activity-format,
  .toolkit-rubric-presentation .toolkit-rubric-format,
  .toolkit-activity-presentation .toolkit-jigsaw-stage-note { border-color: var(--brand-aqua); background: var(--brand-ice); }
  .special-feature-presentation .toolkit-segmented button.active { color: var(--brand-navy); box-shadow: 0 4px 12px rgba(21,31,59,.08),inset 0 -2px var(--brand-aqua); }
  .special-feature-presentation .toolkit-picker-result.has-result,
  .toolkit-game-presentation .toolkit-game-answer.is-revealed,
  .toolkit-activity-presentation .toolkit-activity-reveal.is-revealed,
  .toolkit-activity-presentation .toolkit-tps-stages article.active,
  .toolkit-activity-presentation .toolkit-jigsaw-stages article.active { color: var(--brand-navy); border-color: var(--brand-aqua); background: var(--brand-mint); box-shadow: 0 0 0 3px rgba(143,214,211,.13); }
  .special-feature-presentation .toolkit-picker-result span,
  .toolkit-game-presentation .toolkit-game-format span,
  .toolkit-activity-presentation .toolkit-activity-format span,
  .toolkit-rubric-presentation .toolkit-rubric-format span,
  .toolkit-activity-presentation .toolkit-jigsaw-stage-note span { color: var(--brand-teal); }
  .special-feature-presentation .toolkit-scoreboard article.is-leading { border-color: var(--brand-aqua); box-shadow: 0 0 0 3px rgba(143,214,211,.13); }
  .special-feature-presentation .toolkit-generated-groups article > span,
  .toolkit-activity-presentation .toolkit-rotation-grid article > div,
  .toolkit-activity-presentation .toolkit-jigsaw-grid article > header { color: var(--brand-navy); background: var(--brand-ice); }
  .toolkit-game-presentation .toolkit-spin-wheel { color: var(--brand-navy); border-color: var(--brand-steel); background: conic-gradient(#8FD6D3 0 25%,#E4F2F5 0 50%,#516A91 0 75%,#F5F8FA 0); }
  .toolkit-game-presentation .toolkit-match-board button:hover,
  .toolkit-game-presentation .toolkit-match-board button.selected { border-color: var(--brand-aqua); background: var(--brand-ice); box-shadow: 0 0 0 3px rgba(143,214,211,.13); }
  .toolkit-game-presentation .toolkit-bingo-board > div.called { color: var(--brand-navy); background: radial-gradient(circle,#E4F2F5,#8FD6D3); }
  .toolkit-activity-presentation .toolkit-activity-library-icon,
  .toolkit-rubric-presentation .toolkit-rubric-library-icon,
  .toolkit-output-presentation .toolkit-output-resource-icon,
  .toolkit-output-presentation .toolkit-history-icon { color: var(--brand-navy); background: var(--brand-ice); box-shadow: inset 0 0 0 1px rgba(81,106,145,.12); }
  .toolkit-output-presentation .toolkit-output-groups > section { border-color: var(--brand-border); background: #FFFFFF; box-shadow: 0 8px 22px rgba(21,31,59,.045); }
  .toolkit-output-presentation .toolkit-output-groups > section > header span,
  .toolkit-output-presentation .toolkit-output-resource > div:nth-child(2) > span { color: var(--brand-teal); }
  .toolkit-game-presentation .toolkit-puzzle-answer > span { border-bottom-color: var(--brand-aqua); color: var(--brand-navy); }

  @media (max-width: 1100px) {
    #app-shell .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #app-shell .dashboard-grid > .panel { grid-column: 1 / -1 !important; }
  }
  @media (max-width: 760px) {
    #app-shell .school-forms-grid, #app-shell .special-guide-grid { grid-template-columns: 1fr; }
    #app-shell .school-form-card { grid-template-columns: 46px minmax(0,1fr); }
    #app-shell .school-form-card-footer { grid-column: 2; width: 100%; display: flex; }
    #app-shell .school-forms-workspace, #app-shell .special-features-hero { grid-template-columns: auto minmax(0,1fr); }
    #app-shell .school-forms-workspace > strong, #app-shell .special-features-hero-count { display: none; }
  }
  @media (max-width: 520px) {
    #app-shell .metric-grid { grid-template-columns: 1fr; }
  }
}

/* Build 275 final visual audit: compact glass-to-content rhythm and palette-only
   SF9 editor controls. Official preview sheets and generated workbooks are not
   targeted by these screen-only selectors. */
@media screen {
  #app-shell .view {
    padding-top: 14px !important;
  }

  #app-shell .route-reports .sf9-grade-command-row,
  #app-shell .route-reports .sf9-attendance-reprint-controls,
  #app-shell .route-reports .sf9-live-remarks-row,
  #app-shell .route-reports .sf9-inline-help {
    border-color: rgba(81,106,145,.26) !important;
    background: rgba(245,248,250,.82) !important;
    box-shadow: none !important;
  }

  #app-shell .route-reports .sf9-controls,
  #app-shell .route-reports .sf9-grade-command-row > div,
  #app-shell .route-reports .sf9-grade-command-row .sf9-visibility-toggle,
  #app-shell .route-reports .sf9-grade-command-row .sf9-inline-toggle,
  #app-shell .route-reports .sf9-grade-command-row .sf9-report-data-toggle-group,
  #app-shell .route-reports .sf9-attendance-month-button,
  #app-shell .route-reports .sf9-attendance-print-selected {
    box-shadow: none !important;
  }

  #app-shell .route-reports .sf9-attendance-month-button {
    color: var(--brand-navy) !important;
    border-color: rgba(81,106,145,.42) !important;
    background: rgba(255,255,255,.9) !important;
  }

  #app-shell .route-reports .sf9-attendance-month-button:hover,
  #app-shell .route-reports .sf9-attendance-month-button:focus-visible,
  #app-shell .route-reports .sf9-attendance-month-button.active {
    color: var(--brand-navy) !important;
    border-color: var(--brand-steel) !important;
    outline-color: rgba(143,214,211,.28) !important;
    background: var(--brand-ice) !important;
    box-shadow: none !important;
  }

  #app-shell .route-reports .sf9-attendance-print-selected {
    color: #FFFFFF !important;
    border-color: var(--brand-steel) !important;
    background: var(--brand-steel) !important;
    box-shadow: none !important;
  }

  #app-shell .route-reports .sf9-attendance-print-selected:hover,
  #app-shell .route-reports .sf9-attendance-print-selected:focus-visible {
    border-color: var(--brand-navy) !important;
    background: var(--brand-navy) !important;
  }

  #app-shell .route-reports .sf9-exact-loading-message {
    color: var(--brand-navy) !important;
  }

  #app-shell .route-reports .sf9-exact-loading-line {
    background: var(--brand-navy) !important;
  }

  #app-shell .route-reports .sf9-exact-loading-line > span {
    background: linear-gradient(90deg,var(--brand-steel),var(--brand-aqua) 52%,var(--brand-ice)) !important;
    box-shadow: 0 0 10px rgba(143,214,211,.55) !important;
  }

  .notification-roll-down {
    position: fixed; top: var(--notification-panel-top, 82px); right: var(--notification-panel-right, 18px); z-index: 1800;
    width: min(430px, calc(100vw - 24px)); max-height: min(68vh, 610px); overflow: hidden;
    border: 1px solid rgba(217,228,232,.96); border-radius: 22px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(22px) saturate(145%);
    box-shadow: 0 24px 60px rgba(21,31,59,.22), inset 0 1px 0 rgba(255,255,255,.95);
    opacity: 0; visibility: hidden; transform: translateY(-18px) scaleY(.88); transform-origin: top right;
    transition: opacity .2s ease, transform .26s cubic-bezier(.2,.8,.2,1), visibility .2s;
  }
  .notification-roll-down.open{opacity:1;visibility:visible;transform:translateY(0) scaleY(1)}
  .notification-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 18px 15px;border-bottom:1px solid #D9E4E8;background:linear-gradient(135deg,rgba(228,242,245,.86),rgba(255,255,255,.9))}
  .notification-panel-head span{display:block;margin-bottom:3px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#2F817B}
  .notification-panel-head strong{display:block;font-size:19px;color:#11192A}.notification-panel-head button{width:36px;height:36px;padding:0;border-radius:12px;background:#fff;border:1px solid #D9E4E8;color:#516A91;font-size:22px;line-height:1}
  .notification-panel-list{display:grid;gap:10px;padding:12px;max-height:calc(min(68vh,610px) - 71px);overflow-y:auto}
  .notification-preview{display:grid;grid-template-columns:8px minmax(0,1fr);gap:11px;width:100%;padding:14px;text-align:left;border:1px solid #D9E4E8;border-radius:17px;background:#fff;color:#11192A;box-shadow:none;transition:border-color .18s ease,background .18s ease,transform .18s ease}
  .notification-preview:hover{transform:translateY(-1px);border-color:#8FD6D3;background:#F5F8FA}.notification-preview.unread{background:linear-gradient(135deg,#fff,#E4F2F5);border-color:rgba(143,214,211,.85)}
  .notification-preview-marker{width:7px;height:7px;margin-top:5px;border-radius:50%;background:#D9E4E8}.notification-preview.unread .notification-preview-marker{background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
  .notification-preview-copy{display:block;min-width:0}.notification-preview-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.notification-preview-row strong{font-size:14px;line-height:1.25;color:#11192A}.notification-preview-row small{flex:0 0 auto;font-size:9px;color:#636C77}
  .notification-preview-message{display:-webkit-box;margin-top:6px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11px;line-height:1.45;color:#636C77}.notification-preview-audience{display:block;margin-top:7px;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;color:#2F817B}
  .notification-panel-empty{padding:26px 18px;text-align:center;border:1px dashed #D9E4E8;border-radius:16px;background:#F5F8FA}.notification-panel-empty strong{font-size:14px;color:#11192A}.notification-panel-empty p{margin:7px 0 0;font-size:11px;line-height:1.45;color:#636C77}
  #app-shell .announcement-detail{display:grid;gap:18px;padding:4px 2px 10px}#app-shell .announcement-detail-meta{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:11px 13px;border-radius:14px;background:#E4F2F5;color:#516A91;font-size:10px;font-weight:800}#app-shell .announcement-detail-meta span{text-transform:uppercase;letter-spacing:.06em;color:#2F817B}#app-shell .announcement-detail-message{font-size:14px;line-height:1.7;color:#11192A;white-space:normal}
  @media(max-width:720px){.notification-roll-down{left:10px;right:10px!important;width:auto;max-height:72vh;border-radius:19px}.notification-panel-list{max-height:calc(72vh - 68px);padding:10px}.notification-panel-head{padding:15px}.notification-preview{padding:12px}.notification-preview-row{display:grid;gap:3px}.notification-preview-row small{font-size:9px}}
}


/* v1.0.78 FINAL DARK MODE — screen UI only.
   Contract:
   - no white/off-white/light-gray UI surfaces in dark mode;
   - text and icons use light colors for legibility;
   - exact document/paper previews and exported/printed output remain unmodified;
   - Workspace / Refresh / Check Updates retain the original v1.0.77 topbar appearance exactly. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --dm-page: #0E1728;
    --dm-surface: #18243A;
    --dm-raised: #1E2C42;
    --dm-control: #111D31;
    --dm-control-hover: #24364F;
    --dm-border: #3A4B64;
    --dm-text: #F3F7FC;
    --dm-muted: #B4C1CF;
    --dm-accent: #8FD6D3;
    --dm-blue: #516A91;

    --ink: var(--dm-text);
    --muted: var(--dm-muted);
    --line: var(--dm-border);
    --surface: var(--dm-surface);
    --page: var(--dm-page);
    --brand-cloud: var(--dm-page);
    --brand-white: var(--dm-surface);
    --brand-border: var(--dm-border);
    --brand-ink: var(--dm-text);
    --brand-muted: var(--dm-muted);
    --brand-ice: #22354D;
    --brand-mint: #183B3D;
  }

  :root[data-theme="dark"],
  :root[data-theme="dark"] body,
  :root[data-theme="dark"] #app-shell,
  :root[data-theme="dark"] #app-shell .main-shell,
  :root[data-theme="dark"] #app-shell .content,
  :root[data-theme="dark"] #app-shell .view {
    color: var(--dm-text) !important;
    background-color: var(--dm-page) !important;
  }

  /* Preserve topbar shell, then restore the three requested top action holders exactly. */
  :root[data-theme="dark"] #app-shell .topbar {
    border-color: rgba(143,214,211,.20) !important;
    background: linear-gradient(135deg,rgba(21,31,59,.90),rgba(24,36,58,.78)) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  :root[data-theme="dark"] #app-shell .key-stage-button {
    min-height: 40px !important;
    padding: 8px 13px !important;
    color: var(--brand-navy) !important;
    border-color: rgba(81,106,145,.15) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.58) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86) !important;
  }
  :root[data-theme="dark"] #app-shell .key-stage-button::before {
    background: var(--brand-aqua) !important;
    box-shadow: 0 0 0 4px rgba(143,214,211,.18) !important;
  }
  :root[data-theme="dark"] #app-shell .top-actions .top-action-button {
    color: var(--brand-navy) !important;
    border-color: rgba(81,106,145,.14) !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: 0 6px 17px rgba(21,31,59,.06), inset 0 1px 0 rgba(255,255,255,.90) !important;
  }
  :root[data-theme="dark"] #app-shell .top-actions .top-action-button:hover {
    color: var(--brand-navy) !important;
    border-color: rgba(143,214,211,.70) !important;
    background: rgba(255,255,255,.94) !important;
  }
  :root[data-theme="dark"] #app-shell .top-actions .top-action-button svg,
  :root[data-theme="dark"] #app-shell .top-actions .top-action-button span:not(.update-dot),
  :root[data-theme="dark"] #app-shell .key-stage-button {
    color: var(--brand-navy) !important;
  }

  /* Global text/readability inside application workspaces. */
  :root[data-theme="dark"] #app-shell .view :is(h1,h2,h3,h4,h5,h6,strong,b,label,legend),
  :root[data-theme="dark"] #app-shell .modal-panel :is(h1,h2,h3,h4,h5,h6,strong,b,label,legend) {
    color: var(--dm-text) !important;
  }
  :root[data-theme="dark"] #app-shell .view :is(p,small,.form-help,.settings-card-copy),
  :root[data-theme="dark"] #app-shell .modal-panel :is(p,small,.form-help) {
    color: var(--dm-muted) !important;
  }

  /* Core UI cards, sections and holders. */
  :root[data-theme="dark"] #app-shell .view :is(
    .metric-card,.panel,.class-card,.roster-card,.report-card,.settings-card,.form-card,
    .form-section,.empty-state,.settings-callout,.automation-note,.roster-auto-preview,
    .student-directory-summary article,.student-sex-panel,.student-directory-empty,
    .curriculum-profile-card,.licensed-product-card,.key-stage-license-card,
    .teacher-quest-panel,.quest-progress,.quest-badges span,
    .record-identity div,.analysis-scroll,.table-shell,.gradebook-wrap,.smart-sis-table-wrap,
    .mapeh-controls,.mapeh-link-strip,.mapeh-progress,.mapeh-formula-card,.mapeh-record-stat,
    .compliance-note,.compliance-blocker,.custom-weight-warning,.jhs-grade-source-panel,
    .settings-data-summary div,.backup-health,.settings-privacy-note,
    .school-logo-uploader,.signatory-editor,.linked-signatory-value,
    .compliance-summary > div,.compliance-status-grid > div,
    .school-forms-workspace,.school-form-card,.coming-soon-card,
    .special-guide-card,.special-guide-steps,.special-guide-access,.special-feature-safety,
    .teacher-toolkit-hero,.teacher-toolkit-context,.teacher-toolkit-tabs,
    .toolkit-card,.toolkit-roadmap-card,.teacher-toolkit-protection,
    .toolkit-rubric-center,.toolkit-output-center,
    .toolkit-rubric-center-metrics article,.toolkit-output-center-metrics article,
    .summary-tabs,.subject-order-item,.original-format-note,.import-summary,
    .student-name-format-toggle,.sf9-remarks-language-toggle,.sf9-inline-help,
    .sf9-live-data-editor > summary,.sf9-exact-preview-status,
    .native-update-notes,.cloud-account-intro,.cloud-conflict-grid article
  ) {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-surface) !important;
    box-shadow: none !important;
  }

  /* Slightly raised nested UI surfaces. */
  :root[data-theme="dark"] #app-shell .view :is(
    .student-sex-panel-header,.school-form-card-icon,.settings-card-icon,
    .student-directory-section-icon,.toolkit-card-icon,.toolkit-roadmap-card .toolkit-card-icon,
    .mapeh-view-tabs,.teacher-toolkit-metrics article,
    .special-popup-metrics article,.special-popup-records article,.special-popup-insights article,
    .special-popup-form,.special-popup-role-grid article,.special-popup-users article,.special-popup-report,
    .special-feature-modal .confirmation-panel,.toolkit-picker-result,.toolkit-generated-groups article,
    .toolkit-scoreboard article,.toolkit-inline-notice,.toolkit-recent li,
    .toolkit-group-controls .toolkit-check,.toolkit-game-format,.toolkit-game-answer,
    .toolkit-game-awards,.toolkit-game-complete,.toolkit-quiz-card,.toolkit-challenge-prompt,.toolkit-spin-result,
    .toolkit-puzzle-stage,.toolkit-puzzle-answer,.toolkit-puzzle-hint,.toolkit-truefalse-stage,
    .toolkit-truefalse-choices article,.toolkit-jigsaw-stages article,.toolkit-jigsaw-stage-note,
    .toolkit-jigsaw-grid article,.toolkit-jigsaw-synthesis article,
    .toolkit-rubric-library > article,.toolkit-feedback-library > article,
    .toolkit-rubric-create-grid > button,.toolkit-rubric-format,.toolkit-feedback-context > div,
    .toolkit-rubric-rating-grid article,.toolkit-feedback-result,.toolkit-feedback-criteria article,
    .toolkit-feedback-detail > section,.toolkit-feedback-message section,
    .toolkit-output-groups > section,.toolkit-output-resource,.toolkit-output-empty,.toolkit-history-list > article
  ) {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-raised) !important;
    box-shadow: none !important;
  }

  /* Hero surfaces that were previously white/light gradients. */
  :root[data-theme="dark"] #app-shell .school-forms-workspace,
  :root[data-theme="dark"] #app-shell .teacher-toolkit-hero,
  :root[data-theme="dark"] #app-shell .special-features-hero,
  :root[data-theme="dark"] #app-shell .toolkit-rubric-center,
  :root[data-theme="dark"] #app-shell .toolkit-output-center {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: radial-gradient(circle at 88% 5%,rgba(143,214,211,.10),transparent 31%),linear-gradient(135deg,#111B2C,#17263A) !important;
  }

  /* Form controls: never white in dark mode. */
  :root[data-theme="dark"] #app-shell .view :is(input,select,textarea),
  :root[data-theme="dark"] #app-shell .modal-panel :is(input,select,textarea),
  :root[data-theme="dark"] .special-feature-presentation :is(input,select,textarea) {
    color: var(--dm-text) !important;
    border-color: #435570 !important;
    background: var(--dm-control) !important;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] #app-shell :is(input,textarea)::placeholder { color: #8392A6 !important; }
  :root[data-theme="dark"] #app-shell select option { color: var(--dm-text); background: var(--dm-control); }
  :root[data-theme="dark"] #app-shell input[readonly] { color: var(--dm-muted) !important; background: #142033 !important; }

  /* Content buttons/tabs: dark shapes, light labels/icons. Topbar is excluded because it is outside .view. */
  :root[data-theme="dark"] #app-shell .view :is(
    .button.secondary,.button.gold-outline,.button.danger,.icon-button,.school-forms-back.icon-button,
    .sheet-wide-toggle,.subject-order-actions button,.sf9-visibility-toggle,.sf9-attendance-month-button,
    .summary-tabs button,.mapeh-view-tabs button,.teacher-toolkit-tabs button,
    .toolkit-segmented button,.toolkit-score-controls button,.toolkit-icon-action,
    .toolkit-game-awards button,.toolkit-match-board button,.tour-skip,.tour-prev,
    .student-name-format-toggle,.sf9-remarks-language-toggle
  ),
  :root[data-theme="dark"] .special-feature-presentation :is(
    .button.secondary,.icon-button,.toolkit-segmented button,.toolkit-score-controls button,
    .toolkit-icon-action,.toolkit-game-awards button,.toolkit-match-board button
  ) {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-control) !important;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] #app-shell .view .button.primary {
    color: #FFFFFF !important;
    border-color: #627DA8 !important;
    background: #516A91 !important;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] #app-shell .view :is(.button,.icon-button,button):hover,
  :root[data-theme="dark"] .special-feature-presentation :is(.button,.icon-button,button):hover {
    border-color: #6F89A6 !important;
  }
  :root[data-theme="dark"] #app-shell .view :is(
    .summary-tabs button.active,.mapeh-view-tabs button.active,.teacher-toolkit-tabs button.active,
    .toolkit-segmented button.active,.sf9-visibility-toggle.active,.sf9-attendance-month-button.active
  ),
  :root[data-theme="dark"] .special-feature-presentation :is(.toolkit-segmented button.active) {
    color: var(--dm-text) !important;
    background: var(--dm-raised) !important;
    border-color: #6F89A6 !important;
    box-shadow: inset 0 -2px var(--dm-accent) !important;
  }

  /* Tables/spreadsheet workspaces. */
  :root[data-theme="dark"] #app-shell .view :is(table,th,td) {
    color: #EAF1F8;
    border-color: var(--dm-border) !important;
  }
  :root[data-theme="dark"] #app-shell .view :is(
    .gradebook th,.smart-sis-table th,.analysis-table th,.mapeh-summary-table th,.mapeh-gradebook th,
    .sf2-workspace-table thead th
  ) { background: #22354D !important; color: var(--dm-text) !important; }
  :root[data-theme="dark"] #app-shell .view :is(
    .gradebook td,.smart-sis-table td,.analysis-table td,.mapeh-summary-table td,.mapeh-gradebook td,
    .sf2-workspace-table td
  ) { background: #111D31 !important; color: var(--dm-text) !important; }
  :root[data-theme="dark"] #app-shell .view :is(
    .gradebook .sticky-col,.smart-sis-table .sis-sticky-col,.analysis-table .sticky-col,
    .mapeh-sticky-col,.sf2-workspace-table .sf2-app-sticky
  ) { background: #18243A !important; color: var(--dm-text) !important; }
  :root[data-theme="dark"] #app-shell .view :is(
    .gradebook .gradebook-gender-row td,.gradebook .gradebook-gender-row .sticky-col,
    .smart-sis-table .sis-group-row td,.smart-sis-table .sis-group-row .sis-sticky-col,
    .sf2-app-section-row td,.sf2-app-section-row .sf2-app-sticky,
    .sf2-app-combined-row td,.sf2-app-combined-row .sf2-app-sticky
  ) { background: #1D2D43 !important; }
  :root[data-theme="dark"] #app-shell .view :is(
    .gradebook td.result,.gradebook .total-result,.gradebook .hps-row th,.gradebook .subweight,
    .smart-sis-table .sis-manual-grade-cell,.mapeh-average-cell,.mapeh-final-cell,
    .sis-source-badge.manual,.sis-source-badge.computed,.sis-grade-source.manual,.sis-grade-source.computed
  ) { background: #1B2A40 !important; color: var(--dm-text) !important; }
  :root[data-theme="dark"] #app-shell .view :is(
    .gradebook tbody tr:hover td,.smart-sis-table tbody tr:hover td,.analysis-table tbody tr:hover td,
    .mapeh-summary-table tbody tr:hover td,.sf2-workspace-table tbody tr:hover td
  ) { background: #1E3047 !important; }

  /* Students, MAPEH, Grade Sheet, School Forms. */
  :root[data-theme="dark"] #app-shell .student-directory-summary article,
  :root[data-theme="dark"] #app-shell .student-sex-panel,
  :root[data-theme="dark"] #app-shell .student-sex-panel-header,
  :root[data-theme="dark"] #app-shell .student-directory-empty,
  :root[data-theme="dark"] #app-shell .mapeh-connection,
  :root[data-theme="dark"] #app-shell .mapeh-progress,
  :root[data-theme="dark"] #app-shell .mapeh-record-stat,
  :root[data-theme="dark"] #app-shell .mapeh-view-tabs,
  :root[data-theme="dark"] #app-shell .subject-order-item,
  :root[data-theme="dark"] #app-shell .school-form-card,
  :root[data-theme="dark"] #app-shell .school-form-card.coming-soon {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-surface) !important;
  }

  /* Special Features and Teacher Toolkit modal/detail surfaces. */
  :root[data-theme="dark"] .special-feature-presentation .modal-panel,
  :root[data-theme="dark"] #app-shell .modal-panel {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-surface) !important;
  }
  :root[data-theme="dark"] .special-feature-presentation .modal-panel > header,
  :root[data-theme="dark"] #app-shell .modal-panel > header {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: #111D31 !important;
  }
  :root[data-theme="dark"] .special-feature-presentation :is(
    .special-popup-metrics article,.special-popup-records article,.special-popup-insights article,
    .special-popup-form,.special-popup-role-grid article,.special-popup-users article,.special-popup-report,
    .confirmation-panel,.toolkit-scoreboard article,.toolkit-generated-groups article,
    .toolkit-quiz-card,.toolkit-challenge-prompt,.toolkit-spin-result,.toolkit-game-awards,.toolkit-game-complete,
    .toolkit-picker-result,.toolkit-inline-notice,.toolkit-recent li,.toolkit-group-controls .toolkit-check,
    .toolkit-puzzle-stage,.toolkit-puzzle-answer,.toolkit-puzzle-hint,.toolkit-truefalse-stage,
    .toolkit-truefalse-choices article,.toolkit-jigsaw-stages article,.toolkit-jigsaw-grid article,
    .toolkit-jigsaw-synthesis article,.toolkit-rubric-library > article,.toolkit-feedback-library > article,
    .toolkit-rubric-create-grid > button,.toolkit-rubric-format,.toolkit-feedback-context > div,
    .toolkit-rubric-rating-grid article,.toolkit-feedback-result,.toolkit-feedback-criteria article,
    .toolkit-feedback-detail > section,.toolkit-feedback-message section,
    .toolkit-output-groups > section,.toolkit-output-resource,.toolkit-output-empty,.toolkit-history-list > article
  ) {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-raised) !important;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] .special-feature-presentation :is(
    .special-popup-empty,.toolkit-empty-state,.toolkit-game-answer,.toolkit-game-format
  ) { color: var(--dm-muted) !important; border-color: var(--dm-border) !important; background: var(--dm-control) !important; }

  /* Notifications are UI, so they also follow dark mode. */
  :root[data-theme="dark"] .notification-roll-down {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: rgba(17,29,49,.97) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.42) !important;
  }
  :root[data-theme="dark"] :is(.notification-panel-head,.notification-preview,.notification-panel-empty) {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-surface) !important;
  }
  :root[data-theme="dark"] .notification-preview.unread { background: #183B3D !important; }
  :root[data-theme="dark"] .notification-panel-head button {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-control) !important;
  }
  :root[data-theme="dark"] #app-shell .announcement-detail-meta { color: var(--dm-text) !important; background: #22354D !important; }
  :root[data-theme="dark"] #app-shell .announcement-detail-message { color: var(--dm-text) !important; }

  /* Dark-mode setting itself. */
  :root[data-theme="dark"] .theme-mode-toggle {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-control) !important;
  }
  :root[data-theme="dark"] .theme-mode-toggle strong { color: var(--dm-text) !important; }
  :root[data-theme="dark"] .theme-mode-toggle small { color: var(--dm-muted) !important; }
  :root[data-theme="dark"] .theme-mode-icon { color: var(--dm-text) !important; background: #22354D !important; }

  /* Exact on-screen document papers stay paper-accurate; only their surrounding controls are dark.
     This protects SF9/SF2/Grade Slip output fidelity and print/download behavior. */
  :root[data-theme="dark"] #app-shell .route-reports :is(.sf9-attendance-month-button,.sf9-live-data-editor > summary,.sf9-inline-help) {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-control) !important;
  }
}

/* v1.2.76 / Build 389 — fixed sidebar information architecture only.
   Advisory and non-advisory records still use the existing route handlers,
   state objects, grade engines, and persistence layer. */
@media screen {
  #app-shell .side-nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(2px,.45vh,5px);
  }
  #app-shell .sidebar-nav-group {
    display: grid;
    gap: clamp(2px,.35vh,4px);
    min-height: 0;
  }
  #app-shell .sidebar-nav-group-header {
    appearance: none;
    width: 100%;
    min-height: 24px;
    border: 0;
    border-radius: 9px;
    padding: 4px 8px 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.035);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }
  #app-shell .sidebar-nav-group-items {
    display: grid;
    gap: clamp(1px,.25vh,3px);
    min-height: 0;
  }
  #app-shell .nav-child-item {
    min-height: 29px;
    padding-left: 14px;
    background: rgba(255,255,255,.018);
  }
  #app-shell .nav-child-item::before {
    content: "";
    width: 3px;
    height: 3px;
    flex: 0 0 3px;
    border-radius: 999px;
    background: rgba(143,214,211,.55);
  }
  #app-shell .nav-child-item.active::before { background: var(--brand-aqua); box-shadow: 0 0 0 3px rgba(143,214,211,.12); }
  #app-shell .other-forms-placeholder {
    min-height: 320px;
    border-style: dashed;
    background: rgba(255,255,255,.35);
  }
}

@media screen and (min-width: 901px) {
  #app-shell .side-nav .nav-item { flex: 0 1 auto; height: auto; min-height: clamp(27px,4.2vh,39px); }
  #app-shell .sidebar-nav-group-items .nav-item { min-height: clamp(25px,3.65vh,34px); }
  #app-shell.sidebar-collapsed .sidebar-nav-group { display: contents; }
  #app-shell.sidebar-collapsed .sidebar-nav-group-header { display: none; }
  #app-shell.sidebar-collapsed .sidebar-nav-group-items { display: contents !important; }
  #app-shell.sidebar-collapsed .nav-child-item { padding-left: 10px; }
  #app-shell.sidebar-collapsed .nav-child-item::before { display: none; }
}

@media screen and (min-width: 901px) and (max-height: 700px) {
  #app-shell .sidebar-nav-group-header { min-height: 18px; padding-block: 2px; font-size: 7.5px; }
  #app-shell .side-nav .nav-item { min-height: 24px; padding-block: 3px; font-size: 10px; }
  #app-shell .sidebar-nav-group-items .nav-item { min-height: 22px; }
  #app-shell .sidebar-nav-group { gap: 1px; }
  #app-shell .sidebar-nav-group-items { gap: 1px; }
}

@media screen and (max-width: 900px) {
  #app-shell .side-nav { overflow-y: auto !important; justify-content: flex-start; padding-right: 3px; }
  #app-shell .sidebar-nav-group-header { min-height: 28px; }
  #app-shell .nav-child-item { min-height: 36px; }
}

/* v1.2.76 / Build 389 — fixed advisory/subject sections and slightly larger sidebar type. */
@media screen {
  #app-shell .side-nav .nav-item { font-size: 12px; }
  #app-shell .sidebar-nav-group-header { font-size: 10px; cursor: default; user-select: none; }
}
@media screen and (min-width: 901px) and (max-height: 700px) {
  #app-shell .side-nav .nav-item { font-size: 11px; }
  #app-shell .sidebar-nav-group-header { font-size: 9px; }
}

/* v1.2.85 / Build 398 — sidebar category contrast and flat nested items.
   Navigation grouping only; route behavior and records are unchanged. */
@media screen {
  #app-shell .sidebar-nav-group-header {
    color: #FFFFFF;
    background: transparent;
  }
  #app-shell .sidebar-nav-group-items .nav-child-item,
  #app-shell .sidebar-nav-group-items .nav-child-item:hover,
  #app-shell .sidebar-nav-group-items .nav-child-item.active {
    background: transparent;
  }
}


/* v1.2.85 / Build 398 — sidebar readability only.
   Increase category headings and every sidebar menu label without changing
   navigation hierarchy, spacing logic, routes, or collapsed-sidebar behavior. */
@media screen {
  #app-shell .side-nav .nav-item { font-size: 13px; }
  #app-shell .sidebar-nav-group-header { font-size: 11px; }
}
@media screen and (min-width: 901px) and (max-height: 700px) {
  #app-shell .side-nav .nav-item { font-size: 12px; }
  #app-shell .sidebar-nav-group-header { font-size: 10px; }
}

/* v1.3.3 / Build 419 — selected sidebar menu palette refinement only.
   Active menu entries use AcadMates' existing soft system white for balanced contrast. */
@media screen {
  #app-shell .side-nav .nav-item.active,
  #app-shell .sidebar-nav-group-items .nav-child-item.active {
    color: #111111;
    border-color: var(--brand-cloud);
    border-radius: 10px;
    background: var(--brand-cloud);
    box-shadow: none;
  }
  #app-shell.sidebar-collapsed .nav-item.active { box-shadow: none; }
  #app-shell .nav-child-item.active::before {
    background: #111111;
    box-shadow: none;
  }
}

/* v1.3.4 / Build 420 — E-Class Record import action alignment only.
   Keep Upload / Print / Download actions on one horizontal row; narrow windows may scroll it. */
@media screen {
  .route-gradebook .page-heading:has(.jhs-eclass-actions) .jhs-eclass-actions {
    grid-template-columns: repeat(5, minmax(135px, 1fr)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .route-gradebook .page-heading:has(.jhs-eclass-actions) .jhs-eclass-actions .button {
    white-space: nowrap !important;
  }
}

/* v1.3.5 / Build 421 — phone E-Class scan workflow + dark-mode navigation parity. */
@media screen {
  .mobile-eclass-scan-panel { display:grid; gap:16px; }
  .mobile-eclass-scan-pair { display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; align-items:center; }
  .mobile-eclass-scan-qr-wrap { display:grid; place-items:center; min-height:210px; padding:12px; border:1px solid var(--brand-border); border-radius:20px; background:var(--brand-white); }
  .mobile-eclass-scan-qr { width:196px; height:196px; max-width:100%; object-fit:contain; border-radius:10px; background:#fff; }
  .mobile-eclass-scan-copy { display:grid; gap:7px; }
  .mobile-eclass-scan-copy > span { font-size:10px; font-weight:900; letter-spacing:.09em; color:var(--brand-blue); }
  .mobile-eclass-scan-copy > strong { font-size:18px; color:var(--brand-ink); }
  .mobile-eclass-scan-copy p { margin:0; color:var(--brand-muted); line-height:1.55; }
  .mobile-eclass-scan-link { display:flex; align-items:center; gap:8px; margin-top:6px; }
  .mobile-eclass-scan-link code { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:10px 12px; border:1px solid var(--brand-border); border-radius:12px; background:var(--brand-cloud); color:var(--brand-ink); }
  .mobile-eclass-scan-context { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
  .mobile-eclass-scan-context article { padding:12px 14px; border:1px solid var(--brand-border); border-radius:14px; background:var(--brand-cloud); }
  .mobile-eclass-scan-context span { display:block; font-size:10px; color:var(--brand-muted); text-transform:uppercase; letter-spacing:.06em; }
  .mobile-eclass-scan-context strong { display:block; margin-top:5px; color:var(--brand-ink); }
  .mobile-eclass-scan-status { padding:13px 14px; border-radius:14px; border:1px solid rgba(143,214,211,.65); background:var(--brand-mint); color:var(--brand-ink); font-weight:800; }
  .mobile-eclass-scan-status[data-tone="error"] { border-color:#FCA5A5; background:#FEF2F2; color:#991B1B; }
  .mobile-eclass-scan-transport-warning { margin-top:4px; padding:10px 12px; border:1px solid #F59E0B; border-radius:12px; background:#FFFBEB; color:#92400E; font-size:12px; line-height:1.45; }
  .mobile-scan-review-list { display:grid; gap:7px; max-height:260px; overflow:auto; margin-top:12px; }
  .mobile-scan-review-list > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; padding:10px 12px; border:1px solid var(--brand-border); border-radius:12px; background:var(--brand-cloud); }
  .mobile-scan-review-list span { font-weight:800; color:var(--brand-ink); }
  .mobile-scan-review-list strong { color:var(--brand-blue); }
  .mobile-scan-review-list small { grid-column:1 / -1; color:var(--brand-muted); }
  @media(max-width:700px){.mobile-eclass-scan-pair{grid-template-columns:1fr}.mobile-eclass-scan-context{grid-template-columns:1fr}.mobile-eclass-scan-link{align-items:stretch;flex-direction:column}}

  :root[data-theme="dark"] #app-shell .side-nav .nav-item.active,
  :root[data-theme="dark"] #app-shell .sidebar-nav-group-items .nav-child-item.active {
    color:#11192A !important;
    border-color:#E7EDF4 !important;
    background:#E7EDF4 !important;
    box-shadow:none !important;
  }
  :root[data-theme="dark"] #app-shell .side-nav .nav-item.active :is(span,svg),
  :root[data-theme="dark"] #app-shell .sidebar-nav-group-items .nav-child-item.active :is(span,svg) { color:#11192A !important; }
  :root[data-theme="dark"] #app-shell .nav-child-item.active::before { background:#11192A !important; box-shadow:none !important; }
  :root[data-theme="dark"] .mobile-eclass-scan-qr-wrap,
  :root[data-theme="dark"] .mobile-eclass-scan-context article,
  :root[data-theme="dark"] .mobile-eclass-scan-link code,
  :root[data-theme="dark"] .mobile-scan-review-list > div { color:var(--dm-text) !important; border-color:var(--dm-border) !important; background:var(--dm-control) !important; }
  :root[data-theme="dark"] .mobile-eclass-scan-copy > strong,
  :root[data-theme="dark"] .mobile-eclass-scan-context strong,
  :root[data-theme="dark"] .mobile-scan-review-list span { color:var(--dm-text) !important; }
  :root[data-theme="dark"] .mobile-eclass-scan-copy p,
  :root[data-theme="dark"] .mobile-eclass-scan-context span,
  :root[data-theme="dark"] .mobile-scan-review-list small { color:var(--dm-muted) !important; }
  :root[data-theme="dark"] .mobile-eclass-scan-status { color:var(--dm-text) !important; border-color:#315B5C !important; background:#183B3D !important; }
  :root[data-theme="dark"] .mobile-eclass-scan-transport-warning { color:#FDE68A !important; border-color:#8A5A16 !important; background:#3B2A12 !important; }
}

@media screen and (min-width:900px) {
  .route-smartsis .sshs-grade-sheet-toolbar,
  #app-shell.sidebar-collapsed .route-smartsis .sshs-grade-sheet-toolbar,
  #app-shell:not(.sidebar-collapsed) .route-smartsis .sshs-grade-sheet-toolbar {
    grid-template-columns:
      minmax(0,1.55fr)
      minmax(0,.66fr)
      minmax(0,.82fr)
      minmax(0,1.02fr)
      minmax(0,1.15fr)
      minmax(0,1.18fr)
      minmax(0,1.18fr) !important;
  }
}
@media screen {
  .route-smartsis .g2to10-grade-sheet-toolbar { flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important; }
}