/* =====================================================================================
   SeenPact dashboards (Admin + Portal) — "Trust Ink" design system
   Adapted from internal admin-blazor template. Shared by Kyc.Admin + Kyc.Portal as
   _content/Kyc.Dashboards.Shared/app.css.
   Flat surfaces · hairline separators · no motion · 4px spacing scale
   ===================================================================================== */

:root {
  /* palette */
  --ink-900: #0B1220; --ink-700: #1F2A44; --ink-600: #4B5875; --ink-500: #3F4B66; --ink-400: #58647F; --ink-300: #616D87; --ink-250: #8A94AD;
  --ink-200: #C9D0DF; --ink-100: #E6EAF2; --ink-050: #F3F5F9; --white: #FFFFFF;
  --trust: #2F5BEA; --trust-deep: #1E43C9; --trust-soft: #E9EEFD; --trust-light: #7A96F1; --accent-on-ink: #8DA5F5;
  --verified: #0A7A50; --verified-soft: #E3F5EC;
  --caution: #C97F06; --caution-soft: #FBF0DA; --warning-ink: #8A5A08; --warning-fill: #A66905;
  --breach: #D0392F; --breach-soft: #FBE7E5; --breach-ink: #B0322B;
  --signal: #6C4FE0; --signal-soft: #EDE9FB;
  --slate: #6B7A99;

  /* semantic */
  --bg: var(--ink-050); --surface: var(--white); --surface-2: #F7F8FB; --popup: var(--white);
  --line: var(--ink-100); --line-strong: var(--ink-200);
  --ink: var(--ink-900); --ink-2: var(--ink-500); --ink-3: var(--ink-400); --ink-4: var(--ink-300);
  --accent: var(--trust); --accent-deep: var(--trust-deep); --accent-soft: var(--trust-soft); --accent-ink: #fff;
  --success: var(--verified); --warning: var(--caution); --danger: var(--breach); --info: var(--signal);

  /* type */
  --font-title: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .875rem; --fs-lg: 1rem;

  /* spacing scale (4px) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px;
  --rail-w: 72px; --subnav-w: 236px; --topbar-h: 60px;
  --control-h: 38px; --control-h-sm: 32px;

  /* ---- Radzen theme variables ---- */
  --rz-text-font-family: var(--font-body);
  --rz-body-font-size: var(--fs-md);
  --rz-text-color: var(--ink);
  --rz-text-secondary-color: var(--ink-3);
  --rz-text-title-color: var(--ink);
  --rz-base-background-color: var(--bg);
  --rz-base: var(--ink-050); --rz-base-light: var(--surface-2); --rz-base-lighter: #fff; --rz-base-dark: var(--ink-100); --rz-base-darker: var(--ink-200);
  --rz-on-base: var(--ink); --rz-on-base-light: var(--ink); --rz-on-base-lighter: var(--ink); --rz-on-base-dark: var(--ink); --rz-on-base-darker: var(--ink);
  --rz-primary: var(--accent); --rz-primary-light: #436CEE; --rz-primary-lighter: var(--accent-soft); --rz-primary-dark: var(--accent-deep); --rz-primary-darker: #17369F;
  --rz-on-primary: #fff; --rz-on-primary-light: #fff; --rz-on-primary-dark: #fff; --rz-on-primary-darker: #fff; --rz-on-primary-lighter: var(--accent-deep);
  --rz-secondary: var(--signal); --rz-secondary-light: #7A5FE5; --rz-secondary-lighter: var(--signal-soft); --rz-secondary-dark: #5538C7; --rz-on-secondary-lighter: var(--signal);
  --rz-outline-color: var(--accent);
  --rz-info: var(--info); --rz-info-light: #7A5FE5; --rz-info-lighter: var(--signal-soft); --rz-info-dark: #5538C7; --rz-on-info-lighter: var(--info);
  --rz-success: var(--success); --rz-success-light: #2B8461; --rz-success-lighter: var(--verified-soft); --rz-success-dark: #0B7F53; --rz-on-success-lighter: var(--success);
  --rz-warning: var(--warning-fill); --rz-warning-light: #9E6B0F; --rz-warning-lighter: var(--caution-soft); --rz-warning-dark: #8A5A08; --rz-on-warning: #fff; --rz-on-warning-lighter: var(--warning-ink);
  --rz-danger: var(--danger); --rz-danger-light: #D73E35; --rz-danger-lighter: var(--breach-soft); --rz-danger-dark: var(--breach-ink); --rz-on-danger-lighter: var(--breach-ink);
  --rz-border-radius: 8px; --rz-checkbox-border-radius: 4px; --rz-grid-detail-template-background-color: transparent;
  --rz-input-border-radius: 8px;
  --rz-input-height: var(--control-h);
  --rz-input-background-color: var(--surface-2);
  --rz-input-border: 1px solid transparent;
  --rz-input-hover-border: 1px solid var(--line-strong);
  --rz-input-focus-shadow: 0 0 0 3px var(--accent-soft);
  --rz-input-focus-border: 1px solid var(--accent);
  --rz-input-placeholder-color: var(--ink-4);
  /* ---- form controls v2: Radzen sizes these entirely from variables; undefined = collapsed UI ---- */
  --rz-input-padding-block: 0; --rz-input-padding-inline: var(--s3);
  --rz-input-line-height: 1.4; --rz-input-font-size: var(--fs-md);
  --rz-input-value-color: var(--ink); --rz-input-shadow: none; --rz-input-hover-shadow: none;
  --rz-input-hover-background-color: var(--surface-2);
  --rz-input-focus-background-color: var(--surface);
  --rz-input-focus-outline: none; --rz-input-transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
  --rz-input-disabled-background-color: var(--ink-050); --rz-input-disabled-color: var(--ink-4);
  --rz-input-disabled-border: 1px solid transparent; --rz-input-disabled-shadow: none; --rz-input-disabled-opacity: 1;
  --rz-input-disabled-placeholder-color: var(--ink-4);
  /* numeric spinner: two separated buttons, 4px inset, stacked with a 2px gap inside a 38px control */
  --rz-numeric-button-width: 26px; --rz-numeric-button-height: 14px; --rz-numeric-button-offset: 4px;
  --rz-numeric-button-border-radius: 5px;
  --rz-numeric-button-background-color: var(--white); --rz-numeric-button-color: var(--ink-3);
  --rz-numeric-button-disabled-background-color: var(--ink-050); --rz-numeric-button-disabled-color: var(--ink-250);
  --rz-numeric-input-padding-block: 0; --rz-numeric-input-padding-inline: var(--s3);
  --rz-numeric-line-height: 1.4;
  /* checkbox */
  --rz-checkbox-width: 18px; --rz-checkbox-height: 18px; --rz-checkbox-border-width: 1px;
  --rz-checkbox-icon-width: 14px; --rz-checkbox-icon-height: 14px; --rz-checkbox-icon-font-size: 14px;
  --rz-checkbox-tri-icon-width: 12px; --rz-checkbox-tri-icon-height: 12px; --rz-checkbox-tri-icon-font-size: 12px;
  --rz-checkbox-checked-background-color: var(--accent); --rz-checkbox-checked-border: 1px solid var(--accent);
  --rz-checkbox-checked-color: #fff; --rz-checkbox-checked-icon-background-color: transparent;
  --rz-checkbox-checked-icon-border-radius: 0; --rz-checkbox-checked-shadow: none;
  --rz-checkbox-checked-hover-background-color: var(--accent-deep); --rz-checkbox-checked-hover-border: 1px solid var(--accent-deep);
  --rz-checkbox-checked-disabled-background-color: var(--trust-light); --rz-checkbox-checked-disabled-border: 1px solid var(--trust-light);
  --rz-checkbox-focus-outline: 3px solid var(--accent-soft); --rz-checkbox-focus-outline-offset: 1px;
  --rz-checkbox-margin-block: 0; --rz-checkbox-margin-inline: 0;
  --rz-checkbox-label-margin-block: 0; --rz-checkbox-label-margin-inline: var(--s2) 0;
  /* radio */
  --rz-radio-width: 18px; --rz-radio-height: 18px; --rz-radio-border-width: 1px; --rz-radio-border-radius: 50%;
  --rz-radio-icon-width: 8px; --rz-radio-icon-height: 8px; --rz-radio-checked-color: var(--accent);
  --rz-radio-active-background-color: var(--surface); --rz-radio-active-shadow: none;
  --rz-radio-label-margin-block: 0; --rz-radio-label-margin-inline: var(--s2) 0;
  /* dropdown / multiselect */
  --rz-dropdown-label-padding-block: 0; --rz-dropdown-label-padding-inline: var(--s3);
  --rz-dropdown-item-padding: var(--s2) var(--s3); --rz-dropdown-item-font-size: var(--fs-md);
  --rz-dropdown-item-transition: background-color .1s ease, color .1s ease;
  --rz-dropdown-item-hover-background-color: var(--surface-2); --rz-dropdown-item-hover-color: var(--ink);
  --rz-dropdown-item-selected-background-color: var(--accent-soft); --rz-dropdown-item-selected-color: var(--accent-deep);
  --rz-dropdown-item-selected-hover-background-color: var(--accent-soft); --rz-dropdown-item-selected-hover-color: var(--accent-deep);
  --rz-dropdown-item-selected-shadow: none; --rz-dropdown-item-disabled-opacity: .5;
  --rz-dropdown-items-padding: var(--s1); --rz-dropdown-items-margin: 0;
  --rz-dropdown-panel-border: 1px solid var(--line); --rz-dropdown-panel-padding: 0;
  --rz-dropdown-panel-shadow: 0 12px 32px rgba(11, 18, 32, .14);
  --rz-dropdown-open-background-color: var(--surface); --rz-dropdown-open-border: 1px solid var(--accent);
  --rz-dropdown-trigger-icon-width: 18px; --rz-dropdown-trigger-icon-height: 18px;
  --rz-dropdown-trigger-icon-margin-block: 0; --rz-dropdown-trigger-icon-margin-inline: 0 var(--s2);
  --rz-dropdown-filter-padding: var(--s2) var(--s3); --rz-dropdown-filter-border: 1px solid var(--line);
  --rz-dropdown-chips-padding-block: 2px; --rz-dropdown-chips-padding-inline: var(--s2);
  --rz-card-background-color: transparent; --rz-card-shadow: none; --rz-panel-background-color: transparent;
  --rz-grid-header-background-color: transparent; --rz-grid-header-color: var(--ink-3); --rz-grid-header-font-weight: 600;
  --rz-grid-cell-border: 1px solid var(--line);
  --rz-grid-stripe-background-color: transparent; --rz-grid-hover-background-color: var(--surface-2); --rz-grid-selected-background-color: var(--accent-soft);
  --rz-grid-cell-padding: var(--s3) var(--s4); --rz-grid-header-cell-padding: var(--s3) var(--s4); --rz-grid-header-font-size: .6875rem;
  --rz-grid-filter-background-color: transparent;
  --rz-panel-menu-item-color: var(--ink-2); --rz-panel-menu-item-active-background-color: var(--accent-soft); --rz-panel-menu-item-active-color: var(--accent-deep); --rz-panel-menu-item-active-indicator: none;
  --rz-panel-menu-item-hover-background-color: var(--surface-2); --rz-panel-menu-item-border-radius: 8px; --rz-panel-menu-item-padding-block: var(--s2); --rz-panel-menu-item-padding-inline: var(--s3); --rz-panel-menu-font-weight: 500;
  --rz-header-background-color: transparent; --rz-header-shadow: none; --rz-layout-body-background-color: transparent;
  --rz-sidebar-background-color: transparent;
  --rz-button-border-radius: 8px; --rz-button-shadow: none;
  --rz-badge-border-radius: 6px; --rz-badge-font-weight: 600; --rz-badge-font-size: .6875rem;
  --rz-progressbar-border-radius: 999px; --rz-progressbar-height: 6px;
  --rz-timeline-line-color: var(--line);
  --rz-dialog-background-color: #fff; --rz-dialog-border-radius: 12px; --rz-dialog-shadow: 0 24px 48px -20px rgba(11,18,32,.25);
  --rz-series-1: var(--trust); --rz-series-2: var(--verified); --rz-series-3: var(--signal); --rz-series-4: var(--caution); --rz-series-5: var(--slate); --rz-series-6: #9DB4F5; --rz-series-7: #7ED2AE; --rz-series-8: var(--ink-200);
  --rz-chart-axis-color: var(--line); --rz-chart-grid-line-color: var(--line);
  --rz-tooltip-background-color: #fff; --rz-tooltip-color: var(--ink); --rz-tooltip-border-radius: 8px;
  --rz-notification-border-radius: 10px;
  --rz-splitter-bar-background-color: transparent;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; transition: none !important; animation: none !important; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.5; color: var(--ink); background: var(--bg); font-feature-settings: "cv11", "ss01", "tnum" 0; }
