@import 'tailwindcss';

/* Class-based dark mode: the <html> element toggles `.dark` (persisted in localStorage). */
@custom-variant dark (&:where(.dark, .dark *));

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/* Alpine :class utilities the Tailwind scanner can't see in dynamic bindings. */
@source inline("lg:ml-16 lg:ml-64 lg:w-16 lg:w-64 lg:translate-x-0 -translate-x-full hidden lg:block lg:hidden rotate-180");

/* ================================================================
   SELF-HOSTED FONTS (cero CDN — served from /public/fonts)
   ================================================================ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/Inter.var.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/JetBrainsMono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/JetBrainsMono-500.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/JetBrainsMono-600.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/JetBrainsMono-700.woff2') format('woff2');
}

/* ---- Sora + Manrope (Vibrant / IMPULSA skin) — self-hosted variable woff2 ---- */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/fonts/sora-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/fonts/sora-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ================================================================
   DESIGN TOKENS — RedFamosa Design System
   `--brand` is the themeable seed; the primary-* scale derives from
   it with color-mix() in OKLab, so a reseller re-themes the whole
   panel by overriding a single variable in <head> at runtime.
   Surface / text / border tokens hold their LIGHT values here and
   are overridden under `.dark` — Tailwind v4 utilities compile to
   `var(--color-*)`, so the override switches the theme for free.
   ================================================================ */
@theme {
    /* ---- Fonts ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

    /* ---- Brand seed (override per panel in runtime) ---- */
    --brand: #5B4DF0;
    --color-on-primary: #ffffff;

    /* ---- Primary alias + scale derived from --brand (OKLab) ---- */
    --color-primary: var(--brand);
    --color-primary-50:  color-mix(in oklab, var(--brand)  8%, white);
    --color-primary-100: color-mix(in oklab, var(--brand) 16%, white);
    --color-primary-200: color-mix(in oklab, var(--brand) 30%, white);
    --color-primary-300: color-mix(in oklab, var(--brand) 48%, white);
    --color-primary-400: color-mix(in oklab, var(--brand) 72%, white);
    --color-primary-500: var(--brand);
    --color-primary-600: color-mix(in oklab, var(--brand) 82%, black);
    --color-primary-700: color-mix(in oklab, var(--brand) 66%, black);
    --color-primary-800: color-mix(in oklab, var(--brand) 52%, black);
    --color-primary-900: color-mix(in oklab, var(--brand) 40%, black);

    /* ---- Surfaces / text / border (LIGHT defaults) ---- */
    --color-bg: #F6F7F9;
    --color-surface: #FFFFFF;
    --color-surface-2: #F1F2F5;
    --color-surface-3: #E9EBF0;
    --color-border: #E5E7EC;
    --color-border-strong: #D2D6DE;

    --color-text: #171A21;
    --color-text-muted: #5B6270;
    --color-text-subtle: #868D9C;

    --color-primary-soft: color-mix(in oklab, var(--brand) 14%, var(--color-surface));

    /* ---- Semantic (toasts, alerts, destructive) ---- */
    --color-success: #16A34A;
    --color-warning: #D97706;
    --color-danger:  #DC2626;
    --color-info:    #2563EB;

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

    /* ---- Motion ---- */
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 240ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ================================================================
   LIGHT — order-status badges + elevation (non-utility tokens)
   ================================================================ */
:root {
    --state-success-fg:#0F7A3D; --state-success-bg:#E6F6EC; --state-success-bd:#B4E3C4;
    --state-info-fg:#1D4FD8;     --state-info-bg:#E6EEFE;    --state-info-bd:#BCD2FB;
    --state-warning-fg:#9A5B00;  --state-warning-bg:#FCF0DD; --state-warning-bd:#F1D9AC;
    --state-partial-fg:#B4400A;  --state-partial-bg:#FCEBE0; --state-partial-bd:#F5C9AC;
    --state-neutral-fg:#475569;  --state-neutral-bg:#EEF1F5; --state-neutral-bd:#D7DDE6;
    --state-refund-fg:#0B7268;   --state-refund-bg:#DEF5F1;  --state-refund-bd:#AEE4DC;
    --state-danger-fg:#C11B1B;   --state-danger-bg:#FCE9E9;  --state-danger-bd:#F4C4C4;

    --shadow-1: 0 1px 2px rgba(16,20,30,.05), 0 1px 1px rgba(16,20,30,.03);
    --shadow-2: 0 4px 12px rgba(16,20,30,.07), 0 1px 3px rgba(16,20,30,.04);
    --shadow-3: 0 12px 28px rgba(16,20,30,.11), 0 4px 8px rgba(16,20,30,.05);
    --shadow-4: 0 24px 56px rgba(16,20,30,.18), 0 8px 16px rgba(16,20,30,.07);
}

/* ================================================================
   DARK — WhatsApp-inspired deep green-black (never #000)
   The old palette was a cool blue-black; per brand direction the dark
   theme now reads as WhatsApp's dark green. ONLY the DARK neutrals move
   — every surface/border/text token is retinted from blue toward green.
   The accent (--brand) stays themeable and untouched, so light mode and
   the per-panel brand colour are unaffected.
   ================================================================ */
.dark, [data-theme="dark"] {
    --color-bg: #0A140F;
    --color-surface: #0F1D16;
    --color-surface-2: #15271D;
    --color-surface-3: #1D3327;
    --color-border: #21362A;
    --color-border-strong: #324B3B;

    --color-text: #E6EFE9;
    --color-text-muted: #90A69A;
    --color-text-subtle: #62766B;

    --color-primary-soft: color-mix(in oklab, var(--brand) 22%, var(--color-surface));

    /* In dark, "700" flips to a LIGHT tint: every component/blade that pairs
       `color: primary-700` with the (now dark) primary-soft background stays
       legible without per-usage overrides. The few BACKGROUND usages of the old
       dark 700 (btn hovers, logo gradients) were inlined to explicit mixes so
       this flip cannot touch them. */
    --color-primary-700: color-mix(in oklab, var(--brand) 55%, white);

    --color-success:#22C55E; --color-warning:#F59E0B; --color-danger:#EF4444; --color-info:#3B82F6;

    --state-success-fg:#4ADE80; --state-success-bg:rgba(34,197,94,.13);  --state-success-bd:rgba(34,197,94,.26);
    --state-info-fg:#7AA6FF;    --state-info-bg:rgba(59,130,246,.14);    --state-info-bd:rgba(59,130,246,.28);
    --state-warning-fg:#F5B342; --state-warning-bg:rgba(217,119,6,.15);  --state-warning-bd:rgba(217,119,6,.30);
    --state-partial-fg:#FB8B4C; --state-partial-bg:rgba(234,88,12,.15);  --state-partial-bd:rgba(234,88,12,.30);
    --state-neutral-fg:#9FB0C3; --state-neutral-bg:rgba(100,116,139,.16);--state-neutral-bd:rgba(100,116,139,.30);
    --state-refund-fg:#2DD4BF;  --state-refund-bg:rgba(13,148,136,.15);  --state-refund-bd:rgba(13,148,136,.30);
    --state-danger-fg:#F87171;  --state-danger-bg:rgba(220,38,38,.15);   --state-danger-bd:rgba(220,38,38,.30);

    --shadow-1: 0 0 0 1px rgba(255,255,255,.04);
    --shadow-2: 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.40);
    --shadow-3: 0 0 0 1px rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.55);
    --shadow-4: 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.70);
}

/* ================================================================
   BASE
   ================================================================ */
@layer base {
    body {
        background: var(--color-bg);
        color: var(--color-text);
        font-family: var(--font-sans);
        font-optical-sizing: auto;
        /* cv05 gives Inter a single-storey lowercase l for clearer numerals. */
        font-feature-settings: "cv05" 1;
        -webkit-font-smoothing: antialiased;
    }

    /* Tabular figures wherever money/quantity lines up in a column. */
    .tabular, td.num, .money, .metric { font-variant-numeric: tabular-nums; }

    [x-cloak] { display: none !important; }

    ::selection { background: color-mix(in oklab, var(--brand) 26%, transparent); }
}

/* ================================================================
   COMPONENTS — prefixed `rf-` so they never collide with app CSS
   ================================================================ */
