/*
 * DOMA design system (B5): the administration panel and the distributor/agent panel.
 * Navy + matte gold, Arabic first (RTL) with LTR support through logical properties.
 * Served same-origin by PanelAssetController, so the panels' strict CSP (style-src 'self',
 * no inline styles or scripts) applies: no style="" attribute is needed anywhere.
 * Loaded AFTER the existing stylesheets: the shell and the new components use their own
 * ds-* classes; the "bridge" section at the end gives the pages that still use the older
 * markup (panels, buttons, tables, fields, notices) the same colours inside the new shell.
 * The font is the self-hosted "DOMA Cairo" that both existing stylesheets already declare.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  --ds-bg: #0a1424;
  --ds-bg-2: #0d1a2e;
  --ds-surface: #111f35;
  --ds-surface-2: #162843;
  --ds-raised: #1b3050;
  --ds-line: #213656;
  --ds-line-soft: rgba(255, 255, 255, 0.06);

  --ds-gold: #b8964f;
  --ds-gold-hover: #c6a764;
  --ds-gold-ink: #17120a;
  --ds-gold-soft: rgba(184, 150, 79, 0.12);
  --ds-gold-line: rgba(184, 150, 79, 0.38);

  --ds-text: #edf1f7;
  --ds-text-2: #c6d0de;
  --ds-muted: #96a6bc;
  --ds-faint: #8293ac; /* WCAG AA (4.5:1) on every surface, also on surface-2 */

  --ds-ok: #7bd6a4;      --ds-ok-bg: rgba(46, 160, 98, 0.14);
  --ds-warn: #e8c374;    --ds-warn-bg: rgba(176, 128, 30, 0.16);
  --ds-bad: #ff9aa6;     --ds-bad-bg: rgba(190, 40, 62, 0.16);
  --ds-info: #8db6ff;    --ds-info-bg: rgba(70, 120, 230, 0.15);
  --ds-neutral: #b3bfd0; --ds-neutral-bg: rgba(150, 166, 188, 0.12);

  --ds-font: "DOMA Cairo", Tahoma, "Segoe UI", Arial, sans-serif;
  --ds-font-latin: "Segoe UI", "DOMA Cairo", Arial, sans-serif;
  --ds-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --ds-fs-xs: 12px; --ds-fs-sm: 13px; --ds-fs: 14px; --ds-fs-md: 16px; --ds-fs-lg: 18px; --ds-fs-xl: 22px; --ds-fs-2xl: 28px;

  --ds-1: 4px; --ds-2: 8px; --ds-3: 12px; --ds-4: 16px; --ds-5: 20px; --ds-6: 24px; --ds-8: 32px; --ds-10: 40px;
  --ds-r-sm: 8px; --ds-r: 12px; --ds-r-lg: 16px; --ds-r-pill: 999px;
  --ds-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  --ds-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.42);
  --ds-focus: 0 0 0 3px rgba(198, 167, 100, 0.45);
  --ds-ease: 160ms cubic-bezier(.2, .7, .2, 1);

  --ds-sidebar: 272px;
  --ds-topbar: 64px;
}

/* ------------------------------------------------------------------ base (pages in the new shell) */
html:has(body.ds-body) { background: var(--ds-bg); }
body.ds-body {
  margin: 0; min-height: 100vh; background: var(--ds-bg); color: var(--ds-text);
  font: 400 var(--ds-fs)/1.65 var(--ds-font); letter-spacing: 0;
}
body.ds-body a { color: var(--ds-gold-hover); text-decoration: none; }
body.ds-body a:hover { text-decoration: underline; }
body.ds-body :focus-visible { outline: none; box-shadow: var(--ds-focus); border-radius: var(--ds-r-sm); }
.ds-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ds-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.ds-mono { font-family: var(--ds-mono); font-size: var(--ds-fs-sm); letter-spacing: .02em; }
.ds-muted { color: var(--ds-muted); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ app shell */
.ds-app { display: grid; grid-template-columns: var(--ds-sidebar) minmax(0, 1fr); min-height: 100vh; }
:is(.ds-app, .ds-auth) .ds-sidebar {
  position: sticky; inset-block-start: 0; height: 100vh; overflow-y: auto; margin: 0; width: auto;
  background: linear-gradient(180deg, var(--ds-bg-2), var(--ds-bg)); border: 0; border-inline-end: 1px solid var(--ds-line);
  padding: var(--ds-5) var(--ds-3) var(--ds-6); display: flex; flex-direction: column; gap: var(--ds-4);
}
:is(.ds-app, .ds-auth) .ds-brand { display: flex; align-items: center; gap: var(--ds-3); padding: 0 var(--ds-2) var(--ds-3); border-block-end: 1px solid var(--ds-line-soft); color: var(--ds-text); text-decoration: none; }
:is(.ds-app, .ds-auth) .ds-brand:hover { text-decoration: none; }
/* The official DOMA Player mark (an image: its own gold and shape, never recoloured) */
.ds-brand-mark { width: 40px; height: 40px; flex: none; display: block; object-fit: contain; }
.ds-brand-name { font-weight: 700; font-size: var(--ds-fs-md); line-height: 1.3; }
.ds-brand-sub { display: block; color: var(--ds-muted); font-size: var(--ds-fs-xs); font-weight: 400; }

:is(.ds-app, .ds-auth) .ds-nav { display: flex; flex-direction: column; gap: var(--ds-4); margin: 0; overflow: visible; white-space: normal; }
.ds-nav-group-title { padding: 0 var(--ds-3) var(--ds-1); color: var(--ds-faint); font-size: var(--ds-fs-xs); font-weight: 600; letter-spacing: .04em; }
.ds-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
:is(.ds-app, .ds-auth) .ds-nav a.ds-nav-link {
  position: relative; display: flex; align-items: center; gap: var(--ds-3); padding: 9px var(--ds-3); border-radius: var(--ds-r-sm); border: 0;
  background: transparent; color: var(--ds-text-2); font-weight: 600; font-size: var(--ds-fs-sm); line-height: 1.5; text-decoration: none;
  transition: background var(--ds-ease), color var(--ds-ease);
}
:is(.ds-app, .ds-auth) .ds-nav a.ds-nav-link:hover { background: var(--ds-surface); color: var(--ds-text); }
:is(.ds-app, .ds-auth) .ds-nav a.ds-nav-link[aria-current="page"] { background: var(--ds-gold-soft); color: var(--ds-text); }
:is(.ds-app, .ds-auth) .ds-nav a.ds-nav-link[aria-current="page"]::before {
  content: ""; position: absolute; inset-inline-start: -12px; inset-block: 8px; width: 3px; border-radius: 3px; background: var(--ds-gold);
}
.ds-nav-icon { width: 20px; height: 20px; flex: none; color: var(--ds-muted); }
.ds-nav-link[aria-current="page"] .ds-nav-icon { color: var(--ds-gold); }
.ds-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-nav-count { margin-inline-start: auto; min-width: 22px; padding: 0 6px; border-radius: var(--ds-r-pill); background: var(--ds-gold); color: var(--ds-gold-ink); font: 600 11px/20px var(--ds-font-latin); text-align: center; }
.ds-nav-external { margin-inline-start: auto; color: var(--ds-faint); }
:is(.ds-app, .ds-auth) .ds-sidebar-foot { margin-block-start: auto; display: flex; flex-direction: column; gap: var(--ds-2); padding: var(--ds-3); border-radius: var(--ds-r); background: var(--ds-surface); border: 1px solid var(--ds-line-soft); color: var(--ds-muted); font-size: var(--ds-fs-xs); }
:is(.ds-app, .ds-auth) .ds-sidebar-foot form { position: static; margin: 0; }
:is(.ds-app, .ds-auth) .ds-logout { width: 100%; justify-content: center; }

.ds-main { min-width: 0; display: flex; flex-direction: column; }
:is(.ds-app, .ds-auth) .ds-topbar {
  position: sticky; inset-block-start: 0; z-index: 20; min-height: var(--ds-topbar); margin: 0;
  display: flex; align-items: center; gap: var(--ds-4); padding: 0 var(--ds-6);
  background: rgba(10, 20, 36, 0.9); backdrop-filter: blur(10px); border-block-end: 1px solid var(--ds-line);
}
.ds-menu-toggle { flex: none; }
.ds-topbar-title { flex: 0 0 auto; min-width: 0; max-width: 40%; }
.ds-breadcrumb { color: var(--ds-faint); font-size: var(--ds-fs-xs); line-height: 1.4; }
:is(.ds-app, .ds-auth) .ds-page-title { margin: 0; font-size: var(--ds-fs-lg); font-weight: 700; line-height: 1.35; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* An isolated title (a Device ID in an Arabic page) is cut at its own end, never at its beginning. */
:is(.ds-app, .ds-auth) .ds-page-title > bdi { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.ds-topbar-search { flex: 1 1 320px; max-width: 420px; min-width: 160px; margin: 0; margin-inline-start: auto; }
.ds-topbar-actions { flex: none; display: flex; align-items: center; gap: var(--ds-2); flex-wrap: nowrap; }
.ds-app a.ds-user, :is(.ds-app, .ds-auth) .ds-user { color: inherit; text-decoration: none; display: flex; align-items: center; gap: var(--ds-2); padding-block: 4px; padding-inline: 4px 12px; border-radius: var(--ds-r-pill); background: var(--ds-surface); border: 1px solid var(--ds-line); }
.ds-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ds-raised); color: var(--ds-gold); font-weight: 700; }
.ds-user-text { display: flex; flex-direction: column; min-width: 0; }
.ds-user-name { font-size: var(--ds-fs-sm); font-weight: 600; line-height: 1.2; color: var(--ds-text); white-space: nowrap; }
.ds-user-role { display: block; color: var(--ds-muted); font-size: 11px; font-weight: 400; line-height: 1.3; white-space: nowrap; }
.ds-app a.ds-balance-chip, .ds-balance-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--ds-r-pill); border: 1px solid var(--ds-gold-line); background: var(--ds-gold-soft); color: var(--ds-text-2); font-size: var(--ds-fs-sm); white-space: nowrap; text-decoration: none; }
.ds-balance-chip strong { color: var(--ds-gold-hover); font-family: var(--ds-font-latin); }
.ds-balance-chip .ds-icon { color: var(--ds-gold); }
:is(.ds-app, .ds-auth) .ds-lang { display: flex; align-items: center; gap: var(--ds-1); margin: 0; }

:is(.ds-app, .ds-auth) .ds-content { padding: var(--ds-6); display: flex; flex-direction: column; gap: var(--ds-6); width: 100%; max-width: 1480px; margin: 0 auto; min-width: 0; }
.ds-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ds-4); flex-wrap: wrap; }
:is(.ds-app, .ds-auth) .ds-page-head h2 { margin: 0; font-size: var(--ds-fs-2xl); line-height: 1.3; }
:is(.ds-app, .ds-auth) .ds-page-head p { margin: var(--ds-1) 0 0; color: var(--ds-muted); font-size: var(--ds-fs); }
.ds-actions { display: flex; flex-wrap: wrap; gap: var(--ds-2); }
:is(.ds-app, .ds-auth) .ds-footer { margin: var(--ds-2) 0 0; padding-block: var(--ds-4); color: var(--ds-faint); font-size: var(--ds-fs-xs); text-align: center; }
.ds-scrim { display: none; }


/* ------------------------------------------------------------------ D2: skip link, topbar menus (language) */
.ds-skip { position: absolute; z-index: 100; inset-block-start: 8px; inset-inline-start: 8px; padding: 8px 14px; border-radius: var(--ds-r-sm); background: var(--ds-gold); color: var(--ds-gold-ink); font-weight: 700; transform: translateY(-160%); transition: transform var(--ds-ease); }
body.ds-body a.ds-skip { color: var(--ds-gold-ink); }
.ds-skip:focus, .ds-skip:focus-visible { transform: none; text-decoration: none; }
body.ds-body .ds-content:focus { outline: none; box-shadow: none; }
:is(.ds-app, .ds-auth) .ds-menu { position: relative; margin: 0; }
:is(.ds-app, .ds-auth) .ds-menu > summary { list-style: none; cursor: pointer; }
:is(.ds-app, .ds-auth) .ds-menu > summary::-webkit-details-marker { display: none; }
:is(.ds-app, .ds-auth) .ds-menu > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-inline-start: 2px; margin-block-start: -3px; }
:is(.ds-app, .ds-auth) .ds-menu[open] > summary { border-color: var(--ds-gold-line); background: var(--ds-surface-2); }
.ds-menu-list { position: absolute; z-index: 30; inset-block-start: calc(100% + 6px); inset-inline-end: 0; min-width: 170px; display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: var(--ds-r); border: 1px solid var(--ds-line); background: var(--ds-surface); box-shadow: var(--ds-shadow-lg); }
:is(.ds-app, .ds-auth) .ds-menu-item { display: flex; align-items: center; gap: var(--ds-2); width: 100%; min-height: 36px; margin: 0; padding: 6px 10px; border: 0; border-radius: var(--ds-r-sm); background: transparent; color: var(--ds-text-2); font: 600 var(--ds-fs-sm)/1.3 var(--ds-font); text-align: start; cursor: pointer; box-shadow: none; }
:is(.ds-app, .ds-auth) .ds-menu-item:hover, :is(.ds-app, .ds-auth) .ds-menu-item:focus-visible { background: var(--ds-surface-2); color: var(--ds-text); }
:is(.ds-app, .ds-auth) .ds-menu-item[aria-current="true"] { color: var(--ds-gold-hover); }
:is(.ds-app, .ds-auth) .ds-menu-item[aria-current="true"]::after { content: "✓"; margin-inline-start: auto; }
:is(.ds-app, .ds-auth) .ds-menu-item img { width: 20px; height: 15px; border-radius: 2px; flex: none; }
/* ------------------------------------------------------------------ cards */
.ds-grid { display: grid; gap: var(--ds-4); }
.ds-grid-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid-kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.ds-grid-halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.ds-app, .ds-auth) .ds-card {
  margin: 0; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg);
  padding: var(--ds-5); box-shadow: 0 1px 0 var(--ds-line-soft) inset; min-width: 0;
}
.ds-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-3); margin-block-end: var(--ds-4); flex-wrap: wrap; }
:is(.ds-app, .ds-auth) .ds-card-head h2, :is(.ds-app, .ds-auth) .ds-card h2.ds-card-title { margin: 0; font-size: var(--ds-fs-md); line-height: 1.4; }
:is(.ds-app, .ds-auth) .ds-card-head p { margin: 2px 0 0; color: var(--ds-muted); font-size: var(--ds-fs-sm); }
:is(.ds-app, .ds-auth) .ds-card > p { color: var(--ds-text-2); font-size: var(--ds-fs-sm); margin: 0 0 var(--ds-3); }
.ds-app a.ds-kpi, .ds-kpi { display: flex; flex-direction: column; gap: var(--ds-2); position: relative; overflow: hidden; color: inherit; text-decoration: none; }
.ds-app a.ds-kpi:hover { border-color: var(--ds-gold-line); text-decoration: none; }
.ds-kpi::after { content: ""; position: absolute; inset-inline-end: -46px; inset-block-start: -46px; width: 112px; height: 112px; border-radius: 50%; background: radial-gradient(circle, rgba(184, 150, 79, 0.16), rgba(184, 150, 79, 0) 70%); pointer-events: none; }
.ds-kpi-label { display: flex; align-items: center; gap: var(--ds-2); color: var(--ds-muted); font-size: var(--ds-fs-sm); font-weight: 600; }
.ds-kpi-label .ds-icon { color: var(--ds-gold); }
.ds-kpi-value { font: 700 var(--ds-fs-2xl)/1.1 var(--ds-font-latin); color: var(--ds-text); }
.ds-kpi-meta { display: flex; align-items: center; gap: var(--ds-2); color: var(--ds-faint); font-size: var(--ds-fs-xs); }
.ds-kpi-bad .ds-kpi-label .ds-icon { color: var(--ds-bad); }
.ds-kpi-warn .ds-kpi-label .ds-icon { color: var(--ds-warn); }
.ds-kpi-ok .ds-kpi-label .ds-icon { color: var(--ds-ok); }
.ds-kpi-info .ds-kpi-label .ds-icon { color: var(--ds-info); }
.ds-progress { height: 6px; border-radius: var(--ds-r-pill); background: var(--ds-raised); overflow: hidden; }
.ds-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8f7036, var(--ds-gold)); }
.ds-progress-row { display: flex; flex-direction: column; gap: 6px; }
.ds-progress-row + .ds-progress-row { margin-block-start: var(--ds-4); }
.ds-progress-head { display: flex; justify-content: space-between; gap: var(--ds-3); font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.ds-progress-head strong { font-family: var(--ds-font-latin); color: var(--ds-text); }
/* Progress widths as classes (style attributes are blocked by the CSP): 0–100 in steps of 5 */
.ds-w-0 { width: 0; } .ds-w-5 { width: 5%; } .ds-w-10 { width: 10%; } .ds-w-15 { width: 15%; } .ds-w-20 { width: 20%; }
.ds-w-25 { width: 25%; } .ds-w-30 { width: 30%; } .ds-w-35 { width: 35%; } .ds-w-40 { width: 40%; } .ds-w-45 { width: 45%; }
.ds-w-50 { width: 50%; } .ds-w-55 { width: 55%; } .ds-w-60 { width: 60%; } .ds-w-65 { width: 65%; } .ds-w-70 { width: 70%; }
.ds-w-75 { width: 75%; } .ds-w-80 { width: 80%; } .ds-w-85 { width: 85%; } .ds-w-90 { width: 90%; } .ds-w-95 { width: 95%; } .ds-w-100 { width: 100%; }

/* ------------------------------------------------------------------ buttons */
:is(.ds-app, .ds-auth) .ds-btn, .ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-2); min-height: 38px; width: auto; margin: 0; padding: 0 var(--ds-4);
  border-radius: var(--ds-r-sm); border: 1px solid transparent; font: 600 var(--ds-fs-sm)/1 var(--ds-font); cursor: pointer; box-shadow: none;
  transition: background var(--ds-ease), border-color var(--ds-ease), color var(--ds-ease), transform var(--ds-ease); white-space: nowrap; text-decoration: none;
}
:is(.ds-app, .ds-auth) .ds-btn:hover { text-decoration: none; }
.ds-btn:active { transform: translateY(1px); }
:is(.ds-app, .ds-auth) .ds-btn-primary { background: var(--ds-gold); color: var(--ds-gold-ink); border-color: var(--ds-gold); }
:is(.ds-app, .ds-auth) .ds-btn-primary:hover { background: var(--ds-gold-hover); color: var(--ds-gold-ink); }
:is(.ds-app, .ds-auth) .ds-btn-secondary { background: transparent; color: var(--ds-text); border-color: var(--ds-line); }
:is(.ds-app, .ds-auth) .ds-btn-secondary:hover { border-color: var(--ds-gold-line); background: var(--ds-surface-2); color: var(--ds-text); }
:is(.ds-app, .ds-auth) .ds-btn-ghost { background: transparent; color: var(--ds-text-2); border-color: transparent; }
:is(.ds-app, .ds-auth) .ds-btn-ghost:hover { background: var(--ds-surface-2); color: var(--ds-text); }
:is(.ds-app, .ds-auth) .ds-btn-danger { background: var(--ds-bad-bg); color: var(--ds-bad); border-color: rgba(255, 154, 166, 0.3); }
:is(.ds-app, .ds-auth) .ds-btn-danger:hover { background: rgba(190, 40, 62, 0.26); }
:is(.ds-app, .ds-auth) .ds-btn-sm { min-height: 32px; padding: 0 var(--ds-3); font-size: var(--ds-fs-xs); }
:is(.ds-app, .ds-auth) .ds-btn-icon { width: 38px; min-width: 38px; padding: 0; }
:is(.ds-app, .ds-auth) .ds-btn[disabled], :is(.ds-app, .ds-auth) .ds-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; background: var(--ds-surface-2); color: var(--ds-muted); border-color: var(--ds-line); }
.ds-icon { width: 18px; height: 18px; flex: none; }
[dir="rtl"] .ds-flip { transform: scaleX(-1); }

/* ------------------------------------------------------------------ forms */
:is(.ds-app, .ds-auth) .ds-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: 600; }
.ds-label { color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: 600; }
.ds-required::after { content: " *"; color: var(--ds-gold); }
:is(.ds-app, .ds-auth) .ds-hint { color: var(--ds-faint); font-size: var(--ds-fs-xs); font-weight: 400; margin: 0; }
:is(.ds-app, .ds-auth) .ds-input, :is(.ds-app, .ds-auth) .ds-select, :is(.ds-app, .ds-auth) .ds-textarea {
  width: 100%; min-height: 40px; margin: 0; padding: 8px var(--ds-3); border-radius: var(--ds-r-sm); border: 1px solid var(--ds-line);
  background: var(--ds-bg-2); color: var(--ds-text); font: 400 var(--ds-fs)/1.4 var(--ds-font); box-shadow: none;
  transition: border-color var(--ds-ease), box-shadow var(--ds-ease);
}
:is(.ds-app, .ds-auth) .ds-input::placeholder, :is(.ds-app, .ds-auth) .ds-textarea::placeholder { color: var(--ds-faint); }
:is(.ds-app, .ds-auth) .ds-input:hover, :is(.ds-app, .ds-auth) .ds-select:hover, :is(.ds-app, .ds-auth) .ds-textarea:hover { border-color: #2c4670; }
:is(.ds-app, .ds-auth) .ds-input:focus, :is(.ds-app, .ds-auth) .ds-select:focus, :is(.ds-app, .ds-auth) .ds-textarea:focus { outline: none; border-color: var(--ds-gold-line); box-shadow: var(--ds-focus); }
:is(.ds-app, .ds-auth) .ds-input[readonly] { color: var(--ds-text-2); background: var(--ds-surface-2); }
:is(.ds-app, .ds-auth) .ds-input-ltr { direction: ltr; text-align: start; font-family: var(--ds-mono); }
:is(.ds-app, .ds-auth) .ds-input-ltr::placeholder { font-family: var(--ds-font); letter-spacing: 0; }
[dir="rtl"] :is(.ds-app, .ds-auth) .ds-input-ltr, .ds-app[dir="rtl"] .ds-input-ltr { text-align: right; }
.ds-search { position: relative; display: block; }
:is(.ds-app, .ds-auth) .ds-search .ds-input { padding-inline-start: 38px; }
.ds-search-icon { position: absolute; inset-inline-start: 12px; inset-block-start: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ds-faint); pointer-events: none; }
.ds-form-grid { display: grid; gap: var(--ds-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ds-form-grid-2 { display: grid; gap: var(--ds-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-form-layout { display: grid; gap: var(--ds-5); grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
:is(.ds-app, .ds-auth) .ds-form-card { padding: 0; overflow: clip; }
.ds-form-section { padding: var(--ds-5); border-block-end: 1px solid var(--ds-line-soft); display: flex; flex-direction: column; gap: var(--ds-4); }
.ds-form-section-head { display: flex; gap: var(--ds-3); align-items: flex-start; }
:is(.ds-app, .ds-auth) .ds-form-section-head h3 { margin: 0; font-size: var(--ds-fs-md); line-height: 1.4; }
:is(.ds-app, .ds-auth) .ds-form-section-head p { margin: 2px 0 0; color: var(--ds-muted); font-size: var(--ds-fs-sm); }
.ds-step { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-gold-soft); border: 1px solid var(--ds-gold-line); color: var(--ds-gold-hover); font-weight: 700; font-size: var(--ds-fs-sm); }
.ds-form-actions { display: flex; align-items: center; gap: var(--ds-2); padding: var(--ds-4) var(--ds-5); background: var(--ds-bg-2); border-block-start: 1px solid var(--ds-line-soft); flex-wrap: wrap; }
:is(.ds-app, .ds-auth) .ds-form-actions .ds-hint { margin-inline-end: auto; }
.ds-disclosure { border: 1px solid var(--ds-line-soft); border-radius: var(--ds-r); background: var(--ds-bg-2); }
:is(.ds-app, .ds-auth) .ds-disclosure > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ds-3); padding: var(--ds-3) var(--ds-4); color: var(--ds-text-2); font-weight: 600; background: transparent; border: 0; min-height: 0; }
.ds-disclosure > summary::-webkit-details-marker { display: none; }
.ds-disclosure > summary small { color: var(--ds-faint); font-weight: 400; margin-inline-start: var(--ds-2); }
.ds-disclosure > summary::after { content: "+"; color: var(--ds-gold); font-size: var(--ds-fs-lg); line-height: 1; }
.ds-disclosure[open] > summary::after { content: "−"; }
.ds-disclosure-body { padding: 0 var(--ds-4) var(--ds-4); display: flex; flex-direction: column; gap: var(--ds-4); }
.ds-choice-cards { display: grid; gap: var(--ds-2); grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
.ds-choice-field { display: flex; flex-direction: column; gap: var(--ds-2); border: 0; margin: 0; padding: 0; min-width: 0; }
.ds-choice-field > legend { padding: 0; margin: 0 0 var(--ds-2); color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: 600; }
:is(.ds-app, .ds-auth) .ds-choice-cards label { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: var(--ds-3) var(--ds-4); border-radius: var(--ds-r); border: 1px solid var(--ds-line); background: var(--ds-bg-2); cursor: pointer; transition: border-color var(--ds-ease), background var(--ds-ease); color: var(--ds-text); font-weight: 400; }
:is(.ds-app, .ds-auth) .ds-choice-cards label:hover { border-color: #2c4670; }
:is(.ds-app, .ds-auth) .ds-choice-cards input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; min-height: 0; }
.ds-choice-cards strong { font-size: var(--ds-fs); }
.ds-choice-cards small { color: var(--ds-muted); font-size: var(--ds-fs-xs); }
.ds-choice-cards .ds-choice-value { color: var(--ds-gold-hover); font-weight: 700; font-family: var(--ds-font-latin); }
:is(.ds-app, .ds-auth) .ds-choice-cards label:has(input:checked) { border-color: var(--ds-gold-line); background: var(--ds-gold-soft); box-shadow: inset 0 0 0 1px var(--ds-gold-line); }
:is(.ds-app, .ds-auth) .ds-choice-cards label:has(input:focus-visible) { box-shadow: var(--ds-focus); }
:is(.ds-app, .ds-auth) .ds-choice-cards label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.ds-summary { position: sticky; inset-block-start: calc(var(--ds-topbar) + var(--ds-4)); display: flex; flex-direction: column; gap: var(--ds-4); }
.ds-summary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-summary-list li { display: flex; justify-content: space-between; gap: var(--ds-3); padding-block: 10px; border-block-end: 1px dashed var(--ds-line-soft); font-size: var(--ds-fs-sm); }
.ds-summary-list li:last-child { border-block-end: 0; }
.ds-summary-list span { color: var(--ds-muted); }
.ds-summary-list strong { font-family: var(--ds-font-latin); }
.ds-rules { margin: 0; padding-inline-start: 18px; color: var(--ds-muted); font-size: var(--ds-fs-sm); display: flex; flex-direction: column; gap: 6px; }

/* ------------------------------------------------------------------ filters & chips */
.ds-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ds-3); margin-block-end: var(--ds-4); }
.ds-toolbar > .ds-search, .ds-toolbar > .ds-grow { flex: 1 1 260px; }
:is(.ds-app, .ds-auth) .ds-toolbar .ds-select { width: auto; min-width: 150px; }
.ds-filters { display: grid; gap: var(--ds-3) var(--ds-4); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.ds-filters > .ds-span-2 { grid-column: span 2; }
.ds-filters-actions { display: flex; gap: var(--ds-2); justify-content: flex-end; margin-block-start: var(--ds-4); flex-wrap: wrap; align-items: center; }
:is(.ds-app, .ds-auth) .ds-filters-actions .ds-hint { margin-inline-end: auto; }
.ds-chips { display: flex; flex-wrap: wrap; gap: var(--ds-2); }
.ds-app a.ds-chip, .ds-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--ds-3); border-radius: var(--ds-r-pill); border: 1px solid var(--ds-line); background: transparent; color: var(--ds-text-2); font: 600 var(--ds-fs-xs)/1 var(--ds-font); cursor: pointer; text-decoration: none; }
.ds-app a.ds-chip:hover { border-color: var(--ds-gold-line); text-decoration: none; }
:is(.ds-app, .ds-auth) .ds-chip[aria-current="true"], :is(.ds-app, .ds-auth) .ds-chip[aria-pressed="true"] { background: var(--ds-gold-soft); border-color: var(--ds-gold-line); color: var(--ds-text); }

/* ------------------------------------------------------------------ badges */
.ds-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--ds-r-pill); font-size: var(--ds-fs-xs); font-weight: 600; line-height: 20px; white-space: nowrap; }
.ds-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ds-badge-ok { color: var(--ds-ok); background: var(--ds-ok-bg); }
.ds-badge-warn { color: var(--ds-warn); background: var(--ds-warn-bg); }
.ds-badge-bad { color: var(--ds-bad); background: var(--ds-bad-bg); }
.ds-badge-info { color: var(--ds-info); background: var(--ds-info-bg); }
.ds-badge-neutral { color: var(--ds-neutral); background: var(--ds-neutral-bg); }
.ds-badge-gold { color: var(--ds-gold-hover); background: var(--ds-gold-soft); }

/* ------------------------------------------------------------------ tables */
:is(.ds-app, .ds-auth) .ds-table-wrap { border: 1px solid var(--ds-line); border-radius: var(--ds-r); overflow: auto; margin: 0; background: transparent; }
.ds-app table.ds-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); text-align: start; }
.ds-app table.ds-table th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--ds-surface-2) !important; color: var(--ds-muted) !important; font-weight: 600; font-size: var(--ds-fs-xs); text-align: start; padding: 10px var(--ds-4); border: 0; border-block-end: 1px solid var(--ds-line); white-space: nowrap; }
.ds-app table.ds-table td { padding: 12px var(--ds-4); background: transparent; border: 0; border-block-end: 1px solid var(--ds-line-soft); vertical-align: middle; color: var(--ds-text-2); white-space: nowrap; font-size: var(--ds-fs-sm); text-align: start; }
.ds-app table.ds-table tbody tr { transition: background var(--ds-ease); }
.ds-app table.ds-table tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
.ds-app table.ds-table tbody tr:last-child td { border-block-end: 0; }
.ds-app table.ds-table .ds-num { font-family: var(--ds-font-latin); text-align: end; }
.ds-app table.ds-table td.ds-empty-cell { padding: var(--ds-10) var(--ds-4); text-align: center; color: var(--ds-muted); white-space: normal; }
.ds-cell-main { color: var(--ds-text); font-weight: 600; }
:is(.ds-app, .ds-auth) .ds-cell-sub, .ds-app td small.ds-cell-sub { display: block; color: var(--ds-faint); font-size: var(--ds-fs-xs); font-weight: 400; }
.ds-app a.ds-cell-link { color: var(--ds-text); }
.ds-app a.ds-cell-link:hover { color: var(--ds-gold-hover); }
.ds-row-actions { display: flex; justify-content: flex-end; gap: var(--ds-1); flex-wrap: nowrap; }
:is(.ds-app, .ds-auth) .ds-check { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--ds-gold); }
.ds-table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-3); flex-wrap: wrap; margin-block-start: var(--ds-4); color: var(--ds-muted); font-size: var(--ds-fs-xs); }
.ds-presence { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-faint); margin-inline-end: 6px; vertical-align: middle; }
.ds-presence.is-online { background: var(--ds-ok); box-shadow: 0 0 0 3px var(--ds-ok-bg); }

.ds-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ds-2); padding: var(--ds-8) var(--ds-4); text-align: center; color: var(--ds-muted); }
.ds-empty-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--ds-gold-soft); color: var(--ds-gold); }
.ds-empty strong { color: var(--ds-text); font-size: var(--ds-fs-md); }

