:root{
  --bg:#f2efe8; --ink:#0f1e26; --ink-2:#4a5a61; --ink-3:#86949a; --card:#fff; --line:#e6e1d6; --soft:#f7f5f0; --soft-2:#efebe3;
  --accent:#0b9474; --accent-2:#14c08f; --accent-soft:#dff3ec; --on-accent:#fff; --saffron:#e8961e;
  --ok:#14915f; --ok-soft:#e1f4ea; --warn:#b86e00; --warn-soft:#fdf0d9; --bad:#cf3b36; --bad-soft:#fbe7e5; --info:#2c6fb6; --info-soft:#e4eef9; --mut:#6b7a80; --mut-soft:#eeebe4;
  --side:#0f1e26; --side-2:#17303a; --side-ink:#cfe0dc;
  --shadow:0 8px 28px rgba(15,30,38,.08),0 1px 3px rgba(15,30,38,.06);
  --font:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif; --display:"Readex Pro",var(--font);
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0a1115;--ink:#e6efed;--ink-2:#9db0ae;--ink-3:#6c8381;--card:#111b21;--line:#1f2d33;--soft:#16232a;--soft-2:#1b2a31;--accent:#2ee6a8;--accent-2:#2ee6a8;--accent-soft:#103a30;--on-accent:#05211a;--ok:#3fd68a;--ok-soft:#113226;--warn:#f3b44c;--warn-soft:#3a2c12;--bad:#ff6b6b;--bad-soft:#3d1a1e;--info:#7cb8ff;--info-soft:#13283f;--mut-soft:#1a262c;--side:#070d10;--side-2:#12222a;--shadow:0 10px 30px rgba(0,0,0,.4);color-scheme:dark}}
:root[data-theme=dark]{--bg:#0a1115;--ink:#e6efed;--ink-2:#9db0ae;--ink-3:#6c8381;--card:#111b21;--line:#1f2d33;--soft:#16232a;--soft-2:#1b2a31;--accent:#2ee6a8;--accent-2:#2ee6a8;--accent-soft:#103a30;--on-accent:#05211a;--ok:#3fd68a;--ok-soft:#113226;--warn:#f3b44c;--warn-soft:#3a2c12;--bad:#ff6b6b;--bad-soft:#3d1a1e;--info:#7cb8ff;--info-soft:#13283f;--mut-soft:#1a262c;--side:#070d10;--side-2:#12222a;--shadow:0 10px 30px rgba(0,0,0,.4);color-scheme:dark}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.55 var(--font)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--accent);text-decoration:none}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* shell */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:var(--side);color:var(--side-ink);padding:18px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px}
.brand b{font:700 20px/1 var(--display);color:#fff;letter-spacing:.3px}.brand span{font-size:12px;color:#86a39d;border-inline-start:1px solid #2a3f47;padding-inline-start:9px}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:var(--side-ink);font-weight:500}
.nav a svg{width:19px;height:19px;flex:none;opacity:.85}
.nav a:hover{background:var(--side-2)}
.nav a.on{background:var(--accent-2);color:#05211a;font-weight:700}.nav a.on svg{opacity:1}
.nav .grp{font-size:11px;color:#6f8a85;margin:14px 12px 4px;letter-spacing:.5px}
.nav .badge{margin-inline-start:auto;background:#24414a;color:#fff;border-radius:999px;font-size:11px;padding:1px 8px}
.nav a.on .badge{background:#05211a;color:#fff}
.side .me{margin-top:auto;border-top:1px solid #1f343c;padding:14px 10px 4px;display:flex;gap:10px;align-items:center;font-size:13px}
.side .me .av{width:34px;height:34px;border-radius:10px;background:var(--side-2);display:grid;place-items:center;color:#fff;font-weight:700}
.side .me small{display:block;color:#86a39d}
.main{min-width:0;padding:22px 28px 60px}
.top{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.top h1{font:700 22px/1.3 var(--display);margin:0}
.top .sub{color:var(--ink-3);font-size:13px}
.top .sp{flex:1}
.crumb{color:var(--ink-3);font-size:13px;margin-bottom:4px}.crumb a{color:var(--ink-3)}
/* controls */
.btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:11px;background:var(--accent);color:var(--on-accent);font-weight:600;white-space:nowrap}
.btn:hover{filter:brightness(1.05)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:var(--soft-2);color:var(--ink)}.btn.danger{background:var(--bad-soft);color:var(--bad)}.btn.sm{height:30px;padding:0 10px;font-size:13px;border-radius:9px}
.btn svg{width:16px;height:16px}
.in,select.in,textarea.in{height:38px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:0 11px;min-width:0;width:100%}
textarea.in{height:auto;min-height:70px;padding:8px 11px}
.in:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.field{display:grid;gap:5px}.field>span{font-size:12px;color:var(--ink-2);font-weight:600}.field small{color:var(--ink-3);font-size:11.5px}
.grid{display:grid;gap:12px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.card.pad{padding:18px}
.card h2{font:700 16px/1.4 var(--display);margin:0 0 12px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar .in{width:auto;min-width:160px}
.seg{display:inline-flex;background:var(--soft-2);border-radius:11px;padding:3px;gap:2px}
.seg button{height:32px;padding:0 12px;border-radius:9px;color:var(--ink-2);font-weight:600;font-size:13px}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
/* table */
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{font-size:12px;color:var(--ink-3);font-weight:600;text-align:start;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr.click{cursor:pointer}.tbl tbody tr.click:hover td{background:var(--soft)}
.tbl .muted{color:var(--ink-3);font-size:12.5px}
.tblwrap{overflow:auto}
.empty{padding:36px 20px;text-align:center;color:var(--ink-3)}
.empty b{display:block;color:var(--ink);font:600 15px var(--display);margin-bottom:4px}
/* pills */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--mut-soft);color:var(--mut)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.bad{background:var(--bad-soft);color:var(--bad)}.pill.info{background:var(--info-soft);color:var(--info)}.pill.acc{background:var(--accent-soft);color:var(--accent)}
/* kpi */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi{padding:14px 16px}.kpi .l{font-size:12px;color:var(--ink-3)}.kpi .v{font:700 26px/1.2 var(--display)}.kpi .s{font-size:12px;color:var(--ink-2)}
/* flow / timeline */
.flow{display:flex;gap:0;margin:4px 0 16px;overflow:auto}
.flow .st{flex:1;min-width:92px;position:relative;text-align:center;font-size:12px;color:var(--ink-3);padding-top:30px}
.flow .st::before{content:"";position:absolute;top:12px;inset-inline-start:-50%;inset-inline-end:50%;height:3px;background:var(--line)}
.flow .st:first-child::before{display:none}
.flow .st i{position:absolute;top:3px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--soft-2);border:3px solid var(--card);box-shadow:0 0 0 1px var(--line)}
.flow .st.done{color:var(--ink-2)}.flow .st.done i,.flow .st.done::before{background:var(--accent)}
.flow .st.cur{color:var(--ink);font-weight:700}.flow .st.cur i{background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.flow .st.cur::before{background:var(--accent)}
.flow .st.x i{background:var(--bad)}
.hist{display:grid;gap:0;margin:0;padding:0;list-style:none}
.hist li{display:grid;grid-template-columns:16px 1fr auto;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px}
.hist li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:6px}
.hist li small{color:var(--ink-3)}
/* detail layout */
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px}.kv dt{color:var(--ink-3)}.kv dd{margin:0;font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.note{background:var(--soft);border-radius:12px;padding:10px 12px;color:var(--ink-2);font-size:13px}
.note.warn{background:var(--warn-soft);color:var(--warn)}.note.bad{background:var(--bad-soft);color:var(--bad)}.note.ok{background:var(--ok-soft);color:var(--ok)}
.bar{height:6px;border-radius:3px;background:var(--soft-2);overflow:hidden}.bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
/* modal */
.modal{position:fixed;inset:0;background:rgba(6,14,18,.45);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:50;padding:16px}
.modal .box{width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px}
.modal .box.wide{width:min(900px,100%)}
.modal h3{font:700 18px var(--display);margin:0 0 4px}.modal .lead{color:var(--ink-2);margin:0 0 14px;font-size:13px}
.modal .foot{display:flex;gap:8px;justify-content:flex-start;margin-top:16px}
.lines{display:grid;gap:8px}.lines .row{display:grid;grid-template-columns:2fr 1fr 1fr 34px;gap:8px;align-items:center}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:12px;z-index:90;box-shadow:var(--shadow);font-weight:600;max-width:min(560px,92vw)}
#toast.bad{background:var(--bad);color:#fff}
/* tasks (floor) */
.taskgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.task{padding:16px;display:grid;gap:10px}
.task .k{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
.task .what{font:700 16px var(--display)}
.task .route{display:flex;align-items:center;gap:10px;font:700 20px var(--display)}
.task .route span{background:var(--soft-2);border-radius:10px;padding:4px 10px}
.task .route .to{background:var(--accent-soft);color:var(--accent)}
.alert{display:grid;grid-template-columns:10px 1fr;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}
.alert::before{content:"";width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--info)}
.alert.warn::before{background:var(--warn)}.alert.bad::before{background:var(--bad)}
.alert b{display:block}.alert span{color:var(--ink-2);font-size:13px}
/* login */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login .art{background:radial-gradient(1200px 600px at 80% -10%,#1b4a44 0,transparent 60%),linear-gradient(160deg,#0f1e26,#0a1418);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.login .art h1{font:700 40px/1.25 var(--display);margin:0 0 12px;max-width:520px}.login .art p{color:#a9c2bc;max-width:480px}
.login .art ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px;color:#cfe0dc}
.login .art li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#14c08f;margin-inline-end:10px}
.login form{align-self:center;justify-self:center;width:min(380px,90vw);display:grid;gap:14px}
.login form h2{font:700 24px var(--display);margin:0}
.mobile-top{display:none}
@media (max-width:980px){
  .shell{grid-template-columns:1fr}.side{position:fixed;inset:0 0 0 auto;width:270px;z-index:60;transform:translateX(100%);transition:transform .2s}.side.open{transform:none}
  .mobile-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--side);color:#fff;position:sticky;top:0;z-index:40}
  .main{padding:16px 14px 80px}.split{grid-template-columns:1fr}.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login{grid-template-columns:1fr}.login .art{display:none}
  .tbl .hide-m{display:none}
}
@media (max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}.lines .row{grid-template-columns:1fr 1fr 34px}.lines .row .in:first-child{grid-column:1/-1}}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}