:root{
  --bg:#0e2a22; --panel:#13362b; --panel2:#0b211a; --line:#1f5042;
  --gold:#e0b84a; --gold-dim:#b8923a; --cta:#27a060; --cta-d:#1f7f4c;
  --text:#eef3ef; --muted:#9fc4b4; --dim:#6f9586; --danger:#e06b5b;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,Segoe UI,sans-serif;font-size:15px;line-height:1.5}
body.rtl{font-family:"Noto Nastaliq Urdu","Inter",sans-serif;line-height:2.1}
body.rtl .topnav,body.rtl .devbar,body.rtl .ascii{line-height:1.6}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 18px;background:linear-gradient(180deg,#16402f,#0e2a22);
  border-bottom:2px solid var(--gold-dim)}
.brand a{font-weight:700;font-size:18px;color:var(--gold)}
.brand .logo{color:var(--gold)}
.brand .tagline{display:block;font-size:12px;color:var(--muted);font-weight:400}
body.rtl .brand .tagline{font-size:13px}
.topnav{display:flex;gap:14px;align-items:center}
.topnav a{color:var(--text);font-weight:500}
.lang-toggle{border:1px solid var(--gold-dim);border-radius:20px;padding:3px 14px;color:var(--gold)!important}

/* dev bar */
.devbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 18px;
  background:#091912;border-bottom:1px solid var(--line);font-size:13px}
.devlabel{color:var(--dim)}
.devsel{background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:4px 8px;font-family:inherit;max-width:200px}
.devcur{margin-inline-start:auto;color:var(--gold);font-weight:600}

.page{max-width:1180px;margin:0 auto;padding:22px 18px 60px}
.foot{text-align:center;color:var(--dim);padding:20px;border-top:1px solid var(--line);font-size:13px}

h1{font-size:24px;color:var(--gold);margin:0 0 4px}
h2{font-size:19px;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:6px;margin-top:30px}
.sub{color:var(--muted);margin-top:0}

/* cards / grid of forms */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;display:block;transition:.15s}
.card:hover{border-color:var(--gold-dim);transform:translateY(-2px);text-decoration:none}
.card .code{font-size:12px;color:var(--dim);letter-spacing:.5px}
.card .ttl{font-weight:600;color:var(--text);margin:4px 0;font-size:15px}
.card .ttl .en{display:block;color:var(--muted);font-size:13px;font-weight:400}
.badge{display:inline-block;font-size:11px;padding:2px 9px;border-radius:20px;margin-top:6px}
.badge.input{background:#143d2c;color:#7fe0a8;border:1px solid #1f7f4c}
.badge.aggregate{background:#3a2f10;color:var(--gold);border:1px solid var(--gold-dim)}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin-top:14px}
table.grid{border-collapse:collapse;width:100%;min-width:640px;font-size:14px;background:var(--panel2)}
table.grid th,table.grid td{border:1px solid var(--line);padding:7px 9px;text-align:start;vertical-align:top}
table.grid thead th{background:#11362a;color:var(--gold);position:sticky;top:0;font-weight:600}
table.grid tbody tr:nth-child(even){background:#0d271f}
table.grid input,table.grid select,table.grid textarea{width:100%;background:transparent;border:none;
  color:var(--text);font-family:inherit;font-size:14px}
table.grid input:focus,table.grid textarea:focus{outline:1px solid var(--gold-dim);background:#0a1f18}
table.grid td.num{text-align:center;width:42px;color:var(--dim)}
table.grid tfoot td{background:#11362a;font-weight:700;color:var(--gold)}

.hdr-fields{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0;padding:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.hdr-fields .f{display:flex;flex-direction:column;gap:3px;min-width:160px}
.hdr-fields .f label{font-size:12px;color:var(--muted)}
.hdr-fields .f input,.hdr-fields .f select{background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:6px 9px;color:var(--text);font-family:inherit}

.btn{background:var(--cta);color:#fff;border:none;border-radius:9px;padding:9px 18px;
  font-family:inherit;font-weight:600;cursor:pointer;font-size:15px}
.btn:hover{background:var(--cta-d)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.gold{background:var(--gold);color:#241c00}
.toolbar{display:flex;gap:10px;align-items:center;margin:16px 0;flex-wrap:wrap}
.toolbar .spacer{flex:1}

.note{background:#0b211a;border:1px solid var(--line);border-inline-start:3px solid var(--gold-dim);
  padding:10px 14px;border-radius:8px;color:var(--muted);margin:12px 0;font-size:14px}
.signrow{display:flex;flex-wrap:wrap;gap:30px;margin-top:26px;color:var(--muted)}
.signrow .s{border-top:1px dashed var(--dim);padding-top:6px;min-width:180px;font-size:13px}
.pill{font-size:12px;color:var(--muted);background:#0b211a;border:1px solid var(--line);
  padding:2px 10px;border-radius:20px}

/* ── 10/7/4 mark buttons + Yes/No buttons (maktab2 R08 style) ── */
:root{
  --m10-bg:rgba(39,160,96,.20); --m10-fg:#b5e8c8; --m10-bd:rgba(39,160,96,.55);
  --m7-bg:rgba(212,175,55,.20);  --m7-fg:#f0d486;  --m7-bd:rgba(212,175,55,.55);
  --m4-bg:rgba(200,80,80,.18);   --m4-fg:#fca5a5;  --m4-bd:rgba(252,165,165,.5);
  --na-bg:rgba(255,255,255,.05); --na-fg:#9fc4b4;  --na-bd:rgba(255,255,255,.14);
}
.qrow{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:9px 14px;margin-bottom:8px}
.qrow.sub{margin-inline-start:30px;background:transparent;border-style:dashed;padding:6px 12px}
.qrow .qn{width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;
  background:rgba(224,184,74,.15);color:var(--gold);font-weight:800;border:1px solid var(--gold-dim);font-size:13px}
.qrow.sub .qn{background:transparent;border-color:transparent;color:var(--dim);font-weight:600}
.qrow .ql{font-weight:600}
.qrow.sub .ql{font-weight:400;color:var(--muted)}
.qsection{color:var(--gold);font-weight:700;margin:18px 0 8px;border-bottom:1px solid var(--line);padding-bottom:4px}
.btngrp{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.btngrp button{cursor:pointer;min-width:40px;padding:6px 14px;text-align:center;border-radius:999px;
  font-weight:700;font-size:14px;border:1px solid;background:#0b211a;color:var(--muted);
  border-color:var(--line);font-family:inherit;transition:transform .1s,box-shadow .15s}
.btngrp button:hover{transform:translateY(-1px)}
.btngrp button.m10{color:var(--m10-fg);border-color:var(--m10-bd)}
.btngrp button.m7 {color:var(--m7-fg); border-color:var(--m7-bd)}
.btngrp button.m4 {color:var(--m4-fg); border-color:var(--m4-bd)}
.btngrp button.na {color:var(--na-fg); border-color:var(--na-bd)}
.btngrp button.yes{color:var(--m10-fg);border-color:var(--m10-bd)}
.btngrp button.no {color:var(--m4-fg); border-color:var(--m4-bd)}
.btngrp button.active.m10,.btngrp button.active.yes{background:var(--m10-bg);box-shadow:0 0 0 3px rgba(39,160,96,.25);transform:scale(1.05)}
.btngrp button.active.m7 {background:var(--m7-bg); box-shadow:0 0 0 3px rgba(212,175,55,.25);transform:scale(1.05)}
.btngrp button.active.m4,.btngrp button.active.no{background:var(--m4-bg);box-shadow:0 0 0 3px rgba(200,80,80,.25);transform:scale(1.05)}
.btngrp button.active.na{background:var(--na-bg);box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.scoretotal{display:inline-flex;gap:10px;align-items:center;background:linear-gradient(180deg,rgba(224,184,74,.10),transparent);
  border:1px solid var(--gold-dim);border-radius:12px;padding:10px 18px;margin-top:8px}
.scoretotal b{color:var(--gold);font-size:1.5rem}

.toast{position:fixed;inset-block-end:24px;inset-inline-end:24px;background:var(--cta);color:#fff;
  padding:12px 20px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.4);opacity:0;
  transform:translateY(10px);transition:.25s;z-index:50}
.toast.show{opacity:1;transform:translateY(0)}

/* hierarchy tree */
.tree ul{list-style:none;margin:0;padding-inline-start:22px;border-inline-start:1px solid var(--line)}
.tree li{margin:5px 0}
.tree .node{display:inline-flex;gap:8px;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:5px 12px}
.tree .role{font-size:11px;color:var(--dim)}

@media print{
  .topbar,.devbar,.toolbar,.foot,.lang-toggle{display:none!important}
  body{background:#fff;color:#000}
  table.grid{background:#fff}
  table.grid th,table.grid td{border-color:#888}
  table.grid thead th{background:#eee;color:#000}
}