﻿/* ====== Motyw domyĹ›lny â€“ DARK ====== */
:root{
  --bg:#0b1020;
  --card:#11162b;
  --muted:#8ea0c7;
  --text:#e7ecf7;
  --brand:#7c8aff;
  --brand-2:#37d2e6;
  --ok:#27c281;
  --bad:#ff6b6b;
  --danger: var(--bad);
  --ring: rgba(124,138,255,.35);
  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.18);
  --card-grad-1: rgba(255,255,255,.04);
  --card-grad-2: rgba(255,255,255,.02);
}

/* ====== LIGHT ====== */
html[data-theme="light"]{
  --bg:#f3f6fb;
  --card:#ffffff;
  --muted:#52627f;
  --text:#0d1b2a;
  --brand:#5a67ff;
  --brand-2:#22b8cf;
  --ok:#0ca678;
  --bad:#e03131;
  --danger: var(--bad);
  --ring: rgba(90,103,255,.30);
  --border: rgba(0,0,0,.08);
  --border-strong: rgba(0,0,0,.12);
  --card-grad-1: rgba(0,0,0,.02);
  --card-grad-2: rgba(0,0,0,.01);
}

*{box-sizing:border-box}
html,body{height:100%}
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background-color .3s, color .3s;
}

/* Layout */
.wrap{max-width:1400px; margin:0 auto; padding:0 20px}
.page{padding:36px 0 64px}
.page__title{font-size:28px; font-weight:700; letter-spacing:.3px; margin:8px 0 18px}
.page__header{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
.page__title--sticky{position:sticky; top:64px; z-index:120; background:var(--card); padding:10px 12px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08); margin-bottom:16px;}
html[data-theme="light"] .page__title--sticky{box-shadow:0 6px 18px rgba(0,0,0,.08);}
@media (max-width:900px){ .page__title--sticky{top:60px; font-size:24px;} }
.callout{padding:12px 14px; border-radius:10px; border:1px solid var(--border); background: var(--card-grad-1); margin:0 0 14px; font-size:14px; line-height:1.5;}
.callout strong{font-weight:700;}
.callout--success{border-color:rgba(39,194,129,.3); background: rgba(39,194,129,.08);}
.callout--info{border-color:rgba(55,210,230,.3); background: rgba(55,210,230,.08);}
.callout{padding:12px 14px; border-radius:10px; border:1px solid var(--border); background: var(--card-grad-1); margin:0 0 14px; font-size:14px; line-height:1.5;}
.callout strong{font-weight:700;}
.callout--success{border-color:rgba(39,194,129,.3); background: rgba(39,194,129,.08);}
.callout--info{border-color:rgba(55,210,230,.3); background: rgba(55,210,230,.08);}

/* Navbar â€” fixed, kompaktowy, 2 wiersze */
.nav {
  position: fixed;
  top: 0; left: 0; width: 100%;
  background: rgba(11,16,32,.6);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 400; /* above fixed nav (z=200) */
}
html[data-theme="light"] .nav { background: rgba(255,255,255,.8); }

.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; /* mniejsze niĹĽ wczeĹ›niej */
  gap: 12px;
}

.brand { font-weight: 800; letter-spacing: .5px; }
.brand span { color: var(--brand); }

