/* =============================================================================
 * LinkHub — auth-bootstrap.css
 *
 * Refined design system. Per PRD §5.3.1: clean, modern, professional —
 * Linear / Stripe / Vercel / Plausible references. No gradients, no
 * glassmorphism, no decorative shadows, no ambient motion.
 *
 * Token-driven. CSS custom properties at :root; everything else resolves
 * to tokens. When the Sass build lands (Phase 0 Part 7 deferral), tokens
 * become the build target — markup stays unchanged.
 * ===========================================================================*/

:root {
    /* ----- Color: Neutral gray scale (Stripe-style) ----- */
    --gray-50:  #fafafa;
    --gray-100: #f4f4f5;
    --gray-200: #e4e4e7;
    --gray-300: #d4d4d8;
    --gray-400: #a1a1aa;
    --gray-500: #71717a;
    --gray-600: #52525b;
    --gray-700: #3f3f46;
    --gray-800: #27272a;
    --gray-900: #18181b;
    --gray-950: #09090b;

    /* ----- Color: Brand (LinkHub green from the Kuvert mark) -----
     * --brand-500 is the canonical value (overridable per-deployment via
     * platform_settings.brand_color, set as inline body style). The derived
     * shades (50/100/200/600/700) are intentionally defined on `body`, not
     * `:root`, so they re-evaluate against body's overridden --brand-500.
     * (CSS custom properties are computed on the owning element — derivations
     * on :root would lock in the default green even when body overrides.) */
    --brand-500: #009344;

    /* ----- Color: Semantic ----- */
    --info-bg:        #eff6ff;
    --info-text:      #1e40af;
    --info-border:    #bfdbfe;
    --success-bg:     #ecfdf5;
    --success-text:   #065f46;
    --success-border: #a7f3d0;
    --warn-bg:        #fef9c3;
    --warn-text:      #854d0e;
    --warn-border:    #fde68a;
    --error-bg:       #fef2f2;
    --error-text:     #991b1b;
    --error-border:   #fecaca;

    /* ----- Surface tokens (semantic + back-compat aliases) ----- */
    --color-bg:           var(--gray-50);
    --color-surface:      #ffffff;
    --color-surface-soft: var(--gray-100);
    --color-text:         var(--gray-900);
    --color-text-muted:   var(--gray-500);
    --color-text-faint:   var(--gray-400);
    --color-border:       var(--gray-200);
    --color-border-strong:var(--gray-300);
    /* --color-accent and --color-accent-hover are also derived on body
     * (see the body block below) so they pick up brand-color overrides. */
    --color-error-bg:     var(--error-bg);
    --color-error-text:   var(--error-text);
    --color-error-border: var(--error-border);
    --color-border-focus: var(--gray-300);

    /* ----- Type ----- */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "Segoe UI Variable Text", "Segoe UI", system-ui,
                 Roboto, "Helvetica Neue", Helvetica, Arial,
                 "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono",
                 "JetBrains Mono", Consolas, "Liberation Mono", monospace;

    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   15px;
    --text-lg:   17px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  30px;

    --leading-tight: 1.25;
    --leading-snug:  1.4;
    --leading-base:  1.55;
    --leading-loose: 1.7;

    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;

    /* ----- Space (4px grid) ----- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* ----- Radii ----- */
    --radius-xs:   3px;
    --radius-sm:   5px;
    --radius:      8px;
    --radius-lg:   12px;
    --radius-pill: 999px;

    /* ----- Elevation (subtle, not decorative) ----- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.04);
    --shadow:    0 4px 6px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 10px 16px rgba(15, 23, 42, 0.06), 0 3px 6px rgba(15, 23, 42, 0.05);

    --ring-focus: 0 0 0 3px color-mix(in srgb, var(--brand-500) 22%, transparent);

    /* ----- Motion ----- */
    --duration-fast: 100ms;
    --duration:      150ms;
    --duration-slow: 250ms;
    --ease:          cubic-bezier(0.2, 0, 0, 1);
    --ease-out:      cubic-bezier(0.2, 0.6, 0.4, 1);

    /* Topnav background tokenised so dark mode can override it (it can't
     * use var(--color-surface) directly because of the rgba() opacity). */
    --color-topnav-bg: rgba(255, 255, 255, 0.85);
}

/* Derive every brand-dependent token on `body`, not `:root`, so they
 * re-evaluate against any per-deployment override of --brand-500 set as
 * `<body style="--brand-500: ...">`. Defining them on :root would lock
 * them to the default green (CSS custom properties are computed on the
 * owning element — and :root doesn't see body's override). */
body {
    --brand-50:  color-mix(in srgb, var(--brand-500) 12%, white);
    --brand-100: color-mix(in srgb, var(--brand-500) 22%, white);
    --brand-200: color-mix(in srgb, var(--brand-500) 38%, white);
    --brand-600: color-mix(in srgb, var(--brand-500) 88%, black);
    --brand-700: color-mix(in srgb, var(--brand-500) 70%, black);
    --ring-focus: 0 0 0 3px color-mix(in srgb, var(--brand-500) 22%, transparent);
    --color-accent:       var(--brand-500);
    --color-accent-hover: var(--brand-600);
}

/* ----- Dark mode -----
 * Three modes:
 *   - default (no data-theme) → follows OS preference via @media query below
 *   - data-theme="light"      → forced light (the :root values)
 *   - data-theme="dark"       → forced dark (overrides below)
 * The cookie `lh-theme` (read in admin-layout.phtml + layout.phtml) sets the
 * `<html data-theme>` attribute on the server so there's no flash on load.
 */

[data-theme="dark"] {
    --gray-50:  #18181b;
    --gray-100: #27272a;
    --gray-200: #3f3f46;
    --gray-300: #52525b;
    --gray-400: #71717a;
    --gray-500: #a1a1aa;
    --gray-600: #d4d4d8;
    --gray-700: #e4e4e7;
    --gray-800: #f4f4f5;
    --gray-900: #fafafa;
    --gray-950: #ffffff;

    --color-surface:      #1f1f24;
    --color-surface-soft: var(--gray-100);

    --info-bg:        rgba(59, 130, 246, 0.12);
    --info-text:      #93c5fd;
    --info-border:    rgba(59, 130, 246, 0.3);
    --success-bg:     rgba(16, 185, 129, 0.12);
    --success-text:   #6ee7b7;
    --success-border: rgba(16, 185, 129, 0.3);
    --warn-bg:        rgba(234, 179, 8, 0.12);
    --warn-text:      #fde68a;
    --warn-border:    rgba(234, 179, 8, 0.3);
    --error-bg:       rgba(239, 68, 68, 0.1);
    --error-text:     #fca5a5;
    --error-border:   rgba(239, 68, 68, 0.3);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
    --shadow:    0 4px 6px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 16px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.4);

    --color-topnav-bg: rgba(24, 24, 27, 0.82);

    color-scheme: dark;
}

/* Dark-mode brand washes + focus ring derived on body so they re-evaluate
 * against the per-deployment --brand-500 override (same reason as the
 * light-mode body block above). */
[data-theme="dark"] body {
    --brand-50:  color-mix(in srgb, var(--brand-500) 14%, transparent);
    --brand-100: color-mix(in srgb, var(--brand-500) 22%, transparent);
    --brand-200: color-mix(in srgb, var(--brand-500) 32%, transparent);
    --ring-focus: 0 0 0 3px color-mix(in srgb, var(--brand-500) 35%, transparent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --gray-50:  #18181b;
        --gray-100: #27272a;
        --gray-200: #3f3f46;
        --gray-300: #52525b;
        --gray-400: #71717a;
        --gray-500: #a1a1aa;
        --gray-600: #d4d4d8;
        --gray-700: #e4e4e7;
        --gray-800: #f4f4f5;
        --gray-900: #fafafa;
        --gray-950: #ffffff;

        --color-surface:      #1f1f24;
        --color-surface-soft: var(--gray-100);

        --info-bg:        rgba(59, 130, 246, 0.12);
        --info-text:      #93c5fd;
        --info-border:    rgba(59, 130, 246, 0.3);
        --success-bg:     rgba(16, 185, 129, 0.12);
        --success-text:   #6ee7b7;
        --success-border: rgba(16, 185, 129, 0.3);
        --warn-bg:        rgba(234, 179, 8, 0.12);
        --warn-text:      #fde68a;
        --warn-border:    rgba(234, 179, 8, 0.3);
        --error-bg:       rgba(239, 68, 68, 0.1);
        --error-text:     #fca5a5;
        --error-border:   rgba(239, 68, 68, 0.3);

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
        --shadow:    0 4px 6px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 10px 16px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.4);

        --color-topnav-bg: rgba(24, 24, 27, 0.82);

        color-scheme: dark;
    }
    :root:not([data-theme="light"]) body {
        --brand-50:  color-mix(in srgb, var(--brand-500) 14%, transparent);
        --brand-100: color-mix(in srgb, var(--brand-500) 22%, transparent);
        --brand-200: color-mix(in srgb, var(--brand-500) 32%, transparent);
        --ring-focus: 0 0 0 3px color-mix(in srgb, var(--brand-500) 35%, transparent);
    }
}

/* Cross-document View Transitions: smooth fade between server-rendered
 * page loads where the browser supports it (Chrome/Edge 126+; Safari TP).
 * Other browsers ignore this rule and behave as before — graceful fallback. */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* Persist chrome (topnav with logo, global rail) across navigations so they
 * don't flash through the crossfade. With a stable view-transition-name the
 * browser matches old and new snapshots as the same element and morphs
 * position rather than animating opacity — the logo stays put. */
.topnav     { view-transition-name: lh-topnav; }
.admin-rail { view-transition-name: lh-admin-rail; }
::view-transition-old(lh-topnav),
::view-transition-new(lh-topnav),
::view-transition-old(lh-admin-rail),
::view-transition-new(lh-admin-rail) {
    /* No fade — these elements are visually identical between pages. */
    animation: none;
    mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
    :root {
        --duration-fast: 0ms;
        --duration:      0ms;
        --duration-slow: 0ms;
    }
}

/* =============================================================================
 * Base reset + typography
 * ===========================================================================*/

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

html {
    font-family: var(--font-sans);
    -webkit-text-size-adjust: 100%;
    font-feature-settings: "ss01", "ss02", "cv01", "cv03", "cv11";
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-md);
    line-height: var(--leading-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: inherit;
    line-height: var(--leading-tight);
    color: var(--color-text);
    letter-spacing: -0.011em;
    font-weight: var(--weight-semi);
    margin: 0;
}

p { margin: 0; }

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

::selection {
    background: var(--brand-200);
    color: var(--gray-900);
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--gray-100);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    color: var(--gray-700);
}

/* =============================================================================
 * Auth shell (anonymous routes — login, register, setup, etc.)
 * ===========================================================================*/

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Center the column horizontally on wide viewports + vertically
     * via auth-main below. Width was 480px (very narrow); 520px keeps
     * the auth card readable on desktop without feeling cramped. */
    max-width: 520px;
    margin: 0 auto;
    padding: 0 var(--space-3);
}

/* Brand row: centered above the card (was top-left). */
.auth-header {
    padding: var(--space-6) 0 var(--space-4);
    text-align: center;
}
.auth-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-weight: var(--weight-semi);
    font-size: var(--text-md);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.auth-brand img { display: block; height: 40px; width: auto; }
.auth-brand:hover { color: var(--color-text); }

.auth-main {
    flex: 1 1 auto;
    display: flex;
    /* Centre the card vertically too — auth pages feel anchored, not
     * stuck to the top of the viewport. */
    align-items: center;
    justify-content: center;
    padding: 0 0 var(--space-5);
    width: 100%;
}

.auth-footer {
    padding: var(--space-5) 0 var(--space-4);
    text-align: center;
    color: var(--color-text-faint);
    font-size: var(--text-xs);
}
/* Legal/static pages need a wider reading column than the auth card. */
.auth-shell:has(.legal-page) { max-width: 760px; }
.auth-shell:has(.legal-page) .auth-main {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: var(--space-6);
}

/* Brand header above legal pages — top-left, links to home. */
.legal-page__brand {
    width: 100%;
    text-align: left;
    padding: var(--space-2) 0 var(--space-5);
}
.legal-page__brand img {
    display: inline-block;
    height: 40px;
    width: auto;
}

