/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-a9mwe0814g] {
    position: relative;
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

main[b-a9mwe0814g] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.top-row[b-a9mwe0814g] {
    background-color: var(--s-bg-secondary, #0d1829);
    border-bottom: 1px solid var(--s-border, rgba(255,255,255,0.06));
    justify-content: flex-end;
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.top-row[b-a9mwe0814g]  a,
.top-row[b-a9mwe0814g]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
    color: var(--s-text-secondary, #94a3b8);
    font-size: 13px;
}

.top-row[b-a9mwe0814g]  a:hover,
.top-row[b-a9mwe0814g]  .btn-link:hover {
    color: var(--s-text-primary, #f1f5f9);
    text-decoration: none;
}

article.content[b-a9mwe0814g] {
    padding: 1.5rem 2rem;
    flex: 1;
}

@media (max-width: 640px) {
    .page[b-a9mwe0814g] {
        flex-direction: column;
    }

    .top-row[b-a9mwe0814g] {
        justify-content: flex-end;
    }

    article.content[b-a9mwe0814g] {
        padding: 1rem;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ── Sidebar container ─────────────────────────────────── */
.co-sidebar[b-xvapqnuos1] {
    display: flex;
    flex-direction: column;
    width: 220px;
    height: 100vh;
    background: #0d1829;
    border-right: 1px solid rgba(255,255,255,0.06);
    transition: width 0.22s ease;
    overflow: hidden;
    position: sticky;
    top: 0;
    flex-shrink: 0;
}

.co-sidebar--collapsed[b-xvapqnuos1] {
    width: 64px;
}

/* ── Header ────────────────────────────────────────────── */
.co-sidebar-header[b-xvapqnuos1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    height: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.co-sidebar--collapsed .co-sidebar-header[b-xvapqnuos1] {
    justify-content: center;
    padding: 0 8px;
}

.co-logo[b-xvapqnuos1] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.co-logo-icon-img[b-xvapqnuos1] {
    color: #00c8b4;
    font-size: 15px;
    flex-shrink: 0;
}

.co-logo-cloud[b-xvapqnuos1] {
    font-size: 14px;
    font-weight: 700;
    color: #00c8b4;
}

.co-logo-optify[b-xvapqnuos1] {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
}

.co-logo-mini[b-xvapqnuos1] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.co-logo-mini .co-logo-icon-img[b-xvapqnuos1] {
    font-size: 18px;
}

.co-toggle-btn[b-xvapqnuos1] {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: #475569;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-size: 11px;
    padding: 0;
}

.co-toggle-btn:hover[b-xvapqnuos1] {
    background: rgba(0,200,180,0.08);
    border-color: rgba(0,200,180,0.3);
    color: #00c8b4;
}

/* ── Nav sections ──────────────────────────────────────── */
.co-nav[b-xvapqnuos1] {
    display: flex;
    flex-direction: column;
    padding: 10px 8px;
    gap: 2px;
    flex: 1;
}

.co-nav-bottom[b-xvapqnuos1] {
    display: flex;
    flex-direction: column;
    padding: 8px 8px 16px;
    gap: 2px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Nav links — use ::deep to pierce NavLink's <a> ───── */
.co-nav[b-xvapqnuos1]  a,
.co-nav-bottom[b-xvapqnuos1]  a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #64748b;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    border-left: 2px solid transparent;
    position: relative; /* needed for the alert dot in collapsed mode */
}

.co-nav[b-xvapqnuos1]  a:hover,
.co-nav-bottom[b-xvapqnuos1]  a:hover {
    background: rgba(255,255,255,0.04);
    color: #94a3b8;
    text-decoration: none;
}

.co-nav[b-xvapqnuos1]  a.active,
.co-nav-bottom[b-xvapqnuos1]  a.active {
    background: rgba(0,200,180,0.08);
    color: #00c8b4;
    border-left: 2px solid #00c8b4;
    padding-left: 8px;
}

/* Icons inside nav links */
.co-nav[b-xvapqnuos1]  a .co-nav-icon,
.co-nav-bottom[b-xvapqnuos1]  a .co-nav-icon {
    font-size: 15px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    color: #475569;
    transition: color 0.15s;
}

.co-nav[b-xvapqnuos1]  a:hover .co-nav-icon,
.co-nav-bottom[b-xvapqnuos1]  a:hover .co-nav-icon {
    color: #94a3b8;
}

.co-nav[b-xvapqnuos1]  a.active .co-nav-icon,
.co-nav-bottom[b-xvapqnuos1]  a.active .co-nav-icon {
    color: #00c8b4;
}

/* ── Collapsed mode ────────────────────────────────────── */
.co-sidebar--collapsed .co-nav[b-xvapqnuos1],
.co-sidebar--collapsed .co-nav-bottom[b-xvapqnuos1] {
    align-items: center;
    padding: 10px 4px;
}

.co-sidebar--collapsed .co-nav[b-xvapqnuos1]  a,
.co-sidebar--collapsed .co-nav-bottom[b-xvapqnuos1]  a {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-left: 2px solid transparent !important;
    border-radius: 8px;
    gap: 0;
}

.co-sidebar--collapsed .co-nav[b-xvapqnuos1]  a.active,
.co-sidebar--collapsed .co-nav-bottom[b-xvapqnuos1]  a.active {
    background: rgba(0,200,180,0.10);
    border-left: 2px solid transparent !important;
    outline: 1px solid rgba(0,200,180,0.25);
}

.co-sidebar--collapsed .co-nav[b-xvapqnuos1]  a .co-nav-icon,
.co-sidebar--collapsed .co-nav-bottom[b-xvapqnuos1]  a .co-nav-icon {
    font-size: 17px;
    width: auto;
}

/* ── Admin section label ───────────────────────────────── */
.co-nav-section-label[b-xvapqnuos1] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #334155;
    padding: 14px 14px 4px;
}

.co-nav-section-divider[b-xvapqnuos1] {
    height: 1px;
    background: rgba(255,255,255,0.05);
    margin: 10px 10px;
}

/* Admin links use amber accent when active */
.co-nav[b-xvapqnuos1]  a.co-nav-link--admin.active {
    background: rgba(251,191,36,0.07);
    color: #fbbf24;
    border-left: 2px solid #fbbf24;
}

.co-nav[b-xvapqnuos1]  a.co-nav-link--admin.active .co-nav-icon {
    color: #fbbf24;
}

.co-sidebar--collapsed .co-nav[b-xvapqnuos1]  a.co-nav-link--admin.active {
    background: rgba(251,191,36,0.08);
    outline: 1px solid rgba(251,191,36,0.25);
}

/* ── Expand button (shown at bottom when collapsed) ────── */
.co-expand-btn[b-xvapqnuos1] {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #475569;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-size: 13px;
    padding: 0;
    margin-top: 4px;
}

.co-expand-btn:hover[b-xvapqnuos1] {
    background: rgba(0,200,180,0.08);
    border-color: rgba(0,200,180,0.3);
    color: #00c8b4;
}


/* ── Alert badge (fires since last visit) ─────────────────────────────────── */
.co-nav-alert-badge[b-xvapqnuos1] {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0;
}

/* Collapsed sidebar: tiny dot instead of count */
.co-nav-alert-dot[b-xvapqnuos1] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #0d1829;
}
/* /Pages/About.razor.rz.scp.css */
.about-hero[b-3gr86x1n7n] {
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
    color: white;
    padding: 80px 20px;
    text-align: center;
    border-radius: 0 0 20px 20px;
    margin-bottom: 40px;
}

    .about-hero h1[b-3gr86x1n7n] {
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .about-hero p[b-3gr86x1n7n] {
        font-size: 1.25rem;
        opacity: 0.9;
    }

/* Sections */
.about-section[b-3gr86x1n7n] {
    margin: 40px auto;
    max-width: 900px;
    text-align: center;
}

.section-title[b-3gr86x1n7n] {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.section-text[b-3gr86x1n7n] {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.6;
}

/* Features Grid */
.about-features[b-3gr86x1n7n] {
    margin: 60px auto;
    max-width: 1100px;
}

.features-grid[b-3gr86x1n7n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.feature-card[b-3gr86x1n7n] {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .feature-card:hover[b-3gr86x1n7n] {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

.feature-icon[b-3gr86x1n7n] {
    font-size: 2.5rem;
    color: #3b82f6;
    margin-bottom: 15px;
}

.feature-card h3[b-3gr86x1n7n] {
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.feature-card p[b-3gr86x1n7n] {
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
}

/* Contact Section */
.contact-section[b-3gr86x1n7n] {
    margin-bottom: 80px;
}

.brand-title[b-3gr86x1n7n] {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.brand-cloud[b-3gr86x1n7n] {
    color: #00c8b4;
    font-weight: 700;
}

.brand-optify[b-3gr86x1n7n] {
    color: #f1f5f9;
    font-weight: 700;
}

@@media (max-width: 768px) {
    .about-hero h1[b-3gr86x1n7n] {
        font-size: 2.2rem;
    }

    .about-hero p[b-3gr86x1n7n] {
        font-size: 1.1rem;
    }
}

.about-hero p[b-3gr86x1n7n] {
    font-size: 1.1rem;
}
/* /Pages/Account/Settings.razor.rz.scp.css */
.co-settings-page[b-5i07wyv05z] {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.co-settings-eyebrow[b-5i07wyv05z] {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--s-accent);
    margin-bottom: 6px;
}

.co-settings-title[b-5i07wyv05z] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--s-text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.co-settings-sub[b-5i07wyv05z] {
    color: var(--s-text-secondary);
    font-size: 14px;
    margin-bottom: 2.5rem;
}

.co-settings-section[b-5i07wyv05z] {
    margin-bottom: 1.5rem;
}

.co-settings-section-label[b-5i07wyv05z] {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-text-muted);
    margin-bottom: 8px;
    padding-left: 2px;
}

.co-settings-card[b-5i07wyv05z] {
    background: var(--s-bg-secondary);
    border: 1px solid var(--s-border);
    border-radius: 14px;
    overflow: hidden;
}

.co-settings-row[b-5i07wyv05z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    gap: 1rem;
}

.co-settings-row-info[b-5i07wyv05z] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.co-settings-row-icon[b-5i07wyv05z] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.co-settings-row-title[b-5i07wyv05z] {
    font-size: 14px;
    font-weight: 600;
    color: var(--s-text-primary);
    margin-bottom: 2px;
}

.co-settings-row-desc[b-5i07wyv05z] {
    font-size: 12px;
    color: var(--s-text-secondary);
}

.co-settings-divider[b-5i07wyv05z] {
    height: 1px;
    background: var(--s-border);
    margin: 0 1.25rem;
}

.co-settings-link[b-5i07wyv05z] {
    font-size: 13px;
    color: var(--s-accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: gap 0.2s;
}

    .co-settings-link:hover[b-5i07wyv05z] {
        gap: 10px;
    }

/* ── Theme toggle switch ── */
.co-theme-switch[b-5i07wyv05z] {
    width: 52px;
    height: 28px;
    background: var(--s-border-strong);
    border-radius: 100px;
    cursor: pointer;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
    border: 1px solid var(--s-border);
}

    .co-theme-switch.active[b-5i07wyv05z] {
        background: rgba(0,200,180,0.2);
        border-color: rgba(0,200,180,0.4);
    }

.co-theme-switch-thumb[b-5i07wyv05z] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--s-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--s-bg-primary);
    transition: all 0.3s;
}

.co-theme-switch.active .co-theme-switch-thumb[b-5i07wyv05z] {
    left: 27px;
    background: #00c8b4;
    color: #080f1a;
}

/* ── Theme preview cards ── */
.co-theme-previews[b-5i07wyv05z] {
    display: flex;
    gap: 12px;
    padding: 1.25rem;
}

.co-theme-preview[b-5i07wyv05z] {
    flex: 1;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.2s;
}

    .co-theme-preview.selected[b-5i07wyv05z] {
        border-color: #00c8b4;
    }

.co-preview-light[b-5i07wyv05z], .co-preview-dark[b-5i07wyv05z] {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    height: 80px;
}

.co-preview-light[b-5i07wyv05z] {
    background: #f8fafc;
}

.co-preview-dark[b-5i07wyv05z] {
    background: #080f1a;
}

.co-preview-bar[b-5i07wyv05z] {
    height: 14px;
    margin-bottom: 8px;
}

.light-bar[b-5i07wyv05z] {
    background: #e2e8f0;
}

.dark-bar[b-5i07wyv05z] {
    background: #0d1829;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.co-preview-content[b-5i07wyv05z] {
    display: flex;
    gap: 4px;
    padding: 0 8px;
}

.co-preview-card[b-5i07wyv05z] {
    flex: 1;
    height: 40px;
    border-radius: 4px;
}

.light-card[b-5i07wyv05z] {
    background: #e2e8f0;
}

.dark-card[b-5i07wyv05z] {
    background: #1a2744;
}

.co-preview-label[b-5i07wyv05z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    font-size: 12px;
    font-weight: 500;
    background: var(--s-bg-secondary);
    color: var(--s-text-secondary);
    border-top: 1px solid var(--s-border);
}
    /* Dark (default) */
    .theme-dark[b-5i07wyv05z] {
        --s-bg-primary: #080f1a;
        --s-bg-secondary: #0d1829;
        --s-bg-tertiary: #111f35;
        --s-border: rgba(255,255,255,0.06);
        --s-border-strong: rgba(255,255,255,0.12);
        --s-text-primary: #f1f5f9;
        --s-text-secondary: #94a3b8;
        --s-text-muted: #475569;
        --s-accent: #00c8b4;
    }
    /* Light */
    .theme-light[b-5i07wyv05z] {
        --s-bg-primary: #f8fafc;
        --s-bg-secondary: #ffffff;
        --s-bg-tertiary: #f1f5f9;
        --s-border: rgba(0,0,0,0.08);
        --s-border-strong: rgba(0,0,0,0.15);
        --s-text-primary: #0f172a;
        --s-text-secondary: #64748b;
        --s-text-muted: #94a3b8;
        --s-accent: #0891b2;
    }
/* /Pages/Account/Subscription.razor.rz.scp.css */
.sub-page[b-nzx1f9z1bq] {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.sub-card[b-nzx1f9z1bq] {
    background: var(--s-bg-secondary);
    border: 1px solid var(--s-border);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.sub-stat[b-nzx1f9z1bq] {
    background: var(--s-bg-tertiary);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    flex: 1;
}

.sub-stat-label[b-nzx1f9z1bq] {
    font-size: 12px;
    color: var(--s-text-secondary);
    margin-bottom: 4px;
}

.sub-stat-value[b-nzx1f9z1bq] {
    font-size: 16px;
    font-weight: 600;
    color: var(--s-text-primary);
}

    .sub-stat-value.danger[b-nzx1f9z1bq] {
        color: var(--s-danger);
    }

.sub-alert[b-nzx1f9z1bq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: 14px;
}

    .sub-alert.success[b-nzx1f9z1bq] {
        background: rgba(34,211,165,0.08);
        border: 1px solid rgba(34,211,165,0.2);
        color: var(--s-success);
    }

    .sub-alert.warning[b-nzx1f9z1bq] {
        background: rgba(251,191,36,0.08);
        border: 1px solid rgba(251,191,36,0.2);
        color: var(--s-warning);
    }

    .sub-alert.danger[b-nzx1f9z1bq] {
        background: rgba(248,113,113,0.08);
        border: 1px solid rgba(248,113,113,0.2);
        color: var(--s-danger);
    }

.sub-badge[b-nzx1f9z1bq] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

    .sub-badge.active[b-nzx1f9z1bq] {
        background: rgba(34,211,165,0.12);
        color: var(--s-success);
    }

    .sub-badge.inactive[b-nzx1f9z1bq] {
        background: rgba(148,163,184,0.12);
        color: var(--s-text-secondary);
    }

.sub-divider[b-nzx1f9z1bq] {
    height: 1px;
    background: var(--s-border);
    margin: 1rem 0;
}

.sub-btn[b-nzx1f9z1bq] {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    margin-bottom: 8px;
}

    .sub-btn.primary[b-nzx1f9z1bq] {
        background: var(--s-accent);
        color: #fff;
    }

        .sub-btn.primary:hover[b-nzx1f9z1bq] {
            opacity: 0.9;
        }

    .sub-btn.outline[b-nzx1f9z1bq] {
        background: transparent;
        border: 1px solid var(--s-accent);
        color: var(--s-accent);
    }

        .sub-btn.outline:hover[b-nzx1f9z1bq] {
            background: rgba(0,200,180,0.08);
        }

    .sub-btn.danger-outline[b-nzx1f9z1bq] {
        background: transparent;
        border: 1px solid rgba(248,113,113,0.3);
        color: var(--s-danger);
    }

        .sub-btn.danger-outline:hover[b-nzx1f9z1bq] {
            background: rgba(248,113,113,0.06);
        }

    .sub-btn:disabled[b-nzx1f9z1bq] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Modal */
.sub-modal-overlay[b-nzx1f9z1bq] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.sub-modal[b-nzx1f9z1bq] {
    background: var(--s-bg-secondary);
    border: 1px solid var(--s-border);
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    overflow: hidden;
}

.sub-modal-header[b-nzx1f9z1bq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 0;
}

.sub-modal-body[b-nzx1f9z1bq] {
    padding: 1.25rem 1.5rem;
}

.sub-modal-footer[b-nzx1f9z1bq] {
    padding: 0 1.5rem 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.sub-plan-card[b-nzx1f9z1bq] {
    background: var(--s-bg-tertiary);
    border: 2px solid var(--s-border);
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
}

    .sub-plan-card.selected-monthly[b-nzx1f9z1bq] {
        border-color: var(--s-accent);
    }

    .sub-plan-card.selected-annual[b-nzx1f9z1bq] {
        border-color: var(--s-success);
    }

.sub-plan-badge[b-nzx1f9z1bq] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

    .sub-plan-badge.monthly[b-nzx1f9z1bq] {
        background: rgba(0,200,180,0.12);
        color: var(--s-accent);
    }

    .sub-plan-badge.annual[b-nzx1f9z1bq] {
        background: rgba(34,211,165,0.12);
        color: var(--s-success);
    }

.sub-plan-price[b-nzx1f9z1bq] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--s-text-primary);
}

    .sub-plan-price span[b-nzx1f9z1bq] {
        font-size: 13px;
        font-weight: 400;
        color: var(--s-text-secondary);
    }

.sub-plan-desc[b-nzx1f9z1bq] {
    font-size: 12px;
    color: var(--s-text-secondary);
    margin-top: 4px;
}

.sub-summary[b-nzx1f9z1bq] {
    background: var(--s-bg-tertiary);
    border-radius: 10px;
    padding: 1rem;
}

.sub-summary-row[b-nzx1f9z1bq] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--s-text-secondary);
    margin-bottom: 6px;
}

    .sub-summary-row.success-row[b-nzx1f9z1bq] {
        color: var(--s-success);
    }

.sub-summary-total[b-nzx1f9z1bq] {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 700;
    color: var(--s-text-primary);
    padding-top: 8px;
    border-top: 1px solid var(--s-border);
    margin-top: 6px;
}

.sub-close-btn[b-nzx1f9z1bq] {
    background: none;
    border: none;
    color: var(--s-text-secondary);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

    .sub-close-btn:hover[b-nzx1f9z1bq] {
        color: var(--s-text-primary);
    }

/* Toast */
.sub-toast[b-nzx1f9z1bq] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    background: rgba(34,211,165,0.12);
    border: 1px solid rgba(34,211,165,0.25);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--s-success);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.sub-toast-close[b-nzx1f9z1bq] {
    background: none;
    border: none;
    color: var(--s-text-secondary);
    cursor: pointer;
    margin-left: 8px;
    font-size: 16px;
    padding: 0;
}

/* ── Plan Feature / Limit Tiles ── */
.plan-limit-tile[b-nzx1f9z1bq] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--s-bg-tertiary);
    border: 1px solid var(--s-border);
    border-radius: 10px;
    padding: 10px 12px;
}

.plan-limit-icon[b-nzx1f9z1bq] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0,200,180,0.08);
    color: var(--s-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.plan-limit-info[b-nzx1f9z1bq] {
    display: flex;
    flex-direction: column;
}

.plan-limit-value[b-nzx1f9z1bq] {
    font-size: 16px;
    font-weight: 700;
    color: var(--s-text-primary);
    line-height: 1.2;
}

.plan-limit-label[b-nzx1f9z1bq] {
    font-size: 11px;
    color: var(--s-text-muted);
    line-height: 1.2;
}
/* /Pages/Home.razor.rz.scp.css */
/* All Home page styles — uses only var(--s-*) */

.co-home[b-nylpod4uhb] {
    background: var(--s-home-bg);
    min-height: 100vh;
    font-family: 'Sora', sans-serif;
    color: var(--s-text-primary);
    padding: 0;
    margin: -1rem -1rem 0 -1rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.co-grid-bg[b-nylpod4uhb] {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--s-home-grid) 1px, transparent 1px), linear-gradient(90deg, var(--s-home-grid) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.co-hero[b-nylpod4uhb] {
    position: relative;
    padding: 4rem 2rem 3rem;
    overflow: hidden;
}

.co-hero-glow[b-nylpod4uhb] {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--s-home-glow-1) 0%, transparent 70%);
    pointer-events: none;
}

.co-hero-glow-2[b-nylpod4uhb] {
    position: absolute;
    bottom: -100px;
    left: -60px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--s-home-glow-2) 0%, transparent 70%);
    pointer-events: none;
}

.co-eyebrow[b-nylpod4uhb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,200,180,0.1);
    border: 1px solid rgba(0,200,180,0.25);
    border-radius: 100px;
    padding: 4px 14px;
    font-size: 11px;
    font-family: 'DM Mono', monospace;
    color: var(--s-accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    animation: fadeSlideDown-b-nylpod4uhb 0.6s ease both;
}

.co-pulse[b-nylpod4uhb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--s-accent);
    animation: pulse-b-nylpod4uhb 2s infinite;
}

.co-headline[b-nylpod4uhb] {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--s-text-primary);
    margin-bottom: 1rem;
    animation: fadeSlideDown-b-nylpod4uhb 0.7s ease 0.1s both;
}

    .co-headline span[b-nylpod4uhb] {
        color: var(--s-accent);
    }

.co-sub[b-nylpod4uhb] {
    font-size: 1rem;
    color: var(--s-text-secondary);
    font-weight: 300;
    max-width: 520px;
    line-height: 1.7;
    margin-bottom: 2rem;
    animation: fadeSlideDown-b-nylpod4uhb 0.7s ease 0.2s both;
}

.co-actions[b-nylpod4uhb] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    animation: fadeSlideDown-b-nylpod4uhb 0.7s ease 0.3s both;
}

.co-btn-primary[b-nylpod4uhb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--s-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .co-btn-primary:hover[b-nylpod4uhb] {
        background: var(--s-accent-hover);
        transform: translateY(-1px);
    }

.co-btn-secondary[b-nylpod4uhb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--s-text-secondary);
    border: 1px solid var(--s-border-strong);
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

    .co-btn-secondary:hover[b-nylpod4uhb] {
        border-color: var(--s-accent);
        color: var(--s-accent);
    }

/* KPI Strip */
.co-metrics[b-nylpod4uhb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--s-border);
    border-top: 1px solid var(--s-border);
    border-bottom: 1px solid var(--s-border);
    margin: 0 0 2.5rem;
    animation: fadeSlideDown-b-nylpod4uhb 0.7s ease 0.4s both;
}

.co-metric[b-nylpod4uhb] {
    padding: 1.5rem 2rem;
    background: var(--s-home-bg);
    transition: background 0.2s;
}

    .co-metric:hover[b-nylpod4uhb] {
        background: rgba(0,200,180,0.04);
    }

.co-metric-label[b-nylpod4uhb] {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-text-muted);
    margin-bottom: 8px;
}

