/* ==========================================================================
   مختبر العلوم — design system
   palette: emerald (life) · deep slate (science) · amber (energy)
   ========================================================================== */

:root{
  --em:#10b981;
  --em-d:#047857;
  --em-l:#d1fae5;
  --em-xl:#ecfdf5;
  --slate:#0f172a;
  --slate-2:#1e293b;
  --slate-3:#334155;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --line:#e2e8f0;
  --line-2:#cbd5e1;
  --bg:#f8fafc;
  --card:#ffffff;
  --amber:#f59e0b;
  --amber-l:#fef3c7;
  --rose:#e11d48;
  --rose-l:#fff1f2;
  --sky:#0ea5e9;
  --sky-l:#e0f2fe;
  --violet:#7c3aed;
  --violet-l:#ede9fe;
  --radius:20px;
  --radius-lg:26px;
  --shadow-s:0 1px 2px rgba(15,23,42,.05), 0 2px 8px rgba(15,23,42,.05);
  --shadow-m:0 2px 6px rgba(15,23,42,.06), 0 12px 28px -12px rgba(15,23,42,.18);
  --shadow-l:0 20px 50px -22px rgba(15,23,42,.32);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background:var(--bg);
  color:var(--slate);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  min-height:100vh;
  overflow-x:hidden;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(800px 480px at 92% -8%, rgba(16,185,129,.05), transparent 62%),
    radial-gradient(620px 480px at -6% 104%, rgba(15,23,42,.03), transparent 62%);
}

#app{ position:relative; z-index:1; }

button{ font-family:inherit; }
button,input{ user-select:none; -webkit-user-select:none; }
input{ user-select:text; -webkit-user-select:text; }

:focus-visible{ outline:3px solid rgba(16,185,129,.55); outline-offset:2px; border-radius:14px; }

.hidden{ display:none !important; }

/* ============================ TOP BAR ============================ */
#topbar{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(226,232,240,.9);
}
.tb-inner{
  max-width:1120px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.tb-brand{
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  border:0;
  padding:4px 6px;
  border-radius:16px;
  cursor:pointer;
  text-align:start;
  min-height:44px;
  transition:background .2s var(--ease);
}
.tb-brand:hover{ background:rgba(16,185,129,.09); }
.tb-logo{
  width:40px;height:40px;flex:0 0 40px;
  display:grid;place-items:center;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(140deg,#10b981,#0d9488 55%,#0ea5e9);
  box-shadow:0 6px 16px -6px rgba(13,148,136,.75);
}
.tb-titles{ display:flex; flex-direction:column; line-height:1.15; }
.tb-title{ font-weight:800; font-size:16px; letter-spacing:-.2px; }
.tb-sub{ font-size:11.5px; color:var(--muted); font-weight:600; }
.tb-actions{ display:flex; align-items:center; gap:8px; }
.tb-btn{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 14px;
  border-radius:14px;
  border:1.5px solid var(--line);
  background:#fff;
  color:var(--slate-3);
  font-weight:700; font-size:14px;
  cursor:pointer;
  transition:border-color .2s, background .2s, color .2s, transform .12s;
}
.tb-btn:hover{ border-color:#a7f3d0; background:var(--em-xl); color:var(--em-d); }
.tb-btn:active{ transform:scale(.96); }
.tb-btn.tb-icon{ padding:0 12px; }
.tb-btn .ic-off{ display:none; }
.tb-btn[aria-pressed="false"]{ color:var(--muted-2); }
.tb-btn[aria-pressed="false"] .ic-on{ display:none; }
.tb-btn[aria-pressed="false"] .ic-off{ display:block; }

.tb-pill{
  font-size:11.5px;
  font-weight:900;
  padding:2px 7px;
  border-radius:999px;
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  color:#b45309;
  border:1px solid #fcd34d;
  display:inline-block;
}

@media (max-width:430px){
  .tb-sub{ display:none; }
  .tb-btn-txt{ display:none; }
  .tb-btn{ padding:0 10px; gap:5px; }
  .tb-pill{ padding:2px 5px; font-size:11px; }
}

/* ============================ LAYOUT ============================ */
#main{
  max-width:1120px;
  margin:0 auto;
  padding:20px 16px 64px;
}
.screen{ animation:screenIn .42s var(--ease) both; }
@keyframes screenIn{ from{ opacity:0; transform:translateY(14px);} to{opacity:1;transform:none;} }

.sec-head{ margin:0 0 16px; }
.sec-title{
  margin:0 0 4px;
  font-size:clamp(1.15rem,1rem + 1.4vw,1.6rem);
  font-weight:800;
  letter-spacing:-.3px;
}
.sec-sub{ margin:0; color:var(--muted); font-size:14.5px; }

.credit{
  text-align:center; color:var(--muted-2); font-size:12.5px;
  margin:30px 0 0; font-weight:600;
}

/* ============================ HERO ============================ */
.hero{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(520px 320px at 88% -30%, rgba(16,185,129,.42), transparent 66%),
    radial-gradient(420px 300px at 4% 120%, rgba(14,165,233,.32), transparent 66%),
    linear-gradient(150deg,#0f172a,#132b26 60%,#0f172a);
  color:#f1f5f9;
  padding:26px 24px;
  display:grid;
  grid-template-columns:minmax(0,132px) minmax(0,1fr);
  gap:22px;
  align-items:center;
  box-shadow:var(--shadow-l);
  margin-bottom:34px;
}
.hero::after{
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.5;
  pointer-events:none;
  mask-image:linear-gradient(to left, #000, transparent 78%);
  -webkit-mask-image:linear-gradient(to left, #000, transparent 78%);
}
.hero-art{ position:relative; z-index:1; }
.hero-art svg{ width:100%; height:auto; display:block; }
.hero-text{ position:relative; z-index:1; }
.eyebrow{
  display:inline-block;
  font-size:12px; font-weight:800; letter-spacing:.4px;
  color:#6ee7b7;
  background:rgba(16,185,129,.16);
  border:1px solid rgba(110,231,183,.28);
  padding:4px 12px; border-radius:999px;
  margin-bottom:12px;
}
.hero-text h1{
  margin:0 0 10px;
  font-size:clamp(1.35rem, 1.05rem + 2.1vw, 2.05rem);
  font-weight:900;
  line-height:1.32;
  letter-spacing:-.5px;
}
.hero-text h1 em{
  font-style:normal;
  background:linear-gradient(95deg,#6ee7b7,#38bdf8);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#6ee7b7;
}
.hero-text p{
  margin:0;
  color:#b6c2d3;
  font-size:14.5px;
  line-height:1.75;
  max-width:62ch;
}
.hero-stats{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;
}
.hstat{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700;
  padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#dbeafe;
}
.hstat b{ color:#6ee7b7; font-weight:800; }
@media (max-width:640px){
  .hero{ grid-template-columns:1fr; padding:22px 18px; gap:14px; }
  .hero-art{ max-width:180px; }
}

/* ======================= BADGES BANNER (HOME) ======================= */
.badges-banner{
  background:linear-gradient(135deg,#ffffff,#f8fafc);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:16px 20px;
  margin-bottom:30px;
  box-shadow:var(--shadow-s);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  transition:border-color .2s, box-shadow .2s;
}
.badges-banner:hover{ border-color:#a7f3d0; box-shadow:var(--shadow-m); }
.bb-info{ display:flex; align-items:center; gap:14px; flex:1; min-width:240px; }
.bb-medal{
  width:50px;height:50px;flex:0 0 50px;
  border-radius:16px;
  display:grid;place-items:center;
  font-size:26px;
  background:radial-gradient(circle at 35% 35%, #fef3c7, #fde68a);
  border:1.5px solid #fcd34d;
  box-shadow:0 6px 14px -3px rgba(245,158,11,.3);
}
.bb-texts{ flex:1; min-width:0; }
.bb-title-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.bb-rank{ font-size:16px; font-weight:900; color:var(--slate); }
.bb-count{
  font-size:12px; font-weight:800; padding:2px 8px; border-radius:999px;
  background:var(--em-xl); color:var(--em-d); border:1px solid #d1fae5;
}
.bb-progress-bar{
  height:7px; background:#e2e8f0; border-radius:999px; overflow:hidden; margin:4px 0 2px;
}
.bb-progress-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg,#f59e0b,#10b981);
  transition:width .6s var(--ease);
}
.bb-sub{ font-size:12.5px; color:var(--muted); font-weight:600; margin:0; }
.bb-action{ flex-shrink:0; }

/* ============================ UNITS ============================ */
.units{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:16px;
}
.unit{
  position:relative;
  background:var(--card);
  border:1px solid rgba(226, 232, 240, 0.8);
  border-radius:var(--radius);
  padding:20px 18px 18px;
  box-shadow:0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
  display:flex; flex-direction:column; gap:12px;
  overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.unit:hover{ transform:translateY(-4px); box-shadow:0 16px 30px -6px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06); border-color:rgba(16, 185, 129, 0.35); }
.unit-top{ display:flex; align-items:flex-start; gap:12px; }
.unit-ico{
  width:48px;height:48px;flex:0 0 48px;
  border-radius:15px;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 35%, #ffffff 10%, var(--accent-l,#ecfdf5) 100%);
  color:var(--accent-d,#047857);
  box-shadow:0 0 0 1px rgba(226, 232, 240, 0.8), 0 4px 16px -2px var(--accent, rgba(16, 185, 129, 0.25));
}
.unit-ico svg{ width:26px;height:26px; }
.unit-name{ margin:0; font-size:17px; font-weight:800; letter-spacing:-.2px; }
.unit-desc{ margin:2px 0 0; font-size:13px; color:var(--muted); line-height:1.55; }
.unit-meta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:12px; border-top:1px dashed var(--line);
  flex-wrap:wrap;
}
.unit-count{ font-size:12.5px; font-weight:700; color:var(--muted); }
.badge-best{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:800;
  padding:4px 10px; border-radius:999px;
  background:var(--amber-l); color:#b45309;
}
.badge-best.none{
  background:#f1f5f9;
  color:#475569;
  border:1px solid #e2e8f0;
}
.unit-start{
  width:100%;
  min-height:46px;
  border:0; border-radius:14px;
  background:linear-gradient(135deg, var(--accent,#10b981), var(--accent-d,#059669));
  color:#fff;
  font-weight:800; font-size:15px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:filter .2s, transform .12s, box-shadow .2s;
  box-shadow:0 4px 12px var(--accent-shadow, rgba(16, 185, 129, 0.35));
}
.unit-start:hover{ filter:brightness(1.08); box-shadow:0 6px 16px var(--accent-shadow, rgba(16, 185, 129, 0.45)); }
.unit-start:active{ transform:scale(.98); }

/* ============================ ATLAS CTA ============================ */
.atlas-cta{
  margin-top:26px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:linear-gradient(140deg,#ffffff,#f0fdf9);
  border:1.5px solid #d1fae5;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow-s);
  flex-wrap:wrap;
}
.ac-txt h3{ margin:0 0 4px; font-size:17px; font-weight:800; }
.ac-txt p{ margin:0; color:var(--muted); font-size:13.5px; max-width:56ch; }

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:0 22px;
  border-radius:15px;
  border:0;
  font-weight:800; font-size:15px;
  cursor:pointer;
  transition:transform .12s var(--ease), filter .2s, background .2s, box-shadow .2s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:linear-gradient(135deg, #10b981, #059669);
  color:#fff;
  box-shadow:0 4px 12px rgba(16, 185, 129, 0.35);
}
.btn-primary:hover{ filter:brightness(1.07); box-shadow:0 6px 16px rgba(16, 185, 129, 0.45); }
.btn-ghost{
  background:#fff;
  color:var(--em-d);
  border:1.5px solid #a7f3d0;
}
.btn-ghost:hover{ background:var(--em-xl); }
.btn-dark{ background:var(--slate); color:#fff; }
.btn-dark:hover{ background:var(--slate-2); }
.btn-retry{
  background:linear-gradient(135deg, #f59e0b, #d97706);
  color:#fff;
  border:0;
  box-shadow:0 4px 12px rgba(245,158,11,.32);
}
.btn-retry:hover{ filter:brightness(1.08); box-shadow:0 6px 16px rgba(245,158,11,.42); }
.btn-sm{ min-height:44px; padding:0 16px; font-size:14px; }
.btn-block{ width:100%; }

.icon-btn{
  width:44px;height:44px;flex:0 0 44px;
  border-radius:14px;
  border:1.5px solid var(--line);
  background:#fff;
  color:var(--slate-3);
  display:grid;place-items:center;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .12s;
}
.icon-btn:hover{ background:#fef2f2; border-color:#fecdd3; color:var(--rose); }
.icon-btn:active{ transform:scale(.94); }

/* ============================ QUIZ ============================ */
.quiz-top{
  display:flex; align-items:center; gap:12px;
  margin-bottom:16px;
}
.progress{ flex:1; min-width:0; }
.progress-bar{
  height:10px; border-radius:999px; background:#dceee6; overflow:hidden;
}
.progress-bar span{
  display:block; height:100%; width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#10b981,#0ea5e9);
  transition:width .45s var(--ease);
}
.progress-txt{ display:block; font-size:12px; font-weight:700; color:var(--muted); margin-top:5px; }
.score-pill{
  display:inline-flex; align-items:center; gap:6px;
  height:44px; padding:0 16px;
  border-radius:14px;
  background:linear-gradient(140deg,#fef3c7,#fde68a);
  color:#92400e; font-weight:800; font-size:15px;
  border:1.5px solid #fcd34d;
}
.score-pill.pop{ animation:pop .4s var(--ease); }
@keyframes pop{ 0%{transform:scale(1);} 45%{transform:scale(1.16);} 100%{transform:scale(1);} }

.q-card{
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px 20px;
  box-shadow:var(--shadow-m);
}
.q-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.q-unit{
  font-size:12px; font-weight:800;
  padding:5px 12px; border-radius:999px;
  background:var(--em-xl); color:var(--em-d);
  border:1px solid #d1fae5;
}
.q-type{
  font-size:12px; font-weight:800;
  padding:5px 12px; border-radius:999px;
  background:var(--sky-l); color:#0369a1;
  border:1px solid #bae6fd;
}
.q-prompt{
  margin:0 0 16px;
  font-size:clamp(1.05rem,.95rem + .9vw,1.34rem);
  font-weight:800;
  line-height:1.65;
  letter-spacing:-.2px;
}
.q-figure{
  margin:0 0 18px;
  border-radius:18px;
  background:linear-gradient(160deg,#f8fdfb,#f1f7f5);
  border:1.5px solid #e3f1ea;
  padding:12px;
  overflow:hidden;
}
.diagram-svg{ width:100%; height:auto; display:block; }
.q-figure figcaption{
  text-align:center; font-size:12.5px; color:var(--muted);
  font-weight:700; margin-top:6px;
}

/* options */
.opts{ display:flex; flex-direction:column; gap:10px; }
.opt{
  display:flex; align-items:center; gap:12px;
  width:100%; min-height:58px;
  padding:12px 14px;
  border-radius:16px;
  border:2px solid var(--line);
  background:#fff;
  text-align:start;
  font-size:16px; font-weight:700;
  color:var(--slate);
  cursor:pointer;
  transition:border-color .18s, background .18s, transform .12s, box-shadow .18s;
}
.opt .obadge{
  width:32px;height:32px;flex:0 0 32px;
  border-radius:10px;
  display:grid;place-items:center;
  background:#f1f5f9; color:var(--muted);
  font-weight:900; font-size:14px;
  transition:background .18s, color .18s;
}
.opt:hover:not(:disabled){ border-color:#a7f3d0; background:var(--em-xl); }
.opt:active:not(:disabled){ transform:scale(.985); }
.opt:disabled{ cursor:default; }
.opt.correct{ border-color:var(--em); background:var(--em-xl); }
.opt.correct .obadge{ background:var(--em); color:#fff; }
.opt.wrong{ border-color:var(--rose); background:var(--rose-l); }
.opt.wrong .obadge{ background:var(--rose); color:#fff; }
.opt.dim{ opacity:.5; }

/* fill in the blank */
.fill-line{
  font-size:17px; font-weight:700; line-height:2.15;
  background:#f8fafc; border:1.5px solid var(--line);
  border-radius:16px; padding:16px 16px; margin-bottom:14px;
}
.blank{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:132px; min-height:42px; padding:2px 14px; margin:0 6px;
  border-radius:12px;
  border:2px dashed #a7f3d0;
  background:#fff;
  color:var(--em-d);
  font-weight:800;
  vertical-align:middle;
  transition:border-color .2s, background .2s;
}
.blank.filled{ border-style:solid; border-color:var(--em); background:var(--em-xl); }
.blank.correct{ border-color:var(--em); background:var(--em-xl); color:var(--em-d); }
.blank.wrong{ border-color:var(--rose); background:var(--rose-l); color:var(--rose); }
.blank .ph{ color:var(--muted-2); font-weight:700; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  min-height:50px; padding:0 18px;
  border-radius:14px;
  border:2px solid var(--line);
  background:#fff;
  font-weight:800; font-size:15px;
  color:var(--slate-3);
  cursor:pointer;
  transition:border-color .18s, background .18s, transform .12s, opacity .2s;
}
.chip:hover:not(:disabled){ border-color:#a7f3d0; background:var(--em-xl); }
.chip:active:not(:disabled){ transform:scale(.96); }
.chip:disabled{ opacity:.45; cursor:default; }
.chip.used{ opacity:.3; visibility:hidden; }

/* ordering */
.order-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.order-slot{
  display:flex; align-items:center; gap:12px;
  min-height:58px; padding:8px 14px;
  border-radius:16px;
  border:2px dashed var(--line-2);
  background:#f8fafc;
  transition:border-color .2s, background .2s;
  cursor:pointer;
}
.order-slot.filled{ border-style:solid; border-color:#a7f3d0; background:#fff; cursor:pointer; }
.order-slot.filled:hover{ border-color:#fca5a5; background:#fffbfb; }
.order-slot.correct{ border-color:var(--em); background:var(--em-xl); cursor:default; }
.order-slot.wrong{ border-color:var(--rose); background:var(--rose-l); cursor:default; }
.oslot-num{
  width:32px;height:32px;flex:0 0 32px;
  border-radius:10px;
  display:grid;place-items:center;
  background:var(--slate); color:#fff;
  font-weight:900; font-size:14px;
}
.order-slot.filled .oslot-num{ background:var(--em); }
.oslot-txt{ font-weight:800; font-size:15.5px; }
.oslot-ph{ color:var(--muted-2); font-weight:600; font-size:14px; }
.oslot-del{
  margin-inline-start:auto;
  width:26px; height:26px; flex:0 0 26px;
  border-radius:8px;
  background:#fee2e2;
  color:#ef4444;
  font-size:12px; font-weight:900;
  display:grid; place-items:center;
  pointer-events:none;
}
.order-pool-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:14px 0 8px; font-size:13px; font-weight:800; color:var(--muted);
}
.btn-reset-order{
  background:none; border:0; color:#0284c7;
  font-size:12.5px; font-weight:800; cursor:pointer;
  padding:4px 8px; border-radius:8px;
  transition:background .18s, color .18s;
}
.btn-reset-order:hover{ background:#e0f2fe; color:#0369a1; }

/* equation */
.eq{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:12px;
  padding:18px 12px;
  border-radius:18px;
  background:linear-gradient(160deg,#f8fdfb,#eef7f3);
  border:1.5px solid #e3f1ea;
  margin-bottom:16px;
}
.eq-group{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.eq-op{ font-size:22px; font-weight:900; color:var(--muted-2); }
.eq-arrow{
  display:grid; place-items:center;
  color:var(--em-d);
}
.eq-arrow svg{ width:54px; height:30px; }
.eq-slot{
  min-width:112px; min-height:56px; padding:8px 12px;
  border-radius:14px;
  border:2px dashed var(--line-2);
  background:#fff;
  font-weight:800; font-size:14px; color:var(--muted-2);
  cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
  display:grid; place-items:center;
  max-width:210px;
}
.eq-slot.filled{ border-style:solid; border-color:var(--em); background:var(--em-xl); color:var(--em-d); }
.eq-slot.correct{ border-color:var(--em); background:var(--em-xl); color:var(--em-d); }
.eq-slot.wrong{ border-color:var(--rose); background:var(--rose-l); color:var(--rose); }
.eq-legend{
  display:flex; justify-content:center; gap:24px;
  font-size:12px; font-weight:800; color:var(--muted);
  margin-bottom:14px;
}

/* order/eq footer */
.check-row{ display:flex; justify-content:center; margin-top:6px; }

/* ============================ FEEDBACK ============================ */
.feedback{
  margin-top:16px;
  border-radius:var(--radius-lg);
  padding:20px 20px 18px;
  border:1.5px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow-m);
  animation:fbIn .38s var(--ease) both;
}
@keyframes fbIn{ from{ opacity:0; transform:translateY(16px) scale(.99);} to{opacity:1;transform:none;} }
.feedback.is-correct{
  border-color:#a7f3d0;
  background:linear-gradient(160deg,#ffffff,#f0fdf7);
}
.feedback.is-wrong{
  border-color:#fecdd3;
  background:linear-gradient(160deg,#ffffff,#fff5f6);
}
.fb-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.fb-icon{
  width:38px;height:38px;flex:0 0 38px;
  border-radius:12px;
  display:grid;place-items:center;
  color:#fff;
}
.feedback.is-correct .fb-icon{ background:linear-gradient(140deg,#10b981,#059669); }
.feedback.is-wrong .fb-icon{ background:linear-gradient(140deg,#f43f5e,#e11d48); }
.fb-icon svg{ width:21px; height:21px; }
.fb-head h3{ margin:0; font-size:17.5px; font-weight:900; }
.feedback.is-correct .fb-head h3{ color:var(--em-d); }
.feedback.is-wrong .fb-head h3{ color:#be123c; }
.fb-text{ margin:0 0 12px; font-size:15.5px; line-height:1.85; color:var(--slate-3); }
.fb-concept{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:800;
  padding:7px 14px; border-radius:999px;
  background:#f1f5f9; color:var(--slate-3);
  border:1px solid var(--line);
  margin-bottom:14px;
}
.fb-concept b{ color:var(--em-d); }
.fb-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.fb-actions .btn{ flex:1 1 150px; }

/* ============================ ATLAS ============================ */
.atlas-head{ margin-bottom:18px; }
.atlas-tools{ display:flex; flex-direction:column; gap:12px; }
.search-wrap{
  position:relative;
  display:flex; align-items:center; gap:10px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:16px;
  padding:0 14px;
  height:52px;
  color:var(--muted-2);
  box-shadow:var(--shadow-s);
  transition:border-color .2s, box-shadow .2s;
}
.search-wrap:focus-within{ border-color:#6ee7b7; box-shadow:0 0 0 4px rgba(16,185,129,.13); }
.search-wrap input{
  flex:1; border:0; outline:0; background:none;
  font-family:inherit; font-size:16px; font-weight:600; color:var(--slate);
  height:100%;
}
.search-wrap input::placeholder{ color:var(--muted-2); font-weight:600; }
.chips-row{ display:flex; gap:8px; flex-wrap:wrap; }
.fchip{
  min-height:42px; padding:0 16px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:#fff;
  font-weight:800; font-size:13px;
  color:var(--muted);
  cursor:pointer;
  transition:all .2s var(--ease);
}
.fchip:hover{ border-color:#a7f3d0; color:var(--em-d); }
.fchip.active{
  background:var(--slate); border-color:var(--slate); color:#fff;
}
.atlas-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  gap:14px;
}
.ccard{
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-s);
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.ccard:hover{ border-color:#c7f0e0; box-shadow:var(--shadow-m); }
.ccard.open{ border-color:#a7f3d0; box-shadow:var(--shadow-m); }
.ccard-head{
  display:flex; align-items:flex-start; gap:10px;
  width:100%;
  padding:16px 16px 14px;
  background:none; border:0; cursor:pointer; text-align:start;
}
.ccard-term{ flex:1; min-width:0; }
.ccard-term h3{ margin:0 0 5px; font-size:16.5px; font-weight:900; letter-spacing:-.2px; }
.ccard-term p{ margin:0; font-size:13.2px; color:var(--muted); line-height:1.6; }
.ccard.open .ccard-term p{ display:none; }
.cbook{
  width:38px;height:38px;flex:0 0 38px;
  border-radius:12px; border:1.5px solid var(--line);
  background:#fff; color:var(--muted-2);
  display:grid;place-items:center; cursor:pointer;
  transition:all .2s;
}
.cbook:hover{ border-color:#fcd34d; color:var(--amber); }
.cbook.on{ background:var(--amber-l); border-color:#fcd34d; color:#b45309; }
.ccard-body{
  padding:0 16px 18px;
  animation:fbIn .32s var(--ease) both;
}
.ccard-body .full-def{
  font-size:14.5px; line-height:1.85; color:var(--slate-3);
  background:#f8fafc; border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; margin-bottom:12px;
}
.ccard-body .diagram-box{
  border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg,#f8fdfb,#f1f7f5);
  border:1.5px solid #e3f1ea;
  padding:10px;
}
.ccard-tag{
  display:inline-block; font-size:11.5px; font-weight:800;
  padding:3px 10px; border-radius:999px;
  background:var(--em-xl); color:var(--em-d);
  border:1px solid #d1fae5; margin-bottom:8px;
}
.empty{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:52px 20px;
  color:var(--muted);
  text-align:center;
  background:#fff; border:1.5px dashed var(--line-2); border-radius:var(--radius);
}
.empty p{ margin:0; font-size:14.5px; font-weight:700; max-width:34ch; }

/* ============================ RESULT ============================ */
.result-hero{
  border-radius:var(--radius-lg);
  padding:28px 22px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(560px 320px at 88% -40%, rgba(16,185,129,.5), transparent 66%),
    linear-gradient(150deg,#0f172a,#142c27 65%,#0f172a);
  box-shadow:var(--shadow-l);
  margin-bottom:18px;
}
.result-hero .medal{
  font-size:13px; font-weight:900;
  display:inline-block;
  padding:6px 16px; border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:#fde68a;
  margin-bottom:14px;
}
.result-hero h1{ margin:0 0 6px; font-size:clamp(1.3rem,1rem + 2vw,1.9rem); font-weight:900; letter-spacing:-.5px; }
.result-hero p{ margin:0; color:#a9b7c9; font-size:14.5px; }
.ring-wrap{ margin:10px auto 4px; max-width:180px; }
.ring{ width:100%; height:auto; display:block; }
.ring circle.arc{ transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1); }

.res-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:12px;
  margin-bottom:18px;
}
.rstat{
  background:#fff; border:1.5px solid var(--line);
  border-radius:18px; padding:14px 12px; text-align:center;
  box-shadow:var(--shadow-s);
}
.rstat b{ display:block; font-size:24px; font-weight:900; letter-spacing:-.5px; }
.rstat span{ display:block; font-size:12px; font-weight:700; color:var(--muted); margin-top:2px; }
.rstat.good b{ color:var(--em-d); }
.rstat.bad b{ color:var(--rose); }
.rstat.info b{ color:#0369a1; }

.panel{
  background:#fff; border:1.5px solid var(--line);
  border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow-s); margin-bottom:16px;
}
.panel h2{ margin:0 0 14px; font-size:17px; font-weight:900; display:flex; align-items:center; gap:8px; }
.review-item{
  border:1.5px solid var(--line); border-radius:16px;
  padding:14px; margin-bottom:10px;
  background:#fcfdfd;
}
.review-item .rq{ margin:0 0 8px; font-weight:800; font-size:15px; line-height:1.6; }
.rline{ display:flex; gap:8px; font-size:13.5px; font-weight:700; margin-bottom:4px; flex-wrap:wrap; }
.rline .lbl{ color:var(--muted); }
.rline .bad{ color:var(--rose); }
.rline .ok{ color:var(--em-d); }
.review-item .rexp{ margin:8px 0 0; font-size:13.5px; color:var(--muted); line-height:1.7; }
.res-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.res-actions .btn{ flex:1 1 160px; }
.perfect-note{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(140deg,#ecfdf5,#f0fdfa);
  border:1.5px solid #a7f3d0; border-radius:16px;
  padding:14px 16px; font-weight:700; font-size:14px; color:var(--em-d);
  margin-bottom:16px;
}

/* ======================= RESULT BADGES BOX ======================= */
.new-badges-card{
  background:linear-gradient(140deg,#fffbeb,#fef3c7);
  border:2px solid #fcd34d;
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:18px;
  box-shadow:0 10px 24px -6px rgba(245,158,11,.25);
  animation:fbIn .4s var(--ease) both;
}
.nbc-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.nbc-head h3{ margin:0; font-size:17px; font-weight:900; color:#92400e; }
.nbc-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.nbc-item{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.9);
  padding:10px 14px; border-radius:14px; border:1.5px solid #fde68a;
}
.nbc-item .nbc-ico{ font-size:26px; }
.nbc-item .nbc-info{ flex:1; min-width:0; }
.nbc-item .nbc-name{ font-size:14.5px; font-weight:800; color:#78350f; margin:0 0 2px; }
.nbc-item .nbc-desc{ font-size:12px; color:#92400e; margin:0; line-height:1.4; }

/* ============================ BADGES SCREEN ============================ */
.badges-page-head{ margin-bottom:18px; }
.rank-card{
  background:
    radial-gradient(600px 300px at 92% -20%, rgba(245,158,11,.16), transparent 70%),
    linear-gradient(140deg,#ffffff,#f8fafc);
  border:1.5px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px 22px;
  box-shadow:var(--shadow-m);
  margin-bottom:22px;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.rc-medal-box{
  width:72px; height:72px; flex:0 0 72px;
  border-radius:22px;
  display:grid; place-items:center;
  font-size:38px;
  background:radial-gradient(circle at 35% 35%, #fffbeb, #fde68a);
  border:2px solid #fcd34d;
  box-shadow:0 8px 20px -4px rgba(245,158,11,.35);
}
.rc-details{ flex:1; min-width:240px; }
.rc-tag{
  font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px;
  background:#f1f5f9; color:var(--muted); border:1px solid var(--line);
  display:inline-block; margin-bottom:6px;
}
.rc-title{ margin:0 0 4px; font-size:22px; font-weight:900; color:var(--slate); letter-spacing:-.3px; }
.rc-sub{ margin:0 0 10px; font-size:14px; color:var(--muted); line-height:1.6; }
.rc-meter-row{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:800; color:var(--slate-3); margin-bottom:5px; }
.rc-progress-bar{
  height:10px; background:#e2e8f0; border-radius:999px; overflow:hidden;
}
.rc-progress-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg,#f59e0b,#10b981);
  transition:width .7s var(--ease);
}

.badge-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:16px;
  margin-top:16px;
}
.bcard{
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:20px 18px;
  box-shadow:var(--shadow-s);
  display:flex; flex-direction:column; gap:12px;
  position:relative;
  overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.bcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-m); }

.bcard.unlocked{
  border-color:#a7f3d0;
  background:linear-gradient(160deg,#ffffff,#f0fdf7);
}
.bcard.unlocked::before{
  content:'';
  position:absolute; top:0; right:0; left:0; height:4px;
  background:linear-gradient(90deg,#10b981,#38bdf8);
}

.bcard.locked{
  background:#f8fafc;
  border-style:dashed;
  border-color:#cbd5e1;
  opacity:.88;
}

.bcard-top{ display:flex; align-items:flex-start; gap:14px; }
.bcard-ico{
  width:52px; height:52px; flex:0 0 52px;
  border-radius:18px;
  display:grid; place-items:center;
  font-size:27px;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.bcard.unlocked .bcard-ico{
  background:radial-gradient(circle at 35% 35%, #fffbeb, #fef3c7);
  border:1.5px solid #fcd34d;
}
.bcard.locked .bcard-ico{
  background:#e2e8f0;
  filter:grayscale(1);
  color:#94a3b8;
}

.bcard-main{ flex:1; min-width:0; }
.bcard-badge-cat{
  font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px;
  display:inline-block; margin-bottom:4px;
}
.bcard.unlocked .bcard-badge-cat{
  background:var(--em-xl); color:var(--em-d); border:1px solid #d1fae5;
}
.bcard.locked .bcard-badge-cat{
  background:#f1f5f9; color:var(--muted); border:1px solid #e2e8f0;
}
.bcard-title{ margin:0 0 4px; font-size:16.5px; font-weight:900; letter-spacing:-.2px; }
.bcard-desc{ margin:0; font-size:13px; color:var(--muted); line-height:1.6; }

.bcard-footer{
  padding-top:12px;
  border-top:1px dashed var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; font-weight:800;
}
.bcard-state{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
}
.bcard.unlocked .bcard-state{
  background:var(--em-xl); color:var(--em-d);
}
.bcard.locked .bcard-state{
  background:#f1f5f9; color:var(--muted);
}
.bcard-date{ font-size:11.5px; color:var(--muted-2); font-weight:600; }

/* ======================= BADGE CELEBRATION TOAST ======================= */
.badge-toast{
  position:fixed;
  bottom:24px;
  right:20px;
  left:20px;
  max-width:440px;
  margin-inline-start:auto;
  z-index:60;
  background:#0f172a;
  color:#fff;
  border:1.5px solid rgba(245,158,11,.45);
  border-radius:20px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.5);
  animation:toastUp .38s cubic-bezier(.22,1,.36,1) both;
}
@keyframes toastUp{
  from{ opacity:0; transform:translateY(30px) scale(.95); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.bt-icon{
  width:46px; height:46px; flex:0 0 46px;
  border-radius:14px;
  display:grid; place-items:center;
  font-size:25px;
  background:radial-gradient(circle at 35% 35%, #fffbeb, #fde68a);
  border:1.5px solid #fcd34d;
}
.bt-content{ flex:1; min-width:0; }
.bt-tag{
  display:block; font-size:11px; font-weight:800; color:#fbbf24;
  letter-spacing:.3px; margin-bottom:2px;
}
.bt-title{ margin:0 0 2px; font-size:15px; font-weight:900; color:#ffffff; }
.bt-desc{ margin:0; font-size:12.5px; color:#cbd5e1; line-height:1.45; }
.bt-close{
  border:0; background:rgba(255,255,255,.1); color:#94a3b8;
  width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center;
  font-size:14px; cursor:pointer;
  transition:background .2s, color .2s;
}
.bt-close:hover{ background:rgba(255,255,255,.2); color:#fff; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:430px){
  #main{ padding:16px 13px 56px; }
  .tb-inner{ padding:9px 12px; }
  .q-card{ padding:18px 15px; border-radius:22px; }
  .feedback{ padding:17px 15px; border-radius:22px; }
  .result-hero{ padding:22px 16px; border-radius:22px; }
  .opt{ font-size:15.4px; padding:11px 12px; }
  .eq-slot{ min-width:96px; font-size:13px; }
  .eq-arrow svg{ width:34px; height:18px; }
  .blank{ min-width:110px; font-size:15px; }
}
@media (min-width:900px){
  .hero{ padding:34px 32px; grid-template-columns:170px minmax(0,1fr); gap:30px; }
  .q-card{ padding:26px 26px; }
  .atlas-tools{ flex-direction:row; align-items:center; }
  .search-wrap{ flex:0 0 320px; }
  .chips-row{ flex:1; }
}
@media (min-width:1000px){
  .atlas-grid{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}