/* Prototype cascade, in prototype/build_platform.py order (doc 05 §9.1). Never reorder.
   00–05 are vendored from prototype/ by `npm run styles:sync`; React-only additions go in a later 99-react.css. */
:root,[data-theme="light"]{--bg:#f6f6f9;--surface:#ffffff;--surface-2:#efeff4;--surface-3:#e6e5ed;--border:#e4e3eb;--border-control:#8f8ca1;--ink:#191625;--ink-2:#58566a;--ink-3:#6e6b80;--brand:#587cfa;--primary:#3b5bdb;--primary-hover:#2f4bc0;--on-primary:#ffffff;--primary-ink:#3450c9;--primary-soft:#eef1fe;--success:#17714a;--success-soft:#e7f5ee;--warning:#8a5600;--warning-soft:#fcf2df;--danger:#b8233a;--danger-hover:#9e1d31;--on-danger:#ffffff;--danger-soft:#fdebee;--focus:#3b5bdb;--nav-bg:#ffffff;--overlay:rgba(14, 13, 21, 0.48);--shadow-sm:0 1px 2px rgba(25, 22, 37, 0.06);--shadow-md:0 8px 24px -8px rgba(25, 22, 37, 0.16);--shadow-lg:0 24px 64px -16px rgba(25, 22, 37, 0.28);}
[data-theme="dark"]{--bg:#0e0d15;--surface:#16141f;--surface-2:#1d1b28;--surface-3:#262433;--border:#2a2836;--border-control:#6f6c84;--ink:#f1f0f6;--ink-2:#a6a3b6;--ink-3:#8e8ba2;--brand:#587cfa;--primary:#8aa3ff;--primary-hover:#9fb3ff;--on-primary:#0e0d15;--primary-ink:#9fb3ff;--primary-soft:#1b2147;--success:#56c992;--success-soft:#10271c;--warning:#e9b555;--warning-soft:#2a2210;--danger:#ff8593;--danger-hover:#ff9eaa;--on-danger:#0e0d15;--danger-soft:#321820;--focus:#9fb3ff;--nav-bg:#121019;--overlay:rgba(0, 0, 0, 0.64);--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.4);--shadow-md:0 8px 24px -8px rgba(0, 0, 0, 0.6);--shadow-lg:0 24px 64px -16px rgba(0, 0, 0, 0.7);}
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-pill:999px;--control-sm:32px;--control-md:40px;--control-lg:48px;--sidebar-w:264px;--sidebar-w-collapsed:72px;--topbar-h:64px;--content-max:1240px;--font-sans:"Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;}
.t-display{font-family:var(--font-sans);font-size:32px;line-height:44px;font-weight:700}
.t-h1{font-family:var(--font-sans);font-size:24px;line-height:36px;font-weight:700}
.t-h2{font-family:var(--font-sans);font-size:18px;line-height:28px;font-weight:700}
.t-h3{font-family:var(--font-sans);font-size:15px;line-height:24px;font-weight:700}
.t-body{font-family:var(--font-sans);font-size:15px;line-height:26px;font-weight:400}
.t-body-sm{font-family:var(--font-sans);font-size:13px;line-height:22px;font-weight:400}
.t-label{font-family:var(--font-sans);font-size:13px;line-height:20px;font-weight:600}
.t-caption{font-family:var(--font-sans);font-size:12px;line-height:18px;font-weight:500}
.t-stat{font-family:var(--font-sans);font-size:28px;line-height:36px;font-weight:700}
.t-mono{font-family:var(--font-mono);font-size:13px;line-height:20px;font-weight:500}
.t-mono-sm{font-family:var(--font-mono);font-size:12px;line-height:18px;font-weight:500}
/* GENERATED by scripts/sync-prototype-styles.mjs from tokens.css (as prototype/build_platform.py) — do not edit */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0e0d15;--surface:#16141f;--surface-2:#1d1b28;--surface-3:#262433;--border:#2a2836;--border-control:#6f6c84;--ink:#f1f0f6;--ink-2:#a6a3b6;--ink-3:#8e8ba2;--brand:#587cfa;--primary:#8aa3ff;--primary-hover:#9fb3ff;--on-primary:#0e0d15;--primary-ink:#9fb3ff;--primary-soft:#1b2147;--success:#56c992;--success-soft:#10271c;--warning:#e9b555;--warning-soft:#2a2210;--danger:#ff8593;--danger-hover:#ff9eaa;--on-danger:#0e0d15;--danger-soft:#321820;--focus:#9fb3ff;--nav-bg:#121019;--overlay:rgba(0, 0, 0, 0.64);--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.4);--shadow-md:0 8px 24px -8px rgba(0, 0, 0, 0.6);--shadow-lg:0 24px 64px -16px rgba(0, 0, 0, 0.7); color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
/* ============================================================
   Innova Panel — component stylesheet
   Every value comes from tokens.css (var(--…)). RTL-first:
   logical properties only (inline-start/end, not left/right).
   ============================================================ */

:root {
  --font-sans: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 26px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4, p { margin: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.mono, .t-mono { font-family: var(--font-mono); unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Icon ---------- */
.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic--sm { width: 16px; height: 16px; }
.ic--lg { width: 24px; height: 24px; }
[dir="rtl"] .ic--flip { transform: scaleX(-1); }

/* ---------- Button ---------- */
.btn {
  --_h: var(--control-md, 40px);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--_h); padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap;
  cursor: pointer; user-select: none; text-decoration: none !important;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border-control); }
.btn--secondary:hover { background: var(--surface-2); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--link { background: transparent; color: var(--primary-ink); padding-inline: 4px; min-height: 0; }
.btn--link:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.btn--danger { background: var(--danger); color: var(--on-danger); }
.btn--danger:hover { background: var(--danger-hover); }
.btn--danger-ghost { background: transparent; color: var(--danger); border-color: var(--border-control); }
.btn--danger-ghost:hover { background: var(--danger-soft); }
.btn--sm { --_h: var(--control-sm, 32px); padding: 0 12px; font-size: 13px; gap: 6px; }
.btn--lg { --_h: var(--control-lg, 48px); padding: 0 24px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--icon { padding: 0; width: var(--_h); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--on-primary) var(--on-primary) transparent transparent;
  animation: spin .7s linear infinite;
}
.btn--secondary.is-loading::after, .btn--ghost.is-loading::after { border-color: var(--ink) var(--ink) transparent transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Form field ---------- */
.field { display: grid; gap: 6px; min-width: 0; }
.label { font-size: 13px; font-weight: 600; line-height: 20px; color: var(--ink); display: flex; align-items: baseline; gap: 6px; }
.label .opt { font-weight: 500; color: var(--ink-3); }
.hint { font-size: 13px; line-height: 20px; color: var(--ink-2); }
.err { font-size: 13px; line-height: 20px; color: var(--danger); display: flex; gap: 6px; align-items: flex-start; }
.err .ic { width: 16px; height: 16px; margin-top: 2px; }
.input, .select, .textarea {
  width: 100%; min-height: var(--control-md, 40px); padding: 8px 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-control); border-radius: var(--radius-md);
  font-size: 15px; line-height: 22px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.textarea { min-height: 96px; resize: vertical; }
.select {
  appearance: none; padding-inline-end: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-size: 5px 5px; background-repeat: no-repeat;
  background-position: left 18px center, left 13px center;
}
[dir="ltr"] .select { background-position: right 13px center, right 18px center; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--danger); }
.field.is-invalid .input:focus { box-shadow: 0 0 0 1px var(--danger); }
.input:disabled, .select:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
.input[readonly] { background: var(--surface-2); }
.input-group { display: flex; align-items: stretch; position: relative; }
.input-group .input { flex: 1; }
.input-group .addon {
  display: inline-flex; align-items: center; padding: 0 12px; color: var(--ink-2); font-size: 14px;
  background: var(--surface-2); border: 1px solid var(--border-control);
}
.input-group .addon:first-child { border-inline-end: 0; border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
.input-group .addon:last-child { border-inline-start: 0; border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.input-group .addon:first-child + .input { border-start-start-radius: 0; border-end-start-radius: 0; }
.input-group .input:has(+ .addon) { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group .reveal { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); }
.input-group:has(.reveal) .input { padding-inline-end: 44px; }
.input.ltr, .input.mono { direction: ltr; text-align: start; }
[dir="rtl"] .input.ltr, [dir="rtl"] .input.mono { text-align: right; }

/* ---------- Checkbox / radio ---------- */
.check { display: inline-flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 15px; line-height: 24px; }
.check input {
  appearance: none; flex: none; margin: 3px 0 0; width: 18px; height: 18px;
  border: 1.5px solid var(--border-control); border-radius: 5px; background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--primary); border-color: var(--primary); }
.check input[type="checkbox"]:checked::after {
  content: ""; width: 10px; height: 6px; border: 2px solid var(--on-primary); border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
.check input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-primary); }
.check small { display: block; color: var(--ink-2); font-size: 13px; line-height: 20px; }

/* ---------- Switch ---------- */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.switch input {
  appearance: none; margin: 0; flex: none; width: 40px; height: 24px; border-radius: var(--radius-pill);
  background: var(--surface-3); border: 1px solid var(--border-control); position: relative; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.switch input::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink-2); transition: inset-inline-start var(--dur) var(--ease);
}
.switch input:checked { background: var(--primary); border-color: var(--primary); }
.switch input:checked::after { inset-inline-start: 18px; background: var(--on-primary); }

/* ---------- Segmented control ---------- */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: var(--radius-md); border: 1px solid var(--border); }
.seg button {
  border: 0; background: transparent; min-height: 32px; padding: 0 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; border: 0; background: transparent; padding: 10px 12px 12px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; display: inline-flex; gap: 8px; align-items: center;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--primary); }

/* ---------- Filter chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--border-control); color: var(--ink); }
.chip .count { font-size: 12px; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-2); display: inline-grid; place-items: center; color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); }
.chip[aria-pressed="true"] .count { background: var(--primary); color: var(--on-primary); }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge--plain::before { display: none; }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--info { background: var(--primary-soft); color: var(--primary-ink); }
.badge--outline { background: transparent; border: 1px solid var(--border); color: var(--ink-2); }
.badge--pulse::before { animation: pulse 1.6s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.count-pill { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); }

/* ---------- Card ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.card-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.card-hd h2, .card-hd h3 { font-size: 16px; line-height: 24px; font-weight: 700; }
.card-hd p { font-size: 13px; line-height: 20px; color: var(--ink-2); }
.card-bd { padding: 24px; }
.card-ft { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-2); border-end-start-radius: var(--radius-lg); border-end-end-radius: var(--radius-lg); }
.card--flat { box-shadow: none; }
.card--sunken { background: var(--surface-2); box-shadow: none; }
.card--link { transition: border-color var(--dur-fast) var(--ease); cursor: pointer; }
.card--link:hover { border-color: var(--border-control); }

/* ---------- Stat ---------- */
.stat { padding: 20px 24px; display: grid; gap: 4px; align-content: start; }
.stat-label { font-size: 13px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.stat-value { font-size: 28px; line-height: 36px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 13px; color: var(--ink-2); }
.stat-sub .up { color: var(--success); font-weight: 600; }
.stat-sub .down { color: var(--danger); font-weight: 600; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.card > .table-wrap { border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.table th {
  text-align: start; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--surface-2);
  padding: 10px 16px; white-space: nowrap; border-bottom: 1px solid var(--border);
}
.table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr.is-link { cursor: pointer; }
.table tbody tr[aria-selected="true"] { background: var(--primary-soft); }
.table .cell-main { font-weight: 600; color: var(--ink); }
.table .cell-sub { font-size: 12px; color: var(--ink-2); line-height: 18px; }
.table .t-end { text-align: end; }
.table .t-num { text-align: end; font-variant-numeric: tabular-nums; }
.table--dense td { padding: 10px 16px; }

/* ---------- Key–value list ---------- */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px 24px; }
.kv dt { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }
.kv dd { margin: 0; font-size: 15px; font-weight: 600; }
.kv-rows { display: grid; }
.kv-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.kv-rows > div:last-child { border-bottom: 0; }
.kv-rows dt { color: var(--ink-2); }
.kv-rows dd { margin: 0; font-weight: 600; text-align: end; }

/* ---------- Copy row (credentials) ---------- */
.copy-row {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 6px 6px 6px; padding-inline-start: 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.copy-row .k { font-size: 12px; font-weight: 600; color: var(--ink-2); min-width: 92px; }
.copy-row .v { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 500; direction: ltr; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[dir="rtl"] .copy-row .v { text-align: right; }
.copy-row .btn { flex: none; }
.copy-row.is-copied { border-color: var(--success); }
.code-cmd { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: #16141f; color: #f1f0f6; font-family: var(--font-mono); font-size: 13px; direction: ltr; }
[data-theme="dark"] .code-cmd { background: #0a0910; border: 1px solid var(--border); }
.code-cmd code { flex: 1; overflow-x: auto; white-space: nowrap; }
.code-cmd .prompt { color: #8aa3ff; }
.code-cmd .btn { color: #f1f0f6; }
.code-cmd .btn:hover { background: rgba(255,255,255,.1); }

/* ---------- Banner ---------- */
.banner {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-lg);
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); font-size: 14px; line-height: 22px;
}
.banner > .ic { margin-top: 1px; }
.banner strong { display: block; font-weight: 700; }
.banner .banner-body { flex: 1; min-width: 0; }
.banner .banner-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.banner--info { background: var(--primary-soft); border-color: transparent; }
.banner--info > .ic { color: var(--primary-ink); }
.banner--success { background: var(--success-soft); border-color: transparent; }
.banner--success > .ic { color: var(--success); }
.banner--warning { background: var(--warning-soft); border-color: transparent; }
.banner--warning > .ic { color: var(--warning); }
.banner--danger { background: var(--danger-soft); border-color: transparent; }
.banner--danger > .ic { color: var(--danger); }

/* ---------- Toast ---------- */
.toast-region { position: fixed; inset-block-end: 24px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; pointer-events: none; }
[dir="rtl"] .toast-region { transform: translateX(50%); }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px 10px 16px; padding-inline-start: 14px;
  background: var(--ink); color: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  font-size: 14px; font-weight: 600; max-width: min(92vw, 440px);
  animation: toast-in var(--dur-slow) var(--ease-out);
}
.toast .ic { color: inherit; }
.toast--success .ic { color: var(--success-soft); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Dialog ---------- */
.scrim { position: fixed; inset: 0; background: var(--overlay); z-index: 80; display: grid; place-items: center; padding: 16px; animation: fade var(--dur) var(--ease-out); }
.dialog {
  width: min(100%, 480px); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  animation: rise var(--dur-slow) var(--ease-out);
}
.dialog--wide { width: min(100%, 640px); }
.dialog-hd { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 20px 24px 0; }
.dialog-hd h2 { font-size: 18px; line-height: 28px; }
.dialog-bd { padding: 12px 24px 24px; display: grid; gap: 16px; font-size: 15px; color: var(--ink-2); }
.dialog-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); }
.dialog--danger .dialog-icon { color: var(--danger); background: var(--danger-soft); }
.dialog-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); flex: none; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ---------- Menu ---------- */
.menu { min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: grid; }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; color: var(--ink); text-align: start; cursor: pointer; text-decoration: none; }
.menu button:hover, .menu a:hover { background: var(--surface-2); }
.menu .is-danger { color: var(--danger); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }

/* ---------- Empty state ---------- */
.empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 48px 24px; }
.empty-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); margin-bottom: 8px; }
.empty h3 { font-size: 16px; line-height: 24px; font-weight: 700; }
.empty p { font-size: 14px; color: var(--ink-2); max-width: 360px; }
.empty .btn { margin-top: 12px; }

/* ---------- Skeleton ---------- */
.skel { display: block; border-radius: 6px; background: var(--surface-3); position: relative; overflow: hidden; }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-100%); animation: shimmer 1.4s var(--ease) infinite; }
[data-theme="dark"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- Stepper ---------- */
.stepper { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.stepper li { flex: 1; min-width: 0; display: grid; gap: 8px; }
.stepper .bar { height: 4px; border-radius: 4px; background: var(--surface-3); }
.stepper .lbl { font-size: 12px; font-weight: 600; color: var(--ink-3); display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper .lbl b { font-family: var(--font-mono); font-weight: 600; }
.stepper li.is-done .bar { background: var(--brand); }
.stepper li.is-done .lbl { color: var(--ink-2); }
.stepper li.is-current .bar { background: var(--primary); }
.stepper li.is-current .lbl { color: var(--ink); }
.stepper button.lbl { border: 0; background: none; padding: 0; cursor: pointer; text-align: start; }

/* ---------- Option card (selectable) ---------- */
.options { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.option {
  position: relative; display: grid; gap: 6px; padding: 16px; padding-inline-end: 44px; text-align: start;
  background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--radius-lg); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  font-size: 14px; color: var(--ink); width: 100%;
}
.option:hover { border-color: var(--ink-2); }
.option::after {
  content: ""; position: absolute; top: 16px; inset-inline-end: 16px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--border-control); background: var(--surface);
}
.option[aria-checked="true"], .option[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.option[aria-checked="true"]::after, .option[aria-pressed="true"]::after { border: 5px solid var(--primary); background: var(--on-primary); }
.option.is-multi::after { border-radius: 5px; }
.option.is-multi[aria-pressed="true"]::after { border: 0; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
.option.is-static { cursor: default; padding-inline-end: 16px; }
.option.is-static::after { display: none; }
.option.is-static:hover { border-color: var(--border-control); }
.option:disabled, .option[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.option-title { font-size: 15px; font-weight: 700; line-height: 22px; }
.option-desc { font-size: 13px; color: var(--ink-2); line-height: 20px; }
.option-price { font-size: 13px; font-weight: 700; color: var(--ink); }
.option-price .free { color: var(--success); }
.option-logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.option-tag { position: absolute; top: -10px; inset-inline-start: 14px; }

/* ---------- Plan card ---------- */
.plan-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 6px; }
.plan-specs div { display: grid; }
.plan-specs dt { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.plan-specs dd { margin: 0; font-size: 13px; font-weight: 600; direction: ltr; text-align: end; }
[dir="rtl"] .plan-specs dd { text-align: right; }
.price { display: flex; align-items: baseline; gap: 4px; }
.price b { font-size: 24px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.price span { font-size: 13px; color: var(--ink-2); }

/* ---------- Summary ---------- */
.summary { display: grid; gap: 10px; font-size: 14px; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; }
.summary-row span:first-child { color: var(--ink-2); }
.summary-row span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; margin-top: 4px; border-top: 1px dashed var(--border-control); }
.summary-total span { font-weight: 700; }
.summary-total b { font-size: 24px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.summary-save { font-size: 13px; color: var(--success); font-weight: 600; text-align: end; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline li { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding-bottom: 20px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: 9px; top: 22px; bottom: 2px; width: 2px; background: var(--border); }
.timeline li:last-child::before { display: none; }
.timeline .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-control); background: var(--surface); display: grid; place-items: center; margin-top: 2px; }
.timeline li.is-done .dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.timeline li.is-done::before { background: var(--brand); }
.timeline li.is-current .dot { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.timeline li.is-failed .dot { border-color: var(--danger); background: var(--danger); color: var(--on-danger); }
.timeline .dot .ic { width: 12px; height: 12px; stroke-width: 3; }
.timeline .t-title { font-size: 14px; font-weight: 600; }
.timeline .t-when { font-size: 12px; color: var(--ink-3); }
.timeline li:not(.is-done):not(.is-current):not(.is-failed) .t-title { color: var(--ink-3); }

/* ---------- Dropzone ---------- */
.dropzone {
  display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 16px; cursor: pointer;
  border: 1.5px dashed var(--border-control); border-radius: var(--radius-lg); background: var(--surface-2);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--primary); background: var(--primary-soft); }
.dropzone .ic { width: 28px; height: 28px; color: var(--ink-2); }
.dropzone strong { font-size: 14px; }
.dropzone span { font-size: 12px; color: var(--ink-2); }
.file-chip { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.file-chip .fi { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); flex: none; }
.file-chip .fn { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .fs { font-size: 12px; color: var(--ink-2); }

/* ---------- Avatar ---------- */
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary-ink); font-size: 14px; font-weight: 700; }
.avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.avatar--lg { width: 48px; height: 48px; font-size: 18px; }

/* ---------- Progress ---------- */
.progress { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.progress--warning > i { background: var(--warning); }
.progress--danger > i { background: var(--danger); }

/* ---------- Range ---------- */
.range { width: 100%; accent-color: var(--primary); height: 24px; }

/* ---------- Kbd / tooltip ---------- */
.kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-control); color: var(--ink-2); background: var(--surface); }
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%);
  padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 600; line-height: 18px;
  white-space: nowrap; z-index: 50; pointer-events: none;
}
[dir="rtl"] [data-tip]:hover::after, [dir="rtl"] [data-tip]:focus-visible::after { transform: translateX(50%); }

/* ============================================================
   App shell
   ============================================================ */
.app { display: grid; grid-template-columns: var(--sidebar-w, 264px) 1fr; min-height: 100vh; }
.app.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed, 72px) 1fr; }
.nav-scrim { display: none; }

.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px;
  background: var(--nav-bg); border-inline-end: 1px solid var(--border); padding: 16px 12px; overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 16px; }
.sidebar-brand img { height: 28px; display: block; }
.sidebar-section { font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 16px 12px 6px; letter-spacing: .02em; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px;
  border-radius: var(--radius-md); color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none !important;
  border: 0; background: transparent; cursor: pointer; width: 100%; text-align: start;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--primary-soft); color: var(--primary-ink); }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