/* Legal page article (impressum, datenschutz, agb). Reading-optimised. */
.legal-page {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-6) var(--space-7);
    box-shadow: var(--shadow-xs);
}
.legal-page__head { margin: 0 0 var(--space-5); }
.legal-page__head h1 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-xxl);
    font-weight: var(--weight-semi);
    letter-spacing: -0.02em;
}
.legal-page__meta {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.legal-page__body {
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.65;
}
.legal-page__body h2 {
    margin: var(--space-5) 0 var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
}
.legal-page__body h3 {
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
}
.legal-page__body p { margin: 0 0 var(--space-3); }
.legal-page__body ul {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
}
.legal-page__body li { margin: 4px 0; }
.legal-page__body a { color: var(--color-accent); }
.legal-page__body a:hover { text-decoration: underline; }

/* =============================================================================
 * Auth card (content container in both shells)
 * ===========================================================================*/

.auth-card {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-6);
    box-shadow: var(--shadow-xs);
}

.auth-card h1 {
    font-size: var(--text-xl);
    margin: 0 0 var(--space-2);
}

.auth-lede {
    margin: 0 0 var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.auth-card p {
    margin: 0 0 var(--space-3);
    color: var(--color-text);
}
.auth-card p:last-child { margin-bottom: 0; }
.auth-card p strong { color: var(--color-text); font-weight: var(--weight-semi); }

.auth-altlink {
    margin: var(--space-5) 0 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

/* =============================================================================
 * Form fields
 * ===========================================================================*/

.field {
    display: block;
    margin-bottom: var(--space-4);
}
.field-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.field input,
.field select,
.field textarea,
.lh-form textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    font-family: inherit;
    line-height: var(--leading-snug);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
}
.field textarea,
.lh-form textarea {
    resize: vertical;
    min-height: 96px;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--color-border-strong); }
.field input:focus,
.field select:focus,
.field textarea:focus,
.lh-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--ring-focus);
}
.field input[disabled],
.field input[readonly] {
    background: var(--gray-50);
    color: var(--color-text-muted);
    cursor: not-allowed;
}
.field-hint {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
}

/* =============================================================================
 * Buttons
 * ===========================================================================*/

.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: inherit;
    line-height: var(--leading-snug);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
}
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active { transform: translateY(0.5px); }

.btn-primary {
    background: var(--brand-500);
    color: #ffffff;
    border-color: var(--brand-500);
    box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #ffffff;
    text-decoration: none;
}

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover {
    background: var(--gray-50);
    border-color: var(--color-border-strong);
    color: var(--color-text);
    text-decoration: none;
}

.btn-danger {
    background: var(--color-surface);
    color: var(--error-text);
    border-color: var(--error-border);
}
.btn-danger:hover {
    background: var(--error-bg);
    border-color: var(--error-text);
}
.btn-danger.btn-large {
    padding: 11px 18px;
    font-size: var(--text-md);
}

.btn-link { display: inline-flex; width: auto; }

.btn-row {
    padding: 4px 10px;
    font-size: var(--text-xs);
    margin-right: var(--space-1);
}

form > button.btn-primary,
form > .btn-primary[type="submit"] { width: 100%; }

/* =============================================================================
 * Errors + success banners
 * ===========================================================================*/

.auth-errors,
.auth-success {
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}
.auth-errors {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error-text);
}
.auth-errors ul { margin: 0; padding-left: var(--space-4); }
.auth-errors li + li { margin-top: var(--space-1); }
.auth-success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success-text);
}

/* =============================================================================
 * Section title
 * ===========================================================================*/

.section-title {
    margin: var(--space-5) 0 var(--space-3) 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: 11px;
    font-weight: var(--weight-semi);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.section-title:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

/* =============================================================================
 * Workspace list (legacy, kept for fallback contexts)
 * ===========================================================================*/

.workspace-list {
    list-style: none;
    margin: 0 0 var(--space-4) 0;
    padding: 0;
}
.workspace-list li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.workspace-list li:last-child { border-bottom: 0; }
.workspace-list a {
    color: var(--color-text);
    font-weight: var(--weight-medium);
}
.workspace-list a:hover { color: var(--color-accent); }
.workspace-list .muted {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* =============================================================================
 * Data tables
 * ===========================================================================*/

.data-table {
    width: 100%;
    margin: 0 0 var(--space-4) 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    /* table-layout: auto by default — but keeping the row-actions
     * column flexible avoids forcing the row past the container. */
}
/* Wrap data tables in a scroll-on-overflow container so very narrow
 * viewports get a horizontal scroll instead of overflowing the card. */
.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table th,
.data-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.data-table th {
    background: var(--gray-50);
    font-size: 11px;
    font-weight: var(--weight-semi);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.data-table tr:last-child th,
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--gray-50); }
.data-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

/* Compact-density variant used by data-heavy tables (e.g., card-orders queue).
 * Trims padding and lets long *normal* text wrap, but never breaks
 * letter-by-letter (a previous version did via word-break:break-word and
 * shredded "ZAHLUNG AUSSTEHEND" into "Z A H L U N G..."). Use overflow-wrap
 * for the rare long token instead. */
.data-table td.data-cell-tight {
    padding: 8px 10px;
    vertical-align: top;
    line-height: 1.35;
    overflow-wrap: anywhere;
    max-width: 220px;
}
.data-table td.data-cell-tight small { font-size: 11px; color: var(--color-text-muted); }
.data-table td.data-cell-tight strong { font-weight: var(--weight-semi); }
/* Status badge must read as one token regardless of cell width. */
.data-table td .status-badge { white-space: nowrap; }

/* Stack action buttons vertically inside a single cell so the action column
 * stays narrow. Keep td as table-cell (don't override) — children are made
 * block-level with bottom margin instead of using flex on the cell, which
 * would break table column alignment. */
.data-table td.data-actions-stack {
    padding: 8px 10px;
    min-width: 120px;
    vertical-align: top;
}
.data-table td.data-actions-stack > .btn-row,
.data-table td.data-actions-stack > .form-inline-tight {
    display: block;
    margin: 0 0 4px;
    width: 100%;
    text-align: center;
}
.data-table td.data-actions-stack > *:last-child { margin-bottom: 0; }
.data-table td.data-actions-stack .form-inline-tight {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.data-table td.data-actions-stack .form-inline-tight input[type="text"] {
    width: 100%;
    padding: 4px 6px;
    font-size: 11px;
    box-sizing: border-box;
}
.data-table td.data-actions-stack .btn-row {
    justify-content: center;
    font-size: 11px;
    padding: 5px 8px;
}

/* Order-# trigger that opens the details modal — inherits link styling
 * but stays as a <button> so screen readers announce it as actionable. */
.lh-row-link {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--color-accent, #009344);
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.lh-row-link:hover,
.lh-row-link:focus-visible { text-decoration: underline; }

/* Tiny "has note" flag in the order # cell. Tells the admin the order
 * carries a customer note before they open the details modal. */
.lh-note-flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    padding: 1px 6px;
    background: var(--gray-50, #f4f4f1);
    border-radius: 4px;
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
}
.lh-note-flag svg { opacity: 0.7; }

/* Insights "top click targets" — element label with a horizontal bar
 * underneath showing relative click share. */
.insights-bar-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.insights-bar-cell__label {
    font-weight: var(--weight-medium);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}
.insights-bar-cell__bar {
    display: block;
    width: var(--bar, 0%);
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--brand-200);
    transition: width 0.2s ease;
}
.data-table td a {
    color: var(--color-text);
    font-weight: var(--weight-medium);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.data-table td a:hover { color: var(--color-accent); }

/* =============================================================================
 * Status badges
 * ===========================================================================*/

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: var(--weight-semi);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 18px;
    vertical-align: middle;
    border: 1px solid transparent;
}
.status-draft     { background: var(--gray-100);   color: var(--gray-600);     border-color: var(--gray-200); }
.status-published { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.status-unlisted  { background: var(--warn-bg);    color: var(--warn-text);    border-color: var(--warn-border); }

/* =============================================================================
 * Row actions
 * ===========================================================================*/

.row-actions {
    /* Single row — at very narrow widths the .data-table-wrap container
     * scrolls horizontally instead of stacking the buttons. */
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
}
.form-inline-tight {
    display: inline-block;
    margin: 0;
}
.form-inline { margin: var(--space-4) 0 0 0; }

.inline-role {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-right: var(--space-2);
}
.inline-role select {
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-family: inherit;
    background: var(--color-surface);
}
.muted { color: var(--color-text-muted); font-size: var(--text-xs); }

/* =============================================================================
 * Iconography (inline SVG via lh_icon helper)
 * ===========================================================================*/

.lh-icon {
    display: inline-block;
    vertical-align: -2px;
    flex-shrink: 0;
}
.btn-primary .lh-icon,
.btn-secondary .lh-icon,
.btn-danger .lh-icon { vertical-align: -3px; }

/* =============================================================================
 * Empty states
 * ===========================================================================*/

.empty-state {
    text-align: center;
    padding: var(--space-7) var(--space-4);
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    margin: 0 0 var(--space-4);
}
.empty-state__icon {
    color: var(--color-text-faint);
    margin: 0 auto var(--space-3);
    line-height: 0;
}
.empty-state__icon .lh-icon { width: 48px; height: 48px; }
.empty-state__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    color: var(--color-text);
    margin: 0 0 var(--space-1);
    letter-spacing: -0.01em;
}
.empty-state__hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
    margin: 0 auto var(--space-4);
    max-width: 420px;
}
.empty-state .btn-link { width: auto; }

/* =============================================================================
 * Modal
 * ===========================================================================*/

.lh-modal {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0;
    max-width: 480px;
    width: calc(100% - 2 * var(--space-4));
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    animation: lh-modal-in var(--duration-slow) var(--ease) both;
}
.lh-modal::backdrop {
    background: rgba(15, 23, 42, 0.5);
    animation: lh-fade-in var(--duration) var(--ease) both;
}
@keyframes lh-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lh-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.lh-modal__body { padding: var(--space-5) var(--space-5) var(--space-4); }
.lh-modal__message {
    margin: 0;
    font-size: var(--text-md);
    line-height: var(--leading-base);
}
.lh-modal__type-confirm { margin-top: var(--space-4); }
.lh-modal__type-confirm .field { margin-bottom: 0; }
.lh-modal__actions {
    padding: var(--space-3) var(--space-5);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    border-top: 1px solid var(--color-border);
    background: var(--gray-50);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}
.lh-modal__actions .btn-primary,
.lh-modal__actions .btn-secondary,
.lh-modal__actions .btn-danger {
    width: auto;
    min-width: 100px;
}

/* Wider read-only "details" variant of the modal, used by the order queue
 * to reveal the full snapshot (full ship-to + billing addresses, phone,
 * note, status timeline). */
.lh-modal--details { max-width: 640px; }
.lh-modal__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}
.lh-modal__header h3 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    letter-spacing: -0.01em;
}
.lh-modal__header small {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.lh-modal__body--details {
    max-height: 65vh;
    overflow-y: auto;
}
.lh-detail-grid {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px 16px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}
.lh-detail-grid dt {
    margin: 0;
    font-size: 11px;
    font-weight: var(--weight-semi);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: start;
    padding-top: 2px;
}
.lh-detail-grid dd {
    margin: 0;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.lh-detail-grid dd small { display: block; color: var(--color-text-muted); margin-top: 2px; }
.lh-detail-grid__note {
    background: #faf8f4;
    border-left: 3px solid #c9c2b5;
    padding: 8px 10px;
    border-radius: 4px;
    white-space: pre-wrap;
}
@media (max-width: 600px) {
    .lh-detail-grid { grid-template-columns: 1fr; gap: 4px 0; }
    .lh-detail-grid dt { padding-top: 8px; }
}

/* When action-cell buttons stack vertically and a label is genuinely too
 * long for the cell, allow line-wrap at word boundaries — never letter
 * break (the previous .data-cell-tight word-break was bleeding through). */
.data-table td.data-actions-stack .btn-row {
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
    line-height: 1.25;
}
/* Three-state unsaved-changes modal — wraps to two rows on narrow widths.
 * The first button (Discard, secondary) stays left of the others by way of
 * margin-right: auto so the two safe choices group on the right. */
.lh-modal__actions--three {
    flex-wrap: wrap;
}
.lh-modal__actions--three [data-action="discard"] {
    margin-right: auto;
    color: var(--error-text);
    border-color: var(--error-border);
}
.lh-modal__actions--three [data-action="discard"]:hover {
    background: var(--error-bg);
    border-color: var(--error-text);
}

/* =============================================================================
 * Admin shell + top nav
 * ===========================================================================*/

body.admin-shell {
    background: var(--color-bg);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-topnav-bg);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--color-border);
}
.topnav__inner {
    /* Full-width topnav: brand pinned to far-left, menus pinned to far-right.
     * Previously max-width: 1024px centered the brand in wide viewports —
     * felt off-balance against the always-left global rail. */
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 var(--space-5);
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.topnav__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-weight: var(--weight-semi);
    text-decoration: none;
    font-size: var(--text-md);
    flex-shrink: 0;
    letter-spacing: -0.01em;
}
.topnav__brand img { display: block; }
.topnav__brand:hover { color: var(--color-text); }

.topnav__menus {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.topnav__dropdown { position: relative; }
.topnav__dropdown > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-text);
    transition: background var(--duration-fast) var(--ease);
}
.topnav__dropdown > summary::-webkit-details-marker { display: none; }
.topnav__dropdown > summary::marker { content: ''; }
.topnav__dropdown > summary:hover,
.topnav__dropdown[open] > summary { background: var(--gray-100); }

.topnav__label-prefix {
    color: var(--color-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--weight-medium);
    margin-right: 2px;
}
.topnav__label-main {
    font-weight: var(--weight-medium);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topnav__label-main--user { max-width: 220px; color: var(--color-text-muted); }

.topnav__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-500);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--weight-semi);
    flex-shrink: 0;
}

.topnav__caret {
    color: var(--color-text-faint);
    line-height: 0;
}

.topnav__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-1);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: lh-modal-in var(--duration) var(--ease) both;
}
.topnav__panel--right { left: auto; right: 0; }
.topnav__panel a,
.topnav__panel button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px 10px;
    border-radius: var(--radius-xs);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    background: transparent;
    border: 0;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--duration-fast) var(--ease);
}
.topnav__panel a:hover,
.topnav__panel button:hover {
    background: var(--gray-100);
    color: var(--color-text);
}
.topnav__panel .lh-icon { color: var(--color-text-muted); }
.topnav__panel hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-1) 4px;
}
.topnav__panel-section {
    margin: 6px 12px 2px;
    font-size: 10px;
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--weight-semi);
}
.topnav__panel-user-email {
    margin: 6px 12px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    word-break: break-all;
}
.topnav__logout { margin: 0; }

/* Solo nav: hide the workspace dropdown's "Workspace" prefix */
.admin-shell--solo .topnav__label-prefix { display: none; }

.admin-main {
    flex: 1 1 auto;
    padding: var(--space-6) var(--space-4);
}
.admin-container {
    max-width: 720px;
    margin: 0 auto;
}
/* Editor (page editor + dashboard) needs more horizontal room for the
 * sidebar layout. :has() is in every modern browser as of 2024. */
.admin-container:has(.editor-shell),
.admin-container:has(.dashboard-shell),
.admin-container:has(.lh-card-stage) {
    max-width: 1040px;
}
/* Pages with data tables (pages list, members, etc.) get a wider
 * container so action-button rows fit on a single line and titles
 * don't wrap. .data-table-wrap provides horizontal scroll as a
 * fallback at very narrow viewports. */
.admin-container:has(.data-table) {
    max-width: 1240px;
}
/* Card pages: keep designer + order at the same editor-width even when
 * the orders table appears in the designer (else the layout would jump
 * 1040 → 1240 between the two pages). */
.admin-container:has(.lh-card-stage) {
    max-width: 1040px;
}

/* Back-link strip used at the top of rail-less admin pages (profile,
 * platform settings) so the user always has a one-click route home. */
.page-back-link {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
}
.page-back-link a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    text-decoration: none;
}
.page-back-link a:hover { color: var(--color-text); }

/* ----- Block picker modal + trigger ----- */

.block-picker-trigger {
    margin: var(--space-4) 0 var(--space-3);
}
.block-picker-trigger .btn-primary {
    width: 100%;
    justify-content: center;
}
/* Top placement (above the block list) — tighter top margin since
 * it follows directly after the autosave note. */
.block-picker-trigger--top {
    margin: var(--space-2) 0 var(--space-4);
}

.lh-block-picker {
    max-width: 720px;
    width: calc(100vw - var(--space-5));
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
}
.lh-block-picker::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}
.lh-block-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) 0;
}
.lh-block-picker__head h2 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-semi);
}
.lh-block-picker__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    line-height: 0;
}
.lh-block-picker__close:hover { background: var(--gray-100); color: var(--color-text); }
.lh-block-picker__hint {
    margin: var(--space-1) var(--space-5) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.lh-block-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-5);
}
.lh-block-picker__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition:
        border-color 0.18s cubic-bezier(0.2, 0, 0, 1),
        background   0.18s cubic-bezier(0.2, 0, 0, 1),
        transform    0.18s cubic-bezier(0.2, 0, 0, 1);
}
.lh-block-picker__card:hover {
    border-color: var(--brand-500);
    background: var(--brand-50);
    transform: translateY(-1px);
}
.lh-block-picker__card-icon {
    display: inline-flex;
    align-items: center;
    color: var(--brand-600);
}
.lh-block-picker__card-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    color: var(--color-text);
}
.lh-block-picker__card-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.lh-block-picker__card--soon {
    cursor: not-allowed;
    opacity: 0.55;
    border-style: dashed;
}
.lh-block-picker__card--soon:hover {
    border-color: var(--color-border);
    background: var(--color-surface);
    transform: none;
}
.lh-block-picker__card--soon .lh-block-picker__card-icon { color: var(--color-text-muted); }

/* ----- Section header pattern: title + lede on left, primary CTA on right ----- */

.page-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.page-section-head h1 {
    margin: 0 0 4px;
    font-size: var(--text-2xl);
    font-weight: var(--weight-semi);
    line-height: 1.1;
}
.page-section-head .auth-lede {
    margin: 0;
    color: var(--color-text-muted);
}
@media (max-width: 600px) {
    .page-section-head .btn-link { width: 100%; justify-content: center; }
}

/* ----- Admin body shell: optional global left rail ----- */

.admin-body {
    flex: 1 1 auto;
    /* No min-height — let the body shrink to its content so the
     * footer sits directly under the content, not at the bottom of
     * an artificially-tall body box. The rail's natural height
     * (driven by its own nav items) keeps it visible. */
    display: block;
}
.admin-body--with-rail {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
}

.admin-rail {
    position: sticky;
    top: 56px; /* clear the sticky topnav */
    align-self: stretch;
    /* No max-height/overflow — both were clipping the switcher's pop-up panel.
     * If rail content ever exceeds viewport height, the page scrolls naturally
     * (sticky positioning keeps the rail visible while it does). */
    padding: var(--space-5) var(--space-3);
    border-right: 1px solid var(--color-border);
    background: var(--color-surface);
}
.admin-rail__head {
    margin-bottom: var(--space-4);
    padding: 0 var(--space-2);
}
.admin-rail__eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: var(--weight-semi);
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.admin-rail__title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    color: var(--color-text);
    word-break: break-word;
}
.admin-rail__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-4);
}
.admin-rail__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: background var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}
.admin-rail__link:hover { background: var(--gray-100); }
.admin-rail__link.is-active {
    background: var(--brand-50);
    color: var(--brand-700);
}
.admin-rail__link svg { flex: 0 0 auto; opacity: 0.85; }

.admin-rail__cta {
    padding: 0 var(--space-2);
}
.admin-rail__cta .btn-primary {
    width: 100%;
    justify-content: center;
}

/* ----- Admin rail sections (workspace + page context) ----- */

.admin-rail__section + .admin-rail__section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* When the rail is in page-focus mode (we're inside a page editor / settings),
 * the Page block leads. The Brand-Space block visually steps back via COLOR
 * and WEIGHT only — sizing/padding stay identical so links don't shift
 * position when switching between page and workspace contexts. */
.admin-rail--page-focus .admin-rail__section--secondary .admin-rail__title {
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
}
.admin-rail--page-focus .admin-rail__section--secondary .admin-rail__link {
    color: var(--color-text-muted);
}
.admin-rail--page-focus .admin-rail__section--secondary .admin-rail__link.is-active {
    /* Even active state stays subdued so it doesn't compete with the Page block. */
    background: var(--gray-100);
    color: var(--color-text);
    font-weight: var(--weight-medium);
}

/* "Recent page" block — shown on workspace-level views as a quick way back
 * to the page just edited. Slightly muted so it reads as "leftover context"
 * not "you are here". Active states from $pageActive() never apply because
 * we set them all to '' when in recent mode. */
.admin-rail__section--recent .admin-rail__eyebrow {
    color: var(--brand-600);
}
.admin-rail__section--recent .admin-rail__title {
    font-size: var(--text-base);
}
.admin-rail__section--recent .admin-rail__link {
    color: var(--color-text-muted);
}
.admin-rail__section--recent .admin-rail__link:hover {
    color: var(--color-text);
}
.admin-rail__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0 var(--space-2);
}
.admin-rail__sub code {
    font-size: 11px;
    background: var(--gray-100);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
}
.admin-rail__back {
    margin: var(--space-3) 0 0;
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
}
.admin-rail__back a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    text-decoration: none;
}
.admin-rail__back a:hover { color: var(--color-text); }

/* Workspace switcher card pinned at bottom of rail. The panel overlays on
 * top of surrounding content (position: absolute) so opening it doesn't push
 * the rail's visible items around. Anchored bottom-up so the panel grows
 * upward — fits naturally above the trigger that lives at the rail bottom. */
.admin-rail__switcher {
    margin-top: var(--space-3);
    margin-bottom: var(--space-4);
    position: relative;
}
/* Inline variant — sits directly under the workspace title (no
 * auto-margin push to bottom, no border separator). */
.admin-rail__switcher--inline {
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
    border-top: 0;
    padding-top: 0;
}
.admin-rail__switcher-details {
    position: relative;
}
.admin-rail__switcher-details summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    background: var(--color-surface);
}
.admin-rail__switcher-details summary::-webkit-details-marker { display: none; }
.admin-rail__switcher-details[open] summary {
    border-color: var(--color-border-strong);
}
.admin-rail__switcher-icon { display: inline-flex; color: var(--color-text-muted); }
.admin-rail__switcher-label { flex: 1 1 auto; color: var(--color-text); }
.admin-rail__switcher-caret { display: inline-flex; transition: transform 0.15s ease; color: var(--color-text-muted); }
.admin-rail__switcher-details[open] .admin-rail__switcher-caret { transform: rotate(180deg); }
.admin-rail__switcher-panel {
    /* Anchored to the trigger and opens UPWARD (bottom: 100% places
     * the panel's bottom edge at the trigger's top edge). The trigger
     * lives below the rail's nav so an upward panel doesn't overflow
     * the rail. Position relative to the parent .admin-rail__switcher-
     * details (which has position: relative). */
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px); /* small gap between trigger and panel */
    z-index: 60;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 60vh;
    overflow-y: auto;
}
.admin-rail__switcher-panel a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
}
.admin-rail__switcher-panel a:hover { background: var(--gray-50); }
.admin-rail__switcher-panel hr {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

/* Make the rail a flex column so the switcher's margin-top:auto pushes it
 * to the bottom even when there's only one section. */
.admin-rail {
    display: flex;
    flex-direction: column;
}

/* ----- Topnav: simplified workspace dropdown ----- */

.topnav__panel-empty {
    margin: 0;
    padding: 4px 8px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Hamburger button — only shown on mobile, opens the rail drawer. */
.topnav__rail-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: var(--space-2);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--color-text);
    cursor: pointer;
}
.topnav__rail-toggle:hover { background: var(--gray-100); }

/* Drawer backdrop — full-viewport tint behind the open drawer. */
.admin-rail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0, 0, 0, 0.45);
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.admin-rail-backdrop[hidden] { display: none; }

