/* ============================================================
   KobaltTech design system — custom CSS layer
   Sits on top of MudBlazor. Blue = action, Gold = value, Teal = live.
   ============================================================ */

:root {
    /* ── FROZEN brand accents (do not change hex values) ── */
    --kt-cobalt: #4F7BFF;
    --kt-cobalt-deep: #3A5BE0;
    --kt-cobalt-bright: #5D86FF;
    --kt-cobalt-tint: #A9BEFF;
    --kt-cobalt-soft: rgba(79, 123, 255, 0.14);
    --kt-gold: #F5C451;
    --kt-teal: #22D3A7;
    --kt-red: #FF5C72;
    --kt-violet: #8A5CFF; /* chart-4 only */

    /* Structural tokens — follow MudBlazor so light/dark stays consistent. */
    --kt-canvas: var(--mud-palette-background, #0B0F17);
    --kt-surface: var(--mud-palette-surface, #141A24);
    --kt-text: var(--mud-palette-text-primary, #E9EDF5);
    --kt-muted: var(--mud-palette-text-secondary, #9AA6BC);
    --kt-hairline: var(--mud-palette-lines-default, rgba(255, 255, 255, 0.08));
    --kt-hairline-soft: var(--mud-palette-divider, rgba(255, 255, 255, 0.05));

    --kt-surface-2: #1A212E;
    --kt-surface-raised: var(--kt-surface-2);
    --kt-track: rgba(255, 255, 255, 0.06);
    --kt-fill-subtle: rgba(255, 255, 255, 0.03);
    --kt-hero-grad: linear-gradient(180deg, #131A26 0%, #0E141E 100%);
    --kt-hero-title-grad: linear-gradient(180deg, #FFFFFF 0%, #A9B4C7 100%);

    /* Spacing rhythm — 4px base */
    --kt-space-1: 4px;
    --kt-space-2: 8px;
    --kt-space-3: 12px;
    --kt-space-4: 16px;
    --kt-space-5: 20px;
    --kt-space-6: 24px;
    --kt-space-8: 32px;
    --kt-space-10: 40px;
    --kt-space-12: 48px;

    --kt-radius: 12px;
    --kt-radius-card: 16px;
    --kt-radius-pill: 999px;

    --kt-glow-cobalt: 0 0 24px rgba(79, 123, 255, 0.35);
    --kt-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.14);
    --kt-shadow-lift: 0 1px 3px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--kt-hairline);
    --kt-shadow-feather: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.12);

    --kt-font-head: 'Outfit', system-ui, sans-serif;
    --kt-font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Motion — tasteful, honour prefers-reduced-motion below */
    --kt-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --kt-dur-fast: 120ms;
    --kt-dur: 180ms;
}

/* Light-mode overrides for the signature components that use hardcoded dark fills.
   Applied via the .kt-mode-light class MainLayout puts on MudLayout. */
.kt-mode-light {
    --kt-surface-2: #EEF1F7;
    --kt-track: rgba(11, 15, 23, 0.07);
    --kt-fill-subtle: rgba(11, 15, 23, 0.03);
    --kt-hero-grad: linear-gradient(180deg, #FFFFFF 0%, #EEF2F9 100%);
    --kt-hero-title-grad: linear-gradient(180deg, #0B0F17 0%, #3A4457 100%);
}

html, body {
    font-family: var(--kt-font-body);
    background-color: var(--kt-canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ============================================================
   Shared animated background ("gravity wells", kt-background.js)
   The canvas sits behind the page, so the body must not paint over
   it — html keeps the canvas colour as the true backdrop.
   ============================================================ */
body {
    background-color: transparent;
}

/* The canvas sits behind everything and NEVER takes the pointer — wells are raised
   from document-level listeners, so a click anywhere in the app drops one without
   any control being blocked. */
.kt-bg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    pointer-events: none;
}

/* Every non-login page gets the 50% scrim so the field never fights the UI. */
.kt-bg-dim {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: rgba(11, 15, 23, 0.5);
}


/* Light mode keeps the flat canvas — the field is a dark-surface treatment. */
:root[data-theme="light"] .kt-bg-canvas,
:root[data-theme="light"] .kt-bg-dim {
    display: none;
}

:root[data-theme="light"] body {
    background-color: var(--kt-canvas);
}

/* Light mode has no field behind it, so the auth surface takes its flat fill back. */
:root[data-theme="light"] .kt-auth {
    background:
        radial-gradient(circle at 25% 20%, rgba(79, 123, 255, 0.18), transparent 45%),
        radial-gradient(circle at 78% 75%, rgba(34, 211, 167, 0.10), transparent 45%),
        var(--kt-canvas, #F5F7FB);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--kt-font-head);
    letter-spacing: -0.02em;
}

h1:focus,
 h1:focus-visible { outline: none; }

/* Skip link — visible on keyboard focus only */
.kt-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 0.65rem 1rem;
    background: var(--kt-cobalt-deep, #3A5BE0);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}
.kt-skip:focus,
.kt-skip:focus-visible {
    left: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
}
#kt-main:focus,
#kt-main:focus-visible { outline: none; }

/* Tabular figures for countdowns / prices / KPIs so digits don't jitter */
.kt-tnum,
.kt-countdown,
.kt-kpi-value,
.kt-price {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- Custom scrollbar ---------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(154, 166, 188, 0.25);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(154, 166, 188, 0.45); background-clip: content-box; }

/* ============================================================
   App bar — solid surface, 72px (no decorative glass blur)
   ============================================================ */
.kt-appbar {
    background: color-mix(in srgb, var(--kt-canvas) 92%, var(--kt-surface)) !important;
    border-bottom: 1px solid var(--kt-hairline);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* App-bar chrome: search, user chip */
.kt-appbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 300px;
    padding: 7px 12px;
    margin-right: 8px;
    border-radius: var(--kt-radius-pill);
    border: 1px solid var(--kt-hairline);
    background: var(--kt-fill-subtle);
    transition: border-color .15s ease;
}
.kt-appbar-search:focus-within { border-color: rgba(79,123,255,0.45); }
.kt-appbar-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--kt-text);
    font-family: var(--kt-font-body);
    font-size: 0.83rem;
}
.kt-appbar-search input::placeholder { color: var(--kt-muted); }
.kt-kbd {
    font-size: 0.65rem;
    color: var(--kt-muted);
    border: 1px solid var(--kt-hairline);
    border-radius: 5px;
    padding: 2px 5px;
    line-height: 1;
    white-space: nowrap;
}

.kt-searchwrap { position: relative; margin-right: 8px; }
.kt-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--kt-surface-2);
    border: 1px solid var(--kt-hairline);
    border-radius: var(--kt-radius);
    box-shadow: 0 14px 34px -10px rgba(0,0,0,.6);
    overflow: hidden;
    z-index: 1400;
}
.kt-search-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    font-size: 0.85rem;
    color: var(--kt-text);
    cursor: pointer;
}
.kt-search-item:hover { background: var(--kt-cobalt-soft); }
.kt-search-item--first { background: var(--kt-fill-subtle); }
.kt-search-item--first:hover { background: var(--kt-cobalt-soft); }
.kt-search-hint { font-size: 0.68rem; color: var(--kt-muted); }
.kt-search-foot {
    padding: 6px 14px;
    font-size: 0.66rem;
    color: var(--kt-muted);
    border-top: 1px solid var(--kt-hairline-soft);
}

.kt-userchip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--kt-radius);
    cursor: pointer;
    transition: background .15s ease;
}
.kt-userchip:hover { background: var(--kt-fill-subtle); }
.kt-userchip-name { font-size: 0.8rem; font-weight: 600; color: var(--kt-text); line-height: 1.15; }
.kt-userchip-role { font-size: 0.66rem; color: var(--kt-muted); line-height: 1.15; }

/* Drawer product line only (§0.1) — no second BrandMark tile */
.kt-drawer-product {
    font-family: var(--kt-font-head);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: var(--kt-text);
    border-bottom: 1px solid var(--kt-hairline);
}
/* Drawer footer hidden — products/Theme must not render footers (§0.4 / §0.6) */
.kt-drawer-foot {
    display: none !important;
}
.kt-navbadge {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--kt-radius-pill);
    font-variant-numeric: tabular-nums;
}
.mud-nav-link .mud-nav-link-text { display: flex; align-items: center; }

