/* ============================================================================
   Isabyte — "Aurora Summit" design system
   Dark-first, editorial. Brand gradient (#6D4AFF → #A24BE8 → #E84F9C) used as a
   sharp accent over a deep-navy canvas. Mirrors the Isabyte.PowerTools.Blazor.Server
   app.css token approach, adapted to the Isabyte brand.
   Fonts loaded via <link> in App.razor: Montserrat / Manrope / JetBrains Mono.
   ========================================================================== */

:root {
    /* ===== Brand gradient + stops ===== */
    --bx-grad: linear-gradient(120deg, #6D4AFF 0%, #A24BE8 55%, #E84F9C 100%);
    --bx-grad-soft: linear-gradient(120deg, rgba(109,74,255,.18), rgba(232,79,156,.18));
    --bx-violet: #6D4AFF;
    --bx-purple: #A24BE8;
    --bx-pink: #E84F9C;

    /* ===== Canvas / surfaces (dark, default) ===== */
    --bx-abyss: #0D0821;        /* deepest background */
    --bx-night: #15102B;        /* primary surface */
    --bx-night-2: #1B1438;      /* elevated surface */
    --bx-ink: #1B1A2E;          /* deep ink (text on light) */
    --bx-line: rgba(180, 160, 255, .14);
    --bx-line-strong: rgba(180, 160, 255, .28);

    /* ===== Text ===== */
    --bx-text: #ECE9F6;
    --bx-text-soft: #B9B2D6;
    --bx-mist: #8A84A6;         /* muted ("LABS" grey) */

    /* ===== Glows ===== */
    --bx-glow-violet: rgba(109, 74, 255, .45);
    --bx-glow-pink: rgba(232, 79, 156, .35);
    --bx-node: radial-gradient(circle at 40% 35%, #FFFFFF 0%, #FFD7EC 70%, rgba(255,215,236,0) 100%);

    /* ===== Status (ok / warn / danger / info) — -soft = tinted surface ===== */
    --bx-ok: #63D68B;
    --bx-ok-soft: rgba(99, 214, 139, .14);
    --bx-warn: #F4B64F;
    --bx-warn-soft: rgba(244, 182, 79, .14);
    --bx-danger: #FF7D9C;
    --bx-danger-rgb: 255, 125, 156;
    --bx-danger-soft: rgba(255, 125, 156, .14);
    --bx-info: #6FB6FF;
    --bx-info-soft: rgba(111, 182, 255, .14);

    /* ===== Type scale ===== */
    --bx-font-display: "Montserrat", system-ui, sans-serif;
    --bx-font-body: "Manrope", system-ui, sans-serif;
    --bx-font-mono: "JetBrains Mono", ui-monospace, monospace;
    --bx-hero: clamp(2.6rem, 6vw, 4.5rem);
    --bx-h1: clamp(2rem, 4vw, 3rem);
    --bx-h2: clamp(1.5rem, 2.6vw, 2.1rem);
    --bx-h3: 1.25rem;
    --bx-body: 1.05rem;

    /* ===== Shape ===== */
    --bx-radius: 18px;
    --bx-radius-sm: 12px;
    --bx-shadow: 0 24px 60px -20px rgba(0,0,0,.65);
    --bx-shadow-glow: 0 20px 60px -22px var(--bx-glow-violet);

    --bx-maxw: 1180px;
}

/* Light theme overrides (header toggle sets data-theme="light" on <html>) */
:root[data-theme="light"] {
    --bx-abyss: #FBFBFE;
    --bx-night: #FFFFFF;
    --bx-night-2: #F4F1FB;
    --bx-line: rgba(27, 26, 46, .10);
    --bx-line-strong: rgba(27, 26, 46, .18);
    --bx-text: #1B1A2E;
    --bx-text-soft: #4B4762;
    --bx-mist: #6A6486;
    --bx-shadow: 0 24px 60px -28px rgba(60, 40, 120, .22);
    --bx-ok: #2E7D32;
    --bx-ok-soft: #E8F5E9;
    --bx-warn: #B26A00;
    --bx-warn-soft: #FFF3E0;
    --bx-danger: #C62828;
    --bx-danger-rgb: 198, 40, 40;
    --bx-danger-soft: #FCE4EC;
    --bx-info: #114E7C;
    --bx-info-soft: #E3F2FD;
}

/* ===== Bootstrap 5.3 color-mode bridge ==================================
   App.razor keeps data-bs-theme on <html> in lockstep with the bx theme
   (dark -> "dark", light -> "light"), which switches on Bootstrap's OWN
   dark styling for its form controls / tables / cards / alerts on every
   page. This block then re-points Bootstrap's surface tokens at the bx
   palette, so those surfaces are the hub's violet-tinted colors instead
   of Bootstrap's generic slate. bx tokens already flip with data-theme,
   so ONE bridge serves both modes — do not fork it per theme. */
:root {
    --bs-body-bg: var(--bx-night);
    --bs-body-color: var(--bx-text);
    --bs-emphasis-color: var(--bx-text);
    --bs-secondary-color: var(--bx-text-soft);
    --bs-secondary-bg: var(--bx-night-2);
    --bs-tertiary-bg: var(--bx-night-2);
    --bs-border-color: var(--bx-line-strong);
    --bs-heading-color: var(--bx-text);
}

/* Destructive outline buttons (Revoke / Remove / Delete across the Manage and
   Admin pages) re-pointed at the bx danger palette via Bootstrap 5.3's
   per-button variables — dark mode gets the soft #FF7D9C, light the deep
   #C62828, both from the same tokens. Hover/active fill with the danger color;
   the text then uses --bx-night, which is dark ink in dark mode (readable on
   the light-pink fill) and white in light mode (readable on the deep red) —
   one declaration serves both. */
/* ===== Bootstrap buttons on the Isabyte palette =========================
   The Manage/Admin views are built from Bootstrap buttons, and their stock
   blues/reds/greens are the one place the hub still looked like an unstyled
   template. Each variant is re-pointed at the bx tokens through Bootstrap
   5.3's per-button variables — the same mechanism .btn-outline-danger below
   has always used, so there is one technique here, not two.

   Filled variants take --bx-night for their text: it is dark ink in dark mode
   (readable on the light-pink/green/amber fills the dark palette uses) and
   white in light mode (readable on that palette's deep tones). One
   declaration serves both themes; do not fork these per data-theme.
   .btn-primary is the exception — brand violet is fixed in both themes, so
   its label is white in both. */
.btn-primary {
    --bs-btn-bg: var(--bx-violet);
    --bs-btn-border-color: var(--bx-violet);
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: var(--bx-purple);
    --bs-btn-hover-border-color: var(--bx-purple);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: var(--bx-purple);
    --bs-btn-active-border-color: var(--bx-purple);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--bx-violet);
    --bs-btn-disabled-border-color: var(--bx-violet);
    --bs-btn-disabled-color: #FFFFFF;
}

.btn-danger {
    --bs-btn-bg: var(--bx-danger);
    --bs-btn-border-color: var(--bx-danger);
    --bs-btn-color: var(--bx-night);
    --bs-btn-hover-bg: var(--bx-danger);
    --bs-btn-hover-border-color: var(--bx-danger);
    --bs-btn-hover-color: var(--bx-night);
    --bs-btn-active-bg: var(--bx-danger);
    --bs-btn-active-border-color: var(--bx-danger);
    --bs-btn-active-color: var(--bx-night);
    --bs-btn-disabled-bg: var(--bx-danger);
    --bs-btn-disabled-border-color: var(--bx-danger);
    --bs-btn-disabled-color: var(--bx-night);
}

.btn-success {
    --bs-btn-bg: var(--bx-ok);
    --bs-btn-border-color: var(--bx-ok);
    --bs-btn-color: var(--bx-night);
    --bs-btn-hover-bg: var(--bx-ok);
    --bs-btn-hover-border-color: var(--bx-ok);
    --bs-btn-hover-color: var(--bx-night);
    --bs-btn-active-bg: var(--bx-ok);
    --bs-btn-active-border-color: var(--bx-ok);
    --bs-btn-active-color: var(--bx-night);
    --bs-btn-disabled-bg: var(--bx-ok);
    --bs-btn-disabled-border-color: var(--bx-ok);
    --bs-btn-disabled-color: var(--bx-night);
}

.btn-warning {
    --bs-btn-bg: var(--bx-warn);
    --bs-btn-border-color: var(--bx-warn);
    --bs-btn-color: var(--bx-night);
    --bs-btn-hover-bg: var(--bx-warn);
    --bs-btn-hover-border-color: var(--bx-warn);
    --bs-btn-hover-color: var(--bx-night);
    --bs-btn-active-bg: var(--bx-warn);
    --bs-btn-active-border-color: var(--bx-warn);
    --bs-btn-active-color: var(--bx-night);
    --bs-btn-disabled-bg: var(--bx-warn);
    --bs-btn-disabled-border-color: var(--bx-warn);
    --bs-btn-disabled-color: var(--bx-night);
}

.btn-secondary {
    --bs-btn-bg: var(--bx-night-2);
    --bs-btn-border-color: var(--bx-line-strong);
    --bs-btn-color: var(--bx-text);
    --bs-btn-hover-bg: var(--bx-night-2);
    --bs-btn-hover-border-color: var(--bx-violet);
    --bs-btn-hover-color: var(--bx-text);
    --bs-btn-active-bg: var(--bx-night-2);
    --bs-btn-active-border-color: var(--bx-violet);
    --bs-btn-active-color: var(--bx-text);
}

/* Outline variants keep the surface and tint the ink + border; the hover fill
   then flips the label to --bx-night on the same both-themes reasoning. */
.btn-outline-primary {
    --bs-btn-color: var(--bx-violet);
    --bs-btn-border-color: var(--bx-violet);
    --bs-btn-hover-bg: var(--bx-violet);
    --bs-btn-hover-border-color: var(--bx-violet);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: var(--bx-violet);
    --bs-btn-active-border-color: var(--bx-violet);
    --bs-btn-active-color: #FFFFFF;
}

.btn-outline-secondary {
    --bs-btn-color: var(--bx-text-soft);
    --bs-btn-border-color: var(--bx-line-strong);
    --bs-btn-hover-bg: var(--bx-night-2);
    --bs-btn-hover-border-color: var(--bx-violet);
    --bs-btn-hover-color: var(--bx-text);
    --bs-btn-active-bg: var(--bx-night-2);
    --bs-btn-active-border-color: var(--bx-violet);
    --bs-btn-active-color: var(--bx-text);
}

.btn-outline-success {
    --bs-btn-color: var(--bx-ok);
    --bs-btn-border-color: var(--bx-ok);
    --bs-btn-hover-bg: var(--bx-ok);
    --bs-btn-hover-border-color: var(--bx-ok);
    --bs-btn-hover-color: var(--bx-night);
    --bs-btn-active-bg: var(--bx-ok);
    --bs-btn-active-border-color: var(--bx-ok);
    --bs-btn-active-color: var(--bx-night);
}

.btn-outline-warning {
    --bs-btn-color: var(--bx-warn);
    --bs-btn-border-color: var(--bx-warn);
    --bs-btn-hover-bg: var(--bx-warn);
    --bs-btn-hover-border-color: var(--bx-warn);
    --bs-btn-hover-color: var(--bx-night);
    --bs-btn-active-bg: var(--bx-warn);
    --bs-btn-active-border-color: var(--bx-warn);
    --bs-btn-active-color: var(--bx-night);
}

.btn-outline-info {
    --bs-btn-color: var(--bx-info);
    --bs-btn-border-color: var(--bx-info);
    --bs-btn-hover-bg: var(--bx-info);
    --bs-btn-hover-border-color: var(--bx-info);
    --bs-btn-hover-color: var(--bx-night);
    --bs-btn-active-bg: var(--bx-info);
    --bs-btn-active-border-color: var(--bx-info);
    --bs-btn-active-color: var(--bx-night);
}

.btn-outline-danger {
    --bs-btn-color: var(--bx-danger);
    --bs-btn-border-color: var(--bx-danger);
    --bs-btn-hover-color: var(--bx-night);
    --bs-btn-hover-bg: var(--bx-danger);
    --bs-btn-hover-border-color: var(--bx-danger);
    --bs-btn-active-color: var(--bx-night);
    --bs-btn-active-bg: var(--bx-danger);
    --bs-btn-active-border-color: var(--bx-danger);
    --bs-btn-focus-shadow-rgb: var(--bx-danger-rgb);
    --bs-btn-disabled-color: var(--bx-danger);
    --bs-btn-disabled-border-color: var(--bx-danger);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--bx-font-body);
    font-size: var(--bx-body);
    line-height: 1.6;
    color: var(--bx-text);
    background-color: var(--bx-abyss);
    background-image:
        radial-gradient(900px 600px at 12% -8%, rgba(109,74,255,.16), transparent 60%),
        radial-gradient(800px 600px at 92% 4%, rgba(232,79,156,.12), transparent 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--bx-font-display); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--bx-text); margin: 0 0 .5em; }
h2 { font-size: var(--bx-h2); }
h3 { font-size: var(--bx-h3); font-weight: 700; }
p { margin: 0 0 1rem; color: var(--bx-text-soft); }
a { color: var(--bx-violet); text-decoration: none; }
a:hover { color: var(--bx-pink); }

/* Blazor's <FocusOnNavigate Selector="h1"> focuses the page heading after every
   navigation (a11y: announce the new page). Without this, the UA default focus
   ring draws a box around every page title — the demo host's stylesheet has had
   this rule from the start; the hub never got it. */
h1:focus { outline: none; }

/* Screenshot frame used by the home showcase cards. */
.bx-shot { display: block; margin-bottom: 1rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--bx-line); }
.bx-shot img { display: block; width: 100%; height: auto; }

/* ===== Layout helpers ===== */
.bx-container { width: 100%; max-width: var(--bx-maxw); margin: 0 auto; padding: 0 1.5rem; }
.bx-section { padding: 5.5rem 0; position: relative; }
.bx-section--tight { padding: 3.5rem 0; }

/* ===== Eyebrow kicker (mono) ===== */
.bx-eyebrow {
    font-family: var(--bx-font-mono);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--bx-purple);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1rem;
}
.bx-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--bx-grad); }

/* ===== Gradient text-clip ===== */
.bx-grad-text {
    background: var(--bx-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ===== Tri-colour wordmark =====
   "isabyte" split is|a|byte across the three brand colours, so the logo's own idea
   ("is a byte") is readable in the word itself. The colours run in --bx-grad's own
   order (violet → purple → pink), which makes the wordmark a stepped version of the
   gradient the rest of the page uses continuously. The tokens are defined once at
   :root and are not re-declared per theme, so the word is identical light and dark.
   nowrap keeps a narrow viewport from breaking the word across lines. */
.bx-wordmark { white-space: nowrap; }
.bx-wordmark__is { color: var(--bx-violet); }
.bx-wordmark__a { color: var(--bx-purple); }
.bx-wordmark__byte { color: var(--bx-pink); }

/* ===== Hairline divider (logo underline motif) ===== */
.bx-hairline { height: 3px; width: 56px; border-radius: 3px; background: var(--bx-grad); border: 0; margin: 1.25rem 0; }
.bx-hairline--center { margin-left: auto; margin-right: auto; }

/* ===== Glass card ===== */
.bx-card {
    position: relative;
    background: color-mix(in oklab, var(--bx-night) 86%, transparent);
    border-radius: var(--bx-radius);
    padding: 1.75rem;
    box-shadow: var(--bx-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
/* 1px gradient border via mask */
.bx-card::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--bx-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .55;
    pointer-events: none;
}
.bx-card:hover { transform: translateY(-4px); box-shadow: var(--bx-shadow-glow); }
.bx-card:hover::before { opacity: .9; }
.bx-card__icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center; font-size: 1.4rem;
    background: var(--bx-grad-soft);
    border: 1px solid var(--bx-line-strong);
    margin-bottom: 1rem;
}
.bx-card h3 { margin-bottom: .35rem; }
.bx-card p { margin: 0; font-size: .96rem; }
.bx-card__link { display: inline-block; margin-top: 1rem; font-weight: 700; font-family: var(--bx-font-display); }

.bx-grid { display: grid; gap: 1.25rem; }
.bx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bx-grid--2 { grid-template-columns: repeat(2, 1fr); }
.bx-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* ===== Homepage tech cards (Web Power Tools — one product, six techs) ===== */
.bx-tech-card {
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
    padding: 1.5rem 1rem; text-align: center;
    color: var(--bx-text); font-family: var(--bx-font-display); font-weight: 700; font-size: .92rem;
}
.bx-tech-card:hover { color: var(--bx-text); }
.bx-tech-card img { width: 48px; height: 48px; object-fit: contain; }

/* ===== Buttons (styled anchors — mirrors the Server's <a> nav/CTA pattern) ===== */
.bx-btn {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--bx-font-display); font-weight: 700; font-size: .98rem;
    padding: .8rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer;
    color: #fff; background: var(--bx-grad);
    box-shadow: 0 12px 30px -10px var(--bx-glow-violet);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.bx-btn:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; box-shadow: 0 16px 38px -10px var(--bx-glow-pink); }
.bx-btn--ghost {
    background: transparent; color: var(--bx-text);
    box-shadow: inset 0 0 0 1px var(--bx-line-strong);
}
.bx-btn--ghost:hover { color: var(--bx-text); box-shadow: inset 0 0 0 1px var(--bx-purple); background: var(--bx-grad-soft); }

/* ===== Stats row ===== */
.bx-stats { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.bx-stat__num { font-family: var(--bx-font-mono); font-size: 2.2rem; font-weight: 700; color: var(--bx-text); }
.bx-stat__label { font-size: .85rem; color: var(--bx-mist); letter-spacing: .04em; }

/* ===== HERO ===== */
.bx-hero { position: relative; padding: 7rem 0 6rem; overflow: hidden; text-align: center; }
.bx-hero__bloom {
    position: absolute; inset: -30% -10% auto -10%; height: 120%;
    background:
        radial-gradient(closest-side at 32% 30%, var(--bx-glow-violet), transparent 70%),
        radial-gradient(closest-side at 70% 40%, var(--bx-glow-pink), transparent 70%);
    filter: blur(40px); opacity: .9; z-index: 0;
    animation: bxBloom 14s ease-in-out infinite alternate;
    pointer-events: none;
}
.bx-hero__inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.bx-hero__mark { height: 184px; width: auto; margin: 0 auto 1.5rem; display: block; filter: drop-shadow(0 8px 28px var(--bx-glow-violet)); }
.bx-hero h1 { font-size: var(--bx-hero); margin-bottom: 1rem; }
.bx-hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--bx-text-soft); max-width: 620px; margin: 0 auto 2rem; }
.bx-hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ===== Wide feature band ===== */
.bx-band {
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
    padding: 2.25rem; border-radius: var(--bx-radius);
    background: linear-gradient(120deg, color-mix(in oklab, var(--bx-night) 88%, transparent), color-mix(in oklab, var(--bx-night-2) 88%, transparent));
    box-shadow: var(--bx-shadow);
    position: relative; overflow: hidden;
}
.bx-band::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--bx-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5; pointer-events: none; }
.bx-band__mark { height: 64px; width: auto; flex: none; }
.bx-band__body { flex: 1 1 320px; }