.co-metric-value[b-nylpod4uhb] {
    font-family: 'DM Mono', monospace;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--s-text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

    .co-metric-value.accent[b-nylpod4uhb] {
        color: var(--s-accent);
    }

    .co-metric-value.danger[b-nylpod4uhb] {
        color: var(--s-danger);
    }

    .co-metric-value.warn[b-nylpod4uhb] {
        color: var(--s-warning);
    }

.co-metric-delta[b-nylpod4uhb] {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--s-success);
}

    .co-metric-delta.neg[b-nylpod4uhb] {
        color: var(--s-danger);
    }

/* Sections */
.co-section[b-nylpod4uhb] {
    padding: 0 2rem 2.5rem;
    animation: fadeSlideDown-b-nylpod4uhb 0.7s ease 0.5s both;
}

.co-section-title[b-nylpod4uhb] {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--s-text-muted);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .co-section-title[b-nylpod4uhb]::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--s-border);
    }

/* Feature Cards */
.co-cards[b-nylpod4uhb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.co-card[b-nylpod4uhb] {
    background: var(--s-home-card);
    border: 1px solid var(--s-home-border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

    .co-card[b-nylpod4uhb]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--s-accent), transparent);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .co-card:hover[b-nylpod4uhb] {
        border-color: rgba(0,200,180,0.2);
        transform: translateY(-2px);
    }

        .co-card:hover[b-nylpod4uhb]::before {
            opacity: 0.4;
        }

.co-card-icon[b-nylpod4uhb] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 18px;
}

    .co-card-icon.teal[b-nylpod4uhb] {
        background: rgba(0,200,180,0.1);
        color: var(--s-accent);
    }

    .co-card-icon.blue[b-nylpod4uhb] {
        background: rgba(59,130,246,0.1);
        color: #60a5fa;
    }

    .co-card-icon.amber[b-nylpod4uhb] {
        background: rgba(251,191,36,0.1);
        color: var(--s-warning);
    }

    .co-card-icon.rose[b-nylpod4uhb] {
        background: rgba(248,113,113,0.1);
        color: var(--s-danger);
    }