/* Page footer styles retained only as dead CSS — products/Theme must not render footers (§0.4). */
.kt-footer {
    display: none !important;
}

/* Active nav item — soft fill + left rail (no decorative glow) */
.mud-nav-link.active {
    background: rgba(79,123,255,0.12) !important;
    border-radius: 10px;
    position: relative;
}
.mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 2px; border-radius: 999px;
    background: var(--kt-cobalt);
}
.mud-nav-link.active .mud-nav-link-text { color: #C7D4FF !important; font-weight: 600; }
.mud-nav-link.active .mud-icon-root { color: var(--kt-cobalt) !important; }
.kt-mode-light .mud-nav-link.active .mud-nav-link-text { color: #2A46B8 !important; }
.mud-nav-menu .mud-nav-link { border-radius: 10px; margin: 1px 6px; transition: background .15s ease; }

/* Scroll-to-top floating button — flat, no glow */
.kt-scrolltop {
    position: fixed;
    right: 22px; bottom: 22px;
    width: 42px; height: 42px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--kt-cobalt-deep);
    color: #fff;
    border: 1px solid rgba(79,123,255,0.35);
    cursor: pointer;
    box-shadow: var(--kt-shadow-card);
    opacity: 0; transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, filter .15s ease;
    pointer-events: none;
    z-index: 1500;
}
.kt-scrolltop.kt-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.kt-scrolltop:hover { filter: brightness(1.08); }

/* Milestone banner — quiet surface + hairline */
.kt-milestone {
    position: relative;
    overflow: hidden;
    border-radius: var(--kt-radius-card);
    border: 1px solid var(--kt-hairline);
    background: var(--kt-surface);
    padding: 1.1rem 1.35rem;
    display: flex; align-items: center; gap: 1rem;
}
.kt-milestone-icon {
    flex: 0 0 auto;
    width: 46px; height: 46px; border-radius: 13px;
    display: grid; place-items: center;
    background: rgba(245,196,81,0.12);
    color: var(--kt-gold);
}

/* Brand mark */
.kt-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--kt-font-head);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 1.15rem;
    color: var(--kt-text);
    text-decoration: none;
}
.kt-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    /* Logo PNG is transparent — white tile so the mark reads on dark chrome (not a black square). */
    background: #FFFFFF;
    border: 1px solid var(--kt-hairline);
    box-shadow: none;
    color: #0B0F17;
    flex: 0 0 auto;
    overflow: hidden;
}
.kt-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kt-brand-mark svg { width: 20px; height: 20px; display: block; }
.kt-brand small {
    display: block;
    font-family: var(--kt-font-body);
    font-weight: 500;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kt-muted);
    margin-top: -2px;
}

