/* X Monitor UI kit. One file. Logical properties only. Colour = identity or state. */
:root {
  --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --faint: #94a3b8;
  --line: #e2e8f0; --bg: #f8fafc; --card: #ffffff; --head: #f1f5f9;
  --accent: #1d4ed8; --accent-ink: #ffffff;
  --red: #dc2626; --amber: #b45309; --green: #15803d;
  --fs-1: 11px; --fs-2: 12px; --fs-3: 13px; --fs-4: 14px; --fs-5: 16px; --fs-6: 18px;
  --fs-7: 20px; --fs-8: 24px; --fs-9: 28px; --fs-10: 32px; --fs-11: 40px;
  --r-1: 4px; --r-2: 8px; --r-3: 12px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --font: "IBM Plex Sans Arabic", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: var(--font); font-size: var(--fs-4); line-height: 1.6; color: var(--ink); background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { margin: 0 0 var(--s-3); line-height: 1.3; font-weight: 700; }
h1 { font-size: var(--fs-8); } h2 { font-size: var(--fs-6); } h3 { font-size: var(--fs-5); }
p { margin: 0 0 var(--s-3); }
.num { font-variant-numeric: tabular-nums; }

/* layout */
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.nav { background: var(--card); border-inline-end: 1px solid var(--line); padding: var(--s-4); position: sticky; top: 0; height: 100vh; }
.nav .brand { font-weight: 700; font-size: var(--fs-6); margin-block-end: var(--s-5); display: block; color: var(--ink); }
.nav a.item { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-2); color: var(--ink-2); min-height: 44px; }
.nav a.item[aria-current="page"] { background: var(--head); color: var(--ink); font-weight: 700; }
.nav a.item .ico { inline-size: 18px; block-size: 18px; color: var(--accent); flex: none; }
.main { padding: var(--s-5); max-inline-size: 1100px; inline-size: 100%; min-inline-size: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-4); flex-wrap: wrap; }

/* cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-4); margin-block-end: var(--s-4); }
.card h2 { font-size: var(--fs-5); color: var(--ink-2); margin-block-end: var(--s-3); }
.grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.stat { padding: var(--s-3) var(--s-4); }
.stat .label { color: var(--muted); font-size: var(--fs-3); }
.stat .value { font-size: var(--fs-9); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero .value { font-size: var(--fs-11); }

/* buttons, forms */
.btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-2); border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.btn:hover { background: var(--head); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: #1e40af; }
.btn-danger { color: var(--red); }
.btn[disabled] { opacity: .5; cursor: default; }
label { display: block; font-size: var(--fs-3); color: var(--ink-2); margin-block-end: var(--s-1); }
input, select, textarea { font: inherit; inline-size: 100%; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--card); color: var(--ink); min-height: 44px; }
textarea { min-height: 120px; line-height: 1.7; }
.field { margin-block-end: var(--s-4); }
.row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end; }
.row .field { flex: 1 1 200px; margin-block-end: 0; }
.actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-block-start: var(--s-4); }

/* tables */
.table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-3); }
.table th { text-align: start; color: var(--muted); font-weight: 600; padding: var(--s-2) var(--s-3); border-block-end: 1px solid var(--line); background: var(--head); }
.table td { padding: var(--s-2) var(--s-3); border-block-end: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-block-end: 0; }
.table .n { font-variant-numeric: tabular-nums; text-align: end; }
.table-wrap { overflow-x: auto; }

/* state */
.dot { display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--faint); margin-inline-end: var(--s-2); vertical-align: middle; }
.dot.active { background: var(--green); } .dot.restricted { background: var(--amber); }
.dot.suspended, .dot.not_found { background: var(--red); } .dot.unknown { background: var(--faint); }
.tag { display: inline-block; font-size: var(--fs-2); padding: 0 var(--s-2); border-radius: var(--r-1); background: var(--head); color: var(--ink-2); }
.strip-error { background: #fef2f2; color: var(--red); border: 1px solid #fecaca; border-radius: var(--r-2); padding: var(--s-3) var(--s-4); margin-block-end: var(--s-4); }
.strip-ok { background: #f0fdf4; color: var(--green); border: 1px solid #bbf7d0; border-radius: var(--r-2); padding: var(--s-3) var(--s-4); margin-block-end: var(--s-4); }
.muted { color: var(--muted); } .small { font-size: var(--fs-3); }
.empty { text-align: center; color: var(--muted); padding: var(--s-6) var(--s-4); }
.empty .ico { inline-size: 32px; block-size: 32px; color: var(--faint); margin-block-end: var(--s-2); }
.progress { font-family: var(--mono); font-size: var(--fs-3); white-space: pre-wrap; background: var(--head); border-radius: var(--r-2); padding: var(--s-3); max-block-size: 240px; overflow: auto; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s-4); }
.login .card { inline-size: 100%; max-inline-size: 380px; }

/* phone */
@media (max-width: 768px) {
  html { font-size: 13.5px; }
  .shell { grid-template-columns: 1fr; }
  .main { padding: var(--s-4); padding-block-end: 96px; }
  .nav { position: fixed; inset-block-end: 0; inset-inline: 0; top: auto; height: auto; display: flex; justify-content: space-around; padding: var(--s-1) 0; border-inline-end: 0; border-block-start: 1px solid var(--line); z-index: 10; }
  .nav .brand, .nav .item.more { display: none; }
  .nav a.item { flex: 1 1 0; min-inline-size: 0; flex-direction: column; gap: 2px; font-size: var(--fs-1); padding: var(--s-1) 0; white-space: nowrap; }
  .nav a.item.secondary { display: none; }
  .stat .value { font-size: var(--fs-7); }
  .grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .card { padding: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }