:root {
    /* Light Theme (Soft/Muted) */
    --bg-color: #e2e8f0;
    --card-bg: #f8fafc;
    --dropdown-bg: #ffffff;
    --topbar-bg: rgba(248, 250, 252, 0.85);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --border-color: #cbd5e1;
    --error-bg: rgba(239, 68, 68, 0.1);
    --error-text: #dc2626;
    --input-bg: #ffffff;
    --subtle-bg: rgba(0, 0, 0, 0.04);
    --code-bg: rgba(0, 0, 0, 0.06);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

    @media (prefers-color-scheme: dark) {
    :root {
        /* Dark Theme */
        --bg-color: #0f172a;
        --card-bg: rgba(30, 41, 59, 0.7);
        --dropdown-bg: #1e293b;
        --topbar-bg: rgba(15, 23, 42, 0.8);
        --text-primary: #f8fafc;
        --text-secondary: #94a3b8;
        --border-color: rgba(255, 255, 255, 0.1);
        --error-bg: rgba(239, 68, 68, 0.2);
        --error-text: #fca5a5;
        --input-bg: rgba(15, 23, 42, 0.6);
        --subtle-bg: rgba(255, 255, 255, 0.04);
        --code-bg: rgba(255, 255, 255, 0.06);
        --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }
}

/* Fallback/Explicit classes for a manual theme toggle switch */
html[data-theme='light'] {
    --bg-color: #e2e8f0;
    --card-bg: #f8fafc;
    --dropdown-bg: #ffffff;
    --topbar-bg: rgba(248, 250, 252, 0.85);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --border-color: #cbd5e1;
    --error-bg: rgba(239, 68, 68, 0.1);
    --error-text: #dc2626;
    --input-bg: #ffffff;
    --subtle-bg: rgba(0, 0, 0, 0.04);
    --code-bg: rgba(0, 0, 0, 0.06);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

html[data-theme='dark'] {
    --bg-color: #0f172a;
    --card-bg: rgba(30, 41, 59, 0.7);
    --dropdown-bg: #1e293b;
    --topbar-bg: rgba(15, 23, 42, 0.8);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.1);
    --error-bg: rgba(239, 68, 68, 0.2);
    --error-text: #fca5a5;
    --input-bg: rgba(15, 23, 42, 0.6);
    --subtle-bg: rgba(255, 255, 255, 0.04);
    --code-bg: rgba(255, 255, 255, 0.06);
    --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
    background: rgba(128, 128, 128, 0.1);
}

.auth-theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}


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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.auth-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 2rem;
    z-index: 10;
}

/* Glassmorphism Card */
.auth-card {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 2;
}

.auth-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.auth-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #60a5fa, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-header p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.alert-error {
    background-color: var(--error-bg);
    color: var(--error-text);
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    text-align: center;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input {
    width: 100%;
    padding: 0.85rem 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.btn-primary {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    font-family: inherit;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(59, 130, 246, 0.6);
}

.auth-footer {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.auth-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.auth-footer a:hover {
    color: #60a5fa;
}

/* Background Blobs for Visual Aesthetics */
.blob {
    position: absolute;
    filter: blur(80px);
    z-index: 1;
    border-radius: 50%;
    opacity: 0.5;
    animation: float 10s ease-in-out infinite;
    pointer-events: none;
}

.blob-1 {
    top: -10%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: #3b82f6;
    animation-delay: 0s;
}

.blob-2 {
    bottom: -10%;
    right: -10%;
    width: 350px;
    height: 350px;
    background: #c084fc;
    animation-delay: -5s;
}

@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}

/* =========================================
   Dashboard Layout
   ========================================= */
.dashboard-layout {
    display: flex;
    height: 100vh;
    width: 100%;
    background-color: var(--bg-color);
}

.dashboard-body {
    overflow: hidden;
}

.sidebar {
    width: 280px;
    background-color: var(--card-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    z-index: 20;
    overflow: hidden;
}

.sidebar-header {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 2.5rem;
    background: linear-gradient(135deg, #60a5fa, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Desktop: hide mobile-only elements */
.drawer-close-btn { display: none; }
.sidebar-top-row { display: contents; } /* transparent wrapper on desktop */

.nav-links {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(96, 165, 250, 0.45) transparent;
}

.nav-links::-webkit-scrollbar {
    width: 10px;
}

.nav-links::-webkit-scrollbar-track {
    background: transparent;
}

.nav-links::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.55), rgba(192, 132, 252, 0.45));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.nav-links::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.75), rgba(192, 132, 252, 0.65));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 0.85rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 12px;
    margin-bottom: 0.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-link:hover, .nav-link.active {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
}

.nav-link.logout {
    margin-top: auto;
    color: #fca5a5;
}

.nav-link.logout:hover {
    background-color: var(--error-bg);
    color: #ef4444;
}

.nav-section-label {
    font-size: 0.68rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
    padding: 0 0.75rem;
    margin-top: 1rem;
    margin-bottom: 0.3rem;
    opacity: 0.6;
}

.nav-section-label:first-child {
    margin-top: 0;
}

/* Sub-section label inside the PLATFORM block (Manage / Operations / Configuration).
   Smaller and dimmer than .nav-section-label so the visual hierarchy reads:
       PLATFORM (section)  →  manage (sub-section)  →  link */
.nav-subsection-label {
    font-size: 0.62rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 0 0.75rem;
    margin-top: 0.7rem;
    margin-bottom: 0.15rem;
    opacity: 0.42;
}

/* Legacy — kept so old HTML doesn't break if cached */
.sidebar-support {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.sidebar-support-title {
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.55rem;
    font-weight: 700;
}

.sidebar-support-link {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
    transition: all 0.2s ease;
}

.sidebar-support-link:hover,
.sidebar-support-link.active {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
}

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.topbar {
    height: 70px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2rem;
    background-color: var(--topbar-bg);
    backdrop-filter: blur(8px);
    z-index: 10;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.user-role { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;}

/* ---- Notification Bell ---- */
.notif-dropdown { position: relative; }

.notif-bell-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    padding: 4px 6px;
    border-radius: 8px;
    line-height: 1;
    transition: background 0.2s;
}
.notif-bell-btn:hover { background: var(--subtle-bg); }

.notif-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    border-radius: 99px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
}
.notif-badge--hidden { display: none; }

.notif-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 320px;
    max-width: calc(100vw - 2rem); /* prevent overflow on small screens */
    background: var(--dropdown-bg, #ffffff);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.08);
    z-index: 200;
    max-height: 400px;
    overflow-y: auto;
}
.notif-menu.open { display: block; }

.notif-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    cursor: default;
}
.notif-item:last-child { border-bottom: none; }

/* ---- Collapsible form helper ---- */
.hidden-form { display: none; }

/* ---- Profile Dropdown ---- */
.profile-dropdown {
    position: relative;
}

.profile-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 12px;
    transition: background 0.2s;
}
.profile-trigger:hover {
    background: rgba(128,128,128,0.08);
}

.profile-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 230px;
    background: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3);
    z-index: 200;
    overflow: hidden;
    animation: dropDown 0.18s ease-out;
    /* Force the background to be opaque so text is always readable */
    backdrop-filter: none;
}
.profile-menu.open { display: block; }

@keyframes dropDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.profile-menu-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
}

.profile-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.1rem;
    color: var(--text-primary);
    background: transparent;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s;
}
.profile-menu-item:hover {
    background: rgba(128,128,128,0.1);
    color: var(--text-primary);
}
.profile-menu-icon { font-size: 1rem; width: 20px; text-align: center; }

.profile-menu-item--danger { color: #ef4444; }
.profile-menu-item--danger:hover { background: rgba(239,68,68,0.07); }

.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
}

.legal-layout {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
}

.legal-topbar {
    height: 70px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    background-color: var(--topbar-bg);
    backdrop-filter: blur(8px);
    z-index: 10;
}

.legal-topbar-left,
.legal-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.legal-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
}

.legal-nav-toggle span {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: var(--text-primary);
}

.legal-nav-links {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding: 0.32rem;
    border: 1px solid var(--border-color);
    background: var(--subtle-bg);
    border-radius: 999px;
}

.legal-back-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
}

.legal-back-link:hover {
    color: var(--primary-color);
}

.legal-nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.84rem;
    padding: 0.42rem 0.78rem;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.legal-nav-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.legal-nav-link.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 8px 18px -12px rgba(37, 99, 235, 0.85);
}

.legal-nav-link-accent {
    color: var(--text-primary);
}

.legal-lang-switch {
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--subtle-bg);
    padding: 5px 10px;
    border-radius: 99px;
}

.legal-lang-switch span {
    color: var(--text-secondary);
}

.public-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.45);
    backdrop-filter: blur(4px);
    z-index: 39;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.public-nav-backdrop.open {
    display: block;
    opacity: 1;
}

/* Body lock used while the drawer is open. Class-based so it does not
   conflict with inline `style="overflow-y:auto"` set by the public-shell
   bodyAttributes — clearing the class fully restores the original scroll
   without needing to remember what JS overrode. Storing scroll position
   via JS lets iOS reliably restore where the user was reading. */
body.body-locked {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    /* `top` is set inline by JS to the negative of window.scrollY */
}

.public-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: min(320px, 86vw);
    height: 100vh;
    height: 100dvh;
    /* Theme-aware: same surface as cards on the current theme so the
       drawer doesn't fight a light page with a hardcoded dark slate. */
    background:
        radial-gradient(circle at top right, rgba(99, 102, 241, 0.10), transparent 55%),
        radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.07), transparent 60%),
        var(--card-bg);
    color: var(--text-primary);
    border-right: 1px solid var(--border-color);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.20);
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    /* Bottom padding strategy: hardcoded 2.5rem floor so the last
     * entry always clears the Android gesture pill even when env()
     * returns 0 (3-button nav, older Chrome). env() lifts further
     * on devices that report a real safe-area inset. See .sidebar
     * comment below for the full reasoning. */
    padding: 1.1rem 0.9rem
        max(2.5rem, calc(1.4rem + env(safe-area-inset-bottom, 0px)));
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.public-nav-drawer.open {
    transform: translateX(0);
}

.public-nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0.35rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.public-nav-drawer-head strong {
    font-size: 1.05rem;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}

.public-nav-close {
    display: flex;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s;
}
.public-nav-close:hover {
    color: var(--text-primary);
    border-color: rgba(99, 102, 241, 0.45);
}

.public-nav-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0 0.15rem;
}

.public-nav-drawer-link {
    position: relative;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    border-radius: 10px;
    padding: 0.75rem 0.9rem 0.75rem 1rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.public-nav-drawer-link svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    flex: 0 0 18px;
    transition: color 0.18s ease;
}

.public-nav-drawer-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    transform: translateY(-50%);
    transition: height 0.2s ease, opacity 0.2s ease;
    opacity: 0;
}

.public-nav-drawer-link:hover {
    background: rgba(99, 102, 241, 0.06);
    transform: translateX(2px);
}
.public-nav-drawer-link:hover svg {
    color: var(--primary-color, #6366f1);
}

.public-nav-drawer-link.is-active {
    color: var(--primary-color, #6366f1);
    background: rgba(99, 102, 241, 0.08);
}
.public-nav-drawer-link.is-active svg {
    color: var(--primary-color, #6366f1);
}

.public-nav-drawer-link.is-active::before {
    height: 22px;
    opacity: 1;
}

.legal-main {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 1rem;
}

.public-main-auth {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

.public-content-layer {
    position: relative;
    z-index: 2;
}

.legal-card {
    max-width: 940px;
    margin: 0 auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.4rem 1.35rem;
    line-height: 1.65;
}

.legal-card h1 {
    font-size: 1.95rem;
    margin-bottom: 0.65rem;
}

.legal-card h2 {
    font-size: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 0.35rem;
}

.legal-card p {
    color: var(--text-secondary);
}

.legal-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.legal-link-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    background: rgba(0,0,0,0.03);
    transition: all 0.2s ease;
}

.legal-link-card:hover {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.08);
}

.legal-link-card span {
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.legal-contact-box {
    margin-top: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.85rem;
    display: grid;
    gap: 0.75rem;
    background: rgba(0,0,0,0.03);
}

.legal-contact-box small {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

.legal-contact-box a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.legal-list {
    margin-left: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.app-footer {
    width: 100%;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-align: center;
    /* No own background — the border-top alone separates the footer
       from the page. Previous attempts (rgba black overlay, color-mix
       off --bg-color) all produced a visible grey band in light mode
       that didn't match the chrome. Transparent + border is what other
       app footers in this codebase use. */
    background: transparent;
    position: relative;
    z-index: 3;
}

.app-footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.app-footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.app-footer-links a:hover {
    color: var(--text-primary);
}

.app-footer-dot {
    opacity: 0.65;
}

.app-footer-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
}

.app-footer-sep {
    opacity: 0.7;
}

/* Dashboard Widgets */
.grid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.2);
}

.stat-title {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* =========================================
   ZX Public surface — Home + Plans redesign
   Tokens, decorative bg, hero, sections, cards.
   Light & dark via CSS variables (+ data-theme).
   ========================================= */

/* ── Tokens ────────────────────────────────── */
:root {
    --zx-radius-sm: 10px;
    --zx-radius-md: 14px;
    --zx-radius-lg: 20px;
    --zx-radius-xl: 28px;

    --zx-grad-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    --zx-grad-brand-soft: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(236,72,153,0.10));
    --zx-grad-hero-dark: radial-gradient(120% 80% at 0% 0%, rgba(99,102,241,0.35), transparent 50%),
                         radial-gradient(120% 80% at 100% 100%, rgba(236,72,153,0.28), transparent 55%),
                         linear-gradient(135deg, #0b1024 0%, #1a1147 60%, #2a0f3a 100%);

    --zx-elev-1: 0 4px 16px -8px rgba(15,23,42,0.18), 0 2px 6px -2px rgba(15,23,42,0.08);
    --zx-elev-2: 0 24px 48px -28px rgba(99,102,241,0.40), 0 8px 18px -10px rgba(15,23,42,0.18);
    --zx-elev-glow: 0 0 0 1px rgba(139,92,246,0.30), 0 30px 60px -30px rgba(139,92,246,0.45);

    --zx-ring: 0 0 0 4px rgba(139,92,246,0.18);
    --zx-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --zx-card-bg: var(--card-bg);
    --zx-card-border: var(--border-color);
    --zx-text: var(--text-primary);
    --zx-text-muted: var(--text-secondary);
    --zx-bg: var(--bg-color);

    --zx-grid-color: rgba(255,255,255,0.06);
    --zx-glow-a: rgba(99,102,241,0.55);
    --zx-glow-b: rgba(236,72,153,0.45);
}

@media (prefers-color-scheme: light) {
    :root {
        --zx-grid-color: rgba(15,23,42,0.05);
    }
}

html[data-theme='light'] {
    --zx-grid-color: rgba(15,23,42,0.05);
}

/* ── Section wrappers ───────────────────────── */
.zx-home,
.zx-plans {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.zx-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.zx-section-head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 760px;
}

.zx-section-head-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    max-width: none;
    gap: 1rem;
    flex-wrap: wrap;
}

.zx-section-head-row > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 760px;
}

.zx-section-head-tight {
    gap: 0.25rem;
}

.zx-section-title {
    margin: 0;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--zx-text);
}