/* ============================================================
   Eyebrow / overline — the small uppercase label above a value or
   section title (DESIGN-SPEC §3.2). Lives here because eight hosts
   use .kt-eyebrow in markup; hosts that ship their own definition
   load their stylesheet after this one and still win.
   ============================================================ */
.kt-eyebrow {
    font-family: var(--kt-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kt-muted);
    margin-bottom: 4px;
}

/* ============================================================
   Cards — border brighten on hover (no Y-lift)
   ============================================================ */
.kt-card {
    border-radius: var(--kt-radius-card) !important;
    border: 1px solid var(--kt-hairline);
    background: var(--kt-surface);
    transition: box-shadow var(--kt-dur) var(--kt-ease), border-color var(--kt-dur) var(--kt-ease);
}

/* Canonical inner padding for cards and nested panels (1.25rem / pa-5).
   Wrapped in :where() so it carries ZERO specificity: it is the default every card
   gets without having to remember a utility class, while any explicit MudBlazor
   pa-* utility or app rule still wins. Without this, a bare "kt-card" had no padding
   at all and content sat against the border — the padding was inconsistent across
   the portfolio because each app had to opt in. */
:where(.kt-card) { padding: 1.25rem; }
:where(.kt-inset) { padding: 1rem 1.1rem; }

/* ============================================================
   Upload dropzone (DESIGN-SPEC §9.9) — dashed hairline, fill-subtle,
   cloud icon. Theme-owned so every app's upload surface is identical
   and it can never fall back to the raw browser file control.
   ============================================================ */
.kt-dropzone-wrap {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
}
.kt-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    border: 1px dashed var(--kt-hairline);
    border-radius: var(--kt-radius);
    background: var(--kt-fill-subtle);
    color: var(--kt-muted);
    text-align: center;
    transition: border-color var(--kt-dur) var(--kt-ease), background var(--kt-dur) var(--kt-ease), color var(--kt-dur) var(--kt-ease);
}
.kt-dropzone-wrap:hover .kt-dropzone {
    border-color: rgba(79, 123, 255, 0.55);
    background: var(--kt-cobalt-soft);
}
/* Dragging over: the zone commits to a solid cobalt edge. */
.kt-dropzone-over .kt-dropzone {
    border-style: solid;
    border-color: var(--kt-cobalt);
    background: rgba(79, 123, 255, 0.12);
    color: var(--kt-text);
}
/* The real <input type="file"> is always hidden behind the styled zone — if this rule
   is missing the browser's default "Choose file" control appears. */
.kt-dropzone-input {
    display: none;
}
.kt-card--hover:hover {
    box-shadow: var(--kt-shadow-card);
    border-color: rgba(79, 123, 255, 0.28);
}

/* DemoBlock — quieter catalogue rhythm (also uses Mud pa-5 mb-6 utilities) */
.kt-demo {
    padding: var(--kt-space-5, 20px) !important;
    margin-bottom: var(--kt-space-6, 24px) !important;
    box-sizing: border-box;
}
/* Inside MudGrid: fill the cell, let the grid gap own vertical rhythm */
.mud-grid-item > .kt-demo {
    height: 100%;
    margin-bottom: 0 !important;
}
.kt-demo__title {
    margin: 0;
    font-family: var(--kt-font-head);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--kt-text);
}
.kt-demo__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--kt-space-3);
    margin-bottom: var(--kt-space-4);
}

/* Inset panel — hairline well INSIDE a card (never a second .kt-card) */
.kt-inset {
    border: 1px solid var(--kt-hairline);
    border-radius: var(--kt-radius);
    background: var(--kt-fill-subtle);
    overflow: hidden;
}

/* Section wrapper — 4px rhythm */
.kt-section { margin-bottom: var(--kt-space-10); }
.kt-section-label {
    font-family: var(--kt-font-body);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-cobalt-tint);
    margin-bottom: var(--kt-space-2);
}

/* ============================================================
   MudBlazor polish — shared overrides (AA, motion, focus)
   ============================================================ */
.mud-button-filled-primary {
    background: var(--kt-cobalt-deep) !important;
    box-shadow: none;
    transition: filter var(--kt-dur-fast) var(--kt-ease), transform var(--kt-dur-fast) var(--kt-ease);
}
.mud-button-filled-primary:hover {
    filter: brightness(1.08);
}
.mud-button-filled-primary:active {
    transform: translateY(1px);
}
/* Buttons have no border of their own to light, so they get the offset focus ring. */
.mud-button:focus-visible,
.mud-icon-button:focus-visible {
    outline: 2px solid var(--kt-cobalt);
    outline-offset: 2px;
}

/* Inputs light their OWN border on focus (MudBlazor already sets it to 2px primary), so
   an additional offset ring reads as two borders around one field. The field's border is
   the single focus indicator — recoloured to the cobalt accent.
   Selector deliberately mirrors MudBlazor's own (.mud-input.mud-input-outlined:focus-within):
   dropping the leading .mud-input drops a class and MudBlazor's rule wins the recolour. */