/* ------------------------------------------------------------------ alerts & lists */
:is(.ds-app, .ds-auth) .ds-alert { display: flex; gap: var(--ds-3); align-items: flex-start; margin: 0; padding: var(--ds-3) var(--ds-4); border-radius: var(--ds-r); border: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
:is(.ds-app, .ds-auth) .ds-alert strong { color: var(--ds-text); }
:is(.ds-app, .ds-auth) .ds-alert ul { margin: var(--ds-1) 0 0; padding-inline-start: 18px; }
:is(.ds-app, .ds-auth) .ds-alert-ok { background: var(--ds-ok-bg); border-color: rgba(123, 214, 164, 0.3); }
:is(.ds-app, .ds-auth) .ds-alert-warn { background: var(--ds-warn-bg); border-color: rgba(232, 195, 116, 0.32); }
:is(.ds-app, .ds-auth) .ds-alert-bad { background: var(--ds-bad-bg); border-color: rgba(255, 154, 166, 0.32); }
:is(.ds-app, .ds-auth) .ds-alert-info { background: var(--ds-info-bg); border-color: rgba(141, 182, 255, 0.3); }
.ds-alert > .ds-icon { margin-block-start: 2px; }
.ds-alert-ok > .ds-icon { color: var(--ds-ok); } .ds-alert-warn > .ds-icon { color: var(--ds-warn); }
.ds-alert-bad > .ds-icon { color: var(--ds-bad); } .ds-alert-info > .ds-icon { color: var(--ds-info); }
.ds-alert-body { flex: 1 1 auto; min-width: 0; }
:is(.ds-app, .ds-auth) .ds-alert form { margin: 0; margin-inline-start: auto; }
:is(.ds-app, .ds-auth) .ds-alert [data-dismiss-notice] { margin-inline-start: auto; background: transparent; border: 0; color: var(--ds-muted); font-size: 18px; line-height: 1; cursor: pointer; min-height: 0; padding: 0 4px; }

.ds-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-list li { display: flex; gap: var(--ds-3); align-items: center; padding: var(--ds-3) 0; border-block-end: 1px solid var(--ds-line-soft); }
.ds-list li:last-child { border-block-end: 0; }
.ds-dot { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ds-raised); color: var(--ds-gold); }
.ds-list-text { flex: 1 1 auto; min-width: 0; }
.ds-list strong { display: block; font-size: var(--ds-fs-sm); color: var(--ds-text); font-weight: 600; }
.ds-list small { color: var(--ds-faint); font-size: var(--ds-fs-xs); }
.ds-list .ds-list-value { font: 700 var(--ds-fs-md)/1 var(--ds-font-latin); color: var(--ds-text); }
.ds-app a.ds-list-link { display: flex; gap: var(--ds-3); align-items: center; flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.ds-app a.ds-list-link:hover strong { color: var(--ds-gold-hover); }

/* ------------------------------------------------------------------ collapsible sidebar (desktop rail) */
@media (min-width: 961px) {
  .ds-app { transition: grid-template-columns var(--ds-ease); }
  .ds-app.is-collapsed { grid-template-columns: 76px minmax(0, 1fr); }
  .ds-app.is-collapsed .ds-sidebar { padding-inline: 12px; }
  .ds-app.is-collapsed .ds-brand { justify-content: center; padding-inline: 0; }
  .ds-app.is-collapsed .ds-brand-name,
  .ds-app.is-collapsed .ds-nav-group-title,
  .ds-app.is-collapsed .ds-nav-label,
  .ds-app.is-collapsed .ds-nav-external,
  .ds-app.is-collapsed .ds-logout span { display: none; }
  .ds-app.is-collapsed .ds-nav { gap: var(--ds-2); }
  .ds-app.is-collapsed .ds-nav-group + .ds-nav-group { padding-block-start: var(--ds-2); border-block-start: 1px solid var(--ds-line-soft); }
  .ds-app.is-collapsed .ds-nav a.ds-nav-link { justify-content: center; padding: 10px; }
  .ds-app.is-collapsed .ds-nav-count { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
  .ds-app.is-collapsed .ds-sidebar-foot { padding: 6px; background: none; border: 0; }
}

/* ------------------------------------------------------------------ responsive */
/* Mid-size screens (small laptops, tablets in landscape): the topbar keeps every control, the account shows its avatar only. */@media (max-width: 1280px) { .ds-user-text { display: none; } .ds-topbar-search { min-width: 140px; } }
@media (max-width: 1180px) {
  .ds-grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-grid-2, .ds-form-layout { grid-template-columns: minmax(0, 1fr); }
  .ds-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-summary { position: static; }
}
@media (max-width: 960px) {
  .ds-app { grid-template-columns: minmax(0, 1fr); }
  :is(.ds-app, .ds-auth) .ds-sidebar { position: fixed; z-index: 50; inset-block: 0; inset-inline-start: 0; width: min(300px, 86vw); height: 100vh; transform: translateX(-105%); transition: transform var(--ds-ease); box-shadow: var(--ds-shadow-lg); }
  [dir="rtl"] :is(.ds-app, .ds-auth) .ds-sidebar { transform: translateX(105%); }
  .ds-app.is-nav-open .ds-sidebar, body.menu-open :is(.ds-app, .ds-auth) .ds-sidebar { transform: none; }
  .ds-app.is-nav-open .ds-scrim, body.menu-open :is(.ds-app, .ds-auth) .ds-scrim { display: block; position: fixed; z-index: 40; inset: 0; background: rgba(4, 9, 18, 0.6); }
  :is(.ds-app, .ds-auth) .ds-topbar { padding: var(--ds-2) var(--ds-4); gap: var(--ds-3); flex-wrap: wrap; }
  .ds-topbar-search { order: 5; flex: 1 1 100%; min-width: 0; }
  .ds-user-text, .ds-balance-chip span, :is(.ds-app, .ds-auth) .ds-menu > summary .ds-menu-label { display: none; }
  :is(.ds-app, .ds-auth) .ds-content { padding: var(--ds-4); gap: var(--ds-4); }
  .ds-grid-kpi-3, .ds-grid-halves { grid-template-columns: minmax(0, 1fr); }
  .ds-filters > .ds-span-2 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ds-grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-3); }
  :is(.ds-app, .ds-auth) .ds-kpi { padding: var(--ds-4); }
  .ds-kpi-value { font-size: var(--ds-fs-xl); }
  :is(.ds-app, .ds-auth) .ds-page-head h2 { font-size: var(--ds-fs-xl); }
  .ds-filters, .ds-form-grid-2, .ds-choice-cards { grid-template-columns: minmax(0, 1fr); }
  .ds-filters-actions .ds-btn { flex: 1 1 auto; }
  .ds-form-section { padding: var(--ds-4); }
  .ds-form-actions { flex-direction: column-reverse; align-items: stretch; padding: var(--ds-3) var(--ds-4); }
  :is(.ds-app, .ds-auth) .ds-form-actions .ds-btn { width: 100%; }
  :is(.ds-app, .ds-auth) .ds-form-actions .ds-hint { margin: 0; text-align: center; }
  .ds-topbar-actions { gap: var(--ds-1); }
  /* Tables become cards: each cell shows its column name */
  :is(.ds-app, .ds-auth) .ds-table-wrap.ds-stack-mobile { border: 0; overflow: visible; }
  .ds-stack-mobile .ds-table thead { display: none; }
  .ds-stack-mobile .ds-table, .ds-stack-mobile .ds-table tbody, .ds-stack-mobile .ds-table tr, .ds-stack-mobile .ds-table td { display: block; width: 100%; }
  .ds-stack-mobile .ds-table tr { margin-block-end: var(--ds-3); border: 1px solid var(--ds-line); border-radius: var(--ds-r); background: var(--ds-surface); padding: var(--ds-2) var(--ds-3); }
  :is(.ds-app, .ds-auth) .ds-stack-mobile table.ds-table td { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-3); padding: 8px 0; border-block-end: 1px solid var(--ds-line-soft); text-align: end; white-space: normal; }
  :is(.ds-app, .ds-auth) .ds-stack-mobile table.ds-table tr td:last-child { border-block-end: 0; }
  .ds-stack-mobile .ds-table td::before { content: attr(data-label); color: var(--ds-faint); font-size: var(--ds-fs-xs); font-weight: 600; text-align: start; }
  .ds-stack-mobile .ds-table td[data-label=""]::before { content: none; }
  :is(.ds-app, .ds-auth) .ds-stack-mobile table.ds-table td.ds-empty-cell { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-app *, .ds-app *::before, .ds-app *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ bridge: pages that still use the older markup */
/* Same functions and markup; only the colours, borders and spacing follow the design inside the new shell. */
.ds-content > section.panel, .ds-content > .panel, .ds-content .panel {
  border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); background: var(--ds-surface); box-shadow: 0 1px 0 var(--ds-line-soft) inset;
}
.ds-content > section.panel, .ds-content > .panel { margin: 0; }
.ds-content .panel .panel { background: var(--ds-bg-2); border-color: var(--ds-line-soft); }
.ds-content .page-intro { margin: 0; border-radius: var(--ds-r-lg); border: 1px solid var(--ds-line); background: linear-gradient(135deg, var(--ds-surface), var(--ds-bg-2)); }
.ds-content .eyebrow { color: var(--ds-gold-hover); letter-spacing: .08em; }
.ds-app .button.primary, .ds-app button.primary { background: var(--ds-gold); border-color: var(--ds-gold); color: var(--ds-gold-ink); }
.ds-app .button.primary:hover, .ds-app button.primary:hover { background: var(--ds-gold-hover); }
.ds-app .button.secondary, .ds-app button.secondary { background: transparent; border-color: var(--ds-line); color: var(--ds-text); }
.ds-app .button.secondary:hover, .ds-app button.secondary:hover { border-color: var(--ds-gold-line); background: var(--ds-surface-2); }
.ds-app .button:disabled, .ds-app button:disabled { opacity: .45; cursor: not-allowed; }
.ds-content input:not([type="checkbox"]):not([type="radio"]):not(.ds-input), .ds-content select:not(.ds-select), .ds-content textarea:not(.ds-textarea) {
  border-color: var(--ds-line); background-color: var(--ds-bg-2); color: var(--ds-text); border-radius: var(--ds-r-sm);
}
.ds-content input:not([type="checkbox"]):not([type="radio"]):focus, .ds-content select:focus, .ds-content textarea:focus { border-color: var(--ds-gold-line); box-shadow: var(--ds-focus); outline: none; }
.ds-content .table-wrap { border: 1px solid var(--ds-line); border-radius: var(--ds-r); }
.ds-content table:not(.ds-table) th { background: var(--ds-surface-2) !important; color: var(--ds-muted) !important; border-color: var(--ds-line); }
.ds-content table:not(.ds-table) td { border-color: var(--ds-line-soft); }
/* Notices keep their markup (success / warning / key / error); only the colours follow the design. */
:is(.ds-app, .ds-auth) .notice { margin: 0; border-radius: var(--ds-r); border: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-text-2); box-shadow: none; }
:is(.ds-app, .ds-auth) .notice strong { color: var(--ds-text); }
:is(.ds-app, .ds-auth) .notice.success-notice, :is(.ds-app, .ds-auth) .notice.success { background: var(--ds-ok-bg); border-color: rgba(123, 214, 164, 0.3); }
:is(.ds-app, .ds-auth) .notice.warning-notice, :is(.ds-app, .ds-auth) .notice.warning { background: var(--ds-warn-bg); border-color: rgba(232, 195, 116, 0.32); }
:is(.ds-app, .ds-auth) .notice.key-notice, :is(.ds-app, .ds-auth) .notice.info { background: var(--ds-info-bg); border-color: rgba(141, 182, 255, 0.3); }
:is(.ds-app, .ds-auth) .notice.error-notice, :is(.ds-app, .ds-auth) .notice.error { background: var(--ds-bad-bg); border-color: rgba(255, 154, 166, 0.32); }
:is(.ds-app, .ds-auth) .notice.key-notice code { direction: ltr; unicode-bidi: isolate; padding: 2px 8px; border-radius: 6px; background: var(--ds-bg); color: var(--ds-gold-hover); font-family: var(--ds-mono); }
:is(.ds-app, .ds-auth) .notice [data-dismiss-notice] { background: transparent; border: 0; color: var(--ds-muted); cursor: pointer; }
.ds-content .partner-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--ds-r-pill); font-size: var(--ds-fs-xs); font-weight: 600; line-height: 20px; white-space: nowrap; border: 0; }
.ds-content .partner-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ds-content .partner-status-active { color: var(--ds-ok); background: var(--ds-ok-bg); }
.ds-content .partner-status-trial { color: var(--ds-info); background: var(--ds-info-bg); }
.ds-content .partner-status-expired { color: var(--ds-bad); background: var(--ds-bad-bg); }
.ds-content .partner-status-neutral { color: var(--ds-neutral); background: var(--ds-neutral-bg); }
.ds-content .partner-row-actions { display: flex; gap: var(--ds-1); justify-content: flex-end; flex-wrap: nowrap; }