/* ===== Footer CTA band ===== */
.bx-cta { text-align: center; padding: 4.5rem 1.5rem; }
.bx-cta h2 { font-size: var(--bx-h1); margin-bottom: 1.25rem; }

/* ===== Authenticated app surface (behind login) ===== */
.bx-app { padding: 2.5rem 0 4rem; }
.bx-page-head { margin-bottom: 2rem; }
.bx-page-head h1 { font-size: var(--bx-h1); }
.bx-feature-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.bx-feature-list li { padding: .35rem 0 .35rem 1.5rem; position: relative; color: var(--bx-text-soft); }
.bx-feature-list li::before { content: "▲"; position: absolute; left: 0; font-size: .7rem; color: var(--bx-purple); top: .55rem; }

/* ===== Form fields (shared by Settings + auth) ===== */
.bx-field { display: block; margin-bottom: 1rem; }
.bx-field > span { display: block; font-size: .85rem; color: var(--bx-mist); margin-bottom: .35rem; font-family: var(--bx-font-mono); letter-spacing: .04em; }
.bx-input {
    width: 100%; padding: .7rem .9rem; border-radius: var(--bx-radius-sm);
    background: color-mix(in oklab, var(--bx-night-2) 80%, transparent);
    border: 1px solid var(--bx-line-strong); color: var(--bx-text); font-family: var(--bx-font-body); font-size: 1rem;
}
.bx-input:focus { outline: none; border-color: var(--bx-violet); box-shadow: 0 0 0 3px var(--bx-glow-violet); }
.bx-check { display: flex; align-items: center; gap: .6rem; margin: .5rem 0 1rem; color: var(--bx-text-soft); }
.bx-field + .text-danger { display: block; margin: -0.75rem 0 1rem; font-size: .85rem; }