.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border {
    border-width: 2px;
    border-color: var(--kt-cobalt);
}
a.kt-link, .mud-link {
    color: var(--kt-cobalt-tint);
}
a.kt-link:hover, .mud-link:hover {
    color: var(--kt-cobalt-bright);
}
.kt-text-cobalt { color: var(--kt-cobalt-tint) !important; }

/* Page heading rhythm */
.kt-page-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--kt-space-4);
    margin-bottom: var(--kt-space-6);
}
.kt-page-heading__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kt-space-2);
}
.kt-page-heading h1 {
    margin: 0;
    font-family: var(--kt-font-head);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
}
.kt-crumb {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kt-muted);
    margin-bottom: var(--kt-space-1);
}

/* ============================================================
   Responsive grids
   ============================================================ */
.kt-grid { display: grid; gap: 1.25rem; }
.kt-grid--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kt-grid--kpi   { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kt-grid--tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* ============================================================
   Pills / badges
   ============================================================ */
.kt-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--kt-radius-pill);
    font-family: var(--kt-font-body);
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.kt-pill--muted    { background: rgba(154,166,188,0.10); color: var(--kt-muted); border-color: var(--kt-hairline); }
.kt-pill--cobalt   { background: var(--kt-cobalt-soft); color: #A9BEFF; border-color: rgba(79,123,255,0.22); }
.kt-pill--featured { background: rgba(245,196,81,0.12); color: var(--kt-gold); border-color: rgba(245,196,81,0.22); }
.kt-pill--ending   { background: rgba(255,92,114,0.12); color: #FF8A98; border-color: rgba(255,92,114,0.22); }
.kt-pill--live     { background: rgba(34,211,167,0.12); color: #5AE7C4; border-color: rgba(34,211,167,0.22); }

.kt-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--kt-teal);
    box-shadow: 0 0 0 0 rgba(34,211,167,0.7);
    animation: kt-pulse 1.8s infinite;
}
@keyframes kt-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,211,167,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(34,211,167,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,211,167,0); }
}

/* ============================================================
   Hero
   ============================================================ */
.kt-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--kt-radius-card);
    border: 1px solid var(--kt-hairline);
    background: var(--kt-hero-grad);
    padding: clamp(1.75rem, 4vw, 3rem);
}
.kt-hero::before {
    content: "";
    position: absolute;
    top: -40%; right: -10%;
    width: 55%; height: 150%;
    background: radial-gradient(closest-side, rgba(79,123,255,0.12), rgba(79,123,255,0) 70%);
    pointer-events: none;
}
.kt-hero--quiet::before { display: none; }

/* Quiet media strip for product cards (no radial glow / icon theater) */
.kt-media-strip {
    height: 112px;
    display: flex;
    align-items: flex-end;
    padding: 0 1.15rem 1rem;
    background: var(--kt-fill-subtle);
    border-bottom: 1px solid var(--kt-hairline);
}
.kt-media-strip__mark {
    font-family: var(--kt-font-head);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.03em;
    color: var(--kt-muted);
    opacity: 0.55;
    line-height: 1;
}
.kt-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    align-items: center;
}
/* two-column hero collapses to one below 960px (design-language breakpoint) */
@media (max-width: 960px) {
    .kt-hero-grid { grid-template-columns: 1fr; }
}
.kt-hero-title {
    font-family: var(--kt-font-head);
    font-weight: 800;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--kt-text);
    background: none;
    -webkit-text-fill-color: unset;
    margin: 0 0 0.75rem 0;
    text-align: left;
    max-width: 14ch;
}

/* ============================================================
   Countdown
   ============================================================ */
.kt-countdown { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.kt-countdown-cell {
    flex: 1 1 0;
    min-width: 56px;
    max-width: 84px;
    text-align: center;
    padding: 10px 8px;
    border-radius: var(--kt-radius);
    background: var(--kt-fill-subtle);
    border: 1px solid var(--kt-hairline);
}
.kt-countdown-num {
    font-family: var(--kt-font-head);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--kt-text);
    font-variant-numeric: tabular-nums;
}
.kt-countdown-lbl {
    display: block;
    margin-top: 5px;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

/* ============================================================
   Ticket chips
   ============================================================ */
.kt-tickets { display: flex; flex-wrap: wrap; gap: 8px; }
.kt-ticket {
    font-family: var(--kt-font-head);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--kt-cobalt-soft);
    color: #B7C7FF;
    border: 1px solid rgba(79,123,255,0.3);
}

/* ============================================================
   Progress — thin fill, no outer glow (glow reserved for chart caps)
   ============================================================ */
.kt-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--kt-track);
    overflow: hidden;
    border: 1px solid var(--kt-hairline);
}
.kt-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--kt-cobalt-deep);
    box-shadow: none;
    transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   KPI tiles
   ============================================================ */
/* KPI / metric rows — operational, not “big number / small label / accent” theater */
.kt-kpi {
    padding: 0.95rem 1.05rem 1rem;
    border-radius: var(--kt-radius-card);
    border: 1px solid var(--kt-hairline);
    background: var(--kt-surface);
    position: relative;
    overflow: hidden;
    transition: border-color .18s ease;
    box-shadow: var(--kt-shadow-feather);
}
.kt-kpi::after { display: none !important; }
.kt-kpi:hover { border-color: color-mix(in srgb, var(--accent, var(--kt-cobalt)) 28%, transparent); }
.kt-kpi-label {
    font-size: 0.8rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--kt-text);
    font-weight: 600;
    padding-right: 0;
}
.kt-kpi-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.35rem;
}
.kt-kpi-value {
    font-family: var(--kt-font-body);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--kt-text);
    margin-top: 0;
    padding-right: 0;
    font-variant-numeric: tabular-nums;
}
.kt-kpi-icon { display: none !important; }
.kt-kpi-delta {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.45rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.kt-kpi .kt-sparkline { margin-top: 0.55rem; opacity: 0.75; height: 22px; }
.kt-up   { color: var(--kt-teal); }
.kt-down { color: var(--kt-red); }

/* ============================================================
   Swatches (design tokens page)
   ============================================================ */
.kt-swatch {
    border-radius: var(--kt-radius-card);
    border: 1px solid var(--kt-hairline);
    overflow: hidden;
    background: var(--kt-surface);
}
.kt-swatch-color { height: 84px; }
.kt-swatch-body { padding: 12px 14px; }
.kt-swatch-name { font-weight: 600; font-size: 0.85rem; color: var(--kt-text); }
.kt-swatch-hex  { font-size: 0.75rem; color: var(--kt-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ============================================================
   Charts: sparklines, area chart, day-selector chips
   ============================================================ */
.kt-sparkline { width: 100%; height: 30px; display: block; margin-top: 10px; opacity: .9; }

.kt-legend {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; color: var(--kt-muted);
}
.kt-legend-swatch { width: 14px; height: 4px; border-radius: 999px; }
.kt-legend-swatch--dash { background: none; border-top: 2px dashed; height: 0; }

.kt-daychips {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scrollbar-width: thin;
}
.kt-daychip {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 9px 6px 7px;
    text-align: center;
    border-radius: var(--kt-radius);
    border: 1px solid var(--kt-hairline);
    background: var(--kt-fill-subtle);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
    user-select: none;
}
.kt-daychip:hover { border-color: rgba(79,123,255,0.35); }
.kt-daychip--active {
    background: var(--kt-cobalt-soft);
    border-color: rgba(79,123,255,0.45);
}
.kt-daychip-num {
    font-family: var(--kt-font-head);
    font-weight: 700; font-size: 1.05rem; line-height: 1.1;
    color: var(--kt-text);
    font-variant-numeric: tabular-nums;
}
.kt-daychip--active .kt-daychip-num { color: #B7C7FF; }
.kt-daychip-lbl { font-size: 0.66rem; color: var(--kt-muted); letter-spacing: .04em; }

/* status chip (avatar cluster + "x of y live") */
.kt-statuschip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 8px;
    border-radius: var(--kt-radius-pill);
    border: 1px solid var(--kt-hairline);
    background: var(--kt-fill-subtle);
    font-size: 0.82rem; color: var(--kt-muted);
    white-space: nowrap;
}
.kt-statuschip b { color: var(--kt-text); font-weight: 600; }

/* ============================================================
   Live Ops — ongoing draw cards + rails
   ============================================================ */
.kt-timechip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: var(--kt-radius-pill);
    background: var(--kt-fill-subtle);
    border: 1px solid var(--kt-hairline);
    font-size: 0.74rem; font-weight: 600;
    color: var(--kt-text);
    font-variant-numeric: tabular-nums;
}

.kt-dotmatrix {
    display: grid;
    /* fluid columns: dots re-flow to the card's width instead of forcing a
       24-column minimum (24×9px + gaps ≈ 331px) that overflowed narrow cards */
    grid-template-columns: repeat(auto-fill, minmax(11px, 1fr));
    gap: 6px 4px;
    margin: 4px 0 12px;
    overflow: hidden;
}
.kt-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(154,166,188,0.16);
    justify-self: center;
}
.kt-dot--sold, .kt-dot--used { background: var(--kt-cobalt); box-shadow: 0 0 5px rgba(79,123,255,0.4); }
.kt-dot--win, .kt-dot--special  { background: var(--kt-gold); }
.kt-dot--hold, .kt-dot--reserved { background: transparent; border: 1.5px solid var(--kt-cobalt); box-sizing: border-box; }
.kt-dotmatrix-legend {
    display: flex; flex-wrap: wrap; gap: var(--kt-space-4);
    font-size: 0.75rem; color: var(--kt-muted); margin-top: var(--kt-space-2);
}
.kt-dotmatrix-legend .kt-dot { display: inline-block; vertical-align: middle; margin-right: 4px; }

.kt-railitem {
    position: relative;
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .85rem;
    border: 1px solid var(--kt-hairline);
    border-radius: var(--kt-radius-card);
    background: var(--kt-fill-subtle);
    margin-bottom: .6rem;
}
.kt-railbadge {
    position: absolute; top: -7px; right: 10px;
    padding: 2px 8px;
    border-radius: var(--kt-radius-pill);
    background: var(--kt-surface-2);
    border: 1px solid var(--kt-hairline);
    font-size: 0.66rem; font-weight: 700;
    color: var(--kt-gold);
    font-variant-numeric: tabular-nums;
}
.kt-railbadge--red { color: #FF8A98; }

/* ============================================================
   Prize tracking — legs strip, map pulse, distance ticks
   ============================================================ */
.kt-legs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.25rem;
}
.kt-leg {
    padding: .8rem 1rem;
    border: 1px solid var(--kt-hairline);
    border-radius: var(--kt-radius-card);
    background: var(--kt-fill-subtle);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.kt-leg--active {
    border-color: rgba(79,123,255,0.5);
    box-shadow: 0 0 18px rgba(79,123,255,0.18);
    background: var(--kt-cobalt-soft);
}
.kt-leg-line { display: flex; align-items: center; gap: 6px; margin: 8px 0 6px; }
.kt-leg-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.kt-leg-dash { flex: 1; border-top: 2px dashed; height: 0; }

.kt-mappulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: kt-mappulse 2.2s ease-out infinite;
}
@keyframes kt-mappulse {
    0%   { transform: scale(1);    opacity: .8; }
    100% { transform: scale(2.4);  opacity: 0; }
}

.kt-ticks { display: flex; align-items: center; gap: 5px; }
.kt-tick {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: rgba(154,166,188,0.18);
    min-width: 3px; max-width: 6px;
}
.kt-tick--done { background: var(--kt-teal); box-shadow: 0 0 6px rgba(34,211,167,0.4); }

/* ============================================================
   Auth layout (login / register) — matches Deployer kt-auth-bg
   ============================================================ */
.kt-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    /* No solid fill: the gravity-well field lives behind the page and a canvas-coloured
       layer here would hide it. The html backdrop supplies the base colour, and light
       mode restores the flat fill (see the light-mode block near the top). */
    background:
        radial-gradient(circle at 25% 20%, rgba(79, 123, 255, 0.18), transparent 45%),
        radial-gradient(circle at 78% 75%, rgba(34, 211, 167, 0.10), transparent 45%);
}
.kt-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--kt-surface);
}