@layer components {

    /* ── Cards & panels ── */
    .rf-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
    }
    .rf-card-body { padding: 20px; }
    @media (min-width: 1280px) { .rf-card-body { padding: 24px; } }
    .rf-card-title { font-size: 17px; line-height: 1.35; font-weight: 650; color: var(--color-text); }

    .rf-panel-heading {
        font-size: 11px; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.06em; color: var(--color-text-subtle);
    }

    /* ── Buttons ── */
    .rf-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        border-radius: var(--radius-sm); padding: 9px 16px;
        font-size: 13px; font-weight: 600; line-height: 1;
        cursor: pointer; white-space: nowrap;
        transition: background-color var(--motion-fast) var(--ease-out),
                    border-color var(--motion-fast) var(--ease-out),
                    color var(--motion-fast) var(--ease-out),
                    box-shadow var(--motion-fast) var(--ease-out);
    }
    .rf-btn:disabled { opacity: .55; cursor: not-allowed; }

    .rf-btn-primary {
        background: var(--color-primary-600);
        color: var(--color-on-primary);
        border: 1px solid transparent;
    }
    /* Explicit mix (not primary-700): the 700 token flips light in dark mode. */
    .rf-btn-primary:hover:not(:disabled) { background: color-mix(in oklab, var(--brand) 66%, black); }

    .rf-btn-secondary {
        background: var(--color-surface);
        color: var(--color-text);
        border: 1px solid var(--color-border);
    }
    .rf-btn-secondary:hover:not(:disabled) {
        border-color: var(--color-border-strong);
        background: var(--color-surface-2);
    }

    .rf-btn-danger {
        background: var(--color-danger);
        color: #fff;
        border: 1px solid transparent;
    }
    .rf-btn-danger:hover:not(:disabled) { filter: brightness(.94); }

    .rf-btn-ghost {
        background: transparent; color: var(--color-text-muted); border: 1px solid transparent;
    }
    .rf-btn-ghost:hover:not(:disabled) { background: var(--color-surface-2); color: var(--color-text); }

    .rf-btn-sm { padding: 6px 12px; font-size: 12px; }
    .rf-btn-lg { padding: 11px 20px; font-size: 14px; }

    /* ── Inputs ── */
    .rf-input, .rf-select, .rf-textarea {
        width: 100%;
        background: var(--color-surface);
        color: var(--color-text);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: 9px 12px;
        font-size: 14px;
        transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
    }
    .dark .rf-input, .dark .rf-select, .dark .rf-textarea { background: var(--color-surface-2); }
    .rf-input::placeholder, .rf-textarea::placeholder { color: var(--color-text-subtle); }
    .rf-input:focus, .rf-select:focus, .rf-textarea:focus {
        outline: none;
        border-color: var(--color-primary-500);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }
    .rf-input:disabled { background: var(--color-surface-2); color: var(--color-text-subtle); cursor: not-allowed; }
    .rf-input-error { border-color: var(--color-danger); }
    .rf-input-error:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-danger) 18%, transparent); }

    .rf-label {
        display: block; margin-bottom: 6px;
        font-size: 12px; font-weight: 550; letter-spacing: .02em;
        color: var(--color-text-muted);
    }
    .rf-hint { font-size: 13px; color: var(--color-text-subtle); }

    /* ── Badges (soft-fill; canceled is neutral, red only for error) ── */
    .rf-badge {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 3px 9px; border-radius: var(--radius-xs);
        font-size: 11px; font-weight: 600; letter-spacing: .05em;
        border: 1px solid transparent;
    }
    .rf-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

    .rf-badge-success { color: var(--state-success-fg); background: var(--state-success-bg); border-color: var(--state-success-bd); }
    .rf-badge-info    { color: var(--state-info-fg);    background: var(--state-info-bg);    border-color: var(--state-info-bd); }
    .rf-badge-warning { color: var(--state-warning-fg); background: var(--state-warning-bg); border-color: var(--state-warning-bd); }
    .rf-badge-partial { color: var(--state-partial-fg); background: var(--state-partial-bg); border-color: var(--state-partial-bd); }
    .rf-badge-neutral { color: var(--state-neutral-fg); background: var(--state-neutral-bg); border-color: var(--state-neutral-bd); }
    .rf-badge-refund  { color: var(--state-refund-fg);  background: var(--state-refund-bg);  border-color: var(--state-refund-bd); }
    .rf-badge-danger  { color: var(--state-danger-fg);  background: var(--state-danger-bg);  border-color: var(--state-danger-bd); }
    /* `active` = drip-feed running → uses the panel brand, not a fixed hue. */
    .rf-badge-active  { color: var(--color-primary-700); background: var(--color-primary-soft); border-color: var(--color-primary-300); }

    /* ── Data table ── */
    .rf-table { width: 100%; border-collapse: collapse; }
    .rf-table thead th {
        position: sticky; top: 0;
        background: var(--color-surface-2);
        padding: 10px 14px; text-align: left;
        font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
        color: var(--color-text-muted);
        border-bottom: 1px solid var(--color-border);
    }
    .rf-table tbody td {
        padding: 5px 12px; font-size: 13px;
        border-bottom: 1px solid var(--color-border);
        color: var(--color-text);
    }
    .rf-table tbody tr:hover td { background: var(--color-primary-soft); }
    .rf-mono { font-family: var(--font-mono); }

    /* ── Sidebar shell ── */
    .rf-sidebar {
        display: flex; flex-direction: column;
        background: var(--color-surface);
        border-right: 1px solid var(--color-border);
    }
    .rf-nav-section {
        padding: 14px 12px 4px;
        font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
        color: var(--color-text-subtle);
    }
    .rf-nav-item {
        display: flex; align-items: center; gap: 12px;
        margin: 2px 8px; padding: 8px 12px;
        border-radius: var(--radius-sm);
        font-size: 14px; font-weight: 500; color: var(--color-text-muted);
        border-left: 2px solid transparent;
        transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    }
    .rf-nav-item:hover { background: var(--color-surface-2); color: var(--color-text); }
    .rf-nav-item-active {
        background: var(--color-primary-soft);
        color: var(--color-primary-700);
        border-left-color: var(--color-primary-500);
    }
    .dark .rf-nav-item-active { color: var(--color-primary-400); }

    /* ── Sidebar slim (collapsed) — overrides the Alpine lg:w-16 to a narrower strip ── */
    [data-slim="true"].rf-sidebar { width: 52px; }
    [data-slim="true"] .rf-nav-item {
        margin-left: 5px; margin-right: 5px;
        padding-left: 6px; padding-right: 6px;
        border-left-color: transparent;
    }
    [data-slim="true"] .rf-nav-item-active { border-left-color: transparent; }

    /* ── Slim sidebar tooltip ── */
    #rf-nav-tooltip {
        position: fixed;
        z-index: 9999;
        left: 0; top: 0;          /* moved by JS */
        background: var(--color-text);
        color: var(--color-bg);
        border-radius: 6px;
        padding: 5px 10px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.4;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translateY(-50%) translateX(4px);
        transition: opacity .12s ease, transform .12s ease;
        box-shadow: 0 2px 8px rgba(0,0,0,.18);
    }
    #rf-nav-tooltip.rf-tip-visible {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
    /* Dark mode: pill invertido */
    .dark #rf-nav-tooltip {
        background: var(--color-surface-raised, #2a2d2e);
        color: var(--color-text);
        border: 1px solid var(--color-border);
        box-shadow: 0 2px 12px rgba(0,0,0,.4);
    }

    /* ── Topbar ── */
    .rf-topbar {
        position: sticky; top: 0; z-index: 30;
        display: flex; align-items: center; gap: 12px;
        height: 56px; padding: 0 16px;
        background: color-mix(in oklab, var(--color-surface) 85%, transparent);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--color-border);
    }
    .rf-topbar-title {
        font-size: 16px; font-weight: 650; letter-spacing: -.01em;
        color: var(--color-text); line-height: 1; white-space: nowrap;
    }

    /* ── Topbar user menu ── */
    .rf-topbar-user-dropdown {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 16px;
        box-shadow: var(--shadow-3);
        overflow: hidden;
        padding: 6px;
    }
    .rf-topbar-user-info {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px 8px;
    }
    .rf-topbar-user-info-avatar {
        width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
        border: 2px solid var(--color-border);
    }
    .rf-topbar-user-sep {
        height: 1px; background: var(--color-border); margin: 4px 0;
    }
    .rf-topbar-user-item {
        display: flex; align-items: center; gap: 9px;
        padding: 9px 12px; border-radius: 10px;
        font-size: 13.5px; font-weight: 500;
        color: var(--color-text); cursor: pointer;
        transition: background var(--motion-fast) var(--ease-out);
        text-decoration: none; border: none; background: transparent;
    }
    .rf-topbar-user-item:hover { background: var(--color-surface-2); }
    .rf-topbar-user-item-danger { color: var(--color-danger) !important; }
    .rf-topbar-user-item-danger:hover { background: color-mix(in oklab, var(--color-danger) 10%, transparent) !important; }

    /* ── Admin Profile cards ── */
    .rf-profile-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 20px;
        box-shadow: var(--shadow-2);
        overflow: hidden;
    }
    .rf-profile-card-header {
        padding: 18px 24px 16px;
        border-bottom: 1px solid var(--color-border);
    }
    .rf-profile-card-title {
        font-size: 16px; font-weight: 650; letter-spacing: -.01em;
        color: var(--color-text);
    }
    .rf-profile-card-body {
        padding: 20px 24px 24px;
    }
    /* ─── Profile photo zone (new upload-capable design) ─── */
    .rf-profile-photo-zone {
        display: flex; align-items: center; gap: 20px;
        padding: 18px 20px; border-radius: 16px;
        background: var(--color-surface-2);
        border: 1px solid var(--color-border);
        position: relative;
    }
    .rf-profile-photo-preview { position: relative; flex-shrink: 0; }
    .rf-profile-photo-img {
        width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
        border: 3px solid var(--color-border);
        display: block;
    }
    .rf-profile-photo-cam {
        position: absolute; bottom: 0; right: 0;
        width: 26px; height: 26px; border-radius: 50%;
        background: var(--brand); border: 2.5px solid var(--color-surface);
        display: flex; align-items: center; justify-content: center;
        color: #fff; cursor: pointer;
        transition: transform .15s, box-shadow .15s;
    }
    .rf-profile-photo-cam:hover { transform: scale(1.12); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 40%, transparent); }
    .rf-profile-photo-cam svg { width: 12px; height: 12px; }
    .rf-profile-photo-info { min-width: 0; flex: 1; }
    .rf-profile-photo-label { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 3px; }
    .rf-profile-photo-hint { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; margin-bottom: 4px; }
    .rf-profile-photo-btn {
        display: inline-flex; align-items: center; gap: 5px;
        font-size: 12px; font-weight: 550; border-radius: 8px; padding: 5px 12px;
        cursor: pointer; border: none; transition: background .15s, color .15s;
    }
    .rf-profile-photo-btn-primary {
        background: var(--brand); color: #fff;
    }
    .rf-profile-photo-btn-primary:hover { background: color-mix(in srgb, var(--brand) 85%, black); }
    .rf-profile-photo-btn-ghost {
        background: transparent; color: var(--color-text-muted);
        border: 1px solid var(--color-border);
    }
    .rf-profile-photo-btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text); }

    /* ─── Crop Modal ─── */
    .rf-avatar-modal-backdrop {
        position: fixed; inset: 0; z-index: 9000;
        background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
        display: flex; align-items: center; justify-content: center;
    }
    .rf-avatar-modal-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 20px;
        box-shadow: 0 24px 80px rgba(0,0,0,.35);
        width: 340px; max-width: calc(100vw - 32px);
        overflow: hidden;
    }
    .rf-avatar-modal-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px 20px 12px;
        border-bottom: 1px solid var(--color-border);
    }
    .rf-avatar-modal-title { font-size: 15px; font-weight: 650; color: var(--color-text); }
    .rf-avatar-modal-close {
        width: 30px; height: 30px; border-radius: 8px; border: none;
        background: var(--color-surface-2); color: var(--color-text-muted);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
    }
    .rf-avatar-modal-close:hover { background: var(--color-border); color: var(--color-text); }
    .rf-avatar-crop-wrap {
        position: relative; margin: 20px auto 0;
        width: 280px; height: 280px;
        border-radius: 50%;
        overflow: hidden;
        cursor: move;
        box-shadow: 0 0 0 3px var(--color-border), 0 0 0 7px var(--color-surface-2);
    }
    .rf-avatar-crop-canvas {
        display: block; width: 280px; height: 280px;
        user-select: none; -webkit-user-drag: none;
    }
    /* dim + ring no longer needed — the 50% wrap itself clips to a circle */
    .rf-avatar-crop-dim { display: none; }
    .rf-avatar-crop-ring { display: none; }
    .rf-avatar-crop-hint {
        text-align: center; font-size: 11.5px; color: var(--color-text-muted);
        margin: 10px 0 4px;
    }
    .rf-avatar-crop-zoom-row {
        display: flex; align-items: center; gap: 8px;
        padding: 0 24px 16px;
    }
    .rf-avatar-zoom-range {
        flex: 1; accent-color: var(--color-primary);
        height: 4px; cursor: pointer;
    }
    .rf-avatar-modal-footer {
        display: flex; gap: 8px; justify-content: flex-end;
        padding: 14px 20px;
        border-top: 1px solid var(--color-border);
        background: var(--color-surface-2);
    }

    /* Reuse from existing profile card */
    .rf-profile-divider { height: 1px; background: var(--color-border); margin: 20px 0; }
    .rf-profile-label {
        display: block; font-size: 13px; font-weight: 550;
        color: var(--color-text-muted); margin-bottom: 6px; letter-spacing: .01em;
    }
    .rf-profile-input {
        width: 100%; padding: 10px 14px;
        font-size: 14px; color: var(--color-text);
        background: var(--color-surface-2);
        border: 1.5px solid var(--color-border);
        border-radius: 10px; outline: none;
        transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
    }
    .rf-profile-input:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 15%, transparent);
    }
    .rf-profile-input-err { border-color: var(--color-danger) !important; }
    .rf-profile-input-disabled { opacity: .55; cursor: not-allowed; }
    .rf-profile-select {
        width: 100%; padding: 10px 14px;
        font-size: 14px; color: var(--color-text);
        background: var(--color-surface-2);
        border: 1.5px solid var(--color-border);
        border-radius: 10px; outline: none; cursor: pointer;
        transition: border-color var(--motion-fast) var(--ease-out);
    }
    .rf-profile-select:focus { border-color: var(--color-primary); }
    .rf-profile-err-msg { font-size: 12px; color: var(--color-danger); margin-top: 4px; }
    .rf-profile-2fa-row {
        display: flex; align-items: center; gap: 12px;
        margin-top: 16px; padding: 12px 14px;
        border-radius: 10px; border: 1px solid var(--color-border);
        background: var(--color-surface-2);
    }
    .rf-profile-2fa-icon {
        width: 36px; height: 36px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .rf-profile-2fa-on { background: color-mix(in oklab, var(--color-success) 15%, transparent); color: var(--color-success); }
    .rf-profile-2fa-off { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }
    .rf-profile-2fa-label { font-size: 13.5px; font-weight: 550; color: var(--color-text); }
    .rf-profile-2fa-status { font-size: 12px; margin-top: 2px; }
    .rf-profile-save-btn {
        display: inline-flex; align-items: center; gap: 8px;
        margin-top: 20px;
        padding: 10px 22px;
        font-size: 14px; font-weight: 600;
        color: var(--color-on-primary, #fff);
        background: var(--color-primary);
        border: none; border-radius: 10px; cursor: pointer;
        transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
    }
    .rf-profile-save-btn:hover { opacity: .88; transform: translateY(-1px); }
    .rf-profile-save-btn:active { transform: translateY(0); }
    .rf-profile-pw-hint {
        padding: 12px 14px;
        font-size: 13px; color: var(--color-text-muted);
        background: var(--color-surface-2);
        border: 1px solid var(--color-border);
        border-radius: 10px; line-height: 1.5;
    }

    /* ── KPI card ── */
    .rf-kpi { background: var(--color-surface); border: 1px solid var(--color-border);
              border-radius: var(--radius-md); padding: 16px 20px; box-shadow: var(--shadow-1);
              transition: box-shadow var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
    .rf-kpi:hover { box-shadow: var(--shadow-2); border-color: var(--color-border-strong); }
    .rf-kpi-value { font-size: clamp(18px, 4vw, 30px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em;
                    font-variant-numeric: tabular-nums; color: var(--color-text);
                    overflow-wrap: break-word; min-width: 0; }

    /* ── Icon button ── */
    .rf-icon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border-radius: var(--radius-sm);
        color: var(--color-text-muted); background: transparent; cursor: pointer;
        transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    }
    .rf-icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); }

    /* ── Network badge (order table social icon) ── */
    .rf-net-badge {
        display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px; border-radius: 50%;
        background: var(--nb, #6366F1); flex-shrink: 0;
        outline: 1px solid rgba(255,255,255,0.10);
        outline-offset: 0;
    }
    .dark .rf-net-badge {
        outline-color: rgba(255,255,255,0.18);
    }

    /* ── Info button (order table details) ── */
    .rf-info-btn {
        display: inline-flex; align-items: center; justify-content: center;
        background: none; border: none; padding: 4px;
        color: var(--color-primary); cursor: pointer;
        transition: color var(--motion-fast), opacity var(--motion-fast);
    }
    .rf-info-btn:hover { opacity: 0.7; }

    /* ── Inline copy button (next to IDs and links) ── */
    .rf-copy-inline {
        display: inline-flex; align-items: center; justify-content: center;
        background: none; border: none; cursor: pointer; padding: 1px; line-height: 1;
        color: var(--color-text-muted); opacity: .45; flex-shrink: 0;
        transition: opacity var(--motion-fast);
    }
    .rf-copy-inline:hover { opacity: 1; }

    /* ── Alerts ── */
    .rf-alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm);
                font-size: 13px; border: 1px solid transparent; }
    .rf-alert-success { color: var(--state-success-fg); background: var(--state-success-bg); border-color: var(--state-success-bd); }
    .rf-alert-danger  { color: var(--state-danger-fg);  background: var(--state-danger-bg);  border-color: var(--state-danger-bd); }
    .rf-alert-warning { color: var(--state-warning-fg); background: var(--state-warning-bg); border-color: var(--state-warning-bd); }
    .rf-alert-info    { color: var(--state-info-fg);    background: var(--state-info-bg);    border-color: var(--state-info-bd); }

    /* ── Status pills / tabs (order status filters) ── */
    .rf-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
    .rf-tab {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 12px; border-radius: var(--radius-pill);
        font-size: 12px; font-weight: 550; white-space: nowrap;
        color: var(--color-text-muted); background: var(--color-surface-2);
        border: 1px solid transparent; cursor: pointer;
        transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    }
    .rf-tab:hover { color: var(--color-text); }
    .rf-tab-active {
        background: var(--color-primary-soft);
        color: var(--color-primary-700);
        border-color: var(--color-primary-300);
    }
    .dark .rf-tab-active { color: var(--color-primary-400); }
    .rf-tab-count {
        font-size: 11px; padding: 0 6px; border-radius: var(--radius-pill);
        background: color-mix(in oklab, var(--color-text-muted) 16%, transparent);
        font-variant-numeric: tabular-nums;
    }

    /* ── Toggle switch ── */
    .rf-switch {
        position: relative; display: inline-flex; flex-shrink: 0;
        width: 36px; height: 20px; border-radius: var(--radius-pill);
        background: var(--color-surface-3); cursor: pointer; border: none;
        transition: background-color var(--motion-fast) var(--ease-out);
    }
    .rf-switch::after {
        content: ''; position: absolute; top: 2px; left: 2px;
        width: 16px; height: 16px; border-radius: 50%; background: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
        transition: transform var(--motion-fast) var(--ease-out);
    }
    .rf-switch-on { background: var(--color-primary-500); }
    .rf-switch-on::after { transform: translateX(16px); }
    /* Shown to a viewer who may read the state but not change it. */
    .rf-switch-disabled { opacity: .45; cursor: not-allowed; }

    /* ── Dropdown menu (kebab actions) ── */
    .rf-menu {
        min-width: 180px; padding: 4px; border-radius: var(--radius-md);
        background: var(--color-surface); border: 1px solid var(--color-border);
        box-shadow: var(--shadow-3); z-index: 50;
    }
    .rf-menu-item {
        display: flex; align-items: center; gap: 9px; width: 100%;
        padding: 8px 10px; border-radius: var(--radius-sm); text-align: left;
        font-size: 13px; color: var(--color-text); cursor: pointer; background: transparent;
        transition: background-color var(--motion-fast) var(--ease-out);
    }
    .rf-menu-item:hover { background: var(--color-surface-2); }
    .rf-menu-item-active { background: var(--color-primary-soft); color: var(--color-primary-700); font-weight: 700; }
    .rf-menu-item-danger { color: var(--color-danger); }
    .rf-menu-sep { height: 1px; margin: 4px 0; background: var(--color-border); }

    /* ── Modal ── */
    .rf-modal-backdrop {
        position: fixed; inset: 0; z-index: 60;
        background: rgba(8,10,15,.55); backdrop-filter: blur(6px);
        display: flex; align-items: flex-start; justify-content: center;
        padding: 40px 16px; overflow-y: auto;
    }
    .rf-modal {
        width: 100%; background: var(--color-surface);
        border-radius: var(--radius-lg); box-shadow: var(--shadow-4);
        border: 1px solid var(--color-border);
    }
    .rf-modal-sm { max-width: 420px; }
    .rf-modal-md { max-width: 560px; }
    .rf-modal-lg { max-width: 760px; }
    .rf-modal-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 18px 24px; border-bottom: 1px solid var(--color-border);
    }
    .rf-modal-body { padding: 24px; }
    .rf-modal-footer {
        display: flex; align-items: center; justify-content: flex-end; gap: 8px;
        padding: 16px 24px; border-top: 1px solid var(--color-border);
    }

    /* ── Confirmation dialog ──
       One instance per layout; every destructive control in the product routes
       through it. Replaces the browser's native confirm popup, which on a
       white-label storefront announces the host name and cannot be themed. */
    .rf-cnf-body { padding: 26px 26px 20px; }
    .rf-cnf-icon {
        width: 46px; height: 46px; border-radius: var(--radius-md);
        display: grid; place-items: center; margin-bottom: 16px;
    }
    .rf-cnf-body h3 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: var(--color-text); }
    .rf-cnf-body p { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--color-text-muted); }
    .rf-cnf-note {
        margin-top: 14px !important; padding: 9px 12px; border-radius: var(--radius-sm);
        background: var(--color-surface-2); border: 1px solid var(--color-border);
    }
    .rf-cnf-foot {
        display: flex; justify-content: flex-end; gap: 9px;
        padding: 0 26px 22px; flex-wrap: wrap;
    }
    .rf-cnf-foot .rf-btn { min-width: 104px; }
    .rf-cnf-go { color: #fff; border: 1px solid transparent; }

    .rf-cnf-danger .rf-cnf-icon {
        background: color-mix(in oklab, var(--color-danger) 14%, transparent);
        color: var(--color-danger);
    }
    .rf-cnf-danger .rf-cnf-go { background: var(--color-danger); }
    .rf-cnf-danger .rf-cnf-go:hover { filter: brightness(.94); }
    .rf-cnf-danger .rf-cnf-go:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-danger) 25%, transparent);
    }

    .rf-cnf-warn .rf-cnf-icon {
        background: color-mix(in oklab, var(--color-warning) 16%, transparent);
        color: var(--color-warning);
    }
    .rf-cnf-warn .rf-cnf-go { background: var(--color-warning); }
    .rf-cnf-warn .rf-cnf-go:hover { filter: brightness(.94); }
    .rf-cnf-warn .rf-cnf-go:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-warning) 25%, transparent);
    }

    /* Stacked on a phone, with the safe answer at the bottom — closest to the
       thumb is the one that does nothing. */
    @media (max-width: 420px) {
        .rf-cnf-foot { flex-direction: column-reverse; }
        .rf-cnf-foot .rf-btn { width: 100%; }
    }

    /* ── Busy state (double-submit guard) ──
       Applied by the global listener in app.js to whatever control was pressed,
       so a slow round-trip looks like progress instead of a dead button. */
    .is-busy { pointer-events: none; opacity: .72; }
    .is-busy::before {
        content: ''; display: inline-block; flex: none;
        width: 14px; height: 14px; margin-right: 8px;
        border: 2px solid currentColor; border-right-color: transparent;
        border-radius: 50%; animation: rf-busy-spin .6s linear infinite;
    }
    @keyframes rf-busy-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
        .is-busy::before { animation-duration: 1.6s; }
    }

    /* ── Capability chips (Refill / Cancel / Drip-feed) ── */
    .rf-chip {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 2px 8px; border-radius: var(--radius-xs);
        font-size: 11px; font-weight: 550; color: var(--color-text-muted);
        background: var(--color-surface-2); border: 1px solid var(--color-border);
    }

    /* ── Colour preset swatch (label picker) ── */
    .rf-color-swatch {
        width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
        border: 2px solid transparent; box-shadow: 0 0 0 1px var(--color-border);
        transition: transform var(--motion-fast) var(--ease-out);
    }
    .rf-color-swatch:hover { transform: scale(1.1); }
    .rf-color-swatch-on { border-color: var(--color-surface); box-shadow: 0 0 0 2px var(--color-text); }

    /* ── Avatar ── */
    .rf-avatar { aspect-ratio: 1; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

    /* ── Misc ── */
    .rf-link { color: var(--color-primary-600); font-weight: 500; cursor: pointer; }
    .rf-link:hover { text-decoration: underline; }
    .dark .rf-link { color: var(--color-primary-400); }
    .rf-page-title { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: var(--color-text); }
    .rf-th-sort { cursor: pointer; user-select: none; }
    .rf-th-sort:hover { color: var(--color-text); }
    .rf-checkbox { width: 16px; height: 16px; border-radius: 4px; accent-color: var(--color-primary-500); cursor: pointer; }

    /* ── Orders topbar: pills + search in one row ── */
    .rf-orders-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 40px;
    }
    .rf-orders-pills {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 1 1 0;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .rf-orders-pills::-webkit-scrollbar { display: none; }
    .rf-orders-search {
        display: flex;
        align-items: center;
        gap: 0;
        flex-shrink: 0;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        overflow: hidden;
        background: var(--color-surface);
    }
    .rf-orders-search-select {
        border: none;
        border-left: 1px solid var(--color-border);
        background: var(--color-surface-raised);
        color: var(--color-text-default);
        font-size: 12px;
        padding: 6px 10px;
        outline: none;
        cursor: pointer;
        min-width: 130px;
    }
    .dark .rf-orders-search-select { background: var(--color-surface-raised); }
    .rf-orders-search-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }
    .rf-orders-search-icon {
        position: absolute;
        left: 9px;
        width: 13px;
        height: 13px;
        color: var(--color-text-muted);
        pointer-events: none;
    }
    .rf-orders-search-input {
        border: none;
        background: transparent;
        color: var(--color-text-default);
        font-size: 13px;
        padding: 6px 10px 6px 28px;
        outline: none;
        width: 200px;
    }
    .rf-orders-search-input::placeholder { color: var(--color-text-subtle); }

    /* ── Orders table (admin/orders) ── */
    .rf-orders-tbl { min-width: 1120px; }
    .rf-orders-tbl th { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }
    .rf-orders-tbl .rf-th-sm { font-size: 11px; }
    /* Main data row */
    .rf-orow-main td { padding: 7px 8px; border-bottom: none !important; vertical-align: top; }
    .rf-orow-main:last-child td { border-bottom: 1px solid var(--color-border) !important; }
    /* Service name + badges (2nd line inside "Provider ID" cell) */
    .rf-orow-svcname {
        margin-top: 3px; font-size: 11px; color: var(--color-text-subtle);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
    }
    /* Feature mini-chips inside service name row */
    .rf-osvc-chip {
        display: inline-block; padding: 0px 5px; border-radius: 3px; font-size: 10px;
        font-weight: 700; margin-left: 3px; line-height: 16px; vertical-align: middle;
    }
    .rf-osvc-refill { background: #dbeafe; color: #1d4ed8; }
    .rf-osvc-cancel { background: #fee2e2; color: #b91c1c; }
    .rf-osvc-drip   { background: #d1fae5; color: #065f46; }
    .dark .rf-osvc-refill { background: rgba(29,78,216,.22); color: #93c5fd; }
    .dark .rf-osvc-cancel { background: rgba(185,28,28,.22); color: #fca5a5; }
    .dark .rf-osvc-drip   { background: rgba(6,95,70,.25);  color: #6ee7b7; }
    /* Count badge */
    .rf-orow-count {
        display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 20px;
        background: var(--color-surface-2); color: var(--color-text-muted);
        font-weight: 500; white-space: nowrap;
    }
    /* Status pills — solid filled, pill-shaped (reference-panel style) */
    .rf-opill {
        display: inline-block; padding: 3px 11px; border-radius: 20px;
        font-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1.5;
        letter-spacing: .01em;
    }
    .rf-opill-pending  { background: #1f2937; color: #f9fafb; }
    .rf-opill-progress { background: #2563eb; color: #fff; }
    .rf-opill-active   { background: #7c3aed; color: #fff; }
    .rf-opill-done     { background: #16a34a; color: #fff; }
    .rf-opill-partial  { background: #d97706; color: #fff; }
    .rf-opill-canceled { background: #dc2626; color: #fff; }
    .rf-opill-refunded { background: #db2777; color: #fff; }
    .rf-opill-error    { background: #7f1d1d; color: #fecaca; }
    .rf-opill-neutral  { background: #4b5563; color: #f3f4f6; }
    /* Dark mode tweaks */
    .dark .rf-opill-pending  { background: #374151; color: #e5e7eb; }
    .dark .rf-opill-progress { background: #1d4ed8; color: #eff6ff; }

    /* CRM inbox conversation row (list pane). */
    .rf-crm-convo {
        display: flex; align-items: flex-start; gap: 10px;
        padding: 10px; border-radius: var(--radius-md);
        border: 1px solid transparent; cursor: pointer; transition: background .12s ease;
    }
    .rf-crm-convo:hover { background: var(--color-surface-2); }
    .rf-crm-convo-active { background: var(--color-primary-soft); border-color: var(--color-primary-300); }
    .rf-bulkbar {
        position: sticky; bottom: 16px; z-index: 20;
        display: flex; align-items: center; gap: 12px;
        padding: 10px 16px; margin: 12px auto 0; width: fit-content; max-width: 100%;
        flex-wrap: wrap; justify-content: center;
        border-radius: var(--radius-pill); background: var(--color-surface);
        border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-3);
    }
    .rf-bulkbar-sep { width: 1px; height: 20px; background: var(--color-border); }
    .rf-bulkbar-count { font-size: 13px; font-weight: 600; color: var(--color-text); }

    /* ── Pagination (shared vendor/livewire override) ──
       One place for the manito (cursor:pointer), tokened controls and the
       loading affordance, so every paginated screen behaves identically. */
    /* Wrapper that orders/index.blade.php puts around {{ $orders->links() }}.
       Compact border-top row — thinner than the old py-3 block. */
    .rf-pager-wrap {
        border-top: 1px solid var(--color-border);
        padding: 6px 16px;
    }

    .rf-pagination {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; flex-wrap: wrap;
    }
    .rf-pagination-mobile { display: flex; gap: 8px; flex: 1; }
    .rf-pagination-summary { display: none; }
    .rf-pagination-pages { display: none; }
    @media (min-width: 640px) {
        .rf-pagination-mobile { display: none; }
        .rf-pagination-summary {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 13px; color: var(--color-text-muted);
        }
        .rf-pagination-pages { display: inline-flex; align-items: center; gap: 4px; }
    }
    .rf-pagination-strong { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }

    .rf-page {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 28px; height: 28px; padding: 0 8px;
        border-radius: var(--radius-sm);
        font-size: 12px; font-weight: 550; line-height: 1;
        color: var(--color-text-muted);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        cursor: pointer;
        font-variant-numeric: tabular-nums; white-space: nowrap;
        transition: background-color var(--motion-fast) var(--ease-out),
                    color var(--motion-fast) var(--ease-out),
                    border-color var(--motion-fast) var(--ease-out);
    }
    .rf-page:hover { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border-strong); }
    .rf-page:focus-visible { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px var(--color-primary-soft); }
    .rf-page-icon { min-width: 28px; padding: 0; }
    .rf-page-icon svg { width: 14px; height: 14px; }
    .rf-page-current {
        background: var(--color-primary-soft); color: var(--color-primary-700);
        border-color: var(--color-primary-300); cursor: default;
    }
    .dark .rf-page-current { color: var(--color-primary-400); }
    .rf-page-dots { border: none; background: transparent; cursor: default; color: var(--color-text-subtle); min-width: 22px; }
    .rf-page-disabled { opacity: .5; cursor: not-allowed; }
    .rf-page-disabled:hover { background: var(--color-surface); color: var(--color-text-muted); border-color: var(--color-border); }
    .rf-page[disabled] { cursor: progress; opacity: .6; }   /* while wire:loading */

    .rf-pagination-spinner {
        display: inline-block; width: 12px; height: 12px; margin-left: 6px; flex-shrink: 0;
        border: 2px solid var(--color-border-strong); border-top-color: var(--color-primary-500);
        border-radius: 50%; animation: rf-spin .6s linear infinite;
    }
    @keyframes rf-spin { to { transform: rotate(360deg); } }

    /* Dim the list while a page change is in flight (app.js toggles this on the
       Livewire component root). Signals activity so the round-trip never reads
       as "stuck", and blocks double-clicks mid-request. */
    .rf-paginating { opacity: .55; pointer-events: none; transition: opacity var(--motion-fast) var(--ease-out); }
}

/* ================================================================
   CLIENT PORTAL — horizontal top-nav (B2C shell only)
   ================================================================ */
@layer components {
    .rf-topnav-item {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 11px; border-radius: var(--radius-sm);
        font-size: 13.5px; font-weight: 500; white-space: nowrap;
        color: var(--color-text-muted); background: transparent;
        cursor: pointer; border: none;
        transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    }
    .rf-topnav-item:hover { background: var(--color-surface-2); color: var(--color-text); }
    .rf-topnav-item-active {
        background: var(--color-primary-soft);
        color: var(--color-primary-700);
    }
    .dark .rf-topnav-item-active { color: var(--color-primary-400); }

    /* Service picker (New Order star screen) */
    .rf-net-tab {
        display: inline-flex; align-items: center; gap: 7px;
        padding: 7px 13px; border-radius: var(--radius-pill);
        font-size: 13px; font-weight: 550; white-space: nowrap;
        color: var(--color-text-muted); background: var(--color-surface-2);
        border: 1px solid transparent; cursor: pointer;
        transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
    }
    .rf-net-tab:hover { color: var(--color-text); }
    .rf-net-tab-active {
        background: var(--color-primary-soft); color: var(--color-primary-700);
        border-color: var(--color-primary-300);
    }
    .dark .rf-net-tab-active { color: var(--color-primary-400); }
    /* Network icon: monochrome when idle, brand-tinted when the tab is active. */
    .rf-net-tab i { color: var(--color-text-subtle); }
    .rf-net-tab-active i { color: var(--color-primary-600); }
    .dark .rf-net-tab-active i { color: var(--color-primary-400); }

    /* Sticky "live receipt" summary in the New Order screen */
    .rf-receipt { position: sticky; top: 72px; }
}

/* ================================================================
   SOCIAL-NETWORK PALETTE (--net-*) — shared across every template
   STYLE-GUIDE-CLIENT-TEMPLATES §3. These live in :root (not inside a
   template) because the catalogue of networks is identical; what
   changes is HOW each skin uses them (Aurora tints the icon, Vibrant
   fills the tile with the gradient, Midnight glows the icon). Every
   `-on` colour clears WCAG AA (≥3:1 for the ≥15px/600 tile label);
   light fills (Snapchat/Spotify/WhatsApp/Kick) carry DARK on-colours.
   ================================================================ */
:root {
    --net-instagram:  #E1306C; --net-instagram-on:  #FFFFFF;
    --net-facebook:   #1877F2; --net-facebook-on:   #FFFFFF;
    --net-youtube:    #FF0000; --net-youtube-on:    #FFFFFF;
    --net-tiktok:     #010101; --net-tiktok-on:     #FFFFFF;
    --net-spotify:    #1DB954; --net-spotify-on:    #06130B;
    --net-telegram:   #229ED9; --net-telegram-on:   #FFFFFF;
    --net-x:          #000000; --net-x-on:          #FFFFFF;
    --net-twitter:    #1DA1F2; --net-twitter-on:    #FFFFFF;
    --net-twitch:     #9146FF; --net-twitch-on:     #FFFFFF;
    --net-snapchat:   #FFFC00; --net-snapchat-on:   #101010;
    --net-discord:    #5865F2; --net-discord-on:    #FFFFFF;
    --net-whatsapp:   #25D366; --net-whatsapp-on:   #05271A;
    --net-linkedin:   #0A66C2; --net-linkedin-on:   #FFFFFF;
    --net-threads:    #000000; --net-threads-on:    #FFFFFF;
    --net-pinterest:  #E60023; --net-pinterest-on:  #FFFFFF;
    --net-reddit:     #FF4500; --net-reddit-on:     #FFFFFF;
    --net-soundcloud: #FF5500; --net-soundcloud-on: #FFFFFF;
    --net-kick:       #53FC18; --net-kick-on:       #0A1F02;
    --net-web:        #0EA5E9; --net-web-on:        #FFFFFF;
    /* Brand-dependent generics: "Panel Propio" IS the panel's own brand. */
    --net-own:        var(--brand); --net-own-on:   var(--color-on-primary);
    --net-other:      #64748B; --net-other-on:      #FFFFFF;

    /* Expanded set — brand solids for the IMPULSA "Choose a social network"
       selector (MEJORA 1). Used as the chip glyph/initials colour; picked vivid
       enough to read on the subtle chip surface (the dark-mode rule lightens
       near-black brands so nothing disappears on #1d1f1f). */
    --net-bluesky:     #0A7AFF;
    --net-tumblr:      #4B6D94;
    --net-quora:       #B92B27;
    --net-medium:      #00AB6C;
    --net-vimeo:       #17B3E8;
    --net-vk:          #0077FF;
    --net-kwai:        #FF4906;
    --net-likee:       #12D8C4;
    --net-line:        #06C755;
    --net-steam:       #66C0F4;
    --net-github:      #656D76;
    --net-mastodon:    #6364FF;
    --net-dailymotion: #0D68FF;
    --net-rumble:      #74C742;
    --net-behance:     #1769FF;
    --net-dribbble:    #EA4C89;
    --net-shopee:      #EE4D2D;
    --net-yandex:      #FC3F1D;
    --net-px500:       #0099E5;
    --net-triller:     #FF2B9D;
    --net-bigo:        #00C2C7;
    --net-coub:        #4E80EE;
    --net-aparat:      #ED145B;
    --net-kuaishou:    #FF5000;
    --net-odysee:      #EF1970;
    --net-bitchute:    #EF4137;
    --net-lazada:      #F1592A;

    /* 135deg brand gradients (used at full strength by Vibrant, §3.2). */
    --net-instagram-grad: linear-gradient(135deg,#FEDA75 0%,#FA7E1E 22%,#D62976 55%,#962FBF 78%,#4F5BD5 100%);
    --net-facebook-grad:  linear-gradient(135deg,#2A88FF 0%,#0B5FD3 100%);
    --net-youtube-grad:   linear-gradient(135deg,#FF4B4B 0%,#E00000 100%);
    --net-tiktok-grad:    linear-gradient(135deg,#25F4EE 0%,#0B0B0B 46%,#FE2C55 100%);
    --net-spotify-grad:   linear-gradient(135deg,#1ED760 0%,#149C43 100%);
    --net-telegram-grad:  linear-gradient(135deg,#37BBFE 0%,#1C8FC7 100%);
    --net-x-grad:         linear-gradient(135deg,#434343 0%,#1a1a1a 100%);
    --net-twitch-grad:    linear-gradient(135deg,#A970FF 0%,#7B2BF9 100%);
    --net-snapchat-grad:  linear-gradient(135deg,#FFFC00 0%,#F4E400 100%);
    --net-discord-grad:   linear-gradient(135deg,#7B84F7 0%,#4752E0 100%);
    --net-whatsapp-grad:  linear-gradient(135deg,#3BE07A 0%,#1CAE52 100%);
    --net-linkedin-grad:  linear-gradient(135deg,#2A80D8 0%,#08529E 100%);
    --net-pinterest-grad: linear-gradient(135deg,#F23A57 0%,#C8001C 100%);
    --net-reddit-grad:    linear-gradient(135deg,#FF6A33 0%,#E23D00 100%);
    --net-soundcloud-grad:linear-gradient(135deg,#FF7A33 0%,#E64A00 100%);
    --net-kick-grad:      linear-gradient(135deg,#6BFF3D 0%,#3FCF0F 100%);
    --net-web-grad:       linear-gradient(135deg,#38BDF8 0%,#0284C7 100%);
    --net-own-grad:       linear-gradient(135deg,var(--color-primary-400),color-mix(in oklab, var(--brand) 66%, black));
    --net-other-grad:     linear-gradient(135deg,#94A3B8 0%,#556070 100%);
}

/* ================================================================
   CLIENT TEMPLATES — data-template overrides (STYLE-GUIDE-CLIENT-
   TEMPLATES §4-6). Aurora = the :root/.dark base, declared as an
   explicit no-op so a future global reset can never silently break
   it. Vibrant + Midnight override surface/text/radius/shadow tokens
   and add --rf-* structural tokens; they only ever CONSUME --brand
   / --color-primary-* (never redefine them).
   ================================================================ */

/* ---- Aurora (default = base) ---- */
[data-template="aurora"] { /* no-op: inherits :root */ }
.dark[data-template="aurora"] { /* no-op: inherits .dark */ }

/* Attribute selectors (not :root[...]) so these blocks also skin a NESTED
   data-template subtree — the admin selector's live CSS thumbnails (§8). */

/* ---- Vibrant (IMPULSA) — LIGHT (light-only skin by design) ----
   Primary derives from --brand (per-panel re-theme); the turquoise --rf-accent
   is IMPULSA's fixed signature (cost bar / balance / logo), independent of brand.
   Body font is Manrope, headings Sora — both self-hosted (see @font-face above). */
[data-template="vibrant"] {
    --font-sans:           'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display:        'Sora', 'Manrope', sans-serif;

    --color-bg:            color-mix(in oklab, var(--brand) 4%,  #F4F2FB);
    --color-surface:       #FFFFFF;
    --color-surface-2:     #FAF9FE;
    --color-surface-3:     #F0EEF8;
    --color-border:        #ECE9F6;
    --color-border-strong: #E0DBF0;

    --color-text:          #1A1826;
    --color-text-muted:    #4A4560;
    --color-text-subtle:   #9691B0;

    --color-primary-soft:  color-mix(in oklab, var(--brand) 14%, #FFFFFF);

    --radius-xs: 8px; --radius-sm: 13px; --radius-md: 18px; --radius-lg: 20px; --radius-xl: 24px;

    --shadow-1: 0 8px 22px -16px rgba(58,31,122,.30);
    --shadow-2: 0 12px 30px -18px rgba(58,31,122,.35);
    --shadow-3: 0 18px 44px -20px rgba(58,31,122,.42);
    --shadow-4: 0 28px 64px -24px rgba(58,31,122,.50);

    /* IMPULSA fixed accents (independent of --brand) */
    --rf-accent:            #12C2B8;
    --rf-accent-2:          #0FB0A7;
    --rf-accent-grad:       linear-gradient(135deg, #12C2B8, #0FB0A7);
    --rf-badge-amber:       #FFD23F;
    --rf-badge-amber-fg:    #3A1F7A;
    --rf-primary-grad:      linear-gradient(135deg, var(--color-primary-500), color-mix(in oklab, var(--brand) 72%, white));

    /* Sidebar tokens — drive BOTH the live shell and the admin selector thumbnail */
    --rf-sidebar-w:         256px;
    --rf-sidebar-bg:        linear-gradient(180deg, color-mix(in oklab, var(--brand) 74%, #0E0B1E) 0%, var(--brand) 62%, color-mix(in oklab, var(--brand) 86%, white) 100%);
    --rf-sidebar-fg:        #FFFFFF;
    --rf-sidebar-fg-muted:  rgba(255,255,255,.78);
    --rf-sidebar-active-bg: var(--color-bg);
    --rf-sidebar-active-fg: var(--color-primary-700);
    --rf-sidebar-active-bar:transparent;
    --rf-sidebar-hover-bg:  rgba(255,255,255,.10);

    --rf-topbar-bg:         #FFFFFF;
    --rf-search-bg:         var(--color-bg);
    --rf-btn-primary-bg:    linear-gradient(135deg, var(--color-primary-500), color-mix(in oklab, var(--brand) 72%, white));
}

/* ---- Vibrant — DARK (WhatsApp-graphite #1d1f1f, brand-filled sidebar) ----
   MEJORA 2: the IMPULSA dark theme. Base is #1d1f1f with surfaces stepped one
   notch lighter (cards / inputs / raised), borders kept subtle, text at AA on
   the near-black. The morado sidebar gradient stays (premium), only deepened so
   it blends into #1d1f1f; the turquoise --rf-accent signature is untouched. */
.dark[data-template="vibrant"] {
    --color-bg:            #1D1F1F;
    --color-surface:       #262828;
    --color-surface-2:     #2A2C2C;
    --color-surface-3:     #333636;
    --color-border:        #363939;
    --color-border-strong: #454949;

    --color-text:          #ECEEEC;
    --color-text-muted:    #A6ABA8;
    --color-text-subtle:   #767B78;

    --color-primary-soft:  color-mix(in oklab, var(--brand) 26%, var(--color-surface));

    --shadow-1: 0 0 0 1px rgba(255,255,255,.045);
    --shadow-2: 0 0 0 1px rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.45);
    --shadow-3: 0 0 0 1px rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.55);
    --shadow-4: 0 0 0 1px rgba(255,255,255,.07), 0 28px 64px rgba(0,0,0,.65);

    --rf-sidebar-bg:        #262828;
    --rf-topbar-bg:         color-mix(in oklab, var(--color-surface) 85%, transparent);
    --rf-search-bg:         var(--color-surface-2);
}

/* ---- Midnight — DARK (mother theme; applies even without .dark) ---- */
.dark[data-template="midnight"],
[data-template="midnight"] {
    --color-bg:            #07080B;
    --color-surface:       #0E1016;
    --color-surface-2:     #151821;
    --color-surface-3:     #1C202B;
    --color-border:        #20242F;
    --color-border-strong: #2C313E;

    --color-text:          #EDEFF3;
    --color-text-muted:    #8B93A3;
    --color-text-subtle:   #5A6170;

    --color-primary-soft:  color-mix(in oklab, var(--brand) 24%, var(--color-surface));

    --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 14px;

    --shadow-1: 0 0 0 1px rgba(255,255,255,.04);
    --shadow-2: 0 0 0 1px rgba(255,255,255,.05), 0 4px 16px rgba(0,0,0,.55);
    --shadow-3: 0 0 0 1px rgba(255,255,255,.06), 0 12px 32px rgba(0,0,0,.65);
    --shadow-4: 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.75);

    --rf-glow: 0 0 0 1px color-mix(in oklab, var(--brand) 45%, transparent),
               0 0 22px color-mix(in oklab, var(--brand) 28%, transparent);

    --rf-sidebar-w:         240px;
    --rf-sidebar-bg:        var(--color-surface);
    --rf-sidebar-fg:        var(--color-text-muted);
    --rf-sidebar-fg-muted:  var(--color-text-subtle);
    --rf-sidebar-active-bg: var(--color-surface-2);
    --rf-sidebar-active-fg: var(--color-text);
    --rf-sidebar-active-bar:var(--brand);
    --rf-sidebar-hover-bg:  var(--color-surface-2);

    --rf-topbar-bg:         color-mix(in oklab, var(--color-surface) 80%, transparent);
    --rf-search-bg:         var(--color-surface-2);

    --font-display: var(--font-mono);
}

/* Midnight is always dark (OLED black) — no light variant. */

/* ================================================================
   CLIENT SIDEBAR SHELL — shared by Vibrant + Midnight (skinned by
   the --rf-sidebar-* tokens above). The topnav shell keeps its own
   rf-topnav-* classes; this block is the sidebar variant only.
   ================================================================ */
@layer components {

    .rf-cside {
        display: flex; flex-direction: column;
        width: var(--rf-sidebar-w, 256px);
        background: var(--rf-sidebar-bg, var(--color-surface));
        color: var(--rf-sidebar-fg, var(--color-text));
        border-right: 1px solid var(--color-border);
    }
    [data-template="vibrant"] .rf-cside { border-right-color: transparent; }

    .rf-cside-brand {
        display: flex; align-items: center; gap: 10px;
        height: 64px; padding: 0 18px; flex-shrink: 0;
        color: var(--rf-sidebar-fg, var(--color-text));
        font-weight: 800; font-size: 16px; letter-spacing: -.01em;
    }
    .rf-cside-logo {
        display: inline-flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
        font-weight: 800; font-size: 14px;
        background: color-mix(in oklab, var(--rf-sidebar-fg, #fff) 18%, transparent);
        color: var(--rf-sidebar-fg, var(--color-text));
    }
    [data-template="midnight"] .rf-cside-logo {
        background: linear-gradient(135deg, var(--color-primary-500), color-mix(in oklab, var(--brand) 66%, black));
        color: var(--color-on-primary);
        box-shadow: var(--rf-glow);
    }

    .rf-cside-section {
        padding: 16px 18px 6px;
        font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
        color: var(--rf-sidebar-fg-muted, var(--color-text-subtle));
    }
    .rf-cside-item {
        display: flex; align-items: center; gap: 11px;
        margin: 2px 10px; padding: 9px 12px;
        border-radius: var(--radius-sm);
        font-size: 14px; font-weight: 550;
        color: var(--rf-sidebar-fg-muted, var(--color-text-muted));
        border-left: 2px solid transparent; cursor: pointer;
        transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    }
    .rf-cside-item:hover { background: var(--rf-sidebar-hover-bg, var(--color-surface-2)); color: var(--rf-sidebar-fg, var(--color-text)); }
    .rf-cside-item-active {
        background: var(--rf-sidebar-active-bg, var(--color-primary-soft));
        color: var(--rf-sidebar-active-fg, var(--color-primary-700));
        border-left-color: var(--rf-sidebar-active-bar, var(--color-primary-500));
    }
    [data-template="midnight"] .rf-cside-item-active { box-shadow: inset 0 0 0 1px var(--color-border); }
    .rf-cside-subitem { padding-left: 34px; font-size: 13.5px; }

    /* Client topbar (over the content, not over the sidebar) */
    .rf-ctopbar {
        position: sticky; top: 0; z-index: 30;
        display: flex; align-items: center; gap: 12px;
        height: 52px; padding: 0 18px; flex-shrink: 0;
        background: var(--rf-topbar-bg, var(--color-surface));
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--color-border);
    }
    [data-template="midnight"] .rf-ctopbar { height: 48px; }

    .rf-csearch {
        display: flex; align-items: center; gap: 8px;
        height: 38px; padding: 0 14px; width: 100%; max-width: 420px;
        border-radius: var(--radius-pill);
        background: var(--rf-search-bg, var(--color-surface-2));
        border: 1px solid var(--color-border);
        color: var(--color-text-subtle);
    }
    .rf-csearch input {
        border: none; outline: none; background: transparent; width: 100%;
        font-size: 13.5px; color: var(--color-text);
    }
    [data-template="midnight"] .rf-csearch { border-radius: var(--radius-sm); }

    .rf-cbalance {
        display: inline-flex; align-items: center; gap: 8px;
        height: 38px; padding: 0 6px 0 14px; border-radius: var(--radius-pill);
        background: var(--color-primary-soft);
    }
    .rf-cbalance-amount { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--color-primary-700); font-variant-numeric: tabular-nums; }
    .dark .rf-cbalance-amount { color: var(--color-primary-400); }
    [data-template="midnight"] .rf-cbalance { background: transparent; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }
    [data-template="midnight"] .rf-cbalance-amount { color: var(--color-text); }

    /* Network tiles row (§5.4) — Vibrant fills with the brand gradient;
       Midnight keeps the tile dark and only glows the coloured icon. */
    .rf-net-row {
        display: grid; gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    }
    .rf-net-tile {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
        aspect-ratio: 1 / 0.82; min-height: 84px; padding: 14px 12px;
        border-radius: var(--radius-lg);
        background: var(--net-fill, var(--color-surface-2));
        color: var(--net-on, var(--color-text));
        box-shadow: var(--shadow-2); cursor: pointer;
        border: 1px solid transparent;
        transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
    }
    .rf-net-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
    .rf-net-tile svg, .rf-net-tile i { width: 26px; height: 26px; }
    .rf-net-tile-label { font-size: 13px; font-weight: 600; line-height: 1; text-align: center; }
    /* Legibility of the glyph on light gradients (Snapchat/Spotify/…). */
    .rf-net-tile[data-light="1"] svg,
    .rf-net-tile[data-light="1"] .rf-net-tile-label { text-shadow: 0 1px 1px rgba(0,0,0,.18); }
    .rf-net-tile-active { outline: 3px solid color-mix(in oklab, var(--net-solid) 60%, white); outline-offset: 1px; transform: scale(.98); }

    /* Midnight: dark tile, coloured icon + glow, no gradient fill. */
    [data-template="midnight"] .rf-net-tile {
        background: var(--color-surface-2);
        color: var(--color-text-muted);
        border-radius: var(--radius-sm);
        border: 1px solid var(--color-border);
        box-shadow: none;
    }
    [data-template="midnight"] .rf-net-tile svg,
    [data-template="midnight"] .rf-net-tile i { color: var(--net-solid, var(--color-text)); }
    [data-template="midnight"] .rf-net-tile-label { text-shadow: none; color: var(--color-text-muted); }
    [data-template="midnight"] .rf-net-tile:hover {
        transform: none; border-color: color-mix(in oklab, var(--net-solid) 40%, var(--color-border));
        box-shadow: 0 0 18px color-mix(in oklab, var(--net-solid) 22%, transparent);
    }

    /* Vibrant primary button = documented gradient exception (§5.7). */
    [data-template="vibrant"] .rf-btn-primary { background: var(--rf-btn-primary-bg, var(--color-primary-600)); }
    [data-template="vibrant"] .rf-btn-primary:hover:not(:disabled) { background: var(--rf-btn-primary-bg, color-mix(in oklab, var(--brand) 66%, black)); box-shadow: var(--shadow-2); }
    /* Vibrant badges go pill; Midnight adds a brand glow to the active pill. */
    [data-template="vibrant"] .rf-badge { border-radius: var(--radius-pill); }
    [data-template="midnight"] .rf-badge { border-radius: var(--radius-sm); }
    [data-template="vibrant"] .rf-page-title,
    [data-template="vibrant"] .rf-kpi-value { font-family: var(--font-display, var(--font-sans)); }
    [data-template="midnight"] .rf-kpi-value { font-family: var(--font-mono); }

    /* Off-canvas behaviour for the client sidebar under 992px. */
    .rf-cside-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(8,10,15,.5); }
    @media (max-width: 991px) {
        .rf-cside {
            position: fixed; inset: 0 auto 0 0; z-index: 40;
            transform: translateX(-100%); transition: transform var(--motion-base) var(--ease-out);
            box-shadow: var(--shadow-4);
        }
        .rf-cside[data-open="1"] { transform: translateX(0); }
    }
    @media (max-width: 575px) {
        .rf-cside { width: 82vw; }
        .rf-net-row { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
    }

    /* Admin template selector — live CSS thumbnails (§8) */
    .rf-tpl-card {
        display: block; text-align: left; cursor: pointer;
        border-radius: var(--radius-md);
        border: 2px solid var(--color-border);
        background: var(--color-surface); overflow: hidden;
        transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
    }
    .rf-tpl-card:hover { box-shadow: var(--shadow-2); }
    .rf-tpl-card-active { border-color: var(--color-primary-500); box-shadow: 0 0 0 3px var(--color-primary-soft); }
    .rf-tpl-thumb { position: relative; height: 172px; overflow: hidden; background: var(--color-bg); }

    /* Force a light token context for a light-mother thumbnail even when the
       admin page itself is dark (Aurora has no template block of its own). */
    .rf-tpl-light {
        --color-bg: #F6F7F9; --color-surface: #FFFFFF; --color-surface-2: #F1F2F5; --color-surface-3: #E9EBF0;
        --color-border: #E5E7EC; --color-border-strong: #D2D6DE;
        --color-text: #171A21; --color-text-muted: #5B6270; --color-text-subtle: #868D9C;
        --color-primary-soft: color-mix(in oklab, var(--brand) 14%, #fff);
        --shadow-1: 0 1px 2px rgba(16,20,30,.05);
        --shadow-2: 0 4px 12px rgba(16,20,30,.07);
    }

    /* Mini-mock building blocks — 100% CSS, driven by the same tokens (§8). */
    .rf-tpl-mock { display: flex; flex-direction: column; height: 100%; }
    .rf-tpl-mock-row { display: flex; height: 100%; }
    .rf-tpl-topbar {
        display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; flex-shrink: 0;
        background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    }
    .rf-tpl-navpill { width: 24px; height: 7px; border-radius: var(--radius-pill); background: var(--color-surface-2); }
    .rf-tpl-navpill-active { background: var(--color-primary-soft); }
    .rf-tpl-sidebar {
        width: 46px; height: 100%; flex-shrink: 0; padding: 10px 0;
        display: flex; flex-direction: column; align-items: center; gap: 8px;
        background: var(--rf-sidebar-bg, var(--color-surface)); border-right: 1px solid var(--color-border);
    }
    [data-template="vibrant"] .rf-tpl-sidebar { border-right-color: transparent; }
    .rf-tpl-sideitem { width: 22px; height: 6px; border-radius: var(--radius-pill); background: var(--rf-sidebar-fg-muted, var(--color-surface-2)); opacity: .55; }
    .rf-tpl-sideitem-active { opacity: 1; background: var(--rf-sidebar-active-bg, var(--color-primary-soft)); box-shadow: -2px 0 0 var(--rf-sidebar-active-bar, var(--color-primary-500)); }
    .rf-tpl-body { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
    .rf-tpl-kpirow { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .rf-tpl-kpi {
        height: 30px; border-radius: var(--radius-md); background: var(--color-surface);
        border: 1px solid var(--color-border); box-shadow: var(--shadow-1);
        display: flex; align-items: center; padding: 0 8px;
    }
    .rf-tpl-kpi::before { content: ''; width: 16px; height: 8px; border-radius: 3px; background: var(--color-primary-soft); }
    .rf-tpl-tilerow { display: flex; gap: 6px; }
    .rf-tpl-tile {
        width: 30px; height: 30px; border-radius: var(--radius-lg);
        background: var(--net-fill, var(--color-surface-2)); box-shadow: var(--shadow-1);
    }
    [data-template="midnight"] .rf-tpl-tile {
        background: var(--color-surface-2); border-radius: var(--radius-sm);
        box-shadow: inset 0 0 0 1px var(--color-border), 0 0 10px color-mix(in oklab, var(--net-solid) 30%, transparent);
    }
    .rf-tpl-badge {
        align-self: flex-start; height: 14px; padding: 0 8px; border-radius: var(--radius-xs);
        display: inline-flex; align-items: center;
        background: var(--color-primary-soft);
    }
    [data-template="vibrant"] .rf-tpl-badge { border-radius: var(--radius-pill); }
    .rf-tpl-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary-600); }
}

/* ================================================================
   IMPULSA (Vibrant) — dedicated shell + screens (STYLE-GUIDE-CLIENT-
   TEMPLATES). Self-contained `rf-imp-*` classes for the purple-sidebar
   consumer skin; only rendered when data-template="vibrant" via the
   shell-vibrant partial. Consume --brand / --color-* / --rf-accent only.
   ================================================================ */
@layer components {

    /* ── Shell frame ── */
    .rf-imp-shell { display: flex; height: 100vh; width: 100%; overflow: hidden; }
    .rf-imp-main  { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--color-bg); }

    /* ── Sidebar (brand gradient + top-right glow) ── */
    .rf-imp-side {
        width: var(--rf-sidebar-w, 256px); flex: 0 0 var(--rf-sidebar-w, 256px);
        background: var(--rf-sidebar-bg); color: #fff;
        display: flex; flex-direction: column; padding: 0 0 18px;
        position: relative; overflow: hidden;
    }
    .rf-imp-side::before {
        content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px;
        border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
        pointer-events: none;
    }
    .rf-imp-brand { display: flex; align-items: center; justify-content: center; gap: 11px; height: 70px; padding: 0 16px; flex-shrink: 0; }
    .rf-imp-logo {
        width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
        background: var(--rf-accent-grad); color: #fff;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 8px 20px rgba(18,194,184,.40);
    }
    .rf-imp-logo img { height: 26px; max-width: 34px; object-fit: contain; }
    .rf-imp-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.5px; color: #fff; }

    .rf-imp-nav { display: flex; flex-direction: column; gap: 5px; flex: 1; overflow-y: auto; overflow-x: hidden; padding-top: 20px; }
    .rf-imp-nav-item {
        display: flex; align-items: center; gap: 12px; margin: 0 12px; padding: 11px 14px;
        border: none; cursor: pointer; text-decoration: none; position: relative;
        font-family: var(--font-sans); font-weight: 600; font-size: 14px;
        border-radius: 12px; background: transparent; color: rgba(255,255,255,.78);
        transition: color .15s, background-color .15s;
    }
    .rf-imp-nav-item:hover { background: rgba(255,255,255,.10); color: #fff; }
    .rf-imp-nav-icon  { width: 20px; height: 20px; flex: 0 0 20px; display: flex; align-items: center; }
    .rf-imp-nav-label { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rf-imp-nav-badge {
        background: var(--rf-badge-amber); color: var(--rf-badge-amber-fg);
        font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px;
        border-radius: 20px; display: flex; align-items: center; justify-content: center;
    }
    /* Active item "bites" the content — flush right edge + two concave corners. */
    .rf-imp-nav-item-active,
    .rf-imp-nav-item-active:hover {
        margin: 0 0 0 12px; border-radius: 14px 0 0 14px;
        background: var(--color-bg); color: var(--color-primary-700);
    }
    .rf-imp-nav-item-active::before,
    .rf-imp-nav-item-active::after {
        content: ''; position: absolute; right: 0; width: 14px; height: 14px; pointer-events: none;
    }
    .rf-imp-nav-item-active::before { top: -14px;    background: radial-gradient(circle at top left,    transparent 14px, var(--color-bg) 14px); }
    .rf-imp-nav-item-active::after  { bottom: -14px; background: radial-gradient(circle at bottom left, transparent 14px, var(--color-bg) 14px); }

    /* Dark mode: remove the white radial glow that was designed for the purple
       sidebar — on the grey #262828 bg it shows as an unwanted white reflection. */
    .dark[data-template="vibrant"] .rf-imp-side::before { display: none; }

    /* Dark mode: keep the same biting-tab (gota) geometry; only adjust text color
       so it reads on the #1d1f1f active-item background. --color-bg is #1d1f1f in
       dark, so the gota fill + pseudo-element radial-gradients use that color
       automatically — the concave corners cut into the purple sidebar correctly. */
    .dark[data-template="vibrant"] .rf-imp-nav-item-active,
    .dark[data-template="vibrant"] .rf-imp-nav-item-active:hover {
        margin: 0 0 0 12px; border-radius: 14px 0 0 14px;
        background: var(--color-bg);
        color: #fff; font-weight: 700;
        box-shadow: none;
    }
    .dark[data-template="vibrant"] .rf-imp-nav-item-active .rf-imp-nav-icon { color: var(--rf-accent); }
    .dark[data-template="vibrant"] .rf-imp-nav-item-active::before,
    .dark[data-template="vibrant"] .rf-imp-nav-item-active::after { content: ''; }

    .rf-imp-logout {
        margin: 14px 16px 0; width: calc(100% - 32px);
        display: flex; align-items: center; gap: 11px; padding: 12px 14px;
        border: none; border-radius: 12px; background: rgba(255,255,255,.08);
        color: rgba(255,255,255,.85); font-family: var(--font-sans); font-weight: 700; font-size: 14px; cursor: pointer;
        transition: background-color .15s;
    }
    .rf-imp-logout:hover { background: rgba(255,255,255,.15); }

    /* ── Header ── */
    .rf-imp-header {
        flex: 0 0 auto; height: 70px; background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        display: flex; align-items: center; gap: 14px; padding: 0 26px;
    }
    .rf-imp-search-wrap { position: relative; width: 300px; max-width: 32vw; flex-shrink: 0; }
    .rf-imp-search {
        display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px;
        width: 100%; border-radius: 12px;
        background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-subtle);
    }
    .rf-imp-search input { border: none; background: transparent; flex: 1; font-family: inherit; font-size: 14px; color: var(--color-text); outline: none; min-width: 0; }
    .rf-imp-actions { display: flex; gap: 8px; }
    .rf-imp-action {
        display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px;
        border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 11px;
        font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; color: var(--color-text-muted);
        cursor: pointer; white-space: nowrap; text-decoration: none;
        transition: background-color .15s, border-color .15s;
    }
    .rf-imp-action:hover { background: var(--color-bg); border-color: var(--color-border-strong); }
    .rf-imp-action-icon { display: flex; color: var(--color-primary-600); }
    .rf-imp-greeting { font-size: 12px; color: var(--color-text-subtle); font-weight: 600; }
    .rf-imp-balance {
        display: inline-flex; align-items: center; gap: 6px; margin-top: 3px;
        background: var(--rf-accent-grad); color: #fff; font-weight: 800; font-size: 13px;
        padding: 4px 11px; border-radius: 8px; text-decoration: none;
    }
    .rf-imp-avatar {
        width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
        background: var(--rf-primary-grad); color: #fff; font-weight: 800; font-family: var(--font-display);
        display: flex; align-items: center; justify-content: center;
    }
    .rf-imp-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .rf-imp-content { flex: 1; overflow-y: auto; padding: 24px 26px 40px; }

    /* ── Generic plush card ── */
    .rf-imp-card  { background: var(--color-surface); border-radius: 20px; box-shadow: var(--shadow-2); }
    .rf-imp-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--color-text); }
    .rf-imp-h1    { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--color-text); }

    /* ── Order hero: donut (izq) + redes (der) ── */
    .rf-imp-hero { display: grid; grid-template-columns: 1fr 1.5fr; gap: 18px; margin-bottom: 22px; }
    .rf-imp-hero-nets { padding: 16px 14px 12px; display: flex; flex-direction: column; }
    .rf-imp-hero-nets-title {
        display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700;
        font-size: 13px; color: var(--color-text-muted); margin-bottom: 11px;
        padding-bottom: 9px; border-bottom: 1px solid var(--color-border);
    }
    /* Hero network chips: icon-only squares so they fit the compact 108px hero */
    .rf-imp-hero-netgrid { display:grid; grid-template-columns:repeat(auto-fill, 34px); gap:4px; align-content:start; overflow:hidden; }
    .rf-imp-hero-netgrid .rf-imp-netchip { height:34px; width:34px; padding:0; gap:0; border-radius:8px; justify-content:center; border-color:var(--color-border-strong); }
    .rf-imp-hero-netgrid .rf-imp-netchip-name { display:none; }
    .rf-imp-hero-netgrid .rf-imp-netchip-ic { width:18px; height:18px; flex:0 0 18px; }
    .rf-imp-hero-netgrid .rf-imp-netchip-ic svg { width:15px; height:15px; }
    .rf-imp-hero-chart { position: relative; overflow: visible; padding: 18px 20px 8px; }
    .rf-imp-hero-pill {
        position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2;
        background: var(--rf-primary-grad); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px;
        padding: 8px 20px; border-radius: 30px; box-shadow: 0 10px 22px -8px color-mix(in oklab, var(--brand) 70%, transparent); white-space: nowrap;
    }
    .rf-imp-hero-donut { display: flex; align-items: center; gap: 16px; padding: 20px; }
    .rf-imp-donut { width: 66px; height: 66px; flex: 0 0 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .rf-imp-donut-core { width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe08a, #f5a524); box-shadow: inset 0 0 0 3px #fff; }
    .rf-imp-donut-stats { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
    .rf-imp-mini-label { font-size: 12px; color: var(--color-text-subtle); font-weight: 600; }
    .rf-imp-mini-value { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.1; color: var(--color-text); }
    .rf-imp-mini-pct   { font-size: 11px; font-weight: 700; }

    /* Network tiles (hero, brand-filled) */
    .rf-imp-nettiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px; }
    .rf-imp-nettile {
        display: flex; align-items: center; gap: 8px; padding: 11px 12px; border: none; border-radius: 12px;
        cursor: pointer; text-decoration: none; color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 12.5px;
        background: var(--tile-bg, var(--color-surface-2)); box-shadow: 0 6px 14px -8px rgba(0,0,0,.5);
        white-space: nowrap; overflow: hidden; transition: transform .15s;
    }
    .rf-imp-nettile:hover { transform: translateY(-2px); }
    .rf-imp-nettile-mono { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; background: rgba(255,255,255,.24); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; }
    .rf-imp-nettile-mono svg { width: 14px; height: 14px; }
    .rf-imp-nettile-label { overflow: hidden; text-overflow: ellipsis; }
    .rf-imp-nettile-active { outline: 3px solid rgba(255,255,255,.7); outline-offset: -1px; }

    /* ── Tabs ── */
    .rf-imp-tabs { display: flex; gap: 6px; padding: 16px 22px; border-bottom: 1px solid var(--color-border); }
    .rf-imp-tab {
        display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: none; cursor: pointer;
        font-family: var(--font-sans); font-weight: 700; font-size: 14px; border-radius: 12px;
        background: transparent; color: var(--color-text-muted); transition: background-color .15s, color .15s;
    }
    .rf-imp-tab:hover { color: var(--color-text); }
    .rf-imp-tab-active, .rf-imp-tab-active:hover {
        background: var(--rf-primary-grad); color: #fff;
        box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--brand) 70%, transparent);
    }

    /* ── Order form ── */
    .rf-imp-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding: 26px 26px 30px; }
    .rf-imp-order-summary { border-left: 1px solid var(--color-border); padding-left: 34px; }
    .rf-imp-field { display: block; font-weight: 700; font-size: 13px; color: var(--color-text-muted); margin-bottom: 7px; }
    .rf-imp-field-sub { color: var(--color-text-subtle); font-weight: 600; }
    .rf-imp-input, .rf-imp-select {
        width: 100%; height: 40px; padding: 0 15px; border: 1.5px solid var(--color-border-strong);
        border-radius: 13px; font-family: var(--font-sans); font-weight: 600; font-size: 14px;
        color: var(--color-text); background: var(--color-surface-2);
        transition: border-color .15s, box-shadow .15s;
    }
    .rf-imp-input::placeholder { color: var(--color-text-subtle); font-weight: 500; }
    .rf-imp-input:focus, .rf-imp-select:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 12%, transparent); }
    .rf-imp-input:disabled, .rf-imp-select:disabled { opacity: .6; cursor: not-allowed; }
    .rf-imp-input-error { border-color: var(--color-danger); }
    .rf-imp-select-wrap { position: relative; }
    .rf-imp-select { appearance: none; padding-right: 42px; cursor: pointer; }
    .rf-imp-select-caret { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-text-subtle); }
    .rf-imp-hint { font-size: 12.5px; color: var(--color-text-subtle); margin-top: 6px; }
    .rf-imp-hint-error { color: var(--color-danger); }

    .rf-imp-costbar {
        display: flex; align-items: center; gap: 8px;
        background: var(--rf-accent-grad); color: #fff; border-radius: 10px; padding: 11px 20px;
        box-shadow: 0 8px 18px -8px rgba(18,194,184,.65);
    }
    .rf-imp-costbar-label { font-weight: 700; font-size: 14px; opacity: .92; }
    .rf-imp-costbar-label::after { content: ':'; }
    .rf-imp-costbar-value { font-family: var(--font-display); font-weight: 800; font-size: 18px; }

    .rf-imp-confirm { display: flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; }
    .rf-imp-confirm input { width: 20px; height: 20px; accent-color: var(--color-primary-600); cursor: pointer; }
    .rf-imp-confirm span { font-weight: 700; font-size: 13.5px; color: var(--color-text-muted); }

    .rf-imp-submit {
        display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 52px;
        border: none; border-radius: 14px; font-family: var(--font-display); font-weight: 700; font-size: 15px;
        cursor: pointer; color: #fff; background: var(--rf-primary-grad);
        box-shadow: 0 14px 28px -12px color-mix(in oklab, var(--brand) 70%, transparent); transition: filter .15s;
    }
    .rf-imp-submit:hover:not(:disabled) { filter: brightness(1.04); }
    .rf-imp-submit:disabled { background: var(--color-border-strong); box-shadow: none; cursor: not-allowed; }

    /* ── Order summary ── */
    .rf-imp-sumbox { background: var(--color-surface-3); border: 1px solid var(--color-border); border-radius: 13px; padding: 13px 15px; font-weight: 600; font-size: 14px; color: var(--color-text); line-height: 1.4; min-height: 50px; }
    .rf-imp-metagrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .rf-imp-metatile-group { display: flex; flex-direction: column; gap: 5px; }
    .rf-imp-metatile-label { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
    .rf-imp-metatile { height: 42px; border: 1.5px solid var(--color-border-strong); border-radius: 10px; padding: 0 12px; display: flex; align-items: center; font-weight: 600; font-size: 13px; color: var(--color-text); background: var(--color-surface-2); }
    .rf-imp-desc { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; }
    .rf-imp-desc-item { display: flex; gap: 10px; align-items: flex-start; }
    .rf-imp-desc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary-600); margin-top: 6px; flex: 0 0 7px; }
    .rf-imp-desc-text { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.35; }
    .rf-imp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 20px; color: var(--color-text-subtle); text-align: center; }

    /* ── Dashboard ── */
    .rf-imp-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
    .rf-imp-statcard { background: var(--color-surface); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-2); display: flex; align-items: center; gap: 16px; }
    .rf-imp-staticon { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; }
    .rf-imp-statvalue { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--color-text); line-height: 1.1; }
    .rf-imp-statlabel { font-size: 12.5px; color: var(--color-text-subtle); font-weight: 600; margin-top: 2px; }
    .rf-imp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

    /* ── Dashboard row: compact orders chart (left) + status donut (right) ── */
    .rf-imp-dashrow { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 22px; align-items: stretch; }
    .rf-imp-chartpanel, .rf-imp-statuspanel { background: var(--color-surface); border-radius: 20px; box-shadow: var(--shadow-2); min-width: 0; }
    .rf-imp-chartpanel { padding: 20px 22px 10px; }
    .rf-imp-statuspanel { padding: 20px 22px; display: flex; flex-direction: column; }
    .rf-imp-chartlegend { display: flex; align-items: center; gap: 14px; }
    .rf-imp-chartleg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); white-space: nowrap; }
    .rf-imp-chartleg-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
    /* --rf-accent only exists under the vibrant client skin; the fallback keeps
       the second series visible on the admin dashboard (no data-template). */
    .rf-imp-chart-line2 { fill: none; stroke: var(--rf-accent, #12c2b8); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

    /* Status donut — real per-status breakdown, total at the centre + colour
       legend. Replaces the old row of status cards (same data, shown once). */
    .rf-imp-donutrow { display: flex; align-items: center; gap: 20px; flex: 1; }
    .rf-imp-statdonut { position: relative; width: 132px; height: 132px; flex: 0 0 132px; }
    .rf-imp-statdonut svg { width: 100%; height: 100%; display: block; }
    .rf-imp-statdonut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
    .rf-imp-statdonut-total { font-family: var(--font-display); font-weight: 800; font-size: 27px; line-height: 1; color: var(--color-text); }
    .rf-imp-statdonut-sub { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-subtle); margin-top: 3px; }
    .rf-imp-leglist { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
    .rf-imp-legrow { display: flex; align-items: center; gap: 10px; }
    .rf-imp-leglabel { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rf-imp-legpct { font-size: 11px; font-weight: 700; color: var(--color-text-subtle); min-width: 32px; text-align: right; }
    .rf-imp-legval { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--color-text); min-width: 22px; text-align: right; }

    /* ── Services ── */
    .rf-imp-legend { display: inline-flex; align-items: center; gap: 7px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 30px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); }
    .rf-imp-svcgroup { background: var(--color-surface); border-radius: 18px; box-shadow: var(--shadow-2); overflow: hidden; }
    .rf-imp-svcgroup-head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--color-border); }
    .rf-imp-svcgroup-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--color-text); }
    .rf-imp-newchip { background: var(--color-primary-soft); color: var(--color-primary-700); font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px; letter-spacing: .5px; }
    .rf-imp-svcscroll { overflow-x: auto; }
    .rf-imp-svctable { min-width: 720px; }
    .rf-imp-svchead, .rf-imp-svcrow { display: grid; grid-template-columns: 68px 1fr 120px 160px 140px 72px; align-items: center; }
    .rf-imp-svchead { padding: 12px 22px; font-size: 11.5px; font-weight: 800; color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--color-surface-3); }
    .rf-imp-svcrow { padding: 14px 22px; border-bottom: 1px solid var(--color-surface-3); }
    .rf-imp-svcrow:nth-child(even) { background: var(--color-surface-2); }
    .rf-imp-svcid { font-weight: 700; color: var(--color-text-subtle); font-size: 13px; }
    .rf-imp-svcname { display: flex; align-items: center; gap: 9px; min-width: 0; }
    .rf-imp-svcname-text { font-size: 13px; color: var(--color-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rf-imp-platmono { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 10px; }
    .rf-imp-platmono svg { width: 15px; height: 15px; }
    .rf-imp-svcrate { text-align: right; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--rf-accent-2); }
    .rf-imp-svcmm  { text-align: right; font-size: 12.5px; color: var(--color-text-subtle); font-weight: 600; }
    .rf-imp-svctime { text-align: right; font-size: 12.5px; color: var(--color-text-subtle); font-weight: 600; }
    .rf-imp-verbtn { background: var(--color-primary-600); color: #fff; border: none; border-radius: 8px; padding: 7px 15px; font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; cursor: pointer; }
    .rf-imp-verbtn:hover { background: color-mix(in oklab, var(--brand) 66%, black); }

    /* ── Support chat ── */
    .rf-imp-chat-page { display: flex; flex-direction: column; height: calc(100vh - 134px); min-height: 400px; }
    .rf-imp-chat { display: grid; grid-template-columns: 340px 1fr; gap: 18px; height: 100%; }
    .rf-imp-chat-list { background: var(--color-surface); border-radius: 18px; box-shadow: var(--shadow-2); padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: hidden; }
    .rf-imp-chat-conv { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--color-border); cursor: pointer; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
    .rf-imp-chat-conv:hover { border-color: var(--color-primary-300); box-shadow: var(--shadow-1); }
    .rf-imp-chat-conv-active { border-color: var(--color-primary-500); box-shadow: 0 0 0 2px var(--color-primary-soft); }
    .rf-imp-chat-avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: var(--rf-primary-grad); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .rf-imp-chat-thread { background: var(--color-surface); border-radius: 18px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; overflow: hidden; }
    .rf-imp-chat-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
    .rf-imp-chat-body { flex: 1; min-height: 0; padding: 22px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
    .rf-imp-bubble { max-width: 70%; padding: 12px 15px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; }
    .rf-imp-bubble-in  { align-self: flex-start; background: var(--color-surface-2); color: var(--color-text); border-top-left-radius: 4px; }
    .rf-imp-bubble-out { align-self: flex-end; background: var(--rf-primary-grad); color: #fff; border-top-right-radius: 4px; }
    .rf-imp-chat-input { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--color-border); flex-shrink: 0; }
    .rf-imp-online { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in oklab, var(--color-success) 14%, #fff); color: var(--color-success); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }

    /* ── Interactive area chart (self-hosted, no chart lib) ── */
    .rf-imp-chart { position: relative; width: 100%; }
    .rf-imp-chart svg { width: 100%; display: block; cursor: crosshair; touch-action: none; }
    .rf-imp-chart-grid { stroke: var(--color-surface-3); stroke-width: 1; }
    .rf-imp-chart-line { fill: none; stroke: var(--color-primary-600); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
    .rf-imp-chart-dot { fill: var(--color-surface); stroke: var(--color-primary-600); stroke-width: 2.5; }
    /* primary-600 keeps its dark mix in dark mode (it's the button bg), so the
       chart strokes need their own lift to stay visible on dark surfaces. */
    .dark .rf-imp-chart-line { stroke: var(--color-primary-400); }
    .dark .rf-imp-chart-dot { stroke: var(--color-primary-400); }
    .dark .rf-imp-chart-active { fill: var(--color-primary-400); }
    .rf-imp-chart-cross { stroke: var(--color-primary-500); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .7; }
    .rf-imp-chart-active { fill: var(--color-primary-600); stroke: #fff; stroke-width: 3; }
    .rf-imp-chart-axis { font-family: var(--font-sans); font-weight: 600; fill: var(--color-text-subtle); }
    .rf-imp-chart-tip {
        position: absolute; z-index: 6; pointer-events: none; transform: translate(-50%, calc(-100% - 15px));
        background: #171A21; color: #fff; border-radius: 12px; padding: 9px 13px;
        box-shadow: 0 16px 34px -14px rgba(20,12,40,.6); white-space: nowrap;
    }
    .dark .rf-imp-chart-tip { background: #0f111a; color: #fff; }
    .rf-imp-chart-tip.is-flip { transform: translate(calc(-100% - 14px), calc(-100% - 15px)); }
    .rf-imp-chart-tip-date { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; margin-bottom: 6px; opacity: .95; }
    .rf-imp-chart-tip-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
    .rf-imp-chart-tip-row + .rf-imp-chart-tip-row { margin-top: 4px; }
    .rf-imp-chart-tip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }

    /* ── Network selector: "Choose a social network" (MEJORA 1) ── */
    .rf-imp-netpanel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
    .rf-imp-netpanel-title {
        display: flex; align-items: center; gap: 8px; min-width: 0;
        font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
        color: var(--color-text-muted);
    }
    .rf-imp-netpanel-title i { color: var(--color-primary-600); }

    /* "ALL" chip — accent-highlighted when the manual (no-network) filter is on. */
    .rf-imp-netall {
        display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 7px 13px; cursor: pointer;
        border: 1.5px solid transparent; border-radius: 10px;
        font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: .02em;
        background: var(--color-primary-soft); color: var(--color-primary-700);
        transition: background-color .14s, color .14s, border-color .14s;
    }
    .rf-imp-netall:hover { background: color-mix(in oklab, var(--brand) 20%, var(--color-surface)); }
    .rf-imp-netall-off { background: var(--color-surface-2); color: var(--color-text-muted); border-color: var(--color-border); }
    .rf-imp-netall-off:hover { border-color: var(--color-border-strong); background: var(--color-surface-3); color: var(--color-text); }
    /* Active (manual-mode) ALL chip needs a lighter foreground on the dark #1d1f1f. */
    .dark .rf-imp-netall { background: color-mix(in oklab, var(--brand) 24%, var(--color-surface)); color: var(--color-primary-200); }

    /* Chip grid — ~8 columns, degrading gracefully down to phones. */
    /* Compact horizontal pills: brand glyph + name on ONE line (reference look),
       so the whole network list stays tight instead of a wall of big squares. */
    .rf-imp-netgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
    /* Collapsed = exactly three rows (chip 40px + 8px gap × 2); "All" removes the clamp. */
    .rf-imp-netgrid-2rows { max-height: 136px; overflow: hidden; }
    .rf-imp-netchip {
        display: flex; flex-direction: row; align-items: center; gap: 9px; text-align: left;
        height: 40px; box-sizing: border-box; padding: 0 12px; cursor: pointer; min-width: 0;
        border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-2);
        transition: transform .13s var(--ease-out), border-color .13s, background-color .13s, box-shadow .13s;
    }
    .rf-imp-netchip:hover { border-color: var(--color-border-strong); background: var(--color-surface-3); box-shadow: var(--shadow-1); }
    .rf-imp-netchip-active,
    .rf-imp-netchip-active:hover { border-color: var(--color-primary-500); box-shadow: 0 0 0 2px var(--color-primary-soft); background: var(--color-surface); }
    .rf-imp-netchip-off { cursor: not-allowed; opacity: .42; }
    .rf-imp-netchip-off:hover { border-color: var(--color-border); background: var(--color-surface-2); box-shadow: none; }
    .rf-imp-netchip-ic { width: 22px; height: 22px; flex: 0 0 22px; display: flex; align-items: center; justify-content: center; color: var(--net-color, var(--color-primary-600)); }
    .rf-imp-netchip-ic svg { width: 19px; height: 19px; fill: currentColor; }
    .rf-imp-netchip-ic i, .rf-imp-netchip-ic [data-lucide] { width: 18px; height: 18px; }
    .rf-imp-netchip-mono { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: -.5px; color: currentColor; }
    .rf-imp-netchip-name {
        font-family: var(--font-sans); font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--color-text);
        flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Near-black brands (X / TikTok / Threads / GitHub…) would vanish on the dark
       #1d1f1f chip — lift every glyph toward white in dark so all stay legible. */
    .dark .rf-imp-netchip-ic { color: color-mix(in oklab, var(--net-color, var(--color-primary-500)) 66%, white); }

    /* Inline network icon inside category dropdown rows */
    .rf-cat-neticon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 18px; width:18px; height:18px; color:var(--net-color, var(--color-primary-600)); }
    .rf-cat-neticon svg { width:14px; height:14px; fill:currentColor; flex-shrink:0; }
    .rf-cat-neticon [data-lucide] { width:14px; height:14px; }
    .rf-cat-neticon-mono { font-family:var(--font-display); font-weight:800; font-size:10px; letter-spacing:-.5px; color:#fff; border-radius:3px; width:14px; height:14px; display:flex; align-items:center; justify-content:center; }
    .dark .rf-cat-neticon { color: color-mix(in oklab, var(--net-color, var(--color-primary-500)) 70%, white); }

    /* "All platforms" expander — dotted border, expands to the full registry. */
    .rf-imp-netmore {
        display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 16px; cursor: pointer;
        border: 1.5px dashed var(--color-border-strong); border-radius: 12px; background: transparent;
        font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: var(--color-text-muted);
        transition: border-color .14s, color .14s, background-color .14s;
    }
    .rf-imp-netmore:hover { border-color: var(--color-primary-400); color: var(--color-primary-600); background: var(--color-primary-soft); }
    /* auto-fill handles wrapping; only tighten the min chip width on phones */
    @media (max-width: 575px) { .rf-imp-netgrid { grid-template-columns: repeat(2, 1fr); } }

    /* ── Admin: quick-access networks drag-and-drop (MEJORA 3) ── */
    .rf-net-col-head {
        display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
        font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-subtle);
    }
    .rf-net-col {
        display: flex; flex-direction: column; gap: 8px; min-height: 120px; padding: 10px;
        border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-2);
    }
    .rf-net-drag {
        display: flex; align-items: center; gap: 10px; padding: 9px 11px; cursor: grab;
        background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-1);
    }
    .rf-net-drag:active { cursor: grabbing; }
    .rf-net-drag-ghost { opacity: .45; border-style: dashed; border-color: var(--color-primary-400); }
    .rf-net-drag-grip { color: var(--color-text-subtle); flex: 0 0 auto; }
    .rf-net-drag-ic { width: 24px; height: 24px; flex: 0 0 24px; display: flex; align-items: center; justify-content: center; color: var(--net-color, var(--color-primary-600)); }
    .rf-net-drag-ic svg { width: 19px; height: 19px; fill: currentColor; }
    .rf-net-drag-mono { font-weight: 800; font-size: 12px; letter-spacing: -.4px; color: currentColor; }
    .rf-net-drag-name { font-size: 13px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dark .rf-net-drag-ic { color: color-mix(in oklab, var(--net-color, var(--color-primary-500)) 66%, white); }

    .rf-imp-drill { margin-top: 16px; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; background: var(--color-surface-2); }
    .rf-imp-drill-step { padding: 15px 18px; border-top: 1px solid var(--color-border); }
    .rf-imp-drill-step:first-child { border-top: none; }
    .rf-imp-drill-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 12px; }
    .rf-imp-drill-num { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; background: var(--color-primary-soft); color: var(--color-primary-700); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
    .rf-imp-drill-svcs { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
    .rf-imp-svcopt {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; width: 100%;
        border: 1.5px solid var(--color-border); background: var(--color-surface); border-radius: 12px; padding: 11px 14px; cursor: pointer; transition: border-color .13s, box-shadow .13s;
    }
    .rf-imp-svcopt:hover { border-color: var(--color-primary-500); box-shadow: var(--shadow-1); }
    .rf-imp-svcopt-active { border-color: var(--color-primary-500); background: var(--color-primary-soft); }
    .rf-imp-svcopt-name { min-width: 0; }
    .rf-imp-svcopt-title { font-size: 13px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rf-imp-svcopt-meta { font-size: 11.5px; color: var(--color-text-subtle); font-weight: 600; margin-top: 2px; }
    .rf-imp-svcopt-price { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; color: var(--rf-accent-2); flex: 0 0 auto; }
    .rf-imp-drill-empty { font-size: 12.5px; color: var(--color-text-subtle); padding: 6px 2px; }

    /* ── Custom service dropdown (styled, searchable) ── */
    .rf-imp-ddsearch { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 9px; font-family: var(--font-sans); font-size: 13px; background: var(--color-surface-2); color: var(--color-text); margin-bottom: 6px; }
    .rf-imp-ddsearch:focus { outline: none; border-color: var(--color-primary-500); }
    .rf-imp-select-btn { text-align: left; display: flex; align-items: center; gap: 8px; }
    .rf-imp-select-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rf-imp-select-placeholder { color: var(--color-text-subtle); font-weight: 500; }

    /* ── Dashboard lists: latest + in-process ── */
    .rf-imp-panelgrid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 18px; margin-bottom: 22px; }
    /* min-width:0 lets the grid track shrink below its content's min size, so a
       long service name never forces the panel wider than its column on mobile. */
    .rf-imp-panel { background: var(--color-surface); border-radius: 20px; box-shadow: var(--shadow-2); padding: 22px 24px; min-width: 0; }
    .rf-imp-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .rf-imp-panel-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--color-text); }
    .rf-imp-panel-link { font-size: 12.5px; font-weight: 700; color: var(--color-primary-600); text-decoration: none; }
    .rf-imp-panel-link:hover { color: var(--color-primary-700); }
    .rf-imp-latest-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-surface-3); }
    .rf-imp-latest-id { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; font-size: 12.5px; color: var(--color-text-subtle); flex: 0 0 auto; }
    .rf-imp-latest-main { min-width: 0; flex: 1; }
    .rf-imp-latest-name { font-size: 13px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rf-imp-latest-sub { font-size: 11.5px; color: var(--color-text-subtle); font-weight: 600; margin-top: 2px; }
    .rf-imp-inproc-item { padding: 14px 0; border-top: 1px solid var(--color-surface-3); }
    .rf-imp-inproc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
    .rf-imp-inproc-name { font-size: 13px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .rf-imp-progress { height: 7px; border-radius: 5px; background: var(--color-surface-3); overflow: hidden; }
    .rf-imp-progress-bar { height: 100%; border-radius: 5px; background: var(--rf-accent-grad); transition: width .3s var(--ease-out, ease); }
    .rf-imp-progress-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--color-text-subtle); margin-top: 7px; }
    .rf-imp-listempty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 30px 16px; text-align: center; color: var(--color-text-subtle); }
    .rf-imp-listempty span.rf-imp-listempty-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; }

    /* ── Ordered description (label: value spec sheet) ── */
    .rf-imp-desc-label { font-weight: 800; color: var(--color-text); margin-right: 5px; }

    /* ── Off-canvas / responsive ── */
    .rf-imp-menu-btn { display: none; }
    .rf-imp-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(20,12,40,.5); }
    @media (max-width: 991px) {
        .rf-imp-menu-btn { display: inline-flex; }
        .rf-imp-side { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform var(--motion-base) var(--ease-out); box-shadow: var(--shadow-4); }
        .rf-imp-side[data-open="1"] { transform: translateX(0); }
        .rf-imp-hero { grid-template-columns: 1fr; }
        .rf-imp-order-grid { grid-template-columns: 1fr; gap: 24px; }
        .rf-imp-order-summary { border-left: none; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: 24px; }
        .rf-imp-statgrid { grid-template-columns: repeat(2, 1fr); }
        .rf-imp-dashrow, .rf-imp-panelgrid { grid-template-columns: 1fr; }
        .rf-imp-chat { grid-template-columns: 1fr; }
        .rf-imp-chat-page { height: calc(100vh - 118px); }
        .rf-imp-actions { display: none; }
    }
    @media (max-width: 575px) {
        .rf-imp-side { width: 82vw; }
        .rf-imp-header { padding: 0 14px; gap: 10px; }
        .rf-imp-content { padding: 16px 14px 32px; }
        .rf-imp-search { width: 100%; max-width: none; }
        .rf-imp-nettiles, .rf-imp-statgrid, .rf-imp-metagrid { grid-template-columns: 1fr 1fr; }
        .rf-imp-greeting-wrap { display: none; }
    }
    @media (max-width: 479px) {
        /* On narrow phones a 2-up KPI row clips the wide money values, and the
           donut + legend no longer sit side by side comfortably — stack both. */
        .rf-imp-statgrid { grid-template-columns: 1fr; }
        .rf-imp-donutrow { flex-direction: column; align-items: center; gap: 16px; }
        .rf-imp-leglist { width: 100%; }
    }
}

/* ================================================================
   AUTO-HIDING SCROLLBARS  (nav + inbox panels)
   The bar is invisible at rest and only paints while the pointer is
   over its own scroll container — Firefox via `scrollbar-*`, WebKit /
   Blink via the `::-webkit-scrollbar` pseudo-elements. Apply the
   `rf-scroll-hover` class to any element that owns an internal scroll.
   ================================================================ */
.rf-scroll-hover {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.rf-scroll-hover::-webkit-scrollbar { width: 10px; height: 10px; }
.rf-scroll-hover::-webkit-scrollbar-track { background: transparent; }
.rf-scroll-hover::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
    /* Transparent border shrinks the visible thumb and keeps a gutter. */
    border: 3px solid transparent;
    background-clip: padding-box;
    transition: background-color var(--motion-base) var(--ease-out);
}
.rf-scroll-hover:hover { scrollbar-color: var(--color-border-strong) transparent; }
.rf-scroll-hover:hover::-webkit-scrollbar-thumb { background: var(--color-border-strong); background-clip: padding-box; }
.rf-scroll-hover:hover::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); background-clip: padding-box; }

/* Sidebar logos — the fallback invert (when no logo_light is uploaded) is applied
   inline in sidebar.blade.php. The CSS rule must NOT apply globally because it
   would also invert the logo_light image (already white-ready) and render it solid white. */
.rf-sidebar-logo { transition: filter 0.2s; }

/* Ticket thread — scrollbar completely hidden */
.rf-ticket-thread { scrollbar-width: none; }
.rf-ticket-thread::-webkit-scrollbar { display: none; }

/* ================================================================
   TICKET COMPOSER — pickers, popovers, file chips
   ================================================================ */

/* Floating popover card for emoji, link, and GIF pickers */
.rf-ticket-popover {
    position: absolute;
    z-index: 50;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    min-width: 280px;
    overflow: hidden;
}

/* Emoji grid */
.rf-emoji-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 6px;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.rf-emoji-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.1s;
    background: transparent;
    border: none;
}
.rf-emoji-btn:hover { background: var(--color-surface-2); }

/* Emoji category tabs */
.rf-emoji-tab {
    flex: 1;
    padding: 6px 4px;
    font-size: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.rf-emoji-tab:hover { opacity: 0.8; }
.rf-emoji-tab-active { opacity: 1; border-bottom: 2px solid var(--color-primary-600); }

/* GIF grid */
.rf-gif-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 6px;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.rf-gif-item {
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.1s;
    background: var(--color-surface-2);
}
.rf-gif-item:hover {
    border-color: var(--color-primary-600);
    transform: scale(1.03);
}

/* File chip (in composer + in thread) */
.rf-ticket-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    font-size: 12px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: border-color 0.15s;
}
.rf-ticket-file-chip:hover { border-color: var(--color-primary-600); color: var(--color-text); }
.rf-ticket-chip-remove {
    margin-left: 2px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-subtle);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0 2px;
    border-radius: 4px;
}
.rf-ticket-chip-remove:hover { color: var(--color-danger); }

/* Active toolbar icon state */
.rf-icon-btn-active {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary-600) !important;
}

/* Upload progress bar */
.rf-ticket-upload-bar {
    height: 3px;
    border-radius: 2px;
    background: var(--color-border);
    overflow: hidden;
}
.rf-ticket-upload-fill {
    height: 100%;
    width: 60%;
    background: var(--color-primary-600);
    border-radius: 2px;
    animation: rf-upload-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes rf-upload-pulse {
    from { opacity: 0.6; width: 20%; }
    to   { opacity: 1;   width: 80%; }
}

/* ================================================================
   SIDEBAR — collapsible accordion groups (partials/sidebar)
   ================================================================ */
@layer components {
    /* The group header becomes a button when the section is collapsible. */
    .rf-nav-group-btn {
        display: flex; align-items: center; gap: 8px; width: calc(100% - 16px);
        margin: 2px 8px 0; padding: 12px 8px 4px;
        font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
        color: var(--color-text-subtle); background: transparent; border: none; cursor: pointer;
        border-radius: var(--radius-sm);
        transition: color var(--motion-fast) var(--ease-out);
    }
    .rf-nav-group-btn:hover { color: var(--color-text-muted); }
    .rf-nav-group-btn .rf-nav-caret {
        margin-left: auto; width: 14px; height: 14px; flex-shrink: 0;
        transition: transform var(--motion-base) var(--ease-out);
    }
    .rf-nav-group-btn[aria-expanded="false"] .rf-nav-caret { transform: rotate(-90deg); }
    /* A slim brand tick on a collapsed group that holds the active route. */
    .rf-nav-group-btn.rf-nav-group-hasactive { color: var(--color-text-muted); }
    .rf-nav-group-btn.rf-nav-group-hasactive::before {
        content: ''; width: 5px; height: 5px; border-radius: 50%;
        background: var(--color-primary-500); flex-shrink: 0;
    }
    /* Pre-paint state set by the sidebar IIFE; Alpine's x-show/x-collapse takes
       over (via inline style) the moment it boots, so there is no flash. */
    .rf-nav-group-items[data-open="0"] { display: none; }
}

/* ================================================================
   CRM CHANNELS — integration card grid (Vercel/Linear settings feel)
   ================================================================ */
@layer components {
    .rf-int-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
    .rf-int-card {
        display: flex; flex-direction: column; gap: 12px; padding: 18px;
        border: 1px solid var(--color-border); border-radius: var(--radius-lg);
        background: var(--color-surface); box-shadow: var(--shadow-1);
        transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
    }
    .rf-int-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-2); }
    .rf-int-top { display: flex; align-items: flex-start; gap: 12px; }
    .rf-int-icon {
        width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .rf-int-icon svg, .rf-int-icon i { width: 22px; height: 22px; }
    .rf-int-name { font-size: 15px; font-weight: 650; color: var(--color-text); line-height: 1.2; }
    .rf-int-desc { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; flex: 1; }
    .rf-int-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .rf-int-actions { display: flex; align-items: center; gap: 4px; }

    /* ── Integrations hub (livewire/crm/integrations) ── */
    .rf-int-group-title {
        font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
        color: var(--color-text-subtle); margin: 6px 2px 12px;
    }
    /* The per-card "Manual" trigger — a quiet ghost button that reads as help. */
    .rf-int-manual {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 10px; border-radius: var(--radius-md);
        font-size: 12.5px; font-weight: 550; color: var(--color-text-muted);
        background: transparent; border: 1px solid transparent; cursor: pointer;
        transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    }
    .rf-int-manual:hover { background: var(--color-surface-2); color: var(--color-text); }
    .rf-int-manual i, .rf-int-manual svg { width: 16px; height: 16px; }

    /* Manual modal body */
    .rf-int-manual-h {
        font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
        color: var(--color-text-subtle); margin: 4px 0 8px;
    }
    .rf-int-steps { margin: 0 0 16px; padding-left: 20px; list-style: decimal; }
    .rf-int-steps li { font-size: 13.5px; color: var(--color-text); line-height: 1.55; margin-bottom: 8px; padding-left: 4px; }
}

/* ================================================================
   DASHBOARD AURORA / MIDNIGHT — `rf-dash-*` component classes for
   the non-Vibrant client dashboard (statistics screen). Token-driven
   so they adapt to every theme + dark/light mode automatically.
   ================================================================ */
@layer components {

    /* KPI grid */
    .rf-dash-kpis {
        display: grid; gap: 1rem; margin-bottom: 1.5rem;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
    .rf-dash-kpi {
        display: flex; align-items: center; gap: 14px;
        background: var(--color-surface); border: 1px solid var(--color-border);
        border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-1);
    }
    .rf-dash-kpi-icon {
        display: flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; border-radius: var(--radius-sm); flex-shrink: 0; color: #fff;
    }
    [data-template="midnight"] .rf-dash-kpi-icon { box-shadow: var(--rf-glow); }
    .rf-dash-kpi-val { font-size: 1.3rem; font-weight: 800; color: var(--color-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
    .rf-dash-kpi-label { font-size: 0.72rem; font-weight: 600; color: var(--color-text-subtle); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }

    /* Two-column row: chart (wider) + donut (narrower) */
    .rf-dash-row {
        display: grid; gap: 1rem; margin-bottom: 1rem;
        grid-template-columns: 1fr;
    }
    @media (min-width: 1024px) { .rf-dash-row { grid-template-columns: 2fr 1fr; } }

    /* Chart panel */
    .rf-dash-chart {
        background: var(--color-surface); border: 1px solid var(--color-border);
        border-radius: var(--radius-md); padding: 20px 20px 14px; box-shadow: var(--shadow-1);
    }
    .rf-dash-chart-head {
        display: flex; align-items: flex-start; justify-content: space-between;
        margin-bottom: 6px; gap: 8px; flex-wrap: wrap;
    }
    .rf-dash-chart-title { font-size: 14.5px; font-weight: 700; color: var(--color-text); }
    .rf-dash-chart-sub { font-size: 11.5px; color: var(--color-text-subtle); margin-top: 2px; }
    .rf-dash-chart-legend { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .rf-dash-chart-leg { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
    .rf-dash-chart-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

    /* SVG chart classes */
    .rf-dash-chart-svg { width: 100%; display: block; }
    .rf-dash-chart-grid { stroke: var(--color-border); stroke-width: 1; }
    .rf-dash-chart-line  { fill: none; stroke: var(--color-primary-500); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
    .rf-dash-chart-line2 { fill: none; stroke: var(--color-primary-300,#7dd3fc); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: .7; }
    .dark .rf-dash-chart-line2 { stroke: var(--color-primary-400,#60a5fa); }
    .rf-dash-chart-dot   { fill: var(--color-surface); stroke: var(--color-primary-500); stroke-width: 2; }
    .rf-dash-chart-cross { stroke: var(--color-border-strong); stroke-width: 1; stroke-dasharray: 4 3; }
    .rf-dash-chart-active { fill: var(--color-primary-500); stroke: var(--color-surface); stroke-width: 2.5; }
    .rf-dash-chart-axis  { font-size: 16px; fill: var(--color-text-subtle); }

    /* Chart tooltip */
    .rf-dash-chart-wrap { position: relative; }
    .rf-dash-chart-tip {
        position: absolute; background: var(--color-surface); border: 1px solid var(--color-border);
        border-radius: var(--radius-sm); padding: 7px 10px; font-size: 12px;
        pointer-events: none; white-space: nowrap; z-index: 20; box-shadow: var(--shadow-2);
        transform: translateX(-50%);
    }
    .rf-dash-chart-tip.is-flip { transform: translateX(-100%); }
    .rf-dash-chart-tip-date { font-weight: 700; color: var(--color-text); margin-bottom: 3px; }
    .rf-dash-chart-tip-row  { display: flex; align-items: center; gap: 5px; color: var(--color-text-muted); }
    .rf-dash-chart-tip-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

    /* Status donut panel */
    .rf-dash-status {
        background: var(--color-surface); border: 1px solid var(--color-border);
        border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-1);
        display: flex; flex-direction: column;
    }
    .rf-dash-status-title {
        display: flex; align-items: center; gap: 7px;
        font-size: 14.5px; font-weight: 700; color: var(--color-text); margin-bottom: 16px;
    }
    .rf-dash-donut-wrap { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
    .rf-dash-donut  { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
    .rf-dash-donut svg { width: 120px; height: 120px; }
    .rf-dash-donut-center {
        position: absolute; inset: 0; display: flex; flex-direction: column;
        align-items: center; justify-content: center; text-align: center;
    }
    .rf-dash-donut-total { font-size: 1.35rem; font-weight: 800; color: var(--color-text); }
    .rf-dash-donut-sub   { font-size: 9px; font-weight: 700; color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: .06em; }
    .rf-dash-leg-list { display: flex; flex-direction: column; gap: 6px; min-width: 120px; }
    .rf-dash-leg-row  { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
    .rf-dash-leg-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .rf-dash-leg-label { flex: 1; color: var(--color-text-muted); }
    .rf-dash-leg-pct  { font-weight: 700; color: var(--color-text); min-width: 28px; text-align: right; }
    .rf-dash-leg-val  { font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--color-text-subtle); min-width: 22px; text-align: right; }

    /* Bottom panels grid (latest orders + in process) */
    .rf-dash-panels { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
    @media (min-width: 768px) { .rf-dash-panels { grid-template-columns: 1fr 1fr; } }
    .rf-dash-panel {
        background: var(--color-surface); border: 1px solid var(--color-border);
        border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-1);
    }
    .rf-dash-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .rf-dash-panel-title { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--color-text); }
    .rf-dash-panel-link  { font-size: 12px; font-weight: 600; color: var(--color-primary-600); text-decoration: none; }
    .rf-dash-panel-link:hover { text-decoration: underline; }

    /* Latest orders rows */
    .rf-dash-latest { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-border); }
    .rf-dash-latest:last-child { border-bottom: none; }
    .rf-dash-latest-id { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--color-text-subtle); flex-shrink: 0; min-width: 36px; }
    .rf-dash-latest-main { flex: 1; min-width: 0; }
    .rf-dash-latest-name { font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rf-dash-latest-sub  { font-size: 11px; color: var(--color-text-subtle); margin-top: 2px; }

    /* Orders in process rows */
    .rf-dash-proc { padding: 9px 0; border-bottom: 1px solid var(--color-border); }
    .rf-dash-proc:last-child { border-bottom: none; }
    .rf-dash-proc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
    .rf-dash-proc-name { font-size: 12.5px; font-weight: 600; color: var(--color-text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rf-dash-progress { height: 5px; border-radius: 99px; background: var(--color-surface-2); overflow: hidden; margin-top: 2px; }
    .rf-dash-progress-bar { height: 100%; border-radius: 99px; background: var(--color-primary-500); transition: width .4s; }
    .rf-dash-progress-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-subtle); margin-top: 3px; }

    /* Empty state */
    .rf-dash-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px 0; text-align: center; }
    .rf-dash-empty-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface-2); }
}

/* ================================================================
   CRM INBOX  (livewire/crm/inbox) — a polished Chatwoot/Intercom
   omnichannel shell: channel rail + conversation list + thread +
   contact panel. All classes are `rf-crm-*` scoped and token-driven,
   so light + dark and every reseller brand skin come for free.
   ================================================================ */
@layer components {

    /* ── Shell: four columns filling the viewport below the topbar ── */
    .rf-crm-shell {
        display: flex; align-items: stretch; position: relative;
        height: calc(100dvh - 6.5rem);   /* topbar + main padding (in-page header removed) */
        min-height: 30rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface);
        box-shadow: var(--shadow-1);
        overflow: hidden;
    }

    /* ── Channel rail (far left, icon-only, vertical) ── */
    .rf-crm-rail {
        position: relative; z-index: 30;   /* lift hover tooltips above the list pane */
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        width: 68px; flex-shrink: 0; padding: 12px 0;
        background: var(--color-surface-2);
        border-right: 1px solid var(--color-border);
        overflow: visible;
    }
    .rf-crm-rail-btn {
        position: relative;
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; border-radius: var(--radius-md);
        color: #fff; background: var(--rf-chan, var(--color-primary-500)); border: none;
        cursor: pointer; opacity: .9;
        transition: opacity var(--motion-fast) var(--ease-out),
                    transform var(--motion-fast) var(--ease-out),
                    box-shadow var(--motion-fast) var(--ease-out);
    }
    .rf-crm-rail-btn i, .rf-crm-rail-btn svg { width: 21px; height: 21px; }
    .rf-crm-rail-btn:hover { opacity: 1; transform: translateY(-1px); }
    .rf-crm-rail-btn-active {
        opacity: 1;
        box-shadow: 0 0 0 2px var(--color-surface-2), 0 0 0 4px var(--rf-chan, var(--color-primary-500));
    }
    /* Unread pill anchored to the icon's top-right. */
    .rf-crm-rail-badge {
        position: absolute; top: -3px; right: -3px;
        min-width: 17px; height: 17px; padding: 0 4px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 10px; font-weight: 700; line-height: 1; color: #fff;
        background: var(--color-primary-600); border-radius: 999px;
        border: 2px solid var(--color-surface-2);
        font-variant-numeric: tabular-nums;
    }
    .rf-crm-rail-sep { width: 28px; height: 1px; margin: 6px 0; background: var(--color-border); }

    /* CSS tooltip (rail + icon actions) — appears to the element's right. */
    .rf-crm-tip { position: relative; }
    .rf-crm-tip::after {
        content: attr(data-tip);
        position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) scale(.96);
        transform-origin: left center;
        padding: 5px 9px; border-radius: var(--radius-sm);
        background: var(--color-text); color: var(--color-bg);
        font-size: 12px; font-weight: 550; line-height: 1; white-space: nowrap;
        box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; z-index: 60;
        transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
    }
    .rf-crm-tip:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }
    .rf-crm-tip-down::after { left: 50%; top: calc(100% + 8px); transform: translateX(-50%) scale(.96); transform-origin: top center; }
    .rf-crm-tip-down:hover::after { transform: translateX(-50%) scale(1); }

    /* ── Conversation list pane ── */
    .rf-crm-list {
        display: flex; flex-direction: column;
        width: 336px; flex-shrink: 0;
        border-right: 1px solid var(--color-border);
        background: var(--color-surface);
        transition: width var(--motion-slow) var(--ease-out);
    }
    .rf-crm-list-collapsed { width: 0; border-right: none; overflow: hidden; }

    /* Thin strip shown when the list is collapsed — click to re-open. */
    .rf-crm-reopen {
        display: flex; align-items: flex-start; justify-content: center;
        width: 30px; flex-shrink: 0; padding-top: 14px;
        background: var(--color-surface-2); border-right: 1px solid var(--color-border);
        cursor: pointer; color: var(--color-text-muted);
        transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    }
    .rf-crm-reopen:hover { background: var(--color-surface-3); color: var(--color-text); }

    .rf-crm-list-head {
        display: flex; flex-direction: column; gap: 10px;
        padding: 14px 14px 10px; border-bottom: 1px solid var(--color-border);
    }
    .rf-crm-list-title { font-size: 15px; font-weight: 650; color: var(--color-text); }

    /* Search box with a leading icon. */
    .rf-crm-search { position: relative; }
    .rf-crm-search > svg, .rf-crm-search > i {
        position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
        width: 15px; height: 15px; color: var(--color-text-subtle); pointer-events: none;
    }
    .rf-crm-search input { padding-left: 34px; }

    /* Segmented status tabs (Open / Pending / Resolved). */
    .rf-crm-segment {
        display: flex; gap: 2px; padding: 3px;
        background: var(--color-surface-2); border-radius: var(--radius-sm);
    }
    .rf-crm-seg-btn {
        flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
        padding: 6px 4px; border-radius: 6px; border: none; cursor: pointer;
        font-size: 12px; font-weight: 600; color: var(--color-text-muted); background: transparent;
        transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    }
    .rf-crm-seg-btn:hover { color: var(--color-text); }
    .rf-crm-seg-btn-active {
        background: var(--color-surface); color: var(--color-text);
        box-shadow: var(--shadow-1);
    }
    .dark .rf-crm-seg-btn-active { background: var(--color-surface-3); }
    .rf-crm-seg-count {
        font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 999px;
        background: color-mix(in oklab, var(--color-text-muted) 16%, transparent);
        font-variant-numeric: tabular-nums;
    }
    .rf-crm-seg-btn-active .rf-crm-seg-count { background: var(--color-primary-soft); color: var(--color-primary-700); }
    .dark .rf-crm-seg-btn-active .rf-crm-seg-count { color: var(--color-primary-400); }

    .rf-crm-list-scroll { flex: 1; overflow-y: auto; padding: 6px; }

    /* One conversation row. */
    .rf-crm-item {
        position: relative; display: flex; align-items: flex-start; gap: 11px; width: 100%;
        padding: 11px 12px; border-radius: var(--radius-md);
        border: 1px solid transparent; cursor: pointer; text-align: left;
        transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
    }
    .rf-crm-item + .rf-crm-item { margin-top: 2px; }
    .rf-crm-item:hover { background: var(--color-surface-2); }
    .rf-crm-item-active { background: var(--color-primary-soft); border-color: var(--color-primary-300); }
    .rf-crm-item-active:hover { background: var(--color-primary-soft); }
    /* Brand rail on the active row (left edge). */
    .rf-crm-item-active::before {
        content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
        width: 3px; border-radius: 999px; background: var(--color-primary-500);
    }

    /* Avatar + channel glyph badge. */
    .rf-crm-ava { position: relative; flex-shrink: 0; }
    .rf-crm-ava img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
    .rf-crm-ava-ch {
        position: absolute; right: -3px; bottom: -3px;
        width: 18px; height: 18px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--rf-chan, var(--color-primary-500)); border: 1.5px solid var(--color-surface);
        box-shadow: 0 0 0 1px var(--color-border);
        color: #fff;
    }
    .rf-crm-ava-ch svg, .rf-crm-ava-ch i { width: 11px; height: 11px; }

    .rf-crm-item-body { min-width: 0; flex: 1; }
    .rf-crm-item-row1 { display: flex; align-items: center; gap: 8px; }
    .rf-crm-item-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--color-text);
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rf-crm-item-time { flex-shrink: 0; font-size: 11px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
    .rf-crm-item-row2 { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
    .rf-crm-item-preview { flex: 1; min-width: 0; font-size: 12.5px; color: var(--color-text-muted);
                           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rf-crm-item-unread {
        flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 10px; font-weight: 700; color: #fff; background: var(--color-primary-600);
        border-radius: 999px; font-variant-numeric: tabular-nums;
    }
    .rf-crm-item-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
    .rf-crm-item-tag {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 10.5px; font-weight: 550; color: var(--color-text-subtle);
    }
    .rf-crm-item-tag svg, .rf-crm-item-tag i { width: 12px; height: 12px; }
    .rf-crm-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .rf-crm-dot-open { background: var(--color-success); }
    .rf-crm-dot-pending { background: var(--color-warning); }
    .rf-crm-dot-resolved { background: var(--color-text-subtle); }
    .rf-crm-label-chip {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600;
        border: 1px solid transparent;
    }
    .rf-crm-label-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

    .rf-crm-list-empty {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 10px; padding: 48px 20px; text-align: center; color: var(--color-text-subtle);
    }
    .rf-crm-list-foot { padding: 8px 12px; border-top: 1px solid var(--color-border); }
    .rf-crm-list-sentinel { display: flex; justify-content: center; padding: 12px 0; }
    .rf-crm-list-spinner { width: 20px; height: 20px; color: var(--color-primary); animation: rf-spin 0.9s linear infinite; }
    @keyframes rf-spin { to { transform: rotate(360deg); } }

    /* ── Thread pane ── */
    .rf-crm-thread { display: flex; flex-direction: column; flex: 1; min-width: 0; background: var(--color-bg); }

    .rf-crm-thead {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 16px; background: var(--color-surface);
        border-bottom: 1px solid var(--color-border); flex-shrink: 0;
    }
    .rf-crm-thead-name { font-size: 14.5px; font-weight: 650; color: var(--color-text); line-height: 1.2; }
    .rf-crm-thead-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 1px;
                        display: inline-flex; align-items: center; gap: 5px; }
    .rf-crm-thead-actions { display: flex; align-items: center; gap: 4px; }

    /* Messages scroll region. */
    .rf-crm-msgs { flex: 1; overflow-y: auto; padding: 20px 20px 8px; display: flex; flex-direction: column; gap: 3px; }
    .rf-crm-daysep { display: flex; align-items: center; justify-content: center; margin: 14px 0 10px; }
    .rf-crm-daysep span {
        padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 600;
        color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border);
    }

    .rf-crm-msg { display: flex; max-width: 74%; }
    .rf-crm-msg-in  { align-self: flex-start; }
    .rf-crm-msg-out { align-self: flex-end; }
    .rf-crm-msg-grouped { margin-top: 2px; }
    .rf-crm-msg-fresh  { margin-top: 12px; }

    .rf-crm-bubble {
        padding: 8px 12px 6px; border-radius: 16px; position: relative;
        font-size: 13.5px; line-height: 1.5; box-shadow: var(--shadow-1);
    }
    .rf-crm-bubble-in {
        background: var(--color-surface); color: var(--color-text);
        border: 1px solid var(--color-border); border-bottom-left-radius: 5px;
    }
    .rf-crm-bubble-out {
        background: var(--color-primary-600); color: var(--color-on-primary);
        border-bottom-right-radius: 5px;
    }
    .rf-crm-bubble-text { white-space: pre-wrap; word-break: break-word; }
    .rf-crm-bubble-foot { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 3px; }
    .rf-crm-bubble-time { font-size: 10.5px; opacity: .75; font-variant-numeric: tabular-nums; }
    .rf-crm-bubble-in .rf-crm-bubble-time { color: var(--color-text-subtle); opacity: 1; }
    .rf-crm-tick { display: inline-flex; }
    .rf-crm-tick svg, .rf-crm-tick i { width: 14px; height: 14px; }
    .rf-crm-tick-read { color: #7CC0FF; }

    /* Internal note — amber, centred, visually apart from customer traffic. */
    .rf-crm-note {
        align-self: center; max-width: 82%; margin: 8px 0;
        padding: 9px 13px; border-radius: var(--radius-md);
        background: var(--state-warning-bg); color: var(--color-text);
        border: 1px solid var(--state-warning-bd); border-left: 3px solid var(--color-warning);
        font-size: 12.5px; line-height: 1.5;
    }
    .rf-crm-note-head { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--state-warning-fg); }
    .rf-crm-note-head svg, .rf-crm-note-head i { width: 12px; height: 12px; }

    /* Empty thread state. */
    .rf-crm-empty {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 14px; text-align: center; padding: 40px;
    }
    .rf-crm-empty-badge {
        width: 68px; height: 68px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-primary-500);
        box-shadow: var(--shadow-1);
    }
    .rf-crm-empty-badge svg, .rf-crm-empty-badge i { width: 30px; height: 30px; }
    .rf-crm-empty-title { font-size: 15px; font-weight: 650; color: var(--color-text); }
    .rf-crm-empty-sub { font-size: 13px; color: var(--color-text-muted); max-width: 22rem; }

    /* ── Composer ── */
    .rf-crm-composer { flex-shrink: 0; padding: 12px 16px 14px; background: var(--color-surface); border-top: 1px solid var(--color-border); }
    .rf-crm-compose-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-surface-2); border-radius: var(--radius-sm); margin-bottom: 8px; }
    .rf-crm-compose-tab {
        display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px;
        border: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--color-text-muted); background: transparent;
        transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    }
    .rf-crm-compose-tab svg, .rf-crm-compose-tab i { width: 14px; height: 14px; }
    .rf-crm-compose-tab-reply.rf-crm-compose-tab-active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-1); }
    .rf-crm-compose-tab-note.rf-crm-compose-tab-active { background: var(--state-warning-bg); color: var(--state-warning-fg); }
    .dark .rf-crm-compose-tab-reply.rf-crm-compose-tab-active { background: var(--color-surface-3); }

    .rf-crm-compose-box {
        border: 1px solid var(--color-border); border-radius: var(--radius-md);
        background: var(--color-surface);
        /* `visible` (not hidden): the emoji / quick-reply popups open UPWARD out of
           the box (bottom:100%), so clipping to the box cut them off behind the
           input. The children are transparent-backgrounded, so nothing else needs
           clipping to the rounded corners. */
        overflow: visible;
        transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
    }
    .rf-crm-compose-box:focus-within { border-color: var(--color-primary-500); box-shadow: 0 0 0 3px var(--color-primary-soft); }
    .rf-crm-compose-box-note { background: var(--state-warning-bg); border-color: var(--state-warning-bd); }
    .rf-crm-compose-box textarea {
        width: 100%; border: none; background: transparent; resize: none; color: var(--color-text);
        padding: 11px 13px; font-size: 13.5px; line-height: 1.5; outline: none; font-family: inherit;
    }
    .rf-crm-compose-box textarea::placeholder { color: var(--color-text-subtle); }
    .rf-crm-compose-bar { position: relative; display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--color-border); }
    .rf-crm-compose-box-note .rf-crm-compose-bar { border-top-color: var(--state-warning-bd); }
    .rf-crm-compose-tool {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; border-radius: var(--radius-sm);
        color: var(--color-text-muted); background: transparent; border: none; cursor: pointer;
        transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    }
    .rf-crm-compose-tool:hover { background: var(--color-surface-2); color: var(--color-text); }
    .rf-crm-compose-tool svg, .rf-crm-compose-tool i { width: 17px; height: 17px; }
    .rf-crm-compose-hint { font-size: 11px; color: var(--color-text-subtle); }
    .rf-crm-kbd {
        font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border-radius: 5px;
        background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-muted);
    }

    /* Emoji + quick-reply popovers. */
    /* Quick-reply pop: positioned relative to the button wrapper. */
    .rf-crm-pop {
        position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 50;
        background: var(--color-surface); border: 1px solid var(--color-border);
        border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: 8px;
    }
    /* Emoji pop: positioned relative to the whole compose BAR — never clips the viewport. */
    .rf-crm-emoji-pop {
        position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 50;
        width: 316px; max-width: calc(100% - 4px);
        background: var(--color-surface); border: 1px solid var(--color-border);
        border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: 6px;
    }
    .rf-crm-emoji-grid {
        display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px;
        max-height: 224px; overflow-y: auto; overflow-x: hidden;
    }
    .rf-crm-emoji-grid button { font-size: 20px; line-height: 1; padding: 4px; border-radius: 6px; background: transparent; border: none; cursor: pointer; aspect-ratio: 1; }
    .rf-crm-emoji-grid button:hover { background: var(--color-surface-2); }
    .rf-crm-qr { width: 300px; max-height: 280px; overflow-y: auto; }
    .rf-crm-qr-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm); background: transparent; border: none; cursor: pointer; }
    .rf-crm-qr-item:hover { background: var(--color-surface-2); }
    .rf-crm-qr-name { font-size: 12.5px; font-weight: 600; color: var(--color-text); display: flex; align-items: center; gap: 6px; }
    .rf-crm-qr-shortcut { font-family: var(--font-mono); font-size: 10px; color: var(--color-primary-600); }
    .dark .rf-crm-qr-shortcut { color: var(--color-primary-400); }
    .rf-crm-qr-body { font-size: 11.5px; color: var(--color-text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ── WhatsApp 24h window closed — template picker ── */
    .rf-crm-wa-window { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
    .rf-crm-wa-window-banner {
        display: flex; align-items: center; gap: 8px; padding: 8px 12px;
        background: var(--state-warning-bg); color: var(--state-warning-text, var(--state-warning-fg));
        border: 1px solid var(--state-warning-bd); border-radius: var(--radius-sm);
        font-size: 12px; font-weight: 500;
    }

    .rf-crm-resolved-bar {
        display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md);
        background: var(--state-success-bg); border: 1px solid var(--state-success-bd); color: var(--state-success-fg);
        font-size: 13px;
    }

    /* ── Contact / context pane ── */
    .rf-crm-ctx {
        display: flex; flex-direction: column;
        width: 304px; flex-shrink: 0;
        border-left: 1px solid var(--color-border); background: var(--color-surface);
        transition: width var(--motion-slow) var(--ease-out);
    }
    .rf-crm-ctx-collapsed { width: 0; border-left: none; overflow: hidden; }
    .rf-crm-ctx-scroll { flex: 1; overflow-y: auto; padding: 18px 16px; }
    .rf-crm-ctx-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); }
    .rf-crm-ctx-card img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
    .rf-crm-ctx-name { font-size: 15px; font-weight: 650; color: var(--color-text); }
    .rf-crm-ctx-sub { font-size: 12px; color: var(--color-text-muted); }
    .rf-crm-ctx-sec { padding: 16px 0; border-bottom: 1px solid var(--color-border); }
    .rf-crm-ctx-sec:last-child { border-bottom: none; }
    .rf-crm-ctx-h {
        font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
        color: var(--color-text-subtle); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;
    }
    .rf-crm-ctx-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; color: var(--color-text); }
    .rf-crm-ctx-row svg, .rf-crm-ctx-row > i { width: 15px; height: 15px; color: var(--color-text-subtle); flex-shrink: 0; }
    .rf-crm-ctx-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .rf-crm-ctx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .rf-crm-ctx-note { padding: 9px 11px; border-radius: var(--radius-sm); background: var(--state-warning-bg); border: 1px solid var(--state-warning-bd); font-size: 12px; color: var(--color-text); line-height: 1.5; }
    .rf-crm-ctx-note + .rf-crm-ctx-note { margin-top: 6px; }

    /* ── Header assign menu ── */
    .rf-crm-assign-menu {
        position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; width: 224px;
        max-height: 300px; overflow-y: auto;
        background: var(--color-surface); border: 1px solid var(--color-border);
        border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: 4px;
    }

    /* ── Responsive: below lg, one pane at a time ── */
    @media (max-width: 1023px) {
        .rf-crm-shell { height: calc(100dvh - 5.5rem); }
        .rf-crm-rail { width: 56px; }
        /* Panes slide over the thread but leave the 56px rail visible. */
        .rf-crm-list { position: absolute; top: 0; right: 0; bottom: 0; left: 56px; width: auto; z-index: 5; }
        .rf-crm-ctx  { position: absolute; top: 0; right: 0; bottom: 0; left: 56px; width: auto; z-index: 6; border-left: none; }
        .rf-crm-mobile-hide { display: none !important; }
        .rf-crm-reopen { display: none; }
    }
    @media (min-width: 1024px) {
        .rf-crm-mobile-only { display: none !important; }
    }
}

