/* ============================================================
   Vukorix — App Stylesheet
   Design Pass 6 (2026-04-22): enterprise-premium direction.
   Palette: Tailwind slate + #2563EB brand blue, matching modern
   SaaS conventions (Stripe / Linear / Vercel).

   Token taxonomy:
     --brand-*    primary blue scale
     --slate-*    neutral scale (Tailwind slate)
     --success / --warning / --danger / --info — semantic intent
     --bg, --bg-card, --bg-elevated, --bg-subtle, --bg-input, --bg-muted
     --border, --border-strong
     --text-strong, --text, --text-muted, --text-subtle
     --sidebar-*   always-dark nav surface (both light + dark modes)
     --r-sm / md / lg / xl / pill   radii
     --sh-xs / sm / md / lg / xl    layered shadows
     --ring-*     focus rings

   Legacy tokens (--accent, --red*, --bg-card-hover, --radius, --shadow-sm,
   etc.) are kept as aliases pointing at the new system so existing
   components keep rendering while primitives migrate incrementally.

   Fonts: Inter (all UI text). Instrument Serif kept for marketing/public
   surfaces via `.text-display` utility — app chrome is Inter throughout.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif&display=swap');

/* ── Light Theme (default) ── */
:root {
    /* Brand */
    --brand-50:  #EFF6FF;
    --brand-100: #DBEAFE;
    --brand-200: #BFDBFE;
    --brand-500: #3B82F6;
    --brand-600: #2563EB;
    --brand-700: #1D4ED8;
    --brand-800: #1E40AF;

    /* Slate neutrals (Tailwind) */
    --slate-50:  #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;

    /* Semantic */
    --success:    #16A34A;
    --success-bg: #DCFCE7;
    --warning:    #D97706;
    --warning-bg: #FEF3C7;
    --danger:     #DC2626;
    --danger-bg:  #FEE2E2;
    --info:       #0369A1;
    --info-bg:    #DBEAFE;

    /* Surfaces */
    --bg:          var(--slate-50);
    --bg-card:     #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-subtle:   var(--slate-100);
    --bg-input:    #FFFFFF;
    --bg-muted:    var(--slate-100);

    /* Borders */
    --border:        var(--slate-200);
    --border-strong: var(--slate-300);

    /* Text */
    --text-strong:  var(--slate-900);
    --text:         var(--slate-700);
    --text-muted:   var(--slate-500);
    --text-subtle:  var(--slate-400);
    --text-on-brand:#FFFFFF;

    /* Sidebar — always-dark navy, both light and dark modes */
    --sidebar-bg:          #0B1220;
    --sidebar-bg-elevated: #111C33;
    --sidebar-border:      rgba(255,255,255,0.06);
    --sidebar-text:        #D4DAE6;
    --sidebar-text-muted:  #8490A7;
    --sidebar-text-subtle: #5B6983;
    --sidebar-active-bg:   rgba(59,130,246,0.16);
    --sidebar-active-text: #FFFFFF;
    --sidebar-hover-bg:    rgba(255,255,255,0.04);

    /* Typography */
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Radii */
    --r-sm:   6px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-xl:   16px;
    --r-pill: 999px;

    /* Shadows — layered, subtle (Linear/Stripe-like), slightly deeper for Wave 4 */
    --sh-xs: 0 1px 2px rgba(15,23,42,0.05);
    --sh-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.05);
    --sh-md: 0 4px 12px -2px rgba(15,23,42,0.08), 0 2px 4px -1px rgba(15,23,42,0.05);
    --sh-lg: 0 14px 28px -8px rgba(15,23,42,0.12), 0 4px 10px -2px rgba(15,23,42,0.06);
    --sh-xl: 0 28px 56px -12px rgba(15,23,42,0.18), 0 10px 20px -4px rgba(15,23,42,0.08);

    /* Focus rings */
    --ring-brand:  0 0 0 3px rgba(37,99,235,0.25);
    --ring-danger: 0 0 0 3px rgba(220,38,38,0.25);

    /* Layout */
    --sidebar-width: 248px;
    --topbar-height: 56px;

    /* ── Left-anchored workspace (Wave 5.2) ──
       Vukorix is a working surface, not a centred marketing column. Content
       anchors to the left after the sidebar with a disciplined gutter, then
       fills whatever width is available. Dashboards, list views, admin
       tables, and workflow surfaces all get real operational width.

       Individual narrow content (forms, settings panels) opts in to its own
       `max-width` — the shell doesn't impose one. */
    --content-pad-x: 40px;

    /* ── Legacy aliases — keep existing selectors working ── */
    --accent:           var(--brand-600);
    --accent-hover:     var(--brand-700);
    --accent-pressed:   var(--brand-800);
    --accent-fg:        var(--brand-600);
    --accent-bg-soft:   var(--brand-50);
    --accent-glow:      rgba(37,99,235,0.22);
    --accent-border:    rgba(37,99,235,0.30);
    --red:              var(--brand-600);
    --red-bright:       var(--brand-600);
    --red-dim:          var(--brand-50);
    --red-glow:         rgba(37,99,235,0.22);
    --bg-card-hover:    var(--slate-50);
    --border-light:     var(--slate-300);
    --text-dim:         var(--slate-400);
    --green:            var(--success);
    --green-dim:        var(--success-bg);
    --warning-dim:      var(--warning-bg);
    --danger-dim:       var(--danger-bg);
    --radius:           var(--r-md);
    --radius-lg:        var(--r-lg);
    --shadow-sm:        var(--sh-sm);
    --shadow-md:        var(--sh-md);
    --focus-bg:         #FFFFFF;
    --bg-secondary:     var(--slate-100);
}

/* ── Dark Theme (deep navy, premium enterprise) ── */
html.dark {
    --bg:          #0A0F1C;
    --bg-card:     #111827;
    --bg-elevated: #1A2236;
    --bg-subtle:   #0F1728;
    --bg-input:    #0F1728;
    --bg-muted:    #0F1728;

    --border:        #1F2A44;
    --border-strong: #2E3A5A;

    --text-strong: #F1F5F9;
    --text:        #CBD5E1;
    --text-muted:  #94A3B8;
    --text-subtle: #64748B;

    /* Brand holds up in dark without a separate value — brand-600 reads fine on dark navy */

    /* Shadows deepen */
    --sh-xs: 0 1px 2px rgba(0,0,0,0.35);
    --sh-sm: 0 1px 2px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.25);
    --sh-md: 0 4px 8px -2px rgba(0,0,0,0.4),  0 2px 4px -1px rgba(0,0,0,0.25);
    --sh-lg: 0 12px 24px -8px rgba(0,0,0,0.45), 0 4px 8px -2px rgba(0,0,0,0.3);
    --sh-xl: 0 24px 48px -12px rgba(0,0,0,0.5),  0 8px 16px -4px rgba(0,0,0,0.3);

    --focus-bg: rgba(0,0,0,0.6);

    /* Legacy dark aliases */
    --bg-card-hover: #1A2236;
    --border-light:  var(--border-strong);
    --text-dim:      var(--text-subtle);
    --bg-secondary:  var(--bg-subtle);
}

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

/* ── Global overflow discipline (Wave 5) ──
   Hard defence against horizontal scroll. Any page-level overflow is a
   bug — containers that *need* to scroll (tables, pipeline, long-text
   code blocks) opt in with their own `overflow-x: auto`. Nothing else
   should push the whole document sideways. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
}

/* Images and media never overflow their box */
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

/* Long unbroken strings (emails, URLs, tokens) can cause inline overflow —
   `overflow-wrap: anywhere` breaks them instead of pushing the layout.
   Scoped to common text holders so it doesn't disturb tabular/code blocks
   that expect to stay on one line. */
p, .vkx-feed-text, .vkx-timeline-head, .vkx-kv-row .v,
.vkx-page-header-subtitle, .product-card-subtitle, .vkx-signer-email {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Inline-style grids (there are plenty in inline style="display: grid")
   without min-width on their children can still overflow. This is a
   guardrail for the few remaining places we haven't refactored. */
.app-viewport [style*="display: grid"] > * { min-width: 0; }
.app-viewport [style*="display:grid"]  > * { min-width: 0; }

/* Tabular numerals on data-dense surfaces */
.data-table,
.stat-value,
.metric-value,
.product-card-meta,
code,
pre,
[class*="tabular"] {
    font-variant-numeric: tabular-nums;
}

::selection { background: var(--brand-100); color: var(--brand-700); }

a { color: var(--brand-600); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ── Typography scale (Design Pass 6)
   App chrome is Inter throughout — Instrument Serif retained only for
   marketing/public surfaces via the `.text-display` utility. Headings
   bold, tight letter-spacing, compact line-height. ── */
h1, h2, h3, h4, h5 {
    font-family: var(--font-body);
    color: var(--text-strong);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
h4 { font-size: 14px; font-weight: 600; letter-spacing: 0; }

.text-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }

.text-xs  { font-size: 11px; line-height: 1.4; }
.text-sm  { font-size: 12px; line-height: 1.5; }
.text-md  { font-size: 15px; line-height: 1.5; }
.text-lg  { font-size: 18px; line-height: 1.4; font-weight: 600; }
.text-xl  { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.text-2xl { font-size: 30px; line-height: 1.2;  font-weight: 700; letter-spacing: -0.02em; }

.text-strong { color: var(--text-strong); }
.text-muted  { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 18px; border-radius: var(--radius); font-family: var(--font-body);
    font-weight: 600; font-size: 14px; cursor: pointer; border: none;
    transition: all 0.25s; text-decoration: none;
    box-sizing: border-box; line-height: 1.3;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; transform: translateY(-1px); }
html.dark .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-outline { background: transparent; border: 1px solid var(--border-light); color: var(--text); }
.btn-outline:hover { background: var(--bg-card-hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-full { display: flex; width: 100%; text-align: center; }
.btn-lg { padding: 12px 26px; font-size: 15px; }
.btn-sm { padding: 6px 14px; font-size: 13px; }

/* ── Alerts ── */
.alert {
    padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px;
    font-size: 15px;
}
.alert-success { background: var(--green-dim); border: 1px solid rgba(22,163,74,0.2); color: var(--green); }
.alert-error { background: var(--danger-dim); border: 1px solid rgba(220,38,38,0.2); color: var(--danger); }
.alert-warning { background: var(--accent-bg-soft); border: 1px solid var(--accent-border); color: var(--accent-fg); }

html.dark .alert-success { border-color: rgba(40,200,100,0.3); }
html.dark .alert-error { border-color: rgba(220,60,60,0.3); }
html.dark .alert-warning { border-color: var(--accent-border); }

/* ── Forms ── */
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block; margin-bottom: 5px; font-size: 13px;
    font-weight: 500; color: var(--text-muted);
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%; padding: 9px 12px; font-size: 14px; font-family: var(--font-body);
    background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border-light); border-radius: var(--radius);
    outline: none; transition: border-color 0.2s, background 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--red); background: var(--focus-bg);
    box-shadow: 0 0 0 3px var(--red-dim);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-dim); }
.form-hint { display: block; font-size: 13px; margin-top: 5px; color: var(--text-dim); }
.form-hint-success { color: var(--green); }
.form-hint-warning { color: var(--red-bright); }

/* ══════════════════════════════════════════
   PUBLIC PAGES (terms, privacy, AUP, home, pricing, help)
   ══════════════════════════════════════════ */
.public-body {
    background: var(--bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Public Header ── */
.public-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 20;
}
.public-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}
.public-header .brand-name {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 4px;
    text-decoration: none;
}
.public-header .brand-name:hover {
    color: var(--red);
    text-decoration: none;
}

/* ── Public Nav ── */
.public-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}
.public-nav a {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.public-nav a:hover {
    color: var(--text);
    text-decoration: none;
}
.public-nav .btn { font-size: 14px; }

/* ── Public Footer ── */
.public-footer {
    border-top: 1px solid var(--border);
    padding: 24px 0;
    margin-top: auto;
    font-size: 14px;
    color: var(--text-dim);
}

/* ── Legal Content (terms, privacy, AUP) ── */
.legal-content h2 {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 36px 0 12px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin: 28px 0 10px;
}
.legal-content p {
    margin: 0 0 14px;
}
.legal-content ul,
.legal-content ol {
    margin: 0 0 14px;
    padding-left: 24px;
}
.legal-content li {
    margin-bottom: 6px;
}
.legal-content a {
    color: var(--red-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-content a:hover {
    color: var(--red);
}
.legal-content strong {
    color: var(--text);
    font-weight: 600;
}

/* ── Hero Section (Home) ── */
.hero {
    text-align: center;
    padding: 80px 20px 64px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.hero h1 {
    font-size: clamp(36px, 6vw, 56px);
    color: var(--text);
    margin-bottom: 16px;
}
.hero-sub {
    font-size: clamp(16px, 2.5vw, 20px);
    color: var(--text-muted);
    margin-bottom: 32px;
    line-height: 1.6;
}
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Feature Grid (Home) ── */
.features {
    padding: 64px 20px;
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: var(--shadow-sm);
}
.feature-card h3 {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}
.feature-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* ── Auth Layout ── */
.auth-body { background: var(--bg); }
.auth-container {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 40px 20px;
}
.auth-brand { text-align: center; margin-bottom: 32px; }
.auth-brand img { height: 52px; }
.auth-brand .brand-name {
    font-family: var(--font-body); font-size: 24px; font-weight: 800;
    color: var(--text); letter-spacing: 4px; text-decoration: none;
}
.auth-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 36px 36px 32px; width: 100%; max-width: 440px;
    box-shadow: var(--shadow-md);
}
/* Design Pass 6 alignment: auth headings use the body font (Inter) to match
   the rest of the authenticated app. The Instrument Serif display face is
   reserved for dashboard flagship headings only. */
.auth-card h1 {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    color: var(--text);
}
.auth-subtitle {
    color: var(--text-muted); margin-bottom: 24px; font-size: 14px;
    line-height: 1.55;
}

/* ── Auth page heading stack (Round 10) ──
   Premium eyebrow → headline → subtitle treatment shared by login,
   register, forgot/reset password, and the 2FA flow. The eyebrow uses
   uppercase brand-tinted small caps as a section label; the headline
   is a tighter, bolder Inter than the old bare h1; the subtitle keeps
   its existing tone but loses its standalone bottom margin since the
   stack itself owns the gap to the form below. */
.auth-heading-stack {
    margin-bottom: 24px;
}
.auth-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-600);
    margin-bottom: 8px;
}
.auth-heading-stack .auth-heading,
h1.auth-heading {
    font-family: var(--font-body);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
    line-height: 1.15;
    margin: 0 0 6px 0;
}
.auth-heading-stack .auth-subtitle {
    margin-bottom: 0;
}
@media (max-width: 540px) {
    .auth-heading-stack .auth-heading,
    h1.auth-heading { font-size: 26px; }
}
.auth-form { margin-bottom: 16px; }
.auth-form-hint {
    font-size: 12px; color: var(--text-muted); line-height: 1.55;
    margin: 4px 0 18px;
}
.auth-fine-print {
    text-align: center; margin-top: 18px; font-size: 12px;
    color: var(--text-muted); display: flex; align-items: center;
    justify-content: center; gap: 6px;
}
.auth-fine-print [class^="icon-"] { color: var(--text-subtle); font-size: 12px; }
.auth-foot-link {
    text-align: center; margin-top: 14px; font-size: 13px;
}
.auth-foot-link a { color: var(--text-muted); }
.auth-foot-link a:hover { color: var(--text); text-decoration: underline; }
.auth-skip-form { margin-top: 10px; }

/* ── Onboarding step indicator ── */
.auth-step-indicator {
    display: flex; gap: 6px; justify-content: center;
    margin-bottom: 20px;
}
.auth-step {
    width: 28px; height: 3px; border-radius: 2px;
    background: var(--border);
    transition: background 0.15s ease;
}
.auth-step.is-done { background: var(--brand-500); }
.auth-step.is-active { background: var(--brand-600); }

/* ── Onboarding info-card (card-setup step list) ── */
.auth-info-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--bg-muted, var(--bg-input));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 20px;
}
.auth-info-card-icon {
    flex-shrink: 0; width: 36px; height: 36px;
    border-radius: var(--radius);
    background: var(--brand-50, rgba(37, 99, 235, 0.08));
    color: var(--brand-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.auth-info-list {
    list-style: decimal; padding-left: 18px; margin: 0;
    font-size: 13px; color: var(--text-muted); line-height: 1.6;
}
.auth-info-list li + li { margin-top: 4px; }
.auth-info-list strong { color: var(--text); font-weight: 600; }

.auth-links { text-align: center; font-size: 14px; color: var(--text-muted); }
.auth-links a { color: var(--brand-600); font-weight: 500; }
.auth-links a:hover { text-decoration: underline; }
.auth-links .separator { margin: 0 8px; }
.auth-help-text { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }

/* ── OAuth Buttons ── */
.oauth-buttons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.btn-oauth {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 16px; border-radius: var(--radius); font-size: 15px; font-weight: 500;
    background: var(--bg-card); border: 1px solid var(--border-light);
    color: var(--text); text-decoration: none; transition: border-color 0.2s, background 0.2s;
    font-family: var(--font-body);
}
.btn-oauth:hover { border-color: var(--text-dim); background: var(--bg-card-hover); text-decoration: none; }
.btn-oauth svg { flex-shrink: 0; }

.auth-divider {
    display: flex; align-items: center; gap: 12px; margin: 20px 0;
    color: var(--text-dim); font-size: 14px;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── 2FA Setup ── */
.auth-card-wide { max-width: 540px; }
.twofa-setup { margin-top: 24px; }
.twofa-step { display: flex; gap: 16px; margin-bottom: 24px; }
.step-number {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background: var(--red); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
}
.step-content { flex: 1; }
.step-content p { font-size: 15px; color: var(--text-muted); margin-bottom: 12px; }
.qr-container {
    text-align: center; padding: 16px; background: #fff;
    border-radius: var(--radius); display: inline-block;
}
.qr-code { display: block; }
.secret-key {
    display: block; padding: 12px 16px; background: var(--bg-input);
    border: 1px solid var(--border-light); border-radius: var(--radius);
    font-family: monospace; font-size: 17px; letter-spacing: 3px;
    word-break: break-all; color: var(--red-bright);
}
.input-code {
    font-family: monospace; font-size: 30px; text-align: center;
    letter-spacing: 8px; padding: 12px;
}

/* ── Recovery Codes ── */
.recovery-codes {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin: 24px 0; padding: 20px;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.recovery-code { font-family: monospace; font-size: 17px; padding: 6px 0; text-align: center; }
.recovery-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }

/* ══════════════════════════════════════════════════════════════
   APP SHELL (Design Pass 6)
   Always-dark navy sidebar + light content area with a proper
   top bar above the scroll viewport. Stripe / Linear direction.
══════════════════════════════════════════════════════════════ */
.app-body { display: flex; min-height: 100vh; background: var(--bg); }

/* ── Sidebar (always-dark) ── */
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0;
    height: 100vh; z-index: 40;
    color: var(--sidebar-text);
}
.sidebar a { color: inherit; }

.sidebar-brand {
    padding: 16px 18px;
    border-bottom: 1px solid var(--sidebar-border);
    display: flex; align-items: center;
}
.sidebar-brand a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sidebar-active-text); font-weight: 700; letter-spacing: -0.01em; }
/* R46 — match the login screen exactly. The chrome wordmark already
   reads on the dark sidebar; previously we monochromed it to white via
   brightness(0)+invert(1), which stripped the brand colours and read
   as the "wrong logo" against login. */