.co-card-title[b-nylpod4uhb] {
    font-size: 14px;
    font-weight: 600;
    color: var(--s-text-primary);
    margin-bottom: 6px;
}

.co-card-desc[b-nylpod4uhb] {
    font-size: 13px;
    color: var(--s-text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.co-card-link[b-nylpod4uhb] {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--s-accent);
    text-decoration: none;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

    .co-card-link:hover[b-nylpod4uhb] {
        gap: 10px;
        color: var(--s-accent-hover);
    }

/* Savings Banner */
.co-savings-banner[b-nylpod4uhb] {
    background: linear-gradient(135deg, var(--s-savings-bg) 0%, var(--s-savings-bg2) 100%);
    border: 1px solid rgba(0,200,180,0.2);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 2rem 2.5rem;
    animation: fadeSlideDown-b-nylpod4uhb 0.7s ease 0.6s both;
}

.co-ticker[b-nylpod4uhb] {
    font-family: 'DM Mono', monospace;
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--s-accent);
    letter-spacing: -0.02em;
}

.co-savings-label[b-nylpod4uhb] {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-text-muted);
    margin-bottom: 8px;
}

.co-savings-sub[b-nylpod4uhb] {
    font-size: 12px;
    color: var(--s-text-muted);
    margin-top: 4px;
    font-family: 'DM Mono', monospace;
}

