/* Garden look: same palette, fonts and chunky "pressable" cards as the garden lesson pages */
:root{
  color-scheme: light;
  --ground:#F2F8E6; --card:#FFFFFF; --paper:#FBFDF5; --ink:#23303A; --muted:#5E6B61; --line:#D8E8C4;
  --leaf:#2FA36B; --leaf-dark:#1F7A4E; --sky:#2F80ED; --sun:#FFC83D; --tomato:#F0604D; --grape:#8E5BE8;
  --ok:#1F7A4E; --ok-soft:#DFF6E9; --warn:#A35B00; --warn-soft:#FFF1C9; --bad:#C8372A; --bad-soft:#FFE4DF;
  --display:"Baloo Bhaijaan 2","Noto Naskh Arabic","Segoe UI",Tahoma,sans-serif;
  --text:"Noto Naskh Arabic","Segoe UI",Tahoma,sans-serif;
  --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:var(--text);font-size:17px;line-height:1.7;color:var(--ink);background:var(--ground);
  background-image:radial-gradient(circle at 92% 4%, #FFF1B8 0 110px, transparent 111px),radial-gradient(circle at 4% 98%, #DDF2CC 0 150px, transparent 151px);
  background-attachment:fixed;min-height:100vh}
a{color:var(--leaf-dark);text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.25}
h1{font-size:30px;margin:6px 0 12px} h2{font-size:22px;margin:24px 0 10px}
.muted{color:var(--muted)} .center{text-align:center} .small{font-size:14px}
.ltr{direction:ltr;unicode-bidi:isolate}

/* header */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-bottom:3px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;color:var(--ink);font-size:21px}
.logo{font-family:var(--emoji);font-size:30px;line-height:1}
nav{display:flex;gap:8px;flex-wrap:wrap}
main{max-width:880px;margin:0 auto;padding:18px 16px 60px}

/* cards & buttons — the garden "pressable" style */
.card{background:var(--card);border:3px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 5px 0 var(--line)}
a.card{display:block;color:var(--ink);transition:transform .1s}
a.card:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.card .big,.big{font-family:var(--emoji);font-size:44px;line-height:1.15}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;padding:10px 22px;
  font-family:var(--display);font-size:18px;font-weight:800;cursor:pointer;background:var(--leaf);color:#fff;box-shadow:0 4px 0 var(--leaf-dark)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--leaf-dark)}
