:root{
  --primary:#2563EB; --primary-dark:#1D4ED8; --on-primary:#fff;
  --secondary:#F59E0B; --accent:#EC4899;
  --bg:#EFF6FF; --fg:#0F172A; --muted:#F1F5FD; --border:#E4ECFC;
  --ok:#12A150; --ok-soft:#E7F8EF; --warn:#DC2626; --warn-soft:#FDECEC;
  --card:#fff;
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --sh-soft:0 10px 24px rgba(37,99,235,.10), 0 2px 6px rgba(15,23,42,.06);
  --sh-in:inset 0 -4px 0 rgba(15,23,42,.06);
  --f-head:'Baloo Bhaijaan 2','Segoe UI',system-ui,sans-serif;
  --f-body:'Almarai','Segoe UI',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-body); background:var(--bg); color:var(--fg);
  min-height:100vh; line-height:1.7; font-size:17px; overflow-x:hidden;
}
h1,h2,h3,h4,.num,.btn,.brand-text strong{font-family:var(--f-head); line-height:1.35}
h1{font-size:clamp(1.6rem,4vw,2.4rem); margin:0 0 .4rem}
h2{font-size:clamp(1.3rem,3vw,1.9rem); margin:0 0 .5rem}
h3{font-size:clamp(1.05rem,2.2vw,1.4rem); margin:0 0 .4rem}
p{margin:0 0 .8rem}
.num{font-variant-numeric:tabular-nums}
i.ic:empty{display:none}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm)}
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.blobs{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55}
.blob.b1{width:380px;height:380px;background:#BFDBFE; top:-120px; inset-inline-end:-90px}
.blob.b2{width:300px;height:300px;background:#FDE68A; bottom:-90px; inset-inline-start:-70px}
.blob.b3{width:260px;height:260px;background:#FBCFE8; top:45%; inset-inline-start:38%}
.topbar,.app,.foot{position:relative; z-index:1}
.topbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px clamp(12px,3vw,28px);
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px);
  border-bottom:3px solid #fff; box-shadow:0 6px 18px rgba(37,99,235,.08);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex;align-items:center;gap:12px;background:none;border:0;padding:4px;border-radius:var(--r-md)}
.brand-mark{
  display:grid;place-items:center;width:52px;height:52px;border-radius:18px;
  background:linear-gradient(160deg,var(--primary),#60A5FA); color:#fff;
  font-family:var(--f-head); font-weight:800; font-size:1.15rem;
  box-shadow:var(--sh-soft), var(--sh-in); flex:none;
}
.brand-text{display:flex;flex-direction:column;text-align:start;line-height:1.2}
.brand-text strong{font-size:1.1rem}
.brand-text small{color:#475569;font-size:.8rem}
.top-actions{display:flex;gap:8px;margin-inline-start:auto;flex-wrap:wrap}
.icon-btn{
  display:inline-flex;align-items:center;gap:7px;min-height:48px;padding:8px 14px;
  background:#fff;border:3px solid var(--border);border-radius:999px;
  color:#1E293B;font-weight:700;font-size:.9rem;
  box-shadow:var(--sh-soft);transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease;
}
.icon-btn:hover{transform:translateY(-2px);border-color:#BFDBFE}
.icon-btn .ic{width:19px;height:19px;stroke-width:2.2}
.icon-btn[aria-pressed="false"]{opacity:.6}
.app{max-width:1080px;margin:0 auto;padding:clamp(14px,3vw,32px) clamp(12px,3vw,24px) 40px}
.card{
  background:var(--card); border:3px solid #fff; border-radius:var(--r-lg);
  padding:clamp(16px,3vw,28px); box-shadow:var(--sh-soft);
}
.fade{animation:fadeUp .45s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lead{color:#475569;font-size:1rem}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;padding:12px 22px;border:3px solid rgba(15,23,42,.08);
  border-radius:var(--r-md); font-weight:800; font-size:1.02rem; color:#fff;
  background:linear-gradient(170deg,var(--primary),var(--primary-dark));
  box-shadow:0 8px 0 rgba(29,78,216,.35), var(--sh-soft);
  transition:transform .16s ease,box-shadow .16s ease,filter .2s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04)}
.btn:active{transform:translateY(2px);box-shadow:0 4px 0 rgba(29,78,216,.35)}
.btn.alt{background:linear-gradient(170deg,#FBBF24,var(--secondary));box-shadow:0 8px 0 rgba(217,119,6,.35)}
.btn.pink{background:linear-gradient(170deg,#F472B6,var(--accent));box-shadow:0 8px 0 rgba(190,24,93,.3)}
.btn.ghost{background:#fff;color:#1E293B;border-color:var(--border);box-shadow:0 6px 0 rgba(15,23,42,.08)}
.btn.ok{background:linear-gradient(170deg,#34D399,#059669);box-shadow:0 8px 0 rgba(5,150,105,.32)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(.3)}
.btn.sm{min-height:46px;font-size:.92rem;padding:8px 16px}
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  background:var(--muted);border:2px solid var(--border);font-weight:700;font-size:.85rem;
}
.badge.ok{background:var(--ok-soft);border-color:#BBF7D0;color:#065F46}
.badge.warn{background:var(--warn-soft);border-color:#FECACA;color:#991B1B}
.level-card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:#fff;border:3px solid var(--border);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--sh-soft);transition:transform .18s ease,border-color .2s ease;
}
.level-card:hover{transform:translateY(-3px);border-color:#BFDBFE}
.level-card .lvl-top{display:flex;align-items:center;gap:10px}
.level-card .lvl-ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;flex:none;
  background:var(--muted);border:2px solid var(--border);
}
.level-card h3{margin:0;font-size:1.15rem}
.level-card .lvl-sub{font-size:.85rem;color:#64748B}
.lvl1{border-color:#BBF7D0} .lvl1 .lvl-ico{background:#ECFDF5;border-color:#A7F3D0}
.lvl2{border-color:#BFDBFE} .lvl2 .lvl-ico{background:#EFF6FF;border-color:#BFDBFE}
.lvl3{border-color:#FBCFE8} .lvl3 .lvl-ico{background:#FDF2F8;border-color:#FBCFE8}
.hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.progress{flex:1 1 180px;height:18px;background:var(--muted);border:2px solid var(--border);border-radius:999px;overflow:hidden}
.progress > span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#60A5FA,var(--primary));transition:width .35s ease}
.q-card{background:#fff;border:3px solid var(--border);border-radius:var(--r-lg);padding:clamp(14px,2.6vw,24px);box-shadow:var(--sh-soft)}
.prompt{font-family:var(--f-head);font-size:clamp(1.15rem,2.6vw,1.55rem);font-weight:700;margin:0 0 6px}
.hintline{color:#475569;font-size:.95rem;background:var(--muted);border-inline-start:6px solid var(--secondary);border-radius:var(--r-sm);padding:8px 12px;margin-bottom:12px}
.target{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 14px}
.target .big{
  font-family:var(--f-head);font-weight:800;font-size:clamp(2.6rem,10vw,4.4rem);line-height:1;
  color:var(--primary);background:#EFF6FF;border:4px solid #BFDBFE;border-radius:22px;
  padding:6px 26px;box-shadow:var(--sh-soft)
}
.nline{background:#FBFDFF;border:3px solid var(--border);border-radius:var(--r-lg);padding:10px 12px 4px}
.nline svg{width:100%;height:auto;display:block;touch-action:pan-y}
.mid-label{font-family:var(--f-head);font-weight:700}
.slider-wrap{direction:ltr;padding:4px 10px 10px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:999px;background:#DBEAFE;border:2px solid #BFDBFE}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;margin-top:-12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#60A5FA,var(--primary));border:3px solid #fff;box-shadow:0 4px 10px rgba(37,99,235,.4);cursor:grab}
input[type=range]::-moz-range-track{height:14px;border-radius:999px;background:#DBEAFE;border:2px solid #BFDBFE}
input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:var(--primary);border:3px solid #fff}
.choices{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:6px}
.choice{
  min-height:74px;font-family:var(--f-head);font-size:1.6rem;font-weight:800;color:#1E293B;
  background:#fff;border:4px solid var(--border);border-radius:var(--r-md);
  box-shadow:0 6px 0 rgba(15,23,42,.07);transition:transform .16s ease,border-color .2s ease,background .2s ease
}
.choice:hover{transform:translateY(-2px);border-color:#93C5FD;background:#F8FBFF}
.choice.good{border-color:#34D399;background:var(--ok-soft)}
.choice.bad{border-color:#F87171;background:var(--warn-soft)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:420px;margin:0 auto}
.pad button{min-height:62px;font-family:var(--f-head);font-size:1.5rem;font-weight:800;background:#fff;
  border:3px solid var(--border);border-radius:var(--r-md);box-shadow:0 6px 0 rgba(15,23,42,.07);transition:transform .14s ease}
.pad button:hover{transform:translateY(-2px);border-color:#93C5FD}
.pad button.pad-act{background:#EFF6FF;color:var(--primary-dark);font-size:1.05rem}
.display{
  max-width:420px;margin:0 auto 12px;min-height:74px;display:grid;place-items:center;
  font-family:var(--f-head);font-size:2.2rem;font-weight:800;letter-spacing:2px;
  background:#F8FBFF;border:4px dashed #BFDBFE;border-radius:var(--r-md);color:var(--primary-dark)
}
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:8px 0}
.chip{
  min-width:86px;min-height:66px;font-family:var(--f-head);font-size:1.5rem;font-weight:800;
  background:#fff;border:4px solid var(--border);border-radius:var(--r-md);
  box-shadow:0 6px 0 rgba(15,23,42,.07);transition:transform .16s ease,border-color .2s ease
}
.chip:hover{transform:translateY(-3px)}
.chip.sel{border-color:var(--secondary);background:#FFFBEB;transform:translateY(-4px)}
.chip.done{border-color:#34D399;background:var(--ok-soft);opacity:.75;cursor:default}
.chip.shake{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.baskets{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:8px}
.basket{
  min-height:150px;border:4px dashed #BFDBFE;border-radius:var(--r-lg);background:#F8FBFF;padding:10px;
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:background .2s ease,border-color .2s ease
}
.basket.hot{border-color:var(--secondary);background:#FFFBEB}
.basket b{font-family:var(--f-head);font-size:1.5rem;color:var(--primary-dark)}
.basket .placed{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.basket .placed span{background:#fff;border:2px solid #BBF7D0;border-radius:10px;padding:2px 10px;font-weight:700}
.feedback{margin-top:14px}
.fb{border-radius:var(--r-md);padding:12px 16px;border:3px solid;font-weight:700;display:flex;gap:10px;align-items:flex-start}
.fb.ok{background:var(--ok-soft);border-color:#BBF7D0;color:#065F46}
.fb.no{background:var(--warn-soft);border-color:#FECACA;color:#991B1B}
.fb .ic{width:22px;height:22px;flex:none;margin-top:3px}
.fb small{display:block;font-weight:600;opacity:.9;font-size:.9rem}
.toast{
  position:fixed;inset-inline:0;bottom:18px;margin:auto;width:max-content;max-width:90vw;
  background:#0F172A;color:#fff;padding:11px 20px;border-radius:999px;font-weight:700;
  box-shadow:0 12px 28px rgba(15,23,42,.28);transform:translateY(120%);transition:transform .28s ease;z-index:60
}
.toast.show{transform:translateY(0)}
.table-wrap{overflow-x:auto;border:3px solid var(--border);border-radius:var(--r-md);background:#fff}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem}
th,td{padding:9px 12px;text-align:start;border-bottom:2px solid var(--muted)}
thead th{background:var(--muted);font-family:var(--f-head);font-size:.95rem}
tbody tr:nth-child(even){background:#FCFDFF}
.stat-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:12px 0 18px}
.stat{background:#fff;border:3px solid var(--border);border-radius:var(--r-md);padding:12px;text-align:center;box-shadow:var(--sh-soft)}
.stat b{display:block;font-family:var(--f-head);font-size:1.9rem;color:var(--primary);line-height:1.2}
.stat span{font-size:.85rem;color:#475569}
.stars{display:flex;gap:6px;justify-content:center;margin:10px 0 4px;flex-wrap:wrap}
.stars .st{width:34px;height:34px;color:#D6E4FF}
.stars .st.on{color:var(--secondary);animation:pop .4s ease both}
@keyframes pop{0%{transform:scale(.5)}70%{transform:scale(1.18)}100%{transform:scale(1)}}
.rule-line{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.rule-box{border:3px solid var(--border);border-radius:var(--r-md);padding:12px;background:#fff}
.rule-box.ok{border-color:#A7F3D0;background:#F6FEF9}
.rule-box.up{border-color:#FDBA74;background:#FFFBF5}
.rule-box b{font-family:var(--f-head);font-size:1.05rem}
.steps{margin:0;padding-inline-start:1.2em}
.steps li{margin-bottom:6px}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:grid;place-items:center;padding:16px;z-index:80}
.modal .card{max-width:760px;max-height:88vh;overflow-y:auto;width:100%}
.modal-close{position:absolute;top:12px;inset-inline-end:12px}
.modal-inner{position:relative}
.foot{text-align:center;color:#64748B;font-size:.85rem;padding:8px 16px 26px}
@media (max-width:560px){
  body{font-size:16px}
  .icon-btn span{display:none}
  .icon-btn{min-width:48px;justify-content:center;padding:8px 10px}
  .brand-text small{display:none}
  .rule-line{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media print{
  .topbar,.blobs,.toast,.no-print,.foot{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;border-color:#94A3B8}
}
.choice:disabled{opacity:.5;cursor:not-allowed;transform:none}
.choice.big{font-size:1.45rem}
.basket .ic{width:26px;height:26px;color:#93C5FD}