/* /Components/Layout/Footer.razor.rz.scp.css */
/* Footer — site-wide footer with links and socials */
.storefront-footer[b-5xs9qe4nls] {
    border-top: 1.5px dotted var(--sf-border);
    padding: 3rem 1.25rem 1.5rem;
    background: rgba(10, 6, 18, 0.4);
}

[b-5xs9qe4nls] .storefront-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

[b-5xs9qe4nls] .storefront-footer__brand {
    max-width: 280px;
}

[b-5xs9qe4nls] .storefront-footer__tagline {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-xs);
    margin: 0.75rem 0;
}

[b-5xs9qe4nls] .storefront-footer__socials {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

[b-5xs9qe4nls] .storefront-footer__heading {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.75rem;
}

[b-5xs9qe4nls] .storefront-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-5xs9qe4nls] .storefront-footer__list a {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
    text-decoration: none;
}

[b-5xs9qe4nls] .storefront-footer__list a:hover {
    color: var(--sf-text);
}

[b-5xs9qe4nls] .storefront-footer__bottom {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding-top: 1.5rem;
    border-top: 1.5px dotted var(--sf-border);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-2xs);
}

[b-5xs9qe4nls] .storefront-footer__muted {
    color: var(--sf-text-faint);
}
/* /Components/Layout/Header.razor.rz.scp.css */
/* Header — sticky top bar with brand, nav, and actions */
.storefront-header[b-sbp9embaf4] {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    background: rgba(17, 13, 22, 0.7);
    border-bottom: 1.5px dotted var(--sf-border);
}

[b-sbp9embaf4] .storefront-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
}

[b-sbp9embaf4] .storefront-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--sf-text);
}

[b-sbp9embaf4] .storefront-brand__mark {
    height: 48px;
    width: auto;
}

[b-sbp9embaf4] .storefront-brand__name {
    font-weight: 600;
    font-size: var(--sf-text-lg);
}

[b-sbp9embaf4] .storefront-nav {
    display: none;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    [b-sbp9embaf4] .storefront-nav {
        display: inline-flex;
    }
}

[b-sbp9embaf4] .storefront-nav__item {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
    text-decoration: none;
}

[b-sbp9embaf4] .storefront-nav__item:hover {
    color: var(--sf-text);
}

/* Hamburger toggle + mobile drop-down nav are defined in global app.css —
   CSS isolation `::deep` does not apply reliably during SSR (see commit 6cd7c0c). */

[b-sbp9embaf4] .storefront-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout — shell wrapper + main content area */
[b-7in4bo6682] .storefront-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

[b-7in4bo6682] .storefront-main {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}
/* /Components/Layout/UserMenu.razor.rz.scp.css */
/* The form only exists to POST the logout; it must not add spacing of its
   own inside the menu item. No ::deep: the form is top-level within this
   component's fragment — its ancestors are MudBlazor's own markup and carry
   no scope attribute, so a descendant selector would never match. */
.user-menu__logout-form[b-dkpyux9m2p] {
    margin: 0;
}

/* UserMenu — dropdown menu for authenticated users */
[b-dkpyux9m2p] .storefront-menu__logout {
    margin-left: -12px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font: inherit;
    width: 100%;
    text-align: left;
}
/* /Components/Pages/ApiKeys.razor.rz.scp.css */
/* ApiKeys — card-based key management page */
[b-etsbhj949f] .api-keys__baseurl { color: var(--sf-text-muted); font-family: var(--sf-font-mono); font-size: var(--sf-text-xs); margin: 0; display: flex; align-items: center; gap: 0.5rem; }
[b-etsbhj949f] .api-keys__baseurl-label { text-transform: uppercase; font-size: var(--sf-text-3xs); letter-spacing: 0.08em; font-weight: 600; }
[b-etsbhj949f] .api-keys__baseurl code { background: rgba(255, 255, 255, 0.06); padding: 0.2rem 0.5rem; border-radius: 6px; font-size: var(--sf-text-xs); }
[b-etsbhj949f] .api-keys__empty { padding: 2rem; text-align: center; color: var(--sf-text-muted); }
[b-etsbhj949f] .api-keys__search { max-width: 480px; }

[b-etsbhj949f] .api-keys__list { display: flex; flex-direction: column; gap: 0.75rem; }

[b-etsbhj949f] .api-key-card { padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; transition: all 0.2s ease; }
[b-etsbhj949f] .api-key-card:hover { border-color: var(--sf-accent); }
[b-etsbhj949f] .api-key-card--inactive { opacity: 0.6; }

