/* =========================================================================
   SaaS Platform — Console Design System
   -------------------------------------------------------------------------
   Structure of this file:
     1. Tokens          — the only place raw values live
     2. Reset + type    — base element styles
     3. Primitives      — buttons, fields, badges, chips, alerts
     4. App shell       — topbar, sidebar, content column
     5. Blocks          — page header, cards, stats, tables, meters
     6. Features        — datasets, docs, APIs, integration, chat, detail
     7. Responsive + motion

   Everything below reads from the token layer, so a theme is a token swap
   (see [data-theme="light"]) rather than a rewrite.
   ========================================================================= */

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
    /* --- Neutral ramp. Slightly blue-cast; pure black reads flat on screens. */
    --n-950: #08090c;
    --n-900: #0c0e13;
    --n-850: #11141a;
    --n-800: #161922;
    --n-750: #1c2029;
    --n-700: #252a35;
    --n-600: #333947;
    --n-500: #4a5162;

    /* --- Brand */
    --brand-700: #6d28d9;
    --brand-600: #7c3aed;
    --brand-500: #8b5cf6;
    --brand-400: #a78bfa;
    --brand-300: #c4b5fd;

    /* --- Status */
    --green-500: #22c55e;
    --green-400: #4ade80;
    --amber-500: #f59e0b;
    --red-500: #ef4444;
    --red-400: #f87171;
    --blue-500: #3b82f6;

    /* --- Semantic surfaces (what components actually reference) */
    --canvas: var(--n-950);
    --surface: var(--n-850);
    --surface-raised: var(--n-800);
    --surface-sunken: var(--n-900);
    --surface-hover: rgba(255, 255, 255, 0.04);
    --surface-active: rgba(255, 255, 255, 0.07);
    --chrome: rgba(10, 12, 16, 0.85);

    /* --- Semantic text */
    --text: #eef0f4;
    --text-strong: #ffffff;
    --text-muted: #a2a9b7;
    --text-subtle: #6d7484;

    /* --- Borders + accents */
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.13);
    --field-bg: rgba(255, 255, 255, 0.035);
    --field-bg-focus: rgba(255, 255, 255, 0.06);
    /* Meter/progress groove. Needs more presence than --surface-active, which
       disappears against a dark card at 6px tall. */
    --track: var(--n-700);

    --accent: var(--brand-500);
    --accent-hover: var(--brand-600);
    --accent-text: #ffffff;
    --accent-soft: rgba(139, 92, 246, 0.14);
    --accent-line: rgba(139, 92, 246, 0.32);
    --on-accent-muted: var(--brand-300);

    --success: var(--green-400);
    --success-soft: rgba(34, 197, 94, 0.13);
    --warning: var(--amber-500);
    --warning-soft: rgba(245, 158, 11, 0.13);
    --danger: var(--red-400);
    --danger-soft: rgba(239, 68, 68, 0.13);
    --info: var(--blue-500);
    --info-soft: rgba(59, 130, 246, 0.13);

    /* --- Spacing: 4px grid. Use these, not ad-hoc rem values. */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;

    /* --- Type scale */
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.875rem;
    --fs-md: 0.9375rem;
    --fs-lg: 1.0625rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Menlo', monospace;

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

    /* --- Elevation */
    --e-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --e-2: 0 4px 12px -2px rgba(0, 0, 0, 0.45);
    --e-3: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
    --ring: 0 0 0 3px rgba(139, 92, 246, 0.28);

    /* --- Layout metrics. Referenced by sticky offsets — keep in sync. */
    --topbar-h: 56px;
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 68px;
    /* Wide enough that a 2500px screen reads as margin rather than dead space,
       while still capping line length on an ultrawide. */
    --content-max: 2100px;
    /* Width of the overview's support rail. Also the figure the two-column
       breakpoint below is derived from. */
    --rail-w: 400px;

    /* --- Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.12s;
    --dur: 0.2s;

    /* Back-compat aliases: older markup still references these names. */
    --primary: var(--accent);
    --primary-hover: var(--accent-hover);
    --primary-soft: var(--accent-soft);
    --text-main: var(--text);
    --text-dim: var(--text-subtle);
    --surface-2: var(--surface);
    --surface-solid: var(--surface-raised);
    --input-bg: var(--field-bg);
    --error: var(--danger);
    --error-soft: var(--danger-soft);
    --radius-sm: var(--r-md);
    --radius: var(--r-lg);
    --radius-lg: var(--r-lg);
    --radius-xl: var(--r-xl);
    --shadow: var(--e-2);
    --shadow-lg: var(--e-3);
}

/* Light theme: same components, swapped tokens. Toggled by the topbar button,
   which writes data-theme onto <html> and persists it in localStorage. */
[data-theme="light"] {
    --canvas: #f6f7f9;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #f1f3f6;
    --surface-hover: rgba(15, 23, 42, 0.04);
    --surface-active: rgba(15, 23, 42, 0.07);
    --chrome: rgba(255, 255, 255, 0.88);

    --text: #1b2130;
    --text-strong: #0b0f18;
    --text-muted: #5a6377;
    --text-subtle: #858da0;

    --border: rgba(15, 23, 42, 0.09);
    --border-strong: rgba(15, 23, 42, 0.16);
    --field-bg: #ffffff;
    --field-bg-focus: #ffffff;
    --track: rgba(15, 23, 42, 0.13);

    --accent: var(--brand-600);
    --accent-hover: var(--brand-700);
    --accent-soft: rgba(124, 58, 237, 0.1);
    --accent-line: rgba(124, 58, 237, 0.25);
    --on-accent-muted: var(--brand-700);

    --success: #15803d;
    --success-soft: rgba(34, 197, 94, 0.14);
    --warning: #b45309;
    --warning-soft: rgba(245, 158, 11, 0.16);
    --danger: #b91c1c;
    --danger-soft: rgba(239, 68, 68, 0.12);
    --info: #1d4ed8;
    --info-soft: rgba(59, 130, 246, 0.12);

    --e-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --e-2: 0 4px 12px -2px rgba(15, 23, 42, 0.1);
    --e-3: 0 12px 32px -8px rgba(15, 23, 42, 0.16);
}

