@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg:#f6f8ff;
  --bg-accent:#ecf2ff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#5f6b82;
  --accent:#1d4ed8;
  --accent-soft:rgba(29,78,216,0.12);
  --accent-strong:#153cab;
  --success:#16a34a;
  --error:#dc2626;
  --warning:#f59e0b;
  --line:rgba(15,23,42,0.08);
  --shadow:0 14px 32px rgba(15,23,42,0.08);
  --radius:18px;
}

:root[data-theme="dark"] {
  --bg:#0b1120;
  --bg-accent:#111a2d;
  --card:#111b2f;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --accent:#60a5fa;
  --accent-soft:rgba(96,165,250,0.18);
  --accent-strong:#3b82f6;
  --success:#34d399;
  --error:#f87171;
  --warning:#fbbf24;
  --line:rgba(148,163,184,0.18);
  --shadow:0 18px 38px rgba(2,6,23,0.35);
}

* { box-sizing:border-box; }

html, body { height:100%; }

body {
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg) 0%, #fafcff 45%, var(--bg) 100%);
  min-height:100vh;
}

a { color:var(--accent); text-decoration:none; transition:color .2s ease; }
a:hover { color:var(--accent-strong); }

img { max-width:100%; display:block; }

.container { width:min(1200px, calc(100% - clamp(18px, 3vw, 48px))); margin:0 auto; }
.mobile-taskbar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  display:none;
  gap:8px;
  padding:8px clamp(12px, 4vw, 24px);
  background:rgba(15,23,42,0.9);
  color:#fff;
  border-top:1px solid rgba(255,255,255,0.12);
  z-index:120;
}
.mobile-taskbar button{
  flex:1;
  border:none;
  background:rgba(255,255,255,0.12);
  color:#fff;
  padding:10px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}
@media (max-width: 720px){
  .mobile-taskbar{ display:flex; }
}

.topbar {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

:root[data-theme="dark"] .topbar {
  background:rgba(15,23,42,0.88);
}

.topbar .topbar-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px 0;
}

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px 8px;
  width:44px;
  height:38px;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-direction:column;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--text);
  transition:transform .2s ease, opacity .2s ease;
}
.topbar.open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.topbar.open .nav-toggle span:nth-child(2){ opacity:0; }
.topbar.open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text);
  text-decoration:none;
}

.logo {
  width:40px;
  height:40px;
  border-radius:14px;
  background:
    radial-gradient(80% 60% at 20% 15%, rgba(45,212,191,0.6), transparent 70%),
    radial-gradient(70% 80% at 90% 65%, rgba(96,165,250,0.7), transparent 70%),
    linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  box-shadow:0 12px 24px rgba(37,99,235,0.25);
}

.brand-name { font-weight:800; font-size:1.1rem; display:block; }
.brand-sub { font-size:.8rem; color:var(--muted); }

.nav-cluster { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.topbar.open .nav-cluster { display:flex; }

.nav-links { display:flex; gap:10px; flex-wrap:wrap; }
.nav-bubbles {
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  overflow-x:auto;
  max-width:320px;
  scroll-snap-type:x mandatory;
}
.topbar.open .nav-bubbles { width:100%; }
.nav-bubbles .subject-bubble { scroll-snap-align:center; }
.nav-bubbles::-webkit-scrollbar { display:none; }

.nav-link {
  padding:8px 14px;
  border-radius:999px;
  color:var(--muted);
  font-weight:600;
  border:1px solid transparent;
  transition:all .2s ease;
  outline:2px solid transparent;
  outline-offset:2px;
}

.nav-link:hover { color:var(--accent-strong); background:var(--accent-soft); border-color:rgba(29,78,216,0.18); }

.nav-link.active {
  color:var(--accent-strong);
  background:var(--accent-soft);
  border-color:rgba(29,78,216,0.18);
}
.nav-link:focus-visible { outline:2px solid var(--accent); }

.nav-actions { display:flex; gap:10px; align-items:center; }

.user-chip {
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px 12px;
  border-radius:12px;
  background:var(--accent-soft);
  color:var(--accent-strong);
  text-decoration:none;
  transition:box-shadow .2s ease, transform .2s ease;
}

.user-chip:hover {
  box-shadow:0 10px 18px rgba(29,78,216,0.16);
  text-decoration:none;
}

.user-chip .avatar { width:24px; height:24px; border-radius:8px; background:rgba(255,255,255,0.35); display:grid; place-items:center; font-size:1rem; }
.user-chip small { display:block; font-size:.72rem; color:var(--muted); }

.user-chip:focus-visible {
  outline:2px solid rgba(37,99,235,0.65);
  outline-offset:2px;
}

.btn {
  cursor:pointer;
  border:none;
  border-radius:12px;
  font-weight:600;
  padding:10px 18px;
  background:var(--accent);
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  box-shadow:0 10px 18px rgba(29,78,216,0.18);
}

.btn:hover { transform:translateY(-1px); box-shadow:0 16px 28px rgba(29,78,216,0.20); background:var(--accent-strong); }

#btnNextBig {
  width:100%;
  justify-content:center;
  padding:16px 20px;
  font-size:1.04rem;
  margin-top:12px;
}

.btn:active { transform:translateY(0); }

.btn:focus-visible {
  outline:none;
  box-shadow:0 0 0 4px rgba(37,99,235,0.25);
}

a:focus-visible,
.nav-link:focus-visible,
.chip:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:2px;
}

.btn.ghost {
  background:rgba(15,23,42,0.05);
  color:var(--text);
  box-shadow:none;
  border:1px solid var(--line);
}

.btn.ghost:hover { background:rgba(29,78,216,0.08); color:var(--accent-strong); }

.btn.icon { padding:8px 12px; border-radius:999px; font-size:1.1rem; }
.btn.small { padding:6px 12px; font-size:.85rem; }
.btn[disabled], .btn.disabled { opacity:.55; pointer-events:none; box-shadow:none; }
.btn.btn-locked {
  background:rgba(15,23,42,0.08);
  color:var(--muted);
  box-shadow:none;
}
.btn.btn-locked:hover { transform:none; }

.card {
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid rgba(15,23,42,0.05);
  padding:22px;
  box-shadow:var(--shadow);
  animation:fadeSlide .45s ease both;
}

.muted { color:var(--muted); }
.small { font-size:.88rem; }
.tiny { font-size:.72rem; }
.mt0 { margin-top:0; }

.stack > * + * { margin-top:18px; }
.row { display:flex; align-items:center; gap:14px; }
.row.wrap { flex-wrap:wrap; }
.row.between { justify-content:space-between; }

.grid { display:grid; gap:18px; }

.chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.75rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(15,23,42,0.05);
  color:var(--muted);
}
.chip.new { background:#dbeafe; color:#1e3a8a; }

.section-title { font-size:1.8rem; margin:0; }

/* =============================
   STUDY DASHBOARD & BUNDLES
============================= */
.study-shell {
  display:grid;
  gap:20px;
  padding:26px 0 48px;
}

.study-hero {
  display:grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(260px, 1fr);
  gap:16px;
  align-items:start;
  overflow:hidden;
  padding:18px;
  min-height:200px;
  background:linear-gradient(135deg, rgba(37,99,235,0.1), rgba(45,212,191,0.12));
}
.compact-hero .hero-actions { gap:10px; }
.compact-hero p { max-width:440px; }

@media (max-width:980px){
  .study-hero {
    grid-template-columns: 1fr;
    min-height:auto;
  }
}

.quick-lessons-card {
  display:grid;
  gap:16px;
  max-height:360px;
  overflow:hidden;
  min-width:260px;
}

.floating-card {
  position:fixed;
  width:260px;
  max-width:80vw;
  z-index:30;
  top:180px;
  opacity:0.9;
  font-size:.9rem;
  cursor:grab;
  touch-action:none;
}
.floating-card.card { background:#fff; }
.floating-left { left:12px; }
.floating-right { right:12px; }
.floating-card h2 { font-size:1.05rem; margin:0; }
.floating-card .muted.small, .floating-card .muted.tiny { font-size:.78rem; }
.floating-card .quick-lessons-grid { display:grid; grid-template-columns:1fr; max-height:280px; overflow-y:auto; padding-right:4px; }
.floating-card .float-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.floating-card .float-controls { display:flex; gap:6px; align-items:center; }
.floating-card .float-head .btn.icon { padding:4px 8px; }
.floating-card.collapsed { display:none !important; }
.float-handle {
  position:fixed;
  left:12px;
  top:240px;
  z-index:29;
  border-radius:12px;
  border:none;
  padding:8px 10px;
  background:var(--accent);
  color:#fff;
  box-shadow:0 10px 18px rgba(15,23,42,0.16);
  cursor:pointer;
}

@media (max-width:640px){
  .floating-card {
    width:88vw;
    left:6px;
    right:auto;
    top:140px;
  }
  .float-handle { top:200px; left:6px; }
}

.study-columns {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:18px;
}

.subject-progress-card {
  display:grid;
  gap:12px;
}

.subject-bubbles {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.headline-bubbles {
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}

.subject-bubbles.nav {
  gap:10px;
}
.subject-bubble.nav { width:64px; height:64px; text-decoration:none; }
.subject-bubble {
  width:64px;
  height:64px;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(148,163,184,0.2), rgba(148,163,184,0.08));
  position:relative;
  text-align:center;
  color:var(--text);
  overflow:hidden;
  border:1px solid rgba(15,23,42,0.12);
  box-shadow:0 10px 14px rgba(15,23,42,0.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.subject-bubble::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 25% 25%, rgba(255,255,255,0.25), transparent 55%);
}
.subject-bubble span {
  position:relative;
  z-index:1;
  font-size:.78rem;
  display:block;
  margin-top:4px;
}
.subject-bubble strong {
  position:relative;
  z-index:1;
  font-size:.9rem;
}
.subject-bubble .fill {
  position:absolute;
  inset:4px;
  border-radius:50%;
  overflow:hidden;
  background:rgba(255,255,255,0.45);
  box-shadow: inset 0 6px 14px rgba(0,0,0,0.08);
}
.subject-bubble .fill::after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:var(--subject-fill, 0%);
  background:linear-gradient(180deg, color-mix(in srgb, var(--subject-color, #2563eb) 90%, #fff), rgba(37,99,235,0.35));
  animation: bubbleFill .9s cubic-bezier(.34,1.56,.64,1);
  transform-origin: bottom;
  transition:height .6s ease;
}
.subject-bubble .bubbles {
  position:absolute;
  inset:10px;
  border-radius:50%;
  pointer-events:none;
}
.subject-bubble .bubbles::after {
  content:'';
  position:absolute;
  width:5px; height:5px;
  background:rgba(255,255,255,0.8);
  border-radius:50%;
  left:50%; top:70%;
  box-shadow:
    -10px -6px 0 0 rgba(255,255,255,0.35),
    6px -2px 0 0 rgba(255,255,255,0.35),
    3px -10px 0 0 rgba(255,255,255,0.25);
  animation: bubbleRise 1.6s ease-in infinite;
}
.subject-bubble.small { width:56px; height:56px; }
.subject-bubble:hover { transform:translateY(-4px); box-shadow:0 14px 20px rgba(15,23,42,0.12); }
.subject-bubble.small strong { font-size:.85rem; }
.subject-bubble.small span { font-size:.7rem; }

.recent-card { display:grid; gap:10px; }
.recent-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.recent-list li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); border-radius:12px; }

.quick-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.quick-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.quick-lessons-grid {
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.quick-lesson {
  border:1px solid rgba(15,23,42,0.08);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(135deg, rgba(59,130,246,0.12), rgba(125,211,252,0.1));
  display:grid;
  gap:8px;
  min-width:0;
}

.quick-lesson strong { font-size:1rem; }
.quick-lesson .muted { font-size:.85rem; }
.quick-lesson .chip { background:rgba(15,23,42,0.1); }

.adaptive-card {
  display:grid;
  gap:18px;
}

.adaptive-difficulty {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.adaptive-grid {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.adaptive-item {
  border:1px solid rgba(15,23,42,0.08);
  border-radius:16px;
  background:rgba(255,255,255,0.92);
  padding:16px;
  display:grid;
  gap:12px;
  justify-content:space-between;
}

.adaptive-item h3 { margin:6px 0; font-size:1.05rem; }

.difficulty-pill {
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  background:rgba(37,99,235,0.12);
  color:var(--accent-strong);
  padding:6px 14px;
  font-size:.85rem;
  margin-right:8px;
}

.difficulty-pill .label { text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; }

.events-card {
  display:grid;
  gap:18px;
}

.events-list {
  display:grid;
  gap:14px;
}
.event-card {
  border:1px solid rgba(15,23,42,0.1);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(255,255,255,0.92);
  box-shadow:0 8px 14px rgba(15,23,42,0.06);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.event-item {
  border:1px solid rgba(15,23,42,0.08);
  border-radius:16px;
  padding:16px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  background:rgba(15,23,42,0.03);
}

.event-item.active { border-color:rgba(37,99,235,0.35); background:rgba(59,130,246,0.12); }
.event-item.upcoming { border-color:rgba(34,197,94,0.25); background:rgba(34,197,94,0.12); }

.event-meta {
  display:grid;
  gap:6px;
  justify-items:flex-end;
}

.event-rewards {
  list-style:none;
  margin:0;
  padding:0;
  flex:1 1 100%;
  display:grid;
  gap:4px;
}

.event-rewards li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:.82rem;
  background:rgba(255,255,255,0.8);
  border-radius:12px;
  padding:6px 10px;
}

.event-rewards li em {
  font-style:normal;
  color:rgba(15,23,42,0.6);
  font-size:.75rem;
}

.league-wrap {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

.league-block {
  border:1px solid rgba(15,23,42,0.08);
  border-radius:16px;
  background:rgba(255,255,255,0.92);
  padding:14px;
}

.league-block h4 { margin:0 0 8px; font-size:1rem; }
.league-block ol { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.league-block li { display:flex; justify-content:space-between; gap:12px; font-size:.9rem; }

.buddy-preview {
  border:1px dashed rgba(37,99,235,0.35);
  border-radius:16px;
  padding:14px 16px;
  background:rgba(226,232,240,0.35);
}

.buddy-inline {
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.buddy-inline.active { background:rgba(34,197,94,0.16); border-radius:12px; padding:10px 12px; }

.anki-shell {
  display:grid;
  gap:18px;
  padding:24px 0 48px;
  max-width:860px;
  margin:0 auto;
  text-align:center;
}

.anki-header {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
}
.anki-header h2 { margin:4px 0; font-size:1rem; line-height:1.25; }
.anki-header .chip { font-size:.78rem; }

.anki-header-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}

.anki-header-actions label {
  display:grid;
  gap:4px;
  font-size:.85rem;
}

.anki-header-buttons {
  display:flex;
  gap:8px;
}
.anki-header-buttons .btn { white-space:nowrap; }
.anki-header-buttons .btn.active { background:var(--accent); color:#fff; }

.anki-card {
  position:relative;
  min-height:220px;
  border-radius:20px;
  border:1px solid rgba(15,23,42,0.08);
  background:linear-gradient(135deg, rgba(255,255,255,0.98), rgba(226,232,240,0.65));
  padding:28px;
  overflow:hidden;
  perspective: 1200px;
}

.anki-card .anki-face {
  position:absolute;
  inset:0;
  padding:28px;
  transition:opacity .25s ease, transform .45s ease;
  opacity:0;
  display:grid;
  gap:12px;
  font-size:1.1rem;
  line-height:1.6;
  place-content:center;
  text-align:center;
  backface-visibility:hidden;
  transform: rotateY(0deg);
}

.anki-card .anki-face.front { opacity:1; transform: rotateY(0deg); }
.anki-card.revealed .anki-face.front { opacity:0; transform: rotateY(180deg); }
.anki-card .anki-face.back { transform: rotateY(-180deg); }
.anki-card.revealed .anki-face.back { opacity:1; transform: rotateY(0deg); }

.anki-label {
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.anki-tags {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.anki-due {
  margin-top:auto;
}

.anki-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  justify-content:center;
}

.anki-grade {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

.anki-grade .btn {
  min-width:110px;
}

.anki-reveal {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

.anki-progress {
  text-align:center;
}
.anki-progress-bar { display:grid; gap:4px; margin-bottom:6px; }
.anki-progress-bar .bar { height:6px; background:var(--line); border-radius:999px; overflow:hidden; }
.anki-progress-bar .bar span { display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-strong)); }

.anki-sparkline { margin-top:10px; }
.sparkline-head { display:flex; justify-content:space-between; align-items:center; font-size:.9rem; }
.sparkline-bars { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; align-items:end; }
.spark-bar { text-align:center; position:relative; height:70px; display:grid; gap:4px; align-content:end; }
.spark-bar span { display:block; width:100%; background:linear-gradient(180deg, rgba(37,99,235,0.6), rgba(37,99,235,0.25)); border-radius:6px 6px 0 0; }
.spark-bar small { font-size:.7rem; color:var(--muted); }

.anki-dark .anki-card {
  background:linear-gradient(135deg, #0b172f, #0f243d);
  color:#e2e8f0;
}
.anki-dark .anki-card .anki-face { color:#e2e8f0; }
.anki-dark .anki-card .anki-face .muted { color:#94a3b8; }
.anki-dark .btn { border-color:rgba(255,255,255,0.2); color:#e2e8f0; }
.anki-dark .spark-bar span { background:linear-gradient(180deg, rgba(96,165,250,0.8), rgba(37,99,235,0.35)); }

@media (max-width:720px){
  .anki-grade .btn,
  .anki-reveal .btn { width:100%; justify-content:center; }
}

.anki-grade {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.anki-grade .btn {
  min-width:110px;
}

.anki-progress {
  display:grid;
  gap:12px;
}

.anki-stats-grid {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.anki-stats-grid div {
  background:rgba(15,23,42,0.04);
  border-radius:12px;
  padding:10px 14px;
  min-width:120px;
}

.anki-stats-grid.compact div {
  min-width:90px;
}

.anki-stats-grid span {
  display:block;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:4px;
}

.anki-stats-grid strong {
  font-size:1.4rem;
}

.pomodoro-launcher {
  position:fixed;
  right:24px;
  bottom:24px;
  border:none;
  border-radius:999px;
  padding:10px 16px;
  font-weight:600;
  background:linear-gradient(120deg,#38bdf8,#6366f1);
  color:#fff;
  box-shadow:0 14px 28px rgba(15,23,42,0.25);
  cursor:pointer;
  z-index:3990;
}

.pomodoro-launcher:hover {
  opacity:0.92;
}

.hero-text h1 {
  margin:0 0 8px;
  font-size:2.1rem;
}

.hero-text p {
  margin:0 0 16px;
  max-width:500px;
}

.hero-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.65);
  color:var(--accent-strong);
  font-weight:600;
  margin-bottom:14px;
}

.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }

.hero-metrics {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:14px;
}

@media (min-width:1280px){
  .hero-metrics {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

.metric-card {
  border-radius:14px;
  padding:16px;
  background:rgba(255,255,255,0.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 12px 22px rgba(15,23,42,0.08);
}

.metric-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; }
.metric-value { font-size:2rem; font-weight:700; }
.metric-sub { font-size:.75rem; color:var(--muted); margin-top:6px; }

.study-filters {
  display:grid;
  gap:14px;
  padding:16px 16px 18px;
}

.filters-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  overflow-x:auto;
  overscroll-behavior-x:contain;
}

.filter-toggles {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.filter-toggles.secondary {
  margin-top:4px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:4px;
}
.filter-toggles.secondary::-webkit-scrollbar { display:none; }

.filter-toggles .chip {
  background:rgba(15,23,42,0.06);
  cursor:pointer;
  transition:all .2s ease;
}
.filter-toggles .chip.active {
  background:var(--accent);
  color:#fff;
  box-shadow:0 12px 20px rgba(29,78,216,0.18);
}

.filters-meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin:6px 0 4px;
  flex-wrap:wrap;
}

.filters-grid {
  display:grid;
  gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items:end;
}
.filters-grid.compact { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.filter-toggles.grabbing, .filter-tags.grabbing { cursor:grabbing; }

.filter-control {
  display:grid;
  gap:8px;
  font-size:.85rem;
  min-width:140px;
}
.filter-control span { font-size:.82rem; color:var(--muted); }
.filter-control.search-compact { grid-column:auto; max-width:240px; }
.filter-control.search-compact .search-wrap { position:relative; display:flex; align-items:center; }
.filter-control.search-compact input { font-size:.95rem; min-width:170px; padding-right:34px; }
.filter-control.search-compact #filterSearchClear {
  position:absolute;
  right:6px;
  background:transparent;
  border:1px solid var(--line);
  width:26px;
  height:26px;
  border-radius:8px;
  cursor:pointer;
  display:grid;
  place-items:center;
}

.filter-control input,
.filter-control select {
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.12);
  padding:9px 12px;
  font-size:1rem;
  background:rgba(255,255,255,0.9);
  transition:border .2s ease, box-shadow .2s ease;
}

.filter-control input:focus,
.filter-control select:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,0.18);
}

.filter-control.wide { grid-column: 1 / -1; }

.filter-tags {
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  margin-top:4px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:none;
}
.filter-tags.collapsed { max-height: 42px; overflow:hidden; }
.filter-tags::-webkit-scrollbar { display:none; }

.tag-chip {
  border-radius:999px;
  padding:6px 14px;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.85);
  color:var(--accent-strong);
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 10px 18px rgba(29,78,216,0.07);
}

.tag-chip:hover,
.tag-chip.active {
  background:var(--accent-strong);
  color:#fff;
  border-color:transparent;
  box-shadow:0 14px 20px rgba(37,99,235,0.18);
}

.legend {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:8px;
  font-size:.9rem;
  color:var(--muted);
}
.legend .legend-item { display:flex; gap:6px; align-items:center; padding:6px 10px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,0.8); }
.legend-dot { width:12px; height:12px; border-radius:999px; display:inline-block; }
.legend .low .legend-dot { background:#f87171; }
.legend .mid .legend-dot { background:#fbbf24; }
.legend .high .legend-dot { background:#22c55e; }

.onboarding-pop {
  margin:8px 0 16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.92);
}
.checklist-card ul { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.checklist-card li { display:flex; align-items:center; gap:8px; }
.checklist-card input[type="checkbox"] { width:18px; height:18px; }
.goals-card { margin-top:12px; }
.goals-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.goal-bar { height:10px; background:rgba(15,23,42,0.08); border-radius:999px; overflow:hidden; }
.goal-bar span { display:block; height:100%; background:var(--accent); width:0; transition:width .2s ease; }

.fav-tags {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:6px;
}

.subject-catalog {
  display:grid;
  gap:20px;
}

.subject-block {
  display:grid;
  gap:12px;
  padding-bottom:8px;
}

.subject-header {
  display:flex;
  align-items:center;
  gap:12px;
  padding:4px 6px;
  border-bottom:1px solid rgba(15,23,42,0.06);
}

.subject-block {
  border-left:4px solid rgba(37,99,235,0.3);
  border-left-color: color-mix(in srgb, var(--subject-color, #2563eb) 45%, #e2e8f0);
  padding-left:12px;
}

.subject-header-icon {
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:1.6rem;
  background:rgba(37,99,235,0.12);
  background:color-mix(in srgb, var(--subject-color, #2563eb) 18%, #f8fafc);
  color:var(--subject-color, #2563eb);
}

.subject-header h2 {
  margin:0;
  font-size:1.15rem;
}

.subject-sub {
  font-size:.8rem;
  color:var(--muted);
  margin-top:4px;
}

.subject-grid {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.bundle-card {
  position:relative;
  display:grid;
  gap:10px;
  padding:clamp(14px, 2vw, 20px);
  border-radius:16px;
  border:1px solid rgba(15,23,42,0.08);
  background:linear-gradient(120deg, rgba(255,255,255,0.96), rgba(247,250,255,0.92));
  box-shadow:0 14px 26px rgba(15,23,42,0.1);
  overflow:hidden;
}

.bundle-card.locked {
  opacity:0.85;
}

.bundle-card.bundle-highlight {
  border-color:rgba(37,99,235,0.4);
  box-shadow:0 0 0 3px rgba(37,99,235,0.2), 0 18px 32px rgba(15,23,42,0.18);
}

.bundle-head {
  display:grid;
  grid-template-columns: 200px 1fr 140px;
  gap:10px;
  align-items:center;
}

@media (max-width:950px){
  .bundle-head { grid-template-columns: 1fr; }
  .bundle-reward { justify-self:flex-start; }
}

.bundle-visual {
  display:grid;
  place-items:center;
  position:relative;
}

.img-wrap {
  width:100%;
  border-radius:20px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,0.4);
  box-shadow:0 14px 22px rgba(15,23,42,0.12);
}

.img-wrap img { width:100%; height:100%; object-fit:cover; }

.progress-ring {
  position:absolute;
  bottom:-18px;
  right:-18px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:
    conic-gradient(var(--accent), calc(var(--value) * 1%), rgba(15,23,42,0.08) 0);
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:700;
  font-size:1.3rem;
  box-shadow:0 12px 24px rgba(37,99,235,0.3);
}

.progress-ring span {
  background:var(--accent-strong);
  border-radius:50%;
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
}

.bundle-summary h3 { margin:6px 0 12px; font-size:clamp(1.05rem, 1.2vw, 1.35rem); }

.summary-top {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.subject-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:6px 14px;
  font-size:.78rem;
  font-weight:600;
  border:1px solid var(--subject-accent, rgba(37,99,235,0.45));
  background:rgba(255,255,255,0.92);
  color:var(--subject-accent, #1d4ed8);
  box-shadow:0 2px 6px rgba(15,23,42,0.08);
}

.subject-icon { font-size:1.1rem; }

.track-pill,
.level-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:6px 12px;
  font-size:.78rem;
  font-weight:600;
  background:rgba(15,23,42,0.05);
  color:var(--muted);
}

.summary-stats {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font-size:.85rem;
  font-weight:600;
  color:var(--muted);
}

.bundle-reward {
  display:grid;
  gap:8px;
  justify-items:center;
  text-align:center;
  padding:18px;
  border-radius:20px;
  background:rgba(37,99,235,0.12);
  color:var(--accent-strong);
  box-shadow:0 12px 18px rgba(37,99,235,0.14);
}

.reward-pill {
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.75rem;
}

.reward-xp { font-size:1.8rem; font-weight:800; }

.bundle-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.bundle-body {
  border-radius:18px;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(15,23,42,0.06);
  padding:0 20px;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease, padding .35s ease;
}

.bundle-card.expanded .bundle-body {
  max-height:960px;
  padding:20px;
}

.bundle-body-grid {
  display:grid;
  gap:18px;
  grid-template-columns:minmax(260px,0.9fr) minmax(0,1.1fr);
  align-items:flex-start;
}

@media (max-width:1100px){
  .bundle-body-grid {
    grid-template-columns:1fr;
  }
}

.card-tight {
  border-radius:16px;
  border:1px dashed rgba(15,23,42,0.15);
  padding:16px;
  background:rgba(240,245,255,0.6);
}

.bundle-modules {
  display:grid;
  gap:16px;
}

.bundle-section {
  display:grid;
  gap:12px;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,0.06);
  background:rgba(248,250,255,0.72);
}

.bundle-section-head {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.bundle-section-head h4 {
  margin:0;
  font-size:1rem;
}

.bundle-section-index {
  font-weight:700;
  font-size:.82rem;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(37,99,235,0.14);
  color:var(--accent-strong);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.bundle-items {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.bundle-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(15,23,42,0.03);
  border:1px solid rgba(15,23,42,0.06);
}

.item-info {
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.item-index {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(37,99,235,0.15);
  color:var(--accent-strong);
  font-weight:700;
  font-size:.85rem;
}

.item-content strong { display:block; }
.item-content .item-kind {
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--accent-strong);
  font-weight:700;
}

.item-preview {
  margin-top:8px;
}

.anki-preview {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}

.anki-preview li {
  background:rgba(59,130,246,0.08);
  border-radius:12px;
  padding:8px 12px;
  display:grid;
  gap:4px;
}

.anki-front { font-weight:600; }
.anki-back { color:var(--muted); font-size:.9rem; }
.anki-meta { font-size:.75rem; color:rgba(37,99,235,0.75); text-transform:uppercase; letter-spacing:.02em; }

.item-actions {
  display:flex;
  gap:10px;
  align-items:center;
}

.item-lock { font-size:1rem; }

.bundle-card.locked .bundle-body,
.bundle-card.locked .bundle-actions .btn:not(.ghost) {
  filter:blur(1px);
  pointer-events:none;
}

.bundle-lock-overlay {
  position:absolute;
  inset:0;
  backdrop-filter:blur(6px);
  background:linear-gradient(180deg, rgba(15,23,42,0.2), rgba(15,23,42,0.6));
  color:#fff;
  display:grid;
  place-items:center;
  padding:32px;
  text-align:center;
}

.bundle-lock-overlay .btn { margin-top:12px; }

.empty-card {
  text-align:center;
  padding:34px;
}

.skeleton-grid {
  display:grid;
  gap:16px;
}

.skeleton-card {
  height:180px;
  border-radius:18px;
  background:linear-gradient(120deg, rgba(231,238,255,0.7), rgba(215,226,255,0.5));
  animation:pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%,100% { opacity:0.65; }
  50% { opacity:1; }
}

@keyframes bubbleFill {
  0% { height:0%; }
  100% { height:var(--subject-fill, 0%); }
}
@keyframes bubbleRise {
  0% { transform:translateY(0); opacity:1; }
  100% { transform:translateY(-6px); opacity:0.55; }
}

.standalone-card h3 {
  margin:0 0 6px;
}

.standalone-columns {
  display:grid;
  gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.standalone-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.standalone-list li {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(15,23,42,0.03);
}

.standalone-list.locked li {
  opacity:0.6;
}

.toast-area {
  position:fixed;
  bottom:24px;
  right:24px;
  display:grid;
  gap:10px;
  z-index:200;
}

.toast {
  background:var(--card);
  border-radius:12px;
  padding:12px 16px;
  border:1px solid rgba(15,23,42,0.08);
  box-shadow:0 12px 24px rgba(15,23,42,0.12);
  opacity:0;
  transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease;
  font-weight:600;
}

.toast.visible {
  opacity:1;
  transform:translateY(0);
}

.toast-warn { background:rgba(245,158,11,0.15); color:#92400e; border-color:rgba(245,158,11,0.4); }
.toast-info { background:rgba(59,130,246,0.15); color:#1d4ed8; border-color:rgba(59,130,246,0.4); }
.toast-error { background:rgba(248,113,113,0.18); color:#b91c1c; border-color:rgba(248,113,113,0.45); }

.hero {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:32px;
  align-items:center;
}

.hero h1 { margin:0; font-size:2.6rem; line-height:1.15; font-weight:800; }
.hero p { margin:10px 0 18px; color:var(--muted); }

.hero-illustration {
  border-radius:var(--radius);
  padding:28px;
  background:
    radial-gradient(120% 120% at 85% 15%, rgba(37,99,235,0.14), transparent 60%),
    radial-gradient(100% 100% at 10% 90%, rgba(45,212,191,0.18), transparent 68%),
    var(--bg-accent);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:260px;
}

.hero-bubble { display:flex; gap:12px; align-items:center; background:rgba(255,255,255,0.6); border-radius:14px; padding:10px 14px; box-shadow:0 12px 20px rgba(15,23,42,0.08); }

.feature-grid { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.feature-card { background:var(--card); border-radius:var(--radius); padding:20px; border:1px solid rgba(15,23,42,0.06); box-shadow:var(--shadow); }
.feature-card h3 { margin-top:0; }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.stat-card { padding:18px; border-radius:var(--radius); background:var(--accent-soft); color:var(--accent-strong); display:flex; flex-direction:column; gap:6px; }
.stat-card strong { font-size:1.6rem; }

.steps { counter-reset:step; }
.steps li { list-style:none; margin:0; padding-left:46px; position:relative; margin-bottom:14px; }
.steps li::before {
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:0; top:2px;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-strong);
  display:grid;
  place-items:center;
  font-weight:700;
}

.profile-summary { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

.profile-card.materials .materials-mini { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.profile-card.materials .materials-mini li { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:12px; border-radius:12px; background:rgba(15,23,42,0.04); }

.profile-card.materials .materials-mini .chip { background:rgba(37,99,235,0.12); color:var(--accent-strong); }
.timeline-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.timeline-row:last-child { border-bottom:none; }

.subscriptions-list { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.subscriptions-list li { padding:12px; border-radius:14px; border:1px solid rgba(15,23,42,0.08); background:rgba(15,23,42,0.02); display:flex; justify-content:space-between; align-items:center; gap:12px; }

.empty-state { padding:24px; border-radius:var(--radius); background:rgba(15,23,42,0.04); text-align:center; color:var(--muted); }

.badge-cta { background:rgba(59,130,246,0.12); color:var(--accent-strong); padding:6px 14px; border-radius:999px; font-size:.78rem; font-weight:600; display:inline-block; }
.demo-chip { display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:6px 12px; border-radius:999px; background:rgba(59,130,246,0.15); color:var(--accent-strong); font-weight:600; font-size:.78rem; }

.timeline { display:grid; gap:12px; }
.timeline-item { padding:14px; border-radius:14px; border:1px solid rgba(15,23,42,0.08); background:var(--card); display:flex; flex-direction:column; gap:6px; }

.kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.kpi .box { padding:14px; border-radius:14px; border:1px solid rgba(15,23,42,0.08); background:rgba(59,130,246,0.08); }
.kpi .big { font-size:1.8rem; font-weight:800; }

.hero-cta { display:flex; gap:10px; flex-wrap:wrap; }

.onboarding-video { flex:1 1 320px; border-radius:20px; overflow:hidden; box-shadow:0 18px 32px rgba(15,23,42,0.18); background:rgba(15,23,42,0.1); }
.onboarding-video iframe { width:100%; min-height:220px; border:0; display:block; }

.sample-lecture {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
}

.sample-lecture-text {
  flex:1 1 340px;
  display:grid;
  gap:12px;
}

.sample-lecture-list {
  margin:0;
  padding-left:20px;
  color:var(--muted);
  font-size:.9rem;
}

.sample-lecture-video {
  flex:1 1 360px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 32px rgba(15,23,42,0.18);
  background:rgba(15,23,42,0.1);
}

.sample-lecture-video iframe {
  width:100%;
  min-height:240px;
  border:0;
  display:block;
}

.med-player {
  display:grid;
  gap:12px;
  background:rgba(15,23,42,0.03);
  padding:16px;
  border-radius:18px;
  box-shadow:0 12px 22px rgba(15,23,42,0.12);
}

.med-player-shell {
  display:grid;
  gap:8px;
}

.med-player-video {
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#000;
}

.med-player video {
  width:100%;
  display:block;
  background:#000;
}

.med-player-overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.med-player-overlay .med-player-toggle {
  pointer-events:auto;
  border:none;
  border-radius:50%;
  width:68px;
  height:68px;
  background:rgba(15,23,42,0.65);
  color:#fff;
  font-size:2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 30px rgba(15,23,42,0.35);
  transition:transform .2s ease, opacity .2s ease;
}

.med-player-overlay .med-player-toggle:hover {
  transform:scale(1.05);
  opacity:0.9;
}

.med-player-controls {
  display:grid;
  gap:10px;
  background:rgba(255,255,255,0.9);
  border-radius:16px;
  padding:12px;
}

.med-player-row {
  display:flex;
  align-items:center;
  gap:12px;
}

.med-player-row-bottom {
  justify-content:space-between;
  flex-wrap:wrap;
}

.med-player-btn {
  border:none;
  border-radius:10px;
  background:rgba(15,23,42,0.08);
  color:var(--accent-strong);
  padding:8px 12px;
  cursor:pointer;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background .15s ease, transform .15s ease;
}

.med-player-btn:hover {
  background:rgba(37,99,235,0.18);
}

.med-player-timeline {
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
}

.med-player-range {
  width:100%;
  cursor:pointer;
}

.med-player-markers {
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  height:100%;
  pointer-events:none;
}

.med-player-marker {
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%);
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid rgba(37,99,235,0.35);
  background:#fff;
  pointer-events:auto;
  cursor:pointer;
}

.med-player-time {
  font-family:monospace;
  font-size:.85rem;
  color:var(--muted);
  min-width:110px;
  text-align:right;
}

.med-player-speed {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  color:var(--muted);
}

.med-player-speed select {
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.12);
  padding:6px 10px;
  background:rgba(255,255,255,0.92);
}

.med-player-extras {
  display:grid;
  gap:12px;
}

.med-player-chapter-list,
.med-player-note-list {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}

.med-player-chapter-jump,
.med-player-note-jump {
  border:none;
  background:rgba(37,99,235,0.12);
  color:var(--accent-strong);
  border-radius:999px;
  padding:4px 10px;
  font-size:.8rem;
  cursor:pointer;
}

.med-player-note-list li {
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border-radius:10px;
  background:rgba(148,163,184,0.08);
}

.med-player-note-list li.active {
  border:1px solid rgba(37,99,235,0.35);
  background:rgba(37,99,235,0.12);
}

.med-player-row-bottom { margin-top:10px; display:flex; gap:8px; justify-content:center; }
.med-player-cta { text-align:center; }
.med-player-cta-box { padding:12px; border:1px dashed var(--line); border-radius:12px; background:rgba(59,130,246,0.06); display:inline-block; }
.med-player-cta-inner { border:1px solid var(--line); border-radius:14px; padding:12px; background:rgba(255,255,255,0.8); display:inline-block; text-align:left; }
.med-player-cta-title { font-weight:700; margin-bottom:4px; }
.med-player-cta-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.med-player-cta.visible { display:block; }
.med-player-shortcuts { margin-top:10px; font-size:.85rem; color:var(--muted); }
.med-player-loading video { opacity:0.35; filter:grayscale(0.3); }
.med-player-loading .med-player-range,
.med-player-loading .med-player-play { opacity:0.3; pointer-events:none; }

@media (max-width: 720px){
  .med-player {
    padding:12px;
  }
  .med-player-row {
    flex-wrap:wrap;
  }
  .med-player-time {
    text-align:left;
    min-width:auto;
  }
}

@keyframes fadeSlide {
  from { opacity:0; transform:translateY(16px); }
  to { opacity:1; transform:translateY(0); }
}

@keyframes pulseLine {
  0% { transform:scaleX(0.95); }
  50% { transform:scaleX(1); }
  100% { transform:scaleX(0.95); }
}

.loading-card {
  display:grid;
  gap:12px;
  justify-items:center;
  padding:40px 24px;
  text-align:center;
}

.loader {
  width:36px;
  height:36px;
  border-radius:50%;
  border:4px solid rgba(37,99,235,0.16);
  border-top-color:var(--accent-strong);
  animation:spin 1s linear infinite;
}

@keyframes spin {
  to { transform:rotate(360deg); }
}

.plan-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.plan-card { display:flex; flex-direction:column; gap:12px; }
.plan-card footer { display:flex; gap:8px; flex-wrap:wrap; }

.pricing-note { border-radius:var(--radius); padding:16px; background:var(--accent-soft); color:var(--accent-strong); }

.auth-background { background:linear-gradient(180deg,#eef3ff 0%, var(--bg) 45%, #eef3ff 100%); min-height:100vh; }

.auth-cards { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:.85rem; line-height:1.4; margin:4px 0; }
.consent input { margin-top:4px; }
.consent a { color:var(--accent-strong); }
.consent.optional { opacity:0.85; }

#view.quiz-active {
  max-width:960px;
  margin:0 auto;
  padding:0 24px 80px;
  display:block;
}

#view.quiz-active .card {
  margin-bottom:18px;
}

#view.quiz-active #btnNextBig {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 24px;
  font-size:1.05rem;
  font-weight:600;
  margin-top:12px;
}

#view.quiz-active .answers {
  gap:16px;
}

@media (max-width: 768px) {
  #view.quiz-active { padding:0 16px 72px; }
}

.cookie-banner { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); max-width:720px; width:calc(100% - 32px); background:rgba(15,23,42,0.92); color:#fff; border-radius:18px; padding:18px 22px; box-shadow:0 18px 40px rgba(15,23,42,0.25); z-index:9999; }
.cookie-inner { display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cookie-inner a { color:#93c5fd; text-decoration:underline; }
.cookie-actions { display:flex; gap:12px; }

.site-footer { margin-top:80px; background:rgba(15,23,42,0.06); padding:28px 0; }
.site-footer-inner { display:flex; flex-direction:column; gap:12px; }
.site-footer-inner .footer-links { display:flex; flex-wrap:wrap; gap:16px; }
.site-footer-inner .footer-links a { color:var(--accent-strong); font-size:.88rem; }
.legal { padding:48px 0 80px; }
.legal .card { line-height:1.7; gap:18px; }
.legal h1 { margin-bottom:12px; }
.legal h2 { margin-top:18px; }

.input { width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(15,23,42,0.14); background:rgba(255,255,255,0.88); color:inherit; transition:border .2s ease, box-shadow .2s ease; }
.select, select { width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(15,23,42,0.14); background:rgba(255,255,255,0.88); color:inherit; transition:border .2s ease, box-shadow .2s ease; appearance:none; }
.select:focus, select:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(29,78,216,0.18); }

.input:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(29,78,216,0.18); }

/* ===== QUIZ ===== */
.config-panel {
  position:sticky;
  top:92px;
  z-index:15;
  display:grid;
  gap:16px;
  padding:20px 24px;
  border-radius:20px;
}

@media (max-width:960px){
  .config-panel { top:76px; }
}

.config-panel-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}

.config-label {
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:700;
}

.config-panel-header h2 {
  margin:4px 0 6px;
  font-size:1.6rem;
}

.config-sub {
  margin:0;
  color:var(--muted);
  max-width:540px;
  font-size:.9rem;
}

.config-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.config-actions .btn { min-width:160px; }

.config-stats {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.config-stats .chip {
  background:rgba(15,23,42,0.07);
  color:var(--accent-strong);
  font-weight:600;
}

:root[data-theme="dark"] .config-stats .chip {
  background:rgba(59,130,246,0.18);
  color:#bfdbfe;
}

.config-grid {
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}

.config-field {
  display:grid;
  gap:6px;
  font-size:.85rem;
}

.config-count {
  display:grid;
  gap:6px;
}

.config-hints {
  font-size:.8rem;
  color:var(--muted);
  border-top:1px dashed rgba(15,23,42,0.1);
  padding-top:10px;
}

.config-intro {
  margin:18px auto;
  max-width:1100px;
  display:grid;
  gap:18px;
}

.config-intro-header {
  display:grid;
  gap:10px;
}

.config-intro-header h1 {
  margin:0;
  font-size:1.9rem;
}

.config-intro-grid {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.intro-box {
  border:1px solid rgba(15,23,42,0.08);
  border-radius:16px;
  padding:16px;
  background:rgba(248,250,255,0.8);
  display:grid;
  gap:10px;
}

:root[data-theme="dark"] .intro-box {
  background:rgba(30,41,59,0.45);
  border-color:rgba(148,163,184,0.18);
}

.stat-value {
  font-size:1.8rem;
  font-weight:800;
  color:var(--accent-strong);
}

.level-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}

.level-list li {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:.9rem;
}

.level-list li span:last-child {
  color:var(--muted);
  font-weight:600;
}

.config-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.config-tags .chip {
  background:rgba(37,99,235,0.12);
  border:1px solid rgba(37,99,235,0.22);
}

.chip.ghost {
  background:rgba(15,23,42,0.05);
  border:1px solid rgba(15,23,42,0.12);
  color:var(--accent-strong);
}

:root[data-theme="dark"] .chip.ghost {
  background:rgba(148,163,184,0.12);
  border-color:rgba(148,163,184,0.25);
  color:#e2e8f0;
}

.progress { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.pill { width:12px; height:12px; border-radius:999px; background:rgba(15,23,42,0.1); border:1px solid rgba(0,0,0,0.06); }
:root[data-theme="dark"] .pill { background:rgba(148,163,184,0.22); }
.pill.correct { background:var(--success); border-color:var(--success); }
.pill.wrong { background:var(--error); border-color:var(--error); }

.manual-override {
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  background:rgba(59,130,246,0.08);
  display:grid;
  gap:8px;
}

:root[data-theme="dark"] .manual-override {
  background:rgba(59,130,246,0.16);
}

.manual-override .manual-answer b {
  color:var(--accent-strong);
}

.topic-shell {
  display:grid;
  gap:18px;
  padding:32px 24px 56px;
  justify-items:center;
}

.topic-shell > * {
  width:100%;
  max-width:960px;
}

.topic-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}

.topic-header-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.topic-media {
  position:relative;
  padding-top:56.25%;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 32px rgba(15,23,42,0.18);
  background:#000;
  width:100%;
  max-width:960px;
  margin:0 auto;
}

.topic-media iframe,
.topic-media video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.topic-media.topic-media--player {
  padding:0;
  background:#020617;
  overflow:visible;
}

.topic-media.topic-media--player > [data-med-player] {
  position:static;
  display:block;
}

.topic-media.topic-media--player .med-player {
  box-shadow:none;
}

.topic-media.topic-media--player video {
  position:static;
  width:100%;
  height:auto;
}

.topic-media.placeholder {
  text-align:center;
  color:var(--muted);
  padding:20px;
}

.topic-attachments {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  max-width:960px;
  margin:0 auto;
}

.topic-attachment {
  border-radius:999px;
  padding:6px 12px;
  background:rgba(37,99,235,0.12);
  color:var(--accent-strong);
}

.topic-progress {
  margin-top:8px;
}

.topic-progress-bar {
  width:100%;
  height:6px;
  background:var(--line);
  border-radius:999px;
  overflow:hidden;
}

.topic-progress-bar span {
  display:block;
  height:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.topic-layout {
  display:grid;
  grid-template-columns:260px 1fr;
  gap:18px;
  align-items:start;
}

.topic-nav {
  position:sticky;
  top:12px;
  align-self:start;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:var(--card);
}

.topic-nav h3 {
  margin:0 0 8px;
}

.topic-nav-list {
  display:grid;
  gap:8px;
}

.topic-nav-btn {
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.topic-nav-btn.active {
  border-color:var(--accent);
  background:var(--accent-soft);
}

.topic-nav-check {
  color:var(--success);
  font-weight:700;
}

.topic-check {
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:12px;
  font-size:0.95rem;
}

.topic-content {
  display:grid;
  gap:16px;
  max-width:960px;
  margin:0 auto;
  width:100%;
}

.topic-card {
  border:1px solid rgba(15,23,42,0.06);
  border-radius:16px;
  padding:16px;
  background:rgba(255,255,255,0.92);
}

.topic-text { line-height:1.6; }

.topic-note {
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(59,130,246,0.12);
}

.topic-quiz {
  display:grid;
  gap:14px;
}

.topic-quiz-question {
  border:1px solid rgba(15,23,42,0.08);
  border-radius:16px;
  padding:12px 14px;
  background:rgba(248,250,255,0.92);
}

.topic-quiz-choices {
  display:grid;
  gap:10px;
  margin-top:10px;
}

.topic-quiz-choice {
  border:none;
  border-radius:12px;
  padding:10px 12px;
  text-align:left;
  background:rgba(15,23,42,0.08);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}

.topic-quiz-choice:hover { background:rgba(59,130,246,0.16); }
.topic-quiz-choice.correct { background:rgba(34,197,94,0.2); color:#166534; }
.topic-quiz-choice.wrong { background:rgba(239,68,68,0.18); color:#b91c1c; }
.topic-quiz-choice:disabled { cursor:default; opacity:0.9; }

.topic-quiz-feedback { margin-top:8px; color:var(--muted); }

.topic-comments.card {
  padding:24px;
}

.topic-comments .question-comments {
  margin:0;
  padding:0;
  border:none;
}

.question-comments {
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(15,23,42,0.1);
  display:grid;
  gap:12px;
}

:root[data-theme="dark"] .question-comments {
  border-top-color:rgba(148,163,184,0.22);
}

.comments-head {
  font-weight:700;
  font-size:1rem;
}

.comment-form textarea {
  min-height:72px;
  resize:vertical;
}

.comment-form-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.comment-form.busy {
  opacity:0.65;
  pointer-events:none;
}

.comment-list {
  display:grid;
  gap:12px;
}

.comment-item {
  border:1px solid rgba(15,23,42,0.08);
  border-radius:12px;
  padding:12px 14px;
  background:rgba(248,250,255,0.85);
  display:grid;
  gap:8px;
}

:root[data-theme="dark"] .comment-item {
  background:rgba(30,41,59,0.45);
  border-color:rgba(148,163,184,0.22);
}

.comment-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.8rem;
  color:var(--muted);
  gap:12px;
}

.comment-body {
  font-size:.95rem;
  line-height:1.5;
}

.comment-footer {
  display:flex;
  gap:12px;
  align-items:center;
}

.comment-like {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:6px 12px;
  background:rgba(15,23,42,0.06);
  border:1px solid transparent;
  font-size:.85rem;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}

.comment-like:hover {
  background:rgba(37,99,235,0.12);
}

.comment-like.liked {
  background:rgba(37,99,235,0.18);
  color:var(--accent-strong);
  border-color:rgba(37,99,235,0.25);
}

:root[data-theme="dark"] .comment-like {
  background:rgba(148,163,184,0.16);
}

:root[data-theme="dark"] .comment-like.liked {
  background:rgba(59,130,246,0.22);
  color:#bfdbfe;
  border-color:rgba(59,130,246,0.35);
}

.pomodoro-widget {
  position:fixed;
  right:24px;
  bottom:24px;
  width:260px;
  border-radius:18px;
  background:rgba(15,23,42,0.95);
  color:#fff;
  box-shadow:0 22px 38px rgba(15,23,42,0.35);
  padding:16px;
  z-index:4000;
  display:grid;
  gap:12px;
  font-family:'Inter', sans-serif;
  cursor:grab;
  touch-action:none;
}

.pomodoro-widget .pomodoro-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.95rem;
}

.pomodoro-header-actions button {
  border:none;
  background:rgba(255,255,255,0.1);
  color:#fff;
  border-radius:8px;
  padding:4px 8px;
  cursor:pointer;
}

.pomodoro-main {
  text-align:center;
  display:grid;
  gap:4px;
}

.pomodoro-mode {
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(255,255,255,0.7);
  font-size:.75rem;
}

.pomodoro-time {
  font-size:2.4rem;
  font-weight:700;
  letter-spacing:1px;
}

.pomodoro-controls {
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.pomodoro-controls button {
  flex:1;
  border:none;
  border-radius:12px;
  padding:8px 10px;
  font-weight:600;
  cursor:pointer;
  background:rgba(59,130,246,0.25);
  color:#fff;
}

.pomodoro-controls button:hover {
  background:rgba(59,130,246,0.45);
}

.pomodoro-banner {
  background:rgba(255,255,255,0.12);
  border-radius:12px;
  padding:8px 10px;
  text-align:left;
}

.pomodoro-settings {
  display:grid;
  gap:10px;
  background:rgba(255,255,255,0.08);
  border-radius:14px;
  padding:10px;
  font-size:.8rem;
}

.pomodoro-setting label {
  display:grid;
  gap:6px;
}

.pomodoro-setting input,
.pomodoro-setting select {
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(15,23,42,0.6);
  color:#fff;
  padding:6px 8px;
}

.pomodoro-setting input[type="range"] {
  width:100%;
  padding:0;
}

.pomodoro-footer {
  text-align:center;
}

.pomodoro-collapsed {
  width:auto;
  height:auto;
  min-width:120px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.pomodoro-collapsed .pomodoro-settings,
.pomodoro-collapsed .pomodoro-controls,
.pomodoro-collapsed .pomodoro-footer {
  display:none;
}

.pomodoro-collapsed .pomodoro-time {
  font-size:1.6rem;
}

.pomodoro-hidden {
  display:none !important;
}

@media (max-width: 768px){
  .pomodoro-widget {
    right:16px;
    bottom:16px;
    width:220px;
    font-size:.9rem;
  }
  .pomodoro-launcher {
    right:16px;
    bottom:16px;
  }
}

.timer { display:flex; gap:8px; align-items:center; }
.timer .bar { flex:1; height:8px; border-radius:999px; background:rgba(148,163,184,0.2); overflow:hidden; }
.timer .fill { height:100%; width:100%; background:linear-gradient(90deg,#38bdf8,#2563eb); }

.summary-gamification { margin-top:18px; display:grid; gap:12px; }
.summary-gamification-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; align-items:flex-start; }
.summary-xp { font-size:1.8rem; font-weight:800; color:var(--accent-strong); }
.summary-level { font-size:1.6rem; font-weight:800; }
.summary-streak { font-size:1.6rem; font-weight:800; }
.summary-achievements { display:flex; flex-wrap:wrap; gap:8px; }

.roadmap-shell { padding:38px 0 60px; display:grid; gap:24px; }
.roadmap-hero { display:grid; gap:18px; background:linear-gradient(120deg, rgba(59,130,246,0.1), rgba(129,140,248,0.08)); }
.roadmap-stats { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.missions-list { display:grid; gap:14px; }
.mission-card { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:18px; border-radius:16px; border:1px solid rgba(15,23,42,0.08); background:rgba(255,255,255,0.92); }
.mission-progress { display:flex; align-items:center; gap:12px; min-width:200px; }
.mission-bar { flex:1; height:8px; border-radius:999px; background:rgba(148,163,184,0.25); overflow:hidden; }
.mission-bar span { display:block; height:100%; background:linear-gradient(90deg,#38bdf8,#2563eb); }
.achievements-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.achievement-card { display:flex; gap:14px; align-items:flex-start; padding:16px; border-radius:16px; border:1px solid rgba(15,23,42,0.08); background:rgba(255,255,255,0.92); }
.achievement-card .icon { font-size:1.8rem; }
.roadmap-leaderboard .chip.selectable { cursor:pointer; opacity:0.8; }
.roadmap-leaderboard .chip.selectable.active { background:var(--accent); color:#fff; opacity:1; }
.leaderboard-table { overflow-x:auto; }
.leaderboard-table table { width:100%; border-collapse:collapse; }
.leaderboard-table th, .leaderboard-table td { padding:10px 12px; border-bottom:1px solid rgba(15,23,42,0.08); text-align:left; }
.table-scroll { overflow-x:auto; }
.table-scroll .table { width:100%; border-collapse:collapse; }
.table-scroll .table th, .table-scroll .table td { padding:10px 12px; border-bottom:1px solid rgba(15,23,42,0.08); text-align:left; }

.payment-shell { padding:38px 0 60px; }
.payment-status-card { display:grid; gap:16px; }
.payment-actions { display:flex; flex-wrap:wrap; gap:12px; }
.payment-summary { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.payment-alert { padding:12px 16px; border-radius:12px; font-weight:600; }
.payment-alert.info { background:rgba(59,130,246,0.12); color:#1d4ed8; }
.payment-alert.success { background:rgba(34,197,94,0.16); color:#047857; }
.payment-alert.error { background:rgba(248,113,113,0.18); color:#b91c1c; }

.micro-lessons-list { display:grid; gap:16px; }
.micro-lesson-card { cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.micro-lesson-card:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(15,23,42,0.12); }
.lesson-body { display:grid; gap:12px; line-height:1.65; }
.lesson-body h1, .lesson-body h2, .lesson-body h3 { margin:12px 0; }
.micro-checklist { list-style:disc; padding-left:20px; display:grid; gap:6px; }
.note-section { display:grid; gap:12px; }
.notes-list { display:grid; gap:10px; }
.notes-list li {
  list-style:none;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(255,255,255,0.9);
  display:grid;
  gap:6px;
}
.notes-list li p { margin:0; line-height:1.5; }

.flags-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.flags-list li {
  border:1px dashed rgba(37,99,235,0.3);
  border-radius:14px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:rgba(226,232,240,0.35);
}

.buddy-card {
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.08);
  background:rgba(59,130,246,0.08);
  padding:16px;
  display:grid;
  gap:12px;
}
.buddy-card .buddy-stats {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-size:.9rem;
}
.buddy-card .buddy-stats span {
  display:block;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(15,23,42,0.6);
}
.buddy-card.active { background:rgba(34,197,94,0.12); border-color:rgba(34,197,94,0.25); }

.forecast {
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.08);
  background:rgba(255,255,255,0.9);
  padding:18px;
  display:grid;
  gap:10px;
  text-align:center;
}
.forecast-value {
  font-size:2.2rem;
  font-weight:700;
  color:var(--accent-strong);
}
.note-card { border:1px solid rgba(15,23,42,0.12); border-radius:14px; padding:12px 14px; background:rgba(255,255,255,0.82); display:grid; gap:8px; }
.note-card p { margin:0; line-height:1.5; }
.note-meta { font-weight:600; }
.note-actions { display:flex; justify-content:flex-end; }
.link-like { border:none; background:none; padding:0; color:var(--accent-strong); cursor:pointer; text-decoration:underline; font-weight:600; font-size:.92rem; }
.link-like:hover { color:var(--accent); }
.resource-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.resource-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.resource-list .tag { background:rgba(148,163,184,0.18); padding:4px 10px; border-radius:999px; }
.study-paths { display:grid; gap:18px; }
.path-group { display:grid; gap:12px; }
.path-grid { display:grid; gap:14px; }
.path-card { border:1px solid rgba(15,23,42,0.08); border-radius:16px; padding:18px; display:grid; gap:10px; background:rgba(255,255,255,0.92); transition:box-shadow .2s ease; }
.path-card:hover { box-shadow:0 18px 32px rgba(15,23,42,0.12); }
.path-progress { width:100%; height:6px; border-radius:999px; background:rgba(148,163,184,0.25); overflow:hidden; }
.path-progress div { height:100%; background:linear-gradient(90deg,#38bdf8,#6366f1); transition:width .3s ease; }
.btn-flagged { background:rgba(250,204,21,0.18); color:#b45309; border-color:rgba(250,204,21,0.35); }
.filter-control.switch { position:relative; padding-right:56px; }
.filter-control.switch input { position:absolute; right:0; top:50%; transform:translateY(-50%); width:44px; height:24px; opacity:0; cursor:pointer; }
.filter-control.switch .switch-indicator { position:absolute; right:0; top:50%; transform:translateY(-50%); width:44px; height:24px; border-radius:999px; background:rgba(148,163,184,0.3); transition:background .2s ease, box-shadow .2s ease; }
.filter-control.switch .switch-indicator::after { content:''; position:absolute; top:3px; left:4px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s ease; box-shadow:0 2px 6px rgba(15,23,42,0.18); }
.filter-control.switch input:checked + .switch-indicator { background:linear-gradient(90deg,#38bdf8,#2563eb); }
.filter-control.switch input:checked + .switch-indicator::after { transform:translateX(18px); }

.question { font-size:1.4rem; font-weight:700; margin:12px 0; }
.answers { display:flex; flex-direction:column; gap:12px; }
.answer { padding:14px 16px; border-radius:14px; border:1px solid rgba(15,23,42,0.08); background:rgba(255,255,255,0.65); cursor:pointer; transition:transform .1s ease, border .1s ease, background .1s ease; }
.answer:hover { transform:translateY(-1px); border-color:var(--accent); }
.answer.correct { background:rgba(22,163,74,0.14); border-color:rgba(22,163,74,0.6); }
.answer.wrong { background:rgba(220,38,38,0.14); border-color:rgba(220,38,38,0.6); }

.btn-next {
  width:100%;
  margin:18px 0 12px;
  font-size:1.05rem;
  padding:16px;
}

.match { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:10px; }
.match .col { display:flex; flex-direction:column; gap:10px; }
.chip-left { background:rgba(15,23,42,0.04); border:1px dashed rgba(15,23,42,0.18); padding:12px; border-radius:12px; cursor:grab; }
.box-right { border:2px dashed rgba(29,78,216,0.35); border-radius:14px; padding:12px; background:rgba(29,78,216,0.05); position:relative; }
.box-right.has-link { border-style:solid; background:rgba(29,78,216,0.12); }
.box-right .unlink { display:none; position:absolute; right:10px; top:10px; border:none; background:rgba(15,23,42,0.4); color:#fff; width:22px; height:22px; border-radius:999px; cursor:pointer; }
.box-right.has-link .unlink { display:inline-flex; align-items:center; justify-content:center; }

.explanation { margin-top:14px; padding:14px; border-radius:14px; background:rgba(15,23,42,0.04); border:1px solid rgba(15,23,42,0.08); }
.textarea { min-height:120px; width:100%; padding:12px; border-radius:12px; border:1px solid rgba(15,23,42,0.14); background:rgba(255,255,255,0.7); color:inherit; }
.footer { display:flex; justify-content:space-between; align-items:center; margin-top:14px; }

.summary { max-width:760px; margin:0 auto; padding:16px; }
.center { display:flex; justify-content:center; gap:10px; }

/* Utility */
.text-right { text-align:right; }
.text-center { text-align:center; }
.highlight { color:var(--accent-strong); }

@media (max-width:960px) {
  .topbar .topbar-inner { flex-direction:column; align-items:flex-start; gap:16px; }
  .nav-toggle { display:flex; }
  .nav-cluster { width:100%; justify-content:space-between; display:none; }
  .topbar.open .nav-cluster { display:flex; flex-direction:column; align-items:flex-start; }
  .nav-links { flex-wrap:wrap; width:100%; }
  .nav-actions { width:100%; gap:12px; }
  .hero { grid-template-columns:1fr; }
  .study-columns { grid-template-columns:1fr; }
  .floating-card {
    position:static;
    width:100%;
    opacity:1;
  }
}

@media (max-width:680px) {
  .btn { width:100%; justify-content:center; }
  .nav-actions { width:100%; justify-content:space-between; flex-wrap:wrap; }
  .config .grid-3 { grid-template-columns:1fr; }
  .hero h1 { font-size:2.2rem; }
  .hero-illustration { min-height:220px; }
  .floating-card { display:none; }
}
.feature-card.learn-card { display:flex; flex-direction:column; gap:12px; }
.feature-card.learn-card h3 { margin:0; }
.feature-card.learn-card .row { margin-top:auto; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(15,23,42,0.06); color:var(--muted); font-size:.78rem; font-weight:600; }
.badge.gray { background:rgba(15,23,42,0.04); }

/* ===== Forum Q&A ===== */
.forum-card { position:relative; overflow:hidden; }
.forum-card h3 { margin:0 0 6px; }
.forum-card .forum-meta { flex:1; }
.forum-card .forum-stats { display:grid; grid-auto-flow:column; gap:16px; text-align:right; }
.forum-card .forum-stats div { background:rgba(15,23,42,0.04); padding:10px 14px; border-radius:12px; min-width:86px; }
.forum-card .forum-stats strong { display:block; font-size:1.2rem; font-weight:700; }

.forum-answer { border:1px solid rgba(15,23,42,0.08); background:rgba(255,255,255,0.85); }

.forum-answer .chip { background:rgba(22,163,74,0.18); color:#166534; }

.answer-section { border-top:1px solid rgba(15,23,42,0.06); padding-top:14px; }

.forum-hero { background-image:linear-gradient(105deg, rgba(59,130,246,0.08), rgba(59,130,246,0)); }

#askFormSection textarea { resize:vertical; }

.tag-chip { border:none; background:rgba(15,23,42,0.06); color:var(--text); padding:6px 12px; border-radius:999px; font-weight:600; cursor:pointer; transition:all .2s ease; }
.tag-chip.active, .tag-chip:hover { background:var(--accent); color:#fff; }

@media (max-width:820px) {
  .forum-card .forum-stats { grid-auto-flow:row; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); text-align:left; }
}

/* ===== Blog / Centrum wiedzy ===== */
.blog-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.blog-card { position:relative; padding:0; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.blog-card .blog-cover { height:160px; background:linear-gradient(135deg, rgba(59,130,246,0.15), rgba(37,99,235,0.05)); background-size:cover; background-position:center; }
.blog-card .blog-body { padding:18px; flex:1; display:flex; flex-direction:column; gap:8px; }
.blog-card h3 { margin:0; font-size:1.1rem; }
.blog-card .blog-footer { padding:12px 18px; border-top:1px solid rgba(15,23,42,0.06); display:flex; justify-content:space-between; align-items:center; }
.blog-card:hover { transform:translateY(-4px); box-shadow:0 18px 36px rgba(15,23,42,0.16); }
.blog-card.mini .blog-cover { height:120px; }

.blog-hero { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.blog-hero-cover { border-radius:18px; background:linear-gradient(130deg, rgba(59,130,246,0.2), rgba(129,140,248,0.18)); min-height:200px; background-size:cover; background-position:center; }
.blog-hero-body h1 { margin:12px 0; font-size:2.1rem; line-height:1.2; }

.article-body { font-size:1.05rem; line-height:1.75; color:var(--text); display:grid; gap:18px; }
.article-body h2, .article-body h3, .article-body h4 { margin-top:24px; margin-bottom:12px; }
.article-body p { margin:0; }
.article-body ul { padding-left:20px; }

@media (max-width:760px){
  .blog-card .blog-cover { height:140px; }
  .blog-hero-body h1 { font-size:1.8rem; }
}

/* ===== Materiały Premium ===== */
.materials-shell { padding:38px 0 60px; display:grid; gap:24px; }
.materials-hero { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-start; background:linear-gradient(135deg, rgba(59,130,246,0.1), rgba(16,185,129,0.08)); }
.materials-stats { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.materials-stats .stat { display:flex; flex-direction:column; gap:6px; background:rgba(255,255,255,0.92); box-shadow:0 12px 24px rgba(15,23,42,0.08); }
.materials-stats .stat strong { font-size:1.8rem; font-weight:800; }
.materials-list { display:grid; gap:16px; }
.materials-group { display:grid; gap:14px; padding:6px 0; border-top:1px solid rgba(15,23,42,0.06); }
.materials-group:first-child { border-top:none; padding-top:0; }
.materials-group > header h2 { margin:0; font-size:1.2rem; }
.materials-subgroup { display:grid; gap:12px; }
.materials-subgroup h3 { margin:6px 0; font-size:1rem; color:var(--muted); }
.material-card { border:1px solid rgba(15,23,42,0.08); border-radius:16px; padding:18px; display:grid; gap:14px; background:rgba(255,255,255,0.92); }
.material-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.material-head .status { padding:6px 12px; border-radius:999px; font-weight:600; font-size:.8rem; }
.status-ready { background:rgba(16,185,129,0.15); color:#047857; }
.status-processing { background:rgba(59,130,246,0.15); color:#1d4ed8; }
.status-queued { background:rgba(234,179,8,0.18); color:#b45309; }
.status-error { background:rgba(248,113,113,0.18); color:#b91c1c; }
.material-body { display:grid; gap:8px; }
.progress-line { width:100%; height:6px; border-radius:999px; background:rgba(148,163,184,0.25); overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,#38bdf8,#2563eb); transition:width .35s ease; animation:pulseLine 2.4s ease infinite; }
.material-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.material-actions .danger { color:#b91c1c; border-color:rgba(248,113,113,0.35); }
.materials-mini-list { display:grid; gap:12px; }
.queue-card { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-radius:14px; border:1px solid rgba(15,23,42,0.08); }
.queue-card .queue-progress { display:flex; gap:8px; align-items:center; }
.queue-card .queue-progress .bar { width:120px; height:6px; border-radius:999px; background:rgba(148,163,184,0.25); overflow:hidden; }
.queue-card .queue-progress .bar span { height:100%; background:linear-gradient(90deg,#38bdf8,#2563eb); display:block; transition:width .35s ease; animation:pulseLine 2.4s ease infinite; }

/* ===== Kreator Premium ===== */
.creator-shell { padding:38px 0 60px; gap:24px; }
.creator-hero { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; background:linear-gradient(120deg, rgba(129,140,248,0.12), rgba(37,99,235,0.08)); }
.creator-wizard { display:grid; gap:22px; }
.wizard-steps { display:flex; gap:12px; flex-wrap:wrap; }
.wizard-steps .step { border:none; background:rgba(15,23,42,0.05); color:var(--muted); padding:8px 12px; border-radius:999px; display:flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; transition:all .2s ease; }
.wizard-steps .step span { width:26px; height:26px; border-radius:50%; background:rgba(15,23,42,0.12); display:grid; place-items:center; font-weight:700; }
.wizard-steps .step.active { background:var(--accent); color:#fff; box-shadow:0 12px 20px rgba(37,99,235,0.25); }
.wizard-steps .step.active span { background:rgba(255,255,255,0.3); }
.wizard-steps .step.done { background:rgba(16,185,129,0.18); color:#047857; }
.wizard-panel { display:none; }
.wizard-panel.active { display:block; }
.wizard-navigation { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.wizard-navigation .btn { min-width:140px; }
.drop-zone { border:2px dashed rgba(37,99,235,0.3); border-radius:18px; padding:32px; background:rgba(37,99,235,0.06); text-align:center; cursor:pointer; position:relative; transition:border .2s ease, background .2s ease; }
.drop-zone.drag { border-color:var(--accent); background:rgba(37,99,235,0.12); }
.drop-zone .drop-input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.drop-zone .drop-copy strong { display:block; font-size:1.1rem; margin-bottom:6px; }
.creator-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.summary-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.summary-list li { background:rgba(15,23,42,0.04); padding:10px 12px; border-radius:12px; font-size:.9rem; }
.creator-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

@media (max-width:960px){
  .topic-layout { grid-template-columns:1fr; }
  .topic-nav { position:static; }
}

@media (max-width:720px){
  .materials-hero, .creator-hero { flex-direction:column; align-items:flex-start; }
  .material-actions { justify-content:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
.card.no-anim { animation:none; }

/* kontener quizu */
body[data-page="app"] #view {
  max-width: 960px;      /* możesz dobrać inną szerokość */
  margin: 0 auto;
  padding: 0 24px;
}

/* przycisk Dalej na całą szerokość */
#btnNextBig {
  width: 100%;
  justify-content: center;
  padding: 16px 20px;
  font-size: 1.04rem;
  margin-top: 12px;
}

.sync-status {
  position: fixed;
  right: 12px;
  bottom: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--text);
  z-index: 200;
  transition: opacity .2s ease, transform .2s ease;
}
.sync-status[data-type="warn"] { border-color: var(--warning); color: var(--warning); }
.sync-status[data-type="success"] { border-color: var(--success); color: var(--success); }
.sync-status a { color: var(--accent-strong); margin-right:8px; font-size:0.8rem; }

.load-more {
  margin: 12px auto 0;
  padding: 10px 14px;
  background: var(--bg-accent);
  border:1px solid var(--line);
  border-radius: 12px;
  text-align:center;
  cursor:pointer;
  color: var(--text);
  max-width: 220px;
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
  box-shadow:0 8px 16px rgba(15,23,42,0.08);
}
.load-more:hover { background: var(--accent-soft); transform: translateY(-1px); }
.load-more:active { transform: translateY(0); }
.load-more:focus-visible { outline:2px solid var(--accent); box-shadow:0 14px 24px rgba(29,78,216,0.22); }
.load-more { animation: fadeSlideIn .3s ease; }

@keyframes fadeSlideIn {
  from { opacity:0; transform: translateY(6px); }
  to { opacity:1; transform: translateY(0); }
}

#logOutput span.log-error { color: var(--error); }
#logOutput span.log-warn { color: var(--warning); }
#logOutput span.log-404 { color: #d97706; }

#logOutput span.log-error { color: var(--error); }
#logOutput span.log-warn { color: var(--warning); }
#logOutput span.log-404 { color: #d97706; }