:root{
  --bg:#f2f5f4; --card:#ffffff; --ink:#14232b; --sub:#5b6b74; --line:#dde5e7; --line2:#eef2f3;
  --accent:#15706b; --accent2:#0e514d; --accent-soft:#dff0ee; --accent-ink:#ffffff;
  --gold:#c4872a; --gold-soft:#fbf1dc;
  --ok:#2b8250; --ok-soft:#e1f2e8; --warn:#a56706; --warn-soft:#fbf0d9; --danger:#c0392b; --danger-soft:#fbe5e2; --next:#6c53bd;
  --r:14px; --shadow:0 1px 2px rgba(15,35,43,.05),0 8px 24px rgba(15,35,43,.05);
  --serif:Georgia,"Noto Serif","Times New Roman",serif;
  --c0:#dbeaf3; --c1:#f6e4d6; --c2:#dff1e2; --c3:#f6f0cf; --c4:#ecdcef; --c5:#e1dff3;
  --c6:#d6f0ea; --c7:#f3dce7; --c8:#e0e8f5; --c9:#f4eaD4; --c10:#d8e9f3; --c11:#e9e0f4;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1519; --card:#182026; --ink:#e7edf0; --sub:#9aa9b2; --line:#2a353d; --line2:#212b32;
    --accent:#58b8b1; --accent2:#7fd0c9; --accent-soft:#1c3638; --accent-ink:#0b1a19;
    --gold:#e0a94c; --gold-soft:#3a2f18;
    --ok:#5fc48c; --ok-soft:#1d3527; --warn:#e2ab4f; --warn-soft:#3a2f18; --danger:#f0806f; --danger-soft:#3d2320; --next:#a590f2;
    --shadow:none;
    --c0:#233644; --c1:#43342b; --c2:#27402e; --c3:#40391f; --c4:#3a2c40; --c5:#2e2d4a;
    --c6:#21403b; --c7:#432c39; --c8:#2a3448; --c9:#463e29; --c10:#243c4b; --c11:#392e4d;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1519; --card:#182026; --ink:#e7edf0; --sub:#9aa9b2; --line:#2a353d; --line2:#212b32;
  --accent:#58b8b1; --accent2:#7fd0c9; --accent-soft:#1c3638; --accent-ink:#0b1a19;
  --gold:#e0a94c; --gold-soft:#3a2f18;
  --ok:#5fc48c; --ok-soft:#1d3527; --warn:#e2ab4f; --warn-soft:#3a2f18; --danger:#f0806f; --danger-soft:#3d2320; --next:#a590f2;
  --shadow:none;
  --c0:#233644; --c1:#43342b; --c2:#27402e; --c3:#40391f; --c4:#3a2c40; --c5:#2e2d4a;
  --c6:#21403b; --c7:#432c39; --c8:#2a3448; --c9:#463e29; --c10:#243c4b; --c11:#392e4d;
}
*{box-sizing:border-box}
html{scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Arabic",Arial,sans-serif;font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%}
h1,h2,h3,h4,h5{margin:0;line-height:1.25}
h3{font-size:1rem;font-weight:650}
b{font-weight:650}
small{font-size:.78rem}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- app bar ---------- */
.appbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top,0px));background:var(--card);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.brand b{display:block;font-family:var(--serif);font-size:1.05rem;letter-spacing:.01em;white-space:nowrap}
.brand small{display:block;color:var(--sub);font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:1.05rem;cursor:pointer;flex-shrink:0;padding:0}
.menu{display:none}
.pillstat{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:5px 12px;font-size:.78rem;cursor:pointer;white-space:nowrap}
.pillstat.ok{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.pillstat.bad{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:transparent}
.progress i{display:block;height:100%;background:var(--accent);transition:width .25s}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:268px minmax(0,1fr);gap:20px;max-width:1320px;margin:0 auto;padding:16px 16px 28px}
.side{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 92px);overflow-y:auto}
.side .box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px;box-shadow:var(--shadow)}
.sidelink{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:10px;cursor:pointer;width:100%;text-align:start;background:none;border:0;color:var(--ink);font-size:.9rem}
.sidelink:hover{background:var(--bg)}
.sidelink .ic{width:30px;height:30px;border-radius:9px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;position:relative}
.sidelink .tx b{display:block;font-weight:600;line-height:1.2}
.sidelink .tx small{color:var(--sub);font-size:.7rem;line-height:1.2;display:block}
.sidelink.current{background:var(--accent-soft)}
.sidelink.current .ic{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sidelink.done .ic::after{content:'✓';position:absolute;inset-inline-end:-4px;bottom:-4px;width:15px;height:15px;border-radius:50%;background:var(--ok);color:#fff;font-size:.6rem;display:flex;align-items:center;justify-content:center}
.sidefoot{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.sidefoot .mini{font-size:.76rem;color:var(--sub);line-height:1.45}
.overlay{display:none;position:fixed;inset:0;background:rgba(8,16,20,.5);z-index:55}
.overlay.open{display:block}
.main{min-width:0}
.page{display:none}
.page.active{display:block;animation:fadein .18s ease}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.phead{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.pico{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--accent-soft),var(--card));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.phead h2{font-family:var(--serif);font-size:1.4rem;font-weight:700}
.phead p{margin:2px 0 0;color:var(--sub);font-size:.86rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.card>h3:first-child,.cardhead h3{margin-bottom:8px}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cardhead h3{margin:0}
.hint{color:var(--sub);font-size:.84rem;margin:2px 0 12px}
footer{text-align:center;color:var(--sub);font-size:.74rem;padding:4px 14px 26px;max-width:760px;margin:0 auto}
.pagenav{display:flex;align-items:center;gap:10px;margin:6px 0 4px}
.pagenav .btn{flex:1}
.pagenav .cur{display:none;flex:1.2;text-align:center;font-size:.76rem;color:var(--sub);line-height:1.25}
.pagenav .cur b{display:block;color:var(--ink);font-size:.86rem}

/* ---------- controls ---------- */
select,input[type=text],input[type=number]{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);max-width:100%}
.btn{font:inherit;font-weight:600;padding:9px 16px;border:1px solid transparent;border-radius:11px;background:var(--accent);color:var(--accent-ink);cursor:pointer;transition:transform .05s,filter .1s}
.btn:hover{filter:brightness(1.07)}.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.sm{padding:5px 11px;font-size:.8rem;border-radius:9px}
.btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.formrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:10px 0 2px}
.formrow label{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.88rem}
.msg{margin-top:10px;padding:9px 12px;border-radius:10px;font-size:.86rem}
.msg.err{background:var(--danger-soft);color:var(--danger)}
.msg.ok{background:var(--ok-soft);color:var(--ok)}
.msg.warn{background:var(--warn-soft);color:var(--warn)}
.note{border-inline-start:4px solid var(--accent);background:var(--bg);padding:8px 12px;border-radius:9px;margin:6px 0;font-size:.85rem}
.note.ok{border-color:var(--ok)}.note.warn{border-color:var(--warn)}.note.danger{border-color:var(--danger)}.note.next{border-color:var(--next)}.note.sameday{border-color:var(--warn)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--bg)}
.seg button{border:0;background:transparent;color:var(--sub);padding:7px 14px;font-size:.84rem;cursor:pointer;font-weight:600}
.seg button.on{background:var(--accent);color:var(--accent-ink)}

/* ---------- profile ---------- */
.gpatiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gpa{border:1.5px solid var(--line);background:var(--bg);border-radius:13px;padding:12px 8px;text-align:center;cursor:pointer;color:var(--ink);transition:border-color .1s}
.gpa b{display:block;font-size:1.05rem}
.gpa small{color:var(--sub)}
.gpa .cap{display:block;margin-top:4px;font-size:1.35rem;font-weight:750;font-family:var(--serif);color:var(--accent)}
.gpa.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)}
.semgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.semcol{border-radius:12px;padding:10px 12px}
.semcol .sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.semcol h4{font-size:.76rem;opacity:.8;text-transform:uppercase;letter-spacing:.05em}
.semcol .all{background:none;border:0;color:var(--accent2);font-size:.7rem;cursor:pointer;text-decoration:underline;padding:0}
.semcol label{display:flex;gap:7px;font-size:.8rem;margin:4px 0;cursor:pointer;align-items:flex-start;line-height:1.3}
.semcol input{margin-top:2px}
.pbar{height:8px;border-radius:6px;background:var(--line);overflow:hidden;min-width:120px}
.pbar i{display:block;height:100%;background:var(--ok);border-radius:6px}