/* =========================================================================
   2. RESET + TYPOGRAPHY
   ========================================================================= */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    background: var(--canvas);
}

body {
    font-family: var(--font);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--canvas);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 650;
    line-height: 1.25;
    color: var(--text-strong);
    letter-spacing: -0.015em;
}

h1 {
    font-size: var(--fs-3xl);
}

h2 {
    font-size: var(--fs-2xl);
}

h3 {
    font-size: var(--fs-lg);
}

h4 {
    font-size: var(--fs-md);
}

p {
    line-height: 1.6;
}

.subtitle {
    color: var(--text-muted);
    font-size: var(--fs-base);
}

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

.mono,
code,
kbd,
pre {
    font-family: var(--font-mono);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

a:hover {
    color: var(--accent-hover);
}

::selection {
    background: var(--accent-soft);
    color: var(--text-strong);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Scrollbars — themed so the dark chrome doesn't get a bright OS scrollbar. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--n-700) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--r-full);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--text-subtle);
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* =========================================================================
   3. PRIMITIVES
   ========================================================================= */

/* --- Buttons ------------------------------------------------------------ */
.btn-primary,
.btn-secondary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.55rem 0.95rem;
    border-radius: var(--r-md);
    font-family: inherit;
    font-weight: 550;
    font-size: var(--fs-base);
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
        color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.btn-primary svg,
.btn-secondary svg,
.btn-ghost svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-primary {
    background: var(--accent);
    color: var(--accent-text);
    box-shadow: var(--e-1);
}

.btn-primary:hover {
    background: var(--accent-hover);
    color: var(--accent-text);
    box-shadow: var(--e-2);
}

.btn-secondary {
    background: var(--surface-raised);
    color: var(--text);
    border-color: var(--border-strong);
}

.btn-secondary:hover {
    background: var(--surface-active);
    color: var(--text-strong);
    border-color: var(--text-subtle);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover {
    background: var(--surface-hover);
    color: var(--text-strong);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-danger-sm,
.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 0.3rem 0.6rem;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 550;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn-danger-sm {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid transparent;
}

.btn-danger-sm:hover {
    background: var(--danger);
    color: #fff;
}

.w-100 {
    width: 100%;
}

/* Icon-only control used in the topbar and for row actions. */
.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.icon-btn:hover {
    background: var(--surface-hover);
    color: var(--text-strong);
}

.icon-btn svg {
    width: 18px;
    height: 18px;
}

/* The theme button swaps its two icons via the hidden attribute. SVG is not in
   the HTML namespace, so this is stated rather than left to the UA stylesheet. */
.icon-btn svg[hidden] {
    display: none;
}

/* --- Fields ------------------------------------------------------------- */
.form-group {
    margin-bottom: var(--sp-4);
    text-align: left;
}

.form-group label,
.field-label,
.embed-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea,
.inline-form input,
.detail-form input,
.detail-form select,
.api-form input[type="text"],
.dataset-name-input,
.field-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--field-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: 1.4;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        background var(--dur) var(--ease);
}

.form-group input::placeholder,
.inline-form input::placeholder,
.detail-form input::placeholder,
.api-form input[type="text"]::placeholder,
.dataset-name-input::placeholder,
.field-input::placeholder {
    color: var(--text-subtle);
}

.form-group input:hover,
.form-group select:hover,
.inline-form input:hover,
.detail-form input:hover,
.detail-form select:hover,
.dataset-name-input:hover {
    border-color: var(--text-subtle);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.inline-form input:focus,
.detail-form input:focus,
.detail-form select:focus,
.api-form input[type="text"]:focus,
.dataset-name-input:focus,
.field-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--field-bg-focus);
    box-shadow: var(--ring);
}

.form-group input:disabled,
.dataset-name-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Selects: native arrow removed, replaced with a token-coloured chevron so the
   control matches text inputs in both themes. */
.form-group select,
.detail-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2a9b7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 15px;
}

/* The popup list is painted by the OS and does not inherit the control's
   background, so it is set explicitly. */
.form-group select option,
.detail-form select option {
    background: var(--surface-raised);
    color: var(--text);
}

.form-group select option:checked {
    background: var(--accent);
    color: #fff;
}

.form-group select option[value=""] {
    color: var(--text-subtle);
}

.form-group input[type="date"],
.detail-form input[type="date"] {
    color-scheme: dark;
}

[data-theme="light"] .form-group input[type="date"],
[data-theme="light"] .detail-form input[type="date"] {
    color-scheme: light;
}

.form-help,
.cap-note {
    display: block;
    margin-top: 0.35rem;
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    line-height: 1.5;
}

.form-help ul {
    margin: 0.35rem 0 0 1rem;
}

.form-error {
    margin-top: 0.35rem;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--danger);
}

.form-actions {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-4) var(--sp-5);
}

.field-grid .form-group {
    margin-bottom: 0;
}

.field-grid .full {
    grid-column: 1 / -1;
}

.form-section-title {
    font-size: var(--fs-md);
    font-weight: 600;
    margin-bottom: var(--sp-1);
    color: var(--text-strong);
}

/* Toggle field: label left, switch right, on one row. */
.form-group--toggle {
    display: flex;
    align-items: center;
}

.switch-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

.switch-label input[type="checkbox"] {
    width: 38px;
    height: 21px;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.form-group--toggle select {
    min-width: 110px;
}

/* File inputs ------------------------------------------------------------ */
.file-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.file-row input[type="file"] {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    background: var(--field-bg);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.file-row input[type="file"]::file-selector-button {
    margin-right: var(--sp-3);
    padding: 0.35rem 0.75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 550;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}

.file-row input[type="file"]::file-selector-button:hover {
    background: var(--surface-active);
}

.remove-file {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-subtle);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}

.remove-file:hover {
    background: var(--danger-soft);
    border-color: transparent;
    color: var(--danger);
}

.add-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    background: transparent;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 550;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}