.zx-section-sub {
    margin: 0;
    color: var(--zx-text-muted);
    font-size: 1rem;
    line-height: 1.55;
}

.zx-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary-color);
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--zx-card-border);
    background: var(--zx-card-bg);
    transition: transform 0.2s var(--zx-ease), box-shadow 0.2s var(--zx-ease);
}
.zx-section-link svg { width: 16px; height: 16px; }
.zx-section-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--zx-elev-1);
}

/* ── Eyebrow ────────────────────────────────── */
.zx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--zx-grad-brand-soft);
    border: 1px solid rgba(139,92,246,0.25);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.zx-eyebrow-light {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.20);
    color: rgba(255,255,255,0.92);
}

.zx-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #f472b6);
    box-shadow: 0 0 0 3px rgba(167,139,250,0.18);
}

.zx-text-grad {
    background: linear-gradient(120deg, #a78bfa 0%, #f472b6 60%, #f0abfc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ── Buttons ───────────────────────────────── */
.zx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.35rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s var(--zx-ease), box-shadow 0.18s var(--zx-ease), background 0.18s var(--zx-ease);
    line-height: 1;
    white-space: nowrap;
}
.zx-btn-icon { width: 18px; height: 18px; }

.zx-btn-primary {
    background: var(--zx-grad-brand);
    color: #fff;
    box-shadow: 0 12px 28px -16px rgba(139,92,246,0.7);
}
.zx-btn-primary:hover:not(.is-disabled) {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px -14px rgba(236,72,153,0.55);
}
.zx-btn-primary.is-disabled,
.zx-btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

.zx-btn-ghost {
    background: var(--zx-card-bg);
    color: var(--zx-text);
    border-color: var(--zx-card-border);
}
.zx-btn-ghost:hover { transform: translateY(-1px); box-shadow: var(--zx-elev-1); }

.zx-btn-ghost-light {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
}
.zx-btn-ghost-light:hover {
    background: rgba(255,255,255,0.14);
    transform: translateY(-1px);
}

.zx-btn-light {
    background: #fff;
    color: #1f1147;
}
.zx-btn-light:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -16px rgba(0,0,0,0.35); }

.zx-btn-block { width: 100%; }
[hidden] { display: none !important; }

/* ── Empty state ────────────────────────────── */
.zx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    background: var(--zx-card-bg);
    color: var(--zx-text-muted);
    text-align: center;
}
.zx-empty svg { width: 56px; height: 56px; opacity: 0.5; }
.zx-empty p { margin: 0; font-size: 0.95rem; }
.zx-empty-search { margin-top: -1rem; }

/* ── Notice (success/error/info) ────────────── */
.zx-notice {
    border-radius: var(--zx-radius-md);
    padding: 0.85rem 1rem;
    border: 1px solid var(--zx-card-border);
    font-size: 0.9rem;
    background: var(--zx-card-bg);
}
.zx-notice-success { border-color: rgba(16,185,129,0.45); background: rgba(16,185,129,0.10); color: #10b981; }
.zx-notice-error   { border-color: rgba(239,68,68,0.45);  background: rgba(239,68,68,0.10);  color: #ef4444; }
.zx-notice-info    { border-color: rgba(59,130,246,0.45); background: rgba(59,130,246,0.10); color: #3b82f6; }

/* ── Reveal animation ───────────────────────── */
.zx-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--zx-ease), transform 0.7s var(--zx-ease);
}
.zx-reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .zx-reveal { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────────────────────────
   HOME — HERO
   ───────────────────────────────────────────── */
.zx-hero {
    position: relative;
    isolation: isolate;
    border-radius: var(--zx-radius-xl);
    overflow: hidden;
    background: var(--zx-grad-hero-dark);
    color: #f8fafc;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--zx-elev-2);
}

.zx-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.zx-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, var(--zx-grid-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--zx-grid-color) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 50%, transparent 100%);
    opacity: 0.7;
}
.zx-hero-glow {
    position: absolute;
    width: 480px; height: 480px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.65;
}
.zx-hero-glow-a { background: var(--zx-glow-a); top: -120px; left: -120px; }
.zx-hero-glow-b { background: var(--zx-glow-b); bottom: -160px; right: -120px; }

.zx-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3rem;
    padding: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.zx-hero-copy { display: flex; flex-direction: column; gap: 1.2rem; }
.zx-hero-title {
    margin: 0;
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -1.2px;
    color: #fff;
    font-weight: 800;
}
.zx-hero-sub {
    margin: 0;
    color: rgba(248,250,252,0.78);
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.55;
    max-width: 640px;
}
.zx-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }

.zx-hero-trust { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.zx-hero-trust-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    color: rgba(248,250,252,0.55);
}
.zx-hero-trust-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.zx-hero-trust-list li {
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.78rem;
    color: rgba(248,250,252,0.88);
    font-weight: 600;
}

/* Mockup */
.zx-hero-mock {
    position: relative;
    perspective: 1400px;
    padding: 1.5rem 0.5rem;
}
.zx-mock-window {
    position: relative;
    background: linear-gradient(180deg, rgba(20,16,40,0.95), rgba(15,12,30,0.95));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    box-shadow: 0 30px 80px -30px rgba(99,102,241,0.55);
    overflow: hidden;
    transform: rotate3d(0.4, -1, 0.05, 8deg) translateY(-4px);
    transition: transform 0.6s var(--zx-ease);
}
.zx-hero-mock:hover .zx-mock-window {
    transform: rotate3d(0.4, -1, 0.05, 4deg) translateY(-8px);
}
.zx-mock-chrome {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.zx-mock-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,0.15);
}
.zx-mock-dot:nth-child(1) { background: #ef4444; }
.zx-mock-dot:nth-child(2) { background: #f59e0b; }
.zx-mock-dot:nth-child(3) { background: #10b981; }
.zx-mock-url {
    margin-left: auto;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.3px;
}
.zx-mock-body {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 0.75rem;
    padding: 0.85rem;
    min-height: 280px;
}
.zx-mock-side { display: flex; flex-direction: column; gap: 0.5rem; }
.zx-mock-side-item {
    height: 24px; border-radius: 6px;
    background: rgba(255,255,255,0.05);
}
.zx-mock-side-active { background: var(--zx-grad-brand); opacity: 0.9; }

.zx-mock-main { display: flex; flex-direction: column; gap: 0.8rem; }
.zx-mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
.zx-mock-stat {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.65rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.05);
}
.zx-mock-stat-label { width: 60%; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.10); }
.zx-mock-stat-value { width: 80%; height: 14px; border-radius: 4px; background: linear-gradient(90deg, rgba(167,139,250,0.5), rgba(244,114,182,0.4)); }
.zx-mock-stat-spark { width: 40%; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.15); }
.zx-mock-stat-spark-up { background: linear-gradient(90deg, #10b981, transparent); }

.zx-mock-chart {
    height: 110px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}
.zx-mock-chart svg { width: 100%; height: 100%; display: block; }

.zx-mock-rows { display: flex; flex-direction: column; gap: 0.4rem; }
.zx-mock-row {
    display: grid;
    grid-template-columns: 30% 1fr 14%;
    gap: 0.6rem;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
}
.zx-mock-row > span:nth-child(1) { height: 8px; border-radius: 3px; background: rgba(255,255,255,0.10); }
.zx-mock-row > span:nth-child(2) { height: 8px; border-radius: 3px; background: rgba(255,255,255,0.06); }
.zx-mock-pill { height: 16px; border-radius: 999px; background: rgba(255,255,255,0.08); }
.zx-mock-pill-ok { background: rgba(16,185,129,0.28); }

.zx-mock-floater {
    position: absolute;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(30,25,60,0.95), rgba(20,15,45,0.95));
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 22px 40px -22px rgba(99,102,241,0.55);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.zx-mock-floater-a { top: 8%; right: -12px; }
.zx-mock-floater-a .zx-mock-floater-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
}
.zx-mock-floater-line { width: 70px; height: 8px; border-radius: 3px; background: rgba(255,255,255,0.18); }
.zx-mock-floater-line-sm { width: 38px; opacity: 0.6; }
.zx-mock-floater-b { bottom: 12%; left: -16px; gap: 0.35rem; align-items: flex-end; }
.zx-mock-floater-bar { width: 8px; height: 18px; border-radius: 3px; background: rgba(167,139,250,0.5); }
.zx-mock-floater-bar-tall { height: 30px; background: linear-gradient(180deg, #f472b6, #a78bfa); }
.zx-mock-floater-bar-mid  { height: 22px; background: rgba(244,114,182,0.55); }

/* ─────────────────────────────────────────────
   HOME — Why / Features
   ───────────────────────────────────────────── */
.zx-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.zx-feature-card {
    position: relative;
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: transform 0.25s var(--zx-ease), box-shadow 0.25s var(--zx-ease), border-color 0.25s var(--zx-ease);
    overflow: hidden;
}
.zx-feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--zx-grad-brand-soft);
    opacity: 0;
    transition: opacity 0.3s var(--zx-ease);
    pointer-events: none;
}
.zx-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--zx-elev-2);
    border-color: rgba(139,92,246,0.35);
}
.zx-feature-card:hover::before { opacity: 1; }
.zx-feature-card > * { position: relative; }

.zx-feature-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 12px 24px -12px rgba(99,102,241,0.45);
}
.zx-feature-icon svg { width: 24px; height: 24px; }
.zx-feature-icon-a { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.zx-feature-icon-b { background: linear-gradient(135deg, #ec4899, #f472b6); }
.zx-feature-icon-c { background: linear-gradient(135deg, #06b6d4, #6366f1); }

.zx-feature-card h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--zx-text);
}
.zx-feature-card p {
    margin: 0;
    color: var(--zx-text-muted);
    line-height: 1.55;
    font-size: 0.92rem;
}
.zx-feature-bullets {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.zx-feature-bullets li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.88rem;
    color: var(--zx-text);
}
.zx-feature-bullets li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.45rem;
    width: 14px; height: 14px;
    border-radius: 4px;
    background: var(--zx-grad-brand);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
}

/* ─────────────────────────────────────────────
   HOME — Featured modules
   ───────────────────────────────────────────── */
.zx-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.zx-module-card {
    text-decoration: none;
    color: var(--zx-text);
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform 0.25s var(--zx-ease), box-shadow 0.25s var(--zx-ease), border-color 0.25s var(--zx-ease);
}
.zx-module-card:hover {
    transform: translateY(-3px);
    border-color: rgba(139,92,246,0.40);
    box-shadow: var(--zx-elev-2);
}
.zx-module-card-head {
    display: flex; align-items: center; justify-content: space-between;
}
.zx-module-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--zx-grad-brand);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center; justify-content: center;
    box-shadow: 0 10px 20px -10px rgba(139,92,246,0.55);
}
.zx-module-card h3 { margin: 0; font-size: 1.05rem; }
.zx-module-card p {
    margin: 0;
    color: var(--zx-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zx-module-card-foot {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--zx-card-border);
}
.zx-module-price-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--zx-text-muted);
    font-weight: 700;
}
.zx-module-price {
    font-size: 1.05rem;
    font-weight: 800;
    background: linear-gradient(135deg, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zx-module-card-meta {
    font-size: 0.75rem;
    color: var(--zx-text-muted);
}

/* Chips */
.zx-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border: 1px solid var(--zx-card-border);
    background: var(--subtle-bg);
    color: var(--zx-text);
}
.zx-chip-success { color: #10b981; border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.10); }
.zx-chip-popular { color: #f59e0b; border-color: rgba(245,158,11,0.4);  background: rgba(245,158,11,0.10); }
.zx-chip-recommended {
    color: #fff;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-color: transparent;
    box-shadow: 0 6px 14px -6px rgba(236,72,153,0.5);
}
.zx-chip-current {
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: transparent;
}
.zx-chip-info {
    color: #c4b5fd;
    border-color: rgba(139,92,246,0.4);
    background: rgba(139,92,246,0.15);
}

/* ─────────────────────────────────────────────
   HOME — How it works
   ───────────────────────────────────────────── */
.zx-steps {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    counter-reset: zxstep;
    position: relative;
}
.zx-steps::before {
    content: "";
    position: absolute;
    top: 36px; left: 8%; right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--zx-card-border), transparent);
    z-index: 0;
}
.zx-step {
    position: relative;
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1.5rem 1.25rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.6rem;
    z-index: 1;
}
.zx-step-num {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    font-weight: 800;
    color: #fff;
    background: var(--zx-grad-brand);
    margin-bottom: 0.3rem;
    box-shadow: 0 10px 20px -10px rgba(139,92,246,0.55);
}
.zx-step h3 { margin: 0; font-size: 1.05rem; }
.zx-step p { margin: 0; color: var(--zx-text-muted); line-height: 1.55; font-size: 0.92rem; }

/* ─────────────────────────────────────────────
   HOME — Stats band
   ───────────────────────────────────────────── */
.zx-stats-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 2rem 1.5rem;
    border-radius: var(--zx-radius-xl);
    background:
        radial-gradient(circle at 0% 0%, rgba(99,102,241,0.20), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(236,72,153,0.18), transparent 55%),
        var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
}
.zx-stats-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center;
}
.zx-stats-num {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -1px;
}
.zx-stats-num-text { font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
.zx-stats-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--zx-text-muted);
    font-weight: 700;
}