/* ===== Auth (Login / Register) — branded, static-SSR forms ===== */
.bx-auth-wrapper { display: flex; justify-content: center; padding: 4.5rem 1.5rem; min-height: 70vh; }
.bx-auth-card { width: 100%; max-width: 420px; padding: 2.5rem; text-align: left; }
.bx-auth-logo { display: inline-block; margin-bottom: 1.5rem; }
.bx-auth-logo img { height: 36px; width: auto; }
.bx-auth-logo .logo-light { display: none; }
:root[data-theme="light"] .bx-auth-logo .logo-dark { display: none; }
:root[data-theme="light"] .bx-auth-logo .logo-light { display: inline; }
.bx-auth-title { font-size: 1.8rem; margin-bottom: .25rem; }
.bx-auth-sub { color: var(--bx-text-soft); margin-bottom: 1.5rem; }
.bx-auth-foot { margin-top: 1.5rem; display: flex; gap: .75rem; align-items: center; font-size: .9rem; color: var(--bx-mist); }
.bx-auth-foot a { font-weight: 600; }
.bx-auth-wordmark { font-family: var(--bx-font-display, inherit); font-weight: 800; font-size: 1.3rem; letter-spacing: .02em; }
.bx-auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--bx-mist); font-size: .85rem; }
.bx-auth-divider::before, .bx-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--bx-border, rgba(255,255,255,.12)); }

/* ===== Page-load staggered reveal ===== */
.bx-reveal { opacity: 0; transform: translateY(18px); animation: bxReveal .7s cubic-bezier(.2,.7,.2,1) forwards; }
.bx-reveal.d1 { animation-delay: .08s; }
.bx-reveal.d2 { animation-delay: .18s; }
.bx-reveal.d3 { animation-delay: .30s; }
.bx-reveal.d4 { animation-delay: .42s; }

@keyframes bxBloom {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(3%, 4%) scale(1.08); }
}
@keyframes bxReveal { to { opacity: 1; transform: none; } }

/* ===== Responsive ===== */
@media (max-width: 880px) {
    .bx-grid--3, .bx-grid--2 { grid-template-columns: 1fr; }
    .bx-grid--6 { grid-template-columns: repeat(3, 1fr); }
    .bx-section { padding: 4rem 0; }
    .bx-hero { padding: 5rem 0 4.5rem; }
    .bx-hero__mark { height: 132px; width: auto; }
}
@media (max-width: 560px) {
    .bx-grid--6 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .bx-hero__bloom { animation: none; }
    .bx-reveal { animation: none; opacity: 1; transform: none; }
    .bx-card { transition: none; }
}

/* ===== Blazor error UI (keep usable, themed) ===== */
#blazor-error-ui {
    color: #fff; background: #2A1450; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: .8rem 1.25rem; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .6rem; }

/* ===== Product card mark (ProductCardGrid) ===== */
.bx-product-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--bx-grad-soft, rgba(120,90,255,.18)); font-weight: 800; font-size: .7rem; letter-spacing: .05em; }

/* ===== MainLayout co-brand mark (span, or an <a> back to the tech demo) ===== */
.bx-nav__cobrand { display: inline-flex; align-items: center; gap: .5rem; margin-left: .6rem; color: var(--bx-text-soft); text-decoration: none; }
a.bx-nav__cobrand:hover { color: var(--bx-text); }
a.bx-nav__cobrand:hover img { filter: drop-shadow(0 0 6px var(--bx-glow-violet)); }
/* Matches the Isabyte mark beside it (.bx-nav__logo--dark, 40px) — the tech
   badge used to render at half that and read as a stray favicon. */