.nav__links { display: flex; align-items: center; gap: 12px; }
.nav__links a { color: var(--text); text-decoration: none; opacity: .9; line-height: 1; }
.nav__links a:hover { opacity: 1; }
.nav__user { font-size: 13px; opacity: .9; padding: 4px 8px; border-radius: 6px; background: var(--card-grad-1); border: 1px solid var(--border); }
.nav__toggle { display:none; background: var(--card-grad-1); border:1px solid var(--border); border-radius:8px; padding:6px 10px; color:var(--text); font-size:16px; }
.nav__actions { display:flex; gap:10px; align-items:center; }
.nav__theme { margin-left: auto; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); font-size: 13px; text-decoration: none; color: var(--text); background: var(--card-grad-1); }
.badge--ghost { background: var(--card-grad-1); }
.badge--solid { background: var(--brand); color: #fff; border-color: transparent; }
.btn--icon { padding: 6px 10px; line-height: 1; }

/* druga linia w nav â€“ na timer i progress */
.nav__sub {
  display: none; /* domyĹ›lnie brak drugiej linii */
  border-top: 1px solid var(--border);
}
.nav--has-sub .nav__sub {
  display: block;
}
.nav__sub .wrap {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 6px;  /* maĹ‚e odstÄ™py miÄ™dzy liniami */
}

/* Dopasuj gĂłrny padding treĹ›ci, ĹĽeby tytuĹ‚ nie chowaĹ‚ siÄ™ pod nav */
.page { padding: 84px 0 64px; }           /* 1 linia nagĹ‚Ăłwka */
body.nav-sub .page { padding-top: 120px; } /* 2 linie nagĹ‚Ăłwka */

/* Pasek postÄ™pu w nav (moĹĽemy uĹĽyÄ‡ istniejÄ…cych klas) */
.nav__progress { flex: 1; display: flex; align-items: center; gap: 10px; }
.nav__progress .progress { flex: 1; margin: 0; height: 16px; }
.nav__progress .progress__label { font-size: 10px; margin:4px; padding:4px;}
.nav__timer { font-weight: 700; white-space: nowrap; }


/* Buttons */
.btn{appearance:none; border:none; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; transition:.15s transform, .2s box-shadow, .2s opacity, .2s background}
.btn:active{transform:translateY(1px)}
.btn--primary{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#0a0f20; box-shadow:0 10px 24px rgba(124,138,255,.25)}
.btn--primary:hover{box-shadow:0 12px 28px rgba(124,138,255,.35)}
.btn--ghost{background:transparent; color:var(--text); border:1px solid var(--border-strong)}
.btn--ghost:hover{background:rgba(0,0,0,.05)}
.btn--icon{padding:8px 10px; border-radius:10px; font-size:18px; line-height:1}

/* Cards & grid */
.page-layout{display:flex; gap:20px; align-items:flex-start}
.page-layout__main{flex:1; min-width:0}
.ad-slot{border:1px dashed var(--border-strong); border-radius:14px; padding:16px; text-align:center; background:rgba(0,0,0,.05); color:var(--muted); display:flex; flex-direction:column; gap:6px; font-size:.9rem}
html[data-theme="light"] .ad-slot{background:rgba(0,0,0,.03)}
.ad-slot__label{font-weight:700; color:var(--text)}
.ad-slot__hint{font-size:.75rem}
.ad-slot__placeholder{font-size:.85rem; color:var(--muted);}
.ad-slot--desktop{width:180px; min-height:600px; position:sticky; top:110px; justify-content:center}
.ad-slot--mobile{display:none; margin:12px 0}
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.page-layout__main .grid{margin-top:10px}
.card{
  background:linear-gradient(180deg, var(--card-grad-1), var(--card-grad-2)), var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  transform-origin: 50% 60%;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  animation: pop .45s cubic-bezier(.16,.84,.44,1) both;
  display:flex;
  flex-direction:column;
}
.card:hover{ transform: translateY(-2px) scale(1.01); box-shadow:0 18px 36px rgba(0,0,0,.22); }
.card__content{padding:18px; flex:1; display:flex; flex-direction:column; gap:6px}
.card__title{font-size:18px; font-weight:700; margin:0}
.card__desc{margin:4px 0 2px; color:var(--muted); font-size:.9rem; line-height:1.35; flex-shrink:0}
.card__meta-line{margin-top:2px; display:flex; flex-wrap:wrap; gap:6px}
.card__row{margin-top:4px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-weight:600; color:var(--text)}
.card__row .card__kind-icon{font-size:18px}
.quiz-card{min-height:100%; display:flex; flex-direction:column}
.card__actions{margin-top:auto; display:flex; justify-content:flex-end; padding:12px 18px 18px}
.card__actions .btn{margin-left:auto}
.pill--level{color:#fff; font-weight:600}
.pill--level-easy{background:rgba(39,194,129,.25); color:#0b6b3d}
.pill--level-medium{background:rgba(255,165,0,.25); color:#a05a00}
.pill--level-hard{background:rgba(224,49,49,.25); color:#a11b1b}
.pill--level-unknown{background:rgba(128,128,128,.25); color:#3d3d3d}
.card--pop{animation-delay:.05s}
.grid .card:nth-child(2){animation-delay:.10s}
.grid .card:nth-child(3){animation-delay:.15s}
.grid .card:nth-child(4){animation-delay:.20s}

@media (max-width: 1100px){
  .page-layout{gap:14px}
  .ad-slot--desktop{width:150px}
}

html{scroll-behavior:smooth}
a{color:var(--brand)}
.eyebrow{margin:0 0 8px;color:var(--brand-2);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.btn--wide{width:100%;justify-content:center}
.alert{padding:12px 14px;border-radius:12px;margin:16px 0;font-size:14px}
.alert--error{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.35);color:var(--bad)}
.home-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);align-items:center;gap:48px;min-height:430px;padding:48px clamp(20px,5vw,72px);margin:0 0 42px;border:1px solid var(--border);border-radius:28px;background:radial-gradient(circle at 85% 20%,rgba(55,210,230,.16),transparent 34%),linear-gradient(135deg,rgba(124,138,255,.13),rgba(255,255,255,.02));overflow:hidden}
.home-hero h1{font-size:clamp(38px,6vw,72px);line-height:.98;letter-spacing:-.055em;margin:0 0 22px;max-width:850px}.home-hero h1 span{color:var(--brand)}
.home-hero__copy>p:not(.eyebrow){max-width:680px;font-size:18px;line-height:1.65;color:var(--muted)}
.home-hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.home-hero__visual{display:grid;place-items:center}.hero-score{width:min(280px,100%);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border-strong);background:rgba(17,22,43,.72);box-shadow:0 30px 80px rgba(0,0,0,.3),inset 0 0 60px rgba(124,138,255,.16)}.hero-score span,.hero-score small{color:var(--muted)}.hero-score strong{font-size:64px;letter-spacing:-.06em;margin:5px 0;color:var(--text)}
.section-heading,.dashboard-hero{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:30px 0 20px}.section-heading h2,.dashboard-hero h1{margin:0;font-size:clamp(28px,4vw,44px);letter-spacing:-.035em}
.auth-shell{min-height:calc(100vh - 220px);display:grid;place-items:center;padding:32px 0}.auth-card{width:min(520px,100%);padding:clamp(24px,5vw,44px)}.auth-card h1{font-size:38px;letter-spacing:-.04em;margin:0 0 10px}.auth-switch{text-align:center;margin:22px 0 0}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 44px}.stat-card{padding:24px;border:1px solid var(--border);border-radius:20px;background:var(--card)}.stat-card strong{display:block;font-size:42px;letter-spacing:-.05em}.stat-card span{color:var(--muted);font-size:14px}.history-list{display:grid;gap:12px}.history-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:24px;padding:20px}.history-item h3{margin:0 0 5px}.history-item p{margin:0}.history-score{text-align:right}.history-score strong{display:block;font-size:26px}.history-score span{color:var(--muted);font-size:13px}.history-item__actions{display:flex;gap:8px;align-items:center}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.account-settings{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px;margin-top:48px}.account-settings h2{margin:0 0 6px}.account-settings p{margin:0}.account-settings__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.account-settings details{position:relative}.account-settings summary{list-style:none;cursor:pointer}.account-delete-form{position:absolute;right:0;bottom:calc(100% + 10px);width:300px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:0 20px 50px rgba(0,0,0,.35);z-index:10;display:grid;gap:8px}
.footer__privacy-link{padding:0;border:0;color:inherit;background:none;font:inherit;text-align:left;text-decoration:underline;cursor:pointer}
.quiz-editorial{margin:0 0 24px;padding:clamp(20px,4vw,32px)}.quiz-editorial h2{margin:.15rem 0 1rem;font-size:clamp(1.35rem,3vw,1.8rem)}.quiz-editorial h3{margin:1.25rem 0 .55rem;font-size:1.05rem}.quiz-editorial p{max-width:76ch;line-height:1.7}.quiz-editorial ul{margin:.5rem 0 0;padding-left:1.25rem}.quiz-editorial li{margin:.4rem 0;line-height:1.55}
.learning-material{margin:0 0 28px;padding:clamp(20px,4vw,36px)}
.learning-material h2{margin:.15rem 0 1rem;font-size:clamp(1.45rem,3vw,2rem)}
.learning-material h3{margin:0 0 .7rem;font-size:clamp(1.08rem,2.5vw,1.3rem)}
.learning-material p,.learning-material li,.learning-material dd{line-height:1.72}
.learning-material__lead{max-width:78ch;font-size:clamp(1rem,2vw,1.1rem)}
.learning-material__toc{margin:1.5rem 0;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:rgba(148,163,184,.06)}
.learning-material__toc ol{margin:.65rem 0 0;padding-left:1.3rem}.learning-material__toc li{margin:.25rem 0}
.learning-material__block{padding:1.35rem 0;border-top:1px solid var(--border)}
.learning-material__block>p{max-width:78ch}.learning-material__block ul{margin:.5rem 0 0;padding-left:1.3rem}
.learning-material__table-wrap{max-width:100%;overflow-x:auto}.learning-material table{width:100%;border-collapse:collapse}
.learning-material th,.learning-material td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.learning-material th{color:var(--muted)}
.learning-material__terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.learning-material__terms div{padding:14px;border:1px solid var(--border);border-radius:14px;background:rgba(148,163,184,.04)}
.learning-material__terms dt{font-weight:800}.learning-material__terms dd{margin:.35rem 0 0;color:var(--muted)}
.learning-material__sources{padding-top:1.35rem;border-top:1px solid var(--border)}.learning-material__sources ul{padding-left:1.3rem}
.learning-material__sources>p{margin-top:1rem;color:var(--muted);font-size:.9rem}
@media(max-width:600px){.learning-material__terms{grid-template-columns:1fr}.learning-material th,.learning-material td{padding:9px 8px}}
.contact-shell{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,6vw,72px);align-items:start;width:min(1040px,100%);margin:30px auto}.contact-intro h1{font-size:clamp(44px,7vw,72px);letter-spacing:-.055em;margin:0 0 14px}.contact-note{margin-top:30px;padding:24px}.contact-note h2{margin-top:0}.contact-card{padding:clamp(22px,4vw,38px)}.contact-message{min-height:180px;resize:vertical}.contact-consent{align-items:flex-start;line-height:1.5}.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.legal-page{width:min(800px,100%);margin:30px auto}.legal-page>header{margin-bottom:36px}.legal-page h1{font-size:clamp(42px,7vw,72px);letter-spacing:-.055em;margin:0 0 14px}.legal-lead{font-size:20px;color:var(--muted)}.legal-page>section{padding:24px;margin:14px 0}.legal-page>section h2{margin-top:0}.legal-page>section p{line-height:1.75;color:var(--muted);margin-bottom:0}
@media(max-width:760px){.wrap{padding-inline:14px}.page{padding-top:24px}.home-hero{grid-template-columns:1fr;min-height:auto;padding:34px 22px;border-radius:22px;gap:30px}.home-hero__visual{display:none}.home-hero__copy>p:not(.eyebrow){font-size:16px}.home-hero__actions>.btn{width:100%;justify-content:center}.section-heading,.dashboard-hero{align-items:flex-start;flex-direction:column}.stats-grid{grid-template-columns:1fr 1fr}.stat-card:last-child{grid-column:1/-1}.history-item{grid-template-columns:1fr auto}.history-item__actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.history-item__actions>.btn{width:100%;justify-content:center}.auth-shell{padding:12px 0}.auth-card{border-radius:20px}.nav__signup{width:auto!important}.account-settings{align-items:stretch;flex-direction:column}.account-settings__actions,.account-settings__actions>.btn,.account-settings__actions>label.btn,.account-settings details{width:100%}.account-delete-form{position:static;width:100%;margin-top:10px}}
@media(max-width:760px){.contact-shell{grid-template-columns:1fr;margin-top:10px;gap:24px}.contact-note{margin-top:20px}.contact-card{border-radius:20px}}
@media (max-width: 960px){
  .page-layout{flex-direction:column}
  .ad-slot--desktop{display:none}
  .ad-slot--mobile{display:flex}
}

/* Forms */
.form{margin-top:10px}
.form__group{margin:14px 0}
.form__label{display:block; margin-bottom:6px; font-weight:600}
.input{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border-strong); background:var(--card); color:var(--text); outline:none}
.input:focus{box-shadow:0 0 0 4px var(--ring); border-color:transparent}
.radios,.checks{display:flex; gap:16px; flex-wrap:wrap}
.radio,.check{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; border:1px solid var(--border-strong); background:var(--card)}
.check input,.radio input{accent-color:var(--brand)}
.box{padding:12px; border:1px dashed var(--border-strong); border-radius:12px; background:var(--card)}
.form__actions{display:flex; gap:10px; margin-top:8px}