@media (max-width: 720px) {
    .topnav__rail-toggle { display: inline-flex; }

    .admin-body--with-rail {
        grid-template-columns: 1fr;
    }
    /* Slide-out drawer instead of horizontal banner.
     * Closed: parked off-screen left.
     * Open: slid in via `is-open` on body. */
    .admin-rail {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(82vw, 320px);
        max-height: none;
        align-self: auto;
        padding: var(--space-4) var(--space-3) var(--space-3);
        background: var(--color-surface);
        border-right: 1px solid var(--color-border);
        border-bottom: 0;
        z-index: 90;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-105%);
        transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
        box-shadow: 12px 0 32px rgba(0, 0, 0, 0.18);
    }
    body.admin-shell--rail-open .admin-rail { transform: translateX(0); }

    .admin-rail__head { margin-bottom: var(--space-2); padding: 0; }
    .admin-rail__nav {
        flex-direction: column;
        gap: var(--space-1);
        overflow-x: visible;
        padding: var(--space-2) 0;
        margin: 0;
    }
    .admin-rail__link {
        flex: 0 0 auto;
        white-space: normal;
        padding: 10px 12px;
        border: 0;
        background: transparent;
    }
    .admin-rail__link.is-active {
        border-color: transparent;
        background: var(--gray-100);
    }
    /* Switcher hidden on mobile — the topnav workspace dropdown covers it. */
    .admin-rail__switcher { display: none; }
    /* Lock body scroll when the drawer is open so the page underneath
     * doesn't scroll behind the touch interaction. */
    body.admin-shell--rail-open { overflow: hidden; }
}
.admin-footer {
    padding: var(--space-5) 0 var(--space-4) 0;
    text-align: center;
    color: var(--color-text-faint);
    font-size: var(--text-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.admin-footer__legal,
.auth-footer__legal,
.lh-public__legal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.admin-footer__legal a,
.auth-footer__legal a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.admin-footer__legal a:hover,
.auth-footer__legal a:hover {
    color: var(--color-text);
    text-decoration: underline;
}
.auth-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Cookie banner — bottom-fixed, dismissible, only shown until first dismiss. */
.lh-cookie-banner {
    position: fixed;
    bottom: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    max-width: 720px;
    margin-inline: auto;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm);
    color: var(--color-text);
    flex-wrap: wrap;
}
.lh-cookie-banner[hidden] { display: none; }
.lh-cookie-banner__text {
    margin: 0;
    flex: 1 1 280px;
    line-height: 1.5;
}
.lh-cookie-banner__text a {
    color: var(--color-accent);
    text-decoration: underline;
}
.lh-cookie-banner__btn {
    flex: 0 0 auto;
    padding: 8px 16px;
    background: var(--brand-500);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semi);
    font-size: var(--text-sm);
    cursor: pointer;
}
.lh-cookie-banner__btn:hover { filter: brightness(0.95); }

/* =============================================================================
 * Workspace dashboard
 * ===========================================================================*/

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                transform var(--duration) var(--ease);
}
.stat-card:hover:not(.stat-card--readonly) {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    color: var(--color-text);
}
.stat-card--readonly { cursor: default; }
.stat-card__value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-text);
    letter-spacing: -0.02em;
}
.stat-card__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--weight-medium);
}

.quick-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.quick-actions .btn-link { width: auto; }

/* =============================================================================
 * Home page workspace cards
 * ===========================================================================*/

.home-card { padding: var(--space-6); }
.home-greeting { margin-bottom: var(--space-5); }
.home-greeting h1 {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--text-2xl);
    letter-spacing: -0.02em;
}
/* Variant with the "create new" CTA inline at the top right of the
 * greeting — keeps the action visible without scrolling, even with
 * many workspaces in the grid below. */
.home-greeting--with-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.home-greeting--with-action .btn-link { flex: 0 0 auto; }
.home-greeting--with-action > div { min-width: 0; }
.home-greeting--with-action h1 { margin-bottom: var(--space-1); }
.home-greeting--with-action .auth-lede { margin: 0; }

.ws-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.ws-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                transform var(--duration) var(--ease);
}
.ws-card:hover {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    color: var(--color-text);
}
.ws-card__name {
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
    color: var(--color-text);
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ws-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.ws-card__role {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--weight-semi);
    color: var(--color-text-muted);
}
.home-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.home-actions .btn-link { width: auto; }
.home-actions--center { justify-content: center; }

/* Anonymous home (login form) — left-aligned form fields, centred
 * buttons; tighter padding so the card doesn't feel cavernous. */
.home-card--anonymous {
    padding: var(--space-6) var(--space-6) var(--space-5);
    text-align: left;
}
.home-card--anonymous h1 { text-align: center; }
.home-card--anonymous .auth-lede { text-align: center; }
.home-card--anonymous .auth-altlink { text-align: center; }

/* Brand mark inside the auth card — right above the heading so the
 * logo sits visually adjacent to the form, not at the top of the
 * viewport. */
.auth-card__brand {
    display: flex;
    justify-content: center;
    margin: 0 0 var(--space-3);
}
.auth-card__brand img { display: block; height: 48px; width: auto; }

/* First-time user empty state — generous padding, centred copy. */
.home-card--empty {
    padding: var(--space-7) var(--space-6) var(--space-6);
    text-align: center;
}
.home-card--empty .auth-altlink { margin-top: var(--space-4); }

/* =============================================================================
 * Editor
 * ===========================================================================*/

.editor-card { max-width: 720px; margin: 0 auto; }

.editor-header h1 {
    margin-bottom: var(--space-1);
    font-size: var(--text-xl);
    letter-spacing: -0.01em;
}
.editor-meta {
    margin-top: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.editor-meta a { font-weight: var(--weight-medium); }

.publish-toolbar {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-4);
}
.publish-button {
    width: auto;
    min-width: 180px;
}

#block-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.empty-blocks {
    margin: 0;
    padding: var(--space-6) var(--space-4);
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    text-align: center;
}

