:root{
  --bg:#0a0a0a;--bg2:#111;--bg3:#181818;--bg4:#1f1f1f;
  --border:#252525;--border2:#333;
  --red:#e8421e;--red2:#ff5533;--redbg:rgba(232,66,30,0.1);
  --dim:#555;--muted:#888;--text:#bbb;--bright:#f0f0f0;
  --green:#4caf6e;--amber:#e09a3a;--blue:#4a9fd8;
  --head:'Big Shoulders Display',sans-serif;
  --body:'Manrope',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ── grain overlay ── */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px}

/* ── particles ── */
.particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.particle{position:absolute;border-radius:50%;background:var(--red);opacity:0;animation:pfloat linear infinite}
@keyframes pfloat{0%{opacity:0;transform:translateY(0) scale(1)}15%{opacity:.5}85%{opacity:.08}100%{opacity:0;transform:translateY(-100px) scale(.4)}}

.screen{display:none;position:relative;z-index:1;min-height:100vh;flex-direction:column}
.screen.active{display:flex}

/* ── HEADER ── */
.hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 36px;height:58px;border-bottom:1px solid var(--border);
  background:rgba(10,10,10,.96);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:100;flex-shrink:0
}
.logo{display:flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none}
.logo-a{font-family:var(--head);font-size:20px;font-weight:900;letter-spacing:.01em;color:var(--red);text-transform:uppercase}
.logo-b{font-family:var(--head);font-size:20px;font-weight:900;letter-spacing:.01em;color:var(--bright);text-transform:uppercase}
.hdr-tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;border:1px solid var(--border2);padding:5px 12px;border-radius:20px}

/* ── HOME ── */
#home{background:var(--bg)}
.hero-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:800px;height:360px;
  background:radial-gradient(ellipse at 50% 0%,rgba(232,66,30,.15) 0%,transparent 68%);pointer-events:none;z-index:0}

.hero{position:relative;z-index:1;text-align:center;padding:60px 24px 44px}

.hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(232,66,30,.1);border:1px solid rgba(232,66,30,.28);
  color:var(--red);font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  padding:6px 16px;border-radius:20px;margin-bottom:26px
}

.hero-h1{
  font-family:var(--head);font-weight:900;text-transform:uppercase;
  font-size:clamp(46px,8vw,92px);line-height:.92;letter-spacing:-.01em;
  color:var(--bright);margin-bottom:6px
}
.hero-h1 .r{color:var(--red)}
.hero-sub{
  font-family:var(--body);font-weight:500;font-size:clamp(13px,1.8vw,15px);
  color:var(--muted);letter-spacing:.04em;margin-bottom:36px
}

.stats-row{display:flex;align-items:center;justify-content:center;gap:28px;margin-bottom:44px;flex-wrap:wrap}
.stat{text-align:center}
.stat-n{font-family:var(--head);font-size:38px;font-weight:900;color:var(--red);line-height:1}
.stat-l{font-family:var(--body);font-size:12px;font-weight:500;color:var(--muted);margin-top:2px;letter-spacing:.03em}
.stat-sep{width:1px;height:32px;background:var(--border2)}