[b-etsbhj949f] .api-key-card__left { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 280px; }
[b-etsbhj949f] .api-key-card__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--sf-accent-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
[b-etsbhj949f] .api-key-card__info { display: flex; flex-direction: column; gap: 0.15rem; overflow: hidden; }
[b-etsbhj949f] .api-key-card__name-row { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
[b-etsbhj949f] .api-key-card__prefix { font-family: var(--sf-font-mono); font-size: var(--sf-text-xs); color: var(--sf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

[b-etsbhj949f] .api-key-card__right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
[b-etsbhj949f] .api-key-card__stats { display: flex; gap: 0.75rem; }
[b-etsbhj949f] .api-key-card__stat { text-align: center; min-width: 50px; }
[b-etsbhj949f] .api-key-card__stat-value { display: block; font-family: var(--sf-font-mono); font-size: var(--sf-text-base); font-weight: 600; }
[b-etsbhj949f] .api-key-card__stat-label { display: block; font-family: var(--sf-font-mono); font-size: var(--sf-text-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sf-text-muted); }

[b-etsbhj949f] .api-key-card__actions { display: flex; gap: 0.15rem; }

[b-etsbhj949f] .api-key-card__budget { width: 100%; text-align: right; font-family: var(--sf-font-mono); font-size: var(--sf-text-2xs); color: var(--sf-text-muted); margin-top: -0.5rem; }

[b-etsbhj949f] .api-keys__install-title { font-size: var(--sf-text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sf-text-muted); margin: 1rem 0 0.25rem; }
[b-etsbhj949f] .api-keys__install-hint { font-size: var(--sf-text-xs); color: var(--sf-text-muted); margin: 0 0 0.5rem; }
[b-etsbhj949f] .api-keys__install-os { font-family: var(--sf-font-mono); font-size: var(--sf-text-3xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sf-text-muted); margin-bottom: 0.35rem; }
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard page — scoped overrides matching AWstore design */

/* Greeting / title — size, weight and family come from the h1 baseline in
   app.css; only the spacing is page-specific. */
[b-80p8j9y2vp] .dashboard__greeting {
    margin: 0 0 0.15rem;
}

[b-80p8j9y2vp] .dashboard__subtitle {
    color: var(--sf-text-subtle);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-xs);
    margin: 0 0 0.75rem;
}

/* Stat cards grid */
[b-80p8j9y2vp] .dashboard__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
@media (min-width: 640px) {
    [b-80p8j9y2vp] .dashboard__stats { gap: 1rem; }
}
@media (max-width: 639px) {
    [b-80p8j9y2vp] .dashboard__stats { grid-template-columns: 1fr; }
}

[b-80p8j9y2vp] .dashboard__stat-card {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
/* Balance card header row: icon left, topup button right */
[b-80p8j9y2vp] .dashboard__balance-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

[b-80p8j9y2vp] .dashboard__stat-icon--no-mb {
    margin-bottom: 0 !important;
}

/* Top-up button — pushed to right, compact size */
[b-80p8j9y2vp] .dashboard__topup-btn {
    margin-left: auto !important;
    font-size: var(--sf-text-2xs) !important;
    letter-spacing: 0.04em;
    padding: 3px 10px !important;
    min-width: auto !important;
    height: 28px !important;
    border-radius: 6px !important;
}
@media (min-width: 640px) {
    [b-80p8j9y2vp] .dashboard__stat-card { padding: 1rem 1.25rem; }
}

[b-80p8j9y2vp] .dashboard__stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}
[b-80p8j9y2vp] .dashboard__stat-icon--balance { background: var(--sf-accent-soft); color: var(--sf-accent); }
[b-80p8j9y2vp] .dashboard__stat-icon--spent   { background: var(--sf-accent-soft); color: var(--sf-accent); }
[b-80p8j9y2vp] .dashboard__stat-icon--deposited { background: var(--sf-accent-soft); color: var(--sf-accent); }

[b-80p8j9y2vp] .dashboard__stat-label {
    font-family: var(--sf-font-mono) !important;
    font-size: var(--sf-text-3xs) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sf-text-faint) !important;
    margin-bottom: 0.25rem;
}

[b-80p8j9y2vp] .dashboard__stat-value {
    font-size: var(--sf-text-xl) !important;
    font-weight: 600 !important;
    font-family: var(--sf-font-sans) !important;
    color: var(--sf-text-strong) !important;
}
@media (min-width: 640px) {
    [b-80p8j9y2vp] .dashboard__stat-value { font-size: var(--sf-text-2xl) !important; }
}

[b-80p8j9y2vp] .dashboard__stat-sub {
    font-family: var(--sf-font-mono) !important;
    font-size: var(--sf-text-3xs) !important;
    color: var(--sf-text-ghost) !important;
    margin-top: 0.125rem;
}

/* Sections — the gap between consecutive panels, and their inner padding,
   are the same for all three, so they belong on the class rather than on
   each element. */
[b-80p8j9y2vp] .dashboard__section {
    padding: 0.75rem;
    margin-top: 0.75rem;
}

[b-80p8j9y2vp] .dashboard__section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
[b-80p8j9y2vp] .dashboard__section-header h3 {
    margin: 0;
    font-size: var(--sf-text-base);
    font-weight: 600;
}
[b-80p8j9y2vp] .dashboard__section-hint {
    margin-left: auto;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-3xs);
    color: var(--sf-text-faint);
}
/* Trailing note beside the hint — quieter still. */
[b-80p8j9y2vp] .dashboard__section-hint--note {
    margin-left: 0.25rem;
    color: var(--sf-text-ghost);
}