.add-file-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* Kept visible when a plan limit is hit, so the cap is legible rather than
   the control silently vanishing. */
.add-file-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.add-file-btn .plus {
    font-size: 1rem;
    line-height: 1;
}

.cap-note[hidden] {
    display: none;
}

/* --- Badges, chips, pills ----------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.badge-completed {
    background: var(--success-soft);
    color: var(--success);
}

.badge-pending {
    background: var(--warning-soft);
    color: var(--warning);
}

.badge-failed {
    background: var(--danger-soft);
    color: var(--danger);
}

.license-chip,
.integration-key {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-sm);
    color: var(--on-accent-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.pkg-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    border: 1px solid transparent;
}

.pkg-gold {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.4);
    color: var(--amber-500);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.pkg-silver {
    background: rgba(148, 163, 184, 0.16);
    border-color: rgba(148, 163, 184, 0.4);
    color: #94a3b8;
    box-shadow: 0 0 10px rgba(148, 163, 184, 0.4);
}

.pkg-bronze {
    background: rgba(139, 69, 19, 0.14);
    border-color: rgba(139, 69, 19, 0.4);
    color: #8b4513;
    box-shadow: 0 0 10px rgba(139, 69, 19, 0.4);
}

/* The tier an account starts on. Deliberately the quietest chip of the set —
   it marks a state to move out of, so it doesn't compete with the paid tiers. */
.pkg-free {
    background: var(--surface-sunken);
    border-color: var(--border-strong);
    color: var(--text-muted);
}

/* --- Alerts ------------------------------------------------------------- */
.messages {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6) 0;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: 0.7rem 0.95rem;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: var(--fs-base);
}

.alert-error {
    background: var(--danger-soft);
    border-left-color: var(--danger);
    color: var(--danger);
}

.alert-success {
    background: var(--success-soft);
    border-left-color: var(--success);
    color: var(--success);
}

.alert-info,
.alert-warning {
    background: var(--info-soft);
    border-left-color: var(--info);
    color: var(--info);
}

.alert-warning {
    background: var(--warning-soft);
    border-left-color: var(--warning);
    color: var(--warning);
}

/* =========================================================================
   4. APP SHELL
   ========================================================================= */

/* --- Topbar ------------------------------------------------------------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    height: var(--topbar-h);
    padding: 0 var(--sp-4);
    background: var(--chrome);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.nav-left {
    flex-shrink: 0;
}

.nav-right {
    margin-left: auto;
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-md);
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text-strong);
}

.nav-brand:hover {
    color: var(--text-strong);
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    background: linear-gradient(140deg, var(--brand-400), var(--brand-600));
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    box-shadow: var(--e-1);
}

.brand-mark svg {
    width: 16px;
    height: 16px;
}

/* Divider + current-section label, so the topbar states where you are. */
.nav-context {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    color: var(--text-subtle);
    font-size: var(--fs-base);
}

.nav-context::before {
    content: "";
    width: 1px;
    height: 18px;
    background: var(--border-strong);
}

.nav-context strong {
    font-weight: 550;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.nav-link {
    padding: 0.4rem 0.7rem;
    border-radius: var(--r-md);
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: 500;
    transition: all var(--dur) var(--ease);
}

.nav-link:hover {
    background: var(--surface-hover);
    color: var(--text-strong);
}

.welcome-msg {
    color: var(--text-subtle);
    font-size: var(--fs-sm);
}

/* Sidebar toggle — visible on every width; it collapses the rail on desktop
   and opens the drawer on mobile. */
.sidebar-toggle {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}

.sidebar-toggle:hover {
    background: var(--surface-hover);
    color: var(--text-strong);
}

.sidebar-toggle svg {
    width: 18px;
    height: 18px;
}

/* --- User menu ---------------------------------------------------------- */
.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-base);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}

.user-menu-trigger:hover,
.user-menu.is-open .user-menu-trigger {
    background: var(--surface-hover);
    border-color: var(--border);
}

.user-avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--brand-400), var(--brand-600));
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 650;
    text-transform: uppercase;
}

.user-menu-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.user-menu-caret {
    width: 14px;
    height: 14px;
    color: var(--text-subtle);
    transition: transform var(--dur) var(--ease);
}

.user-menu.is-open .user-menu-caret {
    transform: rotate(180deg);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    min-width: 232px;
    padding: var(--sp-1);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--e-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
        visibility var(--dur) var(--ease);
}

.user-menu.is-open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-head {
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-1);
}

.user-dropdown-head strong {
    display: block;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown-head span {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown a,
.user-dropdown button {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: none;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}

.user-dropdown a:hover,
.user-dropdown button:hover {
    background: var(--surface-hover);
    color: var(--text-strong);
}

.user-dropdown svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.user-dropdown .is-danger:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

.role-chip {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--r-full);
    background: var(--accent-soft);
    color: var(--on-accent-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* --- Support notification bell (admin topbar) ---------------------------
   Sits beside the theme toggle. The bell glows while unread client messages
   are outstanding and drops a panel listing who wrote and when — never the
   message text itself. */
.notif {
    position: relative;
}

.notif-trigger {
    position: relative;
}

/* Unread state. The ring is a box-shadow rather than a border so the button
   does not shift by a pixel when it lights up. */
.notif-trigger.has-unread {
    color: var(--accent);
}

.notif-trigger.has-unread::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: notif-glow 2s var(--ease) infinite;
    pointer-events: none;
}

@keyframes notif-glow {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-line); }
    50% { box-shadow: 0 0 10px 3px var(--accent-line); }
}

