/* Layout: operations console — top bar, side rail of role-based sections, working canvas. Teal ink on a cool mineral ground; sand for time pressure. */
:root{
  --bg:#F2F5F4; --surface:#FFFFFF; --surface-2:#E9EEEC; --ink:#14201D; --muted:#56655F; --line:#D3DCD8;
  --accent:#0D6654; --accent-ink:#FFFFFF; --accent-soft:#DAEDE7; --sand:#8F6420; --sand-soft:#F4E9D6;
  --good:#1D7444; --good-soft:#DDF1E4; --warn:#9A5E00; --warn-soft:#F9EBCF; --bad:#B0281F; --bad-soft:#F8DEDB; --info:#2857A6; --info-soft:#DFE8F8;
  --shadow:0 1px 2px rgba(20,32,29,.06),0 4px 14px rgba(20,32,29,.06);
  --f-display:"Noto Kufi Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1513; --surface:#151F1C; --surface-2:#1C2825; --ink:#E4EDEA; --muted:#97A9A3; --line:#2A3834;
  --accent:#4DB59C; --accent-ink:#04201A; --accent-soft:#183A32; --sand:#D8A650; --sand-soft:#3A2E18;
  --good:#5BC489; --good-soft:#163A26; --warn:#E3A43A; --warn-soft:#3B2C11; --bad:#F0857C; --bad-soft:#40201D; --info:#82A9F0; --info-soft:#1C2A44;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1513; --surface:#151F1C; --surface-2:#1C2825; --ink:#E4EDEA; --muted:#97A9A3; --line:#2A3834;
  --accent:#4DB59C; --accent-ink:#04201A; --accent-soft:#183A32; --sand:#D8A650; --sand-soft:#3A2E18;
  --good:#5BC489; --good-soft:#163A26; --warn:#E3A43A; --warn-soft:#3B2C11; --bad:#F0857C; --bad-soft:#40201D; --info:#82A9F0; --info-soft:#1C2A44;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25); color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14.5px;line-height:1.6}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);line-height:1.35;margin:0;text-wrap:balance;font-weight:700}
h1{font-size:1.45rem} h2{font-size:1.12rem} h3{font-size:.98rem}
p{margin:0}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:.84rem}
.app{display:grid;grid-template-rows:auto 1fr;min-height:100%}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;margin-inline-end:auto;min-width:0}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:1.05rem;flex:none}
.brand b{font-family:var(--f-display);font-size:1.05rem;display:block;line-height:1.2}
.brand span{font-size:.76rem;color:var(--muted);display:block;line-height:1.3}
.who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.who label{font-size:.76rem;color:var(--muted)}
.who select{max-width:250px}
.chip-mode{font-size:.74rem;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--muted);white-space:nowrap}
.chip-mode.shared{color:var(--good);border-color:var(--good)}
.body{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:0}
.rail{background:var(--surface);border-inline-end:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.rail .grp{font-size:.72rem;letter-spacing:.06em;color:var(--muted);padding:12px 10px 4px;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:10px;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;text-align:start;width:100%;color:var(--ink)}
.nav:hover{background:var(--surface-2)}
.nav[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav .cnt{margin-inline-start:auto;font-size:.72rem;background:var(--surface-2);border-radius:999px;padding:0 7px;color:var(--muted)}
.nav .cnt.hot{background:var(--bad-soft);color:var(--bad)}
.nav svg{width:17px;height:17px;flex:none}
main{min-width:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 60px}
.wrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.head > div:first-child{margin-inline-end:auto;min-width:0}
.head p{color:var(--muted);margin-top:3px;max-width:70ch}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.card.pad0{padding:0}
.card h2,.card h3{margin-bottom:10px}
.grid{display:grid;gap:14px}
.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))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 13px;cursor:pointer;white-space:nowrap;line-height:1.4}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.btn.pri:hover{filter:brightness(1.07)}
.btn.bad{color:var(--bad);border-color:var(--bad)}
.btn.warn{color:var(--warn);border-color:var(--warn)}
.btn.ghost{border-color:transparent;background:none}
.btn.sm{padding:3px 9px;font-size:.82rem}
.btn svg{width:17px;height:17px;flex:none}
td.mono{white-space:nowrap}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.stack{display:flex;flex-direction:column;gap:10px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field > span{font-size:.82rem;color:var(--muted);font-weight:500}
.field > span b{color:var(--bad);font-weight:600}
input[type=text],input[type=number],input[type=date],input[type=datetime-local],input[type=search],select,textarea{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px;width:100%;min-width:0}
textarea{min-height:76px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.check{display:flex;gap:8px;align-items:center;cursor:pointer}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:1px 9px;font-size:.76rem;font-weight:600;white-space:nowrap;line-height:1.7}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-good{background:var(--good-soft);color:var(--good)} .p-bad{background:var(--bad-soft);color:var(--bad)}
.p-warn{background:var(--warn-soft);color:var(--warn)} .p-info{background:var(--info-soft);color:var(--info)}
.p-acc{background:var(--accent-soft);color:var(--accent)} .p-mute{background:var(--surface-2);color:var(--muted)}
.p-sand{background:var(--sand-soft);color:var(--sand)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.tab{border:0;background:none;padding:8px 12px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;display:flex;gap:6px;align-items:center}
.tab[aria-selected="true"]{color:var(--accent);border-color:var(--accent);font-weight:600}
.tab .cnt{font-size:.72rem;background:var(--surface-2);border-radius:999px;padding:0 7px}
.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th{font-size:.76rem;color:var(--muted);font-weight:600;text-align:start;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;letter-spacing:.02em}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr.click{cursor:pointer} tr.click:hover td{background:var(--surface-2)}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi .v{font-family:var(--f-display);font-size:1.6rem;font-variant-numeric:tabular-nums;line-height:1.25}
.kpi .l{font-size:.8rem;color:var(--muted)}
.kpi .s{font-size:.76rem}
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:10px;align-items:center}
.note{background:var(--info-soft);color:var(--ink);border-radius:8px;padding:10px 12px;font-size:.86rem;border-inline-start:3px solid var(--info)}
.note.warn{background:var(--warn-soft);border-color:var(--warn)}
.note.bad{background:var(--bad-soft);border-color:var(--bad)}
.note.good{background:var(--good-soft);border-color:var(--good)}
.kv{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr);gap:6px 14px;font-size:.9rem}
.kv dt{color:var(--muted)} .kv dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.steps{display:flex;gap:0;overflow-x:auto;padding-bottom:4px}
.step{flex:1 0 96px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:.76rem;color:var(--muted);position:relative;padding:0 4px}
.step i{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;font-style:normal;font-size:.72rem;z-index:1}
.step::after{content:"";position:absolute;top:11px;inset-inline-start:calc(50% + 12px);width:calc(100% - 24px);height:2px;background:var(--line)}
.step:last-child::after{display:none}
.step.done i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.step.done::after{background:var(--accent)}
.step.now i{border-color:var(--sand);color:var(--sand);box-shadow:0 0 0 4px var(--sand-soft)}
.step.now{color:var(--ink);font-weight:600}
.timeline{display:flex;flex-direction:column;gap:0}
.tl{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;padding-bottom:12px;position:relative}
.tl::before{content:"";position:absolute;inset-inline-start:6px;top:14px;bottom:0;width:1px;background:var(--line)}
.tl:last-child::before{display:none}
.tl i{width:13px;height:13px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);margin-top:5px}
.tl.ret i{border-color:var(--warn)} .tl.rej i{border-color:var(--bad)} .tl.esc i{border-color:var(--bad);background:var(--bad)}
.tl .when{font-size:.75rem;color:var(--muted)}
.sla{font-size:.78rem;font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.bar > b{display:block;height:100%;background:var(--accent);border-radius:999px}
.toast{position:fixed;inset-inline-start:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:8px;z-index:60;font-size:.88rem;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
[dir=rtl] .toast{transform:translateX(50%)}
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(440px,100%);background:var(--surface);border-inline-start:1px solid var(--line);z-index:50;display:flex;flex-direction:column;box-shadow:var(--shadow);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer header h2{margin-inline-end:auto}
.drawer .scroll{overflow-y:auto;padding:14px 16px;flex:1;display:flex;flex-direction:column;gap:12px}
.drawer footer{border-top:1px solid var(--line);padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.msg{white-space:pre-wrap;line-height:1.7;font-size:.92rem;border-radius:10px;padding:10px 12px}
.msg.me{background:var(--accent-soft);align-self:flex-start;max-width:90%}
.msg.ai{background:var(--surface-2)}
.canvas-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:
  radial-gradient(circle,var(--line) 1px,transparent 1.2px) 0 0/20px 20px,var(--surface);max-height:640px}
.canvas-wrap svg{display:block;touch-action:none}
.node-t{cursor:grab}
.node-t:active{cursor:grabbing}
.palette{display:flex;gap:6px;flex-wrap:wrap}
.pal{border:1px dashed var(--muted);border-radius:8px;padding:5px 10px;background:var(--surface);cursor:grab;font-size:.84rem;display:flex;gap:6px;align-items:center}
.ol-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) 34px;gap:6px;align-items:center}
.fb-field{border:1px solid var(--line);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.fb-field.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.offer{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.score{width:64px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}
.hbar{display:grid;grid-template-columns:minmax(90px,170px) minmax(0,1fr) 54px;gap:10px;align-items:center;font-size:.85rem;padding:3px 0}
.hbar .t{height:14px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.hbar .t b{display:block;height:100%;background:var(--muted);opacity:.55;border-radius:4px}
.hbar.hl .t b{background:var(--accent);opacity:1}
.hbar.bad .t b{background:var(--bad);opacity:.8}
.cols{display:flex;align-items:flex-end;gap:5px;height:120px;border-bottom:1px solid var(--line);padding-top:6px}
.cols div{flex:1;background:var(--accent);opacity:.75;border-radius:3px 3px 0 0;min-height:2px;position:relative}
.cols div:hover{opacity:1}
.cols-x{display:flex;gap:5px;font-size:.66rem;color:var(--muted)}
.cols-x span{flex:1;text-align:center;overflow:hidden;white-space:nowrap}
.foot{font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.hidden-sm{}
@media (max-width:980px){
  .split{grid-template-columns:minmax(0,1fr)}
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .body{grid-template-columns:minmax(0,1fr)}
  .rail{flex-direction:row;overflow-x:auto;border-inline-end:0;border-bottom:1px solid var(--line);padding:6px max(10px,env(safe-area-inset-right,0px)) 6px max(10px,env(safe-area-inset-left,0px));gap:4px}
  .rail .grp{display:none}
  .nav{width:auto;white-space:nowrap}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .who select{max-width:100%}
  .hidden-sm{display:none}
  .ol-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (prefers-reduced-motion:no-preference){.card,.btn,.nav{transition:border-color .15s,background .15s}}

.login{min-height:100%;display:grid;place-items:center;padding:24px}
.login .card{max-width:440px;width:100%;display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center}
.spin{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.dirty{color:var(--warn);font-size:.8rem}