/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/montserrat-01.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/montserrat-02.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/montserrat-03.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/montserrat-04.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/montserrat-05.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ocean-blue palette with approved Montserrat typography and slightly brighter colors. */
:root {
        /* ─── Ocean Blue Shade Ramp (Coolors 0087AD) ─── */
        --ocean-50: 193 100% 95%;
        /* #E5F9FF */
        --ocean-100: 193 100% 90%;
        /* #CCF4FF */
        --ocean-200: 193 100% 80%;
        /* #99E9FF */
        --ocean-300: 193 100% 70%;
        /* #66DEFF */
        --ocean-400: 193 100% 60%;
        /* #33D3FF */
        --ocean-500: 193 100% 50%;
        /* #00C8FF */
        --ocean-600: 193 100% 40%;
        /* #00A0CC */
        --ocean-700: 193 100% 30%;
        /* #007899 */
        --ocean-800: 193 100% 20%;
        /* #005066 */
        --ocean-900: 193 100% 10%;
        /* #002833 */
        --ocean-950: 193 100% 7%;
        /* #001C24 */

        /* ─── LIGHT MODE — zero pure white ─── */
        --background: 193 60% 93%;
        --foreground: 193 80% 10%;
        --primary: 193 100% 40%;
        --primary-foreground: 0 0% 100%;
        --accent: 45 100% 50%;
        --accent-foreground: 0 0% 10%;
        --secondary: 193 80% 90%;
        --secondary-foreground: 193 100% 20%;
        --muted: 193 40% 90%;
        --muted-foreground: 193 30% 35%;
        --card: 193 30% 97%;
        --card-foreground: 193 80% 10%;
        --popover: 193 30% 97%;
        --popover-foreground: 193 80% 10%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 100%;
        --border: 193 40% 80%;
        --input: 193 50% 88%;
        --ring: 193 100% 40%;
        --sidebar-background: 193 100% 30%;
        --sidebar-foreground: 0 0% 100%;
        --sidebar-primary: 193 100% 30%;
        --sidebar-primary-foreground: 0 0% 100%;
        --sidebar-accent: 45 100% 50%;
        --sidebar-accent-foreground: 0 0% 10%;
        --sidebar-active: 45 100% 50%;
        --sidebar-border: 0 0% 100% / 0.1;
        --sidebar-ring: 45 100% 50%;
        --page-background: linear-gradient(135deg, #005066 0%, #007899 20%, #66DEFF 60%, #CCF4FF 100%);
        --radius: 0.5rem;
        color-scheme: light;
    }

    html.dark,
    [data-theme='dark'] {
        --background: 193 50% 8%;
        --foreground: 0 0% 95%;
        --primary: 193 100% 50%;
        --primary-foreground: 0 0% 10%;
        --accent: 45 95% 55%;
        --accent-foreground: 0 0% 10%;
        --secondary: 193 60% 18%;
        --secondary-foreground: 193 80% 70%;
        --muted: 193 40% 15%;
        --muted-foreground: 210 20% 65%;
        --card: 193 40% 11%;
        --card-foreground: 0 0% 95%;
        --popover: 193 40% 11%;
        --popover-foreground: 0 0% 95%;
        --destructive: 0 70% 50%;
        --destructive-foreground: 0 0% 100%;
        --border: 193 30% 20%;
        --input: 193 30% 20%;
        --ring: 193 100% 50%;
        --sidebar-background: 193 40% 13%;
        --sidebar-foreground: 0 0% 95%;
        --sidebar-primary: 193 100% 50%;
        --sidebar-primary-foreground: 0 0% 100%;
        --sidebar-accent: 45 95% 55%;
        --sidebar-accent-foreground: 0 0% 10%;
        --sidebar-active: 45 95% 55%;
        --sidebar-border: 0 0% 100% / 0.1;
        --sidebar-ring: 45 95% 55%;
        --page-background: linear-gradient(180deg, hsl(193 45% 9%) 0%, hsl(193 40% 7%) 100%);
        color-scheme: dark;
    }

    @media (prefers-color-scheme: dark) {
        html:not(.light) {
            --background: 193 50% 8%;
            --foreground: 0 0% 95%;
            --primary: 193 100% 50%;
            --primary-foreground: 0 0% 10%;
            --accent: 45 95% 55%;
            --accent-foreground: 0 0% 10%;
            --secondary: 193 60% 18%;
            --secondary-foreground: 193 80% 70%;
            --muted: 193 40% 15%;
            --muted-foreground: 210 20% 65%;
            --card: 193 40% 11%;
            --card-foreground: 0 0% 95%;
            --popover: 193 40% 11%;
            --popover-foreground: 0 0% 95%;
            --destructive: 0 70% 50%;
            --destructive-foreground: 0 0% 100%;
            --border: 193 30% 20%;
            --input: 193 30% 20%;
            --ring: 193 100% 50%;
            --sidebar-background: 193 40% 13%;
            --sidebar-foreground: 0 0% 95%;
            --sidebar-primary: 193 100% 50%;
            --sidebar-primary-foreground: 0 0% 100%;
            --sidebar-accent: 45 95% 55%;
            --sidebar-accent-foreground: 0 0% 10%;
            --sidebar-active: 45 95% 55%;
            --sidebar-border: 0 0% 100% / 0.1;
            --sidebar-ring: 45 95% 55%;
            --page-background: linear-gradient(180deg, hsl(193 45% 9%) 0%, hsl(193 40% 7%) 100%);
            color-scheme: dark;
        }
    }

/* Presentation adapters only. Form structure, behavior and saved answers are unchanged. */
:root {
  --ink: hsl(var(--foreground));
  --teal: hsl(var(--primary));
  --line: hsl(var(--border));
  --bg: hsl(var(--background));
  --paper: hsl(var(--card));
  --gold: hsl(var(--accent));
  --theme-muted-text: hsl(var(--muted-foreground));
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}
body {
  color: hsl(var(--foreground));
  background: var(--page-background);
  background-attachment: fixed;
  min-height: 100vh;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}
h1, .classcard h2, .brandmark, .avaIcon, pre, code, kbd, samp {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}
h1, .classcard h2 { font-weight: 600; letter-spacing: -.025em; }
.brandmark { font-weight: 700; }
button { background: hsl(var(--card)); border-color: hsl(var(--border)); color: hsl(var(--foreground)); font-weight: 500; }
button:hover { background: hsl(var(--secondary)); border-color: hsl(var(--primary)); }
.primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.primary:hover { background: hsl(var(--primary) / .88); color: hsl(var(--primary-foreground)); }
.quiet { background: transparent; border-color: transparent; }
.environment, .helperheading, .brandmark, .sectionheading .number {
  background: hsl(var(--sidebar-background)); color: hsl(var(--sidebar-foreground));
}
.environment span, .helperheading span { color: hsl(var(--sidebar-foreground) / .8); }
.helperheading button { color: hsl(var(--sidebar-foreground)); }
.helperheading button:hover { background: hsl(var(--sidebar-foreground) / .12); }
.brandmark { border-bottom: 3px solid hsl(var(--accent)); }
.topbar, .applicationToolbar, .login form, .classcard, .paper, .helper, .empty,
.detailcard, .notecard, .pdfPanel, table, .field {
  background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-color: hsl(var(--border));
}
.brand, .documentbadge { color: hsl(var(--foreground)); }
.eyebrow, .cardcode, .attachment a { color: hsl(var(--primary)); }
.pageheading h1, .pageheading p, .pageheading .smallnote, .pageheading .eyebrow,
.page > h1, .page > .eyebrow { color: hsl(var(--sidebar-foreground)); }
p, .smallnote, .privateNote, .brand b, .paperheader p, .documentbadge span, .formcontrols label,
.field small, .supporting > summary, .paperfooter, .helperintro, .chatFooter span,
.pdfToolbar span, .sitefooter, #saveStatus, .empty { color: var(--theme-muted-text); }
.pageheading p, .pageheading .smallnote { color: hsl(var(--sidebar-foreground) / .8); }
.pageheading .eyebrow, .page > .eyebrow { color: hsl(var(--accent)); }
input, select, textarea, .field input, .field select, .field textarea {
  background: hsl(var(--input)); color: hsl(var(--foreground)); border-color: hsl(var(--border));
}
input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)); opacity: .9; }
input:focus, select:focus, textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  background: hsl(var(--card)); border-color: hsl(var(--ring)); outline-color: hsl(var(--ring) / .3);
}
input[type=checkbox], input[type=radio] { accent-color: hsl(var(--primary)); }
.paperheader { border-color: hsl(var(--primary)); }
.fieldgrid, .field, .sectionheading, .supporting, .paperfooter, th, td, .pdfToolbar {
  border-color: hsl(var(--border));
}
.sectionheading, th { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.supporting, .uploadbutton, .detailcard pre, tbody tr:hover { background: hsl(var(--muted)); }
.supporting, .uploadbutton, .detailcard pre { color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.chatMessage { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.chatMessage.user { background: hsl(var(--secondary)); }
.chatMessage b { color: hsl(var(--primary)); }
.field.suggested { background: hsl(var(--accent) / .14); box-shadow: inset 3px 0 hsl(var(--accent)); }
.suggestion, #suggestionActions { background: hsl(var(--accent) / .2); color: hsl(var(--foreground)); border-color: hsl(var(--accent) / .5); }
#notice { background: hsl(var(--sidebar-background)); color: hsl(var(--sidebar-foreground)); }
.error { color: hsl(var(--destructive)); }
#notice.error { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
/* Approved higher-contrast variation: screen colors only; typography/layout/print unchanged. */
@media screen {
  :root {
    --review-background: 193 100% 95%;
    --review-paper: 193 30% 99%;
    --review-input: 193 40% 99%;
    --review-input-border: 193 35% 60%;
    --review-suggestion: 45 100% 89%;
  }
  html.dark, [data-theme='dark'] {
    --review-background: 193 50% 8%;
    --review-paper: 193 35% 12%;
    --review-input: 193 35% 15%;
    --review-input-border: 193 40% 48%;
    --review-suggestion: 45 75% 18%;
  }
  body { background: hsl(var(--review-background)); }
  .paper { background: hsl(var(--review-paper)); }
  input, select, textarea, .field input, .field select, .field textarea {
    background: hsl(var(--review-input));
    border-color: hsl(var(--review-input-border));
  }
  input:focus, select:focus, textarea:focus,
  .field input:focus, .field select:focus, .field textarea:focus {
    background: hsl(var(--review-input));
    border-color: hsl(var(--ring));
  }
  .primary { background: hsl(193 100% 30%); color: #fff; border-color: hsl(193 100% 30%); }
  .primary:hover { background: hsl(193 100% 25%); color: #fff; }
  .sectionheading { background: hsl(193 100% 30%); color: #fff; border-color: hsl(193 100% 30%); }
  .sectionheading .number { background: hsl(0 0% 100% / .18); color: #fff; }
  .pageheading h1, .page > h1 { color: hsl(var(--foreground)); }
  .pageheading p, .pageheading .smallnote { color: hsl(var(--muted-foreground)); }
  .pageheading .eyebrow, .page > .eyebrow { color: hsl(var(--primary)); }
  .field.suggested { background: hsl(var(--review-suggestion)); box-shadow: inset 5px 0 hsl(var(--accent)); }
  .suggestion, #suggestionActions { background: hsl(var(--review-suggestion)); border-color: hsl(var(--accent)); }
}
@media screen and (prefers-color-scheme: dark) {
  html:not(.light) {
    --review-background: 193 50% 8%;
    --review-paper: 193 35% 12%;
    --review-input: 193 35% 15%;
    --review-input-border: 193 40% 48%;
    --review-suggestion: 45 75% 18%;
  }
}
/* Approved slightly brighter palette, retaining ocean-blue/gold and mode support. */
@media screen {
  :root {
    --card: 193 30% 98%;
    --review-background: 193 100% 96%;
    --review-input-border: 193 40% 64%;
  }
  html.dark, [data-theme='dark'] {
    --foreground: 0 0% 98%;
    --card-foreground: 0 0% 98%;
    --muted-foreground: 210 25% 78%;
    --card: 193 35% 16%;
    --review-background: 193 45% 11%;
    --review-paper: 193 35% 16%;
    --review-input: 193 35% 20%;
    --review-input-border: 193 45% 58%;
    --review-suggestion: 45 75% 22%;
  }
  .primary, .sectionheading { background: hsl(193 100% 34%); border-color: hsl(193 100% 34%); }
  .primary:hover { background: hsl(193 100% 29%); }
  .sectionheading .number { background: hsl(193 100% 22%); }
}
@media screen and (prefers-color-scheme: dark) {
  html:not(.light) {
    --foreground: 0 0% 98%;
    --card-foreground: 0 0% 98%;
    --muted-foreground: 210 25% 78%;
    --card: 193 35% 16%;
    --review-background: 193 45% 11%;
    --review-paper: 193 35% 16%;
    --review-input: 193 35% 20%;
    --review-input-border: 193 45% 58%;
    --review-suggestion: 45 75% 22%;
  }
}
@media print {
  :root, html.dark, html:not(.light), [data-theme='dark'] {
    --foreground: 0 0% 10%; --background: 0 0% 100%; --card: 0 0% 100%;
    --card-foreground: 0 0% 10%; --input: 0 0% 100%; --muted: 0 0% 95%;
    --muted-foreground: 0 0% 35%; --border: 0 0% 70%; --primary: 0 0% 15%;
    --secondary: 0 0% 94%; --secondary-foreground: 0 0% 10%;
    --sidebar-background: 0 0% 20%; --sidebar-foreground: 0 0% 100%;
    color-scheme: light;
  }
  body, .paper, .field, .supporting, input, textarea, select { background: white !important; color: #111 !important; }
  .sectionheading { background: #eee !important; color: #111; }
}
/* Manual draft and PDF-library controls; keep every label at the existing 13px floor. */
.cardactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.draftheading { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.draftheading h2 { margin-bottom: 0; }
.draftsection { overflow-x: auto; }
.draftsection td:last-child button { margin: 0 6px 6px 0; }
.danger { color: hsl(var(--destructive)); border-color: hsl(var(--destructive)); }
.danger:hover { color: hsl(var(--destructive)); background: hsl(var(--destructive) / .12); border-color: hsl(var(--destructive)); }
.applicationToolbar, .toolbarRight { flex-wrap: wrap; }
.toolbarRight { justify-content: flex-end; }
@media screen and (max-width: 1100px) {
  .topbar { height: auto; min-height: 75px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .topbar nav { flex-wrap: wrap; }
}