.co-savings-avg[b-nylpod4uhb] {
    font-family: 'DM Mono', monospace;
    font-size: 1.4rem;
    color: var(--s-text-primary);
    font-weight: 500;
}

/* Activity Feed */
.co-activity[b-nylpod4uhb] {
    margin: 0 2rem 2.5rem;
    background: var(--s-home-card);
    border: 1px solid var(--s-home-border);
    border-radius: 12px;
    overflow: hidden;
    animation: fadeSlideDown-b-nylpod4uhb 0.7s ease 0.65s both;
}

.co-activity-header[b-nylpod4uhb] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--s-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.co-activity-header-label[b-nylpod4uhb] {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-text-muted);
}

.co-activity-row[b-nylpod4uhb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid var(--s-border);
    transition: background 0.15s;
}

    .co-activity-row:hover[b-nylpod4uhb] {
        background: rgba(0,200,180,0.03);
    }

    .co-activity-row:last-child[b-nylpod4uhb] {
        border-bottom: none;
    }

.co-dot[b-nylpod4uhb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .co-dot.green[b-nylpod4uhb] {
        background: var(--s-success);
    }

    .co-dot.yellow[b-nylpod4uhb] {
        background: var(--s-warning);
    }

    .co-dot.blue[b-nylpod4uhb] {
        background: #60a5fa;
    }

.co-activity-text[b-nylpod4uhb] {
    font-size: 13px;
    color: var(--s-text-secondary);
    flex: 1;
}

    .co-activity-text strong[b-nylpod4uhb] {
        color: var(--s-text-primary);
        font-weight: 600;
    }

.co-activity-time[b-nylpod4uhb] {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--s-text-muted);
}

.co-activity-saving[b-nylpod4uhb] {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: var(--s-success);
    background: rgba(34,211,165,0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Subscription Notice */
.co-subscription-notice[b-nylpod4uhb] {
    margin: 0 2rem 2.5rem;
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.2);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: fadeSlideDown-b-nylpod4uhb 0.7s ease 0.7s both;
}

.co-notice-text[b-nylpod4uhb] {
    font-size: 13px;
    color: var(--s-text-primary);
    margin-bottom: 2px;
}

.co-notice-sub[b-nylpod4uhb] {
    font-size: 12px;
    color: var(--s-text-secondary);
}

.co-notice-time[b-nylpod4uhb] {
    color: var(--s-text-muted);
    font-size: 12px;
}

/* Plan badges */
.co-plan-badge[b-nylpod4uhb] {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
}

    .co-plan-badge.free[b-nylpod4uhb] {
        background: rgba(148,163,184,0.1);
        color: var(--s-text-secondary);
        border: 1px solid var(--s-border-strong);
    }

    .co-plan-badge.pro[b-nylpod4uhb] {
        background: rgba(0,200,180,0.1);
        color: var(--s-accent);
        border: 1px solid rgba(0,200,180,0.25);
    }

    .co-plan-badge.annual[b-nylpod4uhb] {
        background: rgba(34,211,165,0.1);
        color: var(--s-success);
        border: 1px solid rgba(34,211,165,0.25);
    }

/* Animations */
@keyframes fadeSlideDown-b-nylpod4uhb {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-b-nylpod4uhb {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}
/* /Pages/McpAgent.razor.rz.scp.css */
.mcp-page[b-vo5te0i81i] {
    max-width: 780px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.mcp-loading[b-vo5te0i81i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 4rem 0;
    color: var(--s-text-secondary);
    font-size: 14px;
}

/* ── Upgrade prompt ── */
.mcp-upgrade[b-vo5te0i81i] {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 460px;
    margin: 0 auto;
}

.mcp-upgrade-icon[b-vo5te0i81i] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(0, 200, 180, 0.1);
    color: var(--s-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 1.5rem;
}

.mcp-upgrade-title[b-vo5te0i81i] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--s-text-primary);
    margin-bottom: 8px;
}

.mcp-upgrade-desc[b-vo5te0i81i] {
    font-size: 14px;
    color: var(--s-text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.mcp-upgrade-btn[b-vo5te0i81i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 10px;
    background: rgba(0, 200, 180, 0.1);
    border: 1px solid var(--s-accent);
    color: var(--s-accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.mcp-upgrade-btn:hover[b-vo5te0i81i] {
    background: rgba(0, 200, 180, 0.2);
}

/* ── Header ── */
.mcp-header[b-vo5te0i81i] {
    margin-bottom: 2rem;
}

.mcp-eyebrow[b-vo5te0i81i] {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--s-accent);
    margin-bottom: 6px;
}

.mcp-title[b-vo5te0i81i] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--s-text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.mcp-sub[b-vo5te0i81i] {
    color: var(--s-text-secondary);
    font-size: 14px;
    margin: 0;
}

/* ── Sections & Cards ── */
.mcp-section[b-vo5te0i81i] {
    margin-bottom: 1.5rem;
}

.mcp-section-label[b-vo5te0i81i] {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-text-muted);
    margin-bottom: 8px;
    padding-left: 2px;
}

.mcp-card[b-vo5te0i81i] {
    background: var(--s-bg-secondary);
    border: 1px solid var(--s-border);
    border-radius: 14px;
    overflow: hidden;
}

.mcp-divider[b-vo5te0i81i] {
    height: 1px;
    background: var(--s-border);
}

/* ── Steps ── */
.mcp-steps[b-vo5te0i81i] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 18px;
    flex-wrap: wrap;
}

.mcp-step[b-vo5te0i81i] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mcp-step-num[b-vo5te0i81i] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0, 200, 180, 0.1);
    color: var(--s-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.mcp-step-title[b-vo5te0i81i] {
    font-size: 13px;
    font-weight: 600;
    color: var(--s-text-primary);
}

.mcp-step-desc[b-vo5te0i81i] {
    font-size: 11px;
    color: var(--s-text-muted);
}

.mcp-step-arrow[b-vo5te0i81i] {
    color: var(--s-text-muted);
    font-size: 14px;
}

/* ── Endpoint ── */
.mcp-endpoint-row[b-vo5te0i81i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    gap: 12px;
}

.mcp-endpoint-label[b-vo5te0i81i] {
    font-size: 12px;
    font-weight: 600;
    color: var(--s-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.mcp-endpoint-url[b-vo5te0i81i] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--s-accent);
}

.mcp-endpoint-url code[b-vo5te0i81i] {
    background: var(--s-bg-tertiary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
}

.mcp-endpoint-value[b-vo5te0i81i] {
    font-size: 12px;
    color: var(--s-text-secondary);
}

.mcp-copy-btn[b-vo5te0i81i] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--s-border);
    background: var(--s-bg-tertiary);
    color: var(--s-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.mcp-copy-btn:hover[b-vo5te0i81i] {
    border-color: var(--s-accent);
    color: var(--s-accent);
}

/* ── Config tabs ── */
.mcp-config-tabs[b-vo5te0i81i] {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.mcp-config-tab[b-vo5te0i81i] {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--s-border);
    background: transparent;
    color: var(--s-text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.mcp-config-tab:hover[b-vo5te0i81i] {
    border-color: var(--s-text-secondary);
    color: var(--s-text-secondary);
}

.mcp-config-tab.active[b-vo5te0i81i] {
    border-color: var(--s-accent);
    color: var(--s-accent);
    background: rgba(0, 200, 180, 0.06);
}

.mcp-config-block[b-vo5te0i81i] {
    position: relative;
}

.mcp-config-file[b-vo5te0i81i] {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--s-text-muted);
    margin-bottom: 4px;
}

.mcp-config-code[b-vo5te0i81i] {
    background: var(--s-bg-tertiary);
    border: 1px solid var(--s-border);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 12px;
    color: var(--s-text-primary);
    overflow-x: auto;
    margin: 0;
    line-height: 1.6;
}

.mcp-config-code code[b-vo5te0i81i] {
    font-family: 'DM Mono', monospace;
    background: none;
    padding: 0;
}

.mcp-copy-config[b-vo5te0i81i] {
    position: absolute;
    top: 28px;
    right: 8px;
    gap: 4px;
    display: flex;
    align-items: center;
}

/* ── Tools grid ── */
.mcp-tools-grid[b-vo5te0i81i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1px;
    background: var(--s-border);
}

.mcp-tool[b-vo5te0i81i] {
    padding: 12px 16px;
    background: var(--s-bg-secondary);
}

.mcp-tool-name[b-vo5te0i81i] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--s-text-primary);
    margin-bottom: 3px;
}

.mcp-tool-desc[b-vo5te0i81i] {
    font-size: 11px;
    color: var(--s-text-muted);
    line-height: 1.4;
}

/* ── Token form ── */
.mcp-input[b-vo5te0i81i] {
    flex: 1;
    padding: 8px 14px;
    background: var(--s-bg-tertiary);
    border: 1px solid var(--s-border);
    border-radius: 8px;
    color: var(--s-text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}

.mcp-input:focus[b-vo5te0i81i] {
    border-color: var(--s-accent);
}

.mcp-btn[b-vo5te0i81i] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
    white-space: nowrap;
}

.mcp-btn--primary[b-vo5te0i81i] {
    background: rgba(0, 200, 180, 0.1);
    border-color: var(--s-accent);
    color: var(--s-accent);
}

.mcp-btn--primary:hover[b-vo5te0i81i] {
    background: rgba(0, 200, 180, 0.2);
}

.mcp-btn--primary:disabled[b-vo5te0i81i] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mcp-btn--outline[b-vo5te0i81i] {
    background: transparent;
    border-color: var(--s-border-strong);
    color: var(--s-text-secondary);
}

.mcp-btn--outline:hover[b-vo5te0i81i] {
    border-color: var(--s-text-secondary);
}

.mcp-btn--danger[b-vo5te0i81i] {
    background: transparent;
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--s-danger);
}

.mcp-btn--danger:hover[b-vo5te0i81i] {
    background: rgba(248, 113, 113, 0.08);
}

.mcp-error-msg[b-vo5te0i81i] {
    font-size: 12px;
    color: var(--s-danger);
    margin-top: 8px;
}

/* ── New token reveal ── */
.mcp-new-token[b-vo5te0i81i] {
    background: rgba(0, 200, 180, 0.04);
    border-bottom: 1px solid var(--s-border);
    padding: 14px 18px;
}

.mcp-new-token-header[b-vo5te0i81i] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--s-text-primary);
    flex-wrap: wrap;
}