/* One-shot pop when a message lands while the page is open, so a second
   message during an already-glowing state is still noticed. */
.notif-trigger.is-pinged svg {
    animation: notif-swing 0.6s var(--ease);
}

@keyframes notif-swing {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-14deg); }
    40% { transform: rotate(11deg); }
    60% { transform: rotate(-7deg); }
    80% { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .notif-trigger.has-unread::after,
    .notif-trigger.is-pinged svg {
        animation: none;
    }
    .notif-trigger.has-unread::after {
        box-shadow: 0 0 0 2px var(--accent-line);
    }
}

.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--r-full);
    background: var(--danger);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.notif-badge[hidden] {
    display: none;
}

/* Mirrors .user-dropdown so both topbar panels open identically. */
.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    width: 320px;
    max-width: calc(100vw - 2rem);
    padding: var(--sp-1);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--e-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
        visibility var(--dur) var(--ease);
}

.notif.is-open .notif-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-1);
}

.notif-head strong {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-strong);
}

.notif-clear {
    border: none;
    background: transparent;
    color: var(--accent);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
}

.notif-clear:hover {
    text-decoration: underline;
}

.notif-clear[hidden] {
    display: none;
}

/* Bounded so a long backlog scrolls inside the panel instead of running off
   the bottom of the viewport. */
.notif-list {
    max-height: 320px;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.5rem 0.65rem;
    border-radius: var(--r-md);
    color: var(--text-muted);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease);
}

.notif-item:hover {
    background: var(--surface-hover);
}

.notif-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--r-full);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.notif-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notif-text strong {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-time {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.notif-empty {
    padding: var(--sp-4) var(--sp-3);
    color: var(--text-subtle);
    font-size: var(--fs-sm);
    text-align: center;
}

/* --- Content column ----------------------------------------------------- */
.container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* --- Shell grid: admin and client panels share one layout --------------- */
.admin-panel,
.client-shell {
    position: relative;
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    width: 100%;
    min-height: calc(100vh - var(--topbar-h));
    align-items: stretch;
    transition: grid-template-columns var(--dur) var(--ease);
}

.admin-panel.is-collapsed,
.client-shell.is-collapsed {
    grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}

/* The drawer scrim is a child of the shell grid, so it must be taken out of
   the layout entirely on desktop or it would claim the sidebar's column. It is
   only given a box inside the <=1024px block below. */
.sidebar-scrim {
    display: none;
}

/* --- Sidebar ------------------------------------------------------------ */
.panel-sidebar,
.client-sidebar {
    position: sticky;
    top: var(--topbar-h);
    z-index: 90;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-h));
    padding: var(--sp-4) var(--sp-3);
    background: var(--surface-sunken);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
}

.panel-title,
.client-sidebar-header h3,
.nav-group-label {
    padding: 0 var(--sp-3);
    margin-bottom: var(--sp-2);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-subtle);
    white-space: nowrap;
}

.client-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-1);
}

.sidebar-chevron {
    display: none;
}

/* Nav filter — types down the list below it. */
.sidebar-search {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    padding: 0.45rem 0.65rem;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.sidebar-search:focus-within {
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.sidebar-search svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--text-subtle);
}

.sidebar-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-sm);
}

.sidebar-search input::placeholder {
    color: var(--text-subtle);
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--sp-4);
}

.nav-group:last-child {
    margin-bottom: 0;
}

.panel-nav,
.client-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

/* One rule drives both panels' nav items — <a> in admin, <button> in client. */
.panel-nav a,
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: none;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.panel-nav a svg,
.nav-item .nav-ic svg,
.nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.nav-item .nav-ic {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    color: inherit;
}

.nav-item .nav-txt,
.panel-nav a .nav-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-nav a:hover,
.nav-item:hover {
    background: var(--surface-hover);
    color: var(--text-strong);
}

/* Active state: soft tint + a left rail, rather than a solid violet block —
   it stays legible next to the other items instead of shouting over them. */
.panel-nav a.is-active,
.nav-item.is-active {
    background: var(--accent-soft);
    color: var(--on-accent-muted);
    font-weight: 600;
}

.panel-nav a.is-active::before,
.nav-item.is-active::before {
    content: "";
    position: absolute;
    /* Pulled out by the sidebar's own horizontal padding so the rail sits
       flush against the sidebar edge. Keep in sync with .panel-sidebar. */
    left: calc(-1 * var(--sp-3));
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 0 var(--r-full) var(--r-full) 0;
    background: var(--accent);
}

/* Pushes the account block to the bottom of the rail. */
.sidebar-footer {
    margin-top: auto;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2);
    border-radius: var(--r-md);
    min-width: 0;
}

.sidebar-user .user-avatar {
    width: 30px;
    height: 30px;
}

.sidebar-user-info {
    min-width: 0;
    line-height: 1.35;
}

.sidebar-user-info strong {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-info span {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Collapsed rail ----------------------------------------------------- */
.is-collapsed .panel-sidebar,
.is-collapsed .client-sidebar {
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
    align-items: stretch;
    /* The icon-only rail is short enough not to scroll, and it has to stop
       clipping so the hover tooltips below can escape its right edge. */
    overflow: visible;
}

.is-collapsed .panel-title,
.is-collapsed .client-sidebar-header,
.is-collapsed .nav-group-label,
.is-collapsed .sidebar-search,
.is-collapsed .nav-txt,
.is-collapsed .sidebar-user-info {
    display: none;
}

.is-collapsed .panel-nav a,
.is-collapsed .nav-item,
.is-collapsed .sidebar-user {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Label becomes a hover tooltip once the rail is icon-only. */
.is-collapsed .panel-nav a::after,
.is-collapsed .nav-item::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 150;
    padding: 0.3rem 0.6rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--e-2);
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}

.is-collapsed .panel-nav a:hover::after,
.is-collapsed .nav-item:hover::after {
    opacity: 1;
}

/* --- Main content ------------------------------------------------------- */
.panel-content,
.client-main {
    width: 100%;
    max-width: var(--content-max);
    min-width: 0;
    padding: var(--sp-6) var(--sp-8) var(--sp-10);
}

/* =========================================================================
   5. BLOCKS
   ========================================================================= */

/* --- Page header -------------------------------------------------------- */
.panel-header,
.dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.panel-header h2,
.dashboard-header h2 {
    font-size: var(--fs-2xl);
    margin-bottom: 0.15rem;
}

.panel-header .subtitle,
.dashboard-header p {
    margin-bottom: 0;
    color: var(--text-muted);
    font-size: var(--fs-base);
}

.panel-header.with-back {
    align-items: flex-start;
}

.page-head-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-subtle);
}