/* ── Scrollbar (global fallback) ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 4px; }

/* Respect user motion preference. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ================================================================
   AUTH PAGES — split-screen login / register / reset (guest layout)
   Brand pane always renders on the panel colour (--brand); the form
   card + social buttons stay theme-aware via the --color-* tokens.
   ================================================================ */
@layer components {

    /* ── Brand pane (left) ── */
    .rf-auth-brand {
        background:
            linear-gradient(160deg,
                color-mix(in oklab, var(--brand) 78%, #0B0D12),
                color-mix(in oklab, var(--brand) 94%, black));
    }
    /* Soft radial "blobs" — brand-tinted highlights, like the landing hero. */
    .rf-auth-blobs {
        position: absolute; inset: 0; pointer-events: none;
        background:
            radial-gradient(560px 420px at 12% 8%,  color-mix(in oklab, var(--brand) 40%, white 30%), transparent 60%),
            radial-gradient(520px 400px at 88% 92%, color-mix(in oklab, var(--brand) 30%, black),      transparent 62%),
            radial-gradient(420px 320px at 78% 12%, rgba(255,255,255,.10),                              transparent 60%);
        mix-blend-mode: screen; opacity: .9;
    }
    /* A faint grid over the pane for depth (matches the landing's dark hero). */
    .rf-auth-brand::after {
        content: ''; position: absolute; inset: 0; pointer-events: none;
        background-image:
            linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
        background-size: 44px 44px;
        -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 0%, transparent 72%);
        mask-image: radial-gradient(circle at 30% 40%, #000 0%, transparent 72%);
    }

    /* ── Form card (right) ── */
    .rf-auth-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-3);
        padding: 30px 28px;
    }
    @media (min-width: 640px) { .rf-auth-card { padding: 36px 34px; } }

    .rf-auth-title { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--color-text); }
    .rf-auth-sub { margin-top: 6px; font-size: 14px; color: var(--color-text-muted); }
    .rf-auth-foot { margin-top: 24px; text-align: center; font-size: 14px; color: var(--color-text-muted); }
    .rf-auth-link { color: var(--color-primary-600); font-weight: 600; }
    .rf-auth-link:hover { text-decoration: underline; }
    .dark .rf-auth-link { color: var(--color-primary-400); }

    /* ── Social sign-in block ── */
    .rf-social { margin-bottom: 22px; }
    .rf-social-google { display: flex; justify-content: center; min-height: 40px; margin-bottom: 10px; }
    .rf-social-google > div { width: 100%; }

    .rf-social-btn {
        display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
        padding: 11px 16px; border-radius: var(--radius-pill);
        font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
        border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
        transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
    }
    .rf-social-btn:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); }

    /* Official Facebook blue, legible in both themes. */
    .rf-social-facebook { background: #1877F2; border-color: #1877F2; color: #fff; }
    .rf-social-facebook:hover { background: #1568d8; border-color: #1568d8; color: #fff; }

    /* "or continue with email" divider */
    .rf-social-divider {
        display: flex; align-items: center; gap: 12px; margin-top: 18px;
        font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--color-text-subtle);
    }
    .rf-social-divider::before, .rf-social-divider::after {
        content: ''; flex: 1; height: 1px; background: var(--color-border);
    }
}