h1, h2, h3, h4, .t-title { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
h1 { font-size: 1.5rem; line-height: 1.2; }
h2 { font-size: 1.25rem; line-height: 1.25; }
h3 { font-size: 1rem; line-height: 1.3; }
a { color: var(--accent-deep); text-decoration: none; }
code, .mono { font-family: var(--font-mono); font-size: 0.8125em; }
p { margin: 0; }
.rz-body { font-family: var(--font-body); }
.rz-layout { background: transparent; }
.rzi, .rzi.notranslate { font-family: "Material Symbols Rounded" !important; font-weight: normal; font-style: normal; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ------------------------------------------------------------------ surfaces */
.glass, .glass-strong, .soft { background: var(--surface); border: none; outline: none; box-shadow: none; border-radius: var(--radius); }
.glass-ink { background: var(--ink-900); color: #F4F6FB; border-radius: var(--radius-lg); }
.glass-ink h1, .glass-ink h2, .glass-ink h3, .glass-ink .t-title, .glass-accent h1, .glass-accent h2, .glass-accent h3 { color: inherit; }
.glass-ink .muted { color: rgba(244,246,251,.66); }
.glass-accent { background: var(--accent); color: #fff; border-radius: var(--radius-lg); }
.card { padding: var(--s5); }
.card-sm { padding: var(--s4); }
.card-lg { padding: var(--s6) var(--s7); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s5); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); min-height: 56px; }
.card-head h3 { font-size: .9375rem; }
.card-head .sub { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.card-sm .card-head { margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s4); padding: var(--s3) var(--s4); min-height: 48px; }
.card-lg .card-head { margin: calc(-1 * var(--s6)) calc(-1 * var(--s7)) var(--s6); padding: var(--s4) var(--s7); }
.sep, .divider { height: 1px; background: var(--line); margin: var(--s4) 0; }
.vsep { width: 1px; align-self: stretch; background: var(--line); }

/* ------------------------------------------------------------------ app shell */
.shell { min-height: 100vh; display: grid; grid-template-columns: var(--rail-w) var(--subnav-w) 1fr; }
.shell.subnav-closed { grid-template-columns: var(--rail-w) 0 1fr; }
.rail { position: sticky; top: 0; height: 100vh; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s4) var(--s3); background: var(--surface); border-right: 1px solid var(--line); }
.rail .logo { margin-bottom: var(--s4); display: grid; place-items: center; height: 40px; }
.rail-btn { position: relative; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; border: none; background: transparent; padding: 0; }
.rail-btn .rzi { font-size: 1.375rem; }
.rail-btn:hover { background: var(--surface-2); color: var(--ink); }
.rail-btn.active { background: var(--accent-soft); color: var(--accent-deep); }
.rail-btn.active .rzi { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.rail-btn .dot { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 999px; background: var(--danger); box-shadow: 0 0 0 2px #fff; }
.rail-sep { width: 24px; height: 1px; background: var(--line); margin: var(--s2) 0; }
.rail .grow { flex: 1; }
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #fff; color: var(--ink); font-size: var(--fs-xs); font-weight: 500; padding: 6px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 100; font-family: var(--font-body); box-shadow: 0 0 0 1px var(--line), 0 8px 20px -10px rgba(11,18,32,.25); }
[data-tip]:hover::after { opacity: 1; }

.subnav { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 55; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.subnav-closed .subnav { visibility: hidden; }
.subnav-inner { width: var(--subnav-w); padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: 2px; height: 100%; }
.subnav h4 { font-family: var(--font-title); font-size: 1rem; font-weight: 600; padding: 0 var(--s2); margin-bottom: var(--s3); }
.subnav .eyebrow { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: var(--s2) var(--s2) 2px; }
.subnav-link { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s2) 9px var(--s3); border-radius: 8px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; line-height: 1.2; }
.subnav-link .rzi { font-size: 1.125rem; color: var(--ink-3); }
.subnav-link:hover { background: var(--surface-2); color: var(--ink); }
.subnav-link.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.subnav-link.active .rzi { color: var(--accent-deep); }
.subnav-link .badge { margin-left: auto; font-size: .6875rem; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: var(--ink-050); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.subnav-link.active .badge { background: #fff; color: var(--accent-deep); }
.subnav-foot { margin-top: auto; padding: var(--s4) var(--s2) 0; border-top: 1px solid var(--line); }
.subnav-foot .t { font-weight: 600; font-size: var(--fs-sm); }
.subnav-foot .s { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.subnav-foot .meter { margin-top: var(--s3); }

.content { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s6); height: var(--topbar-h); }
.crumbs { display: flex; align-items: center; gap: 2px; font-size: var(--fs-sm); color: var(--ink-3); font-weight: 500; min-width: 0; overflow: hidden; flex: 1 1 auto; }
.topbar-actions { flex: 0 0 auto; }
.gsearch { flex: 0 1 260px; min-width: 140px; }
@media (min-width: 1500px) { .gsearch { flex-basis: 320px; } }
.crumbs .crumb.cur { overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.crumbs a, .crumbs .crumb { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; color: var(--ink-3); }
.crumbs a:hover { background: var(--surface-2); color: var(--ink); }
.crumbs .crumb.cur { color: var(--ink); font-weight: 600; background: var(--surface-2); }
.crumbs .rzi { font-size: 1.125rem; color: var(--ink-4); }
.crumbs .sepi { font-size: 1rem; color: var(--ink-200); }
.topbar-actions { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; border: none; background: transparent; color: var(--ink-2); position: relative; padding: 0; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn .rzi { font-size: 1.25rem; }
.icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 999px; background: var(--danger); box-shadow: 0 0 0 2px #fff; }
.avatar { display: inline-grid; place-items: center; border-radius: 999px; font-weight: 600; color: #fff; font-family: var(--font-title); background: var(--ink-700); flex: none; letter-spacing: 0; }
.avatar-sm { width: 28px; height: 28px; font-size: .625rem; }
.avatar-md { width: 36px; height: 36px; font-size: .75rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1rem; }
.avatar-xl { width: 88px; height: 88px; font-size: 1.5rem; }
.pop { position: absolute; min-width: 220px; padding: var(--s2); z-index: 80; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 16px 32px -16px rgba(11,18,32,.3); }
.pop a, .pop button { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 9px var(--s3); border-radius: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); background: transparent; border: none; cursor: pointer; font-family: var(--font-body); text-align: left; }
.pop a:hover, .pop button:hover { background: var(--surface-2); color: var(--ink); }
.pop .pop-sep { height: 1px; background: var(--line); margin: var(--s2) 0; }

/* global search (topbar) */
.gsearch { position: relative; width: 320px; max-width: 34vw; }
.gsearch input { width: 100%; height: 36px; border-radius: 8px; border: 1px solid transparent; background: var(--surface-2); padding: 0 56px 0 36px; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink); }
.gsearch input::placeholder { color: var(--ink-4); }
.gsearch input:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gsearch > .rzi { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-4); font-size: 1.125rem; pointer-events: none; }
.gsearch kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-size: .6875rem; color: var(--ink-4); border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 6px; background: #fff; line-height: 1.4; }
.gsearch-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -20px rgba(11,18,32,.35); z-index: 120; overflow: hidden; max-height: 70vh; overflow-y: auto; }
.gsearch-group { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.gsearch-group:last-child { border-bottom: none; }
.gsearch-group .gh { font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); font-weight: 600; padding: 4px var(--s4) 6px; }
.gsearch-item { display: flex; align-items: center; gap: var(--s3); padding: 8px var(--s4); font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.gsearch-item .rzi { font-size: 1.125rem; color: var(--ink-4); }
.gsearch-item .l { flex: 1; min-width: 0; }
.gsearch-item .l b { display: block; color: var(--ink); font-weight: 600; }
.gsearch-item .l span { font-size: var(--fs-xs); color: var(--ink-3); }
.gsearch-item .k { font-family: var(--font-body); font-size: .6875rem; color: var(--ink-4); }
.gsearch-item:hover, .gsearch-item.hl { background: var(--surface-2); }
.gsearch-item.hl .l b { color: var(--accent-deep); }
.gsearch-empty { padding: var(--s5) var(--s4); font-size: var(--fs-sm); color: var(--ink-3); text-align: center; }

.page { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: var(--s6) var(--s6) var(--s8); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin: 0 0 var(--s6); }
.page-head .eyebrow { font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }
.page-head p.lede { color: var(--ink-2); margin-top: 6px; max-width: 64ch; font-size: var(--fs-md); }
.page-actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.side-toggle { display: none; }
.side-backdrop { display: none; }

/* ------------------------------------------------------------------ preloader (skeleton of the shell) */
.app-preloader { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: grid; grid-template-columns: var(--rail-w) var(--subnav-w) 1fr; }
.app-preloader.done { display: none; }
.pre-rail { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s4) var(--s3); }
.pre-sub { background: var(--surface); border-right: 1px solid var(--line); padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.pre-main { display: flex; flex-direction: column; }
.pre-top { height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s6); }
.pre-body { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); max-width: 1440px; width: 100%; margin: 0 auto; }
.pre-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.pre-card { background: var(--surface); border-radius: var(--radius); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }

/* ------------------------------------------------------------------ layout utilities */
.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; } .span-12 { grid-column: span 12; }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.strong { font-weight: 600; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-1 { margin-top: var(--s2); } .mt-2 { margin-top: var(--s4); } .mt-3 { margin-top: var(--s6); } .mb-1 { margin-bottom: var(--s2); } .mb-2 { margin-bottom: var(--s4); }

/* ------------------------------------------------------------------ utilities (tokens) */
.gap-1 { gap: var(--s1) !important; } .gap-2 { gap: var(--s2) !important; } .gap-3 { gap: var(--s3) !important; } .gap-4 { gap: var(--s4) !important; }
.stack-sm { gap: var(--s3); }
.eyebrow { font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 600; }
.glass-ink .eyebrow { color: var(--accent-on-ink); }
.display-sm { font-family: var(--font-title); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.display { font-family: var(--font-title); font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.tip-title { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.tip-value { margin-top: var(--s1); }
.legend-inline { display: flex; gap: var(--s4); align-items: center; font-size: var(--fs-sm); color: var(--ink-2); }
.legend-inline > span { display: inline-flex; align-items: center; gap: 6px; }
.legend-inline .sw, .legend-row .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.cell-person { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.cell-person .t { font-weight: 600; font-size: var(--fs-sm); line-height: 1.25; }
.cell-person .s { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.25; margin-top: 1px; }
.list-row.dense { padding: var(--s2) 0; }
.list-row.link { cursor: pointer; } .list-row.link:hover .title, .list-row.link:hover > span { color: var(--ink); }
.list-row.block { display: block; }
.bar-row .meter { width: 40%; flex: none; }
.bar-row .val { width: 64px; text-align: right; font-family: var(--font-mono); font-size: var(--fs-sm); flex: none; }
.meter.sm { height: 4px; } .meter.lg { height: 8px; }
.meter > i.warn { background: repeating-linear-gradient(90deg, var(--warning) 0 6px, transparent 6px 9px); }
.meter > i.bad { background: repeating-linear-gradient(90deg, var(--danger) 0 6px, transparent 6px 9px); }
.meter > i.ok { background: repeating-linear-gradient(90deg, var(--success) 0 6px, transparent 6px 9px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.mini-stats.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mini-stats .soft { padding: var(--s3) var(--s4); background: var(--surface-2); border-radius: var(--radius-sm); }
.mini-stats .k { font-size: var(--fs-xs); color: var(--ink-3); }
.mini-stats .v { font-family: var(--font-title); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }
.code-block { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--ink-900); color: #F4F6FB; margin: var(--s1) 0 var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius); overflow: auto; line-height: 1.55; }
/* SeenPact lockup (Components/Lockup.razor): mark + live-text wordmark. --lockup-size = mark px, set inline by the component;
   wordmark 1.07× and gap .28× the mark follow the approved brand/seenpact-logo.svg proportions. */
.lockup { display: inline-flex; align-items: flex-start; gap: calc(var(--lockup-size, 32px) * .28); color: inherit; text-decoration: none; }
.lockup > .brand-mark { flex: none; margin-top: calc(var(--lockup-size, 32px) * .035); }
.lockup-text { display: flex; flex-direction: column; min-width: 0; }
.lockup-word { font-family: var(--font-title); font-weight: 700; font-size: calc(var(--lockup-size, 32px) * 1.07); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.lockup-seen { color: var(--ink-900); }
.lockup-pact { color: var(--trust); }
.lockup-edition { font-weight: 500; color: var(--ink-3); margin-left: .26em; }
.lockup-sub { display: block; font-family: var(--font-body); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-top: 5px; line-height: 1.2; }
.lockup-dark .lockup-seen { color: #fff; }
.lockup-dark .lockup-pact { color: var(--accent-on-ink); }
.lockup-dark .lockup-edition { color: rgba(244,246,251,.72); }
.lockup-dark .lockup-sub { color: rgba(244,246,251,.62); }
.lockup-mono .lockup-seen, .lockup-mono .lockup-pact { color: currentColor; }
.lockup-mono .lockup-edition { color: currentColor; opacity: .7; }
.subnav-foot .lockup-sub { margin-top: 4px; }
.donut-title { text-align: center; }
.donut-title .v { font-family: var(--font-title); font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.heat { display: grid; grid-template-columns: 52px repeat(24, 1fr); gap: var(--s1); font-size: .6875rem; }
.heat .c { aspect-ratio: 1; border-radius: 3px; }
.ext-sm { width: 30px !important; height: 34px !important; border-radius: 6px !important; font-size: .625rem !important; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); min-height: 56px; }
.topbar-inner .vsep { height: 20px; align-self: center; margin: 0 var(--s2); }
.pop.pop-rail { left: calc(100% + var(--s2)); bottom: 0; }
.pop-user { padding: var(--s2) var(--s3) var(--s3); }
.profile-head .avatar { box-shadow: 0 0 0 4px var(--surface); }
.profile-head > * { padding-bottom: var(--s1); }
.pre-rail .sk-logo { width: 38px; height: 38px; border-radius: var(--radius); margin-bottom: var(--s4); }
.pre-card .sk-block { margin-top: var(--s3); }
.chart-foot .v.ok { color: var(--success); } .chart-foot .v.warn { color: var(--warning-ink); } .chart-foot .v.bad { color: var(--danger); } .chart-foot .v.trust { color: var(--trust); }
@media (max-width: 640px) { .form-grid, .mini-stats.cols-4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ KPI / stat (minimal) */
.stat { display: flex; flex-direction: column; gap: 6px; min-height: 112px; position: relative; overflow: hidden; }
.stat .label { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); display: flex; align-items: center; justify-content: space-between; letter-spacing: 0; text-transform: none; }
.stat .value { font-family: var(--font-title); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .foot { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); color: var(--ink-3); margin-top: auto; }
.stat .delta { font-weight: 600; display: inline-flex; align-items: center; gap: 2px; padding: 0; background: transparent; }
.delta.up { color: var(--success); } .delta.down { color: var(--danger); } .delta.flat { color: var(--ink-3); }
.stat .delta .rzi { font-size: .875rem; }
.stat .spark { position: absolute; right: 0; bottom: 0; width: 40%; height: 44px; }
.stat-icon { display: none; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-radius: var(--radius); }
.kpi-row > .stat { border-radius: 0; border-right: 1px solid var(--line); background: transparent; }
.kpi-row > .stat:last-child { border-right: none; }
.kpi-row > .stat .spark { display: none; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; padding: var(--s7); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s7); align-items: center; }
.hero h1 { font-size: 1.625rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; }
.hero h1 em, .glass-ink em { font-style: normal; color: var(--accent-on-ink); }
.hero .live { margin-bottom: var(--s2); color: var(--accent-on-ink); }
.hero p { max-width: 52ch; }
.hero.single { grid-template-columns: 1fr; }
.glass-ink .chip { background: rgba(255,255,255,.08); color: #fff; }
.glass-ink .rz-button.rz-variant-text { color: #fff; } .glass-ink .rz-button.rz-variant-text:hover { background: rgba(255,255,255,.1); color: #fff; }
.hero p { font-size: var(--fs-md); line-height: 1.6; }
.hero .kpi-strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.hero .kpi { padding: var(--s3) var(--s4); border-left: 1px solid rgba(255,255,255,.12); }
.hero .kpi:first-child { border-left: none; padding-left: 0; }
.hero .kpi .v { font-family: var(--font-title); font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.hero .kpi .l { font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(244,246,251,.6); margin-top: 4px; font-weight: 500; }
.greeting { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin: 0 0 var(--s5); }
.greeting h1 { font-size: 1.5rem; }
.greeting .date { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; margin-bottom: 4px; }
.quick { display: flex; gap: var(--s2); flex-wrap: wrap; }
.quick a { display: inline-flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s3); border-radius: 8px; background: var(--surface); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.quick a:hover { background: var(--accent-soft); color: var(--accent-deep); }
.quick a .rzi { font-size: 1.125rem; }
.live { display: inline-flex; align-items: center; gap: var(--s2); }
.live i { width: 7px; height: 7px; border-radius: 999px; background: var(--success); }

/* ------------------------------------------------------------------ badges / status */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: .6875rem; font-weight: 600; letter-spacing: 0; white-space: nowrap; line-height: 1; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill.success { color: var(--success); background: var(--verified-soft); }
.pill.warning { color: var(--warning-ink); background: var(--caution-soft); }
.pill.danger { color: var(--breach-ink); background: var(--breach-soft); }
.pill.info { color: var(--info); background: var(--signal-soft); }
.pill.neutral { color: var(--ink-2); background: var(--ink-050); }
.pill.accent { color: var(--accent-deep); background: var(--accent-soft); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 500; background: var(--ink-050); color: var(--ink-2); line-height: 1; }
.method { font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.method.GET { background: var(--signal-soft); color: var(--signal); }
.method.POST { background: var(--verified-soft); color: var(--success); }
.method.PUT { background: var(--caution-soft); color: var(--warning-ink); }
.method.DELETE { background: var(--breach-soft); color: var(--breach-ink); }
.status-code { font-family: var(--font-mono); font-weight: 600; }
.status-code.s2 { color: var(--success); } .status-code.s4 { color: var(--warning-ink); } .status-code.s5 { color: var(--danger); }

/* ------------------------------------------------------------------ meters: dashed track + dashed fill */
.meter { height: 6px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--ink-100) 0 6px, transparent 6px 9px); overflow: hidden; position: relative; }
.meter > i { display: block; height: 100%; border-radius: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 9px); }
.meter.solid { background: var(--ink-050); border-radius: 999px; }
.meter.solid > i { background: var(--accent); border-radius: 999px; }
.steps { display: inline-flex; gap: 3px; }
.steps i { width: 14px; height: 6px; border-radius: 2px; background: var(--ink-100); display: block; }
.steps i.on { background: var(--accent); }
.steps i.warn { background: var(--warning); }
.steps i.bad { background: var(--danger); }
.rz-progressbar { background: var(--ink-050); }
.rz-progressbar .rz-progressbar-value { background: var(--accent); }
.rz-slider .rz-slider-range { background: var(--accent); }
.rz-slider .rz-slider-handle { border: 2px solid var(--accent); background: #fff; }

/* ------------------------------------------------------------------ inputs / buttons — consistent box model */
.rz-textbox, .rz-textarea, .rz-numeric, .rz-dropdown, .rz-datepicker, .rz-multiselect, .rz-autocomplete, .rz-numeric input, .rz-datepicker input {
  font-family: var(--font-body); font-size: var(--fs-md); color: var(--ink);
}
.rz-textbox, .rz-numeric, .rz-dropdown, .rz-datepicker, .rz-multiselect, .rz-autocomplete { min-height: var(--control-h); border-radius: 8px; }
.rz-textbox, .rz-datepicker input, .rz-numeric input, .rz-autocomplete input { padding: 0 var(--s3); height: var(--control-h); }
.rz-textarea { padding: var(--s2) var(--s3); line-height: 1.5; }
.rz-dropdown .rz-dropdown-label { padding: 0 var(--s3); line-height: calc(var(--control-h) - 2px); font-size: var(--fs-md); }
.rz-dropdown .rz-dropdown-trigger { width: 32px; }
.rz-dropdown .rz-dropdown-trigger-icon, .rz-numeric-button, .rz-datepicker-trigger { color: var(--ink-4); }
.rz-dropdown-clear-icon { color: var(--ink-4); }
.rz-input-sm, .rz-textbox.rz-input-sm, .rz-dropdown.rz-input-sm { min-height: var(--control-h-sm); height: var(--control-h-sm); font-size: var(--fs-sm); }
.rz-textbox::placeholder, .rz-textarea::placeholder, .rz-dropdown .rz-placeholder { color: var(--ink-4); }
.rz-chkbox-box { border-radius: 4px; border-color: var(--line-strong); }
.rz-chkbox-box.rz-state-active { background: var(--accent); border-color: var(--accent); }
.rz-switch { width: 36px; min-width: 36px; height: 20px; }
.rz-switch .rz-switch-circle:before { width: 14px; height: 14px; inset-inline-start: 3px; margin-block-start: -7px; }
.rz-switch.rz-switch-checked .rz-switch-circle:before { transform: translateX(16px); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.field label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.field .rz-textbox, .field .rz-dropdown, .field .rz-numeric, .field .rz-datepicker, .field .rz-textarea { width: 100%; }

.rz-button { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; height: var(--control-h); padding: 0 var(--s4); border-radius: 8px; gap: 6px; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
.rz-button .rz-button-box { display: inline-flex; align-items: center; gap: 6px; }
.rz-button .rz-button-text { line-height: 1; }
.rz-button.rz-button-sm { height: var(--control-h-sm); padding: 0 var(--s3); font-size: var(--fs-xs); }
.rz-button.rz-button-xs { height: 26px; padding: 0 var(--s2); font-size: .6875rem; }
.rz-button.rz-button-lg { height: 44px; padding: 0 var(--s5); font-size: var(--fs-md); }
.rz-button .rz-button-icon-left, .rz-button .rzi { font-size: 1.125rem; margin: 0; }
.rz-button.rz-button-sm .rzi { font-size: 1rem; }
.rz-button.rz-button-icon-only { width: var(--control-h); padding: 0; }
.rz-button.rz-button-sm.rz-button-icon-only { width: var(--control-h-sm); }
.rz-button.rz-button-xs.rz-button-icon-only { width: 26px; }
.rz-button.rz-primary { background: var(--accent); color: #fff; }
.rz-button.rz-primary:hover { background: var(--accent-deep); }
.rz-button.rz-variant-outlined { border: 1px solid var(--line-strong); background: transparent; color: var(--ink); }
.rz-button.rz-variant-outlined.rz-danger { color: var(--danger); border-color: var(--breach-soft); }
.rz-button.rz-variant-text { color: var(--ink-2); background: transparent; }
.rz-button.rz-variant-text:hover { background: var(--surface-2); color: var(--ink); }
.rz-button.rz-variant-flat.rz-light, .rz-button.rz-variant-flat.rz-base { background: var(--surface-2); border: none; color: var(--ink); }
.rz-button.rz-variant-flat.rz-light:hover { background: var(--ink-100); }
.rz-button.rz-success { background: var(--success); }
.rz-button.rz-danger.rz-variant-filled { background: var(--danger); }
.rz-selectbar { background: var(--surface-2); border: none; padding: 3px; border-radius: 8px; display: inline-flex; gap: 2px; --rz-selectbar-border: none; --rz-selectbar-selected-border: none; }
.rz-selectbar .rz-button, .rz-selectbar.rz-selectbar-horizontal .rz-button:not(:first-child) { border: none; outline: none; margin-inline-start: 0; border-radius: 6px; background: transparent; height: 30px; padding: 0 var(--s3); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); }
.rz-selectbar .rz-button.rz-button-sm { height: 28px; }
.rz-selectbar .rz-state-active { background: #fff !important; color: var(--ink) !important; font-weight: 600; box-shadow: 0 1px 2px rgba(11,18,32,.08); outline: none; }

/* ------------------------------------------------------------------ dropdown panels & popups */
.rz-dropdown-panel, .rz-navigation-menu, .rz-context-menu, .rz-overlaypanel, .rz-datepicker-popup-container, .rz-lookup-panel,
.rz-autocomplete-panel, .rz-multiselect-panel, .rz-splitbutton-menu {
  background: var(--popup) !important; border: none; outline: none; border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 16px 32px -18px rgba(11,18,32,.3); padding: var(--s1) 0;
}
.rz-dropdown-items { padding: 0; margin: 0; }
.rz-dropdown-item { border-bottom: 1px solid var(--line); border-radius: 0 !important; padding: 10px var(--s4); font-size: var(--fs-md); color: var(--ink-2); line-height: 1.3; }
.rz-dropdown-item:last-child { border-bottom: none; }
.rz-dropdown-item.rz-state-highlight, .rz-dropdown-item:hover { background: var(--surface-2); color: var(--ink); }
.rz-dropdown-item.rz-state-highlight { box-shadow: inset 2px 0 0 var(--accent); }
.rz-dropdown-filter-container { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.rz-dropdown-filter-container .rz-inputtext { height: var(--control-h-sm); font-size: var(--fs-sm); }
.rz-multiselect-header { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.rz-datepicker-popup-container .rz-calendar, .rz-datepicker-inline-container .rz-calendar { padding: var(--s3); }

/* ------------------------------------------------------------------ Radzen DataGrid */
.grid-card { padding: 0; overflow: hidden; }
.grid-card .card-head { margin: 0; }
.grid-card .rz-data-grid { border-radius: 0; }
.rz-data-grid, .rz-datatable { background: transparent; border: none; font-size: var(--fs-sm); --rz-grid-header-font-size: .6875rem; }
.rz-grid-table thead th { background: var(--surface-2); vertical-align: middle; }
.rz-grid-table thead th .rz-column-title, .rz-grid-table thead th .rz-column-title-content { text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.rz-grid-table thead tr:first-child th { border-bottom: none; }
.rz-grid-table td, .rz-grid-table th { border-left: none !important; border-right: none !important; }
.rz-grid-table td { border-color: var(--line); vertical-align: middle; }
.rz-grid-table td .rz-cell-data { line-height: 1.35; }
.rz-data-grid .rz-grid-table tbody tr:last-child > td { border-bottom: 1px solid var(--line); }
.rz-grid-table .rz-cell-data { color: var(--ink); }
.rz-grid-filter-icon, .rz-sortable-column-icon { color: var(--ink-4); }
.rz-data-grid .rz-cell-filter { padding: 0 var(--s3) var(--s3); background: var(--surface-2); vertical-align: middle; }
.rz-cell-filter .rz-grid-filter-icon, .rz-cell-filter > .rz-cell-filter-content > .rz-button, .rz-cell-filter .rz-cell-filter-clear { display: none; }
.rz-cell-filter .rz-cell-filter-label { height: var(--control-h-sm) !important; display: block; }
.rz-cell-filter-label > .rz-textbox, .rz-cell-filter-label > .rz-numeric, .rz-cell-filter-label > .rz-dropdown, .rz-cell-filter-label > .rz-datepicker:not(.rz-datepicker-inline), .rz-cell-filter-label > .rz-numeric > input, .rz-cell-filter-label > .rz-datepicker:not(.rz-datepicker-inline) > input {
  height: var(--control-h-sm); min-height: var(--control-h-sm); font-size: var(--fs-sm); border-radius: 6px; background: #fff; border: 1px solid transparent; box-shadow: none; width: 100%; padding: 0 var(--s2);
}
.rz-cell-filter-label > .rz-dropdown .rz-dropdown-label { line-height: 30px; padding: 0 var(--s2); font-size: var(--fs-sm); }
.rz-cell-filter .rz-overlaypanel .rz-datepicker, .rz-cell-filter .rz-overlaypanel .rz-dropdown, .rz-cell-filter .rz-overlaypanel .rz-numeric { height: auto; min-height: 0; width: auto; }
.rz-cell-filter-label > .rz-button.rz-button-icon-only { width: 30px; height: 30px; background: #fff; border-radius: 6px; color: var(--ink-4); }
.rz-cell-filter .rz-textbox:focus, .rz-cell-filter .rz-numeric:focus-within, .rz-cell-filter .rz-dropdown:focus-within { border-color: var(--accent); }
.rz-cell-filter .rz-cell-filter-content { display: flex; align-items: center; gap: 4px; }
.rz-cell-filter-label > .rz-numeric .rz-numeric-button { display: none; }
.rz-cell-filter input::placeholder { color: transparent; }
.rz-cell-filter .rz-dropdown-label.rz-placeholder, .rz-cell-filter .rz-dropdown .rz-placeholder { color: var(--ink-4); }
.rz-data-grid .rz-data-grid-data { overflow-x: auto; }
.rz-datatable-reflow .rz-data-row > td > .rz-column-title { color: var(--ink-3); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.rz-grid-table tr.rz-expanded-row-content > td { padding: var(--s3) var(--s4) var(--s4); background: var(--surface-2); }
.rz-expanded-row-template { background: transparent; padding: 0; border: none; }
.rz-row-toggler { color: var(--ink-4); }
.grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); }
.grid-card .grid-toolbar { margin: 0; }
.grid-summary { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); color: var(--ink-3); }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-deep); font-size: var(--fs-xs); font-weight: 500; }
.filter-chip button { border: none; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; padding: 0; }
.filter-chip button:hover { background: rgba(255,255,255,.7); }
.filter-chip .rzi { font-size: .875rem; }
.search-wrap { position: relative; }
.search-wrap .rzi { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-4); font-size: 1.125rem; pointer-events: none; z-index: 1; }
.search-wrap .rz-textbox { padding-left: 36px; }

/* pager */
.rz-pager { background: transparent; border: none; border-top: 1px solid var(--line); padding: var(--s2) var(--s5); font-size: var(--fs-xs); color: var(--ink-3); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; min-height: 48px; }
.rz-pager .rz-pager-summary { color: var(--ink-3); font-size: var(--fs-xs); margin-right: auto; order: -1; }
.rz-pager .rz-pager-pages { display: inline-flex; gap: 2px; margin: 0; padding: 0; list-style: none; align-items: center; }
.rz-pager .rz-pager-item { display: inline-flex; }
.rz-pager .rz-pager-element { width: 30px; height: 30px; min-width: 30px; min-height: 30px; border-radius: 6px; border: none; background: transparent; color: var(--ink-2); font-weight: 500; display: inline-grid; place-items: center; font-family: var(--font-body); font-size: var(--fs-xs); cursor: pointer; padding: 0; }
.rz-pager .rz-pager-element:hover:not(.rz-state-disabled) { background: var(--surface-2); color: var(--ink); }
.rz-pager .rz-pager-element.rz-state-active, .rz-pager .rz-pager-page.rz-state-active { background: var(--ink-900) !important; color: #fff !important; font-weight: 600; }
.rz-pager .rz-pager-element.rz-state-disabled { opacity: .35; cursor: default; }
.rz-pager .rz-pager-first, .rz-pager .rz-pager-last { display: none; }
.rz-pager .rz-pager-icon { font-size: 1rem; }
.rz-pager .rz-dropdown { height: 30px; min-height: 30px; font-size: var(--fs-xs); background: var(--surface-2); border: none; border-radius: 6px; }
.rz-pager .rz-dropdown .rz-dropdown-label { line-height: 30px; padding: 0 var(--s2); font-size: var(--fs-xs); }
.rz-pager .rz-pagesize-text { font-size: var(--fs-xs); color: var(--ink-3); }

/* ------------------------------------------------------------------ tabs — pro */
.rz-tabview { --tab-h: 40px; }
.rz-tabview .rz-tabview-nav { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line); background: transparent; padding: 0; margin: 0; }
.rz-tabview .rz-tabview-nav li, .rz-tabview.rz-tabview-top > .rz-tabview-nav li { margin: 0; border: none; background: transparent; }
.rz-tabview .rz-tabview-nav li button { display: inline-flex; align-items: center; gap: var(--s2); height: var(--tab-h); padding: 0 var(--s3); border-radius: 0; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-3); background: transparent; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.rz-tabview .rz-tabview-nav li button .rz-tabview-icon, .rz-tabview .rz-tabview-nav li button .rzi { font-size: 1.125rem; color: var(--ink-4); }
.rz-tabview .rz-tabview-nav li button:hover { color: var(--ink); background: transparent; }
.rz-tabview .rz-tabview-nav li.rz-tabview-selected button { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; background: transparent; }
.rz-tabview .rz-tabview-nav li.rz-tabview-selected button .rz-tabview-icon { color: var(--accent); }
.rz-tabview .rz-tabview-nav li button .rz-tabview-title { line-height: 1; }
.rz-tabview .rz-tabview-nav li.rz-state-focused button { outline: none; }
.rz-tabview-panel, .rz-tabview .rz-tabview-panels { border: none; background: transparent; padding: var(--s5) 0 0; }
.rz-tabview.rz-tabview-pills .rz-tabview-nav { border: none; background: var(--surface-2); padding: 3px; border-radius: 8px; display: inline-flex; gap: 2px; }
.rz-tabview.rz-tabview-pills .rz-tabview-nav li button { height: 30px; border-radius: 6px; border: none; margin: 0; padding: 0 var(--s3); font-size: var(--fs-xs); }
.rz-tabview.rz-tabview-pills .rz-tabview-nav li.rz-tabview-selected button { background: #fff; box-shadow: 0 1px 2px rgba(11,18,32,.08); }
/* custom tab strip (used inside cards) */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line); }
.tabs button { display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s3); border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--ink-3); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.tabs button .rzi { font-size: 1.125rem; color: var(--ink-4); }
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tabs button.active .rzi { color: var(--accent); }
.tabs button .tab-count { font-size: .6875rem; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: var(--ink-050); color: var(--ink-3); }
.tabs button.active .tab-count { background: var(--accent-soft); color: var(--accent-deep); }
.tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { white-space: nowrap; flex: none; }
.card-head { flex-wrap: wrap; row-gap: var(--s2); }
.card-head .tabs { border-bottom: none; align-self: stretch; margin: calc(-1 * var(--s4)) 0; }
.card-head .tabs button { height: 56px; }

/* ------------------------------------------------------------------ toast */
.rz-notification { top: auto !important; bottom: var(--s5) !important; right: var(--s5) !important; width: 360px; }
.rz-notification-item-wrapper { width: 100%; min-width: 0; margin: var(--s2) 0; background: transparent; }
.rz-notification-item { background: #fff !important; color: var(--ink) !important; border: none; border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 16px 32px -18px rgba(11,18,32,.3); padding: var(--s3) var(--s4) var(--s3) var(--s4); position: relative; overflow: hidden; display: flex; gap: var(--s3); align-items: flex-start; }
.rz-notification-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink-300); }
.rz-notification-success .rz-notification-item::before { background: var(--success); }
.rz-notification-error .rz-notification-item::before { background: var(--danger); }
.rz-notification-warn .rz-notification-item::before { background: var(--warning); }
.rz-notification-info .rz-notification-item::before { background: var(--accent); }
.rz-notification-item .rz-notification-title { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--ink); line-height: 1.3; }
.rz-notification-item .rz-notification-content, .rz-notification-item .rz-notification-message { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.4; margin-top: 2px; }
.rz-notification-item .rz-notification-close, .rz-notification-item .rz-notification-close .rzi { color: var(--ink-4); }
.rz-notification-item .rz-notification-icon { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); font-size: 1rem; flex: none; }
.rz-notification-success .rz-notification-icon { color: var(--success); background: var(--verified-soft); }
.rz-notification-error .rz-notification-icon { color: var(--danger); background: var(--breach-soft); }
.rz-notification-warn .rz-notification-icon { color: var(--warning-ink); background: var(--caution-soft); }
.rz-notification-info .rz-notification-icon { color: var(--accent-deep); background: var(--accent-soft); }

/* ------------------------------------------------------------------ tooltips */
.rz-tooltip-content, .rz-chart-tooltip-content { background: #fff !important; color: var(--ink) !important; border-radius: 8px; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(11,18,32,.3); font-size: var(--fs-xs); padding: var(--s2) var(--s3); border: none; }
.rz-tooltip, .rz-chart-tooltip { background: transparent; padding: 0; box-shadow: none; }
.rz-chart-tooltip .rz-chart-tooltip-title, .rz-chart-tooltip-title { font-weight: 600; color: var(--ink-3); font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; }
.rz-chart-tooltip .rz-chart-tooltip-item, .rz-chart-tooltip-item { color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-sm); }
.rz-tooltip .rz-top-tooltip-content:after, .rz-tooltip .rz-bottom-tooltip-content:after, .rz-tooltip .rz-left-tooltip-content:after, .rz-tooltip .rz-right-tooltip-content:after, .rz-chart-tooltip .rz-chart-tooltip-content:before, .rz-chart-tooltip .rz-chart-tooltip-content:after { display: none; }

/* ------------------------------------------------------------------ dialog (Radzen, fallback) */
.rz-dialog { background: #fff; border: none; }
.rz-dialog-titlebar { background: transparent; padding: var(--s4) var(--s5) var(--s3); border-bottom: 1px solid var(--line); }
.rz-dialog-title { font-family: var(--font-title); font-size: 1rem; font-weight: 600; }
.rz-dialog-content { padding: var(--s5); }
.rz-dialog-wrapper { background: rgba(11,18,32,.35); }

/* ------------------------------------------------------------------ timeline / lists / legends */
.rz-timeline .rz-timeline-content-end, .rz-timeline .rz-timeline-content-start { border: none; }
.card .rz-timeline { margin-left: calc(-1 * var(--s2)); }
.tl-dot .rzi { font-size: 1rem; }
.tl-item { padding: 2px 0 var(--s4); }
.tl-item .who { font-weight: 600; }
.tl-item .when { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.tl-dot { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); }
.tl-dot.success { color: var(--success); background: var(--verified-soft); }
.tl-dot.danger { color: var(--danger); background: var(--breach-soft); }
.tl-dot.warning { color: var(--warning-ink); background: var(--caution-soft); }
.tl-dot.info { color: var(--info); background: var(--signal-soft); }
.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: none; padding-bottom: 0; }
.card .list-row:first-child { padding-top: 0; }
.list-row .title { font-weight: 600; font-size: var(--fs-sm); }
.list-row .sub { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.legend { display: flex; flex-direction: column; }
.legend-row { display: flex; align-items: center; gap: var(--s3); padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.legend-row:last-child { border-bottom: none; }
.legend-row .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-row .v { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); }
.legend-row .p { color: var(--ink-3); font-size: var(--fs-xs); width: 44px; text-align: right; }
.chart-foot { display: flex; gap: var(--s6); padding-top: var(--s4); margin-top: var(--s3); border-top: 1px solid var(--line); flex-wrap: wrap; }
.chart-foot .k { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.chart-foot .v { font-family: var(--font-title); font-size: 1rem; font-weight: 600; margin-top: 2px; }
.rz-chart .rz-legend-item { font-size: var(--fs-xs); }
.rz-chart .rz-tick-text { font-size: .6875rem; fill: var(--ink-3); }

/* ------------------------------------------------------------------ notification drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(11,18,32,.3); z-index: 90; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 91; display: flex; flex-direction: column; background: #fff; border-left: 1px solid var(--line); border-radius: 0; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); min-height: var(--topbar-h); }
.drawer-body { overflow: auto; padding: 0 var(--s5) var(--s5); flex: 1; }
.notif { display: flex; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.notif:last-child { border-bottom: none; }
.notif .ico { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.notif .ico.success { background: var(--verified-soft); color: var(--success); }
.notif .ico.warning { background: var(--caution-soft); color: var(--warning-ink); }
.notif .ico.danger { background: var(--breach-soft); color: var(--danger); }
.notif .ico.info { background: var(--signal-soft); color: var(--info); }
.notif .t { font-weight: 600; font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--s2); }
.notif .b { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; line-height: 1.45; }
.notif .w { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 4px; }
.notif.unread .t::after { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }

/* ------------------------------------------------------------------ modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(11,18,32,.38); z-index: 200; display: grid; place-items: center; padding: var(--s4); }
.modal { width: 100%; background: #fff; border-radius: 12px; box-shadow: 0 30px 60px -24px rgba(11,18,32,.45); display: flex; flex-direction: column; max-height: calc(100vh - 2rem); overflow: hidden; }
.modal-sm { max-width: 440px; } .modal-md { max-width: 560px; } .modal-lg { max-width: 760px; } .modal-xl { max-width: 980px; }
.modal-head { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px solid var(--line); }
.modal-head .ico { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); flex: none; }
.modal-head h3 { font-size: 1rem; }
.modal-head .sub { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.modal-head .icon-btn { margin-left: auto; margin-top: -4px; margin-right: -6px; }
.modal-body { padding: var(--s5); overflow: auto; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); background: var(--surface-2); min-height: 56px; }
.modal-foot .left { margin-right: auto; font-size: var(--fs-xs); color: var(--ink-3); }

/* ------------------------------------------------------------------ skeleton (static) */
.sk { background: var(--ink-100); border-radius: 6px; }
.sk-text { height: 11px; margin: 6px 0; }
.sk-title { height: 20px; width: 40%; }
.sk-circle { border-radius: 999px; }
.sk-block { height: 120px; border-radius: 10px; }
.sk-row { display: flex; gap: var(--s4); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.fade-in, .reveal, .stagger > * { opacity: 1; }

/* ------------------------------------------------------------------ auth */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-side { padding: var(--s8); display: flex; flex-direction: column; justify-content: space-between; margin: 0; border-radius: 0; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: var(--s7); background: var(--bg); }
.auth-card { width: 100%; max-width: 420px; padding: var(--s7); }
.auth-card h1 { font-size: 1.5rem; margin-bottom: 4px; }
.otp { display: flex; gap: var(--s2); }
.otp input { width: 48px; height: 54px; text-align: center; font-family: var(--font-mono); font-size: 1.25rem; border-radius: 8px; border: none; background: var(--surface-2); }
.otp input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* ------------------------------------------------------------------ misc sections */
.pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.price-card { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6); }
.price-card.hl { box-shadow: 0 0 0 2px var(--accent) inset; }
.price-card .price { font-family: var(--font-title); font-size: 2rem; font-weight: 600; }
.price-card .price small { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-3); font-weight: 500; }
.price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; font-size: var(--fs-sm); }
.price-card li { display: flex; gap: var(--s2); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.price-card li:last-child { border-bottom: none; }
.price-card li .rzi { color: var(--success); font-size: 1rem; }
.product { display: flex; flex-direction: column; gap: var(--s3); }
.product .thumb { height: 110px; border-radius: 10px; display: grid; place-items: center; font-size: 2.6rem; background: var(--surface-2); }
.file { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); }
.file .ext { width: 40px; height: 48px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-mono); font-size: .625rem; font-weight: 600; color: #fff; }
.chat { display: grid; grid-template-columns: 320px 1fr; min-height: 640px; overflow: hidden; }
.chat-list { border-right: 1px solid var(--line); overflow: auto; }
.chat-thread { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); cursor: pointer; border-bottom: 1px solid var(--line); }
.chat-thread:hover, .chat-thread.active { background: var(--surface-2); }
.chat-pane { display: flex; flex-direction: column; }
.chat-msgs { flex: 1; overflow: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.bubble { max-width: 70%; padding: var(--s2) var(--s3); border-radius: 12px; font-size: var(--fs-sm); background: var(--surface-2); line-height: 1.45; }
.bubble.mine { align-self: flex-end; background: var(--accent); color: #fff; }
.bubble .t { font-size: .6875rem; color: var(--ink-3); margin-top: 4px; } .bubble.mine .t { color: #E1E8FC; }
.chat-input { display: flex; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.online { width: 8px; height: 8px; border-radius: 999px; background: var(--success); box-shadow: 0 0 0 2px #fff; }
.testimonial { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6); }
.testimonial q { font-family: var(--font-title); font-size: 1rem; line-height: 1.5; font-weight: 500; }
.stars { color: var(--warning-fill); letter-spacing: 1px; }
.faq details { border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::after { content: "+"; font-family: var(--font-title); font-size: 1.2rem; color: var(--ink-3); }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--ink-2); margin-top: var(--s2); font-size: var(--fs-sm); line-height: 1.6; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); padding: var(--s8) var(--s6); }
.empty .art { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.empty h3 { font-size: 1rem; }
.empty p { color: var(--ink-3); max-width: 38ch; font-size: var(--fs-sm); }
.errpage { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.errpage .code { font-family: var(--font-title); font-size: clamp(5rem, 16vw, 10rem); line-height: .9; font-weight: 600; letter-spacing: -.05em; color: var(--ink-250); }
.wizard { display: grid; grid-template-columns: 280px 1fr; gap: var(--s4); }
.wizard-nav .stepper-step { display: flex; gap: var(--s3); padding: var(--s3); border-radius: 10px; align-items: flex-start; }
.wizard-nav .stepper-step.active { background: var(--accent-soft); }
.stepper-n { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font-size: .6875rem; font-weight: 600; background: var(--ink-050); color: var(--ink-2); flex: none; }
.stepper-step.active .stepper-n { background: var(--accent); color: #fff; }
.stepper-step.done .stepper-n { background: var(--success); color: #fff; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); }
.calendar-grid .dow { font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 600; padding: var(--s2); text-align: center; background: var(--surface); }
.cal-day { min-height: 100px; padding: var(--s2); background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.cal-day.dim { background: var(--surface-2); color: var(--ink-3); } .cal-day.dim .d { color: var(--ink-4); }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day .d { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.cal-ev { font-size: .6875rem; font-weight: 500; color: #fff; padding: 2px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); padding: var(--s6) var(--s4); }
.kv { display: grid; grid-template-columns: 140px 1fr; row-gap: 0; column-gap: var(--s4); font-size: var(--fs-sm); }
.kv dt, .kv dd { padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; }
.kv dt { color: var(--ink-3); font-weight: 500; }
.invoice-doc { padding: var(--s7); }
.invoice-doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.invoice-doc th { text-align: left; font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 10px 0; border-bottom: 1px solid var(--line-strong); }
.invoice-doc td { padding: 12px 0; border-bottom: 1px solid var(--line); }
.invoice-doc td.r, .invoice-doc th.r { text-align: right; }
.totals { margin-left: auto; width: 280px; margin-top: var(--s4); }
.totals .row-between { padding: 6px 0; font-size: var(--fs-sm); }
.totals .grand { font-family: var(--font-title); font-size: 1.25rem; font-weight: 600; border-top: 1px solid var(--line-strong); margin-top: var(--s2); padding-top: var(--s3); }
.wallet-hero { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s4); }
.balance { font-family: var(--font-title); font-size: 2.75rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s4); }
.profile-cover { height: 140px; border-radius: 12px 12px 0 0; background: var(--ink-900); }
.profile-head { display: flex; align-items: flex-end; gap: var(--s5); padding: 0 var(--s6) var(--s5); margin-top: -40px; }
.ticket-priority { width: 8px; height: 8px; border-radius: 999px; display: inline-block; margin-right: 6px; }
.side-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--s4); }
.kanban { grid-template-columns: repeat(4, minmax(240px, 1fr)); overflow-x: auto; }
.rz-panel-menu { background: transparent; }
.rz-panel-menu .rz-navigation-item-link { border-radius: 8px; }
.brand-mark { display: grid; place-items: center; }
.theme-dots { display: none; }

/* ------------------------------------------------------------------ responsive */
.hero .kpi .v, .crumbs a, .crumbs .crumb { white-space: nowrap; }
@media (max-width: 1200px) {
  .hero { grid-template-columns: 1fr; gap: var(--s6); }
  .hero .kpi-strip { max-width: 560px; }
  .grid-4, .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-row > .stat:nth-child(2) { border-right: none; }
  .kpi-row > .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .pricing { grid-template-columns: repeat(2, 1fr); }
  .span-3, .span-4, .span-5, .span-7, .span-8, .span-9 { grid-column: span 6; }
  .kanban { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
  .gsearch { width: 240px; }
}
@media (max-width: 960px) {
  .shell, .shell.subnav-closed { grid-template-columns: 1fr; }
  .rail, .subnav { position: fixed; top: 0; bottom: 0; height: 100vh; transform: translateX(-110%); }
  .rail { left: 0; width: var(--rail-w); }
  .subnav { left: var(--rail-w); width: var(--subnav-w); visibility: visible !important; transform: translateX(calc(-100% - var(--rail-w))); }
  .shell.side-open .rail, .shell.side-open .subnav { transform: none; }
  .side-backdrop { display: block; position: fixed; inset: 0; background: rgba(11,18,32,.3); z-index: 54; }
  .side-toggle { display: grid; }
  [data-tip]::after { display: none; }
  .app-preloader { grid-template-columns: 1fr; } .pre-rail, .pre-sub { display: none; }
  .pre-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar-inner { padding: 0 var(--s4); }
  .page { padding: var(--s4) var(--s4) var(--s7); }
  .gsearch { width: 200px; max-width: 40vw; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: var(--s6); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .grid-12 > * { grid-column: span 12 !important; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .chat { grid-template-columns: 1fr; }
  .chat-list { max-height: 260px; border-right: none; border-bottom: 1px solid var(--line); }
  .wizard, .contact-grid, .side-layout, .wallet-hero { grid-template-columns: 1fr; }
  .cal-day { min-height: 64px; }
  .cal-ev { display: none; }
  .cal-day .dots { display: flex; gap: 2px; }
  .invoice-doc { padding: var(--s5); }
  .totals { width: 100%; }
}
@media (max-width: 640px) {
  .grid-4, .kpi-row { grid-template-columns: 1fr; }
  .kpi-row > .stat { border-right: none; border-bottom: 1px solid var(--line); }
  .kpi-row > .stat:last-child { border-bottom: none; }
  .pricing { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .stat .value { font-size: 1.5rem; }
  .hero .kpi-strip { grid-template-columns: 1fr; }
  .hero .kpi { border-left: none; border-top: 1px solid rgba(255,255,255,.12); padding-left: 0; }
  .pre-grid { grid-template-columns: 1fr; }
  .rz-notification { width: calc(100vw - 2rem); right: var(--s4) !important; }
  .gsearch { display: none; }
  .crumbs > *:not(.cur) { display: none; }
  .topbar-actions .rz-button .rz-button-text { display: none; }
  .topbar-actions .rz-button { padding-inline: var(--s2); }
  .rz-data-grid.rz-datatable-reflow .rz-grid-table tbody td .meter { width: 100%; }
}

#components-reconnect-modal { z-index: 1000; }

/* ------------------------------------------------------------------ KYC dashboards additions (foundation pass) */
a.stat-link { display: flex; color: inherit; }
a.stat-link:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.copy-chip { cursor: pointer; user-select: none; }
.copy-chip:hover { background: var(--ink-100); color: var(--ink); }
.copy-chip .rzi { font-size: .875rem; color: var(--ink-4); }
.copy-chip:hover .rzi { color: var(--ink-2); }
.json-viewer .code-block { margin: var(--s2) 0 0; }
.json-viewer .code-block.clamp { max-height: 200px; overflow: auto; }
.masked-field .mono { letter-spacing: .04em; }
.masked-field .hint { font-size: var(--fs-xs); color: var(--ink-4); display: inline-flex; align-items: center; gap: 4px; }
.masked-field .hint .rzi { font-size: .875rem; }
.funnel-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; }
.funnel-row .lbl { width: 160px; flex: none; font-size: var(--fs-sm); color: var(--ink-2); }
.funnel-row .meter { flex: 1; }
.funnel-row .val { width: 72px; text-align: right; font-family: var(--font-mono); font-size: var(--fs-sm); flex: none; }
.funnel-row .conv { width: 64px; text-align: right; font-size: var(--fs-xs); color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }
.totp-input input, input.totp-input { text-align: center; font-family: var(--font-mono); font-size: 1.25rem; letter-spacing: .35em; }
.auth-error { display: flex; gap: var(--s2); align-items: flex-start; background: var(--breach-soft); color: var(--breach-ink); border-radius: 8px; padding: var(--s3) var(--s4); font-size: var(--fs-sm); margin-bottom: var(--s4); }
.auth-error .rzi { font-size: 1.125rem; flex: none; }

/* ============================================================== form controls v2 — polish
   Radzen default-base positions/sizes controls purely from --rz-* variables (defined in :root
   above). These rules add what variables cannot express: spinner button chrome, radio dot,
   switch track colors, dropdown panel rounding, multiselect chips. */

/* numeric: two clearly separated spin buttons.
   The buttons render as `rz-numeric-button rz-button`, so the generic .rz-button sizing
   (height: var(--control-h), position, padding) wins over the base variables — pin the
   geometry explicitly with a higher-specificity selector. */
.rz-numeric { position: relative; }
.rz-numeric-button.rz-button, .rz-numeric-button {
  position: absolute; inset-inline-end: 4px; inset-inline-start: auto;
  width: 26px; min-width: 0; height: 14px; min-height: 0; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 5px; background: var(--white); color: var(--ink-3);
  cursor: pointer; line-height: 1; box-shadow: none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.rz-numeric-button.rz-numeric-up { inset-block-start: 3px; inset-block-end: auto; }
.rz-numeric-button.rz-numeric-down { inset-block-end: 3px; inset-block-start: auto; }
.rz-numeric-button .rzi { font-size: 13px; line-height: 1; }
.rz-numeric-button.rz-button:hover { background-color: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-soft); }
.rz-numeric-button.rz-button:active { background-color: var(--accent); color: #fff; border-color: var(--accent); }
.rz-numeric.rz-state-disabled .rz-numeric-button { border-color: transparent; cursor: default; }
.rz-numeric input[type=text], .rz-numeric input[type=number] { padding-inline-end: 38px; }

/* checkbox */
.rz-chkbox-box { background: var(--surface); transition: background-color .12s ease, border-color .12s ease; }
.rz-chkbox-box:hover:not(.rz-state-disabled):not(.rz-state-active) { border-color: var(--accent); }
.rz-chkbox-box .rzi { line-height: 1; display: inline-flex; align-items: center; justify-content: center; }

/* radio: filled brand dot */
.rz-radiobutton-box { background: var(--surface); transition: border-color .12s ease; }
.rz-radiobutton-box:hover:not(.rz-state-disabled) { border-color: var(--accent); }
.rz-radiobutton-box.rz-state-active { border-color: var(--accent); }
.rz-radiobutton-box .rzi { font-size: 0; background: var(--accent); border-radius: 50%; }

/* switch: track + knob */
.rz-switch { background: var(--ink-200); border-radius: 999px; border: none; transition: background-color .15s ease; }
.rz-switch:hover:not(.rz-state-disabled) { background: var(--ink-250); }
.rz-switch.rz-switch-checked, .rz-switch.rz-switch-checked:hover:not(.rz-state-disabled) { background: var(--accent); }
.rz-switch .rz-switch-circle:before { background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(11, 18, 32, .28); transition: transform .15s ease; }

/* dropdown / multiselect panels */
.rz-dropdown-panel, .rz-multiselect-panel, .rz-autocomplete-panel { border-radius: 10px; overflow: hidden; background: var(--popup); }
.rz-dropdown-item, .rz-multiselect-item { border-radius: 6px; }
.rz-multiselect-header { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.rz-multiselect-token { background: var(--accent-soft); color: var(--accent-deep); border-radius: 6px; padding: 2px var(--s2); font-size: var(--fs-sm); }
.rz-multiselect-token-icon { color: var(--accent-deep); }

/* pickers: quiet triggers */
.rz-datepicker-trigger { border: none; background: transparent; }
.rz-datepicker-trigger:hover { color: var(--accent); }