.bx-nav__cobrand img { height: 40px; width: auto; }
.bx-nav__cobrand--button { cursor: pointer; border: none; background: none; }
.bx-nav__cobrand--button:hover img { filter: drop-shadow(0 0 6px var(--bx-glow-violet)); }

/* ===== Product switcher modal (CSS-only: the layout is static SSR) ===== */
.bx-switcher__toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

.bx-switcher { display: none; position: fixed; inset: 0; z-index: 300; align-items: center; justify-content: center; padding: 1.25rem; }
.bx-switcher__toggle:checked ~ .bx-switcher { display: flex; }

.bx-switcher__scrim { position: absolute; inset: 0; margin: 0; cursor: default; background: color-mix(in oklab, var(--bx-night) 78%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.bx-switcher__panel {
    position: relative;
    z-index: 1;
    width: min(940px, 100%);
    max-height: min(86vh, 900px);
    overflow-y: auto;                 /* long lists stay reachable on short screens */
    -webkit-overflow-scrolling: touch;
    padding: 1.75rem;
    border-radius: 18px;
    background: var(--bx-night);
    border: 1px solid var(--bx-line);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}

.bx-switcher__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bx-switcher__title { margin: .15rem 0 0; font-size: 1.5rem; }
.bx-switcher__lead { color: var(--bx-mist); margin: .5rem 0 1.25rem; max-width: 54ch; }
.bx-switcher__close { cursor: pointer; font-size: 1.6rem; line-height: 1; color: var(--bx-mist); padding: .1rem .5rem; border-radius: 8px; }
.bx-switcher__close:hover { color: var(--bx-text); background: color-mix(in oklab, var(--bx-text) 10%, transparent); }

.bx-product-grid--compact .isabyte-product-card { min-height: 118px; padding: 1.1rem 1.2rem; }
.bx-product-grid--compact .isabyte-product-card__wordmark { max-height: 42px; }


/* The nav mark is a switcher trigger now, not a link home. */
.bx-nav__brand--button { cursor: pointer; }

/* "Pick your framework here.." hint (2026-09-03): a bubble under the brand mark,
   twice per browser (see MainLayout.razor). Anchored to the nav row. */
.bx-nav__inner { position: relative; }
.isa-framework-hint {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  background: var(--bx-accent, #ff9a2e);
  color: var(--bx-ink, #0b1b26);
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
  pointer-events: none;
}
.isa-framework-hint::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 18px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--bx-accent, #ff9a2e);
}
.isa-framework-hint.is-visible { opacity: 1; transform: translateY(0); }
.bx-nav__brand--button:hover img { filter: drop-shadow(0 0 8px var(--bx-glow-violet)); }

@media (max-width: 575.98px) {
    .bx-switcher__panel { padding: 1.25rem; border-radius: 14px; }
    .bx-nav__cobrand img { height: 32px; }
}
.bx-nav__cobrand-x { color: var(--bx-mist); font-size: .9rem; }
.bx-nav__cobrand-name { font-weight: 700; font-size: .85rem; letter-spacing: .02em; }

/* ===== Username dropdown (details/summary) =====
   Two renderings of the same identity: the dropdown on pointer-sized screens,
   a straight link to My Account on phones (the dropdown could overflow the
   viewport with no scroll of its own). Exactly one is ever displayed. */
.bx-nav__user-link { display: none; }

/* Follows the burger breakpoint (MainLayout.razor.css, 1047px): the link is the
   rendering for the slide-down panel, the dropdown the one for the full bar. It sat at
   991.98px while the burger took over at 880px; if the two ever disagree, a dropdown
   inside the slide-down panel brings back the unreachable-items problem above. */
@media (max-width: 1047px) {
    .bx-nav__user-link { display: inline-flex; align-items: center; }
    .bx-nav__userdrop { display: none; }
}

/* The account name — usually an e-mail — is the widest item in the bar. Capped so a
   long address cannot push the bar past its container; the full name is the summary's
   title attribute (UserMenu.razor). */
.bx-nav__userdrop > summary {
    display: block;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bx-nav__userdrop { position: relative; }
.bx-nav__userdrop > summary { list-style: none; cursor: pointer; }
.bx-nav__userdrop > summary::-webkit-details-marker { display: none; }
.bx-nav__userdrop[open] > summary { color: var(--bx-text); }
.bx-nav__userdrop-menu { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 180px; display: flex; flex-direction: column; gap: .25rem; padding: .6rem; border-radius: 12px; background: var(--bx-night); box-shadow: 0 18px 40px -12px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.08); z-index: 50; }
.bx-nav__userdrop-menu a { padding: .45rem .6rem; border-radius: 8px; }
.bx-nav__userdrop-menu a:hover { background: var(--bx-grad-soft, rgba(120,90,255,.15)); }
.bx-nav__userdrop-menu form button { width: 100%; text-align: left; padding: .45rem .6rem; border-radius: 8px; background: none; border: none; color: inherit; cursor: pointer; }
.bx-nav__userdrop-menu form button:hover { background: var(--bx-grad-soft, rgba(120,90,255,.15)); }
:root[data-theme="light"] .bx-nav__userdrop-menu { background: var(--bx-night); border-color: var(--bx-line-strong); box-shadow: 0 18px 40px -12px rgba(60,40,120,.18); }

/* ---- Dropdown group headers ("Moderation" / "Administration") + a thin
   separator before the sign-out form (UserMenu.razor) ---- */
.bx-nav__userdrop-h {
    display: block; padding: .5rem .6rem 0;
    font-family: var(--bx-font-mono); font-size: .68rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--bx-mist);
}
.bx-nav__userdrop-divider { height: 1px; margin: .4rem .2rem; border: none; background: var(--bx-line); }

/* ============================================================================
   ===== Account & Admin area (ported from BPT, re-themed Aurora) =====
   Structure ported from Isabyte.PowerTools.Blazor.Server/wwwroot/app.css; colors,
   shadows, borders and fonts swapped to Aurora tokens so the /Account and
   /Account/Admin pages match the /tools glass look (.bx-card). All colors are
   variable-based so the light theme ( :root[data-theme="light"] ) adapts.
   ========================================================================== */

/* ---- Page header band (MyAccount, AdminDashboard, ManageLayout, all subpages) ---- */
.isabyte-page-header {
    position: relative;
    padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1rem, 3vw, 2rem);
    margin-bottom: 0;
    min-width: 0;
    color: var(--bx-text);
    background:
        radial-gradient(600px 300px at 18% 0%, var(--bx-glow-violet), transparent 70%),
        radial-gradient(520px 280px at 85% 10%, var(--bx-glow-pink), transparent 70%),
        color-mix(in oklab, var(--bx-night) 55%, transparent);
    border-bottom: 1px solid var(--bx-line);
}

.isabyte-page-header h1 {
    font-size: clamp(1.45rem, 4.5vw, 2.2rem);
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.isabyte-page-header p {
    font-size: clamp(0.95rem, 2.4vw, 1.05rem);
    color: var(--bx-text-soft);
    max-width: 700px;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

/* ---- Content wrappers ---- */
.isabyte-content-section {
    max-width: 960px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

.isabyte-account-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.isabyte-breadcrumb {
    padding: 0.75rem 2rem;
    font-size: 0.875rem;
    font-family: var(--bx-font-mono);
    color: var(--bx-mist);
    background: color-mix(in oklab, var(--bx-night) 45%, transparent);
    border-bottom: 1px solid var(--bx-line);
}

.isabyte-breadcrumb a { color: var(--bx-violet); text-decoration: none; }
.isabyte-breadcrumb a:hover { color: var(--bx-pink); text-decoration: underline; }

.isabyte-account-section-heading {
    font-family: var(--bx-font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bx-purple);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bx-line-strong);
}

/* ---- Shared themed panel: replaces the literal
   "background:#fff; border:1px solid #e8e4ef; border-radius:10px" recipe
   that was hardcoded across Account/Admin pages (light-only). ---- */
.isabyte-panel {
    background: var(--bx-night);
    border: 1px solid var(--bx-line);
    border-radius: 10px;
}

/* ---- Admin dashboard category groups (Support / Customers & billing /
   Content & releases): each group is a distinct bordered panel with a
   gradient accent-bar heading, so the categories read as separate blocks
   instead of one continuous card wall. Tokens only — light + dark. ---- */
.bx-admin-group {
    background: color-mix(in oklab, var(--bx-night) 55%, transparent);
    border: 1px solid var(--bx-line);
    border-radius: 12px;
    padding: 1.4rem 1.5rem 1.5rem;
}

.bx-admin-group + .bx-admin-group {
    margin-top: 1.75rem;
}

.bx-admin-group-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--bx-font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bx-purple);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin: 0 0 1.1rem;
}

.bx-admin-group-heading::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 1.05rem;
    border-radius: 2px;
    background: var(--bx-grad);
}