/* Tabs */
[b-80p8j9y2vp] .dashboard__tabs { background: transparent; }

[b-80p8j9y2vp] .dashboard__empty {
    padding: 2rem;
    text-align: center;
    color: var(--sf-text-subtle);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-xs);
}

/* Transaction amount colors */
[b-80p8j9y2vp] .text-success { color: var(--sf-text-success); }
[b-80p8j9y2vp] .text-warning { color: var(--sf-text-danger); }

/* Transaction key cell: Name (sk-••••XXXX) */
[b-80p8j9y2vp] .dashboard__key-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    white-space: nowrap;
}

[b-80p8j9y2vp] .dashboard__key-name {
    color: var(--sf-text-strong);
    font-weight: 500;
    font-size: var(--sf-text-xs);
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-80p8j9y2vp] .dashboard__key-sep {
    color: var(--sf-text-subtle);
    font-size: var(--sf-text-xs);
}

[b-80p8j9y2vp] .dashboard__key-prefix {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-2xs);
    color: var(--sf-text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

[b-80p8j9y2vp] .dashboard__muted {
    color: var(--sf-text-faint);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-2xs);
}

/* Model breakdown */
[b-80p8j9y2vp] .model-breakdown { display: flex; flex-direction: column; gap: 0.5rem; }

[b-80p8j9y2vp] .model-breakdown__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    flex-wrap: wrap;
}
[b-80p8j9y2vp] .model-breakdown__row:hover { background: rgba(255, 255, 255, 0.04); }

[b-80p8j9y2vp] .model-breakdown__name {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 200px;
}
[b-80p8j9y2vp] .model-breakdown__name strong { font-size: var(--sf-text-base); }

[b-80p8j9y2vp] .model-breakdown__req {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-3xs);
    color: var(--sf-text-faint);
}

[b-80p8j9y2vp] .model-breakdown__stats { display: flex; gap: 0.75rem; }

[b-80p8j9y2vp] .model-breakdown__stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--sf-border);
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    min-width: 90px;
    text-align: center;
}

[b-80p8j9y2vp] .model-breakdown__stat-label {
    display: block;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-micro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sf-text-faint);
}

[b-80p8j9y2vp] .model-breakdown__stat-value {
    display: block;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-base);
    font-weight: 600;
    margin-top: 0.1rem;
}

/* MudBlazor tab panel font overrides */
[b-80p8j9y2vp] .mud-tabs .mud-tab {
    font-family: var(--sf-font-mono) !important;
    font-size: var(--sf-text-2xs) !important;
    letter-spacing: 0.02em;
    text-transform: none !important;
}

/* MudBlazor table font overrides */
[b-80p8j9y2vp] .mud-table .mud-table-cell {
    font-family: var(--sf-font-mono) !important;
    font-size: var(--sf-text-3xs) !important;
}
[b-80p8j9y2vp] .mud-table .mud-table-head .mud-table-cell {
    font-size: var(--sf-text-micro) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sf-text-faint);
}
[b-80p8j9y2vp] .mud-chip {
    font-family: var(--sf-font-sans) !important;
}

/* NOTE: Mobile responsive rules for Model Cost Breakdown live in
   wwwroot/css/app.css (`@media (max-width: 639px)`). This project does
   not consume scoped `.razor.css` reliably, so global app.css is the
   source of truth for component styling. */
/* /Components/Pages/Docs/DocsIndex.razor.rz.scp.css */
/* DocsIndex — documentation layout with sidebar and content */
/* Grid rather than .storefront-page, so it takes the shared header gap
   explicitly. */
.docs-layout[b-boblpprjsd] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-top: var(--sf-page-top);
}

@media (min-width: 900px) {
    .docs-layout[b-boblpprjsd] {
        grid-template-columns: 260px 1fr;
    }
}

[b-boblpprjsd] .docs-sidebar {
    padding: 1.5rem;
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

[b-boblpprjsd] .docs-sidebar__heading {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 1rem 0 0.5rem;
}

[b-boblpprjsd] .docs-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[b-boblpprjsd] .docs-sidebar__link {
    display: block;
    padding: 0.4rem 0.75rem;
    color: var(--sf-text-muted);
    text-decoration: none;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
    border-radius: 8px;
}

[b-boblpprjsd] .docs-sidebar__link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--sf-text);
}

[b-boblpprjsd] .docs-sidebar__link--active {
    background: var(--sf-accent-soft);
    color: var(--sf-accent);
}

[b-boblpprjsd] .docs-content {
    padding: 2rem 2.5rem;
}

[b-boblpprjsd] .docs-content h1 {
    margin-top: 0;
}

[b-boblpprjsd] .docs-content h3 {
    margin-top: 1.5rem;
}

[b-boblpprjsd] .docs-content p,
[b-boblpprjsd] .docs-content li {
    color: var(--sf-text-muted);
    line-height: 1.6;
}

[b-boblpprjsd] .docs-content ul,
[b-boblpprjsd] .docs-content ol {
    margin-left: 20px;
}

[b-boblpprjsd] .docs-content code {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: var(--sf-text-xs);
}

[b-boblpprjsd] .docs-code {
    position: relative;
    background: #0a0612;
    border: 1.5px dotted var(--sf-border);
    border-radius: 12px;
    padding: 1rem;
    margin: 0.75rem 0;
}

[b-boblpprjsd] .docs-code pre {
    margin: 0;
    overflow-x: auto;
}

[b-boblpprjsd] .docs-code code {
    background: transparent;
    padding: 0;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home — landing page with hero, features, and pricing sections */
/* The landing hero is deliberately airier than a routed page: it opens the
   site rather than continuing a session, and the login card beside it needs
   the vertical room. It still derives from --sf-page-top so it moves with
   the rest of the scale. */
.storefront-hero[b-c1dt4je9f1] {
    padding: calc(var(--sf-page-top) * 2.5) 0 2rem;
}

[b-c1dt4je9f1] .storefront-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 960px) {
    [b-c1dt4je9f1] .storefront-hero__grid {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

[b-c1dt4je9f1] .storefront-hero__eyebrow {
    color: var(--sf-accent);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[b-c1dt4je9f1] .storefront-hero__title {
    font-size: var(--sf-text-hero);
    font-weight: 700;
    line-height: 1.05;
    margin: 0.75rem 0 1rem;
}

[b-c1dt4je9f1] .storefront-hero__title-emph {
    color: var(--sf-accent);
    font-style: italic;
}

[b-c1dt4je9f1] .storefront-hero__tagline {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-md);
    color: var(--sf-text-muted);
    max-width: 520px;
    line-height: 1.6;
}

[b-c1dt4je9f1] .storefront-hero__ctas {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

[b-c1dt4je9f1] .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

[b-c1dt4je9f1] .features-grid__item {
    padding: 1.5rem;
}

[b-c1dt4je9f1] .features-grid__item h3 {
    font-size: var(--sf-text-md);
    font-weight: 600;
    margin: 0 0 0.5rem;
}

[b-c1dt4je9f1] .features-grid__item p {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
    line-height: 1.55;
    margin: 0;
}

[b-c1dt4je9f1] .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

[b-c1dt4je9f1] .dashboard-grid__cta {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

[b-c1dt4je9f1] .dashboard-grid__cta h3 {
    margin: 0;
    font-size: var(--sf-text-md);
}

[b-c1dt4je9f1] .dashboard-grid__cta p {
    margin: 0;
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
}

/* ── Hot trial CTA button with fire icon & pulse glow ── */
[b-c1dt4je9f1] .storefront-btn--hot {
    position: relative;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(249, 115, 22, 0.18));
    border-color: #f97316;
    color: var(--sf-text-on-accent);
    font-weight: 600;
    animation: hot-pulse-b-c1dt4je9f1 2s ease-in-out infinite;
    gap: 0.35rem;
}

[b-c1dt4je9f1] .storefront-btn--hot:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.32), rgba(249, 115, 22, 0.32));
    border-color: #fb923c;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.3);
}

[b-c1dt4je9f1] .storefront-btn__fire {
    font-size: var(--sf-text-md);
    line-height: 1;
    animation: fire-wiggle-b-c1dt4je9f1 1.5s ease-in-out infinite;
}

@keyframes hot-pulse-b-c1dt4je9f1 {
    0%, 100% {
        box-shadow: 0 0 6px rgba(249, 115, 22, 0.15);
    }
    50% {
        box-shadow: 0 0 18px rgba(249, 115, 22, 0.35), 0 0 40px rgba(249, 115, 22, 0.1);
    }
}

@keyframes fire-wiggle-b-c1dt4je9f1 {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-6deg) scale(1.1); }
    75% { transform: rotate(6deg) scale(1.1); }
}
/* /Components/Pages/Plans.razor.rz.scp.css */
/* Plans — subscription tier cards.

   Selectors are unprefixed: Blazor stamps the scope attribute on every element
   this page renders, so `.plans__card` compiles to `.plans__card[b-scope]` and
   matches. `::deep` compiles to `[b-scope] .plans__card`, which needs a scoped
   *ancestor* — the card has none, so such a rule silently drops both its
   padding and the `position: relative` the "current" badge anchors to. */