.back-link:hover {
    color: var(--text-strong);
}

.header-status {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* --- Section heading (inside panes) ------------------------------------- */
.section-heading {
    margin-bottom: var(--sp-4);
}

.section-heading h3 {
    font-size: var(--fs-lg);
    margin-bottom: 0.2rem;
}

.section-heading .subtitle {
    max-width: 68ch;
    font-size: var(--fs-base);
}

/* --- Card surfaces ------------------------------------------------------ */
.website-section,
.support-section,
.api-section,
.manage-section,
.datasets-section,
.panel-section,
.chat-panel,
.card-surface {
    margin-bottom: var(--sp-5);
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--e-1);
}

.panel-section {
    margin-top: var(--sp-6);
}

.panel-section h3 {
    margin-bottom: var(--sp-4);
}

.manage-section > .subtitle,
.datasets-hint {
    margin-bottom: var(--sp-4);
    color: var(--text-muted);
    font-size: var(--fs-base);
}

.glass-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
}

/* --- Auth cards (register / payment, which share this shell) ------------- */
.auth-container {
    width: 100%;
    max-width: 430px;
    margin: auto;
    padding: var(--sp-8) var(--sp-4);
}

.glass-card {
    padding: var(--sp-8);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--e-3);
}

.auth-container .glass-card {
    text-align: center;
}

.auth-form {
    margin-top: var(--sp-6);
    text-align: left;
}

.auth-footer {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: var(--fs-base);
    color: var(--text-muted);
}

/* --- Overview layout ----------------------------------------------------
   Narrow screens stack: main column, then the support chat below it. Wide
   screens lift the chat into the gutter beside the main column and pin it, so
   it is reachable without scrolling past everything else. The breakpoint is
   the point where the main column still has room once the rail is taken out. */
.overview-main > *:last-child {
    margin-bottom: 0;
}

/* The section cards pair up once there is room, so a wide main column carries
   two ~800px cards instead of one stretched to 1600px. */
@media (min-width: 1100px) {
    .overview-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-5);
        align-items: start;
    }

    .overview-cards > .website-section {
        margin-bottom: 0;
    }
}

@media (min-width: 1400px) {
    .overview-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--rail-w);
        gap: var(--sp-5);
        align-items: start;
    }

    .overview-main {
        min-width: 0;
    }

    .overview-aside {
        position: sticky;
        top: calc(var(--topbar-h) + var(--sp-6));
        display: flex;
        flex-direction: column;
        /* Bounded by the viewport so the thread scrolls internally rather than
           pushing the rail past the fold. */
        max-height: calc(100vh - var(--topbar-h) - var(--sp-10));
    }

    .overview-aside .support-section {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        margin-bottom: 0;
    }

    .overview-aside .section-heading,
    .overview-aside .chat-form {
        flex-shrink: 0;
    }

    /* Takes whatever height the rail has left over. */
    .overview-aside .chat-thread {
        flex: 1 1 auto;
        min-height: 200px;
        max-height: none;
    }
}

/* --- Stat tiles --------------------------------------------------------- */
.dashboard-stats {
    display: grid;
    /* 240px is the narrowest a horizontal tile reads well at: icon chip, gutter,
       then the label and value. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

/* Horizontal tile: icon chip, then label over value. A wide tile then fills
   across rather than leaving a column of empty space under a short number. */
.stat-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--e-1);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

.stat-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--e-2);
    transform: translateY(-1px);
}

a.stat-card {
    color: inherit;
    text-decoration: none;
}

a.stat-card:hover {
    border-color: var(--accent-line);
}

.stat-ic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent);
}

.stat-ic svg {
    width: 19px;
    height: 19px;
}

.stat-body {
    min-width: 0;
}

.stat-card h3 {
    margin-bottom: 0.1rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.stat-value {
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

/* Non-numeric stat values (plan name, license) need to sit at text size. */
.free-tier {
    font-size: var(--fs-xl);
    color: var(--brand-400);
}

/* An identifier rather than a figure — monospace, and sized to fit. */
.stat-value--code {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: 0.02em;
    word-break: break-all;
}

[data-theme="light"] .free-tier {
    color: var(--brand-600);
}

.dashboard-actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-2);
}

/* --- Data tables -------------------------------------------------------- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--e-1);
}

/* Toolbar sits above the table inside the same card. */
.table-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.table-toolbar .sidebar-search {
    margin-bottom: 0;
    min-width: 240px;
    flex: 0 1 320px;
}

.table-count {
    margin-left: auto;
    font-size: var(--fs-sm);
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
}

.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.65rem var(--sp-4);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
    color: var(--text-subtle);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.data-table tbody td {
    padding: 0.7rem var(--sp-4);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    vertical-align: middle;
}

.data-table tbody tr {
    transition: background var(--dur-fast) var(--ease);
}

