/* منصة السكانرات: شريط جانبي ثابت + محتوى بعمود واحد. نفس هوية تقرير ما قبل الافتتاح (حبر أزرق + كهرماني) */
:root {
  --bg: #eef1f4; --surface: #ffffff; --surface-2: #f6f8fa; --ink: #17212b; --muted: #5d6b78; --line: #d5dce3;
  --accent: #b9781f; --up: #11805a; --dn: #c0392b; --flat: #7b8794; --warn: #a66a00;
  --up-bg: #e3f3ec; --dn-bg: #f9e6e3; --flat-bg: #eceff2; --warn-bg: #fbf0dc;
  --f-display: "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-num: "IBM Plex Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f161d; --surface: #16202a; --surface-2: #1b2631; --ink: #e5ebf0; --muted: #93a1ae; --line: #263441;
  --accent: #e0a24a; --up: #3cc28f; --dn: #ef6b5d; --flat: #8a97a3; --warn: #e6b450;
  --up-bg: #12302a; --dn-bg: #351c1c; --flat-bg: #1d2731; --warn-bg: #33290f; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0f161d; --surface: #16202a; --surface-2: #1b2631; --ink: #e5ebf0; --muted: #93a1ae; --line: #263441;
  --accent: #e0a24a; --up: #3cc28f; --dn: #ef6b5d; --flat: #8a97a3; --warn: #e6b450;
  --up-bg: #12302a; --dn-bg: #351c1c; --flat-bg: #1d2731; --warn-bg: #33290f; color-scheme: dark; }
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.6 }
a { color: inherit }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate }
.muted { color: var(--muted) }
.shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh }
.nav { background: var(--surface); border-inline-start: 1px solid var(--line); padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto }
.brand { font-family: var(--f-display); font-size: 20px; text-decoration: none; display: block; margin-bottom: 14px; color: var(--accent) }
.nav nav { display: flex; flex-direction: column; gap: 2px }
.nav nav a { text-decoration: none; padding: 7px 10px; border-radius: 7px; color: var(--muted); font-size: 14px }
.nav nav a:hover { background: var(--surface-2); color: var(--ink) }
.nav nav a.on { background: var(--surface-2); color: var(--ink); font-weight: 500; box-shadow: inset -3px 0 0 var(--accent) }
.nav .sec { font-size: 11px; color: var(--muted); margin: 12px 10px 2px; letter-spacing: .04em }
.main { padding: 26px max(16px, env(safe-area-inset-left, 0px)) 60px max(16px, env(safe-area-inset-right, 0px)); max-width: 1180px; width: 100%; display: flex; flex-direction: column; gap: 22px }
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr) }
  .nav { position: static; height: auto; border: 0; border-bottom: 1px solid var(--line); padding: 12px 16px }
  .nav nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px }
  .nav nav a { white-space: nowrap }
  .nav .sec { display: none }
  .brand { margin-bottom: 8px }
}
h1 { font-family: var(--f-display); font-size: clamp(24px, 3.5vw, 32px); margin: 0; line-height: 1.25; text-wrap: balance }
h2 { font-family: var(--f-display); font-size: 19px; margin: 0 0 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap }
h2 small { font-family: var(--f-body); font-size: 13px; color: var(--muted); font-weight: 400 }
.head { display: flex; flex-direction: column; gap: 6px; border-bottom: 2px solid var(--accent); padding-bottom: 14px }
.head .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .05em }
.lead { margin: 0; max-width: 72ch }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px }
.kpi span { color: var(--muted); font-size: 13px }
.kpi b { font-size: 24px; font-weight: 500 }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px }
.sc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; text-decoration: none }
.sc-card:hover { border-color: var(--accent) }
.sc-card .t { font-weight: 700 }
.sc-card .w { font-size: 12px; color: var(--muted) }
.sc-card .r { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted) }
.sc-card .r b { color: var(--ink); font-weight: 500 }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0 }
.tbl { overflow-x: auto }
table { width: 100%; border-collapse: collapse; font-size: 14px }
th, td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap }
th { color: var(--muted); font-weight: 500; font-size: 12px }
tr.click { cursor: pointer } tr.click:hover td { background: var(--surface-2) }
.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 99px; background: var(--flat-bg); color: var(--flat) }
.pill.up, .pill.ok { background: var(--up-bg); color: var(--up) } .pill.dn, .pill.bad { background: var(--dn-bg); color: var(--dn) }
.pill.wait { background: var(--warn-bg); color: var(--warn) }
.bar { height: 6px; background: var(--flat-bg); border-radius: 3px; overflow: hidden; min-width: 80px }
.bar i { display: block; height: 100%; background: var(--up) }
/* بطاقة السهم المبسطة */
.setup { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px }
.setup .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.sym { font-family: var(--f-num); font-size: 22px; font-weight: 500 }
.setup .src { color: var(--muted); font-size: 13px; margin-inline-start: auto }
.plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
@media (max-width: 560px) { .plan { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.plan div { background: var(--surface-2); border-radius: 8px; padding: 9px 10px; display: flex; flex-direction: column }
.plan span { color: var(--muted); font-size: 12px }
.plan b { font-family: var(--f-num); font-weight: 500; font-size: 16px; direction: ltr; text-align: start }
.plan i { font-style: normal; color: var(--muted); font-size: 12px; font-family: var(--f-num) }
.foot { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13px }
.foot b { color: var(--ink); font-weight: 500 }
.note { margin: 0; font-size: 14px; border-inline-start: 3px solid var(--accent); padding-inline-start: 10px }
.status { margin: 0; color: var(--muted); font-size: 13px }
details summary { cursor: pointer; color: var(--muted); font-size: 13px }
details[open] summary { margin-bottom: 8px }
.chart { width: 100%; height: 360px; direction: ltr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden }
.chart.sm { height: 280px }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 4px; border-top: 3px solid var(--flat); font: inherit; color: inherit; text-align: start; cursor: pointer; width: 100% }
.card.up { border-top-color: var(--up) } .card.dn { border-top-color: var(--dn) }
.card:hover { border-color: var(--accent) }
.card:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.card p { margin: 0; font-size: 13px }
.card .ch { display: flex; gap: 8px; align-items: baseline }
.card .ch b { font-family: var(--f-num); font-size: 16px; margin-inline-end: auto }
.chg.up { color: var(--up) } .chg.dn { color: var(--dn) }
.trends { display: flex; gap: 8px; flex-wrap: wrap }
.tr { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--muted) }
.tr i { width: 8px; height: 8px; border-radius: 50%; background: var(--flat) }
.tr.up i { background: var(--up) } .tr.dn i { background: var(--dn) }
.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: 10px; padding: 22px; color: var(--muted) }
.empty b { color: var(--ink); display: block; margin-bottom: 4px }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
select, .btn { font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px }
.btn { cursor: pointer; text-decoration: none }
.btn:hover { border-color: var(--accent) }
.btn.on { border-color: var(--accent); color: var(--accent) }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px }
@media (max-width: 860px) { .two { grid-template-columns: minmax(0, 1fr) } }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.timeline li { display: flex; gap: 10px; font-size: 14px }
.timeline li .num { color: var(--muted); min-width: 92px }
.prose { max-width: 75ch } .prose p { margin: 0 0 10px } .prose h3 { font-size: 16px; margin: 16px 0 6px }
.prose ul { margin: 0 0 10px; padding-inline-start: 20px }
dialog { border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--surface); color: var(--ink); width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px) }
dialog::backdrop { background: rgba(8, 12, 16, .7) }
.dlg-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line) }
.dlg-h b { margin-inline-end: auto; font-size: 14px }
.dlg-h button { font: inherit; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; cursor: pointer }
#dlg-b { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px }
footer { color: var(--muted); font-size: 12px }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }