@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   DEPHTS Integration Hub — design system
   One token set and one component vocabulary for the customer portal and the
   admin control plane (see UI_GUIDE.md). Page-specific layout lives in
   portal.css (customer) and admin.css (admin); nothing there redefines a
   colour, radius, shadow or type size — it composes these tokens.
   ========================================================================== */

:root {
  /* Tells the browser which native-chrome palette to use for the things CSS
     variables can't reach — <select> dropdown popups, date/time pickers,
     checkbox/radio default rendering, form-control focus rings. Without this
     those stay light even with every custom token flipped to dark. */
  color-scheme: light;

  /* Surfaces: white cards on a very light cool grey ground. */
  --background: #f5f6f8;
  --surface-1: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eff1f4;
  --surface-4: #e6e9ee;
  --surface-inverse: #15181d;

  /* Lines */
  --border-subtle: #e9ebef;
  --border-default: #dfe2e8;
  --border-strong: #c8cdd6;

  /* Scrollbar thumb — quiet at rest, firmer on hover/drag. */
  --scrollbar-thumb: #cfd4dd;
  --scrollbar-thumb-hover: #b4bac6;
  --scrollbar-thumb-active: #9aa1b0;

  /* Text */
  --text-primary: #141619;
  --text-secondary: #5b6270;
  --text-muted: #6b7280;
  --text-inverse: #ffffff;

  /* Primary action is near-black; the accent is reserved for links, selected
     states and chart highlights. */
  --primary: #15181d;
  --primary-strong: #000000;
  --primary-soft: #eceef2;
  --accent: #4f5bd5;
  --accent-strong: #3f4bc4;
  --accent-soft: #eceefc;
  --accent-line: #c6cbf4;

  /* Semantic */
  --success: #1f8a5b; --success-soft: #e6f6ee; --success-line: #bfe6d1;
  --warning: #b16a0e; --warning-soft: #fff3df; --warning-line: #f4d8a2;
  --danger:  #c93b3b; --danger-soft:  #fdecec; --danger-line:  #f3bfbf;
  --info:    #2f6fbd; --info-soft:    #e8f1fc; --info-line:    #bdd5f3;

  /* Channel identity */
  --channel-trendyol: #f26b21; --channel-hepsiburada: #f38b2a; --channel-idefix: #6167d9;
  --channel-website: #26865f; --channel-xml: #277da1;
  --channel-amazon: #ff9900; --channel-ciceksepeti: #e6197a; --channel-mediamarkt: #e2001a;
  --channel-morhipo: #6a1b9a; --channel-modanisa: #00838f;

  /* Radii — cards 16–20px, controls 8–12px, pills 999px. */
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-2xl: 24px; --radius-pill: 999px;

  /* Shadows stay soft and low-contrast. */
  --shadow-xs: 0 1px 2px rgba(16, 20, 28, .04);
  --shadow-sm: 0 1px 2px rgba(16, 20, 28, .04), 0 1px 3px rgba(16, 20, 28, .04);
  --shadow-md: 0 6px 20px rgba(16, 20, 28, .06), 0 1px 3px rgba(16, 20, 28, .04);
  --shadow-lg: 0 20px 50px rgba(16, 20, 28, .14), 0 2px 8px rgba(16, 20, 28, .06);
  --shadow-focus: 0 0 0 3px var(--accent-soft);

  /* Spacing — 4/8 base. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px;
  --card-pad: 24px; --card-pad-sm: 20px; --page-gap: 24px; --section-gap: 32px;

  /* Type scale (px on purpose: the workspace is a fixed-density surface). */
  --text-3xs: 11px; /* floor: nothing readable renders smaller */
  --text-2xs: 12px; --text-xs: 13px; --text-sm: 14px; --text-base: 15px;
  --text-md: 17px; --text-lg: 20px; --text-xl: 26px; --text-2xl: 32px;
  --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 650;
  /* Typography roles: views pick a role, never a raw size. */
  --type-page-title: var(--weight-bold) var(--text-xl)/var(--leading-tight) var(--font-sans);
  --type-section-title: var(--weight-bold) var(--text-md)/var(--leading-snug) var(--font-sans);
  --type-body: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-secondary: var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);
  --type-caption: var(--weight-medium) var(--text-2xs)/var(--leading-snug) var(--font-sans);
  --type-table: var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-sans);
  --type-table-head: var(--weight-semibold) var(--text-3xs)/var(--leading-tight) var(--font-sans);
  --type-label: var(--weight-semibold) var(--text-xs)/var(--leading-snug) var(--font-sans);

  /* Always-white backing for product photos and channel logos (both themes). */
  --media-backdrop: #ffffff;
  --code-text: #d8dde8; --success-on-inverse: #9ce0b8;
  /* Readable text on the matching *-soft surface. */
  --success-strong: #17613f; --warning-strong: #875b10; --danger-strong: #a02d2d; --info-strong: #245a9b;

  /* Layering */
  --z-sticky: 10; --z-topbar: 40; --z-sidebar: 60; --z-overlay: 180; --z-drawer: 200; --z-modal: 220; --z-toast: 260;

  /* Tabs, tables, drawers */
  --tab-h: 42px; --tab-h-sm: 36px; --tab-indicator: 2px;
  --table-head-bg: var(--surface-2); --table-row-hover: var(--surface-2); --table-row-selected: var(--accent-soft);
  --table-cell-y: 12px; --table-cell-x: 16px;
  --drawer-width: 720px;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace;

  /* Shell */
  --sidebar: 248px; --sidebar-compact: 72px; --topbar: 64px; --content-max: 1440px;
  --control-h: 40px; --control-h-sm: 32px; --control-h-lg: 46px;
  --dialog-workspace-width: 960px;
  --dialog-workspace-height: 760px;
}

/* Admin keeps the same language, only denser. */
body.theme-admin {
  --card-pad: 20px; --card-pad-sm: 18px; --page-gap: 20px;
  --control-h: 36px; --topbar: 60px; --content-max: 1560px;
}

/* --------------------------------------------------------------------------
   Dark mode — same layout, radii, spacing and type scale; only the colour
   tokens above change. Deep navy, not black, with one indigo accent (see the
   reference the theme is modelled on). Applies to the whole site (customer +
   admin, both already compose these same tokens — nothing page-specific to
   redo).

   Precedence, matching data-theme.js:
     no data-theme + system dark → dark (media query below)
     no data-theme + system light → light (root defaults above)
     data-theme="dark"  → dark, regardless of system
     data-theme="light" → light, regardless of system
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :root[data-theme="dark"] {
    color-scheme: dark;
    --background: #0b0d16;
    --surface-1: #12141f;
    --surface-2: #171a27;
    --surface-3: #1d212f;
    --surface-4: #262a3a;
    /* surface-inverse / text-inverse deliberately NOT overridden: tooltips,
       the bulk-action bar and the code block are "always near-black chrome"
       regardless of theme (the common pattern — GitHub/Notion tooltips stay
       dark in light mode too), and .code-block pairs surface-inverse with a
       hardcoded light text colour that assumes a dark backing. Flipping it
       to light here would make that text unreadable. */

    --border-subtle: #1e2130;
    --border-default: #272b3c;
    --border-strong: #383d54;

    --scrollbar-thumb: #2c2f42;
    --scrollbar-thumb-hover: #3c4058;
    --scrollbar-thumb-active: #4c5170;

    --text-primary: #f3f4f8;
    --text-secondary: #9aa0b8;
    --text-muted: #858ba3;

    /* One indigo accent carries both "primary" and "accent" in dark mode —
       a near-black primary button has no contrast left against a near-black
       page, so it borrows the same hue instead of inventing a second one. */
    --primary: #5b62d6;
    --primary-strong: #6c73e0;
    --primary-soft: #1f2140;
    --accent: #5b62d6;
    --accent-strong: #6c73e0;
    --accent-soft: #1f2140;
    --accent-line: #35396b;

    --success: #4ade8a; --success-soft: #142a1f; --success-line: #245939;
    --warning: #fbbf42; --warning-soft: #2b2210; --warning-line: #644d16;
    --danger:  #f9736f; --danger-soft:  #2c1a1a; --danger-line:  #63302e;
    --info:    #63a9fb; --info-soft:    #17223a; --info-line:    #2d4972;
    --success-strong: var(--success); --warning-strong: var(--warning); --danger-strong: var(--danger); --info-strong: var(--info);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .24);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, .38), 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .05);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .06);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #0b0d16;
  --surface-1: #12141f;
  --surface-2: #171a27;
  --surface-3: #1d212f;
  --surface-4: #262a3a;

  --border-subtle: #1e2130;
  --border-default: #272b3c;
  --border-strong: #383d54;

  --scrollbar-thumb: #2c2f42;
  --scrollbar-thumb-hover: #3c4058;
  --scrollbar-thumb-active: #4c5170;

  --text-primary: #f3f4f8;
  --text-secondary: #9aa0b8;
  --text-muted: #858ba3;

  --primary: #5b62d6;
  --primary-strong: #6c73e0;
  --primary-soft: #1f2140;
  --accent: #5b62d6;
  --accent-strong: #6c73e0;
  --accent-soft: #1f2140;
  --accent-line: #35396b;

  --success: #4ade8a; --success-soft: #142a1f; --success-line: #245939;
  --warning: #fbbf42; --warning-soft: #2b2210; --warning-line: #644d16;
  --danger:  #f9736f; --danger-soft:  #2c1a1a; --danger-line:  #63302e;
  --info:    #63a9fb; --info-soft:    #17223a; --info-line:    #2d4972;
    --success-strong: var(--success); --warning-strong: var(--warning); --danger-strong: var(--danger); --info-strong: var(--info);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .24);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .38), 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .05);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
/* No global smooth scrolling: focus and programmatic scrolls (scrollIntoView, keyboard focus, test drivers) must
   land at once. Places that want an animated scroll ask for it explicitly (behavior: 'smooth'). */
html { -webkit-text-size-adjust: 100%; }

/* --------------------------------------------------------------------------
   Scrollbars — one thin, quiet, theme-aware treatment everywhere.
   Modern engines honour the standard scrollbar-* props (thin, tinted); older
   WebKit falls back to the ::-webkit-scrollbar rules below for the same look
   as a floating pill (transparent border + padding-box clip → ~5px visible).
   Elements that deliberately hide their scrollbar keep their own more-specific
   `scrollbar-width: none` / `display: none` rule and are unaffected.
   -------------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 3.5px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--scrollbar-thumb-active); background-clip: padding-box; }
body {
  margin: 0; background: var(--background); color: var(--text-primary);
  font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
small { font-size: max(var(--text-3xs), .83em); }
button { cursor: pointer; appearance: none; -webkit-appearance: none; background: none; border: 0; }
button, a { transition: color .15s, background .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--text-primary); }
small { display: block; }
img, svg { max-width: 100%; }
code, kbd, pre { font-family: var(--font-mono); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; left: 12px; top: -50px; z-index: 999; background: var(--primary); color: var(--text-inverse); padding: 10px 14px; border-radius: var(--radius-sm); }
.skip-link:focus { top: 12px; }
/* Visibility utility — wins over a component's own `display` (e.g. the mobile
   menu button is also an .icon-button, which sets display: inline-grid). */
.mobile-only { display: none !important; }

/* Type utilities */
.eyebrow, .nav-label, .metric-label, .admin-eyebrow {
  display: block; font: 600 var(--text-2xs)/1.25 var(--font-sans);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.text-link { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.text-link:hover { color: var(--accent); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.mono { font-family: var(--font-mono); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-heading h2, .section-heading h3 { font-size: var(--text-md); margin-top: 4px; }
.section-heading.compact { margin-bottom: 10px; }
.section-heading > span:last-child { font-size: var(--text-xs); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Shell: sidebar + topbar + workspace
   -------------------------------------------------------------------------- */
.app-shell { min-height: 100vh; }
:root:has(body.app-shell) { overflow-x: hidden; }
:root:has(body.app-shell.has-active-overlay), :root:has(body.app-shell.has-command-palette), :root:has(body.app-shell.has-mobile-sidebar) { overflow: hidden; }
@media (min-width: 761px) { :root:has(body.app-shell) { scrollbar-gutter: stable; } }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar);
  display: flex; flex-direction: column; padding: 0 12px 14px;
  background: var(--surface-1); border-right: 1px solid var(--border-subtle);
  transition: width .24s cubic-bezier(.22, 1, .36, 1), padding .24s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1);
}
.sidebar__brand-row { display: flex; align-items: center; justify-content: space-between; height: var(--topbar); flex: none; margin: 0 2px 8px; padding: 0 2px; border-bottom: 1px solid var(--border-subtle); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 4px; }
.brand__mark { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: var(--text-inverse); font-weight: 700; font-size: var(--text-base); }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand__word { display: block; min-width: 0; overflow: visible; padding-block: 2px; white-space: nowrap; transition: width .24s cubic-bezier(.22, 1, .36, 1), opacity .16s ease; }
.brand__word strong, .brand strong { display: block; font-family: var(--font-sans); font-size: var(--text-md); font-weight: 800; letter-spacing: -.055em; line-height: 1.18; }
.brand__word small, .brand small { color: var(--text-muted); font-size: var(--text-2xs); margin-top: 3px; }
.sidebar-collapse { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); }
.sidebar-collapse:hover { border-color: var(--border-subtle); background: var(--surface-2); color: var(--text-primary); }
.sidebar-collapse__icon { display: grid; place-items: center; transform: rotate(180deg); transition: transform .24s cubic-bezier(.22, 1, .36, 1); }
.sidebar-mobile-close { display: none; width: 34px; height: 34px; place-items: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface-1); font-size: 20px; line-height: 1; }

.primary-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 0 10px; scrollbar-width: none; }
.primary-nav::-webkit-scrollbar { display: none; }
.nav-group { margin: 0 0 6px; }
.nav-group--flat { margin-bottom: 8px; }
.nav-group > summary.nav-label {
  display: flex; align-items: center; gap: 8px; height: 32px; margin: 4px 0 2px; padding: 0 10px;
  list-style: none; cursor: pointer; border-radius: var(--radius-sm); user-select: none;
}
.nav-group > summary.nav-label::-webkit-details-marker { display: none; }
.nav-group > summary.nav-label:hover { color: var(--text-secondary); background: var(--surface-2); }
.nav-group__label-text { flex: 1; }
.nav-group > summary.nav-label > svg { transition: transform .18s ease; }
.nav-group[open] > summary.nav-label > svg { transform: rotate(90deg); }
.nav-group__compact-icon { display: none; }
.nav-group__items { display: grid; gap: 2px; }
.nav-group.is-closing .nav-group__items { opacity: 0; transform: translateY(-3px); transition: opacity .16s ease, transform .16s ease; }
.nav-group.is-opening .nav-group__items { animation: nav-open .2s ease; }
@keyframes nav-open { from { opacity: 0; transform: translateY(-3px); } }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0;
  padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500;
  transition: color .15s, background .15s, padding .24s cubic-bezier(.22, 1, .36, 1), gap .24s cubic-bezier(.22, 1, .36, 1);
}
.nav-item:hover { color: var(--text-primary); background: var(--surface-2); }
.nav-item.is-active { color: var(--text-primary); background: var(--surface-3); font-weight: 600; }
.nav-icon { width: 18px; height: 18px; flex: none; display: grid; place-items: center; color: var(--text-muted); }
.nav-item.is-active .nav-icon { color: var(--accent); }
.nav-text { display: block; min-width: 0; max-width: 170px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: max-width .2s cubic-bezier(.22, 1, .36, 1), opacity .14s ease; }
.nav-item kbd { margin-left: auto; font: 500 11px var(--font-mono); color: var(--text-muted); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 5px; background: var(--surface-1); }
.nav-item__count { margin-left: auto; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-muted); font-size: var(--text-2xs); font-weight: 600; }
.sidebar-health { display: flex; align-items: center; gap: 10px; margin: auto 2px 8px; padding: 11px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); }
.sidebar-health > span { display: grid; width: 18px; place-items: center; }
.sidebar-health > span > i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.sidebar-health > div { min-width: 0; display: grid; gap: 2px; }
.sidebar-health strong { color: var(--text-primary); font-size: var(--text-xs); }
.sidebar-health small { overflow: hidden; color: var(--text-muted); font-size: var(--text-2xs); text-overflow: ellipsis; white-space: nowrap; }
.sidebar__footer { flex: none; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.app-version { display: block; margin-top: 6px; padding: 0 8px; overflow: hidden; color: var(--text-muted); font-size: var(--text-3xs); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.account-chip { display: grid; grid-template-columns: 32px minmax(0, 1fr) 20px; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; }
.account-chip:hover { background: var(--surface-2); }
.account-chip strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-xs); }
.account-chip small { font-size: var(--text-2xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.account-more { font-size: var(--text-xs); color: var(--text-muted); }

/* Compact rail (desktop only). */
body.is-sidebar-compact { --sidebar: var(--sidebar-compact); }
@media (min-width: 761px) {
  body.is-sidebar-compact .sidebar { padding-inline: 10px; }
  body.is-sidebar-compact .sidebar__brand-row { justify-content: center; margin-inline: 0; padding: 0; }
  body.is-sidebar-compact .brand { padding: 0; gap: 0; }
  body.is-sidebar-compact .brand__word { width: 0; overflow: hidden; opacity: 0; pointer-events: none; }
  body.is-sidebar-compact .sidebar-collapse { position: absolute; z-index: 3; top: calc(var(--topbar) - 14px); right: -13px; width: 26px; height: 26px; border: 1px solid var(--border-default); border-radius: 50%; background: var(--surface-1); box-shadow: var(--shadow-sm); }
  body.is-sidebar-compact .sidebar-collapse__icon { transform: rotate(0); }
  body.is-sidebar-compact .nav-group > summary.nav-label, body.is-sidebar-compact .nav-label { display: none !important; }
  body.is-sidebar-compact .nav-group { margin: 0 0 4px; padding: 0 0 4px; border-bottom: 1px solid var(--border-subtle); }
  body.is-sidebar-compact .nav-group:last-child { border-bottom: 0; }
  body.is-sidebar-compact .nav-group__items { display: grid !important; gap: 2px; }
  body.is-sidebar-compact .nav-item { justify-content: center; width: 44px; margin: 0 auto; padding: 0; gap: 0; }
  body.is-sidebar-compact .nav-text, body.is-sidebar-compact .nav-item kbd, body.is-sidebar-compact .nav-item__count, body.is-sidebar-compact .phase-chip { display: none; }
  body.is-sidebar-compact .sidebar-health { display: none; }
  body.is-sidebar-compact .sidebar__footer { width: 44px; margin-inline: auto; }
  body.is-sidebar-compact .app-version { display: none; }
  body.is-sidebar-compact .account-chip { grid-template-columns: 1fr; justify-items: center; padding: 6px 0; }
  body.is-sidebar-compact .account-chip > span:nth-child(n+2) { display: none; }
}
.sidebar-nav-tooltip { position: fixed; z-index: 240; padding: 7px 10px; border-radius: var(--radius-xs); background: var(--surface-inverse); color: var(--text-inverse); box-shadow: var(--shadow-md); font-size: var(--text-2xs); font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(0, -50%) translateX(-4px); transition: opacity .12s ease, transform .12s ease; }
.sidebar-nav-tooltip.is-visible { opacity: 1; transform: translate(0, -50%) translateX(0); }

.app-frame { min-height: 100vh; margin-left: var(--sidebar); width: calc(100% - var(--sidebar)); min-width: 0; transition: margin-left .24s cubic-bezier(.22, 1, .36, 1), width .24s cubic-bezier(.22, 1, .36, 1); }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--topbar); padding: 0 32px; border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface-1) 86%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: box-shadow .2s ease;
}
.topbar.is-raised { box-shadow: 0 8px 24px rgba(16, 20, 28, .05); }
.topbar h1 { font-size: var(--text-base); font-weight: 600; letter-spacing: -.01em; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }
.page-breadcrumb, .page-identity { display: flex; min-width: 0; align-items: center; gap: 10px; color: var(--text-secondary); white-space: nowrap; }
.page-breadcrumb__workspace { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); font-size: var(--text-sm); font-weight: 600; }
.page-breadcrumb__product { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.page-breadcrumb__separator { color: var(--border-strong); font-size: var(--text-md); }
.page-breadcrumb h1 { margin: 0; color: var(--text-primary); font-size: var(--text-sm); font-weight: 600; }
.page-breadcrumb__status { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--accent-line); border-radius: var(--radius-pill); color: var(--accent-strong); background: var(--accent-soft); font-size: var(--text-2xs); font-weight: 600; }
.workspace-context { gap: 9px; }
.workspace-context__trigger { display: grid; grid-template-columns: 28px minmax(0, auto) 14px; min-width: 0; height: 38px; align-items: center; gap: 8px; padding: 4px 7px 4px 4px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-primary); background: transparent; text-align: left; }
.workspace-context__trigger:hover, .workspace-context__trigger[aria-expanded="true"] { border-color: var(--border-subtle); background: var(--surface-2); }
.workspace-context__mark { width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: var(--text-inverse); background: var(--primary); font-size: var(--text-3xs); font-weight: 700; }
.workspace-context__mark.has-logo { padding: 3px; border: 1px solid var(--border-default); background: var(--surface-1); }
.workspace-context__mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.workspace-context__copy { display: grid; min-width: 0; line-height: 1.15; }
.workspace-context__copy small { overflow: hidden; color: var(--text-muted); font-size: var(--text-3xs); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.workspace-context__copy strong { max-width: 170px; overflow: hidden; font-size: var(--text-xs); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.workspace-context__chevron { display: grid; color: var(--text-muted); transition: transform .16s ease; }
/* The workspace chevron opens a menu, so it points down (a right-pointing
   one read as another breadcrumb arrow next to the "/" separators). */
.workspace-context__chevron { transform: rotate(90deg); }
.workspace-context__trigger[aria-expanded="true"] .workspace-context__chevron { transform: rotate(-90deg); }
.workspace-context__crumb { min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--radius-xs); }
.workspace-context__crumb:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.workspace-context h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.workspace-context__separator { color: var(--border-strong); font-size: var(--text-md); }
.workspace-context h1 { color: var(--text-primary); font-size: var(--text-sm); font-weight: 600; }
.workspace-context__plan { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--accent-line); border-radius: var(--radius-pill); color: var(--accent-strong); background: var(--accent-soft); font-size: var(--text-2xs); font-weight: 600; }
.workspace-context__plan:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface-1)); }
.icon-button { border: 1px solid var(--border-subtle); background: var(--surface-1); border-radius: var(--radius-sm); min-width: 36px; height: 36px; padding: 0 8px; display: inline-grid; place-items: center; position: relative; color: var(--text-secondary); }
.icon-button:hover { border-color: var(--border-default); background: var(--surface-2); color: var(--text-primary); }
.topbar-help { font: 600 var(--text-xs) var(--font-sans); }
/* Shows the icon for the mode a click would switch TO (moon while light,
   sun while dark) — the same convention most theme toggles use. grid +
   place-items on the visible one (not just display:block) so the inline
   SVG centers on both axes instead of sitting on its text baseline, which
   reads as "off-centre" inside the button. */
.theme-toggle__icon { grid-area: 1 / 1; display: grid; place-items: center; }
.theme-toggle__icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--sun { display: grid; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__icon--sun { display: grid; }
}
.notification-button { position: relative; width: 36px; height: 36px; flex: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-secondary); display: grid; place-items: center; }
.notification-button:hover, .notification-button[aria-expanded="true"] { border-color: var(--border-default); background: var(--surface-2); color: var(--text-primary); }
.notification-button > svg { display: block; }
.notification-button i { position: absolute; right: -1px; top: -1px; display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; border: 2px solid var(--surface-1); border-radius: var(--radius-pill); background: var(--danger); color: var(--text-inverse); font: normal 700 var(--text-3xs)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.notification-button i[hidden] { display: none; }
.notification-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); position: absolute; right: 6px; top: 6px; }
.command-trigger { height: 36px; min-width: 250px; border: 1px solid var(--border-subtle); background: var(--surface-2); border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--text-muted); font-size: var(--text-xs); text-align: left; }
.command-trigger span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-trigger:hover { border-color: var(--border-default); background: var(--surface-1); color: var(--text-secondary); }
kbd, .command-trigger kbd, .command-input kbd, .command-palette kbd, .keyboard-key, .catalog-search kbd { font: 500 11px var(--font-mono); border: 1px solid var(--border-default); border-radius: 4px; padding: 2px 5px; background: var(--surface-1); color: var(--text-muted); }
.topbar-create { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 13px; border: 1px solid var(--primary); border-radius: var(--radius-sm); color: var(--text-inverse); background: var(--primary); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.topbar-create:hover { background: var(--primary-strong); }
.topbar-profile { display: grid; grid-template-columns: 30px minmax(0, auto) 14px; min-width: 0; height: 40px; align-items: center; gap: 9px; padding: 4px 8px 4px 5px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); background: var(--surface-1); }
.topbar-profile:hover, .topbar-profile[aria-expanded="true"] { border-color: var(--border-default); background: var(--surface-2); }
.topbar-profile .avatar { width: 30px; height: 30px; }
.topbar-profile__copy { display: grid; min-width: 0; max-width: 150px; text-align: left; }
.topbar-profile__copy strong, .topbar-profile__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-profile__copy strong { font-size: var(--text-xs); line-height: 1.2; }
.topbar-profile__copy small { margin-top: 1px; color: var(--text-muted); font-size: 11px; line-height: 1.2; }
.topbar-profile__chevron { display: grid; color: var(--text-muted); transition: transform .16s ease; }
.topbar-profile[aria-expanded="true"] .topbar-profile__chevron { transform: rotate(90deg); }
.mobile-profile-button { width: 36px; height: 36px; place-items: center; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-1); }
.mobile-profile-button .avatar { width: 26px; height: 26px; border-radius: 7px; font-size: var(--text-2xs); }
.mobile-menu-glyph { display: grid; width: 16px; gap: 3px; }
.mobile-menu-glyph i { display: block; width: 16px; height: 1.5px; border-radius: 9px; background: currentColor; }
.system-clock { font: 500 var(--text-2xs) var(--font-mono); color: var(--text-muted); }
.sidebar-mobile-overlay { position: fixed; inset: 0; z-index: 29; background: rgba(20, 23, 28, .32); opacity: 0; transition: opacity .26s ease; }
.sidebar-mobile-overlay.is-visible { opacity: 1; }

.workspace { width: min(100%, var(--content-max)); margin: 0 auto; padding: 32px 32px 64px; display: grid; gap: var(--page-gap); align-content: start; }
.workspace > * { min-width: 0; }
.workspace--dense { padding-top: 24px; }
.workspace [id] { scroll-margin-top: calc(var(--topbar) + 18px); }
.portal-route-progress { position: fixed; z-index: 120; top: 0; left: 0; width: 100%; height: 2px; pointer-events: none; transform: scaleX(0); transform-origin: left; opacity: 0; background: var(--accent); }
body.is-navigating .portal-route-progress { animation: portal-progress .72s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes portal-progress { 0% { opacity: 1; transform: scaleX(0); } 65% { opacity: 1; transform: scaleX(.78); } 100% { opacity: 0; transform: scaleX(1); } }
.has-portal-motion .portal-reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--reveal-delay, 0ms); }
.has-portal-motion .portal-reveal.is-revealed { opacity: 1; transform: none; }
.mobile-dock { display: none; }

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; min-width: 0; }
.page-header__copy { min-width: 0; display: grid; gap: 6px; }
.page-header__title { font-size: var(--text-xl); font-weight: 650; letter-spacing: -.025em; line-height: 1.15; max-width: 760px; }
.page-header__desc { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; max-width: 680px; }
.page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; max-width: 100%; min-width: 0; }
.page-header__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; }
.page-header__back:hover { color: var(--text-primary); }
.page-header__back svg { transform: rotate(180deg); }
.page-header--divided { padding-bottom: 20px; border-bottom: 1px solid var(--border-subtle); }
.page-header--compact .page-header__title { font-size: var(--text-lg); }
.page-header .eyebrow { margin-bottom: -2px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.button {
  height: var(--control-h); padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-default);
  background: var(--surface-1); color: var(--text-primary); font-size: var(--text-sm); font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; box-shadow: var(--shadow-xs); text-decoration: none;
}
.button svg { flex: none; }
.button:hover { background: var(--surface-2); border-color: var(--border-strong); }
.button:active { transform: translateY(1px); }
.button--secondary { background: var(--surface-1); }
.button--primary { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); }
.button--primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
.button--accent { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.button--accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.button--quiet, .button--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary); }
.button--quiet:hover, .button--ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--text-primary); }
.button--danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); }
.button--danger:hover { background: var(--danger); border-color: var(--danger); color: var(--text-inverse); }
.button--sm, .button--compact { height: var(--control-h-sm); padding: 0 11px; font-size: var(--text-xs); border-radius: var(--radius-xs); gap: 6px; }
.button--lg { height: var(--control-h-lg); padding: 0 18px; font-size: var(--text-base); border-radius: var(--radius-md); }
.button--wide { width: 100%; }
.button--icon { width: var(--control-h); padding: 0; }
.button:disabled, .button[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.button.is-loading { color: transparent; position: relative; pointer-events: none; }
.button.is-loading:after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--text-inverse); border-radius: 50%; animation: spin .7s linear infinite; }
.button:not(.button--primary):not(.button--accent).is-loading:after { border-color: var(--border-default); border-top-color: var(--text-primary); }
@keyframes spin { to { transform: rotate(360deg); } }
.button-group { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* --------------------------------------------------------------------------
   Status pills & badges
   -------------------------------------------------------------------------- */
.status, .badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--radius-pill);
  background: var(--surface-3); color: var(--text-secondary); font-size: var(--text-2xs); font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
}
.status__dot, .badge__dot, .badge > i, .status > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* A hairline border in the tone's own colour reads as a defined pill instead
   of a flat colour blob — the same soft-fill + line-border pairing notices,
   chips and buttons already use elsewhere. */
.status--success, .badge--success { background: var(--success-soft); color: var(--success); border-color: var(--success-line); }
.status--warning, .badge--warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-line); }
.status--danger, .badge--danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.status--info, .badge--info { background: var(--info-soft); color: var(--info); border-color: var(--info-line); }
.status--neutral, .badge--neutral { background: var(--surface-3); color: var(--text-muted); }
.status--accent, .badge--accent { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-line); }
.badge--outline { background: transparent; border: 1px solid var(--border-default); }
.badge--sm { height: 20px; padding: 0 7px; font-size: 11px; }
.status--info .status__dot { animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent); } }
.severity { width: 24px; height: 24px; border-radius: var(--radius-xs); display: grid; place-items: center; background: var(--warning-soft); color: var(--warning); font: 700 var(--text-2xs) var(--font-sans); }
.severity--critical { background: var(--danger-soft); color: var(--danger); }
.severity--needs_attention { background: var(--info-soft); color: var(--info); }
.live-label { font: 600 var(--text-2xs) var(--font-sans); color: var(--success); display: inline-flex; gap: 6px; align-items: center; letter-spacing: .04em; text-transform: uppercase; }
.live-label i, .pulse-dot, .signal-dot, .signal-live { width: 7px; height: 7px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 3px var(--success-soft); display: inline-block; }
.count-pill { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-muted); font-size: 11px; font-weight: 600; font-style: normal; justify-content: center; }

/* --------------------------------------------------------------------------
   KPI cards
   -------------------------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.kpi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* A grid item defaults to min-width:auto, so a KPI row refuses to shrink below
   its content and pushes the whole page into a horizontal scroll. */
.kpi-grid, .kpi-grid--4, .kpi-grid--3 { min-width: 0; }
.kpi { min-width: 0; }
.kpi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi {
  position: relative; display: grid; align-content: start; gap: 10px; min-width: 0; padding: 20px 22px;
  background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: inherit;
}
a.kpi:hover, button.kpi:hover { border-color: var(--border-default); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kpi__icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface-3); color: var(--text-secondary); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent); }
.kpi__icon svg { width: 18px; height: 18px; }
.kpi__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi__value, .kpi > strong { display: block; font-size: var(--text-2xl); font-weight: 650; letter-spacing: -.03em; line-height: 1.05; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kpi__meta, .kpi > small { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.45; }
.kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); }
.kpi__link { color: var(--text-secondary); font-weight: 600; }
.kpi__delta { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: 600; background: var(--surface-3); color: var(--text-secondary); }
.kpi__delta--up { background: var(--success-soft); color: var(--success); }
.kpi__delta--down { background: var(--danger-soft); color: var(--danger); }
.kpi--success .kpi__icon { background: var(--success-soft); color: var(--success); }
.kpi--warning .kpi__icon { background: var(--warning-soft); color: var(--warning); }
.kpi--danger .kpi__icon { background: var(--danger-soft); color: var(--danger); }
.kpi--info .kpi__icon { background: var(--info-soft); color: var(--info); }
.kpi--accent .kpi__icon { background: var(--accent-soft); color: var(--accent); }
.kpi--danger .kpi__value { color: var(--danger); }
/* Every toned KPI carries a faint corner wash in its own colour — the "pastel
   gradient, low saturation, KPI cards only" treatment UI_GUIDE.md calls for,
   instead of a flat white card with only the icon carrying colour. */
.kpi--success, .kpi--warning, .kpi--danger, .kpi--info, .kpi--accent {
  background-image: radial-gradient(140px 90px at 100% 0%, var(--kpi-wash) 0%, transparent 75%);
  background-repeat: no-repeat;
}
.kpi--success { --kpi-wash: var(--success-soft); }
.kpi--warning { --kpi-wash: var(--warning-soft); }
.kpi--danger { --kpi-wash: var(--danger-soft); }
.kpi--info { --kpi-wash: var(--info-soft); }
.kpi--accent { --kpi-wash: var(--accent-soft); }
.kpi.is-active { border-color:var(--accent-line); background:var(--surface-1); box-shadow:0 0 0 3px var(--accent-soft), var(--shadow-sm); }
.kpi.is-active .kpi__icon { background:var(--accent); color:var(--text-inverse); }
a.kpi.is-active:hover, button.kpi.is-active:hover { border-color:var(--accent-line); background:var(--surface-1); box-shadow:0 0 0 3px var(--accent-soft), var(--shadow-md); transform:translateY(-1px); }
.kpi--compact { padding: 16px 18px; gap: 6px; }
.kpi--compact .kpi__value { font-size: var(--text-xl); }
.kpi--hero { background: linear-gradient(135deg, var(--surface-1) 0%, var(--accent-soft) 100%); }
/* A row of metrics inside one card (was ops-strip / *-pulse). */
.metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.metric-strip > * { min-width: 0; padding: 16px 20px; border-left: 1px solid var(--border-subtle); display: grid; gap: 4px; align-content: start; color: inherit; }
.metric-strip > *:first-child { border-left: 0; }
.metric-strip small, .metric-strip .metric-label { font-size: var(--text-xs); color: var(--text-secondary); font-weight: 500; text-transform: none; letter-spacing: 0; }
.metric-strip strong { font-size: var(--text-lg); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metric-strip span:not(.status):not(.badge), .metric-strip > * > span:last-child { font-size: var(--text-2xs); color: var(--text-muted); }
.metric-strip > a:hover { background: var(--surface-2); }
.metric-strip > .is-active { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--primary); }
.metric-strip > .has-attention strong { color: var(--danger); }
.ops-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.ops-strip > div { padding: 16px 20px; border-left: 1px solid var(--border-subtle); min-width: 0; }
.ops-strip > div:first-child { border-left: 0; }
.ops-strip strong { display: block; font-size: var(--text-lg); font-weight: 650; letter-spacing: -.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.ops-strip small { font-size: var(--text-2xs); color: var(--text-muted); }
.ops-strip .metric-label { display: flex; align-items: center; gap: 7px; }

/* --------------------------------------------------------------------------
   Cards & grids
   -------------------------------------------------------------------------- */
.card > * { min-width: 0; }
.card { display: flex; flex-direction: column; min-width: 0; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: var(--card-pad) var(--card-pad) 14px; }
.card__head > div:first-child, .card__head > .card__title { min-width: 0; display: grid; gap: 4px; }
.card__head h2, .card__head h3 { font-size: var(--text-base); font-weight: 650; letter-spacing: -.01em; }
.card__head p { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.5; }
.card__head--divided { padding-bottom: var(--card-pad-sm); border-bottom: 1px solid var(--border-subtle); }
.card__head--divided + .card__body { padding-top: var(--card-pad-sm); }
.card__head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.card__body { padding: 0 var(--card-pad) var(--card-pad); min-width: 0; }
.card__body--flush { padding: 0; }
.card__body--pad { padding: var(--card-pad); }
.card__body--stack { display: grid; gap: 16px; }
.card__foot { margin-top: auto; padding: 14px var(--card-pad); border-top: 1px solid var(--border-subtle); background: var(--surface-2); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--text-xs); color: var(--text-secondary); }
.card--pad { padding: var(--card-pad); }
.card--quiet { box-shadow: none; }
.card--subtle { background: var(--surface-2); box-shadow: none; }
.card--overflow { overflow: visible; }
.card--dark { background: var(--surface-inverse); border-color: transparent; color: var(--text-inverse); }
.card--dark .card__head h2, .card--dark .card__head h3 { color: var(--text-inverse); }
.card--dark .card__head p { color: rgba(255, 255, 255, .62); }
.card-link { color: var(--text-secondary); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }
.card-link:hover, .a-link:hover { color: var(--accent); }
.a-link { color: var(--accent); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }
.card-grid { display: grid; gap: var(--page-gap); grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.card-grid--wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--sidebar { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); align-items: start; }
.card-grid--sidebar-left { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); align-items: start; }
.split-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: var(--page-gap); align-items: start; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: var(--page-gap); align-items: start; }
.sticky-aside { position: sticky; top: calc(var(--topbar) + 20px); }

/* --------------------------------------------------------------------------
   Row lists (card-hosted, inspector-style rows)
   -------------------------------------------------------------------------- */
.rows { display: flex; flex-direction: column; min-width: 0; }
.row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-width: 0; padding: 13px var(--card-pad); border: 0; border-top: 1px solid var(--border-subtle); background: transparent; color: inherit; text-align: left; }
.rows > .row:first-child { border-top: 0; }
a.row:hover, button.row:hover { background: var(--surface-2); }
.row.is-active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--primary); }
.row--flush { padding-left: 0; padding-right: 0; }
.row--plain { grid-template-columns: minmax(0, 1fr) auto; }
.row--stack { grid-template-columns: minmax(0, 1fr); }
.row--compact { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
.row__mark { width: 38px; height: 38px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-3); color: var(--text-secondary); font-weight: 700; font-size: var(--text-sm); }
.row__mark img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.row__mark--lg { width: 44px; height: 44px; border-radius: var(--radius-md); }
.row__mark--sm { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.row__mark--accent { background: var(--accent-soft); color: var(--accent-strong); }
.row__body { min-width: 0; }
.row__body strong { display: block; font-size: var(--text-sm); font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__body small { display: block; font-size: var(--text-xs); color: var(--text-secondary); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__body--wrap strong, .row__body--wrap small { white-space: normal; }
.row__end { display: flex; align-items: center; gap: 12px; flex: none; }
.row__stat { text-align: right; }
.row__stat strong { display: block; font-size: var(--text-sm); line-height: 1.2; font-variant-numeric: tabular-nums; }
.row__stat small { display: block; font-size: var(--text-2xs); color: var(--text-muted); margin-top: 2px; }
.row__chevron, .row-open, .chevron { color: var(--text-muted); display: grid; place-items: center; }
/* Legacy alias kept for JS/inspector partials that render .health-row lists. */
.health-list, .customer-list, .compact-jobs { display: grid; }
.health-row, .customer-list button { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto auto 12px; align-items: center; gap: 12px; width: 100%; padding: 12px var(--card-pad-sm); border: 0; border-top: 1px solid var(--border-subtle); background: transparent; color: inherit; text-align: left; }
.health-row:first-child, .customer-list button:first-child { border-top: 0; }
a.health-row:hover, button.health-row:hover, .customer-list button:hover { background: var(--surface-2); }
.health-row.is-active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--primary); }
.health-row > span:nth-child(2) { min-width: 0; }
.health-row strong { font-size: var(--text-sm); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-row small { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 3px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-metric { text-align: right; }
.health-metric strong { font-size: var(--text-xs); }
.health-metric small { margin-top: 2px; }
.customer-list button { grid-template-columns: 30px minmax(0, 1fr) auto; }
.customer-list strong { font-size: var(--text-xs); }
.customer-list small { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 2px; }
.issue-count { font: 600 var(--text-2xs) var(--font-sans); color: var(--warning); }
.health-panel { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--card-pad-sm); min-width: 0; }
.health-panel > .section-heading { margin-bottom: 8px; }
.health-panel > .health-list { margin: 0 calc(var(--card-pad-sm) * -1) calc(var(--card-pad-sm) * -1); }
.health-panel > .health-list .health-row { padding-inline: var(--card-pad-sm); }
.health-panel > .health-list .health-row:first-child { border-top: 1px solid var(--border-subtle); }
.toolbar-note { font-size: var(--text-xs); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 640px; }
.table th { position: sticky; top: 0; z-index: 1; text-align: left; font: 600 var(--text-2xs)/1.2 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 12px var(--card-pad); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.table td { padding: 13px var(--card-pad); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table--compact { min-width: 0; }
.table--compact th, .table--compact td { padding-inline: 14px; }
.table--compact td { padding-block: 10px; }
.td-strong { font-weight: 600; }
.td-muted { color: var(--text-secondary); }
.td-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-actions { text-align: right; white-space: nowrap; }
.td-mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.cell-stack { min-width: 0; max-width: 360px; }
.cell-stack strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-stack small { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cell-inline { display: inline-flex; align-items: center; gap: 9px; }
/* Header-less grid lists (product rows, integration rows) share the header look. */
.data-grid { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-1); box-shadow: var(--shadow-sm); }
.data-grid__head, .list-head { display: grid; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); font: 600 var(--text-2xs)/1.2 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.data-grid__head { grid-template-columns: 1.5fr .7fr .6fr .5fr .7fr; }
.product-row { display: grid; grid-template-columns: 1.5fr .7fr .6fr .5fr .7fr; align-items: center; gap: 10px; width: 100%; border: 0; border-top: 1px solid var(--border-subtle); background: var(--surface-1); text-align: left; padding: 10px 16px; font-size: var(--text-xs); }
.product-row:first-of-type { border-top: 0; }
.product-row:hover { background: var(--surface-2); }
.product-row > span:first-child { display: flex; align-items: center; gap: 8px; }
.product-row > span:first-child i { width: 28px; height: 28px; border-radius: var(--radius-xs); background: var(--surface-3); display: grid; place-items: center; font-style: normal; }
.product-row b { font-size: var(--text-xs); }
.product-row b small { font: 400 var(--text-2xs) var(--font-mono); color: var(--text-muted); margin-top: 3px; }
.channel-stack { display: flex; }
.channel-stack i { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font: 500 11px var(--font-sans); font-style: normal; border: 2px solid var(--surface-1); margin-left: -3px; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 6px; align-content: start; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); min-width: 0; }
.field > span:first-child { display: block; }
.field > span:first-child em, .field-optional { color: var(--text-muted); font-weight: 400; font-style: normal; font-size: var(--text-2xs); }
.field input, .field select, .field textarea, .input, .select, .textarea,
.a-input, .a-select {
  width: 100%; min-width: 0; height: var(--control-h); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-1); padding: 0 12px; font-size: var(--text-sm); font-weight: 400; color: var(--text-primary); outline: 0;
  box-shadow: var(--shadow-xs); transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input::placeholder, .input::placeholder, .textarea::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus, .select:focus, .textarea:focus, .a-input:focus, .a-select:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.field input:disabled, .field select:disabled, .input:disabled, .select:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
.field textarea, .textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.rich-text-editor { position: relative; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-1); box-shadow: var(--shadow-xs); transition: border-color .15s, box-shadow .15s; }
.rich-text-editor:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.rich-text-editor__head { display: grid; gap: 7px; padding: 7px 8px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-2); }
.rich-text-editor__topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rich-text-editor__modes { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-1); }
.rich-text-editor__modes button { height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-muted); font-size: var(--text-2xs); font-weight: 600; }
.rich-text-editor__modes button:hover { color: var(--text-primary); }
.rich-text-editor__modes button.is-active { color: var(--text-primary); background: var(--surface-3); box-shadow: var(--shadow-xs); }
.rich-text-editor__ai-actions { display: inline-flex; align-items: center; gap: 6px; }
.rich-text-editor__ai { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--text-xs); font-weight: 650; white-space: nowrap; box-shadow: var(--shadow-xs); }
.rich-text-editor__ai:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 76%, var(--surface-1)); }
.rich-text-editor__ai--edit { border-color: var(--border-default); background: var(--surface-1); color: var(--text-secondary); }
.rich-text-editor__ai--edit:hover { border-color: var(--accent-line); color: var(--accent-strong); background: var(--surface-1); }
.rich-text-editor__ai b { font-size: 14px; line-height: 1; }
.rich-text-editor__ai.is-loading { opacity: .7; cursor: wait; }
.rich-text-editor__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.rich-text-editor__tools > span { width: 1px; height: 18px; margin: 0 3px; background: var(--border-default); }
.rich-text-editor__tools button { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-xs); background: transparent; color: var(--text-secondary); font-size: var(--text-2xs); font-weight: 600; transition: border-color .14s, background .14s, color .14s, box-shadow .14s; }
.rich-text-editor__tools button:hover { border-color: var(--border-subtle); color: var(--text-primary); background: var(--surface-1); }
.rich-text-editor__tools button:focus-visible { outline: 0; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.rich-text-editor__tools button.is-active, .rich-text-editor__tools button[aria-pressed="true"] { border-color: var(--accent-line); color: var(--accent-strong); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent); }
.rich-text-editor__block { position: relative; flex: none; }
.rich-text-editor__tools .rich-text-editor__block-trigger { display: flex; width: 156px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 9px 0 11px; border-color: var(--border-default); background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow-xs); text-align: left; }
.rich-text-editor__block-trigger svg { flex: none; color: var(--text-muted); transition: transform .15s ease; }
.rich-text-editor__block-trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.rich-text-editor__block-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.rich-text-editor__block-menu { position: absolute; z-index: 12; top: calc(100% + 7px); left: 0; width: 252px; padding: 6px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-1); box-shadow: var(--shadow-lg); }
.rich-text-editor__tools .rich-text-editor__block-menu button { display: grid; width: 100%; height: auto; min-height: 48px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 9px; border: 0; border-radius: var(--radius-sm); color: var(--text-primary); background: transparent; text-align: left; }
.rich-text-editor__tools .rich-text-editor__block-menu button:hover { background: var(--surface-2); }
.rich-text-editor__tools .rich-text-editor__block-menu button.is-active { color: var(--accent-strong); background: var(--accent-soft); box-shadow: none; }
.rich-text-editor__block-menu button.is-active::after { content: '✓'; grid-column: 2; grid-row: 1 / span 2; font-size: var(--text-xs); font-weight: 700; }
.rich-text-editor__block-menu span, .rich-text-editor__block-menu small { display: block; min-width: 0; }
.rich-text-editor__block-menu span { grid-column: 1; font-size: var(--text-xs); font-weight: 650; line-height: 1.3; }
.rich-text-editor__block-menu small { grid-column: 1; color: var(--text-muted); font-size: var(--text-3xs); font-weight: 500; line-height: 1.2; }
.rich-text-editor__block-menu .is-lead { font-size: var(--text-sm); }
.rich-text-editor__block-menu .is-h2 { font-size: var(--text-base); font-weight: 750; }
.rich-text-editor__block-menu .is-h3 { font-size: var(--text-sm); font-weight: 750; }
.rich-text-editor__block-menu .is-h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.rich-text-editor__block-menu .is-quote { padding-left: 7px; border-left: 2px solid var(--accent); font-style: italic; }
.rich-text-editor__tools [data-rte-align="left"] { text-align: left; }
.rich-text-editor__tools [data-rte-align="center"] { text-align: center; }
.rich-text-editor__tools [data-rte-align="right"] { text-align: right; }
.rich-text-editor__popover { position: absolute; z-index: 8; top: 86px; right: 9px; width: min(280px, calc(100% - 18px)); padding: 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-1); box-shadow: var(--shadow-lg); }
.rich-text-editor__popover > strong { display: block; margin-bottom: 10px; font-size: var(--text-xs); }
.rich-text-editor__popover label { display: grid; gap: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 600; }
.rich-text-editor__popover input[type="url"], .rich-text-editor__popover input[type="number"] { width: 100%; height: 34px; padding: 0 9px; border: 1px solid var(--border-default); border-radius: var(--radius-xs); background: var(--surface-1); outline: 0; }
.rich-text-editor__popover input:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.rich-text-editor__popover > div:last-child { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.rich-text-editor__popover > div:last-child button { height: 30px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-xs); background: var(--surface-1); color: var(--text-secondary); font-size: var(--text-2xs); font-weight: 600; }
.rich-text-editor__popover > div:last-child button.is-primary { border-color: var(--primary); background: var(--primary); color: var(--text-inverse); }
.rich-text-editor__table-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rich-text-editor__check { display: flex !important; grid-template-columns: 16px 1fr; align-items: center; gap: 7px !important; margin-top: 10px; }
.rich-text-editor__check input { width: 15px; height: 15px; accent-color: var(--accent); }
.rich-text-editor__surface, .field .rich-text-editor__source, .rich-text-editor__plain { width: 100%; min-height: 240px; max-height: 520px; overflow: auto; margin: 0; padding: 18px 20px; border: 0; border-radius: 0; outline: 0; resize: vertical; background: var(--surface-1); color: var(--text-primary); font: 400 var(--text-sm)/1.7 var(--font-sans); box-shadow: none; }
.field .rich-text-editor__source { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.65; tab-size: 2; }
.rich-text-editor__surface:empty::before { content: 'Ürün açıklamasını yazmaya başlayın…'; color: var(--text-muted); pointer-events: none; }
.rich-text-editor__surface h2, .rich-text-editor__surface h3, .rich-text-editor__surface h4 { margin: 18px 0 7px; line-height: 1.3; }
.rich-text-editor__surface h2 { font-size: var(--text-lg); }
.rich-text-editor__surface h3 { font-size: var(--text-md); }
.rich-text-editor__surface p { margin: 0 0 10px; }
.rich-text-editor__surface .lead { font-size: var(--text-md); line-height: 1.75; color: var(--text-secondary); }
.rich-text-editor__surface .align-center { text-align: center; }
.rich-text-editor__surface .align-right { text-align: right; }
.rich-text-editor__surface ul, .rich-text-editor__surface ol { margin: 8px 0 12px; padding-left: 24px; }
.rich-text-editor__surface blockquote { margin: 12px 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface-2); color: var(--text-secondary); }
.rich-text-editor__surface a { color: var(--accent-strong); text-decoration: underline; }
.rich-text-editor__surface hr { margin: 20px 0; border: 0; border-top: 1px solid var(--border-default); }
.rich-text-editor__surface .product-table { width: 100%; margin: 14px 0; border-spacing: 0; border-collapse: separate; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.rich-text-editor__surface .product-table th, .rich-text-editor__surface .product-table td { min-width: 90px; padding: 9px 10px; border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.rich-text-editor__surface .product-table th { background: var(--surface-2); font-size: var(--text-xs); font-weight: 650; }
.rich-text-editor__surface .product-table td { background: var(--surface-1); }
.rich-text-editor__surface .product-table tr:last-child > * { border-bottom: 0; }
.rich-text-editor__surface .product-table tr > *:last-child { border-right: 0; }
.rich-text-editor > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 6px 10px; border-top: 1px solid var(--border-subtle); background: var(--surface-2); color: var(--text-muted); font-size: 11px; font-weight: 500; }
.rich-text-editor [hidden] { display: none !important; }

/* AI content studio — suggestions remain drafts until the user explicitly applies them. */
.ai-content-studio { width: min(920px, calc(100vw - 32px)); max-width: none; max-height: min(880px, calc(100vh - 32px)); padding: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-1); color: var(--text-primary); box-shadow: 0 28px 90px rgba(15, 23, 42, .24); }
.ai-content-studio::backdrop { background: rgba(15, 23, 42, .48); backdrop-filter: blur(5px); }
.ai-content-studio[open] { animation: ai-studio-in .18s ease-out; }
@keyframes ai-studio-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.ai-content-studio__shell { display: grid; max-height: min(880px, calc(100vh - 32px)); grid-template-rows: auto minmax(0, 1fr) auto; }
.ai-content-studio__head { display: grid; grid-template-columns: 42px minmax(0, 1fr) 34px; align-items: start; gap: 12px; padding: 20px 22px 18px; border-bottom: 1px solid var(--border-subtle); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 72%, var(--surface-1)), var(--surface-1) 62%); }
.ai-content-studio__spark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--accent-line); border-radius: 13px; background: var(--accent-soft); color: var(--accent-strong); font-size: 19px; box-shadow: var(--shadow-xs); }
.ai-content-studio__head small, .ai-content-studio__head strong, .ai-content-studio__head p { display: block; }
.ai-content-studio__head small { margin-bottom: 3px; color: var(--accent-strong); font-size: var(--text-3xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.ai-content-studio__head strong { font-size: var(--text-lg); line-height: 1.25; }
.ai-content-studio__head p { margin-top: 5px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.5; }
.ai-content-studio__close { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 22px; line-height: 1; }
.ai-content-studio__close:hover { border-color: var(--border-subtle); background: var(--surface-1); color: var(--text-primary); }
.ai-content-studio__body, .ai-content-studio__result { min-height: 0; overflow: auto; padding: 20px 22px; }
.ai-content-studio__context { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-bottom: 20px; padding: 11px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); }
.ai-content-studio__context > span { color: var(--text-muted); font-size: var(--text-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.ai-content-studio__context strong { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.ai-content-studio__context small { color: var(--text-muted); font-size: var(--text-2xs); white-space: nowrap; }
.ai-content-studio fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ai-content-studio legend, .ai-content-studio__instruction > span { margin-bottom: 8px; color: var(--text-secondary); font-size: var(--text-xs); font-weight: 650; }
.ai-choice-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.ai-choice-grid label, .ai-segmented label { position: relative; min-width: 0; cursor: pointer; }
.ai-choice-grid input, .ai-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.ai-choice-grid label > span { display: grid; min-height: 66px; align-content: center; gap: 4px; padding: 9px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-1); transition: border-color .14s, background .14s, box-shadow .14s; }
.ai-choice-grid label:hover > span { border-color: var(--border-strong); background: var(--surface-2); }
.ai-choice-grid input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); }
.ai-choice-grid input:focus-visible + span, .ai-segmented input:focus-visible + span { box-shadow: var(--shadow-focus); }
.ai-choice-grid b { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.ai-choice-grid small { color: var(--text-muted); font-size: var(--text-3xs); line-height: 1.25; }
.ai-content-studio__options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.ai-segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); }
.ai-segmented span { display: grid; min-height: 32px; place-items: center; border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--text-2xs); font-weight: 650; }
.ai-segmented input:checked + span { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.ai-content-studio__instruction { position: relative; display: grid; margin-top: 18px; }
.ai-content-studio__instruction > span small { margin-left: 5px; color: var(--text-muted); font-weight: 500; }
.ai-content-studio__instruction textarea { width: 100%; min-height: 82px; padding: 10px 12px 24px; resize: vertical; border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: 0; background: var(--surface-1); color: var(--text-primary); font: 400 var(--text-xs)/1.55 var(--font-sans); }
.ai-content-studio__instruction textarea:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.ai-content-studio__instruction i { position: absolute; right: 9px; bottom: 7px; color: var(--text-muted); font-size: var(--text-3xs); font-style: normal; }
.ai-content-studio__check { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; cursor: pointer; }
.ai-content-studio__check input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--accent); }
.ai-content-studio__check b, .ai-content-studio__check small { display: block; }
.ai-content-studio__check b { font-size: var(--text-xs); }
.ai-content-studio__check small { margin-top: 3px; color: var(--text-muted); font-size: var(--text-3xs); }
.ai-content-studio__result-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ai-content-studio__result-head small, .ai-content-studio__result-head strong { display: block; }
.ai-content-studio__result-head small { color: var(--accent-strong); font-size: var(--text-3xs); font-weight: 750; letter-spacing: .07em; }
.ai-content-studio__result-head strong { margin-top: 3px; font-size: var(--text-md); }
.ai-content-studio__result-badge { padding: 5px 8px; border: 1px solid var(--warning-line); border-radius: var(--radius-pill); background: var(--warning-soft); color: var(--warning); font-size: var(--text-3xs); font-weight: 650; }
.ai-content-studio__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ai-content-studio__compare article { min-width: 0; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-1); }
.ai-content-studio__compare article.is-suggestion { border-color: var(--accent-line); }
.ai-content-studio__compare article > header { display: flex; min-height: 38px; align-items: center; justify-content: space-between; padding: 8px 11px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-2); color: var(--text-secondary); font-size: var(--text-2xs); font-weight: 650; }
.ai-content-studio__compare article.is-suggestion > header { background: var(--accent-soft); color: var(--accent-strong); }
.ai-content-studio__compare article > header b { font-size: var(--text-3xs); }
.ai-content-studio__compare article > div { max-height: 360px; overflow: auto; padding: 14px; color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.65; }
.ai-content-studio__compare article > div > * + * { margin-top: 10px; }
.ai-content-studio__compare article > div h2, .ai-content-studio__compare article > div h3, .ai-content-studio__compare article > div h4 { color: var(--text-primary); line-height: 1.35; }
.ai-content-studio__compare article > div ul, .ai-content-studio__compare article > div ol { padding-left: 20px; }
.ai-content-studio__seo { margin-top: 10px; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); font-size: var(--text-2xs); line-height: 1.5; }
.ai-content-studio__error { margin: 0 22px 16px; padding: 10px 12px; border: 1px solid var(--danger-line); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: var(--text-xs); }
.ai-content-studio__footer { display: flex; align-items: center; gap: 8px; padding: 13px 22px; border-top: 1px solid var(--border-subtle); background: var(--surface-2); }
.ai-content-studio__footer > span { flex: 1; }
.ai-content-studio__generate.is-loading span:first-child { animation: ai-spark 1s ease-in-out infinite; }
@keyframes ai-spark { 50% { transform: rotate(20deg) scale(1.18); opacity: .6; } }
@media (max-width: 760px) {
  .rich-text-editor__topline { align-items: stretch; flex-direction: column; }
  .rich-text-editor__ai-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .rich-text-editor__ai { width: 100%; }
  .rich-text-editor__tools { flex-wrap: wrap; overflow: visible; }
  .rich-text-editor__block { width: 100%; margin-bottom: 3px; }
  .rich-text-editor__tools .rich-text-editor__block-trigger { width: 100%; }
  .rich-text-editor__block-menu { width: 100%; }
  .rich-text-editor__surface, .field .rich-text-editor__source, .rich-text-editor__plain { min-height: 280px; padding: 15px; }
  .rich-text-editor__popover { top: 126px; }
  .ai-content-studio { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: var(--radius-lg); }
  .ai-content-studio__shell { max-height: calc(100vh - 16px); }
  .ai-content-studio__head { grid-template-columns: 36px minmax(0, 1fr) 32px; padding: 15px; }
  .ai-content-studio__spark { width: 36px; height: 36px; }
  .ai-content-studio__body, .ai-content-studio__result { padding: 15px; }
  .ai-content-studio__context { grid-template-columns: auto minmax(0, 1fr); }
  .ai-content-studio__context small { grid-column: 2; white-space: normal; }
  .ai-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-content-studio__options, .ai-content-studio__compare { grid-template-columns: 1fr; }
  .ai-content-studio__footer { flex-wrap: wrap; padding: 11px 15px; }
  .ai-content-studio__footer > span { display: none; }
  .ai-content-studio__footer .button { flex: 1 1 auto; }
  .ai-content-studio__error { margin-inline: 15px; }
}
.field select, .select, .a-select { padding-right: 34px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238a919e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; cursor: pointer; }
.field input[type="file"] { padding: 8px 12px; line-height: 1.2; }
.field input[type="date"] { line-height: 1; }
.field > small, .field-hint, .a-fieldrow small { color: var(--text-muted); font-weight: 400; font-size: var(--text-2xs); line-height: 1.5; }
.field-error, .field--error > small, .field--error .field-hint { color: var(--danger) !important; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--danger); }
.field--error input:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.field--inline { display: flex; align-items: center; gap: 9px; font-weight: 500; cursor: pointer; }
.field--inline input { width: 16px; height: 16px; accent-color: var(--primary); }
.field--file { gap: 8px; }
.input--sm, .select--sm { height: var(--control-h-sm); font-size: var(--text-xs); border-radius: var(--radius-xs); padding-inline: 10px; }
.input--search { flex: 1 1 260px; max-width: 380px; }
.input-action { position: relative; }
.input-action input { padding-right: 72px; }
.input-action button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); height: 30px; padding: 0 9px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-secondary); font-size: var(--text-xs); font-weight: 600; }
.input-action button:hover { background: var(--surface-3); color: var(--text-primary); }
.input-group { display: flex; align-items: stretch; min-width: 0; }
.input-group > span { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--border-default); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--surface-2); color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }
.input-group > input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.search-field { position: relative; display: flex; align-items: center; min-width: 0; }
.search-field > b, .search-field > svg, .search-field > span:first-child { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: grid; }
.search-field input { padding-left: 36px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--auto, .a-formgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.form-grid--1 { grid-template-columns: minmax(0, 1fr); }
.form-grid > .field--wide, .form-grid > .wizard-wide, .form-grid > .span-2 { grid-column: 1 / -1; }
.form-section, .a-section { display: grid; gap: 14px; min-width: 0; }
.form-section > h3, .a-section > h3 { font-size: var(--text-base); font-weight: 650; }
.form-section__head { display: grid; gap: 4px; }
.form-section__head p { font-size: var(--text-xs); color: var(--text-secondary); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.form-actions--end { justify-content: flex-end; }
.form-actions--split { justify-content: space-between; }
.form-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.form-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); }
.form-row a, .portal-switch a { color: var(--accent); font-weight: 600; }
.form-help { display: flex; align-items: center; gap: 9px; font-size: var(--text-xs); color: var(--text-muted); }
.check { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.control-row { display: flex; flex-wrap: wrap; gap: 22px; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch > span { width: 34px; height: 20px; flex: none; background: var(--border-strong); border-radius: var(--radius-pill); padding: 2px; transition: background .15s; }
.switch > span:after { content: ""; display: block; width: 16px; height: 16px; background: var(--text-inverse); border-radius: 50%; transition: transform .15s; box-shadow: var(--shadow-sm); }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span:after { transform: translateX(14px); }
.switch input:focus-visible + span { box-shadow: var(--shadow-focus); }
.choice-list { display: grid; gap: 8px; }
.choice-list label { position: relative; cursor: pointer; }
.choice-list input { position: absolute; opacity: 0; }
.choice-list label > span { display: block; padding: 11px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-1); }
.choice-list label:hover > span { border-color: var(--border-default); background: var(--surface-2); }
.choice-list input:checked + span { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--surface-1); }
.choice-list strong, .choice-list small { display: block; }
.choice-list strong { font-size: var(--text-sm); }
.choice-list small { margin-top: 3px; color: var(--text-muted); font-size: var(--text-2xs); line-height: 1.45; }
.file-drop { position: relative; min-height: 150px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; cursor: pointer; padding: 20px; }
.file-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.file-drop input { position: absolute; opacity: 0; pointer-events: none; }
.file-drop > span { color: var(--accent); }
.file-drop strong { font-size: var(--text-sm); }
.file-drop small { font-size: var(--text-2xs); color: var(--text-muted); }
.form-alert { --alert-tone: var(--danger); display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px 14px; border: 1px solid var(--danger-line); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger-strong); font-size: var(--text-sm); line-height: 1.45; }
.form-alert > span:first-child { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--alert-tone); color: var(--text-inverse); font-size: var(--text-2xs); font-weight: 700; line-height: 1; }
.form-alert__body { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.form-alert__body strong { color: var(--text-primary); font-weight: 600; }
.form-alert__body span { color: var(--text-secondary); }
.form-alert--success { --alert-tone: var(--success); border-color: var(--success-line); background: var(--success-soft); color: var(--success-strong); }
.form-alert--warning { --alert-tone: var(--warning); border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning-strong); }
.a-fieldrow { display: grid; gap: 6px; font-size: var(--text-sm); font-weight: 600; min-width: 0; }
.select--auto, .input--auto { width: auto; }
.form-gap { margin-top: 16px; }
.form-gap-sm { margin-top: 10px; }
.form-notice { margin-bottom: 16px; }
.card__inset { margin: 0 var(--card-pad) var(--card-pad); }
.kpi .kpi__value--text { font-size: var(--text-lg); letter-spacing: -.01em; overflow-wrap: anywhere; white-space: normal; }

/* Searchable select (smart-select.js) */
.smart-select { position: relative; }
.smart-select > select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.smart-select__trigger { width: 100%; height: var(--control-h); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-1); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; text-align: left; font-size: var(--text-sm); font-weight: 400; box-shadow: var(--shadow-xs); }
.smart-select__trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-select__trigger i { flex: none; width: 7px; height: 7px; margin: 0 2px 3px 12px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); transition: transform .15s ease, border-color .15s ease; }
.smart-select.is-open .smart-select__trigger { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.smart-select.is-open .smart-select__trigger i { transform: translateY(3px) rotate(225deg); border-color: var(--accent); }
/* position: fixed so the menu escapes an overflow:hidden card; JS pins it to
   the trigger's rect on open and closes it on scroll. */
.smart-select__menu { position: fixed; z-index: 95; padding: 8px; background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.smart-select__menu--compact { padding: 5px; }
.smart-select__search { width: 100%; height: 36px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 0 10px; background: var(--surface-2); outline: 0; font-size: var(--text-sm); }
.smart-select__search:focus { border-color: var(--accent); background: var(--surface-1); }
.smart-select__options { max-height: 240px; overflow: auto; margin-top: 6px; }
.smart-select__option { width: 100%; min-height: 34px; border: 0; background: transparent; border-radius: var(--radius-xs); padding: 7px 10px; text-align: left; font-size: var(--text-sm); display: flex; align-items: center; }
.smart-select__option:hover, .smart-select__option.is-selected { background: var(--surface-3); color: var(--text-primary); }
.smart-select__menu--compact .smart-select__options { margin-top: 0; }
.smart-select__menu--compact .smart-select__option { min-height: 36px; padding: 7px 9px; }
.smart-select__option.is-selected { font-weight: 600; }
.smart-select__option--create { color: var(--accent); font-weight: 600; }
.smart-select__empty { padding: 12px 10px; color: var(--text-muted); font-size: var(--text-xs); }

/* --------------------------------------------------------------------------
   Tabs, pills, filters, chips, pagination
   -------------------------------------------------------------------------- */
.tabs, .segmented, .inspector__tabs, .a-tabbar { display: flex; align-items: stretch; gap: 4px; border-bottom: 1px solid var(--border-subtle); min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar, .segmented::-webkit-scrollbar, .inspector__tabs::-webkit-scrollbar { display: none; }
.tabs--scroll, .inspector__tabs--scroll, .a-tabbar { overflow-x: auto; scrollbar-width: none; }
.tabs--scroll::-webkit-scrollbar, .inspector__tabs--scroll::-webkit-scrollbar, .a-tabbar::-webkit-scrollbar { display: none; }
.tabs > a, .tabs > button, .segmented > a, .segmented > button, .inspector__tabs > button, .inspector__tabs > a, .a-tab-link {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--tab-h); padding: 0 12px; border: 0; border-radius: 0;
  background: transparent; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
}
.tabs > a:hover, .tabs > button:hover, .segmented > a:hover, .segmented > button:hover, .inspector__tabs > button:hover, .a-tab-link:hover { color: var(--text-primary); }
.tabs > .is-active, .segmented > .is-active, .inspector__tabs > .is-active, .a-tab-link.is-active { color: var(--text-primary); font-weight: 600; }
.tabs > .is-active:after, .segmented > .is-active:after, .inspector__tabs > .is-active:after, .a-tab-link.is-active:after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary); }
.tabs span, .segmented span, .tabs i, .segmented i, .inspector__tabs button span { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-muted); font-size: 11px; font-weight: 600; font-style: normal; justify-content: center; margin-left: 2px; }
.tabs > .is-active span, .segmented > .is-active span, .tabs > .is-active i, .segmented > .is-active i { background: var(--primary); color: var(--text-inverse); }
.tabs--card { border: 0; padding: 4px; background: var(--surface-3); border-radius: var(--radius-md); gap: 2px; }
.tabs--card > a, .tabs--card > button { height: 34px; border-radius: var(--radius-sm); padding: 0 12px; font-size: var(--text-xs); }
.tabs--card > .is-active { background: var(--surface-1); box-shadow: var(--shadow-sm); }
.tabs--card > .is-active:after { content: none; }
.pill-tabs, .a-pills, .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.pill-tabs > a, .pill-tabs > button, .filter-chip, .a-pill, .chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  background: var(--surface-1); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-xs);
}
.pill-tabs > a:hover, .pill-tabs > button:hover, .filter-chip:hover, .a-pill:hover, .chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.pill-tabs > .is-active, .filter-chip.is-active, .a-pill.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong); box-shadow: none; }
/* Hovering the selected pill must not repaint its label in the base hover
   colour — that is near-black text on the near-black active fill. */
.pill-tabs > a.is-active:hover, .pill-tabs > button.is-active:hover, .filter-chip.is-active:hover, .a-pill.is-active:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.pill-tabs i, .filter-chip span, .pill-tabs span.count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-muted); font-size: 11px; font-weight: 600; font-style: normal; }
.pill-tabs > .is-active i, .filter-chip.is-active span { background: var(--surface-1); color: var(--accent-strong); }
.pill-tabs--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pill-tabs--scroll::-webkit-scrollbar { display: none; }
.chip--removable { padding-right: 6px; }
.chip--removable i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); font-style: normal; font-size: 13px; line-height: 1; }
.chip--removable:hover { border-color: var(--danger-line); color: var(--danger); }
.chip--removable:hover i { background: var(--danger-soft); color: var(--danger); }
.filter-spacer { flex: 1; }
.filter-bar, .a-filters { gap: 8px; }
.filter-bar .field { gap: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.toolbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.pagination { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.pagination a, .pagination button, .pagination__control { min-width: 32px; height: 32px; padding: 0 6px; display: grid; place-items: center; border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.pagination a:hover, .pagination button:hover { border-color: var(--border-default); background: var(--surface-1); color: var(--text-primary); }
.pagination .is-active, .pagination a.is-active, .pagination button.is-active { border-color: var(--primary); background: var(--primary); color: var(--text-inverse); }
.pagination button:disabled, .pagination__control.is-disabled { opacity: .4; pointer-events: none; }
.pagination__gap { width: 24px; display: grid; place-items: center; color: var(--text-muted); font-size: var(--text-xs); }
.list-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 4px 0; color: var(--text-muted); font-size: var(--text-xs); }

/* --------------------------------------------------------------------------
   Meters, progress, timeline
   -------------------------------------------------------------------------- */
.meter, .a-meter, .progress, .mini-progress, .job-progress { height: 6px; width: 90px; flex: none; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.meter i, .meter span, .meter b, .a-meter i, .progress span, .mini-progress i, .job-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.meter--fluid, .progress, .mini-progress, .job-progress { width: 100%; }
.meter--thin { height: 4px; }
.meter--success i, .a-meter--ok i, .meter--success span { background: var(--success); }
.meter--warning i, .a-meter--warn i, .meter--warning span { background: var(--warning); }
.meter--danger i, .a-meter--bad i, .meter--danger span { background: var(--danger); }
.meter-row { display: flex; align-items: center; gap: 9px; font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.timeline li { border-left: 1px solid var(--border-default); padding-left: 12px; position: relative; }
.timeline__dot { position: absolute; width: 8px; height: 8px; background: var(--surface-1); border: 2px solid var(--accent); border-radius: 50%; left: -5px; top: 2px; }
.timeline time { font: 500 var(--text-2xs) var(--font-sans); color: var(--text-muted); }
.timeline strong { font-size: var(--text-sm); display: block; margin: 7px 0 2px; }
.timeline small { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; }
.timeline-list { display: grid; gap: 0; }
.timeline-item { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.vertical-timeline { list-style: none; margin: 0; padding: 0; }
.vertical-timeline li { display: grid; grid-template-columns: 8px 56px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.vertical-timeline li > i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent); margin-top: 4px; }
.vertical-timeline time { font: 500 var(--text-2xs) var(--font-mono); color: var(--text-muted); }
.vertical-timeline strong { font-size: var(--text-xs); display: block; }
.vertical-timeline small { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 3px; }

/* --------------------------------------------------------------------------
   Empty states, notices, skeletons
   -------------------------------------------------------------------------- */
.empty-state, .a-empty, .resource-empty, .inspector-empty, .mini-empty { display: grid; justify-items: center; align-content: center; gap: 6px; padding: 40px 24px; text-align: center; color: var(--text-secondary); font-size: var(--text-sm); }
.empty-state > span:first-child, .empty-state__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: var(--radius-md); background: var(--surface-3); color: var(--text-secondary); font-size: var(--text-lg); }
.empty-state strong, .a-empty strong, .inspector-empty h3 { font-size: var(--text-base); font-weight: 650; color: var(--text-primary); }
.empty-state p, .inspector-empty p, .empty-state small { max-width: 420px; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.55; }
.empty-state .button, .empty-state > a.text-link { margin-top: 10px; }
.empty-state--dashed { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2); }
.empty-state--card { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-sm); }
.empty-state--left { justify-items: start; text-align: left; align-content: start; }
.empty-state--compact { padding: 24px 16px; }
.inspector-empty { padding: 48px 12px; }
.inspector-empty .eyebrow { margin-bottom: 4px; }
.resource-empty, .mini-empty { padding: 28px 20px; font-size: var(--text-xs); color: var(--text-muted); }
.notice, .alert, .a-notice, .intel-banner, .inspector-alert, .runtime-disclosure, .billing-alert, .plan-limit-alert {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border: 1px solid var(--info-line); border-radius: var(--radius-md);
  background: var(--info-soft); color: var(--text-primary); font-size: var(--text-sm); line-height: 1.5;
}
.notice > b, .a-notice > b, .notice__icon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .7); color: var(--info); font-size: 12px; }
.notice > span, .notice__body { min-width: 0; flex: 1; }
.notice strong { font-weight: 650; }
.notice p { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--text-xs); }
.notice small { margin-top: 3px; color: var(--text-secondary); font-size: var(--text-xs); }
.notice__action { flex: none; align-self: center; font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.notice--success, .alert--success, .a-notice--ok, .intel-banner--success, .billing-alert--success { border-color: var(--success-line); background: var(--success-soft); }
.notice--success > b, .a-notice--ok > b, .notice--success .notice__icon { color: var(--success); }
.notice--warning, .alert--warning, .intel-banner--warning, .billing-alert--warning, .plan-limit-alert, .runtime-disclosure--mock, .inspector-alert--warning { border-color: var(--warning-line); background: var(--warning-soft); }
.notice--warning > b, .notice--warning .notice__icon { color: var(--warning); }
.notice--danger, .alert--danger, .a-notice--bad, .intel-banner--danger, .billing-alert--danger { border-color: var(--danger-line); background: var(--danger-soft); }
.notice--danger > b, .a-notice--bad > b, .notice--danger .notice__icon { color: var(--danger); }
.notice--neutral, .alert--neutral { border-color: var(--border-subtle); background: var(--surface-2); }
.notice--neutral > b { color: var(--text-secondary); }
.notice--compact { padding: 10px 12px; font-size: var(--text-xs); }
.inspector-alert { margin: 0 20px 12px; }
.inspector-alert strong { display: block; font-size: var(--text-sm); margin-bottom: 2px; }
.inspector-alert p { margin: 0; color: var(--text-secondary); font-size: var(--text-xs); }
.runtime-disclosure { align-items: center; }
.runtime-disclosure strong { font-size: var(--text-sm); }
.runtime-disclosure small { margin-top: 2px; font-size: var(--text-xs); color: var(--text-secondary); }
.secure-note { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--success-soft); border: 1px solid var(--success-line); color: var(--success); border-radius: var(--radius-sm); margin-top: 14px; font-size: var(--text-xs); }
.secure-note strong { font-size: var(--text-xs); display: block; }
.secure-note small { font-size: var(--text-2xs); margin-top: 2px; color: var(--text-secondary); }
.secure-note--warning { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }
.secure-note.is-error { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.skeleton-card { min-height: 180px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 22px; display: grid; align-content: center; gap: 12px; background: var(--surface-1); }
.skeleton-card > * { display: block; border-radius: 5px; background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200%; animation: shimmer 1.3s infinite; }
.skeleton-card i { width: 36px; height: 36px; border-radius: 9px; }
.skeleton-card span { height: 9px; }
.skeleton-card span:nth-child(3) { width: 80%; }
.skeleton-card span:nth-child(4) { width: 55%; }
@keyframes shimmer { to { background-position: -200%; } }
.inspector-loading { position: fixed; z-index: 80; inset: var(--space-6); margin: auto; width: min(640px, calc(100vw - var(--space-6) * 2)); height: min(560px, calc(100dvh - var(--space-6) * 2)); background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 24px; }
.inspector-loading > i, .inspector-loading > span { display: block; background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200%; animation: shimmer 1.2s infinite; border-radius: 7px; }
.inspector-loading > i { width: 130px; height: 18px; margin-bottom: 28px; }
.inspector-loading > span { height: 12px; margin: 12px 0; }
.inspector-loading > span:nth-child(3) { width: 78%; }
.inspector-loading > span:nth-child(4) { height: 120px; margin-top: 26px; }
.code-block, .a-code, pre.code { margin: 0; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-inverse); color: var(--code-text); font: 400 var(--text-xs)/1.6 var(--font-mono); overflow: auto; max-height: 260px; white-space: pre; }
.code-block--light { background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border-subtle); }
code:not(pre code) { font-size: .92em; }
.inline-code, .notice code, .card__body p code, .extension-guide code, .wizard-advanced__hint code { padding: 1px 6px; border-radius: 4px; background: var(--surface-3); font-family: var(--font-mono); font-size: .9em; }

/* --------------------------------------------------------------------------
   Definition lists & detail groups
   -------------------------------------------------------------------------- */
.detail-list { margin: 0; }
.detail-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.detail-list dt { color: var(--text-muted); font-size: var(--text-xs); }
.detail-list dd { margin: 0; font-size: var(--text-xs); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.deflist, .a-deflist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.def, .a-def { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 16px; min-width: 0; }
.def dt, .a-def dt { font: 600 var(--text-2xs)/1.2 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.def dd, .a-def dd { font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; line-height: 1.35; margin: 0; }
.inspector-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); margin: 14px 0; overflow: hidden; }
.inspector-metrics > div { padding: 12px 14px; border-left: 1px solid var(--border-subtle); min-width: 0; }
.inspector-metrics > div:first-child { border-left: 0; }
.inspector-metrics small, .inspector-metrics span { font-size: var(--text-2xs); color: var(--text-muted); display: block; }
.inspector-metrics strong { display: block; font-size: var(--text-sm); margin-top: 4px; font-variant-numeric: tabular-nums; }
.detail-hero, .product-hero { padding: 16px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.detail-hero strong { display: block; margin-bottom: 4px; }
.product-hero > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface-3); font-size: var(--text-lg); }
.product-hero h3 { font-size: var(--text-base); }
.product-hero p { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; }
.inspector-note { display: flex; gap: 9px; margin-top: 20px; background: var(--info-soft); border: 1px solid var(--info-line); color: var(--info); padding: 12px; border-radius: var(--radius-sm); font-size: var(--text-xs); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Identity: avatars, marketplace marks, channel emblems, product thumbnails
   -------------------------------------------------------------------------- */
.avatar { width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: var(--text-xs); flex: none; }
.avatar img, .avatar.has-image img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.avatar--lg { width: 44px; height: 44px; border-radius: var(--radius-md); font-size: var(--text-sm); }
.marketplace-mark, .channel-emblem { position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-1); color: var(--text-secondary); font-weight: 700; font-size: var(--text-sm); padding: 0; }
.marketplace-mark { overflow: hidden; }
.channel-emblem { overflow: visible; }
.marketplace-mark { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.channel-emblem i { position: absolute; z-index: 2; width: 11px; height: 11px; right: -3px; bottom: -3px; border: 2px solid var(--surface-1); border-radius: 50%; background: var(--success); box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 20%, transparent); }
.channel-emblem--trendyol, .channel-mini--trendyol, .marketplace-mark--trendyol { color: var(--channel-trendyol); }
.channel-emblem--hepsiburada, .channel-mini--hepsiburada, .marketplace-mark--hepsiburada { color: var(--channel-hepsiburada); }
.channel-emblem--idefix, .channel-mini--idefix, .marketplace-mark--idefix { color: var(--channel-idefix); }
.channel-emblem--website, .channel-mini--website, .marketplace-mark--website { color: var(--channel-website); }
.channel-emblem--xml, .channel-mini--xml { color: var(--channel-xml); }
.channel-emblem--amazon, .channel-mini--amazon, .marketplace-mark--amazon { color: var(--channel-amazon); }
.channel-emblem--ciceksepeti, .channel-mini--ciceksepeti, .marketplace-mark--ciceksepeti { color: var(--channel-ciceksepeti); }
.channel-emblem--mediamarkt, .channel-mini--mediamarkt, .marketplace-mark--mediamarkt { color: var(--channel-mediamarkt); }
.channel-emblem--morhipo, .channel-mini--morhipo, .marketplace-mark--morhipo { color: var(--channel-morhipo); }
.channel-emblem--modanisa, .channel-mini--modanisa, .marketplace-mark--modanisa { color: var(--channel-modanisa); }
/* A ring tinted by the channel's own colour instead of the same neutral grey
   border every logo chip otherwise shares — cheap, cascades to every order
   row, product channel tab and integration list in the app. */
.channel-emblem--trendyol, .marketplace-mark--trendyol,
.channel-emblem--hepsiburada, .marketplace-mark--hepsiburada,
.channel-emblem--idefix, .marketplace-mark--idefix,
.channel-emblem--website, .marketplace-mark--website,
.channel-emblem--xml, .marketplace-mark--xml,
.channel-emblem--amazon, .marketplace-mark--amazon,
.channel-emblem--ciceksepeti, .marketplace-mark--ciceksepeti,
.channel-emblem--mediamarkt, .marketplace-mark--mediamarkt,
.channel-emblem--morhipo, .marketplace-mark--morhipo,
.channel-emblem--modanisa, .marketplace-mark--modanisa {
  border-color: color-mix(in srgb, currentColor 32%, var(--border-subtle));
  background: color-mix(in srgb, currentColor 6%, var(--surface-1));
}
.channel-mini { width: 20px; height: 20px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-xs); background: var(--surface-3); font: 600 11px var(--font-sans); font-style: normal; }
.channel-emblem img, .marketplace-mark img, .marketplace-badge img, .channel-mini img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.marketplace-logo { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--media-backdrop); border-radius: inherit; padding: 4px; }
.channel-mini .marketplace-logo { padding: 2px; }
.marketplace-logo--favicon { padding: 6px; }
.marketplace-badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 5px 9px 5px 6px; font-size: var(--text-xs); font-weight: 600; background: var(--surface-1); }
.marketplace-badge > span[aria-hidden="true"] { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 5px; background: var(--surface-3); }
.product-visual { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--surface-3); font-weight: 700; font-size: var(--text-sm); font-style: normal; color: var(--text-secondary); }
.product-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; border-radius: inherit; }
.product-visual--1 { background: var(--accent-soft); color: var(--accent); }
.product-visual--2 { background: var(--success-soft); color: var(--success); }
.product-visual--3 { background: var(--warning-soft); color: var(--warning); }
.product-visual--4 { background: var(--info-soft); color: var(--info); }
.product-visual--5 { background: var(--danger-soft); color: var(--danger); }
.product-thumb { width: 28px; height: 28px; border-radius: var(--radius-xs); background: var(--surface-3); display: grid; place-items: center; font-size: var(--text-xs); overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Product photo frames: a definite grid track lets the image's height:100% resolve.
   With an auto row a portrait photo grew to its own ratio and slid down out of the frame. */
.pd-header__thumb, .product-detail-header__thumb, .product-quick-avatar, .product-visual, .product-thumb { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.job-symbol { width: 26px; height: 26px; border-radius: var(--radius-xs); background: var(--surface-3); display: grid; place-items: center; color: var(--accent); }

/* --------------------------------------------------------------------------
   Overlays: scrim, inspector drawer, wizard drawer, modal, popover, palette
   -------------------------------------------------------------------------- */
/* A plain dim, no backdrop blur: a full-viewport backdrop-filter is re-rendered on every frame behind the drawer and
   stalls software-rendered WebKit (CI) and low-end devices; the 2px blur was barely visible. */
.overlay { position: fixed; inset: 0; z-index: 70; background: rgba(20, 23, 28, .34); display: block; }
a.overlay { cursor: default; }
/* Every inspector is a centered modal card. Width per type via --inspector-width. */
.inspector {
  position: fixed; z-index: 80; inset: var(--space-6); margin: auto;
  width: min(var(--inspector-width, 640px), calc(100vw - var(--space-6) * 2));
  height: var(--inspector-height, auto);
  max-height: min(var(--inspector-max-height, 760px), calc(100dvh - var(--space-6) * 2));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(10px) scale(.985);
  transition: opacity .16s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}
/* A closed inspector still sits centred and fixed (just transparent). It must
   not swallow clicks or wheel events from the page underneath — this was
   blocking scroll over the product detail page's advanced-settings drawer. */
.inspector:not(.is-open) { pointer-events: none; }
.inspector.is-open { opacity: 1; transform: none; pointer-events: auto; }
/* The order inspector's two-column overview needs a definite height so its
   sticky summary column has something to stick within. */
.inspector--order { --inspector-width: var(--dialog-workspace-width); --inspector-height: min(var(--dialog-workspace-height), calc(100dvh - var(--space-6) * 2)); }
.inspector--wide { --inspector-width: 780px; }
.inspector--product, .inspector--product-quick { --inspector-width: 640px; }
.inspector--compact { --inspector-width: 500px; }
.inspector__header { position: sticky; top: 0; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px 14px; background: var(--surface-1); border-bottom: 1px solid var(--border-subtle); }

/* WebKit keeps the contents of a transformed fixed inspector in a moving
   compositing layer at tablet widths after a viewport resize. The order
   footer is then visually usable but never geometrically settled. The panel
   is deliberately static in that narrow desktop/tablet band; mobile keeps
   its sheet transition and wider screens retain the modal transition. */
@media (min-width: 761px) and (max-width: 900px) {
  .inspector--order { transition: none; transform: none; contain: layout paint; }
}
.inspector__header h2 { font-size: var(--text-md); margin-top: 2px; }
.inspector-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inspector-identity > span:last-child { min-width: 0; }
.inspector-identity h2 { font-size: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inspector-identity small { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.inspector-statusbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 24px; background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-2xs); color: var(--text-muted); }
.inspector__tabs { flex: none; padding: 0 16px; }
.inspector__tabs > button, .inspector__tabs > a { height: 44px; padding: 0 10px; font-size: var(--text-xs); }
.inspector__body { flex: 1 1 auto; min-height: 0; padding: 22px 24px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.inspector-pane { display: none; }
.inspector-pane.is-active { display: block; }
.pane-heading { margin-bottom: 14px; }
.pane-heading h3 { font-size: var(--text-base); }
.pane-heading p { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.55; margin-top: 4px; }
.pane-heading--history { padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.inspector__footer { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--border-subtle); background: var(--surface-1); box-shadow: 0 -12px 24px -20px rgba(15, 18, 25, .28); }
.inspector__footer.inspector-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; z-index: 3; }
.inspector__footer.inspector-actions form { display: block; min-width: 0; margin: 0; }
.inspector__footer.inspector-actions .button { width: 100%; min-width: 0; padding-inline: 8px; }
.inspector__footer.inspector-actions > form:last-child { grid-column: span 2; }
.inspector__footer.inspector-actions--primary { grid-template-columns: auto 1fr 1.25fr; }
.inspector__footer.inspector-actions--primary > form:last-child { grid-column: auto; }
.inspector-actions { display: flex; gap: 6px; align-items: center; overflow: auto; }
.inspector-actions > span { flex: 1; }
.inspector-actions form { display: inline-flex; }
.inspector-actions .button { white-space: nowrap; padding-inline: 10px; }
.inspector-actions--inline { flex-wrap: wrap; overflow: visible; }
.inspector-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.inspector-section { margin-top: 18px; }
.inspector-panel { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--card-pad-sm); min-height: 360px; min-width: 0; }
.inspector-import-action { display: flex; align-items: center; gap: 10px; padding: 10px 24px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-2); }
.inspector-import-action small { font-size: var(--text-2xs); color: var(--text-muted); line-height: 1.4; }
.inspector--product .inspector__body { display: flex; flex-direction: column; }
.inspector--product .inspector__body > .inspector-pane { flex: none; }
.product-delete-action { order: 99; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; margin-top: auto; border-top: 1px solid var(--border-subtle); }
.product-delete-action small { font-size: var(--text-2xs); color: var(--text-muted); line-height: 1.4; text-align: right; }
.danger-zone { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.credential-form { margin-top: 14px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); }
.credential-form.is-collapsed { display: none; }
.credential-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.credential-block label { grid-column: 1 / -1; font-size: var(--text-2xs); color: var(--text-muted); }
.credential-block span { font: 500 var(--text-xs) var(--font-mono); overflow-wrap: anywhere; }
.credential-block button { border: 0; background: transparent; color: var(--accent); font-size: var(--text-2xs); font-weight: 600; }
.connection-score { display: flex; align-items: center; justify-content: space-between; background: var(--surface-inverse); color: var(--text-inverse); padding: 18px; border-radius: var(--radius-lg); }
.connection-score > div:first-child > span { font-size: var(--text-2xs); color: rgba(255, 255, 255, .6); }
.connection-score > div:first-child > strong { font-size: var(--text-2xl); display: block; margin-top: 6px; letter-spacing: -.03em; }
.connection-score > div:first-child small { font-size: var(--text-2xs); color: rgba(255, 255, 255, .5); display: inline; }
.score-ring { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--success) calc(var(--score) * 1%), rgba(255, 255, 255, .12) 0); position: relative; }
.score-ring:before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface-inverse); }
.score-ring span { position: relative; font-weight: 700; font-size: var(--text-xs); }
.inspector-jobs > div { display: grid; grid-template-columns: 27px minmax(0, 1fr) 70px auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.inspector-jobs strong, .inspector-products strong { font-size: var(--text-xs); display: block; }
.inspector-jobs small, .inspector-products small { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 3px; }
.inspector-products a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.log-stream > div { display: grid; grid-template-columns: 6px 48px minmax(0, 1fr) auto; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); align-items: start; }
.log-stream time, .log-stream code { font: 400 var(--text-2xs) var(--font-mono); color: var(--text-muted); }
.log-stream strong { font: 500 var(--text-2xs) var(--font-mono); display: block; overflow-wrap: anywhere; }
.log-stream small { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 3px; }
.log-status { width: 6px; height: 6px; border-radius: 50%; background: var(--success); margin-top: 4px; }
.log-status--warning { background: var(--warning); }
.log-status--failed { background: var(--danger); }
.policy-list { display: grid; }
.policy-list > label { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.policy-list strong { font-size: var(--text-xs); display: block; }
.policy-list small { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 3px; }
.policy-list--compact > label { grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
.policy-list--compact .switch { flex: none; }
.policy-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-3); display: grid; place-items: center; color: var(--text-secondary); }
.attribute-mapping-list { margin-top: 18px; border-top: 1px solid var(--border-subtle); padding-top: 16px; }
.attribute-mapping-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.attribute-mapping-row strong, .attribute-mapping-row small { display: block; }
.attribute-mapping-row strong { font-size: var(--text-xs); }
.attribute-mapping-row small { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 3px; }
.attribute-mapping-row select, .attribute-mapping-row input { height: var(--control-h-sm); border: 1px solid var(--border-default); border-radius: var(--radius-xs); padding: 0 9px; background: var(--surface-1); color: var(--text-primary); font-size: var(--text-xs); }