/* Login form controls (Deployer-parity native fields) */
.kt-login-input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid var(--kt-hairline);
    background: var(--kt-surface-raised);
    color: var(--kt-text);
    font-size: 0.95rem;
    font-family: inherit;
}
/* Same rule for the native login fields: thicken and recolour the field's OWN border
   rather than drawing a separate ring outside it, so focus reads as one border.
   The inset shadow doubles the border weight without changing the box size. */
.kt-login-input:focus {
    outline: none;
    border-color: var(--kt-cobalt);
    box-shadow: inset 0 0 0 1px var(--kt-cobalt);
}
.kt-login-input--password {
    padding-right: 76px;
}
.kt-login-show {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(calc(-50% + 3px));
    border: none;
    background: none;
    color: var(--kt-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    font-family: inherit;
}
.kt-login-submit {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: var(--kt-cobalt-deep);
    color: #FFFFFF;
    font-family: var(--kt-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(79, 123, 255, 0.3);
}
.kt-login-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Persistent demo disclosure (GPTFindings THEME-01) — hairline strip, not a card. */
.kt-demo-banner {
    margin: 0;
    padding: 0.45rem 1.25rem;
    font-size: 0.75rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: var(--kt-muted);
    background: rgba(79, 123, 255, 0.06);
    border-bottom: 1px solid var(--kt-hairline);
    text-align: center;
}
.kt-mode-light .kt-demo-banner {
    background: rgba(79, 123, 255, 0.08);
}
.kt-demo-banner--auth {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}
.kt-auth { padding-top: 2.5rem; }

/* ============================================================
   Kanban board
   ============================================================ */
.kt-caption-muted { font-size: 0.75rem; color: var(--kt-muted); }

.kt-kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}
.kt-kanban-col { display: flex; flex-direction: column; min-width: 240px; }
.kt-kanban-head {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0 0.25rem 0.75rem;
}
.kt-kanban-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.kt-kanban-title { font-weight: 600; font-size: 0.9rem; color: var(--kt-text); flex: 1; }
.kt-kanban-zone {
    flex: 1;
    min-height: 140px;
    border-radius: var(--kt-radius-card);
    border: 1px dashed var(--kt-hairline);
    background: var(--kt-fill-subtle);
    padding: 0.75rem;
    transition: background .15s ease, border-color .15s ease;
}
.kt-kanban-zone--over {
    border-color: rgba(79,123,255,0.5);
    background: var(--kt-cobalt-soft);
}
.kt-kanban-card {
    background: var(--kt-surface);
    border: 1px solid var(--kt-hairline);
    border-radius: var(--kt-radius);
    padding: 0.85rem;
    margin-bottom: 0.65rem;
    cursor: grab;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.kt-kanban-card:hover { border-color: rgba(79,123,255,0.35); box-shadow: var(--kt-shadow-card); }
.kt-kanban-card:active { cursor: grabbing; }
.kt-kanban-card-title { font-weight: 600; font-size: 0.92rem; color: var(--kt-text); line-height: 1.3; }

@media (max-width: 960px) {
    .kt-kanban { grid-auto-flow: column; grid-template-columns: none; }
}

/* ============================================================
   Layout guards — keep content inside its blocks
   ============================================================ */
/* DataGrid/table toolbars: wrap instead of overflowing the card on narrow widths */
.mud-table-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 64px;
    row-gap: .5rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
}

/* row-click affordance used by the entrants grid */
.cursor-pointer, .cursor-pointer td { cursor: pointer; }

/* the app-bar search dropdown must not be clipped by the toolbar */
.kt-appbar .mud-toolbar { overflow: visible; }

/* long unbroken content (emails, ids) must not push tables out of cards */
.kt-card { min-width: 0; }
.kt-card .mud-table-container { overflow-x: auto; }

/* stepper + tab headers scroll sideways instead of escaping the page on small screens */
.mud-stepper-nav { overflow-x: auto; }
.mud-tabs-tabbar-content { overflow-x: auto; scrollbar-width: thin; }

/* space between tab labels and panel content so they don't crowd */
.mud-tabs-panels { padding-top: 1.25rem; }

/* distance ticks (tracking page): shrink to slivers and clip, never escape */
.kt-ticks { overflow: hidden; gap: 3px; }
.kt-tick { min-width: 2px; }

/* ============================================================
   Accessibility & media
   ============================================================ */
/* AA contrast: brand-cobalt text on dark surfaces uses the light cobalt tint */
.mud-chip-outlined.mud-chip-color-primary { color: #A9BEFF; }

/* Honour OS-level reduced-motion: freeze pulses, floats, slides and lifts */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print (used by the Invoice page): drop the chrome, keep the document */
@media print {
    .mud-appbar, .mud-drawer, .kt-footer, .kt-drawer-foot,
    #blazor-error-ui, .mud-snackbar { display: none !important; }
    .mud-main-content { padding: 0 !important; }
    body, .mud-layout { background: #fff !important; }
    .kt-card {
        border-color: #d8dce4 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
}

/* ============================================================
   Blazor form validation + error UI (re-themed)
   ============================================================ */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--kt-teal); }
.invalid { outline: 1px solid var(--kt-red); }
.validation-message { color: var(--kt-red); }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    border-radius: var(--kt-radius);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

#blazor-error-ui {
    color-scheme: dark;
    background: var(--kt-surface-2);
    color: var(--kt-text);
    border-top: 1px solid var(--kt-hairline);
    bottom: 0;
    box-shadow: 0 -1px 20px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.9rem 1.4rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.75rem;
}

/* ============================================================
   WASM loading splash (shown before Blazor boots)
   ============================================================ */
.kt-splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: radial-gradient(closest-side at 50% 38%, rgba(79,123,255,0.18), transparent 60%), #0B0F17;
    font-family: var(--kt-font-body);
    z-index: 2000;
}
.kt-splash-mark {
    width: 58px; height: 58px;
    border-radius: 16px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, #5D86FF, #3A5BE0);
    box-shadow: var(--kt-glow-cobalt);
    margin-bottom: 0.75rem;
    animation: kt-splash-float 2.4s ease-in-out infinite;
}
/* Hosts put either an inline SVG or the logo PNG in the splash tile — size both, or an
   <img> renders at its intrinsic size and blows the tile out. */