.sidebar-logo { height: 26px; width: auto; }

.sidebar-nav { flex: 1; padding: 10px 10px 10px; overflow-y: auto; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }

.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: var(--r-sm); font-size: 13px;
    color: var(--sidebar-text-muted);
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
    margin-bottom: 1px;
    font-weight: 500;
    position: relative;
}
.nav-item:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text); text-decoration: none; }
.nav-item.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}
.nav-item.active::before {
    content: '';
    position: absolute; left: -10px; top: 6px; bottom: 6px;
    width: 3px; background: var(--brand-500); border-radius: 0 3px 3px 0;
}
.nav-item .nav-icon {
    font-size: 16px;
    width: 18px; text-align: center; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.nav-admin { }

/* Everything is "secondary" in the new condensed treatment — keep class
   for back-compat but it no longer changes the size. */
.nav-item.nav-secondary { font-size: 13px; padding: 7px 10px; font-weight: 500; }
.nav-item.nav-secondary .nav-icon { font-size: 16px; width: 18px; }

/* R46 — Secure Rooms is still in Beta while the rest of Vukorix is
   release-ready. Small premium pill sits to the right of the label. */
.nav-item .nav-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-beta-badge {
    flex-shrink: 0;
    display: inline-flex; align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(37, 99, 235, 0.30));
    border: 1px solid rgba(96, 165, 250, 0.35);
    color: #bfdbfe;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}
.nav-item:hover .nav-beta-badge,
.nav-item.active .nav-beta-badge {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.32), rgba(37, 99, 235, 0.42));
    color: #dbeafe;
}

.nav-group { margin-top: 14px; margin-bottom: 4px; }
.nav-group-label {
    padding: 4px 10px; font-size: 10px; font-weight: 600;
    color: var(--sidebar-text-subtle);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.sidebar .sidebar-nav .nav-group { margin-top: 14px; margin-bottom: 4px; }
.sidebar .sidebar-nav .nav-group-label { padding: 4px 10px; font-size: 10px; letter-spacing: 0.08em; }
.nav-sub { padding-left: 12px; }

/* Sidebar footer — organisation pill + user */
.sidebar-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--sidebar-border);
    font-size: 12px;
    background: rgba(0,0,0,0.18);
}
.sidebar-footer .plan-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--r-pill);
    background: rgba(59,130,246,0.18);
    color: #DBEAFE;
    font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
    text-transform: none;
    margin-bottom: 6px;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-email {
    color: var(--sidebar-text-muted);
    margin-bottom: 10px;
    word-break: break-all;
    font-size: 11px;
    line-height: 1.4;
}

.sidebar-footer-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sidebar-footer-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--sidebar-text-muted);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.15s;
}
.sidebar-footer-link:hover { color: var(--sidebar-text); text-decoration: none; }

.theme-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: var(--r-sm);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--sidebar-text-muted);
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    transition: all 0.15s;
}
.theme-toggle-btn:hover {
    background: rgba(255,255,255,0.08); color: var(--sidebar-text);
    border-color: rgba(255,255,255,0.12);
}
.theme-toggle-label { font-size: 11px; font-weight: 500; letter-spacing: 0.01em; }

/* ── Main content (topbar + scroll viewport) ── */
.main-content {
    flex: 1 1 0;                 /* belt-and-braces against flex overflow */
    margin-left: var(--sidebar-width);
    padding: 0;
    display: flex; flex-direction: column;
    min-width: 0;
    max-width: calc(100% - var(--sidebar-width));
    overflow-x: hidden;          /* anything that tries to push wide is clipped */
}

/* ══════════════════════════════════════════════════════════════
   APP TOPBAR — sticky header on every authenticated page.
   Search · notifications · quick-create · avatar menu.
══════════════════════════════════════════════════════════════ */
.app-topbar {
    position: sticky; top: 0; z-index: 30;
    height: var(--topbar-height);
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
    /* Full-width sticky bar. The content *inside* aligns to the page
       container rhythm via `.app-topbar-inner`. */
    display: flex; align-items: stretch;
    padding: 0;
}
html.dark .app-topbar { background: rgba(17,24,39,0.85); }

/* Inner container — left-anchored, same horizontal padding as
   `.app-viewport` so the search input, bell, create, and avatar align
   with every page header, filter bar, card, and table below. No
   max-width and no centering: the topbar spans the full working surface
   after the sidebar. */
.app-topbar-inner {
    width: 100%;
    padding: 0 var(--content-pad-x);
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
}

.topbar-search {
    flex: 1; max-width: 520px; position: relative;
    display: flex; align-items: center;
}
.topbar-search .icon-search {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-size: 14px; color: var(--text-subtle); pointer-events: none;
}
.topbar-search input[type="search"],
.topbar-search input[type="text"] {
    width: 100%; padding: 7px 12px 7px 32px; font-size: 13px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    outline: none;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.topbar-search input:focus {
    background: var(--bg-card);
    border-color: var(--brand-500);
    box-shadow: var(--ring-brand);
}
.topbar-search kbd {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    padding: 1px 5px; font-size: 10px; font-family: var(--font-mono);
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text-subtle);
    pointer-events: none;
}

/* R95 — `.topbar-actions` is back to its pre-R94 natural-flow rule.
   R94 added `margin-left: auto` to push the trial pill far right,
   but `.topbar-actions` also contained the bell, create, and avatar
   buttons, so the auto-margin dragged the whole cluster right —
   owner browser test surfaced that as a regression. R95 removes the
   auto-margin from this container and re-anchors only the trial
   controls in a separate sibling `.topbar-trial-right` (rule below)
   with its own `margin-left: auto`. */
.topbar-actions { display: flex; align-items: center; gap: 4px; }

/* R95 — trial-only far-right container. Sits as a sibling of
   `.topbar-actions` inside `.app-topbar-inner`, NOT inside it.
   `margin-left: auto` consumes the empty space between the actions
   cluster (bell/create/avatar — sitting in their natural pre-R94
   position immediately right of the search box) and this container,
   pushing only this container to the far right. The R94 attempt
   that put `margin-left: auto` on `.topbar-actions` itself dragged
   bell/create/avatar right too — which is the regression R95
   reverts. */
