/* ===========================================================================
   App Store Manager — futuristic design system  ·  by Lightbridge Interactive
   ---------------------------------------------------------------------------
   Two themes, one set of rules. Everything reads from CSS custom properties:
     :root                -> LIGHT theme (also the brand-safe base that the
                             per-app BrandTheme component overrides).
     :root[data-theme=dark] -> DARK black-and-blue console theme (the default for
                             internal/admin pages; see _Layout pre-paint script).
   Branded partner pages never set data-theme, so their BrandCss :root overrides
   keep winning — the toggle is an internal-admin concern only.
   =========================================================================== */

/* ------------------------------------------------------------- Shared tokens */
:root {
    /* Signature Lightbridge blue: sky -> electric -> deep blue. */
    --blue-bright: #38bdf8;
    --blue-electric: #2563eb;
    --blue-deep: #1d4ed8;

    /* Light theme (default) --------------------------------------------------*/
    --grad: linear-gradient(120deg, #38bdf8 0%, #2563eb 52%, #1d4ed8 100%);
    --grad-soft: linear-gradient(120deg, rgba(56,189,248,.12), rgba(37,99,235,.10), rgba(29,78,216,.12));
    --accent: #2563eb;
    --accent-600: #1d4ed8;

    --ink: #0a0a0a;
    --ink-soft: #404040;
    --muted: #737373;
    --line: #dbe4f0;

    --bg: #f5f8ff;
    --card: #ffffff;
    --card-2: #f8fafc;
    --card-border: #dbe4f0;

    --sidebar-bg: #030712;
    --sidebar-ink: #dbeafe;
    --sidebar-ink-dim: #7da2d6;

    --topbar-bg: rgba(245,248,255,.84);
    --input-bg: #ffffff;

    /* Ambient backdrop (grid + corner glows) — kept faint on light. */
    --grid: rgba(37,99,235,.05);
    --glow-a: rgba(56,189,248,.08);
    --glow-b: rgba(29,78,216,.07);

    --focus: rgba(37,99,235,.28);
    --ring: 0 0 0 .22rem var(--focus);
    --glow-accent: 0 8px 26px rgba(37,99,235,.28);

    --sidebar-w: 264px;
    --radius: 16px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
    --shadow: 0 4px 24px rgba(0,0,0,.07);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
}

/* --------------------------------------------------- Dark black-and-blue theme */
:root[data-theme="dark"] {
    --grad: linear-gradient(120deg, #38bdf8 0%, #2563eb 48%, #1d4ed8 100%);
    --grad-soft: linear-gradient(120deg, rgba(56,189,248,.16), rgba(37,99,235,.14), rgba(29,78,216,.18));
    --accent: #60a5fa;
    --accent-600: #3b82f6;

    --ink: #ffffff;
    --ink-soft: #bfdbfe;
    --muted: #7da2d6;
    --line: rgba(59,130,246,.22);

    --bg: #000000;
    --card: rgba(3,10,24,.94);
    --card-2: rgba(8,23,48,.84);
    --card-border: rgba(59,130,246,.24);

    --sidebar-bg: #000000;
    --sidebar-ink: #bfdbfe;
    --sidebar-ink-dim: #5f86bd;

    --topbar-bg: rgba(0,0,0,.84);
    --input-bg: rgba(37,99,235,.08);

    --grid: rgba(37,99,235,.08);
    --glow-a: rgba(56,189,248,.12);
    --glow-b: rgba(29,78,216,.16);

    --focus: rgba(59,130,246,.46);
    --ring: 0 0 0 .22rem var(--focus);
    --glow-accent: 0 0 22px rgba(59,130,246,.55), 0 10px 30px rgba(37,99,235,.32);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow: 0 10px 34px rgba(0,0,0,.5);
    --shadow-lg: 0 20px 55px rgba(0,0,0,.72), 0 0 0 1px rgba(59,130,246,.10);

    /* Bridge Bootstrap's own tokens so its components inherit the dark palette. */
    --bs-body-bg: transparent;
    --bs-body-color: var(--ink);
    --bs-emphasis-color: #fff;
    --bs-heading-color: var(--ink);
    --bs-border-color: var(--line);
    --bs-secondary-color: var(--muted);
    --bs-secondary-bg: rgba(37,99,235,.10);
    --bs-tertiary-bg: rgba(37,99,235,.07);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: #bfdbfe;
    color-scheme: dark;
}

/* -------------------------------------------------------- Financial what-if */
.what-if-card {
    overflow: hidden;
    border-color: color-mix(in srgb, var(--accent) 42%, var(--card-border));
    background:
        radial-gradient(80% 180% at 100% 0, color-mix(in srgb, var(--accent) 13%, transparent), transparent 58%),
        var(--card);
}

.what-if-card::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--grad);
}

.what-if-live-badge {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}

.what-if-control,
.what-if-result {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card-2) 82%, transparent);
}

.what-if-plan-count {
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 5%, var(--card-2));
}

.what-if-plan-count.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus);
}

.what-if-plan-count .form-range { margin: .45rem 0 .35rem; }
.what-if-plan-count .form-range::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--focus); }
.what-if-plan-count .form-range::-moz-range-thumb { box-shadow: 0 0 0 4px var(--focus); }
.what-if-subscriber-input { width: 9.75rem; flex: 0 0 auto; }
.what-if-mix-input { width: 7.25rem; flex: 0 0 auto; }

.what-if-number-input { width: 9.25rem; }

.what-if-number-input .form-control { min-width: 4.5rem; }

.what-if-control .form-range { margin: .45rem 0 .35rem; }

.what-if-control .form-range::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--focus); }
.what-if-control .form-range::-moz-range-thumb { box-shadow: 0 0 0 4px var(--focus); }

.what-if-range-store::-webkit-slider-thumb { background: var(--bs-warning); }
.what-if-range-store::-moz-range-thumb { background: var(--bs-warning); }
.what-if-range-influencer::-webkit-slider-thumb { background: var(--bs-info); }
.what-if-range-influencer::-moz-range-thumb { background: var(--bs-info); }
.what-if-range-offer::-webkit-slider-thumb { background: var(--accent); }
.what-if-range-offer::-moz-range-thumb { background: var(--accent); }

.what-if-result {
    display: flex;
    flex-direction: column;
    min-height: 6.2rem;
}

.what-if-result span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.what-if-result strong {
    margin-top: .3rem;
    color: var(--ink);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.15;
}

.what-if-result small { margin-top: auto; color: var(--muted); }
.what-if-result-store strong { color: var(--bs-warning); }
.what-if-result-influencer strong { color: var(--bs-info); }
.what-if-result-company strong { color: var(--bs-success); }
.what-if-negative .what-if-result-company strong { color: var(--bs-danger); }

.what-if-split {
    display: flex;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--line);
}

.what-if-split span { transition: width 120ms ease-out; }
.what-if-split-store { background: var(--bs-warning); }
.what-if-split-influencer { background: var(--bs-info); }
.what-if-split-company { background: var(--bs-success); }

@media (prefers-reduced-motion: reduce) {
    .what-if-split span { transition: none; }
}

* { box-sizing: border-box; }

html { font-size: 15px; position: relative; min-height: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg);
    /* Layered ambient backdrop: two blue corner glows + a fine engineering grid. */
    background-image:
        radial-gradient(60% 55% at 8% -8%, var(--glow-a), transparent 60%),
        radial-gradient(55% 55% at 105% 4%, var(--glow-b), transparent 58%),
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: auto, auto, 46px 46px, 46px 46px;
    background-attachment: fixed;
    color: var(--ink);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------- Auth pages */