.data-table tbody tr:hover {
    background: var(--surface-hover);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* First column carries the row's identity, so it gets text weight. */
.data-table tbody td:first-child {
    color: var(--text);
    font-weight: 500;
}

.empty-row {
    padding: var(--sp-10) var(--sp-4) !important;
    text-align: center;
    color: var(--text-subtle);
}

/* Secondary line under a table cell's main value — a client's name beneath
   their email, where both belong in one column without a second header. */
.cell-sub {
    margin-top: 0.15rem;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* The storage meter inside a table cell. The standalone .meter is sized for a
   card and carries a bottom margin that would misalign the row; this drops the
   margin and constrains the width so a long "1.2 MB / 500 MB" label cannot
   stretch the column. */
.meter--cell {
    margin-bottom: 0;
    min-width: 130px;
}

.meter--cell .meter-head {
    margin-bottom: 0.3rem;
    font-size: var(--fs-xs);
}

.meter--cell .meter-track {
    height: 6px;
}

.client-link {
    font-weight: 550;
    color: var(--accent);
}

.client-link:hover {
    text-decoration: underline;
}

.table-link {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--text-muted);
}

.table-link:hover {
    color: var(--accent);
}

/* --- Empty state -------------------------------------------------------- */
.empty-state,
.chat-empty {
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    color: var(--text-subtle);
    font-size: var(--fs-base);
}

.empty-state svg {
    width: 32px;
    height: 32px;
    margin-bottom: var(--sp-3);
    color: var(--text-subtle);
    opacity: 0.6;
}

/* --- Meters + plan panel ------------------------------------------------ */
/* Flat by default — it already sits inside a card, and a second bordered box
   around it reads as a box in a box. The locked variant below opts back in,
   because there it is a call to action rather than a grouping. */
.plan-usage {
    padding: 0;
}

.plan-usage-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
}

.plan-price {
    font-size: var(--fs-md);
    font-weight: 650;
    color: var(--text-strong);
}

.plan-valid {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.plan-left {
    color: var(--text-subtle);
    font-weight: 400;
}

.plan-usage .summary-meta {
    margin-top: var(--sp-4);
}

.meter {
    margin-bottom: var(--sp-2);
}

.meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: 0.4rem;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.meter-head strong {
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.meter-track {
    height: 8px;
    background: var(--track);
    border-radius: var(--r-full);
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    /* A near-zero percentage still has to read as "a little", not as empty. */
    min-width: 6px;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
    transition: width 0.6s var(--ease);
}

/* Nearly out of storage — warn before the upload is rejected. */
.meter-fill.is-full {
    background: linear-gradient(90deg, var(--red-500), var(--amber-500));
}

/* No live subscription: the panel explains why instead of showing meters. */
.plan-usage--locked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding: var(--sp-4);
    background: var(--surface-sunken);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
}

.plan-locked-msg {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-base);
}

/* Off-screen but still announced, for icons that carry meaning no text
   repeats. Not `display:none`, which would drop it from the accessibility
   tree along with the visual. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Locked dashboard ---------------------------------------------------
   The entire page a client sees when they have no live plan. There is no
   workspace behind it to peek at — the dashboard view renders this template
   *instead of* the workspace one, so this is the whole screen and it is
   centred as such rather than laid out as a panel among others. */
.locked-shell {
    display: grid;
    place-items: center;
    /* Fills the viewport below the topbar so the card sits optically centred
       rather than clinging to the top of a mostly-empty page. */
    min-height: calc(100vh - var(--topbar-h) - var(--sp-8));
    padding: var(--sp-8) var(--sp-4);
}

.locked-card {
    width: 100%;
    max-width: 520px;
    padding: var(--sp-8);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--e-3);
    text-align: center;
}

.locked-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--sp-5);
    border-radius: var(--r-full);
    background: var(--accent-soft);
    color: var(--on-accent-muted);
}

.locked-ic svg {
    width: 26px;
    height: 26px;
}

.locked-card h1 {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-xl);
    font-weight: 650;
    color: var(--text-strong);
}

.locked-card .pkg-chip {
    margin-bottom: var(--sp-3);
}

.locked-lead {
    margin-bottom: var(--sp-5);
    color: var(--text-muted);
    font-size: var(--fs-md);
    line-height: 1.6;
}

/* Reassurance for an expired client, and the start date for a pending one —
   secondary to the pitch above it, so it sits below the call to action. */
.locked-note {
    margin-top: var(--sp-4);
    color: var(--text-muted);
    font-size: var(--fs-base);
    line-height: 1.6;
}

.locked-cta {
    display: inline-block;
    padding: 0.7rem 1.6rem;
    font-size: var(--fs-md);
}

@media (max-width: 600px) {
    .locked-card {
        padding: var(--sp-6) var(--sp-5);
    }

    .locked-cta {
        display: block;
    }
}

/* --- Definition lists --------------------------------------------------- */
.summary-meta {
    list-style: none;
}

.summary-meta li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-base);
}

.summary-meta li:last-child {
    border-bottom: none;
}

.summary-meta span {
    flex-shrink: 0;
    color: var(--text-subtle);
}

.summary-meta strong {
    font-weight: 550;
    color: var(--text);
    text-align: right;
    word-break: break-word;
}

.summary-meta .mono {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}

/* =========================================================================
   6. FEATURES
   ========================================================================= */

/* --- Website verification + license ------------------------------------- */
.inline-form {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: center;
}

/* Capped: a URL field stretched to the full width of a wide card looks like a
   mistake, and the extra room buys no legibility. */
.inline-form input {
    flex: 1 1 260px;
    min-width: 0;
    max-width: 560px;
}

.inline-form .btn-primary,
.inline-form .btn-secondary {
    flex-shrink: 0;
}

.verified-url {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
    word-break: break-all;
}

.verified-url a {
    font-size: var(--fs-base);
}

.license-card {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-md);
}

.license-label {
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.license-value {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--on-accent-muted);
    word-break: break-all;
}

.btn-copy {
    margin-left: auto;
    padding: 0.35rem 0.75rem;
    font-size: var(--fs-xs);
}

/* --- Client detail ------------------------------------------------------ */
.detail-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
    margin-bottom: var(--sp-5);
}