/* mode */
.modes{display:flex;gap:10px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.mcard{
  width:205px;padding:20px 18px;background:var(--bg2);border:1px solid var(--border2);
  border-radius:10px;cursor:pointer;transition:all .18s;text-align:left
}
.mcard:hover{background:var(--bg3)}
.mcard.active{border-color:var(--red);background:rgba(232,66,30,.07)}
.mcard-ico{font-size:20px;margin-bottom:9px;display:block}
.mcard-name{font-family:var(--head);font-size:17px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:#f6f6f6;margin-bottom:5px;text-shadow:0 0 10px rgba(255,255,255,.04)}
.mcard-desc{font-family:var(--body);font-size:12px;font-weight:500;color:#9f9f9f;line-height:1.65;letter-spacing:.01em}
.mcard.active .mcard-desc{color:#c6c6c6}

.setup-grid{
  display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:12px;justify-content:center;margin:0 auto 18px;max-width:1120px
}
.setup-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;text-align:left
}
.count-card{position:relative}
.setup-title{
  font-family:var(--head);font-size:17px;font-weight:800;
  color:#f4f4f4;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;text-shadow:0 0 10px rgba(255,255,255,.04)
}
.selector-row{display:flex;flex-wrap:wrap;gap:8px}
.selector-btn{
  background:var(--bg3);border:1px solid var(--border2);color:#a7a7a7;
  border-radius:999px;padding:9px 14px;cursor:pointer;transition:all .18s;
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase
}
.selector-btn:hover{color:var(--text);border-color:var(--muted)}
.selector-btn.active{color:var(--bright);border-color:var(--red);background:rgba(232,66,30,.08);box-shadow:0 0 18px rgba(232,66,30,.12)}
.setup-sub{
  margin-top:10px;font-family:var(--body);font-size:12px;font-weight:500;line-height:1.7;
  color:#acacac;min-height:34px;letter-spacing:.01em
}
.count-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.count-badge{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--bright);
  background:var(--bg3);border:1px solid var(--border2);border-radius:999px;padding:8px 12px
}
.count-controls{display:flex;align-items:center;gap:10px;margin-top:12px}
.count-range{flex:1;accent-color:var(--red)}
.count-number{
  width:84px;background:var(--bg3);border:1px solid var(--border2);border-radius:10px;
  color:var(--bright);padding:9px 10px;font-family:var(--mono);font-size:12px;outline:none
}
.count-number:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(232,66,30,.08)}
.count-range:disabled,.count-number:disabled{opacity:.45}
.count-overlay{
  position:absolute;inset:0;border:none;background:transparent;cursor:not-allowed;
  border-radius:12px;z-index:2
}
.review-due,.home-msg{
  max-width:760px;margin:0 auto 16px;padding:14px 16px;border-radius:12px;
  border:1px solid var(--border2);background:var(--bg2)
}
.review-due{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.review-due-title{
  font-family:var(--head);font-size:17px;font-weight:800;color:var(--bright);
  text-transform:uppercase;letter-spacing:.05em
}
.review-due-sub,.home-msg{
  font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted)
}
.home-msg{border-color:rgba(232,66,30,.25);color:var(--text)}

/* cats */
.sec-lbl{
  font-family:var(--head);font-size:22px;font-weight:800;letter-spacing:.1em;
  color:var(--bright);text-transform:uppercase;
  display:flex;align-items:center;gap:16px;
  justify-content:center;margin-bottom:20px;margin-top:8px
}
.sec-lbl::before{content:'';flex:1;max-width:80px;height:2px;background:linear-gradient(90deg,transparent,var(--red))}
.sec-lbl::after{content:'';flex:1;max-width:80px;height:2px;background:linear-gradient(90deg,var(--red),transparent)}

.cats{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:860px;margin:0 auto 36px}
.chip{
  display:flex;align-items:center;gap:7px;padding:9px 15px;
  border-radius:8px;border:1px solid var(--border);background:var(--bg2);
  cursor:pointer;transition:all .15s;font-family:var(--body);font-size:14px;
  font-weight:500;color:var(--muted);user-select:none
}
.chip:hover{border-color:var(--border2);color:var(--text)}
.chip.on{border-color:var(--red);background:rgba(232,66,30,.07);color:var(--bright)}
.chip-dot{width:6px;height:6px;border-radius:50%;background:var(--border2);flex-shrink:0;transition:background .15s}
.chip.on .chip-dot{background:var(--red)}
.chip-n{font-family:var(--mono);font-size:11px;color:var(--dim);margin-left:4px;padding-left:6px;border-left:1px solid var(--border)}
.chip.on .chip-n{color:var(--muted)}

.home-btns{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.btn-red{padding:13px 32px;background:var(--red);color:#fff;border:none;
  font-family:var(--head);font-size:16px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;border-radius:8px;transition:all .18s}
.btn-red:hover{background:var(--red2);transform:translateY(-1px)}
.btn-ghost{padding:13px 20px;background:transparent;color:var(--dim);
  border:1px solid var(--border2);font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;cursor:pointer;border-radius:8px;transition:all .18s}
.btn-ghost:hover{color:var(--text);border-color:var(--muted)}
.btn-red:focus-visible,
.btn-ghost:focus-visible,
.selector-btn:focus-visible,
.fav-btn:focus-visible,
.result-filter-btn:focus-visible,
.pdf-btn:focus-visible,
.settings-btn:focus-visible,
.favorites-hub-btn:focus-visible,
.learn-entry-btn:focus-visible,
.bnav:focus-visible,
.rb:focus-visible,
.btn-reveal:focus-visible{
  outline:2px solid rgba(255,255,255,.82);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(232,66,30,.14)
}
.btn-red:disabled,
.btn-ghost:disabled,
.selector-btn:disabled,
.fav-btn:disabled,
.result-filter-btn:disabled,
.pdf-btn:disabled,
.settings-btn:disabled,
.favorites-hub-btn:disabled,
.bnav:disabled,
.rb:disabled,
.btn-reveal:disabled{
  opacity:.58;
  cursor:not-allowed;
  transform:none;
  box-shadow:none
}

/* ── QUIZ ── */
#quiz{background:var(--bg)}
.qbar{
  display:flex;align-items:center;gap:16px;padding:0 28px;height:52px;
  background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0
}
.qback{
  background:rgba(232,66,30,.12);border:1px solid rgba(232,66,30,.38);color:#ffd8d0;
  font-family:var(--mono);font-size:11px;font-weight:600;padding:7px 14px;border-radius:8px;
  cursor:pointer;transition:all .18s;letter-spacing:.05em;white-space:nowrap;
  box-shadow:0 0 18px rgba(232,66,30,.08)
}
.qback:hover{
  color:#fff;border-color:rgba(255,122,89,.7);background:rgba(232,66,30,.2);
  transform:translateY(-1px);box-shadow:0 0 22px rgba(232,66,30,.18)
}
.prog-track{flex:1;height:2px;background:var(--border);border-radius:1px}
.prog-fill{height:100%;background:var(--red);border-radius:1px;transition:width .4s ease}
.qnum{font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap}
.scores{display:flex;gap:12px}
.sc{font-family:var(--mono);font-size:11px;font-weight:500}
.sc-g{color:var(--green)}.sc-b{color:var(--red)}.sc-s{color:var(--dim)}

.qmain{flex:1;display:flex;flex-direction:column;max-width:800px;width:100%;margin:0 auto;padding:36px 28px 28px}

.qcard{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:28px 32px;margin-bottom:16px}
.qmeta{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.cat-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(232,66,30,.09);border:1px solid rgba(232,66,30,.22);
  color:var(--red);font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  padding:4px 11px;border-radius:20px;text-transform:uppercase
}
.sub-badge{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.timer-wrap{margin-left:auto;display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.timer-val{font-size:15px;font-weight:500;color:var(--red);min-width:28px}

.qtxt{font-family:var(--head);font-size:24px;font-weight:700;color:var(--bright);line-height:1.3;letter-spacing:-.01em}
.q-lens{
  margin-top:12px;padding:11px 13px;border-radius:10px;background:rgba(74,159,216,.08);
  border:1px solid rgba(74,159,216,.22);font-family:var(--body);font-size:13px;
  line-height:1.65;color:#c7dff2
}

.qassist{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap}
.qtool-row{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin:-2px 0 16px
}
.qtool-btn{
  background:var(--bg2);border:1px solid var(--border2);color:var(--muted);
  border-radius:999px;padding:10px 14px;cursor:pointer;transition:all .18s;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase
}
.qtool-btn:hover{transform:translateY(-1px);border-color:var(--bright);color:var(--bright)}
.qtool-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.qtool-btn.qtool-warn{border-color:rgba(224,154,58,.32);color:var(--amber)}
.qtool-btn.qtool-mark{border-color:rgba(74,159,216,.28);color:var(--blue)}
.qtool-btn.on{background:rgba(74,159,216,.12);border-color:rgba(74,159,216,.55);color:#dceeff;box-shadow:0 0 18px rgba(74,159,216,.12)}
.level-guide{
  flex:1;min-width:240px;background:var(--bg2);border:1px solid var(--border);
  border-radius:10px;padding:12px 14px;font-family:var(--mono);font-size:11px;
  line-height:1.65;color:var(--muted)
}
.level-guide strong{color:var(--bright)}
.level-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(74,159,216,.1);border:1px solid rgba(74,159,216,.28);
  color:var(--blue);font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  padding:4px 11px;border-radius:20px;text-transform:uppercase
}
.fav-btn{
  background:var(--bg2);border:1px solid var(--border2);color:var(--muted);
  border-radius:10px;padding:12px 14px;cursor:pointer;transition:all .18s;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase
}
.fav-btn:hover{color:var(--bright);border-color:var(--amber)}
.fav-btn.on{color:var(--amber);border-color:var(--amber);background:rgba(224,154,58,.08)}
.fav-note-card{
  background:var(--bg2);border:1px solid rgba(224,154,58,.22);border-radius:12px;
  padding:16px 18px;margin-bottom:16px
}
.fav-note-top{margin-bottom:10px}
.fav-note-title{
  font-family:var(--head);font-size:17px;font-weight:800;color:var(--bright);
  text-transform:uppercase;letter-spacing:.05em
}
.fav-note-sub{margin-top:4px;font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted)}
.fav-note-input{
  width:100%;min-height:88px;resize:vertical;background:var(--bg3);color:var(--bright);
  border:1px solid var(--border2);border-radius:10px;padding:12px 14px;
  font-family:var(--body);font-size:14px;line-height:1.65;outline:none
}
.fav-note-input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(224,154,58,.08)}
.fav-note-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.interview-panel{
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:18px 20px;margin-bottom:16px
}
.interview-top{margin-bottom:12px}
.interview-title{
  font-family:var(--head);font-size:18px;font-weight:800;
  color:var(--bright);text-transform:uppercase;letter-spacing:.05em
}
.interview-sub{
  margin-top:4px;font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted)
}
.interview-answer{
  width:100%;min-height:140px;resize:vertical;background:var(--bg3);color:var(--bright);
  border:1px solid var(--border2);border-radius:10px;padding:14px 16px;
  font-family:var(--body);font-size:14px;line-height:1.7;outline:none
}
.interview-answer:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(232,66,30,.08)}
.interview-answer:focus-visible,
.fav-note-input:focus-visible{outline:none}
.interview-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.feedback-card{
  margin-top:14px;border-radius:10px;border:1px solid var(--border2);
  background:var(--bg3);padding:14px 16px
}
.feedback-score{
  font-family:var(--head);font-size:26px;font-weight:900;line-height:1;color:var(--bright)
}
.feedback-copy{
  margin-top:6px;font-family:var(--mono);font-size:11px;line-height:1.65;color:var(--muted)
}
.feedback-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.feedback-tag{
  font-family:var(--mono);font-size:10px;padding:4px 8px;border-radius:999px;
  border:1px solid var(--border2)
}
.feedback-tag.hit{color:var(--green);border-color:rgba(76,175,110,.45);background:rgba(76,175,110,.08)}
.feedback-tag.miss{color:var(--amber);border-color:rgba(224,154,58,.45);background:rgba(224,154,58,.08)}

.acard{
  border-left:3px solid var(--red);background:var(--bg2);
  border-radius:0 12px 12px 0;border:1px solid var(--border);border-left-width:3px;
  border-left-color:var(--red);padding:26px 30px;margin-bottom:16px;
  animation:aslide .22s ease
}
@keyframes aslide{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}

.ahdr{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--red);
  text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px
}
.ahdr::after{content:'';flex:1;height:1px;background:var(--border)}

.atxt{font-family:var(--body);font-size:16px;line-height:1.9;color:var(--text)}
.atxt strong{color:rgba(232,66,30,.9);font-weight:600}
.atxt code{background:var(--bg3);color:#8ec98e;font-family:var(--mono);font-size:13px;padding:2px 6px;border-radius:4px;border:1px solid var(--border)}
.atxt ul,.atxt ol{padding-left:20px;margin:7px 0}
.atxt li{margin-bottom:6px}

.kpills{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.kp{background:var(--bg3);border:1px solid var(--border2);color:var(--muted);
  font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:4px}

.reveal-row{margin-bottom:12px}
.btn-reveal{width:100%;padding:15px;background:var(--red);color:#fff;border:none;
  font-family:var(--head);font-size:16px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;border-radius:8px;transition:all .18s}
.btn-reveal:hover{background:var(--red2)}

.rate-row{display:flex;gap:8px;margin-bottom:10px;align-items:center;flex-wrap:wrap}
.rate-lbl{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.08em;white-space:nowrap}
.rb{flex:1;padding:11px 6px;border-radius:6px;border:1px solid;
  font-family:var(--head);font-size:14px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;transition:all .18s;min-width:80px}
.rbg{border-color:var(--green);color:var(--green);background:rgba(76,175,110,.05)}.rbg:hover{background:rgba(76,175,110,.14)}
.rbm{border-color:var(--amber);color:var(--amber);background:rgba(224,154,58,.05)}.rbm:hover{background:rgba(224,154,58,.14)}
.rbb{border-color:#c0392b;color:#e74c3c;background:rgba(231,76,60,.05)}.rbb:hover{background:rgba(231,76,60,.14)}

.nav-row{display:flex;gap:8px}
.bnav{flex:1;padding:11px;background:var(--bg2);border:1px solid var(--border);color:var(--muted);
  font-family:var(--head);font-size:14px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;cursor:pointer;border-radius:6px;transition:all .18s}
.bnav:hover{border-color:var(--border2);color:var(--text)}
.bnav-p{border-color:var(--red);color:var(--red);background:rgba(232,66,30,.07)}
.bnav-p:hover{background:rgba(232,66,30,.15)}

/* ── RESULT ── */
#result{background:var(--bg);align-items:center;justify-content:center;padding:48px 24px}
.res-glow{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;
  background:radial-gradient(ellipse,rgba(232,66,30,.12) 0%,transparent 70%);pointer-events:none}
.res-inner{position:relative;z-index:1;text-align:center;max-width:580px;width:100%}
.res-top{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;margin-bottom:14px}
.res-pct{font-family:var(--head);font-weight:900;font-size:clamp(80px,14vw,116px);line-height:1;letter-spacing:-.02em;margin-bottom:4px}
.res-verd{font-family:var(--head);font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:40px}
.result-overview{
  text-align:left;background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  padding:16px 18px;margin:0 auto 18px;max-width:580px
}
.overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.overview-card{
  background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:12px 12px 10px
}
.overview-k{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase
}
.overview-v{
  margin-top:6px;font-family:var(--head);font-size:18px;font-weight:800;line-height:1.15;color:var(--bright)
}
.overview-sub{
  margin-top:5px;font-family:var(--mono);font-size:10px;line-height:1.55;color:var(--muted)
}
.res-stats{display:flex;margin-bottom:36px;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.rs{flex:1;padding:22px 14px;text-align:center;border-right:1px solid var(--border)}
.rs:last-child{border-right:none}
.rs-n{font-family:var(--head);font-size:40px;font-weight:900;line-height:1;margin-bottom:3px}
.rs-l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.result-filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:-8px 0 28px}
.result-filter-btn{
  background:var(--bg2);border:1px solid var(--border2);border-radius:999px;
  padding:10px 14px;cursor:pointer;transition:all .18s;font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;color:var(--muted)
}
.result-filter-btn:hover{transform:translateY(-1px);color:var(--bright)}
.result-analysis{
  text-align:left;background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:18px 20px;margin:0 auto 20px;max-width:580px
}
.analysis-title{
  font-family:var(--head);font-size:18px;font-weight:800;color:var(--bright);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px
}
.analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.analysis-card{
  background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:14px 14px 12px
}
.analysis-label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.analysis-name{margin-top:6px;font-family:var(--head);font-size:22px;font-weight:800;line-height:1;color:var(--bright)}
.analysis-meta{margin-top:6px;font-family:var(--mono);font-size:11px;line-height:1.65;color:var(--muted)}
.analysis-bars{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.analysis-bar-row{
  background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:12px 12px 10px
}
.analysis-bar-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.analysis-bar-name{
  font-family:var(--body);font-size:14px;font-weight:600;line-height:1.3;color:var(--bright)
}
.analysis-bar-score{
  font-family:var(--head);font-size:20px;font-weight:800;line-height:1;color:var(--bright);white-space:nowrap
}
.analysis-track{
  height:8px;background:rgba(255,255,255,.05);border-radius:999px;overflow:hidden
}
.analysis-fill{height:100%;border-radius:999px}
.analysis-bar-meta{
  margin-top:8px;font-family:var(--mono);font-size:10px;line-height:1.6;color:var(--muted)
}
.pdf-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 22px}
.pdf-btn{
  background:var(--bg2);border:1px solid var(--border2);border-radius:999px;
  padding:10px 14px;cursor:pointer;transition:all .18s;font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;color:var(--muted)
}
.pdf-btn:hover{transform:translateY(-1px);color:var(--bright)}
.res-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ── ÖĞRENME BÖLÜMÜ ── */
#learn{background:var(--bg)}
.learn-wrap{display:flex;flex-direction:column;min-height:calc(100vh - 58px)}

/* Chip bar */
.learn-filter{
  padding:20px 40px 0;border-bottom:1px solid var(--border);
  background:var(--bg);position:sticky;top:58px;z-index:10;
  backdrop-filter:blur(10px)
}
.learn-filter-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;flex-wrap:wrap;gap:10px
}
.learn-filter-label{
  font-family:var(--head);font-size:18px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--bright)
}
.learn-filter-actions{display:flex;gap:8px}
.learn-chips{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:16px}

.learn-content{flex:1;padding:28px 40px 60px;min-width:0;max-width:900px;width:100%;margin:0 auto}
.learn-cat-header{margin-bottom:28px}
.learn-cat-title{
  font-family:var(--head);font-size:clamp(26px,4vw,40px);font-weight:900;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--bright);line-height:1;margin-bottom:6px
}
.learn-cat-title .r{color:var(--red)}
.learn-cat-meta{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em}

