:root {
  --bg: #0f0f0f;
  --panel: #151515;
  --line: #2c2c2c;
  --line-strong: #3a3a3a;
  --text: #f2f2f2;
  --muted: #a3a3a3;
  --accent: #c9a96b;
  --danger: #f08a8a;
  --ok: #8fd19e;
  --radius: 14px;
  --field: #0c0c0c; --field2: #151515; --hover: #1a1a1a; --sunken: #101010;
  --bubble-me: #232323; --row-line: #232323; --mine: #3a1215; --amber: #f0c674;
  --ai-text: #e08a6a; --line-hover: #5a5a5a; --btn-hover: #ddd; --quote-bg: rgba(255,255,255,.05);
  --good: #3fb950; --warn: #d29922; --bad: #f85149; --ph: #888;
}
:root[data-theme="light"] {
  --bg: #f4f3ef; --panel: #ffffff; --line: #dcd9d1; --line-strong: #c4c0b5;
  --text: #1c1c1c; --muted: #5f5c55; --accent: #8a6a22; --danger: #b42318; --ok: #1a7f37;
  --field: #ffffff; --field2: #ffffff; --hover: #efede7; --sunken: #f7f6f2;
  --bubble-me: #ebe9e2; --row-line: #e6e3db; --mine: #f6dcdd; --amber: #8a5a00;
  --ai-text: #b5532f; --line-hover: #8f8b80; --btn-hover: #333; --quote-bg: rgba(0,0,0,.05);
  --good: #1a7f37; --warn: #9a6700; --bad: #cf222e; --ph: #8a877f;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
.shell { max-width: 1120px; margin: 0 auto; padding: 24px 16px 48px; min-height: 100vh; }
.loading { color: var(--muted); text-align: center; padding-top: 30vh; }

.frame { border: 1px solid var(--line); border-radius: 20px; padding: 28px 18px; background: var(--panel); }
.brand { text-align: center; margin-bottom: 28px; }
.brand svg { width: 34px; height: 34px; color: var(--text); }
.brand h1 { margin: 10px 0 4px; font-size: 21px; letter-spacing: .5px; font-weight: 600; direction: ltr; }
.brand p { margin: 0; color: var(--muted); font-size: 13px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.who { color: var(--muted); font-size: 13px; }
.who strong { color: var(--text); font-weight: 600; }
.btn {
  border: 1px solid var(--line-strong); background: transparent; border-radius: 10px; white-space: nowrap;
  padding: 9px 16px; cursor: pointer; transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--line-hover); background: var(--hover); }
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.btn.primary:hover { background: var(--btn-hover); }
.btn:disabled { opacity: .55; cursor: wait; }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 0; }
.link:hover { color: var(--text); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }
.tile {
  display: block; width: 100%; text-align: right; border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; padding: 18px 18px 16px; cursor: pointer; transition: border-color .15s, background .15s;
}
.tile:hover, .tile:focus-visible { border-color: var(--line-hover); background: var(--hover); outline: none; }
.tile svg { width: 24px; height: 24px; display: block; margin-bottom: 10px; }
.tile h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.tile p { margin: 0; color: var(--muted); font-size: 13px; }

.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--panel); margin-bottom: 14px; }
.card h2 { margin: 0 0 4px; font-size: 18px; }
.card h3 { margin: 0 0 10px; font-size: 15px; color: var(--accent); font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.form { max-width: 380px; margin: 0 auto; display: grid; gap: 12px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%; background: var(--field); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 11px 12px; outline: none;
}
.field input:focus { border-color: var(--accent); }
.field input.ltr { direction: ltr; text-align: right; }
.msg { min-height: 22px; font-size: 13px; }
.msg.error { color: var(--danger); }
.msg.ok { color: var(--ok); }

.search { display: flex; gap: 8px; margin-top: 12px; }
.search input { flex: 1; min-width: 0; background: var(--field); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; direction: ltr; text-align: right; }
.search input:focus { border-color: var(--accent); outline: none; }

.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; margin: 0; }
.kv div { border-bottom: 1px solid var(--row-line); padding-bottom: 6px; }
.kv dt { color: var(--muted); font-size: 12px; }
.kv dd { margin: 2px 0 0; font-weight: 500; word-break: break-word; }
.badge { display: inline-block; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 10px; font-size: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: right; padding: 9px 8px; border-bottom: 1px solid var(--row-line); }
th { color: var(--muted); font-weight: 500; font-size: 12px; }
.table-wrap { overflow-x: auto; }
.back { margin-bottom: 14px; }
.notice { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 16px; color: var(--muted); }
a.btn { display: inline-block; text-decoration: none; margin-top: 4px; color: var(--text); }
a.btn:visited { color: var(--text); }
.tl { border-right: 2px solid var(--line-strong); padding: 4px 12px 10px; margin-bottom: 6px; }
.tl-head { margin-bottom: 2px; }
.card { overflow-wrap: anywhere; }
tr.pick { cursor: pointer; } tr.pick:hover td { background: var(--hover); }
.sel { width: 100%; background: var(--field); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; color: var(--text); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .5px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--panel); }
.kpi-n { font-size: 24px; font-weight: 700; }
.kpi-l { color: var(--muted); font-size: 12px; margin-top: 2px; }
.kpi.bad .kpi-n { color: var(--danger); }
.kpi.warn .kpi-n { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--field); border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 12px; color: var(--text); font-size: 13px; cursor: pointer; }
.chip.on { border-color: var(--accent); color: var(--accent); }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--hover); }
tr.row-bad td:first-child { box-shadow: inset -3px 0 0 var(--danger); }
.bars { display: grid; gap: 6px; }
.bar-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--row-line); padding: 4px 0; font-size: 14px; }
@media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.table-wrap table { overflow-wrap: normal; }
.table-wrap td, .table-wrap th { white-space: nowrap; }

