/* English Grade 3 — shared styles. A bright "sticker book": cream paper, chunky rounded cards, one colour per unit. */
:root{
  --paper:#fff8ec; --sheet:#ffffff; --ink:#23324d; --muted:#6b7690; --rule:#efe3cf;
  --sky:#2f7fd8; --sky-soft:#e1efff; --sun:#f2a516; --sun-soft:#fff1d1; --coral:#ef5f67; --coral-soft:#ffe3e4;
  --mint:#1fa88a; --mint-soft:#d9f5ec; --grape:#7d5bd0; --grape-soft:#ece5ff; --leaf:#5aa83a; --leaf-soft:#e6f5dc;
  --shadow:0 1px 2px rgba(40,50,80,.06),0 10px 24px rgba(40,50,80,.08);
  --p1:#e56aa0; --p2:#a26bc6; --p3:#e9b52a; --p4:#d7577f; --p5:#8f7bd8; --p6:#f2c14e;
  --u:var(--sky); --u-soft:var(--sky-soft);
  --f:"Baloo Bhaijaan 2","Baloo 2",system-ui,"Segoe UI",Tahoma,sans-serif;
  --f-en:"Baloo 2","Baloo Bhaijaan 2",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#17202e; --sheet:#1f2a3b; --ink:#eef3fb; --muted:#a9b5c9; --rule:#30405a;
  --sky:#79b4ff; --sky-soft:#1e3350; --sun:#ffc552; --sun-soft:#3d321b; --coral:#ff8c92; --coral-soft:#45252a;
  --mint:#5fd6b8; --mint-soft:#183a35; --grape:#b9a0ff; --grape-soft:#2f2850; --leaf:#93d677; --leaf-soft:#22351c;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 24px rgba(0,0,0,.3); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#17202e; --sheet:#1f2a3b; --ink:#eef3fb; --muted:#a9b5c9; --rule:#30405a;
  --sky:#79b4ff; --sky-soft:#1e3350; --sun:#ffc552; --sun-soft:#3d321b; --coral:#ff8c92; --coral-soft:#45252a;
  --mint:#5fd6b8; --mint-soft:#183a35; --grape:#b9a0ff; --grape-soft:#2f2850; --leaf:#93d677; --leaf-soft:#22351c;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 24px rgba(0,0,0,.3); color-scheme:dark}
*{box-sizing:border-box}
html{direction:rtl}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.65;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' font-family='Arial Rounded MT Bold,Arial,sans-serif' font-weight='700'%3E%3Cg fill-opacity='.22'%3E%3Ctext x='18' y='52' font-size='40' fill='%232f7fd8' transform='rotate(-12 30 40)'%3EA%3C/text%3E%3Ctext x='120' y='40' font-size='30' fill='%23ef5f67'%3Eb%3C/text%3E%3Ctext x='215' y='70' font-size='38' fill='%231fa88a' transform='rotate(10 225 60)'%3EC%3C/text%3E%3Ctext x='60' y='130' font-size='32' fill='%23f2a516'%3E3%3C/text%3E%3Ctext x='165' y='145' font-size='42' fill='%237d5bd0' transform='rotate(-8 175 130)'%3Ed%3C/text%3E%3Ctext x='255' y='160' font-size='28' fill='%232f7fd8'%3E7%3C/text%3E%3Ctext x='22' y='225' font-size='30' fill='%231fa88a'%3Ee%3C/text%3E%3Ctext x='100' y='250' font-size='40' fill='%23ef5f67' transform='rotate(14 110 240)'%3EZ%3C/text%3E%3Ctext x='190' y='240' font-size='34' fill='%23f2a516'%3E5%3C/text%3E%3Ctext x='250' y='285' font-size='30' fill='%237d5bd0'%3Ex%3C/text%3E%3Ctext x='140' y='300' font-size='26' fill='%232f7fd8'%3E1%3C/text%3E%3C/g%3E%3Cg fill='%23f2a516' fill-opacity='.35'%3E%3Ccircle cx='95' cy='80' r='4'/%3E%3Ccircle cx='235' cy='215' r='3'/%3E%3Cpath d='M40 290l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6-4.5-4 6-1z'/%3E%3Cpath d='M280 20l2 4.5 5 .6-3.6 3.3 1 4.9-4.4-2.5-4.4 2.5 1-4.9-3.6-3.3 5-.6z'/%3E%3C/g%3E%3C/svg%3E");background-size:300px 300px}
body[data-u]{--u-soft:color-mix(in srgb,var(--u) 16%,var(--sheet))}
body[data-u="1"]{--u:#d14f8c} body[data-u="2"]{--u:#9157b8}
body[data-u="3"]{--u:#c48f0b} body[data-u="4"]{--u:#c4436d}
body[data-u="5"]{--u:#7a64cc} body[data-u="6"]{--u:#cc951f}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--grape);outline-offset:2px;border-radius:8px}
img{max-width:100%}
.en{direction:ltr;unicode-bidi:isolate;font-family:var(--f-en)}
.wrap{max-width:1080px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.muted{color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{white-space:nowrap;border:0;border-radius:14px;padding:8px 16px;font-weight:700;background:var(--u);color:#fff;display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1.4}
:root[data-theme="dark"] .btn,.dark .btn{color:#10151f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#10151f}}
.btn.ghost{background:var(--u-soft);color:var(--u)}
.btn.sm{padding:4px 12px;font-size:15px;border-radius:10px}
.btn[disabled]{opacity:.5;cursor:default}
.card{background:var(--sheet);border:1px solid var(--rule);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.bi{display:inline-flex;flex-direction:column;line-height:1.15;align-items:flex-start}
.bi .e{font-family:var(--f-en);direction:ltr;font-weight:800}
.bi .a{font-size:.72em;font-weight:600;opacity:.85}
h1,h2,h3{line-height:1.2;margin:0;text-wrap:balance}
select,input[type=text],input[type=email],input[type=password],input[type=date],textarea{border:1.5px solid var(--rule);border-radius:12px;padding:7px 12px;background:var(--sheet);max-width:100%}
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:9px 18px;border-radius:14px;z-index:90;font-weight:700;max-width:90vw;text-align:center}
.pill{display:inline-block;border-radius:999px;padding:0 10px;font-size:13px;font-weight:700;background:var(--u-soft);color:var(--u)}
.stars{color:var(--sun);letter-spacing:2px}
.opt{border:2px solid var(--rule);background:var(--sheet);border-radius:16px;padding:10px 14px;font-weight:700;text-align:center}
.opt.ok{background:var(--mint-soft);border-color:var(--mint);color:var(--mint)}
.opt.bad{background:var(--coral-soft);border-color:var(--coral);color:var(--coral)}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(5px)}50%{transform:translateX(-5px)}75%{transform:translateX(3px)}}
.pop{animation:pop .35s}
@keyframes pop{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.say{border:0;background:var(--u-soft);color:var(--u);border-radius:50%;width:36px;height:36px;display:inline-grid;place-items:center;flex:none}
.say svg{width:20px;height:20px}
.clock svg{width:150px;height:150px}
.thumb{border-radius:12px;border:1px solid var(--rule);display:block}

.btn svg{width:18px;height:18px}

.demo-rib{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom,0px));right:10px;z-index:80;display:flex;align-items:center;gap:8px;background:#fff;color:#7a4fc4;border:2px solid #e9d8f6;border-radius:999px;padding:4px 14px 4px 4px;font-weight:800;font-size:14px;line-height:1.1;text-decoration:none;box-shadow:0 4px 14px rgba(120,80,170,.18)}
.demo-rib img{width:34px;height:34px;border-radius:50%}.demo-rib small{display:block;font-size:11px;color:#9a8fb3;font-weight:700}
@media print{.demo-rib{display:none}}