/*
  Deliberately single-theme (light/white). The workspace sits next to scanned
  exam diagrams, tables and graphs — those are opaque white raster/vector
  art, so a dark canvas would show seams around every image.
*/
:root {
  --bg: #F3F5F4; --surface: #FFFFFF; --surface-2: #F6F7F6; --surface-3: #EDF0EF;
  --ink: #1B2320; --ink-soft: #4C5652; --ink-faint: #8A9591;
  --line: #DDE3E0; --line-strong: #C6CDC9;
  --accent: #1E5FBF; --accent-soft: #E8EFFB; --accent-ink: #154592;
  --sl: #0E8F6F; --sl-soft: #E4F5EF;
  --hl: #B4590E; --hl-soft: #FBEADB;
  --gold: #B8860B; --gold-soft: #FBF2DC;
  --danger: #C0392B; --danger-soft: #FBEAE8;
  --radius: 8px; --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(20,30,26,.05), 0 8px 24px -12px rgba(20,30,26,.12);
  --font-ui: -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-display: Georgia,"Iowan Old Style","Times New Roman",serif;
  --font-serif: Cambria,"STIX Two Text","Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;
  --font-math: "Cambria Math","STIX Two Math","Latin Modern Math","Lucida Bright","Iowan Old Style",Cambria,Georgia,serif;
  --font-mono: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-ui);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-soft); color:var(--accent-ink);}
button, select, input{font:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
a{color:var(--accent);}

.wordmark{display:flex; align-items:center; gap:9px; background:none; border:none; padding:0; margin:0; cursor:pointer; font:inherit; text-align:left; text-decoration:none; color:inherit;}
.wordmark .logo-img{height:58px; width:auto; display:block; opacity:.92;}
.wordmark .mark{
  font-family:var(--font-display); font-style:italic; font-size:1.5rem; font-weight:700;
  letter-spacing:.2px; color:var(--ink);
}
.wordmark .tag{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint);
  border-left:1px solid var(--line-strong); padding-left:10px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--accent); color:#fff; border:none; border-radius:var(--radius);
  padding:9px 18px; font-size:.88rem; font-weight:600; cursor:pointer;
}
.btn:hover{background:var(--accent-ink);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn.secondary{background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line);}
.btn.secondary:hover{color:var(--ink); border-color:var(--line-strong); background:var(--surface-2);}

.field-label{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint);
  padding-left:2px; display:block; margin-bottom:4px;
}
.text-input{
  width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 12px; font-size:.92rem; color:var(--ink);
}
.text-input:focus-visible{border-color:var(--accent);}

.error-banner{
  background:var(--danger-soft); color:var(--danger); border:1px solid #E6C4C0;
  border-radius:var(--radius); padding:9px 12px; font-size:.85rem; margin-bottom:14px;
}

.badge{
  font-size:.62rem; font-weight:700; padding:1px 5px; border-radius:4px; letter-spacing:.02em;
  flex-shrink:0; display:inline-block;
}
.badge.sl{background:var(--sl-soft); color:var(--sl);}
.badge.hl{background:var(--hl-soft); color:var(--hl);}
.badge.core{background:var(--sl-soft); color:var(--sl);}
.badge.ext{background:var(--accent-soft); color:var(--accent-ink);}