.topbar-trial-right {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: auto;
    padding-left: 16px;
}
.topbar-trial-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: #FEF3C7;            /* amber-100 */
    color: #92400E;                 /* amber-800 */
    border: 1px solid #FCD34D;      /* amber-300 */
    border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    font-family: inherit;
}
.topbar-trial-pill:hover { background: #FDE68A; color: #78350F; border-color: #F59E0B; }
.topbar-trial-pill:focus-visible {
    outline: 2px solid rgba(245, 158, 11, 0.5);
    outline-offset: 2px;
}
.topbar-trial-pill .topbar-trial-dot {
    display: inline-block; width: 7px; height: 7px;
    background: #F59E0B; border-radius: 50%;
}
.topbar-trial-pill.is-urgent {
    background: #FEE2E2;            /* red-100 */
    color: #991B1B;                 /* red-800 */
    border-color: #FCA5A5;          /* red-300 */
}
.topbar-trial-pill.is-urgent:hover {
    background: #FECACA;
    color: #7F1D1D;
    border-color: #EF4444;
}
.topbar-trial-pill.is-urgent .topbar-trial-dot { background: #DC2626; }
html.dark .topbar-trial-pill {
    background: rgba(180, 83, 9, 0.18);
    color: #FCD34D;
    border-color: rgba(245, 158, 11, 0.5);
}
html.dark .topbar-trial-pill:hover { background: rgba(180, 83, 9, 0.28); color: #FDE68A; }
html.dark .topbar-trial-pill.is-urgent {
    background: rgba(153, 27, 27, 0.25);
    color: #FCA5A5;
    border-color: rgba(220, 38, 38, 0.5);
}

/* R94 — Subscribe CTA next to the pill. Stays a btn-primary so it
   visually pops alongside the amber pill, and a tap routes straight
   to /settings/billing. Slightly tighter padding so the button
   doesn't dwarf the pill at desktop widths. */
.topbar-trial-cta {
    padding: 5px 12px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: var(--r-md, 8px) !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

/* Mobile — at narrower widths the trial-right container wraps onto
   its own row inside `.app-topbar-inner` if the search + actions
   already fill the topbar; the search + bell/create/avatar trio
   stay where they are. The pill shrinks at the 720 px breakpoint
   so it fits alongside the hamburger / logo on a phone topbar. */
@media (max-width: 1024px) {
    .topbar-trial-right { gap: 6px; padding-left: 12px; }
    .topbar-trial-pill { padding: 5px 10px; font-size: 12px; }
    .topbar-trial-cta { padding: 4px 10px !important; font-size: 12px !important; }
}
@media (max-width: 720px) {
    .app-topbar-inner { flex-wrap: wrap; row-gap: 6px; }
    .topbar-trial-right { padding-left: 0; margin-left: auto; }
    .topbar-trial-pill { padding: 4px 9px; font-size: 11px; }
    .topbar-trial-cta { padding: 3px 9px !important; font-size: 11px !important; }
}

.topbar-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--r-md);
    color: var(--text-muted);
    cursor: pointer; font-size: 16px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    position: relative;
    font-family: inherit;
    text-decoration: none;
}
.topbar-btn:hover { background: var(--bg-subtle); color: var(--text-strong); border-color: var(--border); text-decoration: none; }
.topbar-btn .icon-bell, .topbar-btn [class^="icon-"], .topbar-btn [class*=" icon-"] { font-size: 16px; }
.topbar-btn .badge-dot {
    position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
    background: var(--danger); border-radius: 50%;
    border: 1.5px solid var(--bg-card);
}

/* R139 — Topbar action consistency.
   The owner's QA flagged + Create as visually heavy and the Avatar
   chip as inconsistent with the lighter Quick Action (.topbar-btn).
   Both controls now share the same compact chrome as .topbar-btn —
   34px tall, transparent default surface, subtle border on hover —
   while keeping their distinguishing details (the + Create text +
   brand-tinted accent; the round Avatar initial). The drop-down
   menus (.app-menu) were already shared, so the menu surface is
   automatically consistent; only the trigger buttons needed work. */
.topbar-create {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px; height: 34px;
    background: transparent; color: var(--brand-700);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer; text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.topbar-create:hover {
    background: var(--brand-50);
    border-color: var(--brand-200, var(--border));
    color: var(--brand-700);
    text-decoration: none;
}
.topbar-create [class^="icon-"] { font-size: 14px; color: var(--brand-600); }

.topbar-avatar {
    width: 34px; height: 34px; border-radius: var(--r-pill);
    background: var(--bg-subtle, transparent); color: var(--text-strong);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    cursor: pointer; border: 1px solid var(--border);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.topbar-avatar:hover {
    background: var(--brand-50);
    border-color: var(--brand-200, var(--border));
    color: var(--brand-700);
}

/* Menu dropdown used by topbar buttons and quick-create */
.app-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 240px; max-width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    z-index: 100;
    padding: 6px;
    display: none;
}
.app-menu.open { display: block; }
.app-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--r-sm);
    font-size: 13px; color: var(--text-strong);
    text-decoration: none; cursor: pointer;
}
.app-menu-item:hover { background: var(--bg-subtle); color: var(--text-strong); text-decoration: none; }
.app-menu-item .app-menu-icon { width: 20px; font-size: 15px; color: var(--text-muted); flex-shrink: 0; }
.app-menu-item strong { font-weight: 600; font-size: 13px; }
.app-menu-item .app-menu-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.app-menu-sep { height: 1px; background: var(--border); margin: 4px 4px; }
.app-menu-label { padding: 6px 10px 4px; font-size: 10px; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.08em; }

/* R140 — Standardised topbar menus.
   Pre-R140 the + Create dropdown carried an `.app-menu-launcher`
   modifier that bumped it to 360–380px wide with 36×36 icon tiles
   and 12px item padding — visually inconsistent with the bell and
   avatar dropdowns which used the compact base `.app-menu`. R140
   removes the launcher variant entirely so the three topbar
   dropdowns share one CSS surface. The base `.app-menu-item` style
   already handles the icon + two-line text shape used by the
   + Create items, so no item-markup change is needed.

   Light reinforcements below tighten the contract:
   - .app-menu-item now has a fixed gap matching .vkx-hero-row's
     rhythm so the icon column lines up across dropdowns;
   - the avatar profile header gets an explicit .app-menu-profile
     class with consistent padding (replaces an inline-styled div). */
.app-menu-profile {
    padding: 8px 10px 8px;
    margin-bottom: 4px;
}
.app-menu-profile .app-menu-profile-name {
    font-size: 13px; font-weight: 600;
    color: var(--text-strong); line-height: 1.3;
}
.app-menu-profile .app-menu-profile-email {
    font-size: 11px; color: var(--text-muted);
    margin-top: 1px; word-break: break-all;
}
/* R140 — let the existing .app-menu-text wrapper used by + Create items
   stack its <strong> + .app-menu-sub vertically under the compact base
   style. Pre-R140 only .app-menu-launcher applied flex-column here, so
   without the launcher the items rendered with no vertical stacking
   beyond the .app-menu-sub block default. */
.app-menu-item .app-menu-text {
    display: inline-flex; flex-direction: column; gap: 1px;
    min-width: 0;
}
.app-menu-item .app-menu-text strong {
    font-weight: 600; font-size: 13px; color: var(--text-strong);
    line-height: 1.3;
}

/* Topbar search hint chip — replaces the Mac-only ⌘K kbd that used to
   live next to the input. Platform-neutral copy ("Press ↵ to search")
   so Windows/Linux users aren't shown a Command-K affordance they
   can't action. Jam 43584168. */
.topbar-search-hint {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-subtle);
    font-size: 11px; font-weight: 500; color: var(--text-muted);
    letter-spacing: 0.01em;
    font-family: inherit;
}
.topbar-search-hint .topbar-search-hint-key {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 11px; font-weight: 600;
    color: var(--text-strong);
}

/* Page viewport — left-anchored working surface. Shares the horizontal
   padding with `.app-topbar-inner` so every page layer (title, filter
   bar, KPI grid, cards, tables, settings shell) lines up to the same
   left edge after the sidebar.

   No max-width and no centering at the shell level. Individual content
   blocks (forms, settings panels) opt in to their own narrower widths
   when they want them — the container doesn't impose one. */
.app-viewport {
    flex: 1 1 0;
    width: 100%;
    padding: 28px var(--content-pad-x) 64px;
    min-width: 0;
}
/* Content gutter scale — moves with viewport width.
   The topbar-inner and viewport both consume the same variable so
   the horizontal rhythm stays locked across every breakpoint. */
@media (max-width: 1280px) {
    :root { --content-pad-x: 32px; }
}
@media (max-width: 1024px) {
    :root { --content-pad-x: 24px; }
    .app-viewport { padding-top: 24px; padding-bottom: 48px; }
}
@media (max-width: 900px) {
    :root { --content-pad-x: 20px; }
    .app-viewport { padding-top: 20px; padding-bottom: 40px; }
    .topbar-search { max-width: none; }
}

/* ── Dashboard ──
   Density pass 2026-04-22: the condensed sidebar made the existing
   generous content-area spacing read as "loose." Everything below is
   ~30% tighter — page headers, cards, tables, forms, empty states —
   so the layout feels coherent with the tight sidebar. Values chosen
   to still look approachable, not squeezed. */
.page-header { margin-bottom: 20px; }
.page-header h1 { font-size: clamp(22px, 3vw, 30px); }
.page-header p { color: var(--text-muted); margin-top: 4px; font-size: 14px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.stat-value { font-family: var(--font-body); font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 11px; color: var(--text-muted); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.stat-limit { font-size: 11px; }

.quick-actions h2 { font-size: 16px; margin-bottom: 12px; }
.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.action-card {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px;
    transition: border-color 0.3s; text-decoration: none;
    box-shadow: var(--shadow-sm);
}
.action-card:hover { border-color: var(--red); text-decoration: none; }
.action-icon { font-size: 22px; }
.action-title { font-size: 15px; font-weight: 600; color: var(--text); }
.action-desc { font-size: 13px; color: var(--text-muted); }
.action-card-locked { opacity: 0.4; cursor: default; border-style: dashed; }
.action-card-locked:hover { border-color: var(--border); }

/* ── Settings ── */
.settings-tabs {
    display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border);
}
.settings-tabs .tab {
    padding: 9px 16px; font-size: 13px; color: var(--text-muted);
    border-bottom: 2px solid transparent; text-decoration: none;
    transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; font-weight: 500;
}
.settings-tabs .tab:hover { color: var(--text); text-decoration: none; }
.settings-tabs .tab.active { color: var(--red-bright); border-bottom-color: var(--red); }
.tab-count {
    display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px;
    border-radius: 10px; background: var(--bg-input); color: var(--text-dim);
    margin-left: 4px; vertical-align: middle;
}
.settings-tabs .tab.active .tab-count { background: var(--red-dim); color: var(--red-bright); }

.settings-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}
.settings-card h2 { font-family: var(--font-body); font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.settings-card h3 { font-family: var(--font-body); font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.settings-form { max-width: 480px; }

.text-muted { color: var(--text-muted); font-size: 13px; }
.text-danger { color: var(--danger); }

.info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--text-muted); }
.info-value { font-weight: 500; }

.oauth-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--border);
}
.oauth-provider-name { font-weight: 600; margin-right: 12px; font-size: 15px; }
.oauth-connect { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.oauth-connect-buttons { display: flex; gap: 8px; margin-top: 8px; }
.inline-form { display: inline; }

.status-badge {
    display: inline-block; padding: 5px 14px; border-radius: 100px;
    font-size: 13px; font-weight: 700; margin-bottom: 12px; text-transform: uppercase;
    letter-spacing: 0.06em;
}
.status-active { background: var(--green-dim); color: var(--green); }
.status-draft { background: rgba(99,102,241,0.08); color: #6366f1; }
.status-inactive { background: rgba(138,141,155,0.08); color: var(--text-muted); }

.input-code-sm {
    font-family: monospace; font-size: 22px; text-align: center;
    letter-spacing: 6px; max-width: 200px;
}

.upgrade-prompt {
    padding: 24px; text-align: center;
    background: var(--bg-input); border-radius: var(--radius);
}
.upgrade-prompt p { margin-bottom: 16px; color: var(--text-muted); font-size: 15px; }

.colour-input { display: flex; align-items: center; gap: 12px; }
.colour-input input[type="color"] {
    width: 48px; height: 48px; border: 1px solid var(--border);
    border-radius: var(--radius); cursor: pointer; background: none; padding: 2px;
}
.colour-value { font-family: monospace; color: var(--text-muted); }

.subdomain-input { display: flex; align-items: center; }
.subdomain-input input { border-radius: var(--radius) 0 0 var(--radius); }
.subdomain-suffix {
    padding: 13px 16px; background: var(--bg-input);
    border: 1px solid var(--border-light); border-left: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text-muted); font-size: 15px; white-space: nowrap;
}
.logo-preview { max-width: 120px; max-height: 60px; margin-bottom: 8px; border-radius: 4px; }

/* ── Send Feature ── */
.send-form { max-width: 640px; }

.upload-zone {
    border: 2px dashed var(--border-light); border-radius: var(--radius-lg);
    padding: 48px 24px; text-align: center; transition: border-color 0.3s, background 0.3s;
    cursor: pointer;
}
.upload-zone:hover, .upload-zone.drag-over {
    border-color: var(--red); background: var(--red-dim);
}
.upload-zone-icon { font-size: 44px; margin-bottom: 12px; }
.upload-zone-text { color: var(--text-muted); font-size: 15px; }
.upload-zone-hint { color: var(--text-dim); font-size: 13px; margin-top: 6px; }
.upload-zone-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }

.file-preview-list { margin-top: 16px; }
.file-preview-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 6px; font-size: 14px;
}
.file-preview-item .file-name { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-preview-item .file-size { color: var(--text-muted); font-size: 13px; margin-left: 12px; flex-shrink: 0; }
.file-preview-item .file-remove {
    background: none; border: none; color: var(--text-dim); cursor: pointer;
    font-size: 18px; margin-left: 12px; padding: 0 4px; flex-shrink: 0;
}
.file-preview-item .file-remove:hover { color: var(--danger); }

.file-count-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
    background: var(--red-dim); border-radius: 100px;
    font-size: 14px; font-weight: 600; color: var(--red-bright);
}

/* Progress bar */
.progress-bar-track {
    width: 100%; height: 10px; background: var(--bg-input);
    border-radius: 100px; overflow: hidden; border: 1px solid var(--border);
}
.progress-bar-fill {
    height: 100%; background: var(--red); border-radius: 100px;
    transition: width 0.25s ease;
}

.expiry-options { display: flex; flex-wrap: wrap; gap: 8px; }
.expiry-option {
    padding: 9px 18px; border-radius: 100px; border: 1px solid var(--border-light);
    background: transparent; color: var(--text-muted); font-size: 14px;
    cursor: pointer; transition: all 0.2s; font-family: var(--font-body); font-weight: 500;
}
.expiry-option:hover { border-color: var(--text-dim); color: var(--text); }
.expiry-option.active, input[type="radio"]:checked + .expiry-option {
    background: var(--red-dim); border-color: var(--red); color: var(--red-bright);
}

.secret-link-box {
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; margin: 20px 0;
    display: flex; align-items: center; gap: 12px;
}
.secret-link-box input {
    flex: 1; background: none; border: none; color: var(--text);
    font-family: monospace; font-size: 15px; outline: none;
}
.secret-link-box .btn { flex-shrink: 0; }

.burn-notice {
    text-align: center; padding: 60px 20px;
}
.burn-notice h1 { font-size: 48px; margin-bottom: 8px; }
.burn-notice .burn-icon { font-size: 64px; margin-bottom: 16px; }

.secret-view-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 32px; max-width: 680px; margin: 40px auto;
    box-shadow: var(--shadow-md);
}
.secret-content {
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; margin: 20px 0;
    font-family: monospace; font-size: 15px; line-height: 1.6;
    white-space: pre-wrap; word-break: break-all;
}

