/* dizay admin — the design-refresh tokens (docs/design/refresh-2026-09/site/tokens.css,
   ADR 0028 §1) as CSS custom properties: the light palette on :root, the dark
   palette through prefers-color-scheme and the stored appearance choice
   (`data-theme` on the root element). Fonts are the bundled faces of the user
   app (Roboto, Droid Arabic Kufi, Material Symbols Rounded); nothing is fetched
   from a font service. */

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Roboto-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Roboto-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Roboto-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/DroidKufi-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/DroidKufi-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-display: block;
  src: url('fonts/MaterialSymbolsRounded-Outline.ttf') format('truetype');
}

:root {
  /* -- palette (light) ----------------------------------------------------- */
  --bg: #f6f6fa;
  --surface: #ffffff;
  --surface-2: #f1f1f7;
  --surface-3: #e9e9f1;
  --border: #e4e4ec;
  --border-2: #f1f1f7;
  --ink: #14142b;
  --ink-2: #5b5b7a;
  --muted: #8e8ea8;
  --faint: #c9c9d9;

  --indigo: #4f46e5;
  --indigo-hover: #4338ca;
  --indigo-soft: #eef0ff;
  --indigo-text: #4f46e5;
  --indigo-ring: rgba(79, 70, 229, 0.28);
  --cyan: #06b6d4;
  --cyan-soft: #e6fafd;
  --cyan-text: #0e7490;
  --rose: #dc2e4a;
  --rose-soft: #fde8ec;
  --rose-text: #8f1b2e;
  --orange: #e8611a;
  --orange-soft: #fdebe0;
  --orange-text: #8c3a0c;
  --green: #1da462;
  --green-soft: #e3f5ea;
  --green-text: #0f6b3f;
  --amber: #c99a1e;
  --amber-soft: #fbf3de;
  --amber-text: #7a5a05;
  --low: #6e85b7;
  --low-soft: #e9eef8;
  --low-text: #3f5480;
  --on-primary: #ffffff;
  --brand-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 55%, #06b6d4 140%);

  /* -- elevation ----------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(20, 20, 43, 0.06), 0 1px 1px rgba(20, 20, 43, 0.04);
  --shadow-2: 0 4px 12px rgba(20, 20, 43, 0.08), 0 1px 3px rgba(20, 20, 43, 0.05);
  --shadow-3: 0 12px 32px rgba(20, 20, 43, 0.14), 0 2px 6px rgba(20, 20, 43, 0.06);
  --shadow-lift: 0 18px 40px rgba(79, 70, 229, 0.22), 0 4px 10px rgba(20, 20, 43, 0.1);
  --glass: rgba(255, 255, 255, 0.78);
  --scrim: rgba(20, 20, 43, 0.45);

  /* -- radii --------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* -- spacing (4px grid) --------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* -- type ----------------------------------------------------------------- */
  --font-latin: 'Roboto', 'Droid Arabic Kufi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic: 'Droid Arabic Kufi', 'Noto Kufi Arabic', 'Roboto', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-body: var(--font-latin);
  --weight-medium: 500;
  --weight-semibold: 600;
  --t-display: 600 32px/38px var(--font-body);
  --t-h1: var(--weight-semibold) 26px/32px var(--font-body);
  --t-h2: var(--weight-semibold) 20px/26px var(--font-body);
  --t-h3: var(--weight-semibold) 16px/22px var(--font-body);
  --t-body: 400 15px/22px var(--font-body);
  --t-body-md: var(--weight-medium) 15px/22px var(--font-body);
  --t-body2: 400 13px/18px var(--font-body);
  --t-body2-md: var(--weight-medium) 13px/18px var(--font-body);
  --t-caption: var(--weight-medium) 12px/16px var(--font-body);
  --t-kicker: var(--weight-semibold) 11px/14px var(--font-body);
  --tracking-h1: -0.5px;
  --tracking-h2: -0.3px;
  --tracking-kicker: 0.8px;
  --kicker-case: uppercase;

  /* -- motion --------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --d-fast: 120ms;
  --d-base: 200ms;
  --d-slow: 320ms;

  /* -- layout --------------------------------------------------------------- */
  --nav-w: 216px;
  --topbar-h: 52px;
  --content-max: 1120px;
  --control-h: 32px;
  --control-h-sm: 28px;

  color-scheme: light;
}

