/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOKENS  — deep navy + amber action
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --bg:           #edf0f7;
  --panel:        #ffffff;
  --text:         #0d1421;
  --muted:        #5c6a7d;
  --line:         #c5cedd;
  --brand:        #1a3260;
  --brand-h:      #243d75;
  --accent:       #f5a623;
  --accent-d:     #c6840d;
  --accent-l:     #fffbef;
  --ok:           #15803d;
  --bad:          #b91c1c;
  --color-danger: #b91c1c;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); line-height: 1.65; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-h); text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; text-wrap: balance; font-weight: 800; letter-spacing: -.025em; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOPBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.5rem; background: var(--brand); color: white; }
.brand { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; color: var(--accent); text-decoration: none; }
.brand:hover { color: var(--accent); text-decoration: none; }
nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.topbar nav a { color: rgba(255,255,255,.65); font-size: .875rem; font-weight: 500; text-decoration: none; transition: color .12s; }
.topbar nav a:hover { color: white; text-decoration: none; }
.link-button { background: transparent; border: none; padding: 0; color: rgba(255,255,255,.65); font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; transition: color .12s; }
.link-button:hover { color: white; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.container { width: min(1120px, calc(100% - 2rem)); margin: 1.75rem auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem 1.4rem; box-shadow: 0 2px 14px rgba(10,20,60,.08); margin-bottom: 1rem; }
.cards .card { border-left: 3px solid var(--accent); display: block; min-height: 90px; }
.narrow { max-width: 440px; margin-inline: auto; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.two { grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr); }
.form-grid { align-items: end; }
.stack { display: flex; flex-direction: column; gap: .85rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   METRIC CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.metric-card { display: flex; flex-direction: column; justify-content: center; min-height: 90px; }
.metric-card strong { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -.04em; color: var(--brand); font-variant-numeric: tabular-nums; }
.metric-card span { margin-top: .35rem; color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FORMS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 650; font-size: .9rem; }
input, textarea, select { width: 100%; border: 1.5px solid var(--line); border-radius: 6px; padding: .75rem .9rem; font: inherit; background: white; color: var(--text); transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26,50,96,.1); }
textarea { min-height: 110px; resize: vertical; }
input[type="checkbox"] { width: auto; accent-color: var(--brand); }
input[type="radio"] { width: auto; accent-color: var(--brand); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
button, .big-button { border: 0; border-radius: 6px; padding: .75rem 1.25rem; background: var(--accent); color: var(--text); font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; transition: background .12s, transform .08s; }
button:hover, .big-button:hover { background: var(--accent-d); color: var(--text); text-decoration: none; }
button:active { transform: scale(.98); }
.button-secondary { display: inline-block; border: 1.5px solid var(--line); border-radius: 6px; padding: .65rem 1.1rem; background: white; color: var(--text); font: inherit; font-weight: 600; font-size: .875rem; cursor: pointer; text-decoration: none; transition: border-color .12s; }
.button-secondary:hover { border-color: var(--muted); color: var(--text); text-decoration: none; }
.link-button.small, .button-secondary.small { padding: .4rem .75rem; font-size: .8rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   INLINE FORM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.inline-form { display: inline-flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.wrap-form { width: 100%; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STATE HELPERS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.muted { color: var(--muted); }
.alert { background: #fee2e2; color: var(--bad); padding: .8rem 1rem; border-radius: 6px; font-weight: 600; border-left: 3px solid var(--bad); }
.notice { background: #dde8fa; color: var(--brand); padding: .8rem 1rem; border-radius: 6px; font-weight: 600; border-left: 3px solid #7ba3d9; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BADGES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.badge { display: inline-flex; align-items: center; gap: 5px; background: #e6ebf4; color: #2a3d5e; padding: .28rem .65rem; border-radius: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.badge.ok { background: #dcfce7; color: var(--ok); }
.badge.bad { background: #fee2e2; color: var(--bad); }
.badge-live { display: inline-flex; align-items: center; gap: 6px; background: #dc2626; color: white; font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: .3rem .65rem; border-radius: 4px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: white; flex-shrink: 0; animation: livepulse 1.4s ease-in-out infinite; }
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
table { width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; }
th { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--bg); }
th, td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f4f6fb; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: white; }
.table-card { overflow: hidden; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   OPTION BUTTONS (quiz answers)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.option { display: flex; flex-direction: row; align-items: flex-start; gap: .6rem; padding: .9rem 1rem; border: 1.5px solid var(--line); border-left-width: 3px; border-radius: 6px; margin: .45rem 0; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s; }
.option:hover { border-color: #9aaec0; background: #f4f7fb; }
.option:has(input:checked) { border-left-color: var(--accent); border-color: #d4c080; background: var(--accent-l); }
.compact-option { padding: .6rem .9rem; background: #f4f7fb; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIVE QUIZ CARD
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#live-section { border-top: 3px solid var(--accent); }
.presenter-status { font-size: 1rem; font-weight: 600; color: var(--muted); }
.feedback { margin-top: .8rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESULTS GRID (live quiz inline results)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.results-grid { display: flex; gap: .6rem; flex-wrap: wrap; margin: .75rem 0; }
.results-card { background: var(--bg); border: 1.5px solid var(--line); color: var(--text); padding: .6rem 1rem; border-radius: 6px; text-align: center; font-weight: 700; min-width: 64px; }
.results-card span { display: block; font-size: 1.8rem; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1.1; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIST LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.list-link { display: block; padding: .85rem 1rem; background: white; border: 1.5px solid var(--line); border-radius: 6px; margin: .45rem 0; font-weight: 500; color: var(--text); transition: border-color .12s; }
.list-link:hover { border-color: #9aaec0; color: var(--text); text-decoration: none; }
.list-link-row { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; background: white; border: 1.5px solid var(--line); border-radius: 6px; margin: .45rem 0; flex-wrap: wrap; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MISC UTILS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.qr { width: 180px; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
.question-preview { border-top: 1px solid var(--line); padding-top: 1rem; }
.control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; }
.control-grid button { width: 100%; min-height: 58px; }
.mobile-card { max-width: 720px; margin-inline: auto; }
.toolbar { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
.top-gap { margin-top: 1rem; }
.bottom-gap { margin-bottom: 1rem; }
.pagination { margin-top: 1rem; }
fieldset { border: 1.5px solid var(--line); border-radius: 10px; padding: 1rem; }
legend { font-weight: 800; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tab-bar { display: flex; gap: 0; margin-bottom: -1px; }
.tab-bar button { border: 1.5px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; padding: .55rem 1.1rem; background: var(--bg); color: var(--text); font-weight: 650; cursor: pointer; font-size: .875rem; transition: background .12s; }
.tab-bar button.active { background: white; }
.tab-panel { display: none; }
.tab-panel.active { display: block; border: 1.5px solid var(--line); border-radius: 0 8px 8px; padding: 1rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRESENTER / PROJECTOR MODE
   (inline styles in presenter/live.html override
   these for sizing — this sets the ground rules)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.presenter { background: #060d1a; color: #f1f5ff; }
.presenter main { width: min(1300px, calc(100% - 4rem)); margin: 4rem auto; }
.presenter h1 { font-size: clamp(2.3rem, 6vw, 5.5rem); line-height: 1.05; letter-spacing: -.035em; color: white; }
.presenter .presenter-status { font-size: 1.4rem; color: #7eb8e0; font-weight: 600; }
.presenter-options { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 1rem; }
.presenter-option { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 1.2rem 1.4rem; font-size: clamp(1.2rem, 2vw, 2rem); }
.presenter-option.correct { border-color: var(--accent); background: rgba(245,166,35,.1); }
.presenter-feedback { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 1.2rem; font-size: 1.1rem; }
.presenter .results-grid { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.presenter .results-card { background: rgba(255,255,255,.08); color: white; border: 1px solid rgba(255,255,255,.12); border-top: none; }
.presenter .results-card span { color: var(--accent); font-size: 3rem; }
.presenter-option .markdown-content, .presenter-feedback .markdown-content { color: white; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOAST
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.toast { position: fixed; top: 1rem; right: 1rem; z-index: 9999; padding: .85rem 1.25rem; border-radius: 6px; font-weight: 700; box-shadow: 0 4px 20px rgba(0,0,0,.2); transition: opacity .3s; max-width: 480px; }
.toast.error { background: #fee2e2; color: var(--bad); border-left: 3px solid var(--bad); }
.toast.success { background: #dcfce7; color: var(--ok); border-left: 3px solid var(--ok); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MARKDOWN CONTENT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.markdown-content { line-height: 1.65; overflow-wrap: break-word; }
.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 { margin-top: 1.2em; margin-bottom: .4em; line-height: 1.25; }
.markdown-content h1 { font-size: 1.6em; }
.markdown-content h2 { font-size: 1.35em; }
.markdown-content h3 { font-size: 1.15em; }
.markdown-content p { margin: .6em 0; }
.markdown-content ul, .markdown-content ol { padding-left: 1.6em; margin: .5em 0; }
.markdown-content li { margin: .2em 0; }
.markdown-content code { background: #e8edf6; padding: .15em .45em; border-radius: 4px; font-size: .9em; }
.markdown-content pre { background: #0d1b2a; color: #e2e8f0; padding: 1em; border-radius: 8px; overflow-x: auto; }
.markdown-content pre code { background: transparent; padding: 0; border-radius: 0; color: inherit; }
.markdown-content blockquote { border-left: 3px solid var(--line); margin: .8em 0; padding: .2em .8em; color: var(--muted); }
.markdown-content table { border-collapse: collapse; margin: .8em 0; width: 100%; }
.markdown-content th, .markdown-content td { border: 1px solid var(--line); padding: .5em .7em; text-align: left; }
.markdown-content th { background: var(--bg); font-weight: 700; }
.markdown-content a { color: var(--brand); text-decoration: underline; }
.markdown-content hr { border: 0; border-top: 2px solid var(--line); margin: 1.2em 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 720px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  nav { gap: .7rem; }
  .container { margin: 1rem auto; }
  .two, .presenter-options { grid-template-columns: 1fr; }
  button, .big-button { width: 100%; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}