[dir="rtl"] .nav-item[aria-current="page"]::before { border-radius: 3px 0 0 3px; }
.nav-item .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .count-pill { margin-inline-start: auto; }
.nav-item[aria-current="page"] .count-pill { background: var(--primary); color: var(--on-primary); }
.app.is-collapsed .nav-label, .app.is-collapsed .sidebar-section, .app.is-collapsed .nav-item .count-pill, .app.is-collapsed .sidebar-foot-text, .app.is-collapsed .sidebar-brand .wordmark { display: none; }
.app.is-collapsed .nav-item { justify-content: center; padding: 0; }
.sidebar-foot { margin-top: auto; padding-top: 16px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.user-chip .who { min-width: 0; flex: 1; }
.user-chip .who b { display: block; font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .who span { display: block; font-size: 12px; line-height: 18px; color: var(--ink-2); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h, 64px); display: flex; align-items: center; gap: 12px;
  padding: 0 32px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar .search { flex: 1; max-width: 420px; position: relative; }
.topbar .search .input { padding-inline-start: 40px; background: var(--surface); min-height: 40px; }
.topbar .search .ic { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.topbar .spacer { flex: 1; }
.topbar .dot-badge { position: absolute; top: 8px; inset-inline-end: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg); }

.page { width: 100%; max-width: var(--content-max, 1240px); margin: 0 auto; padding: 28px 32px 64px; display: grid; gap: 24px; align-content: start; }
.page-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-hd h1 { font-size: 24px; line-height: 36px; font-weight: 700; }
.page-hd p { color: var(--ink-2); font-size: 14px; }
.page-hd .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin-bottom: 4px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.crumbs .ic { width: 14px; height: 14px; color: var(--ink-3); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.stack { display: grid; gap: 16px; align-content: start; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sticky { position: sticky; top: calc(var(--topbar-h, 64px) + 24px); }

.mobile-only { display: none !important; }

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main { grid-template-columns: 1fr; }
  .sticky { position: static; }
}
@media (max-width: 860px) {
  .app, .app.is-collapsed { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 85; width: min(86vw, 300px); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease); box-shadow: var(--shadow-lg); }
  [dir="ltr"] .sidebar { transform: translateX(-100%); }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .nav-scrim { display: block; }
  .nav-scrim { display: none; position: fixed; inset: 0; z-index: 84; background: var(--overlay); }
  .app.is-collapsed .nav-label, .app.is-collapsed .sidebar-section, .app.is-collapsed .nav-item .count-pill, .app.is-collapsed .sidebar-foot-text, .app.is-collapsed .sidebar-brand .wordmark { display: revert; }
  .app.is-collapsed .nav-item { justify-content: flex-start; padding: 0 12px; }
  .topbar { padding: 0 16px; }
  .topbar .search { display: none; }
  .page { padding: 20px 16px 48px; gap: 20px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .card-hd, .card-bd { padding-inline: 20px; }
  .card-ft { padding-inline: 20px; }
  .mobile-only { display: revert !important; }
  .desktop-only { display: none !important; }
  .btn, .input, .select { min-height: 44px; }
  .btn--sm { min-height: 36px; }
  .nav-item { min-height: 44px; }
}
@media (max-width: 520px) {
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 16px; }
  .stat-value { font-size: 22px; line-height: 30px; }
  .page-hd h1 { font-size: 20px; line-height: 30px; }
  .page-hd .actions { width: 100%; }
  .page-hd .actions .btn { flex: 1; }
  .dialog-ft { flex-direction: column-reverse; }
  .dialog-ft .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .skel::after { display: none; }
}

/* ---------- Logo (theme-swapped) ---------- */
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 28px; width: auto; }
.logo .logo--on-dark { display: none; }
[data-theme="dark"] .logo .logo--on-light { display: none; }
[data-theme="dark"] .logo .logo--on-dark { display: block; }
.logo-mark, .sidebar-brand .logo-mark { width: 28px; height: 28px; display: none; }
.app.is-collapsed .logo { display: none; }
.app.is-collapsed .logo-mark, .app.is-collapsed .sidebar-brand .logo-mark { display: block; }
.app.is-collapsed .sidebar-brand { flex-direction: column; }
@media (max-width: 860px) { .app.is-collapsed .logo { display: inline-flex; } .app.is-collapsed .logo-mark { display: none; } }

/* ---------- Usage meter ---------- */
.meter { display: grid; gap: 6px; }
.meter-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.meter-hd .k { color: var(--ink-2); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.meter-hd .v { font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }
.meter-hd .v small { font-weight: 500; color: var(--ink-3); }
.meter .progress { height: 8px; }
.meter.is-warn .progress > i { background: var(--warning); }
.meter.is-crit .progress > i { background: var(--danger); }
.meters { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ---------- Sparkline / mini chart ---------- */
.spark { width: 100%; height: 40px; display: block; overflow: visible; }
.spark .line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .area { fill: var(--brand); opacity: .12; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.bars .bar { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.bars .bar .track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bars .bar i { display: block; width: 100%; max-width: 36px; border-radius: 6px 6px 2px 2px; background: var(--brand); transition: opacity var(--dur-fast) var(--ease); }
.bars .bar.is-muted i { background: var(--surface-3); }
.bars .bar:hover i { opacity: .8; }
.bars .bar span { font-size: 11px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 13px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.donut { width: 132px; height: 132px; flex: none; }
.donut circle { fill: none; stroke-width: 5; }

/* ---------- Drawer (slide-over) ---------- */
.drawer-scrim { position: fixed; inset: 0; z-index: 80; background: var(--overlay); animation: fade var(--dur) var(--ease-out); }
.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 81; width: min(100vw, 520px);
  background: var(--surface); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: slide-in var(--dur-slow) var(--ease-out);
}
[dir="rtl"] .drawer { animation-name: slide-in-rtl; }
.drawer-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.drawer-hd h2 { font-size: 18px; line-height: 28px; }
.drawer-bd { flex: 1; overflow-y: auto; padding: 24px; display: grid; gap: 20px; align-content: start; }
.drawer-ft { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface); }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }
@keyframes slide-in-rtl { from { transform: translateX(-24px); opacity: 0; } }

/* ---------- Bulk bar ---------- */
.bulkbar {
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; padding-inline-start: 16px;
  background: var(--ink); color: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  font-size: 14px; font-weight: 600; animation: rise var(--dur) var(--ease-out);
}
.bulkbar .spacer { flex: 1; }
.bulkbar .btn--ghost { color: var(--surface); }
.bulkbar .btn--ghost:hover { background: color-mix(in srgb, var(--surface) 14%, transparent); }
.bulkbar .btn--secondary { background: transparent; color: var(--surface); border-color: color-mix(in srgb, var(--surface) 40%, transparent); }
.bulkbar .btn--secondary:hover { background: color-mix(in srgb, var(--surface) 14%, transparent); }

/* ---------- Command palette ---------- */
.cmdk-scrim { position: fixed; inset: 0; z-index: 95; background: var(--overlay); display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; animation: fade var(--dur) var(--ease-out); }
.cmdk { width: min(100%, 600px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: rise var(--dur-slow) var(--ease-out); }
.cmdk-input { display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.cmdk-input .ic { color: var(--ink-3); }
.cmdk-input input { flex: 1; min-height: 56px; border: 0; background: transparent; font-size: 16px; outline: none; }
.cmdk-list { max-height: 380px; overflow-y: auto; padding: 8px; }
.cmdk-group { font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 10px 12px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: transparent; text-align: start; font-size: 14px; color: var(--ink); cursor: pointer; }
.cmdk-item .ic { color: var(--ink-2); }
.cmdk-item .meta { margin-inline-start: auto; font-size: 12px; color: var(--ink-3); }
.cmdk-item[aria-selected="true"], .cmdk-item:hover { background: var(--primary-soft); }
.cmdk-item[aria-selected="true"] .ic { color: var(--primary-ink); }
.cmdk-foot { display: flex; gap: 16px; padding: 10px 20px; border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-3); background: var(--surface-2); }

/* ---------- Task list (action queue) ---------- */
.queue { display: grid; }
.queue-item { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--border); }
.queue-item:last-child { border-bottom: 0; }
.queue-item .q-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--ink-2); }
.queue-item .q-ic.is-warning { background: var(--warning-soft); color: var(--warning); }
.queue-item .q-ic.is-info { background: var(--primary-soft); color: var(--primary-ink); }
.queue-item .q-ic.is-danger { background: var(--danger-soft); color: var(--danger); }
.queue-item .q-ic.is-success { background: var(--success-soft); color: var(--success); }
.queue-item .q-body { flex: 1; min-width: 0; }
.queue-item .q-title { font-size: 14px; font-weight: 600; }
.queue-item .q-sub { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item .q-end { display: flex; gap: 8px; align-items: center; flex: none; }
@media (max-width: 520px) { .queue-item { padding: 14px 16px; flex-wrap: wrap; } .queue-item .q-end { width: 100%; justify-content: flex-end; } }

/* ---------- Server card ---------- */
.srv-card { display: grid; gap: 16px; padding: 20px; }
.srv-card-hd { display: flex; align-items: flex-start; gap: 12px; }
.srv-card-hd .srv-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); flex: none; }
.srv-card-hd .who { flex: 1; min-width: 0; }
.srv-card-hd .who b { display: block; font-size: 15px; line-height: 22px; }
.srv-card-hd .who span { display: block; font-size: 12px; color: var(--ink-2); }
.srv-card-ft { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-2); }
/* Innova Tech — public site.
   Layout: one 1200px column; a dark hero band with the server animation, light content bands, one dark hardware band. */
:root {
  --site-max: 1200px;
  --night: #0f0e17; --night-2: #17151f; --night-line: rgba(255,255,255,.09);
  --night-ink: #f1f0f6; --night-ink-2: #a6a3b6; --night-accent: #8aa3ff; --night-ok: #56c992;
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.wrap { width: 100%; max-width: var(--site-max); margin: 0 auto; padding-inline: 32px; }
h1, h2, h3 { text-wrap: balance; }
[lang="en"] body, [lang="en"] .site { letter-spacing: -0.005em; }
.site { min-height: 100vh; }

/* Promo */
.promo { background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 600; }
.promo .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; flex-wrap: wrap; padding-block: 6px; text-align: center; }
.promo .pct { font-family: var(--font-mono); background: rgba(255,255,255,.18); padding: 1px 8px; border-radius: 6px; }
.promo button.lnk { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.promo .x { background: none; border: 0; color: inherit; cursor: pointer; padding: 4px; display: grid; place-items: center; border-radius: 6px; }
.promo .x:hover { background: rgba(255,255,255,.15); }

/* Nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border); }
.nav .wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--ink-2); background: none; border: 0; cursor: pointer; }
.nav-links button:hover { color: var(--ink); background: var(--surface-2); }
.nav-links button[aria-current="page"] { color: var(--ink); }
.nav .grow { flex: 1; }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.lang-btn { min-width: 40px; font-weight: 700; font-size: 13px; }
.drop { position: relative; }
.mega { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); animation: rise var(--dur) var(--ease-out); z-index: 50; }
.mega button { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; padding: 12px; border-radius: var(--radius-md); background: none; border: 0; cursor: pointer; text-align: start; color: var(--ink); }
.mega button:hover { background: var(--surface-2); }
.mega .ic-tile { grid-row: span 2; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); }
.mega b { font-size: 14px; }
.mega span.s { font-size: 12px; color: var(--ink-2); }
.mega .mega-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 4px; border-top: 1px solid var(--border); margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.mob-menu { display: none; }
.mob-panel { position: fixed; inset: 68px 0 0 0; z-index: 39; background: var(--bg); padding: 16px; display: grid; gap: 4px; align-content: start; overflow-y: auto; animation: fade var(--dur) var(--ease-out); }
.mob-panel button.item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--radius-md); font-weight: 600; color: var(--ink); background: none; border: 0; text-align: start; cursor: pointer; font-size: 15px; }
.mob-panel button.item:hover { background: var(--surface-2); }

/* Hero */
.hero { background: var(--night); color: var(--night-ink); position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--night-line) 1px, transparent 1px), linear-gradient(90deg, var(--night-line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 30%, transparent 75%); opacity: .55; }
[dir="rtl"] .hero::before { mask-image: radial-gradient(ellipse 70% 70% at 30% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 30% 40%, #000 30%, transparent 75%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; padding-block: 80px 56px; }
.s-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #c9d3ff; background: rgba(138,163,255,.1); border: 1px solid rgba(138,163,255,.22); padding: 5px 14px; border-radius: var(--radius-pill); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--night-ok); box-shadow: 0 0 0 0 rgba(86,201,146,.6); animation: ping 2s var(--ease) infinite; flex: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(86,201,146,.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(86,201,146,0); } }
.hero h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.12; font-weight: 700; margin: 22px 0 18px; letter-spacing: -0.02em; }
[lang="ar"] .hero h1 { line-height: 1.3; letter-spacing: 0; }
.hero h1 em { font-style: normal; color: var(--night-accent); }
.hero p.lead { font-size: 18px; line-height: 30px; color: var(--night-ink-2); max-width: 540px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.btn--light { background: var(--night-accent); color: #0e0d15; }
.btn--light:hover { background: #a6b9ff; }
.btn--outline-light { background: transparent; color: var(--night-ink); border-color: rgba(255,255,255,.28); }
.btn--outline-light:hover { background: rgba(255,255,255,.06); }
.hero-trust { position: relative; border-top: 1px solid var(--night-line); }
.hero-trust .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-block: 0; }
.hero-trust .wrap > div { padding: 22px 0; padding-inline-end: 24px; }
.hero-trust .wrap > div + div { border-inline-start: 1px solid var(--night-line); padding-inline-start: 24px; }
.hero-trust b { display: block; font-size: 26px; line-height: 34px; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; text-align: start; }
[dir="rtl"] .hero-trust b { text-align: right; }
.hero-trust span { font-size: 13px; color: var(--night-ink-2); }

/* Server animation */
.rig { position: relative; display: grid; place-items: center; min-height: 460px; }
.rig svg.server { width: min(100%, 420px); height: auto; overflow: visible; }
.rig .glow { position: absolute; width: 70%; height: 30%; bottom: 8%; border-radius: 50%; background: radial-gradient(ellipse, rgba(88,124,250,.35), transparent 70%); filter: blur(18px); }
.rig .tag { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--night-2); border: 1px solid var(--night-line); font-size: 12px; font-weight: 600; color: var(--night-ink); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); white-space: nowrap; direction: ltr; font-family: var(--font-mono); }
.rig .tag small { color: var(--night-ink-2); font-weight: 500; }
.rig .tag.t1 { top: 6%; inset-inline-start: 0; animation: bob 6s var(--ease) infinite; }
.rig .tag.t2 { bottom: 16%; inset-inline-end: 0; animation: bob 7s .8s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.server .unit { fill: #1d1b29; stroke: #34314a; stroke-width: 1; }
.server .face { fill: #232134; }
.server .bay { fill: #13121c; stroke: #2c2a3d; stroke-width: 1; }
.server .vent { stroke: #2f2c41; stroke-width: 2; stroke-linecap: round; }
.server .rack { fill: #14131d; stroke: #2c2a3d; stroke-width: 1.5; }
.server .rail { fill: #1a1825; }
.server .lbl { font-family: var(--font-mono); font-size: 9px; fill: #6f6c84; letter-spacing: .1em; }
.server .led-ok { fill: #56c992; animation: blink 2.4s steps(2, jump-none) infinite; }
.server .led-act { fill: #8aa3ff; animation: blink .9s steps(2, jump-none) infinite; }
.server .led-warn { fill: #e9b555; }
.server .act-bar { fill: #587cfa; transform-box: fill-box; transform-origin: left center; animation: load 3.2s var(--ease) infinite alternate; }
.server .act-track { fill: #13121c; }
.server .sweep { animation: sweep 4.5s linear infinite; }
.server .cable { fill: none; stroke: #2f2c41; stroke-width: 2; }
.server .packet { fill: #8aa3ff; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes load { from { transform: scaleX(.25); } to { transform: scaleX(1); } }
@keyframes sweep { from { transform: translateY(-60px); } to { transform: translateY(400px); } }

/* Bands & section heads */
.band { padding-block: 96px; }
.band--alt { background: var(--surface); border-block: 1px solid var(--border); }
.band--night { background: var(--night); color: var(--night-ink); }
.sec-hd { display: grid; gap: 12px; max-width: 680px; margin-bottom: 44px; }
.sec-hd .kicker { font-size: 13px; font-weight: 700; color: var(--primary-ink); letter-spacing: .02em; }
.band--night .sec-hd .kicker { color: var(--night-accent); }
.sec-hd h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
[lang="ar"] .sec-hd h2 { line-height: 1.4; letter-spacing: 0; }
.sec-hd p { font-size: 17px; line-height: 28px; color: var(--ink-2); }
.band--night .sec-hd p { color: var(--night-ink-2); }
.sec-hd--center { margin-inline: auto; text-align: center; justify-items: center; }
.sec-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.sec-row .sec-hd { margin-bottom: 0; }

/* Product cards */
.products { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.product { display: grid; gap: 14px; align-content: start; grid-template-rows: auto 1fr auto; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--ink); cursor: pointer; text-align: start; font: inherit; transition: border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.product:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product .ic-tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); }
.product h3 { font-size: 17px; line-height: 26px; margin-bottom: 4px; }
.product p { font-size: 13.5px; color: var(--ink-2); line-height: 22px; }
.product .from { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-2); }
.product .from b { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Hardware band */
.hw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hw-card { border: 1px solid var(--night-line); border-radius: var(--radius-lg); background: var(--night-2); padding: 24px; display: grid; gap: 14px; }
.hw-card .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--night-ink-2); }
.hw-card .top .mono { font-size: 12px; }
.hw-card .val { display: flex; align-items: baseline; gap: 8px; direction: ltr; justify-content: flex-start; }
[dir="rtl"] .hw-card .val { justify-content: flex-end; }
.hw-card .val b { font-family: var(--font-mono); font-size: 44px; line-height: 1; font-weight: 600; color: var(--night-ink); letter-spacing: -0.03em; }
.hw-card .val span { font-size: 16px; font-weight: 600; color: var(--night-ink-2); }
.hw-card .track { position: relative; height: 8px; border-radius: 8px; background: rgba(255,255,255,.07); overflow: hidden; }
.hw-card .track i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: var(--brand); }
.hw-card .track i.base { background: rgba(88,124,250,.4); }
.hw-card .scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--night-ink-2); direction: ltr; }
.hw-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hw-chips span { font-family: var(--font-mono); font-size: 13px; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--night-line); color: var(--night-ink); background: rgba(255,255,255,.03); direction: ltr; }
.hw-chips span small { color: var(--night-ink-2); margin-inline-start: 6px; font-family: var(--font-sans); }

/* Steps + channels */
.order-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.steps { display: grid; gap: 0; }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding-bottom: 28px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; top: 44px; bottom: 4px; inset-inline-start: 21px; width: 2px; background: var(--border); }
.step:last-child::before { display: none; }
.step .n { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--brand); color: var(--primary-ink); font-weight: 700; font-family: var(--font-mono); }
.step h3 { font-size: 17px; line-height: 26px; padding-top: 8px; }
.step p { font-size: 14.5px; color: var(--ink-2); line-height: 24px; }
.step .meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--success); margin-top: 4px; }
.channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.channel { display: flex; gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.channel .ic-tile { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); flex: none; }
.channel b { display: block; font-size: 14.5px; }
.channel span { font-size: 12.5px; color: var(--ink-2); }

/* Network diagram */
.netmap { position: relative; padding: 28px; overflow: hidden; }
.netmap svg { width: 100%; height: auto; display: block; overflow: visible; }
.netmap .lat { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 6; }
.netmap .arc { fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: .55; stroke-dasharray: 4 6; animation: flow 1.6s linear infinite; }
.netmap .arc.off { stroke: var(--ink-3); opacity: .35; animation: none; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.netmap .node { fill: var(--brand); }
.netmap .node.off { fill: var(--warning); }
.netmap .halo { fill: var(--brand); opacity: .18; }
.netmap .city { font-size: 13px; font-weight: 700; fill: var(--ink); font-family: var(--font-sans); }
.netmap .ms { font-size: 11px; fill: var(--ink-2); font-family: var(--font-mono); }
.netmap .origin { fill: var(--ink); }
.netmap-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12.5px; color: var(--ink-2); margin-top: 12px; }
.netmap-legend span { display: inline-flex; align-items: center; gap: 8px; }
.netmap-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Features */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.feature { background: var(--surface); padding: 28px; display: grid; gap: 10px; align-content: start; }
.feature .ic-tile { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); margin-bottom: 6px; }
.feature h3 { font-size: 16.5px; line-height: 24px; }
.feature p { font-size: 14px; color: var(--ink-2); line-height: 23px; }

/* FAQ */
.faq { display: grid; max-width: 820px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; font-size: 16.5px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform var(--dur) var(--ease); color: var(--ink-2); flex: none; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details p { padding: 0 4px 22px; color: var(--ink-2); font-size: 15px; line-height: 26px; max-width: 700px; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; background: var(--night); color: var(--night-ink); border-radius: var(--radius-xl); padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; isolation: isolate; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--night-line) 1px, transparent 1px), linear-gradient(90deg, var(--night-line) 1px, transparent 1px); background-size: 40px 40px; opacity: .5; }
.cta-band h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.3; }
.cta-band p { color: var(--night-ink-2); margin-top: 8px; }
.cta-band .row { flex-wrap: wrap; }

/* Footer */
.footer { border-top: 1px solid var(--border); background: var(--surface); padding-block: 64px 32px; margin-top: 96px; }
.footer .cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
.footer h4 { font-size: 13px; font-weight: 700; margin: 0 0 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.footer ul button { background: none; border: 0; padding: 0; color: var(--ink-2); cursor: pointer; font: inherit; text-align: start; }
.footer ul button:hover { color: var(--ink); }
.footer .bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-2); }
.badges-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

/* Page hero (inner pages) */
.page-hero { padding-block: 64px 36px; }
.page-hero h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.2; letter-spacing: -0.02em; }
[lang="ar"] .page-hero h1 { line-height: 1.35; letter-spacing: 0; }
.page-hero p { font-size: 17px; line-height: 28px; color: var(--ink-2); margin-top: 12px; max-width: 640px; }
.page-hero--center { text-align: center; }
.page-hero--center p { margin-inline: auto; }
.page-hero.night { background: var(--night); color: var(--night-ink); }
.page-hero.night p { color: var(--night-ink-2); }