/* dark: same hues, deeper surfaces, brighter accents — one token set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0f1117;
    --surface: #171a23;
    --surface-2: #1e222d;
    --surface-3: #262b38;
    --border: #262b38;
    --border-2: #1e222d;
    --ink: #eef0f6;
    --ink-2: #a4a8bb;
    --muted: #7c8199;
    --faint: #4b5068;
    --indigo: #6366f1;
    --indigo-hover: #7c7af7;
    --indigo-soft: #2a2d5c;
    --indigo-text: #c7d2fe;
    --indigo-ring: rgba(99, 102, 241, 0.4);
    --cyan: #22d3ee;
    --cyan-soft: #0e3b45;
    --cyan-text: #67e8f9;
    --rose: #fb7185;
    --rose-soft: #3d1b24;
    --rose-text: #fda4af;
    --orange: #fb923c;
    --orange-soft: #3d2416;
    --orange-text: #fdba74;
    --green: #22c55e;
    --green-soft: #12301f;
    --green-text: #86efac;
    --amber: #fbbf24;
    --amber-soft: #3a2f10;
    --amber-text: #fde68a;
    --low: #818cf8;
    --low-soft: #1f2440;
    --low-text: #a5b4fc;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 18px 40px rgba(99, 102, 241, 0.3), 0 4px 10px rgba(0, 0, 0, 0.5);
    --glass: rgba(23, 26, 35, 0.78);
    --scrim: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #0f1117;
  --surface: #171a23;
  --surface-2: #1e222d;
  --surface-3: #262b38;
  --border: #262b38;
  --border-2: #1e222d;
  --ink: #eef0f6;
  --ink-2: #a4a8bb;
  --muted: #7c8199;
  --faint: #4b5068;
  --indigo: #6366f1;
  --indigo-hover: #7c7af7;
  --indigo-soft: #2a2d5c;
  --indigo-text: #c7d2fe;
  --indigo-ring: rgba(99, 102, 241, 0.4);
  --cyan: #22d3ee;
  --cyan-soft: #0e3b45;
  --cyan-text: #67e8f9;
  --rose: #fb7185;
  --rose-soft: #3d1b24;
  --rose-text: #fda4af;
  --orange: #fb923c;
  --orange-soft: #3d2416;
  --orange-text: #fdba74;
  --green: #22c55e;
  --green-soft: #12301f;
  --green-text: #86efac;
  --amber: #fbbf24;
  --amber-soft: #3a2f10;
  --amber-text: #fde68a;
  --low: #818cf8;
  --low-soft: #1f2440;
  --low-text: #a5b4fc;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 18px 40px rgba(99, 102, 241, 0.3), 0 4px 10px rgba(0, 0, 0, 0.5);
  --glass: rgba(23, 26, 35, 0.78);
  --scrim: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* Arabic: the Kufi face (no Medium cut: medium emphasis uses Bold, as the user
   app), taller leading, no Latin tracking or case transforms. */
html[lang='ar'] {
  --font-body: var(--font-arabic);
  --weight-medium: 700;
  --weight-semibold: 700;
  --tracking-h1: 0;
  --tracking-h2: 0;
  --tracking-kicker: 0;
  --kicker-case: none;
  --t-body2: 400 13px/20px var(--font-body);
}

/* ---- base ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  background: var(--bg);
  color: var(--ink);
  font: var(--t-body2);
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
p,
dl,
figure {
  margin: 0;
}
a {
  color: var(--indigo-text);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
code,
pre,
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--indigo-ring);
}
[hidden] {
  display: none !important;
}
.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;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---- icons (Material Symbols Rounded, bundled, drawn by codepoint) --------- */
.msr {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  flex: none;
  vertical-align: -0.2em;
  -webkit-font-smoothing: antialiased;
}
.msr::before {
  content: attr(data-icon);
}
.msr--sm {
  font-size: 16px;
}
.msr--xs {
  font-size: 14px;
}
.msr--lg {
  font-size: 22px;
}
.msr--flip[dir='rtl'],
html[dir='rtl'] .msr--flip {
  transform: scaleX(-1);
}