/* ─────────────────────────────────────────────
   HOME — Final CTA band
   ───────────────────────────────────────────── */
.zx-final-cta,
.zx-help-cta {
    position: relative;
    isolation: isolate;
    border-radius: var(--zx-radius-xl);
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: var(--zx-elev-2);
}
.zx-final-cta-bg,
.zx-help-cta-bg {
    position: absolute; inset: 0; z-index: -1;
    background: var(--zx-grad-hero-dark);
}
.zx-final-cta-bg::after,
.zx-help-cta-bg::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 100%);
    opacity: 0.7;
}
.zx-final-cta-inner,
.zx-help-cta-inner {
    position: relative;
    padding: clamp(2rem, 4vw, 3rem);
    display: flex; flex-direction: column; gap: 1rem;
    align-items: flex-start;
    max-width: 720px;
}
.zx-final-cta-inner h2,
.zx-help-cta-inner h2 {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.6px;
    color: #fff;
}
.zx-final-cta-inner p,
.zx-help-cta-inner p {
    margin: 0;
    color: rgba(248,250,252,0.78);
    line-height: 1.55;
}
.zx-final-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }

/* ─────────────────────────────────────────────
   PLANS — Hero (shared with module page)
   ───────────────────────────────────────────── */
.zx-plans-hero {
    position: relative;
    isolation: isolate;
    border-radius: var(--zx-radius-xl);
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: var(--zx-elev-2);
    background: var(--zx-grad-hero-dark);
}
.zx-plans-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.zx-plans-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
    opacity: 0.7;
}
.zx-plans-hero-glow {
    position: absolute; width: 420px; height: 420px;
    border-radius: 50%; filter: blur(80px); opacity: 0.55;
}
.zx-plans-hero-glow-a { background: var(--zx-glow-a); top: -120px; left: -100px; }
.zx-plans-hero-glow-b { background: var(--zx-glow-b); bottom: -160px; right: -80px; }

.zx-plans-hero-inner {
    position: relative;
    padding: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.zx-plans-hero-title {
    margin: 0;
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.8px;
    color: #fff;
}
.zx-plans-hero-sub {
    margin: 0;
    color: rgba(248,250,252,0.82);
    max-width: 640px;
    font-size: 1rem;
    line-height: 1.55;
}
.zx-plans-hero-cta { align-self: flex-start; }

.zx-plans-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.zx-plans-hero-stat {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--zx-radius-md);
    padding: 0.85rem 1rem;
    display: flex; flex-direction: column; gap: 0.3rem;
    color: #fff;
}
.zx-plans-hero-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255,255,255,0.62);
    font-weight: 700;
}
.zx-plans-hero-stat strong {
    font-size: 1.25rem;
    line-height: 1.1;
}

/* Search */
.zx-search {
    position: relative;
    width: min(540px, 100%);
}
.zx-search-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: rgba(255,255,255,0.7);
    pointer-events: none;
}
.zx-search input {
    width: 100%;
    padding: 0.85rem 2.5rem 0.85rem 2.6rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font-size: 0.95rem;
    transition: box-shadow 0.2s var(--zx-ease), background 0.2s var(--zx-ease);
}
.zx-search input::placeholder { color: rgba(255,255,255,0.6); }
.zx-search input:focus {
    outline: none;
    background: rgba(255,255,255,0.16);
    box-shadow: var(--zx-ring);
}
.zx-search-clear {
    position: absolute;
    right: 8px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 0;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}
.zx-search-clear:hover { background: rgba(255,255,255,0.22); }

/* Filter chips */
.zx-chip-row {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.zx-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s var(--zx-ease), transform 0.18s var(--zx-ease), border-color 0.2s var(--zx-ease);
}
.zx-filter-chip span {
    padding: 0.05rem 0.42rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.25);
    font-size: 0.72rem;
}
.zx-filter-chip:hover { background: rgba(255,255,255,0.14); }
.zx-filter-chip.is-active {
    background: #fff;
    color: #1f1147;
    border-color: #fff;
}
.zx-filter-chip.is-active span { background: rgba(31,17,71,0.10); color: #1f1147; }

/* Trust pills (module hero) */
.zx-trust-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.zx-trust-pill {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
}

/* Back link */
.zx-back-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center; gap: 0.4rem;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.35rem 0.65rem 0.35rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    transition: background 0.2s var(--zx-ease);
}
.zx-back-link:hover { background: rgba(255,255,255,0.10); color: #fff; }
.zx-back-link svg { width: 16px; height: 16px; }

/* ─────────────────────────────────────────────
   PLANS INDEX — Module catalog cards
   ───────────────────────────────────────────── */
.zx-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
}
.zx-plan-module-card {
    position: relative;
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow: hidden;
    transition: transform 0.25s var(--zx-ease), box-shadow 0.25s var(--zx-ease), border-color 0.25s var(--zx-ease);
    opacity: 0;
    transform: translateY(14px);
}
.zx-plan-module-card.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s var(--zx-ease), transform 0.6s var(--zx-ease), box-shadow 0.25s var(--zx-ease), border-color 0.25s var(--zx-ease);
}
@media (prefers-reduced-motion: reduce) {
    .zx-plan-module-card { opacity: 1; transform: none; transition: none; }
}
.zx-plan-module-card:hover {
    transform: translateY(-4px);
    border-color: rgba(139,92,246,0.40);
    box-shadow: var(--zx-elev-2);
}
.zx-plan-module-card-glow {
    position: absolute;
    inset: -1px;
    background: var(--zx-grad-brand);
    opacity: 0;
    z-index: -1;
    border-radius: inherit;
    transition: opacity 0.3s var(--zx-ease);
}
.zx-plan-module-card:hover .zx-plan-module-card-glow { opacity: 0.10; }

.zx-plan-module-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.zx-plan-module-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--zx-grad-brand);
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center; justify-content: center;
    box-shadow: 0 12px 22px -10px rgba(139,92,246,0.55);
    overflow: hidden;
}
.zx-plan-module-icon img {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: contain;
    border-radius: 10px;
}
.zx-plan-module-badges { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }

.zx-plan-module-title {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--zx-text);
    min-width: 0;
}
.zx-plan-module-title-badge {
    margin: 0;
    min-width: 0;
    max-width: calc(100% - 64px);
    padding: 0.34rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(139,92,246,0.34);
    background: color-mix(in srgb, var(--zx-card-bg) 72%, rgba(139,92,246,0.18));
    color: var(--zx-text);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 10px 18px -16px rgba(99,102,241,0.8);
}
.zx-plan-module-desc {
    margin: 0;
    color: var(--zx-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zx-plan-module-features {
    display: flex; flex-direction: column; gap: 0.45rem;
    padding: 0.75rem;
    border-radius: var(--zx-radius-md);
    background: var(--subtle-bg);
    border: 1px solid var(--zx-card-border);
}
.zx-plan-module-features-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 800;
    color: var(--zx-text-muted);
}
.zx-plan-module-features ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.32rem;
}
.zx-plan-module-features li {
    display: flex; align-items: flex-start; gap: 0.5rem;
    font-size: 0.86rem;
    color: var(--zx-text);
}
.zx-plan-module-features li svg {
    flex-shrink: 0;
    width: 16px; height: 16px;
    color: #10b981;
    margin-top: 2px;
}

.zx-plan-module-foot {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--zx-card-border);
}
.zx-plan-module-price { display: flex; flex-direction: column; gap: 0.1rem; }
.zx-plan-module-price-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 800;
    color: var(--zx-text-muted);
}
.zx-plan-module-price-value {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zx-plan-module-price-meta {
    font-size: 0.72rem;
    color: var(--zx-text-muted);
    margin-top: 0.2rem;
}
.zx-plan-module-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: var(--zx-grad-brand);
    color: #fff;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    transition: transform 0.2s var(--zx-ease), box-shadow 0.2s var(--zx-ease);
    box-shadow: 0 10px 18px -10px rgba(139,92,246,0.55);
}
.zx-plan-module-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 22px -10px rgba(236,72,153,0.55); }
.zx-plan-module-cta svg { width: 14px; height: 14px; }

/* ─────────────────────────────────────────────
   PLANS MODULE — Tabs, toolbar, plan cards
   ───────────────────────────────────────────── */
.zx-module-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
}
.zx-module-tab {
    flex-shrink: 0;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--zx-card-border);
    background: var(--zx-card-bg);
    color: var(--zx-text-muted);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    transition: background 0.2s var(--zx-ease), color 0.2s var(--zx-ease), border-color 0.2s var(--zx-ease);
}
.zx-module-tab:hover { color: var(--zx-text); border-color: rgba(139,92,246,0.40); }
.zx-module-tab.is-active {
    background: var(--zx-grad-brand);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(139,92,246,0.55);
}

.zx-plans-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.zx-cycle-toggle {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    box-shadow: var(--zx-elev-1);
}
.zx-cycle-btn {
    position: relative;
    border: 0;
    background: transparent;
    color: var(--zx-text-muted);
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s var(--zx-ease), background 0.2s var(--zx-ease);
}
.zx-cycle-btn.is-active {
    background: var(--zx-grad-brand);
    color: #fff;
    box-shadow: 0 10px 18px -10px rgba(139,92,246,0.55);
}
.zx-cycle-save {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 800;
    padding: 0.15rem 0.42rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
}
.zx-cycle-btn:not(.is-active) .zx-cycle-save {
    background: rgba(16,185,129,0.18);
    color: #10b981;
}

.zx-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.zx-plan-card {
    position: relative;
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    transition: transform 0.25s var(--zx-ease), box-shadow 0.25s var(--zx-ease), border-color 0.25s var(--zx-ease);
    opacity: 0;
    transform: translateY(14px);
}
.zx-plan-card.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s var(--zx-ease), transform 0.6s var(--zx-ease), box-shadow 0.25s var(--zx-ease), border-color 0.25s var(--zx-ease);
}
@media (prefers-reduced-motion: reduce) {
    .zx-plan-card { opacity: 1; transform: none; transition: none; }
}

.zx-plan-card:hover {
    transform: translateY(-4px);
    border-color: rgba(139,92,246,0.45);
    box-shadow: var(--zx-elev-2);
}
.zx-plan-card-glow {
    position: absolute;
    inset: 0;
    background: var(--zx-grad-brand);
    opacity: 0;
    z-index: 0;
    transition: opacity 0.3s var(--zx-ease);
    pointer-events: none;
}
.zx-plan-card:hover .zx-plan-card-glow { opacity: 0.06; }
.zx-plan-card > * { position: relative; z-index: 1; }

.zx-plan-card-recommended {
    border-color: transparent;
    box-shadow: var(--zx-elev-glow);
    transform: translateY(-4px);
    background:
        linear-gradient(var(--zx-card-bg), var(--zx-card-bg)) padding-box,
        var(--zx-grad-brand) border-box;
    border: 1.5px solid transparent;
}
.zx-plan-card-recommended:hover {
    transform: translateY(-8px);
}
.zx-plan-card-current {
    border-color: rgba(16,185,129,0.5);
    box-shadow: 0 0 0 1px rgba(16,185,129,0.25), 0 24px 48px -28px rgba(16,185,129,0.45);
}

.zx-plan-card-badges {
    display: flex; gap: 0.35rem; flex-wrap: wrap;
    min-height: 24px;
}

.zx-plan-name {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: var(--zx-text);
}