/* ---------- section 2: gauge, map, list ---------- */
.gaugebox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.gauge{width:100%;height:auto;display:block}
.gauge text{font-family:inherit;fill:var(--sub);font-size:11px}
.gauge .gt{fill:var(--ink);font-weight:700;font-size:13px}
.gz-low{fill:var(--warn-soft)}.gz-ok{fill:var(--ok-soft)}
.gf-ok{fill:var(--accent)}.gf-warn{fill:var(--gold)}.gf-bad{fill:var(--danger)}
.gstats{display:flex;gap:8px}
.gstat{background:var(--bg);border-radius:11px;padding:6px 12px;text-align:center;min-width:76px}
.gstat b{display:block;font-size:1.2rem;font-family:var(--serif)}
.gstat small{color:var(--sub);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em}
.legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:.74rem;color:var(--sub);margin:4px 0 10px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:14px;height:14px;border-radius:5px;border:1.5px solid var(--line);display:inline-block}
.mapScroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:12px}
.mapInner{position:relative;min-width:1240px}
.mapInner svg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.mapInner path{fill:none;stroke-width:1.5;transition:opacity .12s}
.mapInner path.e-done{stroke:var(--ok);opacity:.55}
.mapInner path.e-chosen{stroke:var(--accent);stroke-dasharray:4 3;opacity:.8}
.mapInner path.e-wait{stroke:var(--sub);opacity:.28}
.mapCols{position:relative;display:grid;grid-template-columns:repeat(9,1fr);gap:28px}
.mcol h5{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--sub);text-align:center;margin-bottom:8px}
.mnode{display:block;width:100%;text-align:start;border-radius:10px;border:1.5px solid var(--line);background:var(--card);padding:5px 8px;margin-bottom:9px;font-size:.7rem;line-height:1.2;color:var(--ink);cursor:pointer;position:relative;min-height:44px}
.mnode b{display:block;font-size:.62rem;color:var(--sub);font-weight:650;padding-inline-end:16px;word-break:break-all}
.mnode span{display:block;font-weight:600;margin-top:1px}
.mnode i{position:absolute;inset-inline-end:6px;top:4px;font-style:normal;font-size:.7rem}
.mnode:hover{box-shadow:0 2px 8px rgba(15,35,43,.15)}
.st-passed{background:var(--ok-soft);border-color:var(--ok)}
.st-chosen{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.st-chosen b{color:inherit;opacity:.85}
.st-open{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.st-blocked{border-style:dashed;border-color:var(--danger);opacity:.8}
.st-locked{opacity:.5;background:var(--bg);cursor:not-allowed}
.st-na{opacity:.4;background:var(--bg);border-style:dotted}
.mapInner.hl .mnode:not(.rel){opacity:.28}
.mapInner.hl path:not(.rel){opacity:.06}
.mapInner.hl path.rel{opacity:1;stroke-width:2.2}
.lg-passed{background:var(--ok-soft);border-color:var(--ok)!important}.lg-chosen{background:var(--accent);border-color:var(--accent)!important}
.lg-open{border-color:var(--accent)!important}.lg-blocked{border-style:dashed!important;border-color:var(--danger)!important}.lg-locked{background:var(--bg)}
.rec-head{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sub);margin:16px 0 4px}
.rec{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:9px 11px;margin:5px 0;cursor:pointer}
.rec.off{opacity:.62;cursor:not-allowed}
.rec input{margin-top:4px;width:17px;height:17px;flex-shrink:0}
.rec small{display:block;color:var(--sub)}
.rec .why{color:var(--danger)}.rec .mid{color:var(--warn)}
.tag{display:inline-block;font-size:.64rem;padding:1px 8px;border-radius:9px;background:var(--accent);color:var(--accent-ink);margin-inline-start:6px;vertical-align:1px}
.chip{display:inline-block;font-style:normal;font-size:.66rem;padding:0 7px;border-radius:8px;border:1px solid var(--line);margin:2px 3px 0 0;background:var(--card)}
.chip.ok{border-color:var(--ok);color:var(--ok)}.chip.no{border-color:var(--danger);color:var(--danger)}

/* ---------- health ---------- */
.verdict{border-radius:12px;padding:11px 14px;font-size:.88rem;margin:6px 0 12px}
.verdict.ok{background:var(--ok-soft);color:var(--ok)}
.verdict.bad{background:var(--danger-soft);color:var(--danger)}
.verdict ul{margin:6px 0 0;padding-inline-start:18px;color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px}
.tile{border:1px solid var(--line);border-top:4px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--card)}
.tile.ok{border-top-color:var(--ok)}.tile.warn{border-top-color:var(--warn)}.tile.bad{border-top-color:var(--danger)}.tile.info{border-top-color:var(--accent)}
.tile small{display:block;color:var(--sub);text-transform:uppercase;letter-spacing:.05em;font-size:.64rem}
.tile b{font-size:1.2rem;display:block;line-height:1.3;font-family:var(--serif)}
.tile em{font-style:normal;color:var(--sub);font-size:.72rem;display:block}
.opt{border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin:9px 0;background:var(--bg)}
.opt.best{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.opt .oh{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.opt small{color:var(--sub)}
.mp{display:flex;gap:7px;margin:8px 0;flex-wrap:wrap}
.mpday{text-align:center;font-size:.62rem;color:var(--sub)}
.mpcells{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.mpcells i{width:24px;height:7px;border-radius:2px;background:var(--line)}
.mpcells i.on{background:var(--accent)}
.conflict-item{border-inline-start:4px solid var(--danger);background:var(--danger-soft);padding:8px 12px;border-radius:9px;margin:6px 0;font-size:.84rem}
table{width:100%;border-collapse:collapse;font-size:.78rem}
th,td{border:1px solid var(--line);padding:5px;text-align:center;vertical-align:top}
th{background:var(--bg);font-weight:650}
table.opttable{font-size:.82rem}
table.opttable td{text-align:start}
table.opttable td:nth-child(2){text-align:center;white-space:nowrap}
.tablewrap{overflow-x:auto;border-radius:10px}

/* ---------- weekly grid ---------- */
.pill{display:block;border-radius:8px;padding:4px 7px;margin:2px 0;font-size:.72rem;line-height:1.3;text-align:start;color:var(--ink);width:100%;border:0}
button.pill{cursor:pointer}button.pill:hover{filter:brightness(.95)}
td.slot{min-width:94px}
th.off{opacity:.55}
td.hl-danger{outline:4px solid var(--danger);outline-offset:-4px;background:var(--danger-soft)}
td.hl-sameday{outline:4px solid var(--warn);outline-offset:-4px;background:var(--warn-soft)}
td.hl-next{outline:2px dashed var(--next);outline-offset:-2px}
th.hl-warn{outline:2px solid var(--warn);outline-offset:-2px}
.exam th:first-child{position:sticky;inset-inline-start:0;z-index:1}
.agenda{display:none}
.aday{margin:10px 0}
.aday h4{font-size:.85rem;display:flex;justify-content:space-between;margin-bottom:4px}
.aday h4 span{color:var(--sub);font-weight:400}
.acard{display:flex;gap:10px;align-items:center;width:100%;text-align:start;border:0;border-radius:11px;padding:9px 11px;margin:4px 0;font-size:.84rem;color:var(--ink);cursor:pointer}
.acard .tm{font-size:.72rem;color:var(--sub);min-width:70px}
.acard .ch{margin-inline-start:auto;color:var(--sub);font-size:1.1rem}

/* ---------- swap sheet ---------- */
.sheet{position:fixed;z-index:70;left:0;right:0;bottom:0;max-height:84vh;background:var(--card);border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.25);transform:translateY(105%);transition:transform .22s;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px);visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.sheetHead{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px 8px}
.sheetBody{overflow-y:auto;padding:0 16px 16px}
.gopt{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0}
.gopt.cur{border-color:var(--accent);background:var(--accent-soft)}
.gopt.no{opacity:.65}
.gopt .gh{display:flex;justify-content:space-between;gap:8px;align-items:center}
.gopt .times{font-size:.8rem;color:var(--sub);margin:3px 0}
.gopt .bad{color:var(--danger);font-size:.8rem}

/* ---------- section 7: graduation ---------- */
.gradhead{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center}
.ring{width:150px;height:150px}
.ring text{font-family:var(--serif)}
.ringtxt{fill:var(--ink);font-size:25px;font-weight:700}
.ringsub{fill:var(--sub);font-size:9.5px;font-family:system-ui,sans-serif}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.fact{background:var(--bg);border-radius:12px;padding:9px 12px}
.fact small{display:block;color:var(--sub);text-transform:uppercase;font-size:.64rem;letter-spacing:.05em}
.fact b{font-family:var(--serif);font-size:1.15rem;display:block;line-height:1.3}
.fact em{font-style:normal;font-size:.72rem;color:var(--sub)}
.rlegend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:.74rem;color:var(--sub);margin-top:10px}
.rlegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:4px 2px;margin:8px 0 2px}
.cn{background:var(--gold-soft);border:1px solid var(--gold);border-radius:9px;padding:3px 9px;font-size:.74rem;line-height:1.25}
.cn small{display:block;color:var(--sub);font-size:.62rem}
.ca{color:var(--gold);font-size:1.1rem;padding:0 2px}
.board{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x proximity}
.sem{flex:0 0 236px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:12px;scroll-snap-align:start;position:relative}
.sem+.sem::before{content:'›';position:absolute;inset-inline-start:-13px;top:20px;color:var(--sub);font-size:1.3rem}
.sem.now{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sem.fin{border-color:var(--ok);background:linear-gradient(180deg,var(--ok-soft),var(--card) 90px)}
.sem .sh{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;margin-bottom:6px}
.sem .sh b{font-family:var(--serif);font-size:1rem;display:block;line-height:1.2}
.sem .sh small{color:var(--sub)}
.stag{font-size:.62rem;padding:2px 8px;border-radius:9px;background:var(--accent);color:var(--accent-ink);white-space:nowrap}
.stag.sg{background:var(--gold)}.stag.fn{background:var(--ok)}
.ubar{height:9px;border-radius:6px;background:var(--line);position:relative;margin:6px 0 2px;overflow:visible}
.ubar i{display:block;height:100%;border-radius:6px;background:var(--accent)}
.ubar i.low{background:var(--gold)}.ubar i.over{background:var(--danger)}
.ubar u{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink);opacity:.45}
.uline{display:flex;justify-content:space-between;font-size:.7rem;color:var(--sub)}
.cc{display:block;border-radius:8px;padding:4px 8px;margin:4px 0;font-size:.74rem;line-height:1.25;border-inline-start:4px solid var(--line);background:var(--bg)}
.cc small{display:block;color:var(--sub);font-size:.64rem}
.cc.crit{border-inline-start-color:var(--gold);background:var(--gold-soft)}
.cc.gen{border-inline-start-color:var(--sub)}
.cc.proj{border-inline-start-color:var(--ok);background:var(--ok-soft)}
.cc.core{border-inline-start-color:var(--accent)}
.rb{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.rb span{font-size:.64rem;border-radius:8px;padding:1px 7px;background:var(--ok-soft);color:var(--ok)}
.rb span.w{background:var(--warn-soft);color:var(--warn)}.rb span.b{background:var(--danger-soft);color:var(--danger)}

/* ---------- section 8: notes ---------- */
.ready{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin-bottom:6px}
.rd{text-align:center;border:1px solid var(--line);border-radius:13px;padding:10px 6px;background:var(--bg)}
.rd .rdi{width:34px;height:34px;border-radius:50%;margin:0 auto 5px;display:flex;align-items:center;justify-content:center;font-size:1rem;background:var(--line);color:var(--sub)}
.rd.ok .rdi{background:var(--ok);color:#fff}.rd.no .rdi{background:var(--danger);color:#fff}
.rd small{display:block;line-height:1.25;font-size:.74rem}
.ngrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin-top:10px}
.ncard{display:flex;gap:12px;border:1px solid var(--line);border-radius:13px;padding:11px 13px;background:var(--card);font-size:.88rem;line-height:1.5}
.ncard .ni{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.05rem;background:var(--accent-soft)}
.ncard.act{border-color:var(--warn);background:var(--warn-soft)}.ncard.act .ni{background:var(--warn);color:#fff}
.ncard.rule .ni{background:var(--gold-soft)}
.ncard small{display:block;text-transform:uppercase;letter-spacing:.05em;font-size:.6rem;color:var(--sub);margin-bottom:1px}

/* ---------- section 9: print options ---------- */
.chks{display:flex;flex-wrap:wrap;gap:8px 10px;margin:8px 0}
.chks label{display:flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:6px 11px;font-size:.84rem;cursor:pointer;background:var(--bg)}
.chks label.on{border-color:var(--accent);background:var(--accent-soft)}
.presets{display:flex;gap:8px;flex-wrap:wrap}
.paper{background:#fff;color:#111;border:1px solid var(--line);border-radius:6px;padding:14px 16px;box-shadow:0 2px 14px rgba(0,0,0,.12);overflow-x:auto}

/* print document (used for preview and for the printed page) */
.pr{font-family:Arial,Helvetica,sans-serif;color:#111;font-size:12px;line-height:1.35}
.pr.small{font-size:10px}
.pr-head{display:flex;justify-content:space-between;gap:12px;border-bottom:2px solid #111;padding-bottom:5px;margin-bottom:6px}
.pr-head b{font-size:1.25em}
.pr-head div:last-child{text-align:end}
.pr-body.cols2{column-count:2;column-gap:14px}
.pr-sec{margin:0 0 7px;break-inside:avoid}
.pr-sec h3{font-size:1.05em;margin:0 0 3px;padding:1px 0;border-bottom:1px solid #999;font-weight:700;color:#111}
.pr table{font-size:.92em;color:#111}
.pr th,.pr td{border:1px solid #999;padding:2px 4px;text-align:start;background:#fff;color:#111}
.pr th{background:#eee}
.pr td.c,.pr th.c{text-align:center}
.pr ul{margin:2px 0;padding-inline-start:16px}
.pr li{margin:1px 0}
.pr .pl{margin:1px 0}
.pr.bw *{background:#fff!important;color:#000!important}
.pr .warn{font-weight:700}
#printRoot{display:none}

/* ---------- responsive ---------- */
@media (max-width:899px){
  .app{display:block;padding:10px 10px 90px}
  .menu{display:block}
  .side{position:fixed;top:0;left:0;bottom:0;width:290px;max-width:84vw;z-index:60;max-height:none;background:var(--card);transform:translateX(-102%);transition:transform .2s;padding:calc(14px + env(safe-area-inset-top,0px)) 10px 14px;border-right:1px solid var(--line);visibility:hidden}
  .side.open{transform:none;visibility:visible}
  .side .box{border:0;box-shadow:none;padding:0}
  .brand small{display:none}
  .pagenav{position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--card);border-top:1px solid var(--line);margin:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))}
  .pagenav .cur{display:block}
  .pagenav .btn{flex:1;padding:10px 6px}
  footer{padding-bottom:70px}
}
@media (max-width:699px){
  body{font-size:14px}
  .card{padding:13px}
  .phead h2{font-size:1.2rem}
  .pico{width:40px;height:40px;font-size:1.2rem}
  .gpatiles{grid-template-columns:1fr 1fr}
  .semgrid{grid-template-columns:1fr 1fr;gap:7px}
  .semcol{padding:8px 9px}
  .tiles{grid-template-columns:1fr 1fr}
  .agenda{display:block}.gridwrap{display:none}
  .gaugebox{grid-template-columns:1fr}
  .gradhead{grid-template-columns:1fr;justify-items:center}
  .facts{width:100%}
  .pillstat{padding:4px 9px;font-size:.72rem}
  .formrow label{width:100%}
  select{width:100%}
}
@media (min-width:700px){.sheet{left:50%;right:auto;bottom:auto;top:10vh;width:520px;max-width:92vw;margin-left:-260px;border-radius:18px;transform:translateY(20px);opacity:0}.sheet.open{transform:none;opacity:1}}

/* ---------- print ---------- */
@page{size:A4;margin:9mm}
@media print{
  html,body{background:#fff!important}
  body>*:not(#printRoot){display:none!important}
  #printRoot{display:block!important}
  .pr-sec{break-inside:avoid}
}

/* ---------- Arabic / RTL ---------- */
html[dir=rtl] body{font-family:"Segoe UI",Tahoma,"Noto Sans Arabic","Noto Naskh Arabic",Arial,sans-serif;line-height:1.65}
html[dir=rtl]{--serif:"Noto Naskh Arabic","Traditional Arabic","Segoe UI",Tahoma,serif}
html[dir=rtl] .phead h2,html[dir=rtl] .brand b{font-weight:700}
html[dir=rtl] .pr{font-family:Tahoma,"Segoe UI","Noto Sans Arabic",Arial,sans-serif}
html[dir=rtl] .sem+.sem::before{content:'‹'}
html[dir=rtl] .ca{display:inline-block;transform:scaleX(-1)}
html[dir=rtl] .gauge,html[dir=rtl] .ring{direction:ltr}
html[dir=rtl] .mapInner{direction:ltr}
html[dir=rtl] .mnode{direction:rtl}
html[dir=rtl] .mpcells,html[dir=rtl] .mp{direction:ltr}
html[dir=rtl] .semcol .all{margin-inline-start:6px}
.pr[dir=rtl] .pr-head{flex-direction:row}
.langbtn{font-weight:700}
@media (max-width:899px){
  html[dir=rtl] .side{left:auto;right:0;transform:translateX(102%);border-right:0;border-left:1px solid var(--line)}
  html[dir=rtl] .side.open{transform:none}
}

/* ---------- Step 5: compare ---------- */
.clist{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.crow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 36px;gap:8px 10px;align-items:center;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.crow .cn1{font-size:.88rem;min-width:0}.crow .cn1 small{display:block;color:var(--sub);font-size:.72rem}
.crow select{width:100%;font-size:.82rem}.crow .iconbtn{width:34px;height:34px;font-size:.8rem}
.nog{font-size:.8rem;color:var(--sub)}
.hint.empty{padding:14px;text-align:center;border:1.5px dashed var(--line);border-radius:12px;margin:0}
.cadd{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:8px}
.cadd select{width:100%}
.cacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badt{color:var(--danger)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.cp{padding:4px 11px;border-radius:999px;font-size:.78rem;font-weight:650;border:1px solid var(--line)}
.cp.same{background:var(--bg);color:var(--sub)}.cp.chg{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.cp.add{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}.cp.drp{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.planseg{display:flex;flex-wrap:wrap;max-width:100%}.planseg button{flex:1 1 auto}
.movesheet{display:flex;flex-direction:column;gap:7px}
.mv-head{display:grid;grid-template-columns:34px minmax(0,1.2fr) minmax(0,1fr) 22px minmax(0,1fr) 128px;gap:10px;font-size:.68rem;color:var(--sub);font-weight:700;letter-spacing:.04em;padding:0 11px}
.mv{display:grid;grid-template-columns:34px minmax(0,1.2fr) minmax(0,1fr) 22px minmax(0,1fr) 128px;gap:10px;align-items:center;padding:10px 11px;border-radius:12px;border:1px solid var(--line);background:var(--bg);border-inline-start-width:5px}
.mv.change{border-inline-start-color:var(--warn)}.mv.add{border-inline-start-color:var(--ok)}.mv.drop{border-inline-start-color:var(--danger)}.mv.keep{opacity:.78;border-inline-start-color:var(--line)}
.mv.warn{outline:1.5px solid var(--warn)}
.mv .n{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.mv.keep .n{background:var(--ok-soft);color:var(--ok)}
.mv .mc{font-size:.88rem;min-width:0}.mv .mc small,.mcell small,.act small{display:block;color:var(--sub);font-size:.7rem}
.mcell{font-size:.84rem;min-width:0}.mcell small{letter-spacing:.04em;font-weight:700;display:none}.mcell span{display:block;color:var(--sub);font-size:.76rem}.mcell em{color:var(--sub);font-size:.78rem}
.mv .arr{color:var(--sub);text-align:center;font-weight:700}
.act{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.tp{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.04em;padding:2px 9px;border-radius:6px}
.tp.change{background:var(--warn-soft);color:var(--warn)}.tp.add{background:var(--ok-soft);color:var(--ok)}.tp.drop{background:var(--danger-soft);color:var(--danger)}.tp.keep{background:var(--bg);color:var(--sub);border:1px solid var(--line)}
.outcome{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.oc{font-size:.8rem;padding:5px 11px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.oc.up{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}.oc.dn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
details.wk summary{cursor:pointer;list-style:none}details.wk summary::-webkit-details-marker{display:none}
details.wk summary::before{content:'▸ ';color:var(--accent)}details.wk[open] summary::before{content:'▾ '}
.dp{display:block;border-radius:8px;padding:4px 7px;font-size:.74rem;line-height:1.3;margin:2px 0;border:1.5px solid transparent}
.dp.new{background:var(--ok-soft);border-color:var(--ok);color:var(--ink)}
.dp.out{background:var(--danger-soft);border-color:var(--danger);border-style:dashed;text-decoration:line-through;text-decoration-color:var(--danger);color:var(--ink)}
.dpl.same{background:var(--line)}.dpl.new{background:var(--ok-soft);border-color:var(--ok)}.dpl.out{background:var(--danger-soft);border-color:var(--danger);border-style:dashed}
@media (max-width:699px){
 .crow{grid-template-columns:minmax(0,1fr) 36px}.crow select,.crow .nog{grid-column:1/2}.crow .cn1{grid-column:1/2}.crow .iconbtn{grid-column:2;grid-row:1}
 .cadd{grid-template-columns:1fr auto}.cadd #cmpAdd{grid-column:1/-1}
 .mv-head{display:none}
 .mv{grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"n mc act" "now now now" "to to to";row-gap:8px}
 .mv .n{grid-area:n}.mv .mc{grid-area:mc}.mv .act{grid-area:act;align-items:flex-end}.mv .arr{display:none}
 .mv .mcell{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.mv .mcell small{display:block;min-width:44px}
 .mv .mcell.now{grid-area:now}.mv .mcell.to{grid-area:to}
 .mv.keep .mcell.to{display:none}
}

.pr-foot{margin-top:8px;padding-top:4px;border-top:1px solid #999;font-size:.8em;color:#333;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ===== PHP edition additions ===== */
a.sidelink,a.pillstat,a.btn{text-decoration:none}
a.pillstat{display:inline-block}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}
a.btn.dis{opacity:.45;pointer-events:none}
form.chrome{display:contents}
.rec{position:relative}
.rec input{pointer-events:none}
.rowbtn{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;background:none;z-index:2}
.rec.off .rowbtn{display:none}
.mnode{font:inherit}
.formrow button{align-self:flex-end}
.chks label,.semcol label{cursor:pointer}
.jsonly{display:none}
html.js .jsonly-hide{display:none}
.gridwrap button.pill,.agenda button.acard{font:inherit;border:0;cursor:pointer;text-align:start;color:inherit;width:100%}
.dp{display:block}
.empty{padding:8px 2px}
select,input[type=text],input[type=number]{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:6px 8px}
.cadd select{flex:1;min-width:0}
.clist .crow select{width:100%}