/* ---- shell ---------------------------------------------------------------- */
.shell {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  min-height: 100vh;
}
.nav {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--s-3) 10px;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  overflow-y: auto;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2) var(--s-3);
  font: var(--t-h3);
  color: var(--ink);
}
.nav__brand small {
  font: var(--t-caption);
  color: var(--muted);
  margin-inline-start: 2px;
}
.mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--brand-gradient);
  display: grid;
  place-items: center;
  color: #ffffff;
  flex: none;
}
.mark--lg {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.nav__section {
  font: var(--t-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: var(--kicker-case);
  color: var(--muted);
  padding: var(--s-3) 10px var(--s-1);
}
.nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font: var(--t-body2-md);
  transition: background var(--d-fast) var(--ease-out);
}
.nav__link .msr {
  color: var(--muted);
}
.nav__link:hover {
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}
.nav__link--active {
  background: var(--indigo-soft);
  color: var(--indigo-text);
}
.nav__link--active .msr {
  color: var(--indigo-text);
}
.nav__count {
  margin-inline-start: auto;
  font: var(--t-caption);
  color: var(--muted);
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: 0 7px;
  line-height: 18px;
}
.nav__count--rose {
  background: var(--rose-soft);
  color: var(--rose-text);
}
.nav__foot {
  margin-top: auto;
  padding: 10px 6px 2px;
  border-top: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: var(--t-caption);
  color: var(--muted);
}
.topbar .nav__toggle {
  display: none;
}
.shell__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.topbar__spacer {
  flex: 1;
}
.crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--t-body2);
  color: var(--muted);
  min-width: 0;
}
.crumb b {
  color: var(--ink);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crumb .msr {
  font-size: 16px;
}
.env {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--t-kicker);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.env .msr {
  font-size: 14px;
}
.env--staging {
  background: var(--amber-soft);
  color: var(--amber-text);
  border-color: color-mix(in srgb, var(--amber) 35%, transparent);
}
.env--production {
  background: var(--rose-soft);
  color: var(--rose-text);
  border-color: color-mix(in srgb, var(--rose) 35%, transparent);
}
.health {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font: var(--t-caption);
  color: var(--ink-2);
}
.health span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
  flex: none;
}
.dot--amber {
  background: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent);
}
.dot--rose {
  background: var(--rose);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 18%, transparent);
}
.dot--grey {
  background: var(--faint);
  box-shadow: none;
}
.who {
  position: relative;
}
.who__button {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 32px;
  padding: 0 8px 0 4px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font: var(--t-caption);
  color: var(--ink-2);
  cursor: pointer;
}
.who__button:hover {
  background: var(--surface-2);
}
.who__menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  z-index: 6;
}
.who__head {
  padding: var(--s-2) 10px;
  font: var(--t-caption);
  color: var(--muted);
  border-bottom: 1px solid var(--border-2);
  margin-bottom: var(--s-1);
}
.who__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font: var(--t-body2);
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  width: 100%;
}
.who__item:hover {
  background: var(--surface-2);
}
.who__item .msr {
  color: var(--muted);
}
.who__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  font: var(--t-body2);
}
.who__field .sel {
  margin-inline-start: auto;
  height: 28px;
}
.av {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--indigo-soft);
  color: var(--indigo-text);
  display: grid;
  place-items: center;
  font: 600 11px/1 var(--font-latin);
  flex: none;
  text-transform: uppercase;
}
.av--round {
  border-radius: 50%;
}
.av--cyan {
  background: var(--cyan-soft);
  color: var(--cyan-text);
}
.av--amber {
  background: var(--amber-soft);
  color: var(--amber-text);
}
.av--lg {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-gradient);
  color: #ffffff;
  font-size: 16px;
}
.body {
  padding: var(--s-5) var(--s-6) 28px;
  max-width: var(--content-max);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
}
@media (max-width: 899px) {
  .shell {
    grid-template-columns: 1fr;
  }
  .nav {
    display: none;
    position: static;
    height: auto;
    border-inline-end: none;
    border-bottom: 1px solid var(--border);
  }
  .nav--open {
    display: flex;
  }
  .topbar .nav__toggle {
    display: inline-flex;
  }
  .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--topbar-h);
    padding: var(--s-2) var(--s-4);
    gap: var(--s-2);
  }
  .crumb {
    display: none;
  }
  .body {
    padding: var(--s-4);
  }
}