.zx-plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.zx-plan-price-main {
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1;
    background: linear-gradient(135deg, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zx-plan-price-cycle {
    color: var(--zx-text-muted);
    font-size: 0.95rem;
    font-weight: 600;
}

.zx-plan-desc {
    margin: 0;
    color: var(--zx-text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.zx-plan-features {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 0.85rem;
    border-radius: var(--zx-radius-md);
    background: var(--subtle-bg);
    border: 1px solid var(--zx-card-border);
}
.zx-plan-features-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 800;
    color: var(--zx-text-muted);
}
.zx-plan-features ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.zx-plan-features li {
    display: flex; align-items: flex-start; gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--zx-text);
}
.zx-plan-features li svg {
    flex-shrink: 0;
    width: 16px; height: 16px;
    color: #10b981;
    margin-top: 3px;
}
.zx-plan-no-features {
    margin: 0; font-size: 0.85rem; color: var(--zx-text-muted);
}
.zx-plan-action { margin-top: auto; display: flex; flex-direction: column; gap: 0.4rem; }
.zx-plan-auth-note {
    margin: 0;
    color: var(--zx-text-muted);
    font-size: 0.78rem;
    text-align: center;
}

/* ─────────────────────────────────────────────
   PLANS MODULE — Compare table
   ───────────────────────────────────────────── */
.zx-compare {
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.zx-compare-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.zx-compare-head > div { display: flex; flex-direction: column; gap: 0.25rem; }
.zx-compare-title { margin: 0; font-size: 1.4rem; letter-spacing: -0.3px; }
.zx-compare-sub { margin: 0; color: var(--zx-text-muted); font-size: 0.9rem; }
.zx-compare-toggle { padding: 0.55rem 0.9rem; font-size: 0.85rem; }

.zx-compare-body { display: block; }
.zx-compare-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--zx-radius-md);
    border: 1px solid var(--zx-card-border);
}
.zx-compare-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}
.zx-compare-table thead th {
    position: sticky;
    top: 0;
    background: var(--zx-card-bg);
    border-bottom: 1px solid var(--zx-card-border);
    padding: 0.85rem 0.85rem;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--zx-text-muted);
    font-weight: 800;
    z-index: 1;
}
.zx-compare-table tbody tr:nth-child(even) td,
.zx-compare-table tbody tr:nth-child(even) th {
    background: var(--subtle-bg);
}
.zx-compare-table td,
.zx-compare-table th[scope="row"] {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--zx-card-border);
    font-size: 0.9rem;
    text-align: left;
}
.zx-compare-feature { font-weight: 700; color: var(--zx-text); }
.zx-compare-yes { color: #10b981; }
.zx-compare-no  { color: var(--zx-text-muted); }
.zx-compare-yes svg, .zx-compare-no svg { width: 18px; height: 18px; }
.zx-compare-empty {
    text-align: center;
    color: var(--zx-text-muted);
    padding: 1.5rem;
}

/* ─────────────────────────────────────────────
   PLANS MODULE — FAQ
   ───────────────────────────────────────────── */
.zx-faq {
    display: flex; flex-direction: column; gap: 1rem;
}
.zx-faq-list {
    display: flex; flex-direction: column;
    gap: 0.6rem;
}
.zx-faq-item {
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-md);
    overflow: hidden;
    transition: border-color 0.2s var(--zx-ease);
}
.zx-faq-item[open] { border-color: rgba(139,92,246,0.40); }
.zx-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: var(--zx-text);
    font-size: 0.95rem;
}
.zx-faq-item summary::-webkit-details-marker { display: none; }
.zx-faq-item summary svg {
    width: 18px; height: 18px;
    color: var(--zx-text-muted);
    flex-shrink: 0;
    transition: transform 0.2s var(--zx-ease);
}
.zx-faq-item[open] summary svg { transform: rotate(180deg); color: var(--primary-color); }
.zx-faq-item p {
    margin: 0;
    padding: 0 1.25rem 1.1rem;
    color: var(--zx-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────
   PLANS MODULE — Help CTA
   ───────────────────────────────────────────── */
.zx-help-cta-inner { gap: 0.75rem; }

/* =========================================
   Responsive — public surface
   ========================================= */
@media (max-width: 980px) {
    .zx-hero-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .zx-hero-mock { order: -1; padding-top: 0; }
    .zx-mock-window { transform: none; }
    .zx-feature-grid,
    .zx-steps,
    .zx-stats-band {
        grid-template-columns: 1fr 1fr;
    }
    .zx-steps::before { display: none; }
}

@media (max-width: 640px) {
    .zx-home,
    .zx-plans { gap: 2.5rem; }
    .zx-feature-grid,
    .zx-steps,
    .zx-stats-band,
    .zx-modules-grid,
    .zx-module-grid,
    .zx-plans-grid {
        grid-template-columns: 1fr;
    }
    .zx-hero-title { font-size: clamp(1.85rem, 7vw, 2.4rem); }
    .zx-plans-hero-title { font-size: clamp(1.7rem, 6vw, 2.2rem); }
    .zx-plans-hero-stats { grid-template-columns: 1fr; }
    .zx-mock-floater-a, .zx-mock-floater-b { display: none; }
    .zx-section-head-row { flex-direction: column; align-items: flex-start; }
    .zx-plans-toolbar { flex-direction: column; align-items: stretch; }
    .zx-cycle-toggle { align-self: flex-start; }
    .zx-compare-table { min-width: 540px; }
    .zx-stats-band { padding: 1.5rem 1rem; }
}

/* =========================================
   ZX App surface — Dashboard / My Apps / Billing
   Reuses tokens from the public surface block.
   ========================================= */

/* ── Page wrapper used by app views inside dashboard layout ── */
.zx-app {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1180px;
    margin: 0 auto;
}

/* ── Greeting header (dashboard) ────────────────────────── */
.zx-greeting {
    position: relative;
    isolation: isolate;
    border-radius: var(--zx-radius-xl);
    overflow: hidden;
    color: #f8fafc;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: var(--zx-elev-2);
    background: var(--zx-grad-hero-dark);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
}
.zx-greeting-bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 30% 30%, #000 40%, transparent 100%);
    opacity: 0.55;
}
.zx-greeting-glow {
    position: absolute;
    width: 360px; height: 360px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}
.zx-greeting-glow-a { background: var(--zx-glow-a); top: -100px; right: 30%; }
.zx-greeting-glow-b { background: var(--zx-glow-b); bottom: -120px; right: -80px; }

.zx-greeting-main {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-width: 0;
}
.zx-greeting-avatar {
    flex-shrink: 0;
    width: 60px; height: 60px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    color: #fff;
    background: var(--zx-grad-brand);
    box-shadow: 0 16px 32px -16px rgba(139,92,246,0.6);
    text-transform: uppercase;
    letter-spacing: -0.5px;
}
.zx-greeting-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}
.zx-greeting-text { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.zx-greeting-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(248,250,252,0.6);
    font-weight: 700;
}
.zx-greeting-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.6px;
    color: #fff;
    font-weight: 800;
}
.zx-greeting-sub {
    margin: 0;
    color: rgba(248,250,252,0.78);
    font-size: 0.95rem;
}
.zx-greeting-meta {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: flex-end;
    min-width: 0;
}
.zx-greeting-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    backdrop-filter: blur(6px);
}
.zx-greeting-chip svg { width: 14px; height: 14px; }
.zx-greeting-chip-plan {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.25);
}

/* ── Section wrappers used by app views ─────────────────── */
.zx-app-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.zx-app-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}
.zx-app-section-head h2 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--zx-text);
    letter-spacing: -0.3px;
}
.zx-app-section-head p {
    margin: 0.2rem 0 0;
    color: var(--zx-text-muted);
    font-size: 0.9rem;
}

/* ── Stat cards grid ────────────────────────────────────── */
.zx-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.zx-stat-card {
    position: relative;
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow: hidden;
    transition: transform 0.25s var(--zx-ease), box-shadow 0.25s var(--zx-ease), border-color 0.25s var(--zx-ease);
}
.zx-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(139,92,246,0.35);
    box-shadow: var(--zx-elev-2);
}
.zx-stat-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.zx-stat-card-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 12px 22px -12px rgba(99,102,241,0.5);
}
.zx-stat-card-icon svg { width: 22px; height: 22px; }
.zx-stat-card-icon-a { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.zx-stat-card-icon-b { background: linear-gradient(135deg, #ec4899, #f472b6); }
.zx-stat-card-icon-c { background: linear-gradient(135deg, #06b6d4, #6366f1); }
.zx-stat-card-icon-d { background: linear-gradient(135deg, #10b981, #059669); }
.zx-stat-card-icon-warn { background: linear-gradient(135deg, #f59e0b, #ef4444); }

.zx-stat-card-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 800;
    color: var(--zx-text-muted);
}
.zx-stat-card-value {
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--zx-text);
}
.zx-stat-card-value-grad {
    background: linear-gradient(135deg, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zx-stat-card-value-warn { color: #f59e0b; }
.zx-stat-card-value-bad  { color: #ef4444; }
.zx-stat-card-quota {
    font-size: 1rem;
    font-weight: 600;
    color: var(--zx-text-muted);
    margin-left: 0.25rem;
}
.zx-stat-card-meta {
    margin: 0;
    font-size: 0.82rem;
    color: var(--zx-text-muted);
    line-height: 1.45;
}
.zx-stat-card-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    color: var(--primary-color);
    font-size: 0.82rem;
    font-weight: 700;
    margin-top: 0.2rem;
}
.zx-stat-card-link:hover { text-decoration: underline; }

/* ── Progress bar ───────────────────────────────────────── */
.zx-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--subtle-bg);
    overflow: hidden;
    border: 1px solid var(--zx-card-border);
}
.zx-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--zx-grad-brand);
    transition: width 0.7s var(--zx-ease);
    min-width: 2px;
}
.zx-progress-bar.is-warn { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.zx-progress-bar.is-bad  { background: linear-gradient(135deg, #ef4444, #dc2626); }

/* ── Quick actions ──────────────────────────────────────── */
.zx-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
}
.zx-quick-action {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: var(--zx-radius-lg);
    border: 1px solid var(--zx-card-border);
    background: var(--zx-card-bg);
    color: var(--zx-text);
    text-decoration: none;
    transition: transform 0.2s var(--zx-ease), box-shadow 0.2s var(--zx-ease), border-color 0.2s var(--zx-ease);
}
.zx-quick-action:hover {
    transform: translateY(-2px);
    border-color: rgba(139,92,246,0.40);
    box-shadow: var(--zx-elev-2);
}
.zx-quick-action-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: #fff;
    background: var(--zx-grad-brand);
    box-shadow: 0 8px 16px -8px rgba(139,92,246,0.55);
}
.zx-quick-action-icon svg { width: 18px; height: 18px; }
.zx-quick-action-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.zx-quick-action-label { font-weight: 700; font-size: 0.95rem; }
.zx-quick-action-arrow {
    margin-left: auto;
    color: var(--zx-text-muted);
    flex-shrink: 0;
    transition: transform 0.2s var(--zx-ease);
}
.zx-quick-action:hover .zx-quick-action-arrow { transform: translateX(3px); color: var(--primary-color); }

/* ── Activity timeline ──────────────────────────────────── */
.zx-timeline-card {
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.zx-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
.zx-timeline::before {
    content: "";
    position: absolute;
    left: 12px; top: 12px; bottom: 12px;
    width: 2px;
    background: linear-gradient(to bottom, var(--zx-card-border), transparent);
}
.zx-timeline-item {
    position: relative;
    padding: 0.75rem 0 0.75rem 2.25rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    align-items: center;
}
.zx-timeline-item::before {
    content: "";
    position: absolute;
    left: 6px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--zx-card-bg);
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.10);
    z-index: 1;
}
.zx-timeline-item.is-warn::before { border-color: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,0.12); }
.zx-timeline-item.is-bad::before  { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,0.12); }
.zx-timeline-item.is-ok::before   { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,0.12); }

.zx-timeline-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    min-width: 0;
}
.zx-timeline-action {
    font-size: 0.92rem;
    color: var(--zx-text);
    font-weight: 600;
    line-height: 1.3;
}
.zx-timeline-actor {
    font-weight: 600;
    color: var(--zx-text);
    font-size: 0.92rem;
}
.zx-timeline-time {
    font-size: 0.78rem;
    color: var(--zx-text-muted);
    white-space: nowrap;
}

/* ── Meta grid (key/value) ──────────────────────────────── */
.zx-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}
.zx-meta-cell {
    padding: 0.95rem;
    border-radius: var(--zx-radius-md);
    border: 1px solid var(--zx-card-border);
    background: var(--subtle-bg);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.zx-meta-cell-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    font-weight: 800;
    color: var(--zx-text-muted);
}
.zx-meta-cell-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--zx-text);
    line-height: 1.4;
    word-break: break-word;
}
.zx-meta-cell-meta { font-size: 0.78rem; color: var(--zx-text-muted); }

/* ── Generic cards used across app surface ─────────────── */
.zx-card {
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.zx-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}
.zx-card-head h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--zx-text);
    letter-spacing: -0.2px;
}
.zx-card-head p {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--zx-text-muted);
}