.mcp-new-token-value[b-vo5te0i81i] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--s-bg-tertiary);
    border: 1px solid var(--s-border);
    border-radius: 8px;
    padding: 8px 12px;
    overflow-x: auto;
}

.mcp-new-token-value code[b-vo5te0i81i] {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: var(--s-accent);
    white-space: nowrap;
    flex: 1;
}

/* ── Token list ── */
.mcp-empty[b-vo5te0i81i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 2.5rem;
    color: var(--s-text-muted);
    font-size: 13px;
}

.mcp-token-list[b-vo5te0i81i] {
    display: flex;
    flex-direction: column;
}

.mcp-token-row[b-vo5te0i81i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--s-border);
    gap: 12px;
}

.mcp-token-row:last-child[b-vo5te0i81i] {
    border-bottom: none;
}

.mcp-token-row--revoked[b-vo5te0i81i] {
    opacity: 0.55;
}

.mcp-token-info[b-vo5te0i81i] {
    flex: 1;
    min-width: 0;
}

.mcp-token-name[b-vo5te0i81i] {
    font-size: 13px;
    font-weight: 600;
    color: var(--s-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.mcp-badge[b-vo5te0i81i] {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mcp-badge--revoked[b-vo5te0i81i] {
    background: rgba(248, 113, 113, 0.12);
    color: var(--s-danger);
}

.mcp-badge--expired[b-vo5te0i81i] {
    background: rgba(251, 191, 36, 0.12);
    color: var(--s-warning, #f59e0b);
}

.mcp-token-row--expired[b-vo5te0i81i] {
    opacity: 0.65;
}

/* ── Quota badge ── */
.mcp-quota-badge[b-vo5te0i81i] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--s-accent);
    margin-left: 8px;
    vertical-align: middle;
}

/* ── Expiry select ── */
.mcp-select[b-vo5te0i81i] {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--s-border);
    border-radius: 8px;
    background: var(--s-bg-primary);
    color: var(--s-text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    min-width: 160px;
}

.mcp-select:focus[b-vo5te0i81i] {
    border-color: var(--s-accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.mcp-token-meta[b-vo5te0i81i] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: var(--s-text-muted);
}

.mcp-token-meta i[b-vo5te0i81i] {
    font-size: 10px;
    margin-right: 2px;
}

.mcp-token-actions[b-vo5te0i81i] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Stats ── */
.mcp-stats[b-vo5te0i81i] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--s-border);
}

.mcp-stat[b-vo5te0i81i] {
    background: var(--s-bg-secondary);
    padding: 18px 16px;
    text-align: center;
}

.mcp-stat-value[b-vo5te0i81i] {
    font-size: 22px;
    font-weight: 700;
    color: var(--s-text-primary);
    margin-bottom: 2px;
}

.mcp-stat-label[b-vo5te0i81i] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--s-text-muted);
}