.wizard-drawer { position: fixed; z-index: 85; inset: 0 0 0 auto; width: min(640px, 100vw); background: var(--surface-1); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-lg); transform: translateX(102%); transition: transform .24s cubic-bezier(.22, 1, .36, 1); }
.wizard-drawer.is-open { transform: translateX(0); }
.wizard-drawer form { height: 100%; display: flex; flex-direction: column; }
.wizard-header { flex: none; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--border-subtle); }
.wizard-header h2 { font-size: var(--text-md); margin-top: 2px; }
.wizard-progress { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 16px 20px 12px; border-bottom: 1px solid var(--border-subtle); }
.wizard-progress button { border: 0; background: transparent; display: grid; justify-items: center; gap: 6px; color: var(--text-muted); font-size: var(--text-2xs); font-weight: 500; position: relative; }
.wizard-progress button:before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 1px; background: var(--border-default); }
.wizard-progress button:first-child:before { display: none; }
.wizard-progress button i { width: 22px; height: 22px; border: 1px solid var(--border-default); background: var(--surface-1); border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--font-sans); font-style: normal; position: relative; z-index: 1; }
.wizard-progress button.is-active, .wizard-progress button.is-complete { color: var(--text-primary); }
.wizard-progress button.is-active i, .wizard-progress button.is-complete i { border-color: var(--primary); background: var(--primary); color: var(--text-inverse); }
.wizard-progress button.is-complete:before, .wizard-progress button.is-active:before { background: var(--primary); }
.wizard-progress--specimen { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.wizard-body { flex: 1 1 auto; min-height: 0; padding: 24px 28px; overflow: auto; }
.wizard-step { display: none; }
.wizard-step.is-active { display: block; }
.step-kicker { font: 600 var(--text-2xs) var(--font-sans); color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.wizard-step > h3 { font-size: var(--text-lg); letter-spacing: -.02em; margin: 8px 0; }
.wizard-step > p { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }
.platform-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.platform-picker__group { grid-column: 1 / -1; margin-top: 7px; padding: 2px 1px; color: var(--text-muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.platform-picker__group:first-child { margin-top: 0; }
.platform-picker label { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; align-items: center; gap: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px; cursor: pointer; }
.platform-picker label:hover { border-color: var(--border-default); background: var(--surface-2); }
.platform-picker input { position: absolute; opacity: 0; }
.platform-picker label:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.platform-picker label > i { opacity: 0; color: var(--primary); font-style: normal; }
.platform-picker label:has(input:checked) > i { opacity: 1; }
.platform-picker strong { font-size: var(--text-xs); display: block; }
.platform-picker small { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 3px; }
.platform-picker label.is-limit-reached { cursor: not-allowed; opacity: .58; background: var(--surface-2); }
.platform-picker label.is-limit-reached > i { opacity: 1; color: var(--warning); }
.wizard-wide { grid-column: 1 / -1; }
.wizard-advanced { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); padding: 0 14px; }
.wizard-advanced summary { display: flex; align-items: center; gap: 8px; height: 44px; cursor: pointer; list-style: none; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.wizard-advanced summary::-webkit-details-marker { display: none; }
.wizard-advanced summary > span { margin-right: auto; }
.wizard-advanced summary > i { width: 7px; height: 7px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; }
.wizard-advanced[open] summary > i { transform: rotate(-135deg) translate(-2px, -2px); }
.wizard-advanced[open] { padding-bottom: 14px; }
.wizard-advanced__hint { margin: 0 0 12px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.55; }
.wizard-advanced .field { margin-bottom: 11px; }
.wizard-advanced .field:last-of-type { margin-bottom: 0; }
.wizard-advanced input, .wizard-advanced select { font-family: var(--font-mono); font-size: var(--text-xs); }
.connection-test-trigger { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px; background: var(--surface-1); box-shadow: var(--shadow-xs); }
.connection-test-trigger:hover { border-color: var(--border-strong); background: var(--surface-2); }
.connection-test-trigger > span:first-child { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.connection-test-trigger strong { font-size: var(--text-xs); display: block; }
.connection-test-trigger small { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 3px; }
.connection-results { margin-top: 15px; }
.connection-idle { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--text-2xs); color: var(--text-muted); }
.connection-idle i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.test-check { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 3px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-2xs); }
.test-check > i { width: 18px; height: 18px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; font-style: normal; font-size: 11px; }
.test-check.is-error > i { background: var(--danger-soft); color: var(--danger); }
.test-check small { font: 400 var(--text-2xs) var(--font-mono); color: var(--text-muted); }
.compact-fields { margin-top: 18px; }
.wizard-ready { text-align: center; padding-top: 30px; }
.ready-check { width: 52px; height: 52px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; font-size: var(--text-lg); margin: 0 auto 16px; }
.ready-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); text-align: left; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-top: 24px; overflow: hidden; }
.ready-summary span { padding: 13px; border-left: 1px solid var(--border-subtle); min-width: 0; }
.ready-summary span:first-child { border-left: 0; }
.ready-summary small { font-size: var(--text-2xs); color: var(--text-muted); }
.ready-summary strong { font-size: var(--text-xs); display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.wizard-footer { flex: none; display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-subtle); }
.wizard-footer > span { flex: 1; }
.wizard-credential-guide, .idefix-credential-guide { margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--info-line); border-radius: var(--radius-md); background: var(--info-soft); font-size: var(--text-xs); line-height: 1.55; }
.wizard-credential-guide strong, .idefix-credential-guide strong { display: block; font-size: var(--text-sm); margin-bottom: 4px; }
.wizard-credential-guide p, .idefix-credential-guide p { color: var(--text-secondary); margin: 0 0 8px; }
.wizard-credential-guide a, .idefix-credential-guide a { color: var(--accent); font-weight: 600; }
.wizard-credential-guide__logos { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.wizard-credential-guide__logos img { height: 20px; width: auto; object-fit: contain; }

.modal { position: fixed; z-index: 90; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: modal-in .18s ease-out; }
.modal--lg { width: min(880px, calc(100vw - 32px)); }
.modal--md { width: min(640px, calc(100vw - 32px)); }
@keyframes modal-in { from { opacity: 0; transform: translate(-50%, -50%) translateY(8px) scale(.985); } }
.modal > header, .modal__head { flex: none; display: flex; align-items: flex-start; gap: 14px; padding: var(--card-pad) var(--card-pad) 16px; border-bottom: 1px solid var(--border-subtle); }
.modal > header > div:first-child, .modal__head > div:not(.row__mark) { min-width: 0; flex: 1; display: grid; gap: 4px; }
.modal h2, .modal__head h2 { font-size: var(--text-md); letter-spacing: -.02em; }
.modal > header p, .modal__head p { font-size: var(--text-xs); color: var(--text-secondary); }
.modal__close, .modal > header .icon-button { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--surface-1); color: var(--text-secondary); display: grid; place-items: center; font-size: var(--text-md); line-height: 1; padding: 0; }
.modal__close:hover, .modal > header .icon-button:hover { background: var(--surface-2); color: var(--text-primary); }
.modal__body { flex: 1 1 auto; min-height: 0; padding: var(--card-pad); overflow-y: auto; display: grid; gap: 18px; align-content: start; }
.modal > p, .modal__body > p.modal__lead { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
.modal > p { padding: 18px var(--card-pad) 0; }
.modal > form { display: contents; }
.modal > form > .modal__body { display: grid; }
.modal > footer, .modal__foot { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px var(--card-pad); border-top: 1px solid var(--border-subtle); background: var(--surface-2); }
.modal > footer form, .modal__foot form { margin: 0; }
.modal > form > .file-drop, .modal > form > .field { margin: 18px var(--card-pad) 0; }

.popover {
  position: fixed; z-index: 90; min-width: 200px; background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 6px; box-shadow: var(--shadow-lg);
  transform-origin: top right; opacity: 0; transform: translateY(-6px) scale(.96);
  transition: opacity .14s ease, transform .16s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.popover.is-open { opacity: 1; transform: none; pointer-events: auto; }
/* Opened above the trigger instead of below (not enough room underneath) —
   scale from the bottom edge so it still reads as growing out of the button. */
.popover--flip-up { transform-origin: bottom right; }
.popover--static { position: absolute; }
.popover__label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px 6px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
.menu-action { width: 100%; border: 0; background: transparent; text-align: left; border-radius: var(--radius-sm); padding: 8px 10px; font-size: var(--text-sm); display: flex; align-items: center; gap: 10px; color: var(--text-primary); }
.menu-action:hover { background: var(--surface-2); }
.menu-action > span { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
/* margin-left:auto pushes the trailing indicator (→ / › / ↗) to the far edge
   regardless of what precedes it — an icon chip + label (quick-create) or a
   bare text run (help menu) both work without needing two different markup
   shapes to line up. */
.menu-action > b, .menu-action > span:last-child:not(:first-child) { margin-left: auto; flex: none; color: var(--text-muted); font-weight: 500; }
/* ".menu-action > span" above also matches this (it's a direct-child span
   too) and, being more specific than a single class, was winning: the chip
   rendered as a left-packed inline-flex row instead of the centered grid
   cell below, so the icon sat flush left instead of centered. One extra
   class in the selector restores the win without touching the generic rule
   the label span still needs. */
.menu-action > .menu-action__icon { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--text-secondary); transition: background .15s ease, color .15s ease; }
.menu-action:hover .menu-action__icon { background: var(--accent-soft); color: var(--accent-strong); }
.menu-action__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-action--danger { color: var(--danger); }
.menu-action--danger:hover { background: var(--danger-soft); }
.quick-create-menu { width: 264px; }
.topbar-popover { width: 320px; }
.notification-menu { width: min(360px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.notification-menu > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.notification-menu > header strong { display: block; font-size: var(--text-sm); }
.notification-menu > header small { color: var(--text-muted); font-size: var(--text-2xs); margin-top: 2px; }
.sound-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-2xs); color: var(--text-secondary); cursor: pointer; }
.sound-toggle input { accent-color: var(--primary); }
.notification-feed { max-height: 360px; overflow: auto; }
.notification-feed a { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.notification-feed a:hover { background: var(--surface-2); }
.notification-feed a > i { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.notification-feed a.is-read > i { background: var(--border-strong); }
.notification-feed strong { display: block; font-size: var(--text-xs); }
.notification-feed small { color: var(--text-secondary); font-size: var(--text-2xs); margin-top: 2px; line-height: 1.45; }
.notification-feed time { display: block; color: var(--text-muted); font-size: 11px; margin-top: 4px; }
.notification-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: var(--text-xs); }
.notification-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border-subtle); padding: 8px; background: var(--surface-2); }
.notification-actions button { border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); background: var(--surface-1); color: var(--text-secondary); padding: 6px 9px; font-size: var(--text-2xs); font-weight: 600; }
.notification-actions button:hover { border-color: var(--border-default); color: var(--text-primary); }
.notification-actions .notification-footer { padding: 6px 8px; font-size: var(--text-2xs); font-weight: 600; color: var(--text-secondary); }
.notification-actions .notification-footer:hover { color: var(--accent); }
.account-menu { width: 300px; padding: 8px; }
.account-menu__identity { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 11px; padding: 8px 8px 12px; }
.account-menu__identity .avatar { width: 40px; height: 40px; border-radius: var(--radius-md); }
.account-menu__identity strong, .account-menu__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__identity strong { font-size: var(--text-sm); }
.account-menu__identity small { margin-top: 2px; color: var(--text-muted); font-size: var(--text-2xs); }
.account-menu__workspace { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-bottom: 6px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-2); }
.account-menu__workspace-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--text-inverse); background: var(--primary); font-size: var(--text-2xs); font-weight: 700; }
.account-menu__workspace small, .account-menu__workspace strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__workspace small { color: var(--text-muted); font-size: 11px; }
.account-menu__workspace strong { margin-top: 1px; font-size: var(--text-xs); }
.account-menu__workspace em { padding: 3px 7px; border-radius: var(--radius-pill); color: var(--accent-strong); background: var(--accent-soft); font-size: 11px; font-style: normal; font-weight: 600; }
.account-menu__links { display: grid; padding: 3px 0; border-top: 1px solid var(--border-subtle); }
.account-menu__action, .account-menu__logout button { display: grid; width: 100%; grid-template-columns: 30px minmax(0, 1fr) 14px; align-items: center; gap: 9px; padding: 8px; border: 0; border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; text-align: left; }
.account-menu__action:hover, .account-menu__logout button:hover { color: var(--text-primary); background: var(--surface-2); }
.account-menu__action > span:first-child, .account-menu__logout button > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface-3); }
.account-menu__action strong, .account-menu__action small, .account-menu__logout strong, .account-menu__logout small { display: block; }
.account-menu__action strong, .account-menu__logout strong { color: var(--text-primary); font-size: var(--text-xs); }
.account-menu__action small, .account-menu__logout small { margin-top: 1px; color: var(--text-muted); font-size: 11px; }
.account-menu__action > svg { color: var(--text-muted); }
.account-menu__logout { margin-top: 3px; padding-top: 4px; border-top: 1px solid var(--border-subtle); }
.account-menu__logout form { margin: 0; }
.account-menu__logout button { grid-template-columns: 30px minmax(0, 1fr); }
.account-menu__logout button > span:first-child { color: var(--danger); background: var(--danger-soft); }
.account-menu__logout strong { color: var(--danger); }
.workspace-menu { width: 240px; }
.workspace-menu__header { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; padding: 7px 7px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border-subtle); }
.workspace-menu__header .workspace-context__mark { width: 30px; height: 30px; }
.workspace-menu__header small, .workspace-menu__header strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-menu__header small { color: var(--text-muted); font-size: var(--text-3xs); }
.workspace-menu__header strong { margin-top: 1px; color: var(--text-primary); font-size: var(--text-xs); }
.workspace-menu .menu-action { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; }
.workspace-menu .menu-action strong, .workspace-menu .menu-action small { display: block; font-size: var(--text-xs); }
.workspace-menu .menu-action small { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 2px; }

.command-backdrop { position: fixed; inset: 0; z-index: 100; padding: clamp(24px, 8vh, 76px) 14px 24px; overflow-y: auto; overscroll-behavior: contain; background: rgba(20, 23, 28, .44); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; }
.command-backdrop.is-visible { opacity: 1; }
.command-palette { width: min(660px, calc(100vw - 28px)); max-height: min(680px, calc(100dvh - 48px)); margin: auto; display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; opacity: 0; transform: translateY(-10px) scale(.985); transition: opacity .2s ease, transform .26s cubic-bezier(.22, 1, .36, 1); }
.command-palette.is-open { opacity: 1; transform: none; }
.command-search { flex: none; height: 60px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 10px; padding: 0 18px; color: var(--text-muted); }
.command-search input, .command-search input:focus { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; font-size: var(--text-base); color: var(--text-primary); }
.command-close { display: none; width: 34px; height: 34px; place-items: center; flex: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface-2); font-size: 19px; }
.command-results { flex: none; padding: 8px; }
.command-results--dynamic { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.command-group-label, .command-result-group { display: block; padding: 10px 12px 5px; font: 600 var(--text-2xs) var(--font-sans); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.command-results a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); }
.command-results a:hover, .command-results a.is-selected { background: var(--surface-2); border-color: var(--border-subtle); }
.command-results strong { font-size: var(--text-sm); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-results small { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 2px; }
.command-symbol { width: 32px; height: 32px; background: var(--surface-3); color: var(--text-secondary); border-radius: var(--radius-sm); display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600; }
.command-results--dynamic [data-result-type="product"] .command-symbol { color: var(--accent); background: var(--accent-soft); }
.command-results--dynamic [data-result-type="integration"] .command-symbol { color: var(--success); background: var(--success-soft); }
.command-results--dynamic [data-result-type="order"] .command-symbol { color: var(--warning); background: var(--warning-soft); }
.command-results--dynamic [data-result-type="issue"] .command-symbol { color: var(--danger); background: var(--danger-soft); }
.command-results--dynamic [data-result-type="feed"] .command-symbol { color: var(--info); background: var(--info-soft); font-size: 11px; }
.command-state { display: grid; min-height: 132px; place-content: center; justify-items: center; gap: 5px; padding: 24px; color: var(--text-muted); text-align: center; }
.command-state strong { color: var(--text-primary); font-size: var(--text-sm); }
.command-state small { max-width: 360px; font-size: var(--text-xs); line-height: 1.5; }
.command-state--loading { display: flex; min-height: 88px; align-items: center; gap: 10px; font-size: var(--text-sm); }
.command-state--loading i { width: 15px; height: 15px; border: 2px solid var(--border-default); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.command-footer { flex: none; min-height: 38px; background: var(--surface-2); border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: flex-end; gap: 15px; padding: 0 12px; font-size: var(--text-2xs); color: var(--text-muted); }
.command-footer kbd { margin-right: 3px; }

.toast-region { position: fixed; right: 16px; bottom: 16px; z-index: 120; width: min(384px, calc(100vw - 32px)); height: calc(var(--toast-stack-height, 0px) + var(--toast-peek, 0px)); pointer-events: none; transition: height .5s cubic-bezier(.22,1,.36,1); }
.toast-region[data-count="0"] { height: 0; }
.toast-region[data-count="2"] { --toast-peek: 12px; }
.toast-region[data-count="3"] { --toast-peek: 24px; }
.toast-region:hover, .toast-region:focus-within { height: var(--toast-expanded-height, 0px); }
.toast { position: absolute; right: 0; bottom: 0; width: 100%; min-height: 78px; box-sizing: border-box; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: 18px; padding: 17px 16px; box-shadow: 0 12px 28px rgba(18,24,40,.12), 0 2px 4px rgba(18,24,40,.04); display: flex; align-items: center; gap: 16px; font-size: var(--text-sm); line-height: 1.45; pointer-events: auto; touch-action: pan-y; translate: var(--toast-drag-x, 0px) 0; transform-origin: bottom center; transform: translateY(calc(var(--toast-index, 0) * -12px)) scale(calc(1 - var(--toast-index, 0) * .05)); transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .25s ease, translate .25s ease; animation: toast-in .5s cubic-bezier(.22,1,.36,1); }
.toast-region:hover .toast, .toast-region:focus-within .toast { transform: translateY(calc(-1 * var(--toast-expanded-offset, 0px))) scale(1); }
.toast--success { --toast-color: var(--success); --toast-soft: var(--success-soft); }
.toast--danger { --toast-color: var(--danger); --toast-soft: var(--danger-soft); }
.toast--warning { --toast-color: var(--warning); --toast-soft: var(--warning-soft); }
.toast--info { --toast-color: var(--info); --toast-soft: var(--info-soft); }
.toast:not(.toast--default) { border-color: color-mix(in srgb, var(--toast-color) 22%, var(--border-default)); }
.toast__status { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--toast-soft); color: var(--toast-color); }
.toast__status svg { width: 15px; height: 15px; }
.toast__copy { min-width: 0; flex: 1; display: grid; gap: 3px; overflow-wrap: anywhere; }
.toast__copy > strong { color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.35; }
.toast__copy > small { color: var(--text-secondary); font-size: 14px; line-height: 1.4; }
.toast__controls { display: flex; flex: none; align-items: center; gap: 13px; }
.toast__controls button { display: grid; place-items: center; flex: none; cursor: pointer; }
.toast__action { min-height: 29px; padding: 3px 10px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); font: 500 13px/1.2 var(--font-sans); box-shadow: var(--shadow-xs); }
.toast__action:hover, .toast__action:focus-visible { background: var(--surface-2); border-color: var(--border-strong); }
.toast__close { width: 24px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--text-muted); font: 400 20px/1 var(--font-sans); }
.toast__close svg { width: 18px; height: 18px; }
.toast__close:hover, .toast__close:focus-visible { color: var(--text-primary); }
.toast-region:not(:hover):not(:focus-within) .toast:not(.is-front) .toast__status, .toast-region:not(:hover):not(:focus-within) .toast:not(.is-front) .toast__copy, .toast-region:not(:hover):not(:focus-within) .toast:not(.is-front) .toast__controls { opacity: 0; pointer-events: none; }
.toast.is-leaving { animation: none; opacity: 0; translate: 0 120%; pointer-events: none; }
@keyframes toast-in { from { opacity: 0; translate: 0 120%; } }
@media (prefers-reduced-motion: reduce) { .toast, .toast-region { animation: none; transition-duration: .01ms; } }
.account-menu__workspace-mark.has-logo { overflow: hidden; padding: 3px; background: var(--surface-1); border: 1px solid var(--border-default); }
.account-menu__workspace-mark.has-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-lightbox { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 28px; }
.product-lightbox__backdrop { position: absolute; inset: 0; background: rgba(15, 18, 22, .84); backdrop-filter: blur(5px); }
.product-lightbox__figure { position: relative; z-index: 1; display: grid; max-width: min(1080px, 100%); max-height: calc(100vh - 56px); margin: 0; }
.product-lightbox__figure img { display: block; max-width: 100%; max-height: calc(100vh - 95px); margin: auto; object-fit: contain; border-radius: var(--radius-md); background: var(--media-backdrop); box-shadow: var(--shadow-lg); }
.product-lightbox__figure figcaption { padding: 10px 4px; color: var(--text-inverse); font-size: var(--text-sm); text-align: center; }
.product-lightbox__close { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border: 0; border-radius: var(--radius-sm); background: rgba(25, 29, 26, .72); color: var(--text-inverse); font-size: var(--text-xl); line-height: 1; z-index: 1; }

/* --------------------------------------------------------------------------
   Component catalogue page (/portal/components)
   -------------------------------------------------------------------------- */