/* ============================================================================
   Automation canvas (CRM-4) — Drawflow visual builder
   ----------------------------------------------------------------------------
   Placed OUTSIDE @layer components on purpose: it overrides Drawflow's own
   stylesheet (imported from JS), which sits in a later cascade layer, so the
   node/port/connection skin below must win with plain specificity. All colours
   come from the rf-* tokens, so the builder follows light + dark automatically.
   ========================================================================== */

.rf-flow-editor {
    display: grid;
    grid-template-columns: 210px 1fr 300px;
    gap: 0;
    height: calc(100vh - 168px);
    min-height: 460px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    background: var(--color-surface);
}

/* ── Palette (left) ── */
.rf-flow-palette {
    border-right: 1px solid var(--color-border);
    background: var(--color-surface-2);
    overflow-y: auto;
    padding: 12px;
}
.rf-flow-palette h4 {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--color-text-subtle); margin: 10px 4px 6px;
}
.rf-flow-chip {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; margin-bottom: 5px;
    border: 1px solid var(--color-border); border-radius: 10px;
    background: var(--color-surface); color: var(--color-text);
    font-size: 13px; font-weight: 550; cursor: grab; text-align: left;
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.rf-flow-chip:hover { border-color: var(--color-border-strong); background: var(--color-surface-3); }
.rf-flow-chip:active { cursor: grabbing; }
.rf-flow-chip i, .rf-flow-chip svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
/* Node unavailable for the selected channels (capability not supported): grayed,
   non-interactive, tooltip explains why. Dimmed in both themes via opacity. */
.rf-flow-chip--disabled {
    opacity: .42; cursor: not-allowed;
    filter: grayscale(1);
}
.rf-flow-chip--disabled:hover { border-color: var(--color-border); background: var(--color-surface); }
.rf-flow-chip--disabled i, .rf-flow-chip--disabled svg { color: var(--color-text-subtle); }

/* ── Canvas (centre) ── */
.rf-flow-stage { position: relative; overflow: hidden; background: var(--color-bg); }
/* The dot grid lives on the CONTAINER (not the precanvas) so it always blankets
   the whole visible surface — there is no dot-less dead zone once you pan past
   the origin. automation-canvas.js slides background-position/size with the canvas
   transform so it still reads as an infinite plane. The container IS the pannable
   surface (Drawflow's parent-drawflow), so dots == draggable, everywhere. */
.rf-flow-canvas {
    width: 100%; height: 100%;
    background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: 0 0;
}
.rf-flow-canvas .drawflow { width: 100%; height: 100%; }

.rf-flow-toolbar {
    position: absolute; top: 12px; right: 12px; z-index: 5;
    display: flex; gap: 6px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 10px; padding: 4px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}
.rf-flow-toolbar button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 7px; color: var(--color-text-muted);
    background: transparent; border: 0; cursor: pointer;
}
.rf-flow-toolbar button:hover { background: var(--color-surface-2); color: var(--color-text); }
.rf-flow-toolbar button[aria-pressed="true"] { background: var(--color-surface-3); color: var(--brand); }
.rf-flow-toolbar i, .rf-flow-toolbar svg { width: 16px; height: 16px; }
/* Zoom-percentage / reset control: an auto-width text button between − and +,
   tabular figures so the label does not jitter as the value changes. */