.lh-edit-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease);
}
.lh-edit-block:hover { border-color: var(--color-border-strong); }
.lh-edit-block__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-xs);
}
.lh-edit-block__type {
    font-weight: var(--weight-semi);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lh-edit-block__actions {
    display: flex;
    gap: 4px;
}
.lh-edit-block__actions button {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-family: inherit;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all var(--duration-fast) var(--ease);
    line-height: 1.4;
}
.lh-edit-block__actions button:hover {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
.lh-edit-block__actions .btn-danger {
    color: var(--error-text);
    border-color: transparent;
    background: transparent;
}
.lh-edit-block__actions .btn-danger:hover {
    background: var(--error-bg);
    border-color: var(--error-border);
}
.lh-edit-block__actions [data-action="move-up"],
.lh-edit-block__actions [data-action="move-down"] {
    padding: 4px 8px;
    font-size: var(--text-xs);
    line-height: 1;
    min-width: 26px;
}

.lh-edit-block__preview {
    padding: var(--space-4);
    /* Mirror public.css theme tokens so block previews render with the same
     * defaults as the live page. Per-page theme override (via inline body
     * style) is wired through Phase 1d Slice 3 (Design tab live preview). */
    --lh-color-bg:          #f7f5f1;
    --lh-color-surface:     #ffffff;
    --lh-color-text:        #1c1c1c;
    --lh-color-text-muted:  #666666;
    --lh-color-title:       #1c1c1c;
    --lh-color-button-bg:   #1c1c1c;
    --lh-color-button-text: #ffffff;
    --lh-button-radius:     999px;
    --lh-radius:            10px;
    --lh-radius-sm:         6px;
    --lh-radius-pill:       999px;
    --lh-space-1: 4px;
    --lh-space-2: 8px;
    --lh-space-3: 12px;
    --lh-space-4: 16px;
    --lh-space-5: 24px;
    --lh-space-6: 32px;
    --lh-space-7: 48px;
}
.lh-edit-block__preview .lh-block--link-button { pointer-events: none; }
/* The editor list carries its own slimmed-down block styles (public.css
 * only loads in the preview iframe), so an uploaded button logo needs a
 * size here too — otherwise it renders at its natural pixel size and
 * blows the row apart. */
.lh-edit-block__preview .lh-link-button__icon-img {
    display: block;
    height: 26px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    border-radius: 4px;
}
.lh-edit-block__preview .lh-block--image img {
    max-width: 100%;
    max-height: 180px;
    width: auto;
    border-radius: var(--radius-sm);
    margin: 0 auto;
}
.lh-edit-block__preview .lh-block--image-full-bleed img { margin: 0 auto; }
.lh-edit-block__preview .lh-block--image figcaption {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
}

/* Hero block preview in the editor. The full public.css hero rules
 * aren't loaded in admin, so we replicate the essentials here scoped
 * to .lh-edit-block__preview. Goal: a representative preview tile —
 * shows the actual image with the chosen overlay, at a compact size. */
.lh-edit-block__preview .lh-block--hero {
    margin: 0 !important;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--gray-100);
    position: relative;
}
/* bg-overlay variant — image background + uniform veil + centred text. */
.lh-edit-block__preview .lh-block--hero-bg-overlay {
    min-height: 220px !important;
    max-height: 280px;
    display: flex;
    align-items: center !important;
    justify-content: center;
    position: relative;
    color: #fff;
}
.lh-edit-block__preview .lh-block--hero-bg-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--lh-hero-image);
    background-size: cover;
    background-position: center;
    background-color: var(--gray-200);
    z-index: 0;
}
.lh-edit-block__preview .lh-block--hero-bg-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}
.lh-edit-block__preview .lh-block--hero-text-dark::after {
    background: rgba(255, 255, 255, 0.55);
}
.lh-edit-block__preview .lh-block--hero-text-none::after {
    display: none;
}
.lh-edit-block__preview .lh-block--hero__scrim { display: none !important; }
.lh-edit-block__preview .lh-block--hero-bg-overlay .lh-block--hero__content {
    position: relative;
    z-index: 2;
    margin-top: 0 !important;
    padding: var(--space-4);
    text-align: center;
    width: 100%;
    color: var(--lh-hero-text-color, #fff);
}
.lh-edit-block__preview .lh-block--hero-text-dark .lh-block--hero__content {
    color: var(--lh-hero-text-color, #1c1c1c);
}
.lh-edit-block__preview .lh-block--hero-bg-overlay .lh-block--hero__title {
    font-size: var(--text-lg);
    color: inherit;
    margin: 0 0 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.lh-edit-block__preview .lh-block--hero-bg-overlay .lh-block--hero__subtitle {
    font-size: var(--text-sm);
    color: inherit;
    opacity: 0.92;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.lh-edit-block__preview .lh-block--hero-text-dark .lh-block--hero__title,
.lh-edit-block__preview .lh-block--hero-text-dark .lh-block--hero__subtitle {
    text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}

/* image-top + split previews — also need a constrained image. */
.lh-edit-block__preview .lh-block--hero-image-top .lh-block--hero__media img {
    height: 160px;
    width: 100%;
    object-fit: cover;
    display: block;
}
.lh-edit-block__preview .lh-block--hero-image-top .lh-block--hero__content {
    padding: var(--space-3);
    text-align: center;
    background: var(--color-surface);
}
.lh-edit-block__preview .lh-block--hero-split,
.lh-edit-block__preview .lh-block--hero-split-reverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 200px;
    max-height: 220px;
}
.lh-edit-block__preview .lh-block--hero-split .lh-block--hero__media,
.lh-edit-block__preview .lh-block--hero-split-reverse .lh-block--hero__media {
    overflow: hidden;
}
.lh-edit-block__preview .lh-block--hero-split .lh-block--hero__media img,
.lh-edit-block__preview .lh-block--hero-split-reverse .lh-block--hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lh-edit-block__preview .lh-block--hero-split .lh-block--hero__content,
.lh-edit-block__preview .lh-block--hero-split-reverse .lh-block--hero__content {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--color-surface);
}
.lh-edit-block__preview .lh-block--hero-split-reverse .lh-block--hero__media   { order: 2; }
.lh-edit-block__preview .lh-block--hero-split-reverse .lh-block--hero__content { order: 1; }

.lh-edit-block__form {
    padding: var(--space-4);
    background: var(--gray-50);
    border-top: 1px solid var(--color-border);
}
.lh-form-fields { margin-bottom: var(--space-3); }
.lh-form .field { margin-bottom: var(--space-3); }
.lh-form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.lh-form-actions .btn-primary,
.lh-form-actions .btn-secondary {
    width: auto;
    min-width: 110px;
}
.lh-form-status {
    flex: 1 1 auto;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.lh-form-status--error { color: var(--error-text); }

/* ----- Visual icon picker (link_button.icon) ----- */
.lh-icon-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 8px;
    margin-top: 6px;
}
.lh-icon-picker__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    min-height: 76px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e2e2);
    border-radius: 10px;
    color: var(--color-text, #1c1c1c);
    cursor: pointer;
    /* Suppress the persistent focus ring after click — clicking a tile
     * shouldn't leave it looking "hovered" forever. Kept for keyboard
     * navigation via :focus-visible below. */
    outline: none;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.lh-icon-picker__tile:hover {
    border-color: var(--color-text-muted, #888);
    background: color-mix(in srgb, var(--color-text, #1c1c1c) 5%, var(--color-surface, #fff));
}
.lh-icon-picker__tile:focus-visible {
    border-color: var(--color-text, #1c1c1c);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-text, #1c1c1c) 30%, transparent);
}
.lh-icon-picker__tile.is-selected {
    background: var(--color-text, #1c1c1c);
    color: var(--color-surface, #fff);
    border-color: var(--color-text, #1c1c1c);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.lh-icon-picker__tile.is-selected:hover {
    background: var(--color-text, #1c1c1c);
    border-color: var(--color-text, #1c1c1c);
}
.lh-icon-picker__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}
.lh-icon-picker__caption {
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
    color: inherit;
    opacity: 0.85;
    word-break: break-word;
}
.lh-icon-picker__tile.is-selected .lh-icon-picker__caption { opacity: 1; }

/* "Kein Symbol" tile is a special "off" state — give it a distinct
 * dashed-border / muted look so it never reads as a hovered or selected
 * icon tile. It still highlights when explicitly selected, but with a
 * lighter tint than the icon tiles so users can tell at a glance that
 * "no icon" is active. */
.lh-icon-picker__tile--none,
.lh-icon-picker__tile[data-icon-value=""] {
    background: transparent;
    border-style: dashed;
    color: color-mix(in srgb, var(--color-text, #1c1c1c) 60%, transparent);
}
.lh-icon-picker__tile--none:hover,
.lh-icon-picker__tile[data-icon-value=""]:hover {
    background: color-mix(in srgb, var(--color-text, #1c1c1c) 4%, transparent);
    border-style: dashed;
    color: var(--color-text, #1c1c1c);
}
.lh-icon-picker__tile--none.is-selected,
.lh-icon-picker__tile[data-icon-value=""].is-selected {
    background: color-mix(in srgb, var(--color-text, #1c1c1c) 10%, transparent);
    color: var(--color-text, #1c1c1c);
    border-color: color-mix(in srgb, var(--color-text, #1c1c1c) 50%, transparent);
    border-style: dashed;
    box-shadow: none;
}
.lh-icon-picker__none {
    font-size: 20px;
    line-height: 1;
    opacity: 0.7;
}

/* ----- Pattern wallpaper picker ----- */
[data-show-when-wallpaper-kind][hidden] { display: none; }

.lh-pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin-top: 6px;
}
.lh-pattern-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e2e2);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.lh-pattern-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.lh-pattern-tile:has(input:checked) {
    border-color: var(--color-text, #1c1c1c);
    box-shadow: 0 0 0 2px var(--color-text, #1c1c1c);
}
.lh-pattern-tile__swatch {
    display: block;
    width: 100%;
    height: 64px;
    border-radius: 6px;
    background-color: #f7f5f1;
}
.lh-pattern-tile__name {
    font-size: 12px;
    text-align: center;
    color: var(--color-text-muted, #555);
}
/* Each swatch carries a static SVG-pattern preview. The line is dark grey
 * so the shape reads on a near-white surface — the user separately picks
 * the live colours via the colour fields above. */
.lh-pattern-tile__swatch[data-pattern="dots"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><circle cx='10' cy='10' r='1.6' fill='%231c1c1c' fill-opacity='0.55'/></svg>");
}
.lh-pattern-tile__swatch[data-pattern="grid"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M32 0H0V32' fill='none' stroke='%231c1c1c' stroke-width='1' stroke-opacity='0.5'/></svg>");
}
.lh-pattern-tile__swatch[data-pattern="diagonal"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M-2 22 L22 -2 M-2 12 L12 -2 M8 22 L22 8' stroke='%231c1c1c' stroke-width='1' stroke-opacity='0.5'/></svg>");
}
.lh-pattern-tile__swatch[data-pattern="cross"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 8v8 M8 12h8' stroke='%231c1c1c' stroke-width='1.2' stroke-opacity='0.55' stroke-linecap='round'/></svg>");
}
.lh-pattern-tile__swatch[data-pattern="hex"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'><path d='M14 25.6 L0 17.6 L0 0 L14 8 L28 0 L28 17.6 Z M14 25.6 L14 49 M14 41 L0 33 M14 41 L28 33' fill='none' stroke='%231c1c1c' stroke-width='1' stroke-opacity='0.5'/></svg>");
}
.lh-pattern-tile__swatch[data-pattern="waves"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'><path d='M0 10 Q 10 0 20 10 T 40 10' fill='none' stroke='%231c1c1c' stroke-width='1.2' stroke-opacity='0.55'/></svg>");
}

/* =============================================================================
 * Backend QR-code dialog (page-edit screen)
 *
 * Mirrors the public-page QR dialog look so users see one consistent
 * modal pattern across the app. Public.css isn't loaded in admin context,
 * so the styles are repeated here scoped to .lh-qr-dialog.
 * ===========================================================================*/
.lh-qr-dialog {
    border: 0;
    border-radius: 16px;
    padding: 0;
    max-width: 380px;
    width: calc(100% - 32px);
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #111);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.lh-qr-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}
@keyframes lh-qr-dialog-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.lh-qr-dialog[open] {
    animation: lh-qr-dialog-pop 180ms cubic-bezier(0.2, 0, 0, 1);
}
.lh-qr-dialog__inner {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.lh-qr-dialog__header {
    position: relative;
    padding: 18px 48px 14px 20px;
    border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.08));
}
.lh-qr-dialog__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}
.lh-qr-dialog__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--color-text-muted, #666);
    cursor: pointer;
}
.lh-qr-dialog__close:hover {
    background: rgba(0,0,0,0.06);
    color: var(--color-text, #111);
}
.lh-qr-dialog__preview {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lh-qr-dialog__preview img {
    width: 240px;
    height: 240px;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.lh-qr-dialog__controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 20px 14px;
}
.lh-qr-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lh-qr-control__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #666);
}
.lh-qr-control input[type="color"] {
    width: 100%;
    height: 36px;
    border: 1px solid var(--color-border, rgba(0,0,0,0.12));
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
    background: #fff;
}
.lh-qr-dialog__url {
    margin: 0;
    padding: 0 20px 14px;
    font-size: 12px;
    color: var(--color-text-muted, #666);
    word-break: break-all;
}
.lh-qr-dialog__actions {
    padding: 14px 16px 16px;
    border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lh-qr-dialog__primary,
.lh-qr-dialog__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}
.lh-qr-dialog__primary {
    background: var(--color-text, #111);
    color: #fff;
}
.lh-qr-dialog__primary:hover { filter: brightness(1.1); }
.lh-qr-dialog__secondary {
    background: rgba(0,0,0,0.06);
    color: var(--color-text, #111);
}
.lh-qr-dialog__secondary:hover { background: rgba(0,0,0,0.10); }

/* QR-Code button next to the public URL in the editor head */
.editor-panel__url {
    /* Generous bottom margin so the URL/QR row doesn't crash into the
     * sticky save bar that follows directly inside the form below. */
    margin: var(--space-3) 0 var(--space-5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.editor-panel__qr-btn {
    margin-left: auto; /* push the button to the right of the URL */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.editor-panel__qr-hint {
    margin: 4px 0 var(--space-4);
    font-size: 12px;
    color: var(--color-text-muted, #666);
}

.block-picker {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

/* ----- Page-template picker (new-page form) ----- */

.tpl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.tpl-card {
    position: relative;
    display: block;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease),
                background var(--duration-fast) var(--ease);
}
.tpl-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-xs);
}
.tpl-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
/* `--selected` static class is no longer used — selection state comes
 * solely from :has(input:checked) so a click instantly reflects the new
 * radio without showing both old + new as selected at once. */
.tpl-card:has(input:checked) {
    border-color: var(--brand-500);
    background: var(--brand-50);
    box-shadow: var(--ring-focus);
}
.tpl-card__name {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text);
    margin-bottom: 2px;
}
.tpl-card__desc {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
    margin-bottom: 4px;
}
.tpl-card__count {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--weight-semi);
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
@media (max-width: 600px) {
    .tpl-grid { grid-template-columns: 1fr; }
}

/* ----- Image upload widget (editor) ----- */

.lh-upload {
    display: block;
    padding: var(--space-3);
    background: var(--gray-50);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
}
.lh-upload__preview { margin-bottom: var(--space-2); }
.lh-upload__preview img {
    display: block;
    max-width: 100%;
    max-height: 240px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-border);
}
.lh-upload__missing {
    display: inline-block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}
.lh-upload__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.lh-upload__status {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.lh-upload__status--error { color: var(--error-text); }
.lh-upload [data-upload-clear] {
    background: transparent;
    border: 0;
    color: var(--error-text);
    cursor: pointer;
    font-size: var(--text-xs);
    padding: 4px 8px;
    border-radius: var(--radius-xs);
}
.lh-upload [data-upload-clear]:hover { background: var(--error-bg); }

/* ----- Block lock section in edit form ----- */
.lh-form-lock {
    margin: var(--space-4) 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    padding: 0;
    overflow: hidden;
}
.lh-form-lock[open] { background: var(--gray-50); }
.lh-form-lock__summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-3);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--weight-semi);
    color: var(--color-text);
    background: var(--color-surface);
}
.lh-form-lock__summary::-webkit-details-marker { display: none; }
.lh-form-lock__icon { font-size: 14px; }
.lh-form-lock__state {
    margin-left: auto;
    font-weight: var(--weight-normal);
    font-size: var(--text-xs);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--gray-100);
    color: var(--color-text-muted);
}
.lh-form-lock[open] .lh-form-lock__state {
    background: var(--brand-100, #d4f2e3);
    color: var(--brand-700, #016e34);
}
.lh-form-lock > .field,
.lh-form-lock > .field-hint,
.lh-form-lock > .lh-form-actions { padding: 0 var(--space-3); margin-top: var(--space-2); }
.lh-form-lock > .lh-form-actions { padding-bottom: var(--space-3); }

.lh-edit-block__lock {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    vertical-align: middle;
    color: var(--color-text-muted);
}

/* ----- Block color picker (swatch + hex pair) — matches lh-color-pair ----- */
.lh-block-color {
    display: inline-flex;
    align-items: stretch;
    gap: 6px;
}
.lh-block-color__swatch {
    width: 42px;
    flex: 0 0 42px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
}
.lh-block-color__swatch::-webkit-color-swatch-wrapper { padding: 0; }
.lh-block-color__swatch::-webkit-color-swatch { border: 0; border-radius: 3px; }
.lh-block-color__swatch::-moz-color-swatch { border: 0; border-radius: 3px; }
.lh-block-color__hex {
    flex: 0 0 auto;
    width: 140px;
    height: 38px;
    padding: 0 var(--space-2);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: var(--text-sm);
    text-transform: lowercase;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
}
.lh-block-color__hex:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--ring-focus);
}
.lh-block-color__clear {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    line-height: 1;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-base);
}
.lh-block-color__clear:hover {
    background: var(--gray-50);
    color: var(--color-text);
}

/* ----- Multi-image widget for the gallery block editor ----- */
.lh-media-list {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    background: var(--gray-50);
}
.lh-media-list__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-bottom: var(--space-2);
}
.lh-media-list__tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}
.lh-media-list__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lh-media-list__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 1;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.lh-media-list__remove:hover { background: var(--error-text); }
.lh-media-list__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.lh-media-list__status {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.lh-media-list__status--error { color: var(--error-text); }

/* ----- Video block preview in editor ----- */
.lh-edit-block__preview .lh-block--video__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-xs);
    overflow: hidden;
    /* Cap height in editor so a long iframe doesn't dominate the editor view */
    max-height: 220px;
}
.lh-edit-block__preview .lh-block--video__frame iframe,
.lh-edit-block__preview .lh-block--video__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.lh-edit-block__preview .lh-block--video__caption {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
}

/* ----- Gallery block preview in editor — smaller tiles, plain look ----- */
.lh-edit-block__preview .lh-block--gallery__tile {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-xs);
    background: var(--gray-100);
    border: 0;
    padding: 0;
    cursor: default;
    display: block;
}
.lh-edit-block__preview .lh-block--gallery-corner-abgerundet .lh-block--gallery__tile { border-radius: 12px; }
.lh-edit-block__preview .lh-block--gallery-corner-eckig      .lh-block--gallery__tile { border-radius: 0; }
.lh-edit-block__preview .lh-block--gallery__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 120px;
}
.lh-edit-block__preview .lh-block--gallery-carousel .lh-block--gallery__track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.lh-edit-block__preview .lh-block--gallery-carousel .lh-block--gallery__tile {
    flex: 0 0 33%;
    aspect-ratio: 4 / 3;
}
.lh-edit-block__preview .lh-block--gallery-grid-2 .lh-block--gallery__track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}
.lh-edit-block__preview .lh-block--gallery__empty {
    padding: var(--space-3);
    background: var(--gray-50);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-xs);
    text-align: center;
    color: var(--color-text-muted);
}

/* ----- Form block preview in editor — flat, matches public render ----- */
.lh-edit-block__preview .lh-block--form {
    margin: 0;
    padding: var(--space-3);
    background: transparent;
    border: 0;
    color: var(--color-text);
}
.lh-edit-block__preview .lh-block--form__title {
    margin: 0 0 4px;
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
}
.lh-edit-block__preview .lh-block--form__desc {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.lh-edit-block__preview .lh-block--form__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.lh-edit-block__preview .lh-block--form__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.lh-edit-block__preview .lh-block--form__form input,
.lh-edit-block__preview .lh-block--form__form textarea {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    font-size: var(--text-sm);
    background: var(--color-surface);
    color: var(--color-text);
}
.lh-edit-block__preview .lh-block--form__submit {
    margin-top: var(--space-2);
    padding: 6px 12px;
    border-radius: var(--radius-xs);
    border: 0;
    background: var(--brand-500);
    color: #fff;
    font-size: var(--text-sm);
    cursor: not-allowed;
    opacity: 0.85;
}
.lh-edit-block__preview .lh-block--form__honey { display: none; }

/* ============================================================================
 * Visitenkarte (PVC business card) — designer + order
 * ===========================================================================*/

.lh-card-stage {
    margin: 0 auto var(--space-5);
    padding: var(--space-5);
    /* Neutral dark gray in light mode — strong enough for the white cards
     * to read as separate but not as harsh as pure black. Dark mode keeps
     * the slightly cooler near-black gradient. */
    background: #3d3d44;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .lh-card-stage {
    background: linear-gradient(180deg, #2a2a30 0%, #1a1a1f 100%);
}
.lh-card-stage--compact { padding: var(--space-4); }
.lh-card-stage__faces {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    align-items: start;
    max-width: 920px;
    margin: 0 auto;
}
.lh-card-stage__face { margin: 0; }
.lh-card-stage__face figcaption {
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: var(--weight-medium);
}
.lh-card-stage__svg {
    aspect-ratio: 856 / 540;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35));
}
.lh-card-stage__svg svg { width: 100%; height: 100%; display: block; }
.lh-card-stage__face--front .lh-card-stage__svg:hover { transform: rotate(-1deg) translateY(-4px); }
.lh-card-stage__face--back  .lh-card-stage__svg:hover { transform: rotate(1deg)  translateY(-4px); }
.lh-card-stage__caption {
    margin: var(--space-4) 0 0;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 720px) {
    .lh-card-stage__faces { grid-template-columns: 1fr; }
}

.lh-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
}
.lh-card-grid__full { grid-column: 1 / -1; }
.lh-card-grid .field { max-width: none; }
@media (max-width: 720px) { .lh-card-grid { grid-template-columns: 1fr; } }

.lh-card-socials { border: 0; padding: 0; margin: var(--space-4) 0; }
.lh-card-socials legend { font-weight: var(--weight-semi); padding: 0; font-size: var(--text-md); }
.lh-card-socials__rows {
    display: flex; flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-3) 0;
}
.lh-card-socials__row {
    display: grid;
    grid-template-columns: minmax(160px, 200px) 1fr auto;
    gap: var(--space-2);
    align-items: stretch;
    padding: 0;
}
.lh-card-socials__row select,
.lh-card-socials__row input[type="text"] {
    height: 40px;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0 var(--space-3);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    transition: border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
}
.lh-card-socials__row select:focus,
.lh-card-socials__row input[type="text"]:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--ring-focus);
}
.lh-card-socials__row [data-card-socials-remove] {
    width: 40px; height: 40px;
    padding: 0;
    border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    transition: color var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                background var(--duration-fast) var(--ease);
}
.lh-card-socials__row [data-card-socials-remove]:hover {
    color: var(--color-danger, #c0392b);
    border-color: var(--color-danger, #c0392b);
    background: color-mix(in srgb, var(--color-danger, #c0392b) 6%, transparent);
}
[data-card-socials-add] {
    align-self: flex-start;
}
@media (max-width: 600px) {
    .lh-card-socials__row {
        grid-template-columns: 1fr auto;
    }
    .lh-card-socials__row select { grid-column: 1 / -1; }
}

.lh-card-variants,
.lh-card-quantity { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.lh-card-variants legend,
.lh-card-quantity legend { padding: 0; margin-bottom: var(--space-2); }

.lh-card-variants { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.lh-card-variants > legend { grid-column: 1 / -1; }
.lh-card-variant {
    position: relative; display: flex; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border); border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease),
                background var(--duration-fast) var(--ease);
}
.lh-card-variant:hover { border-color: var(--color-border-strong); }
.lh-card-variant:has(input:checked) {
    border-color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 6%, var(--color-surface));
    box-shadow: var(--ring-focus);
}
.lh-card-variant input { margin-top: 4px; flex: 0 0 auto; }
.lh-card-variant strong { display: block; font-size: var(--text-md); margin-bottom: 4px; }
.lh-card-variant p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; }
@media (max-width: 600px) { .lh-card-variants { grid-template-columns: 1fr; } }

.lh-card-quantity { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.lh-card-quantity > legend { grid-column: 1 / -1; }
.lh-card-quantity label {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border); border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease),
                background var(--duration-fast) var(--ease);
}
.lh-card-quantity label:has(input:checked) {
    border-color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 6%, var(--color-surface));
}
.lh-card-quantity input { flex: 0 0 auto; }
.lh-card-quantity strong { display: block; font-size: var(--text-xl); font-weight: var(--weight-semi); }
.lh-card-quantity small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.lh-card-quantity__per { font-style: italic; opacity: 0.7; }

/* Material × paper-grade × quantity tile picker on the order form. Each
 * <fieldset.lh-card-products> wraps one material; inside, paper-grades each
 * get their own .lh-card-products__group with quantity tiles below. */
.lh-card-products { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.lh-card-products > legend {
    padding: 0; margin-bottom: var(--space-3);
    font-size: var(--text-sm); font-weight: var(--weight-semi);
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted);
}
.lh-card-products__group { margin: 0 0 var(--space-4); }
.lh-card-products__group:last-child { margin-bottom: 0; }
.lh-card-products__group-title {
    margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semi);
    color: var(--color-text);
}

/* Optional billing-address block: hidden until the user opts in via the
 * `Rechnungsadresse weicht ab` toggle. CSS-only via :has() — no JS. */
.lh-card-billing {
    border: 0;
    padding: 0;
    margin: 0;
    display: none;
}
.profile-form:has([data-billing-toggle]:checked) .lh-card-billing {
    display: block;
    margin-top: var(--space-3);
}
.lh-card-billing__toggle {
    display: inline-flex; gap: var(--space-2); align-items: center;
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--text-sm);
}
.lh-card-billing__toggle:has(input:checked) {
    border-color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 6%, var(--color-surface));
}

/* Accordion (designer collapsed by default when there are existing orders). */
.lh-card-accordion { padding: 0; }
.lh-card-accordion--spaced { margin-top: var(--space-6); }
.lh-card-accordion__head {
    list-style: none;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
}
.lh-card-accordion__head::-webkit-details-marker { display: none; }
.lh-card-accordion[open] .lh-card-accordion__head {
    border-bottom: 1px solid var(--color-border);
}
.lh-card-accordion__caret {
    display: inline-flex;
    transition: transform var(--duration-fast) var(--ease);
    color: var(--color-text-muted);
}
.lh-card-accordion[open] .lh-card-accordion__caret {
    transform: rotate(180deg);
}
.lh-card-accordion__body {
    padding: var(--space-5);
}

/* Floating save bar — fixed bottom, appears when the designer form is dirty. */
.lh-card-save-bar {
    position: fixed;
    left: 50%;
    bottom: var(--space-4);
    transform: translate(-50%, calc(100% + 24px));
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    z-index: 60;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    max-width: calc(100vw - 2 * var(--space-4));
}
.lh-card-save-bar.is-visible { transform: translate(-50%, 0); }
.lh-card-save-bar__msg {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-sm);
    color: var(--color-text);
    font-weight: var(--weight-medium);
}
.lh-card-save-bar__actions {
    display: flex; gap: var(--space-2);
}
.lh-card-save-bar .btn-row,
.lh-card-save-bar .btn-primary {
    border-radius: 999px;
}
@media (max-width: 600px) {
    .lh-card-save-bar { bottom: var(--space-3); padding: var(--space-2) var(--space-3); flex-wrap: wrap; }
    .lh-card-save-bar__msg { font-size: var(--text-xs); }
}

/* Layout toggle (Text vs Logo) shares the variant card visuals */
.lh-card-layout {
    border: 0; padding: 0; margin: 0 0 var(--space-4);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
.lh-card-layout > legend { grid-column: 1 / -1; padding: 0; margin-bottom: var(--space-2); }
@media (max-width: 600px) { .lh-card-layout { grid-template-columns: 1fr; } }

/* Stage toolbar (fullscreen button + dirty indicator) */
.lh-card-stage__toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-3);
    max-width: 920px; margin: 0 auto var(--space-3);
}
.lh-card-stage__toolbar .btn-row {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
}
.lh-card-stage__toolbar .btn-row:hover {
    background: rgba(255,255,255,0.16);
}
.lh-card-stage__dirty {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    background: rgba(255, 200, 0, 0.18);
    color: #ffd34d;
    border: 1px solid rgba(255, 200, 0, 0.3);
}
.lh-card-stage--dirty .lh-card-stage__dirty { display: inline-flex; }

/* Logo upload widget */
.lh-card-logo {
    margin: var(--space-3) 0 var(--space-4);
}
.lh-card-logo__row {
    display: flex; align-items: center; gap: var(--space-4);
    margin-top: var(--space-2);
}
.lh-card-logo__preview {
    width: 96px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-soft, var(--color-surface));
    overflow: hidden;
    flex: 0 0 auto;
}
.lh-card-logo__preview img {
    max-width: 100%; max-height: 100%; object-fit: contain;
}
.lh-card-logo__placeholder {
    font-size: var(--text-xs); color: var(--color-text-muted);
}
.lh-card-logo__actions {
    display: flex; gap: var(--space-2); align-items: center;
}
.lh-card-logo__status {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.lh-card-logo__status.is-error { color: var(--color-danger, #c00); }

/* Accent-target toggles: a small grid of checkboxes inside the form. */
.lh-accent-targets {
    border: 0;
    padding: 0;
    margin: 0;
}
.lh-accent-targets legend {
    font-weight: var(--weight-semi);
    margin-bottom: var(--space-2);
}
.lh-accent-targets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}
.lh-accent-targets > legend { grid-column: 1 / -1; }
.lh-accent-targets .lh-toggle { display: inline-flex; }
@media (max-width: 600px) {
    .lh-accent-targets { grid-template-columns: 1fr; }
}

/* Tap-me toggle inline with field */
.lh-toggle {
    display: inline-flex; gap: var(--space-2); align-items: center;
    padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--text-sm);
}
.lh-toggle:has(input:checked) {
    border-color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 6%, var(--color-surface));
}

/* Fullscreen card preview dialog */
.lh-card-fullscreen[open] {
    border: 0;
    padding: 0;
    background: rgba(15, 15, 20, 0.96);
    color: #fff;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lh-card-fullscreen::backdrop {
    background: rgba(0, 0, 0, 0.85);
}
.lh-card-fullscreen__close {
    position: absolute;
    top: 24px; right: 24px;
    z-index: 2;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease);
}
.lh-card-fullscreen__close:hover { background: rgba(255, 255, 255, 0.28); }
.lh-card-fullscreen__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 64px;
    width: 100%;
    max-width: 1400px;
}
.lh-card-fullscreen__face { margin: 0; text-align: center; }
.lh-card-fullscreen__face figcaption {
    margin-bottom: 16px;
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.lh-card-fullscreen__svg {
    aspect-ratio: 856 / 540;
    border-radius: 18px;
    overflow: hidden;
    filter: drop-shadow(0 24px 64px rgba(0, 0, 0, 0.6));
}
.lh-card-fullscreen__svg svg { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
    .lh-card-fullscreen__inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 16px;
    }
}