/* ---- Dashboard cards (glass, matches .bx-card incl. hover lift) ---- */
.isabyte-account-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.25rem 1.5rem;
    background: color-mix(in oklab, var(--bx-night) 86%, transparent);
    border-radius: var(--bx-radius-sm);
    box-shadow: var(--bx-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* 1px gradient border via mask (same recipe as .bx-card) */
.isabyte-account-card::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--bx-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .45;
    pointer-events: none;
}

.isabyte-account-card:hover { transform: translateY(-4px); box-shadow: var(--bx-shadow-glow); }
.isabyte-account-card:hover::before { opacity: .9; }

.isabyte-account-card .card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bx-grad-soft); /* fallback; pages usually set inline bg */
    border: 1px solid var(--bx-line);
}

/* ---- Product cards (My Account) ----
   A modifier on .isabyte-account-card: the brand WORDMARK is the card's title,
   so the box stacks instead of running icon-beside-text, and it carries the
   product's own accent. The dark ground is deliberate — every /img/brands
   wordmark is drawn for the demo sites' dark nav bars, and two of them
   (React, Native) are near-white, so a light wash would erase them. */
.isabyte-product-card {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-height: 148px;
    padding: 1.35rem 1.5rem;
    /* --bx-ink, NOT --bx-night: night flips to white in the light theme, which
       would wash out the near-white React/Native marks — the very failure this
       card set out to fix. ink is defined once and stays dark in both themes,
       so a product tile looks the same wherever it renders. */
    background:
        radial-gradient(130% 120% at 0% 0%,
            color-mix(in oklab, var(--product-accent) 42%, transparent),
            transparent 62%),
        var(--bx-ink);
}

/* Tint the shared 1px gradient border with the product accent. */
.isabyte-product-card::before {
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--product-accent) 85%, transparent),
        transparent 70%);
    opacity: .55;
}

.isabyte-product-card:hover::before { opacity: 1; }

.isabyte-product-card__wordmark {
    /* max-height rather than height: the marks run from 2:1 to nearly 4:1, so
       a fixed height sizes them by the wrong axis and the widest (React Native)
       is the one that would reach the card edge first. Constraining BOTH axes
       lets each mark grow until whichever limit it hits — big on the roomy
       cards, still fully inside the narrow ones. */
    max-height: 52px;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.isabyte-product-card__fallback {
    font-family: var(--bx-font-display);
    font-size: 1rem;
    font-weight: 700;
}

.isabyte-product-card__go {
    font-size: 0.85rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--product-accent) 75%, white);   /* readable on ink in both themes */
}

.isabyte-product-card__fallback { color: #ECE9F6; }

/* Isabyte's own row: the provider, not a seventh framework — full width, the
   brand gradient instead of a single tech accent, and a role line the tech
   tiles don't carry. */
.isabyte-product-card--hub {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(109,74,255,.45), transparent 60%),
        radial-gradient(120% 160% at 100% 100%, rgba(232,79,156,.35), transparent 60%),
        var(--bx-ink);
}
.isabyte-product-card--hub::before { background: var(--bx-grad); opacity: .6; }
.isabyte-product-card--hub:hover::before { opacity: 1; }
.isabyte-product-card--hub .isabyte-product-card__wordmark { max-height: 44px; }
.isabyte-product-card__role { font-size: .85rem; color: #B9B2D6; flex: 1 1 12rem; }
.isabyte-product-card--hub .isabyte-product-card__go { color: #ECE9F6; margin-left: auto; }


.isabyte-account-card h5 {
    font-family: var(--bx-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bx-text);
    margin: 0 0 0.15rem;
}

.isabyte-account-card p {
    font-size: 0.82rem;
    color: var(--bx-mist);
    margin: 0;
}

/* ---- Manage layout sidebar nav ---- */
.isabyte-manage-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.isabyte-manage-nav li { margin-bottom: 0.25rem; }

.isabyte-manage-nav .nav-link {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: var(--bx-text-soft);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.isabyte-manage-nav .nav-link:hover {
    background: var(--bx-grad-soft);
    color: var(--bx-text);
}

.isabyte-manage-nav .nav-link.active {
    background: var(--bx-grad-soft);
    color: var(--bx-text);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--bx-line-strong);
}

/* ---- Badges (Pricing "Most popular", admin statuses) ---- */
.isabyte-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--bx-night-2);
    color: var(--bx-text-soft);
    border: 1px solid var(--bx-line);
}