.passphrase-form { max-width: 400px; margin: 40px auto; text-align: center; }
.passphrase-form h2 { margin-bottom: 8px; }
.passphrase-form p { color: var(--text-muted); margin-bottom: 20px; font-size: 16px; }

/* ── Receive Feature ── */
.request-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }

/* Single-column stacked card list — Exchange + Receive index pages
   use this so full-width cards read as a clean list of items rather
   than a tight grid. If you need the multi-column grid, use
   .request-grid instead. */
.card-grid { display: flex; flex-direction: column; gap: 12px; }
.card-grid .settings-card { margin-bottom: 0; }
.card-link:hover { border-color: var(--accent); transition: border-color 0.15s; }
.request-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px; transition: border-color 0.3s;
    box-shadow: var(--shadow-sm);
}
.request-card:hover { border-color: var(--border-light); }
.request-card-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px; }
.request-card-title { font-size: 17px; font-weight: 600; }
.request-card-client { font-size: 15px; color: var(--text-muted); margin-bottom: 12px; }
.request-card-meta { font-size: 14px; color: var(--text-muted); }
.request-card-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }

/* ─── Unified product-list card ───
   Shared vocabulary for the five product-index pages (Send, Receive,
   Exchange, E-Sign, Forms). Horizontal row: left tile (icon/thumbnail),
   middle body (title + meta), right action slot. Keeping the classes
   product-agnostic so a future product (if any) can adopt the same shell
   without introducing another per-list style bundle. */
.product-list { display: flex; flex-direction: column; gap: 10px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }

.product-card {
    display: flex; align-items: stretch; gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s;
    text-decoration: none; color: inherit;
}
.product-card:hover { border-color: var(--accent); }
/* Cancel the global `a:hover { text-decoration: underline }` rule when the
   card (or its hit-area child link) is hovered — otherwise every text node
   inside the card gets underlined on hover, which looks like a glitch. */
.product-card:hover,
.product-card:hover *,
.product-card-link:hover,
.product-card-link:hover * { text-decoration: none; }
.product-card.is-muted { opacity: 0.75; }
.product-card.is-muted:hover { opacity: 0.9; }