.detail-summary {
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--e-1);
    text-align: center;
}

.avatar {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--sp-3);
    border-radius: 50%;
    background: linear-gradient(140deg, var(--brand-400), var(--brand-600));
    color: #fff;
    font-size: var(--fs-xl);
    font-weight: 650;
}

.summary-name {
    font-size: var(--fs-lg);
    font-weight: 650;
    color: var(--text-strong);
}

.summary-email {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text-subtle);
    word-break: break-all;
}

.detail-form {
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--e-1);
}

.detail-form .form-section-title {
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
}

/* --- Datasets + documents ---------------------------------------------- */
.section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.section-toggle:hover h3 {
    color: var(--accent);
}

.section-toggle h3 {
    font-size: var(--fs-lg);
    transition: color var(--dur) var(--ease);
}

.section-toggle .subtitle {
    margin-top: 0.15rem;
}

.chevron {
    flex-shrink: 0;
    color: var(--text-subtle);
    transition: transform var(--dur) var(--ease);
}

.chevron.is-open {
    transform: rotate(180deg);
}

.datasets-body {
    margin-top: var(--sp-4);
}

.dataset-card {
    margin-bottom: var(--sp-3);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.dataset-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-hover);
    border-bottom: 1px solid var(--border);
}

.dataset-head strong {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-strong);
}

.dataset-head span {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.inline-delete {
    display: inline-flex;
}

.doc-list {
    list-style: none;
}

.doc-list li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.55rem var(--sp-4);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
}

.doc-list li:last-child {
    border-bottom: none;
}

.doc-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: 500;
}

.doc-name:hover {
    color: var(--accent);
}

.doc-size {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-subtle);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
}

.doc-type {
    flex-shrink: 0;
    width: 42px;
    padding: 0.15rem 0;
    border-radius: var(--r-sm);
    text-align: center;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--surface-active);
    color: var(--text-muted);
}

.doc-pdf {
    background: var(--danger-soft);
    color: var(--danger);
}

.doc-csv {
    background: var(--success-soft);
    color: var(--success);
}

/* .doc covers legacy Word uploads, which the upload form still accepts. */
.doc-doc,
.doc-docx {
    background: var(--info-soft);
    color: var(--info);
}

/* Per-document index state. */
.doc-status {
    flex-shrink: 0;
    padding: 0.12rem 0.5rem;
    border-radius: var(--r-full);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.doc-status-uploaded {
    background: var(--surface-active);
    color: var(--text-subtle);
}

.doc-status-processing {
    background: var(--accent-soft);
    color: var(--on-accent-muted);
}

.doc-status-indexed {
    background: var(--success-soft);
    color: var(--success);
}

.doc-status-failed {
    background: var(--danger-soft);
    color: var(--danger);
}

/* --- Upload forms ------------------------------------------------------- */
.dataset-form,
.api-form,
.logo-form {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.dataset-name-input {
    margin-bottom: var(--sp-3);
}

.dataset-form-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-3);
}

.dataset-form-actions .btn-primary {
    margin-left: auto;
}

/* --- Website APIs ------------------------------------------------------- */
.api-list {
    list-style: none;
    margin-bottom: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.api-list li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: 0.65rem var(--sp-4);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
}

.api-list li:last-child {
    border-bottom: none;
}

.api-list .api-ic {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--text-subtle);
}

.api-list .api-ic svg {
    width: 16px;
    height: 16px;
}

.api-url {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}

.api-url:hover {
    color: var(--accent);
}

/* The badge takes over pushing the row's trailing items to the right. */
.api-list .api-badge {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-full);
    background: var(--surface-active);
    color: var(--text-subtle);
    font-size: 0.6875rem;
    font-weight: 600;
}

.api-list .api-badge--ok {
    background: var(--success-soft);
    color: var(--success);
}

.api-list .api-badge--fail {
    background: var(--danger-soft);
    color: var(--danger);
}

.api-date {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.api-list .api-badge + .api-date {
    margin-left: 0;
}

.api-links {
    flex: 1 1 100%;
    margin-top: var(--sp-2);
}

.api-links summary {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    cursor: pointer;
}

.api-links summary:hover {
    color: var(--accent);
}

.api-links form {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-2);
}

.api-links label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.api-links .hint {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.api-links input {
    flex: 1 1 240px;
    padding: 0.4rem 0.6rem;
    background: var(--field-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-sm);
}

.api-links input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.api-links code {
    padding: 0.1rem 0.3rem;
    background: var(--surface-active);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
}

/* --- Logo pane ---------------------------------------------------------- */
.logo-preview {
    display: grid;
    place-items: center;
    min-height: 150px;
    margin-bottom: var(--sp-4);
    padding: var(--sp-5);
    background: var(--surface-sunken);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
}

.logo-preview img {
    max-width: 200px;
    max-height: 110px;
    object-fit: contain;
}

.logo-placeholder {
    color: var(--text-subtle);
    font-size: var(--fs-base);
}

.logo-form .file-row {
    margin-bottom: var(--sp-3);
}

.logo-remove-form {
    margin-top: var(--sp-2);
}

/* --- Integration -------------------------------------------------------- */
.integration-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-base);
}

.integration-key-label {
    min-width: 130px;
    color: var(--text-subtle);
    font-size: var(--fs-sm);
}

.embed-label {
    margin-top: var(--sp-5);
}

.embed-code {
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--brand-300);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
}

[data-theme="light"] .embed-code {
    color: var(--brand-700);
}

.embed-help {
    margin-top: var(--sp-3);
    max-width: 70ch;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.65;
}

.embed-help code {
    padding: 0.1rem 0.3rem;
    background: var(--surface-active);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
}

.embed-help strong {
    color: var(--text);
}

/* --- Reindex panel ------------------------------------------------------ */
.reindex-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
}

.reindex-copy {
    flex: 1 1 320px;
}