/* Pricing */
.price-ctl { display: grid; justify-items: center; gap: 20px; margin-bottom: 36px; }
.cycle-tog { display: inline-flex; align-items: center; gap: 10px; }
.save-pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); }
.type-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.type-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.type-tabs button:hover { color: var(--ink); border-color: var(--border-control); }
.type-tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; align-items: stretch; max-width: 1080px; margin-inline: auto; }
.plan { position: relative; display: grid; gap: 20px; align-content: start; grid-template-rows: auto auto auto 1fr; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.plan.is-pop { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-md); }
.plan .pop { justify-self: start; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: var(--radius-pill); }
.plan .ribbon { position: absolute; top: 18px; inset-inline-end: -40px; width: 150px; text-align: center; transform: rotate(45deg); background: var(--danger); color: var(--on-danger); font-size: 12px; font-weight: 700; padding: 5px 0; }
[dir="rtl"] .plan .ribbon { transform: rotate(-45deg); }
.plan h3 { font-size: 19px; line-height: 28px; }
.plan .desc { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; min-height: 22px; }
.plan .amount { display: grid; gap: 4px; }
.plan .amount .row { gap: 8px; align-items: baseline; flex-wrap: wrap; }
.plan .amount b { font-size: 40px; line-height: 48px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.plan .amount s { color: var(--ink-3); font-size: 16px; font-family: var(--font-mono); }
.plan .amount small { font-size: 13px; color: var(--ink-2); }
.plan ul { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: grid; gap: 11px; font-size: 14px; align-content: start; }
.plan ul li { display: flex; gap: 10px; align-items: flex-start; }
.plan ul .ic { color: var(--primary-ink); width: 16px; height: 16px; margin-top: 4px; flex: none; }
.plan .more { font-size: 13px; justify-self: start; background: none; border: 0; padding: 0; color: var(--primary-ink); cursor: pointer; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.seals { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 32px; padding: 18px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); font-size: 14px; color: var(--ink-2); }
.seals span { display: inline-flex; align-items: center; gap: 8px; }
.seals .ic { color: var(--success); width: 18px; height: 18px; }

/* Plan detail */
.detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.spec-grid > div { background: var(--surface); padding: 20px; display: grid; gap: 8px; }
.spec-grid .k { font-size: 12px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.spec-grid .v { font-size: 22px; font-weight: 700; direction: ltr; unicode-bidi: isolate; text-align: start; }
[dir="rtl"] .spec-grid .v { text-align: right; }
.buy-box { display: grid; gap: 18px; padding: 28px; border: 1.5px solid var(--primary); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.buy-box .big { font-size: 44px; line-height: 52px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.inc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; font-size: 15px; }
.inc-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.inc-list .ic { color: var(--success); margin-top: 4px; width: 18px; height: 18px; flex: none; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font-family: var(--font-mono); font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); direction: ltr; }
.night .pill { background: rgba(255,255,255,.05); border-color: var(--night-line); color: var(--night-ink); }

/* AI */
.gpu-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gpu-card { display: grid; gap: 16px; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.gpu-card.is-pop { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.gpu-card .gpu { font-size: 26px; font-weight: 700; direction: ltr; text-align: start; }
[dir="rtl"] .gpu-card .gpu { text-align: right; }
.gpu-card .vram { font-family: var(--font-mono); color: var(--primary-ink); font-size: 14px; direction: ltr; text-align: start; }
[dir="rtl"] .gpu-card .vram { text-align: right; }
.gpu-card dl { margin: 0; display: grid; gap: 8px; padding-block: 16px; border-block: 1px solid var(--border); }
.gpu-card dl div { display: flex; justify-content: space-between; font-size: 13.5px; }
.gpu-card dl dt { color: var(--ink-2); }
.gpu-card dl dd { margin: 0; font-family: var(--font-mono); font-size: 13px; direction: ltr; }
.codeblock { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.codeblock .cb-hd { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); direction: ltr; }
.codeblock pre { margin: 0; padding: 16px; background: #16141f; color: #e7e5f0; font-family: var(--font-mono); font-size: 13px; line-height: 22px; overflow-x: auto; direction: ltr; text-align: left; }
.codeblock pre .c-cmd { color: #8aa3ff; user-select: none; }

/* Storage calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); overflow: hidden; }
.calc > div { padding: 36px; }
.calc .readout { background: var(--surface-2); border-inline-start: 1px solid var(--border); display: grid; gap: 14px; align-content: center; }
.calc .readout .big { font-size: 48px; line-height: 56px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.calc .gb { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; display: inline-block; }
.calc ul { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: 14px; }
.calc ul li { display: flex; gap: 10px; align-items: center; }
.calc ul .ic { color: var(--primary-ink); width: 16px; height: 16px; }

/* Compare */
.cmp td, .cmp th { text-align: center; }
.cmp td:first-child, .cmp th:first-child { text-align: start; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.cmp th .nm { font-size: 16px; color: var(--ink); }
.cmp th .fr { font-family: var(--font-mono); color: var(--primary-ink); font-size: 12px; font-weight: 600; margin-top: 4px; }
.cmp tr.best td { color: var(--ink); font-weight: 600; }

/* Docs */
.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr) 200px; gap: 48px; align-items: start; padding-block: 40px 0; }
.docs-nav { position: sticky; top: 92px; display: grid; gap: 18px; font-size: 14px; }
.docs-nav h4 { font-size: 12px; font-weight: 700; color: var(--ink-3); margin: 0 0 6px; }
.docs-nav button { display: block; width: 100%; text-align: start; padding: 7px 10px; border-radius: 8px; color: var(--ink-2); background: none; border: 0; font: inherit; cursor: pointer; }
.docs-nav button:hover { background: var(--surface-2); color: var(--ink); }
.docs-nav button[aria-current="page"] { background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
.docs-search { position: relative; }
.docs-search .input { padding-inline-start: 38px; }
.docs-search .ic { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.article { max-width: 760px; display: grid; gap: 20px; }
.article h1 { font-size: 34px; line-height: 46px; }
.article .intro { font-size: 18px; line-height: 32px; color: var(--ink-2); }
.article h2 { font-size: 22px; line-height: 32px; margin-top: 12px; scroll-margin-top: 90px; }
.article p { font-size: 16px; line-height: 1.8; }
.toc { position: sticky; top: 92px; font-size: 13px; display: grid; gap: 8px; }
.toc h4 { font-size: 12px; font-weight: 700; color: var(--ink-3); margin: 0 0 4px; }
.toc button { background: none; border: 0; border-inline-start: 2px solid var(--border); padding: 2px 10px; text-align: start; color: var(--ink-2); font: inherit; cursor: pointer; }
.toc button:hover { color: var(--ink); border-color: var(--primary); }
.helpful { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 14px; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pn button { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--ink); background: var(--surface); text-align: start; font: inherit; cursor: pointer; }
.pn button:hover { border-color: var(--primary); }
.pn button small { color: var(--ink-2); font-size: 12px; }
.pn button.next { text-align: end; }

/* Checkout */
.checkout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.chan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.chan-details { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.chan-details .hd { padding: 12px 16px; background: var(--surface-2); font-weight: 700; font-size: 14px; }
.chan-details .rw { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 8px 10px 16px; padding-inline-start: 16px; border-top: 1px solid var(--border); font-size: 14px; }
.chan-details .rw span:first-child { color: var(--ink-2); }
.chan-details .rw .v { font-family: var(--font-mono); font-weight: 600; direction: ltr; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 4px; }
.done-box { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 56px 24px; }
.done-box .big-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--warning-soft); color: var(--warning); }
.done-box .big-ic .ic { width: 30px; height: 30px; }

@media (max-width: 1100px) {
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs { grid-template-columns: 220px minmax(0, 1fr); }
  .docs .toc { display: none; }
  .order-grid, .detail, .checkout { grid-template-columns: 1fr; }
  .gpu-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .wrap { padding-inline: 16px; }
  .nav-links, .nav-actions .desk { display: none; }
  .mob-menu { display: inline-flex; }
  .hero .wrap { grid-template-columns: 1fr; padding-block: 48px 40px; gap: 24px; }
  .rig { min-height: 340px; }
  .hero-trust .wrap { grid-template-columns: 1fr 1fr; }
  .hero-trust .wrap > div { padding: 16px 0; padding-inline-end: 12px; }
  .hero-trust .wrap > div + div { padding-inline-start: 12px; }
  .hero-trust .wrap > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .hero-trust .wrap > div:nth-child(n+3) { border-top: 1px solid var(--night-line); }
  .band { padding-block: 64px; }
  .products { grid-template-columns: 1fr 1fr; }
  .hw, .gpu-cards { grid-template-columns: 1fr; }
  .channels { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .calc .readout { border-inline-start: 0; border-top: 1px solid var(--border); }
  .calc > div { padding: 22px; }
  .cta-band { grid-template-columns: 1fr; padding: 32px 24px; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .docs { grid-template-columns: 1fr; gap: 24px; }
  .docs-nav { position: static; }
  .inc-list { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .chan-grid { grid-template-columns: 1fr 1fr; }
  .mega { position: fixed; inset-inline: 8px; width: auto; grid-template-columns: 1fr; }
  .netmap { padding: 16px; }
}
@media (max-width: 520px) {
  .products, .features { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; }
  .pn { grid-template-columns: 1fr; }
  .chan-grid { grid-template-columns: 1fr; }
  .calc ul { grid-template-columns: 1fr; }
  .hero-trust b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .server *, .rig .tag, .live-dot, .netmap .arc { animation: none !important; }
  .server .sweep { display: none; }
}

.chan-details .rw .v.v-ar { font-family: var(--font-sans); direction: rtl; font-weight: 600; }
[dir="ltr"] .chan-details .rw .v.v-ar { direction: ltr; }
.promo .pct { direction: ltr; unicode-bidi: isolate; }
/* ================= Site skin — netcup-style layout in the Innova Tech identity (logo blue + Cairo) =================
   Navy announcement bar + navy header and hero, lime primary call-to-action, a teal gradient card
   overlapping the hero, product cards with a floating illustration and a teal price panel,
   white sections with navy headings, a teal gradient footer. Content and behaviour are unchanged. */
:root {
  --nc-navy: #0f0e17; --nc-navy-deep: #17151f; --nc-navy-line: rgba(255,255,255,.1);
  --nc-teal: #8aa3ff; --nc-teal-ink: #587cfa; --nc-teal-dark: #3b5bdb; --nc-teal-darker: #2a3fa3;
  --nc-lime: #8aa3ff; --nc-lime-hover: #a6b9ff;
  --nc-grey: #f8f8f8; --nc-line: #e6e8ee; --nc-text: #646464; --nc-head: #191625;
  --nc-card: #ffffff; --nc-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 14px rgba(25,22,37,.08);
  --nc-shadow-hover: 0 4px 10px rgba(0,0,0,.08), 0 16px 34px rgba(25,22,37,.14);
  --nc-r: 9px; --nc-font: var(--font-sans);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --nc-grey: #17151f; --nc-line: #2a2838; --nc-text: #b8c0d6; --nc-head: #e9edf7; --nc-card: #1d1b29; --nc-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.3); --nc-shadow-hover: 0 4px 10px rgba(0,0,0,.35), 0 16px 34px rgba(0,0,0,.4); }
}
:root[data-theme="dark"] { --nc-grey: #17151f; --nc-line: #2a2838; --nc-text: #b8c0d6; --nc-head: #e9edf7; --nc-card: #1d1b29; --nc-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.3); --nc-shadow-hover: 0 4px 10px rgba(0,0,0,.35), 0 16px 34px rgba(0,0,0,.4); }

.is-site { font-family: var(--nc-font); color: var(--nc-text); }
:root[data-theme="dark"] .is-site main { background: #0f0e17; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .is-site main { background: #0f0e17; } }
.is-site h1, .is-site h2, .is-site h3 { font-family: var(--nc-font); }
.is-site .btn { border-radius: 8px; font-weight: 600; }
.is-site .btn--primary { background: var(--nc-teal); border-color: var(--nc-teal); color: #fff; }
.is-site .btn--primary:hover { background: var(--nc-teal-ink); border-color: var(--nc-teal-ink); }
.is-site .btn--secondary { background: transparent; border: 1px solid var(--nc-teal); color: var(--nc-teal-ink); }
.is-site .btn--secondary:hover { background: color-mix(in srgb, var(--nc-teal) 10%, transparent); }
.btn--lime { background: var(--nc-lime); border: 1px solid var(--nc-lime); color: #0e0d15; font-weight: 600; }
.btn--lime:hover { background: var(--nc-lime-hover); }
.btn--outline-light { background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff; }
.btn--outline-light:hover { background: rgba(255,255,255,.08); }
.btn--on-navy { background: var(--nc-lime); color: #0e0d15; border-color: var(--nc-lime); }

/* ---------- announcement bar + header (both navy) ---------- */
.topbar { background: var(--nc-navy); color: #fff; font-size: 14px; border-bottom: 1px solid var(--nc-navy-line); }
.topbar .wrap { display: flex; align-items: center; gap: 4px; min-height: 38px; }
.topbar .grow { flex: 1; }
.tb-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tb-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 8px; background: none; border: 1px solid transparent; color: var(--nc-teal); font: inherit; font-weight: 600; cursor: pointer; }
.tb-btn:hover { border-color: var(--nc-teal-ink); }
.nav { position: sticky; top: 0; background: var(--nc-navy); border-bottom: 1px solid var(--nc-navy-line); backdrop-filter: none; }
.nav .wrap { min-height: 78px; gap: 32px; }
.nav .logo--on-light { display: none !important; }
.nav .logo--on-dark { display: inline-block !important; }
.nav-links { gap: 4px; }
.nav-links button { font-family: var(--nc-font); font-size: 17px; font-weight: 600; color: var(--nc-teal); padding: 0 12px; border-radius: 8px; }
.nav-links button:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-links button[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--nc-lime); border-radius: 8px 8px 0 0; }
.nav-actions { gap: 10px; }
.nav-actions .nc-login { background: transparent; border: 1px solid var(--nc-teal-ink); color: var(--nc-teal); }
.nav-actions .nc-login:hover { background: rgba(88,124,250,.1); }
.nav-actions .btn--primary { background: var(--nc-lime); border-color: var(--nc-lime); color: #0e0d15; }
.nav-actions .btn--primary:hover { background: var(--nc-lime-hover); }
.mob-menu { color: var(--nc-teal) !important; }
.mega { border-radius: var(--nc-r); border: 1px solid var(--nc-line); box-shadow: var(--nc-shadow-hover); padding: 12px; background: var(--nc-card); }
.mega .ic-tile { border-radius: 8px; background: color-mix(in srgb, var(--nc-teal) 14%, transparent); color: var(--nc-teal-dark); }
.mega b { color: var(--nc-head); }
.mob-panel { inset: 78px 0 0 0; background: var(--nc-card); }
.mob-panel button.item { color: var(--nc-head); }
.mob-panel button.item .ic { color: var(--nc-teal-ink); }

/* ---------- hero ---------- */
.nc-hero { background: var(--nc-navy); color: #fff; position: relative; overflow: hidden; }
.nc-hero .wrap { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; padding-block: 40px 120px; }
.nc-hero-copy { max-width: 560px; }
.nc-hero .s-eyebrow { color: var(--nc-lime); background: rgba(138,163,255,.08); border: 1px solid rgba(138,163,255,.25); font-weight: 600; }
.nc-hero h1 { font-size: clamp(34px, 4.2vw, 50px); line-height: 1.12; font-weight: 700; margin: 18px 0 16px; color: #fff; letter-spacing: -0.01em; }
[lang="ar"] .nc-hero h1 { line-height: 1.35; letter-spacing: 0; }
.nc-hero h1 em { font-style: normal; color: var(--nc-teal); }
.nc-hero p.lead { font-size: 17px; line-height: 1.7; color: #fff; opacity: .92; }
.nc-hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.nc-hero .rig { min-height: 420px; }
.nc-hero .rig .glow { background: radial-gradient(ellipse, rgba(88,124,250,.35), transparent 70%); }
.nc-hero .rig .tag { background: var(--nc-navy-deep); border: 1px solid rgba(88,124,250,.35); color: #fff; }
.nc-hero .rig .tag small { color: #a6a3b6; }
.nc-hero .server .rack { fill: #171e36; stroke: #2c2a3d; }
.nc-hero .server .rail { fill: #1a1825; }
.nc-hero .server .unit { fill: #1d1b29; stroke: #34314a; }
.nc-hero .server .bay { fill: #13121c; stroke: #2c2a3d; }
.nc-hero .server .vent { stroke: #2f2c41; }
.nc-hero .server .lbl { fill: #6f6c84; }
.nc-hero .server .led-ok { fill: var(--nc-lime); }
.nc-hero .server .led-act { fill: var(--nc-teal); }
.nc-hero .server .act-track { fill: #13121c; }
.nc-hero .server .act-bar { fill: var(--nc-lime); }
.nc-hero .server .cable { stroke: #2f2c41; }
.nc-hero .server .packet { fill: var(--nc-lime); }

/* teal promo card + white facts card overlapping the hero bottom */
.nc-overlap { position: relative; z-index: 2; margin-top: -84px; }
.nc-overlap::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 84px; background: var(--nc-navy); z-index: -1; }
.nc-promo { position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 24px 32px; padding-inline-start: 72px; border-radius: var(--nc-r) var(--nc-r) 0 0; color: #fff; background: linear-gradient(100deg, var(--nc-teal-darker), var(--nc-teal-dark) 45%, #587cfa); }
.nc-corner { position: absolute; top: 18px; inset-inline-start: -34px; width: 130px; text-align: center; transform: rotate(-45deg); background: var(--nc-lime); color: #0e0d15; font-size: 12px; font-weight: 700; padding: 3px 0; }
[dir="rtl"] .nc-corner { transform: rotate(45deg); }
.nc-promo-pct { font-size: 40px; font-weight: 700; line-height: 1; color: var(--nc-lime); font-variant-numeric: tabular-nums; }
.nc-promo-title { flex: 1; min-width: 200px; font-size: 19px; font-weight: 600; }
.nc-x { background: none; border: 0; color: #fff; opacity: .7; cursor: pointer; padding: 6px; border-radius: 6px; display: grid; place-items: center; }
.nc-x:hover { opacity: 1; background: rgba(255,255,255,.1); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--nc-card); border-radius: var(--nc-r); box-shadow: var(--nc-shadow); }
.facts.has-promo { border-radius: 0 0 var(--nc-r) var(--nc-r); }
.facts > div { padding: 22px 26px; display: grid; gap: 2px; }
.facts > div + div { border-inline-start: 1px solid var(--nc-line); }
.facts b { font-size: 28px; line-height: 36px; font-weight: 700; color: var(--nc-head); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; text-align: start; }
[dir="rtl"] .facts b { text-align: right; }
.facts span { font-size: 14px; color: var(--nc-teal-dark); }
:root[data-theme="dark"] .facts span { color: var(--nc-teal); }

/* ---------- sections ---------- */
.band { padding-block: 84px; }
.band--grey, .band--alt { background: var(--nc-grey); border: 0; }
.band--alt { border-block: 0; }
.nc-overlap + .band--grey { margin-top: 0; padding-top: 96px; }
.sec-hd .kicker { font-size: 15px; font-weight: 700; color: var(--nc-teal-ink); letter-spacing: 0; }
.sec-hd h2 { font-weight: 700; color: var(--nc-head); }
.sec-hd p { color: var(--nc-text); }
.band--night { background: var(--nc-navy); }

/* ---------- product cards: floating illustration + teal price panel ---------- */
.products { gap: 22px; align-items: stretch; padding-top: 60px; }
.product { position: relative; padding: 0; gap: 0; overflow: visible; grid-template-rows: auto 1fr auto; text-align: center; justify-items: center; background: var(--nc-card); border: 0; border-radius: var(--nc-r); box-shadow: var(--nc-shadow); }
.product:hover { transform: translateY(-4px); box-shadow: var(--nc-shadow-hover); border: 0; }
.p-illu { display: block; width: 150px; margin-top: -64px; filter: drop-shadow(0 10px 14px rgba(59,91,219,.22)); }
.p-illu svg { width: 100%; height: auto; display: block; }
.p-body { padding: 8px 16px 18px; display: grid; gap: 6px; }
.product h3 { font-size: 21px; font-weight: 700; color: var(--nc-head); margin: 0; }
.product p { font-size: 14.5px; line-height: 1.5; color: var(--nc-teal-dark); }
:root[data-theme="dark"] .product p { color: var(--nc-teal); }
.p-price { align-self: stretch; justify-self: stretch; display: grid; justify-items: center; gap: 2px; padding: 16px 14px 18px; border-radius: 0 0 var(--nc-r) var(--nc-r); background: linear-gradient(160deg, #587cfa, var(--nc-teal-dark) 55%, var(--nc-teal-darker)); color: #fff; }
.p-price > small { font-size: 12.5px; font-weight: 600; opacity: .9; }
.p-amt { display: inline-flex; align-items: baseline; gap: 4px; }
.p-amt b { font-size: 30px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-amt small { font-size: 13px; opacity: .85; }
.p-btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid rgba(255,255,255,.7); border-radius: 8px; font-size: 14px; font-weight: 600; }
.product:hover .p-btn { background: rgba(255,255,255,.12); }
/* illustration palette (teal, isometric-feeling flat shapes) */
.i-shadow { fill: rgba(59,91,219,.18); }
.i-card { fill: #587cfa; stroke: #587cfa; stroke-width: 1.5; }
.i-noline { stroke: none; }
.i-bar { fill: var(--nc-navy); }
.i-dot { fill: #fff; opacity: .8; }
.i-soft { fill: #c9d3ff; }
.i-acc { fill: var(--nc-navy); }
.i-acc2 { fill: var(--nc-lime); }
.i-led { fill: var(--nc-lime); }
.i-chip { fill: var(--nc-lime); }
.i-pin { fill: #587cfa; }

/* ---------- hardware, ordering, network, features ---------- */
.hw-card { background: var(--nc-card); border: 0; border-radius: var(--nc-r); box-shadow: var(--nc-shadow); }
.hw-card .top, .hw-card .val span, .hw-card .scale { color: var(--nc-text); }
.hw-card .val b { color: var(--nc-head); font-family: var(--nc-font); font-weight: 700; }
.hw-card .track { background: var(--nc-grey); }
.hw-card .track i { background: var(--nc-teal); }
.hw-card .track i.base { background: color-mix(in srgb, var(--nc-teal) 35%, transparent); }
.hw-chips span { background: var(--nc-card); border-color: var(--nc-line); color: var(--nc-head); }
.hw-chips span small { color: var(--nc-text); }
.band--night .sec-hd h2, .band--night .sec-hd p { color: inherit; }
.step .n { background: var(--nc-teal); border-color: var(--nc-teal); color: #fff; }
.step::before { background: var(--nc-line); }
.step h3 { color: var(--nc-head); }
.step .meta { color: var(--nc-teal-dark); }
.channel { background: var(--nc-card); border: 0; border-radius: var(--nc-r); box-shadow: var(--nc-shadow); }
.channel .ic-tile { background: color-mix(in srgb, var(--nc-teal) 14%, transparent); color: var(--nc-teal-dark); border-radius: 8px; }
.channel b { color: var(--nc-head); }
.netmap.card { background: var(--nc-card); border: 0; border-radius: var(--nc-r); box-shadow: var(--nc-shadow); }
.netmap .node, .netmap .halo { fill: var(--nc-teal); }
.netmap .arc { stroke: var(--nc-teal); }
.features { gap: 22px; background: none; border: 0; border-radius: 0; overflow: visible; }
.feature { background: var(--nc-card); border: 0; border-radius: var(--nc-r); box-shadow: var(--nc-shadow); padding: 26px; }
.feature .ic-tile { width: 56px; height: 56px; border-radius: 8px; background: var(--nc-navy); color: var(--nc-teal); }
.feature h3 { font-size: 21px; font-weight: 700; color: var(--nc-head); }

/* ---------- FAQ ---------- */
.faq { gap: 12px; }
.faq details { background: var(--nc-card); border: 0; border-radius: var(--nc-r); box-shadow: var(--nc-shadow); }
.faq summary { padding: 18px 22px; color: var(--nc-head); font-size: 17px; }
.faq summary .ic { color: var(--nc-teal-ink); }
.faq details[open] summary { color: var(--nc-teal-dark); }
.faq details p { padding: 0 22px 20px; color: var(--nc-text); }

/* ---------- CTA band + footer ---------- */
.cta-band { background: linear-gradient(100deg, var(--nc-teal-darker), var(--nc-teal-dark) 50%, #587cfa); border-radius: var(--nc-r); color: #fff; }
.cta-band::after { display: none; }
.cta-band p { color: #dfe5ff; }
.footer { background: #0b0a12; color: #d6ddff; border-top: 0; margin-top: 96px; }
.footer h4 { color: #fff; font-size: 15px; }
.footer ul button { color: #d6ddff; }
.footer ul button:hover { color: var(--nc-lime); }
.footer .muted { color: #c9d3ff !important; }
.footer .bottom { border-top-color: rgba(255,255,255,.15); color: #c9d3ff; }
.footer .logo--on-light { display: none !important; }
.footer .logo--on-dark { display: inline-block !important; }
.footer .badge { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; }

/* ---------- inner pages ---------- */
.page-hero { background: var(--nc-navy); color: #fff; box-shadow: 0 0 0 100vmax var(--nc-navy); clip-path: inset(0 -100vmax); margin-bottom: 48px; }
.page-hero--stage { margin-bottom: 0; }
.page-hero h1 { color: #fff; font-weight: 700; }
.page-hero p { color: #c9c6d6; }
.page-hero .crumbs, .page-hero .crumbs span { color: #a6a3b6; }
.page-hero .crumbs .btn--link { color: var(--nc-teal); }
.page-hero--stage .s-eyebrow { color: var(--nc-lime); background: rgba(138,163,255,.08); border: 1px solid rgba(138,163,255,.25); }
.page-hero .pill { background: rgba(255,255,255,.06); border-color: var(--nc-navy-line); color: #fff; }
.price-ctl { margin-top: 8px; }
.type-tabs button { border-radius: 8px; font-weight: 600; background: var(--nc-card); border-color: var(--nc-line); color: var(--nc-head); }
.type-tabs button[aria-pressed="true"] { background: var(--nc-teal-dark); border-color: var(--nc-teal-dark); color: #fff; }
.save-pill { background: var(--nc-lime); color: #0e0d15; }
.plan, .gpu-card, .seals, .buy-box, .is-site .card { border-radius: var(--nc-r); }
.plan, .gpu-card, .seals { background: var(--nc-card); border: 0; box-shadow: var(--nc-shadow); }
.plan:hover, .gpu-card:hover { box-shadow: var(--nc-shadow-hover); }
.plan.is-pop, .gpu-card.is-pop { box-shadow: inset 0 0 0 2px var(--nc-teal), var(--nc-shadow-hover); }
.plan .pop { background: var(--nc-lime); color: #0e0d15; border-radius: 6px; }
.plan .ribbon { background: var(--nc-teal-dark); }
.plan h3, .gpu-card .gpu { color: var(--nc-head); font-weight: 700; }
.plan .desc { color: var(--nc-teal-dark); }
.plan .amount b { color: var(--nc-head); }
.plan ul .ic, .calc ul .ic, .inc-list .ic, .seals .ic { color: var(--nc-teal-ink); }
.buy-box { border: 2px solid var(--nc-teal); box-shadow: var(--nc-shadow-hover); }
.spec-grid { border-color: var(--nc-line); background: var(--nc-line); border-radius: var(--nc-r); }
.docs-nav button[aria-current="page"] { background: color-mix(in srgb, var(--nc-teal) 14%, transparent); color: var(--nc-teal-dark); }
.chan-details .hd { background: var(--nc-grey); color: var(--nc-head); }

@media (max-width: 1100px) {
  .nc-hero .wrap { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 860px) {
  .nav .wrap { min-height: 64px; }
  .mob-panel { inset: 64px 0 0 0; }
  .nc-hero .wrap { grid-template-columns: 1fr; padding-block: 24px 110px; gap: 4px; }
  .nc-hero-art { order: -1; }
  .nc-hero .rig { min-height: 280px; }
  .nc-promo { padding: 20px; padding-inline-start: 56px; gap: 12px; }
  .nc-promo-pct { font-size: 30px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div:nth-child(3) { border-inline-start: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--nc-line); }
  .facts > div { padding: 16px; }
  .band { padding-block: 60px; }
  .products { row-gap: 72px; }
}
@media (max-width: 520px) {
  .facts b { font-size: 22px; }
  .tb-status { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .product, .p-btn { transition: none; } }

/* ================= Hardware section — bento tiles, each with an animated sticker ================= */
.band--hw { background: var(--nc-navy); color: #f1f0f6; position: relative; overflow: hidden; isolation: isolate; }
.band--hw::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); }
.band--hw .sec-hd h2 { color: #fff; }
.band--hw .sec-hd p { color: #a6a3b6; }
.band--hw .sec-hd .kicker { color: #8aa3ff; }
.hw-node { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); font-size: 13px; color: #c9c6d6; }
.hwx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 16px; }
.hwx { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 24px; border-radius: 16px; background: #17151f; border: 1px solid rgba(255,255,255,.08); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hwx:hover { border-color: rgba(138,163,255,.45); transform: translateY(-3px); }
.hwx--cpu { grid-column: span 2; grid-row: span 2; grid-template-columns: 1fr; align-content: start; padding: 32px; background: radial-gradient(120% 80% at 80% 0%, rgba(88,124,250,.22), transparent 60%), #17151f; }
.hwx--mem, .hwx--ddos, .hwx--power { grid-column: span 2; }
.hwx--nvme, .hwx--net { grid-template-columns: 1fr; }
.hwx-body { display: grid; gap: 6px; min-width: 0; }
.hwx-val { display: flex; align-items: baseline; gap: 6px; direction: ltr; justify-content: flex-end; }
[dir="ltr"] .hwx-val { justify-content: flex-start; }
.hwx-val b { font-family: var(--font-sans); font-size: 44px; line-height: 1; font-weight: 700; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hwx--cpu .hwx-val b { font-size: 80px; }
.hwx-val span { font-size: 16px; font-weight: 700; color: #8aa3ff; }
.hwx h3 { font-size: 18px; line-height: 1.4; color: #fff; margin: 6px 0 0; }
.hwx-spec { font-size: 13.5px; color: #a6a3b6; }
.hwx-why { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.12); font-size: 14.5px; line-height: 1.6; color: #dfe5ff; }
.hwx-why .ic { color: #56c992; flex: none; margin-top: 4px; }
.hwx-meter { position: relative; height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 10px; }
.hwx-meter i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--to); border-radius: inherit; background: linear-gradient(90deg, #3b5bdb, #8aa3ff); animation: hwBoost 3.6s var(--ease) infinite alternate; }
@keyframes hwBoost { from { width: var(--to); } to { width: 100%; } }
.hwx-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11.5px; color: #a6a3b6; }

/* sticker: die-cut white border, slight tilt, soft drop */
.sticker { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 26px; padding: 6px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.08); transform: rotate(-6deg); transition: transform .4s var(--ease); flex: none; }
.sticker svg { width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(150deg, #587cfa, #2a3fa3); display: block; overflow: hidden; }
.hwx:nth-child(even) .sticker { transform: rotate(5deg); }
.hwx:hover .sticker { transform: rotate(0) scale(1.06); }
.hwx--cpu .sticker { width: 150px; height: 150px; border-radius: 36px; padding: 8px; justify-self: start; margin-bottom: 8px; }
.hwx--cpu .sticker svg { border-radius: 28px; }
.sticker--mem svg { background: linear-gradient(150deg, #6b5cf0, #3b2fa8); }
.sticker--nvme svg { background: linear-gradient(150deg, #3b5bdb, #1d2f86); }
.sticker--net svg { background: linear-gradient(150deg, #1ea6c7, #2a3fa3); }
.sticker--ddos svg { background: linear-gradient(150deg, #2fa577, #1f5f8f); }
.sticker--power svg { background: linear-gradient(150deg, #e9a23b, #c4513a); }

/* sticker artwork + motion */
.sticker .pins rect { fill: #c9d3ff; }
.sticker .die { fill: #1c2a78; }
.sticker .die-in { fill: #23338f; }
.sticker .core { fill: #8aa3ff; opacity: .35; animation: hwCore 2.1s ease-in-out infinite; }
@keyframes hwCore { 0%, 100% { opacity: .3; fill: #8aa3ff; } 45% { opacity: 1; fill: #e6ecff; } }
.sticker .stick { fill: #1d1a5e; }
.sticker .chip { fill: #e6e2ff; opacity: .9; animation: hwChip 1.6s ease-in-out infinite; }
.sticker .chip:nth-of-type(2n) { animation-delay: .4s; }
@keyframes hwChip { 50% { opacity: .45; } }
.sticker .gold rect { fill: #f3c45c; }
.sticker .notch { fill: #3b2fa8; }
.sticker .flow { stroke: #e6e2ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 10; fill: none; animation: hwFlow .9s linear infinite; }
.sticker .flow.f2 { opacity: .5; animation-duration: 1.4s; }
@keyframes hwFlow { to { stroke-dashoffset: -32; } }
.sticker .m2 { fill: #0f1b55; }
.sticker .m2-ctl { fill: #8aa3ff; }
.sticker .m2-nand { fill: #2b3f9e; stroke: #8aa3ff; stroke-width: 1; }
.sticker .m2-hole { fill: #c9d3ff; }
.sticker .bar-bg { fill: rgba(255,255,255,.18); }
.sticker .bar { fill: #fff; transform-box: fill-box; transform-origin: left center; animation: hwRead 1.8s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes hwRead { 0% { transform: scaleX(.02); } 70%, 100% { transform: scaleX(1); } }
.sticker .bolt { fill: #ffe27a; animation: hwBolt 1.8s ease-in-out infinite; transform-origin: 60px 30px; }
@keyframes hwBolt { 0%, 60%, 100% { opacity: 1; transform: scale(1); } 70% { opacity: .5; transform: scale(.9); } }
.sticker .globe { fill: rgba(255,255,255,.1); stroke: #e6f6ff; stroke-width: 2.5; }
.sticker .meridian { fill: none; stroke: #e6f6ff; stroke-width: 1.5; opacity: .6; }
.sticker .link { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 2; stroke-dasharray: 3 4; }
.sticker .pkt { fill: #fff; }
.sticker .shield { fill: rgba(255,255,255,.14); stroke: #eafff4; stroke-width: 3; stroke-linejoin: round; }
.sticker .shield-in { fill: rgba(255,255,255,.12); }
.sticker .tick { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.sticker .scan { fill: rgba(255,255,255,.7); animation: hwScan 2.4s ease-in-out infinite; }
@keyframes hwScan { 0%, 100% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .9; } 50% { transform: translateY(58px); } }
.sticker .threat { fill: #ff7a7a; animation: hwThreat 2.1s ease-in infinite; }
@keyframes hwThreat { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 55% { transform: translateX(var(--dx)); opacity: 1; } 70%, 100% { transform: translateX(calc(var(--dx) * .2)); opacity: 0; } }
.sticker .rack { fill: #3a1d14; opacity: .55; }
.sticker .ru { fill: #fff3df; }
.sticker .ru-led { fill: #3bd27f; animation: hwLed 1.2s steps(2, jump-none) infinite; }
@keyframes hwLed { 50% { opacity: .3; } }
.sticker .feed { stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 5 7; fill: none; animation: hwFlow .8s linear infinite; }
.sticker .feed.fb { animation-direction: reverse; }
.sticker .plug { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.sticker .ab { font: 700 13px var(--font-mono); fill: #fff; }

@media (max-width: 1100px) {
  .hwx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hwx--cpu { grid-row: auto; }
}
@media (max-width: 640px) {
  .hwx-grid { grid-template-columns: 1fr; }
  .hwx--cpu, .hwx--mem, .hwx--ddos, .hwx--power { grid-column: auto; }
  .hwx { grid-template-columns: auto 1fr; padding: 20px; }
  .hwx--cpu { padding: 22px; grid-template-columns: 1fr; }
  .hwx--cpu .hwx-val b { font-size: 56px; }
  .hwx--cpu .sticker { width: 116px; height: 116px; }
  .sticker { width: 76px; height: 76px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticker *, .hwx-meter i { animation: none !important; }
  .sticker .pkt { display: none; }
  .hwx, .sticker { transition: none; }
}

/* ================= Billing periods (3 options with savings badges) ================= */
.cycle-seg button { display: inline-flex; align-items: center; gap: 8px; }
.cycle-seg .save-pill { font-size: 11px; padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); font-weight: 700; white-space: nowrap; }
.cycle-seg button[aria-pressed="true"] .save-pill { background: var(--success); color: #fff; }

/* ================= Announcement bar — vivid gradient with faded edges ================= */
.promo { position: relative; z-index: 41; overflow: hidden; isolation: isolate; color: #fff; font-size: 14px; font-weight: 600; background: var(--nav-bg, #0f0e17); }
.promo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #7c3aed, var(--promo-c, #3b5bdb) 35%, #06b6d4 65%, #7c3aed);
  background-size: 200% 100%; animation: promoShift 9s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.promo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; z-index: -1; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
@keyframes promoShift { to { background-position: -200% 0; } }
.promo .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; padding-block: 6px; }
.promo-track { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.promo-spark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.2); animation: promoPulse 2.4s ease-in-out infinite; }
@keyframes promoPulse { 50% { transform: scale(1.15); background: rgba(255,255,255,.32); } }
.promo .pct { font-family: var(--font-mono); background: #fff; color: #3b2fa8; padding: 1px 9px; border-radius: 99px; font-weight: 700; direction: ltr; unicode-bidi: isolate; text-shadow: none; }
.promo button.lnk { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); border-radius: 99px; padding: 2px 12px; color: #fff; font: inherit; text-decoration: none; cursor: pointer; }
.promo button.lnk:hover { background: rgba(255,255,255,.26); }
.promo .x { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; opacity: .8; cursor: pointer; padding: 4px; display: grid; place-items: center; border-radius: 6px; }
.promo .x:hover { opacity: 1; background: rgba(255,255,255,.15); }
@media (max-width: 640px) { .promo .wrap { padding-inline-end: 40px; } .promo-title { font-size: 13px; } }

/* ================= Hardware tiles — technology first, numbers as badges ================= */
.hwx-head { font-size: 26px; line-height: 1.25; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.01em; }
.hwx--cpu .hwx-head { font-size: 44px; line-height: 1.15; }
.hwx-gen { font-size: 15px; color: #c9c6d6; }
.hwx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hwx-tags span { font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; border: 1px solid rgba(138,163,255,.35); background: rgba(138,163,255,.1); color: #c9d3ff; direction: ltr; unicode-bidi: isolate; }
@media (max-width: 640px) { .hwx--cpu .hwx-head { font-size: 32px; } .hwx-head { font-size: 22px; } }

/* ================= Permanent dark footer ================= */
.footer { background: #0b0a12 !important; color: #c9c6d6; }
.footer h4 { color: #fff; }
.footer ul button, .footer .bottom, .footer .muted { color: #a6a3b6 !important; }
.footer ul button:hover { color: #fff !important; }

/* ================= Light mode — bright and clean, no unintended dark surfaces ================= */
[data-theme="light"] .is-site { --nav-bg: #ffffff; }
[data-theme="light"] .topbar { background: #f4f6fb; color: var(--ink-2); border-bottom: 1px solid var(--nc-line); }
[data-theme="light"] .tb-status { color: var(--ink); }
[data-theme="light"] .tb-btn { color: var(--primary-ink); }
[data-theme="light"] .tb-btn:hover { border-color: var(--nc-line); background: #fff; }
[data-theme="light"] .nav { background: #ffffff; border-bottom: 1px solid var(--nc-line); box-shadow: 0 1px 0 rgba(15,14,23,.02); }
[data-theme="light"] .nav .logo--on-light { display: inline-block !important; }
[data-theme="light"] .nav .logo--on-dark { display: none !important; }
[data-theme="light"] .nav-links button { color: var(--ink); }
[data-theme="light"] .nav-links button:hover { color: var(--primary-ink); background: #f4f6fb; }
[data-theme="light"] .nav-links button[aria-current="page"] { color: var(--primary-ink); box-shadow: inset 0 -2px 0 var(--primary); }
[data-theme="light"] .nav-actions .nc-login { border-color: var(--nc-line); color: var(--ink); }
[data-theme="light"] .nav-actions .nc-login:hover { background: #f4f6fb; }
[data-theme="light"] .nav-actions .btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="light"] .mob-menu { color: var(--ink) !important; }

[data-theme="light"] .nc-hero { background: radial-gradient(90% 120% at 15% 0%, #e6ecff 0%, transparent 60%), linear-gradient(180deg, #f5f7ff, #ffffff); color: var(--ink); }
[data-theme="light"] .nc-hero h1 { color: #191625; }
[data-theme="light"] .nc-hero h1 em { color: var(--primary-ink); }
[data-theme="light"] .nc-hero p.lead { color: var(--ink-2); opacity: 1; }
[data-theme="light"] .nc-hero .s-eyebrow { color: var(--primary-ink); background: #fff; border-color: #dbe2ff; }
[data-theme="light"] .nc-hero .btn--lime { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="light"] .nc-hero .btn--lime:hover { background: var(--primary-ink); }
[data-theme="light"] .nc-hero .btn--outline-light { color: var(--ink); border-color: #cfd6ea; }
[data-theme="light"] .nc-hero .btn--outline-light:hover { background: #fff; }
[data-theme="light"] .nc-hero .rig .glow { background: radial-gradient(ellipse, rgba(88,124,250,.25), transparent 70%); }
[data-theme="light"] .nc-hero .rig .tag { background: #fff; border-color: #dbe2ff; color: var(--ink); box-shadow: 0 6px 18px rgba(25,22,37,.08); }
[data-theme="light"] .nc-hero .rig .tag small { color: var(--ink-2); }
[data-theme="light"] .nc-hero .server .rack { fill: #e9edfa; stroke: #cbd4ee; }
[data-theme="light"] .nc-hero .server .rail { fill: #dfe5f6; }
[data-theme="light"] .nc-hero .server .unit { fill: #ffffff; stroke: #cbd4ee; }
[data-theme="light"] .nc-hero .server .bay { fill: #eef1fa; stroke: #d5dcf0; }
[data-theme="light"] .nc-hero .server .vent { stroke: #cbd4ee; }
[data-theme="light"] .nc-hero .server .lbl { fill: #7a7f99; }
[data-theme="light"] .nc-hero .server .act-track { fill: #e3e8f7; }
[data-theme="light"] .nc-hero .server .act-bar, [data-theme="light"] .nc-hero .server .packet, [data-theme="light"] .nc-hero .server .led-act { fill: var(--primary); }
[data-theme="light"] .nc-hero .server .led-ok { fill: #22b07d; }
[data-theme="light"] .nc-hero .server .cable { stroke: #b9c4e6; }
[data-theme="light"] .nc-overlap::before { background: #ffffff; }
[data-theme="light"] .facts { border: 1px solid var(--nc-line); }

[data-theme="light"] .page-hero { background: linear-gradient(180deg, #f5f7ff, #ffffff); color: var(--ink); box-shadow: 0 0 0 100vmax #f5f7ff; border-bottom: 1px solid var(--nc-line); }
[data-theme="light"] .page-hero h1 { color: #191625; }
[data-theme="light"] .page-hero p { color: var(--ink-2); }
[data-theme="light"] .page-hero .crumbs, [data-theme="light"] .page-hero .crumbs span { color: var(--ink-2); }
[data-theme="light"] .page-hero .crumbs .btn--link { color: var(--primary-ink); }
[data-theme="light"] .page-hero--stage .s-eyebrow { color: var(--primary-ink); background: #fff; border-color: #dbe2ff; }
[data-theme="light"] .page-hero .pill { background: #fff; border-color: var(--nc-line); color: var(--ink); }

[data-theme="light"] .band--hw { background: #f6f7fc; color: var(--ink); }
[data-theme="light"] .band--hw::before { background-image: linear-gradient(rgba(25,22,37,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(25,22,37,.05) 1px, transparent 1px); }
[data-theme="light"] .band--hw .sec-hd h2 { color: #191625; }
[data-theme="light"] .band--hw .sec-hd p { color: var(--ink-2); }
[data-theme="light"] .band--hw .sec-hd .kicker { color: var(--primary-ink); }
[data-theme="light"] .hw-node { background: #fff; border-color: var(--nc-line); color: var(--ink-2); }
[data-theme="light"] .hwx { background: #ffffff; border-color: var(--nc-line); box-shadow: 0 1px 2px rgba(25,22,37,.04), 0 8px 24px rgba(25,22,37,.06); }
[data-theme="light"] .hwx:hover { border-color: #b9c6ff; }
[data-theme="light"] .hwx--cpu { background: radial-gradient(120% 80% at 80% 0%, rgba(88,124,250,.12), transparent 60%), #ffffff; }
[data-theme="light"] .hwx-head { color: #191625; }
[data-theme="light"] .hwx-gen { color: var(--ink-2); }
[data-theme="light"] .hwx-tags span { color: var(--primary-ink); background: #eef2ff; border-color: #d6defd; }
[data-theme="light"] .hwx-why { color: var(--ink); border-top-color: var(--nc-line); }
[data-theme="light"] .sticker { box-shadow: 0 10px 22px rgba(25,22,37,.16), 0 2px 0 rgba(25,22,37,.05); }
[data-theme="light"] .band--night { background: #f6f7fc; color: var(--ink); }
.hwx-head { unicode-bidi: plaintext; }
[dir="rtl"] .hwx-head { text-align: right; }
[data-theme="light"] .promo .x { color: var(--ink); }
[data-theme="light"] .page-hero { background: #f5f7ff; }

/* ================= Headline facts — four separate cards, each with an animated sticker ================= */
.facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fact { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 16px; background: var(--nc-card); box-shadow: var(--nc-shadow); border: 1px solid var(--nc-line); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fact:hover { transform: translateY(-3px); box-shadow: var(--nc-shadow-hover); }
.fact .sticker { width: 72px; height: 72px; border-radius: 20px; padding: 5px; box-shadow: 0 8px 18px rgba(25,22,37,.18), 0 2px 0 rgba(0,0,0,.06); }
.fact .sticker svg { border-radius: 16px; }
.fact:nth-child(even) .sticker { transform: rotate(5deg); }
.fact:hover .sticker { transform: rotate(0) scale(1.06); }
.fact-body { display: grid; gap: 2px; min-width: 0; }
.fact-body b { font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--nc-head); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; text-align: start; }
[dir="rtl"] .fact-body b { text-align: right; }
.fact-body span { font-size: 13.5px; line-height: 1.5; color: var(--nc-text); }
.sticker--up svg { background: linear-gradient(150deg, #2fa577, #1f6f8f); }
.sticker--act svg { background: linear-gradient(150deg, #8aa3ff, #3b5bdb); }
.sticker--net svg { background: linear-gradient(150deg, #1ea6c7, #2a3fa3); }
.sticker--sup svg { background: linear-gradient(150deg, #8b5cf6, #4c2fb0); }
/* uptime: heartbeat trace */
.sticker .beat-bg { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sticker .beat { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60 260; animation: fBeat 2.2s linear infinite; }
@keyframes fBeat { from { stroke-dashoffset: 60; } to { stroke-dashoffset: -260; } }
.sticker .beat-dot { fill: #b9ffd9; animation: hwLed 1.1s steps(2, jump-none) infinite; }
.sticker .up-bar { fill: #b9ffd9; opacity: .85; }
/* activation: stopwatch */
.sticker .sw-btn { fill: #e6ecff; }
.sticker .sw-face { fill: #1c2a78; stroke: #fff; stroke-width: 4; }
.sticker .sw-tick { stroke: #c9d3ff; stroke-width: 2.5; stroke-linecap: round; }
.sticker .sw-sweep { fill: rgba(138,163,255,.35); transform-origin: 60px 66px; animation: fSpin 4s linear infinite; }
.sticker .sw-hand { stroke: #ffe27a; stroke-width: 4; stroke-linecap: round; transform-origin: 60px 66px; animation: fSpin 4s linear infinite; }
.sticker .sw-hub { fill: #ffe27a; }
@keyframes fSpin { to { transform: rotate(360deg); } }
/* network: speed gauge */
.sticker .gauge-bg { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 10; stroke-linecap: round; }
.sticker .gauge { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: 126; animation: fGauge 2.8s cubic-bezier(.5,0,.2,1) infinite alternate; }
@keyframes fGauge { from { stroke-dashoffset: 110; } to { stroke-dashoffset: 8; } }
.sticker .g-tick { stroke: #e6f6ff; stroke-width: 2.5; stroke-linecap: round; opacity: .7; }
.sticker .needle { stroke: #ffe27a; stroke-width: 4; stroke-linecap: round; transform-origin: 60px 82px; animation: fNeedle 2.8s cubic-bezier(.5,0,.2,1) infinite alternate; }
@keyframes fNeedle { from { transform: rotate(-75deg); } to { transform: rotate(78deg); } }
.sticker .g-hub { fill: #fff; }
.sticker .g-lbl { font: 700 11px var(--font-mono); fill: #e6f6ff; letter-spacing: .08em; }
/* support: chat with typing dots */
.sticker .bub-a { fill: rgba(255,255,255,.22); }
.sticker .bub-b { fill: #fff; }
.sticker .ln { fill: #fff; opacity: .85; }
.sticker .ln2 { opacity: .55; }
.sticker .dot { fill: #6b4fe0; animation: fTyping 1.2s ease-in-out infinite; }
@keyframes fTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
:root[data-theme="dark"] .fact { border-color: rgba(255,255,255,.08); }
@media (max-width: 1100px) { .facts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .facts-grid { grid-template-columns: 1fr; gap: 10px; } .fact { padding: 16px; } .fact .sticker { width: 60px; height: 60px; } .fact-body b { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .fact, .fact .sticker { transition: none; } }

/* ================= Header — logo, links, language + theme icons, control-panel button ================= */
.nav-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: none; border: 1px solid transparent; color: var(--nc-teal); cursor: pointer; transition: all .3s ease-in-out; }
.nav-ic:hover { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(138,163,255,.3); }
[data-theme="light"] .nav-ic { color: var(--ink); }
[data-theme="light"] .nav-ic:hover { color: var(--primary-ink); background: #f4f6fb; border-color: var(--nc-line); }
.nav { -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); background: color-mix(in srgb, var(--nc-navy) 82%, transparent); }
[data-theme="light"] .nav { background: rgba(255,255,255,.78); }

/* ================= Glass surfaces over a soft ambient glow ================= */
.is-site { --nc-glass: rgba(29,27,41,.52); --nc-glass-line: rgba(138,163,255,.14); --nc-blur: blur(20px) saturate(150%); }
[data-theme="light"] .is-site { --nc-glass: rgba(255,255,255,.62); --nc-glass-line: rgba(25,30,70,.08); }
:root[data-theme="dark"] .is-site main { background-color: #0f0e17; background-image: radial-gradient(900px 600px at 88% 14%, rgba(88,124,250,.13), transparent 70%), radial-gradient(800px 600px at 8% 38%, rgba(139,92,246,.09), transparent 70%), radial-gradient(900px 700px at 85% 64%, rgba(88,124,250,.09), transparent 70%), radial-gradient(800px 600px at 12% 88%, rgba(34,211,238,.06), transparent 70%); }
[data-theme="light"] .is-site main { background-color: #f6f7fc; background-image: radial-gradient(900px 600px at 88% 14%, rgba(88,124,250,.12), transparent 70%), radial-gradient(800px 600px at 8% 38%, rgba(139,92,246,.08), transparent 70%), radial-gradient(900px 700px at 85% 64%, rgba(88,124,250,.08), transparent 70%), radial-gradient(800px 600px at 12% 88%, rgba(34,211,238,.07), transparent 70%); }
.is-site .band--grey, .is-site .band--alt { background: color-mix(in srgb, var(--nc-grey) 45%, transparent); }
.product, .plan, .gpu-card, .feature, .channel, .faq details, .netmap.card, .fact, .seals, .facts, .is-site .card, .buy-box, .mega, .mob-panel, .hwx {
  background-color: var(--nc-glass); border: 1px solid var(--nc-glass-line); -webkit-backdrop-filter: var(--nc-blur); backdrop-filter: var(--nc-blur); }
.hwx--cpu { background-color: var(--nc-glass); }
.mega, .mob-panel { background-color: color-mix(in srgb, var(--nc-card) 88%, transparent); }
.product { border: 1px solid var(--nc-glass-line); }

/* ================= Hover: scale + glow ================= */
.is-site .btn { transition: all .3s ease-in-out; }
.is-site .btn--primary:hover, .is-site .btn--lime:hover, .nav-actions .btn--primary:hover { box-shadow: 0 10px 30px -8px rgba(88,124,250,.75); transform: translateY(-1px); }
.is-site .btn--secondary:hover, .nav-actions .nc-login:hover { box-shadow: 0 8px 24px -10px rgba(88,124,250,.6); }
.plan, .gpu-card, .product, .feature, .channel, .fact { transition: transform .3s ease-in-out, box-shadow .3s ease-in-out, border-color .3s ease-in-out, opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1); }
.plan:hover, .gpu-card:hover { transform: translateY(-6px) scale(1.02); border-color: rgba(138,163,255,.5); box-shadow: 0 24px 60px -24px rgba(88,124,250,.6), 0 0 0 1px rgba(138,163,255,.25); }
.plan.is-pop:hover { box-shadow: inset 0 0 0 2px var(--nc-teal), 0 28px 70px -24px rgba(88,124,250,.75); }
.product:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 24px 60px -26px rgba(88,124,250,.55); }
.feature:hover, .channel:hover { transform: translateY(-3px) scale(1.01); border-color: rgba(138,163,255,.4); box-shadow: 0 18px 44px -24px rgba(88,124,250,.5); }

/* ================= Scroll reveal (fade-in + slide-up) ================= */
.rv { opacity: 0; translate: 0 26px; transition: opacity .7s ease var(--rd, 0s), translate .7s cubic-bezier(.2,.7,.2,1) var(--rd, 0s), transform .3s ease-in-out, box-shadow .3s ease-in-out, border-color .3s ease-in-out; }
.rv.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; translate: none; transition: none; }
  .plan:hover, .gpu-card:hover, .product:hover, .feature:hover, .channel:hover, .is-site .btn:hover { transform: none; }
}
/* ---------- Prototype-specific layout (built on Innova Panel tokens) ---------- */
html, body { min-height: 100%; }
body { overflow-x: hidden; }
#app { min-height: 100vh; }

/* Auth */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-side { position: relative; overflow: hidden; background: #121019; color: #f1f0f6; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.auth-side .slabs { position: absolute; inset-inline-end: -80px; bottom: -80px; width: 360px; height: 360px; opacity: .55; pointer-events: none; }
.auth-side > * { position: relative; }
.auth-side h1 { font-size: 32px; line-height: 44px; font-weight: 700; max-width: 440px; position: relative; }
.auth-side p { color: #a6a3b6; max-width: 420px; position: relative; }
.auth-points { display: grid; gap: 14px; position: relative; max-width: 420px; }
.auth-points div { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #d9d7e3; }
.auth-points .ic { color: #8aa3ff; margin-top: 3px; }
.auth-stats { display: flex; gap: 32px; position: relative; flex-wrap: wrap; }
.auth-stats b { display: block; font-size: 24px; line-height: 32px; }
.auth-stats span { font-size: 13px; color: #a6a3b6; }
.auth-main { display: grid; place-items: center; padding: 48px 24px; background: var(--surface); }
.auth-card { width: min(100%, 400px); display: grid; gap: 20px; }
.auth-card h2 { font-size: 24px; line-height: 36px; }
.auth-card .or { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-3); }
.auth-card .or::before, .auth-card .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.demo-note { font-size: 12px; color: var(--ink-2); background: var(--surface-2); border-radius: var(--radius-md); padding: 10px 12px; }

/* Topbar extras */
.topbar .search-btn { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-3); font-size: 14px; cursor: pointer; text-align: start; }
.topbar .search-btn:hover { border-color: var(--border-control); }
.topbar .search-btn .kbd { margin-inline-start: auto; }
.icon-btn-wrap { position: relative; }
.popover { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; width: 340px; animation: rise var(--dur) var(--ease-out); }
.popover .menu { min-width: 0; }
.notif { display: flex; gap: 12px; padding: 10px; border-radius: 8px; }
.notif:hover { background: var(--surface-2); }
.notif .q-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.notif b { display: block; font-size: 13px; line-height: 20px; }
.notif span { display: block; font-size: 12px; color: var(--ink-2); }
.role-switch { display: inline-flex; }
.env-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--warning-soft); color: var(--warning); }

/* Sections */
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-title h2 { font-size: 16px; line-height: 24px; font-weight: 700; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.toolbar .search-inline { position: relative; width: min(100%, 300px); }
.toolbar .search-inline .input { padding-inline-start: 38px; }
.toolbar .search-inline .ic { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.srv-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.list-rows { display: grid; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--border); cursor: pointer; }
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--surface-2); }
.list-row .grow { flex: 1; min-width: 0; }
.list-row b { display: block; font-size: 14px; line-height: 22px; }
.list-row small { display: block; font-size: 12px; color: var(--ink-2); line-height: 18px; }
.hero-strip { display: flex; align-items: center; gap: 16px; padding: 20px 24px; flex-wrap: wrap; }
.hero-strip .grow { flex: 1; min-width: 220px; }
.status-dot { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }

/* Detail header */
.detail-hd { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.detail-hd .srv-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); flex: none; }
.detail-hd .grow { flex: 1; min-width: 240px; }
.detail-hd h1 { font-size: 24px; line-height: 36px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.detail-meta span { display: inline-flex; gap: 6px; align-items: center; }
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.quick-actions .qa { display: grid; gap: 8px; justify-items: start; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; text-align: start; font-size: 14px; font-weight: 600; color: var(--ink); transition: border-color var(--dur-fast) var(--ease); }
.quick-actions .qa:hover { border-color: var(--border-control); }
.quick-actions .qa .ic { color: var(--primary-ink); }
.quick-actions .qa small { font-weight: 500; font-size: 12px; color: var(--ink-2); }
.guide-steps { counter-reset: g; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.guide-steps li { counter-increment: g; display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 14px; }
.guide-steps li::before { content: counter(g); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; font-size: 13px; }

/* Wizard */
.wizard { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.wizard-step { display: grid; gap: 20px; }
.wizard-step > header h2 { font-size: 20px; line-height: 30px; }
.wizard-step > header p { color: var(--ink-2); font-size: 14px; }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; }
.wizard-bar { display: none; }
.type-card { gap: 10px; }
.type-card .srv-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.type-card[aria-checked="true"] .srv-ic { background: var(--primary); color: var(--on-primary); }
.cycle-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sub-label { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-bottom: 8px; display: block; }
.months-ctl { display: flex; align-items: center; gap: 8px; }
.months-ctl .input { width: 88px; text-align: center; }

/* Checkout */
.pay-instr { display: grid; gap: 12px; padding: 20px; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border); }
.done { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 48px 24px; max-width: 560px; margin: 0 auto; }
.done .big-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--success-soft); color: var(--success); }
.done .big-ic .ic { width: 32px; height: 32px; }
.done h1 { font-size: 28px; line-height: 40px; }
.done p { color: var(--ink-2); }

/* Invoice document */
.invoice-doc { padding: 32px; display: grid; gap: 28px; }
.invoice-doc .inv-hd { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.invoice-doc .inv-hd img { height: 30px; }
.invoice-doc .inv-to { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.invoice-doc .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; margin-bottom: 6px; }
.invoice-doc .inv-total { display: flex; justify-content: flex-end; }
.invoice-doc .inv-total .summary { width: min(100%, 320px); }

/* Admin specifics */
.kpi-trend { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }
.table td .row { gap: 10px; }
.table .chk { width: 44px; }
.table .chk .check input { margin: 0; }
.inline-edit { width: 90px; min-height: 32px; padding: 4px 8px; font-size: 14px; }
.receipt-view { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); border: 1px solid var(--border); background: repeating-linear-gradient(0deg, var(--surface-2) 0 22px, var(--surface) 22px 23px); display: grid; place-items: center; text-align: center; padding: 24px; color: var(--ink-2); font-size: 13px; }
.receipt-view .paper { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; width: 80%; display: grid; gap: 8px; box-shadow: var(--shadow-md); }
.receipt-view .paper b { font-size: 22px; color: var(--ink); }
.promo-preview { border-radius: var(--radius-md); padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; font-weight: 600; color: #fff; flex-wrap: wrap; text-align: center; }
.promo-preview .pp-cta { background: rgba(255,255,255,.18); padding: 2px 10px; border-radius: var(--radius-pill); font-size: 12px; }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.danger-zone .card-hd h2 { color: var(--danger); }
.mini-list { display: grid; gap: 12px; }
.mini-list .mi { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.mini-list .mi .grow { flex: 1; min-width: 0; }
.mini-list .mi .bar-track { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.mini-list .mi .bar-track i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.note-item { padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-2); font-size: 14px; }
.note-item small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 4px; }

/* Responsive */
@media (max-width: 1100px) {
  .wizard { grid-template-columns: 1fr; }
  .wizard aside.wizard-summary { display: none; }
  .wizard-bar {
    display: flex; position: sticky; bottom: 0; z-index: 20; align-items: center; gap: 12px; justify-content: space-between;
    margin: 0 -32px -64px; padding: 12px 32px; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px -12px rgba(0,0,0,.15);
  }
  .wizard-bar b { font-size: 20px; }
  .wizard-bar small { display: block; font-size: 12px; color: var(--ink-2); }
  .wizard-nav { display: none; }
}
@media (max-width: 860px) {
  .topbar .search-btn { display: none; }
  .auth { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .wizard-bar { margin: 0 -16px -48px; padding: 12px 16px; }
  .popover { position: fixed; top: 64px; inset-inline: 8px; width: auto; }
  .list-row { padding: 12px 20px; }
  .invoice-doc { padding: 20px; }
  .stepper li:not(.is-current) .lbl span { display: none; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
}
.notif .q-ic.is-info { background: var(--primary-soft); color: var(--primary-ink); }
.notif .q-ic.is-success { background: var(--success-soft); color: var(--success); }
.notif .q-ic.is-warning { background: var(--warning-soft); color: var(--warning); }
.notif .q-ic.is-danger { background: var(--danger-soft); color: var(--danger); }

.topbar { top: env(safe-area-inset-top, 0px); }
.sidebar { top: env(safe-area-inset-top, 0px); }
/* ---- shared-platform bits ---- */
.sync-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 4px 10px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.sync-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.sync-pill i.is-busy { background: var(--warning); animation: syncPulse 1s ease-in-out infinite; }
@keyframes syncPulse { 50% { opacity: .35; } }
.sync-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--primary-ink); background: var(--primary-soft); border-radius: 8px; padding: 6px 10px; margin-bottom: 16px; }
.stat-sub .down { color: var(--danger); font-weight: 600; }
.demo-note > span { line-height: 22px; }
#offline { position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 40; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; pointer-events: none; opacity: .85; }
#offline[hidden] { display: none; }
/* ---- vertical fact list (hosting cards, overview, order review) ---- */
.facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.facts-list li { display: grid; grid-template-columns: 22px 130px 1fr; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.facts-list li:last-child { border-bottom: 0; }
.facts-list .k { color: var(--ink-2); font-size: 13px; }
.facts-list .v { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.facts-list .v small { font-weight: 500; }
.facts-list .v small.warn { color: var(--warning); font-weight: 700; }
.fact-ok, .fact-wait, .fact-bad { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.fact-ok { background: var(--success-soft, rgba(34,176,125,.14)); color: var(--success); }
.fact-wait { background: var(--surface-2); color: var(--ink-3); }
.fact-bad { background: var(--danger-soft, rgba(220,60,60,.12)); color: var(--danger); }
.fact-ok .ic, .fact-wait .ic, .fact-bad .ic { width: 12px; height: 12px; }
.ok-text { color: var(--success); }
.os-badge { display: inline-grid; place-items: center; min-width: 30px; height: 20px; padding: 0 5px; border-radius: 5px; color: #fff; font: 700 10px var(--font-mono); letter-spacing: .02em; flex: none; }
.srv-card .facts-list li { grid-template-columns: 22px 112px 1fr; padding: 7px 0; font-size: 13.5px; }
.link-ish { display: inline-flex; align-items: center; gap: 4px; color: var(--primary-ink); font-weight: 600; }
@media (max-width: 520px) { .facts-list li, .srv-card .facts-list li { grid-template-columns: 22px 1fr; } .facts-list .v { grid-column: 2; } }

/* ---- wizard in the site's card language ---- */
.wizard--full { grid-template-columns: 1fr !important; }
.wizard--full .wizard-step { max-width: none; }
.wiz-types.products { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 64px; row-gap: 78px; }
.wiz-types .product { cursor: pointer; }
.wiz-types .product.is-picked { box-shadow: 0 0 0 3px var(--primary), var(--nc-shadow-hover); }
.wiz-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.wiz-plans .plan.is-picked { box-shadow: inset 0 0 0 2px var(--primary), var(--nc-shadow-hover); }
.wiz-plans .plan ul { list-style: none; }
@media (max-width: 720px) { .wiz-types.products, .wiz-plans { grid-template-columns: 1fr; } }
.srv-card .facts-list li { grid-template-columns: 22px auto 1fr; }
.srv-card .facts-list .v { justify-content: flex-end; text-align: end; }
.srv-card .who { min-width: 0; }
.srv-card .who .mono { overflow-wrap: anywhere; }
.queue-item .q-body { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .queue-item { flex-wrap: wrap; } .queue-item .q-end { width: 100%; display: flex; justify-content: flex-end; } }
.queue { grid-template-columns: minmax(0, 1fr); }
/* ---- carried-over legacy features ---- */
.task-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.task-col { background: var(--surface-2); border-radius: 12px; padding: 10px; display: grid; gap: 8px; }
.task-col-hd { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 6px; font-size: 14px; }
.task-card { display: grid; gap: 6px; text-align: start; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.task-card:hover { border-color: var(--primary); }
@media (max-width: 1100px) { .task-board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .task-board { grid-template-columns: 1fr; } }
.doc-block { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.list-row.is-current { background: var(--primary-soft); }
.more-link { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.option-more { display: block; font-size: 13px; line-height: 1.6; color: var(--ink-2); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.wiz-block { position: relative; display: grid; gap: 16px; padding-block: 8px 28px; border-bottom: 1px dashed var(--border); margin-bottom: 20px; }
.wiz-block-n { position: absolute; inset-inline-start: -4px; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: 14px; }
.wiz-block > header { padding-inline-start: 40px; }
.dialog--wide { width: min(720px, calc(100vw - 32px)); }

/* ================= Login / register — soft dark canvas, faint glow, glass card (always dark) ================= */
.auth2 { --ink: #e8ebf5; --ink-2: #a3abc2; --ink-3: #737b94; --border: rgba(148,163,207,.16); --surface: transparent;
  position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px 32px; background: #0b0f19; color: var(--ink); }
.auth2::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: 760px; height: 560px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(88,124,250,.16), rgba(139,92,246,.06) 55%, transparent); pointer-events: none; }
.auth2-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 56px; direction: ltr; }
.auth2-brand img { height: 38px; }
.auth2-div { width: 1px; height: 34px; background: rgba(148,163,207,.35); }
.auth2-cp { display: flex; align-items: center; gap: 8px; color: #e8ebf5; }
.auth2-cp .ic { width: 24px; height: 24px; color: #8aa3ff; }
.auth2-cp span { display: grid; line-height: 1.05; }
.auth2-cp small { font-size: 10.5px; color: #a3abc2; letter-spacing: .02em; }
.auth2-cp b { font-size: 19px; font-weight: 700; }
.auth2-card { width: min(100%, 620px); display: grid; gap: 22px; padding: 48px 52px 40px; border-radius: 18px; background: rgba(15,23,42,.6); border: 1px solid #1e293b; -webkit-backdrop-filter: blur(40px) saturate(140%); backdrop-filter: blur(40px) saturate(140%); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 40px 90px -40px rgba(0,0,0,.8); animation: auth2In .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes auth2In { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.auth2-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: rgba(88,124,250,.1); border: 1px solid rgba(138,163,255,.3); font-size: 13.5px; line-height: 1.6; color: #c9d3ff; }
.auth2-alert .ic { flex: none; margin-top: 3px; color: #8aa3ff; }
.auth2-alert div { display: grid; gap: 2px; }
.auth2-alert b { font-size: 14.5px; color: #fff; }
.auth2-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.auth2-hd h1 { font-size: 28px; line-height: 1.3; font-weight: 700; color: #fff; margin: 0; }
.auth2-site { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 10px; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; transition: all .3s ease-in-out; }
.auth2-site:hover { color: #fff; border-color: rgba(138,163,255,.45); }
.auth2-site .ic:last-child { display: none; }
.auth2-card .field { gap: 8px; }
.auth2-card .label { font-size: 14.5px; font-weight: 600; color: #cbd2e6; }
.auth2-card .input { height: 48px; border-radius: 10px; border: 1px solid var(--border); background: rgba(2,6,23,.45); color: #fff; box-shadow: none; transition: border-color .3s ease-in-out, box-shadow .3s ease-in-out; }
.auth2-card .input:focus { border-color: #587cfa; box-shadow: 0 0 0 3px rgba(88,124,250,.22); outline: none; }
.auth2-card .input-group .input { border-start-end-radius: 0; border-end-end-radius: 0; }
.auth2-card .input-group .reveal { height: 48px; width: 52px; border: 1px solid var(--border); border-inline-start: 0; border-radius: 0; border-start-end-radius: 10px; border-end-end-radius: 10px; background: rgba(2,6,23,.45); color: var(--ink-2); }
[dir="rtl"] .auth2-card .input-group .input { border-radius: 0 10px 10px 0; }
[dir="rtl"] .auth2-card .input-group .reveal { border-radius: 10px 0 0 10px; border-inline-start: 1px solid var(--border); border-inline-end: 0; }
.auth2-card .seg { background: rgba(2,6,23,.45); border-color: var(--border); }
.auth2-card .seg button[aria-pressed="true"] { background: rgba(88,124,250,.2); color: #fff; }
.auth2-card .hint, .auth2-card .check span { color: var(--ink-2); }
.auth2-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -6px; font-size: 14.5px; }
.auth2-row a { color: #8aa3ff; }
.auth2-btns { display: grid; gap: 14px; margin-top: 8px; }
.auth2-main { height: 50px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, #6f8cff, #3b5bdb); color: #fff !important; font-size: 16.5px; box-shadow: 0 10px 30px -10px rgba(88,124,250,.75); transition: all .3s ease-in-out; }
.auth2-main:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 14px 40px -10px rgba(88,124,250,.95); filter: brightness(1.06); }
.auth2-alt { height: 50px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,207,.28); color: #e8ebf5; font-weight: 600; font-size: 16px; transition: all .3s ease-in-out; }
.auth2-alt:hover { background: rgba(255,255,255,.07); border-color: rgba(138,163,255,.5); }
.auth2-demo { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; flex-wrap: wrap; justify-content: center; }
.auth2-demo button { background: none; border: 0; padding: 0; color: #a3b5ff; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth2-foot { margin: 24px 0 0; font-size: 12.5px; color: #4f5770; }
.auth2 .err { color: #ff8a8a; }
@media (max-width: 640px) {
  .auth2 { justify-content: flex-start; padding-top: 36px; }
  .auth2-brand { margin-bottom: 32px; gap: 12px; }
  .auth2-brand img { height: 30px; }
  .auth2-card { padding: 28px 20px 24px; gap: 18px; }
  .auth2-hd h1 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .auth2-card { animation: none; } .auth2-main, .auth2-alt, .auth2-site { transition: none; } .auth2-main:hover { transform: none; } }

/* ================= QA test bar ================= */
#qa { position: fixed; z-index: 9000; bottom: 16px; left: 16px; font-family: var(--font-sans); direction: rtl; }
.qa-fab { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.14); background: #12131f; color: #e8ebf5; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px -8px rgba(0,0,0,.55); }
.qa-fab b { font-weight: 700; color: #ffd66b; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-fab .ic { color: #ffd66b; }
.qa-panel { width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 16px; background: #12131f; color: #e8ebf5; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); font-size: 13.5px; }
.qa-panel header { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #171927; border-bottom: 1px solid rgba(255,255,255,.08); }
.qa-panel header b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.qa-panel header b .ic { color: #ffd66b; }
.qa-panel header button { margin-inline-start: 4px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: none; border: 0; color: #a3abc2; cursor: pointer; }
.qa-panel header button:hover { background: rgba(255,255,255,.08); color: #fff; }
.qa-sync { margin-inline-start: auto; font-size: 11.5px; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.06); color: #a3abc2; white-space: nowrap; }
.qa-sync.is-ok { color: #6ee7a8; background: rgba(34,197,94,.12); }
.qa-sync.is-busy { color: #ffd66b; background: rgba(255,214,107,.12); }
.qa-sec { display: grid; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.qa-sec:last-child { border-bottom: 0; }
.qa-lbl { font-size: 12px; color: #a3abc2; }
.qa-lbl b { color: #fff; }
.qa-row { display: flex; gap: 6px; }
.qa-row button, .qa-grid button, .qa-wide { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #e8ebf5; font: inherit; font-size: 13px; cursor: pointer; }
.qa-row button:hover, .qa-grid button:hover, .qa-wide:hover { background: rgba(255,255,255,.09); border-color: rgba(138,163,255,.45); }
.qa-row button[aria-pressed="true"] { background: rgba(88,124,250,.22); border-color: #587cfa; color: #fff; }
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.qa-grid button { justify-content: flex-start; }
.qa-grid .ic, .qa-row .ic, .qa-wide .ic { color: #8aa3ff; flex: none; }
#qa select { height: 38px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); background: #0b0d18; color: #e8ebf5; font: inherit; font-size: 13px; padding: 0 8px; }
.qa-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qa-stats div { display: grid; gap: 1px; padding: 8px; border-radius: 9px; background: rgba(255,255,255,.03); text-align: center; }
.qa-stats b { font-size: 17px; }
.qa-stats span { font-size: 11px; color: #a3abc2; }
.qa-confirm { display: grid; gap: 10px; padding: 12px; border-radius: 10px; border: 1px solid rgba(248,113,113,.35); background: rgba(248,113,113,.08); }
.qa-confirm p { margin: 0; line-height: 1.6; color: #e8ebf5; }
.qa-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #cbd2e6; }
.qa-danger { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; font-weight: 700; }
.qa-wide:disabled, .qa-danger:disabled { opacity: .6; cursor: progress; }
@media print { #qa { display: none; } }
/* keep the QA bar out of the way of drawers, dialogs and the command palette */
body:has(#app .drawer) #qa, body:has(#app .dialog) #qa, body:has(#app .cmdk) #qa, body:has(.mob-panel) #qa { display: none; }
/* React-only additions (index.css: after the vendored prototype cascade). Existing tokens only. */

/* D-40: «رجوع / التالي» of the new-hosting wizard stay at the bottom of the screen while the plans scroll
   (≤1100 px the prototype's sticky .wizard-bar does the same). */
@media (min-width: 1101px) {
  .wizard-nav {
    position: sticky; bottom: 0; z-index: 20; align-items: center;
    padding: 14px 0; background: var(--bg); border-top: 1px solid var(--border);
  }
}

/* D-40: the kind reminder of what is still to choose, next to «التالي» */
.wiz-hint {
  display: inline-flex; align-items: center; gap: 8px; margin-inline: auto; padding: 8px 14px;
  border-radius: var(--radius-md, 10px); background: var(--primary-soft); color: var(--primary-ink);
  font-size: 14px; font-weight: 600; line-height: 1.5; animation: wizHintIn .25s ease-out both;
}
.wiz-hint .ic { flex: none; }
.wizard-bar { flex-wrap: wrap; }
.wizard-bar .wiz-hint { flex-basis: 100%; justify-content: center; margin: 0; }
@keyframes wizHintIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wiz-hint { animation: none; } }

/* D-43: on phones the plan page's columns may not grow past the screen (a grid item's min-width defaults to its content) */
.is-site .detail > * { min-width: 0; }
/* an absolutely positioned child (the «قياس» column's .sr-only label) escaped the scroll box and widened the page on phones */
.table-wrap { position: relative; }
.is-site .table-wrap { max-width: 100%; }

/* D-43: Arabic words in the site's monospace text (hero and hardware tags, GPU specs, map labels): Latin stays JetBrains Mono,
   Arabic falls back to Cairo instead of the system monospace (which drew it with unjoined letters); translated tags keep the
   page direction */
.is-site { --font-mono: "JetBrains Mono", "Cairo", ui-monospace, "SFMono-Regular", Menlo, monospace; }
.is-site .hwx-tags span.is-text { direction: inherit; }

/* D-44: desktop systems show their logo (shared/lib/osLogos.ts) instead of the coloured letters */
.os-badge--logo { background: none; padding: 0; min-width: 20px; width: 20px; }
.os-badge--logo svg, .os-logo svg { width: 100%; height: 100%; display: block; }
.option-logo.os-logo { background: var(--surface-2); padding: 7px; }

/* D-44: the site's logo at a readable size (48 px in the header, 44 px in the footer — Layout.tsx), smaller on phones */
@media (max-width: 760px) { .is-site .nav .logo img { height: 36px !important; } }
/* D-44: six services on the home page — two rows of three on wide screens (the narrower breakpoints are unchanged) */
@media (min-width: 1101px) { .is-site .products { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 72px; } }
/* D-44: the virtual-desktop page's operating systems */
.os-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.os-card { display: grid; justify-items: center; gap: 10px; padding: 24px 16px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.os-card .os-logo { width: 48px; height: 48px; }
.os-card b { font-size: 15px; }
.os-card small { color: var(--ink-2); font-size: 13px; }
@media (max-width: 860px) { .os-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* D-44: the additional-storage page's explanation (existing card/grid tokens) */
.storage-explain { gap: 16px; align-items: start; margin-bottom: 8px; }
.storage-explain h2 { font-size: 24px; }
.storage-explain h3 { font-size: 17px; }
.storage-explain p { color: var(--ink-2); line-height: 1.8; margin: 0; }
.storage-explain .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.storage-explain .check-list li { display: flex; gap: 8px; align-items: center; color: var(--ink-2); }
.storage-explain .check-list .ic { color: var(--success); }
.storage-explain .steps-list { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; color: var(--ink-2); line-height: 1.7; }
@media (max-width: 860px) { .storage-explain { grid-template-columns: 1fr; } }
/* D-44: four «who it is for» tiles as two rows of two */
@media (min-width: 861px) { .is-site .features.features--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* D-47 (owner request 2026-10-22): the sign-in buttons without their coloured glow */
.auth2-main, .auth2-main:hover { box-shadow: none; filter: none; }
/* D-47: a stack's column never grows past its container (long copy rows made the hosting pages scroll sideways on phones) */
.stack { grid-template-columns: minmax(0, 1fr); }
/* D-47: a fact that starts with a number or a Latin word keeps its order («6 vCPU · 16 GB», «3 Gbps») */
.facts-list .v { unicode-bidi: plaintext; }
/* D-47: phones — the to-do lines wrap instead of cutting the date, the server's id/host line stays on one line */
@media (max-width: 520px) { .queue .queue-item .q-sub { white-space: normal; overflow-wrap: normal; } }
.srv-card .srv-card-hd .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-card { grid-template-columns: minmax(0, 1fr); }
/* D-47: the dashboard's hostings now take the full width — wider cards (two per row on a laptop, one on a phone) */
.stack > .srv-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }

/* D-48 begin — mirrored into the prototype by shared/test/deviations.ts (PROTOTYPE_CSS reads this block) */
/* the sign-in button: flat, no glow, no shine */
.auth2 .auth2-main, .auth2 .auth2-main:hover { background: var(--brand); border-color: transparent; box-shadow: none; filter: none; transform: none; }
.auth2 .auth2-main:hover { background: #4a6ef0; }
/* service facts: one row each — name on one side, value on the other — on tinted rows (not invoice lines) */
.facts-list { gap: 6px; }
.facts-list li, .srv-card .facts-list li { grid-template-columns: 22px max-content minmax(0, 1fr); padding: 9px 12px; border: 0; border-radius: 10px; background: var(--surface-2); }
.facts-list .k { white-space: nowrap; }
.facts-list .v, .srv-card .facts-list .v { flex-wrap: wrap; justify-content: flex-end; text-align: end; min-width: 0; }
/* server cards wide enough for an address on one line (three per row on a laptop) */
.srv-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
@media (max-width: 520px) { .facts-list li, .srv-card .facts-list li { grid-template-columns: 22px max-content minmax(0, 1fr); padding: 8px 10px; } .facts-list .v { grid-column: auto; } }
/* D-48 end */

/* D-48 / D-50: «التحكم بالخادم» (no prototype source) — side navigation, section headings, tiles, action cards; tokens only */
.ctl { display: grid; gap: 20px; }
.ctl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-bottom: 4px; }
.ctl-head > div:first-child { min-width: 0; flex: 1 1 320px; }
.ctl-head h2 { margin: 0; font-size: 22px; line-height: 1.35; letter-spacing: -.01em; }
.ctl-head p { margin: 6px 0 0; max-width: 68ch; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.ctl-state { display: inline-flex; align-items: center; gap: 10px; flex: none; padding-top: 4px; }
.ctl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ctl-tile { display: grid; gap: 6px; align-content: start; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.ctl-tile .t-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.ctl-tile .t-value { font-size: 22px; font-weight: 700; line-height: 1.3; }
.ctl-tile .t-sub { font-size: 12px; color: var(--ink-3); }
.ctl-meter { display: block; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-2); }
.ctl-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .4s var(--ease, ease); }
.ctl-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.ctl-nav { position: sticky; top: calc(var(--topbar-h) + 12px); display: grid; gap: 2px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.ctl-nav button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); text-align: start; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.ctl-nav button:hover { background: var(--surface-2); color: var(--ink); }
.ctl-nav button[aria-current="true"] { background: var(--primary-soft); color: var(--primary-ink); }
.ctl-nav button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ctl-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.ctl-action { display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; }
.ctl-action:hover { border-color: var(--border-control); box-shadow: var(--shadow-sm); }
.ctl-action .a-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary-ink); }
.ctl-action.is-danger .a-ic { background: var(--danger-soft); color: var(--danger); }
.ctl-action h3 { margin: 0; font-size: 15px; }
.ctl-action p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--ink-2); }
/* D-50: the chart legend (name and current value, no dash) */
.ctl-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.ctl-legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.ctl-legend-item > i { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.ctl-legend-item > b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* D-50: the system picker of «إعادة التثبيت» — every system with its logo, in one bordered box */
.os-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; max-height: 336px; overflow-y: auto; padding: 10px; border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface-2); }
.os-pick-item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: start; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.os-pick-item:hover { border-color: var(--border-control); }
.os-pick-item[aria-checked="true"] { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.os-pick-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.os-pick-item .os-badge { flex: none; }
.os-pick-item .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-pick-empty { margin: 0; padding: 14px; border: 1px dashed var(--border-control); border-radius: var(--radius-md); color: var(--ink-3); font-size: 13.5px; }
@media (max-width: 960px) {
  .ctl-body { grid-template-columns: minmax(0, 1fr); }
  .ctl-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
  .ctl-nav::-webkit-scrollbar { display: none; }
  .ctl-nav button { width: auto; flex: none; white-space: nowrap; }
  .ctl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .ctl-head h2 { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .ctl-meter > span { transition: none; } }

/* D-49: the site's legal pages (/terms, /privacy, /unsubscribe) — site tokens only */
.is-site .footer .footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.is-site .footer .footer-legal button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.is-site .footer .footer-legal button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal { padding-top: 40px; padding-bottom: 72px; }
.legal-hero { display: grid; gap: 12px; justify-items: start; max-width: 860px; padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid var(--border); }
.legal-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-ink); font-size: 13px; font-weight: 700; }
.legal-hero h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1.25; letter-spacing: -.01em; }
.legal-hero > p { margin: 0; max-width: 700px; font-size: 17px; line-height: 1.9; color: var(--ink-2); }
.legal-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.legal-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.legal-print { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); padding: 5px 12px; font: inherit; color: var(--ink-2); cursor: pointer; }
.legal-print:hover { color: var(--ink); border-color: var(--border-control); }
.legal-switch { display: inline-flex; gap: 4px; padding: 4px; margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); }
.legal-switch a { padding: 8px 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.legal-switch a:hover { color: var(--ink); }
.legal-switch a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.legal-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.legal-toc { position: sticky; top: 96px; display: grid; gap: 10px; max-height: calc(100vh - 120px); overflow: auto; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.legal-toc b { font-size: 13px; color: var(--ink-3); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal-toc a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-decoration: none; border-inline-start: 2px solid transparent; }
.legal-toc a:hover { background: var(--surface-2); color: var(--ink); }
.legal-toc a[aria-current="true"] { color: var(--primary-ink); background: var(--primary-soft); border-inline-start-color: var(--primary); font-weight: 600; }
.legal-doc { max-width: 780px; font-size: 16px; line-height: 2; color: var(--ink); }
.legal-doc h2 { margin: 40px 0 12px; padding-top: 8px; font-size: 22px; line-height: 1.5; scroll-margin-top: 96px; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 { margin: 24px 0 8px; font-size: 17px; }
.legal-doc p { margin: 0 0 14px; color: var(--ink-2); }
.legal-doc ul { margin: 0 0 16px; padding-inline-start: 22px; display: grid; gap: 8px; color: var(--ink-2); }
.legal-doc li::marker { color: var(--primary); }
.legal-doc strong { color: var(--ink); }
.legal-doc a { color: var(--primary-ink); }
.legal-help { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-2); }
.legal-help > div { flex: 1; min-width: 220px; }
.legal-help b { font-size: 17px; }
.legal-help p { margin: 4px 0 0; color: var(--ink-2); }
.legal-help-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--primary-soft); color: var(--primary-ink); }
.legal-unsub { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 560px; margin: 40px auto; padding: 36px 28px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); }
.legal-unsub h1 { margin: 0; font-size: 26px; }
.legal-unsub p { margin: 0; color: var(--ink-2); line-height: 1.9; }
@media (max-width: 900px) {
  .legal-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .legal-toc { position: static; max-height: none; }
}
@media print {
  .is-site .nav, .is-site .footer, .promo, .legal-print, .legal-switch, .legal-toc, .legal-help, .mob-panel { display: none !important; }
  .legal-body { display: block; }
  .legal-doc { max-width: none; font-size: 12pt; }
}

/* D-49: the client panel's WhatsApp button (always on screen; outside #app) and the checkout agreement */
.wa-fab { position: fixed; z-index: 60; inset-inline-end: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding-block: 9px; padding-inline: 12px 16px; border-radius: var(--radius-pill); background: var(--brand); color: #fff; text-decoration: none; box-shadow: 0 10px 24px -10px rgba(59, 91, 219, .6); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.wa-fab:hover { transform: translateY(-2px); background: #4468ec; box-shadow: 0 14px 28px -10px rgba(59, 91, 219, .7); color: #fff; }
.wa-fab:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wa-fab svg { flex: none; }
.wa-fab-text { font-size: 14px; font-weight: 700; line-height: 1.2; }
@media (max-width: 760px) { .wa-fab { bottom: 84px; inset-inline-end: 14px; padding: 11px; } .wa-fab-text { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } .wa-fab:hover { transform: none; } }
@media print { .wa-fab { display: none; } }
.terms-accept { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); font-size: 13.5px; line-height: 1.7; cursor: pointer; }
.terms-accept input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.terms-accept a { color: var(--primary-ink); font-weight: 600; }
.terms-accept.is-invalid { border-color: var(--danger); background: var(--danger-soft); }
/* D-49: admin «الرسائل الجماعية» and «الشروط والسياسات» */
.mail-pick { display: grid; gap: 6px; max-height: 260px; overflow: auto; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.mail-preview { display: block; width: 100%; height: 520px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #f4f6fb; }
.mail-sender { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.legal-editor { min-height: 520px; font-size: 14px; line-height: 1.9; }
.legal-doc--panel { max-height: 640px; overflow: auto; font-size: 14px; line-height: 1.9; }
.legal-doc--panel h2 { font-size: 17px; margin-top: 22px; }

/* D-50 begin — mirrored into the prototype by shared/test/deviations.ts (PROTOTYPE_CSS reads this block) */
/* a lower top bar and less space above the page title: the content starts higher (both panels) */
:root { --topbar-h: 56px; }
.page { padding-top: 20px; }
@media (max-width: 860px) { .popover { top: calc(var(--topbar-h) + 4px); } .page { padding-top: 16px; } }
/* every system with a known logo shows it (server systems too), the same in the prototype */
.os-badge--logo { background: none; padding: 0; min-width: 20px; width: 20px; }
.os-badge--logo svg { width: 100%; height: 100%; display: block; }
/* D-50b: the client panel has no top bar on a desktop — the pages start at the top (its tools are in the sidebar) */
@media (min-width: 861px) { .app--client { --topbar-h: 0px; } .app--client .topbar { display: none; } }
/* D-50c (owner): the client pages start as high as they can; the narrow sidebar has no empty user box at its foot (the
   account menu above it has the name and «تسجيل الخروج»); Latin text and numbers in Cairo too (no monospace face) */
@media (min-width: 861px) { .app--client .page { padding-top: 12px; } .app--client.is-collapsed .user-chip { display: none; } }
.app--panel { --font-mono: var(--font-sans); } .app--panel code { font-family: inherit; }
/* D-50 end */

/* D-50: the client's top bar (a phone's since D-50b) — unpaid-invoice shortcut, the account menu */
.tb-due { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--warning-soft); color: var(--warning); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.tb-due:hover { color: var(--warning); box-shadow: inset 0 0 0 1px currentColor; }
.tb-due:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tb-user { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px; padding-inline-end: 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s ease; }
.tb-user:hover { border-color: var(--border-control); }
.tb-user:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tb-user .avatar { width: 32px; height: 32px; font-size: 13px; }
.tb-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-user-chev { color: var(--ink-3); }
.popover--account { width: 290px; }
.tb-user-hd { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px 4px; }
.tb-user-hd > div { display: grid; min-width: 0; }
.tb-user-hd b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-user-hd bdi, .tb-user-hd span { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-user-credit { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 6px 0; padding: 8px 10px; border-radius: 8px; background: var(--success-soft); color: var(--success); font-size: 13px; }
@media (max-width: 860px) {
  .tb-user-name, .tb-user-chev { display: none; }
  .tb-user { padding: 3px; border-color: transparent; background: none; }
  .tb-due { padding: 0 10px; }
  .tb-due span { display: none; }
}
/* D-50: the profile tab under its tabs keeps a readable width */
.pf-pane { max-width: 900px; }
/* D-50: «استضافاتي» as rows of labelled facts with a coloured edge for the state (owner: one way to show them, unlike the invoices' table) */
.svc-list { display: grid; gap: 10px; }
.svc-row { position: relative; display: grid; grid-template-columns: minmax(210px, 1.5fr) minmax(96px, .65fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(110px, .8fr) minmax(130px, .9fr) 18px; align-items: center; gap: 16px; padding: 14px 18px; padding-inline-start: 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.svc-row::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: -1px; width: 4px; border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--border-control); }
.svc-row.is-ok::before { background: var(--success); }
.svc-row.is-warn::before { background: var(--warning); }
.svc-row.is-danger::before { background: var(--danger); }
.svc-row:hover { border-color: var(--border-control); box-shadow: var(--shadow-sm); }
.svc-row:hover .svc-go { color: var(--primary-ink); transform: translateX(-2px); }
[dir="ltr"] .svc-row:hover .svc-go { transform: translateX(2px); }
.svc-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.svc-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.svc-id .srv-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary-ink); }
.svc-name { display: grid; gap: 2px; min-width: 0; }
.svc-name b { font-size: 15px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-name > span { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-cell { display: grid; gap: 4px; min-width: 0; }
.svc-k { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.svc-v { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 26px; font-size: 13.5px; }
.svc-v > span:not(.badge):not(.os-badge):not(.svc-copy), .svc-v > bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-v small { font-size: 12px; white-space: nowrap; }
.svc-v small.warn { color: var(--warning); }
.svc-copy .btn { min-height: 26px; width: 26px; height: 26px; }
.svc-go { color: var(--ink-3); transition: transform .15s ease, color .15s ease; }
.svc-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger); font-size: 13px; }
.svc-note.is-info { background: var(--primary-soft); color: var(--primary-ink); }
@media (max-width: 1180px) {
  .svc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
  .svc-id { grid-column: 1 / -1; padding-inline-end: 32px; }
  .svc-go { position: absolute; top: 26px; inset-inline-end: 16px; }
}
@media (max-width: 640px) { .svc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; padding-inline-start: 18px; } .svc-id { padding-inline-end: 24px; } .svc-v { font-size: 13px; } .svc-go { top: 24px; inset-inline-end: 12px; } }
@media (prefers-reduced-motion: reduce) { .svc-row, .svc-go { transition: none; } .svc-row:hover .svc-go { transform: none; } }
/* D-50b: «الأمان» — each item a row with its icon; the password change highlighted */
.sec-item { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sec-item .sec-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); }
.sec-item b { display: block; font-size: 15px; }
.sec-item p { margin: 4px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.sec-item--key { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--primary-soft); }
.sec-item--key .sec-ic { background: var(--primary); color: var(--on-primary); }
@media (max-width: 640px) { .sec-item { flex-wrap: wrap; } .sec-item--key .btn { width: 100%; } }
/* D-50b: one part per tab on the order, invoice and payment pages */
.dt-pane { display: grid; gap: 24px; }
/* D-50b: the client's top-bar tools in the sidebar (a row when open, a column when narrow); their menus open beside it */
.sb-tools { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.sb-tools .icon-btn-wrap { position: relative; }
.sb-tools .dot-badge { position: absolute; top: 8px; inset-inline-end: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--nav-bg); }
.sb-tools .avatar { width: 30px; height: 30px; font-size: 13px; }
.app:not(.is-collapsed) .sb-account { display: none; }
.app.is-collapsed .sb-tools { flex-direction: column; border: 0; padding: 0; }
.popover--side { z-index: 90; }
@media (max-width: 860px) { .sb-tools { display: none; } }

/* ---------------------------------------------------------------- D-50b: the order wizard as a configurator
   the current step + a live «ورقة الطلب» (its lines are the steps); plans as a comparison ladder; compact tiles */
.wz { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.wz-main { display: grid; gap: 22px; min-width: 0; }
.wz-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.wz-head h2 { margin: 2px 0 0; font-size: 22px; line-height: 1.35; }
.wz-head p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.wz-count { font-size: 12.5px; font-weight: 700; color: var(--primary-ink); }
.wz-progress { display: none; gap: 4px; }
.wz-progress span { flex: 1; height: 4px; border-radius: 4px; background: var(--surface-3); }
.wz-progress .is-done, .wz-progress .is-current { background: var(--brand); }
.wz-group { display: grid; gap: 10px; }
.wz-group h3 { margin: 0; font-size: 15px; }

/* type: wide rows with the illustration */
.wz-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.wz-type { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 14px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); font: inherit; color: inherit; text-align: start; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.wz-type-illu { grid-row: 1 / 3; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); overflow: hidden; }
.wz-type-illu svg { width: 100%; height: 100%; }
.wz-type-body { display: grid; gap: 2px; min-width: 0; padding-inline-end: 26px; }
.wz-type-body b { font-size: 16px; }
.wz-type-body span { font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.wz-type-price { font-size: 12.5px; color: var(--ink-3); }
.wz-type-price b { font-size: 14px; color: var(--ink); }

/* the shared picked state of every choice */
.wz-type:hover, .wz-tile:hover, .wz-addon:hover, .wz-plan:hover:not(:disabled) { border-color: var(--border-control); }
.wz-type[aria-checked="true"], .wz-tile[aria-checked="true"], .wz-addon[aria-pressed="true"], .wz-plan[aria-checked="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }
.wz-type:focus-visible, .wz-tile:focus-visible, .wz-addon:focus-visible, .wz-plan:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wz-tick { position: absolute; top: 12px; inset-inline-end: 12px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--border-control); color: transparent; }
.wz-type[aria-checked="true"] .wz-tick { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }

/* plans: the comparison ladder */
.wz-ladder { display: grid; gap: 10px; }
.wz-plan { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.4fr) minmax(150px, auto) 22px; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); font: inherit; color: inherit; text-align: start; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.wz-plan:disabled { cursor: not-allowed; opacity: .6; }
.wz-plan.is-pop { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.wz-plan-name { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.wz-plan-name b { font-size: 16px; }
.wz-plan-desc { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.wz-bars { display: grid; gap: 6px; min-width: 0; }
.wz-bar { display: grid; grid-template-columns: 54px minmax(40px, 1fr) minmax(0, auto); align-items: center; gap: 10px; font-size: 12.5px; }
.wz-bar small { color: var(--ink-3); font-size: 12px; }
.wz-bar bdi { font-weight: 600; white-space: nowrap; }
.wz-bar-track { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.wz-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.wz-plan-extra { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-plan-price { display: grid; justify-items: end; gap: 4px; text-align: end; }
.wz-amt { display: inline-flex; align-items: baseline; gap: 6px; }
.wz-amt b { font-size: 24px; line-height: 1.1; }
.wz-amt s { font-size: 13px; color: var(--ink-3); }
.wz-amt small, .wz-billed { font-size: 12px; color: var(--ink-3); }
.wz-out { font-size: 14px; color: var(--ink-3); }
.wz-radio { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-control); }
.wz-plan[aria-checked="true"] .wz-radio { border: 7px solid var(--primary); }

/* systems, panels, data centres: compact tiles; add-ons: switch rows */
.wz-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.wz-tiles--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.wz-tile, .wz-addon { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font: inherit; color: inherit; text-align: start; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.wz-tile:disabled { cursor: not-allowed; opacity: .55; }
.wz-tile .os-badge { margin-top: 2px; }
.wz-tile .option-logo { flex: none; }
.wz-tile-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); }
.wz-tile-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.wz-tile-body b { font-size: 14px; }
.wz-tile-body > span { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.wz-tile-price { flex: none; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.wz-more { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.wz-addons { display: grid; gap: 8px; }
.wz-switch { position: relative; flex: none; width: 36px; height: 20px; margin-top: 2px; border-radius: 20px; background: var(--surface-3); transition: background-color .15s ease; }
.wz-switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: inset-inline-start .15s ease; }
.wz-addon[aria-pressed="true"] .wz-switch { background: var(--primary); }
.wz-addon[aria-pressed="true"] .wz-switch::after { inset-inline-start: 18px; }

/* review */
.wz-review { margin: 0; display: grid; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.wz-review > div { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
.wz-review > div:first-child { border-top: 0; }
.wz-review dt { font-size: 13px; color: var(--ink-3); }
.wz-review dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }

/* the order sheet */
.wz-sheet { position: sticky; top: calc(var(--topbar-h, 0px) + 20px); display: grid; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.wz-sheet-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.wz-sheet-hd b { font-size: 15px; }
.wz-lines { list-style: none; margin: 0; padding: 4px 10px 10px; display: grid; }
.wz-lines li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; }
.wz-lines li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 20px; top: 36px; bottom: -8px; width: 2px; background: var(--border); }
.wz-lines li.is-done:not(:last-child)::after { background: var(--brand); }
.wz-lines li.is-current { background: var(--primary-soft); }
.wz-dot { position: relative; z-index: 1; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed var(--border-control); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--ink-3); }
.wz-lines .is-done .wz-dot { border: 0; background: var(--brand); color: #fff; }
.wz-lines .is-current .wz-dot { border: 2px solid var(--primary); color: var(--primary-ink); }
.wz-line { display: grid; min-width: 0; }
.wz-line small { font-size: 11.5px; color: var(--ink-3); }
.wz-line b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-line em { font-style: normal; font-size: 13px; color: var(--ink-3); }
.wz-sheet-empty { margin: 0 18px; padding: 14px; border: 1px dashed var(--border-control); border-radius: var(--radius-md); font-size: 13px; color: var(--ink-3); text-align: center; }
.wz-sum { display: grid; gap: 8px; margin: 0 18px; padding-top: 14px; border-top: 1px dashed var(--border-control); font-size: 13px; }
.wz-sum-row { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.wz-sum-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.wz-sum-total span { display: grid; font-weight: 700; }
.wz-sum-total small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.wz-sum-total b { font-size: 26px; line-height: 1.1; }
.wz-sheet-ft { display: grid; gap: 8px; padding: 16px 18px 18px; }
.wz-sheet-ft .hint { text-align: center; }
@media (max-width: 1280px) { .wz-plan { grid-template-columns: minmax(0, 1fr) minmax(150px, auto) 22px; } .wz-bars { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 1100px) {
  .wz { grid-template-columns: minmax(0, 1fr); }
  .wz-sheet { display: none; }
  .wz-progress { display: flex; }
}
@media (max-width: 640px) {
  .wz-plan { grid-template-columns: minmax(0, 1fr) 22px; gap: 12px; padding: 14px; }
  .wz-plan-price { grid-column: 1; justify-items: start; text-align: start; }
  .wz-bars { grid-row: auto; }
  .wz-review > div { grid-template-columns: minmax(0, 1fr) auto; }
  .wz-review dt { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .wz-type, .wz-tile, .wz-addon, .wz-plan, .wz-switch, .wz-switch::after { transition: none; } }
/* D-50b: an Arabic copy-row value (note, statement) in the text face, read right to left */
.copy-row .v.is-text { font-family: inherit; direction: rtl; letter-spacing: normal; }

/* ---------------------------------------------------------------- D-50b: the checkout as one guided track
   three numbered parts on a line (method → transfer slip → receipt) beside the summary sheet */
.co { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.co-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; min-width: 0; }
.co-track > li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding-bottom: 28px; }
.co-track > li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 16px; top: 38px; bottom: 4px; width: 2px; background: var(--border); }
.co-track > li.is-done:not(:last-child)::before { background: var(--brand); }
.co-n { position: relative; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--border-control); background: var(--surface); font-weight: 700; color: var(--ink-3); }
.co-track > li.is-done .co-n { border-color: var(--brand); background: var(--brand); color: #fff; }
.co-track > li.is-current .co-n { border: 2px solid var(--primary); color: var(--primary-ink); }
.co-part { display: grid; gap: 14px; min-width: 0; }
.co-part header h2 { margin: 4px 0 0; font-size: 18px; }
.co-part header p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.co-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.co-method { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font: inherit; color: inherit; text-align: start; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.co-method:hover { border-color: var(--border-control); }
.co-method[aria-checked="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }
.co-method:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.co-method-ic { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
.co-method[aria-checked="true"] .co-method-ic { background: var(--primary); color: var(--on-primary); }
.co-method-body { display: grid; min-width: 0; }
.co-method-body b { font-size: 14px; }
.co-method-body span, .co-method-eta { font-size: 12px; color: var(--ink-3); }

/* the transfer slip: the amount to send, as it should be typed in the transfer */
.co-slip { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); position: relative; }
.co-slip::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; border-start-start-radius: inherit; border-start-end-radius: inherit; background: var(--brand); }
.co-slip-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.co-slip-amt { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.co-slip-amt b { font-size: 34px; line-height: 1.15; letter-spacing: -.01em; }
.co-slip-rows { display: grid; gap: 8px; }
.co-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* the summary sheet (shares the wizard's sheet parts) */
.co-sheet { position: sticky; top: calc(var(--topbar-h, 0px) + 20px); display: grid; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.co-sheet .wz-sum { border-top: 0; padding-top: 4px; }
.co-credit { display: grid; gap: 8px; margin: 14px 14px 0; padding: 14px; border-radius: var(--radius-md); background: var(--success-soft); }
.co-bar { display: none; }
@media (max-width: 1100px) {
  .co { grid-template-columns: minmax(0, 1fr); }
  .co-sheet { position: static; }
  .co-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-fields .field:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .co-track > li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  .co-n { width: 28px; height: 28px; font-size: 13px; }
  .co-track > li:not(:last-child)::before { inset-inline-start: 13px; top: 32px; }
  .co-slip-amt b { font-size: 28px; }
  .co-fields { grid-template-columns: minmax(0, 1fr); }
  .co-bar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -16px -48px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); }
  .co-bar small { display: block; font-size: 12px; color: var(--ink-2); }
  .co-bar b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .co-method { transition: none; } }
.wz-head > div:first-child { min-width: 0; }
.wz-head .cycle-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.wz-head .cycle-seg button { flex: none; white-space: nowrap; }
@media (max-width: 640px) { .wz-head .cycle-seg { width: 100%; } }
/* D-50b: the wizard and checkout columns never grow past the screen (a grid item defaults to its widest line) */
.wz, .co, .wz-main, .co-track > li, .co-part { min-width: 0; }
.wz-main, .wz-ladder, .wz-addons, .co-track, .co-part { grid-template-columns: minmax(0, 1fr); }
.co-slip, .co-slip-rows, .co-methods, .co-fields { min-width: 0; }
.co-slip, .co-slip-rows { grid-template-columns: minmax(0, 1fr); }
/* D-50c: the access tab — how to connect (facts) and the login details by email only */
.access-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 10px; }
.access-facts > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-2); }
.access-facts dt { font-size: 12px; color: var(--ink-3); }
.access-facts dd { margin: 0; font-size: 15px; font-weight: 700; }
.access-mail { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: var(--radius-lg); background: var(--primary-soft); }
.access-mail-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--primary); color: var(--on-primary); }
.access-mail b { display: block; font-size: 15px; }
.access-mail p { margin: 4px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
@media (max-width: 640px) { .access-mail { flex-wrap: wrap; } .access-mail .btn { width: 100%; } }
/* D-50c: the hard disk card — a ring of used / free space, its figures, the format action; the driver row under it */
.disk-card { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.disk-ring { width: 120px; height: 120px; }
.disk-ring circle { fill: none; stroke-width: 12; }
.disk-ring-free { stroke: var(--surface-3); }
.disk-ring-used { stroke: var(--brand); stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.disk-ring-used.is-full { stroke: var(--warning); }
.disk-ring-pct { font-size: 22px; font-weight: 700; fill: var(--ink); }
.disk-ring-label { font-size: 11px; fill: var(--ink-3); }
.disk-facts { display: grid; gap: 10px; min-width: 0; }
.disk-name { display: flex; align-items: center; gap: 8px; }
.disk-name b { font-size: 16px; }
.disk-facts dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.disk-facts dl > div { display: grid; gap: 2px; }
.disk-facts dt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.disk-facts dd { margin: 0; font-size: 16px; font-weight: 700; }
.disk-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--surface-3); }
.disk-dot.is-used { background: var(--brand); }
.disk-driver { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-2); }
.disk-driver b { display: block; font-size: 14px; }
.disk-driver span { font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 640px) { .disk-card { grid-template-columns: 96px minmax(0, 1fr); } .disk-ring { width: 96px; height: 96px; } .disk-card > .btn { grid-column: 1 / -1; } .disk-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .disk-ring-used { transition: none; } }

/* D-52: fixes on the public site, its look unchanged —
   readable main buttons (white on the light brand blue was 2.3:1; dark text as on the header's «إنشاء حساب»),
   no text under 12px, the billing-period switch fits a phone, 44px taps for the header icons on a phone */
.is-site .btn--primary, .is-site .btn--primary:hover { color: #0e0d15; }
.is-site .save-pill { font-size: 12px; }
.netmap .ms { font-size: 12px; }
@media (max-width: 640px) {
  .is-site .cycle-tog { max-width: 100%; }
  .is-site .cycle-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .is-site .cycle-seg button { flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 6px 4px; white-space: nowrap; }
  .is-site .nav-ic, .is-site .mob-menu { min-width: 44px; min-height: 44px; }
  .is-site .promo .x { min-width: 44px; min-height: 44px; }
}

/* D-52 (owner 2026-10-28: «make it look like a senior human designer's work, user experience first» — same light site,
   same sections, cards and drawings): the template tells go, the details settle.
   colour-palette: one calm canvas instead of purple / cyan blobs, one accent, cards on a 1px hairline with a soft shadow
   (alpha < .08); the product cards keep their drawing and price area, in a neutral tone with one blue button. motion:
   no scale-and-glow hovers, no rainbow sweep or pulsing spark, a short reveal (8px, 300ms). typography: weights 600 at
   most, no single headline word in another colour, quieter section labels, Cairo for figures (code keeps monospace). */
:root[data-theme] .is-site main, .is-site main { background-image: none; }
[data-theme="light"] .is-site main { background-color: #f6f7fb; }
.is-site :is(.product, .feature, .channel, .fact, .faq details, .netmap.card, .seals, .plan, .gpu-card, .buy-box, .card) {
  -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--nc-card); border: 1px solid var(--nc-line);
  box-shadow: 0 1px 2px rgba(25, 22, 37, 0.04), 0 4px 16px -8px rgba(25, 22, 37, 0.07);
}
:root[data-theme="dark"] .is-site :is(.product, .feature, .channel, .fact, .faq details, .netmap.card, .seals, .plan, .gpu-card, .buy-box, .card) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.is-site :is(.product, .feature, .channel, .fact, .plan, .gpu-card, .hwx) { transition: transform 0.2s ease-out, opacity 0.3s ease-out; }
.is-site :is(.feature, .channel, .fact, .hwx):hover { transform: none; box-shadow: 0 1px 2px rgba(25, 22, 37, 0.04), 0 4px 16px -8px rgba(25, 22, 37, 0.07); }
.is-site :is(.product, .plan, .gpu-card):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--nc-teal-dark) 45%, var(--nc-line)); box-shadow: 0 1px 2px rgba(25, 22, 37, 0.04), 0 10px 24px -12px rgba(25, 22, 37, 0.07); }
.is-site .plan.is-pop:hover { box-shadow: inset 0 0 0 2px var(--nc-teal); }
.is-site .hwx:hover .sticker { transform: none; }
.is-site .btn { transition: transform 0.15s ease-out, opacity 0.15s ease-out; }
.is-site :is(.btn--primary, .btn--lime, .btn--secondary):hover, .is-site .nav-actions :is(.btn--primary, .nc-login):hover { box-shadow: none; transform: none; }
.is-site .rv { translate: 0 8px; transition: opacity 0.3s ease-out var(--rd, 0s), translate 0.3s ease-out var(--rd, 0s), transform 0.2s ease-out; }
.is-site .rv.is-in { translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .is-site .rv { translate: none; transition: none; } .is-site :is(.product, .plan, .gpu-card):hover { transform: none; } }
/* the offer bar: the colour chosen in the admin, flat, still */
.is-site .promo { background: var(--promo-c, #3b5bdb); }
.is-site .promo::before { display: none; }
.is-site .promo::after { background: rgba(255, 255, 255, 0.18); }
.is-site .promo-track { text-shadow: none; }
.is-site .promo-spark { animation: none; }
.is-site .promo .pct { font-family: var(--font-sans); }
/* product cards: drawing, name, description, then a quiet price area and one clear button */
.is-site .p-price { background: var(--nc-grey); color: var(--nc-head); border-top: 1px solid var(--nc-line); }
.is-site .p-price > small, .is-site .p-amt small { color: var(--nc-text); opacity: 1; font-weight: 500; }
.is-site .p-amt b { font-weight: 600; color: var(--nc-head); }
.is-site .p-btn { background: #3b5bdb; border-color: #3b5bdb; color: #fff; padding: 8px 16px; }
.is-site .product:hover .p-btn { background: #2f4bc0; }
.is-site .product p { color: var(--nc-text); }
/* type: one weight for headings, no coloured word, quieter labels, Cairo for numbers and names */
.is-site { --font-mono: var(--font-sans); }
.is-site .codeblock pre, .is-site .codeblock .cb-hd, .is-site .c-cmd, .is-site code { font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; }
.is-site :is(h1, h2, h3, h4, .nc-hero h1, .sec-hd h2, .product h3, .feature h3, .p-amt b, .fact-body b, .hwx-head, .step .n, .step .meta, .plan h3, .footer h4, .city, .netmap .city, b, strong) { font-weight: 600 !important; }
.is-site .nc-hero h1 em, [data-theme="light"] .is-site .nc-hero h1 em { color: inherit; }
.is-site .sec-hd .kicker { font-size: 14px; font-weight: 500; color: var(--nc-text); }
.is-site .s-eyebrow { font-weight: 500; }
.is-site .step .meta { font-size: 13px; }
.is-site .channel span { font-size: 13px; }
/* hero reassurance under the buttons */
.hero-assure { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hero-assure li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--nc-text); }
.hero-assure .ic { color: var(--success); }
/* one icon-tile style across the page; readable step numbers (white on the light blue was 2.3:1); one label colour */
.is-site .feature .ic-tile { background: color-mix(in srgb, var(--nc-teal) 14%, transparent); color: var(--nc-teal-dark); border-radius: 10px; }
:root[data-theme="dark"] .is-site .feature .ic-tile { color: var(--nc-teal); }
.is-site .step .n { background: #3b5bdb; border-color: #3b5bdb; color: #fff; }
[data-theme] .is-site .band--hw .sec-hd .kicker, .is-site .band--hw .sec-hd .kicker { color: var(--nc-text); }
:root[data-theme="dark"] .is-site .product p { color: var(--nc-text); }
/* phones: the promise and its buttons first, the drawing right after; the four figures two by two */
@media (max-width: 860px) {
  .is-site .nc-hero-copy { order: -1; }
  .is-site .nc-hero-art { order: 1; margin-top: 24px; }
}
@media (max-width: 640px) {
  .is-site .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .is-site .fact { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .is-site .fact .sticker { width: 52px; height: 52px; border-radius: 14px; padding: 4px; }
  .is-site .fact .sticker svg { border-radius: 11px; }
  .is-site .fact-body b { font-size: 22px; }
  .is-site .fact-body span { font-size: 13px; }
}
/* audit: the last 700 weights, the drawing's two readable tags at 12px, motion on transform / opacity only, 44px taps on a phone */
.is-site :is(.promo .pct, .save-pill, .plan .ribbon, .plan .pop, .spec-grid .v, .gpu-card .gpu, .gpu, .v) { font-weight: 600 !important; }
.is-site .rig .tag small, .is-site .rig .tag { font-size: 12px; }
.is-site *, .is-site *::before, .is-site *::after { transition-property: transform, opacity, translate !important; }
@media (max-width: 640px) {
  .is-site .promo button.lnk { min-height: 44px; padding-inline: 14px; }
  .is-site .nav .wrap > button:first-child { min-height: 44px; }
  .is-site .footer ul { gap: 0; }
  .is-site .footer ul button, .is-site .footer .footer-legal button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
  .is-site :is(.plan .more, .crumbs button, .crumbs a, .btn--link.btn--sm) { min-height: 44px; display: inline-flex; align-items: center; }
  .is-site .type-tabs button, .is-site .chips .chip { min-height: 44px; }
  .is-site .codeblock .cb-hd .btn { min-width: 44px; min-height: 44px; }
}
.is-site :is(.big, .gb, .readout .muted) { font-weight: 600 !important; }
@media (max-width: 640px) {
  .is-site .range { min-height: 44px; }
  .is-site .cmp .btn, .is-site .legal-print, .is-site .legal-switch a, .is-site .legal-toc a, .is-site .legal-toc button { min-height: 44px; display: inline-flex; align-items: center; }
}

/* D-56: the service cannot be reached — one calm bar at the top of every page (site and panels) */
.svc-status {
  position: fixed; z-index: 90; inset-inline: 16px; top: 12px; margin-inline: auto; max-width: 760px;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-inline-start: 4px solid var(--warning);
  box-shadow: 0 12px 32px -12px rgba(25, 22, 37, 0.25);
  animation: svc-status-in 0.2s ease-out;
}
.svc-status > .ic { flex: none; color: var(--warning); }
.svc-status-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.svc-status-body strong { font-size: 15px; font-weight: 600; }
.svc-status-body span { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.svc-status .btn { flex: none; }
@keyframes svc-status-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .svc-status { animation: none; } }
@media (max-width: 640px) { .svc-status { flex-wrap: wrap; top: 8px; inset-inline: 8px; } .svc-status .btn { min-height: 44px; width: 100%; } }

/* D-57: the documentation site — «/» hint in the search, the heading being read marked in «في هذه الصفحة», and on a phone a
   folded menu under the search (the article starts on the first screen) with 44px targets */
.docs-search .input { padding-inline-end: 40px; }
.docs-search .kbd { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); min-width: 22px; text-align: center; font-family: inherit; font-size: 12px; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); }
.docs-search .input:focus ~ .kbd, .docs-search .input:not(:placeholder-shown) ~ .kbd { opacity: 0; }
.docs-menu { display: grid; gap: 18px; }
.docs-nav .docs-menu-btn { display: none; }
.toc button { transition: color var(--dur-fast) var(--ease); }
.toc button[aria-current="location"] { color: var(--primary-ink); border-inline-start-color: var(--primary); font-weight: 600; }
@media (max-width: 860px) {
  .docs-nav { gap: 10px; }
  .docs-nav .docs-menu-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; text-align: start; cursor: pointer; }
  .docs-nav .docs-menu-btn:hover { background: var(--surface); }
  .docs-nav .docs-menu-btn small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); }
  .docs-nav .docs-menu-btn .ic { flex: none; color: var(--ink-3); transition: transform var(--dur-fast) var(--ease); }
  .docs-nav .docs-menu-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
  .docs-menu { display: none; gap: 14px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
  .docs-menu.is-open { display: grid; }
  .docs-search .kbd { display: none; }
  .docs-menu button, .helpful .btn, .pn button { min-height: 44px; }
  .helpful .btn { min-width: 64px; }
}
@media (prefers-reduced-motion: reduce) { .docs-nav .docs-menu-btn .ic, .docs-search .kbd, .toc button { transition: none; } }

/* D-58: layout-shaped shimmer skeletons (shared/components/Skeletons.tsx) — the page's own geometry while it loads; the
   shimmer follows the reading direction and stops under reduced motion (02-bundle) */
.skel-page { display: grid; gap: 24px; align-content: start; }
.skel-stack { display: grid; gap: 8px; }
.skel-head { align-items: flex-end; }
.skel-head > .skel-stack { flex: 1; min-width: 0; }
.skel-actions, .skel-chips { gap: 8px; flex-wrap: wrap; }
.skel-table { display: grid; }
.skel-tr { display: grid; gap: 16px; align-items: center; padding: 15px 16px; border-bottom: 1px solid var(--border); }
.skel-tr:last-child { border-bottom: 0; }
.skel-th { background: var(--surface-2); padding-block: 12px; }
.skel-cell-main { gap: 10px; min-width: 0; }
.skel-kv { display: flex; justify-content: space-between; gap: 16px; }
.skel-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.skel-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.skel-cols--main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.skel-detail-hd { gap: 16px; align-items: center; }
.skel-tabs { gap: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border); overflow: hidden; }
.skel-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.skel-col { display: grid; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.skel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.skel-block { padding-block: 4px; }
.skel-site-nav { border-bottom: 1px solid var(--border); background: var(--surface); padding-block: 16px; }
.skel-site-nav .wrap { justify-content: space-between; gap: 24px; }
.skel-site-links { gap: 28px; }
.skel-site-hero { display: grid; gap: 16px; padding-block: 64px 40px; justify-items: start; }
.skel-site-hero .skel-grid { width: 100%; }
[dir="rtl"] .skel::after { animation-name: shimmer-rtl; }
@keyframes shimmer-rtl { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); } }
@media (max-width: 860px) {
  .skel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .skel-cols, .skel-cols--main, .skel-grid { grid-template-columns: minmax(0, 1fr); }
  .skel-board { grid-template-columns: minmax(0, 1fr); }
  .skel-board > :nth-child(n + 2) { display: none; }
  .skel-tr { grid-template-columns: 1.6fr 1fr !important; }
  .skel-tr > :nth-child(n + 3) { display: none; }
  .skel-site-links, .skel-site-nav .wrap > .row:last-child { display: none; }
  .skel-site-hero { padding-block: 40px 24px; }
}
.skel-rail { display: grid; align-content: start; gap: 18px; }
.app--panel .skel-rail .skel { background: rgba(255, 255, 255, 0.08); }
.app--panel .skel-rail .skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); }
.skel-auth { width: min(440px, 100%); margin: 10vh auto; padding-inline: 16px; }

/* D-60: the navigation links (header, mega menu, phone menu, footer, docs menu, previous / next) are <a href> so search engines
   follow them; these are the rules of the buttons they replaced, generated from 03-site / 04-site-nc / 99-react */
:is(.nav-links, .mega, .mob-panel, .footer ul, .footer-legal, .docs-nav, .docs-menu, .pn) a { text-decoration: none; color: inherit; }
.nav-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--ink-2); background: none; border: 0; cursor: pointer; }
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.mega a { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; padding: 12px; border-radius: var(--radius-md); background: none; border: 0; cursor: pointer; text-align: start; color: var(--ink); }
.mega a:hover { background: var(--surface-2); }
.mob-panel a.item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--radius-md); font-weight: 600; color: var(--ink); background: none; border: 0; text-align: start; cursor: pointer; font-size: 15px; }
.mob-panel a.item:hover { background: var(--surface-2); }
.footer ul a { background: none; border: 0; padding: 0; color: var(--ink-2); cursor: pointer; font: inherit; text-align: start; }
.footer ul a:hover { color: var(--ink); }
.docs-nav a { display: block; width: 100%; text-align: start; padding: 7px 10px; border-radius: 8px; color: var(--ink-2); background: none; border: 0; font: inherit; cursor: pointer; }
.docs-nav a:hover { background: var(--surface-2); color: var(--ink); }
.docs-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
.pn a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--ink); background: var(--surface); text-align: start; font: inherit; cursor: pointer; }
.pn a:hover { border-color: var(--primary); }
.pn a small { color: var(--ink-2); font-size: 12px; }
.pn a.next { text-align: end; }
.nav-links a { font-family: var(--nc-font); font-size: 17px; font-weight: 600; color: var(--nc-teal); padding: 0 12px; border-radius: 8px; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-links a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--nc-lime); border-radius: 8px 8px 0 0; }
.mob-panel a.item { color: var(--nc-head); }
.mob-panel a.item .ic { color: var(--nc-teal-ink); }
.footer ul a { color: #d6ddff; }
.footer ul a:hover { color: var(--nc-lime); }
.docs-nav a[aria-current="page"] { background: color-mix(in srgb, var(--nc-teal) 14%, transparent); color: var(--nc-teal-dark); }
.footer ul a, .footer .bottom, .footer .muted { color: #a6a3b6 !important; }
.footer ul a:hover { color: #fff !important; }
[data-theme="light"] .nav-links a { color: var(--ink); }
[data-theme="light"] .nav-links a:hover { color: var(--primary-ink); background: #f4f6fb; }
[data-theme="light"] .nav-links a[aria-current="page"] { color: var(--primary-ink); box-shadow: inset 0 -2px 0 var(--primary); }
.is-site .footer .footer-legal a { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.is-site .footer .footer-legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .is-site .footer ul a, .is-site .footer .footer-legal a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; } }
@media (max-width: 860px) { .docs-menu a, .helpful .btn, .pn a { min-height: 44px; } }
/* D-51 (owner 2026-10-28): the client panel's own visual layer — a full redesign on the panel tokens. D-57 (owner 2026-10-29):
   the admin panel shares it, so the general rules are scoped to `.app--panel` (both panels) and the client-only screens to
   `.app--client`; the admin's own adjustments are at the end. Rules: frontend-design plan + vectorlab UX skills — Cairo only, weights
   400/500/600, no text under 12px, 44px touch targets on phones, borders before shadows, motion on transform/opacity only.
   The one bold element is the sidebar: a deep indigo "control rail" derived from the logo's blue. */

.app--panel {
  --rail: #151a3a;
  --rail-2: #1c2248;
  --rail-ink: #b9c0e3;
  --rail-ink-strong: #ffffff;
  --rail-line: rgba(255, 255, 255, 0.09);
  --rail-hover: rgba(255, 255, 255, 0.06);
  --rail-active: rgba(88, 124, 250, 0.2);
  --live: #1e9e6a;
  --radius-card: 14px;
  --content: 1200px;
  font-weight: 400;
}
[data-theme="dark"] .app--panel { --rail: #0e1226; --rail-2: #151a33; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app--panel { --rail: #0e1226; --rail-2: #151a33; } }

/* ---------------------------------------------------------------- weights and sizes (typography) */
.app--panel :is(b, strong, h1, h2, h3, h4, th) { font-weight: 600; }
.app--panel :is(.stat-value, .card-hd h2, .card-hd h3, .section-title h2, .page-hd h1, .count-pill, .table th, .table .cell-main,
  .nav-item, .sidebar-section, .btn, .chip, .badge, .tab, .seg button, .detail-hd h1, .summary-total b, .q-title) { font-weight: 600; }
.app--panel :is(.stat-label, .label, .chip .count, .badge) { font-weight: 500; }
.app--panel .page-hd h1 { font-size: 26px; line-height: 1.25; letter-spacing: -0.01em; }
.app--panel .page-hd p { font-size: 14px; line-height: 1.6; margin-top: 4px; }
.app--panel .card-hd h2, .app--panel .card-hd h3, .app--panel .section-title h2 { font-size: 16px; line-height: 1.4; }
.app--panel .stat-value { font-size: 28px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.app--panel :is(.svc-k, .svc-v small, .wz-line small, .save-pill, .eyebrow, .table .cell-sub, .list-row small, .badge, .count-pill,
  .chip .count, .wz-bar small, .wz-billed, .wz-amt small, .tb-user-hd span, .tb-user-hd bdi, .ctl-legend-item, .hint) { font-size: 12px; }
.app--panel .ctl-legend-item, .app--panel .hint { font-size: 13px; }
.app--panel svg text { font-size: 12px; }
.app--panel .num, .app--panel .t-num, .app--panel .stat-value { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- page frame */
.app--panel .page { max-width: var(--content); gap: 24px; padding-inline: 32px; }
.app--panel .page-hd { align-items: flex-end; padding-bottom: 4px; }

/* ---------------------------------------------------------------- the control rail (sidebar) */
.app--panel .sidebar { background: var(--rail); color: var(--rail-ink); border-inline-end: 0; padding: 18px 12px; }
.app--panel .sidebar .logo .logo--on-light { display: none; }
.app--panel .sidebar .logo .logo--on-dark { display: block; }
.app--panel .sidebar-brand { padding-bottom: 22px; }
.app--panel .sidebar-brand .btn--ghost, .app--panel .sidebar .btn--ghost { color: var(--rail-ink); }
.app--panel .sidebar .btn--ghost:hover { background: var(--rail-hover); color: var(--rail-ink-strong); }
.app--panel .sidebar-section { color: rgba(255, 255, 255, 0.42); font-size: 12px; padding: 18px 12px 8px; letter-spacing: 0; }
.app--panel .nav-item { color: var(--rail-ink); min-height: 42px; border-radius: 10px; font-size: 14px; }
.app--panel .nav-item .ic { opacity: 0.85; }
.app--panel .nav-item:hover { background: var(--rail-hover); color: var(--rail-ink-strong); }
.app--panel .nav-item[aria-current="page"] { background: var(--rail-active); color: var(--rail-ink-strong); }
.app--panel .nav-item[aria-current="page"] .ic { opacity: 1; }
.app--panel .nav-item[aria-current="page"]::before { background: var(--brand); inset-inline-start: -12px; top: 9px; bottom: 9px; }
.app--panel .nav-item .count-pill { background: rgba(255, 255, 255, 0.1); color: var(--rail-ink-strong); }
.app--panel .nav-item[aria-current="page"] .count-pill { background: var(--brand); color: #fff; }
.app--panel .nav-item:focus-visible, .app--panel .sidebar button:focus-visible { outline: 2px solid #8ea6ff; outline-offset: 2px; }
.app--panel .sidebar .card--sunken { background: var(--rail-2); border-color: var(--rail-line); color: var(--rail-ink); }
.app--panel .sidebar .card--sunken b { color: var(--rail-ink-strong); }
.app--panel .sidebar .card--sunken .muted { color: var(--rail-ink); }
.app--panel .sidebar .card--sunken .btn--secondary { background: transparent; color: var(--rail-ink-strong); border-color: var(--rail-line); }
.app--panel .sidebar .card--sunken .btn--secondary:hover { background: var(--rail-hover); }
.app--panel .sidebar .user-chip { border-color: var(--rail-line); }
.app--panel .sidebar .user-chip .who b { color: var(--rail-ink-strong); }
.app--panel .sidebar .user-chip .who span { color: var(--rail-ink); }
.app--panel .sb-tools { border-color: var(--rail-line); }
.app--panel .sb-tools .btn--ghost { color: var(--rail-ink); }
.app--panel .sb-tools .dot-badge { border-color: var(--rail); }
.app--panel .sb-tools .avatar { background: var(--brand); color: #fff; }

/* ---------------------------------------------------------------- surfaces: borders first, no stacked shadows */
.app--panel .card { border-radius: var(--radius-card); box-shadow: none; }
.app--panel .card-hd { padding: 18px 24px; }
.app--panel .table-wrap { border-radius: var(--radius-card); }
.app--panel .table th { font-size: 12px; padding: 12px 16px; }
.app--panel .table td { padding: 15px 16px; font-size: 14px; }
.app--panel .table tbody tr.is-link .t-go { width: 40px; color: var(--ink-3); }
.app--panel .table tbody tr.is-link:hover .t-go { color: var(--primary-ink); }
.app--panel .stat { padding: 20px 22px; gap: 6px; }
.app--panel .stat-label { font-size: 13px; color: var(--ink-2); }
.app--panel .stat-sub { font-size: 13px; }
.app--panel .card--link { cursor: pointer; transition: border-color 0.15s ease-out; }
.app--panel .card--link:hover { border-color: var(--border-control); }

/* ---------------------------------------------------------------- list toolbar: a search with a visible name */
.app--panel .search-labeled { display: flex; align-items: center; gap: 8px; min-height: 40px; width: min(100%, 340px); padding-inline: 12px; border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface); }
.app--panel .search-labeled:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.app--panel .search-labeled .ic { color: var(--ink-3); flex: none; }
.app--panel .search-labeled .search-name { flex: none; font-size: 13px; font-weight: 500; color: var(--ink-2); padding-inline-end: 8px; border-inline-end: 1px solid var(--border); }
.app--panel .search-labeled input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); min-height: 38px; }
.app--panel .list-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-2); }
.app--panel .list-foot .row { gap: 8px; }

/* ---------------------------------------------------------------- dashboard */
.app--panel .dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.app--panel .dash-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.app--panel .dash-health { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.app--panel .dash-health::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.app--panel .svc-mini { display: grid; }
.app--panel .svc-mini-row { display: grid; grid-template-columns: 36px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 20px; align-items: center; gap: 14px; padding: 12px 24px; border-bottom: 1px solid var(--border); cursor: pointer; text-align: start; background: none; border-inline: 0; border-top: 0; font: inherit; color: inherit; width: 100%; }
.app--panel .svc-mini-row:last-child { border-bottom: 0; }
.app--panel .svc-mini-row:hover { background: var(--surface-2); }
.app--panel .svc-mini-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.app--panel .svc-mini-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary-ink); }
.app--panel .svc-mini-name { display: grid; min-width: 0; }
.app--panel .svc-mini-name b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app--panel .svc-mini-name span, .app--panel .svc-mini-meta { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app--panel .svc-mini-go { color: var(--ink-3); }

/* ---------------------------------------------------------------- hostings list: one framed list with hairlines (Pattern 1) */
.app--panel .svc-frame { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.app--panel .svc-frame .svc-list { gap: 0; }
.app--panel .svc-frame .svc-row { border: 0; border-radius: 0; border-bottom: 1px solid var(--border); }
.app--panel .svc-frame .svc-row:last-child { border-bottom: 0; }
.app--panel .svc-frame .svc-row:hover { box-shadow: none; background: var(--surface-2); }
.app--panel .svc-frame .svc-row::before { inset-block: 16px; inset-inline-start: 0; }
.app--panel .svc-row:focus-visible { outline-offset: -2px; }
.app--panel .svc-frame .empty { padding: 48px 24px; }

/* ---------------------------------------------------------------- settings pages (profile): section nav beside the section (Pattern 5) */
.app--panel .set-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.app--panel .set-body { display: grid; gap: 24px; max-width: 760px; min-width: 0; }

/* ---------------------------------------------------------------- motion: tokens only, transform / opacity */
.app--panel .ctl-meter > span { transition: none; }
.app--panel .disk-ring-used { transition: none; }
.app--panel .wiz-hint { animation-duration: 0.2s; }

/* ---------------------------------------------------------------- phones: 44px touch targets, stacked layouts */
@media (max-width: 860px) {
  .app--panel .page { padding-inline: 16px; }
  .app--panel :is(.btn, .btn--sm, .chip, .seg button, .tab, .tb-due, .tb-user, .list-row, .search-labeled) { min-height: 44px; }
  .app--panel .btn--icon, .app--panel .copy-row .btn, .app--panel .svc-copy .btn { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
  .app--panel :is(.section-title a, .card-hd a, .card-hd .btn--link) { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
  .app--panel .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .app--panel .dash-cols { grid-template-columns: minmax(0, 1fr); }
  .app--panel .svc-mini-row { grid-template-columns: 36px minmax(0, 1fr) auto 20px; gap: 10px; padding: 12px 16px; }
  .app--panel .svc-mini-row .svc-mini-meta { display: none; }
  .app--panel .set-layout { grid-template-columns: minmax(0, 1fr); }
  .app--panel .set-layout .ctl-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
  .app--panel .set-layout .ctl-nav button { width: auto; flex: none; white-space: nowrap; min-height: 44px; }
  .app--panel .page-hd h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) { .app--panel .card--link { transition: none; } }
.app--panel button.card { width: 100%; font: inherit; color: inherit; text-align: start; }
.app--panel button.card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- D-51 audit: last bold / tiny runs, motion on transform & opacity only */
.app--panel :is(.avatar, small.warn, .wz-count, .wz-dot, .option-title, .option-price, .save-pill, .co-n, .access-facts dd, .disk-facts dd, .ctl-tile .t-value, .meter-hd .v, .count-pill, .sidebar-section, svg text, .summary-total, .wz-sum-total) { font-weight: 600 !important; }
.app--panel small.warn, .app--panel .wz-count { font-size: 12px; }
.app--panel *, .app--panel *::before, .app--panel *::after { transition-property: transform, opacity !important; }
.app--panel .kv-rows { margin: 0; align-content: start; }
.app--panel .card-bd > .kv-rows:first-child > div:first-child { padding-top: 0; }
.app--panel .field { align-content: start; }
@media (max-width: 860px) { .app--panel .dash-kpis .stat-value { font-size: 22px; } }
@media (max-width: 520px) { .app--panel .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app--panel .dash-kpis .stat-value { font-size: 19px; } .app--panel .dash-kpis .card { padding: 14px; } }
.app--panel .ctl-tile .t-sub bdi { white-space: nowrap; }

/* ---------------------------------------------------------------- D-53 the server screen */
.app--client .scr { position: relative; min-height: 380px; border-radius: var(--radius-card); background: #000; overflow: hidden; border: 1px solid var(--border); }
.app--client .scr-view { position: absolute; inset: 0; display: flex; }
.app--client .scr-view > div { flex: 1; }
.app--client .scr:fullscreen { border-radius: 0; border: 0; }
.app--client .scr-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: #e8ebfa; background: #0c0f1f; }
.app--client .scr-cover p { margin: 0; max-width: 46ch; color: #b9c0e3; font-size: 14px; line-height: 1.6; }
.app--client .scr-cover .ic--lg { width: 32px; height: 32px; color: #8aa3ff; }
.app--client .scr.is-live { min-height: 0; aspect-ratio: 16 / 10; }
.app--client .scr-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.app--client .scr-type { display: grid; gap: 6px; flex: 1 1 280px; }
.app--client .scr-type .input { flex: 1; min-width: 0; }
@media (max-width: 767.98px) { .app--client .scr { min-height: 260px; } }

/* ---------------------------------------------------------------- D-55 server control in the provider panel's layout, our colours:
   a bar of sections, a row of sub-sections, cards with an accent edge, label / value rows, action cards with a full-width button */
.app--client .ctl { gap: 16px; }
.app--client .ctl-tabs { display: flex; gap: 2px; padding: 4px; border-radius: var(--radius-card); background: var(--rail); overflow-x: auto; scrollbar-width: none; }
.app--client .ctl-tabs::-webkit-scrollbar { display: none; }
.app--client .ctl-tabs button { flex: none; position: relative; min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--rail-ink); white-space: nowrap; cursor: pointer; }
.app--client .ctl-tabs button:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.app--client .ctl-tabs button[aria-current="true"] { color: #fff; font-weight: 600; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 -2px 0 #8aa3ff; }
.app--client .ctl-tabs button:focus-visible { outline: 2px solid #8aa3ff; outline-offset: -2px; }
.app--client .ctl-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0; border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.app--client .ctl-sub button { position: relative; min-height: 36px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--primary-ink); cursor: pointer; }
.app--client .ctl-sub button + button::before { content: ""; position: absolute; inset-inline-start: 0; top: 11px; bottom: 11px; width: 1px; background: var(--border); }
.app--client .ctl-sub button[aria-current="true"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--primary); }
.app--client .ctl-sub button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* cards: the accent edge of the provider's cards, in our blue */
.app--client .ctl .card { border-top: 3px solid var(--brand); }
/* label / value rows */
.app--client .ctl .kv-rows { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.app--client .ctl .kv-rows > div { display: grid; grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.2fr); gap: 16px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.app--client .ctl .kv-rows > div:last-child { border-bottom: 0; }
.app--client .ctl .kv-rows > div:nth-child(even) { background: var(--surface-2); }
.app--client .ctl .kv-rows dt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.app--client .ctl .kv-rows dt .ic { color: var(--ink-3); }
.app--client .ctl .kv-rows dd { font-weight: 400; text-align: start; }
.app--client .ctl .card-bd > .kv-rows:first-child > div:first-child { padding-top: 10px; }
/* settings: one row per setting, the label beside its control */
.app--client .ctl-rows { display: grid; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.app--client .ctl-rows > .field { display: grid; grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1.3fr); column-gap: 24px; row-gap: 6px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.app--client .ctl-rows > .field:last-child { border-bottom: 0; }
.app--client .ctl-rows > .field:nth-child(even) { background: var(--surface-2); }
.app--client .ctl-rows > .field > .label { grid-column: 1; grid-row: 1 / span 3; padding-top: 10px; font-weight: 600; color: var(--ink); }
.app--client .ctl-rows > .field > :not(.label) { grid-column: 2; }
/* power: two action cards per row, the description beside the icon, the button across the bottom */
.app--client .ctl-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.app--client .ctl-action { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding: 18px; border-top: 3px solid var(--brand); border-radius: var(--radius-card); }
.app--client .ctl-action:hover { box-shadow: none; }
.app--client .ctl-action .a-ic { grid-row: 1 / span 2; }
.app--client .ctl-action > h3, .app--client .ctl-action > p { grid-column: 2; }
.app--client .ctl-action > div { grid-column: 1 / -1; margin-top: 12px; }
.app--client .ctl-action > div > .btn { width: 100%; }
.app--client .ctl-action.is-danger { border-top-color: var(--danger); }
@media (max-width: 767.98px) {
  .app--client .ctl-tabs button { min-height: 44px; }
  .app--client .ctl-sub button { min-height: 44px; }
  .app--client .ctl .kv-rows > div, .app--client .ctl-rows > .field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .app--client .ctl-rows > .field > .label { grid-row: auto; padding-top: 0; }
  .app--client .ctl-rows > .field > :not(.label) { grid-column: 1; }
  .app--client .ctl-actions { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- D-57 the admin panel on the same layer (owner 2026-10-29).
   Its screens are dense work lists, so: tighter table cells, and an id, a date, an amount, an address or a badge never
   breaks across lines (a row is one line of facts); the chart shows its numbers; sender rows name their fields. */
.app--admin .table th { padding: 12px; white-space: nowrap; }
.app--admin .table td { padding: 12px; white-space: nowrap; }
.app--admin .table td.t-wrap { white-space: normal; min-width: 140px; }
.app--admin .env-pill { font-size: 12px; font-weight: 600; background: rgba(240, 169, 60, 0.16); color: #f3c46d; }
.app--admin .kbd { font-size: 12px; direction: ltr; }
/* the monthly bars: every month in the brand colour (the current one full, the past ones lighter), its total above it */
.app--admin .bars { height: 190px; gap: 12px; }
.app--admin .bars .bar span { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.app--admin .bars .bar .bar-v { font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.app--admin .bars .bar.is-muted i { background: color-mix(in srgb, var(--brand) 34%, var(--surface)); }
.app--admin .bars .bar.is-muted .bar-v { color: var(--ink-2); font-weight: 500; }
.app--admin .bars .bar i { min-height: 3px; }
/* mail senders: a labelled grid per address */
.app--admin .mail-sender { gap: 10px; padding: 14px; }
.app--admin .mail-sender .field { gap: 4px; }
@media (max-width: 860px) {
  .app--admin .bars { gap: 6px; }
  .app--admin .bars .bar .bar-v { font-size: 12px; writing-mode: horizontal-tb; }
  .app--admin .env-pill { font-size: 12px; }
}

.app--admin .search-labeled { width: min(100%, 440px); }
/* a toolbar group (search + sort) wraps on a phone instead of widening the page */
.app--panel .toolbar > .row { flex-wrap: wrap; min-width: 0; }
@media (max-width: 860px) { .app--panel .toolbar > .row, .app--panel .toolbar .search-labeled { width: 100%; } .app--panel .toolbar > .row > .select { flex: 1; } }
.app--admin small.subtle { font-size: 12px; }
.app--admin .bars .bar .track { flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; padding-top: 24px; }
.app--admin .bars .bar .track > * { flex-shrink: 0; }
/* the sidebar's "needs attention" counts in amber on the dark rail (their inline colours are for a light sidebar) */
.app--panel .nav-item .count-pill[style] { background: rgba(240, 169, 60, 0.18) !important; color: #f3c46d !important; }
/* phones: every control a 44px target (row checkboxes, switches, inline price fields, the breadcrumb link, the menu) */
@media (max-width: 860px) {
  .app--panel .nav-item { min-height: 44px; }
  .app--panel .table th.chk .check, .app--panel .table td.chk .check { justify-content: center; align-items: center; min-width: 44px; min-height: 44px; margin: -10px; }
  .app--panel .check, .app--panel .switch { min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
  .app--panel .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .app--panel .table .input-group, .app--panel .table .input-group .input, .app--panel .table .input-group .addon { min-height: 44px; }
}
/* a detail header's actions wrap under the title on a phone instead of widening the page */
@media (max-width: 860px) { .app--panel .detail-hd { flex-wrap: wrap; } .app--panel .detail-hd > .row { flex-wrap: wrap; width: 100%; } }
@media (max-width: 860px) {
  .app--panel .range { min-height: 44px; }
  .app--panel :is(.crumbs a, .card-hd a, .card-hd .btn--link, .table td a) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
}