/* ── Status pills (extended for backend states) ────────── */
.zx-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border: 1px solid var(--zx-card-border);
    background: var(--subtle-bg);
    color: var(--zx-text-muted);
}
.zx-status::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}
.zx-status.is-ok    { color: #10b981; background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.35); }
.zx-status.is-warn  { color: #f59e0b; background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.35); }
.zx-status.is-bad   { color: #ef4444; background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.35); }
.zx-status.is-info  { color: #3b82f6; background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.35); }

/* ── Banner (for pending changes / cancellations) ──────── */
.zx-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.2rem;
    border-radius: var(--zx-radius-md);
    border: 1px solid var(--zx-card-border);
    background: var(--subtle-bg);
}
.zx-banner svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; }
.zx-banner-body { display: flex; flex-direction: column; gap: 0.25rem; }
.zx-banner-title { margin: 0; font-weight: 800; font-size: 0.92rem; letter-spacing: 0.2px; color: var(--zx-text); }
.zx-banner-text  { margin: 0; color: var(--zx-text-muted); font-size: 0.88rem; line-height: 1.5; }
.zx-banner.is-info {
    background: rgba(59,130,246,0.10);
    border-color: rgba(59,130,246,0.35);
}
.zx-banner.is-info svg { color: #3b82f6; }
.zx-banner.is-warn {
    background: rgba(245,158,11,0.10);
    border-color: rgba(245,158,11,0.35);
}
.zx-banner.is-warn svg { color: #f59e0b; }
.zx-banner.is-success {
    background: rgba(16,185,129,0.10);
    border-color: rgba(16,185,129,0.35);
}
.zx-banner.is-success svg { color: #10b981; }
.zx-banner.is-error {
    background: rgba(239,68,68,0.10);
    border-color: rgba(239,68,68,0.35);
}
.zx-banner.is-error svg { color: #ef4444; }

/* ── Subscription overview hero (billing) ───────────────── */
.zx-billing-hero {
    position: relative;
    isolation: isolate;
    border-radius: var(--zx-radius-xl);
    overflow: hidden;
    color: #f8fafc;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: var(--zx-elev-2);
    background: var(--zx-grad-hero-dark);
    padding: clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}
.zx-billing-hero-bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 70% 50%, #000 40%, transparent 100%);
    opacity: 0.55;
}
.zx-billing-hero-glow {
    position: absolute;
    width: 380px; height: 380px;
    border-radius: 50%; filter: blur(80px);
    opacity: 0.55; z-index: -1; pointer-events: none;
}
.zx-billing-hero-glow-a { background: var(--zx-glow-a); top: -120px; left: -100px; }
.zx-billing-hero-glow-b { background: var(--zx-glow-b); bottom: -160px; right: -80px; }

.zx-billing-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.zx-billing-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    color: rgba(255,255,255,0.92);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.zx-billing-hero-plan {
    margin: 0.2rem 0 0;
    font-size: clamp(2.4rem, 4.5vw, 3.5rem);
    line-height: 1;
    letter-spacing: -1.2px;
    font-weight: 900;
    background: linear-gradient(120deg, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zx-billing-hero-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    color: rgba(248,250,252,0.85);
    font-size: 0.92rem;
    margin-top: 0.5rem;
}
.zx-billing-hero-meta-row strong { color: #fff; font-weight: 700; }
.zx-billing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.zx-billing-hero-side {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.zx-billing-hero-stat {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--zx-radius-md);
    padding: 1rem 1.1rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.zx-billing-hero-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255,255,255,0.6);
    font-weight: 700;
}
.zx-billing-hero-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}

/* ── Workspace plan grid (billing) ─────────────────────── */
.zx-plan-grid-app {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.1rem;
}
.zx-plan-card-app {
    position: relative;
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    overflow: hidden;
    transition: transform 0.25s var(--zx-ease), box-shadow 0.25s var(--zx-ease), border-color 0.25s var(--zx-ease);
}
.zx-plan-card-app:hover {
    transform: translateY(-3px);
    border-color: rgba(139,92,246,0.40);
    box-shadow: var(--zx-elev-2);
}
.zx-plan-card-app.is-current {
    background:
        linear-gradient(var(--zx-card-bg), var(--zx-card-bg)) padding-box,
        var(--zx-grad-brand) border-box;
    border: 1.5px solid transparent;
    box-shadow: var(--zx-elev-glow);
}
.zx-plan-card-app.is-pending {
    border-color: rgba(245,158,11,0.40);
    background: linear-gradient(var(--zx-card-bg), var(--zx-card-bg)) padding-box, rgba(245,158,11,0.10) border-box;
}
.zx-plan-card-app-name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--zx-text);
    letter-spacing: -0.3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
}
.zx-plan-card-app-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin: 0.2rem 0 0;
}
.zx-plan-card-app-price-main {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.8px;
}
.zx-plan-card-app-price sup { font-size: 0.85rem; vertical-align: super; color: var(--zx-text-muted); }
.zx-plan-card-app-price-cycle { font-size: 0.85rem; color: var(--zx-text-muted); font-weight: 600; }
.zx-plan-card-app-desc {
    margin: 0;
    color: var(--zx-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    flex: 1;
}
.zx-plan-card-app-action { margin-top: 0.4rem; }
.zx-plan-card-app-pending-note {
    margin: 0;
    font-size: 0.78rem;
    color: var(--zx-text-muted);
    text-align: center;
}

/* ── App table (invoices, etc) ─────────────────────────── */
.zx-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--zx-radius-md);
    border: 1px solid var(--zx-card-border);
}
.zx-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
    font-size: 0.9rem;
}
.zx-table thead th {
    position: sticky;
    top: 0;
    background: var(--zx-card-bg);
    border-bottom: 1px solid var(--zx-card-border);
    text-align: left;
    padding: 0.85rem 1rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    font-weight: 800;
    color: var(--zx-text-muted);
}
.zx-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--zx-card-border);
    color: var(--zx-text);
    vertical-align: middle;
}
.zx-table tbody tr:nth-child(even) td { background: var(--subtle-bg); }
.zx-table tbody tr:last-child td { border-bottom: 0; }
.zx-table-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; color: var(--zx-text-muted); }
.zx-table-amount { font-weight: 800; text-align: right; }
.zx-table-actions { text-align: right; white-space: nowrap; }
.zx-table-icon-link {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    color: var(--zx-text-muted);
    text-decoration: none;
    transition: background 0.18s var(--zx-ease), color 0.18s var(--zx-ease);
}
.zx-table-icon-link svg { width: 16px; height: 16px; }
.zx-table-icon-link:hover { background: var(--subtle-bg); color: var(--primary-color); }

/* ── Webhook timeline (billing) ────────────────────────── */
.zx-event-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.zx-event-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.95rem 1.1rem;
    border-radius: var(--zx-radius-md);
    border: 1px solid var(--zx-card-border);
    background: var(--zx-card-bg);
    transition: border-color 0.2s var(--zx-ease);
}
.zx-event-item:hover { border-color: rgba(139,92,246,0.30); }
.zx-event-item.is-error { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.05); }

.zx-event-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.zx-event-icon svg { width: 18px; height: 18px; }
.zx-event-item.is-error .zx-event-icon { background: linear-gradient(135deg, #ef4444, #dc2626); }
.zx-event-item.is-warn  .zx-event-icon { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.zx-event-item.is-ok    .zx-event-icon { background: linear-gradient(135deg, #10b981, #059669); }

.zx-event-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.zx-event-title { margin: 0; font-weight: 700; font-size: 0.92rem; color: var(--zx-text); }
.zx-event-sub   { margin: 0; font-size: 0.78rem; color: var(--zx-text-muted); }
.zx-event-meta  { font-size: 0.78rem; color: var(--zx-text-muted); text-align: right; white-space: nowrap; }
.zx-event-details {
    grid-column: 1 / -1;
    margin: 0.6rem 0 0;
    padding-left: 1.1rem;
    color: var(--zx-text-muted);
    font-size: 0.85rem;
    list-style: disc;
}
.zx-event-details li + li { margin-top: 0.2rem; }

/* ── Filter chip row (my-apps) ─────────────────────────── */
.zx-app-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.zx-app-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: var(--zx-card-bg);
    color: var(--zx-text-muted);
    border: 1px solid var(--zx-card-border);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s var(--zx-ease), color 0.2s var(--zx-ease), border-color 0.2s var(--zx-ease);
}
.zx-app-chip span {
    padding: 0.05rem 0.42rem;
    border-radius: 999px;
    background: var(--subtle-bg);
    font-size: 0.72rem;
    color: var(--zx-text-muted);
}
.zx-app-chip:hover { color: var(--zx-text); border-color: rgba(139,92,246,0.35); }
.zx-app-chip.is-active {
    background: var(--zx-grad-brand);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 18px -10px rgba(139,92,246,0.55);
}
.zx-app-chip.is-active span { background: rgba(255,255,255,0.20); color: #fff; }

/* ── App card (my-apps) ────────────────────────────────── */
.zx-app-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}
.zx-app-card {
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform 0.25s var(--zx-ease), box-shadow 0.25s var(--zx-ease), border-color 0.25s var(--zx-ease);
}
.zx-app-card:hover {
    transform: translateY(-3px);
    border-color: rgba(139,92,246,0.40);
    box-shadow: var(--zx-elev-2);
}
.zx-app-card-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: center;
}
.zx-app-card-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--zx-grad-brand);
    color: #fff;
    font-weight: 800;
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center; justify-content: center;
    box-shadow: 0 14px 24px -14px rgba(139,92,246,0.6);
    overflow: hidden;
}
.zx-app-card-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.zx-app-card-info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.zx-app-card-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--zx-text); }
.zx-app-card-desc  {
    margin: 0;
    color: var(--zx-text-muted);
    font-size: 0.86rem;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zx-app-card-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }

.zx-app-card .zx-meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}
.zx-app-card .zx-meta-cell {
    padding: 0.68rem 0.78rem;
    gap: 0.25rem;
}
.zx-app-card .zx-meta-cell-label {
    font-size: 0.66rem;
}
.zx-app-card .zx-meta-cell-value {
    font-size: 0.88rem;
}

.zx-app-card-details {
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-md);
    background: var(--subtle-bg);
    overflow: hidden;
}
.zx-app-card-details > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 42px;
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    color: var(--zx-text);
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.zx-app-card-details > summary::-webkit-details-marker { display: none; }
.zx-app-card-details > summary svg {
    width: 18px;
    height: 18px;
    color: var(--zx-text-muted);
    transition: transform 0.18s var(--zx-ease);
}
.zx-app-card-details[open] > summary {
    border-bottom: 1px solid var(--zx-card-border);
}
.zx-app-card-details[open] > summary svg { transform: rotate(180deg); }
.zx-app-card-details > div,
.zx-app-card-details > .zx-banner,
.zx-app-card-details > .zx-module-access {
    margin: 0.85rem;
}

.zx-app-activations {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}
.zx-app-activation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    min-width: 0;
    padding: 0.85rem 0.95rem;
    border-radius: var(--zx-radius-md);
    border: 1px solid var(--zx-card-border);
    background: var(--subtle-bg);
}
.zx-app-activation > div { min-width: 0; }
.zx-app-activation.is-current {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.06);
}
.zx-app-activation.is-action {
    border-style: dashed;
    background: var(--zx-card-bg);
}
.zx-app-activation-name { margin: 0 0 0.2rem; font-weight: 700; font-size: 0.9rem; color: var(--zx-text); }
.zx-app-activation-meta { margin: 0; font-size: 0.78rem; color: var(--zx-text-muted); }
.zx-app-activation-cta {
    flex: 0 0 auto;
    border: 0;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    background: var(--zx-grad-brand);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.16);
    white-space: nowrap;
}
.zx-app-activation-cta:hover { transform: translateY(-1px); }
@media (max-width: 640px) {
    .zx-app-activation {
        align-items: stretch;
        flex-direction: column;
    }
    .zx-app-activation-cta { width: 100%; }
}

.zx-module-access {
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-md);
    background: var(--subtle-bg);
    padding: 0.9rem;
}
.zx-module-access-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.zx-module-access-head h4 { margin: 0; }
.zx-module-access-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.6rem;
}
.zx-module-access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    border: 1px solid var(--zx-card-border);
    border-radius: 10px;
    background: var(--zx-card-bg);
    padding: 0.7rem;
}
.zx-module-access-name {
    margin: 0 0 0.12rem;
    color: var(--zx-text);
    font-size: 0.88rem;
    font-weight: 800;
}
.zx-module-access-meta {
    margin: 0;
    color: var(--zx-text-muted);
    font-size: 0.76rem;
    word-break: break-word;
}
.zx-switch-action {
    width: 48px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--zx-card-border);
    background: rgba(148,163,184,0.20);
    padding: 3px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s var(--zx-ease), border-color 0.2s var(--zx-ease);
}
.zx-switch-action span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    display: block;
    transition: transform 0.2s var(--zx-ease);
}
.zx-switch-action.is-on {
    background: rgba(16,185,129,0.28);
    border-color: rgba(16,185,129,0.55);
}
.zx-switch-action.is-on span { transform: translateX(20px); }