.tile-ai { text-decoration: none; color: inherit; border-color: #d97757; background: rgba(217, 119, 87, .08); }
.tile-ai svg, .tile-ai h3 { color: var(--ai-text); }
.tile-ai:hover, .tile-ai:focus-visible { border-color: #e8957a; background: rgba(217, 119, 87, .15); }
.ai-link { color: var(--ai-text); text-decoration: none; font-weight: 600; }
.ai-link:hover { color: var(--ai-text); }

.ai-head { border-color: #d97757; }
.ai-head h2 svg { color: var(--ai-text); }
.chatlog { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 4px 2px 10px; }
.bubble { max-width: 88%; padding: 10px 14px; border-radius: 14px; line-height: 1.7; font-size: 14px; white-space: normal; }
.bubble.me { align-self: flex-start; background: var(--bubble-me); border: 1px solid var(--line-strong); }
.bubble.ai { align-self: flex-end; background: rgba(217, 119, 87, .10); border: 1px solid rgba(217, 119, 87, .45); }
.bubble.err { align-self: flex-end; color: var(--danger); border: 1px dashed var(--danger); }
.bubble.wait { opacity: .7; }
.bubble .copy { display: block; margin-top: 6px; font-size: 12px; }
.chatform { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.chatform textarea { flex: 1; min-width: 0; resize: vertical; background: var(--field); border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; color: var(--text); font: inherit; }
.chatform textarea:focus { border-color: #d97757; outline: none; }
.ai-btn { background: #d97757; border-color: #d97757; color: #fff; font-weight: 600; }
.ai-btn:hover { background: var(--ai-text); }

/* assistant side panel (left side in RTL) */
.ai-panel { position: fixed; top: 0; left: 0; bottom: 0; width: 400px; max-width: 100vw; z-index: 50;
  background: var(--panel); border-right: 1px solid #d97757; padding: 18px 16px; display: none; flex-direction: column; box-shadow: 8px 0 30px rgba(0,0,0,.45); }
body.ai-open .ai-panel { display: flex; }
.ai-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ai-panel-head h2 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.ai-panel-head h2 svg { width: 20px; height: 20px; color: var(--ai-text); }
.ai-panel .chatlog { flex: 1; max-height: none; min-height: 0; }
.ai-panel .bubble { max-width: 94%; }
@media (min-width: 1240px) { body.ai-open .shell { margin-left: 420px; margin-right: auto; } }
@media (max-width: 700px) { .ai-panel { width: 100vw; border-right: 0; } }

.mail-list { display: grid; gap: 6px; }
.mail-row { display: grid; gap: 2px; text-align: right; background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--text); cursor: pointer; width: 100%; font: inherit; }
.mail-row:hover { border-color: var(--line-strong); background: var(--hover); }
.mail-row.unread { border-right: 3px solid #d97757; }
.mail-row.unread .mail-subj { font-weight: 700; }
.mail-top { display: flex; justify-content: space-between; gap: 8px; }
.mail-sum { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-body { background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; padding: 12px; line-height: 1.8; font-size: 14px; max-height: 420px; overflow-y: auto; }
.mail-text, .field textarea { width: 100%; background: var(--field); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; color: var(--text); font: inherit; resize: vertical; }
.field input:not([type=checkbox]) { width: 100%; }

.review-chk { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; border: 1px dashed #d97757; border-radius: 10px; font-size: 13px; line-height: 1.6; }
.review-chk input { margin-top: 4px; }
/* tools */
details.tool summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none}
details.tool summary::-webkit-details-marker{display:none}
details.tool[open] summary{margin-bottom:10px}
.tool-body h4{margin:14px 0 6px;font-size:14px}
.tool-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tool-row input,.tool-row select{flex:1 1 110px;min-width:0}
.tool-out{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:4px}
.tool-out.big{font-size:18px;margin:12px 0}
.chip-out{background:var(--hover);border:1px solid var(--line-strong);border-radius:8px;padding:6px 10px;font-size:13px}
.seg{display:flex;gap:16px;margin:12px 0 4px;flex-wrap:wrap}
.seg label{display:flex;gap:6px;align-items:center;font-size:14px}
.site-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;margin:0 0 14px;padding:10px 14px;border-radius:12px;border:1px solid var(--line-strong);background:var(--sunken);color:var(--text);font:inherit;font-size:14px;text-align:right;cursor:pointer}
.site-status .dot{width:10px;height:10px;border-radius:50%;background:var(--ph);flex:none}
.site-status.ok .dot{background:var(--good)}.site-status.warn .dot{background:var(--warn)}.site-status.bad .dot{background:var(--bad)}
.site-status.bad{border-color:var(--bad)}.site-status.warn{border-color:var(--warn)}
.site-status>.small{margin-inline-start:auto}
.site-detail{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:6px;font-size:13px}
.tool-row input,.tool-row select,.field select{background:var(--field);color:var(--text);border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;font:inherit;font-size:16px;height:44px;-webkit-appearance:none;appearance:none}
.tool-row select,.field select{padding-left:30px;background-image:linear-gradient(45deg,transparent 50%,#a3a3a3 50%),linear-gradient(135deg,#a3a3a3 50%,transparent 50%);background-position:14px 19px,19px 19px;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.tool-row select option{background:var(--field2);color:var(--text)}
.tool-row input:focus,.tool-row select:focus{border-color:var(--accent);outline:none}
.tool-row input{direction:ltr;text-align:right}
.tool-row input::placeholder{color:var(--ph);direction:rtl}
.tool-row select{flex:0 1 140px}
.chip-out{color:var(--text);font-size:14px}
.chip-out b{font-size:16px}
.ann .ann-item{padding:10px 0;border-top:1px solid var(--line)}
.ann .ann-item:first-of-type{border-top:0}
.rep{padding:10px 0;border-top:1px solid var(--line)}
.rep:first-child{border-top:0}
.tool-body .small{line-height:1.8}
#rready{background:var(--field);color:var(--text);border:1px solid var(--line-strong);border-radius:10px;padding:8px 10px;font:inherit}
.dash-link{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--text);border-color:#d97757}.dash-link:hover{background:var(--hover)}
#hrType,.field select{background:var(--field);color:var(--text);border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;font:inherit}
td.ok{color:var(--good)}td.bad,.bad{color:var(--bad)}td.warn,.warn{color:var(--warn)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:16px}.grid2 table td{padding:4px 6px;border-bottom:1px solid var(--line)}.grid2 h4{margin:0 0 6px}
.badge.ok{color:var(--good);border-color:var(--good)}.badge.bad{border-color:var(--bad)}.badge.warn{border-color:var(--warn)}

/* moving announcement bar */
.ticker{position:relative;display:flex;align-items:center;gap:8px;overflow:hidden;background:#7F1016;color:#fff;border:1px solid #7F1016;font-weight:600;border-radius:10px;padding:8px 10px;margin:0 0 12px;}
.tk-track{display:flex;white-space:nowrap;animation:tk-move linear infinite;cursor:pointer;flex:1;min-width:0;width:max-content;}
.tk-track span{display:inline-block;padding-inline-end:64px;}
.tk-track.paused,.tk-track:hover{animation-play-state:paused;}
.tk-sep{margin:0 18px;color:#F5DADB;}
.tk-btn{position:relative;z-index:1;box-shadow:0 0 0 6px #7F1016;flex:none;background:#fff;color:#7F1016;border:0;border-radius:8px;width:28px;height:28px;font-weight:700;cursor:pointer;}
.tk-empty{flex:1;color:#F5DADB !important;}
@keyframes tk-move{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@media (prefers-reduced-motion:reduce){.tk-track{animation:none;white-space:normal;}}

.need-item a{color:var(--amber);text-decoration:none;font-weight:600}
.need-item a:hover{text-decoration:underline}

[data-cart]{padding:12px 0;border-top:1px solid var(--line)}
[data-cart] a.link, [data-cart] .link{color:var(--amber)}
/* internal chat */
.chat-card{display:flex;flex-direction:column;gap:8px}
.chat-tabs{display:flex;flex-wrap:wrap;gap:6px}
.chat-tab{background:var(--field2);border:1px solid var(--line-strong);color:var(--text);border-radius:999px;padding:6px 12px;font:inherit;font-size:14px;cursor:pointer}
.chat-tab.on{background:#7F1016;border-color:#7F1016;color:#fff}
.chat-list{height:calc(100dvh - 360px);min-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:8px;background:var(--field);border:1px solid var(--line-strong);border-radius:12px}
.chat-msg{max-width:82%;align-self:flex-start;background:var(--hover);border-radius:12px;padding:8px 12px;line-height:1.6;word-break:break-word}
.chat-msg.mine{align-self:flex-end;background:var(--mine)}
.chat-msg a{color:var(--amber)}
.chat-msg .mention{color:var(--amber)}
.chat-input textarea{width:100%;min-height:56px;resize:vertical;background:var(--field2);color:var(--text);border:1px solid var(--line-strong);border-radius:12px;padding:10px 12px;font:inherit;font-size:16px;line-height:1.6;box-sizing:border-box}
.chat-input textarea:focus{outline:none;border-color:#7F1016}
.chat-input textarea::placeholder{color:var(--ph)}
.chat-at{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cbadge{display:inline-block;min-width:20px;padding:1px 7px;border-radius:999px;background:var(--bad);color:#fff;font-size:12px;font-weight:700;text-align:center}
.chat-img{display:block;max-width:240px;max-height:240px;border-radius:8px;margin:4px 0}
.chat-doc{display:inline-block;margin:4px 0;padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px}

/* dark form controls everywhere (zero specificity, so section styles still win) */
:root{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
:where(input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color]),textarea,select){background:var(--field2);color:var(--text);border:1px solid var(--line-strong);border-radius:10px;padding:8px 10px;font:inherit;box-sizing:border-box}
:where(input,textarea,select)::placeholder{color:var(--ph)}
@media (max-width:700px){
  :where(input,textarea,select){font-size:16px}
  .chat-page .status-row{display:none}
  .chat-list{height:calc(100dvh - 300px)}
}
.error{color:var(--bad)}
/* compact status row: site + Zid side by side */
.status-row{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.status-row .site-status{flex:1 1 220px;width:auto;margin:0;padding:7px 12px;font-size:13px}
.status-row .site-status .site-detail{flex-basis:100%}
a.link{text-decoration:none}
a.link .cbadge{margin-inline-start:4px}

.chat-quote{border-right:3px solid var(--amber);background:var(--quote-bg);border-radius:6px;padding:3px 8px;margin:4px 0;font-size:12px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-replying{background:rgba(227,179,65,.10);border-right:3px solid var(--amber);border-radius:6px;padding:5px 8px;margin-bottom:6px}
.chat-msg.flash{outline:2px solid var(--amber)}
.chat-audio{display:block;max-width:100%;width:240px;height:40px;margin-top:4px}

.theme-btn{font-size:14px}

/* Top bar: settings dropdown (feedback, theme, notifications, logout live inside) */
.menu-wrap { position: relative; display: inline-block; }
.menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 230px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; padding: 6px; z-index: 50; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.menu[hidden] { display: none; }
.menu .link { width: 100%; text-align: right; }

.avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-inline-end:6px;border:1px solid var(--line-strong)}
.avatar.sm{width:20px;height:20px;margin-inline-end:4px}
#pfPhotoNow .avatar{width:64px;height:64px;margin-inline-end:10px}

.fin-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:6px 0 14px}
.fin-kpi{border:1px solid var(--line,#2a2a2a);border-radius:12px;padding:12px;background:rgba(255,255,255,.03)}
.fin-k{font-size:.8rem;opacity:.7}.fin-v{font-size:1.35rem;margin:6px 0 2px}.fin-s{font-size:.72rem;opacity:.55;min-height:1em}
.fin-na{color:#d8a13b;font-size:.95rem;font-weight:600}
.fin-h{margin:16px 0 6px;font-size:.95rem}
.fin-t{table-layout:fixed;width:100%}.fin-t td:first-child,.fin-t th:first-child{width:56%}.fin-t td,.fin-t th{text-align:start;vertical-align:top}
.fin-alert{border:1px solid #c0392b;background:rgba(192,57,43,.14);border-radius:12px;padding:12px;margin:6px 0 12px}
.fin-tot td{border-top:2px solid var(--line,#2a2a2a)}