.reindex-copy strong {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--text-strong);
}

.reindex-copy .subtitle {
    margin: 0;
    font-size: var(--fs-sm);
}

.reindex-copy code {
    padding: 0.1rem 0.35rem;
    background: var(--accent-soft);
    border-radius: var(--r-sm);
    color: var(--on-accent-muted);
    font-size: var(--fs-xs);
}

.reindex-panel button[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* --- Danger zone -------------------------------------------------------- */
.danger-zone {
    border-color: var(--danger) !important;
}

.danger-zone .form-section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--danger);
}

.danger-zone .subtitle {
    max-width: 70ch;
    margin-bottom: var(--sp-4);
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--danger);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--danger);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 550;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn-danger:hover {
    background: var(--danger);
    color: #fff;
}

.btn-danger svg {
    width: 16px;
    height: 16px;
}

/* --- Support chat ------------------------------------------------------- */
.chat-panel .form-section-title {
    margin-bottom: var(--sp-4);
}

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-height: 380px;
    margin-bottom: var(--sp-4);
    padding: var(--sp-4);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow-y: auto;
}

.chat-message {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 76%;
    align-self: flex-start;
    align-items: flex-start;
}

.chat-message.is-me {
    align-self: flex-end;
    align-items: flex-end;
}

/* Lifted off the sunken thread rather than sitting level with it — at
   --surface-raised the received bubbles were near-invisible against it. */
.chat-bubble {
    padding: 0.5rem 0.8rem;
    background: var(--surface-active);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    border-bottom-left-radius: var(--r-sm);
    color: var(--text);
    font-size: var(--fs-base);
    line-height: 1.5;
    word-break: break-word;
}

.chat-message.is-me .chat-bubble {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-sm);
}

.chat-meta {
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    color: var(--text-subtle);
    opacity: 0.75;
}

.chat-form {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-3);
}

.chat-form textarea {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-height: 160px;
    padding: 0.6rem 0.8rem;
    background: var(--field-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: 1.5;
    resize: vertical;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.chat-form textarea::placeholder {
    color: var(--text-subtle);
}

.chat-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--field-bg-focus);
    box-shadow: var(--ring);
}

.chat-form .btn-primary {
    flex-shrink: 0;
}

/* Tab panes -------------------------------------------------------------- */
.tab-pane[hidden] {
    display: none;
}

/* =========================================================================
   7. RESPONSIVE
   ========================================================================= */

/* Below this width the sidebar becomes an overlay drawer rather than a
   column, so the content keeps the full viewport. */
@media (max-width: 1024px) {
    .admin-panel,
    .client-shell,
    .admin-panel.is-collapsed,
    .client-shell.is-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .panel-sidebar,
    .client-sidebar {
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        z-index: 130;
        width: var(--sidebar-w);
        height: calc(100vh - var(--topbar-h));
        transform: translateX(-100%);
        box-shadow: var(--e-3);
        transition: transform var(--dur) var(--ease);
    }

    /* On mobile the toggle opens the drawer instead of collapsing the rail,
       so the collapsed-rail rules must not apply here. */
    .is-collapsed .panel-sidebar,
    .is-collapsed .client-sidebar {
        transform: translateX(0);
        padding: var(--sp-4) var(--sp-3);
        /* Full-height drawer with labels, so it scrolls again — the desktop
           rail's overflow:visible must not leak down here. */
        overflow-y: auto;
        overflow-x: hidden;
    }

    .is-collapsed .panel-title,
    .is-collapsed .client-sidebar-header,
    .is-collapsed .nav-group-label,
    .is-collapsed .sidebar-search,
    .is-collapsed .nav-txt,
    .is-collapsed .sidebar-user-info {
        display: revert;
    }

    .is-collapsed .client-sidebar-header {
        display: flex;
    }

    .is-collapsed .sidebar-search {
        display: flex;
    }

    .is-collapsed .panel-nav a,
    .is-collapsed .nav-item,
    .is-collapsed .sidebar-user {
        justify-content: flex-start;
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .is-collapsed .panel-nav a::after,
    .is-collapsed .nav-item::after {
        content: none;
    }

    .sidebar-scrim {
        display: block;
        position: fixed;
        inset: var(--topbar-h) 0 0 0;
        z-index: 125;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
    }

    .is-collapsed .sidebar-scrim {
        opacity: 1;
        visibility: visible;
    }

    .panel-content,
    .client-main {
        padding: var(--sp-5) var(--sp-5) var(--sp-8);
    }

    .detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-context,
    .user-menu-name,
    .welcome-msg {
        display: none;
    }

    .panel-content,
    .client-main {
        padding: var(--sp-4) var(--sp-4) var(--sp-8);
    }

    .dashboard-stats {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--sp-3);
    }

    .panel-header,
    .dashboard-header {
        margin-bottom: var(--sp-5);
    }

    .field-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .data-table {
        font-size: var(--fs-sm);
    }

    .data-table thead th,
    .data-table tbody td {
        padding: 0.6rem var(--sp-3);
    }

    .table-toolbar .sidebar-search {
        flex: 1 1 100%;
        min-width: 0;
    }

    .license-card,
    .plan-usage--locked {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-copy {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    :root {
        --fs-3xl: 1.6rem;
        --fs-2xl: 1.35rem;
    }

    .dashboard-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-actions,
    .form-actions,
    .chat-form {
        flex-direction: column;
        align-items: stretch;
    }

    .form-actions .btn-primary,
    .form-actions .btn-secondary,
    .chat-form .btn-primary {
        width: 100%;
    }

    .dataset-form-actions .btn-primary {
        margin-left: 0;
        width: 100%;
    }

    .chat-message {
        max-width: 90%;
    }

    .summary-meta li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .summary-meta strong {
        text-align: left;
    }
}

/* =========================================================================
   8. MOTION
   ========================================================================= */
.gsap-hidden {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}