.zx-module-access-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: nowrap;
}
.zx-role-form {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.zx-role-select-label {
    font-size: 0.7rem;
    color: var(--zx-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.zx-role-select {
    appearance: none;
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: 8px;
    padding: 0.35rem 1.6rem 0.35rem 0.55rem;
    font-size: 0.85rem;
    color: inherit;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}
.zx-role-select:focus {
    outline: 2px solid rgba(99, 102, 241, 0.4);
    outline-offset: 1px;
}

.zx-app-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--zx-card-border);
}
.zx-app-card-foot-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.zx-app-card-foot-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.zx-approval-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.zx-approval-card {
    background: var(--zx-card-bg);
    border: 1px solid rgba(245,158,11,0.32);
    border-radius: var(--zx-radius-lg);
    padding: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 18px 42px -32px rgba(245,158,11,0.45);
}
.zx-approval-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.zx-approval-main h3 {
    margin: 0;
    color: var(--zx-text);
    font-size: 1.05rem;
    font-weight: 800;
}
.zx-approval-main p {
    margin: 0;
    color: var(--zx-text-muted);
    line-height: 1.45;
    font-size: 0.9rem;
}
.zx-approval-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.zx-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Smaller secondary buttons */
.zx-btn-sm {
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
    border-radius: 10px;
}
.zx-btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 22px -12px rgba(16,185,129,0.55);
}
.zx-btn-success:hover { transform: translateY(-1px); }
.zx-btn-danger {
    background: rgba(239,68,68,0.10);
    color: #ef4444;
    border-color: rgba(239,68,68,0.40);
}
.zx-btn-danger:hover { background: rgba(239,68,68,0.18); transform: translateY(-1px); }
.zx-btn-warning {
    background: rgba(245,158,11,0.10);
    color: #f59e0b;
    border-color: rgba(245,158,11,0.42);
}
.zx-btn-warning:hover { background: rgba(245,158,11,0.18); transform: translateY(-1px); }

/* ── Responsive — app surface ──────────────────────────── */
/* Backup dashboard */
.zx-backups-page {
    width: min(1320px, 100%);
    margin: 0 auto;
}

.zx-backups-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: end;
    margin-bottom: 1rem;
}

.zx-backups-hero h1 {
    margin: 0.65rem 0 0.35rem;
    color: var(--text-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: 0;
}

.zx-backups-hero p {
    margin: 0;
    color: var(--text-secondary);
}

.zx-backups-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.zx-backup-metric,
.zx-backup-notice,
.zx-backups-panel,
.zx-backup-row {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
}

.zx-backup-metric {
    padding: 1rem;
}

.zx-backup-metric span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.zx-backup-metric strong {
    color: var(--text-primary);
    font-size: 1.65rem;
    line-height: 1.1;
}

.zx-backup-metric--warning {
    border-color: rgba(245, 158, 11, 0.45);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), var(--card-bg));
}

.zx-backup-notice {
    padding: 1rem;
    margin-bottom: 1rem;
}

.zx-backup-notice strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.zx-backup-notice p {
    margin: 0;
    color: var(--text-secondary);
}

.zx-backup-operation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(99,102,241,0.4);
    border-radius: 8px;
    background: rgba(99,102,241,0.10);
}

.zx-backup-operation span,
.zx-backup-operation small {
    display: block;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.zx-backup-operation strong {
    display: block;
    margin: 0.2rem 0;
    color: var(--text-primary);
}

.zx-backup-operation-pill {
    flex: 0 0 auto;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(99,102,241,0.2);
    color: #818cf8 !important;
}

.zx-backup-operation--failed {
    border-color: rgba(239,68,68,0.45);
    background: rgba(239,68,68,0.10);
}

.zx-backup-operation--complete {
    border-color: rgba(16,185,129,0.45);
    background: rgba(16,185,129,0.10);
}

.zx-backups-panel {
    padding: 1rem;
}

.zx-backup-config-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.zx-backup-config-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.55);
    padding: 1rem;
    display: grid;
    gap: 0.85rem;
}

.zx-backup-config-card-head h3 {
    margin: 0 0 0.2rem;
    color: var(--text-primary);
}

.zx-backup-config-card-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.zx-backup-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.42);
}

.zx-backup-check input {
    margin-top: 0.2rem;
}

.zx-backup-check strong,
.zx-backup-field label {
    display: block;
    color: var(--text-primary);
    font-weight: 800;
}

.zx-backup-check small {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.zx-backup-field small {
    color: var(--text-secondary);
    line-height: 1.4;
}

.zx-backup-field {
    display: grid;
    gap: 0.4rem;
}

.zx-backup-field select {
    width: 100%;
    min-height: 46px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--input-bg, rgba(15, 23, 42, 0.78));
    color: var(--text-primary);
    padding: 0.7rem 0.85rem;
}

.zx-backup-config-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

.zx-backup-list {
    display: grid;
    gap: 0.75rem;
}

.zx-backup-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem;
}

.zx-backup-row strong {
    display: block;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.zx-backup-row span {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.zx-backup-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.zx-backup-actions form {
    margin: 0;
}

@media (max-width: 820px) {
    .zx-backups-hero,
    .zx-backup-row,
    .zx-backup-config-form {
        grid-template-columns: 1fr;
    }

    .zx-backups-hero form,
    .zx-backups-hero button,
    .zx-backup-actions,
    .zx-backup-actions .zx-btn,
    .zx-backup-actions form {
        width: 100%;
    }

    .zx-backups-summary {
        grid-template-columns: 1fr;
    }

    .zx-backup-config-actions {
        justify-content: stretch;
    }

    .zx-backup-config-actions .btn-primary {
        width: 100%;
    }
}

@media (max-width: 880px) {
    .zx-greeting {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .zx-greeting-meta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
    .zx-billing-hero { grid-template-columns: 1fr; }
    .zx-app-card-head { grid-template-columns: auto 1fr; }
    .zx-app-card-badges { grid-column: 1 / -1; justify-content: flex-start; }
    .zx-app-card .zx-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zx-approval-card { flex-direction: column; }
    .zx-approval-actions { justify-content: flex-start; }
}
@media (max-width: 600px) {
    .zx-app { gap: 1.5rem; }
    .zx-app-section-head { flex-direction: column; align-items: flex-start; }
    .zx-quick-grid,
    .zx-stat-grid,
    .zx-app-card .zx-meta-grid,
    .zx-plan-grid-app { grid-template-columns: 1fr; }
    .zx-greeting-main { flex-direction: column; align-items: flex-start; text-align: left; }
    .zx-greeting-avatar { width: 50px; height: 50px; font-size: 1.25rem; }
    .zx-event-item { grid-template-columns: 1fr; }
    .zx-event-meta  { text-align: left; }
    .zx-event-icon  { display: none; }
    .zx-billing-hero-meta-row { flex-direction: column; gap: 0.4rem; }
    /* .zx-table mobile sizing handled by the dashboard mobile block
       (width:auto + min-width:100%) so columns size to content. */
}

/* =========================================
   ZX Documentation viewer — /admin/docs
   ========================================= */
.zx-docs {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
}

/* Hero (compact greeting-style) */
.zx-docs-hero {
    position: relative;
    isolation: isolate;
    border-radius: var(--zx-radius-xl);
    overflow: hidden;
    color: #f8fafc;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: var(--zx-elev-2);
    background: var(--zx-grad-hero-dark);
}
.zx-docs-hero-bg {
    position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 30% 50%, #000 40%, transparent 100%);
    opacity: 0.55;
}
.zx-docs-hero-glow {
    position: absolute;
    width: 360px; height: 360px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}
.zx-docs-hero-glow-a { background: var(--zx-glow-a); top: -120px; left: -100px; }
.zx-docs-hero-glow-b { background: var(--zx-glow-b); bottom: -160px; right: -80px; }
.zx-docs-hero-inner {
    position: relative;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.zx-docs-hero-title {
    margin: 0.2rem 0 0;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.6px;
    color: #fff;
    font-weight: 800;
}
.zx-docs-hero-sub {
    margin: 0;
    color: rgba(248,250,252,0.78);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 760px;
}

/* Three-column shell: doc list / content / TOC */
.zx-docs-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 220px;
    gap: 1.5rem;
    align-items: start;
}

/* LEFT: doc list */
.zx-docs-side {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.zx-docs-side-search {
    position: relative;
}
.zx-docs-side-search svg {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--zx-text-muted);
    pointer-events: none;
}
.zx-docs-side-search input {
    width: 100%;
    padding: 0.6rem 0.85rem 0.6rem 2.2rem;
    border-radius: 999px;
    border: 1px solid var(--zx-card-border);
    background: var(--subtle-bg);
    color: var(--zx-text);
    font-size: 0.85rem;
    transition: box-shadow 0.18s var(--zx-ease), border-color 0.18s var(--zx-ease);
}
.zx-docs-side-search input::placeholder { color: var(--zx-text-muted); }
.zx-docs-side-search input:focus {
    outline: none;
    border-color: rgba(139,92,246,0.4);
    box-shadow: var(--zx-ring);
}
.zx-docs-nav {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.zx-docs-nav-group { display: flex; flex-direction: column; gap: 0.4rem; }
.zx-docs-nav-group-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--zx-text-muted);
    font-weight: 800;
    padding: 0 0.2rem;
}
.zx-docs-nav-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.zx-docs-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none;
    color: var(--zx-text);
    transition: background 0.18s var(--zx-ease), border-color 0.18s var(--zx-ease);
}
.zx-docs-nav-link:hover {
    background: var(--subtle-bg);
    border-color: var(--zx-card-border);
}
.zx-docs-nav-link.is-active {
    background:
        linear-gradient(var(--zx-card-bg), var(--zx-card-bg)) padding-box,
        var(--zx-grad-brand) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 10px 22px -16px rgba(139,92,246,0.55);
}
.zx-docs-nav-link.is-active .zx-docs-nav-link-title {
    background: linear-gradient(135deg, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zx-docs-nav-link-title { font-weight: 700; font-size: 0.9rem; }
.zx-docs-nav-link-desc  { font-size: 0.76rem; color: var(--zx-text-muted); line-height: 1.4; }
.zx-docs-no-match {
    padding: 0.85rem;
    border-radius: var(--zx-radius-md);
    border: 1px dashed var(--zx-card-border);
    color: var(--zx-text-muted);
    font-size: 0.85rem;
    text-align: center;
}

/* CENTER: content */
.zx-docs-content {
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    min-width: 0;
    overflow-wrap: break-word;
}
.zx-docs-content-head {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--zx-card-border);
}
.zx-docs-content-title {
    margin: 0.3rem 0 0;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.6px;
    color: var(--zx-text);
    font-weight: 800;
}
.zx-docs-content-desc { margin: 0; color: var(--zx-text-muted); font-size: 0.95rem; line-height: 1.55; }
.zx-docs-content-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--zx-text-muted);
}
.zx-docs-content-meta strong { color: var(--zx-text); font-weight: 700; }
.zx-docs-content-meta code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--subtle-bg);
    padding: 0.1rem 0.42rem;
    border-radius: 6px;
    border: 1px solid var(--zx-card-border);
    font-size: 0.78rem;
}

/* RIGHT: in-page TOC */
.zx-docs-toc {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1rem 0.5rem 1rem 1rem;
    border-left: 1px solid var(--zx-card-border);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.zx-docs-toc-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 800;
    color: var(--zx-text-muted);
}
.zx-docs-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.zx-docs-toc-item a {
    display: block;
    padding: 0.32rem 0.55rem;
    border-radius: 6px;
    color: var(--zx-text-muted);
    text-decoration: none;
    font-size: 0.82rem;
    line-height: 1.4;
    border-left: 2px solid transparent;
    transition: color 0.18s var(--zx-ease), background 0.18s var(--zx-ease), border-color 0.18s var(--zx-ease);
}
.zx-docs-toc-l3 a { padding-left: 1.4rem; font-size: 0.78rem; }
.zx-docs-toc-item a:hover { color: var(--zx-text); background: var(--subtle-bg); }
.zx-docs-toc-item a.is-active {
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    background: rgba(99,102,241,0.07);
    font-weight: 700;
}

/* =========================================
   ZX Markdown prose — rendered docs body
   ========================================= */
.zx-docs-prose {
    color: var(--zx-text);
    font-size: 0.95rem;
    line-height: 1.65;
}
.zx-docs-prose > * + * { margin-top: 1.1rem; }
.zx-docs-prose .zx-md-h {
    position: relative;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--zx-text);
    scroll-margin-top: 90px;
}
.zx-docs-prose .zx-md-h1 { font-size: 1.8rem; font-weight: 800; margin-top: 2rem; }
.zx-docs-prose .zx-md-h2 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-top: 2.2rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--zx-card-border);
}
.zx-docs-prose .zx-md-h3 { font-size: 1.15rem; font-weight: 700; margin-top: 1.6rem; }
.zx-docs-prose .zx-md-h4 { font-size: 1rem; font-weight: 700; margin-top: 1.3rem; color: var(--zx-text-muted); }
.zx-docs-prose .zx-md-h5,
.zx-docs-prose .zx-md-h6 { font-size: 0.92rem; font-weight: 700; margin-top: 1.2rem; color: var(--zx-text-muted); }
.zx-docs-prose .zx-md-anchor {
    display: inline-block;
    margin-left: -1.4rem;
    width: 1.4rem;
    text-align: center;
    color: var(--zx-text-muted);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.18s var(--zx-ease);
    font-weight: 400;
}
.zx-docs-prose .zx-md-h:hover .zx-md-anchor { opacity: 0.7; }

.zx-docs-prose .zx-md-p { margin: 0; color: var(--zx-text); }
.zx-docs-prose .zx-md-link {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px dashed rgba(99,102,241,0.4);
    transition: color 0.15s var(--zx-ease), border-color 0.15s var(--zx-ease);
}
.zx-docs-prose .zx-md-link:hover { color: var(--primary-hover); border-color: var(--primary-color); }

