@font-face{font-family:"Cairo";src:url(fonts/cairo-arabic.woff2) format("woff2");font-weight:200 1000;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Cairo";src:url(fonts/cairo-latin.woff2) format("woff2");font-weight:200 1000;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2212,U+2215}
:root{--ink:#1F2340;--muted:#6B7090;--bg:#FFF7EA;--card:#fff;--violet:#7C3AED;--orange:#F97316;--pink:#EC4899;--sky:#0EA5E9;--green:#16A34A;--greenbg:#E8F9EE;--red:#DC2626;--redbg:#FDECEC;--yellow:#FACC15;--radius:20px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;color:var(--ink);background:var(--bg);background-image:radial-gradient(circle at 12% 8%,#FFE3C2 0,transparent 32%),radial-gradient(circle at 92% 30%,#E9DDFF 0,transparent 30%),radial-gradient(circle at 10% 80%,#D9F4FF 0,transparent 30%);background-attachment:fixed;font-size:18px;line-height:1.75}
#app{max-width:760px;margin:0 auto;padding:12px 14px 40px}
.screen[hidden],[hidden]{display:none!important}
button{font-family:inherit;cursor:pointer}
.m{direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-weight:700;display:inline-block}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .12em;font-weight:800;font-size:.95em}
.frac>span{display:block;padding:0 .18em;text-align:center}
.frac>span:first-child{border-bottom:2.5px solid currentColor;padding-bottom:1px}
.frac>span:last-child{padding-top:2px}
.mixed{display:inline-flex;align-items:center;direction:ltr}
.mixed>.w{font-size:1.15em;margin-left:.02em}

/* hero */
.hero{text-align:center;padding:26px 10px 14px}
.hero h1{font-size:2.3rem;margin:.1em 0 .1em;font-weight:900;background:linear-gradient(90deg,var(--orange),var(--pink),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.35}
.kicker{margin:0;font-weight:700;color:var(--violet);font-size:1rem}
.sub{margin:0;color:var(--muted);font-size:1.05rem}
.hero-bar{display:flex;gap:6px;justify-content:center;margin:0 auto 14px;width:min(280px,80%)}
.hero-bar span{flex:1;height:30px;border-radius:9px;background:var(--orange);box-shadow:0 3px 0 rgba(0,0,0,.12)}
.hero-bar span:nth-child(2){background:var(--pink)}.hero-bar span:nth-child(3){background:var(--violet)}
.hero-bar span.e{background:#fff;border:3px dashed #C9C2E8;box-shadow:none}

.card{background:var(--card);border-radius:var(--radius);padding:18px 18px;box-shadow:0 6px 24px rgba(60,40,120,.10);margin:14px 0}
.start-card{padding:22px}
.lbl{font-weight:800;font-size:1.15rem;display:block;margin-bottom:6px}
.name-input{width:100%;font:inherit;font-size:1.3rem;padding:12px 16px;border:3px solid #DCD6F5;border-radius:16px;outline:none;background:#FBFAFF}
.name-input:focus{border-color:var(--violet)}
.err{color:var(--red);font-weight:700;margin:6px 0 0}
.btn{display:block;width:100%;font-size:1.25rem;font-weight:800;border:0;border-radius:16px;padding:12px 18px;min-height:56px;margin-top:14px;transition:transform .08s}
.btn:active{transform:scale(.98)}
.btn-main{background:linear-gradient(90deg,var(--violet),var(--pink));color:#fff;box-shadow:0 5px 0 #5B21B6}
.btn-soft{background:#EFEAFE;color:var(--violet)}
.btn-link{background:none;border:0;color:var(--violet);font-weight:700;font-size:1rem;text-decoration:underline;padding:10px 4px;display:block;margin:6px auto 0}
.rules{margin:16px 0 0;padding:0 1.2em 0 0;color:var(--muted);font-size:1rem}
.rules li{margin:2px 0}

/* sheet */
.topbar{position:sticky;top:0;z-index:5;background:rgba(255,247,234,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);margin:0 -14px;padding:10px 14px 10px;border-bottom:1px solid #F1E3CC}
.topline{display:flex;justify-content:space-between;align-items:center;font-weight:800;gap:8px}
.hello{color:var(--violet);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog-text{color:var(--muted);font-size:.95rem;white-space:nowrap}
.progress{height:14px;border-radius:99px;background:#EDE6D8;overflow:hidden;margin-top:4px}
.fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--yellow),var(--orange),var(--pink));transition:width .4s}
.sheet-title{font-size:1.45rem;text-align:center;margin:14px 0 4px;font-weight:900;line-height:1.5}
.banner{background:#FFF3C4;border:2px solid #FACC15;border-radius:14px;padding:8px 12px;margin:10px 0;font-weight:700;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px}
.banner .btn-link{margin:0;padding:4px}

/* example */
.example{border:3px solid #FDBA74;background:linear-gradient(180deg,#FFF7ED,#fff 40%)}
.example h2{margin:0 0 4px;font-size:1.25rem;color:#C2410C}
.example summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.example summary::-webkit-details-marker{display:none}
.example summary .tog{font-size:.9rem;color:var(--orange);font-weight:800}
.example .q{font-weight:700}
.steps{list-style:none;padding:0;margin:8px 0 0}
.steps li{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.steps .num{flex:0 0 32px;height:32px;border-radius:50%;background:var(--orange);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:3px}
.steps li:nth-child(2) .num{background:var(--pink)}.steps li:nth-child(3) .num{background:var(--violet)}
.rule{background:#F5F0FF;border-radius:14px;padding:8px 12px;margin-top:10px;font-weight:800;color:#5B21B6;text-align:center}
svg.bar{display:block;width:100%;height:auto;max-width:620px;margin:8px auto 4px;font-family:"Cairo",Tahoma,Arial,sans-serif}

/* sections & questions */
.sec-head{margin:26px 0 6px;padding:10px 16px;border-radius:16px;color:#fff;font-weight:900;font-size:1.15rem;line-height:1.5;box-shadow:0 4px 0 rgba(0,0,0,.12)}
.sec-note{margin:6px 4px 4px;color:var(--muted);font-weight:700;font-size:1rem}
.qcard{position:relative;border:3px solid transparent;transition:border-color .2s,background .2s}
.qcard.ok{border-color:#86EFAC;background:linear-gradient(180deg,var(--greenbg),#fff 60%)}
.qcard.shown{border-color:#FCA5A5}
.qhead{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.qnum{flex:0 0 auto;min-width:40px;height:40px;padding:0 8px;border-radius:12px;color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.badge{font-size:.85rem;font-weight:800;padding:2px 10px;border-radius:99px;background:#FEF3C7;color:#92400E}
.qstate{margin-inline-start:auto;font-weight:900;font-size:1.4rem}
.qtext{font-size:1.15rem;font-weight:600;margin:4px 0 6px}
.part{margin-top:10px}
.part-q{font-weight:700;margin:2px 0}
.ansrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.ans{width:150px;max-width:55%;font:inherit;font-size:1.5rem;font-weight:800;text-align:center;direction:ltr;padding:6px 10px;min-height:56px;border:3px solid #D6D3E8;border-radius:14px;outline:none;background:#FCFCFF;color:var(--ink)}
.ans:focus{border-color:var(--violet);box-shadow:0 0 0 4px #EDE4FF}
.ans.good{border-color:var(--green);background:var(--greenbg);color:#14532D}
.ans.bad{border-color:var(--red);background:var(--redbg)}
.ans:disabled{opacity:1}
.unit{font-weight:700;color:var(--muted)}
.pre{font-weight:800}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.check{font-size:1.2rem;font-weight:900;border:0;border-radius:14px;min-height:52px;padding:6px 26px;color:#fff;background:var(--green);box-shadow:0 4px 0 #15803D}
.check:active{transform:translateY(2px);box-shadow:0 2px 0 #15803D}
.solbtn{background:none;border:0;color:var(--muted);font-weight:700;font-size:.95rem;text-decoration:underline;padding:8px 4px}
.fb{margin-top:10px;border-radius:14px;padding:8px 12px;font-weight:800}
.fb.good{background:var(--greenbg);color:#166534}
.fb.bad{background:var(--redbg);color:#991B1B}
.fb.info{background:#FFF7D6;color:#854D0E}
.hint{margin-top:8px;border-radius:14px;padding:8px 12px;background:#EEF6FF;border-inline-start:6px solid var(--sky);font-weight:600}
.hint b{color:#0369A1}
.sol{margin-top:10px;border-radius:14px;padding:10px 14px;background:#F7F4FF;border-inline-start:6px solid var(--violet)}
.sol .st{font-weight:900;color:var(--violet);margin-bottom:2px}
.sol p{margin:4px 0}
.sol .final{font-weight:800}
.pop{animation:pop .45s ease}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.finish-wrap{margin:26px 0 10px}
.warn{background:#FFF3C4;border-radius:14px;padding:10px 14px;font-weight:700;margin:0}

/* result */
.result-card{text-align:center;padding:26px 18px;margin-top:24px}
.res-name{font-size:1.3rem;font-weight:900;color:var(--violet);margin:0}
.score-ring{width:170px;height:170px;border-radius:50%;margin:14px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--green) var(--p,0%),#ECE7DB 0);position:relative}
.score-ring::before{content:"";position:absolute;inset:16px;border-radius:50%;background:#fff}
.score-ring span{position:relative}
.res-num{font-size:3rem;font-weight:900;line-height:1}
.res-of{font-weight:800;color:var(--muted)}
.res-line{font-size:1.3rem;font-weight:900;margin:6px 0}
.res-msg{color:var(--muted);font-weight:700;margin:0 0 10px}
.res-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px auto 6px;max-width:420px}
.res-grid button{border:0;border-radius:12px;min-height:46px;font:inherit;font-weight:900;font-size:1.1rem;color:#fff}
.res-grid .ok{background:var(--green)}.res-grid .no{background:var(--red)}
.res-legend{display:flex;justify-content:center;gap:18px;color:var(--muted);font-weight:700;font-size:.95rem}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-inline-end:5px;vertical-align:middle}
.dot.ok{background:var(--green)}.dot.no{background:var(--red)}

/* footer */
.foot{margin-top:40px;text-align:center;color:#B9B2A3;font-size:.8rem}
.foot>span{display:block}
.teacher-link{background:none;border:0;color:#CFC8B8;font-size:.72rem;padding:14px 10px;margin-top:6px}
.teacher-panel{text-align:right;color:var(--ink);font-size:1rem;background:#fff;border-radius:16px;padding:14px;margin-top:6px;box-shadow:0 4px 18px rgba(0,0,0,.08)}
.teacher-panel h3{margin:0 0 6px}
.teacher-panel ol{margin:0;padding:0 1.6em 0 0}
.teacher-panel li{margin:6px 0}
@media (min-width:700px){body{font-size:19px}.qtext{font-size:1.2rem}#app{padding-top:20px}}
@media (max-width:360px){body{font-size:17px}.hero h1{font-size:1.9rem}.res-grid{grid-template-columns:repeat(4,1fr)}}