/* ============================================================================
 * Live page-preview side dock — fixed-position panel on the LEFT edge.
 * Mobile (375px) iframe of the public render. Editor canvas is NOT
 * reflowed; the dock just overlays the left side. Slide animation on
 * open/close (transform — no layout thrash).
 * ===========================================================================*/

.lh-preview-dock {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    z-index: 75;
    display: flex;
    flex-direction: column;
    background: #15151a;
    color: #f3f3ee;
    border-right: 1px solid rgba(255,255,255,0.08);
    box-shadow: 12px 0 40px rgba(0,0,0,0.35);
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.lh-preview-dock.is-open { transform: translateX(0); }
.lh-preview-dock[hidden] { display: none; }

.lh-preview-dock__chrome {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 16px;
    background: #1a1a20;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lh-preview-dock__title-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.lh-preview-dock__title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: #f3f3ee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lh-preview-dock__icon { color: rgba(255,255,255,0.6); flex: 0 0 auto; }

.lh-preview-dock__actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lh-preview-dock__actions .btn-row {
    background: rgba(255,255,255,0.06);
    color: #f3f3ee;
    border-color: transparent;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lh-preview-dock__actions .btn-row:hover { background: rgba(255,255,255,0.12); }
.lh-preview-dock__close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lh-preview-dock__close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.lh-preview-dock__phone {
    flex: 1 1 auto;
    padding: 24px 22px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    background:
        radial-gradient(60% 60% at 50% 0%, rgba(255,255,255,0.04), transparent 70%),
        #0e0e10;
}
.lh-preview-dock__iframe {
    width: 375px;
    max-width: 100%;
    height: 100%;
    min-height: 600px;
    border: 0;
    display: block;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

@media (max-width: 720px) {
    .lh-preview-dock { width: 100vw; }
    .lh-preview-dock__phone { padding: 16px 12px; }
}

/* ----- Hero block preview in editor ----- */
.lh-edit-block__preview .lh-block--hero {
    margin: 0;
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.lh-edit-block__preview .lh-block--hero-bg-overlay {
    min-height: 220px;
}
.lh-edit-block__preview .lh-block--hero-image-top .lh-block--hero__media img {
    height: 180px;
}

/* ----- Page header form (Profil panel in editor) ----- */

.lh-header-form {
    margin-bottom: var(--space-5);
}
.lh-header-form__avatar {
    margin-bottom: var(--space-4);
}
.lh-header-form__avatar > .field-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text);
}
.lh-header-form__avatar .lh-upload__preview img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
}
.lh-header-form__socials {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-top: var(--space-4);
}
.lh-header-form__socials legend {
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text);
}
.lh-header-form__socials > .field-hint {
    margin: 0 0 var(--space-3);
}
.lh-social-field {
    display: grid;
    grid-template-columns: 22px 110px 1fr;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: 0;
    margin-bottom: var(--space-2);
}
.lh-social-field:last-child { margin-bottom: 0; }
.lh-social-field .field-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
}
.lh-social-field input[type="url"],
.lh-social-field input[type="text"] {
    margin: 0;
}
.lh-social-field__icon {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
}
.lh-social-field__icon svg {
    width: 18px;
    height: 18px;
}
@media (max-width: 600px) {
    .lh-social-field {
        grid-template-columns: 22px 1fr;
    }
    .lh-social-field .field-label {
        grid-column: 2 / 3;
    }
    .lh-social-field input {
        grid-column: 1 / -1;
    }
}