.zx-docs-prose .zx-md-list {
    margin: 0;
    padding-left: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.zx-docs-prose .zx-md-list li { line-height: 1.6; }
.zx-docs-prose ul.zx-md-list li::marker { color: var(--primary-color); }
.zx-docs-prose ol.zx-md-list li::marker { color: var(--primary-color); font-weight: 700; }

.zx-docs-prose .zx-md-quote {
    margin: 0;
    padding: 0.85rem 1.1rem;
    border-radius: var(--zx-radius-md);
    border-left: 3px solid var(--primary-color);
    background: var(--subtle-bg);
    color: var(--zx-text-muted);
    font-style: italic;
}

.zx-docs-prose .zx-md-hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--zx-card-border), transparent);
    margin: 2rem 0;
}

.zx-docs-prose .zx-md-inline-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--subtle-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: 6px;
    padding: 0.1rem 0.42rem;
    font-size: 0.85em;
    color: var(--primary-color);
    white-space: pre-wrap;
    word-break: break-word;
}

.zx-docs-prose .zx-md-code {
    background: rgba(15, 23, 42, 0.85);
    color: #e2e8f0;
    padding: 1rem 1.2rem;
    border-radius: var(--zx-radius-md);
    border: 1px solid var(--zx-card-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    line-height: 1.55;
    overflow-x: auto;
    position: relative;
}
.zx-docs-prose .zx-md-code::before {
    content: attr(data-lang);
    position: absolute;
    top: 0.45rem;
    right: 0.6rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(226,232,240,0.5);
    font-weight: 700;
    pointer-events: none;
}
.zx-docs-prose .zx-md-code code {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
}
html[data-theme='light'] .zx-docs-prose .zx-md-code,
@media (prefers-color-scheme: light) {
    .zx-docs-prose .zx-md-code {
        background: #0f172a;
    }
}

.zx-docs-prose .zx-md-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--zx-radius-md);
    border: 1px solid var(--zx-card-border);
}
.zx-docs-prose .zx-md-table {
    width: 100%;
    border-collapse: collapse;
    /* Generous min-width so wide tables (transition matrix, feature
       matrix) trigger the wrapper's horizontal scroll instead of
       squishing every column down to a few characters. */
    min-width: 860px;
    font-size: 0.88rem;
}
.zx-docs-prose .zx-md-table th,
.zx-docs-prose .zx-md-table td {
    padding: 0.7rem 0.95rem;
    border-bottom: 1px solid var(--zx-card-border);
    vertical-align: top;
    line-height: 1.5;
    /* Allow soft wrapping on prose, but only at natural word boundaries.
       The mid-word breaking applied to inline code elsewhere is overridden
       below so identifiers stay readable in narrow columns. */
    word-break: normal;
    overflow-wrap: break-word;
}
/* Inline code inside a table cell must stay on one line — otherwise
   identifiers like `changeStripeSubscriptionPlan` shatter into vertical
   character salad. Forcing nowrap also widens the column naturally so
   the wrapper picks up horizontal scroll for cramped tables. */
.zx-docs-prose .zx-md-table .zx-md-inline-code {
    white-space: nowrap;
    word-break: keep-all;
}
.zx-docs-prose .zx-md-table thead th {
    background: var(--subtle-bg);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    color: var(--zx-text-muted);
    font-weight: 800;
}
.zx-docs-prose .zx-md-table tbody tr:last-child td { border-bottom: 0; }
.zx-docs-prose .zx-md-table tbody tr:nth-child(even) td { background: var(--subtle-bg); }

/* Responsive */
@media (max-width: 1180px) {
    .zx-docs-shell {
        grid-template-columns: 240px minmax(0, 1fr);
    }
    .zx-docs-toc { display: none; }
}
@media (max-width: 820px) {
    .zx-docs-shell {
        grid-template-columns: 1fr;
    }
    .zx-docs-side {
        position: static;
        max-height: none;
    }
}

/* =========================================
   Responsive Design (Mobile Optimization)
   ========================================= */

/* Hamburger Button - only visible on mobile */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    z-index: 101;
}
.hamburger-btn span {
    display: block;
    width: 18px;
    height: 2px;
    background-color: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Mobile drawer backdrop */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    z-index: 99;
    animation: fadeIn 0.2s ease-out;
}
.sidebar-backdrop.open { display: block; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Migration dashboard */
.zx-migrations-page {
    width: min(1480px, 100%);
    margin: 0 auto;
}

.zx-migrations-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

.zx-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.22rem 0.7rem;
    border: 1px solid rgba(99, 102, 241, 0.45);
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.zx-migrations-header h1 {
    margin: 0.65rem 0 0.35rem;
    color: var(--text-primary);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    letter-spacing: 0;
}

.zx-migrations-header p,
.zx-panel-heading p {
    margin: 0;
    color: var(--text-secondary);
}

.zx-migrations-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: end;
}

.zx-migrations-actions .btn-primary {
    width: auto;
    margin: 0;
}

.zx-rollback-form {
    display: grid;
    grid-template-columns: auto 82px auto;
    gap: 0.5rem;
    align-items: end;
}

.zx-rollback-form label {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.zx-rollback-form input {
    height: 42px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg, var(--card-bg));
    color: var(--text-primary);
    padding: 0 0.7rem;
}

.zx-rollback-form button {
    height: 42px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-weight: 800;
    cursor: pointer;
}

.zx-migrations-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.zx-migration-metric,
.zx-migrations-panel,
.zx-pending-item {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 8px;
}

.zx-migration-metric {
    padding: 1rem;
}

.zx-migration-metric span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.zx-migration-metric strong {
    color: var(--text-primary);
    font-size: 1.75rem;
    line-height: 1;
}

.zx-migration-metric--pending {
    border-color: rgba(245, 158, 11, 0.55);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), var(--card-bg));
}

.zx-migrations-panel {
    padding: 1rem;
    min-width: 0;
}

.zx-pending-panel {
    margin-bottom: 1rem;
}

.zx-panel-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.zx-panel-heading h2 {
    margin: 0 0 0.25rem;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 900;
}

.zx-pending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
}

/* ── Shared responsive helpers for admin views ────────────────────────
   Inline-styled tables overflow on phones because their natural width
   exceeds the viewport. These two utilities give every view a way to:
     1. wrap a table so it scrolls horizontally instead of clipping
     2. force the table to keep a reasonable minimum width so it does
        not collapse into unreadable, broken columns
   Apply on any admin index view by wrapping `<table>` in
   `<div class="zx-table-wrap">` and adding `class="zx-table"` to the
   table itself. Tweak min-width with `style="--zx-table-min:720px"`
   when a specific view needs more or less.
*/
.zx-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Visible scrollbar + right-edge fade so users on Windows see
       that the table scrolls horizontally (Chrome/Edge hide auto
       scrollbars by default until the user starts scrolling). */
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
}
.zx-table-wrap::-webkit-scrollbar { height: 8px; }
.zx-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 99px;
}
.zx-table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.7);
}
.zx-table-wrap::-webkit-scrollbar-track { background: transparent; }
.zx-table {
    width: 100%;
    border-collapse: collapse;
    min-width: var(--zx-table-min, 720px);
}
/* When the viewport is wide enough that the table fits, drop the
   right-edge fade so we don't hint at content that doesn't exist. */
@media (min-width: 1100px) {
    .zx-table-wrap {
        -webkit-mask-image: none;
                mask-image: none;
    }
}

/* ── Responsive page header (title + primary action) ──────────────────
   Use on any admin index that has a "title + description on the left,
   primary CTA button on the right" pattern. On phones the button
   wraps under the title and goes full-width.
*/
.zx-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.zx-page-header__cta {
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .zx-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
    .zx-page-header__cta {
        width: 100%;
        text-align: center;
    }
    .zx-page-header h1 {
        font-size: 1.5rem !important;
    }
}

.zx-pending-item {
    padding: 0.9rem;
}

.zx-pending-item span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.zx-pending-item strong {
    display: block;
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.zx-pending-item p {
    margin: 0.35rem 0 0;
    color: var(--text-secondary);
}

.zx-pending-item--error {
    border-color: rgba(239, 68, 68, 0.55);
}

.zx-migration-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0;
}

.zx-migration-filters button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 36px;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-weight: 800;
    cursor: pointer;
}

.zx-migration-filters button.is-active {
    border-color: rgba(99, 102, 241, 0.65);
    background: linear-gradient(135deg, #6d5dfc, #df45a5);
    color: #fff;
}

.zx-migration-filters span {
    min-width: 1.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    text-align: center;
}

.zx-migrations-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.zx-migration-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Windows/Chrome hides scrollbars by default for overflow-x:auto
       containers, so users could not tell the table was scrollable
       and perceived the long migration IDs as 'cut off'. We:
         1. Force a visible thin scrollbar (Firefox + WebKit)
         2. Fade the right edge of the wrap with a CSS mask so the
            cut content reads as 'continues' instead of 'truncated' */
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
}
.zx-migration-table-wrap::-webkit-scrollbar { height: 8px; }
.zx-migration-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 99px;
}
.zx-migration-table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.7);
}
.zx-migration-table-wrap::-webkit-scrollbar-track { background: transparent; }
/* When the table fully fits (desktop), drop the fade so we do not
   visually hint at content that does not exist. */
@media (min-width: 880px) {
    .zx-migration-table-wrap {
        -webkit-mask-image: none;
                mask-image: none;
    }
}

.zx-migration-table {
    width: 100%;
    border-collapse: collapse;
    /* Long migration IDs (20260519_000011_widen_stripe…) plus status
       badge and description cannot fit comfortably under ~720px. The
       wrap above gives horizontal scroll on phones; the min-width
       makes sure the table actually opts in instead of squishing
       cells and stacking the IDs into ugly vertical strings. */
    min-width: 720px;
}

.zx-migration-table th {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
}

.zx-migration-table td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: top;
}

.zx-migration-table--compact th,
.zx-migration-table--compact td {
    padding: 0.55rem 0.45rem;
    font-size: 0.88rem;
}