.auth-page {
    min-height: 100vh;
    background-color: var(--bg);
    background-image:
        radial-gradient(48% 42% at 50% 0%, var(--glow-a), transparent 62%),
        radial-gradient(40% 44% at 88% 100%, var(--glow-b), transparent 60%),
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: auto, auto, 46px 46px, 46px 46px;
    background-attachment: fixed;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.auth-panel {
    width: min(100%, 420px);
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    padding: 30px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(14px);
}
/* Blue top-edge on the sign-in card. */
.auth-panel::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad);
    box-shadow: 0 0 18px rgba(37,99,235,.5);
}

.auth-panel h1 {
    font-size: 1.4rem;
    margin: 20px 0 18px;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--ink);
}

.auth-footnote {
    margin-top: 22px;
    text-align: center;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--muted);
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); font-family: var(--heading-font, inherit); font-weight: var(--heading-weight, 700); letter-spacing: -0.02em; }
a { color: var(--accent-warm-ink, var(--accent-600)); text-decoration: none; }
a:hover { color: var(--accent-warm, var(--accent)); }
code { font-size: .85em; color: #1d4ed8; background: #eff5ff; padding: .08em .35em; border-radius: 5px; }
:root[data-theme="dark"] a { color: var(--accent-warm-ink, #93c5fd); }
:root[data-theme="dark"] a:hover { color: var(--accent-warm, #dbeafe); }
:root[data-theme="dark"] code { color: #7dd3fc; background: rgba(37,99,235,.14); }

/* ----------------------------------------------------------------- Sidebar */
.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    /* Blue aura: sky blue from top-left, deep blue from bottom-right. */
    background-image:
        radial-gradient(120% 55% at 0% 0%, rgba(56,189,248,.16), transparent 58%),
        radial-gradient(95% 60% at 100% 100%, rgba(29,78,216,.20), transparent 60%);
    color: var(--sidebar-ink);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 1040;
    border-right: 1px solid rgba(59,130,246,.18);
}
html.nav-open .app-sidebar { transform: translateX(0); }

.sidebar-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 8px;
}

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 18px 18px;
}
.brand { display: flex; align-items: center; gap: 11px; color: #fff; font-size: 1.05rem; }
.brand:hover { color: #fff; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 12px;
    background:
        radial-gradient(80% 75% at 25% 20%, rgba(255,255,255,.34), transparent 55%),
        var(--grad);
    display: grid; place-items: center;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 18px rgba(79,124,255,.55), 0 8px 20px rgba(37,99,235,.42), inset 0 1px 0 rgba(255,255,255,.28);
}
.brand-mark img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 12px;
}
.brand-mark svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.28));
}
.auth-brand .brand-mark {
    width: 36px;
    height: 36px;
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text { font-weight: 600; letter-spacing: -0.02em; }
.brand-text strong { font-weight: 800; }
.brand-tagline { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .02em; color: var(--accent-warm, var(--sidebar-ink-dim)); margin-top: 2px; }

.pin-btn {
    background: transparent; border: 1px solid transparent; color: var(--sidebar-ink-dim);
    width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
    display: grid; place-items: center; transition: all .18s ease;
}
.pin-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.pin-btn svg { transition: transform .18s ease; }
html.nav-pinned .pin-btn { color: var(--blue-bright); background: rgba(37,99,235,.18); border-color: rgba(59,130,246,.45); }
/* Tilted pin reads as "not pinned" so the toggle's state is obvious before it is clicked. */
html:not(.nav-pinned) .pin-btn svg { transform: rotate(45deg); }

/* Global app filter — the sidebar pick that re-scopes every page. */
.app-scope {
    padding: 0 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.app-scope-label {
    font-size: .64rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--sidebar-ink-dim); font-weight: 700;
}
.app-scope-form { position: relative; display: flex; align-items: center; }
.app-scope-select {
    appearance: none;
    width: 100%;
    padding: 9px 32px 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(59,130,246,.38);
    background: rgba(15,23,42,.55);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-overflow: ellipsis;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.app-scope-select:hover { background: rgba(37,99,235,.20); border-color: rgba(59,130,246,.62); }
.app-scope-select:focus-visible {
    outline: none;
    border-color: var(--blue-bright, #60a5fa);
    box-shadow: 0 0 0 3px rgba(59,130,246,.28);
}
/* Native option lists render in the OS palette, so keep them readable on both themes. */
.app-scope-select option { color: #0f172a; background: #fff; }
.app-scope-chevron {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; pointer-events: none; color: var(--sidebar-ink-dim);
}
.app-scope-go { margin-left: 6px; }

/* "Sync with store" — pulls store data for whatever the picker above is scoped to. */
.store-sync {
    padding: 0 18px 14px;
    margin-top: -6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.store-sync-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(59,130,246,.38);
    background: rgba(15,23,42,.55);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.store-sync-btn:hover { background: rgba(37,99,235,.20); border-color: rgba(59,130,246,.62); }
.store-sync-btn:focus-visible {
    outline: none;
    border-color: var(--blue-bright, #60a5fa);
    box-shadow: 0 0 0 3px rgba(59,130,246,.28);
}
.store-sync-btn[disabled] { opacity: .7; cursor: progress; }
.store-sync-icon { width: 15px; height: 15px; flex: none; }
/* The icon spins only while a sync is in flight, so the control is visibly busy on a slow pull. */
.store-sync-btn.is-syncing .store-sync-icon { animation: store-sync-spin 1s linear infinite; }
@keyframes store-sync-spin { to { transform: rotate(360deg); } }

.store-sync-last {
    font-size: .7rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--sidebar-ink-dim);
    display: flex; align-items: center; gap: 6px;
    padding-left: 2px;
}
.store-sync-last:hover { text-decoration: underline; color: #fff; }
/* A failed or partial run must not read as "up to date" at a glance. */
.store-sync-last.is-partial { color: #fbbf24; }
.store-sync-last.is-failed { color: #fca5a5; }
.store-sync-partial-count {
    font-size: .64rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(148,163,184,.22);
}

/* Echo of the active global filter on pages that used to carry their own app selector. */
.app-scope-badge {
    background: rgba(37,99,235,.12);
    color: var(--accent-600, #1d4ed8);
    border: 1px solid rgba(59,130,246,.35);
    font-weight: 600;
    padding: .45em .8em;
    border-radius: 999px;
}
:root[data-theme="dark"] .app-scope-badge {
    background: rgba(37,99,235,.22);
    color: #bfdbfe;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: 6px 12px 12px; }
.nav-section {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--sidebar-ink-dim); font-weight: 700;
    padding: 16px 12px 7px;
}
.nav-group-title {
    padding: 10px 12px 3px;
    color: rgba(191,219,254,.58);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
}
.nav-section + .nav-group-title { padding-top: 4px; }
.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; margin: 2px 0;
    border-radius: 11px; color: var(--sidebar-ink);
    font-weight: 500; font-size: .92rem;
    transition: all .16s ease; position: relative;
}
.nav-item svg { width: 19px; height: 19px; flex: none; opacity: .85; }
/* A nav item that belongs to the one above it (subscriptions hang off applications): indented,
   with a hairline rail so the nesting reads even when the parent is the active item. */
.nav-sub { margin-left: 14px; padding-left: 14px; font-size: .88rem; }
.nav-sub::after {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 1px; background: rgba(191,219,254,.22);
}
.nav-sub.active::after { background: rgba(255,255,255,.45); }
.nav-icon { display: inline-grid; place-items: center; width: 19px; height: 19px; flex: none; opacity: .85; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: var(--grad); color: #fff; box-shadow: 0 0 20px rgba(59,130,246,.5), 0 8px 20px rgba(37,99,235,.35); }
.nav-item.active svg { opacity: 1; }
/* Warm brand accent stripe on the active item (shows only when a warm accent is themed). */
.nav-item.active::before {
    content: ""; position: absolute; left: 4px; top: 9px; bottom: 9px;
    width: 3px; border-radius: 3px; background: var(--accent-warm, transparent);
}

.sidebar-user {
    padding: 10px 12px;
    border-top: 1px solid rgba(59,130,246,.20);
}
.sidebar-user-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--sidebar-ink);
    text-align: left;
    transition: background .16s ease, border-color .16s ease;
}
.sidebar-user-button:hover,
.sidebar-user-button[aria-expanded="true"] {
    color: #fff;
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.10);
}
.user-avatar {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--grad);
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    box-shadow: 0 5px 14px rgba(37,99,235,.35);
}
.user-details {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.user-name {
    overflow: hidden;
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-role {
    margin-top: 2px;
    color: var(--sidebar-ink-dim);
    font-size: .7rem;
}
.user-menu-chevron {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--sidebar-ink-dim);
    transition: transform .16s ease;
}
.sidebar-user-button[aria-expanded="true"] .user-menu-chevron { transform: rotate(180deg); }
.sidebar-user-menu {
    width: calc(var(--sidebar-w) - 24px);
    padding: 7px;
    border-color: var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow);
}
.user-menu-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 7px 9px;
    color: var(--ink);
    font-size: .82rem;
}
.user-menu-heading strong,
.user-menu-heading span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-menu-heading span { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.sidebar-user-menu .dropdown-divider { border-color: var(--line); }
.sidebar-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: .84rem;
}
.sidebar-user-menu .dropdown-item:hover,
.sidebar-user-menu .dropdown-item:focus {
    color: var(--ink);
    background: var(--card-2);
}
.user-menu-icon { width: 18px; height: 18px; flex: none; }
.user-theme-toggle .ic-sun { display: block; }
.user-theme-toggle .ic-moon { display: none; }
:root[data-theme="dark"] .user-theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .user-theme-toggle .ic-moon { display: block; }
.theme-value {
    margin-left: auto;
    color: var(--muted);
    font-size: .75rem;
}
.sidebar-user-menu form { margin: 0; }
.sidebar-user-menu .user-signout { color: var(--danger); }
.sidebar-user-menu .user-signout:hover,
.sidebar-user-menu .user-signout:focus { color: var(--danger); }

.sidebar-foot {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 22px; font-size: .78rem; color: var(--sidebar-ink-dim);
    border-top: 1px solid rgba(59,130,246,.20);
}
.env-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.2), 0 0 10px rgba(52,211,153,.7); }
.app-version { margin-left: auto; opacity: .7; white-space: nowrap; }

/* --------------------------------------------------------------- Backdrop */
.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.58);
    backdrop-filter: blur(2px); z-index: 1035; display: none;
}
html.nav-open:not(.nav-pinned) .sidebar-backdrop { display: block; }