.isabyte-badge--popular { background: var(--bx-grad); color: #fff; border-color: transparent; }

/* ---- Feature icon chip (Pricing benefits) ---- */
.isabyte-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--bx-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

/* ---- Buttons ---- */
.isabyte-btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.75rem 1.75rem;
    background: var(--bx-grad);
    color: #fff !important;
    font-family: var(--bx-font-display);
    font-weight: 700;
    font-size: 0.98rem;
    border: none;
    border-radius: 999px;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 12px 30px -10px var(--bx-glow-violet);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.isabyte-btn-accent:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 16px 38px -10px var(--bx-glow-pink);
    color: #fff !important;
}

.isabyte-btn-brand {
    display: block;
    width: 100%;
    padding: 0.8rem 1.5rem;
    background: var(--bx-grad);
    color: #fff !important;
    font-family: var(--bx-font-display);
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 12px 30px -10px var(--bx-glow-violet);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.isabyte-btn-brand:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 16px 38px -10px var(--bx-glow-pink);
    color: #fff !important;
}

/* ---- Auth-style glass card (ExternalLogin, JoinTeam) ---- */
.isabyte-auth-wrapper {
    min-height: calc(100vh - 3.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    /* no opaque background: the Aurora body canvas shows through */
}

.isabyte-auth-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 2.5rem 2rem;
    background: color-mix(in oklab, var(--bx-night) 86%, transparent);
    border-radius: var(--bx-radius);
    box-shadow: var(--bx-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
}

.isabyte-auth-card::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--bx-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .55;
    pointer-events: none;
}

.isabyte-auth-card.wide { max-width: 600px; }

.isabyte-auth-brand { text-align: center; margin-bottom: 2rem; }
.isabyte-auth-brand img { height: 40px; margin-bottom: 0.75rem; }

.isabyte-auth-brand h1 {
    font-size: 1.5rem;
    color: var(--bx-text);
    margin-bottom: 0.25rem;
}

.isabyte-auth-brand p { font-size: 0.9rem; color: var(--bx-mist); margin: 0; }

.isabyte-auth-card .form-floating { margin-bottom: 1rem; }

.isabyte-auth-card .form-control:focus {
    border-color: var(--bx-violet);
    box-shadow: 0 0 0 3px var(--bx-glow-violet);
}

.isabyte-auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--bx-mist);
}

.isabyte-auth-footer a { color: var(--bx-violet); font-weight: 600; }
.isabyte-auth-footer a:hover { color: var(--bx-pink); }

/* ---- License / deployment key display (Licenses, MyTeam) ---- */
.isabyte-key-display {
    display: flex;
    gap: 0.5rem;
    max-width: 720px;
    align-items: stretch;
}

.isabyte-key-input {
    flex: 1;
    min-width: 0;
    font-family: var(--bx-font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding: 0.65rem 0.9rem;
    background: color-mix(in oklab, var(--bx-night-2) 80%, transparent);
    border: 1px solid var(--bx-line-strong);
    border-radius: var(--bx-radius-sm);
    color: var(--bx-text);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all;
}

.isabyte-key-input:focus {
    outline: none;
    border-color: var(--bx-violet);
    box-shadow: 0 0 0 3px var(--bx-glow-violet);
    background: var(--bx-night-2);
}

.isabyte-key-input::selection {
    background: var(--bx-violet);
    color: #fff;
}

.isabyte-key-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1.1rem;
    background: var(--bx-grad);
    color: #fff;
    font-family: var(--bx-font-display);
    font-weight: 700;
    font-size: 0.875rem;
    border: none;
    border-radius: var(--bx-radius-sm);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.25s;
    white-space: nowrap;
    min-width: 104px;
    justify-content: center;
}

.isabyte-key-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -8px var(--bx-glow-violet);
    color: #fff;
}

.isabyte-key-copy-btn:active { transform: translateY(0); }

.isabyte-key-copy-btn .isabyte-key-icon { display: inline-flex; line-height: 0; }

.isabyte-key-copy-btn.copied {
    /* success state: no Aurora token for green; fixed gradient reads on both themes */
    background: linear-gradient(135deg, #2E7D32, #4CAF50);
}

.isabyte-key-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background: transparent;
    color: var(--bx-text);
    font-weight: 600;
    font-size: 0.85rem;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--bx-line-strong);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.isabyte-key-toggle:hover {
    background: var(--bx-grad-soft);
    box-shadow: inset 0 0 0 1px var(--bx-purple);
}

.isabyte-key-toggle .isabyte-key-icon { display: inline-flex; line-height: 0; }

/* ---- Legacy Bootstrap 3/4 compat (Identity-template leftovers) ---- */
.font-weight-bold { font-weight: 700; }          /* BS4 name (BS5: fw-bold) */
.input-group-append { display: flex; }            /* BS4 wrapper in Email.razor */

/* ── Guide sections (/mcp, /ai-skills) — the hub-hosted tech-neutral guides
   (previously rendered only on the tech demo hosts). ── */
.bx-chip {
    display: inline-flex;
    align-items: center;
    padding: .35rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--bx-border, rgba(255, 255, 255, .12));
    color: var(--bx-text);
    text-decoration: none;
    font-size: .9rem;
    transition: border-color .15s ease, background .15s ease;
}