.rf-flow-zoom-pct {
    width: auto !important; min-width: 46px; padding: 0 8px;
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.rf-flow-toolbar-sep { width: 1px; align-self: stretch; margin: 3px 1px; background: var(--color-border); }

/* ── Fullscreen overlay ──
   The toggle sets `.rf-flow-fs` on <body> (outside Livewire's component DOM, so a
   morph of the editor subtree can never strip it — the bug when the class lived on
   the editor element). The editor is promoted from there to a fixed, full-viewport
   overlay above the app chrome; the page behind is scroll-locked. Tokens keep
   light+dark. */
body.rf-flow-fs { overflow: hidden; }
body.rf-flow-fs .rf-flow-editor {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh; min-height: 100vh;
    border-radius: 0; border: 0;
    z-index: 2147483000;   /* above sidebar/topbar/toasts */
    background: var(--color-surface);
}

/* ── Node cards ──
   The extra `.drawflow` in each selector raises specificity to (0,3,0) so these
   ALWAYS beat Drawflow's own `.drawflow .drawflow-node` (0,2,0) skin regardless
   of which stylesheet the bundler loads last — that is why the default cyan
   (#0ff) node, red selection and yellow ports were leaking through before. Each
   node exposes its family colour as `--rf-node-accent` (set inline in JS), so the
   chip + left rail tint from one variable instead of a rule per type. */
.rf-flow-canvas .drawflow .drawflow-node {
    --rf-node-accent: var(--brand);
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
    padding: 0;
    width: 226px;
    min-height: 0;
    color: var(--color-text);
}
.rf-flow-canvas .drawflow .drawflow-node:hover { border-color: var(--color-border-strong); }
.rf-flow-canvas .drawflow .drawflow-node.selected {
    background: var(--color-surface);
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary-500) 40%, transparent), 0 6px 16px rgba(0,0,0,.10);
}
.rf-flow-canvas .drawflow .drawflow_content_node { width: 100%; }