/* Size and weight come from the h1 baseline in app.css. */
.plans__heading[b-xyw464g3nr] {
    margin-bottom: 0.15rem;
}

.plans__subtitle[b-xyw464g3nr] {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
    margin-bottom: 1.5rem;
}

.plans__empty[b-xyw464g3nr] {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-xs);
}

.plans__grid[b-xyw464g3nr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.plans__card[b-xyw464g3nr] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem;
}

.plans__card--current[b-xyw464g3nr] {
    border-style: solid;
    border-color: var(--sf-accent);
}

.plans__badge[b-xyw464g3nr] {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-3xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sf-accent);
    border: 1px solid var(--sf-accent);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}

/* Card title: one step below the page h1, shared with .pricing-block__title
   and .apikey-drawer__name so every card heading reads at the same size. */
.plans__name[b-xyw464g3nr] {
    font-size: var(--sf-text-xl);
    margin: 0;
}

.plans__price[b-xyw464g3nr] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0.5rem 0 0.75rem;
}

.plans__price-value[b-xyw464g3nr] {
    font-size: var(--sf-text-4xl);
    font-weight: 600;
    color: var(--sf-accent);
}

.plans__price-unit[b-xyw464g3nr] {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-xs);
    color: var(--sf-text-muted);
}

.plans__description[b-xyw464g3nr] {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
    line-height: var(--sf-leading-normal);
    margin: 0 0 1rem;
}

.plans__features[b-xyw464g3nr] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    /* Push the CTA to the card's base so buttons line up across a row
       whose cards have differing feature counts. */
    flex: 1;
}

.plans__features li[b-xyw464g3nr] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px dotted var(--sf-border);
    font-size: var(--sf-text-sm);
}

.plans__features li:last-child[b-xyw464g3nr] {
    border-bottom: none;
}

.plans__features span[b-xyw464g3nr] {
    color: var(--sf-text-muted);
}

.plans__features strong[b-xyw464g3nr] {
    font-family: var(--sf-font-mono);
    color: var(--sf-text);
    font-weight: 600;
    text-align: right;
}

.plans__note[b-xyw464g3nr] {
    margin-top: 1.5rem;
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-xs);
    line-height: var(--sf-leading-relaxed);
}

@media (max-width: 600px) {
    .plans__card[b-xyw464g3nr] {
        padding: 1.25rem 1.1rem;
    }

    .plans__price-value[b-xyw464g3nr] {
        font-size: var(--sf-text-3xl);
    }
}
/* /Components/Pages/Register.razor.rz.scp.css */
/* Register — Google-only registration page */
[b-ylefjoy6x8] .register-page {
    max-width: 480px;
    margin: 2rem auto;
    padding: 2rem;
}

[b-ylefjoy6x8] .register-page__subtitle {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-base);
    margin-bottom: 1.5rem;
}

/* Promo block */
[b-ylefjoy6x8] .register-page__promo {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: color-mix(in srgb, var(--sf-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--sf-accent) 30%, transparent);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.5rem;
}

[b-ylefjoy6x8] .register-page__promo-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

[b-ylefjoy6x8] .register-page__promo-title {
    font-size: var(--sf-text-md);
    font-weight: 600;
    color: var(--sf-text);
}