/* ── Modal ── */
.mcp-modal-overlay[b-vo5te0i81i] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.mcp-modal[b-vo5te0i81i] {
    background: var(--s-bg-secondary);
    border: 1px solid var(--s-border-strong);
    border-radius: 14px;
    width: 90vw;
    max-width: 420px;
    overflow: hidden;
}

.mcp-modal-header[b-vo5te0i81i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--s-border);
}

.mcp-modal-body[b-vo5te0i81i] {
    padding: 20px;
}

.mcp-modal-footer[b-vo5te0i81i] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--s-border);
}

.mcp-close-btn[b-vo5te0i81i] {
    background: none;
    border: none;
    color: var(--s-text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
}

/* ── Toast ── */
.mcp-toast[b-vo5te0i81i] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--s-bg-secondary);
    border: 1px solid var(--s-border-strong);
    border-radius: 10px;
    font-size: 13px;
    color: var(--s-text-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    animation: mcpToastIn-b-vo5te0i81i 0.2s ease;
}

.mcp-toast-close[b-vo5te0i81i] {
    background: none;
    border: none;
    color: var(--s-text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
    margin-left: 4px;
}

@keyframes mcpToastIn-b-vo5te0i81i {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .mcp-steps[b-vo5te0i81i] {
        flex-direction: column;
        gap: 8px;
    }

    .mcp-step-arrow[b-vo5te0i81i] {
        transform: rotate(90deg);
    }

    .mcp-stats[b-vo5te0i81i] {
        grid-template-columns: repeat(2, 1fr);
    }

    .mcp-endpoint-row[b-vo5te0i81i] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mcp-token-row[b-vo5te0i81i] {
        flex-direction: column;
        align-items: flex-start;
    }

    .mcp-token-actions[b-vo5te0i81i] {
        margin-top: 8px;
    }
}