/* ----- Design panel (theme presets, colors, buttons, font) ----- */

.lh-design-form {
    margin-bottom: var(--space-5);
}
.lh-design-form fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
}
.lh-design-form legend {
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text);
}

.lh-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-2);
}
.lh-preset-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-2);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
}
.lh-preset-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.lh-preset-card:hover {
    border-color: var(--color-border-strong);
}
.lh-preset-card:has(input:checked) {
    border-color: var(--brand-500);
    box-shadow: var(--ring-focus);
}
.lh-preset-card__swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 8px;
    font-weight: var(--weight-semi);
    font-size: var(--text-lg);
    line-height: 1;
}
.lh-preset-card__swatch--custom {
    background: repeating-linear-gradient(45deg, #f0f0f0 0 4px, #f8f8f8 4px 8px);
    color: var(--color-text-muted);
    align-items: center;
    font-size: 22px;
}
.lh-preset-card__btn {
    padding: 4px 10px;
    font-size: 11px;
    border: 1px solid currentColor;
    box-sizing: border-box;
}
.lh-preset-card__name {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.lh-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-2);
}
.lh-color-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Without this, `display: flex` above wins over the user-agent `[hidden] {
 * display: none }` rule, leaving the gradient end-color picker visible
 * even when wallpaper_kind="fill" is selected. */
.lh-color-field[hidden] { display: none; }
.lh-color-field input[type="color"] {
    width: 40px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
}

/* Paired swatch + hex text input (lh_color_pair helper) */
.lh-color-pair {
    display: inline-flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}
.lh-color-pair__swatch {
    width: 42px;
    flex: 0 0 42px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
}
.lh-color-pair__hex {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 var(--space-2);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: var(--text-sm);
    text-transform: lowercase;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
}
.lh-color-pair__hex:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--ring-focus);
}

.lh-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: 4px;
}
.lh-radio-chip {
    position: relative;
    padding: 6px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text);
    transition: border-color var(--duration-fast) var(--ease),
                background var(--duration-fast) var(--ease);
}
.lh-radio-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.lh-radio-chip:hover {
    border-color: var(--color-border-strong);
}
.lh-radio-chip--soon {
    opacity: 0.55;
    cursor: not-allowed;
    border-style: dashed;
}
.lh-radio-chip--soon:hover {
    border-color: var(--color-border);
    background: transparent;
}
.lh-radio-chip:has(input:checked) {
    border-color: var(--brand-500);
    background: var(--brand-50);
    color: var(--brand-700);
}

/* ----- Workspace dashboard: Insights-style stat grid + activity ----- */

.dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.dashboard-head h1 {
    margin: 0 0 4px;
    font-size: var(--text-2xl);
    font-weight: var(--weight-semi);
    line-height: 1;
}
.dashboard-head__meta {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.dashboard-head__meta code {
    font-size: 11px;
    background: var(--gray-100);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
}
.dashboard-section-title {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

/* Insights time-range chip row — sits between the page header and the
 * stat-card grid. Each chip is an anchor that re-renders the page with
 * `?range=<key>` (no JS — server resolves the window via RangeFilter). */
.insights-range-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: calc(-1 * var(--space-2)) 0 var(--space-3);
    padding: 0;
}
.insights-range-filter__chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: var(--weight-medium);
    text-decoration: none;
    line-height: 1.3;
    transition: border-color var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease),
                background var(--duration-fast) var(--ease);
}
.insights-range-filter__chip:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.insights-range-filter__chip.is-active {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-surface);
}
@media (max-width: 600px) {
    .insights-range-filter { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .insights-range-filter__chip { white-space: nowrap; flex: 0 0 auto; }
}
.dashboard-stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
}
a.dashboard-stat-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-xs);
}
.dashboard-stat-card__icon {
    display: inline-flex;
    color: var(--color-text-muted);
}
.dashboard-stat-card__value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semi);
    line-height: 1.1;
    color: var(--color-text);
}
.dashboard-stat-card__label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.dashboard-stat-card--placeholder {
    border-style: dashed;
}
.dashboard-stat-card--placeholder .dashboard-stat-card__value {
    color: var(--color-text-faint);
}

/* Stat card with embedded sparkline */
.dashboard-stat-card--chart {
    position: relative;
    padding-bottom: var(--space-3);
}
.dashboard-stat-card__chart {
    margin-top: var(--space-2);
    color: var(--brand-500);
    line-height: 0;
}

/* Detailed chart card (full-width below the stat row) */
.dashboard-card--chart {
    grid-column: 1 / -1;
}
.dashboard-card__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.dashboard-card__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dashboard-card__legend-item--meta {
    margin-left: auto;
    color: var(--color-text-faint);
}
.dashboard-card__legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.dashboard-card__legend-dot--views  { color: var(--brand-500); }
.dashboard-card__legend-dot--clicks { color: var(--color-text-muted); }

.dashboard-section-meta {
    font-weight: var(--weight-regular);
    color: var(--color-text-faint);
    font-size: var(--text-xs);
    text-transform: none;
    letter-spacing: 0;
    margin-left: var(--space-2);
}

.dashboard-chart-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.dashboard-chart-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: var(--space-3);
}
.dashboard-chart-row__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dashboard-chart-row__svg {
    line-height: 0;
}
.dashboard-chart-row__svg--views  { color: var(--brand-500); }
.dashboard-chart-row__svg--clicks { color: var(--color-text-muted); }

.dashboard-chart-axis {
    display: flex;
    justify-content: space-between;
    padding-left: 96px; /* match label column + gap */
    font-size: var(--text-xs);
    color: var(--color-text-faint);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .dashboard-chart-row { grid-template-columns: 1fr; gap: 4px; }
    .dashboard-chart-axis { padding-left: 0; }
}

/* Sparkline base (shared by stat-card and chart-row variants) */
.lh-sparkline {
    display: block;
    width: 100%;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-3);
    align-items: start;
}
.dashboard-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.dashboard-card__head h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
}

.dashboard-activity-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.dashboard-activity-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.dashboard-activity-list li:last-child { border-bottom: 0; }
.dashboard-activity-list a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-activity-list a:hover { color: var(--brand-600); }
.dashboard-activity-list__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    font-size: var(--text-xs);
}

.dashboard-empty {
    text-align: center;
    padding: var(--space-5) var(--space-3);
}
.dashboard-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-3);
    background: var(--gray-50);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
}
.dashboard-empty__title {
    margin: 0 0 4px;
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    color: var(--color-text);
}
.dashboard-empty__hint {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.dashboard-quick-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dashboard-quick-list a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: background var(--duration-fast) var(--ease);
}
.dashboard-quick-list a:hover { background: var(--gray-100); }
.dashboard-quick-list a svg { color: var(--color-text-muted); flex: 0 0 auto; }

@media (max-width: 720px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

/* ----- Editor shell ----- */
/* Page editor's inner rail merged into the global admin-rail; the shell is
 * now just a content wrapper. Class kept for the JS hook (data-editor-shell). */

.editor-shell { display: block; }

.editor-content {
    min-width: 0; /* allow flex/grid item to shrink and not overflow */
}
.editor-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
}
.editor-panel + .editor-panel { margin-top: var(--space-4); }
.editor-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.editor-panel__head h2 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-semi);
    line-height: 1;
}
.editor-panel__head-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.editor-panel__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.editor-panel__subhead {
    margin: var(--space-5) 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 720px) {
    .editor-panel {
        padding: var(--space-4);
        border-radius: var(--radius-sm);
    }
}

/* ----- Design sub-tabs (inside Design panel) ----- */

.design-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 var(--space-4);
    padding: 4px;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
}
.design-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}
.design-tab:hover { color: var(--color-text); }
.design-tab.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}
.design-tab svg { opacity: 0.85; }

/* ----- Sticky save bar (appears at top of forms with dirty tracking) ----- */

.lh-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-4);
    background: var(--gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    position: sticky;
    top: 64px; /* clears topnav (56px) + small gap */
    z-index: 5;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lh-save-bar__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-sm);
}
.lh-save-bar__label strong {
    color: var(--color-text);
    font-weight: var(--weight-semi);
}
.lh-save-bar__hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.lh-save-bar__hint--clean {
    color: var(--success-text);
    display: none;
}
/* Toggled by editor-shell.js based on data-dirty-track form state. */
form[data-dirty-track]:not(.is-dirty) .lh-save-bar__hint:not(.lh-save-bar__hint--clean) { display: none; }
form[data-dirty-track]:not(.is-dirty) .lh-save-bar__hint--clean { display: inline; }
form[data-dirty-track]:not(.is-dirty) .lh-save-bar .btn-primary {
    opacity: 0.55;
}