[b-ylefjoy6x8] .register-page__promo-desc {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
    color: var(--sf-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Google button */
[b-ylefjoy6x8] .register-page__google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

[b-ylefjoy6x8] .register-page__google-icon { margin-right: 5px; }

/* Not configured notice */
[b-ylefjoy6x8] .register-page__no-google {
    text-align: center;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
    color: var(--sf-text-muted);
    margin-top: 1rem;
}

/* Footer */
[b-ylefjoy6x8] .register-page__footer {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
}

[b-ylefjoy6x8] .register-page__footer a {
    color: var(--sf-accent);
    margin-left: 0.25rem;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
/* Settings — profile and password management */
[b-cuvlca9eea] .settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
}
/* /Components/Pages/Usage.razor.rz.scp.css */
/* Usage — request log table page */
/* /Components/Shared/ApiKeySettingsDrawer.razor.rz.scp.css */
/* API Key Settings Drawer */
[b-9tov7zj8q7] .apikey-drawer { background: var(--sf-bg) !important; }
[b-9tov7zj8q7] .apikey-drawer__header { display: flex; align-items: center; justify-content: space-between; width: 100%; }
[b-9tov7zj8q7] .apikey-drawer__name { margin: 0; font-size: var(--sf-text-xl); font-weight: 600; display: flex; align-items: center; gap: 0.25rem; }
[b-9tov7zj8q7] .apikey-drawer__name-edit { font-size: var(--sf-text-lg); }

[b-9tov7zj8q7] .apikey-drawer__secret { display: flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.03); border: 1.5px dotted var(--sf-border); border-radius: 10px; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
[b-9tov7zj8q7] .apikey-drawer__secret code { font-family: var(--sf-font-mono); font-size: var(--sf-text-sm); color: var(--sf-text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; }

[b-9tov7zj8q7] .apikey-drawer__budget-bar { margin-bottom: 0.75rem; }
[b-9tov7zj8q7] .apikey-drawer__budget-text { font-family: var(--sf-font-mono); font-size: var(--sf-text-2xs); color: var(--sf-text-muted); text-align: right; display: block; margin-top: 0.15rem; }

[b-9tov7zj8q7] .apikey-drawer__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
[b-9tov7zj8q7] .apikey-drawer__stat { text-align: center; padding: 0.5rem 0.25rem; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--sf-border); border-radius: 8px; }
[b-9tov7zj8q7] .apikey-drawer__stat-value { display: block; font-family: var(--sf-font-mono); font-size: var(--sf-text-md); font-weight: 600; }
[b-9tov7zj8q7] .apikey-drawer__stat-label { display: block; font-family: var(--sf-font-mono); font-size: var(--sf-text-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sf-text-muted); }

[b-9tov7zj8q7] .apikey-drawer__section-title { font-size: var(--sf-text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sf-text-muted); margin: 0.75rem 0 0.5rem; display: flex; align-items: center; }

[b-9tov7zj8q7] .apikey-drawer__budget-note { font-family: var(--sf-font-mono); font-size: var(--sf-text-2xs); color: var(--sf-text-muted); margin: 0.25rem 0 0.75rem; }

[b-9tov7zj8q7] .apikey-drawer__usage-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.75rem 0; padding: 0.75rem; background: rgba(255, 255, 255, 0.02); border-radius: 10px; }
[b-9tov7zj8q7] .apikey-drawer__usage-sub { display: block; font-family: var(--sf-font-mono); font-size: var(--sf-text-2xs); color: var(--sf-text-muted); }

[b-9tov7zj8q7] .apikey-drawer__created { font-family: var(--sf-font-mono); font-size: var(--sf-text-xs); color: var(--sf-text-muted); margin: 0.75rem 0; }

[b-9tov7zj8q7] .apikey-drawer__install-hint { font-size: var(--sf-text-xs); color: var(--sf-text-muted); margin: 0 0 0.5rem; }
[b-9tov7zj8q7] .apikey-drawer__install-os { font-family: var(--sf-font-mono); font-size: var(--sf-text-3xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sf-text-muted); margin-bottom: 0.35rem; }
[b-9tov7zj8q7] .apikey-drawer .docs-code { padding: 0.6rem 0.75rem; margin: 0.5rem 0; }
[b-9tov7zj8q7] .apikey-drawer .docs-code pre { white-space: pre-wrap; word-break: break-all; }
[b-9tov7zj8q7] .apikey-drawer .docs-code code { font-size: var(--sf-text-xs); }

[b-9tov7zj8q7] .apikey-drawer__footer { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1.5px dotted var(--sf-border); }
/* /Components/Shared/BillingPanel.razor.rz.scp.css */
/* BillingPanel — balance, stats, and top-up packs */
.billing-panel[b-dnmi2g1x64] {
    padding: 2rem;
}

[b-dnmi2g1x64] .billing-panel__header {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

[b-dnmi2g1x64] .billing-panel__eyebrow {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[b-dnmi2g1x64] .billing-panel__balance {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

[b-dnmi2g1x64] .billing-panel__balance-value {
    font-size: var(--sf-text-5xl);
    font-weight: 600;
    color: var(--sf-accent);
}

[b-dnmi2g1x64] .billing-panel__balance-unit {
    font-family: var(--sf-font-mono);
    color: var(--sf-text-muted);
    font-size: var(--sf-text-base);
}

[b-dnmi2g1x64] .billing-panel__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, auto));
    gap: 0.75rem 1.5rem;
    font-family: var(--sf-font-mono);
}

[b-dnmi2g1x64] .billing-panel__stats span {
    color: var(--sf-text-muted);
    font-size: var(--sf-text-2xs);
    text-transform: uppercase;
    display: block;
}

[b-dnmi2g1x64] .billing-panel__stats strong {
    font-size: var(--sf-text-md);
    color: var(--sf-text);
}

[b-dnmi2g1x64] .billing-panel__topup {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1.5px dotted var(--sf-border);
}

[b-dnmi2g1x64] .billing-panel__packs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin: 0.75rem 0;
}

@media (max-width: 600px) {
    [b-dnmi2g1x64] .billing-panel__packs {
        grid-template-columns: repeat(2, 1fr);
    }
}

[b-dnmi2g1x64] .billing-panel__pack {
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px dotted var(--sf-border);
    border-radius: 12px;
    padding: 1rem 0.5rem;
    text-align: center;
    color: var(--sf-text-muted);
    cursor: not-allowed;
}