/* ---- typography roles ---------------------------------------------------- */
.kicker {
  font: var(--t-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: var(--kicker-case);
  color: var(--indigo-text);
}
.page-head {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.page-head__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.page-title {
  font: var(--t-h1);
  letter-spacing: var(--tracking-h1);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.page-head__sub {
  font: var(--t-body2);
  color: var(--muted);
}
.page-head__actions {
  margin-inline-start: auto;
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
.heading {
  font: var(--t-h3);
}
.label {
  font: var(--t-caption);
  color: var(--ink-2);
}
.meta {
  font: var(--t-body2);
  color: var(--ink-2);
}
.small {
  font: var(--t-caption);
  font-weight: 400;
  color: var(--muted);
}
.muted {
  color: var(--muted);
}
.danger-text {
  color: var(--rose-text);
}
.num,
.tabular {
  font-variant-numeric: tabular-nums;
}
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- cards and grids ------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: var(--s-4) 18px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.card--flush {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.card__meta {
  font: var(--t-caption);
  color: var(--muted);
}
.card__actions {
  margin-inline-start: auto;
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
.grid {
  display: grid;
  gap: var(--s-4);
}
.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));
  gap: var(--s-3);
}
.grid--stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-2);
}
.grid--side {
  grid-template-columns: 1fr 1.2fr;
}
.grid--list {
  grid-template-columns: 340px 1fr;
  align-items: start;
}
@media (max-width: 899px) {
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--side,
  .grid--list {
    grid-template-columns: 1fr;
  }
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stat__value {
  font: var(--t-h2);
  letter-spacing: var(--tracking-h2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kv {
  display: grid;
  grid-template-columns: minmax(120px, 150px) 1fr;
  row-gap: 6px;
  column-gap: var(--s-3);
  font: var(--t-body2);
}
.kv dt {
  color: var(--muted);
}
.kv dd {
  margin: 0;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.stack--tight {
  gap: var(--s-2);
}
.row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.row--between {
  justify-content: space-between;
}
.row--end {
  justify-content: flex-end;
}
.row--start {
  align-items: flex-start;
}
.row__spacer,
.spacer {
  flex: 1;
}
.divider {
  height: 1px;
  background: var(--border-2);
}

/* ---- controls ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--control-h);
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font: var(--t-body2-md);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background var(--d-fast) var(--ease-out),
    box-shadow var(--d-fast) var(--ease-out);
}
.btn:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: default;
}
.btn--primary {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--on-primary);
}
.btn--primary:hover {
  background: var(--indigo-hover);
  border-color: var(--indigo-hover);
}
.btn--danger {
  background: var(--rose);
  border-color: var(--rose);
  color: #ffffff;
}
.btn--danger:hover {
  background: var(--rose);
  filter: brightness(0.94);
}
.btn--danger-secondary {
  color: var(--rose-text);
  border-color: color-mix(in srgb, var(--rose) 40%, transparent);
  background: var(--surface);
}
.btn--danger-secondary:hover {
  background: var(--rose-soft);
}
.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}
.btn--ghost:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.btn--small {
  height: var(--control-h-sm);
  padding: 0 10px;
  font: var(--t-caption);
}
.btn--icon {
  width: var(--control-h);
  padding: 0;
}
.btn--icon.btn--small {
  width: var(--control-h-sm);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.field__label {
  font: var(--t-caption);
  color: var(--ink-2);
}
.field__hint {
  font: var(--t-caption);
  font-weight: 400;
  color: var(--muted);
}
.field__error {
  font: var(--t-caption);
  color: var(--rose-text);
}
.input,
.select,
.sel,
.textarea {
  width: 100%;
  height: var(--control-h);
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: var(--t-body2);
  outline: none;
  transition: box-shadow var(--d-fast) var(--ease-out);
}
.textarea {
  height: auto;
  min-height: 70px;
  padding: var(--s-2) 10px;
  resize: vertical;
  line-height: 18px;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--muted);
}
.input:focus,
.select:focus,
.sel:focus,
.textarea:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-ring);
}
.input--invalid,
.textarea--invalid {
  border-color: var(--rose);
}
.input--mono {
  font-family: var(--font-mono);
  font-size: 12px;
}
.input:disabled,
.select:disabled,
.textarea:disabled,
.input:read-only {
  background: var(--surface-2);
  color: var(--ink-2);
}
.select,
.sel {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 26px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 12px,
    calc(100% - 10px) 12px;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
html[dir='rtl'] .select,
html[dir='rtl'] .sel {
  background-position:
    14px 12px,
    10px 12px;
}
.sel--auto {
  width: auto;
}
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font: var(--t-body2);
  color: var(--ink);
  user-select: none;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch__track {
  width: 34px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--faint);
  position: relative;
  flex: none;
  transition: background var(--d-base) var(--ease-out);
}
.switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--shadow-1);
  transition: transform var(--d-base) var(--ease-out);
}
.switch--on .switch__track {
  background: var(--indigo);
}
.switch--on .switch__track::after {
  transform: translateX(14px);
}
html[dir='rtl'] .switch--on .switch__track::after {
  transform: translateX(-14px);
}
.switch--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.switch:has(input:focus-visible) .switch__track {
  box-shadow: 0 0 0 3px var(--indigo-ring);
}
.switch-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 0;
  border-top: 1px solid var(--border-2);
}
.switch-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.switch-row__text {
  min-width: 0;
  flex: 1;
}
.switch-row__text b {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--ink);
}
.switch-row__text span {
  font: var(--t-caption);
  font-weight: 400;
  color: var(--muted);
}
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: var(--t-body2);
  cursor: pointer;
}
.checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--indigo);
  margin: 0;
}
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
}
.radio input {
  accent-color: var(--indigo);
  margin: 0;
}
.radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.radio-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  cursor: pointer;
  background: var(--surface);
  transition: border-color var(--d-fast) var(--ease-out);
}
.radio-card input {
  accent-color: var(--indigo);
  margin: 3px 0 0;
}
.radio-card b {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--ink);
}
.radio-card span {
  font: var(--t-caption);
  font-weight: 400;
  color: var(--muted);
}
.radio-card--on {
  border-color: var(--indigo);
  background: var(--indigo-soft);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3) var(--s-4);
}
.form-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.form-grid--tight {
  gap: var(--s-2);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font: var(--t-caption);
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: nowrap;
  vertical-align: middle;
}
.chip button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: var(--muted);
  line-height: 1;
  display: inline-flex;
}
.chip--mono {
  font-family: var(--font-mono);
}
.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
}
.seg__item {
  padding: 0 10px;
  height: var(--control-h-sm);
  display: inline-flex;
  align-items: center;
  font: var(--t-caption);
  color: var(--ink-2);
  cursor: pointer;
  border: 0;
  border-inline-start: 1px solid var(--border);
  background: transparent;
}
.seg__item:first-child {
  border-inline-start: 0;
}
.seg__item--on {
  background: var(--indigo-soft);
  color: var(--indigo-text);
}
.seg__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--indigo-ring);
}
.locale-tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 3px;
}
.locale-tabs__tab {
  padding: 3px 10px;
  border: 0;
  border-radius: 7px;
  font: var(--t-caption);
  color: var(--ink-2);
  cursor: pointer;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.locale-tabs__tab--on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.locale-tabs__missing {
  color: var(--rose);
  font-size: 14px;
  line-height: 1;
}
.kbd {
  font: 500 11px/16px var(--font-mono);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0 5px;
  color: var(--muted);
  background: var(--surface);
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- pills, banners, toasts ------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font: var(--t-caption);
  white-space: nowrap;
  vertical-align: middle;
}
.pill--sm {
  height: 18px;
  padding: 0 6px;
}
.pill--neutral {
  background: var(--surface-2);
  color: var(--ink-2);
}
.pill--outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-2);
}
.pill--indigo {
  background: var(--indigo-soft);
  color: var(--indigo-text);
}
.pill--green {
  background: var(--green-soft);
  color: var(--green-text);
}
.pill--amber {
  background: var(--amber-soft);
  color: var(--amber-text);
}
.pill--orange {
  background: var(--orange-soft);
  color: var(--orange-text);
}
.pill--rose {
  background: var(--rose-soft);
  color: var(--rose-text);
}
.pill--cyan {
  background: var(--cyan-soft);
  color: var(--cyan-text);
}
.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font: var(--t-body2);
}
.banner .msr {
  margin-top: 1px;
}
.banner--info {
  background: var(--indigo-soft);
  color: var(--indigo-text);
}
.banner--warning {
  background: var(--amber-soft);
  color: var(--amber-text);
}
.banner--danger {
  background: var(--rose-soft);
  color: var(--rose-text);
}
.banner--success {
  background: var(--green-soft);
  color: var(--green-text);
}
.banner__body {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.banner__link {
  margin-inline-start: auto;
  font-weight: var(--weight-medium);
  color: inherit;
  text-decoration: underline;
  white-space: nowrap;
}
.toasts {
  position: fixed;
  bottom: var(--s-5);
  inset-inline-end: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  z-index: 40;
  max-width: min(440px, calc(100vw - 40px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--bg);
  font: var(--t-body2);
  box-shadow: var(--shadow-3);
}
.toast .msr {
  color: var(--green);
}
.toast--danger .msr {
  color: var(--rose);
}
.toast__link {
  color: inherit;
  text-decoration: underline;
  white-space: nowrap;
  margin-inline-start: 6px;
}

/* ---- tables ----------------------------------------------------------------- */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}
.table-wrap__scroll {
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: var(--t-body2);
}
.table th {
  font: var(--t-kicker);
  letter-spacing: 0.6px;
  text-transform: var(--kicker-case);
  color: var(--muted);
  text-align: start;
  padding: 0 10px;
  height: 32px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
html[lang='ar'] .table th {
  letter-spacing: 0;
}
.table td {
  padding: 6px 10px;
  height: 36px;
  border-bottom: 1px solid var(--border-2);
  color: var(--ink);
  vertical-align: middle;
}
.table--dense td {
  white-space: nowrap;
}
.table td.wrap {
  white-space: normal;
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
.table tbody tr {
  transition: background var(--d-fast) var(--ease-out);
}
.table tbody tr:hover td {
  background: var(--surface-2);
}
.table tbody tr.table__row--selected td {
  background: var(--indigo-soft);
}
.table td.num,
.table th.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.table .sub {
  display: block;
  font: var(--t-caption);
  font-weight: 400;
  color: var(--muted);
  white-space: normal;
}
.table .row-actions {
  display: inline-flex;
  gap: var(--s-1);
  opacity: 0;
  transition: opacity var(--d-fast);
}
.table tbody tr:hover .row-actions,
.table tbody tr:focus-within .row-actions,
.table tbody tr.table__row--selected .row-actions {
  opacity: 1;
}
.table a {
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.table a:hover {
  color: var(--indigo-text);
}
.table a.mono {
  font-weight: 400;
}
.table--clickable tbody tr {
  cursor: pointer;
}
.table__empty td {
  text-align: center;
  color: var(--muted);
  padding: var(--s-5);
  height: auto;
}
.table__skeleton {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--surface-3);
  width: 60%;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.45;
  }
}
.table-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  font: var(--t-caption);
  color: var(--muted);
  background: var(--surface);
  flex-wrap: wrap;
}
.uname {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.uname > div {
  min-width: 0;
}
.vf {
  font-size: 16px;
  color: var(--green);
  vertical-align: -3px;
  margin-inline-start: 4px;
}
.vf--warn {
  color: var(--amber);
}

/* ---- filter bar --------------------------------------------------------------- */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.filter-bar .sel {
  width: auto;
}
.filter-bar .input {
  width: auto;
}
.filter-bar__count {
  font: var(--t-caption);
  color: var(--muted);
  margin-inline-start: auto;
}
.search {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.search .msr {
  position: absolute;
  inset-inline-start: 9px;
  top: 7px;
  color: var(--muted);
  pointer-events: none;
}
.search .input {
  width: 100%;
  padding-inline-start: 32px;
}
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 6px 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font: var(--t-caption);
  color: var(--ink-2);
}
html[dir='rtl'] .fchip {
  padding: 0 10px 0 6px;
}
.fchip b {
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.fchip button {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  cursor: pointer;
  color: var(--muted);
  border-radius: 50%;
}
.fchip button:hover {
  color: var(--ink);
}

/* ---- KPI tiles and sparklines ---------------------------------------------- */
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--d-fast) var(--ease-out);
}
a.kpi:hover {
  box-shadow: var(--shadow-2);
  text-decoration: none;
}
.kpi__label {
  font: var(--t-caption);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi__label .msr {
  font-size: 16px;
}
.kpi__value {
  font: 600 26px/30px var(--font-body);
  letter-spacing: -0.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  min-height: 30px;
}
html[lang='ar'] .kpi__value {
  letter-spacing: 0;
}
.kpi__value small {
  font: var(--t-body2);
  color: var(--muted);
  letter-spacing: 0;
}
.kpi__trend {
  font: var(--t-caption);
  font-weight: 400;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kpi__up {
  color: var(--green-text);
  font-weight: var(--weight-medium);
}
.kpi__down {
  color: var(--rose-text);
  font-weight: var(--weight-medium);
}
.spark {
  width: 100%;
  height: 36px;
  color: var(--indigo);
  display: block;
  margin-top: 4px;
}
.spark--green {
  color: var(--green);
}
.spark--amber {
  color: var(--amber);
}
.spark--cyan {
  color: var(--cyan);
}
.spark--rose {
  color: var(--rose);
}
.bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.bars__row {
  display: grid;
  grid-template-columns: minmax(48px, 80px) 1fr 48px;
  align-items: center;
  gap: 8px;
  font: var(--t-caption);
  color: var(--ink-2);
}
.bars__row > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bars__track {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-3);
  overflow: hidden;
  display: block;
}
.bars__fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--indigo);
}
.bars__fill--cyan {
  background: var(--cyan);
}
.bars__fill--grey {
  background: var(--faint);
}
.bars__value {
  font-style: normal;
  text-align: end;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---- tabs, identity header, timeline, danger zone ---------------------------- */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 12px;
  font: var(--t-body2-md);
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition:
    color var(--d-base) var(--ease-out),
    border-color var(--d-base) var(--ease-out);
}
.tab:hover {
  color: var(--ink);
}
.tab--active {
  color: var(--indigo-text);
  border-bottom-color: var(--indigo);
}
.tab__count {
  font: var(--t-caption);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: var(--r-pill);
  padding: 0 6px;
  line-height: 16px;
}
.idh {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.idh__text {
  min-width: 0;
  flex: 1;
}
.idh__line {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: var(--t-body2);
  color: var(--muted);
  margin-top: 4px;
  flex-wrap: wrap;
}
.idh__actions {
  margin-inline-start: auto;
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.tl {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.tl::before {
  content: '';
  position: absolute;
  inset-inline-start: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}
.tl__item {
  position: relative;
  padding: 0 0 14px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
}
html[dir='rtl'] .tl__item {
  padding: 0 24px 14px 0;
}
.tl__item:last-child {
  padding-bottom: 0;
}
.tl__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 3px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--indigo);
}
.tl__item--green::before {
  border-color: var(--green);
  background: var(--green);
}
.tl__item--amber::before {
  border-color: var(--amber);
  background: var(--amber);
}
.tl__item--rose::before {
  border-color: var(--rose);
  background: var(--rose);
}
.tl__item--future::before {
  border-style: dashed;
  border-color: var(--faint);
}
.tl__kind {
  font: var(--t-body2-md);
  color: var(--ink);
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}
.tl__kind code {
  font-size: 11.5px;
}
.tl__when {
  font: var(--t-caption);
  font-weight: 400;
  color: var(--muted);
  text-align: end;
  white-space: nowrap;
}
.tl__summary {
  grid-column: 1 / -1;
  font: var(--t-caption);
  font-weight: 400;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.dz {
  border: 1px solid color-mix(in srgb, var(--rose) 40%, transparent);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.dz__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px 18px;
  background: var(--rose-soft);
  color: var(--rose-text);
  font: var(--t-h3);
}
.dz__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px 18px;
  border-top: 1px solid var(--border-2);
}
.dz__row > div {
  min-width: 0;
  flex: 1;
}
.dz__row b {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--ink);
}
.dz__row span {
  font: var(--t-caption);
  font-weight: 400;
  color: var(--muted);
}
.dz__row .btn {
  margin-inline-start: auto;
}

/* ---- dialogs and drawer --------------------------------------------------------- */
.scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  z-index: 30;
}
.dialog {
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: var(--s-5) 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font: var(--t-body2);
  color: var(--ink);
}
.dialog--wide {
  width: min(760px, 100%);
}
.dialog__title {
  font: var(--t-h2);
  letter-spacing: var(--tracking-h2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.dialog__title .msr {
  font-size: 22px;
  color: var(--indigo);
}
.dialog__title--danger .msr {
  color: var(--rose);
}
.dialog__who {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  flex-wrap: wrap;
}
.dialog__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: 4px;
}
.dialog__op {
  margin-inline-end: auto;
  font: var(--t-caption);
  font-weight: 400;
  color: var(--muted);
  font-family: var(--font-mono);
  direction: ltr;
  unicode-bidi: isolate;
}
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 14;
}
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: min(420px, 100vw);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  border-inline-start: 1px solid var(--border);
  z-index: 15;
  display: flex;
  flex-direction: column;
  font: var(--t-body2);
  animation: drawer-in var(--d-slow) var(--ease-out);
}
@keyframes drawer-in {
  from {
    transform: translateX(105%);
  }
}
html[dir='rtl'] .drawer {
  animation-name: drawer-in-rtl;
}
@keyframes drawer-in-rtl {
  from {
    transform: translateX(-105%);
  }
}
.drawer__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.drawer__head h3 {
  font: var(--t-h3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer__head .btn {
  margin-inline-start: auto;
}
.drawer__body {
  padding: var(--s-4) 18px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.json {
  margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font: 12px/17px var(--font-mono);
  color: var(--ink);
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  direction: ltr;
  text-align: left;
}

/* ---- sign-in and code input ------------------------------------------------------- */
.signin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-10) var(--s-4);
  background: var(--bg);
  background-image: radial-gradient(
    600px 300px at 50% -20%,
    color-mix(in srgb, var(--indigo) 10%, transparent),
    transparent
  );
}
.signin__card {
  width: min(400px, 100%);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-2);
  gap: var(--s-4);
}
.signin__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--t-h3);
  color: var(--ink);
}
.signin__brand .env {
  margin-inline-start: auto;
}
.signin__title {
  font: var(--t-h2);
  letter-spacing: var(--tracking-h2);
}
.steps {
  display: flex;
  gap: 6px;
  align-items: center;
  font: var(--t-caption);
  color: var(--muted);
  flex-wrap: wrap;
}
.steps__n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--muted);
  flex: none;
}
.steps__n .msr {
  font-size: 14px;
}
.steps__n--done {
  background: var(--green-soft);
  color: var(--green-text);
}
.steps__n--on {
  background: var(--indigo);
  color: #ffffff;
}
.code {
  display: flex;
  gap: 8px;
  direction: ltr;
  justify-content: flex-start;
}
.code__gap {
  width: 8px;
  flex: none;
}
.code input {
  width: 48px;
  height: 52px;
  padding: 0;
  text-align: center;
  font: 600 22px/1 var(--font-mono);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: box-shadow var(--d-fast) var(--ease-out);
}
.code input:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-ring);
}
.code--invalid input {
  border-color: var(--rose);
}
.code--shake {
  animation: shake 320ms var(--ease-out);
}
@keyframes shake {
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .code--shake {
    animation: none;
  }
}
@media (max-width: 420px) {
  .code {
    gap: 4px;
  }
  .code input {
    width: 40px;
    height: 46px;
    font-size: 18px;
  }
}
.secret-box {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 17px;
  overflow-wrap: anywhere;
  user-select: all;
  direction: ltr;
  text-align: left;
}

