:root {
  --bg: #0f172a;
  --card: #111827;
  --muted: #94a3b8;
  --text: #e5e7eb;
  --border: rgba(255,255,255,.12);

  --accent: #3b82f6;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;

  --accent-soft: rgba(59,130,246,.12);
  --ok-soft: rgba(52,211,153,.12);
  --warn-soft: rgba(251,191,36,.12);
  --danger-soft: rgba(248,113,113,.12);
  
  --fc-front-bg: var(--accent-soft);
  --fc-front-border: var(--accent);
  --fc-front-text: var(--text);

  --fc-back-bg: var(--ok-soft);
  --fc-back-border: var(--ok);
  --fc-back-text: var(--text);

  /* Optional subtle highlight for card corners */
  --fc-gloss: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.08), transparent 60%);
}
/* Light mode overrides */
[data-theme="light"] {
  --bg: #f7fbff;
  --card: #ffffff;
  --muted: #5c6b84;
  --text: #0d1b2a;
  --border: #dbe6ff;

  --accent-soft: rgba(59,130,246,.08);
  --ok-soft: rgba(52,211,153,.08);
  --warn-soft: rgba(251,191,36,.08);
  --danger-soft: rgba(248,113,113,.08);
  
  --fc-front-bg: var(--accent-soft);
  --fc-front-border: var(--accent);
  --fc-front-text: var(--text);

  --fc-back-bg: var(--ok-soft);
  --fc-back-border: var(--ok);
  --fc-back-text: var(--text);

  --fc-gloss: radial-gradient(120% 100% at 0% 0%, rgba(0,0,0,.03), transparent 60%);
}

/* Base */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  transition: background .3s, color .3s;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
/* Sticky Header */
header {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 24px; padding: 12px 0;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.back {
  appearance: none; border: 1px solid var(--border);
  background: var(--card); color: var(--text);
  padding: 10px 14px; border-radius: 14px; cursor: pointer;
  font-weight: 600; letter-spacing: .2px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2),
              inset 0 0 0 9999px rgba(255,255,255,.02);
}
.back:hover { transform: translateY(-1px); border-color: var(--accent); }
header h1 { font-size: clamp(20px, 2.6vw, 32px); margin: 0; font-weight: 800; }
header .subtitle { color: var(--muted); margin-top: 2px; font-size: clamp(13px, 2vw, 15px); }
/* Theme toggle */
.theme-toggle {
  margin-left: auto; border: 1px solid var(--border);
  background: var(--card); color: var(--text);
  padding: 8px 12px; border-radius: 14px; cursor: pointer;
  font-size: 14px; transition: background .3s, color .3s, border .3s; white-space: nowrap;
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
/* Cards, pills, tables, callouts */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px; margin: 20px 0; box-shadow: 0 10px 24px rgba(0,0,0,.15); transition: all .3s ease; opacity: 0; transform: translateY(20px); animation: fadeInUp .8s forwards; }
.card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(59,130,246,.4); border-color: var(--accent); }
.pill { display:inline-block; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border:1px solid var(--border); margin: 2px; }
.pill.accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.pill.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.pill.danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.table { width: 100%; border-collapse: collapse; margin: 16px 0; border-radius: 14px; overflow:hidden; border:1px solid var(--border); }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.table th { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.table tr:last-child td { border-bottom:none; }
.callout { border-left: 4px solid var(--accent); background: var(--accent-soft); padding: 10px 14px; border-radius: 10px; margin: 10px 0; }
.callout.ok { border-color: var(--ok); background: var(--ok-soft); }
.callout.warn { border-color: var(--warn); background: var(--warn-soft); }
.callout.danger { border-color: var(--danger); background: var(--danger-soft); }
/* Flowchart */
.flowchart { display: flex; flex-direction: column; align-items: center; }
.flow-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  margin: 14px 0;
  text-align: left;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards;
  transition: all 0.3s ease;
  width: 90%;
  max-width: 820px;
}
.flow-step:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(59,130,246,.4); border-color: var(--accent); }
.flow-step h3 { margin: 0 0 10px; }
.flow-arrow { text-align:center; font-size: 22px; color: var(--accent); margin: 6px 0; animation: pulse 2s infinite; }
.step-label {
  display: inline-block; background: var(--accent-soft); color: var(--accent);
  font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; font-size: 13px;
}
/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px);} to{ opacity: 1; transform: translateY(0);} }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1;} 50%{ transform: scale(1.2); opacity: .6;} }