.product-card-tile {
    flex: 0 0 64px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 10px 4px; gap: 4px;
    background: var(--accent-bg-soft);
    color: var(--accent-fg);
    border-right: 1px solid var(--border);
    position: relative;
}
.product-card-tile.is-muted {
    background: rgba(138,141,155,0.08);
    color: var(--text-muted);
}
.product-card-tile-icon { font-size: 22px; line-height: 1; }
.product-card-tile-label {
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.product-card-tile-meta {
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.product-card-tile img.product-card-tile-thumb {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    display: block;
    background: var(--bg-card);
}

/* Hit-area link for cards that also have right-side action buttons.
   Wraps tile + body so the click-to-detail region is clearly scoped,
   while the actions stay outside the link (nested <a>/<button> in an
   <a> is invalid HTML). */
.product-card-link {
    display: flex; flex: 1 1 auto;
    align-items: stretch; min-width: 0;
    text-decoration: none; color: inherit;
}

.product-card-body {
    flex: 1 1 auto; min-width: 0;
    padding: 12px 18px;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.product-card-title-row {
    display: flex; align-items: center;
    gap: 10px; flex-wrap: wrap;
}
.product-card-title {
    font-size: 15px; font-weight: 600;
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
}
.product-card-subtitle {
    font-size: 12px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.product-card-subtitle .subtitle-sep { color: var(--text-dim); margin: 0 4px; }
.product-card-meta {
    display: flex; flex-wrap: wrap;
    gap: 14px;
    font-size: 12px; color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.product-card-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.product-card-meta .meta-accent { color: var(--accent-fg); font-weight: 600; }

.product-card-actions {
    flex-shrink: 0;
    padding: 12px 14px;
    display: flex; align-items: center; gap: 6px;
    border-left: 1px solid var(--border);
}
.product-card-actions-ghost { border-left: none; padding-left: 0; }

/* Status chip used in the title row — smaller than status-badge and
   tuned to sit on the same line as the title text. */
.product-card-chip {
    display: inline-block;
    padding: 2px 9px; border-radius: 100px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap; flex-shrink: 0;
    background: var(--bg-secondary); color: var(--text-muted);
}
.product-card-chip.is-active  { background: var(--green-dim); color: var(--green); }
.product-card-chip.is-draft   { background: rgba(99,102,241,0.1); color: #6366f1; }
.product-card-chip.is-warn    { background: var(--warning-dim); color: var(--warning); }
.product-card-chip.is-danger  { background: rgba(239,68,68,0.1); color: #ef4444; }
.product-card-chip.is-info    { background: rgba(59,130,246,0.12); color: #3b82f6; }
.product-card-chip.is-neutral { background: rgba(138,141,155,0.1); color: var(--text-muted); }

@media (max-width: 720px) {
    .product-card { flex-wrap: wrap; }
    .product-card-actions {
        width: 100%; border-left: none; border-top: 1px solid var(--border);
        padding: 10px 14px; justify-content: flex-end;
    }
    .product-card-tile { flex: 0 0 56px; }
}

/* Delete button on request cards */
.btn-delete-request {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; border-radius: 50%;
    background: none; border: 1px solid transparent;
    color: var(--text-dim); cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; line-height: 1;
}
.btn-delete-request:hover {
    background: var(--danger-dim); border-color: rgba(220,38,38,0.2);
    color: var(--danger);
}

/* Modal overlay */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.modal-box {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px 32px;
    max-width: 500px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.receive-form { max-width: 560px; }
.checklist-items { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.checklist-item {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 15px;
}
.checklist-item input { flex: 1; background: none; border: none; color: var(--text); outline: none; font-family: var(--font-body); font-size: 15px; }
.checklist-item .remove-item { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 18px; padding: 0 4px; }
.checklist-item .remove-item:hover { color: var(--danger); }
/* R63 D#30 — when the wizard renders only the default empty row,
   suppress the X so the user doesn't tap it expecting the placeholder
   to clear and end up with another empty row at the same position. */
.checklist-items > .checklist-item:only-child .remove-item { display: none; }

/* Public-facing (client upload page) — always light */
.portal-public {
    max-width: 680px; margin: 0 auto; padding: 40px 20px;
}
.portal-public-header {
    text-align: center; margin-bottom: 32px; padding: 48px 32px;
    border-radius: var(--radius-lg); position: relative; overflow: hidden;
}
.portal-public-header h1 { font-size: 34px; margin-bottom: 8px; position: relative; z-index: 1; }
.portal-public-header p { color: var(--text-muted); font-size: 16px; position: relative; z-index: 1; }
.portal-public-header .portal-icon {
    font-size: 48px; margin-bottom: 16px; display: block; position: relative; z-index: 1;
}
.portal-public-header .portal-tagline {
    font-size: 14px; color: var(--text-dim); margin-top: 12px; position: relative; z-index: 1;
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}

/* Portal theme styles — applied via inline style vars */
.portal-themed-header {
    background: linear-gradient(135deg, var(--portal-gradient-from), var(--portal-gradient-to));
    border: 1px solid var(--border);
}
.portal-themed-header h1 { color: var(--text); }
.portal-themed-header .portal-accent { color: var(--portal-accent); }

/* ── Wizard ── */
.wizard-container {
    max-width: 720px; margin: 0 auto; padding: 24px 0;
    transition: max-width 0.3s ease;
}
.wizard-progress {
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 32px; gap: 0; padding: 0 12px;
}
.wizard-step {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: relative; z-index: 1;
}
.wizard-step-number {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600;
    background: var(--bg-input); border: 2px solid var(--border);
    color: var(--text-dim); transition: all 0.2s;
}
.wizard-step.active .wizard-step-number {
    background: var(--red); border-color: var(--red); color: #fff;
}
.wizard-step.completed .wizard-step-number {
    background: var(--green); border-color: var(--green); color: #fff;
}
.wizard-step-label {
    font-size: 12px; font-weight: 500; color: var(--text-dim);
    white-space: nowrap;
}
.wizard-step.active .wizard-step-label { color: var(--text); font-weight: 600; }
.wizard-step.completed .wizard-step-label { color: var(--green); }
.wizard-step-line {
    flex: 1; height: 2px; background: var(--border);
    min-width: 24px; max-width: 80px; margin: 0 4px;
    margin-bottom: 20px; transition: background 0.2s;
}
.wizard-step-line.completed { background: var(--green); }

.wizard-panel {
    display: none;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 32px;
    box-shadow: var(--shadow-sm);
}
.wizard-panel.active { display: block; }
.wizard-panel-header { margin-bottom: 28px; }
.wizard-panel-header h2 {
    font-family: var(--font-body); font-weight: 700; font-size: 22px;
    margin-bottom: 8px;
}
.wizard-hint {
    color: var(--text-muted); font-size: 15px; line-height: 1.5;
}
.wizard-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border);
}
.wizard-link {
    /* R63 D#31 — make the modal "Open the full Manage page" affordance
       look like a link instead of muted body text. Underline + the
       brand-blue colour pulls it out of the footer-row visual rhythm. */
    font-size: 13px; color: var(--accent, #2563EB); text-decoration: underline;
    font-weight: 500;
}
.wizard-link:hover { color: var(--red); text-decoration: underline; }

/* Theme picker grid */
.theme-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.theme-card {
    border: 2px solid var(--border); border-radius: var(--radius);
    overflow: hidden; cursor: pointer; transition: all 0.15s;
    position: relative; background: var(--bg-card);
}
.theme-card:hover { border-color: var(--border-light); box-shadow: var(--shadow-md); }
.theme-card.selected { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.theme-card-preview {
    padding: 24px 16px; text-align: center; min-height: 90px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.theme-card-icon { font-size: 32px; }
.theme-card-tagline {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 600; opacity: 0.85;
}
.theme-card-info {
    padding: 10px 14px; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 2px;
}
.theme-card-info strong { font-size: 14px; font-weight: 600; }
.theme-card-industry { font-size: 12px; color: var(--text-muted); }
.theme-card-check {
    position: absolute; top: 8px; right: 8px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--red); color: #fff;
    display: none; align-items: center; justify-content: center;
    font-size: 14px;
}
.theme-card.selected .theme-card-check { display: flex; }

/* Live theme preview */
.theme-preview-box {
    border-radius: var(--radius-lg); overflow: hidden;
    height: 200px; position: relative;
    border: 1px solid var(--border);
    transition: background-image 0.3s;
}
.theme-preview-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px;
    transition: background 0.3s;
}
.theme-preview-logo {
    max-height: 44px; max-width: 180px; object-fit: contain;
}
.theme-preview-logo-placeholder {
    padding: 10px 20px; border: 2px dashed var(--border-light);
    border-radius: var(--radius); font-size: 13px; color: var(--text-dim);
    font-weight: 500;
}
.theme-preview-title {
    font-family: var(--font-display); font-size: 28px;
    font-weight: 400; color: var(--text);
}
.theme-preview-tagline {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 600; transition: color 0.3s;
}

/* Info/warning box */
.wizard-info-box {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; background: var(--accent-bg-soft);
    border: 1px solid var(--accent-border); border-radius: var(--radius);
    font-size: 14px; line-height: 1.6; color: var(--text);
}

/* Radio cards for expiry */
.radio-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.radio-card {
    cursor: pointer; display: block;
    height: 100%;
}
.radio-card input { display: none; }
.radio-card-body {
    padding: 14px 16px; border: 2px solid var(--border);
    border-radius: var(--radius); transition: all 0.15s;
    display: flex; flex-direction: column; gap: 2px;
    height: 100%; box-sizing: border-box;
}
.radio-card-body strong { font-size: 15px; }
.radio-card-body span { font-size: 12px; color: var(--text-muted); }
.radio-card input:checked + .radio-card-body {
    border-color: var(--red); background: var(--red-dim);
}
.radio-card:hover .radio-card-body { border-color: var(--border-light); }

/* Review summary */
.review-summary { display: flex; flex-direction: column; gap: 20px; }
.review-section {
    background: var(--bg-input); border-radius: var(--radius);
    padding: 18px 20px;
}
.review-section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.review-section-header h4 {
    font-family: var(--font-body); font-weight: 600; font-size: 15px; margin: 0;
}
.btn-link {
    background: none; border: none; color: var(--red); cursor: pointer;
    font-size: 13px; font-weight: 500; padding: 0;
}
.btn-link:hover { text-decoration: underline; }
.review-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 6px 0; font-size: 14px;
}
.review-label { color: var(--text-muted); flex-shrink: 0; margin-right: 16px; }
.review-value { font-weight: 500; text-align: right; word-break: break-word; }
.review-checklist {
    list-style: none; padding: 0; margin: 0;
}
.review-checklist li {
    padding: 4px 0; font-size: 14px; font-weight: 500;
}
.review-checklist li::before {
    content: '○ '; color: var(--text-dim);
}

/* Wizard validation */
.input-error { border-color: var(--danger) !important; box-shadow: 0 0 0 2px var(--danger-dim) !important; }

/* Form optional label */
.form-optional { color: var(--text-dim); font-weight: 400; font-size: 13px; }
.required { color: var(--danger); }

/* Template selector */
.template-selector {
    background: var(--bg-input); border-radius: var(--radius);
    padding: 16px; margin-bottom: 20px;
}

.file-list { margin-top: 16px; }
.file-item {
    /* R63 (M#3 / M#5 / M#8 / D#16) — long file names previously pushed
       the action button to a second line on desktop and overlapped it on
       mobile. The first child becomes a min-width:0 flex column so the
       name can ellipsis instead of bullying its sibling, and gap + flex-
       shrink:0 + nowrap protect the right-hand button. */
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 8px; font-size: 15px;
}
.file-item > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}
.file-item > :not(:first-child) {
    flex: 0 0 auto;
    white-space: nowrap;
}
.file-item-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-item-size { color: var(--text-muted); font-size: 14px; }
.file-item-status { font-size: 13px; white-space: nowrap; }
@media (max-width: 540px) {
    .file-item { padding: 12px 14px; font-size: 14px; }
    .file-item-name { font-size: 14px; }
    .file-item-size { font-size: 12px; }
}

/* ── Tables ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    text-align: left; padding: 9px 12px; font-size: 11px;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border); font-weight: 600;
}
.data-table td {
    padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.data-table tr:hover td { background: var(--bg-card-hover); }

/* ── Empty States ── */
.empty-state {
    text-align: center; padding: 40px 20px;
    color: var(--text-muted);
}
.empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.3; }
.empty-state h3 { font-family: var(--font-body); font-weight: 600; color: var(--text); margin-bottom: 6px; font-size: 15px; }
.empty-state p { margin-bottom: 16px; font-size: 13px; }

/* ── Error Pages ── */
.error-page { text-align: center; padding: 120px 20px; }
.error-page h1 { font-size: 80px; color: var(--red); }
.error-page p { color: var(--text-muted); margin-bottom: 24px; font-size: 16px; }

/* ══════════════════════════════════════════
   MOBILE TOPBAR & DRAWER (phones + iPad portrait)
   ══════════════════════════════════════════ */

/* Desktop: hide mobile-only elements entirely. */
.mobile-topbar { display: none; }
.mobile-overlay { display: none; }
.sidebar-close-btn { display: none; }

/* ── Responsive breakpoint: drawer for phones + iPad portrait ── */
@media (max-width: 900px) {
    /* ─── Mobile top bar ─── */
    .mobile-topbar {
        display: flex;
        align-items: center;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 56px;
        padding: 0 12px;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border);
        /* Above the drawer so the hamburger ↔ X button stays tappable
           while the drawer is open. */
        z-index: 40;
        gap: 8px;
    }
    .mobile-menu-btn,
    .mobile-topbar-right {
        width: 42px; height: 42px;
        background: transparent;
        border: 0;
        color: var(--text);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 8px;
        text-decoration: none;
        flex-shrink: 0;
    }
    .mobile-menu-btn:hover,
    .mobile-topbar-right:hover {
        background: var(--bg-card-hover);
    }
    /* Pure-CSS hamburger icon */
    .mobile-menu-icon,
    .mobile-menu-icon::before,
    .mobile-menu-icon::after {
        display: block;
        width: 22px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform 0.2s, background-color 0.2s, top 0.2s;
    }
    .mobile-menu-icon { position: relative; }
    .mobile-menu-icon::before,
    .mobile-menu-icon::after {
        content: ""; position: absolute; left: 0;
    }
    .mobile-menu-icon::before { top: -7px; }
    .mobile-menu-icon::after { top: 7px; }
    /* Active hamburger → X */
    body.menu-open .mobile-menu-icon { background: transparent; }
    body.menu-open .mobile-menu-icon::before { top: 0; transform: rotate(45deg); }
    body.menu-open .mobile-menu-icon::after  { top: 0; transform: rotate(-45deg); }

    .mobile-brand {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0;
        text-decoration: none;
    }
    .mobile-brand img { height: 30px; max-width: 100%; }

    /* Right-side shortcut in topbar (e.g. settings link) */
    .mobile-topbar-right {
        color: var(--text-muted);
        font-size: 20px;
    }

    /* ─── Sidebar → slide-in drawer ─── */
    .sidebar {
        display: flex;
        width: 86vw;
        max-width: 320px;
        /* Drawer starts below the mobile topbar so the hamburger X
           stays accessible while the drawer is open. Use top + bottom
           rather than height so iOS Safari's dynamic address bar
           doesn't clip the drawer's footer. */
        top: 56px;
        bottom: 0;
        height: auto;
        transform: translateX(-101%);
        transition: transform 0.25s ease;
        z-index: 30;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    /* The drawer's internal brand section is redundant with the
       mobile topbar's logo, so hide it on mobile. The close button
       also becomes unnecessary because the topbar hamburger/X handles
       open-close. */
    .sidebar .sidebar-brand { display: none; }
    .sidebar-close-btn { display: none !important; }

    /* Backdrop overlay while drawer is open. Starts below the topbar
       so the topbar remains visibly crisp (not dimmed) and the
       hamburger X stays fully tappable. */
    .mobile-overlay {
        display: block;
        position: fixed;
        top: 56px; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 25;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }
    .mobile-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Lock body scroll when menu is open */
    body.menu-open { overflow: hidden; touch-action: none; }

    /* ─── Main content ─── */
    .main-content {
        margin-left: 0;
        padding: 56px 0 0;        /* clear mobile-topbar; .app-viewport owns horizontal padding */
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    /* Desktop topbar hidden on mobile — mobile-topbar covers the role */
    .app-topbar { display: none; }

    /* Prevent horizontal page overflow from stray wide children */
    html, body { max-width: 100%; }

    /* ─── Form inputs: 16px prevents iOS zoom on focus ─── */
    .form-group input,
    .form-group textarea,
    .form-group select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px;
    }

    /* ─── Page headers: stack title/actions vertically ─── */
    .page-header {
        margin-bottom: 22px;
    }
    .page-header h1 {
        font-size: clamp(26px, 7vw, 34px);
    }
    .page-header p { font-size: 15px; }

    /* Flex page headers (dashboard, send, receive) stack on mobile */
    .page-header[style*="justify-content"],
    .page-header.flex-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .page-header[style*="justify-content"] > *,
    .page-header.flex-header > * {
        width: 100%;
    }
    .page-header[style*="justify-content"] > *:last-child {
        flex-wrap: wrap;
    }

    /* ─── Dashboard: single-column layout ─── */
    .dash-top {
        flex-direction: column;
        gap: 12px;
    }
    .dash-top > * { width: 100%; min-width: 0; }
    .dash-main {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* ─── Grids collapse to one column ─── */
    .stats-grid,
    .action-grid,
    .request-grid,
    .card-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
    .theme-grid { grid-template-columns: repeat(2, 1fr); }
    .radio-cards { grid-template-columns: repeat(2, 1fr); }

    /* ─── Inline-style grids: Force fixed-column grids to single
       column on mobile. The :not() exclusions preserve grids that
       use auto-fit / auto-fill with minmax() — those are already
       responsive and collapsing them to 1fr would remove their
       reflow behavior. ─── */
    [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
        grid-template-columns: 1fr !important;
    }

    /* ─── Inline-style flex rows that juxtapose elements side-by-side
       (justify-content: space-between, two-column toolbars, etc.) often
       overflow on narrow screens. Let them wrap instead. ─── */
    [style*="justify-content: space-between"],
    [style*="justify-content:space-between"] {
        flex-wrap: wrap;
    }

    /* Prevent fixed inline max-widths from exceeding the viewport */
    [style*="max-width: 860px"],
    [style*="max-width: 900px"],
    [style*="max-width: 1000px"],
    [style*="max-width: 1100px"],
    [style*="max-width: 1200px"] {
        max-width: 100% !important;
    }

    /* ─── Settings tabs — horizontally scrollable ─── */
    .settings-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .settings-tabs::-webkit-scrollbar { display: none; }
    .settings-tab { white-space: nowrap; flex-shrink: 0; }

    .settings-card { padding: 20px 18px; }
    .settings-card h2 { font-size: 17px; }

    /* ─── Wizards ─── */
    .wizard-container { padding: 0; max-width: 100%; }
    .wizard-panel { padding: 18px 16px; }
    .wizard-panel-header h2 { font-size: 22px; }
    .wizard-progress { overflow-x: auto; padding-bottom: 6px; }
    .wizard-step-label { font-size: 10px; }
    .wizard-step-number { width: 30px; height: 30px; font-size: 12px; }
    .wizard-step-line { min-width: 12px; max-width: 40px; }
    .wizard-nav { flex-direction: column-reverse; gap: 10px; }
    .wizard-nav > * { width: 100%; }

    /* ─── Review step ─── */
    .review-row { flex-direction: column; gap: 2px; }
    .review-value { text-align: left; }

    /* ─── File preview list wraps on small screens ─── */
    .file-preview-item {
        flex-wrap: wrap;
        gap: 6px;
    }
    .file-preview-item .file-name {
        flex: 1 1 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ─── Tables should scroll horizontally inside their container
       rather than pushing the page wider than the viewport. Wrapping
       <table> elements in a scrollable wrapper is the cleanest mobile
       pattern; the rule below catches both .data-table and plain
       tables. ─── */
    .table-wrap,
    .data-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Make every data-table scrollable on mobile — even when there's
       no explicit wrap. We turn the table into block-level with
       overflow-x: auto so the table itself scrolls. */
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        width: 100%;
    }

    /* ─── Buttons in button rows wrap ─── */
    .btn-row,
    .form-actions {
        flex-wrap: wrap;
    }

    /* ─── Public pages ─── */
    .public-header .container { height: 52px; }
    .public-header .brand-name { font-size: 15px; letter-spacing: 3px; }
    .public-nav { gap: 14px; }
    .public-nav a { font-size: 14px; }
    .hero { padding: 48px 16px 40px; }
    .feature-grid { grid-template-columns: 1fr; }
    .legal-content h2 { font-size: 18px; margin-top: 28px; }

    /* ─── Auth pages: tighter padding ─── */
    .auth-card { padding: 28px 22px; }

    /* ─── Walkthrough tooltip must fit on narrow screens ─── */
    .wt-tooltip {
        width: calc(100vw - 24px);
        max-width: 360px;
    }

    /* ─── Admin sticky bar: reset negative margins and stick below
       the mobile topbar (56px) instead of behind it. ─── */
    .admin-sticky-bar {
        top: 56px !important;
        /* Lower z-index below the mobile topbar (z:40) so the sticky
           bar doesn't overlap the hamburger when scrolled. Inline
           style sets z-index: 50 which beats the topbar. */
        z-index: 15 !important;
        margin: -16px -16px 16px -16px !important;
        padding: 6px 16px !important;
        font-size: 12px;
    }
}

/* ── Extra-small phones (≤480px) ── */
@media (max-width: 480px) {
    :root { --content-pad-x: 16px; }
    .main-content { padding: 56px 0 0; }
    .app-viewport { padding-top: 16px; padding-bottom: 40px; }
    .vkx-page-header { padding-bottom: 12px; margin-bottom: 16px; }
    .vkx-page-header-title { font-size: 20px; }
    .settings-card { padding: 16px 14px; }
    .wizard-panel { padding: 14px 12px; }
    .theme-grid { grid-template-columns: 1fr; }
    .radio-cards { grid-template-columns: 1fr; }
    .auth-card { padding: 24px 18px; }
    .btn { padding: 10px 14px; font-size: 14px; }
    .btn-sm { padding: 7px 11px; font-size: 13px; }
}

/* ══════════════════════════════════════════
   WALKTHROUGH / GUIDED TOUR
══════════════════════════════════════════ */
.wt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
    transition: opacity 0.2s;
}
.wt-spotlight {
    position: absolute;
    z-index: 9999;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.45);
    background: transparent;
    pointer-events: none;
    transition: all 0.3s ease;
    display: none;
}
.wt-tooltip {
    position: absolute;
    z-index: 10000;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e0e0e4);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
    width: 340px;
    max-width: calc(100vw - 24px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    display: none;
    animation: wtFadeIn 0.25s ease;
}
@keyframes wtFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.wt-tooltip-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text, #1a1a1f);
}
.wt-tooltip-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted, #6b6b76);
    margin-bottom: 16px;
}
.wt-tooltip-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wt-tooltip-counter {
    font-size: 11px;
    color: var(--text-dim, #9c9ca8);
    font-weight: 500;
}
.wt-tooltip-actions {
    display: flex;
    gap: 6px;
}
.wt-btn {
    padding: 6px 14px;
    border-radius: var(--radius, 8px);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border, #e0e0e4);
    background: var(--bg-input, #f0f0f2);
    color: var(--text, #1a1a1f);
    transition: all 0.15s;
}
.wt-btn:hover {
    background: var(--bg-card-hover, #fafafa);
    border-color: var(--border-light, #d4d4d8);
}
.wt-btn-next {
    /* Use the brand accent so the primary action is always visible
       in both light and dark themes (previous var-based colors
       rendered near-white in dark mode). */
    background: var(--accent, #2E86C1);
    color: #ffffff;
    border-color: var(--accent, #2E86C1);
}
.wt-btn-next:hover {
    background: var(--accent-hover, #1F6FA8);
    border-color: var(--accent-hover, #1F6FA8);
    color: #ffffff;
}
.wt-btn-skip {
    color: var(--text-dim, #9c9ca8);
    background: transparent;
    border-color: transparent;
}
.wt-btn-skip:hover {
    color: var(--text-muted, #6b6b76);
    background: var(--bg-input, #f0f0f2);
}

/* Help button — fixed bottom-right */
.wt-help-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9990;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e0e0e4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #6b6b76);
    transition: all 0.15s;
}
.wt-help-btn:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    color: var(--text, #1a1a1f);
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════
   DESIGN PASS 6 — PRIMITIVE COMPONENTS
   Reusable building blocks shared across every authenticated page.
   Pair with partials in app/views/_partials/.
══════════════════════════════════════════════════════════════ */

/* ── PageHeader primitive ── */
.vkx-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.vkx-page-header-main { min-width: 0; }
.vkx-page-header-eyebrow {
    display: inline-block; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--brand-600); margin-bottom: 8px;
}
.vkx-page-header-title {
    font-size: 24px; font-weight: 700; color: var(--text-strong);
    line-height: 1.15; letter-spacing: -0.02em;
    margin: 0;
}
/* Compact variant — admin pages, dense data screens, deep forms.
   Smaller title, tighter spacing. */
.vkx-page-header.compact {
    margin-bottom: 18px;
    padding-bottom: 14px;
}
.vkx-page-header.compact .vkx-page-header-title {
    font-size: 20px; letter-spacing: -0.015em;
}
.vkx-page-header.compact .vkx-page-header-subtitle {
    font-size: 13px; margin-top: 4px;
}
.vkx-page-header.compact .vkx-page-header-eyebrow {
    font-size: 10px; margin-bottom: 6px;
}
/* Flagship variant — Dashboard only. Biggest title for the mission-control
   landing page so hierarchy reads louder there than on every other page. */
.vkx-page-header.flagship .vkx-page-header-title {
    font-size: 30px; letter-spacing: -0.025em; line-height: 1.1;
}
.vkx-page-header-subtitle {
    font-size: 14px; color: var(--text-muted); line-height: 1.5;
    margin-top: 6px; max-width: 680px;
}
.vkx-page-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.vkx-page-header-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 500;
}
.vkx-page-header-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.vkx-page-header-breadcrumb a:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 2px; }
.vkx-page-header-breadcrumb .sep { color: var(--text-subtle); }

/* ── MetricCard primitive ── */
.vkx-metric {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: var(--sh-xs);
    transition: border-color 0.15s, transform 0.15s;
    text-decoration: none; color: inherit;
    min-width: 0;
}
a.vkx-metric:hover, .vkx-metric.is-clickable:hover { border-color: var(--border-strong); }
.vkx-metric-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vkx-metric-label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 6px;
}
.vkx-metric-label [class^="icon-"] { font-size: 13px; color: var(--text-subtle); }
.vkx-metric-value {
    font-size: 28px; font-weight: 700; color: var(--text-strong);
    line-height: 1; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.vkx-metric-sub { font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; margin-top: -2px; }
.vkx-metric-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vkx-metric-delta.up   { color: var(--success); }
.vkx-metric-delta.down { color: var(--danger); }
.vkx-metric-delta.flat { color: var(--text-subtle); }
.vkx-metric-progress {
    height: 4px; background: var(--bg-subtle);
    border-radius: var(--r-pill); overflow: hidden; margin-top: 2px;
}
.vkx-metric-progress > span { display: block; height: 100%; background: var(--brand-600); border-radius: inherit; transition: width 0.3s; }
.vkx-metric-progress.warn > span { background: var(--warning); }
.vkx-metric-progress.danger > span { background: var(--danger); }

/* ── DataCard primitive ── */
.vkx-data-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}
.vkx-data-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    background: var(--bg-card);
}
.vkx-data-card-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: var(--text-strong);
    margin: 0;
    letter-spacing: -0.005em;
}
.vkx-data-card-title [class^="icon-"] { font-size: 15px; color: var(--brand-600); }
.vkx-data-card-subtitle { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
.vkx-data-card-actions { display: inline-flex; align-items: center; gap: 6px; }
.vkx-data-card-link {
    font-size: 12px; font-weight: 600;
    color: var(--brand-600); text-decoration: none;
    padding: 4px 8px; border-radius: var(--r-sm);
    transition: background 0.12s;
}
.vkx-data-card-link:hover { background: var(--brand-50); text-decoration: none; }
.vkx-data-card-body { padding: 4px 0; }
.vkx-data-card-body.padded { padding: 18px 20px; }
.vkx-data-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
    font-size: 12px; color: var(--text-muted);
}

/* R145 — collapsible audit trail. The <summary> sits in place of the
   data-card-header and carries a small chevron that flips on toggle.
   Default-closed when the trail has more than 5 events so long-lived
   exchanges/requests don't push the page height unbounded. */
.vkx-audit-card details > summary { list-style: none; cursor: pointer; }
.vkx-audit-card details > summary::-webkit-details-marker { display: none; }
.vkx-audit-summary { user-select: none; }
.vkx-audit-summary::after {
    content: "Show all";
    margin-left: auto;
    font-size: 12px; font-weight: 600;
    color: var(--brand-600);
    padding: 4px 10px;
    border-radius: var(--r-sm);
    background: var(--brand-50);
    transition: background 0.12s;
}
.vkx-audit-card details[open] > .vkx-audit-summary::after { content: "Hide"; }
.vkx-audit-summary:hover::after { background: var(--brand-100, #dbeafe); }
.vkx-audit-card details[open] > .vkx-audit-summary {
    border-bottom: 1px solid var(--border);
}

/* R146 — Exchange contents segmented control. Tabs span the full
   width of the card under the title row, give each tab equal weight
   on desktop, and tighten count badges into pill chips so the bar
   reads as one cohesive control rather than three buttons. */
.vkx-r146-tabs {
    display: flex;
    gap: 0;
    padding: 6px 8px 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}
.vkx-r146-tab {
    flex: 1;
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 12px;
    font-size: 13px; font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    border-radius: 0;
}
.vkx-r146-tab:hover { color: var(--text-strong); background: var(--bg-subtle); }
.vkx-r146-tab.is-active {
    color: var(--brand-600);
    border-bottom-color: var(--brand-600);
}
.vkx-r146-tab .count {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    min-width: 18px;
    text-align: center;
}
.vkx-r146-tab.is-active .count {
    background: var(--brand-50);
    color: var(--brand-600);
}
.vkx-r146-panel { display: none; }
.vkx-r146-panel.is-active { display: block; }

/* R146 — Brief edit modal (HTML5 <dialog>). Replaces the R145
   inline textarea so the read view and edit form are never visible
   simultaneously. Backdrop styling matches the rest of the design
   system. */
.vkx-brief-modal {
    border: 0;
    padding: 0;
    border-radius: var(--r-lg);
    background: var(--bg-card);
    box-shadow: 0 24px 48px rgba(0,0,0,0.18);
    color: var(--text-strong);
    max-width: 92vw;
}
.vkx-brief-modal::backdrop {
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(2px);
}
.vkx-brief-modal[open] {
    animation: vkx-r146-dialog-pop 0.14s ease-out;
}
@keyframes vkx-r146-dialog-pop {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Emphasised card variant — slightly heavier border + shadow for the
   focal panel on detail pages (Signers, Audit trail). */
.vkx-data-card.emphasis {
    border-color: var(--border-strong);
    box-shadow: var(--sh-md);
}

/* ── StatusBadge primitive ── */
.vkx-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}
.vkx-badge.success { background: var(--success-bg); color: #15803D; }
.vkx-badge.warn    { background: var(--warning-bg); color: #B45309; }
.vkx-badge.danger  { background: var(--danger-bg);  color: #B91C1C; }
.vkx-badge.info    { background: var(--info-bg);    color: #1D4ED8; }
.vkx-badge.brand   { background: var(--brand-50);   color: var(--brand-700); }
.vkx-badge.draft   { background: var(--slate-100);  color: var(--slate-600); }
.vkx-badge.neutral { background: var(--slate-100);  color: var(--slate-600); }
.vkx-badge .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    display: inline-block; flex-shrink: 0;
}

/* ── FilterBar primitive ── */
.vkx-filter-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 0;
    border-bottom: 1px solid var(--border);
}
.vkx-filter-tabs { display: flex; align-items: center; gap: 0; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.vkx-filter-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 12px; margin-bottom: -1px;
    font-size: 13px; font-weight: 500;
    color: var(--text-muted);
    text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.vkx-filter-tab:hover { color: var(--text-strong); text-decoration: none; }
.vkx-filter-tab.active { color: var(--brand-600); border-bottom-color: var(--brand-600); font-weight: 600; }
.vkx-filter-tab .count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 10px; font-weight: 700; border-radius: var(--r-pill);
    background: var(--bg-subtle); color: var(--text-muted);
}
.vkx-filter-tab.active .count { background: var(--brand-50); color: var(--brand-700); }
.vkx-filter-right { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 6px; }

/* ── EmptyState primitive ── */
.vkx-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 48px 24px;
    background: var(--bg-card);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
}
.vkx-empty-icon {
    width: 48px; height: 48px; border-radius: var(--r-lg);
    background: var(--bg-subtle); color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 14px;
}
.vkx-empty-title { font-size: 15px; font-weight: 600; color: var(--text-strong); margin-bottom: 4px; }
.vkx-empty-body { font-size: 13px; color: var(--text-muted); max-width: 440px; line-height: 1.55; margin-bottom: 16px; }

/* ── EntityListRow (formalised product-card) ── */
/* Uses the existing .product-card vocabulary — new classes mapped
   to the existing rules so migration is incremental. */
.vkx-list { display: flex; flex-direction: column; gap: 8px; }

/* ── Avatar primitive ── */
.vkx-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--r-pill);
    background: var(--brand-50); color: var(--brand-700);
    font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
    flex-shrink: 0;
    overflow: hidden;
}
.vkx-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vkx-avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.vkx-avatar.md { width: 32px; height: 32px; font-size: 12px; }
.vkx-avatar.lg { width: 40px; height: 40px; font-size: 14px; }
.vkx-avatar.xl { width: 56px; height: 56px; font-size: 18px; }
.vkx-avatar.brand { background: var(--brand-600); color: #FFFFFF; }
.vkx-avatar.slate { background: var(--slate-200); color: var(--slate-700); }

/* ── ActivityFeed primitive ── */
.vkx-feed { display: flex; flex-direction: column; }
.vkx-feed-item {
    display: flex; gap: 12px; padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
}
.vkx-feed-item:last-child { border-bottom: none; }
.vkx-feed-item:hover { background: var(--bg-subtle); text-decoration: none; }
.vkx-feed-icon {
    width: 28px; height: 28px; border-radius: var(--r-pill);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--bg-subtle); color: var(--text-muted);
    font-size: 13px;
    margin-top: 1px;
}
.vkx-feed-icon.brand   { background: var(--brand-50);    color: var(--brand-700); }
.vkx-feed-icon.success { background: var(--success-bg);  color: #15803D; }
.vkx-feed-icon.warn    { background: var(--warning-bg);  color: #B45309; }
.vkx-feed-icon.danger  { background: var(--danger-bg);   color: #B91C1C; }
.vkx-feed-icon.info    { background: var(--info-bg);     color: #1D4ED8; }
.vkx-feed-body { flex: 1; min-width: 0; line-height: 1.4; }
.vkx-feed-text { font-size: 13px; color: var(--text-strong); }
.vkx-feed-time { font-size: 11px; color: var(--text-subtle); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ── Form primitive ── */
.vkx-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.vkx-field-label {
    font-size: 13px; font-weight: 500; color: var(--text-strong);
    display: inline-flex; align-items: center; gap: 4px;
}
.vkx-field-label .req { color: var(--danger); font-weight: 600; }
.vkx-field-input,
.vkx-field input[type="text"],
.vkx-field input[type="email"],
.vkx-field input[type="password"],
.vkx-field input[type="tel"],
.vkx-field input[type="url"],
.vkx-field input[type="search"],
.vkx-field input[type="number"],
.vkx-field textarea,
.vkx-field select {
    width: 100%; padding: 9px 12px;
    font-size: 14px; font-family: inherit;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    color: var(--text-strong);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    line-height: 1.4;
}
.vkx-field textarea { resize: vertical; min-height: 88px; }
.vkx-field input:focus, .vkx-field textarea:focus, .vkx-field select:focus {
    border-color: var(--brand-500);
    box-shadow: var(--ring-brand);
}
.vkx-field.error input, .vkx-field.error textarea, .vkx-field.error select { border-color: var(--danger); }
.vkx-field.error input:focus, .vkx-field.error textarea:focus { box-shadow: var(--ring-danger); }
.vkx-field-help { font-size: 12px; color: var(--text-muted); }
.vkx-field-error { font-size: 12px; color: var(--danger); }

.vkx-field-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
    margin-bottom: 16px;
}
.vkx-field-group-title {
    font-size: 14px; font-weight: 600; color: var(--text-strong);
    margin-bottom: 4px;
}
.vkx-field-group-sub {
    font-size: 12px; color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ── DataTable primitive ──
   Wave 5: the wrap is the scroll container. Tables stay at their natural
   minimum width and scroll horizontally inside the card instead of pushing
   the whole page sideways. Sticky header keeps column labels visible on
   long lists. */
.vkx-table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    box-shadow: var(--sh-sm);
}
.vkx-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
    min-width: max-content;           /* don't crush columns; scroll instead */
}
.vkx-table thead th {
    padding: 11px 16px; text-align: left;
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
}
.vkx-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.vkx-table tbody tr:last-child td { border-bottom: none; }
.vkx-table tbody tr { transition: background 0.08s; }
.vkx-table tbody tr:hover td { background: var(--bg-subtle); }

/* Legacy `.data-table` — older pages still use this. Give it the same
   responsive wrap + sticky-header behaviour by wrapping at the element
   level when it has no explicit wrapper. Safer than nuking the class
   since we haven't migrated every admin page. */
.data-table { min-width: max-content; }
.data-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-subtle); }
.vkx-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Drawer primitive (right-side slide-out) ── */
.vkx-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.45);
    backdrop-filter: blur(2px);
    z-index: 90;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s;
}
.vkx-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.vkx-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(520px, 100%);
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: var(--sh-xl);
    z-index: 91;
    transform: translateX(100%);
    transition: transform 0.22s ease-out;
    display: flex; flex-direction: column;
}
.vkx-drawer.open { transform: translateX(0); }
.vkx-drawer-header {
    padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-bottom: 1px solid var(--border);
}
.vkx-drawer-title { font-size: 15px; font-weight: 600; color: var(--text-strong); margin: 0; }
.vkx-drawer-close {
    background: transparent; border: none;
    width: 28px; height: 28px; border-radius: var(--r-sm);
    color: var(--text-muted); cursor: pointer; font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: inherit;
}
.vkx-drawer-close:hover { background: var(--bg-subtle); color: var(--text-strong); }
.vkx-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.vkx-drawer-footer {
    padding: 12px 18px; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    background: var(--bg-subtle);
}

/* ── Stat list (key-value rows) ──
   Round 8 — grid columns instead of flex+space-between. The old layout
   pushed values flush to the right edge of the card, leaving a stretched
   gap between label and value on wide aside cards. The grid pins labels
   to a fixed 110-130px column and lets the value start immediately
   after, so contact-detail values read like proper key/value pairs
   instead of two columns drifting apart.
   Round 9 — also gain horizontal padding so rows don't sit flush against
   the card edge. .vkx-data-card-body has only 4px vertical padding by
   default (the `padded` modifier adds horizontal but the stat-list
   block is rendered without that modifier inside contacts/show), so the
   indent has to live on the list itself. */
.vkx-stat-list { display: flex; flex-direction: column; gap: 0; padding: 0 18px; }
.vkx-stat-row {
    display: grid;
    grid-template-columns: minmax(110px, 130px) 1fr;
    column-gap: 12px;
    align-items: baseline;
    padding: 10px 0; border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.vkx-stat-row:last-child { border-bottom: none; }
.vkx-stat-key { color: var(--text-muted); }
.vkx-stat-val { color: var(--text-strong); font-weight: 500; font-variant-numeric: tabular-nums; text-align: left; word-break: break-word; }
@media (max-width: 480px) {
    .vkx-stat-list { padding: 0 14px; }
    .vkx-stat-row {
        grid-template-columns: 1fr;
        row-gap: 2px;
    }
    .vkx-stat-val { padding-left: 2px; }
}

/* ── Dashboard-specific grid layout ── */
.vkx-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    min-width: 0;
}
.vkx-kpi-grid > * { min-width: 0; }
.vkx-dash-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    min-width: 0;
    align-items: stretch;
}
.vkx-dash-cols > * { min-width: 0; display: flex; flex-direction: column; }
/* Right column (Recent Activity) is a single tall card; let it fill the
   row height so its bottom lines up with the left column's last card. */
.vkx-dash-cols > * > .vkx-data-card { flex: 1 1 auto; }
/* Left column nests two cards (Top Contacts + Workflow Health) inside an
   inner flex wrapper. Make the wrapper fill the column and let the last
   inner card grow so Workflow Health's bottom edge lands on the same
   line as Recent Activity's. */
.vkx-dash-cols > * > div[style*="flex-direction: column"] { flex: 1 1 auto; }
.vkx-dash-cols > * > div[style*="flex-direction: column"] > .vkx-data-card:last-child { flex: 1 1 auto; }
@media (max-width: 1100px) {
    .vkx-dash-cols { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .vkx-dash-cols > *,
    .vkx-dash-cols > * > .vkx-data-card,
    .vkx-dash-cols > * > div[style*="flex-direction: column"],
    .vkx-dash-cols > * > div[style*="flex-direction: column"] > .vkx-data-card:last-child { flex: 0 0 auto; }
}

/* ── Settings → Security: Passkeys empty state ──
   Left-aligned compact row replacing the older centered block with a
   floating 40px key icon. Reads consistently with the rest of Settings,
   no excess whitespace. */
.vkx-passkey-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--bg-subtle);
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    color: var(--text-muted);
}
.vkx-passkey-empty svg { flex: 0 0 22px; color: var(--text-subtle); }
.vkx-passkey-empty p { margin: 0; font-size: 13px; line-height: 1.45; }

/* ── Team page row controls (settings/team.php Members table) ── */
.vkx-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
}
.vkx-row-actions form { margin: 0; }
.vkx-table-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 28px 6px 10px;
    line-height: 1.2;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.vkx-table-select:hover { border-color: var(--brand-600); }
.vkx-table-select:focus-visible {
    outline: none;
    border-color: var(--brand-600);
    box-shadow: var(--ring-brand);
}
/* Outline-style danger button — pairs visually with .btn-outline so the
   row's two controls share a height and weight, but uses the danger
   palette for affordance. Solid btn-danger looked too heavy next to a
   tiny role select in the team table. */
.vkx-btn-danger-outline {
    color: var(--danger);
    border-color: #FCA5A5;
}
.vkx-btn-danger-outline:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
}

/* ── Button primitive overrides for the new scale ── */
.btn {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--r-md);
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, color 0.12s;
}
.btn:focus-visible { box-shadow: var(--ring-brand); outline: none; }
.btn-primary { background: var(--brand-600); color: #FFFFFF; border: 1px solid var(--brand-600); }
.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); transform: none; color: #FFFFFF; }
.btn-outline { background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-strong); }
.btn-outline:hover { background: var(--bg-subtle); border-color: var(--border-strong); color: var(--text-strong); }
.btn-sm { padding: 5px 10px; font-size: 12px; height: auto; }
.btn-lg { padding: 11px 20px; font-size: 14px; }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg-subtle); color: var(--text-strong); }