.zx-migration-table code,
.zx-module-migration-head code {
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Inside the scrolling table wrap, keep migration IDs on one line so
   the wrap takes care of overflow with horizontal scroll. Wrapping
   them aggressively into vertical strings made every row 4-5 lines
   tall on phones. */
.zx-migration-table code {
    white-space: nowrap;
}

/* The per-module heading is NOT inside a scroll wrap, so its slug
   code can wrap if needed to avoid pushing the layout. */
.zx-module-migration-head code {
    overflow-wrap: anywhere;
}

.zx-migration-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.zx-migration-status--up {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.zx-migration-status--pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.zx-module-migrations-list {
    display: grid;
    gap: 0.9rem;
}

.zx-module-migration-block {
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    /* CSS grid gotcha: grid items default to min-width: auto which
       means 'do not shrink below my intrinsic content size'. The
       table inside has min-width: 720px so without this rule the
       block refuses to shrink below 720px and the WHOLE page ends up
       horizontally scrollable on phones, instead of the table itself
       scrolling within its wrap. Same trick as .zx-migrations-panel
       a few rules above. */
    min-width: 0;
}

.zx-module-migration-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.65rem;
}

.zx-module-migration-head strong {
    color: var(--text-primary);
}

.zx-module-migration-head code {
    display: inline-block;
    margin-left: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.zx-module-migration-head span,
.zx-empty-state {
    color: var(--text-secondary);
}

.zx-empty-state {
    margin: 0;
    padding: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    text-align: center;
}

.zx-empty-state--compact {
    padding: 0.7rem;
    text-align: left;
}

.zx-module-error {
    margin: 0;
    color: #ef4444;
}

@media screen and (max-width: 1100px) {
    .zx-migrations-header,
    .zx-migrations-grid {
        grid-template-columns: 1fr;
    }

    .zx-migrations-actions {
        justify-content: flex-start;
    }

    .zx-migrations-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 640px) {
    .zx-migrations-summary {
        grid-template-columns: 1fr;
    }

    .zx-rollback-form {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .zx-migrations-actions,
    .zx-migrations-actions form,
    .zx-migrations-actions button,
    .zx-rollback-form input {
        width: 100%;
    }

    .zx-module-migration-head {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    /* Let mobile browsers own the page scroll so native gestures such as
       pull-to-refresh work in authenticated screens. */
    .dashboard-body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .dashboard-layout {
        height: auto;
        min-height: 100svh;
    }

    .main-wrapper,
    .main-content {
        overflow: visible;
        /* Flex children default to min-width:auto, which means the
           min-content of their descendants (a .zx-table with min-width:
           480px, for example) inflates the column and stretches the
           whole page beyond the viewport. min-width:0 lets the wrapper
           clip down to viewport width so .zx-table-wrap scrolls
           horizontally on its own instead of dragging the layout. */
        min-width: 0;
    }

    .zx-table-wrap {
        max-width: 100%;
    }

    /* Long unbreakable content (IPv6 addresses in sessions list,
       full User-Agent strings, monospace invoice numbers like
       INV-2026-0005 at 2rem) was treated as single words and
       extended cards past the viewport edge. overflow-wrap is an
       inherited property, so setting it on .dashboard-body cascades
       to every text node inside the dashboard on phones.
       Note: break-word (not anywhere) only breaks when the word
       would actually overflow, so normal table-cell content like
       "Family" or "Activo" stays intact instead of being chopped
       mid-word into "Activ / o". */
    .dashboard-body {
        overflow-wrap: break-word;
    }

    /* Table fix: with width:100% + min-width:480px on a 360px viewport
       the wrapper is 360px wide, the table is forced to 480px, and
       each of N columns gets ~480/N pixels — too narrow for headers
       like "EMPRESA" or "USUARIOS" which then wrap mid-word. Letting
       width go auto with min-width:100% means the table fills the
       wrapper when sparse but grows naturally when content needs
       space (and the wrapper's overflow-x: auto handles the scroll). */
    .zx-table {
        width: auto;
        min-width: 100%;
    }
    .zx-table thead th {
        white-space: nowrap;
    }

    /* .zx-card-head is flex with two columns (title left, amount
       right). Its direct children default to min-width:auto, so the
       min-content of the monospace invoice number forces the left
       column wider than the viewport before flex-wrap can stack
       them. Allow shrink-to-fit so the columns actually wrap. */
    .zx-card-head > * {
        min-width: 0;
    }

    /* Topbars were visually fixed on desktop only because the scroll
       lived inside .main-content (now overflow:visible on mobile).
       With the body owning the scroll, sticky keeps them anchored to
       the viewport top without needing JS or position:fixed (which
       would break the flex layout). */
    .topbar,
    .legal-topbar {
        position: sticky;
        top: 0;
    }

    /* Public layouts created a nested scroll container (.legal-main
       overflow-y:auto, .public-main-auth overflow:hidden) that fought
       with the body scroll on touchscreens, producing the "page is
       frozen" feel where you can't scroll past the first viewport.
       Hand the scroll back to the body on phones. */
    .legal-main,
    .public-main-auth {
        overflow: visible;
    }

    /* Topbar gets a hamburger slot on the left */
    .topbar {
        justify-content: space-between;
        padding: 0 1.25rem;
    }

    /* Sidebar becomes a fixed left drawer */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        /* 100vh on mobile Chrome includes the area behind the URL bar
         * + the gesture pill. 100dvh tracks the actually-visible
         * viewport. Fallback for older browsers stays at 100vh. */
        height: 100vh;
        height: 100dvh;
        width: 260px;
        /* Bottom padding strategy: a hardcoded 2.5rem floor so the
         * last .nav-links entry always clears typical Android gesture
         * bars even when env() returns 0 (3-button nav, older Chrome,
         * pages without viewport-fit=cover). On devices that DO report
         * a safe-area inset, env() lifts it further. max() picks the
         * larger of the two so we never regress. */
        padding: 1.5rem 1.5rem
            max(2.5rem, calc(1.5rem + env(safe-area-inset-bottom, 0px)))
            1.5rem;
        flex-direction: column;
        align-items: stretch;
        border-right: 1px solid var(--border-color);
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 100;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.2);
    }

    .sidebar-top-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }

    .sidebar-header { font-size: 1.3rem; margin-bottom: 0; }

    /* Close (×) button inside drawer */
    .drawer-close-btn {
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
        cursor: pointer;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .sidebar-support {
        margin-top: 0;
    }

    .nav-link.logout {
        margin-top: auto;
    }

    /* Hamburger button visible in topbar on mobile */
    .hamburger-btn { display: flex; }

    /* Hide name + role text — show avatar only in topbar */
    .user-info { display: none; }

    /* Profile dropdown: cap width so it doesn't overflow */
    .profile-menu {
        min-width: 210px;
        max-width: calc(100vw - 2rem);
        right: 0;
    }

    /* Language switcher: tighten padding on mobile */
    .topbar .user-profile > div:first-child {
        padding: 4px 7px;
        font-size: 0.78rem;
    }

    /* The bell sits near the right edge on phones. Anchor the notification
       panel to the viewport so its width cannot push it off-screen. */
    .notif-menu {
        position: fixed;
        top: calc(70px + 0.75rem);
        left: 1rem;
        right: 1rem;
        width: auto;
        max-width: none;
        max-height: min(400px, calc(100svh - 6.5rem));
    }

    /* Main content: less padding on mobile */
    .main-content { padding: 1.25rem 1rem; }

    /* Stats grid: single column on small screens */
    .grid-stats { grid-template-columns: 1fr; gap: 1rem; }

    .legal-topbar {
        height: auto;
        padding: 0.85rem 1rem;
        gap: 0.75rem;
        flex-wrap: nowrap;
    }

    .legal-topbar-left,
    .legal-topbar-right {
        width: auto;
        justify-content: flex-start;
    }

    .legal-topbar-right {
        margin-left: auto;
    }

    .legal-nav-toggle {
        display: flex;
    }

    .legal-nav-links {
        display: none;
    }

    .legal-back-link {
        font-size: 0.95rem;
    }
}

@media screen and (max-width: 600px) {
    .auth-wrapper {
        padding: 1rem;
    }

    .auth-card {
        padding: 2rem 1.5rem;
        border-radius: 16px;
    }
    
    .auth-header h2 {
        font-size: 2rem;
    }
    
    .form-group input {
        padding: 0.75rem 1rem;
    }
    
    .blob {
        display: none; /* Hide heavy decorative elements on mobile for performance */
    }

    .app-footer {
        font-size: 0.75rem;
    }

    .legal-main {
        padding: 1rem;
    }

    .legal-card {
        padding: 1rem;
    }
}

/* ------------------------------------------------------------------
   My Apps: compact index card + per-app detail page
   ------------------------------------------------------------------ */

/* Compact card variant for the index — small, dense, full-card link */
.zx-app-grid:has(.zx-app-card-compact) {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.9rem;
}
.zx-app-card-compact {
    padding: 0.95rem 1rem;
    gap: 0.7rem;
}
.zx-app-card-compact:hover {
    /* No translateY on compact cards — the card is not the click target. */
    transform: none;
}
.zx-app-card-compact .zx-app-card-head {
    grid-template-columns: auto 1fr;
}
.zx-app-card-compact .zx-app-card-title {
    font-size: 1rem;
}
.zx-app-card-compact .zx-app-card-desc {
    -webkit-line-clamp: 1;
    font-size: 0.82rem;
}
.zx-app-card-compact .zx-app-card-badges {
    justify-content: flex-start;
}
.zx-app-card-compact .zx-app-card-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--zx-card-border);
}
.zx-app-card-compact .zx-app-card-foot .zx-btn {
    flex: 1 1 auto;
    justify-content: center;
}

/* Detail page */
.zx-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--zx-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding: 0.35rem 0.5rem 0.35rem 0.25rem;
    border-radius: var(--zx-radius-sm);
    transition: color 0.2s var(--zx-ease), background 0.2s var(--zx-ease);
}
.zx-detail-back:hover {
    color: var(--zx-text);
    background: var(--subtle-bg);
}
.zx-detail-back svg {
    width: 16px;
    height: 16px;
}

.zx-detail-hero {
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1.5rem 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    box-shadow: var(--zx-elev-1);
}
.zx-detail-hero-main {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-width: 0;
    flex: 1 1 280px;
}
.zx-detail-hero-icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--zx-grad-brand);
    color: #fff;
    font-weight: 800;
    font-size: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 30px -16px rgba(139,92,246,0.55);
    overflow: hidden;
}
.zx-detail-hero-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.zx-detail-hero-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.zx-detail-hero-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--zx-text);
}
.zx-detail-hero-desc {
    margin: 0;
    color: var(--zx-text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}
.zx-detail-hero-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}
.zx-detail-hero-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

.zx-detail-section {
    background: var(--zx-card-bg);
    border: 1px solid var(--zx-card-border);
    border-radius: var(--zx-radius-lg);
    padding: 1.2rem 1.35rem;
    margin-bottom: 1rem;
}
.zx-detail-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.zx-detail-section-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--zx-text);
    letter-spacing: -0.2px;
}
.zx-detail-section-head p {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--zx-text-muted);
}
.zx-detail-section .zx-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}
.zx-detail-danger {
    border-color: rgba(239,68,68,0.30);
}
.zx-detail-danger .zx-detail-section-head h2 {
    color: #f87171;
}
.zx-detail-danger-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .zx-detail-hero {
        padding: 1.15rem 1.1rem;
    }
    .zx-detail-hero-icon {
        width: 56px;
        height: 56px;
        font-size: 1.4rem;
    }
    .zx-detail-hero-title {
        font-size: 1.3rem;
    }
    .zx-detail-hero-actions {
        width: 100%;
    }
    .zx-detail-hero-actions .zx-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* =========================================
   Help center (/help)
   Premium look matching .stat-card aesthetic,
   safe markdown overflow, hidden anchor # marks.
   ========================================= */

/* Help center uses a single scroll container (the body) instead of the
   nested .legal-main scroller. Two scroll containers fighting each
   other was the "page freezes when I try to scroll" symptom. */
.help-main {
    flex: 1;
    padding: 2rem 1rem;
    /* no overflow declaration — defer scroll to body */
}

.help-shell {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.help-hero {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 1.6rem 1.6rem 1.4rem;
    margin-bottom: 1.4rem;
    background-image:
        radial-gradient(circle at top right, rgba(99,102,241,0.10), transparent 55%),
        radial-gradient(circle at bottom left, rgba(16,185,129,0.07), transparent 60%);
}

.help-hero__eyebrow {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    margin-bottom: 0.35rem;
}

.help-hero__title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.45rem;
    line-height: 1.15;
}

.help-hero__lede {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0 0 1.1rem;
    max-width: 56ch;
}

.help-search {
    display: flex;
    gap: 0.55rem;
    max-width: 560px;
}

.help-search__input {
    flex: 1;
    padding: 0.65rem 0.95rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--input-bg, var(--card-bg));
    color: var(--text-primary);
    font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.help-search__input:focus {
    outline: none;
    border-color: rgba(99,102,241,0.55);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}

.help-search__btn {
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    border: 0;
    background: var(--primary-color, #6366f1);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: filter 0.15s;
}
.help-search__btn:hover { filter: brightness(1.08); }

.help-category {
    margin-bottom: 1.8rem;
}

.help-category__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.help-category__icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(99,102,241,0.10);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 8px;
    color: var(--primary-color, #6366f1);
    flex: 0 0 28px;
}
.help-category__icon svg { width: 16px; height: 16px; display: block; }

.help-category__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.help-card-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.6rem;
}

.help-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.93rem;
    font-weight: 500;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.help-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99,102,241,0.45);
    background: rgba(99,102,241,0.05);
}
.help-card__chev {
    color: var(--text-secondary);
    opacity: 0.6;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
.help-card:hover .help-card__chev {
    opacity: 1;
    transform: translateX(3px);
}

.help-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: center;
}
.help-footer a {
    color: var(--primary-color, #6366f1);
    font-weight: 600;
    text-decoration: none;
}

/* Article view */

.help-article {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 1.6rem 1.75rem;
}

.help-article__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.help-article__breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
}
.help-article__breadcrumb a:hover { color: var(--text-primary); }
.help-article__breadcrumb-sep {
    opacity: 0.5;
}

.help-article__pending {
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.25);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.help-article__title {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
    line-height: 1.2;
}

.help-article__body {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 0.95rem;
}
.help-article__body img,
.help-article__body table,
.help-article__body pre {
    max-width: 100%;
    overflow-x: auto;
}
.help-article__body table {
    border-collapse: collapse;
    margin: 0.8rem 0;
    display: block;
    overflow-x: auto;
}
.help-article__body table th,
.help-article__body table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    text-align: left;
    font-size: 0.88rem;
}
.help-article__body table th {
    background: rgba(99,102,241,0.05);
    font-weight: 700;
}
.help-article__body code {
    background: rgba(99,102,241,0.08);
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    font-size: 0.86em;
    color: var(--text-primary);
}
.help-article__body pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.help-article__body pre {
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    margin: 0.8rem 0;
}
.help-article__body blockquote {
    border-left: 3px solid rgba(99,102,241,0.5);
    margin: 0.8rem 0;
    padding: 0.4rem 0 0.4rem 0.95rem;
    color: var(--text-secondary);
    background: rgba(99,102,241,0.04);
    border-radius: 0 8px 8px 0;
}
.help-article__body ul,
.help-article__body ol {
    padding-left: 1.4rem;
    margin: 0.6rem 0 0.9rem;
}
.help-article__body li { margin: 0.25rem 0; }
.help-article__body p { margin: 0.6rem 0; }
.help-article__body h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1.5rem 0 0.6rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-color);
}
.help-article__body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.1rem 0 0.4rem;
}
.help-article__body h2:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 1rem;
}
/* Hide the GitHub-style anchor "#" the in-house MarkdownRenderer adds.
   Tested visually on /help — it does not belong in user-facing docs.
   Admin docs at /admin/docs keep them via their own scope. */
.help-article__body .zx-md-anchor { display: none !important; }

.help-article__footer {
    margin-top: 1.8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.9rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.86rem;
}
.help-article__footer a {
    color: var(--primary-color, #6366f1);
    text-decoration: none;
    font-weight: 600;
}

/* Search results */

.help-search-page {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 1.5rem 1.6rem;
}

@media (max-width: 640px) {
    .help-article { padding: 1.2rem 1rem; }
    .help-article__title { font-size: 1.55rem; }
    .help-hero { padding: 1.2rem; }
    .help-hero__title { font-size: 1.65rem; }
    .help-search { flex-direction: column; }
    .help-card-grid { grid-template-columns: 1fr; }
}