/* ------------------------------------------------------------------ auth pages: login, Authenticator setup, errors */
body.ds-body.ds-auth-body { display: grid; place-items: center; min-height: 100vh; padding: var(--ds-6) var(--ds-4); background: radial-gradient(900px 480px at 50% -8%, rgba(184, 150, 79, 0.12), transparent 62%), var(--ds-bg); }
.ds-auth { width: min(460px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: var(--ds-5); }
.ds-auth .ds-brand { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: var(--ds-2); padding: 0; border: 0; color: var(--ds-text); text-decoration: none; }
.ds-auth .ds-brand:hover { text-decoration: none; }
.ds-auth .ds-brand-mark { width: 76px; height: 76px; }
.ds-auth .ds-brand-name { font-size: var(--ds-fs-xl); }
.ds-auth-card { display: flex; flex-direction: column; gap: var(--ds-4); margin: 0; padding: var(--ds-6); border-radius: var(--ds-r-lg); border: 1px solid var(--ds-line); background: var(--ds-surface); box-shadow: var(--ds-shadow); color: var(--ds-text-2); }
.ds-auth-card h1, .ds-auth-card h2 { margin: 0; color: var(--ds-text); font-size: var(--ds-fs-xl); line-height: 1.35; letter-spacing: 0; }
.ds-auth-card p { margin: 0; font-size: var(--ds-fs-sm); }
.ds-auth-card form { display: flex; flex-direction: column; gap: var(--ds-4); margin: 0; }
.ds-auth-card .ds-btn { width: 100%; min-height: 44px; font-size: var(--ds-fs); }
.ds-auth-foot { display: flex; justify-content: center; gap: var(--ds-3); flex-wrap: wrap; color: var(--ds-faint); font-size: var(--ds-fs-xs); text-align: center; }
.ds-auth-foot form { margin: 0; }
.ds-auth .ds-steps { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.ds-check-line { display: flex; flex-direction: row; align-items: flex-start; gap: var(--ds-2); margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: 600; cursor: pointer; }
:is(.ds-app, .ds-auth) .ds-check-line input, .ds-auth .ds-check-line input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; accent-color: var(--ds-gold); }
.ds-auth .ds-otp, :is(.ds-app, .ds-auth) .ds-otp { letter-spacing: .35em; text-align: center; font-family: var(--ds-mono); font-size: var(--ds-fs-md); }
.ds-captcha { display: flex; align-items: center; gap: var(--ds-2); flex-wrap: wrap; }
.ds-auth-card .ds-captcha .ds-btn { width: auto; min-height: 36px; font-size: var(--ds-fs-xs); }
.ds-captcha img { max-width: 100%; height: auto; border-radius: var(--ds-r-sm); border: 1px solid var(--ds-line); background: #fff; }
.ds-auth .ds-alert, .ds-auth .notice { margin: 0; }
/* The password field partial (label + field + show button), inside the new pages */
.ds-auth .password-field, .ds-content .password-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ds-auth .password-field > label, .ds-content .password-field > label { color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: 600; }
.ds-auth .password-control input, .ds-auth input.ds-input { border-color: var(--ds-line); background-color: var(--ds-bg-2); color: var(--ds-text); border-radius: var(--ds-r-sm); min-height: 42px; }
.ds-auth .password-control input:focus, .ds-auth input.ds-input:focus { border-color: var(--ds-gold-line); box-shadow: var(--ds-focus); outline: none; }
.ds-auth-card > .ds-badge { align-self: flex-start; }
.ds-auth-card.error-page > .ds-badge { align-self: center; }

/* ------------------------------------------------------------------ D3: fields, dialogs, facts, pagination, section links */
:is(.ds-app, .ds-auth) .ds-error { color: var(--ds-bad); font-size: var(--ds-fs-xs); font-weight: 600; }
:is(.ds-app, .ds-auth) .ds-field.is-invalid :is(.ds-input, .ds-select, .ds-textarea, input, select, textarea) { border-color: rgba(255, 154, 166, 0.6); }
.ds-filters-form { margin: 0; }
.ds-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-shadow-lg); overflow: auto; }
.ds-dialog::backdrop { background: rgba(4, 9, 18, 0.72); }
.ds-dialog-body { padding: var(--ds-5) var(--ds-6) var(--ds-6); display: flex; flex-direction: column; gap: var(--ds-4); }
.ds-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-3); }
.ds-dialog-head h2 { margin: 0; font-size: var(--ds-fs-lg); color: var(--ds-text); }
.ds-dialog-close .ds-icon { width: 16px; height: 16px; }
.ds-facts { margin: 0; display: grid; gap: var(--ds-3) var(--ds-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ds-facts > div { min-width: 0; padding: var(--ds-3); border-radius: var(--ds-r); background: var(--ds-bg-2); border: 1px solid var(--ds-line-soft); }
.ds-facts dt { margin: 0 0 4px; color: var(--ds-muted); font-size: var(--ds-fs-xs); font-weight: 600; }
.ds-facts dd { margin: 0; color: var(--ds-text); font-weight: 600; overflow-wrap: anywhere; }
.ds-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-3); flex-wrap: wrap; margin-block-start: var(--ds-4); }
.ds-pagination-links { display: flex; gap: var(--ds-2); }
.ds-section-nav { position: sticky; inset-block-start: calc(var(--ds-topbar) + 8px); z-index: 10; display: flex; gap: var(--ds-2); overflow-x: auto; padding: var(--ds-2); border-radius: var(--ds-r); border: 1px solid var(--ds-line); background: rgba(17, 31, 53, 0.94); backdrop-filter: blur(8px); scrollbar-width: thin; }
.ds-section-nav a { flex: none; padding: 6px 12px; border-radius: var(--ds-r-pill); color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-weight: 600; white-space: nowrap; text-decoration: none; }
.ds-section-nav a:hover, .ds-section-nav a:focus-visible { background: var(--ds-surface-2); color: var(--ds-text); text-decoration: none; }
:is(.ds-app, .ds-auth) .ds-disclosure.is-danger { border-color: rgba(255, 154, 166, 0.3); }
:is(.ds-app, .ds-auth) .ds-disclosure.is-danger > summary { color: var(--ds-bad); }
[id] { scroll-margin-top: calc(var(--ds-topbar) + 64px); }