/* ── Alert refresh ── */
.alert {
    padding: 12px 14px; border-radius: var(--r-md);
    margin-bottom: 16px; font-size: 13px; line-height: 1.5;
    display: flex; align-items: flex-start; gap: 10px;
    border: 1px solid;
}
.alert-success { background: var(--success-bg); color: #15803D; border-color: #86EFAC; }
.alert-error   { background: var(--danger-bg);  color: #B91C1C; border-color: #FCA5A5; }
.alert-warning { background: var(--warning-bg); color: #B45309; border-color: #FCD34D; }

/* ══════════════════════════════════════════════════════════════
   WAVE 2 — dashboard hierarchy + richer primitives
══════════════════════════════════════════════════════════════ */

/* ── Hero panel (Needs attention) ──
   Top-of-page focal point. Stronger border, gentle blue tint on the
   inline spine, elevated shadow, 700 title weight. Collapses into a
   slim success bar when there is nothing to act on. */
.vkx-hero {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    margin-bottom: 20px;
}
.vkx-hero::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--brand-600) 0%, var(--brand-500) 60%, rgba(37,99,235,0.3) 100%);
}
.vkx-hero-header {
    padding: 14px 20px 10px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-bottom: 1px solid var(--border);
}
.vkx-hero-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: var(--text-strong);
    letter-spacing: -0.01em;
}
.vkx-hero-title [class^="icon-"] { color: var(--brand-600); font-size: 16px; }
.vkx-hero-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 8px;
    background: var(--brand-600); color: #FFFFFF;
    border-radius: var(--r-pill);
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vkx-hero-body { display: flex; flex-direction: column; }
.vkx-hero-row {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
    transition: background 0.12s;
}
.vkx-hero-row:last-child { border-bottom: none; }
.vkx-hero-row:hover { background: var(--bg-subtle); text-decoration: none; }
.vkx-hero-tier {
    width: 4px; align-self: stretch; border-radius: var(--r-pill);
    flex-shrink: 0;
}
.vkx-hero-tier.overdue { background: var(--danger); }
.vkx-hero-tier.soon    { background: var(--warning); }
.vkx-hero-tier.open    { background: var(--brand-500); }
.vkx-hero-icon {
    width: 30px; height: 30px; border-radius: var(--r-sm);
    background: var(--bg-subtle); color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 14px;
}
.vkx-hero-icon.overdue { background: var(--danger-bg);  color: #B91C1C; }
.vkx-hero-icon.soon    { background: var(--warning-bg); color: #B45309; }
.vkx-hero-icon.open    { background: var(--brand-50);   color: var(--brand-700); }
.vkx-hero-body-main { flex: 1; min-width: 0; }
.vkx-hero-text {
    font-size: 13px; font-weight: 600; color: var(--text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vkx-hero-sub {
    font-size: 11px; color: var(--text-muted); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vkx-hero-sub .sep { margin: 0 5px; color: var(--text-subtle); }
.vkx-hero-meta {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    flex-shrink: 0;
}
.vkx-hero-meta.overdue { color: var(--danger); }
.vkx-hero-meta.soon    { color: var(--warning); }
.vkx-hero-chev {
    color: var(--text-subtle); font-size: 14px; flex-shrink: 0;
    transition: transform 0.15s, color 0.15s;
}
.vkx-hero-row:hover .vkx-hero-chev { color: var(--text-muted); transform: translateX(2px); }

/* Collapsed "all clear" state */
.vkx-hero.clear { background: var(--bg-card); }
.vkx-hero.clear::before { background: linear-gradient(90deg, var(--success) 0%, #86EFAC 100%); }
.vkx-hero-clear {
    padding: 14px 20px;
    display: flex; align-items: center; gap: 12px;
}
.vkx-hero-clear-icon {
    width: 32px; height: 32px; border-radius: var(--r-pill);
    background: var(--success-bg); color: #15803D;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.vkx-hero-clear-body { flex: 1; }
.vkx-hero-clear-title { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.vkx-hero-clear-sub   { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

/* ── Richer KPI card (Wave 2 variant) ── */
.vkx-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 12px;
    box-shadow: var(--sh-xs);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    text-decoration: none; color: inherit;
    position: relative; overflow: hidden;
    min-width: 0;
}
a.vkx-kpi:hover { border-color: var(--border-strong); box-shadow: var(--sh-sm); text-decoration: none; }
.vkx-kpi-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.vkx-kpi-label {
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 6px;
    letter-spacing: 0;
}
.vkx-kpi-label [class^="icon-"] { color: var(--brand-600); font-size: 14px; }
.vkx-kpi-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vkx-kpi-delta.up   { color: var(--success); }
.vkx-kpi-delta.down { color: var(--danger); }
.vkx-kpi-delta.flat { color: var(--text-subtle); }
.vkx-kpi-value {
    font-size: 34px; font-weight: 700; color: var(--text-strong);
    line-height: 1; letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    margin: 2px 0 0;
    font-feature-settings: 'tnum', 'ss01';
}
.vkx-kpi-sub {
    font-size: 11px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; gap: 5px;
}
.vkx-kpi-sub .pill {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 7px; background: var(--bg-subtle);
    border-radius: var(--r-pill); font-size: 10px; font-weight: 600;
    color: var(--text-muted);
}
.vkx-kpi-sub .pill.warn { background: var(--warning-bg); color: #B45309; }
.vkx-kpi-sub .pill.danger { background: var(--danger-bg); color: #B91C1C; }
.vkx-kpi-sub .pill.brand { background: var(--brand-50); color: var(--brand-700); }

/* Tiny 7-column dot/bar sparkline for weekly activity signal */
.vkx-kpi-spark {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
    height: 18px; align-items: end;
    margin-top: 2px;
}
.vkx-kpi-spark > span {
    display: block;
    background: var(--brand-500);
    border-radius: 2px;
    min-height: 3px;
    opacity: 0.85;
}
.vkx-kpi-spark > span.empty { background: var(--bg-muted); opacity: 1; min-height: 3px; height: 3px; }

/* Progress bar (storage) */
.vkx-kpi-progress {
    height: 5px; background: var(--bg-muted);
    border-radius: var(--r-pill); overflow: hidden;
}
.vkx-kpi-progress > span { display: block; height: 100%; background: var(--brand-600); border-radius: inherit; transition: width 0.3s; }
.vkx-kpi-progress.warn > span   { background: var(--warning); }
.vkx-kpi-progress.danger > span { background: var(--danger); }

/* ── Grouped activity feed ── */
.vkx-feed-group-label {
    padding: 10px 18px 6px;
    font-size: 10px; font-weight: 700;
    color: var(--text-subtle);
    text-transform: uppercase; letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
}
.vkx-feed-group-label:first-child { border-top: none; }
.vkx-feed-item-dense {
    display: flex; gap: 10px; padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
    align-items: flex-start;
}
.vkx-feed-item-dense:last-child { border-bottom: none; }
.vkx-feed-item-dense:hover { background: var(--bg-subtle); text-decoration: none; }
.vkx-feed-dot {
    width: 7px; height: 7px; border-radius: 50%;
    margin-top: 6px; flex-shrink: 0;
    background: var(--text-subtle);
}
.vkx-feed-dot.brand   { background: var(--brand-500); }
.vkx-feed-dot.success { background: var(--success); }
.vkx-feed-dot.warn    { background: var(--warning); }
.vkx-feed-dot.danger  { background: var(--danger); }
.vkx-feed-dot.info    { background: #3B82F6; }
.vkx-feed-item-dense .body { flex: 1; min-width: 0; }
.vkx-feed-item-dense .text {
    font-size: 13px; color: var(--text-strong); line-height: 1.4;
}
.vkx-feed-item-dense .cat {
    display: inline-block; padding: 0 6px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-right: 4px;
}
.vkx-feed-item-dense .time {
    font-size: 11px; color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

/* ── CRM-style contact row ── */
.vkx-contact-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
    transition: background 0.12s;
}
.vkx-contact-row:last-child { border-bottom: none; }
.vkx-contact-row:hover { background: var(--bg-subtle); text-decoration: none; }
.vkx-contact-row .body { flex: 1; min-width: 0; }
.vkx-contact-row .name {
    font-size: 13px; font-weight: 600; color: var(--text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.3;
}
.vkx-contact-row .meta {
    font-size: 11px; color: var(--text-muted);
    margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.35;
}
.vkx-contact-row .meta .sep { color: var(--text-subtle); margin: 0 5px; }
.vkx-contact-row .trailing {
    text-align: right; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.vkx-contact-row .trailing .pending-pill {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 7px; border-radius: var(--r-pill);
    background: var(--warning-bg); color: #B45309;
    font-size: 10px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vkx-contact-row .trailing .last-seen {
    font-size: 11px; color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

/* ── Trust strip (thin horizontal trust cues at page bottom) ── */
.vkx-trust-strip {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-top: 20px;
    font-size: 12px;
    color: var(--text-muted);
}
.vkx-trust-strip .item { display: inline-flex; align-items: center; gap: 8px; }
.vkx-trust-strip .item [class^="icon-"] { color: var(--success); font-size: 14px; }
.vkx-trust-strip .item strong { color: var(--text-strong); font-weight: 600; }
.vkx-trust-strip .item a { color: var(--text-muted); text-decoration: none; }
.vkx-trust-strip .item a:hover { color: var(--text-strong); text-decoration: underline; }
.vkx-trust-strip .divider { width: 1px; height: 16px; background: var(--border); }

/* ══════════════════════════════════════════════════════════════
   WAVE 2 — detail page primitives (CRM profile, workflow panels)
══════════════════════════════════════════════════════════════ */

/* Profile header (detail pages) — avatar + name + meta + actions */
.vkx-profile-head {
    display: flex; align-items: flex-start; gap: 18px;
    padding: 20px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    margin-bottom: 20px;
}
.vkx-profile-head .vkx-avatar { width: 64px; height: 64px; font-size: 20px; font-weight: 700; }
.vkx-profile-head-main { flex: 1; min-width: 0; }
.vkx-profile-head-eyebrow {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-subtle); margin-bottom: 3px;
}
.vkx-profile-head-name {
    font-size: 22px; font-weight: 700; color: var(--text-strong);
    line-height: 1.2; letter-spacing: -0.01em;
    margin: 0;
}
.vkx-profile-head-meta {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    font-size: 13px; color: var(--text-muted); margin-top: 6px;
}
.vkx-profile-head-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.vkx-profile-head-meta [class^="icon-"] { font-size: 13px; color: var(--text-subtle); }
.vkx-profile-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Tabs (used on detail pages below profile head) */
.vkx-tabs {
    display: flex; align-items: center; gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.vkx-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; margin-bottom: -1px;
    font-size: 13px; font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.12s, border-color 0.12s;
}
.vkx-tab:hover { color: var(--text-strong); text-decoration: none; }
.vkx-tab.active { color: var(--brand-600); border-bottom-color: var(--brand-600); font-weight: 600; }
.vkx-tab .count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 10px; font-weight: 700; border-radius: var(--r-pill);
    background: var(--bg-subtle); color: var(--text-muted);
}
.vkx-tab.active .count { background: var(--brand-50); color: var(--brand-700); }

/* Detail 2-column layout: main + aside */
.vkx-detail-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
    min-width: 0;
}
.vkx-detail-cols > * { min-width: 0; }
@media (max-width: 1100px) {
    .vkx-detail-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Section heading inside detail pages */
.vkx-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px;
}
.vkx-section-title {
    font-size: 13px; font-weight: 600; color: var(--text-strong);
    display: inline-flex; align-items: center; gap: 6px;
}
.vkx-section-title [class^="icon-"] { font-size: 14px; color: var(--text-muted); }

/* Timeline (audit trail) */
/* R172 Part C — audit timeline alignment.
   Pre-R172 geometry placed the vertical line center at 27px from
   the timeline container's left edge while the marker circles
   centered at 24px, leaving the dots visually offset to the left
   of the line by ~3px on every audit row across E-Sign / Secure
   Receive / Secure Share / Secure Exchange.

   Fix: shift the circle right by 3px (left: -22px → -19px). The
   container has padding-left: 40px, so the circle now spans
   x = 21..33 with center at x = 27, matching the line center at
   x = 27. */
.vkx-timeline { position: relative; padding: 18px 20px 18px 40px; }
.vkx-timeline::before {
    content: ''; position: absolute; left: 26px; top: 22px; bottom: 22px;
    width: 2px; background: var(--border);
}
.vkx-timeline-item { position: relative; padding-bottom: 16px; }
.vkx-timeline-item:last-child { padding-bottom: 0; }
.vkx-timeline-item::before {
    content: ''; position: absolute;
    left: -19px; top: 4px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--bg-card); border: 2px solid var(--text-subtle);
    box-sizing: border-box;
    z-index: 1;
}
.vkx-timeline-item.brand::before   { border-color: var(--brand-600); background: var(--bg-card); }
.vkx-timeline-item.success::before { border-color: var(--success); background: var(--success); }
.vkx-timeline-item.warn::before    { border-color: var(--warning); background: var(--bg-card); }
.vkx-timeline-item.danger::before  { border-color: var(--danger); background: var(--bg-card); }
.vkx-timeline-item.info::before    { border-color: #3B82F6; background: var(--bg-card); }
.vkx-timeline-head {
    font-size: 13px; color: var(--text-strong); line-height: 1.45;
    font-weight: 500;
}
.vkx-timeline-head strong { font-weight: 600; }
.vkx-timeline-meta {
    font-size: 11px; color: var(--text-subtle);
    margin-top: 3px; font-variant-numeric: tabular-nums;
    display: inline-flex; gap: 10px; flex-wrap: wrap;
}
.vkx-timeline-meta code {
    font-family: var(--font-mono); font-size: 10px;
    background: var(--bg-subtle); padding: 1px 5px; border-radius: 4px;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════
   WAVE 3 — deep detail-page primitives
══════════════════════════════════════════════════════════════ */

/* Pipeline stepper — document state progression (Draft → Sent → In Progress → Completed) */
.vkx-pipeline {
    display: flex; align-items: center; gap: 0;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    margin-bottom: 20px;
    overflow-x: auto;
}
.vkx-pipeline-step {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 0 4px;
}
.vkx-pipeline-dot {
    width: 26px; height: 26px; border-radius: var(--r-pill);
    background: var(--bg-muted); color: var(--text-subtle);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    border: 2px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.vkx-pipeline-step.done .vkx-pipeline-dot {
    background: var(--success); color: #FFFFFF; border-color: var(--success);
}
.vkx-pipeline-step.current .vkx-pipeline-dot {
    background: var(--brand-600); color: #FFFFFF; border-color: var(--brand-600);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.18);
}
.vkx-pipeline-step.current .vkx-pipeline-label { color: var(--text-strong); font-weight: 600; }
.vkx-pipeline-label {
    font-size: 12px; font-weight: 500; color: var(--text-muted);
    white-space: nowrap;
}
.vkx-pipeline-step.done .vkx-pipeline-label { color: var(--text); }
.vkx-pipeline-arrow {
    flex: 1; min-width: 24px; height: 2px;
    background: var(--border);
    margin: 0 6px;
}
.vkx-pipeline-step.done + .vkx-pipeline-arrow,
.vkx-pipeline-arrow.done { background: var(--success); }

/* Signer row — detail view of a participant */
.vkx-signer {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.vkx-signer:last-child { border-bottom: none; }
.vkx-signer-order {
    width: 28px; height: 28px; border-radius: var(--r-pill);
    background: var(--bg-subtle); color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.vkx-signer.signed .vkx-signer-order {
    background: var(--success); color: #FFFFFF;
}
.vkx-signer.signed .vkx-signer-order::before { content: '\2713'; }
.vkx-signer.signed .vkx-signer-order span { display: none; }
.vkx-signer-body { flex: 1; min-width: 0; }
.vkx-signer-name {
    font-size: 14px; font-weight: 600; color: var(--text-strong);
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vkx-signer-email {
    font-size: 12px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vkx-signer-stamp {
    font-size: 11px; color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.vkx-signer-trailing { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

/* File row — detail list of files in a share/receive/exchange */
.vkx-file-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
}
.vkx-file-row:last-child { border-bottom: none; }
.vkx-file-row:hover { background: var(--bg-subtle); text-decoration: none; }
.vkx-file-icon {
    width: 34px; height: 34px; border-radius: var(--r-sm);
    background: var(--brand-50); color: var(--brand-700);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.vkx-file-body { flex: 1; min-width: 0; }
.vkx-file-name {
    font-size: 13px; font-weight: 600; color: var(--text-strong);
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vkx-file-meta {
    font-size: 11px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    display: inline-flex; gap: 10px;
}
.vkx-file-action {
    flex-shrink: 0; font-size: 11px; color: var(--text-subtle);
}

/* Business-value metric strip — small inline stats on detail pages */
.vkx-metric-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--sh-sm);
}
.vkx-metric-strip-item {
    padding: 14px 18px;
    border-right: 1px solid var(--border);
}
.vkx-metric-strip-item:last-child { border-right: none; }
.vkx-metric-strip-label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.vkx-metric-strip-value {
    font-size: 22px; font-weight: 700; color: var(--text-strong);
    line-height: 1.1; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.vkx-metric-strip-sub {
    display: inline-block; margin-left: 4px;
    font-size: 11px; font-weight: 500; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
    .vkx-metric-strip-item { border-right: none; border-bottom: 1px solid var(--border); }
    .vkx-metric-strip-item:last-child { border-bottom: none; }
}

/* Certificate / audit-integrity panel */
.vkx-certificate {
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(37,99,235,0.04) 0%, rgba(37,99,235,0.01) 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    display: flex; gap: 16px; align-items: flex-start;
}
.vkx-certificate-icon {
    width: 40px; height: 40px; border-radius: var(--r-md);
    background: var(--brand-600); color: #FFFFFF;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.vkx-certificate-body { flex: 1; min-width: 0; }
.vkx-certificate-title {
    font-size: 14px; font-weight: 600; color: var(--text-strong);
    letter-spacing: -0.005em;
}
.vkx-certificate-sub {
    font-size: 12px; color: var(--text-muted); margin-top: 4px;
    line-height: 1.55;
}
.vkx-certificate-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 20px; margin-top: 12px;
    font-size: 12px;
}
.vkx-certificate-grid dt { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-bottom: 2px; }
.vkx-certificate-grid dd { color: var(--text-strong); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Subdued "muted" info rows used on detail asides for key stats */
.vkx-kv-row {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 9px 0; font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.vkx-kv-row:last-child { border-bottom: none; }
.vkx-kv-row .k { color: var(--text-muted); font-size: 12px; }
.vkx-kv-row .v { color: var(--text-strong); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }

/* ── Smart empty states (Wave 4) ──
   Larger iconography, action guidance, optional secondary "learn more" link. */
.vkx-empty.smart {
    padding: 56px 28px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--r-lg);
}
.vkx-empty.smart .vkx-empty-icon {
    width: 64px; height: 64px;
    background: var(--brand-50); color: var(--brand-700);
    font-size: 28px;
    margin-bottom: 18px;
    box-shadow: 0 0 0 6px rgba(37,99,235,0.06);
}
.vkx-empty.smart .vkx-empty-title {
    font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.vkx-empty.smart .vkx-empty-body {
    font-size: 13px; color: var(--text-muted); max-width: 480px; line-height: 1.6;
    margin-bottom: 20px;
}
.vkx-empty.smart .vkx-empty-learn {
    margin-top: 12px;
    font-size: 12px; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 4px;
}
.vkx-empty.smart .vkx-empty-learn a {
    color: var(--brand-600); font-weight: 500;
    display: inline-flex; align-items: center; gap: 3px;
}

/* Inline/small empty-state for nested scopes (inside a data-card body) */
.vkx-empty.inline {
    padding: 28px 20px;
    border: none; background: transparent;
    text-align: center;
}
.vkx-empty.inline .vkx-empty-icon {
    width: 40px; height: 40px; font-size: 18px; margin-bottom: 10px;
}
.vkx-empty.inline .vkx-empty-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.vkx-empty.inline .vkx-empty-body { font-size: 12px; margin-bottom: 12px; }

/* ── Settings shell ──
   Two-column settings layout: left sub-nav + right content. Uses its own
   inner nav since the global sidebar already carries the "Settings" item. */
.vkx-settings-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    min-width: 0;
}
.vkx-settings-shell > * { min-width: 0; }
@media (max-width: 900px) {
    .vkx-settings-shell { grid-template-columns: minmax(0, 1fr); }
    .vkx-settings-nav { position: static; }
}
.vkx-settings-nav {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 8px;
    box-shadow: var(--sh-xs);
    position: sticky; top: 76px;
}
.vkx-settings-nav-group {
    padding: 8px 10px 4px;
    font-size: 10px; font-weight: 700;
    color: var(--text-subtle);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.vkx-settings-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    font-size: 13px; color: var(--text);
    text-decoration: none; border-radius: var(--r-sm);
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}
.vkx-settings-nav a:hover { background: var(--bg-subtle); color: var(--text-strong); text-decoration: none; }
.vkx-settings-nav a.active {
    background: var(--brand-50); color: var(--brand-700);
    font-weight: 600;
}
.vkx-settings-nav a [class^="icon-"] {
    font-size: 14px; color: inherit; flex-shrink: 0; width: 16px; text-align: center;
}
.vkx-settings-nav a.active [class^="icon-"] { color: var(--brand-600); }
.vkx-settings-content { min-width: 0; }

/* Section heading used inside settings pages to group fields */
.vkx-settings-section {
    margin-bottom: 24px;
}
.vkx-settings-section + .vkx-settings-section {
    border-top: 1px solid var(--border);
    padding-top: 24px;
}

/* Attention banner — single-line CTA strip ("3 reminders scheduled", "expiring in 12h", etc.) */
.vkx-attention {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--warning-bg);
    border: 1px solid #FCD34D;
    border-radius: var(--r-md);
    margin-bottom: 20px;
    font-size: 13px;
    color: #92400E;
}
.vkx-attention.info    { background: var(--brand-50); border-color: rgba(37,99,235,0.25); color: var(--brand-700); }
.vkx-attention.success { background: var(--success-bg); border-color: #86EFAC; color: #15803D; }
.vkx-attention.danger  { background: var(--danger-bg); border-color: #FCA5A5; color: #B91C1C; }
.vkx-attention [class^="icon-"] { font-size: 16px; flex-shrink: 0; }
.vkx-attention .body { flex: 1; line-height: 1.5; }

/* ──────────────────────────────────────────────────────────────
   R119 — Bounded note-textarea autosize.
   Opt-in via class="vkx-autosize" on a <textarea>. Disables the
   browser's manual drag-resize handle, keeps the textarea inside
   its container, and pairs with the matching JS in public/js/app.js
   which grows height with content up to max-height (then switches
   to internal scroll). Intentionally NOT a global "textarea {…}"
   rule — large freeform editors (support reply, e-sign decline
   reason) keep their explicit resize:vertical styles.
   ────────────────────────────────────────────────────────────── */
textarea.vkx-autosize {
    resize: none;
    overflow-y: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 80px;
    max-height: 360px;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.vkx-attention .body strong { font-weight: 700; }