/* Quiz */
.question .card__content{padding:16px}
.qtitle{display:flex; align-items:center; gap:10px; font-weight:700; margin-bottom:8px}
.qstatus{font-weight:900}
.qstatus.ok{color:var(--ok)}
.qstatus.bad{color:var(--bad)}
.answers{display:grid; gap:8px}
.answer{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--card); border:1px solid var(--border-strong)}
.answer:hover{background:rgba(255,255,255,.04)}
.answers input{accent-color:var(--brand)}
.is-correct{background:rgba(39,194,129,.18) !important; border-color:rgba(39,194,129,.6) !important}
.is-wrong{background:rgba(255,107,107,.18) !important; border-color:rgba(255,107,107,.6) !important}
.score{margin-top:8px; font-weight:700}

/* Pasek postÄ™pu */
.progress{position:relative; height:12px; background:rgba(255,255,255,.08); border:1px solid var(--border-strong); border-radius:999px; overflow:hidden; margin-bottom:16px}
html[data-theme="light"] .progress{background:rgba(0,0,0,.06)}
.progress__bar{height:100%; background:linear-gradient(90deg, var(--brand), var(--brand-2)); transition:width .25s ease}
.progress__label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--muted); pointer-events:none}

/* Komentarz wyniku z animacjÄ… */
.result-comment{margin-top:6px; font-weight:700; opacity:0; transform: translateY(6px) scale(.98); transition: .35s ease}
.result-comment--show{opacity:1; transform: translateY(0) scale(1)}
.result-comment.rc--great{color:var(--ok)}
.result-comment.rc--good{color:var(--brand-2)}
.result-comment.rc--ok{color:#f3a712}
.result-comment.rc--try{color:var(--bad)}
.hidden{display:none !important}
.result-card{margin-top:12px; border:1px solid var(--border-strong); background:linear-gradient(180deg,var(--card-grad-1),var(--card-grad-2));}
.result-card__header{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px;}
.result-card__title{font-weight:800; font-size:18px;}
.result-card__subtitle{color:var(--muted); font-weight:600; margin-top:4px;}
.result-card__status{font-weight:700; color:var(--text);}
.result-card__body{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.result-card__copy{flex:1 1 240px; font-weight:600;}
.result-card__media{flex:0 0 220px;}
.result-card__video{width:100%; border-radius:14px; border:1px solid var(--border-strong); display:block; box-shadow:0 10px 24px rgba(0,0,0,.25);}
.overlay__card{position:relative;}
.overlay__card .btn--icon{position:absolute; top:8px; right:8px;}
.overlay.hidden{display:none !important;}
.overlay--show{animation:fade-in .32s ease both;}
.overlay--show .overlay__card{animation:pop .32s ease both;}
.overlay--hide{animation:fade-out .25s ease both;}
.overlay--hide .overlay__card{animation:fade-out .25s ease both;}
@keyframes video-in{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)}}
@keyframes video-out{from{opacity:1; transform:scale(1)} to{opacity:0; transform:scale(.96)}}
.video-enter{animation:video-in .35s ease both;}
.video-exit{animation:video-out .35s ease both;}

/* Helpers */
.stack > * + *{margin-top:14px}
.alert{padding:12px 14px; border-radius:12px; border:1px solid var(--border-strong)}
.alert--success{background:rgba(39,194,129,.12); border-color:rgba(39,194,129,.5)}
.empty{background:linear-gradient(180deg, var(--card-grad-1), var(--card-grad-2));
  border:1px dashed var(--border-strong); border-radius:16px; padding:22px}
.muted{color:var(--muted)}

/* Keyframes */
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}}

/* Timer & overlay */
.timer{margin:8px 0 14px; font-weight:700}
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:100}
html[data-theme="light"] .overlay{background:rgba(0,0,0,.20)}
.overlay__card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px; width:min(520px, 92%); box-shadow:0 12px 28px rgba(0,0,0,.25); animation:pop .35s ease both}
.overlay__title{font-weight:800; margin-bottom:10px}

/* Indeterminate progress */
.progress--ind{position:relative; height:10px}
.progress__ind{
  position:absolute; height:100%; width:35%;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius:999px; animation:ind 1.15s ease-in-out infinite;
}
.spinner{display:inline-block; width:16px; height:16px; border:2px solid var(--border-strong); border-top-color: var(--brand); border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; margin-right:6px;}
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* Mobile nav and badges */
.nav__toggle { display:none; background: var(--card-grad-1); border:1px solid var(--border); border-radius:8px; padding:6px 10px; color:var(--text); font-size:16px; }
.nav__actions { display:flex; gap:10px; align-items:center; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); font-size: 13px; text-decoration: none; color: var(--text); background: var(--card-grad-1); }
.badge--ghost { background: var(--card-grad-1); }
.badge--solid { background: var(--brand); color: #fff; border-color: transparent; }

@media (max-width: 900px) {
  .nav__toggle { display:block; }
  .nav__links { position: absolute; top: 64px; right: 20px; left: 20px; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; background: var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.25); max-height:0; overflow:hidden; transition:max-height .25s ease, opacity .2s ease; opacity:0; }
  .nav__links--open { max-height: 460px; opacity:1; }
  .nav__links a, .nav__user { width: 100%; }
}

/* Callouts */
.callout{padding:12px 14px; border-radius:10px; border:1px solid var(--border); background: var(--card-grad-1); margin:0 0 14px; font-size:14px; line-height:1.5;}
.callout strong{font-weight:700;}
.callout--success{border-color:rgba(39,194,129,.3); background: rgba(39,194,129,.08);}
.callout--info{border-color:rgba(55,210,230,.3); background: rgba(55,210,230,.08);}