[b-dnmi2g1x64] .billing-panel__pack-amount {
    display: block;
    font-family: var(--sf-font-mono);
    font-weight: 600;
    font-size: var(--sf-text-lg);
    color: var(--sf-text);
}

[b-dnmi2g1x64] .billing-panel__pack-unit {
    display: block;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[b-dnmi2g1x64] .billing-panel__topup-note {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
}

[b-dnmi2g1x64] .billing-panel__topup-note a {
    color: var(--sf-accent);
    margin-left: 0.25rem;
}
/* /Components/Shared/CopyButton.razor.rz.scp.css */
/* CopyButton — clipboard copy action button */
.copy-button[b-t0s65issl3] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px dotted var(--sf-border);
    border-radius: 8px;
    padding: 0.25rem 0.65rem;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-2xs);
    color: var(--sf-text-muted);
    cursor: pointer;
}

.copy-button:hover[b-t0s65issl3] {
    color: var(--sf-text);
    border-color: var(--sf-accent);
}
/* /Components/Shared/GetStartedDialog.razor.rz.scp.css */
[b-3tp0p02ga3] .getstarted__body {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
    margin-bottom: 1rem;
    line-height: var(--sf-leading-normal);
}

[b-3tp0p02ga3] .getstarted__steps {
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
    line-height: var(--sf-leading-normal);
}
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */
/* LanguageSwitcher — culture toggle dropdown */
[b-ugtdl270j9] .storefront-lang__select {
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px dotted var(--sf-border);
    color: var(--sf-text);
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-xs);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
/* /Components/Shared/LoginCard.razor.rz.scp.css */
/* LoginCard — credential form displayed in the hero area */
.login-card[b-uqop5a7kq6] {
    padding: 2rem;
    max-width: 440px;
}

[b-uqop5a7kq6] .login-card__eyebrow {
    color: var(--sf-accent);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Size and weight come from the h2 baseline in app.css. */
[b-uqop5a7kq6] .login-card__title {
    margin: 0.5rem 0 0.25rem;
}

[b-uqop5a7kq6] .login-card__subtitle {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-base);
    margin: 0 0 1.5rem;
}

[b-uqop5a7kq6] .login-card__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-uqop5a7kq6] .login-card__label {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

[b-uqop5a7kq6] .login-card__input {
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px dotted var(--sf-border-strong);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    color: var(--sf-text);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-base);
    outline: none;
    transition: border-color .2s ease;
    width: 100%;
    box-sizing: border-box;
}

[b-uqop5a7kq6] .login-card__input:focus {
    border-color: var(--sf-accent);
}

[b-uqop5a7kq6] .login-card__divider {
    text-align: center;
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-xs);
    margin: 1rem 0;
}

[b-uqop5a7kq6] .login-card__footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1.5px dotted var(--sf-border);
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
}

[b-uqop5a7kq6] .login-card__footer a {
    color: var(--sf-accent);
    text-decoration: none;
    margin-left: 0.25rem;
}
/* /Components/Shared/PricingBlock.razor.rz.scp.css */
/* PricingBlock — model pricing table */
.pricing-block[b-e4171knok7] {
    padding: 2rem;
}

[b-e4171knok7] .pricing-block__header {
    margin-bottom: 1.5rem;
}

/* Card title — see .plans__name. */
[b-e4171knok7] .pricing-block__title {
    font-size: var(--sf-text-xl);
    margin: 0;
}

[b-e4171knok7] .pricing-block__subtitle {
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
}

[b-e4171knok7] .pricing-block__models {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[b-e4171knok7] .pricing-block__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
}

[b-e4171knok7] .pricing-block__row:hover {
    background: rgba(255, 255, 255, 0.02);
}

[b-e4171knok7] .pricing-block__model {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-base);
}

