/*
 * KloudExam — stylesheet
 * ----------------------
 * CSS custom properties drive theming (light by default, dark via
 * prefers-color-scheme or a data-theme="dark" attribute on <html>).
 * Sections below, in order: tokens/theme, base elements, nav, buttons,
 * hero, content sections (exam catalog, how-it-works, pricing/gate),
 * quiz screen, results screen, motion.
 */

/* Layout: sticky top nav; home = dark hero, exam catalog, how-it-works steps, footer; quiz = centered 760px column with one elevated question card. */
:root{
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f0f2f5; --fg:#121820; --muted:#5c6876; --line:#e3e7ec;
  --accent:#d97a1a; --accent-hover:#c26c14; --accent-fg:#ffffff; --accent-soft:#fdf0e2; --accent-dis:#efcfa8;
  --hero:#0f1b2b; --hero-2:#16263b; --hero-fg:#f4f6f9; --hero-muted:#a9b6c6;
  --good:#1d7a3e; --good-soft:#e6f4ea; --bad:#b3261e; --bad-soft:#fcebea; --note:#8a5a00; --note-soft:#fff4d9;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -8px rgba(16,24,40,.10);
  --shadow-lg:0 2px 4px rgba(16,24,40,.04),0 20px 40px -12px rgba(16,24,40,.18);
  --display:"Plus Jakarta Sans","Inter",-apple-system,"Segoe UI",system-ui,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0c1219; --surface:#141c26; --surface-2:#1a2431; --fg:#ebeff4; --muted:#97a4b4; --line:#253140;
  --accent:#f09a45; --accent-hover:#f5ac62; --accent-fg:#1f1304; --accent-soft:#2f2212; --accent-dis:#5a4024;
  --hero:#0a131e; --hero-2:#122033; --hero-fg:#f4f6f9; --hero-muted:#a2b0c1;
  --good:#6fd68f; --good-soft:#12301e; --bad:#ff8f86; --bad-soft:#381a18; --note:#f0c14b; --note-soft:#382d0e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.5); --shadow-lg:0 20px 40px -12px rgba(0,0,0,.6); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1219; --surface:#141c26; --surface-2:#1a2431; --fg:#ebeff4; --muted:#97a4b4; --line:#253140;
  --accent:#f09a45; --accent-hover:#f5ac62; --accent-fg:#1f1304; --accent-soft:#2f2212; --accent-dis:#5a4024;
  --hero:#0a131e; --hero-2:#122033; --hero-fg:#f4f6f9; --hero-muted:#a2b0c1;
  --good:#6fd68f; --good-soft:#12301e; --bad:#ff8f86; --bad-soft:#381a18; --note:#f0c14b; --note-soft:#382d0e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.5); --shadow-lg:0 20px 40px -12px rgba(0,0,0,.6); color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.02em;text-wrap:balance}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.container{max-width:1120px;margin:0 auto}
.narrow{max-width:780px;margin:0 auto}

/* Nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.brand svg{width:32px;height:32px;flex:none}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links button{background:none;border:0;padding:8px 12px;border-radius:8px;font-weight:500;color:var(--muted);white-space:nowrap}
.nav-links button:hover{color:var(--fg);background:var(--surface-2)}
.nav-links .cta{background:var(--fg);color:var(--bg);font-weight:600}
.nav-links .cta:hover{background:var(--fg);color:var(--bg);opacity:.9}
@media (max-width:560px){.nav-links .hide-sm{display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 20px;font-weight:600;min-height:48px;box-shadow:var(--shadow-sm);transition:border-color .15s,background .15s,transform .15s}
.btn:not(:disabled):hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.btn:not(:disabled):active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn.primary:not(:disabled):hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.primary:disabled{background:var(--accent-dis);border-color:var(--accent-dis);color:var(--accent-fg);box-shadow:none;cursor:not-allowed}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost-dark{background:transparent;color:var(--hero-fg);border-color:rgba(255,255,255,.22);box-shadow:none}
.btn.ghost-dark:hover{border-color:rgba(255,255,255,.5)}
kbd{font:600 .72rem var(--body);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--muted);background:var(--surface)}

/* Hero */
.hero{background:radial-gradient(900px 420px at 85% 10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),linear-gradient(180deg,var(--hero),var(--hero-2));color:var(--hero-fg)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding-block:72px 80px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:6px 12px;border-radius:999px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hero h1{font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.04;font-weight:800;margin-top:20px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{color:var(--hero-muted);font-size:1.15rem;max-width:46ch;margin:20px 0 0}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.checks{list-style:none;padding:0;margin:28px 0 0;display:flex;gap:10px 22px;flex-wrap:wrap;color:var(--hero-muted);font-size:.92rem}
.checks li{display:flex;align-items:center;gap:8px}
.checks svg{width:18px;height:18px;flex:none}
.hero-art{position:relative;max-width:100%}
.hero-art .frame{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.hero-img{display:block;width:100%;height:auto}
.float{position:absolute;background:var(--surface);color:var(--fg);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:600}
.float small{display:block;color:var(--muted);font-weight:500;font-size:.75rem}
.float .dot{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.float.f1{left:-14px;bottom:22px}.float.f1 .dot{background:var(--good-soft);color:var(--good)}
.float.f2{right:-10px;top:-14px}.float.f2 .dot{background:var(--accent-soft);color:var(--accent)}
.float svg{width:18px;height:18px}
@media (max-width:860px){.hero-in{grid-template-columns:1fr;padding-block:48px 56px}.hero-art{max-width:520px}}
@media (max-width:520px){.float{display:none}}

/* Sections */
.section{padding-block:64px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800}
.sec-head p{margin:6px 0 0;color:var(--muted)}
.toolbar{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.searchwrap{position:relative}
.searchwrap svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:2}
.search{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:14px 16px 14px 46px;min-height:54px;box-shadow:var(--shadow-sm);font-size:1rem}
.search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.pills{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;min-width:0}
.pill{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 16px;font-weight:500;white-space:nowrap;font-size:.92rem;transition:background .15s,border-color .15s}
.pill:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.pill[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg);font-weight:600}
.pill .c{opacity:.6;margin-left:4px;font-variant-numeric:tabular-nums}
.side-filters{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:.92rem;color:var(--muted)}
.side-filters select{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--fg)}
.side-filters label{display:flex;gap:8px;align-items:center}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.count{color:var(--muted);font-size:.9rem;margin-bottom:12px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.exam{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s}
.exam.live:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.exam-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mono{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.9rem;color:#fff;flex:none}
.badge{font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.badge.live{background:var(--good-soft);color:var(--good)}
.exam .code{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;line-height:1}
.exam h3{font-family:var(--body);font-size:1rem;font-weight:600;letter-spacing:0;line-height:1.35}
.exam .meta{display:flex;gap:14px;color:var(--muted);font-size:.85rem;flex-wrap:wrap;margin-top:auto}
.exam .btn{width:100%}
.empty{grid-column:1/-1;text-align:center;padding:48px 16px;border:1px dashed var(--line);border-radius:18px;color:var(--muted)}

.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));list-style:none;padding:0;margin:0;counter-reset:s}
.step{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px}
.step .n{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--display);font-weight:800}
.step h3{font-size:1.1rem}.step p{margin:0;color:var(--muted)}
.alt{background:var(--surface);border-block:1px solid var(--line)}
.alt .step{background:var(--bg)}
footer{padding-block:32px;color:var(--muted);font-size:.875rem}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

.hero-price{margin:18px 0 0;color:var(--hero-muted);font-size:.95rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hero-price .pt{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--hero-fg);border-radius:999px;padding:5px 12px;font-weight:600}
.hero-price b{color:var(--accent);font-size:1.05rem}
.sec-head.center{justify-content:center;text-align:center}
.price-card{max-width:460px;margin:0 auto;background:var(--surface);border:2px solid var(--accent);border-radius:24px;padding:32px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:22px}
.price-top{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.price-top p{margin:0;color:var(--muted)}
.amount{font-family:var(--display);font-weight:800;font-size:4.5rem;line-height:1;letter-spacing:-.04em;display:flex;align-items:flex-start;gap:4px}
.amount .cur{font-size:2rem;margin-top:.45rem}
.amount .per{font-family:var(--body);font-size:.95rem;font-weight:500;color:var(--muted);letter-spacing:0;align-self:flex-end;margin:0 0 .6rem 8px}
.feat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.feat li{display:flex;gap:10px;align-items:flex-start}.feat svg{width:20px;height:20px;flex:none;margin-top:2px}
.btn.big{min-height:56px;font-size:1.05rem;width:100%}
.price-card #free{width:100%;margin-top:-10px}
#buynote{text-align:center}#buynote.warn{color:var(--note)}
.gate{align-items:center;text-align:center;padding:40px 28px}
.gate h2{font-size:1.6rem}.hint.big{font-size:1rem;max-width:46ch}
.gate-ic{width:56px;height:56px;border-radius:16px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.gate-ic svg{width:26px;height:26px}
.gate .btn.big{max-width:360px}
.unlock{width:100%;max-width:360px;display:flex;flex-direction:column;gap:6px;text-align:left;border-top:1px solid var(--line);padding-top:18px;margin-top:4px}
.unlock label{font-weight:600;font-size:.9rem}
.urow{display:flex;gap:8px}.urow input{flex:1;min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 12px;min-height:48px;text-transform:uppercase;letter-spacing:.06em}
.okc{color:var(--good)}.warnc{color:var(--bad)}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;padding:6px}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}
/* Account (sign in / create account / account details) */
.acct{max-width:480px;width:100%;margin:24px auto 0}
.acct h1{font-size:1.6rem}
.acct h2{font-size:1.05rem}
.acct a.btn{text-decoration:none;color:inherit}
.aform{display:flex;flex-direction:column;gap:12px}
.aform label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.9rem}
.aform label .hint{font-weight:400;display:inline}
.aform input{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 12px;min-height:48px;font-weight:400}
.aform input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.acct .aform + .aform,.acct #pf{border-top:1px solid var(--line);padding-top:18px}
/* Quiz */
.qwrap{padding-block:28px 40px;display:flex;flex-direction:column;gap:18px}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.qtitle{display:flex;align-items:center;gap:12px;min-width:0}
.qtitle h1{font-size:1.4rem;font-weight:800;line-height:1.2}
.qtitle small{display:block;color:var(--muted);font-size:.85rem;font-family:var(--body);font-weight:500;letter-spacing:0}
.icons{display:flex;gap:8px;flex:none}
.ib{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.ib:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.ib[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}
.ib svg{width:20px;height:20px;stroke:var(--fg);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ib[aria-pressed="true"] svg{stroke:var(--accent)}
.progress{display:flex;flex-direction:column;gap:10px}
.prow{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.92rem}
.prow b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.track{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.track i{display:block;height:100%;min-width:6px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#ffd27a));border-radius:3px;transition:width .3s ease}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow)}
.tagrow{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.tag.multi{background:var(--accent-soft);color:var(--accent)}
.qtext{margin:0;font-family:var(--display);font-size:1.3rem;line-height:1.45;font-weight:700;letter-spacing:-.01em}
.choices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.choice{width:100%;display:flex;align-items:center;gap:14px;text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;min-height:58px;transition:border-color .15s,background .15s,box-shadow .15s}
.choice:not(:disabled):hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent-soft) 40%,var(--surface))}
.choice .l{flex:none;width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center;font-size:.85rem;font-weight:700;transition:all .15s}
.choice .t{min-width:0;overflow-wrap:anywhere;flex:1}
.choice .st{flex:none;width:22px;height:22px}
.choice.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.choice.sel .l{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.choice.ok{border-color:var(--good);background:var(--good-soft)}
.choice.ok .l{background:var(--good);border-color:var(--good);color:var(--surface)}
.choice.no{border-color:var(--bad);background:var(--bad-soft)}
.choice.no .l{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.choice:disabled{cursor:default;color:inherit}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.actions .hint{margin-left:auto}
.hint{color:var(--muted);font-size:.85rem;margin:0}
.result{display:flex;gap:12px;align-items:flex-start;border-radius:14px;padding:14px 16px;font-weight:600}
.result svg{width:22px;height:22px;flex:none;margin-top:1px}
.result.ok{background:var(--good-soft);color:var(--good)}.result.no{background:var(--bad-soft);color:var(--bad)}
.explain{background:var(--surface-2);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.explain h3{font-family:var(--body);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.explain p{margin:0}
.note{font-size:.88rem;color:var(--note);background:var(--note-soft);padding:10px 12px;border-radius:10px}
.qnav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.qnav .sp{flex:1}
.goto{display:flex;gap:6px}
.goto input{width:88px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 12px;min-height:48px}
.shortcuts{text-align:center}
.shortcuts .hint{display:flex;gap:6px 14px;justify-content:center;flex-wrap:wrap}
@media (max-width:560px){.card{padding:20px;border-radius:18px}.qtext{font-size:1.12rem}.qtitle h1{font-size:1.15rem}.shortcuts{display:none}.actions .hint{display:none}}

/* Results */
.res-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.ring{width:132px;height:132px}
.ring text{font-family:var(--display);font-weight:800;fill:var(--fg)}
.res-top h2{font-size:1.6rem}
.res-top p{margin:6px 0 0;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:12px}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:4px 12px;align-items:center;font-size:.92rem}
.bar-row .tr{grid-column:1/-1;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.bar-row .tr i{display:block;height:100%;border-radius:4px}
.bar-row .v{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.mi{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.mi summary{padding:14px 16px;cursor:pointer;font-weight:500}
.mi div{padding:0 16px 16px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.mi div b{color:var(--fg)}
@media (max-width:520px){.res-top{grid-template-columns:1fr;justify-items:start}}

.fade{animation:fade .25s ease both}
@keyframes fade{from{opacity:.0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before{transition:none!important;animation:none!important}}