@charset "UTF-8";

[hidden]{ display:none !important; }

:root{
  --bg1:#0E1B2E;
  --bg2:#14283F;
  --panel:#1B3350;
  --panel2:#152A44;
  --cream:#FFF7E6;
  --ink:#10203A;
  --cyan:#35E0F0;
  --cyan-d:#22A6C6;
  --lemon:#B8FF3C;
  --coral:#FF7A59;
  --amber:#FFC857;
  --empty1:#22405F;
  --empty2:#1E3A57;
  --empty-line:#3C4F6B;
  --text:#E9F2FB;
  --dim:#9CB4CD;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
}

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

html,body{ margin:0; padding:0; height:100%; }

body{
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:#0E1B2E;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}

body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(720px 460px at 88% -10%, rgba(255,200,87,.17), transparent 68%),
    radial-gradient(560px 420px at 8% 108%, rgba(53,224,240,.10), transparent 70%),
    linear-gradient(158deg,#0E1B2E 0%,#14283F 58%,#0E1B2E 100%);
}

body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{
  font-family:'Baloo Bhaijaan 2','Tajawal',sans-serif;
  font-weight:700;
  margin:0;
  letter-spacing:0;
}

button{
  font-family:inherit;
  color:inherit;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
}

button:focus-visible,
a:focus-visible{
  outline:3px solid var(--lemon);
  outline-offset:2px;
}

/* ============ layout ============ */

.app{
  position:relative;
  z-index:1;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.topbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px 8px;
  flex:0 0 auto;
}

.brand{ display:flex; align-items:center; gap:9px; min-width:0; flex:1 1 auto; }

.brand-mark{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(160deg,#4DECFA,#22A6C6);
  color:#062430;
  font-family:'Baloo Bhaijaan 2',sans-serif;
  font-weight:800;
  font-size:17px;
  box-shadow:0 3px 0 #10263F, 0 8px 18px rgba(53,224,240,.28);
}

.brand-txt{ min-width:0; }

.brand-txt h1{
  font-size:15px;
  line-height:1.2;
  color:#F4FAFF;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brand-txt p{
  margin:2px 0 0;
  font-size:11px;
  color:var(--dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brand-txt .credit{
  margin-top:1px;
  font-size:10.5px;
  font-weight:800;
  color:var(--amber);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}

.hud{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }

.pill-stat{
  display:flex; align-items:center; gap:4px;
  min-height:36px;
  padding:0 9px;
  border-radius:12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  color:#F4FAFF;
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.pill-stat span{ font-size:12px; }
.pill-stat b{ font-family:'Baloo Bhaijaan 2',sans-serif; }

.icon-btn{
  width:38px; height:38px;
  min-height:38px;
  border-radius:12px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  color:#D7E7F6;
  transition:background .18s ease, transform .1s ease;
}
.icon-btn:active{ transform:scale(.94); }
.icon-btn:not(.muted):hover{ background:rgba(53,224,240,.16); }
#btnSound.muted{ color:#FF9B84; }
#btnSound .mute-x{ display:none; }
#btnSound.muted .mute-x{ display:block; }
#btnSound.muted .w1,
#btnSound.muted .w2{ display:none; }

/* tabs */
.tabs{
  display:flex;
  gap:6px;
  padding:0 12px 9px;
  flex:0 0 auto;
}

.tab{
  flex:1 1 0;
  min-height:44px;
  padding:0 8px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  color:#C3D7EA;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .2s ease, color .2s ease, transform .1s ease, box-shadow .2s ease;
}
.tab:active{ transform:translateY(1px); }
.tab.active{
  background:linear-gradient(160deg,#4DECFA,#25A8CB);
  color:#062430;
  border-color:transparent;
  box-shadow:0 6px 18px rgba(53,224,240,.26);
}
.tab.teacher{
  flex:0 0 auto;
  display:flex; align-items:center; gap:5px;
  padding:0 11px;
  background:rgba(255,200,87,.13);
  border-color:rgba(255,200,87,.32);
  color:#FFC857;
}
.tab.teacher:hover{ background:rgba(255,200,87,.2); }

main{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:2px 12px 28px;
  scrollbar-width:thin;
  scrollbar-color:#2A4A6B transparent;
}
main::-webkit-scrollbar{ width:8px; }
main::-webkit-scrollbar-thumb{ background:#2A4A6B; border-radius:8px; }

.view{ max-width:760px; margin:0 auto; }

/* ============ board card ============ */

.board-card{
  position:relative;
  background:var(--panel);
  border-radius:var(--r-lg);
  padding:10px 10px 12px;
  margin-bottom:12px;
  box-shadow:0 14px 34px rgba(2,10,22,.42), inset 0 1px 0 rgba(255,255,255,.055);
  overflow:hidden;
}
.board-card::before{
  content:'';
  position:absolute;
  inset-inline:0; top:0;
  height:3px;
  background:var(--cyan);
  box-shadow:0 0 14px rgba(53,224,240,.6);
}

.board-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:5px 2px 10px;
  flex-wrap:wrap;
}

.bh-title{
  display:flex; align-items:center; gap:7px;
  font-family:'Baloo Bhaijaan 2',sans-serif;
  font-weight:700;
  font-size:15px;
  color:#EAF5FF;
  min-width:0;
}
.bh-title .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
  flex:0 0 auto;
}
.bh-count{
  font-size:11.5px;
  font-weight:700;
  color:#0B2237;
  background:var(--cyan);
  border-radius:999px;
  padding:2px 8px;
  font-family:'Tajawal',sans-serif;
  white-space:nowrap;
}

/* pills */
.pills{ display:flex; flex-wrap:wrap; gap:6px; }

.pills button{
  min-height:40px;
  padding:0 13px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:#CFE1F0;
  font-size:13px;
  font-weight:700;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.pills button:active{ transform:scale(.97); }
.pills button:hover{ background:rgba(255,255,255,.11); }
.pills button.on{
  background:var(--cyan);
  border-color:var(--cyan);
  color:#062430;
  font-weight:800;
}

.pills.mini{ gap:5px; }
.pills.mini button{
  min-height:32px;
  padding:0 9px;
  font-size:11.5px;
  border-radius:10px;
  font-weight:800;
}

/* ============ the chart ============ */

.chart{
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:clamp(3px,1vw,6px);
  direction:rtl;
  container-type:inline-size;
}

.cell{
  position:relative;
  aspect-ratio:1 / 1;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:clamp(4px,1.3vw,9px);
  border:1.5px solid var(--ink);
  background:var(--cream);
  color:var(--ink);
  font-family:'Baloo Bhaijaan 2','Tajawal',sans-serif;
  font-weight:700;
  font-size:16px;
  line-height:1;
  font-variant-numeric:tabular-nums;
  box-shadow:inset 0 -2px 0 rgba(16,32,58,.12);
  transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease;
  overflow:hidden;
}
@supports (font-size:1cqw){
  .cell{ font-size:clamp(10px,5.4cqw,34px); }
}
.cell:active{ transform:scale(.93); }
.cell[disabled]{ cursor:default; }

.cell.empty{
  background-color:var(--empty1);
  background-image:repeating-linear-gradient(135deg, rgba(60,79,107,.85) 0 6px, rgba(34,64,95,.2) 6px 12px);
  border:1.5px dashed var(--empty-line);
  color:transparent;
  box-shadow:inset 0 0 12px rgba(3,14,26,.45);
  cursor:pointer;
}
.cell.empty:hover{ border-color:#5E7C9C; }

/* تلوين الصفوف والأعمدة بألوان واضحة */
.cell.tint-row{
  background-color:#FFE066;
  color:#5A3A00;
  box-shadow:inset 0 0 0 2px #F59F00, inset 0 -2px 0 rgba(16,32,58,.12);
}
.cell.tint-col{
  background-color:#8CE99A;
  color:#0F3D1B;
  box-shadow:inset 0 0 0 2px #2F9E44, inset 0 -2px 0 rgba(16,32,58,.12);
}
.cell.tint-row.tint-col{
  background-color:#FFC9A0;
  color:#4A2200;
  box-shadow:inset 0 0 0 2px #E8590C, inset 0 -2px 0 rgba(16,32,58,.12);
}
.cell.empty.tint-row,
.cell.empty.tint-col,
.cell.empty.tint-row.tint-col{
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.5) 0 6px, rgba(255,255,255,0) 6px 12px);
}

/* العدد المُبرز: حلقة حمراء واضحة */
.cell.hl{
  box-shadow:0 0 0 3px #E03131, 0 0 22px rgba(224,49,49,.5);
  transform:scale(1.08);
  z-index:3;
}

.cell.center-cell{
  background:#DCF6FF;
  box-shadow:0 0 0 2px var(--cyan), 0 0 14px rgba(53,224,240,.35);
}

.cell.pending{
  background:#FFE9C7;
  color:#5A3608;
}

.cell.correct{
  background:#E9FFC9;
  color:#1F3B06;
  box-shadow:0 0 0 2px var(--lemon), 0 0 14px rgba(184,255,60,.35);
}

.cell.revealed{
  background:#FFE3D9;
  color:#7A2A16;
  box-shadow:0 0 0 2px var(--coral);
}

.cell.wrong{
  background:#FFE7E0;
  border-color:var(--coral);
  color:#7A2A16;
  box-shadow:0 0 0 3px rgba(255,122,89,.35);
}

.cell.drop-hover{
  box-shadow:0 0 0 3px var(--cyan), 0 0 18px rgba(53,224,240,.5);
  transform:scale(1.06);
}

.cell.pickable{ cursor:copy; }

/* animations */
@keyframes cellIn{
  from{ opacity:0; transform:scale(.45) translateY(8px); }
  60%{ opacity:1; transform:scale(1.08) translateY(0); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
.reveal{ animation:cellIn .4s cubic-bezier(.22,1.2,.4,1) both; }

@keyframes popIn{
  0%{ transform:scale(.55); }
  55%{ transform:scale(1.14); }
  100%{ transform:scale(1); }
}
.pop{ animation:popIn .38s ease-out both; }

@keyframes shakeX{
  10%,90%{ transform:translateX(-2px); }
  20%,80%{ transform:translateX(3px); }
  30%,50%,70%{ transform:translateX(-4px); }
  40%,60%{ transform:translateX(4px); }
}
.shake{ animation:shakeX .42s both; }

/* ============ relation panel ============ */

.relation{
  background:var(--panel2);
  border:1px solid rgba(53,224,240,.22);
  border-radius:var(--r-md);
  padding:12px;
  margin-bottom:12px;
  animation:cellIn .28s ease-out both;
}
.rel-head{
  display:flex; align-items:center; gap:8px;
  font-size:13px;
  color:var(--dim);
  font-weight:700;
  margin-bottom:9px;
}
.rel-num{
  font-family:'Baloo Bhaijaan 2',sans-serif;
  font-size:20px;
  font-weight:800;
  color:#062430;
  background:var(--lemon);
  border-radius:9px;
  padding:1px 10px;
}
.rel-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.rel{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:7px 4px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rel span{ font-size:10.5px; color:var(--dim); font-weight:700; }
.rel b{
  font-family:'Baloo Bhaijaan 2',sans-serif;
  font-size:16px;
  color:#EAF7FF;
}
.rel.off{ opacity:.35; }
.rel-note{
  margin:9px 0 0;
  font-size:11.5px;
  color:#8FADC9;
  line-height:1.5;
}

/* ============ buttons ============ */

.toolbar{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:10px;
}

.btn{
  min-height:52px;
  padding:0 10px;
  border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:#1B3350;
  border:1px solid rgba(255,255,255,.09);
  color:#DCEAF7;
  font-size:14px;
  font-weight:800;
  box-shadow:0 3px 0 rgba(0,0,0,.28);
  transition:transform .1s ease, background .18s ease, box-shadow .18s ease, border-color .18s;
  text-align:center;
  line-height:1.2;
}
.btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.28); }
.btn:hover{ background:#22405F; }

.btn.primary{
  background:linear-gradient(160deg,#4DECFA,#22A6C6);
  border-color:transparent;
  color:#062430;
}
.btn.primary:hover{ background:linear-gradient(160deg,#63f0fc,#2bb4d6); }

.btn.lemon{
  background:linear-gradient(160deg,#C6FF5C,#93DD1E);
  border-color:transparent;
  color:#1A2C08;
}
.btn.lemon:hover{ background:linear-gradient(160deg,#d2ff7a,#a2e92f); }

.btn.ghost{ background:rgba(255,255,255,.045); }

.btn.toggle.on{
  background:rgba(53,224,240,.18);
  border-color:var(--cyan);
  color:#BFF7FF;
  box-shadow:0 0 0 1px rgba(53,224,240,.35), 0 3px 0 rgba(0,0,0,.28);
}

#btnTintRow.on{
  background:#FFE066;
  border-color:#F59F00;
  color:#5A3A00;
  box-shadow:0 0 0 1px rgba(245,159,0,.45), 0 3px 0 rgba(0,0,0,.28);
}
#btnTintCol.on{
  background:#8CE99A;
  border-color:#2F9E44;
  color:#0F3D1B;
  box-shadow:0 0 0 1px rgba(47,158,68,.45), 0 3px 0 rgba(0,0,0,.28);
}
#btnClearTint.on{
  background:#FF8787;
  border-color:#E03131;
  color:#3A0000;
  box-shadow:0 0 0 1px rgba(224,49,49,.45), 0 3px 0 rgba(0,0,0,.28);
}

.btn.danger{
  background:rgba(255,122,89,.14);
  border-color:rgba(255,122,89,.4);
  color:#FFB3A0;
}
.btn.danger.confirm{
  background:var(--coral);
  color:#3A0E03;
  border-color:var(--coral);
}
.btn.sm{ min-height:44px; font-size:13px; padding:0 14px; }
.btn[disabled]{ opacity:.42; pointer-events:none; }

.hintline{
  margin:0 0 8px;
  font-size:12px;
  color:#8FADC9;
  text-align:center;
  line-height:1.6;
}

/* ============ challenge view ============ */

.chbar{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.chipstat{
  font-size:11.5px;
  font-weight:800;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  color:#CFE1F0;
  white-space:nowrap;
}
.chipstat.ok{
  background:rgba(184,255,60,.14);
  border-color:rgba(184,255,60,.35);
  color:#D6FF8C;
  margin-inline-start:auto;
}

.pbar{
  height:9px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  margin-bottom:10px;
}
.pbar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#22A6C6,#B8FF3C);
  transition:width .45s cubic-bezier(.3,1,.4,1);
}

.setupbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  background:rgba(255,200,87,.13);
  border:1px solid rgba(255,200,87,.4);
  border-radius:var(--r-md);
  padding:9px 12px;
  margin-bottom:10px;
  font-size:13px;
  font-weight:700;
  color:#FFE2A6;
}
.setupbar b{ font-family:'Baloo Bhaijaan 2',sans-serif; font-size:16px; }
.setup-actions{ display:flex; gap:6px; }

.hint-bubble{
  position:relative;
  background:var(--amber);
  color:#3A2600;
  border-radius:14px;
  padding:10px 14px;
  font-size:13.5px;
  font-weight:700;
  line-height:1.55;
  margin-bottom:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
  animation:cellIn .3s ease-out both;
}
.hint-bubble::after{
  content:'';
  position:absolute;
  bottom:-7px;
  inset-inline-start:24px;
  width:14px; height:14px;
  background:var(--amber);
  transform:rotate(45deg);
  border-radius:3px;
}

.tray{
  background:var(--panel2);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-md);
  padding:9px 9px 11px;
  margin-bottom:10px;
}
.tray-head{
  font-size:11px;
  color:#8FADC9;
  font-weight:700;
  margin-bottom:8px;
  line-height:1.5;
}
.tray-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
}

.chip{
  min-height:48px;
  border-radius:12px;
  background:var(--cream);
  border:1.5px solid var(--ink);
  color:var(--ink);
  font-family:'Baloo Bhaijaan 2',sans-serif;
  font-weight:800;
  font-size:18px;
  display:grid;
  place-items:center;
  box-shadow:0 3px 0 rgba(0,0,0,.32);
  touch-action:none;
  transition:transform .1s ease, box-shadow .16s ease, opacity .2s ease;
  font-variant-numeric:tabular-nums;
}
.chip:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.32); }
.chip.armed{
  background:#E9FFC9;
  box-shadow:0 0 0 3px var(--lemon), 0 3px 0 rgba(0,0,0,.32);
}
.chip.used{ opacity:.28; pointer-events:none; }

.drag-ghost{
  position:fixed;
  top:0; left:0;
  width:54px; height:54px;
  border-radius:13px;
  background:var(--cream);
  border:2px solid var(--lemon);
  color:var(--ink);
  font-family:'Baloo Bhaijaan 2',sans-serif;
  font-weight:800;
  font-size:20px;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:120;
  box-shadow:0 12px 26px rgba(0,0,0,.5);
  transform:translate(-50%,-50%);
}

.row-actions{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:8px;
  margin-bottom:8px;
}

.result{
  background:linear-gradient(160deg,rgba(184,255,60,.16),rgba(53,224,240,.1));
  border:1px solid rgba(184,255,60,.42);
  border-radius:var(--r-md);
  padding:14px;
  text-align:center;
  margin-bottom:10px;
  animation:cellIn .4s cubic-bezier(.22,1.2,.4,1) both;
}
.result-stars{ font-size:26px; letter-spacing:4px; line-height:1; }
.result-txt{
  font-family:'Baloo Bhaijaan 2',sans-serif;
  font-size:15px;
  font-weight:700;
  color:#EAFFD2;
  margin:7px 0 11px;
  line-height:1.5;
}
.result .btn{ width:100%; }

/* setup mode hides play chrome */
#viewChallenge.setup-mode .tray,
#viewChallenge.setup-mode .row-actions,
#viewChallenge.setup-mode .hint-bubble{ display:none !important; }

/* ============ sheets ============ */

.sheet-wrap{
  position:fixed;
  inset:0;
  z-index:90;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.sheet-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,12,22,.62);
  backdrop-filter:blur(3px);
  animation:fadeIn .2s ease-out both;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.sheet{
  position:relative;
  background:linear-gradient(180deg,#1D3757,#152A44);
  border-radius:24px 24px 0 0;
  border-top:1px solid rgba(53,224,240,.35);
  box-shadow:0 -14px 46px rgba(0,0,0,.5);
  max-height:78dvh;
  display:flex;
  flex-direction:column;
  padding:8px 12px 16px;
  animation:sheetUp .28s cubic-bezier(.2,1,.35,1) both;
  z-index:1;
}
@keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }

.sheet-tall{ max-height:88dvh; }

.sheet-grip{
  width:44px; height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.2);
  margin:2px auto 8px;
  flex:0 0 auto;
}
.sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:2px 2px 8px;
  flex:0 0 auto;
}
.sheet-head h3{ font-size:17px; color:#F2FAFF; }
.sheet-sub{
  margin:0 2px 10px;
  font-size:12px;
  color:var(--dim);
  line-height:1.6;
  flex:0 0 auto;
}
.sheet-body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}

.keypad{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(44px,1fr));
  gap:6px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 4px;
}
.keypad button{
  min-height:46px;
  border-radius:11px;
  background:rgba(255,247,230,.95);
  color:var(--ink);
  font-family:'Baloo Bhaijaan 2',sans-serif;
  font-weight:800;
  font-size:16px;
  border:1.5px solid var(--ink);
  box-shadow:0 2px 0 rgba(0,0,0,.3);
  transition:transform .1s ease, background .15s ease;
}
.keypad button:active{ transform:translateY(2px); box-shadow:none; }
.keypad button:hover{ background:#fff; }
.keypad button.zero{ background:rgba(53,224,240,.28); color:#041C26; }

/* teacher panel */
.tgroup{ margin-bottom:16px; }
.tgroup h4{
  font-size:13px;
  color:#A9C2D8;
  margin-bottom:8px;
  font-weight:700;
  font-family:'Tajawal',sans-serif;
}
.tnote{
  margin:8px 0 0;
  font-size:11.5px;
  color:#89A5BF;
  line-height:1.6;
}
.stepper{
  display:flex;
  align-items:center;
  gap:12px;
}
.stepper button{
  width:48px; height:48px;
  border-radius:13px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:#EAF5FF;
  font-size:22px;
  font-weight:800;
  display:grid;
  place-items:center;
  transition:background .16s ease, transform .1s ease;
}
.stepper button:active{ transform:scale(.94); }
.stepper button:hover{ background:rgba(53,224,240,.18); }
.stepper output{
  min-width:58px;
  text-align:center;
  font-family:'Baloo Bhaijaan 2',sans-serif;
  font-size:24px;
  font-weight:800;
  color:var(--cyan);
}
.t-actions{ display:grid; gap:8px; margin-top:6px; }

.credit-line{
  margin:16px 0 2px;
  text-align:center;
  font-size:12px;
  font-weight:800;
  color:var(--amber);
  letter-spacing:0;
}

/* ============ toast ============ */

.toast{
  position:fixed;
  bottom:14px;
  inset-inline:0;
  margin-inline:auto;
  width:max-content;
  max-width:min(88vw,420px);
  z-index:60;
  padding:9px 16px;
  border-radius:999px;
  background:var(--amber);
  color:#3A2600;
  font-size:12.5px;
  font-weight:800;
  line-height:1.45;
  text-align:center;
  box-shadow:0 10px 26px rgba(0,0,0,.38);
  opacity:0;
  transform:translateY(10px) scale(.96);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.toast.show{ opacity:1; transform:translateY(0) scale(1); }

/* ============ responsive ============ */

@media (min-width:430px){
  .brand-txt h1{ font-size:17px; }
  .brand-txt p{ font-size:12px; }
  .tab{ font-size:14px; }
  .toolbar{ grid-template-columns:repeat(3,1fr); }
  .tray-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  main{ padding-bottom:28px; }
}

@media (min-width:760px){
  .brand-mark{ width:52px; height:52px; font-size:20px; }
  .brand-txt h1{ font-size:21px; }
  .brand-txt p{ font-size:13px; }
  .tab{ font-size:15px; min-height:50px; }
  .btn{ min-height:58px; font-size:15px; }
  .pills button{ min-height:44px; font-size:14px; }
  .pills.mini button{ min-height:34px; font-size:12px; }
  .tray-grid{ grid-template-columns:repeat(10,minmax(0,1fr)); }
  .sheet{ max-width:640px; margin:0 auto; border-radius:24px 24px 0 0; }
  main{ padding-bottom:32px; }
}

@media (max-width:360px){
  .brand-mark{ width:38px; height:38px; font-size:14px; border-radius:12px; }
  .brand-txt h1{ font-size:13.5px; }
  .brand-txt p:not(.credit){ display:none; }
  .brand-txt .credit{ font-size:10px; }
  .pill-stat{ font-size:12px; padding:0 7px; }
  .tab{ font-size:12px; }
  .tray-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .rel-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-height:520px) and (orientation:landscape){
  .brand-txt p:not(.credit){ display:none; }
}

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