.kt-splash-mark svg,
.kt-splash-mark img { width: 32px; height: 32px; object-fit: contain; }
@keyframes kt-splash-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.kt-splash-title {
    font-family: var(--kt-font-head);
    font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em;
    color: #E9EDF5;
}
.kt-splash-sub { color: #9AA6BC; font-size: 0.85rem; }
.kt-splash-bar {
    margin-top: 0.9rem;
    width: 180px; height: 4px; border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.kt-splash-bar span {
    display: block; height: 100%; width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3A5BE0, #5D86FF);
    box-shadow: 0 0 12px rgba(79,123,255,0.6);
    animation: kt-splash-slide 1.2s ease-in-out infinite;
}
@keyframes kt-splash-slide {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

/* ============================================================
   "Data is light" texture — fine grain over hero + auth surfaces
   ============================================================ */
.kt-hero::after, .kt-auth::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.kt-auth { position: relative; }
.kt-auth::after { position: fixed; }
.kt-auth-card { position: relative; z-index: 1; }

/* ============================================================
   Branded loader — the logo with a pulsing glow ring (data loads)
   ============================================================ */
.kt-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.kt-loader-mark {
    position: relative;
    display: grid; place-items: center;
}
.kt-loader-ring {
    position: absolute;
    inset: -7px;
    border-radius: 20px;
    border: 2px solid rgba(79,123,255,0.55);
    animation: kt-loader-pulse 1.6s ease-out infinite;
    pointer-events: none;
}
@keyframes kt-loader-pulse {
    0%   { transform: scale(1);    opacity: .9; }
    100% { transform: scale(1.45); opacity: 0; }
}
.kt-loader-msg { font-size: 0.82rem; color: var(--kt-muted); }

/* signature sample tiles on the Tokens page */
.kt-sig-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 170px;
    padding: 14px;
    border: 1px solid var(--kt-hairline);
    border-radius: var(--kt-radius-card);
    background: var(--kt-fill-subtle);
    text-align: center;
}


/* Branded Blazor reconnect overlay */
#components-reconnect-modal {
  max-width: none;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #E9EDF5;
}

#components-reconnect-modal::backdrop {
  background: rgba(11, 15, 23, 0.92);
}

.kt-reconnect-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #0B0F17;
  overflow: hidden;
}

.kt-reconnect-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.kt-reconnect-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,123,255,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.kt-reconnect-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
  padding: 2rem;
}

.kt-reconnect-tile {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #5D86FF, #3A5BE0);
  box-shadow: 0 0 24px rgba(79, 123, 255, 0.35);
  animation: kt-reconnect-float 2.4s ease-in-out infinite;
}

.kt-reconnect-tile img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.kt-reconnect-brand {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin: 0;
}

.kt-reconnect-msg {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.85rem;
  color: #9AA6BC;
  margin: 0;
}