.bx-chip:hover { border-color: #A24BE8; }

.bx-chip--active {
    background: var(--bx-grad);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.bx-guide-body { line-height: 1.65; }
.bx-guide-body:hover { transform: none; box-shadow: var(--bx-shadow); }
.bx-guide-body h1, .bx-guide-body h2, .bx-guide-body h3 { margin-top: 1.6em; margin-bottom: .5em; }
.bx-guide-body h1:first-child, .bx-guide-body h2:first-child { margin-top: 0; }
.bx-guide-body p { margin: .8em 0; }
.bx-guide-body ul, .bx-guide-body ol { margin: .8em 0; padding-left: 1.4em; }
.bx-guide-body code {
    padding: .15em .4em;
    border-radius: 4px;
    background: color-mix(in oklab, var(--bx-text) 10%, transparent);
    font-size: .9em;
}
.bx-guide-body pre {
    padding: 1rem;
    border-radius: 8px;
    background: color-mix(in oklab, var(--bx-ink) 92%, transparent);
    color: #ECE9F6;
    overflow-x: auto;
}
.bx-guide-body pre code { background: none; padding: 0; }
.bx-guide-body blockquote {
    margin: 1em 0;
    padding: .5em 1em;
    border-left: 3px solid #A24BE8;
    color: var(--bx-text);
    opacity: .9;
}
/* /mcp/mcp-server "Making the MCP server work": the per-client instruction-file downloads.
   The article is markdown rendered with raw HTML disabled, so the download is an ordinary
   markdown link (it stays a plain link for any other consumer of the content API) and the
   hub dresses exactly those links as buttons — keyed on the endpoint, not on a class the
   markdown cannot carry. */
.bx-guide-body a[href^="/mcp/agent-instructions/"] {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .3rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--bx-purple, #A24BE8);
    color: var(--bx-text);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease;
}
.bx-guide-body a[href^="/mcp/agent-instructions/"]::before { content: "\2193"; }
.bx-guide-body a[href^="/mcp/agent-instructions/"]:hover { background: var(--bx-grad-soft); }
.bx-guide-body table { border-collapse: collapse; margin: 1em 0; width: 100%; }
.bx-guide-body th, .bx-guide-body td {
    padding: .5em .75em;
    border: 1px solid var(--bx-border, rgba(255, 255, 255, .12));
    text-align: left;
}

/* ── /about — the founder's letter ───────────────────────────────────────────
   This page is deliberately quieter than the rest of the marketing chrome: it is
   a letter, so it reads at a comfortable measure, in one column, and the closing
   signature is given room rather than being packed against the last paragraph.
   All colour comes from the existing tokens — no literals — so it follows the
   theme like every other surface. */


/* ===== Language picker in the nav stripe =====
   ONE collapsed control, not a row of flags. Eight inline flags measured 351px at a
   390px viewport and pushed the hamburger off-screen entirely, costing mobile
   visitors the menu — so the languages live behind a ~44px summary button instead.
   Projected into the nav by <SectionContent>, which means it renders under the
   PAGE's CSS scope, not MainLayout's: these rules must be global. */
.bx-nav__langs {
    position: relative;
    /* Sits LAST in the stripe. order, not margin: on desktop .bx-nav__links already
       carries margin-left:auto, and a second auto margin would split the free space
       between them and strand this control mid-bar. */
    order: 5;
}

@media (max-width: 1047px) {   /* = the burger breakpoint in MainLayout.razor.css */
    /* The links are position:fixed here (the slide-down panel) and out of the flex
       flow, taking their auto margin with them — so this control carries the
       right-alignment and the burger tucks in beside it (MainLayout.razor.css). */
    .bx-nav__langs { margin-left: auto; }
}

.bx-nav__langs-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: .3rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--bx-border, rgba(255, 255, 255, .12));
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    list-style: none;                  /* kill the default disclosure triangle */
    transition: border-color .15s ease;
}
.bx-nav__langs-toggle::-webkit-details-marker { display: none; }
.bx-nav__langs-toggle:hover { border-color: var(--bx-purple); }
.bx-nav__langs[open] .bx-nav__langs-toggle { border-color: var(--bx-purple); }

.bx-nav__langs-menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 200;
    min-width: 190px;
    padding: .35rem;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid var(--bx-line);
    background: var(--bx-night);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
}

.bx-nav__langs-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .6rem;
    border-radius: 8px;
    color: var(--bx-text);
    text-decoration: none;
    font-size: .9rem;
    white-space: nowrap;
}
.bx-nav__langs-item:hover { background: color-mix(in oklab, var(--bx-purple) 18%, transparent); }
.bx-nav__langs-item.is-active { background: var(--bx-grad); color: #fff; }

/* A letter is read, not scanned: hold the measure near 70 characters even on a
   wide screen, and lift the body a little above the dense guide default. */
.bx-about__letter {
    max-width: 68ch;
    margin-inline: auto;
    font-size: 1.05rem;
    line-height: 1.75;
}

/* The opening line is the warmest sentence on the page — let it land alone. */
.bx-about__letter > p:first-of-type {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--bx-text);
    margin-bottom: 1.4em;
}

.bx-about__letter p { margin: 1.1em 0; }

/* The sign-off: the last two paragraphs are "Kind regards," and the name. Give
   them air and a hairline, so the letter visibly ends rather than just stopping. */
.bx-about__letter > p:last-of-type {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bx-border, rgba(255, 255, 255, .12));
    font-size: 1.1rem;
}

.bx-about__letter > p:last-of-type strong {
    display: block;
    font-family: var(--bx-font-display, inherit);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .1em;
}

.bx-about__cta { margin-top: 2.5rem; }

@media (max-width: 640px) {
    .bx-about__letter { font-size: 1rem; line-height: 1.7; }
    .bx-about__letter > p:first-of-type { font-size: 1.1rem; }
}

/* The letter's markdown opens with its own "# heading" — that heading is what gives each
   translation its title (variants have no Title column; ContentService.TitleFor reads the
   body's first H1). The page head above already renders that title, so hide the duplicate
   here rather than stripping it from the body: display:none also takes it out of the
   accessibility tree, leaving exactly one H1 on the page.
   NOTE: /mcp and /ai-skills render the same title twice for the same reason — that is a
   pre-existing GuideSection issue, deliberately not changed from this page. */
.bx-about__letter > h1:first-child { display: none; }