.btn.ghost{background:var(--card);color:var(--ink);border:3px solid var(--line);box-shadow:0 3px 0 var(--line)}
.btn.light{background:rgba(255,255,255,.2);color:#fff;box-shadow:none;border:2px solid rgba(255,255,255,.5)}
.btn.small{padding:5px 14px;font-size:15px}
.btn.bad{background:var(--tomato);box-shadow:0 4px 0 #B8402F}
.btn:disabled{opacity:.5;cursor:default}
form{display:grid;gap:12px}
label{display:grid;gap:4px;font-weight:700;font-size:15px}
input,select,textarea{font:inherit;padding:10px 14px;border:3px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sky)}
.list{display:grid;gap:10px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tag{display:inline-block;font-family:var(--display);font-size:13px;font-weight:800;padding:1px 10px;border-radius:99px;background:#E6F5DA;color:var(--leaf-dark)}
.tag.warn{background:var(--warn-soft);color:var(--warn)} .tag.ok{background:var(--ok-soft);color:var(--ok)} .tag.bad{background:var(--bad-soft);color:var(--bad)}
.tag.soon{background:#FFF1C9;color:#8A5A00}
.plan{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ok-card{border-color:#8FD6AE;box-shadow:0 5px 0 #8FD6AE;background:#F2FBF5}
.price{font-family:var(--display);font-weight:800;font-size:22px}
.pay-box{background:#FFFCEB;border:3px solid #F3E3A6;border-radius:22px;padding:16px;display:grid;gap:6px}
.pay-box code{font-size:20px;font-weight:800;direction:ltr;unicode-bidi:embed;user-select:all}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat{font-family:var(--display);font-weight:700;color:var(--muted)}
.stat b{display:block;font-size:26px;color:var(--ink)}
table{width:100%;border-collapse:collapse;font-size:15px} td,th{padding:8px;border-bottom:2px solid var(--line);text-align:start;vertical-align:top}
.table-wrap{overflow-x:auto}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 20px;border-radius:16px;font-family:var(--display);font-weight:800;max-width:90vw;z-index:30}
.crumbs{font-family:var(--display);font-size:15px;color:var(--muted);margin-bottom:2px}

/* home */
.hero{display:flex;align-items:center;gap:14px;margin:4px 0 4px}
.hero-logo{font-family:var(--emoji);font-size:64px;line-height:1}
.hero h1{margin:0;color:var(--leaf)} .hero p{margin:2px 0 0}
.dash{background:linear-gradient(135deg,#2FA36B,#1F7A4E);color:#fff;border-radius:26px;padding:16px;margin-bottom:18px;box-shadow:0 6px 0 #17603D}
.dash-hi{font-family:var(--display);font-size:22px;font-weight:800;margin-bottom:10px}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.dash-stats div{background:rgba(255,255,255,.16);border-radius:16px;padding:8px;text-align:center}
.dash-stats b{display:block;font-family:var(--display);font-size:20px} .dash-stats span{font-size:12px;opacity:.95}
.dash-go{background:#fff;color:var(--leaf-dark);width:100%;justify-content:flex-start;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.grade-card,.subj-card{text-align:center;border-color:color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:0 5px 0 color-mix(in srgb,var(--c) 45%,var(--line))}
.grade-card b,.subj-card b{display:block;font-family:var(--display);font-size:20px;color:var(--c)}
.subj-card.empty{opacity:.75}
.prog{height:10px;border-radius:99px;background:#EEF3E6;overflow:hidden;margin-top:8px}
.prog i{display:block;height:100%;background:var(--c,var(--leaf));border-radius:99px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:24px}
.features div{background:var(--card);border:3px dashed var(--line);border-radius:20px;padding:12px;display:grid;gap:0;text-align:center}
.features .fi{font-family:var(--emoji);font-size:32px;color:inherit}
.features b{font-family:var(--display);font-size:19px}
.features span{color:var(--muted);font-size:14px}

/* subject page: term tabs + lesson path */
.subj-title span{font-family:var(--emoji)}
.subj-title{color:var(--c)}
.tabs{display:flex;gap:8px;margin:6px 0 14px}
.tab{flex:1;text-align:center;padding:8px;border-radius:18px;color:var(--ink);font-family:var(--display);font-weight:800;font-size:18px;
  background:var(--card);border:3px solid var(--line);box-shadow:0 4px 0 var(--line)}
.tab.on{background:var(--leaf);border-color:var(--leaf);color:#fff;box-shadow:0 4px 0 var(--leaf-dark)}
details.plans{background:rgba(255,255,255,.6);border:3px dashed var(--line);border-radius:22px;padding:10px 14px;margin-bottom:12px}
details.plans summary{cursor:pointer;font-family:var(--display);font-weight:800;color:var(--leaf-dark);font-size:18px}
.unit-head{font-family:var(--display);font-weight:800;font-size:17px;color:var(--leaf-dark);background:#E6F5DA;border-radius:999px;padding:3px 16px;justify-self:start;margin-top:8px}
.path{display:grid;gap:10px}
.step{display:flex;align-items:center;gap:12px;background:var(--card);border:3px solid var(--line);border-radius:22px;padding:10px 12px;color:var(--ink);box-shadow:0 4px 0 var(--line)}
.step:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.step .dot{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:22px;background:var(--paper);border:3px solid var(--c)}
.step.done .dot{background:var(--c);color:#fff}
.step.rev{border-style:dashed;border-color:var(--sun);background:#FFFCEB;box-shadow:0 4px 0 #F3E3A6}
.step.rev .dot{border-color:var(--sun);font-family:var(--emoji)}
.step.locked{opacity:.6}
.step.locked .dot{font-family:var(--emoji);border-color:var(--line)}
.step .st-body{flex:1;display:grid;gap:0;min-width:0}
.step .st-body b{font-size:19px;font-weight:700}
.step .go{color:var(--muted);font-family:var(--display);font-weight:800}
.lstars i{font-style:normal;color:#D8DCCF;font-size:16px} .lstars i.on{color:#F5A524}
.soon-card{padding:28px 16px}

/* badges & report */
.badge{text-align:center;opacity:.55} .badge.earned{opacity:1;border-color:var(--sun);box-shadow:0 5px 0 #E3B230}
.badge b{display:block;font-family:var(--display);font-size:18px}
.bars{display:flex;align-items:flex-end;gap:4px;height:120px}
.barcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.barcol i{width:100%;background:var(--leaf);border-radius:8px 8px 0 0;min-height:3px}
.barcol span{font-size:11px;color:var(--muted)}
.rep{border-inline-start:8px solid var(--c)}

@media (max-width:520px){
  h1{font-size:26px} .hero-logo{font-size:50px}
  .dash-stats b{font-size:17px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* grade plan + admin plan editing */
.grade-plan .save{color:var(--leaf-dark);font-weight:700;margin-top:2px}
.grade-plan s{color:var(--muted)}
.plans-edit input{padding:6px 8px;border-width:2px;border-radius:10px;min-width:90px}
.plans-edit input[name=title]{min-width:200px}
.plans-edit input[type=checkbox]{width:22px;height:22px;min-width:0;accent-color:var(--leaf)}

/* ================= book tests ================= */
.test-btn{width:100%;margin:2px 0 12px;background:var(--grape);box-shadow:0 4px 0 #6A3FC0;font-size:20px}
.test-setup h3{margin:14px 0 8px;font-size:19px}
.chip-btn{font:inherit;font-family:var(--display);font-weight:800;font-size:15px;cursor:pointer;background:var(--card);color:var(--ink);border:3px solid var(--line);border-radius:999px;padding:4px 14px;box-shadow:0 3px 0 var(--line)}
.chip-btn.on{background:var(--leaf);border-color:var(--leaf);color:#fff;box-shadow:0 3px 0 var(--leaf-dark)}
.chip-btn.small{font-size:13px;padding:2px 10px}
.tunit{border-top:2px dashed var(--line);margin-top:10px;padding-top:8px}
.tunit-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;color:var(--leaf-dark)}
.tles{display:flex;align-items:center;gap:10px;padding:6px 4px;font-weight:600;cursor:pointer;border-radius:10px}
.tles input{width:22px;height:22px;flex:none;accent-color:var(--leaf)}
.tles span:first-of-type{flex:1}
.tles.locked{opacity:.55;cursor:default}
.big-go{width:100%;margin-top:18px;font-size:21px;padding:12px}
.tq-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-family:var(--display)}
.tq-prog{flex:1;height:12px;background:#E6EEDB;border-radius:99px;overflow:hidden}
.tq-prog i{display:block;height:100%;background:var(--leaf);border-radius:99px;transition:width .3s}
.tq-card{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:18px}
.tq-tag{justify-self:center;font-family:var(--display);font-weight:800;font-size:14px;color:var(--leaf-dark);background:#E6F5DA;border-radius:999px;padding:2px 14px;text-align:center}
.tq-q{font-family:var(--display);font-weight:800;font-size:22px;text-align:center;line-height:1.5}
.tq-pic{font-family:var(--emoji);text-align:center;line-height:1.3;background:var(--paper);border:3px dashed var(--line);border-radius:22px;padding:10px;overflow-wrap:anywhere;overflow:hidden;min-width:0}
.tq-stem{font-family:var(--display);font-weight:800;font-size:32px;text-align:center;background:#FFFCEB;border:3px solid #F3E3A6;border-radius:18px;padding:6px 10px}
.tq-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.tq-opts.emo .tq-opt{font-size:34px;font-family:var(--emoji),var(--display)}
.tq-opt{font:inherit;font-family:var(--display);font-weight:800;font-size:22px;cursor:pointer;background:var(--paper);color:var(--ink);border:4px solid var(--line);border-radius:18px;padding:12px 8px;box-shadow:0 4px 0 var(--line)}
.tq-opt.sel{border-color:var(--sky);background:#E6F0FF;box-shadow:0 4px 0 var(--sky)}
.tq-opts.tf{grid-template-columns:1fr 1fr}
.tq-opt.yes.sel{border-color:var(--leaf);background:#DFF6E9;box-shadow:0 4px 0 var(--leaf)}
.tq-opt.no.sel{border-color:var(--tomato);background:#FFE4DF;box-shadow:0 4px 0 var(--tomato)}
.tq-disp{font-family:var(--display);font-weight:800;font-size:40px;text-align:center;min-height:64px;border:4px solid var(--sky);border-radius:18px;background:#EEF5FF;max-width:240px;margin:0 auto;width:100%}
.tq-kp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:320px;margin:0 auto;width:100%}
.tq-kp button{font:inherit;font-family:var(--display);font-weight:800;font-size:26px;cursor:pointer;background:var(--card);color:var(--ink);border:3px solid var(--line);border-radius:16px;padding:8px 0;box-shadow:0 3px 0 var(--line)}
.tq-kp button:active{transform:translateY(2px);box-shadow:none}
.tq-kp button.ok{background:var(--leaf);border-color:var(--leaf);color:#fff;box-shadow:0 3px 0 var(--leaf-dark)}
.tq-ordans{min-height:58px;border:3px dashed var(--line);border-radius:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:8px}
.tq-chip{font-family:var(--display);font-weight:800;font-size:22px;background:#DFF6E9;border:3px solid var(--leaf);border-radius:14px;padding:2px 12px}
.tq-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px}
.tr-head{padding:20px}
.tr-stars span{font-size:52px;color:#D8DCCF} .tr-stars span.on{color:#F5A524}
.tr-score{font-family:var(--display);font-weight:800;font-size:44px;line-height:1.1}
.tr-pct{font-family:var(--display);font-weight:800;font-size:20px;color:var(--leaf-dark)}
.tr-item.bad{border-color:#F6AFA3;box-shadow:0 4px 0 #F6AFA3}
.tr-item.ok{opacity:.8}
.tr-pic{font-family:var(--emoji);font-size:28px;overflow-wrap:anywhere}
.tr-stem{font-family:var(--display);font-weight:800;font-size:22px}
.ok-t{color:var(--leaf-dark)}

.tq-text{font-family:Andika,var(--display),sans-serif;font-weight:700;font-size:30px;text-align:center;max-width:300px;margin:0 auto;width:100%;border:4px solid var(--sky);border-radius:18px;background:#EEF5FF}
.opt-img{width:56px;height:56px;vertical-align:middle}
.tr-item .opt-img{width:30px;height:30px}
.opt-emo{font-family:var(--emoji);font-size:40px;line-height:1.1}
.tr-item .opt-emo{font-size:24px}
.tq-pic,.tq-stem,.tr-pic,.tr-stem{white-space:pre-line}
.pay-card{display:grid;gap:4px}.pay-card .row{justify-content:space-between}