/* ---------------------------------------------------------------- Content */
.app-content {
    min-height: 100vh;
    display: flex; flex-direction: column;
    margin-left: 0;
    transition: margin-left .28s cubic-bezier(.4, 0, .2, 1);
}
html.nav-pinned.nav-open .app-content { margin-left: var(--sidebar-w); }

.topbar {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; gap: 16px;
    padding: 14px 28px;
    background: var(--topbar-bg);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.topbar-title { font-weight: 700; font-size: 1.15rem; flex: 1; letter-spacing: -0.02em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* Theme toggle (dark <-> light) */
.theme-toggle {
    width: 40px; height: 40px; border-radius: 11px;
    border: 1px solid var(--line); background: var(--card);
    color: var(--ink-soft); cursor: pointer; display: grid; place-items: center;
    padding: 0; transition: all .16s ease; box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); box-shadow: var(--ring); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .ic-sun { display: none; }
.theme-toggle .ic-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

.hamburger {
    width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line);
    background: var(--card); cursor: pointer; display: grid; place-items: center;
    padding: 0; transition: all .16s ease; box-shadow: var(--shadow-sm);
}
.hamburger:hover { border-color: var(--accent); box-shadow: var(--ring); }
.menu-icon { width: 22px; height: 22px; overflow: visible; }
.menu-line {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.25;
    stroke-linecap: round;
    transition: transform .2s ease, opacity .16s ease, stroke .16s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.hamburger-sidebar {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    box-shadow: none;
}
.hamburger-sidebar .menu-line { stroke: #fff; }
.hamburger-sidebar:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.22);
    box-shadow: none;
}
html.nav-open .hamburger-sidebar .menu-line-top { transform: translateY(5px) rotate(45deg); }
html.nav-open .hamburger-sidebar .menu-line-middle { opacity: 0; transform: scaleX(.45); }
html.nav-open .hamburger-sidebar .menu-line-bottom { transform: translateY(-5px) rotate(-45deg); }
html.nav-pinned.nav-open .hamburger-topbar { display: none; }

.page { flex: 1; padding: 26px 28px 8px; max-width: 1320px; width: 100%; }
/* Stacked and left-aligned: the fixed "Guide me" launcher lives bottom-right, so a right-aligned
   credit would sit underneath it. */
.app-footer {
    padding: 22px 28px; color: var(--muted); font-size: .82rem;
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.lb-credit { letter-spacing: .02em; }
.lb-credit strong {
    font-weight: 700;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ------------------------------------------------------------------ Cards */
.card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
:root[data-theme="dark"] .card { backdrop-filter: blur(12px); }
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card .card-body { padding: 20px; }

.kpi { position: relative; overflow: hidden; border-left: none; }
.kpi::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad);
    box-shadow: 0 0 14px rgba(59,130,246,.4);
}
.kpi:hover, .card.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
:root[data-theme="dark"] .kpi:hover, :root[data-theme="dark"] .card.lift:hover { border-color: rgba(59,130,246,.48); }
.kpi-value { font-size: 1.7rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin-top: 2px; }

h2.h6.text-muted { font-size: .74rem !important; text-transform: uppercase; letter-spacing: .07em; color: var(--muted) !important; font-weight: 700; margin-bottom: 14px; }

/* ----------------------------------------------------------------- Tables */
.table { color: var(--ink); margin: 0; }
.table > thead th {
    border-bottom: 1px solid var(--line); color: var(--muted);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
    padding: 13px 16px;
}
.table > tbody td { padding: 13px 16px; border-color: var(--line); vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: var(--grad-soft); }
.table-light, .table > thead.table-light { --bs-table-bg: #f8fbff; }
.card > .card-body.p-0 .table > tbody > tr:last-child > td { border-bottom: 0; }
:root[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-striped-color: var(--ink);
    --bs-table-striped-bg: rgba(255,255,255,.03);
    --bs-table-hover-color: var(--ink);
    --bs-table-hover-bg: transparent;
}
:root[data-theme="dark"] .table-light,
:root[data-theme="dark"] .table > thead.table-light {
    --bs-table-bg: rgba(255,255,255,.04);
    --bs-table-color: var(--ink-soft);
}

/* Offers list: keep every cell on one line so the eye can scan rows; the
   wrapper scrolls sideways on narrow viewports instead of wrapping cells. */
.offers-table td, .offers-table th { white-space: nowrap; }
.offers-table code { font-size: .86em; }
.offers-table .offer-window { font-variant-numeric: tabular-nums; }
.offers-table .offer-window-arrow { opacity: .55; margin: 0 4px; }
.offers-table .btn-group .btn { padding: .28rem .65rem; }
.table-responsive { border-radius: inherit; }

/* Store offers table on the offer page: one line per cell, sync stamp under the badge. */
.store-offers-table td, .store-offers-table th { white-space: nowrap; }
.store-offers-table td .text-danger.d-block { white-space: normal; max-width: 320px; }

/* Offer detail page: cards sit side by side only when each gets a comfortable width,
   otherwise stack — driven by the content width, so it also copes with the guide panel open. */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; }
@media (max-width: 479.98px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 20px; row-gap: 8px; }
.detail-list dt { font-weight: 600; color: var(--muted); white-space: nowrap; }
.detail-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Buttons */
.btn { border-radius: 10px; font-weight: 600; letter-spacing: -0.01em; padding: .5rem .95rem; transition: all .16s ease; }
.btn-sm { padding: .32rem .7rem; border-radius: 8px; font-size: .82rem; }
.btn-grad, .btn-primary {
    background: var(--grad); border: none; color: #fff;
    box-shadow: var(--glow-accent);
}
.btn-grad:hover, .btn-primary:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 26px rgba(59,130,246,.6), 0 12px 30px rgba(37,99,235,.4); }
.btn-outline-secondary { border-color: var(--line); color: var(--ink-soft); background: var(--card); }
.btn-outline-secondary:hover { background: var(--card-2); color: var(--ink); border-color: var(--accent); }
/* Map Bootstrap's primary outline button to the current accent so it follows the app theme. */
.btn-outline-primary {
    --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--accent-600); --bs-btn-active-border-color: var(--accent-600); --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 0,0,0;
}
.btn-success { background: linear-gradient(135deg, #10b981, #059669); border: none; color: #fff; box-shadow: 0 6px 18px rgba(16,185,129,.32); }
.btn-success:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 0 22px rgba(16,185,129,.5); }
.btn-outline-success { border-color: #10b981; color: #10b981; }
.btn-outline-danger { border-color: #f43f5e; color: #fb7185; }
.btn-danger { background: linear-gradient(135deg, #f43f5e, #e11d48); border: none; color: #fff; box-shadow: 0 6px 18px rgba(244,63,94,.32); }
.btn-danger:hover { color: #fff; box-shadow: 0 0 22px rgba(244,63,94,.5); }
.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: var(--ring); border-color: var(--accent);
}

/* ----------------------------------------------------------------- Badges */
.badge { font-weight: 600; padding: .42em .7em; border-radius: 7px; letter-spacing: .01em; }
.bg-success { background: #10b981 !important; }
.bg-secondary { background: #eceef4 !important; color: #5b6172 !important; }
.bg-info { background: #e0f2fe !important; color: #0369a1 !important; }
.bg-warning { background: #fef3c7 !important; color: #92400e !important; }
.bg-danger { background: #ffe4e6 !important; color: #be123c !important; }
.bg-primary { background: var(--accent) !important; }
.bg-dark { background: #1a1d29 !important; }
:root[data-theme="dark"] .bg-secondary { background: rgba(255,255,255,.09) !important; color: var(--ink-soft) !important; }
:root[data-theme="dark"] .bg-info { background: rgba(34,211,238,.15) !important; color: #7ee7ff !important; }
:root[data-theme="dark"] .bg-warning { background: rgba(245,158,11,.17) !important; color: #fcd34d !important; }
:root[data-theme="dark"] .bg-danger { background: rgba(244,63,94,.17) !important; color: #fda4af !important; }
:root[data-theme="dark"] .bg-success { background: rgba(16,185,129,.85) !important; }

/* ------------------------------------------------------------------ Forms */
.form-control, .form-select { border-radius: 10px; border-color: var(--line); padding: .55rem .8rem; background-color: var(--input-bg); color: var(--ink); }
.form-control:hover, .form-select:hover { border-color: var(--accent); }
.form-control::placeholder { color: var(--muted); }
.form-label { font-weight: 600; font-size: .84rem; color: var(--ink-soft); margin-bottom: .3rem; }
.form-text { color: var(--muted); }
/* Field grid that sizes to its container, not the viewport: Bootstrap's col-md-* breakpoints
   can't tell that the open guide panel has taken 424px, so a 4-up row would truncate its selects.
   Columns wrap as soon as the space is actually gone. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; align-items: start; }
.form-grid > .form-grid-span { grid-column: 1 / -1; }
/* ASP.NET renders the validation summary even when there is nothing to say; don't show an empty alert. */
.validation-summary-valid { display: none; }
:root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select {
    background-color: var(--input-bg); color: var(--ink); border-color: var(--line);
}
:root[data-theme="dark"] .form-control:disabled, :root[data-theme="dark"] .form-control[readonly] { background-color: rgba(255,255,255,.02); }
/* Light chevron for selects on dark surfaces. */
:root[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bfdbfe' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .form-check-input { background-color: rgba(255,255,255,.06); border-color: var(--line); }
.form-switch .form-check-input:checked, .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
:root[data-theme="dark"] .input-group-text { background: rgba(255,255,255,.05); border-color: var(--line); color: var(--ink-soft); }

/* ------------------------------------------------------------------ Alert */
.alert { border: none; border-radius: 12px; box-shadow: var(--shadow-sm); }
.alert-info { background: var(--grad-soft); color: var(--accent-600); }
:root[data-theme="dark"] .alert-info { color: #bcd3ff; }
:root[data-theme="dark"] .alert-success { background: rgba(16,185,129,.14); color: #6ee7b7; }
:root[data-theme="dark"] .alert-danger { background: rgba(244,63,94,.14); color: #fda4af; }
:root[data-theme="dark"] .alert-warning { background: rgba(245,158,11,.14); color: #fcd34d; }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

/* ---------------------------------------------- Bootstrap utility bridges (dark) */
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-body-secondary { color: var(--muted) !important; }
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-body,
:root[data-theme="dark"] .text-black { color: var(--ink) !important; }
:root[data-theme="dark"] .text-success { color: #34d399 !important; }
:root[data-theme="dark"] .text-primary { color: #60a5fa !important; }
:root[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
:root[data-theme="dark"] .text-danger { color: #fb7185 !important; }
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-body,
:root[data-theme="dark"] .bg-body-tertiary { background: var(--card) !important; color: var(--ink); }
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end { border-color: var(--line) !important; }
:root[data-theme="dark"] .border-primary-subtle { border-color: rgba(59,130,246,.48) !important; }
:root[data-theme="dark"] hr { border-color: var(--line); opacity: .6; }
:root[data-theme="dark"] .list-group-item { background: transparent; color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: #020817;
    --bs-dropdown-color: var(--ink);
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-link-color: var(--ink-soft);
    --bs-dropdown-link-hover-bg: rgba(255,255,255,.06);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-active-bg: var(--accent);
    box-shadow: var(--shadow-lg);
}
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .offcanvas {
    background: #020817; color: var(--ink); border: 1px solid var(--line);
}
:root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-footer { border-color: var(--line); }
:root[data-theme="dark"] .nav-tabs { --bs-nav-tabs-border-color: var(--line); }
:root[data-theme="dark"] .nav-tabs .nav-link { color: var(--ink-soft); }
:root[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--ink); background: var(--card-2); border-color: var(--line) var(--line) transparent; }
:root[data-theme="dark"] .page-link { background: var(--card); border-color: var(--line); color: var(--ink-soft); }
:root[data-theme="dark"] .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ------------------------------------------------------------ Store cards */
.store-card { background: linear-gradient(180deg, var(--card-2), var(--card)); }
.form-switch .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* ----------------------------------------------------------------- Mobile */
@media (max-width: 991.98px) {
    html.nav-pinned.nav-open .app-content { margin-left: 0; }
    html.nav-open .sidebar-backdrop { display: block; }
    .page { padding: 18px 16px 8px; }
    .topbar { padding: 12px 16px; }
}

/* ============================================================ Store preview
   A realistic mockup of an App Store / Google Play *web* product page, framed
   in a faux browser window so the listing can be reviewed (and screenshotted)
   before a build ships. It keeps its own fixed palette per store — dark for the
   App Store, light for Google Play — regardless of the admin dark/light theme.
   ========================================================================= */
.preview-stage {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.preview-stage .preview-note { flex: 1 1 240px; max-width: 300px; position: sticky; top: 16px; }
.store-page {
    flex: 1 1 620px;
    min-width: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 80px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
    border: 1px solid rgba(0,0,0,.35);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

/* Store-preview neutral palette — flips with the app theme so the mockup reads
   light in light mode and dark in dark mode, like the real store listings do.
   Only the surface/chrome/text/lines follow the theme; brand accents (the green
   hero, Play's install button and developer name) stay fixed below. */
.store-page {
    --st-chrome: #e3e4e8;
    --st-chrome-line: rgba(0,0,0,.12);
    --st-chrome-pill: #ffffff;
    --st-chrome-ink: #5f6368;
    --st-surface: #ffffff;
    --st-ink: #1d1d1f;
    --st-ink-2: #6e6e73;
    --st-ink-strong: #1d1d1f;
    --st-line: #e6e8ec;
    --st-hover: rgba(0,0,0,.04);
    --st-star-empty: #cfcfd6;
    --st-ph-bg: linear-gradient(160deg, #eff6ff, #e0f2fe);
    --st-ph-ink: #1d4ed8;
    --st-shot-border: #e6e8ec;
}
:root[data-theme="dark"] .store-page {
    --st-chrome: #242424;
    --st-chrome-line: rgba(0,0,0,.4);
    --st-chrome-pill: #0a0a0a;
    --st-chrome-ink: #bfbfbf;
    --st-surface: #000000;
    --st-ink: #ffffff;
    --st-ink-2: #a3a3a3;
    --st-ink-strong: #d4d4d4;
    --st-line: rgba(59,130,246,.20);
    --st-hover: rgba(37,99,235,.10);
    --st-star-empty: #525252;
    --st-ph-bg: linear-gradient(160deg, #050b18, #0b1d3a);
    --st-ph-ink: #93c5fd;
    --st-shot-border: rgba(59,130,246,.18);
}

/* Small branded app-icon chip beside the preview title */
.sp-toolbar-icon {
    width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
    overflow: hidden; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--hero-a, #0f172a), var(--hero-b, #020617));
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,.12);
    color: #fff; font-weight: 800; font-size: 1.25rem;
}
.sp-toolbar-icon img { width: 100%; height: 100%; object-fit: cover; }

/* Faux browser chrome */
.browser-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: var(--st-chrome);
    border-bottom: 1px solid var(--st-chrome-line);
}
.browser-bar .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.browser-bar .dot-r { background: #ff5f57; }
.browser-bar .dot-y { background: #febc2e; }
.browser-bar .dot-g { background: #28c840; }
.url-pill {
    display: flex; align-items: center; gap: 7px;
    margin-left: 10px; flex: 1 1 auto; max-width: 520px;
    background: var(--st-chrome-pill); color: var(--st-chrome-ink);
    border-radius: 8px; padding: 6px 12px;
    font-size: .8rem; overflow: hidden; white-space: nowrap;
}
.url-pill svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: .7; }
.url-pill span { overflow: hidden; text-overflow: ellipsis; }

/* Scroll body — surface follows the app theme (see --st-* palette above) */
.store-scroll {
    height: 760px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    background: var(--st-surface); color: var(--st-ink);
}
.store-scroll::-webkit-scrollbar { width: 10px; }
.store-scroll::-webkit-scrollbar-thumb { background: rgba(128,128,128,.4); border-radius: 8px; }

/* Hero */
.sp-hero {
    display: flex; gap: 26px; align-items: center;
    padding: 40px 40px 34px;
    position: relative;
}
.store-apple .sp-hero {
    background:
        radial-gradient(90% 120% at 12% -12%, rgba(255,255,255,.30), transparent 48%),
        radial-gradient(70% 120% at 102% 0%, rgba(255,255,255,.10), transparent 55%),
        linear-gradient(150deg, var(--hero-a), var(--hero-b));
    color: #fff;
    padding: 48px 44px 40px;
}
.store-apple .sp-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.30));
}
.store-apple .sp-hero > * { position: relative; z-index: 1; }
.store-google .sp-hero { padding-bottom: 20px; }
.sp-icon {
    width: 134px; height: 134px; border-radius: 30px; flex: 0 0 auto;
    overflow: hidden; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
    box-shadow: 0 16px 38px -8px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.22),
        0 0 0 5px rgba(255,255,255,.06);
}
.sp-icon img { width: 100%; height: 100%; object-fit: cover; }
.store-google .sp-icon { width: 74px; height: 74px; border-radius: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.icon-fallback { color: #fff; font-size: 3rem; font-weight: 800; }
.sp-hero-meta { min-width: 0; flex: 1; }
.store-google .sp-hero-meta { display: flex; flex-direction: column; }
.sp-title { font-size: 2.2rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.08; margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,.22); }
/* The hero sets color:#fff, but the global h1–h6 { color: var(--ink) } rule matches
   the <h2> directly and beats that inherited white — which reads dark in light mode.
   Pin it back to white (Google gets its own dark color just below). */
.store-apple .sp-title { color: #fff; }
.store-google .sp-title { font-size: 1.6rem; color: var(--st-ink); text-shadow: none; }
.sp-subtitle { font-size: 1.05rem; margin-top: 6px; opacity: .92; }
.store-google .sp-subtitle { color: var(--st-ink-2); opacity: 1; font-size: .95rem; }
.sp-dev { margin-top: 8px; font-size: .9rem; opacity: .8; }
.store-google .sp-dev { color: #01875f; font-weight: 600; opacity: 1; order: -1; margin: 0 0 2px; }
.sp-hero-cta { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.sp-price { font-size: .95rem; font-weight: 600; opacity: .95; }
.store-google .sp-price { display: none; }
.sp-share {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.16); color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 999px; padding: 7px 18px; font-weight: 600; font-size: .9rem;
    cursor: default; backdrop-filter: blur(6px);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.sp-share:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.65); transform: translateY(-1px); }
.sp-share svg { width: 15px; height: 15px; }
.sp-install {
    background: #01875f; color: #fff; border: 0; border-radius: 8px;
    padding: 10px 46px; font-weight: 600; font-size: .95rem; cursor: default;
}

/* Stat strip */
.sp-stats {
    display: flex; align-items: stretch;
    padding: 18px 8px; overflow-x: auto;
    border-top: 1px solid var(--st-line); border-bottom: 1px solid var(--st-line);
}
.store-google .sp-stats { padding: 14px 8px; }
.sp-stat {
    flex: 1 0 auto; min-width: 92px; text-align: center; padding: 6px 18px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
    position: relative; border-radius: 12px; transition: background .2s ease;
}
.sp-stat:hover { background: var(--st-hover); }
.sp-stat + .sp-stat::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
    background: var(--st-line);
}
.sp-stat-label {
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--st-ink-2);
}
.sp-stat-value { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; line-height: 1; color: var(--st-ink-strong); }
.store-google .sp-stat-value { display: flex; align-items: center; gap: 3px; }
.sp-stat-value-sm { font-size: .8rem; font-weight: 700; line-height: 1.05; }
.sp-stat-icon { color: var(--st-ink-2); }
.sp-stat-icon svg { width: 22px; height: 22px; opacity: .75; }
.sp-stat-sub { font-size: .7rem; opacity: .7; max-width: 120px; color: var(--st-ink-2); }
.sp-star-inline { color: var(--st-ink-strong); font-size: .9rem; }
.sp-unit { font-size: .7rem; font-weight: 600; margin-left: 2px; }
.star { font-size: .78rem; color: var(--st-star-empty); }
.star.full { color: var(--star); }
.star.half { background: linear-gradient(90deg, var(--star) 50%, var(--st-star-empty) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Screenshot rail */
.sp-gallery {
    background: var(--st-surface);
    border-bottom: 1px solid var(--st-line);
}
.sp-shots {
    display: flex; gap: 18px; padding: 32px 44px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
.sp-shots::-webkit-scrollbar { height: 8px; }
.sp-shots::-webkit-scrollbar-thumb { background: rgba(128,128,128,.35); border-radius: 8px; }
.store-google .sp-shots { padding: 24px 28px; }
.sp-shot {
    flex: 0 0 auto; width: 244px; height: 528px; border-radius: 28px;
    overflow: hidden; scroll-snap-align: start;
    box-shadow: 0 22px 46px -14px rgba(0,0,0,.6);
    border: 1px solid var(--st-shot-border);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.sp-shot:hover { transform: translateY(-7px); box-shadow: 0 32px 60px -14px rgba(0,0,0,.65); }
.store-google .sp-shot {
    width: 204px; height: 392px; border-radius: 14px;
    box-shadow: 0 6px 20px -6px rgba(0,0,0,.25);
}
.sp-shot img { width: 100%; height: 100%; object-fit: cover; }
.sp-device-label {
    display: flex; align-items: center; gap: 8px;
    padding: 0 44px 26px;
    color: var(--st-ink-2); font-size: .86rem; font-weight: 650;
}
.sp-device-label svg { width: 16px; height: 16px; }

/* AIM's cream-and-green panels need a contrasting showcase surface. The tighter
   four-up scale matches the real App Store web gallery: complete cards are easy
   to compare at a glance and the next slide still peeks into view. */
.aim-story-preview .sp-gallery-story {
    background:
        radial-gradient(75% 115% at 8% 0%, rgba(74, 125, 96, .28), transparent 62%),
        linear-gradient(180deg, #14251d 0%, #0b1510 100%);
    border-color: rgba(255,255,255,.08);
}
.aim-story-preview .sp-shots-story {
    gap: 16px;
    -webkit-mask-image: none;
            mask-image: none;
    padding: 30px 32px 20px;
    scroll-padding-inline: 32px;
}
.aim-story-preview.store-google .sp-shots-story { padding: 24px 28px; }
.aim-story-preview .sp-shots-story .sp-shot {
    width: 210px;
    height: 455px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    box-shadow: 0 20px 42px -16px rgba(0,0,0,.82);
}
.aim-story-preview.store-google .sp-shots-story .sp-shot {
    width: 204px;
    height: 442px;
    border-radius: 14px;
    box-shadow: 0 6px 20px -6px rgba(0,0,0,.25);
}
.aim-story-preview .sp-gallery-story .sp-device-label {
    padding: 0 32px 24px;
    color: rgba(255,255,255,.72);
}
.sp-shot-ph {
    position: relative; display: grid; place-items: center;
    background: var(--st-ph-bg);
    color: var(--st-ph-ink); font-weight: 600; font-size: .9rem;
}
.sp-shot-ph .ph-glow { position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 25%, rgba(59,130,246,.28), transparent 70%); }
.sp-shot-ph span { position: relative; z-index: 1; }

/* Text sections */
.sp-promo { padding: 6px 40px 0; font-size: 1.05rem; font-weight: 600; }
.store-google .sp-promo { padding: 6px 24px 0; }
.sp-section { padding: 26px 40px; }
.store-google .sp-section { padding: 22px 24px; }
.sp-section + .sp-section { border-top: 1px solid var(--st-line); }
/* <h3> — pin to the store surface's ink so the global h1–h6 { color: var(--ink) }
   rule can't override it (same guard as .sp-title). */
.sp-section-head { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; color: var(--st-ink); }
.store-google .sp-section-head { font-size: 1.1rem; }
.sp-section-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sp-ver { font-size: .85rem; font-weight: 600; color: var(--sp-accent); }
.sp-short { font-weight: 600; margin: 0 0 10px; }
.sp-desc { font-size: .98rem; line-height: 1.6; white-space: pre-line; opacity: .9; }
.store-google .sp-desc { opacity: 1; }

/* Information grid */
.sp-info { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.sp-info > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--st-line); }
.sp-info dt { font-weight: 400; opacity: .6; margin: 0; }
.sp-info dd { margin: 0; text-align: right; font-weight: 600; }

.sp-footer { padding: 20px 40px 40px; font-size: .72rem; opacity: .45; word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
    .sp-shot, .sp-share, .sp-stat { transition: none; }
    .sp-shot:hover, .sp-share:hover { transform: none; }
    .sp-shots { scroll-behavior: auto; }
}

/* Edit-form image thumbnails */
.icon-thumb {
    width: 56px; height: 56px; border-radius: 14px; flex: 0 0 auto;
    overflow: hidden; background: var(--grad); display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: 1.4rem; box-shadow: var(--shadow-sm);
}
.icon-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shot-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.shot-thumbs img {
    width: 54px; height: 96px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}

@media (max-width: 991.98px) {
    .preview-stage .preview-note { position: static; max-width: 100%; flex-basis: 100%; }
    .sp-hero { flex-direction: column; text-align: center; align-items: center; }
    .sp-hero-cta { justify-content: center; }
    .sp-info { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .sp-hero, .sp-section, .sp-shots, .sp-promo, .sp-footer { padding-left: 20px; padding-right: 20px; }
}

/* Demo Lab — intentionally distinct from operational screens so simulated actions are unmistakable. */
.demo-lab { --demo-violet: #7c3aed; --demo-cyan: #22d3ee; --demo-green: #34d399; padding-bottom: 36px; }
.demo-hero {
    position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
    gap: 36px; align-items: center; margin: 10px 0 22px; padding: clamp(28px, 5vw, 58px);
    border: 1px solid rgba(139,92,246,.3); border-radius: 26px; color: #fff;
    background:
        radial-gradient(600px 320px at 90% -10%, rgba(34,211,238,.24), transparent 65%),
        radial-gradient(540px 340px at 15% 110%, rgba(124,58,237,.38), transparent 70%),
        linear-gradient(135deg, #100d22 0%, #17122f 52%, #0b1f2b 100%);
    box-shadow: 0 28px 70px -35px rgba(76,29,149,.85);
}
.demo-hero::after {
    content: ""; position: absolute; width: 300px; height: 300px; right: 28%; top: -220px;
    border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255,255,255,.025), 0 0 0 100px rgba(255,255,255,.015);
}
.demo-hero h1 { color: #fff; font: 500 clamp(2.2rem, 5vw, 4.35rem)/.98 "DM Serif Display", serif; letter-spacing: -.045em; margin: 12px 0 18px; }
.demo-hero h1 em { color: #a5f3fc; font-style: italic; }
.demo-hero > div:first-child { position: relative; z-index: 1; max-width: 850px; }
.demo-hero > div:first-child > p { max-width: 650px; color: rgba(255,255,255,.7); font-size: 1.03rem; margin-bottom: 24px; }
.demo-hero a.btn-light { color: #17122f; }
.demo-eyebrow { display: flex; align-items: center; gap: 9px; color: #c4b5fd; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800; }
.demo-eyebrow span { width: 9px; height: 9px; border-radius: 50%; background: var(--demo-green); box-shadow: 0 0 14px var(--demo-green); }
.demo-ready-pill { align-self: center; color: #a7f3d0; border: 1px solid rgba(52,211,153,.28); background: rgba(52,211,153,.1); border-radius: 999px; padding: 10px 14px; font-size: .82rem; }
.demo-safety-card { position: relative; z-index: 1; padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: rgba(255,255,255,.065); backdrop-filter: blur(18px); }
.demo-safety-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 16px; border-radius: 11px; color: #0b1f2b; background: #a5f3fc; font-size: 1.4rem; font-weight: 900; }
.demo-safety-card > strong { display: block; font-size: 1rem; }
.demo-safety-card > p { color: rgba(255,255,255,.62); font-size: .8rem; line-height: 1.55; margin: 7px 0 17px; }
.demo-safety-card dl { margin: 0; }
.demo-safety-card dl div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.09); font-size: .73rem; }
.demo-safety-card dt { color: rgba(255,255,255,.5); font-weight: 500; }
.demo-safety-card dd { margin: 0; color: #a7f3d0; font-weight: 700; }
.demo-journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.demo-step { display: flex; gap: 11px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); opacity: .62; }
.demo-step > span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; font-size: .76rem; font-weight: 800; }
.demo-step strong, .demo-step small { display: block; }
.demo-step strong { font-size: .82rem; color: var(--ink); }
.demo-step small { color: var(--muted); font-size: .69rem; }
.demo-step.is-active { opacity: 1; border-color: rgba(124,58,237,.5); box-shadow: inset 3px 0 var(--demo-violet); }
.demo-step.is-complete { opacity: 1; }
.demo-step.is-complete > span { color: #052e24; background: var(--demo-green); border-color: var(--demo-green); }
.demo-panel { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.demo-panel-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 22px; }
.demo-panel-head.compact { margin-bottom: 16px; }
.demo-panel h2 { margin: 4px 0 3px; font-size: 1.12rem; letter-spacing: -.02em; }
.demo-panel-head p { margin: 0; max-width: 580px; color: var(--muted); font-size: .79rem; }
.demo-panel-number { color: var(--demo-violet); text-transform: uppercase; letter-spacing: .13em; font-size: .66rem; font-weight: 850; }
.demo-empty { padding: 28px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; font-size: .82rem; }
.demo-store-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.demo-store-card { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface) 94%, var(--demo-violet)); }
.demo-store-card h3 { margin: 18px 0 2px; font-size: .95rem; }
.demo-store-card code { color: var(--muted); font-size: .68rem; }
.demo-store-badge { padding: 5px 8px; border-radius: 6px; font-size: .64rem; font-weight: 800; }
.demo-store-badge.apple { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.demo-store-badge.play { color: #6ee7b7; background: rgba(52,211,153,.13); }
.demo-price { margin-top: 16px; font-size: 1.55rem; font-weight: 800; color: var(--ink); letter-spacing: -.04em; }
.demo-price small { color: var(--muted); font-size: .68rem; font-weight: 500; letter-spacing: 0; }
.demo-offer-line { display: flex; justify-content: space-between; gap: 8px; margin: 13px 0 10px; padding: 10px; border-radius: 9px; background: rgba(124,58,237,.09); font-size: .69rem; }
.demo-offer-line span { color: var(--demo-violet); font-weight: 800; }
.demo-simulator { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; align-items: end; }
.demo-simulator label { margin-bottom: 5px; color: var(--muted); font-size: .69rem; font-weight: 700; }
.demo-simulator .btn { min-height: 38px; }
.demo-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--line); }
.demo-metrics > div { padding: 12px; border-radius: 11px; background: color-mix(in srgb, var(--surface) 94%, var(--ink)); }
.demo-metrics small, .demo-metrics strong { display: block; }
.demo-metrics small { color: var(--muted); font-size: .65rem; }
.demo-metrics strong { margin-top: 3px; color: var(--ink); font-size: 1.05rem; }
.demo-profile { text-align: center; }
.demo-avatar { display: grid; place-items: center; width: 74px; height: 74px; margin: 14px auto 12px; border-radius: 24px; color: #fff; background: linear-gradient(145deg, #8b5cf6, #0891b2); box-shadow: 0 15px 34px -15px #7c3aed; font-size: 1.15rem; font-weight: 800; transform: rotate(-3deg); }
.demo-profile h2 { font-size: 1.35rem; margin-bottom: 0; }
.demo-handle { color: var(--demo-violet); font-size: .8rem; font-weight: 700; }
.demo-profile > p { color: var(--muted); font-size: .76rem; margin: 9px auto 17px; }
.demo-profile-stats { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 17px; }
.demo-profile-stats > div + div { border-left: 1px solid var(--line); }
.demo-profile-stats strong, .demo-profile-stats small { display: block; }
.demo-profile-stats strong { color: var(--ink); font-size: .9rem; }
.demo-profile-stats small { color: var(--muted); font-size: .6rem; }
.demo-code { padding: 15px; border: 1px dashed rgba(124,58,237,.45); border-radius: 13px; background: rgba(124,58,237,.06); text-align: left; }
.demo-code small, .demo-code strong, .demo-code span { display: block; }
.demo-code small { color: var(--muted); font-size: .61rem; text-transform: uppercase; letter-spacing: .08em; }
.demo-code strong { color: var(--demo-violet); font-size: 1.15rem; letter-spacing: .08em; }
.demo-code span { color: var(--muted); font-size: .68rem; }
.demo-bank { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 12px; border-radius: 12px; background: rgba(52,211,153,.08); text-align: left; }
.demo-bank > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #052e24; background: var(--demo-green); font-weight: 900; }
.demo-bank div { min-width: 0; flex: 1; }
.demo-bank strong, .demo-bank small { display: block; font-size: .7rem; }
.demo-bank small { color: var(--muted); }
.demo-bank em { color: #059669; font-size: .63rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
.demo-payout-flow > div { display: grid; grid-template-columns: 29px minmax(0,1fr) auto; gap: 10px; align-items: center; position: relative; min-height: 55px; }
.demo-payout-flow > div:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 42px; bottom: -12px; width: 1px; background: var(--line); }
.demo-payout-flow > div > span { display: grid; place-items: center; position: relative; z-index: 1; width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: .68rem; font-weight: 800; }
.demo-payout-flow > div.done > span { color: #052e24; background: var(--demo-green); border-color: var(--demo-green); }
.demo-payout-flow strong, .demo-payout-flow small { display: block; }
.demo-payout-flow strong { color: var(--ink); font-size: .76rem; }
.demo-payout-flow small { max-width: 220px; overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.demo-payout-flow button { padding: 5px 8px; border: 1px solid rgba(124,58,237,.35); border-radius: 7px; color: var(--demo-violet); background: rgba(124,58,237,.07); font-size: .63rem; font-weight: 800; }
.demo-paid { display: flex; align-items: center; gap: 11px; margin-top: 17px; padding: 14px; border: 1px solid rgba(52,211,153,.28); border-radius: 12px; background: rgba(52,211,153,.08); }
.demo-paid > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #052e24; background: var(--demo-green); font-weight: 900; }
.demo-paid strong, .demo-paid small { display: block; }
.demo-paid strong { color: var(--ink); font-size: .78rem; }
.demo-paid small { color: var(--muted); font-size: .65rem; }
.demo-event-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--muted); }
.demo-event-dot.install { background: var(--demo-cyan); }
.demo-event-dot.purchase { background: var(--demo-green); }

@media (max-width: 899.98px) {
    .demo-hero { grid-template-columns: 1fr; }
    .demo-journey { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 599.98px) {
    .demo-journey, .demo-store-grid, .demo-metrics { grid-template-columns: 1fr 1fr; }
    .demo-simulator { grid-template-columns: 1fr 1fr; }
    .demo-panel-head { flex-direction: column; }
}

/* ===========================================================================
   Floating page guide
   A non-modal helper pinned bottom-right on every internal page. Non-modal and
   backdrop-free on purpose: the job is to be read WHILE the form behind it is
   filled in, so the page underneath stays fully usable with the panel open.
   =========================================================================== */
.guide { position: fixed; right: 18px; bottom: 18px; z-index: 1045; }

/* Open panel docks rather than covers: the page reflows out from under it, so a step can be read
   while the form it describes is filled in. Below this width the panel is a bottom sheet instead
   and there is no room to reflow, so the page is left alone. */
@media (min-width: 992px) {
    html.guide-open .app-content { padding-right: 424px; }
}
.app-content { transition: margin-left .28s cubic-bezier(.4, 0, .2, 1), padding-right .2s ease; }

.guide-launcher {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 16px 10px 11px; border: none; border-radius: 999px;
    background: var(--grad); color: #fff; font-size: .78rem; font-weight: 800;
    box-shadow: var(--glow-accent); cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}
.guide-launcher:hover { transform: translateY(-1px); filter: brightness(1.08); }
.guide-launcher:focus-visible { outline: none; box-shadow: var(--ring), var(--glow-accent); }
.guide-launcher-mark {
    display: grid; place-items: center; width: 22px; height: 22px;
    border-radius: 50%; background: rgba(255,255,255,.22); font-size: .82rem; font-weight: 900;
}
/* First-ever visit only: a novice has to notice the button exists at all. */
.guide-launcher.is-new { animation: guide-nudge 2.6s ease-in-out 3; }
@keyframes guide-nudge {
    0%, 88%, 100% { transform: none; }
    92% { transform: translateY(-4px); }
    96% { transform: translateY(-2px); }
}

.guide-panel {
    display: flex; flex-direction: column;
    position: absolute; right: 0; bottom: calc(100% + 12px);
    width: min(400px, calc(100vw - 36px)); max-height: min(72vh, 640px);
    border: 1px solid var(--card-border); border-radius: var(--radius);
    background: var(--card); box-shadow: var(--shadow-lg); overflow: hidden;
}
.guide-panel[hidden] { display: none; }

.guide-head { display: flex; gap: 10px; align-items: flex-start; padding: 15px 15px 11px; border-bottom: 1px solid var(--line); }
.guide-title { margin: 0; color: var(--ink); font-size: .95rem; font-weight: 800; }
.guide-title:focus-visible { outline: none; }
.guide-purpose { margin: 5px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.guide-close {
    flex: none; width: 28px; height: 28px; margin-left: auto; padding: 0;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--card-2); color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.guide-close:hover { color: var(--ink); border-color: var(--accent); }

.guide-tabs { display: flex; gap: 4px; padding: 9px 12px 0; border-bottom: 1px solid var(--line); }
.guide-tab {
    padding: 7px 12px; border: none; border-bottom: 2px solid transparent;
    background: none; color: var(--muted); font-size: .73rem; font-weight: 700; cursor: pointer;
}
.guide-tab:hover { color: var(--ink); }
.guide-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.guide-body { flex: 1; padding: 13px 15px; overflow-y: auto; }
.guide-loading { margin: 6px 0; color: var(--muted); font-size: .72rem; }

.guide-steps, .guide-journey { margin: 0; padding: 0; list-style: none; }
.guide-step, .guide-journey > li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.guide-step:last-child, .guide-journey > li:last-child { border-bottom: none; }

.guide-step-check { flex: none; margin: 0; cursor: pointer; }
.guide-step-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.guide-step-num {
    display: grid; place-items: center; width: 22px; height: 22px;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--card-2); color: var(--muted); font-size: .68rem; font-weight: 800;
}
.guide-step-check input:focus-visible + .guide-step-num { box-shadow: var(--ring); }
/* The number is replaced by a tick rather than sitting beside one. */
.guide-step.is-done .guide-step-num { border-color: transparent; background: var(--accent); font-size: 0; }
.guide-step.is-done .guide-step-num::after { content: "✓"; color: #fff; font-size: .74rem; }
.guide-step.is-done .guide-step-title, .guide-step.is-done .guide-step-text { opacity: .55; }

.guide-step-body, .guide-journey-body { display: flex; flex-direction: column; gap: 3px; }
.guide-step-title, .guide-journey-title { color: var(--ink); font-size: .76rem; font-weight: 700; }
.guide-step-text, .guide-journey-detail { color: var(--ink-soft); font-size: .72rem; line-height: 1.55; }
.guide-step-tip {
    margin-top: 3px; padding: 7px 9px; border-left: 2px solid var(--accent);
    border-radius: 0 7px 7px 0; background: var(--grad-soft);
    color: var(--ink-soft); font-size: .69rem; line-height: 1.5;
}
.guide-step-link, .guide-journey-link { margin-top: 3px; color: var(--accent); font-size: .7rem; font-weight: 700; }

.guide-reset {
    margin-top: 11px; padding: 0; border: none;
    background: none; color: var(--muted); font-size: .68rem; text-decoration: underline; cursor: pointer;
}
.guide-reset:hover { color: var(--ink); }

.guide-journey-head { margin-bottom: 11px; }
.guide-journey-app { color: var(--ink); font-size: .76rem; font-weight: 800; }
.guide-journey-count { margin-left: 7px; color: var(--muted); font-size: .68rem; }
.guide-progress { height: 5px; margin-top: 7px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.guide-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--grad); }
.guide-journey-done { margin: 0 0 10px; color: var(--ink-soft); font-size: .72rem; }

.guide-journey-mark {
    display: grid; place-items: center; flex: none; width: 22px; height: 22px;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--card-2); color: var(--muted); font-size: .68rem; font-weight: 800;
}
.guide-journey > li.is-done .guide-journey-mark { border-color: transparent; background: var(--accent); color: #fff; }
.guide-journey > li.is-done .guide-journey-title, .guide-journey > li.is-done .guide-journey-detail { opacity: .6; }
.guide-journey > li.is-next .guide-journey-mark { border-color: var(--accent); color: var(--accent); }
.guide-badge-next {
    margin-left: 7px; padding: 1px 7px; border-radius: 999px;
    background: var(--grad); color: #fff; font-size: .58rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px;
}

.guide-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 15px; border-top: 1px solid var(--line); background: var(--card-2);
}
.guide-foot a { font-size: .7rem; font-weight: 700; }
.guide-foot-hint { color: var(--muted); font-size: .65rem; }

/* Below the sidebar breakpoint the panel becomes a bottom sheet, so it never
   crowds a narrow page or sits under the mobile navigation. */
@media (max-width: 599.98px) {
    .guide { right: 12px; bottom: 12px; left: 12px; }
    .guide-launcher { margin-left: auto; }
    .guide-panel { right: 0; left: 0; width: auto; max-height: 78vh; }
}

@media (prefers-reduced-motion: reduce) {
    .guide-launcher, .guide-launcher.is-new { transition: none; animation: none; }
}

/* ---------------------------------------------------------- Busy indicator */
/* Shown by site.js while a submit or a button-style navigation is in flight. The bar and pill
   sit above everything but never intercept clicks, so a hung request still leaves the page usable. */
.app-busy { position: fixed; inset: 0; z-index: 3000; pointer-events: none; display: none; }
html.is-busy .app-busy { display: block; }
html.is-busy, html.is-busy body { cursor: progress; }

.app-busy-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--blue-bright) 30%, var(--blue-electric) 50%, var(--blue-bright) 70%, transparent 100%);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: app-busy-slide 1.1s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(56,189,248,.7);
}
@keyframes app-busy-slide {
    from { background-position: -100% 0; }
    to   { background-position: 200% 0; }
}

.app-busy-pill {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 10px; border-radius: 999px;
    background: var(--card); color: var(--ink); border: 1px solid var(--card-border);
    box-shadow: var(--shadow-lg);
    font-size: .78rem; font-weight: 700; letter-spacing: -0.01em;
    opacity: 0; animation: app-busy-fade .18s ease .25s forwards;
}
/* The pill waits a beat before appearing so a fast page never flashes it. */
@keyframes app-busy-fade { to { opacity: 1; } }

.app-busy-spinner, .is-busy-btn::after {
    width: 14px; height: 14px; flex: none; border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    animation: app-busy-spin .7s linear infinite;
}
@keyframes app-busy-spin { to { transform: rotate(360deg); } }

/* The control that was clicked shows its own spinner and refuses a second click. */
.is-busy-btn { position: relative; pointer-events: none; opacity: .75; cursor: progress; }
.is-busy-btn::after { content: ""; display: inline-block; margin-left: 8px; vertical-align: -2px; }
/* The store-sync button already spins its own icon. */
.is-busy-btn.store-sync-btn::after { display: none; }
.is-busy-btn.store-sync-btn { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .app-busy-bar { animation: none; background: var(--blue-electric); background-size: auto; }
    .app-busy-pill { animation: none; opacity: 1; }
}