.component-page { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; max-width: 1260px; margin: auto; }
.component-index { position: sticky; top: calc(var(--topbar) + 25px); align-self: start; display: flex; flex-direction: column; gap: 2px; }
.component-index .nav-label { margin: 11px 0 5px; }
.component-index a { font-size: var(--text-sm); color: var(--text-muted); padding: 5px 9px; border-left: 2px solid var(--border-default); }
.component-index a:hover { color: var(--text-primary); border-color: var(--primary); }
.component-canvas { min-width: 0; }
.component-intro { display: flex; justify-content: space-between; gap: 30px; padding: 8px 0 32px; }
.component-intro h2 { font-size: var(--text-2xl); letter-spacing: -.035em; margin: 8px 0 10px; }
.component-intro p { font-size: var(--text-sm); color: var(--text-secondary); max-width: 600px; line-height: 1.65; }
.version-stamp { align-self: start; border-left: 1px solid var(--border-default); padding-left: 16px; min-width: 0; flex: none; }
.version-stamp span, .version-stamp small { font: 500 var(--text-2xs) var(--font-mono); color: var(--text-muted); }
.version-stamp strong { display: block; font-size: var(--text-sm); margin: 6px 0; }
.showcase { border-top: 1px solid var(--border-subtle); padding: 30px 0 40px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 30px; }
.showcase__meta { display: flex; gap: 12px; }
.showcase__meta > span { font: 600 var(--text-2xs) var(--font-mono); color: var(--accent); }
.showcase__meta h3 { font-size: var(--text-base); }
.showcase__meta p { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.6; margin-top: 7px; }
.showcase__stage { min-width: 0; display: grid; gap: 16px; align-content: start; }
.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-width: 0; }
.demo-stack { display: grid; gap: var(--space-3); min-width: 0; }
.showcase__stage > .tabs, .showcase__stage > .pagination { flex-wrap: wrap; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.swatch-grid > div { display: grid; gap: 6px; }
.swatch { height: 54px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); display: block; }
.swatch-grid code { font: 400 var(--text-2xs) var(--font-mono); color: var(--text-muted); }
.bg-base { background: var(--background); } .bg-surface { background: var(--surface-1); } .bg-accent { background: var(--accent); }
.bg-success { background: var(--success); } .bg-warning { background: var(--warning); } .bg-danger { background: var(--danger); } .bg-primary { background: var(--primary); }
.type-specimen { display: grid; gap: 13px; border-top: 1px solid var(--border-subtle); padding-top: 18px; }
.display-type { font-size: var(--text-xl); letter-spacing: -.03em; font-weight: 650; }
.body-type { font-size: var(--text-sm); }
.meta-type { font: 600 var(--text-2xs) var(--font-sans); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.feedback-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.price-matrix { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.price-matrix > div { padding: 13px; border-left: 1px solid var(--border-subtle); position: relative; }
.price-matrix > div:first-child { border-left: 0; }
.price-matrix span, .price-matrix small { font-size: var(--text-2xs); color: var(--text-muted); }
.price-matrix strong { display: block; margin: 6px 0; font-size: var(--text-base); }
.price-matrix .is-high:before, .price-matrix .is-low:before { content: "HIGH"; position: absolute; right: 8px; top: 8px; font: 600 var(--text-3xs) var(--font-sans); color: var(--danger); }
.price-matrix .is-low:before { content: "LOW"; color: var(--success); }
.component-footer { border-top: 1px solid var(--border-subtle); padding: 20px 0 45px; display: flex; justify-content: space-between; gap: 16px; font: 500 var(--text-2xs) var(--font-mono); color: var(--text-muted); }
.inspector-specimen { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); overflow: hidden; box-shadow: var(--shadow-sm); }
.inspector-specimen > header { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; padding: 12px; }
.inspector-specimen > header small { font-size: var(--text-2xs); color: var(--text-muted); }
.inspector-specimen > header strong { display: block; font-size: var(--text-sm); margin-top: 3px; }
.inspector-specimen__body { padding: 13px; }
.inspector-specimen .skeleton-card { min-height: 110px; }
.inspector-specimen > footer { display: flex; justify-content: flex-end; gap: 6px; padding: 10px; border-top: 1px solid var(--border-subtle); }
.component-phase2 { border-top: 1px solid var(--border-subtle); padding-top: 28px; margin-top: 20px; }
.bulk-actionbar--specimen { position: static; transform: none; width: max-content; max-width: 100%; box-shadow: var(--shadow-md); }
.bulk-actionbar { position: fixed; z-index: 60; left: calc(var(--sidebar) + (100vw - var(--sidebar)) / 2); bottom: 22px; transform: translateX(-50%); height: 48px; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 14px; background: var(--surface-inverse); color: var(--text-inverse); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.bulk-actionbar > span { font-size: var(--text-xs); white-space: nowrap; }
.bulk-actionbar > i { width: 1px; height: 20px; background: rgba(255, 255, 255, .15); margin: 0 5px; }
.bulk-actionbar button { height: 32px; border: 0; background: transparent; color: inherit; border-radius: var(--radius-xs); padding: 0 9px; font-size: var(--text-xs); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.bulk-actionbar button:hover { background: rgba(255, 255, 255, .1); }
.bulk-selection { display: inline-flex; align-items: baseline; gap: 5px; }
.bulk-selection strong { font-size: var(--text-sm); }
.bulk-selection small { display: inline; font-size: var(--text-2xs); color: rgba(255, 255, 255, .6); }

/* --------------------------------------------------------------------------
   Foundation / placeholder route state
   -------------------------------------------------------------------------- */
.foundation-state { min-height: calc(100vh - var(--topbar) - 96px); display: grid; place-items: center; align-content: center; text-align: center; }
.foundation-state h2 { font-size: var(--text-xl); letter-spacing: -.03em; margin: 12px 0 9px; }
.foundation-state > p { max-width: 520px; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.7; margin-bottom: 20px; }
.foundation-state > div:last-child { display: flex; gap: 8px; }
.foundation-orbit { width: 72px; height: 72px; position: relative; display: grid; place-items: center; margin-bottom: 20px; }
.foundation-orbit:before, .foundation-orbit:after { content: ""; position: absolute; border: 1px solid var(--border-default); border-radius: 50%; }
.foundation-orbit:before { inset: 7px; }
.foundation-orbit:after { inset: 16px; }
.foundation-orbit i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); top: 5px; left: 33px; }
.foundation-orbit i:nth-child(2) { background: var(--success); top: auto; bottom: 13px; left: 10px; }
.foundation-orbit span { color: var(--accent); font-size: var(--text-lg); }

/* --------------------------------------------------------------------------
   Authentication & error pages
   -------------------------------------------------------------------------- */
.auth-shell { min-height: 100dvh; background: var(--background); padding: 24px; display: grid; }
.auth-main { width: 100%; display: grid; place-items: center; position: relative; }
.auth-panel { width: min(1040px, 100%); min-height: 620px; display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-md); }
.auth-context { min-width: 0; padding: 38px 40px; display: flex; flex-direction: column; gap: 28px; background: var(--surface-2); border-right: 1px solid var(--border-subtle); }
.auth-context .brand { padding: 0; }
.auth-context__copy { margin: auto 0; max-width: 340px; }
.auth-context__copy h1 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.03em; margin: 0 0 14px; font-weight: 650; }
.auth-context__copy p { color: var(--text-secondary); line-height: 1.65; font-size: var(--text-sm); }
.auth-internal { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--text-secondary); font: 600 var(--text-2xs)/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.auth-internal b { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); display: block; }
.auth-form-wrap { display: grid; place-items: center; padding: 42px 48px; }
.auth-form { width: min(410px, 100%); display: grid; gap: 16px; }
.auth-form__header { margin-bottom: 4px; }
.auth-form h2 { font-size: var(--text-xl); letter-spacing: -.025em; margin: 0 0 6px; line-height: 1.2; font-weight: 650; }
.auth-form__header p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; }
.social-login { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.social-login__button { height: 46px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-1); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-xs); }
.social-login__button:hover { border-color: var(--border-strong); background: var(--surface-2); }
.social-login__button img { display: block; flex: none; }
.social-login__button.is-unavailable { color: var(--text-secondary); }
.auth-divider { height: 20px; display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: var(--text-xs); }
.auth-divider:before, .auth-divider:after { content: ""; height: 1px; background: var(--border-subtle); flex: 1; }
.auth-divider span { white-space: nowrap; }
.auth-form .field input { height: 46px; border-radius: var(--radius-md); font-size: var(--text-sm); }
.auth-form .input-action input { padding-right: 76px; }
.auth-form .button--wide { height: 46px; font-size: var(--text-sm); border-radius: var(--radius-md); }
.portal-switch { text-align: center; font-size: var(--text-xs); color: var(--text-muted); }
.error-shell { min-height: 100vh; background: var(--background); padding: 20px; display: grid; place-items: center; }
.error-page { width: 100%; display: grid; place-items: center; }
.error-page__card { width: min(520px, 100%); background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); padding: 40px 40px 34px; text-align: center; display: grid; justify-items: center; gap: 14px; }
.error-page__card .brand__mark { width: 40px; height: 40px; border-radius: var(--radius-md); margin-bottom: 4px; }
.error-code { font: 600 var(--text-2xs)/1 var(--font-sans); letter-spacing: .1em; color: var(--accent-strong); background: var(--accent-soft); border-radius: var(--radius-pill); padding: 6px 11px; }
.error-page h1 { font-size: var(--text-xl); letter-spacing: -.025em; line-height: 1.25; }
.error-page p { font-size: var(--text-sm); line-height: 1.65; color: var(--text-secondary); max-width: 400px; }
.error-page__detail { display: grid; gap: 5px; justify-items: center; width: 100%; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 11px 13px; font-size: var(--text-xs); color: var(--text-secondary); }
.error-page__detail span { font: 600 var(--text-2xs)/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.error-page__actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 8px; }
.invitation-form-wrap { width: min(430px, 100%); }
.invitation-form { width: 100%; }
.invitation-context { background: var(--surface-inverse); color: var(--text-inverse); }
.invitation-context .auth-context__copy h1, .invitation-context .auth-context__copy p { color: inherit; }
.invitation-benefits { display: grid; gap: 11px; margin-top: 30px; }
.invitation-benefits span { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .85); font-size: var(--text-sm); }
.invitation-benefits i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--success-on-inverse); font-style: normal; }
.invited-account { display: grid; grid-template-columns: 42px minmax(0, 1fr) 22px; gap: 11px; align-items: center; padding: 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-2); }
.invited-account > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.invited-account strong, .invited-account small { display: block; }
.invited-account strong { font-size: var(--text-sm); }
.invited-account small { font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; }
.invited-account > i { color: var(--success); font-style: normal; }
.invitation-security { text-align: center; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.5; }
.invitation-state { text-align: center; }
.invitation-state__icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: var(--radius-lg); background: var(--warning-soft); color: var(--warning); font-size: var(--text-xl); }
.invitation-state h2 { font-size: var(--text-xl); margin: 9px 0; }
.invitation-state p { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; margin: 0 auto 22px; max-width: 340px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .kpi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--wide, .card-grid--3, .split-layout, .admin-grid, .card-grid--sidebar { grid-template-columns: minmax(0, 1fr); }
  .sticky-aside { position: static; }
  .topbar-profile { grid-template-columns: 30px 14px; }
  .topbar-profile__copy { display: none; }
  .page-breadcrumb__product, .page-breadcrumb__product + .page-breadcrumb__separator, .page-breadcrumb__status { display: none; }
  .workspace-context__plan { display: none; }
}
@media (max-width: 1050px) {
  :root { --sidebar: 220px; }
  .workspace { padding: 24px 24px 56px; }
  .topbar { padding: 0 24px; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .component-page { grid-template-columns: minmax(0, 1fr); }
  .component-index { display: none; }
  .showcase { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .command-trigger { min-width: 180px; }
}
@media (max-width: 760px) {
  :root { --topbar: 60px; }
  body.is-sidebar-compact { --sidebar: 0px; }
  .app-frame { margin-left: 0; width: 100%; }
  .sidebar { width: min(300px, 88vw); padding: 0 12px calc(14px + env(safe-area-inset-bottom)); visibility: hidden; transform: translate3d(-104%, 0, 0); box-shadow: none; transition: none; }
  .sidebar.is-motion-ready { transition: transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s; }
  .sidebar.is-open { visibility: visible; transform: translate3d(0, 0, 0); box-shadow: var(--shadow-lg); transition-delay: 0s; }
  .sidebar-collapse { display: none; }
  .sidebar-mobile-close { display: grid; }
  .mobile-only { display: grid !important; }
  .topbar { padding: 0 14px; gap: 8px; }
  .topbar__actions { gap: 6px; }
  .topbar .command-trigger { min-width: 0; width: 36px; padding: 0; justify-content: center; }
  .topbar .command-trigger span, .topbar .command-trigger kbd { display: none; }
  .topbar-help, .topbar-profile, .portal-presence, .system-clock { display: none; }
  .topbar-create { width: 36px; padding: 0; }
  .topbar-create span { display: none; }
  .page-breadcrumb { gap: 8px; }
  .page-breadcrumb__workspace, .page-breadcrumb__workspace + .page-breadcrumb__separator { display: none; }
  .page-breadcrumb h1 { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .workspace-context { gap: 7px; }
  .workspace-context__trigger { grid-template-columns: 28px 14px; padding-right: 4px; }
  .workspace-context__crumb, .workspace-context__crumb + .workspace-context__separator { display: none; }
  .workspace-context__copy, .workspace-context__separator { display: none; }
  .workspace-context h1 { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .workspace { width: 100%; padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); gap: 20px; }
  .page-header { flex-direction: column; gap: 14px; }
  .page-header__actions { width: 100%; }
  .page-header__actions .button { flex: 1 1 auto; }
  .page-header__title { font-size: var(--text-lg); }
  .kpi-grid, .kpi-grid--4, .kpi-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 16px; gap: 8px; }
  .kpi__value { font-size: var(--text-xl); }
  .metric-strip, .ops-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-strip > *:nth-child(odd), .ops-strip > div:nth-child(odd) { border-left: 0; }
  .metric-strip > *:nth-child(n+3), .ops-strip > div:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
  .card-grid, .card-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .card__head { padding: 18px 18px 12px; flex-direction: column; }
  .card__body { padding: 0 18px 18px; }
  .card__body--pad { padding: 18px; }
  .card__foot { padding: 12px 18px; }
  .card--pad { padding: 18px; }
  .row { padding-inline: 18px; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; }
  .row--plain { grid-template-columns: minmax(0, 1fr); }
  .row__end { grid-column: 1 / -1; justify-content: space-between; padding-left: 45px; }
  .row--plain .row__end { padding-left: 0; }
  .table th, .table td { padding-inline: 16px; }
  .health-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .health-metric { display: none; }
  .form-grid, .form-grid--3, .feedback-grid { grid-template-columns: minmax(0, 1fr); }
  .timeline { grid-template-columns: 1fr; }
  .tabs, .segmented { overflow-x: auto; scrollbar-width: none; }
  .pill-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .pill-tabs::-webkit-scrollbar { display: none; }
  .wizard-drawer { width: 100%; }
  .inspector, .inspector--wide, .inspector--order, .inspector--product, .inspector--product-quick, .inspector--compact, .inspector-loading {
    inset: auto 0 0 0; margin: 0; width: 100%; height: auto; max-height: 92dvh;
    border: 0; border-top: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(104%); opacity: 1;
  }
  .inspector.is-open { transform: translateY(0); opacity: 1; }
  .inspector.is-sheet-dragging { transition: none; }
  .inspector__header { padding: 14px 18px 12px; }
  .inspector__header:before { content: ""; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; border-radius: 4px; background: var(--border-strong); transform: translateX(-50%); }
  .inspector-statusbar, .inspector-import-action { padding-inline: 18px; }
  .inspector-import-action { align-items: flex-start; flex-direction: column; }
  .inspector__body { padding: 18px; }
  .inspector__tabs { padding-inline: 8px; }
  .inspector__footer { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .inspector__footer.inspector-actions { grid-template-columns: 1fr 1fr; }
  .inspector__footer.inspector-actions > form:last-child { grid-column: span 1; }
  .wizard-header { height: 64px; padding: 0 16px; }
  .wizard-progress { padding-inline: 8px; }
  .wizard-body { padding: 20px 16px; }
  .wizard-footer { padding: 10px 12px; }
  .wizard-footer .button { padding-inline: 10px; }
  .platform-picker { grid-template-columns: 1fr; }
  .attribute-mapping-row { grid-template-columns: 1fr; }
  .modal, .modal--lg, .modal--md { width: 100%; max-height: 92dvh; left: 0; top: auto; bottom: 0; transform: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  @keyframes modal-in { from { opacity: 0; transform: translateY(12px); } }
  .modal > header, .modal__head { padding: 18px 18px 14px; }
  .modal__body { padding: 18px; }
  .modal > footer, .modal__foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .modal > footer .button, .modal__foot .button, .modal__foot form { flex: 1 1 auto; }
  .modal__foot form .button { width: 100%; }
  .command-backdrop { padding: 0; }
  .command-palette { width: 100%; max-height: 100dvh; min-height: 100dvh; border: 0; border-radius: 0; }
  .command-search { height: 62px; padding: 0 14px; }
  .command-search > kbd { display: none; }
  .command-close { display: grid; }
  .command-footer { padding-bottom: env(safe-area-inset-bottom); }
  .toast-region { left: 12px; right: 12px; bottom: 12px; }
  .toast { width: 100%; min-width: 0; }
  .bulk-actionbar { left: 50%; width: calc(100vw - 24px); overflow: auto; }
  .component-page { grid-template-columns: 1fr; }
  .component-index { display: none; }
  .showcase { grid-template-columns: 1fr; gap: 18px; }
  .component-intro { display: block; }
  .version-stamp { margin-top: 20px; }
  .swatch-grid { grid-template-columns: repeat(3, 1fr); }
  .data-grid__head { display: none; }
  .product-row { grid-template-columns: 1.5fr .8fr; }
  .product-row > span:nth-child(4), .product-row > strong { display: none; }
  .price-matrix { grid-template-columns: 1fr 1fr; }
  .price-matrix > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border-subtle); }
  .price-matrix > div:nth-child(4) { border-top: 1px solid var(--border-subtle); }
  .auth-shell { padding: 0; }
  .auth-panel { grid-template-columns: minmax(0, 1fr); min-height: 100dvh; border-radius: 0; border: 0; box-shadow: none; align-content: start; }
  .auth-context { padding: 20px 22px; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .auth-context__copy, .auth-internal { display: none; }
  .auth-form-wrap { padding: 28px 22px 38px; align-items: start; }
  .auth-form { width: 100%; gap: 15px; }
  .invitation-panel { display: block; }
  .invitation-panel .auth-context { display: none; }
  .invitation-panel .auth-form-wrap { min-height: 100vh; }
  .error-page__card { padding: 30px 22px 26px; }
  .error-page__actions { width: 100%; }
  .error-page__actions .button { flex: 1 1 100%; }
  .mobile-dock { position: fixed; z-index: 42; right: 10px; bottom: calc(9px + env(safe-area-inset-bottom)); left: 10px; display: grid; grid-template-columns: repeat(4, 1fr); min-height: 60px; padding: 6px; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--surface-1) 94%, transparent); box-shadow: var(--shadow-lg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .25s ease, opacity .25s ease; }
  .mobile-dock a { display: grid; place-content: center; justify-items: center; gap: 3px; border-radius: var(--radius-md); color: var(--text-muted); }
  .mobile-dock a span { display: grid; height: 22px; place-items: center; }
  .mobile-dock a small { font-size: 11px; font-weight: 600; }
  .mobile-dock a.is-active { color: var(--text-primary); background: var(--surface-3); }
  body:has(.inspector.is-open) .mobile-dock, body:has(.wizard-drawer.is-open) .mobile-dock, body:has(.command-palette.is-open) .mobile-dock, body:has(.modal:not([hidden])) .mobile-dock { transform: translateY(130%); opacity: 0; }
  .account-menu { width: min(300px, calc(100vw - 16px)); }
  .quick-create-menu { width: min(264px, calc(100vw - 24px)); }
}
@media (max-width: 520px) {
  :root { --card-pad: 18px; --card-pad-sm: 16px; }
  .kpi-grid, .kpi-grid--4, .kpi-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 14px; }
  .kpi__value { font-size: var(--text-lg); }
  .kpi__label { white-space: normal; line-height: 1.3; }
  .kpi .kpi__value--text { font-size: var(--text-base); }
  .metric-strip, .ops-strip { grid-template-columns: minmax(0, 1fr); }
  .metric-strip > *, .ops-strip > div { border-left: 0 !important; border-top: 1px solid var(--border-subtle); }
  .metric-strip > *:first-child, .ops-strip > div:first-child { border-top: 0; }
  .swatch-grid { grid-template-columns: repeat(2, 1fr); }
  .social-login { grid-template-columns: minmax(0, 1fr); }
  .auth-form-wrap { padding-left: 18px; padding-right: 18px; }
}
@media (max-height: 720px) and (min-width: 821px) {
  .auth-shell { padding: 16px; }
  .auth-panel { min-height: 0; }
  .auth-form-wrap { padding-top: 30px; padding-bottom: 30px; }
  .auth-form { gap: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .has-portal-motion .portal-reveal { opacity: 1; transform: none; }
}
/* Light/dark toggle: cross-fades every colour instead of snapping — the
   before/after tokens are too far apart (near-white <-> near-black) for an
   instant swap to feel comfortable. theme-toggle.js adds this class for one
   tick around the data-theme change and removes it once the fade is done, so
   it never fights each component's own hover/focus transitions the rest of
   the time. Skipped entirely under prefers-reduced-motion, same as every
   other motion in the app. */
@media (prefers-reduced-motion: no-preference) {
  html.theme-transitioning, html.theme-transitioning * {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, fill .18s ease, stroke .18s ease !important;
  }
}
@media print {
  .sidebar, .topbar, .mobile-dock, .toast-region, .popover, .command-backdrop, .portal-route-progress { display: none !important; }
  .app-frame { margin: 0; width: 100%; }
  .workspace { padding: 0; }
  .card, .kpi { box-shadow: none; }
}

/* Operational notification inbox */
.notification-menu { width:min(320px,calc(100vw - 20px)); border-radius:12px; box-shadow:0 12px 32px rgba(18,24,40,.14),0 2px 8px rgba(18,24,40,.05); }
.notification-menu > header { padding:11px 13px 8px; border-bottom:0; }
.notification-menu > header strong { font-size:13px; letter-spacing:-.2px; }
.notification-menu > header small { display:block; margin-top:2px; }
.notification-dismiss { width:28px; height:28px; border:0; border-radius:8px; background:var(--surface-2); color:var(--text-muted); font-size:20px; cursor:pointer; }
.notification-preferences { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 8px 6px; padding:8px 10px; border:1px solid var(--border-subtle); border-radius:8px; background:var(--surface-2); font-size:11px; font-weight:600; }
.notification-preferences small { display:block; margin-top:2px; color:var(--text-muted); font-size: var(--text-3xs); font-weight:400; }
.notification-preferences .sound-toggle { position:relative; cursor:pointer; }
.notification-preferences .sound-toggle input { position:absolute; opacity:0; width:34px; height:20px; margin:0; }
.sound-toggle-track { display:block; width:34px; height:20px; background:var(--border-strong); border-radius:20px; transition:background .15s; }
.sound-toggle-track::after { content:''; display:block; width:14px; height:14px; margin:3px; border-radius:50%; background:white; transition:transform .15s; }
.sound-toggle input:checked + .sound-toggle-track { background:var(--accent); }
.sound-toggle input:checked + .sound-toggle-track::after { transform:translateX(14px); }
.sound-toggle input:focus-visible + .sound-toggle-track { outline:2px solid var(--accent); outline-offset:3px; }
.notification-feed { max-height:min(300px,max(80px,calc(100dvh - 180px))); padding:0 6px 6px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
.notification-feed a { grid-template-columns:28px minmax(0,1fr) 6px; align-items:start; gap:8px; padding:9px 8px; border:0; border-radius:8px; }
.notification-feed a + a { margin-top:2px; }
.notification-feed a > i { display:flex; align-items:center; justify-content:center; width:28px; height:28px; margin-top:0; border-radius:8px; background:var(--surface-2); color:var(--accent); }
.notification-feed a.is-read > i { background:var(--surface-2); color:var(--text-muted); }
.notification-feed strong { font-size:12px; font-weight:600; line-height:1.5; }
.notification-feed small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.6; }
.notification-feed time { margin-top:3px; font-size: var(--text-3xs); }
.notification-unread { width:6px; height:6px; margin-top:8px; border-radius:50%; background:var(--accent); }
.is-read .notification-unread { visibility:hidden; }
.notification-item--decision { display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; padding:9px 8px; margin:2px 0; border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border-subtle)); border-radius:8px; background:color-mix(in srgb,var(--accent-soft) 52%,var(--surface-1)); }
.notification-item--decision > i { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--surface-1); color:var(--accent-strong); }
.notification-item--decision > span { min-width:0; }
.notification-item--decision em { display:block; margin-top:7px; color:var(--text-secondary); font-size:11px; font-style:normal; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notification-decision-actions { display:flex; gap:7px; margin-top:10px; }
.notification-decision-actions button { min-height:28px; padding:0 10px; border-radius:7px; border:1px solid var(--border-default); background:var(--surface-1); color:var(--text-secondary); font:inherit; font-size:11px; font-weight:650; cursor:pointer; }
.notification-decision-actions .notification-decision-approve { border-color:var(--primary); background:var(--primary); color:var(--text-inverse); }
.notification-decision-actions button:hover:not(:disabled) { transform:translateY(-1px); }
.notification-decision-actions button:active:not(:disabled) { transform:translateY(0); }
.notification-decision-actions button:disabled { opacity:.62; cursor:progress; }
.notification-item--decision.is-resolved { opacity:0; transform:translateX(8px); transition:opacity .18s ease,transform .18s ease; }
.notification-actions { padding:7px 10px; gap:8px; background:var(--surface-2); }
.notification-actions button { background:transparent; }
.notification-empty small { display:block; margin-top:6px; font-size:11px; }
.feed-row-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.feed-delete-menu { position:relative; }
.feed-delete-menu summary { list-style:none; cursor:pointer; }
.feed-delete-menu form { position:absolute; z-index:20; right:0; top:38px; width:240px; padding:14px; background:var(--surface-1); border:1px solid var(--border-default); border-radius:12px; box-shadow:0 8px 28px rgba(18,24,40,.12); }
.feed-delete-menu p { font-size:12px; line-height:1.6; margin-bottom:12px; }
.google-handoff { margin-top:20px; }
.google-handoff h3 { margin:8px 0 14px; }
.google-handoff ol { padding-left:20px; font-size:13px; line-height:1.8; }
.google-handoff li + li { margin-top:10px; }
.google-handoff .text-muted { margin:14px 0; font-size:12px; line-height:1.7; }

/* ==========================================================================
   UI foundation (UI Phase 0) — shared states the components below rely on.
   Tokens only; no page-specific selectors here.
   ========================================================================== */

/* Alert: .alert shares the notice surface; the glyph keeps tone readable without colour. */
.alert { align-items: center; }
.alert::before { content: "i"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-1); color: var(--info-strong); font: var(--weight-bold) var(--text-2xs)/1 var(--font-sans); }
.alert--success::before { content: "✓"; color: var(--success-strong); }
.alert--warning::before, .alert--danger::before { content: "!"; }
.alert--warning::before { color: var(--warning-strong); }
.alert--danger::before { color: var(--danger-strong); }
.alert--neutral::before { color: var(--text-secondary); }
.notice--info { border-color: var(--info-line); background: var(--info-soft); }

