/* KK4WMI — minimal, fast, accessible, mobile-first */
:root{
  --bg:#0b1020; --fg:#e8f1ff; --muted:#9fb3cc; --card:#101936; --card-2:#0d152e;
  --primary:#22d3ee; --primary-600:#0891b2; --accent:#f59e0b; --success:#10b981; --danger:#ef4444;
  --focus:#f59e0b; --border:#223154; --link:#7dd3fc;
}
*{box-sizing:border-box}
html{font-family:Inter,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.5}
body{margin:0;background:linear-gradient(180deg,#070b17,#0b1020 120%);color:var(--fg)}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
button,input,select{font:inherit}
.container{max-width:1000px;margin:0 auto;padding:16px}
.header{position:sticky;top:0;z-index:50;background:rgba(7,11,23,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}
.brand{display:flex;gap:10px;align-items:center}
.brand img{width:40px;height:40px;border-radius:8px}
.brand h1{font-size:18px;margin:0}
.actions{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid var(--border);background:var(--card);color:var(--fg);cursor:pointer;transition:all .2s}
.btn.primary{background:linear-gradient(180deg,#0fbdd3,#14b8a6);color:#021018;border-color:transparent}
.btn:hover{transform:translateY(-1px)}
.card{background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid var(--border);border-radius:16px;padding:16px}
.grid{display:grid;gap:16px}
@media (min-width:720px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}}
.label{display:block;font-size:14px;color:var(--muted);margin:0 0 6px}
.input,.select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0c1327;color:var(--fg)}
.switch{display:flex;align-items:center;gap:10px}
.footer{color:var(--muted);border-top:1px solid var(--border);margin-top:24px;padding:24px 0}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#0a1226;border:1px solid var(--border);padding:2px 6px;border-radius:6px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#0c1430;font-size:12px}
.progress{height:10px;background:#0f1a39;border-radius:999px;border:1px solid var(--border);overflow:hidden}
.progress>div{height:100%;background:linear-gradient(90deg,#22d3ee,#22c55e);width:0%}
.list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.alert{border-left:4px solid var(--accent);padding:10px 12px;background:#0f152e;border:1px solid var(--border);border-radius:12px}
hr{border:0;border-top:1px solid var(--border);margin:16px 0}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th,.table td{text-align:left;padding:8px 10px}
.table tr{background:#0f1a39;border:1px solid var(--border)}
.table tr th{color:var(--muted)}
/* Exam UI */
.q-stem{font-size:18px;margin:6px 0 10px}
.choices{display:grid;gap:10px}
.choice{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--border);border-radius:12px;background:#0c1327;cursor:pointer}
.choice.correct{outline:2px solid var(--success)}
.choice.incorrect{outline:2px solid var(--danger)}
.choice input{margin-top:4px}
.counter{display:flex;gap:8px;align-items:center;justify-content:space-between}
.timer{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#0f1a39}
/* Confetti (minimal) */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}
/* Light theme variables */
html[data-theme="light"]{
  --bg:#f8fafc; --fg:#081018; --muted:#334155; --card:#ffffff; --card-2:#f1f5f9;
  --primary:#0891b2; --primary-600:#0369a1; --accent:#d97706; --success:#059669; --danger:#dc2626;
  --focus:#d97706; --border:#d1d5db; --link:#0369a1;
}
html[data-theme="light"] body{background:linear-gradient(180deg,#f8fafc,#eef2f7 120%)}
html[data-theme="light"] .card{background:linear-gradient(180deg,var(--card),var(--card-2))}


/* --- Gen-Z polish additions --- */
:root{
  --accent-pop:#ff61d8; /* pink */
  --accent-lime:#a3e635; /* lime */
}

/* Subtle animated background glow */
body::before{content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;filter:blur(20px);
  background:
    radial-gradient(600px 300px at 10% 20%, rgba(34,211,238,.15), transparent 60%),
    radial-gradient(600px 300px at 80% 10%, rgba(255,97,216,.15), transparent 60%),
    radial-gradient(800px 400px at 50% 120%, rgba(163,230,53,.12), transparent 70%);
  animation:bgfloat 35s ease-in-out infinite alternate;
}
@keyframes bgfloat{from{transform:translateY(-10px)}to{transform:translateY(10px)}}
@media (prefers-reduced-motion: reduce){ body::before{animation:none} }

/* Buttons/cards: micro-interactions */
.btn{position:relative;overflow:hidden;transition:transform .15s ease, box-shadow .25s ease}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 30px -10px var(--accent-pop)}
.btn:active{transform:translateY(0) scale(.99)}
.card{transition:transform .2s ease, box-shadow .3s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(255,97,216,.45)}

/* Ripple effect */
.ripple{position:absolute;border-radius:999px;transform:scale(0);background:radial-gradient(circle, rgba(255,255,255,.6), rgba(255,255,255,.05));opacity:.75;animation:ripple .6s ease-out;pointer-events:none}
@keyframes ripple{to{transform:scale(20);opacity:0}}
@media (prefers-reduced-motion: reduce){ .ripple{display:none} }

/* Chips & badges */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#0f1a39}
.badge-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(120deg, rgba(255,97,216,.2), rgba(163,230,53,.18));box-shadow:0 4px 16px -12px rgba(255,97,216,.5)}
.badge-card.new{outline:2px solid var(--accent-pop);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,97,216,.35)}50%{box-shadow:0 0 0 6px rgba(255,97,216,.0)}}

/* Icon helper */
.icon{width:18px;height:18px;vertical-align:-2px}


/* Flashcards flip */
.fc-scene { perspective: 1000px }
.fc-card {
  position: relative;
  width: 100%;
  min-height: 220px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
  border-radius: 16px;
}
.fc-card.flipped { transform: rotateY(180deg) }
.fc-face {
  position: absolute; inset: 0; padding: 14px;
  border-radius: 16px;
  backface-visibility: hidden;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
}
.fc-back { transform: rotateY(180deg) }


/* Light theme form controls */
html[data-theme="light"] .input, html[data-theme="light"] .select{
  background:#ffffff; color:#081018; border-color:#d1d5db;
}
html[data-theme="light"] .chip{ background:#f1f5f9; border-color:#e2e8f0 }


/* Light theme header override for readability */
html[data-theme="light"] .header{
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}
html[data-theme="light"] .header .btn{ background: var(--card); color: var(--fg); border-color: var(--border) }
html[data-theme="light"] .brand h1{ color: var(--fg) }