/* Diwan console — tokens from the brand palette (navy, gold, cream). Phone first. */
:root {
  --bg: #FFF8E8; --panel: #FFFFFF; --ink: #1C2140; --muted: #5B6078; --line: #E7DCC3;
  --accent: #B8862B; --accent-ink: #1C2140; --accent-bg: #F7E7BF;
  --crit: #B3261E; --major: #C2410C; --minor: #A16207; --warn: #4D7C0F; --ok: #15803D;
  --radius: 10px; --gap: 12px; --font: system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #12152B; --panel: #1C2140; --ink: #F4EBD6; --muted: #A9ADC4; --line: #2E3460;
  --accent: #E8B84A; --accent-ink: #12152B; --accent-bg: #3A3420;
  --crit: #F87171; --major: #FB923C; --minor: #FACC15; --warn: #A3E635; --ok: #4ADE80; } }
:root[data-theme="dark"] { --bg: #12152B; --panel: #1C2140; --ink: #F4EBD6; --muted: #A9ADC4; --line: #2E3460;
  --accent: #E8B84A; --accent-ink: #12152B; --accent-bg: #3A3420; --crit: #F87171; --major: #FB923C; --minor: #FACC15; --warn: #A3E635; --ok: #4ADE80; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
header.top { position: sticky; top: 0; z-index: 5; display: flex; gap: 10px; align-items: center; padding: 10px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
header.top .brand { font-weight: 700; letter-spacing: .02em; }
header.top .brand span { color: var(--accent); }
nav.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
nav.tabs a { padding: 6px 10px; border-radius: 999px; white-space: nowrap; text-decoration: none; color: var(--muted); }
nav.tabs a.on, nav.tabs a:hover { background: var(--accent-bg); color: var(--ink); }
main { max-width: 1180px; margin: 0 auto; padding: 16px; display: grid; gap: var(--gap); }
.grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 820px) { .grid.two { grid-template-columns: 1.3fr 1fr; } .grid.three { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; min-width: 0; }
.card h2 { margin: 0 0 8px; font-size: 15px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
table { width: 100%; border-collapse: collapse; }
td, th { text-align: start; padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tree a.node { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 8px; text-decoration: none; }
.tree a.node:hover { background: var(--accent-bg); }
.tree .child { margin-inline-start: 18px; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--accent-bg); }
.sev-critical { background: var(--crit); color: #fff; } .sev-major { background: var(--major); color: #fff; }
.sev-minor { background: var(--minor); color: #1C2140; } .sev-warning { background: var(--warn); color: #1C2140; }
.st-ok { color: var(--ok); } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--ok); }
.dot.critical { background: var(--crit); } .dot.major { background: var(--major); } .dot.minor { background: var(--minor); } .dot.warning { background: var(--warn); }
button, .btn { font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 9px 14px;
  border-radius: 8px; cursor: pointer; min-height: 40px; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.danger { color: var(--crit); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
input, select, textarea { font: inherit; width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
textarea { min-height: 120px; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
pre, code { font-family: var(--mono); font-size: 13px; }
pre { white-space: pre-wrap; word-break: break-word; background: var(--bg); padding: 10px; border-radius: 8px; border: 1px solid var(--line); overflow-x: auto; }
.md img { max-width: 100%; } .md table { font-size: 14px; }
.ev { border-inline-start: 3px solid var(--line); padding: 4px 10px; margin: 6px 0; }
.ev.tool_call { border-color: var(--accent); } .ev.error { border-color: var(--crit); } .ev.done { border-color: var(--ok); }
.banner { background: var(--crit); color: #fff; padding: 8px 16px; text-align: center; font-weight: 600; }
.login { max-width: 380px; margin: 12vh auto; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 14px; }
.right { margin-inline-start: auto; }