/* ------------------------------------------------------------------ D3 bridge: the older markup inside pages, in the design's colours, sizes and spacing */
.ds-content :is(h2, h3) { letter-spacing: 0; }
.ds-content .panel { padding: var(--ds-5); }
.ds-content .panel h2 { font-size: var(--ds-fs-md); }
.ds-content .section-heading { margin-block-end: var(--ds-4); }
.ds-content .section-heading h2 { margin: 0; font-size: var(--ds-fs-md); }
.ds-content .section-heading p { margin: 2px 0 0; color: var(--ds-muted); font-size: var(--ds-fs-sm); }
.ds-content .page-intro { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.ds-content .page-intro h2 { margin: 0; font-size: var(--ds-fs-2xl); }
.ds-content .page-intro p { color: var(--ds-muted); }
.ds-content .eyebrow { color: var(--ds-gold-hover); font-size: var(--ds-fs-xs); letter-spacing: .06em; }
.ds-content .count-chip { min-width: 0; padding: 4px 12px; border: 1px solid var(--ds-gold-line); border-radius: var(--ds-r-pill); background: var(--ds-gold-soft); }
.ds-content .count-chip strong { color: var(--ds-gold-hover); }
.ds-content .button { min-height: 38px; padding: 0 var(--ds-4); border-radius: var(--ds-r-sm); font: 600 var(--ds-fs-sm)/1 var(--ds-font); box-shadow: none; }
.ds-content .button.compact { min-height: 32px; padding: 0 var(--ds-3); font-size: var(--ds-fs-xs); }
.ds-content .button.wide { width: 100%; }
.ds-content .button.danger-button, .ds-content button.danger-button { background: var(--ds-bad-bg); border-color: rgba(255, 154, 166, 0.3); color: var(--ds-bad); }
.ds-content .button.primary, .ds-content button.primary { box-shadow: none; }
.ds-content label:not(.ds-field):not(.ds-check-line):not(.checkbox-line) { color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: 600; gap: 6px; }
.ds-content .checkbox-line { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.ds-content input[type="checkbox"], .ds-content input[type="radio"] { accent-color: var(--ds-gold); }
.ds-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.ds-input), .ds-content select:not(.ds-select), .ds-content textarea:not(.ds-textarea) { min-height: 40px; font-family: var(--ds-font); }
.ds-content .form-grid { gap: var(--ds-4); }
.ds-content .stack { gap: var(--ds-4); }
.ds-content .stack > :is(.button, button) { align-self: flex-start; }
.ds-content .filters { gap: var(--ds-3); }
.ds-content .table-wrap table:not(.ds-table) { border-collapse: separate; border-spacing: 0; font-size: var(--ds-fs-sm); }
.ds-content .table-wrap table:not(.ds-table) th { padding: 10px var(--ds-4); font-size: var(--ds-fs-xs); font-weight: 600; text-align: start; }
.ds-content .table-wrap table:not(.ds-table) td { padding: 12px var(--ds-4); color: var(--ds-text-2); }
.ds-content .table-wrap table:not(.ds-table) tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
.ds-content table td small { color: var(--ds-faint); }
.ds-content .badge { min-height: 0; padding: 2px 10px; border: 0; border-radius: var(--ds-r-pill); background: var(--ds-neutral-bg); color: var(--ds-neutral); font-size: var(--ds-fs-xs); font-weight: 600; line-height: 20px; }
.ds-content .badge.success, .ds-content .status-green { background: var(--ds-ok-bg); color: var(--ds-ok); }
.ds-content .badge.warning, .ds-content .status-orange { background: var(--ds-warn-bg); color: var(--ds-warn); }
.ds-content .badge.danger, .ds-content .status-red { background: var(--ds-bad-bg); color: var(--ds-bad); }
.ds-content .empty { color: var(--ds-muted); }
.ds-content details:not(.ds-disclosure):not(.ds-menu) { border: 1px solid var(--ds-line-soft); border-radius: var(--ds-r); background: var(--ds-bg-2); padding: 0; }
.ds-content details:not(.ds-disclosure):not(.ds-menu) > summary { padding: var(--ds-3) var(--ds-4); color: var(--ds-text-2); font-weight: 600; cursor: pointer; }
.ds-content details:not(.ds-disclosure):not(.ds-menu)[open] > summary { border-block-end: 1px solid var(--ds-line-soft); }
.ds-content details:not(.ds-disclosure):not(.ds-menu) > :not(summary) { margin: var(--ds-4); }
.ds-content details.danger-zone > summary { color: var(--ds-bad); }
.ds-content .note, .ds-content .action-help { border-radius: var(--ds-r); border-color: var(--ds-line); background: var(--ds-bg-2); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.ds-content .details-grid dt { color: var(--ds-muted); font-size: var(--ds-fs-xs); }
.ds-content .details-grid dd { color: var(--ds-text); }
.ds-content .metric { border-radius: var(--ds-r-lg); border-color: var(--ds-line); background: var(--ds-surface); }
.ds-content .muted, .ds-content .small { color: var(--ds-muted); }
.ds-content .mono { font-family: var(--ds-mono); }
.ds-content .row-menu-popover, .ds-content .wide-popover { border-radius: var(--ds-r); border: 1px solid var(--ds-line); background: var(--ds-surface); box-shadow: var(--ds-shadow-lg); }
@media (max-width: 640px) { .ds-content .panel { padding: var(--ds-4); } .ds-content .page-intro h2 { font-size: var(--ds-fs-xl); } }

/* ------------------------------------------------------------------ D5: device pages */
.ds-device-id { display: flex; align-items: center; gap: var(--ds-2); flex-wrap: wrap; margin: calc(var(--ds-4) * -1) 0 0; color: var(--ds-muted); }
.ds-content .action-cards { display: grid; gap: var(--ds-3); }
.ds-content details.action-card > summary { display: flex; align-items: center; gap: var(--ds-3); list-style: none; }
.ds-content details.action-card > summary::-webkit-details-marker { display: none; }
.ds-content details.action-card > summary::after { content: "+"; margin-inline-start: auto; color: var(--ds-gold); font-size: var(--ds-fs-lg); line-height: 1; }
.ds-content details.action-card[open] > summary::after { content: "−"; }
.ds-content .action-card-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ds-raised); color: var(--ds-gold); font-size: var(--ds-fs-md); }
.ds-content .action-card summary strong { display: block; color: var(--ds-text); font-size: var(--ds-fs); }
.ds-content .action-card summary small { display: block; color: var(--ds-muted); font-size: var(--ds-fs-xs); font-weight: 400; }
.ds-content .danger-card > summary strong { color: var(--ds-bad); }
.ds-content .action-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-3) var(--ds-4); align-items: end; }
.ds-content .action-form > :is(p, ul, dl, div.table-wrap, .notice, form) { grid-column: 1 / -1; }
.ds-content .action-form .span-2 { grid-column: 1 / -1; }
.ds-content .action-form > .button { justify-self: start; }
.ds-content .required-note { color: var(--ds-gold-hover); font-weight: 400; }
.ds-content .bare-fieldset { display: contents; border: 0; margin: 0; padding: 0; }
.ds-content .license-restore-state { display: inline-flex; padding: 2px 10px; border-radius: var(--ds-r-pill); background: var(--ds-neutral-bg); color: var(--ds-neutral); font-size: var(--ds-fs-xs); font-weight: 600; }
.ds-content .license-restore-state.is-ok { background: var(--ds-ok-bg); color: var(--ds-ok); }
.ds-content .license-restore-state.is-off { background: var(--ds-bad-bg); color: var(--ds-bad); }
.ds-content .license-restore-facts { display: grid; gap: var(--ds-2) var(--ds-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0; }
.ds-content .license-restore-facts dt { color: var(--ds-muted); font-size: var(--ds-fs-xs); }
.ds-content .license-restore-facts dd { margin: 0; color: var(--ds-text); }
.ds-content .license-restore-list { margin: 0; padding-inline-start: 18px; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.ds-content .license-restore-list.is-blockers { color: var(--ds-bad); }
.ds-content .license-restore-list.is-warnings { color: var(--ds-warn); }
.ds-content .positive { color: var(--ds-ok); }
.ds-content .negative { color: var(--ds-bad); }
.ds-list time { flex: none; font-size: var(--ds-fs-xs); }
@media (max-width: 640px) { .ds-content .action-form { grid-template-columns: minmax(0, 1fr); } }
.ds-chip-count { min-width: 20px; padding: 0 6px; border-radius: var(--ds-r-pill); background: var(--ds-raised); color: var(--ds-text-2); font: 600 11px/18px var(--ds-font-latin); text-align: center; }
:is(.ds-app, .ds-auth) .ds-chip[aria-current="true"] .ds-chip-count { background: var(--ds-gold); color: var(--ds-gold-ink); }
:is(.ds-app, .ds-auth) .ds-btn-block { width: 100%; }
.ds-toolbar > .grow { flex: 1 1 260px; }
.ds-content .button-row, .ds-content .inline-actions, .ds-content .partner-actions { display: flex; flex-wrap: wrap; gap: var(--ds-2); align-items: center; }
.ds-content .page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ds-4); flex-wrap: wrap; }
.ds-content .page-intro > div { min-width: 0; }
.ds-content .page-intro p { margin: var(--ds-1) 0 0; font-size: var(--ds-fs); }