/* ===============================
   QUIZ-SPECIFIC STYLES (adapted to style guide)
   =============================== */
.progress { height: 10px; background: rgba(255,255,255,.06); border-radius: 999px; border: 1px solid var(--border); overflow: hidden; }
.bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--ok)); transition: width 250ms ease; }

.meta { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 12px 0 8px; }
.pill-ghost { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background: var(--card); border:1px solid var(--border); color: var(--muted); font-size:12px; }

.scenario { background: #0b1320; border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin: 16px 0 10px; }
[data-theme="light"] .scenario { background: #f3f6ff; }
.scenario b { color: var(--accent); }

.stem { font-weight: 700; margin: 14px 0 8px; }

.choices { display: grid; gap: 10px; margin: 10px 0 8px; }
.choice { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; background: #0e1726; border: 1px solid var(--border); border-radius: 12px; padding: 12px; cursor: pointer; }
[data-theme="light"] .choice { background: #ffffff; }
.choice input { margin-top: 2px; transform: scale(1.2); accent-color: var(--accent); }
.choice.correct { outline: 2px solid var(--ok); }
.choice.incorrect { outline: 2px solid var(--danger); }

.badge { font-size: 11px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.badge.multi { color: #fff; background: linear-gradient(90deg, #5b21b6, #7c3aed); border: none; }

.actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
button { appearance: none; border: 1px solid var(--border); background: #0f1926; color: var(--text); padding: 10px 14px; border-radius: 12px; font-weight: 600; cursor: pointer; }
[data-theme="light"] button { background: #f7fbff; }
button.primary { background: linear-gradient(180deg, #233244, #1a2838); border-color: #2a394a; }
[data-theme="light"] button.primary { background: linear-gradient(180deg, #e8f0ff, #dfe9ff); border-color: #cfe0ff; }
button.primary:disabled { opacity: 0.5; cursor: not-allowed; }
button:focus-visible { outline: 2px solid #9bd3ff; outline-offset: 2px; }

.feedback { margin: 12px 0; padding: 12px; border-radius: 12px; border: 1px solid var(--border); }
.feedback.ok { background: var(--ok-soft); }
.feedback.no { background: var(--danger-soft); }

.summary { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 16px; }
.summary .row { display: flex; gap: 10px; align-items: center; }
.summary .score { font-size: 2rem; font-weight: 800; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Footer */
footer { margin: 28px 0 16px; font-size: 13px; color: var(--muted); text-align: center; }
/* Mobile tweaks */
@media (max-width: 600px) {
  header { padding: 6px 0; gap: 8px; }
  .back { padding: 6px 10px; font-size: 14px; }
  header h1 { font-size: 18px; }
  header .subtitle { font-size: 12px; }
  .theme-toggle .label { display: none; }
  .theme-toggle { padding: 6px 10px; font-size: 16px; }
  footer {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: var(--bg); border-top: 1px solid var(--border);
    padding: 6px 0; margin: 0; font-size: 12px;
  }
}


/* ===== Two-sided card styles (scoped) ===== */
#study-flashcards .anki-cards{
  display:grid; gap:14px; grid-template-columns: 1fr;
}
@media(min-width:850px){
  #study-flashcards .anki-cards{ grid-template-columns: repeat(2, 1fr); }
}
#study-flashcards .anki-card{
  position:relative; perspective:1000px; cursor:pointer; min-height:130px; outline:none;
}
#study-flashcards .anki-card .side{
  position:absolute; inset:0; padding:16px; border-radius:14px;
  border:1px solid var(--border);
  backface-visibility:hidden; transform:rotateY(0deg);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition: transform .5s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  display:flex; align-items:flex-start; justify-content:flex-start;
  font-size:15px; line-height:1.45;
}

/* Front = question (accent tint) */
#study-flashcards .anki-card .front{
  background: var(--fc-gloss), var(--fc-front-bg);
  color: var(--fc-front-text);
  border-color: var(--fc-front-border);
}

/* Back = answer (ok/green tint) */
#study-flashcards .anki-card .back{
  background: var(--fc-gloss), var(--fc-back-bg);
  color: var(--fc-back-text);
  border-color: var(--fc-back-border);
  transform:rotateY(180deg);
}

/* Flip states */
#study-flashcards .anki-card.flipped .front{ transform:rotateY(180deg); }
#study-flashcards .anki-card.flipped .back{ transform:rotateY(360deg); }

/* Hover/focus polish */
#study-flashcards .anki-card:hover .side{
  box-shadow:0 12px 28px rgba(59,130,246,.35);
}
#study-flashcards .anki-card:focus-visible .side{
  outline: 2px solid #9bd3ff; outline-offset: 2px;
}

/* “Q:” / “A:” label weight */
#study-flashcards .q{ font-weight:700; margin-right:6px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #study-flashcards .anki-card .side{ transition:none }
}

/* =========================
   PK Infographic Add-On v1
   (Sticky header/footer, cards, grid, color bands)
   ========================= */

/* Container */
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }

/* ---------- Sticky Brand Header ---------- */
.brandbar{
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.brandrow{
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  padding:12px 24px;
}

/* Badge + title block (hero) */
.badge{
  display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px;
  background: var(--accent-soft); color: var(--text); font-weight:800;
  border: 1px solid var(--border);
}
h1{ margin:.35rem 0 0; font-weight:800; letter-spacing:.2px; font-size:clamp(22px,3vw,34px); }
.excerpt{ color: var(--muted); font-size:.96rem; margin:.25rem 0 0; max-width:840px; }

/* ---------- Theme Toggle (button lives in header) ---------- */
.theme-toggle{
  margin-left:auto;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  padding:8px 12px;
  border-radius:14px;
  cursor:pointer;
  font-size:14px;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.20), inset 0 0 0 9999px rgba(255,255,255,.02);
  transition: transform .2s ease, border-color .2s ease;
}
.theme-toggle:hover{ transform: translateY(-1px); border-color: var(--accent); }
.theme-toggle:focus-visible{ outline:2px solid #9bd3ff; outline-offset:2px; }

/* ---------- Grid & Cards ---------- */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin:22px auto; }
.card{
  grid-column: span 6;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius:18px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 10px 24px rgba(0,0,0,.25);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 12px 28px rgba(59,130,246,.35); }
.card.sm{ grid-column: span 4; }
.card.lg{ grid-column: span 12; }
@media (max-width: 960px){
  .card, .card.sm, .card.lg { grid-column: span 12; }
}

/* Card sections */
.ch{ padding:12px 16px; font-weight:800; letter-spacing:.2px; color:#fff; display:flex; align-items:center; gap:10px; }
.cb{ padding:14px 18px; color: var(--text); }
.cb ul{ margin:0; padding-left:20px; }
.cb li{ margin:6px 0; }

/* Header color bands */
.h-blue{  background:linear-gradient(90deg,#1f6feb,#3b82f6); }
.h-amber{ background:linear-gradient(90deg,#f59e0b,#f59e0b); }
.h-green{ background:linear-gradient(90deg,#16a34a,#22c55e); }
.h-red{   background:linear-gradient(90deg,#dc2626,#ef4444); }
.h-indigo{background:linear-gradient(90deg,#4f46e5,#6366f1); }
.h-teal{  background:linear-gradient(90deg,#0d9488,#14b8a6); }
.h-violet{background:linear-gradient(90deg,#7c3aed,#8b5cf6); }
.h-slate{ background:linear-gradient(90deg,#334155,#475569); }

/* Tables inside cards */
.table-wrap{ overflow:auto; }
.table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  min-width:740px; border-radius: 12px; overflow:hidden;
  border: 1px solid var(--border);
}
.table th{ text-align:left; padding:10px 12px; border-bottom:2px solid var(--border); background:var(--accent-soft); color:var(--accent); font-weight:700; }
.table td{ padding:10px 12px; border-bottom:1px solid var(--border); }
.table tr:last-child td{ border-bottom:none; }

/* Page note (above footer) */
.note{ color:var(--muted); text-align:center; font-size:.92rem; margin:24px 0; }

/* ---------- Sticky Brand Footer ---------- */
footer[role="contentinfo"]{
  position: fixed; left:0; right:0; bottom:0; z-index:1000;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.footer-inner{
  max-width:1100px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  color: var(--muted); font-size:.9rem;
}
.footer-inner a{ color:inherit; text-decoration:none; }

/* Print (hide sticky chrome) */
@page{ size: letter; margin: 12mm; }
@media print{
  .brandbar, footer[role="contentinfo"]{ display:none !important; }
  .card{ box-shadow:none; border:1px solid #e5e7eb; background:#fff; }
  .table th, .table td{ border-color:#e5e7eb; }
}