/* Autosave hint above blocks list */
.editor-panel__autosave-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-2);
    padding: 6px var(--space-2);
    background: var(--success-bg);
    border-radius: var(--radius-sm);
    color: var(--success-text);
    font-size: var(--text-xs);
}
.editor-panel__autosave-note svg { color: var(--success-text); flex: 0 0 auto; }

/* ----- Inhalt: compact head (avatar + clickable title/bio) ----- */

.lh-content-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: stretch;
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.lh-content-head__avatar {
    position: relative;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    align-self: center;
}
.lh-content-head__avatar .lh-upload__preview { margin: 0; padding: 0; border: 0; }
.lh-content-head__avatar .lh-upload__preview img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
}
.lh-content-head__avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--color-text-faint);
    border: 1px solid var(--color-border);
}
.lh-content-head__avatar-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-text);
    color: var(--color-surface);
    border: 2px solid var(--color-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    line-height: 0;
}
.lh-content-head__avatar-btn:hover { background: var(--brand-500); }
.lh-content-head__avatar [data-upload-pick]:not(.lh-content-head__avatar-btn) { display: none; }
.lh-content-head__avatar .lh-upload__status { display: none; }

.lh-content-head__editable {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    color: var(--color-text);
    position: relative;
    transition: border-color 0.18s, background 0.18s;
}
.lh-content-head__editable:hover {
    background: var(--gray-50);
    border-color: var(--color-border);
}
.lh-content-head__name {
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    color: var(--color-text);
    line-height: 1.2;
}
.lh-content-head__bio {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.lh-content-head__edit-hint {
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-faint);
    opacity: 0;
    transition: opacity 0.15s;
}
.lh-content-head__editable:hover .lh-content-head__edit-hint { opacity: 1; }

/* Compact socials row with edit button */
.lh-content-socials {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.lh-content-socials__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}
.lh-content-socials__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 6px;
    background: var(--gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    color: var(--color-text);
}
.lh-content-socials__chip svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
}

/* Edit modal (Title & Bio, Socials) — shared dialog styling */
.lh-edit-modal {
    max-width: 540px;
    width: calc(100vw - var(--space-5));
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
}
.lh-edit-modal::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}
.lh-edit-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) 0;
}
.lh-edit-modal__head h2 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-semi);
}
.lh-edit-modal__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    line-height: 0;
}
.lh-edit-modal__close:hover { background: var(--gray-100); color: var(--color-text); }
.lh-edit-modal__body {
    padding: var(--space-3) var(--space-5) var(--space-4);
    max-height: 70vh;
    overflow-y: auto;
}
.lh-edit-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5) var(--space-4);
    border-top: 1px solid var(--color-border);
}
.lh-edit-modal__hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ----- Inhalt content head: avatar + title/bio side-by-side ----- */

.lh-content-form { margin-bottom: var(--space-5); }
.lh-content-form__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.lh-content-form__head-fields { display: flex; flex-direction: column; gap: var(--space-2); }
.lh-upload--inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
}
.lh-upload__preview--avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
}
.lh-upload--inline [data-upload-pick] {
    font-size: var(--text-xs);
    padding: 4px 10px;
}
@media (max-width: 600px) {
    .lh-content-form__head { grid-template-columns: 1fr; }
    .lh-upload--inline { align-items: flex-start; }
}

/* ----- Profile + Platform settings page ----- */

.profile-shell {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 720px;
    margin: 0 auto;
}
/* Wider when the shell hosts a data table (user admin, audit log) so the
 * row-actions column doesn't wrap and the table breathes. Same pattern as
 * .admin-container:has(.data-table) — there for the workspace pages list.
 * The --wide modifier opts a shell in explicitly (for platform-admin pages
 * that don't have a table but still want the wider canvas). */
.profile-shell:has(.data-table),
.profile-shell--wide {
    max-width: 1240px;
}
.profile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
}
.profile-card__head { margin: 0 0 var(--space-3); }
.profile-card__head h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xl);
    font-weight: var(--weight-semi);
}
.profile-card__head--divider {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.profile-card__head--row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.profile-card--locked { opacity: 0.85; }
.profile-card--danger {
    border-color: var(--error-border);
    background: var(--color-surface);
}
.profile-card--danger .profile-card__head h2 { color: var(--error-text); }
.profile-danger-details { margin-top: var(--space-3); }
.profile-danger-details > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.profile-danger-details > summary::-webkit-details-marker { display: none; }
.profile-danger-details[open] > summary { margin-bottom: var(--space-3); }
.profile-danger-details form { max-width: 480px; }

.trash-list {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.trash-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
}
.trash-list__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.trash-list__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.trash-list__meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.trash-list__meta code {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    padding: 0 4px;
    font-size: 11px;
}

.profile-form .field { max-width: 480px; }

/* Legal page editor — collapsible blocks for Impressum/Datenschutz/AGB. */
.legal-edit {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    margin: 0 0 var(--space-3);
    overflow: hidden;
}
.legal-edit__summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-weight: var(--weight-semi);
    color: var(--color-text);
    background: var(--color-surface);
}
.legal-edit__summary::-webkit-details-marker { display: none; }
.legal-edit__summary::before {
    content: '▸';
    font-size: 11px;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}
.legal-edit[open] > .legal-edit__summary::before { transform: rotate(90deg); display: inline-block; }
.legal-edit__view {
    font-weight: var(--weight-normal);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.legal-edit__view:hover { color: var(--color-accent); }
.legal-edit > .field { padding: 0 var(--space-4); margin-top: var(--space-3); max-width: none; }
.legal-edit > .field:last-of-type { padding-bottom: var(--space-4); }
.legal-edit > .field-hint { padding: 0 var(--space-4) var(--space-3); }
.legal-edit__body {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: var(--text-sm);
    line-height: 1.5;
    min-height: 240px;
    width: 100%;
}

.profile-detail-list {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
}
.profile-detail-list > div {
    display: contents;
}
.profile-detail-list dt {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
}
.profile-detail-list dd {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text);
}
@media (max-width: 600px) {
    .profile-detail-list { grid-template-columns: 1fr; gap: 4px var(--space-2); }
}

.profile-plan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.profile-plan__label {
    margin: 0 0 4px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.profile-plan__name {
    margin: 0 0 var(--space-2);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semi);
}
.profile-plan__hint { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.profile-plan__features {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-sm);
}
.profile-plan__features li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
}
.profile-plan__features svg { color: var(--brand-500); }
@media (max-width: 720px) {
    .profile-plan { grid-template-columns: 1fr; }
}

/* Checkbox-as-row pattern */
.lh-checkbox-field {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-2);
    row-gap: 4px;
    align-items: center;
}
.lh-checkbox-field input[type="checkbox"] {
    grid-row: 1;
    grid-column: 1;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--brand-500);
}
.lh-checkbox-field > span:not(.field-hint) {
    grid-row: 1;
    grid-column: 2;
    font-size: var(--text-sm);
    color: var(--color-text);
}
.lh-checkbox-field .field-hint {
    grid-row: 2;
    grid-column: 2;
    margin: 0;
}

/* Page quick-switcher in admin-rail (page context section) */
.admin-rail__page-switch {
    margin-bottom: var(--space-2);
}
.admin-rail__page-switch summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 4px var(--space-2);
    border-radius: var(--radius-sm);
}
.admin-rail__page-switch summary::-webkit-details-marker { display: none; }
.admin-rail__page-switch summary:hover {
    background: var(--gray-100);
}
.admin-rail__page-switch-caret {
    display: inline-flex;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}
.admin-rail__page-switch[open] .admin-rail__page-switch-caret {
    transform: rotate(180deg);
}
.admin-rail__page-switch-panel {
    /* Overlay above the rail layout instead of pushing siblings down so
     * opening the dropdown doesn't shove the page-section nav around. */
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    padding: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 60vh;
    overflow-y: auto;
}
.admin-rail__page-switch { position: relative; }
.admin-rail__page-switch-panel a {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
}
.admin-rail__page-switch-panel a:hover { background: var(--gray-50); }
.admin-rail__page-switch-panel a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-rail__page-switch-panel hr {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}
.admin-rail__panel-section {
    margin: 4px 8px;
    font-size: 10px;
    font-weight: var(--weight-semi);
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Theme toggle (light / dark / auto) — lives in the user dropdown */
.theme-toggle {
    display: flex;
    gap: 2px;
    padding: 2px;
    margin: 0 var(--space-2) var(--space-2);
    background: var(--gray-100);
    border-radius: var(--radius-sm);
}
.theme-toggle__btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 6px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}
.theme-toggle__btn:hover { color: var(--color-text); }
.theme-toggle__btn.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}
.theme-toggle__btn svg { flex: 0 0 auto; opacity: 0.85; }

/* Logo upload cards (platform settings) */
.profile-section-title {
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.logo-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.logo-upload-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition:
        border-color 0.18s cubic-bezier(0.2, 0, 0, 1),
        box-shadow   0.18s cubic-bezier(0.2, 0, 0, 1);
}
.logo-upload-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-xs);
}
.logo-upload-card:has(input[type="file"]:focus-visible),
.logo-upload-card:focus-within {
    border-color: var(--brand-500);
    box-shadow: var(--ring-focus);
}
.logo-upload-card .field-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text);
}
.logo-upload-card .field-hint {
    margin: 0;
    font-size: var(--text-xs);
}
.logo-upload-card__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    min-height: 80px;
}
.logo-upload-card__preview--wide img {
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
}
.logo-upload-card__preview--square img {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}
.logo-upload-card__preview--favicon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
.logo-upload-card input[type="file"] {
    font-size: var(--text-sm);
}
.logo-upload-card__remove {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Pro / locked indicators */
.lh-pro-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    margin-left: 6px;
    background: linear-gradient(135deg, #6f5cc6 0%, #e76f51 100%);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
.lh-pro-locked {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3);
    background: var(--gray-50);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
}

/* iOS-style toggle. Default state is interactive; --disabled adds the
 * grey/half-opacity look used by the Pro-locked stub. Checked state
 * fills the track with the brand color and slides the knob right. */
.lh-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.lh-toggle--disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.lh-toggle input { display: none; }
.lh-toggle__track {
    width: 36px;
    height: 20px;
    background: var(--gray-300, #d1d5db);
    border-radius: var(--radius-pill);
    position: relative;
    transition: background 0.15s ease;
}
.lh-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.15s ease;
}
.lh-toggle input:checked + .lh-toggle__track {
    background: var(--brand-500);
}
.lh-toggle input:checked + .lh-toggle__track::after {
    left: 18px;
}

/* =============================================================================
 * Responsive
 * ===========================================================================*/

@media (max-width: 720px) {
    .topnav__inner { gap: var(--space-2); padding: 0 var(--space-3); }
    .topnav__label-prefix { display: none; }
    .topnav__label-main { max-width: 120px; }
    .topnav__label-main--user { display: none; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .editor-card { padding: var(--space-4); }
}

@media (max-width: 600px) {
    .admin-main { padding: var(--space-4) var(--space-3); }

    .data-table { font-size: var(--text-sm); border: 0; border-radius: 0; }
    .data-table thead { display: none; }
    .data-table tbody, .data-table tr { display: block; width: 100%; }
    .data-table tr {
        margin-bottom: var(--space-2);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
        padding: var(--space-2) var(--space-3);
    }
    .data-table tr:last-child { margin-bottom: 0; }
    .data-table tbody tr:hover td { background: transparent; }
    .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
        padding: 6px 0;
        border-bottom: 1px solid var(--gray-100);
        text-align: right;
    }
    .data-table td:last-child { border-bottom: 0; }
    .data-table td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: var(--weight-semi);
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        flex-shrink: 0;
    }
    .data-table td.row-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .stat-grid { grid-template-columns: 1fr; }
    .ws-grid { grid-template-columns: 1fr; }

    .editor-card { padding: var(--space-3); }
    .editor-header h1 { font-size: var(--text-lg); }
    .auth-card { padding: var(--space-4); }
    .auth-card h1 { font-size: var(--text-lg); }
    .home-card { padding: var(--space-4); }

    .lh-edit-block__bar { flex-wrap: wrap; gap: var(--space-1); }

    .publish-toolbar { flex-direction: column; align-items: stretch; }
    .publish-toolbar form { width: 100%; }
    .publish-button { width: 100%; }
}

@media (max-width: 380px) {
    .topnav__inner { height: 50px; }
    .topnav__avatar { width: 22px; height: 22px; font-size: 10px; }
    .topnav__brand span { display: none; }
}