[b-e4171knok7] .pricing-block__rates {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-xs);
    color: var(--sf-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[b-e4171knok7] .pricing-block__empty,
[b-e4171knok7] .pricing-block__loading {
    padding: 1.5rem;
    color: var(--sf-text-muted);
    text-align: center;
}
/* /Components/Shared/RedirectToLogin.razor.rz.scp.css */
/* RedirectToLogin — placeholder while redirecting unauthenticated users */
/* /Components/Shared/SubscriptionPanel.razor.rz.scp.css */
/* SubscriptionPanel — active plan, quota windows, exhaustion behaviour.

   Selectors are unprefixed on purpose. Blazor stamps the scope attribute on
   every element this component renders, including the root `<section>`, so a
   plain selector reaches all of them. `::deep` compiles to
   `[b-xxxxx] .thing`, which requires an *ancestor* carrying the attribute —
   it can never match the component's own root element. */
.subscription-panel[b-zct5315xdj] {
    /* Owns its own top gap so the dashboard does not need a wrapper div,
       matching the 0.75rem rhythm between every other dashboard section. */
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── header row: icon chip, title, right-aligned actions ───────── */

.subscription-panel__head[b-zct5315xdj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.subscription-panel__icon[b-zct5315xdj] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--sf-accent-soft);
    color: var(--sf-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.subscription-panel__title[b-zct5315xdj] {
    margin: 0;
    font-size: var(--sf-text-base);
    font-weight: 600;
}

.subscription-panel__hint[b-zct5315xdj],
.subscription-panel__renewal[b-zct5315xdj] {
    margin-left: auto;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-3xs);
    color: var(--sf-text-faint);
}

.subscription-panel__actions[b-zct5315xdj] {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.subscription-panel__eyebrow[b-zct5315xdj] {
    display: block;
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-3xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── empty state ───────────────────────────────────────────────── */

.subscription-panel__empty[b-zct5315xdj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.subscription-panel__empty-text[b-zct5315xdj] {
    flex: 1;
    min-width: 220px;
    margin: 0;
    color: var(--sf-text-muted);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-xs);
    line-height: 1.5;
}

[b-zct5315xdj] .subscription-panel__cta.mud-button-root {
    flex-shrink: 0;
    font-size: var(--sf-text-2xs);
    letter-spacing: 0.04em;
    padding: 3px 12px;
    min-width: auto;
    height: 28px;
    border-radius: 6px;
}

/* ── active plan ───────────────────────────────────────────────── */

.subscription-panel__plan[b-zct5315xdj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.subscription-panel__plan-name[b-zct5315xdj] {
    font-size: var(--sf-text-2xl);
    font-weight: 600;
    line-height: 1.2;
    color: var(--sf-accent);
}

/* ── quota windows ─────────────────────────────────────────────── */

.subscription-panel__quotas[b-zct5315xdj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.subscription-panel__quota[b-zct5315xdj] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--sf-border);
    border-radius: 10px;
    padding: 0.625rem 0.75rem;
}

.subscription-panel__quota-head[b-zct5315xdj] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.subscription-panel__quota-label[b-zct5315xdj] {
    color: var(--sf-text-faint);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.subscription-panel__quota-value[b-zct5315xdj] {
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-sm);
    font-weight: 600;
    color: var(--sf-text-strong);
}

[b-zct5315xdj] .subscription-panel__quota-bar {
    margin-top: 0.4rem;
}

.subscription-panel__quota-reset[b-zct5315xdj] {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-micro);
    color: var(--sf-text-ghost);
}

/* ── exhaustion behaviour ──────────────────────────────────────── */

.subscription-panel__behavior[b-zct5315xdj] {
    padding-top: 0.75rem;
    border-top: 1.5px dotted var(--sf-border);
}

[b-zct5315xdj] .subscription-panel__behavior-options {
    margin-top: 0.25rem;
}

[b-zct5315xdj] .subscription-panel__behavior-options .mud-radio {
    font-size: var(--sf-text-xs);
}

.subscription-panel__behavior-note[b-zct5315xdj] {
    margin: 0.25rem 0 0;
    color: var(--sf-text-faint);
    font-family: var(--sf-font-mono);
    font-size: var(--sf-text-3xs);
    line-height: 1.5;
}

@media (max-width: 639px) {
    .subscription-panel[b-zct5315xdj] {
        padding: 0.75rem;
    }

    .subscription-panel__quotas[b-zct5315xdj] {
        grid-template-columns: 1fr;
    }

    .subscription-panel__plan-name[b-zct5315xdj] {
        font-size: var(--sf-text-xl);
    }

    .subscription-panel__hint[b-zct5315xdj],
    .subscription-panel__renewal[b-zct5315xdj] {
        margin-left: 0;
        width: 100%;
    }

    .subscription-panel__actions[b-zct5315xdj] {
        margin-left: 0;
        width: 100%;
    }
}
/* /Components/Shared/TopUpPricingDialog.razor.rz.scp.css */
/* TopUpPricingDialog — credit pack table, rendered by MudDialog.

   MudDialog portals its content to the document root, so the dialog body
   has no ancestor carrying this component's scope attribute. Everything
   here needs ::deep. */

[b-w1n61d6tke] .topup__title {
    font-weight: var(--sf-weight-semibold);
}

[b-w1n61d6tke] .topup__price {
    font-weight: var(--sf-weight-semibold);
    font-size: var(--sf-text-md);
}

[b-w1n61d6tke] .topup__credits {
    font-weight: var(--sf-weight-semibold);
    font-size: var(--sf-text-md);
    color: var(--sf-text-success);
}

[b-w1n61d6tke] .topup__paying {
    font-weight: var(--sf-weight-semibold);
}

/* Telegram brand blue — deliberately outside the token ramp: it identifies
   the platform, so it must not drift with the theme. */
[b-w1n61d6tke] .topup__telegram-icon {
    color: #26A5E4;
}