.kt-reconnect-track {
  width: 180px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  margin-top: 0.35rem;
}

.kt-reconnect-bar {
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3A5BE0, #5D86FF);
  box-shadow: 0 0 16px rgba(79, 123, 255, 0.55);
  animation: kt-reconnect-slide 1.2s ease-in-out infinite;
}

.kt-reconnect-btn {
  margin-top: 0.5rem;
  padding: 0.65rem 1.25rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #5D86FF 0%, #3A5BE0 100%);
  color: #fff;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
  display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
  display: block;
}

#components-reconnect-modal.components-reconnect-failed .kt-reconnect-btn.components-reconnect-failed-visible,
#components-reconnect-modal.components-reconnect-paused .kt-reconnect-btn.components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .kt-reconnect-btn.components-resume-failed-visible {
  display: inline-flex;
}

@keyframes kt-reconnect-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes kt-reconnect-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

@media (prefers-reduced-motion: reduce) {
  .kt-reconnect-tile,
  .kt-reconnect-bar,
  .kt-kpi-tile {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Real-product layer — texture, asymmetry, stagger, empty states
   ============================================================ */

:root {
    --kt-ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
    --kt-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
    --kt-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

.kt-grain { position: relative; }
.kt-grain::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    opacity: 0.03;
    background-image: var(--kt-noise);
    background-repeat: repeat;
    background-size: 180px 180px;
    mix-blend-mode: overlay;
}
.mud-layout.kt-mode-light.kt-grain::before {
    opacity: 0.045;
    mix-blend-mode: multiply;
}

.kt-card { box-shadow: var(--kt-shadow-feather); }
.kt-card--pad-tight { padding: 14px 16px 18px !important; }
.kt-card--pad-body  { padding: 18px 22px 22px !important; }
.kt-card--pad-loose { padding: 26px 30px 28px !important; }
.kt-card--pad-split { padding: 16px 20px 24px !important; }

.mud-drawer .mud-nav-menu { padding: 4px 2px 12px; }
.kt-drawer-product { padding: 10px 14px !important; font-size: 0.88rem; }
.mud-main-content .mud-container {
    padding-top: 1.35rem !important;
    padding-bottom: 2.75rem !important;
}

.kt-grid--kpi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}
@media (max-width: 1100px) {
    .kt-grid--kpi { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .kt-grid--kpi { grid-template-columns: 1fr; }
}

.kt-grid--cards {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}
/* No permanent translateY offsets — they read as broken layout, not product polish */

.kt-grid--asymmetric {
    display: grid;
    grid-template-columns: 1.45fr 0.9fr;
    gap: 1.35rem 1.75rem;
    align-items: start;
}
@media (max-width: 960px) {
    .kt-grid--asymmetric { grid-template-columns: 1fr; }
}

.kt-hero {
    padding: clamp(1.5rem, 3.5vw, 2.6rem) clamp(1.25rem, 4vw, 3rem)
             clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem);
}
.kt-hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
}
.kt-hero-grid > :last-child { transform: none; }

.kt-prose {
    text-align: left;
    text-wrap: pretty;
    max-width: 58ch;
}
.kt-prose--narrow { max-width: 42ch; }

.kt-empty {
    text-align: left;
    padding: 1.75rem 1.5rem 1.6rem 1.65rem;
    border: 1px dashed var(--kt-hairline);
    border-radius: var(--kt-radius-card);
    background: var(--kt-fill-subtle);
}
.kt-empty__icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    display: grid; place-items: center;
    margin-bottom: 0.85rem;
    background: var(--kt-fill-subtle);
    border: 1px solid var(--kt-hairline);
}
.kt-empty__title {
    font-family: var(--kt-font-head);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 0.35rem;
    letter-spacing: -0.015em;
}
.kt-empty__body {
    color: var(--kt-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 36ch;
    margin: 0 0 1rem;
    text-align: left;
}
.kt-empty__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.kt-milestone {
    margin-right: clamp(0px, 6vw, 4.5rem);
    max-width: 920px;
    box-shadow: var(--kt-shadow-feather);
}

.kt-stagger > * {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    animation: kt-enter 520ms var(--kt-ease-enter) forwards;
    animation-delay: calc(var(--kt-stagger, 0) * 55ms + 40ms);
}
@keyframes kt-enter {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .kt-stagger > * { opacity: 1; transform: none; animation: none; }
}

.kt-avatar {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background: #1A2233;
    border: 1px solid var(--kt-hairline);
    box-shadow: inset 0 -6px 12px rgba(0,0,0,0.25);
}
.kt-avatar img, .kt-avatar svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.kt-avatar--sm { width: 32px; height: 32px; }
.kt-avatar--md { width: 40px; height: 40px; }
.kt-avatar--lg { width: 56px; height: 56px; }
.kt-avatar--xl { width: 88px; height: 88px; border-radius: 22px; }
.kt-avatar--square { border-radius: 12px; }
.kt-avatar--xl.kt-avatar--square { border-radius: 14px; }

.kt-offset-actions { margin-top: 0.35rem; margin-left: 0.15rem; }
.kt-account-tile {
    text-align: left;
    padding: 0.85rem 1rem 1rem;
    border: 1px solid var(--kt-hairline);
    border-radius: var(--kt-radius-card);
    background: var(--kt-fill-subtle);
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.kt-powered-by, .kt-wordmark-foot, footer.kt-brand-foot { display: none !important; }