/* Status dot: dot + text, for inline states inside dense rows. */
.status-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font: var(--type-caption); white-space: nowrap; }
.status-dot::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.status-dot--active::before, .status-dot--success::before, .status-dot--connected::before { background: var(--success); }
.status-dot--warning::before, .status-dot--review::before { background: var(--warning); }
.status-dot--danger::before, .status-dot--error::before, .status-dot--failed::before { background: var(--danger); }
.status-dot--info::before, .status-dot--pending::before { background: var(--info); }
.status-dot--inactive::before, .status-dot--disabled::before, .status-dot--neutral::before { background: var(--border-strong); }

/* Forms */
.field-help { display: block; color: var(--text-muted); font: var(--type-secondary); font-weight: var(--weight-regular); }
.field-error { display: block; color: var(--danger-strong); font: var(--type-secondary); font-weight: var(--weight-medium); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea,
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"],
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.field.is-invalid input:focus, .field input[aria-invalid="true"]:focus, .field select[aria-invalid="true"]:focus, .field textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.field textarea:disabled, .textarea:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
.field input[readonly], .field textarea[readonly] { background: var(--surface-2); }
/* .field input also matched checkboxes/radios and drew them 100% wide and 40px tall. */
.field input[type="checkbox"], .field input[type="radio"], .check input, .radio input {
  width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 0; border: 0; box-shadow: none; accent-color: var(--accent); flex: none; vertical-align: middle; cursor: pointer;
}
.field input[type="checkbox"]:disabled, .field input[type="radio"]:disabled, .check input:disabled, .radio input:disabled { cursor: not-allowed; opacity: .55; }
label.field:has(> input[type="checkbox"]:first-child), label.field:has(> input[type="radio"]:first-child) { display: flex; align-items: center; gap: 8px; font-weight: var(--weight-medium); }
.check, .radio { display: flex; align-items: center; gap: 8px; color: var(--text-primary); font: var(--type-body); cursor: pointer; }
.check:has(input:disabled), .radio:has(input:disabled) { color: var(--text-muted); cursor: not-allowed; }
.check input { accent-color: var(--accent); }
fieldset.field-group { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field-group > legend { margin-bottom: 6px; padding: 0; color: var(--text-primary); font: var(--type-label); }

/* Form section: heading + grid; one save per section. */
.form-section { display: grid; gap: var(--space-4); min-width: 0; }
.form-section + .form-section { padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.form-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); min-width: 0; }
.form-section__title { margin: 2px 0 0; color: var(--text-primary); font: var(--type-section-title); }
.form-section__desc { margin: 4px 0 0; max-width: 640px; color: var(--text-secondary); font: var(--type-secondary); }
.form-section__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); min-width: 0; }
.form-section__body--1 { grid-template-columns: minmax(0, 1fr); }
.form-section__body--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-section__body > .field--wide { grid-column: 1 / -1; }
.form-section__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* Tabs: one system. Default = page tabs (underline); variants share tokens. */
.tabs--compact > a, .tabs--compact > button { height: var(--tab-h-sm); padding: 0 10px; font-size: var(--text-xs); }
.tabs--pill { gap: 6px; border-bottom: 0; }
.tabs--pill > a, .tabs--pill > button { height: 32px; padding: 0 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); box-shadow: var(--shadow-xs); }
.tabs--pill > a:hover, .tabs--pill > button:hover { border-color: var(--border-strong); }
.tabs--pill > .is-active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); box-shadow: none; }
.tabs--pill > .is-active:after { content: none; }
.tabs > [aria-disabled="true"], .tabs > button:disabled { color: var(--text-muted); opacity: .6; pointer-events: none; }
.tabs__count { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-muted); font: var(--weight-semibold) var(--text-3xs)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.tabs > .is-active .tabs__count { background: var(--primary); color: var(--text-inverse); }
.tabs--pill > .is-active .tabs__count { background: var(--surface-1); color: var(--accent-strong); }
.tab-panel[hidden] { display: none !important; }

/* Data table: header, rows, hover, selected, numeric, empty, loading. */
.data-table-wrap { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--text-primary); font: var(--type-table); }
.data-table th { position: sticky; top: 0; z-index: 1; padding: 10px var(--table-cell-x); border-bottom: 1px solid var(--border-subtle); background: var(--table-head-bg); color: var(--text-muted); font: var(--type-table-head); letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: var(--table-cell-y) var(--table-cell-x); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: var(--table-row-hover); }
.data-table tbody tr.is-selected, .data-table tbody tr[aria-selected="true"] { background: var(--table-row-selected); }
.data-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.data-table .is-numeric, .data-table th.is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .is-muted { color: var(--text-muted); }
.data-table__check { width: 40px; }
.data-table__primary { display: grid; gap: 2px; min-width: 0; }
.data-table__primary strong { overflow: hidden; font-weight: var(--weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.data-table__primary small { overflow: hidden; color: var(--text-muted); font: var(--type-caption); text-overflow: ellipsis; white-space: nowrap; }
.data-table--dense { --table-cell-y: 8px; --table-cell-x: 12px; }
.data-table__empty td { padding: 0; }
.data-table__empty .empty-state { padding: 40px 24px; }
.data-table.is-loading tbody { pointer-events: none; }
.data-table__skeleton td > span { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200%; animation: shimmer 1.3s infinite; }
.data-table__skeleton td:nth-child(2n) > span { width: 70%; }
.data-table-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px var(--table-cell-x); border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font: var(--type-secondary); }

/* Filter toolbar: search + filters + chips. (.filter-bar is the existing pill row.) */
.filter-toolbar { display: grid; gap: 10px; min-width: 0; }
.filter-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.filter-toolbar__search { position: relative; flex: 1 1 280px; min-width: 0; max-width: 420px; }
.filter-toolbar__search input { width: 100%; height: var(--control-h); padding: 0 12px 0 36px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-primary); font: var(--type-body); box-shadow: var(--shadow-xs); outline: 0; }
.filter-toolbar__search input:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.filter-toolbar__search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.filter-toolbar__field select { height: var(--control-h); min-width: 140px; padding: 0 34px 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background-color: var(--surface-1); color: var(--text-primary); font: var(--type-body); }
.filter-toolbar__field.is-set select { border-color: var(--accent-line); background-color: var(--accent-soft); color: var(--accent-strong); }
.filter-toolbar__actions { display: flex; gap: 8px; margin-left: auto; }
.filter-toolbar__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-toolbar__chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border: 1px solid var(--accent-line); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font: var(--type-caption); }
.filter-toolbar__chip a, .filter-toolbar__chip button { display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.filter-toolbar__chip a:hover, .filter-toolbar__chip button:hover { background: var(--surface-1); }

/* Page header breadcrumb */
.page-header__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 2px; padding: 0; list-style: none; color: var(--text-muted); font: var(--type-caption); }
.page-header__crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.page-header__crumbs li + li::before { content: "/"; color: var(--border-strong); }
.page-header__crumbs a { color: var(--text-secondary); }
.page-header__crumbs a:hover { color: var(--text-primary); }
.page-header__crumbs [aria-current="page"] { overflow: hidden; max-width: 320px; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; }

/* Marketplace badge sizes */
.marketplace-badge--sm { gap: 5px; padding: 3px 7px 3px 4px; font-size: var(--text-2xs); }
.marketplace-badge--sm > span[aria-hidden="true"] { width: 16px; height: 16px; }
.marketplace-badge--icon { gap: 0; padding: 3px; }
.marketplace-badge--icon > span[aria-hidden="true"] { width: 22px; height: 22px; }

/* Drawer: side sheet built on the inspector surface. */
.inspector--drawer { inset: 0 0 0 auto; margin: 0; width: min(var(--drawer-width), 100vw); height: 100dvh; max-height: 100dvh; border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
.modal__foot, .inspector__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Numbers line up in every dense surface. */
.kpi__value, .stock-cell strong, .money strong, .pagination, .table td, .inventory-metrics strong { font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .form-section__body--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .form-section__body, .form-section__body--3 { grid-template-columns: minmax(0, 1fr); }
  .filter-toolbar__search { flex-basis: 100%; max-width: none; }
  .filter-toolbar__field, .filter-toolbar__field select { flex: 1 1 140px; min-width: 0; width: 100%; }
  .filter-toolbar__actions { width: 100%; margin-left: 0; }
  .inspector--drawer { width: 100vw; border-radius: 0; }
  .page-header__crumbs [aria-current="page"] { max-width: 200px; }
}
.foundation-demo { gap: var(--space-5); }
.foundation-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.type-roles { display: grid; gap: 6px; }

/* Dropdown menu built on <details>: row actions, view menus, overflow lists. */
.menu-dropdown { position: relative; display: inline-flex; }
.menu-dropdown > summary { list-style: none; cursor: pointer; }
.menu-dropdown > summary::-webkit-details-marker { display: none; }
.menu-dropdown__panel { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 220px; max-width: min(320px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 6px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-1); box-shadow: var(--shadow-lg); text-align: left; }
.menu-dropdown--up > .menu-dropdown__panel { top: auto; bottom: calc(100% + 6px); }
.menu-dropdown__panel--form { gap: var(--space-4); min-width: 240px; padding: var(--space-4); }
.menu-dropdown__divider { height: 1px; margin: 4px 2px; background: var(--border-subtle); }
.menu-dropdown__item { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); font: var(--type-body); text-align: left; cursor: pointer; }
.menu-dropdown__item:hover, .menu-dropdown__item:focus-visible { background: var(--surface-2); }
.menu-dropdown__item > svg { flex: none; margin-top: 2px; color: var(--text-secondary); }
.menu-dropdown__item > span { display: grid; gap: 1px; min-width: 0; }
.menu-dropdown__item strong { font-weight: var(--weight-semibold); }
.menu-dropdown__item small { color: var(--text-muted); font: var(--type-caption); font-weight: var(--weight-regular); }
.menu-dropdown__panel .menu-action { font-size: var(--text-sm); }
.menu-dropdown__panel .menu-action > svg { flex: none; color: var(--text-secondary); }
.menu-dropdown__panel .menu-action--danger > svg { color: currentColor; }
.menu-dropdown__panel .menu-action:disabled { opacity: .5; cursor: progress; }

/* Copyable identifiers */
.copy-cell { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.copy-cell code { overflow: hidden; color: var(--text-primary); font: var(--weight-regular) var(--text-xs)/1.3 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.copy-button { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-muted); cursor: pointer; opacity: 0; }
.copy-cell:hover .copy-button, .copy-button:focus-visible { opacity: 1; }
.copy-button:hover { background: var(--surface-3); color: var(--text-primary); }
@media (hover: none) { .copy-button { opacity: 1; } }

/* Row checkbox: mixed state for "some rows on this page selected". */
.row-check input:indeterminate + span { background: var(--primary); border-color: var(--primary); }
.row-check input:indeterminate + span::after { content: ""; width: 8px; height: 2px; border-radius: 1px; background: var(--text-inverse); }

/* Confirmation dialog */
.confirm-dialog { z-index: var(--z-modal); }
.confirm-dialog__backdrop { z-index: calc(var(--z-modal) - 1); }
.confirm-dialog .modal__body p { color: var(--text-secondary); font: var(--type-body); }
/* A linked primary cell must truncate too (the link, not the inline strong, is the grid item). */
.data-table__primary > a { display: block; min-width: 0; overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; }
.data-table__primary > a:hover strong { color: var(--accent-strong); text-decoration: underline; }