.lcard{
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  border-left:3px solid var(--red);padding:22px 26px;margin-bottom:12px;
  transition:box-shadow .2s;animation:lcardIn .25s ease both
}
.lcard:hover{box-shadow:0 4px 20px rgba(0,0,0,.35)}
@keyframes lcardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.lcard-q{
  font-family:var(--head);font-size:16px;font-weight:700;color:var(--bright);
  line-height:1.3;letter-spacing:-.01em;margin-bottom:12px
}
.lcard-divider{height:1px;background:var(--border);margin-bottom:12px}
.lcard-a{font-family:var(--body);font-size:13.5px;line-height:1.8;color:var(--text);margin-bottom:10px}
.lcard-a strong{color:rgba(232,66,30,.9);font-weight:600}
.lcard-a code{background:var(--bg3);color:#8ec98e;font-family:var(--mono);font-size:12px;
  padding:2px 6px;border-radius:4px;border:1px solid var(--border)}
.lcard-a ul,.lcard-a ol{padding-left:20px;margin:6px 0}
.lcard-a li{margin-bottom:3px}
.lcard-keys{display:flex;flex-wrap:wrap;gap:5px}

/* Öğren giriş butonu (home) */
.learn-entry{display:flex;justify-content:center;margin-bottom:28px}
.learn-entry-btn{
  display:flex;align-items:center;gap:14px;
  padding:14px 24px;background:var(--bg2);
  border:1px solid var(--border2);border-radius:10px;
  cursor:pointer;transition:all .18s;max-width:400px;width:100%;text-align:left
}
.learn-entry-btn:hover{background:var(--bg3);border-color:var(--blue);
  box-shadow:0 0 20px rgba(74,159,216,.1);transform:translateY(-1px)}