/* Sticky search - zawsze pod belką menu */
.search-sticky{position:sticky; top:64px; z-index:120; background:#142544; padding:10px 14px; border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.18); border:1px solid var(--border-strong);}
html[data-theme="light"] .search-sticky{background:#e8edff;}
@media (max-width:900px){ .search-sticky{top:60px;} }

/* Footer */
.footer__inner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.footer .brand { font-weight: 800; letter-spacing: 0.6px; font-size: 18px; }
.footer .muted { color: var(--muted); font-size: 14px; margin:4px 0; }
.footer__links, .footer__contact { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.footer__links a, .footer__cta { color: var(--text); text-decoration: none; opacity: .9; }
.footer__links a:hover, .footer__cta:hover { opacity: 1; }
.footer__cta { padding:6px 0; }
@keyframes ind{
  0%{left:-35%} 50%{left:50%} 100%{left:100%}
}

/* Confetti */
#confetti{pointer-events:none; position:fixed; inset:0; overflow:hidden; z-index:99}
.confetti-piece{
  position:absolute; top:-10px; width:10px; height:14px; border-radius:2px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  animation: confettiFall 1.8s ease-in forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(-20px) rotate(0deg)}
  100%{transform:translateY(110vh) rotate(600deg)}
}

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #fff;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(-15px);
  pointer-events: none;
  transition: all .35s cubic-bezier(.16,.84,.44,1);
  z-index: 200;
}
.toast--show {
  opacity: 1;
  transform: translateY(0);
}

/* Inline alerts */
.alert{margin-top:12px; padding:12px 14px; border-radius:10px; background: var(--card); border:1px solid var(--border-strong); color: var(--text)}
.alert--danger{background: rgba(224,49,49,.12); border-color: rgba(224,49,49,.35); color: var(--bad)}

/* Admin tabs */
.admin-tabs{display:flex; gap:10px; margin:18px 0 24px; flex-wrap:wrap}
.admin-tab{padding:8px 18px; border-radius:999px; border:1px solid var(--border-strong); color:var(--muted); text-decoration:none; font-weight:600}
.admin-tab.is-active{background:var(--brand); border-color:var(--brand); color:#0a0f20}
.card--subtle{border-style:dashed; border-color:var(--border-strong); background:rgba(0,0,0,.02)}
html[data-theme="light"] .card--subtle{background:rgba(0,0,0,.02)}

.admin-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:18px}
.stat-card{padding:16px 18px; border-radius:16px; border:1px solid var(--border); background:linear-gradient(135deg, rgba(124,138,255,.15), rgba(55,210,230,.12))}
.stat-card__label{font-size:.85rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.stat-card__value{display:block; font-size:28px; margin:6px 0; color:var(--text)}
.stat-card__hint{font-size:.85rem; color:var(--muted)}
.analytics-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; margin-top:6px}
.bar-block{margin-top:12px}
.bar-block__title{font-weight:700; margin-bottom:6px}
.bar-list{display:flex; flex-direction:column; gap:8px}
.bar-row{display:grid; grid-template-columns:1.1fr 3fr auto; gap:8px; align-items:center}
.bar-row__bar{background:var(--card-grad-1); border:1px solid var(--border); border-radius:10px; overflow:hidden; height:10px}
.bar-row__bar span{display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.bar-row__label{font-weight:600}
.bar-row__value{font-weight:700; color:var(--muted)}
.tag-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.tag-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:12px; border:1px solid var(--border); background:var(--card-grad-1); font-weight:600}
.tag-chip__count{font-size:.85rem; color:var(--muted)}
.mini-list{list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:8px}
.mini-list__item{display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:10px; border:1px dashed var(--border); background:var(--card-grad-1)}
.mini-list__date{font-weight:700}
.mini-table{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.mini-row{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--card-grad-1)}
.mini-row__meta{color:var(--muted); font-size:.9rem; margin-top:4px}
.mini-row__badges{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
@media (max-width: 720px){
  .bar-row{grid-template-columns:1fr 2fr auto}
  .mini-row{flex-direction:column; align-items:flex-start}
  .mini-row__badges{justify-content:flex-start}
}

.quiz-manage__header{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap}
.quiz-manage__meta{display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; font-size:0.85rem; color:var(--muted)}
.quiz-meta-line{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--border); font-size:.8rem}
html[data-theme="light"] .pill{background:rgba(0,0,0,.04)}
.pill--id{background:rgba(124,138,255,.18); border-color:rgba(124,138,255,.4); color:var(--text);}
.quiz-manage__meta{background:rgba(0,0,0,.04); border-radius:12px; padding:12px; border:1px solid var(--border)}
html[data-theme="light"] .quiz-manage__meta{background:rgba(0,0,0,.02)}
.meta-item{flex:1; min-width:200px; display:flex; flex-direction:column; gap:4px}
.meta-label{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.quiz-manage__meta code{display:block; padding:6px 8px; border-radius:8px; background:rgba(0,0,0,.25); border:1px solid var(--border); color:var(--text); font-size:.8rem; word-break:break-all}
html[data-theme="light"] .quiz-manage__meta code{background:rgba(0,0,0,.05)}
.quiz-manage__actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px}
.quiz-manage__actions form{margin:0; display:inline}
.quiz-manage__status{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}

.quiz-status{padding:4px 10px; border-radius:999px; font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.quiz-status--visible{background:rgba(39,194,129,.15); color:var(--ok)}
.quiz-status--hidden{background:rgba(224,49,49,.12); color:var(--bad)}

.toggle{display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; position:relative}
.toggle__input{position:absolute; inset:0; opacity:0; cursor:pointer}
.toggle__track{position:relative; width:44px; height:22px; border-radius:999px; background:var(--border); transition:background .2s}
.toggle__thumb{position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s}
.toggle__input:checked + .toggle__track{background:var(--brand)}
.toggle__input:checked + .toggle__track .toggle__thumb{transform:translateX(22px)}
.toggle__label{font-size:0.85rem; color:var(--muted)}

.btn--danger{background:transparent; color:var(--bad); border:1px solid var(--bad)}
.btn--danger:hover{background:rgba(224,49,49,.15)}

.input--code{font-family:SFMono-Regular,Consolas,"Liberation Mono",monospace; font-size:13px; line-height:1.4}
.input--inline{width:90px; margin:0 10px}

.radios--inline{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
/* Responsive spacing for medium screens */
@media (max-width: 1024px) {
  body {
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
  }
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* Responsive spacing for narrow screens */
@media (max-width: 640px) {
  body {
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
  .wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* CMP banner */
.cmp-banner{position:fixed; inset:auto 16px 16px 16px; z-index:500; display:flex; justify-content:center;}
.cmp-banner__card{max-width:900px; width:100%; padding:16px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.2);}
.cmp-banner__text h3{margin:0 0 6px; font-size:18px;}
.cmp-banner__text p{margin:0 0 10px; color:var(--muted); line-height:1.5;}
.cmp-banner__toggles{display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 12px;}
.cmp-toggle{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--card-grad-1);}
.cmp-banner__actions{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:6px;}
.cmp-banner__hint{margin:6px 0 0; color:var(--muted); font-size:13px;}
.cmp-manage{position:fixed; bottom:16px; right:16px; z-index:480; border:1px solid var(--border); background:var(--card); color:var(--text); padding:10px 12px; border-radius:10px; cursor:pointer; box-shadow:0 10px 20px rgba(0,0,0,.15);}
@media (max-width:720px){
  .cmp-banner__card{padding:14px;}
  .cmp-banner__toggles{flex-direction:column;}
  .cmp-banner__actions{flex-direction:column; align-items:flex-start;}
  .cmp-manage{left:16px; right:auto;}
}

/* Privacy page */
.page-policy{gap:18px; padding:18px; background:var(--card-grad-1); border-radius:14px;}
.page-policy header .pill{margin-bottom:6px;}
.page-policy .card{margin:8px 0; padding:16px;}
.page-policy .card h2{margin-top:0; margin-bottom:10px;}

/* ===== Quizowania UI: mobile-first brand system ===== */
:root{
  --bg:#08111f;
  --card:#101c2e;
  --card-elevated:#142238;
  --muted:#9cacbf;
  --text:#f5f8fc;
  --brand:#7c6cff;
  --brand-2:#2dd4bf;
  --ok:#34d399;
  --bad:#fb7185;
  --border:rgba(148,163,184,.16);
  --border-strong:rgba(148,163,184,.3);
  --ring:rgba(124,108,255,.32);
  --surface-glow:rgba(124,108,255,.13);
  --shadow-sm:0 8px 24px rgba(2,6,23,.18);
  --shadow-lg:0 24px 70px rgba(2,6,23,.32);
}
html[data-theme="light"]{
  --bg:#f6f8fc;
  --card:#fff;
  --card-elevated:#fff;
  --muted:#5d6b7e;
  --text:#101828;
  --brand:#6254e8;
  --brand-2:#0f9f93;
  --border:rgba(15,23,42,.1);
  --border-strong:rgba(15,23,42,.18);
  --ring:rgba(98,84,232,.22);
  --surface-glow:rgba(98,84,232,.08);
  --shadow-sm:0 8px 25px rgba(15,23,42,.07);
  --shadow-lg:0 24px 70px rgba(15,23,42,.12);
}
html{scroll-padding-top:88px}
body{
  min-width:320px;
  padding:0!important;
  line-height:1.55;
  background:
    radial-gradient(circle at 10% -10%,var(--surface-glow),transparent 34rem),
    radial-gradient(circle at 95% 12%,rgba(45,212,191,.07),transparent 28rem),
    var(--bg);
}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
.wrap{width:min(100% - 32px,1240px);max-width:none;padding:0;margin-inline:auto}
.page{padding:92px 0 56px}

/* Navigation */
.nav{background:rgba(8,17,31,.78);backdrop-filter:blur(18px) saturate(145%);box-shadow:0 1px 0 rgba(255,255,255,.03)}
html[data-theme="light"] .nav{background:rgba(255,255,255,.84)}
.nav__inner{min-height:64px;padding:8px 0}
.brand{display:inline-flex;align-items:center;color:var(--text);font-size:21px;font-weight:850;letter-spacing:-.035em;text-decoration:none}
.brand span{color:var(--brand)}
.brand__mark{display:block;flex:0 0 auto;width:38px;height:38px;margin-right:10px;filter:drop-shadow(0 8px 18px rgba(98,84,232,.2));transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.brand__word{color:var(--text)!important;letter-spacing:-.045em}.brand__word>span{color:var(--brand)!important}
.brand:hover .brand__mark{transform:rotate(-5deg) scale(1.06)}
.brand__tagline{margin:12px 0 3px;color:var(--text);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.nav__theme{display:inline-grid;place-items:center;min-width:44px;min-height:44px;border-radius:13px}
.nav__toggle{display:none;place-items:center;min-width:44px;min-height:44px;border-radius:13px;font-size:22px;padding:0}
.nav__links a{padding:10px 4px;font-weight:650}
.nav__links .nav__signup{padding:11px 16px}
.nav__user{padding:8px 10px;border-radius:10px}
.nav__sub .wrap{min-height:48px;padding:7px 0}

/* Components */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 17px;border-radius:14px;text-decoration:none;line-height:1.2;letter-spacing:-.01em}
.btn--primary{color:#fff;background:linear-gradient(135deg,var(--brand),#7968ff 48%,var(--brand-2));box-shadow:0 10px 28px rgba(98,84,232,.24)}
.btn--primary:hover{box-shadow:0 14px 34px rgba(98,84,232,.32);transform:translateY(-1px)}
.btn--ghost{background:rgba(148,163,184,.06)}
.input{min-height:48px;padding:12px 14px;border-radius:13px;background:rgba(148,163,184,.055);transition:border-color .2s,box-shadow .2s,background .2s}
.input:hover{border-color:var(--border-strong)}
.input:focus{background:var(--card);border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
textarea.input{min-height:100px;resize:vertical}
.form__group{margin:18px 0}.form__label{margin-bottom:8px;font-size:14px}.form__actions{gap:12px;flex-wrap:wrap;margin-top:18px}
.card{border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 50%),var(--card);box-shadow:var(--shadow-sm);animation:none}
.card{position:relative;overflow:hidden}
.card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-2));opacity:.65}
.card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-lg)}
.card__content{padding:20px;gap:9px}.card__title{font-size:20px;letter-spacing:-.025em}.card__desc{line-height:1.55}
.pill{padding:6px 10px;background:rgba(148,163,184,.08)}
.eyebrow{margin-bottom:10px;font-size:11px;letter-spacing:.17em}
.alert,.callout,.empty{border-radius:15px}

/* Home */
.home-hero{grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);min-height:470px;margin-bottom:52px;padding:clamp(36px,6vw,76px);gap:44px;border-radius:32px;background:radial-gradient(circle at 83% 24%,rgba(45,212,191,.18),transparent 28%),radial-gradient(circle at 20% 15%,rgba(124,108,255,.2),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.01));box-shadow:inset 0 1px rgba(255,255,255,.07),var(--shadow-sm)}
.home-hero h1{font-size:clamp(44px,6.2vw,76px);line-height:1.02;max-width:780px}
.home-hero h1 span{background:linear-gradient(110deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.home-hero__copy>p:not(.eyebrow){font-size:clamp(16px,1.6vw,19px)}
.hero-score{position:relative;width:min(292px,100%);background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(16,28,46,.8));box-shadow:0 35px 90px rgba(2,6,23,.32),inset 0 0 70px rgba(124,108,255,.18)}
.hero-score:before{content:"";position:absolute;inset:-12px;border:1px solid rgba(45,212,191,.18);border-radius:50%}
.section-heading{margin:34px 0 22px}.section-heading h2{font-size:clamp(30px,4vw,46px)}
.learning-modes{scroll-margin-top:92px;margin-bottom:52px}
.learning-modes__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.learning-mode{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;min-height:180px;padding:26px;border:1px solid var(--border);border-radius:24px;color:var(--text);text-decoration:none;background:linear-gradient(145deg,rgba(255,255,255,.045),transparent 58%),var(--card);box-shadow:var(--shadow-sm)}
.learning-mode--active{transition:transform .2s,border-color .2s,box-shadow .2s}.learning-mode--active:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-lg)}
.learning-mode--soon{opacity:.78}
.learning-mode__icon{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;color:var(--brand-2);background:rgba(45,212,191,.13)}
.learning-mode__icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.learning-mode strong{display:block;margin-bottom:7px;font-size:clamp(24px,3vw,32px);letter-spacing:-.03em}.learning-mode small{display:block;max-width:440px;color:var(--muted);font-size:15px;line-height:1.5}
.learning-mode__action{grid-column:1/-1;color:var(--brand-2);font-size:14px;font-weight:750}.learning-mode--soon .learning-mode__action{color:var(--muted)}
.learning-mode__badge{position:absolute;top:16px;right:16px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--bg)}
.quiz-catalog{scroll-margin-top:88px}
.quiz-categories{display:flex;gap:10px;overflow-x:auto;margin:0 0 18px;padding:2px 2px 8px;scrollbar-width:thin}
.quiz-category{flex:0 0 auto;min-height:46px;padding:10px 15px;border:1px solid var(--border);border-radius:14px;color:var(--muted);background:var(--card);cursor:pointer;font-weight:750}
.quiz-category span{display:inline-grid;place-items:center;min-width:25px;height:25px;margin-left:6px;padding:0 6px;border-radius:999px;background:rgba(148,163,184,.1);font-size:12px}
.quiz-category:hover{border-color:var(--border-strong);color:var(--text)}.quiz-category.is-active{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--brand),#7968ff 48%,var(--brand-2));box-shadow:0 8px 24px rgba(98,84,232,.22)}
.quiz-catalog__empty{margin-top:18px;text-align:center}
.breadcrumbs{display:flex;align-items:center;gap:8px;overflow:hidden;margin:0 0 18px;color:var(--muted);font-size:14px;white-space:nowrap}
.breadcrumbs a{color:var(--brand-2);text-decoration:none}.breadcrumbs span[aria-current="page"]{overflow:hidden;text-overflow:ellipsis}
.category-hero{margin:0 0 24px;padding:clamp(24px,5vw,44px);border:1px solid var(--border);border-radius:26px;background:radial-gradient(circle at 85% 20%,rgba(45,212,191,.14),transparent 32%),linear-gradient(135deg,rgba(124,108,255,.12),transparent)}
.category-hero h1{margin:0 0 12px;font-size:clamp(38px,6vw,64px);letter-spacing:-.045em}.category-hero>p:not(.eyebrow){max-width:760px;color:var(--muted);font-size:17px;line-height:1.65}.category-hero .pill{display:inline-flex;margin-top:10px}
.subject-categories{margin:0 0 32px}.subject-categories__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.subject-category{display:grid;grid-template-columns:1fr auto;gap:5px 12px;min-height:104px;align-content:center;padding:18px;color:var(--text);text-decoration:none}.subject-category strong{font-size:17px}.subject-category small{color:var(--muted)}.subject-category>span{grid-column:2;grid-row:1/3;align-self:center;color:var(--brand-2);font-size:22px}
.pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:28px 0}.pagination>:last-child{justify-self:end}.pagination__status{color:var(--muted);font-size:14px;font-weight:700}
.grid{gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.quiz-card .card__actions{padding:0 20px 20px}.quiz-card .card__actions .btn{width:100%}
.quiz-card{min-height:290px}.quiz-card .card__desc{font-size:15px}.quiz-card .card__meta-line{margin-top:8px}
.quiz-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.quiz-stat{display:flex;align-items:center;gap:10px;min-width:0;padding:10px;border:1px solid var(--border);border-radius:15px;background:linear-gradient(145deg,rgba(148,163,184,.09),rgba(148,163,184,.025))}
.quiz-stat__icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;font-size:19px;line-height:1;background:rgba(124,108,255,.14);box-shadow:inset 0 1px rgba(255,255,255,.2)}
.quiz-stat__icon{position:relative;isolation:isolate;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease}
.quiz-stat__icon:before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:inherit;opacity:.55;filter:blur(7px);transform:scale(.75);transition:transform .28s ease,opacity .28s ease}
.quiz-stat__icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 4px rgba(2,6,23,.18))}
.quiz-stat--difficulty .quiz-stat__icon svg{fill:currentColor;stroke:none}
.quiz-stat:hover .quiz-stat__icon,.quiz-stat:focus-within .quiz-stat__icon{transform:translateY(-2px) scale(1.08) rotate(-3deg);box-shadow:0 8px 18px rgba(2,6,23,.16),inset 0 1px rgba(255,255,255,.25)}
.quiz-stat:hover .quiz-stat__icon:before,.quiz-stat:focus-within .quiz-stat__icon:before{opacity:.9;transform:scale(1)}
.quiz-stat:nth-child(1){animation:stat-in .42s .04s both}.quiz-stat:nth-child(2){animation:stat-in .42s .1s both}.quiz-stat:nth-child(3){animation:stat-in .42s .16s both}.quiz-stat:nth-child(4){animation:stat-in .42s .22s both}
@keyframes stat-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.quiz-stat__copy{display:flex;min-width:0;flex-direction:column;line-height:1.15}
.quiz-stat__copy small{margin-bottom:4px;color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.09em;text-transform:uppercase}
.quiz-stat__copy strong{overflow:hidden;color:var(--text);font-size:13px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.quiz-stat--easy .quiz-stat__icon{background:rgba(52,211,153,.16)}
.quiz-stat--medium .quiz-stat__icon{background:rgba(251,191,36,.18)}
.quiz-stat--hard .quiz-stat__icon{background:rgba(251,113,133,.17)}
.quiz-stat--count .quiz-stat__icon{background:rgba(56,189,248,.16)}
.quiz-stat--kind .quiz-stat__icon{background:rgba(168,85,247,.16)}
.quiz-stat--mode .quiz-stat__icon{background:rgba(45,212,191,.16)}
.quiz-card__start{gap:9px;font-size:15px}.quiz-card__start span{font-size:12px}
.search-sticky{top:76px;padding:14px 16px;margin-bottom:20px!important;border-radius:18px;background:rgba(16,28,46,.88);backdrop-filter:blur(16px);box-shadow:var(--shadow-sm)}
html[data-theme="light"] .search-sticky{background:rgba(255,255,255,.9)}

/* Quiz */
body.nav-sub .page{padding-top:134px}
.question{overflow:hidden}.question .card__content{padding:clamp(18px,3vw,26px)}
.qtitle{align-items:flex-start;font-size:clamp(17px,2vw,20px);line-height:1.45;margin-bottom:14px}
.answers{gap:10px}.answer{min-height:52px;padding:13px 14px;border-radius:14px;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}.answer:hover{border-color:var(--brand);background:rgba(124,108,255,.07);transform:translateX(2px)}.answers input{width:18px;height:18px;flex:0 0 auto}
.nav__progress .progress{height:12px}.nav__progress .progress__label{font-size:10px;color:var(--text)}
.quiz-intro{margin:-6px 0 24px;padding:18px 20px;border:1px solid var(--border);border-radius:18px;background:rgba(148,163,184,.045)}.quiz-intro>p{max-width:850px;margin:0;color:var(--muted);font-size:16px;line-height:1.65}.quiz-intro__meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.quiz-intro__meta a{text-decoration:none}
.result-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 20px 20px}.result-share__status{min-height:20px;color:var(--muted);font-size:13px}
.related-quizzes{margin-top:54px}.related-quizzes__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.related-quiz{display:flex;min-height:150px;flex-direction:column;justify-content:center;gap:9px;padding:20px;color:var(--text);text-decoration:none}.related-quiz strong{font-size:18px;line-height:1.3}.related-quiz small,.related-quiz__category{color:var(--muted)}.related-quiz__category{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

/* Auth, account and information pages */
.auth-shell{min-height:calc(100dvh - 190px);padding:26px 0}.auth-card{width:min(540px,100%);padding:clamp(24px,5vw,46px)}.auth-card h1{font-size:clamp(34px,7vw,46px);line-height:1.08}
.dashboard-hero{padding:28px 0 8px}.dashboard-hero h1{font-size:clamp(34px,6vw,52px)}
.stats-grid{gap:14px}.stat-card{padding:22px;border-radius:18px;background:linear-gradient(145deg,var(--surface-glow),transparent),var(--card)}
.history-item{border-radius:18px}.account-settings{border-radius:20px}
.legal-page{margin-top:24px}.legal-page>section{padding:clamp(20px,4vw,30px)}
.footer{margin-top:28px;padding:42px 0 max(32px,env(safe-area-inset-bottom));border-top:1px solid var(--border);background:rgba(2,6,23,.08)}
.footer__brand{max-width:410px}.footer__links a,.footer__cta{min-height:32px}

/* Admin */
.admin-tabs{position:sticky;top:64px;z-index:110;flex-wrap:nowrap;overflow-x:auto;padding:10px 0;margin:8px 0 22px;background:var(--bg);scrollbar-width:none}.admin-tabs::-webkit-scrollbar{display:none}.admin-tab{flex:0 0 auto;min-height:42px;display:inline-flex;align-items:center;padding:9px 16px}.admin-tab.is-active{color:#fff}
.admin-stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}.analytics-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.admin-category-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.admin-category-filters .pill{text-decoration:none}.admin-category-filters .pill.is-active{border-color:var(--brand);color:var(--text);background:rgba(124,108,255,.14)}
.admin-bulk-category{display:grid;grid-template-columns:minmax(180px,260px) minmax(190px,280px) auto;align-items:end;gap:10px;margin-top:18px}.admin-bulk-category .form__label{grid-column:1/-1;margin:0}.admin-quiz-select{display:flex;align-items:flex-start;gap:10px;cursor:pointer}.admin-quiz-select input{flex:0 0 auto;width:20px;height:20px;margin-top:2px}.pill--warning{border-color:rgba(251,191,36,.45);color:#fbbf24;background:rgba(251,191,36,.1)}

@media (max-width:900px){
  .nav__toggle{display:inline-grid}
  .nav__links{top:calc(100% + 8px);right:16px;left:16px;gap:2px;padding:10px;border-radius:18px;box-shadow:var(--shadow-lg)}
  .nav__links--open{max-height:min(520px,calc(100dvh - 88px));overflow-y:auto}
  .nav__links a,.nav__user{padding:13px 12px;border-radius:10px}.nav__theme{width:100%;margin:4px 0 0}
  .ad-slot--desktop{display:none}.page-layout{display:block}.ad-slot--mobile{display:flex}
  .home-hero{grid-template-columns:1fr;min-height:auto;padding:42px 34px}.home-hero__visual{display:none}
  .grid{grid-template-columns:1fr}
  .related-quizzes__grid{grid-template-columns:1fr}
  .subject-categories__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quiz-card{min-height:0}
}
@media (max-width:760px){
  .wrap{width:min(100% - 24px,1240px)}
  .page{padding:82px 0 44px}
  body.nav-sub .page{padding-top:142px}
  body.quiz-page .page__title{scroll-margin-top:128px;margin-top:0}
  .home-hero{display:block;min-height:auto;margin-bottom:38px;padding:34px 22px;border-radius:24px}
  .home-hero__visual{display:none!important}.home-hero h1{font-size:clamp(38px,11.5vw,54px);line-height:1.04;margin-bottom:18px}.home-hero__actions{display:grid;grid-template-columns:1fr;margin-top:24px}.home-hero__actions>.btn{width:100%}
  .section-heading{align-items:flex-start;gap:7px}.section-heading .muted{font-size:14px}
  .learning-modes{margin-bottom:38px}.learning-modes__grid{grid-template-columns:1fr}.learning-mode{min-height:160px;padding:22px}.learning-mode__icon{width:56px;height:56px}.learning-mode__badge{top:12px;right:12px}
  .quiz-categories{margin-inline:-2px}.quiz-category{min-height:44px}
  .category-hero{padding:24px 20px;border-radius:22px}.category-hero>p:not(.eyebrow){font-size:16px}
  .subject-categories__grid{grid-template-columns:1fr}
  .pagination{grid-template-columns:1fr 1fr}.pagination__status{grid-column:1/-1;grid-row:1;text-align:center}.pagination .btn{width:100%}
  .grid{grid-template-columns:1fr}.card:hover{transform:none}
  .search-sticky{top:72px;padding:12px;border-radius:16px}
  .page__title{font-size:clamp(28px,8vw,36px);line-height:1.15}
  .form__actions{display:grid;grid-template-columns:1fr}.form__actions .btn{width:100%}
  .result-share{display:grid;grid-template-columns:1fr;padding:0 18px 18px}.result-share .btn{width:100%}
  .stats-grid{grid-template-columns:1fr 1fr;margin:20px 0 36px}.stat-card{padding:18px}.stat-card strong{font-size:34px}
  .history-item{grid-template-columns:1fr auto;gap:14px;padding:18px}.history-item>.btn{grid-column:1/-1;width:100%}
  .account-settings{padding:20px;margin-top:34px}
  .footer__inner{display:grid;grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}
  .admin-bulk-category{grid-template-columns:1fr}.admin-bulk-category .form__label{grid-column:auto}
  .cmp-banner{inset:auto 10px 10px}.cmp-banner__card{max-height:calc(100dvh - 20px);overflow:auto}.cmp-banner__actions{align-items:stretch}.cmp-banner__actions .btn{width:100%}
  .bar-row{grid-template-columns:1fr}.bar-row__bar{height:9px}.bar-row__value{justify-self:end;margin-top:-30px}
}
@media (max-width:420px){
  .wrap{width:min(100% - 20px,1240px)}
  .home-hero{padding:30px 18px}.home-hero h1{font-size:clamp(36px,11vw,46px)}
  .stats-grid{grid-template-columns:1fr}.stat-card:last-child{grid-column:auto}
  .footer__inner{grid-template-columns:1fr}
  .footer__brand{grid-column:auto}
  .result-card__header,.result-card__body{display:block}.result-card__media{margin-top:16px}
  .mini-row__badges,.quiz-manage__actions,.quiz-manage__status{width:100%;justify-content:flex-start}
  .quiz-stats{gap:8px}.quiz-stat{padding:9px 8px;gap:8px}.quiz-stat__icon{flex-basis:34px;width:34px;height:34px;border-radius:10px;font-size:17px}.quiz-stat__copy strong{font-size:12px}
  .brand__mark{width:34px;height:34px;margin-right:8px}.brand__word{font-size:19px}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Flashcards */
.flashcards-hero{background:radial-gradient(circle at 85% 20%,rgba(45,212,191,.2),transparent 34%),linear-gradient(135deg,rgba(124,108,255,.15),transparent)}
.flashcard-decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:18px}
.flashcard-deck-card{display:flex;min-height:310px;flex-direction:column}.flashcard-deck-card .card__content{display:flex;flex:1;flex-direction:column;padding:22px}.flashcard-deck-card h2{margin:16px 0 10px;font-size:22px;line-height:1.25}.flashcard-deck-card p{flex:1;color:var(--muted);line-height:1.55}.flashcard-deck-card__meta{display:flex;align-items:baseline;gap:7px;margin-top:16px;color:var(--muted)}.flashcard-deck-card__meta strong{color:var(--brand-2);font-size:28px}.flashcard-deck-card .card__actions{padding:0 22px 22px}.flashcard-deck-card .btn{width:100%}
.flashcard-session__header{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.flashcard-session__header h1{max-width:850px;margin:0;font-size:clamp(30px,5vw,50px);line-height:1.1}
.flashcard-session{width:min(780px,100%);margin:0 auto}.flashcard-session__progress{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:14px;margin-bottom:18px;color:var(--muted);font-size:13px}.flashcard-session__progress .progress{height:9px;overflow:hidden;border-radius:99px;background:rgba(148,163,184,.16)}
.flashcard{position:relative;display:block;width:100%;height:clamp(360px,55vh,520px);padding:0;border:0;border-radius:28px;color:var(--text);background:transparent;cursor:pointer;perspective:1200px;text-align:center}.flashcard__face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;padding:clamp(28px,7vw,64px);border:1px solid var(--border);border-radius:28px;background:radial-gradient(circle at 80% 15%,rgba(45,212,191,.12),transparent 30%),var(--card);box-shadow:var(--shadow-lg);backface-visibility:hidden;transition:transform .5s cubic-bezier(.2,.75,.25,1)}.flashcard__face--back{transform:rotateY(180deg);background:radial-gradient(circle at 20% 15%,rgba(124,108,255,.18),transparent 32%),var(--card)}.flashcard.is-flipped .flashcard__face--front{transform:rotateY(-180deg)}.flashcard.is-flipped .flashcard__face--back{transform:rotateY(0)}.flashcard__face small{color:var(--brand-2);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.flashcard__face strong{font-size:clamp(22px,4vw,34px);line-height:1.35}.flashcard__face span{max-width:620px;color:var(--muted);font-size:15px;line-height:1.55}
.flashcard-session__actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.flashcard-session__actions .btn,.flashcard-session__reveal{min-height:54px}.flashcard-session__reveal{width:100%;margin-top:18px}.flashcard-summary{padding:clamp(28px,6vw,52px);text-align:center}.flashcard-summary h2{font-size:clamp(34px,6vw,52px)}.flashcard-summary>p:not(.eyebrow){color:var(--muted);font-size:18px}.flashcard-summary .form__actions{justify-content:center;margin-top:26px}
@media (max-width:760px){.flashcard-decks{grid-template-columns:1fr}.flashcard-deck-card{min-height:0}.flashcard-session__header{align-items:stretch;flex-direction:column}.flashcard-session__header .btn{width:100%}.flashcard-session__progress{grid-template-columns:auto 1fr}.flashcard-session__progress>span:last-child{grid-column:1/-1;text-align:center}.flashcard{height:clamp(380px,62vh,500px)}.flashcard-session__actions{grid-template-columns:1fr}.flashcard-summary .form__actions{display:grid}}
@media (prefers-reduced-motion:reduce){.flashcard__face{transition-duration:.01ms!important}}

/* Flashcards: school catalog and study motion */
.flashcards-hero{display:grid;grid-template-columns:minmax(0,1fr) 230px;align-items:center;overflow:hidden}.flashcards-hero__copy>p:not(.eyebrow){max-width:720px}.flashcards-hero__cards{position:relative;height:160px}.flashcards-hero__cards span{position:absolute;display:grid;place-items:center;width:116px;height:146px;border:1px solid rgba(255,255,255,.2);border-radius:20px;color:#fff;background:linear-gradient(145deg,var(--brand),var(--brand-2));box-shadow:0 18px 45px rgba(2,6,23,.3);font-size:42px;font-weight:850}.flashcards-hero__cards span:nth-child(1){left:10px;top:8px;transform:rotate(-12deg);opacity:.55}.flashcards-hero__cards span:nth-child(2){left:54px;top:3px;transform:rotate(3deg);opacity:.8}.flashcards-hero__cards span:nth-child(3){left:98px;top:11px;transform:rotate(13deg)}
.flashcard-subjects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 20px}.flashcard-subject{display:flex;align-items:center;gap:12px;min-height:76px;padding:12px;border:1px solid var(--border);border-radius:18px;color:var(--text);background:var(--card);cursor:pointer;font:inherit;text-align:left;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}.flashcard-subject:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}.flashcard-subject.is-active{border-color:rgba(45,212,191,.6);background:linear-gradient(145deg,rgba(124,108,255,.16),rgba(45,212,191,.12));box-shadow:0 10px 28px rgba(45,212,191,.1)}.flashcard-subject__icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));font-size:16px;font-weight:850}.flashcard-subject strong,.flashcard-subject small{display:block}.flashcard-subject strong{margin-bottom:4px;font-size:14px;line-height:1.2}.flashcard-subject small{color:var(--muted);font-size:11px}
.flashcard-deck-card{position:relative;overflow:hidden}.flashcard-deck-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-2));opacity:.8}.flashcard-deck-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}.flashcard-deck-card__stack{position:relative;width:52px;height:38px}.flashcard-deck-card__stack i{position:absolute;inset:4px 0 0 8px;border:1px solid var(--border-strong);border-radius:7px;background:var(--card)}.flashcard-deck-card__stack i:nth-child(1){transform:translate(-8px,-4px) rotate(-7deg);opacity:.45}.flashcard-deck-card__stack i:nth-child(2){transform:translate(-3px,-2px) rotate(-2deg);opacity:.7}.flashcard-deck-card__stack i:nth-child(3){background:linear-gradient(135deg,rgba(124,108,255,.25),rgba(45,212,191,.18))}.flashcard-deck-card:hover .flashcard-deck-card__stack{transform:translateY(-2px) rotate(3deg)}.flashcard-deck-card__stack{transition:transform .25s ease}
.flashcard{isolation:isolate;transform-style:preserve-3d}.flashcard:focus-visible{outline:3px solid var(--brand-2);outline-offset:5px}.flashcard__face{transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform,opacity;transition:transform .66s cubic-bezier(.2,.72,.18,1.02),opacity .16s linear,visibility 0s linear .34s,box-shadow .3s ease}.flashcard__face>*{transform:translateZ(28px)}.flashcard__face--front{opacity:1;visibility:visible}.flashcard:hover:not(.is-flipped) .flashcard__face--front{box-shadow:0 26px 60px rgba(2,6,23,.28);transform:rotateX(1.5deg) rotateY(-2deg) translateY(-2px)}.flashcard.is-flipped .flashcard__face--front{opacity:0;visibility:hidden;transform:rotateY(-180deg) scale(.985)}.flashcard__face--back{opacity:0;visibility:hidden;transform:rotateY(180deg) scale(.985)}.flashcard.is-flipped .flashcard__face--back{opacity:1;visibility:visible;transform:rotateY(0) scale(1);transition-delay:0s, .28s, 0s, 0s}.flashcard__corner{position:absolute;right:18px;bottom:18px;z-index:4;width:36px;height:36px;border-right:2px solid var(--brand-2);border-bottom:2px solid var(--brand-2);border-radius:0 0 10px;opacity:.5;pointer-events:none}.flashcard__explanation{padding-top:16px;border-top:1px solid var(--border)}.flashcard__turn-hint{font-size:12px!important;opacity:.72}.flashcard.is-entering{animation:flashcard-enter .38s cubic-bezier(.2,.8,.2,1) both}@keyframes flashcard-enter{from{opacity:0;transform:translateX(22px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:900px){.flashcard-subjects{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.flashcards-hero{display:block}.flashcards-hero__cards{display:none}.flashcard-subjects{display:flex;overflow-x:auto;margin-inline:-2px;padding:2px 2px 10px;scroll-snap-type:x proximity}.flashcard-subject{flex:0 0 180px;scroll-snap-align:start}.flashcard__face>*{transform:none}.flashcard:hover:not(.is-flipped) .flashcard__face--front{transform:none}}
@media (prefers-reduced-motion:reduce){.flashcard.is-entering{animation:none!important}.flashcard__face{transition-duration:.01ms!important}.flashcard-deck-card__stack{transition:none!important}}

/* Flashcard mastery controls */
.flashcard-page .flashcard{height:clamp(460px,56vh,550px)}
.flashcard__face{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
button.flashcard__face{width:100%;border:1px solid var(--border);color:var(--text);cursor:pointer}
.flashcard__face--back{justify-content:flex-start;gap:12px;overflow-y:auto;padding:clamp(24px,4vw,40px)}
.flashcard__face--back>small{flex:0 0 auto}
#flashcardAnswer{max-width:680px;color:var(--text);font-size:clamp(25px,3.5vw,38px);font-weight:800;letter-spacing:-.025em;line-height:1.22;text-wrap:balance}
.flashcard__explanation{width:min(650px,100%);color:var(--muted)!important;font-size:clamp(14px,1.7vw,17px)!important;font-weight:450;line-height:1.65!important;text-wrap:pretty}
.flashcard__source{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:7px 11px;border:1px solid var(--border);border-radius:10px;color:var(--brand-2)!important;font-size:12px!important;font-weight:750;text-decoration:none}.flashcard__source:hover{border-color:var(--brand-2);background:rgba(45,212,191,.08)}.flashcard__source[hidden]{display:none}
.flashcard__mastery{display:grid;width:min(650px,100%);grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;padding-top:8px}
.flashcard-rating{display:flex;align-items:center;justify-content:center;gap:10px;min-height:62px;padding:10px 14px;border:1px solid var(--border);border-radius:16px;color:var(--text);background:rgba(148,163,184,.06);cursor:pointer;font:inherit;text-align:left;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}.flashcard-rating>span:first-child{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;font-size:19px;font-weight:900}.flashcard-rating strong,.flashcard-rating small{display:block}.flashcard-rating>span:last-child{font-size:14px;font-weight:800}.flashcard-rating small{margin-top:2px;color:var(--muted);font-size:10px;font-weight:600}.flashcard-rating:hover{transform:translateY(-2px)}.flashcard-rating:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px}.flashcard-rating--known{border-color:rgba(52,211,153,.35)}.flashcard-rating--known>span:first-child{color:#065f46;background:rgba(52,211,153,.88)}.flashcard-rating--known:hover{border-color:#34d399;background:rgba(52,211,153,.12);box-shadow:0 10px 24px rgba(52,211,153,.12)}.flashcard-rating--repeat{border-color:rgba(251,113,133,.3)}.flashcard-rating--repeat>span:first-child{color:#fff;background:rgba(244,63,94,.78)}.flashcard-rating--repeat:hover{border-color:#fb7185;background:rgba(251,113,133,.1);box-shadow:0 10px 24px rgba(251,113,133,.1)}
.flashcard__show-question{min-height:32px;padding:4px 10px;border:0;color:var(--muted);background:transparent;cursor:pointer;font:inherit;font-size:12px;font-weight:700}.flashcard__show-question:hover{color:var(--text)}
.flashcard.is-known .flashcard__face--back{border-color:rgba(52,211,153,.85);background:radial-gradient(circle at 50% 15%,rgba(52,211,153,.2),transparent 38%),var(--card);box-shadow:0 24px 70px rgba(52,211,153,.2)}.flashcard.is-repeat .flashcard__face--back{border-color:rgba(251,113,133,.75);background:radial-gradient(circle at 50% 15%,rgba(251,113,133,.16),transparent 38%),var(--card);box-shadow:0 24px 70px rgba(251,113,133,.16)}
.flashcard.is-known{animation:flashcard-mastered .62s ease both}.flashcard.is-repeat{animation:flashcard-review .62s ease both}@keyframes flashcard-mastered{0%,72%{transform:scale(1)}45%{transform:scale(1.015)}100%{opacity:0;transform:translateX(38px) scale(.97)}}@keyframes flashcard-review{0%,72%{transform:translateX(0)}22%{transform:translateX(-7px)}38%{transform:translateX(7px)}54%{transform:translateX(-4px)}100%{opacity:0;transform:translateX(-38px) scale(.97)}}
.flashcard__rating-feedback{position:absolute;top:18px;right:18px;z-index:8;padding:8px 12px;border-radius:999px;color:#fff;font-size:12px;font-weight:850;letter-spacing:.04em;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s,transform .2s}.flashcard.is-known .flashcard__rating-feedback{background:#059669;opacity:1;transform:none}.flashcard.is-repeat .flashcard__rating-feedback{background:#e11d48;opacity:1;transform:none}
.flashcard-summary[hidden],.flashcard[hidden],.flashcard-deck-card[hidden]{display:none!important}
@media (max-width:760px){.flashcard-page .flashcard{height:clamp(500px,66vh,580px)}.flashcard__face--back{padding:20px 18px;gap:9px}.flashcard__mastery{grid-template-columns:1fr;gap:8px}.flashcard-rating{min-height:52px}.flashcard-rating small{display:none}.flashcard__explanation{font-size:14px!important;line-height:1.45!important}}
@media (prefers-reduced-motion:reduce){.flashcard.is-known,.flashcard.is-repeat{animation:none!important}.flashcard__rating-feedback{transition:none!important}}

/* Local flashcard progress */
.flashcard-deck-progress{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}.flashcard-deck-progress[hidden]{display:none!important}.flashcard-deck-progress__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.flashcard-deck-progress__head strong{font-size:12px}.flashcard-deck-progress__head span{color:var(--brand-2);font-size:12px;font-weight:800}.flashcard-deck-progress__bar{height:7px;overflow:hidden;border-radius:999px;background:rgba(148,163,184,.14)}.flashcard-deck-progress__bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--brand-2))}.flashcard-deck-progress__counts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:10px}.flashcard-deck-progress__counts span{padding:5px 7px;border-radius:8px;background:rgba(148,163,184,.07)}.flashcard-deck-progress__counts .is-known{color:#059669;background:rgba(52,211,153,.1)}.flashcard-deck-progress__counts .is-repeat{color:#e11d48;background:rgba(251,113,133,.1)}
.flashcard-history-section{margin-top:52px}.flashcard-history-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}.flashcard-history-stats article{padding:18px;border:1px solid var(--border);border-radius:17px;background:var(--card)}.flashcard-history-stats strong{display:block;font-size:30px;letter-spacing:-.04em}.flashcard-history-stats span{color:var(--muted);font-size:12px}.flashcard-history-list{display:grid;gap:12px}.flashcard-history-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:22px;padding:20px}.flashcard-history-item h3{margin:10px 0 5px}.flashcard-history-item p{margin:0}.flashcard-history-counts{display:grid;grid-template-columns:repeat(3,auto);gap:8px}.flashcard-history-counts>span{min-width:78px;padding:9px;border-radius:12px;text-align:center;background:rgba(148,163,184,.07)}.flashcard-history-counts strong,.flashcard-history-counts small{display:block}.flashcard-history-counts strong{font-size:22px}.flashcard-history-counts small{color:var(--muted);font-size:10px}.flashcard-history-counts .is-known strong{color:#059669}.flashcard-history-counts .is-repeat strong{color:#e11d48}.pill--success{border-color:rgba(52,211,153,.4);color:#059669;background:rgba(52,211,153,.1)}
@media(max-width:900px){.flashcard-history-stats{grid-template-columns:1fr 1fr}.flashcard-history-item{grid-template-columns:1fr}.flashcard-history-counts{grid-template-columns:repeat(3,1fr)}.flashcard-history-item .history-item__actions{display:grid;grid-template-columns:1fr 1fr}.flashcard-history-item .history-item__actions .btn{width:100%}}
@media(max-width:420px){.flashcard-history-counts{gap:5px}.flashcard-history-counts>span{min-width:0;padding:7px 4px}.flashcard-history-stats article{padding:14px}.flashcard-history-stats strong{font-size:26px}}