/* ---- plan editor ------------------------------------------------------------------ */
.plan-ed {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.plan-side {
  position: sticky;
  top: calc(var(--topbar-h) + var(--s-4));
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.sec-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sec-nav a {
  font: var(--t-body2);
  color: var(--ink-2);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border-inline-start: 2px solid transparent;
}
.sec-nav a:hover {
  text-decoration: none;
  color: var(--ink);
  background: var(--surface-2);
}
.summary__line {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: 7px 0;
  border-top: 1px solid var(--border-2);
  font: var(--t-body2);
  color: var(--ink-2);
}
.summary__line:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.summary__line .msr {
  font-size: 16px;
  color: var(--green);
  margin-top: 1px;
}
.summary__line .msr--off {
  color: var(--faint);
}
.summary__line b {
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.savebar {
  position: sticky;
  bottom: 0;
  margin: 0 calc(-1 * var(--s-6)) -28px;
  padding: 10px var(--s-6);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--t-body2);
  color: var(--ink-2);
  z-index: 4;
  flex-wrap: wrap;
}
.savebar b {
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.savebar .msr {
  color: var(--amber);
}
.price-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border-2);
}
.price-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.price-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.price-head .btn {
  margin-inline-start: auto;
}
.tool-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  align-items: center;
  gap: var(--s-3);
  padding: 6px 0;
  border-top: 1px solid var(--border-2);
}
.tool-row:first-of-type {
  border-top: 0;
}
@media (max-width: 899px) {
  .plan-ed {
    grid-template-columns: 1fr;
  }
  .plan-side {
    position: static;
  }
  .savebar {
    margin: 0 calc(-1 * var(--s-4)) calc(-1 * var(--s-4));
    padding: 10px var(--s-4);
  }
}