.learn-entry-ico{font-size:22px;flex-shrink:0}
.learn-entry-body{flex:1}
.learn-entry-title{font-family:var(--head);font-size:17px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:#f4f4f4;margin-bottom:3px;text-shadow:0 0 10px rgba(255,255,255,.04)}
.learn-entry-sub{font-family:var(--body);font-size:12px;font-weight:500;color:#a5a5a5;letter-spacing:.01em;line-height:1.6}
.learn-entry-arr{font-family:var(--mono);font-size:16px;color:var(--blue);flex-shrink:0}

@media(max-width:700px){
  .learn-filter{padding:14px 16px 0}
  .learn-content{padding:20px 16px 40px}
}

/* ── MCQ OPTIONS ── */
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
@media(max-width:580px){.options-grid{grid-template-columns:1fr}}
.opt-btn{
  display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
  background:var(--bg2);border:1px solid var(--border2);border-radius:10px;
  cursor:pointer;transition:all .2s ease;text-align:left;width:100%;
  position:relative;overflow:hidden
}
.opt-btn::before{
  content:'';position:absolute;inset:0;opacity:0;
  background:linear-gradient(135deg,rgba(232,66,30,.06),transparent);
  transition:opacity .2s
}
.opt-btn:hover:not(:disabled){border-color:var(--muted);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.35)}
.opt-btn:hover:not(:disabled)::before{opacity:1}
.opt-btn:disabled{cursor:default}
.opt-letter{
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--red);
  background:rgba(232,66,30,.1);border:1px solid rgba(232,66,30,.25);
  min-width:28px;height:28px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;letter-spacing:.04em;transition:all .25s
}
.opt-text{
  font-family:var(--body);font-size:13px;color:var(--text);line-height:1.5;
  padding-top:4px;flex:1
}
.opt-btn.correct{border-color:var(--green)!important;background:rgba(76,175,110,.1)!important;animation:optpop .35s ease}
.opt-btn.correct .opt-letter{background:rgba(76,175,110,.18);border-color:var(--green);color:var(--green)}
.opt-btn.wrong{border-color:#e74c3c!important;background:rgba(231,76,60,.1)!important;animation:optshake .4s ease}
.opt-btn.wrong .opt-letter{background:rgba(231,76,60,.15);border-color:#e74c3c;color:#e74c3c}
.opt-btn.reveal-correct{border-color:var(--green)!important;background:rgba(76,175,110,.07)!important}
.opt-btn.reveal-correct .opt-letter{background:rgba(76,175,110,.12);border-color:var(--green);color:var(--green)}

@keyframes optpop{0%{transform:scale(1)}40%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes optshake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* ── VISUAL ENHANCEMENTS ── */
.hero-h1 .r{
  background:linear-gradient(135deg,var(--red) 0%,var(--red2) 50%,#ff8866 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}
.hero-badge{animation:badgepulse 3s ease-in-out infinite}
@keyframes badgepulse{0%,100%{box-shadow:0 0 0 rgba(232,66,30,0)}50%{box-shadow:0 0 22px rgba(232,66,30,.2)}}
.mcard{position:relative;transition:all .2s,box-shadow .2s,border-color .2s}
.mcard:hover{box-shadow:0 6px 24px rgba(0,0,0,.4);transform:translateY(-2px)}
.mcard.active{box-shadow:0 0 32px rgba(232,66,30,.16);transform:translateY(-1px)}
.qcard{box-shadow:0 2px 24px rgba(0,0,0,.35)}
.acard{box-shadow:0 2px 20px rgba(0,0,0,.3)}
.chip{transition:all .18s}
.chip:hover{transform:translateY(-1px);box-shadow:0 2px 12px rgba(0,0,0,.3)}
.chip.on{box-shadow:0 0 16px rgba(232,66,30,.12)}
.btn-red{box-shadow:0 4px 18px rgba(232,66,30,.32);transition:all .2s}
.btn-red:hover{box-shadow:0 6px 28px rgba(232,66,30,.48)}
.prog-fill{background:linear-gradient(90deg,var(--red),var(--red2))}
.res-pct{text-shadow:0 0 60px rgba(232,66,30,.3)}

/* ── ZORLUK & SIK SORULAN ROZETLER ── */
.diff-badge{
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  padding:4px 11px;border-radius:20px;text-transform:uppercase;font-weight:600
}
.diff-easy{background:rgba(76,175,110,.1);border:1px solid rgba(76,175,110,.3);color:var(--green)}
.diff-mid{background:rgba(224,154,58,.1);border:1px solid rgba(224,154,58,.3);color:var(--amber)}
.diff-hard{background:rgba(232,66,30,.1);border:1px solid rgba(232,66,30,.3);color:var(--red2)}
.hot-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  background:rgba(255,149,0,.1);border:1px solid rgba(255,149,0,.35);
  color:#ff9500;padding:4px 11px;border-radius:20px;
  animation:hotpulse 2.2s ease-in-out infinite
}
@keyframes hotpulse{0%,100%{box-shadow:0 0 0 rgba(255,149,0,0)}50%{box-shadow:0 0 12px rgba(255,149,0,.35)}}
@keyframes timerpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── KLAVYE KISAYOLLARI ── */
.kshort{
  display:inline-block;font-family:var(--mono);font-size:9px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-bottom:2px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.4);padding:1px 6px;border-radius:4px;
  margin-left:7px;vertical-align:middle;letter-spacing:.03em;pointer-events:none
}
.rb .kshort,.bnav .kshort{color:inherit;opacity:.55;border-color:currentColor;
  background:rgba(255,255,255,.04)}

/* ── HOME İSTATİSTİK BARI ── */
.stats-bar{
  display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:12px 20px;max-width:700px;margin:0 auto 28px;
}
.stats-bar-info{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.05em}
.stats-bar-info strong{color:var(--bright)}
.sess-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sess-pill{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  background:var(--bg3);border:1px solid var(--border2);
  padding:3px 9px;border-radius:20px;white-space:nowrap
}
.history-panel{
  max-width:760px;margin:0 auto 22px;background:var(--bg2);border:1px solid var(--border);
  border-radius:12px;padding:16px 18px;text-align:left
}
.history-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.history-title{
  font-family:var(--head);font-size:18px;font-weight:800;color:var(--bright);
  text-transform:uppercase;letter-spacing:.06em
}
.history-sub{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted)}
.history-chart{display:flex;align-items:flex-end;gap:10px;height:170px}
.history-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
.history-bar-wrap{
  width:100%;height:120px;display:flex;align-items:flex-end;justify-content:center;
  padding:0 4px
}
.history-bar{
  width:100%;max-width:44px;min-height:10px;border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg,var(--red2),var(--red));box-shadow:0 0 18px rgba(232,66,30,.18)
}
.history-pct{font-family:var(--head);font-size:22px;font-weight:900;line-height:1;color:var(--bright)}
.history-day{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.favorites-hub{
  max-width:760px;margin:0 auto 22px;background:var(--bg2);border:1px solid rgba(74,159,216,.24);
  border-radius:12px;padding:16px 18px;text-align:left
}
.favorites-hub-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.favorites-hub-title{
  font-family:var(--head);font-size:18px;font-weight:800;color:var(--bright);
  text-transform:uppercase;letter-spacing:.06em
}
.favorites-hub-sub{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted);margin-top:4px}
.favorites-hub-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.favorites-hub-btn{
  background:var(--bg3);border:1px solid var(--border2);border-radius:999px;
  padding:10px 14px;cursor:pointer;transition:all .18s;font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;color:var(--muted)
}
.favorites-hub-btn:hover{transform:translateY(-1px);color:var(--bright)}
.settings-panel{
  max-width:760px;margin:0 auto 22px;background:var(--bg2);border:1px solid rgba(224,154,58,.24);
  border-radius:12px;padding:16px 18px;text-align:left
}
.settings-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.settings-title{
  font-family:var(--head);font-size:18px;font-weight:800;color:var(--bright);
  text-transform:uppercase;letter-spacing:.06em
}
.settings-sub{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted);margin-top:4px}
.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.settings-btn{
  background:var(--bg3);border:1px solid var(--border2);border-radius:999px;
  padding:10px 14px;cursor:pointer;transition:all .18s;font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;color:var(--muted)
}
.settings-btn:hover{transform:translateY(-1px);color:var(--bright)}
.settings-btn.warn{border-color:rgba(224,154,58,.34);color:var(--amber)}
.settings-btn.danger{border-color:rgba(232,66,30,.36);color:var(--red)}
::selection{background:rgba(232,66,30,.28);color:#fff}

/* ── CHİP SEÇİM ANİMASYONU ── */
.chip.on{animation:chipon .45s ease;box-shadow:0 0 18px rgba(232,66,30,.2)}
@keyframes chipon{
  0%  {transform:scale(1);box-shadow:0 0 0 rgba(232,66,30,0)}
  30% {transform:scale(1.12);box-shadow:0 0 24px rgba(232,66,30,.55)}
  60% {transform:scale(1.06);box-shadow:0 0 32px rgba(232,66,30,.35)}
  80% {transform:scale(1.09);box-shadow:0 0 22px rgba(232,66,30,.45)}
  100%{transform:scale(1);  box-shadow:0 0 18px rgba(232,66,30,.2)}
}

/* ── HATA ANALİZİ EKRANI ── */
#review{background:var(--bg)}
.rev-wrap{max-width:880px;width:100%;margin:0 auto;padding:40px 24px 60px}
.rev-hdr{text-align:center;margin-bottom:36px}
.rev-title{font-family:var(--head);font-size:clamp(30px,5vw,52px);font-weight:900;
  text-transform:uppercase;color:var(--bright);letter-spacing:-.01em;line-height:.95;margin-bottom:8px}
.rev-title .r{color:var(--red)}
.rev-sub{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.12em;margin-top:10px}
.rcard{
  background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  border-left:3px solid var(--red);padding:24px 28px;margin-bottom:14px;
  transition:all .2s;animation:rcardIn .3s ease both
}
.rcard:hover{border-color:var(--border2);box-shadow:0 6px 28px rgba(0,0,0,.35);transform:translateY(-1px)}
@keyframes rcardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.rcard-num{font-family:var(--mono);font-size:10px;color:var(--red);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.rcard-num::after{content:'';flex:1;height:1px;background:var(--border)}
.rcard-q{font-family:var(--head);font-size:18px;font-weight:700;color:var(--bright);
  line-height:1.3;letter-spacing:-.01em;margin-bottom:16px}
.rcard-divider{height:1px;background:var(--border);margin-bottom:14px}
.rcard-ans{font-family:var(--body);font-size:13.5px;line-height:1.8;color:var(--text);margin-bottom:14px}
.rcard-ans strong{color:rgba(232,66,30,.9);font-weight:600}
.rcard-ans code{background:var(--bg3);color:#8ec98e;font-family:var(--mono);font-size:12px;
  padding:2px 6px;border-radius:4px;border:1px solid var(--border)}
.rcard-ans ul,.rcard-ans ol{padding-left:20px;margin:6px 0}
.rcard-ans li{margin-bottom:3px}
.rcard-keys{display:flex;flex-wrap:wrap;gap:6px}
.rev-empty{text-align:center;padding:70px 24px}
.rev-empty-ico{font-size:52px;margin-bottom:16px}
.rev-empty-txt{font-family:var(--head);font-size:28px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:var(--green)}
.rev-empty-sub{font-family:var(--mono);font-size:11px;color:var(--muted);
  margin-top:8px;letter-spacing:.08em}
.rev-btns{display:flex;gap:10px;justify-content:center;margin-top:32px;flex-wrap:wrap}

@media(max-width:820px){
  .setup-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .modes{gap:8px}
  .mcard{width:calc(50% - 4px)}
  .count-controls{flex-direction:column;align-items:stretch}
  .count-number{width:100%}
  .qbar{height:auto;padding:10px 14px;gap:10px;flex-wrap:wrap}
  .prog-track{flex-basis:100%;order:5}
  .scores{margin-left:auto}
  .qmain{padding:22px 16px 24px}
  .qcard{padding:22px 18px}
  .qassist{flex-direction:column;align-items:stretch}
  .fav-btn{width:100%}
  .qtool-row{display:grid;grid-template-columns:1fr 1fr}
  .qtool-btn{width:100%;text-align:center}
  .res-btns,.pdf-actions,.settings-actions{flex-direction:column}
  .res-btns .btn-red,
  .res-btns .btn-ghost,
  .pdf-btn,
  .settings-btn{width:100%}
  .review-due{padding:12px 14px}
  .overview-grid{grid-template-columns:1fr 1fr}
  .analysis-grid{grid-template-columns:1fr}
  .history-chart{gap:6px}
  .history-pct{font-size:18px}
}
@media(max-width:560px){
  .mcard{width:100%}
  .qtool-row{grid-template-columns:1fr}
  .qtxt{font-size:21px}
  .q-lens{font-size:12px}
  .res-inner{max-width:100%}
  .overview-grid{grid-template-columns:1fr}
}