/* ------------------------------------------------------------------ D6: figures, headings and messages in the older markup */
.ds-content .metrics, .ds-content .metrics-six, .ds-content .security-metrics { display: grid; gap: var(--ds-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0; }
.ds-content .metric { display: flex; flex-direction: column; gap: var(--ds-2); min-height: 0; padding: var(--ds-5); border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); background: var(--ds-surface); color: inherit; text-decoration: none; box-shadow: none; }
.ds-content a.metric:hover { border-color: var(--ds-gold-line); text-decoration: none; }
.ds-content .metric > span:first-child { color: var(--ds-muted); font-size: var(--ds-fs-sm); font-weight: 600; }
.ds-content .metric > strong { color: var(--ds-text); font: 700 var(--ds-fs-2xl)/1.15 var(--ds-font-latin); }
.ds-content a.metric > strong { font: 700 var(--ds-fs-md)/1.3 var(--ds-font); color: var(--ds-gold-hover); }
.ds-content .metric > small { color: var(--ds-faint); font-size: var(--ds-fs-xs); }
.ds-content .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-3); margin: 0 0 var(--ds-4); padding: 0; border: 0; background: none; }
.ds-content .panel-heading h2 { margin: 0; font-size: var(--ds-fs-md); }
@media (max-width: 640px) { .ds-content .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-3); } .ds-content .metric { padding: var(--ds-4); } .ds-content .metric > strong { font-size: var(--ds-fs-xl); } }
/* D6–D7: figures that are words or dates, and the page heads of the older pages (title first, their actions after it). */
.ds-kpi-value.ds-kpi-value-text { font: 700 var(--ds-fs-md)/1.3 var(--ds-font); color: var(--ds-gold-hover); }
.ds-kpi-value.ds-kpi-value-date { font-size: var(--ds-fs-lg); }
.ds-page-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.ds-page-head > :not(:first-child) { flex: 0 1 auto; }
/* D7: on laptop widths the topbar wraps instead of overflowing when a page adds its own actions (users, updates, ...):
   the page actions move to a second row at the end; on one row nothing changes (the search's auto margin takes the free space). */
@media (min-width: 961px) {
  :is(.ds-app, .ds-auth) .ds-topbar { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--ds-2); padding-block: var(--ds-2); }
  .ds-topbar-actions { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
}
/* Mailbox: the owner's delete button sits at the end of a message's header line. */
:is(.ds-app, .ds-auth) .partner-chat-bubble-head .partner-chat-delete { margin-inline-start: auto; min-height: 28px; padding-inline: var(--ds-2); color: var(--ds-faint); }
:is(.ds-app, .ds-auth) .partner-chat-bubble-head .partner-chat-delete:hover { color: var(--ds-bad); }
/* Owner request 2026-10-21 (cards): a figure that is a word (a state) uses the text font, not the large number font;
   identifiers (Device ID, IP, hashes, versions) always read left to right and never reorder inside Arabic text. */
.ds-kpi.ops-state .ds-kpi-value, .ds-kpi-value.ds-kpi-value-text { font: 700 var(--ds-fs-lg)/1.3 var(--ds-font); }
.ds-kpi.ops-date .ds-kpi-value { font-size: var(--ds-fs-lg); }
.ds-content :is(a, span, strong, small, b, em, bdi, time):is(.mono, .ds-mono), .ds-content code { direction: ltr; unicode-bidi: isolate; }
.ds-kpi .ds-kpi-meta { flex-wrap: wrap; line-height: 1.5; }
.ds-grid > .ds-card { min-width: 0; }

/* Device information (Task 2/6, 2026-11-06): every value follows the page direction (right in Arabic,
   left in English) so the cards line up; identifiers, keys, versions, IPs and dates are isolated LTR
   inside that alignment, so "53:AF:F2:22:73:4A" never reorders. Copy buttons copy the stored value. */
.ds-facts dd { text-align: start; }
.ds-facts dd > bdi.ds-id, bdi.ds-id { direction: ltr; unicode-bidi: isolate; font-family: var(--ds-mono); font-size: var(--ds-fs-sm); letter-spacing: .02em; }
.ds-copy { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: var(--ds-2); padding: 1px 8px; border: 1px solid var(--ds-line-soft); border-radius: var(--ds-r); background: var(--ds-bg-2); color: var(--ds-muted); font: inherit; font-size: var(--ds-fs-xs); font-weight: 600; cursor: pointer; vertical-align: middle; }
.ds-copy:hover, .ds-copy:focus-visible { color: var(--ds-text); }
.ds-copy[data-copied] { color: var(--ds-success, #1a7f37); border-color: currentColor; }
.ds-model-hint { display: block; margin-top: 2px; color: var(--ds-muted); font-size: var(--ds-fs-xs); font-weight: 500; }

/* Owner acceptance 2026-11 (Device Details → قوائم التشغيل المرتبطة): a prominent + in the section header opens a simple
   dialog on the same page (M3U: name + URL; Xtream Codes: name + server + username + password), with Save and Cancel. */
.ds-card-actions { display: flex; align-items: center; gap: var(--ds-2); flex-wrap: wrap; }
:is(.ds-app, .ds-auth) .ds-btn.ds-playlist-add { min-height: 38px; padding-inline: var(--ds-4); font-weight: 700; }
:is(.ds-app, .ds-auth) .ds-btn.ds-playlist-add .ds-icon { width: 18px; height: 18px; }
.ds-playlist-form { display: flex; flex-direction: column; gap: var(--ds-4); margin: 0; }
.ds-playlist-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--ds-3); }
.ds-playlist-form fieldset.ds-when[disabled] { display: none; }
.ds-segmented { flex-direction: row !important; flex-wrap: wrap; gap: var(--ds-2) !important; }
.ds-segmented legend { width: 100%; margin-block-end: var(--ds-2); color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: 600; }
.ds-segmented label { position: relative; flex: 1 1 140px; margin: 0; cursor: pointer; }
.ds-segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ds-segmented span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--ds-line); border-radius: var(--ds-r); background: var(--ds-bg-2); color: var(--ds-text-2); font-weight: 700; }
.ds-segmented input:checked + span { border-color: var(--ds-gold); background: rgba(184, 150, 79, 0.14); color: var(--ds-gold-hover); }
.ds-segmented input:focus-visible + span { outline: 2px solid var(--ds-gold); outline-offset: 2px; }
.ds-dialog-actions { justify-content: flex-start; gap: var(--ds-2); }
.ds-playlist-table td small { display: block; }

/* A technical date/time (x-ds.datetime): one LTR unit that never reorders or wraps inside an Arabic table or card. */
.ds-datetime { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-family: var(--ds-mono); font-size: var(--ds-fs-sm); font-variant-numeric: tabular-nums; }

/* Sticky section links (Device Details): placed under the topbar's real height (it wraps on some widths), opaque, and the
   sections stop below both, so the links never cover a card's heading. On phones the links scroll away with the page. */
.ds-section-nav { inset-block-start: calc(var(--ds-topbar-live, var(--ds-topbar)) + 8px); background: var(--ds-surface); box-shadow: 0 6px 16px rgba(4, 9, 18, 0.35); margin-block-end: var(--ds-4); }
[id] { scroll-margin-top: calc(var(--ds-topbar-live, var(--ds-topbar)) + var(--ds-section-nav-live, 52px) + 24px); }
@media (max-width: 960px) {
  .ds-section-nav { position: static; box-shadow: none; }
  [id] { scroll-margin-top: calc(var(--ds-topbar-live, var(--ds-topbar)) + 16px); }
}

/* Admin step-up (owner acceptance 2026-11): the code field takes a full row of an action form, and its help says what the code
   is, where to find it, this account's authenticator status and the supported recovery, without any secret. */
.ds-step-up { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--ds-2); min-width: 0; }
.ds-step-up-help { border: 1px solid var(--ds-line-soft); border-radius: var(--ds-r); background: var(--ds-bg-2); padding: var(--ds-2) var(--ds-3); color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.7; }
.ds-step-up-help > summary, .ds-step-up-recovery > summary { cursor: pointer; color: var(--ds-gold-hover); font-weight: 700; }
.ds-step-up-help[open] > summary { margin-block-end: var(--ds-2); }
.ds-step-up-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-2); margin: 0 0 var(--ds-2); }
.ds-step-up-facts { display: grid; gap: var(--ds-2); margin: 0 0 var(--ds-2); }
.ds-step-up-facts > div { display: grid; grid-template-columns: minmax(88px, max-content) 1fr; gap: var(--ds-2); }
.ds-step-up-facts dt { color: var(--ds-text); font-weight: 700; }
.ds-step-up-facts dd { margin: 0; text-align: start; }
.ds-step-up-recovery { border-block-start: 1px solid var(--ds-line-soft); padding-block-start: var(--ds-2); }
.ds-step-up-recovery p { margin: var(--ds-2) 0 0; }
@media (max-width: 640px) { .ds-step-up-facts > div { grid-template-columns: 1fr; gap: 2px; } }