/* ---- flags -------------------------------------------------------------------------- */
.flag-group {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--s-5);
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.flag-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.flag-group__explain h3 {
  font: var(--t-h3);
  margin-bottom: 4px;
}
.flag-group__explain p {
  font: var(--t-body2);
  color: var(--muted);
  margin-bottom: 6px;
}
.flag-group__source {
  font: var(--t-caption);
  font-weight: 400;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.flag-group__controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.flag-group__foot {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  margin-top: 2px;
}
@media (max-width: 899px) {
  .flag-group {
    grid-template-columns: 1fr;
  }
}

/* ---- billing source cards, announcements list ----------------------------------------- */
.src-card__name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: var(--t-body-md);
  color: var(--ink);
}
.src-card__name .pill {
  margin-inline-start: auto;
}
.src-card__nums {
  display: flex;
  gap: 14px;
  font: var(--t-caption);
  color: var(--muted);
}
.src-card__nums b {
  display: block;
  font: 600 20px/24px var(--font-body);
  color: var(--ink);
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}
.src-card__nums b.rose {
  color: var(--rose-text);
}
.src-card__nums b.orange {
  color: var(--orange-text);
}
.src-card__nums b.amber {
  color: var(--amber-text);
}
.ann-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ann-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: inherit;
  text-align: start;
  cursor: pointer;
  width: 100%;
  font: var(--t-body2);
}
.ann-item:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.ann-item--on {
  border-color: var(--indigo);
  background: var(--indigo-soft);
}
.ann-item__text {
  min-width: 0;
  flex: 1;
}
.ann-item__text span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ann-item__text b {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ann-item__text span {
  font: var(--t-caption);
  font-weight: 400;
  color: var(--muted);
}

/* ---- charts, empty state, loading ---------------------------------------------------- */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 160px;
  padding-top: var(--s-3);
}
.chart__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-width: 4px;
}
.chart__bar {
  border-radius: 3px 3px 0 0;
  background: var(--indigo);
  min-height: 1px;
}
.chart__bar--muted {
  background: var(--faint);
}
.chart__axis {
  display: flex;
  justify-content: space-between;
  font: var(--t-caption);
  font-weight: 400;
  color: var(--muted);
  margin-top: var(--s-1);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font: var(--t-caption);
  font-weight: 400;
  color: var(--ink-2);
}
.legend__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-inline-end: 6px;
  vertical-align: middle;
}
.empty {
  padding: var(--s-8) var(--s-4);
  text-align: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
}
.empty__title {
  color: var(--ink);
  font: var(--t-h3);
}
.loading {
  color: var(--muted);
  font: var(--t-body2);
  padding: var(--s-3) 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.loading::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--faint);
  border-top-color: var(--indigo);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
details > summary {
  cursor: pointer;
  color: var(--indigo-text);
  font: var(--t-caption);
}