.rf-flow-card {
    padding: 11px 13px;
    border-left: 3px solid var(--rf-node-accent);
    border-radius: 12px 0 0 12px;
}
.rf-flow-card__hd { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rf-flow-card__ico {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px;
    background: color-mix(in oklab, var(--rf-node-accent) 16%, var(--color-surface));
    color: var(--rf-node-accent);
}
/* Lucide REPLACES <i data-lucide> with an <svg>, so size the svg (targeting `i`
   alone matched nothing once rendered — the cause of the icon/text overlap). */
.rf-flow-card__ico svg,
.rf-flow-card__ico i { width: 15px; height: 15px; }
.rf-flow-card__ttl {
    flex: 1 1 auto; min-width: 0;
    font-weight: 650; font-size: 13px; color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rf-flow-card__sum {
    margin-top: 6px; font-size: 11.5px; color: var(--color-text-muted); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.rf-flow-card__sum:empty { display: none; }

/* ── Multi-output port list (CRM-4 fix) ──
   Branch and the fixed 2-port types (Ask a question / Condition / Create
   client account) render one row per output INSIDE the card — a coloured dot
   + its case/outcome label — so "which wire is which" reads at a glance
   instead of forcing a guess from stacked anonymous dots. Row height stays
   fixed (single line, ellipsis) so alignNodePorts() (automation-canvas.js)
   can measure each row once and pin its port to the same Y. */
.rf-flow-card__ports { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.rf-flow-port-row { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 18px; }
.rf-flow-port-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.rf-flow-port-label {
    flex: 1 1 auto; min-width: 0;
    font-size: 11.5px; color: var(--color-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Ports ──
   Restyled to token colours (was yellow input / black output) and nudged so a
   14px dot hugs the node's vertical edge; Drawflow anchors connections to the
   port centre, so this stays geometrically consistent. */
.rf-flow-canvas .drawflow .drawflow-node .input,
.rf-flow-canvas .drawflow .drawflow-node .output {
    width: 14px; height: 14px;
    background: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    box-shadow: 0 0 0 2px var(--color-surface);
}
.rf-flow-canvas .drawflow .drawflow-node .input { left: -8px; }
.rf-flow-canvas .drawflow .drawflow-node .output { right: -8px; }
.rf-flow-canvas .drawflow .drawflow-node .output:hover,
.rf-flow-canvas .drawflow .drawflow-node .input:hover { border-color: var(--color-primary-500); }

/* Multi-output nodes ONLY (.rf-flow-node--multiport, set in JS): take `.outputs`
   out of Drawflow's default block flow — which stacks every port in a tight
   column BELOW the whole card, the exact "4 anonymous stacked ports" bug this
   fixes — and stretch it over the full node height so each `.output_N` can be
   absolutely positioned (inline `top`, written by alignNodePorts()) at its own
   `.rf-flow-port-row`'s vertical centre. Single-output nodes are untouched and
   keep Drawflow's default centred port. */
.rf-flow-canvas .drawflow .drawflow-node.rf-flow-node--multiport .outputs {
    position: absolute; top: 0; right: 0; bottom: 0; width: 0; height: auto;
}
.rf-flow-canvas .drawflow .drawflow-node.rf-flow-node--multiport .outputs .output {
    position: absolute !important;
    margin: 0 !important;
}

/* ── Connections ── legible in both themes (was steel-blue #4682b4, 5px).
   `--rf-port-color` is set inline (colorNodeConnections(), automation-canvas.js)
   only on wires leaving a multi-output port, tinting them to match their row's
   dot; the fallback keeps every other wire neutral. Hover/selected below still
   win — they set the colour literally, not through the variable. */
.rf-flow-canvas .drawflow .connection .main-path { fill: none; stroke: var(--rf-port-color, var(--color-border-strong)); stroke-width: 2.5px; }
.rf-flow-canvas .drawflow .connection .main-path:hover { stroke: var(--color-primary-500); }
.rf-flow-canvas .drawflow .connection .main-path.selected { stroke: var(--color-primary-500); }
.rf-flow-canvas .drawflow .connection .point { stroke: var(--color-border-strong); fill: var(--color-surface); }

/* ── Properties panel (right) ── */
.rf-flow-props {
    border-left: 1px solid var(--color-border);
    background: var(--color-surface-2);
    overflow-y: auto; padding: 14px;
}
.rf-flow-props h3 { font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.rf-flow-props .rf-label { margin-top: 10px; }
.rf-flow-empty { color: var(--color-text-subtle); font-size: 12.5px; text-align: center; padding: 40px 10px; }
.rf-flow-listrow { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 6px; }
.rf-flow-listrow .rf-input, .rf-flow-listrow .rf-textarea { flex: 1; }

/* Responsive: stack the three panes on narrow viewports. */
@media (max-width: 900px) {
    .rf-flow-editor { grid-template-columns: 1fr; height: auto; }
    .rf-flow-palette { display: flex; flex-wrap: wrap; gap: 6px; }
    .rf-flow-palette h4 { width: 100%; }
    .rf-flow-chip { width: auto; }
    .rf-flow-stage { height: 60vh; }
    .rf-flow-props { border-left: 0; border-top: 1px solid var(--color-border); }
}

/* ══════════════════════════════════════════════════════════
   rfSS — Searchable select component
   ══════════════════════════════════════════════════════════ */
.rf-ss-wrap {
    position: relative;
    width: 100%;
}

/* Trigger button — mirrors .rf-select appearance */
.rf-ss-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer; text-align: left;
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
    white-space: nowrap; overflow: hidden;
}
.rf-ss-trigger:focus,
.rf-ss-trigger.rf-ss-open {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.dark .rf-ss-trigger { background: var(--color-surface-2); }

.rf-ss-label {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--color-text);
}
.rf-ss-label-placeholder { color: var(--color-text-subtle); }

.rf-ss-chevron {
    flex-shrink: 0;
    width: 14px; height: 14px;
    color: var(--color-text-subtle);
    transition: transform var(--motion-fast) var(--ease-out);
}
.rf-ss-open .rf-ss-chevron { transform: rotate(180deg); }

/* Dropdown panel.
   position:fixed, not absolute: every card in the product is rounded and so
   carries overflow:hidden, which slices an absolutely positioned panel at the
   card edge (z-index cannot beat a clip). A fixed box is clipped by the
   viewport instead. top / left / min-width / max-height are then written by
   x-rf-float in resources/js/app.js — they cannot come from here, because a
   fixed box resolves percentages against the viewport rather than the field.
   Flex column so the option list, not the panel, absorbs that max-height. */
.rf-ss-dropdown {
    position: fixed; z-index: 9999;
    display: flex; flex-direction: column;
    width: max-content; max-width: min(500px, calc(100vw - 32px));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    overflow: hidden;
}
.dark .rf-ss-dropdown { background: var(--color-surface-2); }

/* Search input inside dropdown */
.rf-ss-search-wrap {
    position: relative;
    flex: 0 0 auto;
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
}
.rf-ss-search-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 13px; height: 13px;
    color: var(--color-text-subtle); pointer-events: none;
}
.rf-ss-search {
    width: 100%;
    background: var(--color-surface-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 6px 8px 6px 28px;
    font-size: 12.5px;
    color: var(--color-text);
    outline: none;
}
.rf-ss-search:focus { border-color: var(--color-primary-400); }
.dark .rf-ss-search { background: var(--color-surface-3); }

/* Options list */
.rf-ss-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    list-style: none;
    margin: 0;
}
.rf-ss-opt {
    padding: 7px 10px;
    font-size: 12.5px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: background-color var(--motion-fast) var(--ease-out);
}
.rf-ss-opt:hover,
.rf-ss-opt:focus { background: var(--color-surface-2); }
.rf-ss-opt-active {
    background: var(--color-primary-soft);
    color: var(--color-primary-600);
    font-weight: 600;
}
.dark .rf-ss-opt:hover { background: var(--color-surface-3); }

.rf-ss-empty,
.rf-ss-more {
    padding: 8px 10px;
    font-size: 11.5px;
    color: var(--color-text-subtle);
    text-align: center;
    pointer-events: none;
}
.rf-ss-more { flex: 0 0 auto; border-top: 1px solid var(--color-border); padding-top: 6px; }

/* Server-driven twin (livewire/components/search-select) — same floating panel,
   its rows just come from the server instead of from Alpine. It reuses .rf-menu
   for the chrome and adds only what x-rf-float needs. */
.rf-ss-menu {
    position: fixed; z-index: 9999;
    display: flex; flex-direction: column;
    max-width: min(500px, calc(100vw - 32px));
    overflow: hidden;
}
.rf-ss-menu-search { flex: 0 0 auto; }
.rf-ss-menu-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ================================================================
   LANDING STUDIO  (components.layouts.studio + livewire/admin/landing/studio)

   A full-bleed customizer for the public landing: its own toolbar, a Sections
   panel and a live-preview iframe. Ported from the Zentra/CardFlow Studio and
   retinted to the RedFamosa design tokens (--color-*, --radius-*, --brand).
   Structural classes only — the panel's form controls reuse rf-btn / rf-input /
   rf-select / rf-textarea / rf-icon-btn, so this is a different distribution of
   space, not a second design system.

   Unlayered on purpose (after Tailwind's @layer blocks) so the Studio shell
   always wins the cascade over utility classes.
   ================================================================ */

/* Nothing scrolls at shell level: the panel and the canvas scroll on their own,
   so the toolbar and the frame never slide out of reach. 100dvh, not 100vh,
   because mobile browsers report vh as if the address bar were already gone. */
.rf-studio-body { height: 100dvh; overflow: hidden; background: var(--color-bg); }
.rf-studio-app  { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

/* ── Toolbar: the Studio's own, because everything on it acts on the landing ── */
.rf-studio-top {
    flex: none; display: flex; align-items: center; gap: 9px; height: 56px; padding: 0 14px;
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.rf-studio-top h1 { font-size: 14.5px; font-weight: 650; white-space: nowrap; color: var(--color-text); }
.rf-studio-top .rf-btn { flex: none; }
.rf-st-spacer { flex: 1; }
.rf-st-draft  { flex: none; }

.rf-st-seg {
    display: flex; flex: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    overflow: hidden; background: var(--color-surface);
}
.rf-st-seg button {
    display: inline-grid; place-items: center; min-width: 36px; height: 30px; padding: 0 11px;
    border: none; background: none; color: var(--color-text-muted); font-size: 12.5px; font-weight: 650; cursor: pointer;
}
.rf-st-seg button:hover { background: var(--color-surface-2); color: var(--color-text); }
.rf-st-seg button.on { background: var(--color-primary-soft); color: var(--color-primary-700); }
.dark .rf-st-seg button.on { color: var(--color-primary-400); }
.rf-st-seg button i { width: 15px; height: 15px; }
.rf-st-narrow { display: none; }

/* ── Panel │ canvas ── */
.rf-studio-main { flex: 1; min-height: 0; display: flex; }

.rf-studio-panel {
    flex: none; width: 340px; display: flex; flex-direction: column; overflow: hidden;
    background: var(--color-surface); border-right: 1px solid var(--color-border); transition: width .2s ease;
}
.rf-studio-app.panel-off .rf-studio-panel { width: 0; border-right-color: transparent; }
/* The inner surfaces keep their width while the panel animates shut, so the
   fields slide out of view instead of reflowing into a one-character column. */
.rf-studio-panel-head {
    flex: none; display: flex; align-items: center; gap: 10px; min-width: 340px;
    padding: 12px 14px; border-bottom: 1px solid var(--color-border);
}
.rf-studio-panel-head h2 { font-size: 14.5px; font-weight: 650; color: var(--color-text); }
.rf-studio-panel-body { flex: 1; min-height: 0; min-width: 340px; overflow-y: auto; padding: 14px; }

.rf-studio-tip {
    display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 9px 11px;
    border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm);
    color: var(--color-text-muted); font-size: 12.5px;
}
.rf-studio-tip i { flex: none; margin-top: 1px; color: var(--color-text-subtle); width: 15px; height: 15px; }
.rf-studio-desc { font-size: 12.5px; margin: 0 0 14px; color: var(--color-text-muted); }
.rf-studio-note { font-size: 12px; margin-top: 14px; color: var(--color-text-subtle); }

.rf-studio-canvas { flex: 1; min-width: 0; display: flex; padding: 14px; overflow: hidden; background: var(--color-surface-2); }
.rf-studio-fit { flex: 1; min-width: 0; display: flex; justify-content: center; }
/* The stage is only visible for the instant before the landing paints, so it
   follows the tokens — a hard #fff here flashed white on a dark theme. */
.rf-studio-stage { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
/* Scaled, never squeezed — the frame keeps the device's CSS pixels and is drawn
   smaller (see frameScale() in the Studio's Alpine component). */
.rf-studio-stage iframe { display: block; border: 0; transform-origin: top left; }

/* ── Section rows: pick one, hide it, or move it ── */
.rf-sn {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px;
    border: none; border-radius: var(--radius-sm); background: none; text-align: left; cursor: pointer;
    color: var(--color-text-muted); font-weight: 500; font-size: 13.5px;
}
.rf-sn:hover { color: var(--color-text); }
.rf-sn.active { color: var(--color-primary-700); font-weight: 650; }
.dark .rf-sn.active { color: var(--color-primary-400); }
.rf-sn i { width: 16px; height: 16px; flex: none; }
.rf-sn .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rf-sn-row { display: flex; align-items: center; gap: 2px; border-radius: var(--radius-sm); padding-right: 4px; }
.rf-sn-row:hover { background: var(--color-surface-2); }
.rf-sn-row.active { background: var(--color-primary-soft); }
.rf-sn-row .rf-sn { flex: 1; min-width: 0; flex-wrap: wrap; }
.rf-sn-row .rf-sn:hover { background: none; }
.rf-sn-row.off .rf-sn { opacity: .55; }
.rf-sn-ctl { display: flex; gap: 0; flex: none; }
.rf-sn-ctl .rf-icon-btn { width: 26px; height: 26px; border-radius: 6px; }
.rf-sn-ctl .rf-icon-btn i { width: 15px; height: 15px; }
.rf-sn-ctl .rf-icon-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ── Repeaters: every list row is a card with reorder/remove affordances ── */
.rf-rep { margin-top: 20px; }
.rf-rep-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rf-rep-item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); padding: 12px; margin-bottom: 10px; }
.rf-rep-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rf-rep-head b { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.rf-rep-head .rf-sp { margin-left: auto; display: flex; gap: 1px; flex: none; }
.rf-rep-head .rf-icon-btn { width: 26px; height: 26px; border-radius: 6px; }
.rf-rep-head .rf-icon-btn i { width: 15px; height: 15px; }
.rf-rep-head .rf-icon-btn.del { color: var(--color-danger); }
.rf-rep-head .rf-icon-btn.del:hover { background: color-mix(in oklab, var(--color-danger) 14%, transparent); }
.rf-rep-head .rf-icon-btn:disabled { opacity: .3; cursor: not-allowed; }
.rf-rep-item .rf-field { margin-bottom: 10px; }
.rf-rep-item .rf-field:last-child { margin-bottom: 0; }
.rf-rep-item .rf-input, .rf-rep-item .rf-select, .rf-rep-item .rf-textarea { background: var(--color-surface); }
.rf-rep-add { width: 100%; justify-content: center; }

/* Nested rows (pricing card features). */
.rf-rep-sub { border-left: 2px solid var(--color-border-strong); padding-left: 11px; margin-top: 12px; }
.rf-rep-sub-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.rf-rep-sub-row .rf-input { height: 34px; font-size: 13px; }
.rf-rep-sub-row .rf-icon-btn { width: 26px; height: 26px; border-radius: 6px; flex: none; }
.rf-rep-sub-row .rf-icon-btn i { width: 15px; height: 15px; }
.rf-rep-sub-row .rf-icon-btn.del { color: var(--color-danger); }
.rf-rep-sub-row .rf-icon-btn.del:hover { background: color-mix(in oklab, var(--color-danger) 14%, transparent); }

/* Studio field wrapper + label (mirrors rf-label but tighter for the panel). */
.rf-field { margin-bottom: 12px; }
.rf-field > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 5px; }
.rf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .rf-grid2 { grid-template-columns: 1fr; } }

/* Native swatch picker — keep the rf-input box, drop the padding it cannot use. */
.rf-input-color { padding: 3px; cursor: pointer; height: 40px; }
.rf-input-color::-webkit-color-swatch-wrapper { padding: 0; }
.rf-input-color::-webkit-color-swatch { border: none; border-radius: 5px; }

/*
 | NARROW SCREENS — one surface at a time, not a stack.
 | Below ~900px a 340px panel leaves the preview around 500px, and stacking the
 | two puts the preview below the fold. The split is dropped: the toolbar gets an
 | Edit / Preview switch and whichever surface is showing takes the full width.
 */
@media (max-width: 900px) {
    .rf-studio-top { height: auto; flex-wrap: wrap; padding: 9px 12px; row-gap: 8px; }
    .rf-studio-top h1, .rf-st-devices, .rf-st-collapse, .rf-st-view { display: none; }
    .rf-st-narrow { display: flex; }

    .rf-studio-main { display: block; }
    .rf-studio-panel, .rf-studio-app.panel-off .rf-studio-panel { width: 100%; height: 100%; border-right: none; }
    .rf-studio-panel-head, .rf-studio-panel-body { min-width: 0; }
    .rf-studio-canvas { width: 100%; height: 100%; padding: 10px; }

    .rf-studio-app.show-preview .rf-studio-panel { display: none; }
    .rf-studio-app:not(.show-preview) .rf-studio-canvas { display: none; }
}

/*
 | RICH TEXT — rendered output of CMS pages (terms, privacy, cookie, custom).
 | Tailwind's preflight strips list/heading spacing, so operator-authored HTML
 | needs these back. Scoped to .rf-richtext; all colours come from tokens so it
 | is correct in light and dark by construction.
 */
.rf-richtext { color: var(--color-text); }
.rf-richtext > *:first-child { margin-top: 0; }
.rf-richtext > *:last-child { margin-bottom: 0; }
.rf-richtext h2 { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 1.6em 0 0.5em; color: var(--color-text); }
.rf-richtext h3 { font-size: 16.5px; font-weight: 600; line-height: 1.35; margin: 1.4em 0 0.45em; color: var(--color-text); }
.rf-richtext h4 { font-size: 14.5px; font-weight: 600; margin: 1.2em 0 0.4em; color: var(--color-text); }
.rf-richtext p { margin: 0 0 0.9em; }
.rf-richtext ul, .rf-richtext ol { margin: 0 0 0.9em; padding-left: 1.5em; }
.rf-richtext ul { list-style: disc; }
.rf-richtext ol { list-style: decimal; }
.rf-richtext li { margin: 0.25em 0; }
.rf-richtext a { color: var(--color-primary-600); text-decoration: underline; text-underline-offset: 2px; }
.rf-richtext a:hover { color: var(--color-primary-500); }
.rf-richtext strong, .rf-richtext b { font-weight: 700; }
.rf-richtext blockquote { margin: 0 0 0.9em; padding: 0.5em 0 0.5em 1em; border-left: 3px solid var(--color-border-strong); color: var(--color-text-muted); }
.rf-richtext code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--color-surface-2); padding: 0.1em 0.35em; border-radius: 4px; }
.rf-richtext pre { margin: 0 0 0.9em; padding: 0.85em 1em; background: var(--color-surface-2); border-radius: 8px; overflow-x: auto; }
.rf-richtext pre code { background: none; padding: 0; }
.rf-richtext hr { border: 0; border-top: 1px solid var(--color-border); margin: 1.4em 0; }

/*
 | CATÁLOGO PÚBLICO — acordeón por categoría (Livewire\Public\Services)
 |
 | La vitrina pasó de una tabla plana de 5.500 filas a una lista de categorías
 | plegables. Todo el color sale de los tokens del panel (--brand y la escala
 | primary-*), así que la tienda de cada reseller se pinta con SU marca sin una
 | sola línea de CSS por panel, y light/dark salen correctos por construcción.
 */
.rf-cat-list { display: flex; flex-direction: column; gap: 10px; }

.rf-cat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s ease;
}
.rf-cat-open { border-color: color-mix(in oklab, var(--color-primary-600) 40%, var(--color-border)); }

/* Cabecera: es el botón que abre la sección, así que ocupa toda la fila. */
.rf-cat-head {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 14px 16px;
    background: none; border: 0; cursor: pointer; text-align: left;
    color: var(--color-text);
    transition: background .15s ease;
}
.rf-cat-head:hover { background: var(--color-surface-2); }
.rf-cat-open .rf-cat-head { background: var(--color-primary-soft); }

.rf-cat-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none;
    border-radius: 10px;
    background: color-mix(in oklab, var(--net-color, var(--color-primary-600)) 16%, transparent);
    color: var(--net-color, var(--color-primary-600));
}
.rf-cat-badge-mono { font-size: 13px; font-weight: 800; letter-spacing: -.02em; }

.rf-cat-title {
    flex: 1; min-width: 0;
    font-size: 15px; font-weight: 600; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rf-cat-count {
    flex: none; font-size: 12px; font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    border-radius: 999px; padding: 3px 10px;
}

.rf-cat-spin { display: inline-flex; color: var(--color-text-subtle); animation: rf-cat-spin 1s linear infinite; }
@keyframes rf-cat-spin { to { transform: rotate(360deg); } }

.rf-cat-chevron { flex: none; color: var(--color-text-subtle); transition: transform .18s ease; }
.rf-cat-open .rf-cat-chevron { transform: rotate(180deg); color: var(--color-primary-600); }

.rf-cat-body { border-top: 1px solid var(--color-border); }
.rf-cat-scroll { overflow-x: auto; }

.rf-cat-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rf-cat-table thead th {
    padding: 9px 14px; text-align: left;
    font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--color-text-subtle);
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.rf-cat-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.rf-cat-table tbody tr:last-child td { border-bottom: 0; }
.rf-cat-table tbody tr:hover td { background: var(--color-surface-2); }

.rf-cat-id { color: var(--color-text-subtle); font-size: 12px; white-space: nowrap; }
.rf-cat-svcname { font-weight: 500; line-height: 1.4; }
.rf-cat-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rf-cat-rate { text-align: right; font-weight: 700; white-space: nowrap; }
.rf-cat-num { text-align: right; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.rf-cat-view {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    border-radius: 8px; padding: 5px 12px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: all .15s ease;
}
.rf-cat-view:hover { border-color: var(--color-primary-600); color: var(--color-primary-600); }

.rf-cat-more { padding: 12px 14px; border-top: 1px solid var(--color-border); text-align: center; }

.rf-cat-skeleton {
    height: 420px; border-radius: 14px;
    background: var(--color-surface-2);
    animation: rf-cat-pulse 1.4s ease-in-out infinite;
}
@keyframes rf-cat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Ficha del servicio. Sin cierre por fondo ni Escape: descartar de un clic lo
   que alguien estaba leyendo es la clase de gesto que se hace sin querer. */
.rf-cat-modal-backdrop {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: color-mix(in oklab, #000 55%, transparent);
    backdrop-filter: blur(3px);
}
.rf-cat-modal {
    width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px; padding: 20px;
}
.rf-cat-modal-head { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.rf-cat-modal-cat { font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--color-primary-600); }
.rf-cat-modal-title { margin-top: 4px; font-size: 16px; font-weight: 650; line-height: 1.35; color: var(--color-text); }

.rf-cat-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.rf-cat-modal-grid > div { background: var(--color-surface-2); border-radius: 10px; padding: 9px 12px; }
.rf-cat-modal-grid span { display: block; font-size: 11px; color: var(--color-text-subtle); }
.rf-cat-modal-grid b { font-size: 14px; font-weight: 650; color: var(--color-text); }

.rf-cat-modal-desc { font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted); white-space: pre-line; }
.rf-cat-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Móvil: la tabla se estrecha en vez de forzar scroll lateral en toda la página. */
@media (max-width: 640px) {
    .rf-cat-head { padding: 12px 12px; gap: 10px; }
    .rf-cat-badge { width: 30px; height: 30px; }
    .rf-cat-title { font-size: 14px; white-space: normal; }
    .rf-cat-count { display: none; }
    .rf-cat-table { font-size: 12.5px; }
    .rf-cat-table thead th, .rf-cat-table tbody td { padding: 9px 10px; }
    .rf-cat-modal-grid { grid-template-columns: 1fr 1fr; }
}