@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/SpaceGrotesk-Variable.woff2") format("woff2");
}
/* ───── MarginMetric Design System ───── */

:root {
    /* Brand */
    --sw-brand: #059669;
    --sw-brand-light: #10b981;
    --sw-brand-dark: #047857;
    --sw-brand-bg: #ecfdf5;
    --sw-brand-ink: #064e3b;
    --sw-gradient-hero: linear-gradient(135deg, #047857, #059669 45%, #34d399);
    --sw-gradient-cta: linear-gradient(135deg, #047857, #10b981);
    --sw-gradient-card: linear-gradient(135deg, rgba(4, 120, 87, 0.12), rgba(16, 185, 129, 0.06));

    /* Semantic */
    --sw-profit: #16a34a;
    --sw-profit-bg: #f0fdf4;
    --sw-loss: #dc2626;
    --sw-loss-bg: #fef2f2;
    --sw-warning: #d97706;
    --sw-warning-bg: #fffbeb;

    /* Data visualization */
    --sw-chart-slice-1: #059669;
    --sw-chart-slice-2: #0d9488;
    --sw-chart-slice-3: #2563eb;
    --sw-chart-slice-4: #f59e0b;
    --sw-chart-slice-5: #ef4444;
    --sw-chart-slice-6: #7c3aed;
    --sw-chart-slice-7: #db2777;
    --sw-chart-slice-8: #06b6d4;
    --sw-chart-slice-9: #64748b;

    /* Neutrals */
    --sw-bg-page: #f6f8fb;
    --sw-bg-card: #ffffff;
    --sw-bg-sidebar: #0b1f18;
    --sw-bg-sidebar-hover: #123126;
    --sw-bg-sidebar-active: var(--sw-brand);
    --sw-bg-header: #ffffff;
    --sw-bg-input: #ffffff;
    --sw-text-primary: #172033;
    --sw-text-secondary: #667085;
    --sw-text-muted: #6b7280; /* >=4.5:1 on white — muted text is still body copy */
    --sw-text-sidebar: #9ca3af;
    --sw-text-sidebar-active: #ffffff;
    --sw-border: #e4e7ec;
    --sw-border-light: #f0f1f3;

    /* Spacing */
    --sw-radius-sm: 8px;
    --sw-radius-md: 12px;
    --sw-radius-lg: 16px;
    --sw-radius-pill: 999px;
    --sw-radius: var(--sw-radius-md);
    --sw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --sw-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
    --sw-shadow-lg: 0 18px 40px rgba(16, 24, 40, 0.14);
    --sw-shadow-brand: 0 14px 30px rgba(5, 150, 105, 0.28);

    /* Landing-match surface tokens */
    --sw-radius-xl: 20px;
    --sw-shadow-float: 0 20px 45px rgba(12, 18, 28, 0.08);
    --sw-card-glass: rgba(255, 255, 255, 0.78);
    --sw-card-border-glass: rgba(16, 24, 40, 0.08);
    --sw-header-glass: rgba(255, 255, 255, 0.82);
    --sw-bg-shell:
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.22), transparent 30%),
        radial-gradient(circle at top right, rgba(5, 150, 105, 0.18), transparent 28%),
        linear-gradient(180deg, #f7fffb 0%, #f6f8fb 42%, #eefbf4 100%);
    --sw-shell-dot: rgba(4, 120, 87, 0.2);
    --sw-shell-dot-size: 22px 22px;
    --sw-shell-dot-opacity: 0.58;
    --sw-shell-dot-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.78) 46%, rgba(0, 0, 0, 0.22) 84%, transparent 100%);

    /* Layout */
    --sw-sidebar-width: 240px;
    --sw-header-height: 52px;
    --sw-tabbar-height: 64px;
    --sw-shell-header-mobile-height: 3.25rem;
    --sw-shell-header-mobile-brand-height: 2.125rem;
    --sw-shell-header-mobile-control-height: 2.125rem;
    --sw-shell-header-mobile-bottom-inset: 0.5625rem;
    --sw-shell-header-mobile-inline-inset: 1rem;

    /* Shared page rhythm: Welcome, Identity, and the app all start content on
       the same mobile beat, while dense dashboard sections use one gap source. */
    --sw-space-page-top: 0.75rem;
    --sw-space-page-top-mobile: 0.5rem;
    --sw-space-page-inline: 1.5rem;
    --sw-space-page-inline-mobile: 1rem;
    --sw-space-page-header-gap: 0.5rem;
    --sw-space-page-header-gap-mobile: 0.375rem;
    --sw-space-section: 1.25rem;
    --sw-space-section-mobile: 1rem;
    --sw-space-section-header: 0.625rem;
    --sw-space-section-header-mobile: 0.5rem;
    --sw-space-section-major: 3rem;
    --sw-space-section-major-mobile: 2.25rem;

    /* Font */
    --sw-font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sw-font-numeric: "Space Grotesk", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sw-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Motion primitives: durations, intent-specific easing, and restrained
       travel distances stay centralized so app surfaces move as one system. */
    --sw-motion-duration-fast: 140ms;
    --sw-motion-duration-standard: 220ms;
    --sw-motion-duration-slow: 320ms;
    --sw-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --sw-motion-easing-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --sw-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
    --sw-motion-distance-sm: 0.25rem;
    --sw-motion-distance-md: 0.5rem;
    --sw-transition-fast: var(--sw-motion-duration-fast) var(--sw-motion-easing-standard);
    --sw-transition-smooth: var(--sw-motion-duration-standard) var(--sw-motion-easing-standard);
    --sw-transition-spring: var(--sw-motion-duration-slow) var(--sw-motion-easing-enter);
    --sw-transition-theme-duration: 260ms;
    --sw-transition-theme-easing: ease;
    --sw-transition-theme: var(--sw-transition-theme-duration) var(--sw-transition-theme-easing);

    /* Added in Phase 9 Slice 1 */
    --sw-bg-subtle: #f3f4f6;
    --sw-bg-table-header: #f9fafb;
    --sw-sidebar-section: #9ca3af; /* >=4.5:1 on the #111827 sidebar */
    --sw-text-sidebar-hover: #e5e7eb;
    --sw-sidebar-divider: rgba(255, 255, 255, 0.08);
}

/* ───── Base ───── */

html,
body {
    font-family: var(--sw-font);
    background-color: var(--sw-bg-page);
    color: var(--sw-text-primary);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--sw-brand);
}

a:hover {
    color: var(--sw-brand-dark);
}

h1,
h2,
h3,
h4,
h5,
h6,
.sw-page-header h2,
.metric-card-value,
.sw-profit-metric-primary,
.welcome-card h5,
.welcome-card-eyebrow,
.marginmetric-sidebar-brand a {
    font-family: var(--sw-font-display);
}

.metric-card-value,
.sw-profit-metric-primary,
.sw-profit-sub-metric-value,
.sw-profit-detail-value,
.sw-profit-cost-amount,
.sw-profit-mobile-sticky,
.metric-card-sub,
.welcome-card-summary-item strong {
    font-variant-numeric: tabular-nums;
}

/* ───── Layout Shell ───── */

.marginmetric-layout {
    display: flex;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: clip;
}

.marginmetric-layout[data-ui-theme="classic-green"] {
    --sw-brand: #059669;
    --sw-brand-light: #34d399;
    --sw-brand-dark: #047857;
    --sw-gradient-hero: linear-gradient(135deg, #065f46, #059669 48%, #34d399);
    --sw-gradient-cta: linear-gradient(135deg, #047857, #10b981);
    --sw-shadow-brand: 0 16px 36px rgba(16, 185, 129, 0.24);
}

.marginmetric-layout[data-ui-theme="dark-pro"] {
    --sw-brand: #34d399;
    --sw-brand-light: #6ee7b7;
    --sw-brand-dark: #10b981;
    --sw-gradient-hero: linear-gradient(135deg, #0f172a, #065f46 45%, #10b981 95%);
    --sw-gradient-cta: linear-gradient(135deg, #065f46, #10b981);
    --sw-shadow-brand: 0 18px 44px rgba(16, 185, 129, 0.28);
}

.marginmetric-layout[data-density="compact"] {
    --sw-header-height: 4.15rem;
}

.marginmetric-layout[data-density="dense"] {
    --sw-header-height: 3.75rem;
}

.marginmetric-layout[data-density="compact"] .sw-card-body,
.marginmetric-layout[data-density="compact"] .sw-card-header,
.marginmetric-layout[data-density="compact"] .sw-settings-collapsible-summary,
.marginmetric-layout[data-density="compact"] .sw-settings-collapsible-panel {
    padding-left: 1rem;
    padding-right: 1rem;
}

.marginmetric-layout[data-density="dense"] .sw-card-body,
.marginmetric-layout[data-density="dense"] .sw-card-header,
.marginmetric-layout[data-density="dense"] .sw-settings-collapsible-summary,
.marginmetric-layout[data-density="dense"] .sw-settings-collapsible-panel {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

.marginmetric-layout[data-density="compact"] .marginmetric-nav a,
.marginmetric-layout[data-density="compact"] .quick-action-btn,
.marginmetric-layout[data-density="compact"] .marginmetric-mobile-tabbar-item {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.marginmetric-layout[data-density="dense"] .marginmetric-nav a,
.marginmetric-layout[data-density="dense"] .quick-action-btn,
.marginmetric-layout[data-density="dense"] .marginmetric-mobile-tabbar-item {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.marginmetric-layout[data-text-size="large"] {
    font-size: 17px;
}

.marginmetric-layout[data-text-size="extra-large"] {
    font-size: 18px;
}

.marginmetric-layout[data-text-size="large"] .sw-page-header h2,
.marginmetric-layout[data-text-size="large"] .metric-card-value,
.marginmetric-layout[data-text-size="large"] .sw-profit-metric-primary {
    font-size: calc(100% + 0.2rem);
}

.marginmetric-layout[data-text-size="extra-large"] .sw-page-header h2,
.marginmetric-layout[data-text-size="extra-large"] .metric-card-value,
.marginmetric-layout[data-text-size="extra-large"] .sw-profit-metric-primary {
    font-size: calc(100% + 0.4rem);
}

.marginmetric-layout[data-ui-theme="high-contrast"] {
    --sw-bg-card: #ffffff;
    --sw-bg-header: #ffffff;
    --sw-border: #94a3b8;
    --sw-border-light: #cbd5e1;
    --sw-text-secondary: #0f172a;
    --sw-text-primary: #020617;
    --sw-shadow-float: 0 14px 34px rgba(15, 23, 42, 0.12);
}

/* High Contrast is a palette preset, so it must also hold up in dark mode
   (preset and light/dark mode are independent — see LocalUiPreferencesState). */
[data-theme="dark"] .marginmetric-layout[data-ui-theme="high-contrast"] {
    --sw-bg-card: #000000;
    --sw-bg-header: #000000;
    --sw-bg-page: #000000;
    --sw-border: #94a3b8;
    --sw-border-light: #64748b;
    --sw-text-secondary: #f1f5f9;
    --sw-text-primary: #ffffff;
    --sw-shadow-float: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.marginmetric-layout[data-ui-theme="muted"] {
    --sw-brand: #0f766e;
    --sw-brand-light: #14b8a6;
    --sw-brand-dark: #115e59;
    --sw-gradient-hero: linear-gradient(135deg, #115e59, #0f766e 45%, #2dd4bf);
    --sw-gradient-cta: linear-gradient(135deg, #115e59, #14b8a6);
    --sw-shell-dot: rgba(20, 184, 166, 0.08);
    --sw-shadow-brand: 0 14px 32px rgba(15, 118, 110, 0.18);
}

.marginmetric-layout[data-visual-style="flat"] .metric-card,
.marginmetric-layout[data-visual-style="flat"] .sw-card,
.marginmetric-layout[data-visual-style="flat"] .welcome-card {
    box-shadow: none;
    background: var(--sw-bg-card);
    border-radius: var(--sw-radius-lg);
}

.marginmetric-layout[data-visual-style="flat"] .metric-card {
    background: var(--sw-bg-card);
}

.marginmetric-layout[data-minimal-nav="true"] .marginmetric-header {
    padding-left: 1rem;
    padding-right: 1rem;
}

.marginmetric-layout[data-minimal-nav="true"] .marginmetric-sidebar-brand {
    padding-top: 0.8rem;
    padding-bottom: 0.6rem;
}

.marginmetric-layout[data-minimal-nav="true"] .marginmetric-nav a,
.marginmetric-layout[data-minimal-nav="true"] .marginmetric-mobile-tabbar-item {
    letter-spacing: 0;
}

.marginmetric-layout[data-reduce-motion="true"] *,
.marginmetric-layout[data-reduce-motion="true"] *::before,
.marginmetric-layout[data-reduce-motion="true"] *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
}

/* ── Sidebar ── */

.marginmetric-sidebar {
    position: fixed;
    top: 0;
    left: calc(-1 * var(--sw-sidebar-width));
    bottom: 0;
    width: var(--sw-sidebar-width);
    background: var(--sw-bg-sidebar);
    display: flex;
    flex-direction: column;
    z-index: 100;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    transition: left var(--sw-transition-smooth);
}

@media (min-width: 769px) {
    .marginmetric-sidebar {
        left: 0;
    }

    .marginmetric-layout[data-sidebar-collapsed="true"] .marginmetric-sidebar {
        left: calc(-1 * var(--sw-sidebar-width));
    }

    .marginmetric-layout[data-sidebar-collapsed="true"] .marginmetric-content {
        margin-left: 0;
    }

    .marginmetric-layout[data-sidebar-collapsed="true"] .marginmetric-header {
        padding-left: 1rem;
    }

    .marginmetric-sidebar-backdrop {
        display: none !important;
    }
}

.marginmetric-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 1rem 0.5rem 0.75rem 1rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--sw-text-sidebar-active);
    letter-spacing: -0.3px;
    border-bottom: 1px solid var(--sw-sidebar-divider);
    margin-bottom: 0.5rem;
    min-width: 0;
}

.marginmetric-sidebar-brand a {
    color: var(--sw-text-sidebar-active);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
}

.marginmetric-sidebar-toggle {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--sw-radius-pill);
    background: rgba(255, 255, 255, 0.06);
    color: var(--sw-text-sidebar-active);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    transition: background var(--sw-transition-fast), border-color var(--sw-transition-fast);
}

.marginmetric-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}

.marginmetric-brand-icon {
    height: 1.75rem;
    width: auto;
    display: inline-block;
    flex-shrink: 0;
    /* The sidebar background (--sw-bg-sidebar) is a fixed dark brand color in BOTH
       light and dark theme — it never lightens. This logo must always be inverted
       to white, or it renders in its natural dark colors against a permanently-dark
       sidebar and is nearly unreadable in light theme (the default). */
    filter: brightness(0) invert(1);
}

.marginmetric-sidebar-section {
    padding: 0.75rem 1rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--sw-sidebar-section);
}

/* Sidebar footer holds the theme toggle — pinned to the bottom of the rail so it's
   always reachable without crowding the header. */
.marginmetric-sidebar-footer {
    margin-top: auto;
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid var(--sw-sidebar-divider);
}

.marginmetric-sidebar-theme.mm-theme-switch {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--sw-radius-md);
    color: var(--sw-text-sidebar-active);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background var(--sw-transition-fast);
}

.marginmetric-sidebar-theme.mm-theme-switch:hover {
    background: rgba(255, 255, 255, 0.06);
}

.marginmetric-sidebar-theme-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.marginmetric-sidebar-theme-icon {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.marginmetric-sidebar-signout {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 42px;
    margin-top: 0.65rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--sw-sidebar-divider);
    border-radius: var(--sw-radius);
    background: transparent;
    color: var(--sw-text-sidebar);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--sw-transition-fast), border-color var(--sw-transition-fast), color var(--sw-transition-fast), transform var(--sw-transition-fast);
}

.marginmetric-sidebar-signout:hover {
    background: var(--sw-bg-sidebar-hover);
    border-color: var(--sw-text-sidebar);
    color: var(--sw-text-sidebar-active);
    transform: translateY(-1px);
}

.marginmetric-sidebar-signout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--sw-brand-light) inset;
}

.marginmetric-sidebar-signout svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ── Header / Top Bar ── */

.marginmetric-content {
    flex: 1;
    margin-left: var(--sw-sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

.marginmetric-header {
    background: var(--sw-bg-header);
    border-bottom: 0;
    box-shadow: inset 0 -1px var(--sw-border);
    height: var(--sw-header-height);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 50;
}

.marginmetric-header-brand {
    display: none;
    align-items: center;
    font-family: var(--sw-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--sw-brand-dark);
    text-decoration: none;
    min-width: 0;
    flex: 0 1 auto;
}

/* Height-based sizing keeps the banner aspect-correct and crisp; width follows.
   Kept modest so the header stays balanced, not oversized. */
.marginmetric-header-brand-mark {
    display: none;
    /* Scales with header room; the wider max lets the banner read at full
       presence on desktop instead of a tucked-away token mark. */
    height: clamp(1.9rem, 4.5vw, 3.1rem);
    width: auto;
    max-width: 100%;
}

.marginmetric-header-brand-mark--desktop {
    display: block;
}

.marginmetric-header-brand-mark--mobile {
    height: 2rem;
}

/* Keep the full banner wherever it fits and fall back to the compact icon only
   on a genuinely tiny header. This used to be a @container query, but iOS Safari
   mis-evaluates container queries on this sticky header. It also used a 340px
   viewport threshold, which turned out to be too close to the real iPhone
   viewport: iOS Safari's own page-zoom state can shrink the effective CSS
   viewport enough to cross a threshold that close, so the banner disappeared
   at the default zoom level and only reappeared after the user zoomed out.
   The banner measures ~137px wide and clears the header controls with zero
   overflow down to 220px width (verified across 220-390px), so this is now a
   deliberately low last-resort threshold — normal zoom/device-width changes
   should never reach it. */
@media (max-width: 200px) {
    .marginmetric-header-brand-mark--desktop {
        display: none;
    }

    .marginmetric-header-brand-mark--mobile {
        display: block;
    }
}

/* The main header's background follows the light/dark theme toggle, so its brand
   mark only needs to invert to white in dark mode. (The sidebar logo's own
   unconditional invert is on .marginmetric-brand-icon above — its background
   never lightens, unlike this header.) */
[data-theme="dark"] .marginmetric-header-brand-mark {
    filter: brightness(0) invert(1);
}

.marginmetric-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    min-width: 0;
}

.marginmetric-notification {
    position: relative;
}

.marginmetric-notification-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    /* Standalone styling (it used to also carry .theme-toggle-btn, whose padding +
       border silently overrode this box and made the bell render taller than its
       neighbors). A square button pinned to the same height as the Logout button
       so every control in .marginmetric-header-right lines up. */
    width: var(--sw-shell-header-mobile-control-height);
    height: var(--sw-shell-header-mobile-control-height);
    padding: 0;
    box-sizing: border-box;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    background: none;
    color: var(--sw-text-secondary);
    cursor: pointer;
    transition: background var(--sw-transition-fast), border-color var(--sw-transition-fast);
}

.marginmetric-notification-toggle:hover {
    background: var(--sw-bg-subtle);
}

/* Every interactive control in the header row shares one height so nothing towers
   over its neighbors. */
.marginmetric-header-right .theme-toggle-btn,
.marginmetric-header-right .marginmetric-quick-add {
    height: var(--sw-shell-header-mobile-control-height);
}

.marginmetric-header-right .theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}

.marginmetric-notification-icon {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

.marginmetric-notification-badge {
    position: absolute;
    top: -0.15rem;
    right: -0.15rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--sw-loss);
    color: #fff;
    font-size: 0.62rem;
    line-height: 1rem;
    text-align: center;
    font-weight: 700;
}

.marginmetric-notification-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: min(22rem, calc(100vw - 2rem));
    max-height: 24rem;
    overflow: auto;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-lg);
    background: var(--sw-bg-card);
    box-shadow: var(--sw-shadow-lg);
    z-index: 200;
    transform-origin: top right;
    animation: sw-surface-pop var(--sw-transition-spring) both;
}

.marginmetric-notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--sw-border-light);
    font-weight: 600;
}

.marginmetric-notification-panel-close {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: var(--sw-text-secondary);
}

.marginmetric-notification-list {
    display: flex;
    flex-direction: column;
}

.marginmetric-notification-item,
.marginmetric-notification-empty {
    padding: 0.8rem 1rem;
}

.marginmetric-notification-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border-bottom: 1px solid var(--sw-border-light);
    color: var(--sw-text-primary);
    text-decoration: none;
}

.marginmetric-notification-item:hover {
    background: var(--sw-bg-subtle);
    color: var(--sw-text-primary);
}

.marginmetric-notification-item--attention {
    border-left: 3px solid var(--sw-brand);
}

.marginmetric-notification-item strong {
    font-size: 0.88rem;
}

.marginmetric-notification-item span,
.marginmetric-notification-empty {
    font-size: 0.8rem;
    color: var(--sw-text-secondary);
}

.marginmetric-header-status {
    font-size: 0.8rem;
    padding: 0.15rem 0.6rem;
    border-radius: 10px;
    font-weight: 500;
}

.marginmetric-header-status.online {
    background: var(--sw-brand-bg);
    color: var(--sw-brand-ink);
}

@media (max-width: 768px) {
    .marginmetric-notification {
        position: static;
    }

    .marginmetric-notification-panel {
        position: fixed;
        top: calc(4.25rem + env(safe-area-inset-top));
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        max-height: min(32rem, calc(100vh - 6rem));
        z-index: 700;
    }
}

.marginmetric-header-status.offline {
    background: var(--sw-loss-bg);
    color: #991b1b;
}

.marginmetric-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--sw-radius-pill);
    border: 1px solid var(--sw-border);
    background: var(--sw-bg-card);
    color: var(--sw-text-secondary);
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

/* ── Main Content ── */

.marginmetric-main {
    flex: 1;
    padding: var(--sw-space-page-top) var(--sw-space-page-inline) 1.5rem;
    min-width: 0;
}

.marginmetric-mobile-tabbar {
    display: none;
}

.marginmetric-mobile-tabbar-item {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--sw-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.45rem 0.25rem 0.35rem;
    border-radius: var(--sw-radius-pill);
    min-width: 0;
    transition: background-color var(--sw-transition-fast), color var(--sw-transition-fast), transform var(--sw-transition-fast), box-shadow var(--sw-transition-fast);
}

.marginmetric-layout[data-minimal-nav="true"] .marginmetric-mobile-tabbar-item,
.marginmetric-layout[data-mobile-tab-labels="false"] .marginmetric-mobile-tabbar-item {
    gap: 0;
    padding: 0.7rem 0.25rem 0.6rem;
}

.marginmetric-mobile-tabbar-item:hover,
.marginmetric-mobile-tabbar-item:focus-visible {
    color: var(--sw-brand-dark);
    text-decoration: none;
}

.marginmetric-mobile-tabbar-item.active {
    color: var(--sw-brand-dark);
}

/* The active/hover highlight is a contained pill behind the icon only, so it
   never bleeds into or overlaps the label text below it. */
.marginmetric-mobile-tabbar-icon {
    width: 1.15rem;
    height: 1.15rem;
    box-sizing: content-box;
    padding: 0.34rem 0.62rem;
    border-radius: var(--sw-radius-pill);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: background-color var(--sw-transition-fast), color var(--sw-transition-fast);
}

.marginmetric-layout[data-minimal-nav="true"] .marginmetric-mobile-tabbar-icon,
.marginmetric-layout[data-mobile-tab-labels="false"] .marginmetric-mobile-tabbar-icon {
    width: 1.45rem;
    height: 1.45rem;
}

.marginmetric-mobile-tabbar-item.active .marginmetric-mobile-tabbar-icon,
.marginmetric-mobile-tabbar-item:hover .marginmetric-mobile-tabbar-icon,
.marginmetric-mobile-tabbar-item:focus-visible .marginmetric-mobile-tabbar-icon {
    color: var(--sw-brand);
    background: var(--sw-brand-bg);
}

.marginmetric-page-title {
    margin-bottom: 1.25rem;
}

.marginmetric-page-title h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--sw-text-primary);
}

.marginmetric-page-title p {
    font-size: 0.875rem;
    color: var(--sw-text-secondary);
    margin: 0;
}

/* ──── Navigation (Sidebar) ──── */

.marginmetric-nav {
    padding: 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.marginmetric-nav a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--sw-radius);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sw-text-sidebar);
    text-decoration: none;
    transition: background-color var(--sw-transition-fast), color var(--sw-transition-fast), transform var(--sw-transition-fast);
}

.marginmetric-nav a:hover {
    background-color: var(--sw-bg-sidebar-hover);
    color: var(--sw-text-sidebar-hover);
    transform: translateX(2px);
}

.marginmetric-nav a.active {
    background-color: var(--sw-bg-sidebar-active);
    color: var(--sw-text-sidebar-active);
    font-weight: 600;
}

/* ──── Cards ──── */

.card {
    background: var(--sw-bg-card);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-lg);
    box-shadow: var(--sw-shadow-sm);
    margin-bottom: 1rem;
}

.card-header {
    background: var(--sw-bg-card);
    border-bottom: 1px solid var(--sw-border);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--sw-text-primary);
    border-radius: var(--sw-radius-lg) var(--sw-radius-lg) 0 0;
}

.card-body {
    padding: 1.25rem;
}

/* ──── Account Manage nav ──── */

.sw-manage-container {
    width: min(100%, 1120px);
    padding: 0;
}

.sw-manage-layout {
    align-items: flex-start;
    padding: clamp(2rem, 7vh, 5rem) clamp(1rem, 4vw, 3rem);
}

.sw-manage-row {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

.sw-manage-sidebar,
.sw-manage-content {
    min-width: 0;
}

.sw-manage-content > .row > .col-md-8 {
    width: 100%;
}

.sw-manage-content .card {
    max-width: 760px;
}

@media (max-width: 767px) {
    .sw-manage-layout {
        padding: 1rem;
    }

    .sw-manage-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .sw-manage-container > .marginmetric-page-title {
        margin-bottom: 1rem;
    }
}

.sw-manage-nav {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0.5rem;
    background: var(--sw-bg-card);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-lg);
    box-shadow: var(--sw-shadow-sm);
}

.sw-manage-nav li + li {
    margin-top: 0.125rem;
}

.sw-manage-nav-link {
    display: block;
    padding: 0.625rem 0.875rem;
    border-radius: var(--sw-radius-md, 8px);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sw-text-secondary);
    text-decoration: none;
}

.sw-manage-nav-link:hover {
    background: var(--sw-brand-bg);
    color: var(--sw-brand-dark);
}

.sw-manage-nav-link.active {
    background: var(--sw-brand);
    color: #fff;
}

.card-body.p-0 {
    padding: 0;
}

/* ──── Metric Cards ──── */

.metric-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.metric-row--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .metric-row,
    .metric-row--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.metric-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    border: 1px solid rgba(5, 150, 105, 0.12);
    border-radius: var(--sw-radius-lg);
    padding: 1.2rem 1.25rem;
    box-shadow: var(--sw-shadow-sm);
    transition: transform 0.18s var(--sw-transition-smooth), box-shadow 0.18s var(--sw-transition-smooth), border-color 0.18s var(--sw-transition-smooth);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sw-shadow);
    border-color: rgba(5, 150, 105, 0.22);
}

.metric-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sw-text-secondary);
    margin-bottom: 0.375rem;
}

.metric-card-value {
    font-family: var(--sw-font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--sw-text-primary);
    line-height: 1.2;
    letter-spacing: -0.04em;
}

.metric-card-sub {
    font-size: 0.75rem;
    color: var(--sw-text-muted);
    margin-top: 0.25rem;
}

.metric-card.metric-profit-positive {
    border-top: 3px solid var(--sw-profit);
}

.metric-card.metric-profit-negative {
    border-top: 3px solid var(--sw-loss);
}

.metric-card.metric-warning {
    border-top: 3px solid var(--sw-warning);
}

.metric-card.metric-default {
    border-top: 3px solid var(--sw-brand);
}

.metric-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1em 0.5em;
    border-radius: 10px;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.metric-badge.profit-positive {
    background: var(--sw-profit-bg);
    color: var(--sw-profit);
}

.metric-badge.profit-negative {
    background: var(--sw-loss-bg);
    color: var(--sw-loss);
}

.metric-card-unit {
    font-size: 1rem;
    font-weight: 500;
    color: var(--sw-text-secondary);
    margin-left: 0.15rem;
}

/* ──── Dashboard Sections ──── */

.dashboard-section {
    margin-bottom: 0;
}

.dashboard-section-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: var(--sw-space-section-header);
}

.dashboard-section-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sw-text-primary);
    margin: 0;
    letter-spacing: -0.2px;
}

.dashboard-section-badge {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--sw-text-secondary);
    background: var(--sw-bg-subtle);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}

.dashboard-section-sub {
    font-size: 0.8rem;
    color: var(--sw-text-muted);
    font-weight: 400;
}

/* ──── Attention Cards ──── */

.attention-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attention-card {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 2.25rem 0.85rem 1rem;
    border-radius: var(--sw-radius-lg);
    border: 1px solid var(--sw-border);
    background: var(--sw-bg-card);
    align-items: flex-start;
}

.attention-card-dismiss {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--sw-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.attention-card-dismiss:hover {
    background: var(--sw-bg-subtle);
    color: var(--sw-text-primary);
}

.attention-warning {
    border-left: 4px solid var(--sw-warning);
}

.attention-danger {
    border-left: 4px solid var(--sw-loss);
}

.attention-neutral {
    border-left: 4px solid #6b7280;
}

.attention-card-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.attention-warning .attention-card-icon {
    background: var(--sw-warning-bg);
    color: var(--sw-warning);
}

.attention-danger .attention-card-icon {
    background: var(--sw-loss-bg);
    color: var(--sw-loss);
}

.attention-neutral .attention-card-icon {
    background: var(--sw-bg-subtle);
    color: var(--sw-sidebar-section);
}

.attention-card-body {
    flex: 1;
    min-width: 0;
}

.attention-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sw-text-primary);
    margin-bottom: 0.15rem;
}

.attention-card-title a {
    color: var(--sw-text-primary);
    text-decoration: none;
}

.attention-card-title a:hover {
    color: var(--sw-brand);
}

.attention-card-detail {
    font-size: 0.78rem;
    color: var(--sw-text-secondary);
    margin-bottom: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attention-card-detail span {
    color: var(--sw-text-muted);
}

.attention-card-help {
    font-size: 0.75rem;
    color: var(--sw-text-muted);
    line-height: 1.4;
}

/* ──── Quick Actions Row ──── */

.quick-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dashboard-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.recent-orders-panel {
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-lg);
    background: var(--sw-bg-card);
    overflow: hidden;
}

.sw-local-pref-card {
    border-style: dashed;
}

.sw-local-pref-copy {
    margin-bottom: 1rem;
    color: var(--sw-text-secondary);
    font-size: 0.88rem;
}

.sw-settings-section-copy {
    margin: 0;
    color: var(--sw-text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

.sw-settings-layout-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sw-settings-collapsible {
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    background: var(--sw-bg-card);
}

.sw-settings-collapsible-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
}

.sw-settings-collapsible-summary h3,
.sw-settings-subsection-heading h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 650;
    color: var(--sw-text-primary);
}

.sw-settings-collapsible-summary p,
.sw-settings-subsection-heading p {
    margin: 0.35rem 0 0;
    color: var(--sw-text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

.sw-settings-collapsible-panel {
    padding: 0 1.1rem 1.1rem;
    border-top: 1px solid var(--sw-border-light);
}

.sw-local-pref-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sw-local-pref-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    background: var(--sw-bg-card);
}

.sw-local-pref-item--muted {
    background: var(--sw-bg-subtle);
}

.sw-local-pref-label {
    font-weight: 600;
    color: var(--sw-text-primary);
}

.sw-local-pref-meta {
    font-size: 0.76rem;
    color: var(--sw-text-muted);
}

.sw-local-pref-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.sw-settings-shell {
    display: grid;
    grid-template-columns: minmax(250px, 280px) minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}

.sw-settings-nav {
    position: sticky;
    top: calc(var(--sw-header-height) + 1rem);
}

.sw-settings-nav-card {
    padding: 1rem;
    border: 1px solid rgba(5, 150, 105, 0.16);
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 253, 245, 0.94));
    box-shadow: var(--sw-shadow-float);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.sw-settings-nav-title {
    font-family: var(--sw-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sw-text-primary);
}

.sw-settings-nav-copy {
    color: var(--sw-text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
}

.sw-settings-nav-links {
    display: grid;
    gap: 0.45rem;
}

.sw-settings-nav-group-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sw-text-secondary);
    padding: 0.6rem 0.2rem 0.1rem;
}

.sw-settings-nav-group-label:first-child {
    padding-top: 0;
}

.sw-settings-nav-link {
    display: block;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(5, 150, 105, 0.08);
    border-radius: 14px;
    text-align: left;
    color: var(--sw-text-primary);
    background: rgba(255, 255, 255, 0.72);
    font-weight: 700;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.sw-settings-nav-link:hover,
.sw-settings-nav-link:focus-visible {
    background: rgba(5, 150, 105, 0.16);
    border-color: rgba(16, 185, 129, 0.28);
    transform: translateX(2px);
}

.sw-settings-content {
    min-width: 0;
    display: grid;
    gap: 1rem;
}

/* Marketplace spotlight: reads as an intentional priority banner, not a stray card.
   Scoped under .marginmetric-layout to out-specify the later [data-theme="dark"] .sw-card
   border/background rules (which otherwise reset the brand-green left accent). */
.marginmetric-layout .sw-card.sw-settings-spotlight {
    border-color: rgba(5, 150, 105, 0.22);
    border-left: 3px solid var(--sw-brand);
    background:
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 42%),
        var(--sw-bg-card);
}

.sw-settings-spotlight-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 640px) {
    .sw-settings-spotlight-body {
        align-items: stretch;
    }

    .sw-settings-spotlight-body .btn {
        width: 100%;
    }
}

.sw-card[id],
.sw-settings-collapsible[id] {
    scroll-margin-top: calc(var(--sw-header-height) + 1rem);
}

.sw-settings-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.sw-settings-section-grid--dashboard {
    margin-bottom: 1rem;
}

.sw-settings-field {
    border: 1px solid var(--sw-border-light);
    border-radius: var(--sw-radius);
    padding: 0.9rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88));
}

.sw-settings-field--switch {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.sw-settings-preview {
    grid-column: 1 / -1;
}

.sw-settings-preview-label,
.sw-settings-nav-title {
    letter-spacing: -0.01em;
}

.sw-settings-preview-label {
    margin-bottom: 0.5rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--sw-text-muted);
    text-transform: uppercase;
}

.sw-settings-preview-card {
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-lg);
    padding: 1rem;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.12), rgba(16, 185, 129, 0.04));
}

.sw-settings-preview-chip {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.55rem;
    border-radius: var(--sw-radius-pill);
    background: var(--sw-brand-bg);
    color: var(--sw-brand-dark);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sw-settings-preview-value {
    font-family: var(--sw-font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--sw-text-primary);
}

.sw-settings-preview-copy {
    margin-top: 0.35rem;
    color: var(--sw-text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}

.sw-settings-note {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--sw-border-light);
    border-radius: var(--sw-radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 244, 246, 0.92));
    color: var(--sw-text-secondary);
    line-height: 1.5;
}

[data-theme="dark"] .sw-settings-nav-card {
    background: linear-gradient(180deg, rgba(11, 31, 24, 0.96), rgba(11, 31, 24, 0.99));
    border-color: rgba(16, 185, 129, 0.14);
}

[data-theme="dark"] .sw-settings-nav-link {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .sw-settings-field {
    background: linear-gradient(180deg, rgba(34, 38, 57, 0.96), rgba(26, 29, 39, 0.96));
}

[data-theme="dark"] .sw-settings-note {
    background: linear-gradient(180deg, rgba(34, 38, 57, 0.96), rgba(26, 29, 39, 0.96));
}

.sw-settings-section-summary .form-check,
.sw-settings-notification-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.sw-settings-section-summary .form-check-label,
.sw-settings-notification-toggle .form-check-label {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--sw-text-primary);
}

.sw-settings-section-summary .form-check-input,
.sw-settings-field--switch .form-check-input,
.sw-settings-notification-toggle .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 44px;
    min-width: 44px;
    height: 24px;
    margin: 0;
    border-radius: 999px;
    border: 1px solid rgba(16, 24, 40, 0.12);
    background: rgba(16, 24, 40, 0.16);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--sw-transition-fast), border-color var(--sw-transition-fast), box-shadow var(--sw-transition-fast);
}

.sw-settings-section-summary .form-check-input::after,
.sw-settings-field--switch .form-check-input::after,
.sw-settings-notification-toggle .form-check-input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(12, 18, 28, 0.25);
    transition: transform var(--sw-transition-spring);
}

.sw-settings-section-summary .form-check-input:checked,
.sw-settings-field--switch .form-check-input:checked,
.sw-settings-notification-toggle .form-check-input:checked {
    background: var(--sw-brand);
    border-color: var(--sw-brand);
}

.sw-settings-section-summary .form-check-input:checked::after,
.sw-settings-field--switch .form-check-input:checked::after,
.sw-settings-notification-toggle .form-check-input:checked::after {
    transform: translateX(20px);
}

.sw-settings-section-summary .form-check-input:hover,
.sw-settings-section-summary .form-check-input:focus-visible,
.sw-settings-field--switch .form-check-input:hover,
.sw-settings-field--switch .form-check-input:focus-visible,
.sw-settings-notification-toggle .form-check-input:hover,
.sw-settings-notification-toggle .form-check-input:focus-visible {
    border-color: rgba(5, 150, 105, 0.4);
    outline: none;
}

.sw-settings-section-summary .form-check-input:focus-visible,
.sw-settings-field--switch .form-check-input:focus-visible,
.sw-settings-notification-toggle .form-check-input:focus-visible {
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.25);
}

[data-theme="dark"] .sw-settings-section-summary .form-check-input,
[data-theme="dark"] .sw-settings-field--switch .form-check-input,
[data-theme="dark"] .sw-settings-notification-toggle .form-check-input {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--sw-border);
}

[data-theme="dark"] .sw-settings-section-summary .form-check-input:checked,
[data-theme="dark"] .sw-settings-field--switch .form-check-input:checked,
[data-theme="dark"] .sw-settings-notification-toggle .form-check-input:checked {
    background: var(--sw-brand);
    border-color: var(--sw-brand);
}

.sw-settings-section-summary {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: var(--sw-space-section);
}

.dashboard-shell--ready > * {
    animation: dashboard-load-stage-in var(--sw-transition-spring) var(--dashboard-load-delay, 40ms) both;
}

.dashboard-shell--ready > :nth-child(2) { --dashboard-load-delay: 100ms; }
.dashboard-shell--ready > :nth-child(3) { --dashboard-load-delay: 160ms; }
.dashboard-shell--ready > :nth-child(4) { --dashboard-load-delay: 220ms; }
.dashboard-shell--ready > :nth-child(5) { --dashboard-load-delay: 280ms; }
.dashboard-shell--ready > :nth-child(6) { --dashboard-load-delay: 340ms; }
.dashboard-shell--ready > :nth-child(7) { --dashboard-load-delay: 400ms; }

.dashboard-shell--ready .dashboard-charts-grid > .dashboard-chart-card {
    animation: dashboard-load-card-in var(--sw-transition-spring) 100ms both;
}

.dashboard-shell--ready .dashboard-charts-grid > .dashboard-chart-card:nth-child(2) {
    animation-delay: 180ms;
}

@keyframes dashboard-load-stage-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes dashboard-load-card-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.99);
    }

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

.dashboard-shell--compact {
    gap: 0.75rem;
}

/* Dashboard sections are already spaced by .dashboard-shell. Metric rows used
   to add a trailing margin on top of the section margin and shell gap, which
   created the large dead bands visible between Stats, Quick Actions, and Alerts. */
.dashboard-section > .metric-row {
    margin-bottom: 0;
}

.dashboard-loading-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.dashboard-loading-card {
    border: 1px solid var(--sw-border-light);
    border-radius: var(--sw-radius-lg);
    padding: 1rem;
    background: var(--sw-bg-card);
}

.metric-card--skeleton {
    min-height: 8.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    justify-content: flex-start;
}

.metric-card--hero {
    border: 1px solid rgba(5, 150, 105, 0.28);
    box-shadow: var(--sw-shadow-brand);
}

.sw-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--sw-radius-pill);
    background: var(--sw-border-light);
}

.sw-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: sw-skeleton-shimmer 1.3s infinite;
}

.sw-skeleton-line {
    height: 0.85rem;
}

.sw-skeleton-line--short {
    width: 42%;
}

.sw-skeleton-line--mid {
    width: 68%;
}

.sw-skeleton-line--xl {
    height: 1.85rem;
    width: 76%;
    border-radius: var(--sw-radius-sm);
}

@keyframes sw-skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.sw-settings-fee-table {
    margin-top: 1rem;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    overflow: hidden;
    background: var(--sw-bg-card);
}

.sw-settings-fee-form {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sw-border-light);
}

.sw-settings-fee-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.sw-settings-fee-submit {
    width: 100%;
    min-height: 2.2rem;
}

/* ──── Tables ──── */

.table {
    font-size: 0.85rem;
    margin-bottom: 0;
    width: 100%;
    border-collapse: collapse;
}

.table th {
    font-weight: 600;
    color: var(--sw-text-secondary);
    background: var(--sw-bg-table-header);
    border-bottom: 1px solid var(--sw-border);
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    text-transform: none;
    white-space: nowrap;
}

.table td {
    padding: 0.6rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--sw-border-light);
    color: var(--sw-text-primary);
}

.table-hover tbody tr:hover {
    background-color: var(--sw-bg-table-header);
}

.table-sm th,
.table-sm td {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

.table-actions {
    white-space: nowrap;
}

.table-actions .btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.78rem;
}

/* ──── Clickable rows + kebab row menus (app-feel tables) ──── */

.sw-row-clickable {
    cursor: pointer;
}

.sw-kebab-wrap {
    position: relative;
    display: inline-block;
}

.sw-kebab-btn {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--sw-radius-pill);
    background: transparent;
    color: var(--sw-text-muted);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: background var(--sw-transition-fast), color var(--sw-transition-fast);
}

.sw-kebab-label {
    display: none;
}

.sw-mobile-actions-sheet,
.sw-mobile-order-costs {
    display: none;
}

.sw-kebab-btn:hover,
.sw-kebab-btn[aria-expanded="true"] {
    background: rgba(128, 128, 128, 0.14);
    color: var(--sw-text-primary);
}

.sw-kebab-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 240;
    min-width: 13rem;
    background: var(--sw-bg-card);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-md);
    box-shadow: var(--sw-shadow-lg);
    padding: 0.3rem;
    text-align: left;
    animation: sw-kebab-in 120ms ease-out;
}

@keyframes sw-kebab-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

[data-reduce-motion="true"] .sw-kebab-menu {
    animation: none;
}

.sw-kebab-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: var(--sw-radius-sm);
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
    color: var(--sw-text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--sw-transition-fast);
}

.sw-kebab-item:hover {
    background: rgba(128, 128, 128, 0.14);
}

.sw-kebab-item--danger {
    color: #dc3545;
}

.sw-kebab-backdrop {
    position: fixed;
    inset: 0;
    z-index: 230;
    background: transparent;
    /* Desktop uses the inline menu above this element. Keep the backdrop from
       stealing clicks from the menu; mobile re-enables it for the bottom sheet. */
    pointer-events: none;
}

/* ──── Slide-in drawer (app-feel create/edit flows) ──── */

.sw-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(8, 12, 10, 0.45);
    display: flex;
    justify-content: flex-end;
    animation: sw-drawer-fade 160ms ease-out;
}

.sw-drawer {
    width: min(37rem, 100vw);
    height: 100%;
    background: var(--sw-bg-card);
    box-shadow: var(--sw-shadow-lg);
    display: flex;
    flex-direction: column;
    animation: sw-drawer-in 220ms cubic-bezier(0.22, 0.8, 0.36, 1);
}

@keyframes sw-drawer-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes sw-drawer-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

[data-reduce-motion="true"] .sw-drawer,
[data-reduce-motion="true"] .sw-drawer-overlay {
    animation: none;
}

.sw-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sw-border);
}

.sw-drawer-header h5 {
    margin: 0;
    font-family: var(--sw-font-display);
}

.sw-drawer-close {
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--sw-radius-pill);
    background: transparent;
    color: var(--sw-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background var(--sw-transition-fast), color var(--sw-transition-fast);
}

.sw-drawer-close:hover {
    background: rgba(128, 128, 128, 0.14);
    color: var(--sw-text-primary);
}

.sw-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.sw-drawer-footer {
    border-top: 1px solid var(--sw-border);
    padding: 0.85rem 1.25rem 1rem;
    background: var(--sw-bg-card);
}

.sw-live-profit {
    display: flex;
    gap: 1.75rem;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.sw-live-profit-stat .sw-live-profit-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sw-text-muted);
}

.sw-live-profit-stat .sw-live-profit-value {
    font-family: var(--sw-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    transition: color var(--sw-transition-fast);
}

.sw-live-profit-stat--primary .sw-live-profit-value {
    font-size: 1.55rem;
}

/* ──── Report charts ──── */

.sw-chart-baseline {
    stroke: var(--sw-border);
    stroke-width: 1;
}

.sw-chart-bar-pos {
    fill: var(--sw-brand);
}

.sw-chart-bar-neg {
    fill: #ef4444;
}

.sw-chart-bar-group {
    cursor: pointer;
}

.sw-chart-bar-group:focus-visible {
    outline: none;
}

.sw-chart-bar-group:focus-visible .sw-chart-bar-pos,
.sw-chart-bar-group:focus-visible .sw-chart-bar-neg {
    stroke: var(--sw-brand);
    stroke-width: 2;
}

.sw-chart-bar-selected {
    stroke: var(--sw-text-primary);
    stroke-width: 1.5;
}

.sw-chart-value-label {
    fill: var(--sw-text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
}

.sw-chart-axis-label {
    fill: var(--sw-text-muted);
    font-size: 0.68rem;
    font-family: inherit;
}

.sw-chart-axis-label-selected {
    fill: var(--sw-text-primary);
    font-weight: 700;
}

.sw-chart-hint {
    text-align: center;
    margin-top: 0.5rem;
}

.sw-cost-bars {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.sw-cost-bar-row {
    display: grid;
    grid-template-columns: 7.5rem 1fr 3.5rem;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
}

.sw-cost-bar-label {
    color: var(--sw-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sw-cost-bar-track {
    display: block;
    height: 0.6rem;
    border-radius: var(--sw-radius-pill);
    background: rgba(128, 128, 128, 0.14);
    overflow: hidden;
}

.sw-cost-bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--sw-radius-pill);
    background: var(--sw-brand);
    transition: width 300ms ease;
}

.sw-cost-bar-value {
    text-align: right;
    color: var(--sw-text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ──── Dashboard charts (Profit Trend + cost donut) ──── */
.dashboard-charts-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1rem;
}

.dashboard-chart-card {
    background: var(--sw-bg-card);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-lg);
    box-shadow: var(--sw-shadow-sm);
    padding: 1.1rem 1.15rem 1rem;
    min-width: 0;
}

.dashboard-chart-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-chart-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--sw-text-primary);
}

.dashboard-chart-value {
    font-weight: 700;
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.dashboard-chart-sub {
    color: var(--sw-text-muted);
    font-size: 0.76rem;
    margin: 0.15rem 0 0.6rem;
}

.dashboard-chart-empty {
    color: var(--sw-text-muted);
    font-size: 0.82rem;
    margin: 1.25rem 0;
    text-align: center;
}

.dashboard-trend-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.dashboard-trend-baseline {
    stroke: var(--sw-border);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.dashboard-trend-area {
    fill: rgba(5, 150, 105, 0.14);
    stroke: none;
}

.dashboard-trend-line {
    fill: none;
    stroke: var(--sw-brand);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.dashboard-trend-axis {
    fill: var(--sw-text-muted);
    font-size: 9px;
    font-family: inherit;
}

.dashboard-donut-wrap {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.dashboard-donut-browser {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem auto;
    align-items: stretch;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.dashboard-donut-browser-btn,
.dashboard-donut-overview-btn {
    border: 1px solid var(--sw-border);
    background: var(--sw-bg-card);
    color: var(--sw-text-secondary);
    border-radius: var(--sw-radius-pill);
    min-height: 2.25rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition:
        color var(--sw-transition-fast),
        border-color var(--sw-transition-fast),
        background var(--sw-transition-fast),
        transform var(--sw-transition-spring);
}

.dashboard-donut-browser-btn {
    width: 2.25rem;
    padding: 0;
    font-size: 1rem;
}

.dashboard-donut-browser-btn:hover,
.dashboard-donut-overview-btn:hover {
    color: var(--sw-brand);
    border-color: var(--sw-brand);
    transform: translateY(-1px);
}

.dashboard-donut-browser-btn:active,
.dashboard-donut-overview-btn:active {
    transform: translateY(0) scale(0.96);
}

.dashboard-donut-browser-btn:focus-visible,
.dashboard-donut-overview-btn:focus-visible,
.dashboard-donut-legend-row:focus-visible {
    outline: 3px solid var(--sw-brand-bg);
    outline-offset: 2px;
    border-color: var(--sw-brand);
}

.dashboard-donut-overview-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.72rem;
}

.dashboard-donut-overview-btn.is-active {
    color: var(--sw-brand);
    border-color: var(--sw-brand);
    background: var(--sw-brand-bg);
}

.dashboard-donut-browser-status {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--sw-border-light);
    border-radius: var(--sw-radius-pill);
    background: var(--sw-bg-subtle);
    padding: 0.28rem 0.75rem;
    text-align: center;
    overflow: hidden;
}

.dashboard-donut-browser-current {
    display: block;
    color: var(--sw-text-primary);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: dashboard-donut-value-in var(--sw-transition-spring) both;
}

.dashboard-donut-browser-position {
    color: var(--sw-text-muted);
    font-size: 0.64rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.dashboard-donut-svg {
    width: 136px;
    height: 136px;
    flex-shrink: 0;
    overflow: visible;
}

.dashboard-donut-track {
    stroke: rgba(128, 128, 128, 0.14);
}

.dashboard-donut-segment {
    transform-box: fill-box;
    transform-origin: center;
    animation: dashboard-donut-draw 520ms cubic-bezier(0.16, 1, 0.3, 1) var(--dashboard-donut-delay) backwards;
    transition:
        opacity var(--sw-transition-smooth),
        stroke-width var(--sw-transition-smooth),
        transform var(--sw-transition-spring);
}

.dashboard-donut-wrap[data-has-selection="true"] .dashboard-donut-segment:not(.is-active) {
    opacity: 0.24;
}

.dashboard-donut-segment.is-active {
    stroke-width: 25;
    transform: scale(1.025);
}

.dashboard-donut-center-content {
    transform-box: fill-box;
    transform-origin: center;
    animation: dashboard-donut-value-in var(--sw-transition-spring) both;
}

.dashboard-donut-center-value {
    fill: var(--sw-text-primary);
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
}

.dashboard-donut-center-share {
    fill: var(--sw-brand);
    font-size: 9px;
    font-weight: 700;
    font-family: inherit;
}

.dashboard-donut-center-label {
    fill: var(--sw-text-muted);
    font-size: 9px;
    font-family: inherit;
}

.dashboard-donut-legend {
    flex: 1 1 9rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dashboard-donut-legend-row {
    display: grid;
    grid-template-columns: 0.65rem 1fr auto auto;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--sw-radius-sm);
    background: transparent;
    padding: 0.27rem 0.35rem;
    font-size: 0.78rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    animation: dashboard-donut-legend-in var(--sw-transition-spring) var(--dashboard-legend-delay) backwards;
    transition:
        color var(--sw-transition-fast),
        border-color var(--sw-transition-fast),
        background var(--sw-transition-fast),
        transform var(--sw-transition-spring);
}

.dashboard-donut-legend-row:hover {
    border-color: var(--sw-border);
    background: var(--sw-bg-subtle);
    transform: translateX(2px);
}

.dashboard-donut-legend-row.is-active {
    border-color: var(--sw-brand);
    background: var(--sw-brand-bg);
    transform: translateX(2px);
}

.dashboard-donut-swatch {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--dashboard-donut-color);
    transition: transform var(--sw-transition-spring);
}

.dashboard-donut-legend-row.is-active .dashboard-donut-swatch {
    transform: scale(1.18);
}

.dashboard-donut-legend-label {
    color: var(--sw-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-donut-legend-value {
    color: var(--sw-text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dashboard-donut-legend-pct {
    color: var(--sw-text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 2.2rem;
    text-align: right;
}

@keyframes dashboard-donut-draw {
    from {
        opacity: 0;
        stroke-dashoffset: 326.73;
    }

    to {
        opacity: 1;
        stroke-dashoffset: var(--dashboard-donut-offset);
    }
}

@keyframes dashboard-donut-value-in {
    from {
        opacity: 0;
        transform: translateY(3px) scale(0.94);
    }

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

@keyframes dashboard-donut-legend-in {
    from {
        opacity: 0;
        transform: translateX(6px);
    }

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

.marginmetric-layout[data-reduce-motion="true"] .dashboard-donut-segment,
.marginmetric-layout[data-reduce-motion="true"] .dashboard-shell--ready > *,
.marginmetric-layout[data-reduce-motion="true"] .dashboard-shell--ready .dashboard-chart-card,
.marginmetric-layout[data-reduce-motion="true"] .dashboard-donut-center-content,
.marginmetric-layout[data-reduce-motion="true"] .dashboard-donut-browser-current,
.marginmetric-layout[data-reduce-motion="true"] .dashboard-donut-legend-row,
.marginmetric-layout[data-reduce-motion="true"] .dashboard-donut-swatch,
.marginmetric-layout[data-reduce-motion="true"] .dashboard-donut-browser-btn,
.marginmetric-layout[data-reduce-motion="true"] .dashboard-donut-overview-btn {
    animation: none !important;
    transition: none !important;
}

@media (max-width: 720px) {
    .dashboard-charts-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-shell--ready > *,
    .dashboard-shell--ready .dashboard-chart-card,
    .dashboard-donut-segment,
    .dashboard-donut-center-content,
    .dashboard-donut-browser-current,
    .dashboard-donut-legend-row,
    .dashboard-donut-swatch,
    .dashboard-donut-browser-btn,
    .dashboard-donut-overview-btn {
        animation: none !important;
        transition: none !important;
    }
}

[data-theme="dark"] .dashboard-trend-area {
    fill: rgba(16, 185, 129, 0.16);
}

/* ──── Skeleton loaders ──── */

.sw-skeleton-table {
    padding: 0.5rem 0;
}

.sw-skeleton-row {
    height: 2.4rem;
    border-radius: var(--sw-radius-sm);
    margin-bottom: 0.55rem;
    background: linear-gradient(90deg,
        rgba(128, 128, 128, 0.10) 25%,
        rgba(128, 128, 128, 0.20) 37%,
        rgba(128, 128, 128, 0.10) 63%);
    background-size: 400% 100%;
    animation: sw-shimmer 1.4s ease infinite;
}

.sw-skeleton-row:nth-child(2) { opacity: 0.85; }
.sw-skeleton-row:nth-child(3) { opacity: 0.7; }
.sw-skeleton-row:nth-child(4) { opacity: 0.55; }
.sw-skeleton-row:nth-child(5) { opacity: 0.4; }
.sw-skeleton-row:nth-child(6) { opacity: 0.25; }

@keyframes sw-shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

[data-reduce-motion="true"] .sw-skeleton-row {
    animation: none;
}

/* ──── Shared pager ──── */

.sw-pager {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.sw-pager-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-sm);
    background: var(--sw-bg-card);
    color: var(--sw-text-secondary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--sw-transition-fast), color var(--sw-transition-fast), border-color var(--sw-transition-fast);
}

.sw-pager-btn:hover:not(:disabled) {
    background: rgba(128, 128, 128, 0.12);
    color: var(--sw-text-primary);
    border-color: var(--sw-border);
}

.sw-pager-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.sw-pager-status {
    padding: 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sw-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sw-pager-status-sep {
    color: var(--sw-text-muted);
    font-weight: 400;
    margin: 0 0.15rem;
}

/* ──── Global header quick-add ──── */

.marginmetric-quick-add {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.25rem;
    padding: 0 0.85rem 0 0.7rem;
    border: none;
    border-radius: var(--sw-radius-pill);
    background: var(--sw-brand);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--sw-shadow-brand);
    transition: transform var(--sw-transition-fast), background var(--sw-transition-fast), box-shadow var(--sw-transition-fast);
}

.marginmetric-quick-add:hover {
    background: var(--sw-brand-dark);
    transform: translateY(-1px);
}

.marginmetric-quick-add:active {
    transform: translateY(0);
}

.marginmetric-quick-add-plus {
    font-size: 1.15rem;
    line-height: 1;
    font-weight: 700;
}

[data-reduce-motion="true"] .marginmetric-quick-add {
    transition: none;
}

/* On narrow viewports keep the round + and drop the label. Plain px media query,
   not a @container query — iOS Safari mis-evaluates container queries on the
   sticky header. */
@media (max-width: 640px) {
    .marginmetric-quick-add {
        padding: 0;
        width: 2.25rem;
        justify-content: center;
    }

    .marginmetric-quick-add-text {
        display: none;
    }
}

.sortable-header {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable-header:hover {
    color: var(--sw-brand);
    background-color: var(--sw-brand-bg);
}

.text-end {
    text-align: right;
}

.text-success {
    color: var(--sw-profit) !important;
}

.text-danger {
    color: var(--sw-loss) !important;
}

.text-warning {
    color: var(--sw-warning) !important;
}

.text-muted {
    color: var(--sw-text-secondary) !important;
}

.text-nowrap {
    white-space: nowrap;
}

.text-decoration-none {
    text-decoration: none;
}

.fw-semibold {
    font-weight: 600;
}

.fw-bold {
    font-weight: 700;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--sw-bg-card);
    border-radius: inherit;
}

/* ──── Buttons ──── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: var(--sw-radius-lg);
    font-size: 0.84rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    min-height: 2.15rem;
    box-shadow: var(--sw-shadow-sm);
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s, transform 0.15s;
    cursor: pointer;
    line-height: 1.4;
    border: 1px solid transparent;
    text-decoration: none;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.25);
}

/* Primary */
.btn-primary {
    background-color: var(--sw-brand);
    border-color: var(--sw-brand);
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--sw-brand-dark);
    border-color: var(--sw-brand-dark);
    box-shadow: var(--sw-shadow);
    transform: translateY(-1px);
}

/* Success */
.btn-success {
    /* #15803d instead of --sw-profit (#16a34a): white text needs ≥4.5:1 */
    background-color: #15803d;
    border-color: #15803d;
    color: #fff;
}

.btn-success:hover:not(:disabled) {
    background-color: #166534;
    border-color: #166534;
    box-shadow: var(--sw-shadow);
    transform: translateY(-1px);
}

/* Danger */
.btn-danger {
    background-color: var(--sw-loss);
    border-color: var(--sw-loss);
    color: #fff;
}

.btn-danger:hover:not(:disabled) {
    background-color: #b91c1c;
    border-color: #b91c1c;
    box-shadow: var(--sw-shadow);
    transform: translateY(-1px);
}

/* Warning — used for toggle states like Edit All */
.btn-warning {
    background-color: var(--sw-warning);
    border-color: var(--sw-warning);
    color: #fff;
}

.btn-warning:hover:not(:disabled) {
    background-color: #b45309;
    border-color: #b45309;
    box-shadow: var(--sw-shadow);
    transform: translateY(-1px);
}

/* Outline secondary — used for Export CSV, Cancel */
.btn-outline-secondary {
    color: var(--sw-text-secondary);
    border-color: var(--sw-border);
    background: var(--sw-bg-card);
}

.btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--sw-bg-subtle);
    color: var(--sw-text-primary);
    border-color: var(--sw-border);
    transform: translateY(-1px);
}

/* Outline primary — used for Edit table action */
.btn-outline-primary {
    color: var(--sw-brand);
    border-color: var(--sw-brand);
    background: var(--sw-bg-card);
}

.btn-outline-primary:hover:not(:disabled) {
    background-color: var(--sw-brand);
    color: #fff;
    box-shadow: var(--sw-shadow);
    transform: translateY(-1px);
}

/* Outline info — used for inactive Edit All toggle */
.btn-outline-info {
    color: var(--sw-text-secondary);
    border-color: var(--sw-border);
    background: var(--sw-bg-card);
}

.btn-outline-info:hover:not(:disabled) {
    background-color: var(--sw-bg-subtle);
    border-color: var(--sw-border);
    color: var(--sw-text-primary);
    transform: translateY(-1px);
}

/* Outline danger — destructive row/section actions (Delete, Disconnect, Log out). Was missing,
   so every such button fell back to the browser's native white/blue chrome and ignored app sizing. */
.btn-outline-danger {
    color: var(--sw-loss);
    border-color: var(--sw-loss);
    background: var(--sw-bg-card);
}

.btn-outline-danger:hover:not(:disabled) {
    background-color: var(--sw-loss);
    color: #fff;
    box-shadow: var(--sw-shadow);
    transform: translateY(-1px);
}

/* Link — plain inline text action, no button chrome */
.btn-link {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--sw-brand);
    padding: 0;
    min-height: auto;
    font-weight: 600;
    text-decoration: underline;
}

.btn-link:hover:not(:disabled) {
    color: var(--sw-brand-dark);
    background: transparent;
    box-shadow: none;
    text-decoration: underline;
}

/* Size variants */
.btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    min-height: 1.9rem;
}

.btn-xs {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    min-height: 1.7rem;
}

/* Button groups */
.btn-group {
    display: inline-flex;
    gap: 0;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-radius: var(--sw-radius-lg) 0 0 var(--sw-radius-lg);
}

.btn-group .btn:last-child {
    border-radius: 0 var(--sw-radius-lg) var(--sw-radius-lg) 0;
}

.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem;
}

.theme-toggle-btn {
    background: none;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--sw-text-secondary);
}

.theme-toggle-btn:hover {
    background: var(--sw-bg-subtle);
}

/* Track/thumb theme switch — mirrors the landing page's .landing-theme-switch */
.mm-theme-switch {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.mm-theme-switch-track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(16, 24, 40, 0.16);
    border: 1px solid rgba(16, 24, 40, 0.12);
    transition: background-color var(--sw-transition-fast), border-color var(--sw-transition-fast);
}

.mm-theme-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(12, 18, 28, 0.25);
    transition: transform var(--sw-transition-spring), box-shadow var(--sw-transition-smooth);
}

.mm-theme-switch[aria-checked="true"] .mm-theme-switch-track {
    background: var(--sw-brand);
    border-color: var(--sw-brand);
}

.mm-theme-switch[aria-checked="true"] .mm-theme-switch-thumb {
    transform: translateX(20px);
}

.mm-theme-switch:hover .mm-theme-switch-thumb {
    box-shadow: var(--sw-shadow);
}

.mm-theme-switch:active .mm-theme-switch-thumb {
    transform: scale(0.88);
}

.mm-theme-switch[aria-checked="true"]:active .mm-theme-switch-thumb {
    transform: translateX(20px) scale(0.88);
}

.mm-theme-switch:hover .mm-theme-switch-track,
.mm-theme-switch:focus-visible .mm-theme-switch-track {
    border-color: rgba(5, 150, 105, 0.4);
}

.mm-theme-switch:focus-visible {
    outline: none;
}

.mm-theme-switch:focus-visible .mm-theme-switch-track {
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.25);
}

[data-theme="dark"] .mm-theme-switch-track {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--sw-border);
}

[data-theme="dark"] .mm-theme-switch[aria-checked="true"] .mm-theme-switch-track {
    background: var(--sw-brand);
    border-color: var(--sw-brand);
}

/* ──── Forms ──── */

.form-label {
    font-weight: 500;
    font-size: 0.84rem;
    color: var(--sw-text-primary);
    margin-bottom: 0.3rem;
    display: block;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.45rem 0.75rem;
    font-size: 0.84rem;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    background: var(--sw-bg-input);
    color: var(--sw-text-primary);
    transition: border-color 0.12s, box-shadow 0.12s;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: var(--sw-brand);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
}

.form-control-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

.form-select {
    display: block;
    width: 100%;
    padding: 0.45rem 2.25rem 0.45rem 0.75rem;
    font-size: 0.84rem;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    background: var(--sw-bg-input);
    color: var(--sw-text-primary);
    appearance: none;
    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='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 14px 10px;
}

.form-select:focus {
    outline: none;
    border-color: var(--sw-brand);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
}

/* iOS Safari auto-zooms the viewport when a focused input's font-size is under 16px */
@media (max-width: 768px) {
    .form-control,
    .form-select,
    .form-control-sm,
    .sw-form-input {
        font-size: 16px;
    }
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check-input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--sw-brand);
}

.validation-message {
    color: var(--sw-loss);
    font-size: 0.78rem;
    margin-top: 0.2rem;
}

.form-text {
    font-size: 0.78rem;
    color: var(--sw-text-secondary);
    margin-top: 0.25rem;
}

/* ──── Badges ──── */

.badge {
    display: inline-block;
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.2em 0.55em;
    border-radius: 10px;
    white-space: nowrap;
}

.bg-success {
    background-color: var(--sw-profit-bg) !important;
    color: var(--sw-profit);
}

.bg-danger {
    background-color: var(--sw-loss-bg) !important;
    color: var(--sw-loss);
}

.bg-warning {
    background-color: var(--sw-warning-bg) !important;
    color: var(--sw-warning);
}

.bg-light {
    background-color: var(--sw-bg-subtle) !important;
    color: var(--sw-text-secondary);
}

.bg-info {
    background-color: #dbeafe !important;
    color: #075985;
}

.bg-primary {
    background-color: #e0e7ff !important;
    color: #3730a3;
}

.bg-secondary {
    background-color: var(--sw-bg-subtle) !important;
    color: var(--sw-text-secondary);
}

/* Order status badges */
.badge.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.badge.status-shipped {
    background: #dbeafe;
    color: var(--sw-brand-dark);
}

.badge.status-delivered {
    background: #d1fae5;
    color: #065f46;
}

.badge.status-refunded {
    background: #fee2e2;
    color: #991b1b;
}

.badge.status-returned {
    background: #f3f4f6;
    color: #374151;
}

/* Inventory status badges */
.badge.status-in-stock {
    background: #d1fae5;
    color: #065f46;
}

.badge.status-low-stock {
    background: #fef3c7;
    color: #92400e;
}

.badge.status-out-of-stock {
    background: #fee2e2;
    color: #991b1b;
}

.badge.status-all-held {
    background: #e0e7ff;
    color: #3730a3;
}

.badge.status-on-hold {
    background: #dbeafe;
    color: var(--sw-brand-dark);
}

/* ──── Alerts ──── */

.alert {
    border-radius: var(--sw-radius-lg);
    font-size: 0.85rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.alert-danger {
    background: var(--sw-loss-bg);
    border: 1px solid #fecaca;
    color: #991b1b;
}

.alert-warning {
    background: var(--sw-warning-bg);
    border: 1px solid #fde68a;
    color: #92400e;
}

.alert-success {
    background: var(--sw-profit-bg);
    border: 1px solid #bbf7d0;
    color: #065f46;
}

.alert-info {
    background: #ecfdf5;
    border: 1px solid rgba(16, 185, 129, 0.24);
    color: var(--sw-brand-dark);
}

/* ──── Alert Cards (Dashboard) ──── */

.alert-card-low {
    border-left: 4px solid var(--sw-warning);
}

.alert-card-over {
    border-left: 4px solid var(--sw-loss);
}

.alert-card-slow {
    border-left: 4px solid #6b7280;
}

.alert-card-missing {
    border-left: 4px solid #f97316;
}

.alert-card-low .card-header {
    background: #fffbeb;
}

.alert-card-over .card-header {
    background: #fef2f2;
}

.alert-card-slow .card-header {
    background: #f9fafb;
}

.alert-card-missing .card-header {
    background: #fff7ed;
}

/* ──── Profit Preview ──── */

.profit-preview {
    border-radius: var(--sw-radius-lg);
    padding: 0.85rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.profit-preview-label {
    opacity: 0.7;
    font-weight: 400;
    margin-right: 0.5rem;
}

.profit-preview-value {
    font-size: 1.2rem;
}

.profit-positive {
    background: var(--sw-profit-bg);
    color: #065f46;
    border: 1px solid #bbf7d0;
}

.profit-negative {
    background: var(--sw-loss-bg);
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ──── Confirm Dialogs ──── */

.confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
    overflow: hidden;
    overscroll-behavior: contain;
}

.confirm-dialog {
    background: var(--sw-bg-card);
    border-radius: var(--sw-radius-lg);
    padding: 1.5rem;
    max-width: 420px;
    width: 90%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: var(--sw-shadow-lg);
    margin: auto;
}

/* A modal owns the gesture. Keeping the document fixed prevents iOS from
   passing a swipe through the dialog to the Orders page underneath. */
html:has(.confirm-overlay),
body:has(.confirm-overlay) {
    overflow: hidden;
    overscroll-behavior: none;
}

.sw-combined-shipping-shares {
    display: grid;
    gap: 0.65rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.sw-combined-shipping-shares li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-md);
    background: var(--sw-neutral-50);
}

.sw-combined-shipping-share-details {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.sw-combined-shipping-share-date {
    color: var(--sw-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sw-combined-shipping-share-items {
    color: var(--sw-text-primary);
    font-size: 0.9rem;
    line-height: 1.35;
    overflow-wrap: break-word;
}

.sw-combined-shipping-share-cost {
    color: var(--sw-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sw-combined-shipping-dialog {
    display: flex;
    flex-direction: column;
}

.sw-combined-shipping-candidates {
    display: grid;
    gap: 0.5rem;
    min-height: 0;
    margin: 0.25rem 0 0.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sw-combined-shipping-candidate {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.7rem;
    padding: 0.7rem;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-md);
    background: var(--sw-neutral-50);
    cursor: pointer;
}

.sw-combined-shipping-candidate input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
}

.sw-combined-shipping-candidate > span {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.sw-combined-shipping-candidate-date {
    color: var(--sw-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sw-combined-shipping-candidate-items {
    color: var(--sw-text-primary);
    font-size: 0.9rem;
    line-height: 1.35;
    overflow-wrap: break-word;
}

.sw-combined-shipping-dialog-footer {
    display: grid;
    gap: 0.65rem;
    flex: 0 0 auto;
    padding-top: 0.65rem;
    border-top: 1px solid var(--sw-border);
    background: var(--sw-bg-card);
}

/* ──── Quick Actions ──── */

.quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    font-weight: 500;
    font-size: 0.84rem;
}

.btn-primary {
    background: var(--sw-gradient-cta);
    border-color: var(--sw-brand-dark);
    color: #fff;
    box-shadow: var(--sw-shadow-brand);
}

.btn-primary:hover:not(:disabled) {
    background: var(--sw-gradient-hero);
    border-color: var(--sw-brand-dark);
    box-shadow: var(--sw-shadow-lg);
    transform: translateY(-1px);
}

.btn-outline-primary:hover:not(:disabled) {
    background: var(--sw-gradient-cta);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--sw-shadow-brand);
}

/* ──── Getting Started ──── */

.step-guide {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.step-item {
    display: flex;
    gap: 0.75rem;
}

.step-number {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sw-brand-bg);
    color: var(--sw-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.step-text strong {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}

.step-text small {
    color: var(--sw-text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
}

/* ──── Converged Component Classes (Phase 9) ──── */

/* Page header block: title + subtitle + optional toolbar */
.sw-page-header {
    margin-bottom: var(--sw-space-page-header-gap);
    overflow-wrap: break-word;
    word-break: break-word;
}

.sw-page-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--sw-text-primary);
}

.sw-page-header p {
    font-size: 0.875rem;
    color: var(--sw-text-secondary);
    margin: 0;
}

.sw-page-header--dashboard {
    margin-top: 0;
    margin-bottom: var(--sw-space-page-header-gap);
}

.sw-page-header--dashboard h2 {
    margin-bottom: 0.15rem;
}

.sw-page-header--dashboard p {
    white-space: nowrap;
}

@media (max-width: 420px) {
    .sw-page-header--dashboard p {
        white-space: normal;
    }
}

.sw-page-header-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Converged button base */
.sw-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: var(--sw-radius);
    font-size: 0.84rem;
    font-weight: 500;
    padding: 0.45rem 0.9rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, opacity 0.12s;
    text-decoration: none;
    line-height: 1.4;
}

.sw-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.sw-btn-primary {
    background-color: var(--sw-brand);
    border-color: var(--sw-brand);
    color: #fff;
}

.sw-btn-primary:hover:not(:disabled) {
    background-color: var(--sw-brand-dark);
    border-color: var(--sw-brand-dark);
}

.sw-btn-success {
    /* #15803d instead of --sw-profit (#16a34a): white text needs ≥4.5:1 */
    background-color: #15803d;
    border-color: #15803d;
    color: #fff;
}

.sw-btn-success:hover:not(:disabled) {
    background-color: #166534;
    border-color: #166534;
}

.sw-btn-danger {
    background-color: var(--sw-loss);
    border-color: var(--sw-loss);
    color: #fff;
}

.sw-btn-danger:hover:not(:disabled) {
    background-color: #b91c1c;
    border-color: #b91c1c;
}

.sw-btn-warning {
    background-color: var(--sw-warning);
    border-color: var(--sw-warning);
    color: #fff;
}

.sw-btn-warning:hover:not(:disabled) {
    background-color: #b45309;
    border-color: #b45309;
}

.sw-btn-secondary {
    background: transparent;
    border-color: var(--sw-border);
    color: var(--sw-text-secondary);
}

.sw-btn-secondary:hover:not(:disabled) {
    background-color: var(--sw-bg-subtle);
    color: var(--sw-text-primary);
    border-color: var(--sw-border);
}

.sw-btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

.sw-btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
}

.sw-icon-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    flex: 0 0 auto;
    justify-content: center;
}

.sw-icon-btn:not(.sw-btn-danger) {
    background: transparent;
    border-color: var(--sw-border);
    color: var(--sw-text-primary);
}

.sw-icon-btn:not(.sw-btn-danger):hover:not(:disabled) {
    background: var(--sw-bg-subtle);
    border-color: var(--sw-border);
    color: var(--sw-text-primary);
}

.sw-icon-btn svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Actions column: icon button group + "More" dropdown */
.sw-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sw-actions-menu-wrap {
    position: relative;
    display: inline-flex;
}

.table-responsive.sw-actions-menu-open {
    overflow: visible;
}

.sw-actions-menu-row-open {
    position: relative;
    z-index: 41;
    overflow: visible !important;
}

.sw-actions-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
    border: none;
    padding: 0;
    cursor: default;
}

.sw-actions-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 41;
    min-width: 8rem;
    display: flex;
    flex-direction: column;
    background: var(--sw-bg-card);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    box-shadow: var(--sw-shadow-sm);
    padding: 0.25rem;
}

.sw-actions-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: var(--sw-radius);
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    color: var(--sw-text-primary);
    cursor: pointer;
}

.sw-actions-menu-item:hover {
    background: var(--sw-bg-subtle);
}

.sw-actions-menu-item-danger {
    color: var(--sw-danger-dark);
}

.sw-actions-menu-item-danger:hover {
    background: rgba(239, 68, 68, 0.12);
}

/* Inventory stock/sales view switcher */
.sw-inventory-tabs {
    display: inline-flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.25rem;
    background: var(--sw-bg-subtle);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
}

.sw-inventory-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.5rem 0.85rem;
    border: 0;
    border-radius: var(--sw-radius-sm);
    background: transparent;
    color: var(--sw-text-secondary);
    font-weight: 700;
    cursor: pointer;
}

.sw-inventory-tab span {
    min-width: 1.5rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--sw-radius-pill);
    background: var(--sw-neutral-200);
    color: var(--sw-text-primary);
    font-size: 0.72rem;
    text-align: center;
}

.sw-inventory-tab:hover,
.sw-inventory-tab:focus-visible {
    color: var(--sw-brand-dark);
    background: var(--sw-brand-bg);
}

.sw-inventory-tab.is-active {
    color: var(--sw-text-primary);
    background: var(--sw-bg-card);
    box-shadow: var(--sw-shadow-sm);
}

.sw-inventory-tab.is-active span {
    background: rgba(5, 150, 105, 0.12);
    color: var(--sw-brand-dark);
}

.sw-inventory-sales-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    color: var(--sw-text-primary);
}

.sw-inventory-sales-intro div {
    display: grid;
    gap: 0.15rem;
}

.sw-inventory-sales-intro span {
    color: var(--sw-text-secondary);
    font-size: 0.8rem;
}

@media (max-width: 640px) {
    .sw-inventory-tabs {
        display: flex;
        width: 100%;
    }

    .sw-inventory-tab {
        flex: 1 1 0;
        padding-inline: 0.5rem;
    }

    .sw-inventory-sales-intro {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Converged badge base + semantic variants */
.sw-badge {
    display: inline-block;
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.2em 0.55em;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1.4;
}

.sw-badge-success {
    background: var(--sw-profit-bg);
    color: var(--sw-profit);
}

.sw-badge-danger {
    background: var(--sw-loss-bg);
    color: var(--sw-loss);
}

.sw-badge-warning {
    background: var(--sw-warning-bg);
    color: var(--sw-warning);
}

.sw-badge-neutral {
    background: var(--sw-bg-subtle);
    color: var(--sw-text-secondary);
}

.sw-badge-info {
    background: var(--sw-brand-bg);
    color: var(--sw-brand);
}

/* Converged card surface */
.sw-card {
    background: var(--sw-bg-card);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-lg);
    box-shadow: var(--sw-shadow-sm);
    margin-bottom: 1rem;
    min-width: 0;
    max-width: 100%;
}

.sw-card-header {
    background: var(--sw-bg-card);
    border-bottom: 1px solid var(--sw-border);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--sw-text-primary);
    border-radius: var(--sw-radius-lg) var(--sw-radius-lg) 0 0;
}

.sw-card-body {
    padding: 1.25rem;
}

/* Flush card body removes default padding (used for tables directly inside cards) */
.sw-card-body--flush {
    padding: 0;
    background: var(--sw-bg-card);
}

/* Converged table container */
.sw-table {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
    background: var(--sw-bg-card);
}

.sw-table th {
    font-weight: 600;
    color: var(--sw-text-secondary);
    background: var(--sw-bg-table-header);
    border-bottom: 1px solid var(--sw-border);
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    text-transform: none;
    white-space: nowrap;
}

.sw-table td {
    padding: 0.6rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--sw-border-light);
    color: var(--sw-text-primary);
}

.sw-table tbody tr:hover {
    background-color: var(--sw-bg-table-header);
}

.sw-table .text-end {
    text-align: right;
}

.sw-table-actions {
    white-space: nowrap;
}

.sw-marketplace-review-title {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sw-review-reason-badge {
    max-width: 100%;
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
}

/* Shared list-toolbar search box: a comfortable fixed width on desktop, but full-width on
   mobile so it fills its own wrapped row cleanly instead of leaving a lopsided gap. Replaces
   per-page inline `style="width:220px"` so every list page reads the same. */
.sw-toolbar-search {
    width: 220px;
    max-width: 100%;
}

@media (max-width: 640px) {
    .sw-toolbar-search {
        width: 100%;
    }

    /* On mobile each table row becomes its own card, so the outer .card wrapper must not paint a
       second border/background/shadow around them — that reads as a stray container-in-a-container
       (the "square outline" above the first row). Flatten it; any .card-header inside keeps its own
       styling and reads as a section label above the row cards. */
    .card:has(.sw-mobile-card-table),
    [data-theme="dark"] .card:has(.sw-mobile-card-table) {
        border: none;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        margin-bottom: 0;
    }

    .card:has(.sw-mobile-card-table) > .card-header {
        border: 1px solid var(--sw-border);
        border-bottom: 1px solid var(--sw-border);
        border-radius: var(--sw-radius-lg);
        box-shadow: var(--sw-shadow-sm);
        margin: 0 0.75rem 0.75rem;
    }

    .table-responsive:has(.sw-mobile-card-table) {
        overflow-x: visible;
        padding: 0.75rem 0.75rem 0;
    }

    .confirm-overlay {
        align-items: flex-start;
        padding: max(1rem, env(safe-area-inset-top)) 1rem calc(var(--sw-tabbar-height) + env(safe-area-inset-bottom) + 1rem);
    }

    .confirm-dialog {
        width: 100%;
        max-height: calc(100dvh - var(--sw-tabbar-height) - env(safe-area-inset-bottom) - 2rem);
        margin: 0 auto;
    }

    .sw-combined-shipping-dialog {
        max-height: calc(100dvh - var(--sw-tabbar-height) - env(safe-area-inset-bottom) - 2rem);
    }

    .sw-combined-shipping-dialog .sw-combined-shipping-candidates {
        flex: 1 1 auto;
    }

    .sw-mobile-card-table thead {
        display: none;
    }

    .sw-mobile-card-table,
    .sw-mobile-card-table tbody,
    .sw-mobile-card-table tr,
    .sw-mobile-card-table td,
    .sw-mobile-card-table th {
        display: block;
        width: 100%;
        /* Without a global border-box reset, these width:100% cells would add their padding on
           top of the row width and overflow to the right, where the row's overflow:hidden clips
           the right padding — making cell content (and the nested cost-breakdown / actions boxes)
           sit flush against the card edge with long text cut off. border-box keeps them inside. */
        box-sizing: border-box;
    }

    .sw-mobile-card-table tr {
        background: var(--sw-bg-card);
        border: 1px solid var(--sw-border);
        border-radius: var(--sw-radius-lg);
        box-shadow: var(--sw-shadow-sm);
        margin-bottom: 0.75rem;
        overflow: hidden;
    }

    .sw-combined-shipping-shares li {
        padding: 0.7rem;
    }

    /* The actions popover must escape its card; otherwise the card's rounded
       overflow clip makes a tapped mobile kebab appear to do nothing. */
    .sw-mobile-card-table tr.sw-row-menu-open {
        overflow: visible;
        position: relative;
        z-index: 241;
    }

    .sw-mobile-card-table .sw-kebab-menu {
        display: none;
    }

    .sw-mobile-card-table td {
        display: block;
        padding: 0.65rem 0.85rem;
        border-bottom: 1px solid var(--sw-border-light);
        text-align: left;
    }

    .sw-mobile-card-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--sw-text-secondary);
    }

    /* A cell with an empty data-label (e.g. an actions/detail button column) must not paint a
       blank uppercase label line above its content — it reads as stray vertical whitespace. */
    .sw-mobile-card-table td[data-label=""]::before {
        display: none;
    }

    .sw-mobile-card-table td:last-child {
        border-bottom: none;
    }

    .sw-mobile-card-table .table-actions {
        white-space: normal;
        text-align: right;
        justify-content: flex-end;
    }

    .sw-mobile-card-table .table-actions::before {
        text-align: left;
    }

    .sw-mobile-card-table .sw-kebab-wrap {
        display: block;
    }

    .sw-mobile-card-table .sw-kebab-btn {
        width: 100%;
        min-height: 2.75rem;
        border-color: var(--sw-border);
        background: var(--sw-neutral-50);
        color: var(--sw-text-primary);
        justify-content: flex-start;
        gap: 0.5rem;
        padding: 0 0.75rem;
        font-size: 0.9rem;
    }

    .sw-mobile-card-table .sw-kebab-label {
        display: inline;
        font-weight: 600;
    }

    .sw-mobile-order-costs {
        display: block;
    }

    .sw-mobile-order-costs details {
        border: 1px solid var(--sw-border);
        border-radius: var(--sw-radius-sm);
        background: var(--sw-neutral-50);
        padding: 0.6rem 1.1rem 0.6rem 0.7rem;
    }

    .sw-mobile-order-costs summary {
        color: var(--sw-text-primary);
        cursor: pointer;
        font-weight: 700;
    }

    .sw-mobile-order-cost-list {
        display: grid;
        gap: 0.35rem;
        margin: 0.65rem 0 0;
    }

    .sw-mobile-order-cost-list > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
    }

    .sw-mobile-order-cost-list dt {
        color: var(--sw-text-secondary);
        font-weight: 500;
        min-width: 0;
    }

    .sw-mobile-order-cost-list dd {
        margin: 0;
        color: var(--sw-text-primary);
        font-weight: 600;
        min-width: 0;
        padding-right: 0.35rem;
        text-align: right;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .sw-mobile-order-cost-list .sw-mobile-order-shipping-source {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }

    .sw-mobile-order-shipping-source dd {
        padding-right: 0;
        text-align: left;
    }

    .sw-mobile-order-cost-list .sw-mobile-order-cost-total,
    .sw-mobile-order-cost-list .sw-mobile-order-profit {
        border-top: 1px solid var(--sw-border);
        margin-top: 0.2rem;
        padding-top: 0.45rem;
    }

    .sw-mobile-order-cost-split .btn {
        min-height: auto;
        padding: 0;
        font-size: 0.85rem;
        text-align: right;
    }

    .sw-kebab-backdrop {
        z-index: 1000;
        background: color-mix(in srgb, var(--sw-text-primary) 45%, transparent);
        pointer-events: auto;
    }

    .sw-mobile-actions-sheet {
        display: grid;
        gap: 0.25rem;
        position: fixed;
        left: 0.9rem;
        right: 0.9rem;
        bottom: calc(var(--sw-tabbar-height) + env(safe-area-inset-bottom) + 0.75rem);
        z-index: 1001;
        padding: 0.75rem;
        border: 1px solid var(--sw-border);
        border-radius: var(--sw-radius-lg);
        background: var(--sw-bg-card);
        box-shadow: var(--sw-shadow-lg);
        max-height: calc(100vh - var(--sw-tabbar-height) - env(safe-area-inset-bottom) - 1.5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sw-mobile-actions-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.25rem 0.25rem;
        color: var(--sw-text-primary);
    }

    .sw-mobile-actions-sheet .sw-kebab-item {
        padding: 0.7rem 0.75rem;
        font-size: 1rem;
    }

    .sw-marketplace-review-table td,
    .sw-marketplace-review-table .form-select,
    .sw-marketplace-review-table .form-control {
        min-width: 0;
        max-width: 100%;
    }

    .sw-marketplace-review-table .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ──── Empty State ──── */

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--sw-text-secondary);
}

.empty-state p {
    margin-bottom: 0.5rem;
}

.sw-empty-state {
    display: grid;
    gap: 0.85rem;
    justify-items: center;
    text-align: center;
    padding: 2.25rem 1.25rem;
    background:
        radial-gradient(circle at top, rgba(16, 185, 129, 0.12), transparent 30%),
        var(--sw-bg-card);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-lg);
    box-shadow: var(--sw-shadow-sm);
}

.sw-empty-state-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--sw-brand-bg);
    color: var(--sw-brand);
}

.sw-empty-state-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.sw-empty-state-title {
    margin: 0;
    font-family: var(--sw-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--sw-text-primary);
}

.sw-empty-state-message {
    margin: 0;
    max-width: 42rem;
    color: var(--sw-text-secondary);
    line-height: 1.55;
}

.sw-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.sw-empty-state-actions .btn {
    min-width: 11rem;
}

/* ──── Welcome Card ──── */

.welcome-card {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.18), transparent 28%),
        linear-gradient(135deg, #ecfdf5 0%, #ecfdf5 55%, #f8fafc 100%);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: var(--sw-radius-lg);
    padding: 1.75rem;
    text-align: left;
    margin-bottom: 1.25rem;
    box-shadow: var(--sw-shadow-sm);
    max-width: 980px;
}

.welcome-card h5 {
    color: var(--sw-text-primary);
    margin-bottom: 0.6rem;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
}

.welcome-card-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.85rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(5, 150, 105, 0.12);
    color: #047857;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.welcome-card p {
    color: var(--sw-text-secondary);
    margin-bottom: 1rem;
    font-size: 0.96rem;
    max-width: 42rem;
}

.welcome-card-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}

.welcome-card-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: var(--sw-radius);
    backdrop-filter: blur(4px);
}

.welcome-card-summary-item strong {
    color: var(--sw-text-primary);
    font-size: 0.92rem;
}

.welcome-card-summary-item span {
    color: var(--sw-text-secondary);
    font-size: 0.84rem;
    line-height: 1.45;
}

.welcome-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.75rem;
}

.welcome-card-actions .btn {
    min-width: 13rem;
}

.welcome-card-actions a.btn,
.welcome-card-actions a.btn:hover,
.welcome-card-actions a.btn:focus-visible {
    text-decoration: none;
}

.welcome-card-actions a.btn.btn-primary:hover,
.welcome-card-actions a.btn.btn-primary:focus-visible {
    color: #fff;
}

.welcome-card-actions a.btn.btn-outline-primary:hover,
.welcome-card-actions a.btn.btn-outline-primary:focus-visible {
    color: #fff;
}

/* Marketplace Import */

.sw-marketplace-hero-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sw-marketplace-hero-copy {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.sw-marketplace-hero-copy h3 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.sw-marketplace-hero-copy p {
    margin: 0;
    color: var(--sw-text-secondary);
}

.sw-marketplace-kicker {
    color: var(--sw-brand);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sw-marketplace-hero-actions,
.sw-marketplace-actions,
.sw-marketplace-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sw-marketplace-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.sw-marketplace-stat {
    padding: 0.9rem 1rem;
}

.sw-marketplace-stat-label {
    color: var(--sw-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sw-marketplace-stat-value {
    margin-top: 0.25rem;
    color: var(--sw-text-primary);
    font-size: 1.4rem;
    font-weight: 800;
}

.sw-marketplace-connection-list {
    display: grid;
    gap: 1rem;
}

.sw-marketplace-connection-card {
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    background: var(--sw-bg-card);
    padding: 1rem;
}

.sw-marketplace-connection-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.sw-marketplace-connection-title {
    color: var(--sw-text-primary);
    font-size: 1.05rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.sw-marketplace-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--sw-radius-pill);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.sw-marketplace-status-pill.is-good {
    color: var(--sw-brand-ink);
    background: var(--sw-brand-bg);
}

.sw-marketplace-status-pill.is-warning {
    color: var(--sw-warning);
    background: var(--sw-warning-bg);
}

.sw-marketplace-status-pill.is-danger {
    color: var(--sw-loss);
    background: rgba(239, 68, 68, 0.12);
}

.sw-marketplace-status-pill.is-muted {
    color: var(--sw-text-secondary);
    background: var(--sw-bg-subtle);
}

.sw-marketplace-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 1rem;
}

.sw-marketplace-detail-grid div {
    min-width: 0;
    border: 1px solid var(--sw-border-light);
    border-radius: var(--sw-radius);
    padding: 0.65rem;
    background: var(--sw-bg-subtle);
}

.sw-marketplace-detail-grid span {
    display: block;
    color: var(--sw-text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sw-marketplace-detail-grid strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--sw-text-primary);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.sw-marketplace-actions,
.sw-marketplace-controls-grid {
    margin-top: 1rem;
}

.sw-marketplace-controls-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 16rem));
    gap: 0.75rem;
}

.sw-marketplace-future-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.sw-marketplace-future-card {
    display: grid;
    gap: 0.2rem;
    border: 1px dashed var(--sw-border);
    border-radius: var(--sw-radius);
    padding: 0.9rem;
    background: var(--sw-bg-subtle);
}

.sw-marketplace-future-card span {
    color: var(--sw-text-secondary);
    font-size: 0.84rem;
}

.sw-marketplace-future-card.is-disabled {
    opacity: 0.7;
}

.sw-marketplace-import-panel {
    display: grid;
    gap: 1rem;
}

.sw-marketplace-import-copy {
    display: grid;
    gap: 0.25rem;
}

.sw-marketplace-import-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 1rem;
    align-items: end;
}

.sw-marketplace-file-picker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sw-marketplace-file-button {
    min-width: 10.5rem;
    justify-content: center;
}

.sw-marketplace-file-name {
    color: var(--sw-text-secondary);
    font-size: 0.92rem;
}

.sw-marketplace-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .sw-marketplace-hero-body,
    .sw-marketplace-connection-top {
        align-items: stretch;
        flex-direction: column;
    }

    .sw-marketplace-hero-actions .btn,
    .sw-marketplace-actions .btn {
        flex: 1 1 9rem;
    }

    .sw-marketplace-summary-grid,
    .sw-marketplace-detail-grid,
    .sw-marketplace-future-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sw-marketplace-import-grid {
        grid-template-columns: 1fr;
    }

    .sw-marketplace-file-button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .sw-marketplace-summary-grid,
    .sw-marketplace-detail-grid,
    .sw-marketplace-controls-grid,
    .sw-marketplace-future-grid {
        grid-template-columns: 1fr;
    }

    .sw-marketplace-connection-card {
        padding: 0.85rem;
    }
}

/* ──── Page Layout Helpers ──── */

.page-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.page-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--sw-text-secondary);
}

.page-pagination .btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem;
    border: 1px solid var(--sw-border);
    background: var(--sw-bg-card);
    color: var(--sw-text-secondary);
    cursor: pointer;
}

.page-pagination .btn-group-sm .btn:hover:not(:disabled) {
    background: var(--sw-bg-subtle);
}

.page-pagination .btn-group-sm .btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Pagination page counter — replaces inline hardcoded border */
.page-counter {
    border: 1px solid var(--sw-border);
    background: var(--sw-bg-card);
    color: var(--sw-text-secondary);
    cursor: default;
}

/* ──── Gap / Spacing Helpers ──── */

.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-center {
    justify-content: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.me-2 {
    margin-right: 0.5rem;
}

.me-1 {
    margin-right: 0.25rem;
}

.ms-1 {
    margin-left: 0.25rem;
}

.ms-2 {
    margin-left: 0.5rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.p-4 {
    padding: 1rem;
}

.small {
    font-size: 0.82rem;
}

/* ──── Auth Layout (login / register / forgot-password) ──── */

.sw-auth-layout {
    font-family: var(--sw-font);
    background: var(--sw-bg-page);
    color: var(--sw-text-primary);
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    box-sizing: border-box;
}

/* ──── Auth Card ──── */

.sw-auth-card {
    background: var(--sw-bg-card);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-lg);
    box-shadow: var(--sw-shadow-lg);
    padding: clamp(2rem, 4vw, 2.75rem);
    width: min(100%, 480px);
    margin: 0;
}

.sw-auth-card-brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sw-brand);
    letter-spacing: -0.3px;
    margin-bottom: 1rem;
    text-align: center;
}

.sw-auth-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sw-text-primary);
    margin: 0 0 0.25rem;
}

.sw-auth-card-subtitle {
    font-size: 0.875rem;
    color: var(--sw-text-secondary);
    margin: 0 0 1.5rem;
}

/* ──── Auth Form ──── */

.sw-auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sw-auth-field {
    display: flex;
    flex-direction: column;
}

.sw-auth-field .form-control {
    width: 100%;
}

.sw-auth-field .form-control:focus-visible {
    outline: 2px solid var(--sw-brand);
    outline-offset: 1px;
}

.sw-auth-field .text-danger {
    color: var(--sw-loss);
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

.sw-auth-remember {
    display: flex;
    align-items: center;
}

.sw-auth-remember-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--sw-text-primary);
    cursor: pointer;
}

/* ──── Auth Submit ──── */

.sw-auth-submit {
    width: 100%;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* ──── Auth Links ──── */

.sw-auth-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
    text-align: center;
}

.sw-auth-links a {
    color: var(--sw-brand);
    text-decoration: none;
    font-size: 0.875rem;
}

.sw-auth-links a:hover {
    color: var(--sw-brand-dark);
    text-decoration: underline;
}

/* ──── Auth Card 360px responsive ──── */

@media (max-width: 420px) {
    .sw-auth-card {
        padding: 1.5rem 1.25rem;
        border-radius: var(--sw-radius);
    }
}

/* ──── Auth Brand Area ──── */

.sw-auth-brand {
    text-align: center;
    margin-bottom: 1rem;
}

.sw-auth-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--sw-radius);
    background: var(--sw-brand);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.sw-auth-brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sw-brand);
    letter-spacing: -0.3px;
}

/* ──── Auth Title / Subtitle aliases ──── */

.sw-auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sw-text-primary);
    margin: 0 0 0.25rem;
}

.sw-auth-subtitle {
    font-size: 0.875rem;
    color: var(--sw-text-secondary);
    margin: 0 0 1.5rem;
}

/* ──── Auth State Pages ──── */

.sw-auth-state {
    text-align: center;
    padding: 0.5rem 0;
}

.sw-auth-state-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.sw-auth-state-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sw-text-primary);
    margin: 0 0 0.5rem;
}

.sw-auth-state-message {
    font-size: 0.875rem;
    color: var(--sw-text-secondary);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

/* ──── Auth Actions ──── */

.sw-auth-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ──── Auth Card Header / Body ──── */

.sw-auth-card-header {
    margin-bottom: 1rem;
}

.sw-auth-card-body {
    /* No extra padding; card already has padding */
}

/* ──── Shared Form Classes ──── */

.sw-form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.75rem;
}

.sw-form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sw-text-primary);
    margin-bottom: 0.3rem;
}

.sw-form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-family: var(--sw-font);
    color: var(--sw-text-primary);
    background: var(--sw-bg-input);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.sw-form-input:focus {
    outline: none;
    border-color: var(--sw-brand);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

.sw-form-input::placeholder {
    color: var(--sw-text-muted);
}

.sw-form-help {
    font-size: 0.78rem;
    color: var(--sw-text-muted);
    margin-top: 0.25rem;
}

.sw-form-error {
    font-size: 0.78rem;
    color: var(--sw-loss);
    margin-top: 0.25rem;
}

/* ──── Checkbox ──── */

.sw-form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--sw-text-primary);
    cursor: pointer;
}

.sw-form-checkbox-input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--sw-brand);
    cursor: pointer;
    margin: 0;
}

/* ──── Validation Summary ──── */

.sw-validation-summary {
    background: var(--sw-loss-bg);
    border: 1px solid var(--sw-loss);
    border-radius: var(--sw-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--sw-loss);
}

.sw-validation-summary ul {
    margin: 0;
    padding-left: 1.25rem;
}

.sw-validation-summary li {
    margin-bottom: 0.15rem;
}

/* ──── Alert States ──── */

.sw-alert {
    padding: 0.75rem 1rem;
    border-radius: var(--sw-radius);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.sw-alert-success {
    background: var(--sw-profit-bg);
    border: 1px solid var(--sw-profit);
    color: var(--sw-profit);
}

.sw-alert-info {
    background: var(--sw-brand-bg);
    border: 1px solid var(--sw-brand);
    color: var(--sw-brand);
}

.sw-alert-warning {
    background: var(--sw-warning-bg);
    border: 1px solid var(--sw-warning);
    color: var(--sw-warning);
}

.sw-alert-danger {
    background: var(--sw-loss-bg);
    border: 1px solid var(--sw-loss);
    color: var(--sw-loss);
}

/* ──── Auth Link (individual) ──── */

.sw-auth-link {
    color: var(--sw-brand);
    text-decoration: none;
    font-size: 0.875rem;
}

.sw-auth-link:hover {
    color: var(--sw-brand-dark);
    text-decoration: underline;
}

/* ──── Auth Responsive: 360px ──── */

@media (max-width: 420px) {
    .sw-auth-card {
        padding: 1.5rem 1.25rem;
        border-radius: var(--sw-radius);
    }

    .sw-auth-title {
        font-size: 1.3rem;
    }
}

/* ──── Auth Dark Mode (data-theme) ──── */

[data-theme="dark"] .sw-auth-layout {
    background: var(--sw-bg-page);
    color: var(--sw-text-primary);
}

[data-theme="dark"] .sw-auth-card {
    background: var(--sw-bg-card);
    border-color: var(--sw-border);
}

[data-theme="dark"] .sw-auth-title,
[data-theme="dark"] .sw-auth-card-title {
    color: var(--sw-text-primary);
}

[data-theme="dark"] .sw-auth-subtitle,
[data-theme="dark"] .sw-auth-card-subtitle {
    color: var(--sw-text-secondary);
}

[data-theme="dark"] .sw-auth-state-title {
    color: var(--sw-text-primary);
}

[data-theme="dark"] .sw-auth-state-message {
    color: var(--sw-text-secondary);
}

[data-theme="dark"] .sw-auth-remember-label,
[data-theme="dark"] .sw-form-checkbox {
    color: var(--sw-text-primary);
}

[data-theme="dark"] .sw-form-label {
    color: var(--sw-text-primary);
}

[data-theme="dark"] .sw-form-input {
    background: var(--sw-bg-input);
    border-color: var(--sw-border);
    color: var(--sw-text-primary);
}

[data-theme="dark"] .sw-form-input::placeholder {
    color: var(--sw-text-muted);
}

[data-theme="dark"] .sw-form-input:focus {
    border-color: var(--sw-brand-light);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

[data-theme="dark"] .sw-form-help {
    color: var(--sw-text-muted);
}

[data-theme="dark"] .sw-form-error {
    color: #fca5a5;
}

[data-theme="dark"] .sw-auth-link {
    color: var(--sw-brand-light);
}

[data-theme="dark"] .sw-auth-link:hover {
    color: var(--sw-brand-light);
}

[data-theme="dark"] .sw-validation-summary {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.4);
    color: #fca5a5;
}

[data-theme="dark"] .sw-alert-success {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.35);
    color: #4ade80;
}

[data-theme="dark"] .sw-alert-info {
    background: rgba(5, 150, 105, 0.12);
    border-color: rgba(5, 150, 105, 0.35);
    color: #86efac;
}

[data-theme="dark"] .sw-alert-warning {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.35);
    color: #fcd34d;
}

[data-theme="dark"] .sw-alert-danger {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.35);
    color: #fca5a5;
}

[data-theme="dark"] .sw-card-header,
[data-theme="dark"] .sw-auth-card-header {
    color: #e5e7eb;
}

[data-theme="dark"] .sw-auth-brand-name {
    color: var(--sw-brand-light);
}

/* ──── Grid (row/col) ──── */

.row {
    display: flex;
    flex-wrap: wrap;
}

/* Base: full-width (phone) */
.col-6,
.col-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-6,
.col-sm-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-6,
.col-md-8,
.col-md-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-6 {
    flex: 0 0 auto;
    width: 100%;
}

.col-6 {
    width: 50%;
}

.col-12 {
    width: 100%;
}

/* sm (≥ 576px): small tablet, landscape phone */
@media (min-width: 576px) {
    .col-sm-2 {
        width: 16.666%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-4 {
        width: 33.333%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-12 {
        width: 100%;
    }
}

/* md (≥ 768px): tablet */
@media (min-width: 768px) {
    .col-md-2 {
        width: 16.666%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-4 {
        width: 33.333%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-8 {
        width: 66.666%;
    }

    .col-md-12 {
        width: 100%;
    }
}

/* lg (≥ 992px): small desktop */
@media (min-width: 992px) {
    .col-lg-2 {
        width: 16.666%;
    }

    .col-lg-3 {
        width: 25%;
    }

    .col-lg-4 {
        width: 33.333%;
    }

    .col-lg-5 {
        width: 41.666%;
    }

    .col-lg-6 {
        width: 50%;
    }

    .col-lg-7 {
        width: 58.333%;
    }

    .col-lg-8 {
        width: 66.666%;
    }

    .col-lg-12 {
        width: 100%;
    }
}

/* xl (≥ 1200px): wide desktop */
@media (min-width: 1200px) {
    .col-xl-2 {
        width: 16.666%;
    }

    .col-xl-3 {
        width: 25%;
    }

    .col-xl-4 {
        width: 33.333%;
    }

    .col-xl-6 {
        width: 50%;
    }
}

.g-2 {
    gap: 0.5rem;
}

.g-3 {
    gap: 0.75rem;
}

.g-2>[class*="col-"],
.g-3>[class*="col-"] {
    padding: 0;
}

/* ──── Toast Notifications ──── */

.toast-container {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast-container.position-top-right {
    top: 1rem;
    right: 1rem;
}

.toast-container.position-bottom-right {
    bottom: 1rem;
    right: 1rem;
}

.toast-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--sw-radius-lg);
    box-shadow: var(--sw-shadow-lg);
    min-width: 280px;
    max-width: 420px;
    pointer-events: auto;
    animation: toast-slide-in 0.3s ease-out;
    font-size: 0.84rem;
    border-left: 4px solid;
}

.toast-success {
    background: #f0fdf4;
    color: #166534;
    border-left-color: var(--sw-profit);
}

.toast-error {
    background: #fef2f2;
    color: #991b1b;
    border-left-color: var(--sw-loss);
}

.toast-warning {
    background: #fffbeb;
    color: #92400e;
    border-left-color: var(--sw-warning);
}

.toast-info {
    background: #ecfdf5;
    color: var(--sw-brand-dark);
    border-left-color: var(--sw-brand);
}

.toast-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
}

.toast-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    padding: 0;
    flex-shrink: 0;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

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

/* ──── Spinner ──── */

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.2em solid var(--sw-border);
    border-right-color: var(--sw-brand);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ──── Responsive ──── */

/* Sidebar backdrop (mobile drawer overlay) */
.marginmetric-sidebar-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .marginmetric-sidebar-toggle {
        display: none;
    }

    .marginmetric-sidebar {
        width: min(84vw, 19rem);
        left: calc(-1 * min(84vw, 19rem));
    }

    .marginmetric-sidebar.open {
        left: 0;
    }

    .marginmetric-sidebar-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--sw-transition-fast);
    }

    .marginmetric-sidebar-backdrop.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .marginmetric-content {
        margin-left: 0;
        max-width: 100%;
        overflow-x: hidden;
        padding-bottom: calc(1.5rem + var(--sw-tabbar-height) + env(safe-area-inset-bottom));
    }

    .marginmetric-mobile-tabbar {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        height: calc(var(--sw-tabbar-height) + env(safe-area-inset-bottom));
        padding: 0 0.5rem env(safe-area-inset-bottom);
        background: rgba(255, 255, 255, 0.88);
        border-top: 1px solid rgba(16, 24, 40, 0.08);
        backdrop-filter: blur(18px);
        box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.12);
        transition: transform var(--sw-transition-fast), opacity var(--sw-transition-fast);
    }

    .marginmetric-mobile-tabbar-more {
        cursor: pointer;
    }

    html[data-keyboard-open="true"] .marginmetric-content {
        padding-bottom: 1rem;
    }

    html[data-keyboard-open="true"] .marginmetric-mobile-tabbar {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + env(safe-area-inset-bottom)));
    }

    .marginmetric-layout[data-sidebar-open="true"] .marginmetric-mobile-tabbar {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + env(safe-area-inset-bottom)));
    }

    .marginmetric-header-brand {
        display: inline-flex;
        flex: 1 1 auto;
        max-width: min(52vw, 13rem);
        align-self: flex-end;
        margin-bottom: var(--sw-shell-header-mobile-bottom-inset);
    }

    .marginmetric-header-brand-mark {
        height: var(--sw-shell-header-mobile-brand-height);
    }

    .marginmetric-header {
        height: var(--sw-shell-header-mobile-height);
        padding: 0 var(--sw-shell-header-mobile-inline-inset);
    }

    .marginmetric-header-right {
        align-self: flex-end;
        margin-bottom: var(--sw-shell-header-mobile-bottom-inset);
    }

    .marginmetric-main {
        padding: var(--sw-space-page-top-mobile) var(--sw-space-page-inline-mobile) 1rem;
    }

    .metric-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .metric-card {
        padding: 1rem 1rem 0.95rem;
    }

    .metric-card-label {
        font-size: 0.7rem;
        margin-bottom: 0.3rem;
    }

    .metric-card-value {
        font-size: 1.65rem;
    }

    .metric-card-sub {
        font-size: 0.72rem;
    }

    .dashboard-shell {
        gap: var(--sw-space-section-mobile);
    }

    .dashboard-section {
        margin-bottom: 0;
    }

    .dashboard-section-header {
        gap: 0.4rem;
        margin-bottom: var(--sw-space-section-header-mobile);
    }

    .dashboard-section-header h3 {
        font-size: 0.88rem;
    }

    .dashboard-section-badge {
        font-size: 0.66rem;
    }

    .sw-page-header {
        margin-bottom: var(--sw-space-page-header-gap-mobile);
    }

    .sw-page-header h2 {
        font-size: 1.35rem;
    }

    .sw-page-header p {
        font-size: 0.82rem;
    }

    .quick-action-btn {
        padding: 0.55rem 0.9rem;
        font-size: 0.8rem;
    }

    .welcome-card {
        padding: 1.4rem;
    }

    .welcome-card h5 {
        font-size: 1.35rem;
    }

    .welcome-card p {
        font-size: 0.9rem;
    }

    .welcome-card-summary {
        gap: 0.7rem;
    }

    .step-guide {
        grid-template-columns: 1fr;
    }
}

/* Responsive header: truncate email on narrow widths */
@media (max-width: 720px) {
    .marginmetric-header-brand {
        gap: 0.4rem;
    }

    .marginmetric-header-user {
        display: none;
    }

    .marginmetric-header-right {
        gap: 0.4rem;
        flex-wrap: nowrap;
        justify-content: flex-end;
        min-width: 0;
    }

    .marginmetric-sidebar-brand .marginmetric-brand-text {
        max-width: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .marginmetric-header-status {
        display: none;
    }

    .theme-toggle-btn,
    .mm-theme-switch {
        flex-shrink: 0;
    }
}

@media (max-width: 680px) {
    .marginmetric-header-brand .marginmetric-brand-text {
        display: none;
    }
}

@media (max-width: 520px) {
    .marginmetric-header-brand .marginmetric-brand-text {
        display: none;
    }
}

@media (max-width: 420px) {
    .marginmetric-header-right {
        gap: 0.25rem;
    }
}

@media (max-width: 540px) {
    .marginmetric-sidebar-brand .marginmetric-brand-text {
        max-width: none;
    }

    .theme-toggle-btn {
        padding-inline: 0.55rem;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .marginmetric-sidebar {
        width: min(84vw, 19rem);
        left: calc(-1 * min(84vw, 19rem));
        box-shadow: var(--sw-shadow-lg);
    }

    .marginmetric-sidebar.open {
        left: 0;
    }

    .marginmetric-sidebar-toggle {
        display: none;
    }

    .marginmetric-sidebar-backdrop {
        display: block;
    }

    .marginmetric-sidebar-backdrop.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .marginmetric-content {
        margin-left: 0;
        padding-bottom: 1rem;
    }

    .marginmetric-main {
        padding: var(--sw-space-page-top-mobile) var(--sw-space-page-inline-mobile) 1rem;
    }

    .marginmetric-mobile-tabbar {
        display: none;
    }

    .marginmetric-hamburger {
        display: inline-flex;
    }

    .marginmetric-header-brand {
        display: inline-flex;
    }
}

.sw-settings-account-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-lg);
    background: var(--sw-bg-subtle);
}

@media (max-width: 576px) {
    .sw-settings-account-summary {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Touch targets ≥ 44px on touch devices */
@media (hover: none) and (pointer: coarse) {
    .marginmetric-nav a,
    .sw-btn,
    .btn,
    .page-pagination .btn-group-sm .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .marginmetric-nav a {
        padding: 0.65rem 0.75rem;
    }
}

/* ──── Dark Mode ──── */

[data-theme="dark"] {
    --sw-bg-page: #0f1117;
    --sw-bg-card: #1a1d27;
    --sw-bg-header: #1a1d27;
    --sw-bg-input: #1a1d27;
    --sw-text-primary: #e5e7eb;
    --sw-text-secondary: #9ca3af;
    --sw-text-muted: #9ca3af; /* ≥4.5:1 on #1a1d27 cards */
    --sw-border: #2d3143;
    --sw-border-light: #222639;
    --sw-brand-bg: #1e3a5f;
    --sw-loss: #f87171;
    --sw-profit-bg: #0d3320;
    --sw-loss-bg: #3b1111;
    --sw-warning-bg: #332b00;
    --sw-chart-slice-1: #34d399;
    --sw-chart-slice-2: #2dd4bf;
    --sw-chart-slice-3: #60a5fa;
    --sw-chart-slice-4: #fbbf24;
    --sw-chart-slice-5: #f87171;
    --sw-chart-slice-6: #a78bfa;
    --sw-chart-slice-7: #f472b6;
    --sw-chart-slice-8: #22d3ee;
    --sw-chart-slice-9: #94a3b8;
    --sw-bg-table-header: #222639;
    --sw-bg-subtle: #222639;
    --sw-shadow-float: 0 22px 50px rgba(0, 0, 0, 0.35);
    --sw-card-glass: rgba(26, 29, 39, 0.86);
    --sw-card-border-glass: var(--sw-border);
    --sw-header-glass: rgba(26, 29, 39, 0.85);
    --sw-bg-shell:
        radial-gradient(circle at top left, rgba(52, 211, 153, 0.14), transparent 30%),
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.10), transparent 26%),
        linear-gradient(180deg, #0c120f 0%, #101722 46%, #0b0f16 100%);
    --sw-shell-dot: rgba(52, 211, 153, 0.26);
    --sw-shell-dot-opacity: 0.9;
    color: var(--sw-text-primary);
    background-color: var(--sw-bg-page);
}

[data-theme="dark"] .marginmetric-header {
    background-color: var(--sw-bg-header);
    box-shadow: inset 0 -1px var(--sw-border);
}

[data-theme="dark"] .marginmetric-header-status.online {
    background: #0d3320;
    color: #4ade80;
}

[data-theme="dark"] .marginmetric-header-status.offline {
    background: #3b1111;
    color: #fca5a5;
}

[data-theme="dark"] .metric-card {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.10), transparent 32%),
        linear-gradient(180deg, var(--sw-bg-card), var(--sw-bg-subtle));
    border-color: rgba(16, 185, 129, 0.18);
}

[data-theme="dark"] .metric-card:hover {
    border-color: rgba(16, 185, 129, 0.32);
}

[data-theme="dark"] .card {
    background-color: var(--sw-bg-card);
    border-color: var(--sw-border);
}

[data-theme="dark"] .card-header {
    background-color: var(--sw-bg-card);
    border-bottom-color: var(--sw-border);
}

[data-theme="dark"] .table {
    color: var(--sw-text-primary);
}

[data-theme="dark"] .table th {
    background-color: var(--sw-bg-subtle);
    color: var(--sw-text-secondary);
}

[data-theme="dark"] .table td {
    border-color: var(--sw-border);
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--sw-bg-input);
    border-color: var(--sw-border);
    color: var(--sw-text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--sw-bg-input);
    color: var(--sw-text-primary);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--sw-brand-light);
    border-color: var(--sw-brand-light);
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: #44485a;
    color: #c4c8d4;
    background: var(--sw-bg-card);
}

[data-theme="dark"] .btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--sw-bg-subtle);
    color: var(--sw-text-primary);
    border-color: var(--sw-border);
}

[data-theme="dark"] .btn-outline-info {
    border-color: #44485a;
    color: #c4c8d4;
    background: var(--sw-bg-card);
}

[data-theme="dark"] .btn-outline-info:hover:not(:disabled) {
    background-color: var(--sw-bg-subtle);
    color: var(--sw-text-primary);
    border-color: var(--sw-border);
}

[data-theme="dark"] .theme-toggle-btn {
    border-color: var(--sw-border);
    color: var(--sw-text-secondary);
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background: var(--sw-bg-subtle);
}

[data-theme="dark"] .welcome-card {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.22), transparent 30%),
        linear-gradient(135deg, #1a2332 0%, #1a2030 100%);
    border-color: var(--sw-border);
}

[data-theme="dark"] .welcome-card-eyebrow {
    background: rgba(96, 165, 250, 0.16);
    color: #86efac;
}

[data-theme="dark"] .welcome-card-summary-item {
    background: rgba(15, 23, 42, 0.38);
    border-color: rgba(16, 185, 129, 0.24);
}

[data-theme="dark"] .marginmetric-layout {
    background-color: var(--sw-bg-page);
}

[data-theme="dark"] .alert-danger {
    background: #3b1111;
    border-color: #7f1d1d;
    color: #fca5a5;
}

[data-theme="dark"] .alert-warning {
    background: #332b00;
    border-color: #665600;
    color: #fcd34d;
}

[data-theme="dark"] .alert-success {
    background: #0d3320;
    border-color: #14532d;
    color: #86efac;
}

[data-theme="dark"] .alert-info {
    background: #0c1f3f;
    border-color: #1e3a5f;
    color: #86efac;
}

[data-theme="dark"] .confirm-dialog {
    background-color: var(--sw-bg-card);
    color: var(--sw-text-primary);
}

[data-theme="dark"] .profit-preview {
    background-color: var(--sw-bg-subtle);
}

[data-theme="dark"] .profit-positive {
    background: #0d3320;
    color: #86efac;
    border-color: #14532d;
}

[data-theme="dark"] .profit-negative {
    background: #3b1111;
    color: #fca5a5;
    border-color: #7f1d1d;
}

[data-theme="dark"] .sortable-header:hover {
    background-color: rgba(5, 150, 105, 0.15);
}

[data-theme="dark"] .badge.bg-light {
    background-color: var(--sw-bg-subtle) !important;
    color: var(--sw-text-primary) !important;
}

[data-theme="dark"] .badge.status-returned {
    background: var(--sw-bg-subtle);
    color: var(--sw-text-sidebar);
}

[data-theme="dark"] .badge.status-in-stock {
    background: #0d3320;
    color: #4ade80;
}

[data-theme="dark"] .badge.status-low-stock {
    background: #332b00;
    color: #fcd34d;
}

[data-theme="dark"] .badge.status-out-of-stock {
    background: #3b1111;
    color: #fca5a5;
}

[data-theme="dark"] .badge.status-all-held {
    background: #1e1b4b;
    color: #a5b4fc;
}

[data-theme="dark"] .badge.status-on-hold {
    background: #1e3a5f;
    color: #86efac;
}

[data-theme="dark"] .alert-card-low .card-header {
    background: #332b00;
}

[data-theme="dark"] .alert-card-over .card-header {
    background: #3b1111;
}

[data-theme="dark"] .alert-card-slow .card-header {
    background: var(--sw-bg-subtle);
}

[data-theme="dark"] .alert-card-missing .card-header {
    background: #331d0a;
}

[data-theme="dark"] .page-pagination .btn-group-sm .btn {
    background: var(--sw-bg-card);
    border-color: #44485a;
    color: #c4c8d4;
}

[data-theme="dark"] .page-pagination .btn-group-sm .btn:hover:not(:disabled) {
    background: var(--sw-bg-subtle);
}

[data-theme="dark"] .step-number {
    background: #1e3a5f;
    color: var(--sw-brand-light);
}

[data-theme="dark"] .table th {
    background-color: var(--sw-bg-subtle);
}

[data-theme="dark"] .table-responsive,
[data-theme="dark"] .sw-card-body--flush,
[data-theme="dark"] .sw-table {
    background-color: var(--sw-bg-card);
}

[data-theme="dark"] .bg-success {
    background-color: #0d3320 !important;
    color: #4ade80;
}

[data-theme="dark"] .bg-danger {
    background-color: #3b1111 !important;
    color: #fca5a5;
}

[data-theme="dark"] .bg-warning {
    background-color: #332b00 !important;
    color: #fcd34d;
}

[data-theme="dark"] .bg-info {
    background-color: #0c2d48 !important;
    color: #7dd3fc;
}

[data-theme="dark"] .bg-primary {
    background-color: #1e1b4b !important;
    color: #a5b4fc;
}

[data-theme="dark"] .bg-secondary {
    background-color: var(--sw-bg-subtle) !important;
    color: var(--sw-text-sidebar);
}

[data-theme="dark"] .badge.status-pending {
    background: #332b00;
    color: #fcd34d;
}

[data-theme="dark"] .badge.status-shipped {
    background: #0c2d48;
    color: #7dd3fc;
}

[data-theme="dark"] .badge.status-delivered {
    background: #0d3320;
    color: #4ade80;
}

[data-theme="dark"] .badge.status-refunded {
    background: #3b1111;
    color: #fca5a5;
}

[data-theme="dark"] .dashboard-section-badge {
    background: var(--sw-bg-subtle);
    color: var(--sw-text-sidebar);
}

[data-theme="dark"] .attention-card {
    background-color: var(--sw-bg-card);
    border-color: var(--sw-border);
}

[data-theme="dark"] .attention-neutral .attention-card-icon {
    background: var(--sw-bg-subtle);
    color: var(--sw-text-sidebar);
}

[data-theme="dark"] .attention-card-title a:hover {
    color: var(--sw-brand-light);
}

[data-theme="dark"] .marginmetric-notification-panel {
    border-color: var(--sw-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* ──── Profit Sandbox ──── */

.sw-profit-sandbox {
    width: min(100%, 1320px);
    min-width: 0;
    margin: 0 auto;
    overflow-x: clip;
}

.sw-profit-sandbox *,
.sw-profit-sandbox *::before,
.sw-profit-sandbox *::after {
    box-sizing: border-box;
}

.sw-profit-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    min-width: 0;
    margin-bottom: 1rem;
}

.sw-profit-intro > div {
    min-width: 0;
}

.sw-profit-intro-actions {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
}

.sw-profit-reset-action {
    min-height: 44px;
}

.sw-profit-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    margin-bottom: 0.25rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--sw-radius-pill);
    background: var(--sw-brand-bg);
    color: var(--sw-brand-ink);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sw-profit-flow {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sw-profit-flow li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.25rem 0.65rem 0.25rem 0.35rem;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-pill);
    background: color-mix(in srgb, var(--sw-bg-card) 88%, transparent);
    color: var(--sw-text-secondary);
    font-size: 0.75rem;
    font-weight: 650;
    white-space: nowrap;
}

.sw-profit-flow li span,
.sw-profit-step-index {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    border-radius: 50%;
    background: var(--sw-brand-bg);
    color: var(--sw-brand-dark);
    font-size: 0.72rem;
    font-weight: 800;
}

.sw-profit-input-card {
    min-width: 0;
    overflow: clip;
}

.sw-profit-section-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.75rem;
}

.sw-profit-section-header > div {
    min-width: 0;
}

.sw-profit-section-header h3,
.sw-profit-section-header p,
.sw-profit-card-title h3,
.sw-profit-card-title p {
    margin: 0;
}

.sw-profit-section-header p,
.sw-profit-card-title p {
    margin-top: 0.2rem;
    color: var(--sw-text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
}

.sw-profit-section-tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--sw-radius-pill);
    background: var(--sw-brand-bg);
    color: var(--sw-brand-ink);
    font-size: 0.68rem;
    font-weight: 750;
    white-space: nowrap;
}

.sw-profit-section-tag--common {
    background: var(--sw-bg-subtle);
    color: var(--sw-text-secondary);
}

.sw-profit-field-scope {
    color: var(--sw-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.sw-profit-validation-slot {
    min-height: 1.15rem;
    padding-top: 0.25rem;
}

.sw-profit-field-error {
    display: block;
    color: var(--sw-loss);
    font-size: 0.74rem;
    line-height: 1.3;
}

.sw-profit-preset-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--sw-brand) 24%, var(--sw-border));
    border-radius: var(--sw-radius-md);
    background: color-mix(in srgb, var(--sw-brand-bg) 72%, var(--sw-bg-card));
    color: var(--sw-text-primary);
    animation: sw-profit-status-enter var(--sw-motion-duration-standard) var(--sw-motion-easing-enter) both;
}

.sw-profit-preset-status.is-customized {
    border-color: color-mix(in srgb, var(--sw-warning) 30%, var(--sw-border));
    background: color-mix(in srgb, var(--sw-warning-bg) 72%, var(--sw-bg-card));
}

.sw-profit-preset-status > div {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}

.sw-profit-preset-status strong,
.sw-profit-preset-status span {
    overflow-wrap: anywhere;
}

.sw-profit-preset-status > div span {
    color: var(--sw-text-secondary);
    font-size: 0.76rem;
}

.sw-profit-preset-icon {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sw-brand) 16%, transparent);
    color: var(--sw-brand-dark);
    font-weight: 800;
}

/* Product / Scenario name near top */
.sw-profit-name-row {
    margin-bottom: 1rem;
    max-width: 440px;
}

.sw-profit-name-row .form-label {
    font-weight: 600;
}

.sw-profit-input-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.sw-profit-input-row .form-control,
.sw-profit-input-row .form-select {
    min-width: 0;
    flex: 1 1 auto;
}

.sw-profit-input-row .form-control {
    border-radius: 0;
    position: relative;
    z-index: 1;
}

.sw-profit-input-row .form-control:first-child,
.sw-profit-input-row .form-select:first-child {
    border-top-left-radius: var(--sw-radius);
    border-bottom-left-radius: var(--sw-radius);
}

.sw-profit-input-row .form-control:last-child,
.sw-profit-input-row .form-select:last-child {
    border-top-right-radius: var(--sw-radius);
    border-bottom-right-radius: var(--sw-radius);
}

.sw-profit-input-adornment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding: 0 0.8rem;
    background: var(--sw-bg-subtle);
    color: var(--sw-text-secondary);
    border: 1px solid var(--sw-border);
    font-weight: 600;
    line-height: 1;
}

.sw-profit-input-adornment + .form-control,
.sw-profit-input-adornment + .form-select {
    border-left: 0;
}

.sw-profit-input-adornment:first-child {
    border-top-left-radius: var(--sw-radius);
    border-bottom-left-radius: var(--sw-radius);
}

.sw-profit-input-adornment--end {
    border-left: 0;
    border-top-right-radius: var(--sw-radius);
    border-bottom-right-radius: var(--sw-radius);
}

.sw-profit-input-adornment--suffix {
    border-left: 0;
    border-top-right-radius: var(--sw-radius);
    border-bottom-right-radius: var(--sw-radius);
}

.sw-profit-input-row--stepped .sw-profit-input-adornment,
.sw-profit-input-row--stepped .form-control {
    border-radius: 0 !important;
    border-left: 0;
}

.sw-profit-stepper-btn {
    flex: 0 0 auto;
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 3rem;
    border: 1px solid var(--sw-border);
    background: var(--sw-bg-subtle);
    color: var(--sw-text-secondary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.sw-profit-input-row--stepped .sw-profit-stepper-btn:first-child {
    border-top-left-radius: var(--sw-radius);
    border-bottom-left-radius: var(--sw-radius);
}

.sw-profit-input-row--stepped .sw-profit-stepper-btn:last-child {
    border-top-right-radius: var(--sw-radius);
    border-bottom-right-radius: var(--sw-radius);
    border-left: 0;
}

.sw-profit-sandbox .form-control,
.sw-profit-sandbox .form-select {
    min-height: 48px;
}

.sw-profit-stepper-mobile {
    display: flex;
}

.sw-profit-stepper-desktop {
    display: none;
}

.sw-profit-advanced-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.sw-profit-advanced-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid var(--sw-border);
    background: var(--sw-bg-subtle);
    color: var(--sw-brand-dark);
    font-weight: 700;
    font-size: 0.84rem;
    padding: 0.55rem 0.9rem;
    min-height: 44px;
    border-radius: var(--sw-radius-pill);
    box-shadow: var(--sw-shadow-sm);
    transition: background-color var(--sw-transition-fast), border-color var(--sw-transition-fast), color var(--sw-transition-fast), transform var(--sw-transition-fast), box-shadow var(--sw-transition-fast);
}

.sw-profit-advanced-chevron {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    transition: transform var(--sw-motion-duration-standard) var(--sw-motion-easing-standard);
}

.sw-profit-advanced-toggle[aria-expanded="true"] .sw-profit-advanced-chevron {
    transform: rotate(180deg);
}

.sw-profit-advanced-toggle:hover:not(:disabled),
.sw-profit-advanced-toggle:focus-visible {
    background: var(--sw-brand-bg);
    border-color: rgba(5, 150, 105, 0.28);
    color: var(--sw-brand-dark);
    transform: translateY(-1px);
    box-shadow: var(--sw-shadow);
}

.sw-profit-advanced-costs {
    display: grid;
    grid-template-rows: 0fr;
    border-top: 1px solid transparent;
    margin-inline: 1rem;
    margin-top: 0;
    opacity: 0;
    transition:
        grid-template-rows var(--sw-motion-duration-slow) var(--sw-motion-easing-standard),
        opacity var(--sw-motion-duration-standard) var(--sw-motion-easing-exit),
        border-color var(--sw-motion-duration-standard) var(--sw-motion-easing-standard),
        margin-top var(--sw-motion-duration-standard) var(--sw-motion-easing-standard);
}

.sw-profit-advanced-costs.is-open {
    grid-template-rows: 1fr;
    border-top-color: var(--sw-border-light);
    margin-top: 0.85rem;
    opacity: 1;
    transition-timing-function:
        var(--sw-motion-easing-enter),
        var(--sw-motion-easing-enter),
        var(--sw-motion-easing-standard),
        var(--sw-motion-easing-standard);
}

.sw-profit-advanced-costs-clip {
    min-height: 0;
    overflow: hidden;
}

.sw-profit-costs-card-body {
    display: grid;
    gap: 1rem;
    padding-top: 1.1rem;
}

.sw-profit-costs-grid {
    align-items: start;
    margin-bottom: 0;
}

.sw-profit-costs-footer {
    border-top: 1px solid var(--sw-border-light);
    margin-top: 0.1rem;
    padding-top: 0.9rem;
}

.sw-profit-advanced-costs-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1.1rem 0 1rem;
}

.sw-profit-advanced-costs.is-open .sw-profit-advanced-costs-body {
    animation: sw-profit-advanced-enter var(--sw-motion-duration-standard) var(--sw-motion-easing-enter) both;
}

.sw-profit-advanced-field {
    min-width: 0;
}

.sw-profit-fee-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sw-space-4);
    align-items: start;
}

.sw-profit-fee-field {
    min-width: 0;
}

@media (min-width: 1280px) {
    .sw-profit-fee-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.sw-profit-calculated-fee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2rem;
    margin-top: 0.45rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--sw-border-light);
    border-radius: var(--sw-radius-sm);
    background: var(--sw-bg-subtle);
    color: var(--sw-text-secondary);
    font-size: 0.74rem;
}

.sw-profit-calculated-fee strong {
    color: var(--sw-text-primary);
    font-variant-numeric: tabular-nums;
}

.sw-profit-marketplace-card #adFee[aria-invalid="true"] {
    border-color: var(--sw-loss);
}

.sw-profit-advanced-note {
    color: var(--sw-text-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.sw-profit-demo-cta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--sw-border-light);
    text-align: center;
}

.sw-profit-demo-cta-line {
    margin: 0;
    color: var(--sw-text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.sw-profit-demo-cta-button {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .sw-profit-demo-cta {
        flex-direction: column;
        gap: 0.65rem;
    }

    .sw-profit-demo-cta-line {
        white-space: normal;
    }
}

.sw-profit-product-alert {
    display: grid;
    gap: 0.65rem;
}

.sw-profit-product-alert-title {
    font-weight: 700;
}

.sw-profit-product-alert-copy {
    font-size: 0.84rem;
}

.sw-profit-product-alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Field hint text */
.sw-profit-field-hint {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--sw-text-muted);
    display: block;
    margin-top: 0.3rem;
}

.sw-profit-inline-warning {
    margin-top: 0.35rem;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--sw-warning);
}

label .sw-profit-field-hint {
    display: inline;
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Main Grid: single column by default ── */
.sw-profit-sandbox-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

/* ── Left: Inputs ── */
.sw-profit-inputs {
    min-width: 0;
}

.sw-profit-inputs .sw-card {
    margin-bottom: 0.85rem;
}

/* ── Right: Results Panel ── */
.sw-profit-results {
    min-width: 0;
}

.sw-profit-results > .sw-card {
    min-width: 0;
    margin-bottom: 0.75rem;
    overflow: clip;
}

.sw-profit-result-hero,
.sw-profit-guidance,
.sw-profit-hud {
    --sw-profit-state-color: var(--sw-text-secondary);
    --sw-profit-state-surface: var(--sw-bg-subtle);
    --sw-profit-state-border: var(--sw-border);
}

.sw-profit-result-hero.is-profit,
.sw-profit-guidance.is-profit,
.sw-profit-hud.is-profit {
    --sw-profit-state-color: var(--sw-profit);
    --sw-profit-state-surface: var(--sw-profit-bg);
    --sw-profit-state-border: color-mix(in srgb, var(--sw-profit) 42%, var(--sw-border));
}

.sw-profit-result-hero.is-loss,
.sw-profit-guidance.is-loss,
.sw-profit-hud.is-loss {
    --sw-profit-state-color: var(--sw-loss);
    --sw-profit-state-surface: var(--sw-loss-bg);
    --sw-profit-state-border: color-mix(in srgb, var(--sw-loss) 42%, var(--sw-border));
}

.sw-profit-result-hero.is-break-even,
.sw-profit-result-hero.is-near-break-even,
.sw-profit-guidance.is-break-even,
.sw-profit-guidance.is-near-break-even,
.sw-profit-hud.is-break-even,
.sw-profit-hud.is-near-break-even {
    --sw-profit-state-color: var(--sw-warning);
    --sw-profit-state-surface: var(--sw-warning-bg);
    --sw-profit-state-border: color-mix(in srgb, var(--sw-warning) 42%, var(--sw-border));
}

.sw-profit-result-hero {
    min-width: 0;
    margin-bottom: 0.75rem;
    padding: 1.15rem 1rem;
    scroll-margin-top: calc(var(--sw-header-height) + 1rem);
    overflow: clip;
    border: 1px solid var(--sw-profit-state-border);
    border-top: 0.25rem solid var(--sw-profit-state-color);
    border-radius: var(--sw-radius-lg);
    background-color: color-mix(in srgb, var(--sw-profit-state-surface) 74%, var(--sw-bg-card));
    box-shadow: var(--sw-shadow-sm);
    text-align: center;
    transition:
        background-color var(--sw-motion-duration-standard) var(--sw-motion-easing-standard),
        border-color var(--sw-motion-duration-standard) var(--sw-motion-easing-standard),
        box-shadow var(--sw-motion-duration-standard) var(--sw-motion-easing-standard);
}

.sw-profit-result-state-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.45rem;
    margin-bottom: 0.65rem;
    color: var(--sw-text-secondary);
    font-size: 0.72rem;
}

.sw-profit-result-state-line strong {
    color: var(--sw-profit-state-color);
    font-size: 0.76rem;
}

.sw-profit-state-indicator {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    flex: 0 0 0.625rem;
    border: 2px solid color-mix(in srgb, var(--sw-profit-state-color) 26%, transparent);
    border-radius: 50%;
    background: var(--sw-profit-state-color);
    background-clip: padding-box;
}

.sw-profit-result-hero .sw-profit-metric-label {
    margin-bottom: 0.25rem;
    color: var(--sw-text-secondary);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.sw-profit-result-hero .sw-profit-metric-primary {
    color: var(--sw-profit-state-color);
}

.sw-profit-result-message {
    max-width: 34rem;
    margin: 0.55rem auto 0;
    color: var(--sw-text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

.sw-profit-result-hero .sw-profit-empty-state {
    padding: 1.35rem 0.75rem;
    border: 0;
    background: transparent;
}

.sw-profit-result-hero .sw-profit-empty-state strong {
    display: block;
    color: var(--sw-text-primary);
}

.sw-profit-result-hero .sw-profit-empty-state p {
    margin: 0.35rem 0 0;
}

.sw-profit-guidance {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--sw-profit-state-border);
    border-radius: var(--sw-radius-md);
    background: color-mix(in srgb, var(--sw-profit-state-surface) 68%, var(--sw-bg-card));
}

.sw-profit-guidance-icon {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sw-profit-state-color) 14%, transparent);
    color: var(--sw-profit-state-color);
    font-weight: 800;
}

.sw-profit-guidance > div {
    min-width: 0;
}

.sw-profit-guidance strong {
    color: var(--sw-text-primary);
    font-size: 0.84rem;
}

.sw-profit-guidance p {
    margin: 0.15rem 0 0;
    color: var(--sw-text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
}

.sw-profit-guidance .btn,
.sw-profit-preset-status .btn,
.sw-profit-goal-card .btn {
    min-height: 44px;
}

.sw-profit-goal-recommendation {
    display: grid;
    gap: 0.1rem;
    margin-top: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-sm);
    background: var(--sw-neutral-50);
    color: var(--sw-text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
}

.sw-profit-goal-recommendation strong {
    color: var(--sw-text-primary);
    font-family: var(--sw-font-display);
    font-size: 1.05rem;
}

.sw-profit-goal-recommendation-label {
    color: var(--sw-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sw-profit-card-title,
.sw-profit-composition-header,
.sw-profit-goal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.sw-profit-card-title > div,
.sw-profit-composition-header > div,
.sw-profit-goal-header > div {
    min-width: 0;
}

.sw-profit-card-title h3,
.sw-profit-composition-header h3,
.sw-profit-goal-header h3 {
    margin: 0;
}

.sw-profit-card-title > span,
.sw-profit-composition-header > span,
.sw-profit-goal-header > span {
    color: var(--sw-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.sw-profit-composition-header p,
.sw-profit-goal-header p {
    margin: 0.2rem 0 0;
    color: var(--sw-text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
}

.sw-profit-composition-track {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 0.75rem;
    overflow: hidden;
    border-radius: var(--sw-radius-pill);
    background: var(--sw-bg-subtle);
    box-shadow: inset 0 0 0 1px var(--sw-border-light);
}

.sw-profit-composition-segment {
    flex: var(--sw-composition-weight) 1 0;
    min-width: 2px;
    background: var(--sw-composition-color, var(--sw-text-muted));
    transform-origin: left center;
    animation: sw-profit-composition-enter var(--sw-motion-duration-slow) var(--sw-motion-easing-enter) both;
    transition: flex-grow var(--sw-motion-duration-standard) var(--sw-motion-easing-standard);
}

.sw-profit-composition-segment + .sw-profit-composition-segment {
    box-shadow: -1px 0 0 var(--sw-bg-card);
}

.sw-profit-composition-segment.is-product,
.sw-profit-composition-swatch.is-product {
    --sw-composition-color: var(--sw-chart-slice-2);
}

.sw-profit-composition-segment.is-fees,
.sw-profit-composition-swatch.is-fees {
    --sw-composition-color: var(--sw-chart-slice-3);
}

.sw-profit-composition-segment.is-shipping,
.sw-profit-composition-swatch.is-shipping {
    --sw-composition-color: var(--sw-chart-slice-4);
}

.sw-profit-composition-segment.is-packaging,
.sw-profit-composition-swatch.is-packaging {
    --sw-composition-color: var(--sw-chart-slice-6);
}

.sw-profit-composition-segment.is-adjustments,
.sw-profit-composition-swatch.is-adjustments {
    --sw-composition-color: var(--sw-chart-slice-9);
}

.sw-profit-composition-segment.is-profit,
.sw-profit-composition-swatch.is-profit {
    --sw-composition-color: var(--sw-profit);
}

.sw-profit-composition-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.75rem;
    margin: 0.75rem 0 0;
}

.sw-profit-composition-legend > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
}

.sw-profit-composition-legend dt,
.sw-profit-composition-legend dd {
    margin: 0;
    font-size: 0.72rem;
}

.sw-profit-composition-legend dt {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    color: var(--sw-text-secondary);
}

.sw-profit-composition-legend dd {
    flex: 0 0 auto;
    color: var(--sw-text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sw-profit-composition-swatch {
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 0.55rem;
    border-radius: 50%;
    background: var(--sw-composition-color, var(--sw-text-muted));
}

.sw-profit-composition-empty {
    margin: 0;
    color: var(--sw-text-secondary);
    font-size: 0.78rem;
}

.sw-profit-save-product-panel {
    min-width: 0;
    margin-top: 1rem;
    overflow: clip;
}

/* Net Profit primary card */
.sw-profit-summary-card {
    border-radius: var(--sw-radius-lg);
    padding: 1.15rem 1rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.sw-profit-summary--profit {
    background: var(--sw-profit-bg);
    border: 2px solid var(--sw-profit);
}

.sw-profit-summary--loss {
    background: var(--sw-loss-bg);
    border: 2px solid var(--sw-loss);
}

.sw-profit-summary-card .sw-profit-metric-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

.sw-profit-summary--profit .sw-profit-metric-label {
    color: #065f46;
}

.sw-profit-summary--loss .sw-profit-metric-label {
    color: #991b1b;
}

.sw-profit-metric-primary {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    transform-origin: center;
}

.sw-profit-value-change {
    --sw-profit-value-y: var(--sw-motion-distance-sm);
    animation: sw-profit-value-change var(--sw-motion-duration-standard) var(--sw-motion-easing-enter) both;
}

.sw-profit-value-change[data-trend="down"] {
    --sw-profit-value-y: calc(-1 * var(--sw-motion-distance-sm));
}

.sw-profit-summary--profit .sw-profit-metric-primary {
    color: var(--sw-profit);
}

.sw-profit-summary--loss .sw-profit-metric-primary {
    color: var(--sw-loss);
}

/* Sub-metrics row: Margin, Profit/Item, Break-even */
.sw-profit-sub-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.sw-profit-sub-metric {
    background: var(--sw-bg-card);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    padding: 0.55rem 0.65rem;
    text-align: center;
}

.sw-profit-sub-metric--good {
    border-top: 3px solid var(--sw-profit);
}

.sw-profit-sub-metric.is-positive {
    border-top: 3px solid var(--sw-profit);
}

.sw-profit-sub-metric--bad {
    border-top: 3px solid var(--sw-loss);
}

.sw-profit-sub-metric.is-negative {
    border-top: 3px solid var(--sw-loss);
}

.sw-profit-sub-metric--warn {
    border-top: 3px solid var(--sw-warning);
}

.sw-profit-sub-metric.is-caution {
    border-top: 3px solid var(--sw-warning);
}

.sw-profit-sub-metric-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--sw-text-secondary);
    margin-bottom: 0.2rem;
}

.sw-profit-sub-metric-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sw-text-primary);
    line-height: 1.2;
}

.sw-profit-sub-metric--good .sw-profit-sub-metric-value {
    color: var(--sw-profit);
}

.sw-profit-sub-metric.is-positive .sw-profit-sub-metric-value {
    color: var(--sw-profit);
}

.sw-profit-sub-metric--bad .sw-profit-sub-metric-value {
    color: var(--sw-loss);
}

.sw-profit-sub-metric.is-negative .sw-profit-sub-metric-value {
    color: var(--sw-loss);
}

.sw-profit-sub-metric.is-caution .sw-profit-sub-metric-value {
    color: var(--sw-warning);
}

.sw-profit-sub-metric-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.62rem;
    line-height: 1.25;
    color: var(--sw-text-secondary);
}

/* Cue shown when a platform preset auto-fills the fee fields. */
.sw-profit-preset-hint {
    margin-top: 0.75rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--sw-radius-sm);
    background: var(--sw-brand-bg);
    color: var(--sw-brand-ink);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Dark mode keeps --sw-brand-ink dark, which would be unreadable on the dark
   brand-bg; use a light mint the same way the landing eyebrow does. */
[data-theme="dark"] .sw-profit-preset-hint {
    color: #a7f3d0;
}

/* Revenue & Costs detail rows */
.sw-profit-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--sw-border-light);
    font-size: 0.82rem;
}

.sw-profit-detail-row:last-child {
    border-bottom: none;
}

.sw-profit-detail-label {
    color: var(--sw-text-secondary);
}

.sw-profit-detail-value {
    font-weight: 600;
    color: var(--sw-text-primary);
}

.sw-profit-field-impact {
    animation: sw-profit-field-impact var(--sw-motion-duration-standard) var(--sw-motion-easing-enter) both;
}

.sw-profit-field-impact .form-control,
.sw-profit-field-impact .form-select,
.sw-profit-field-impact .sw-profit-input-row {
    transition: border-color var(--sw-transition-fast), box-shadow var(--sw-transition-fast);
}

.sw-profit-result-impact {
    animation: sw-profit-result-impact var(--sw-motion-duration-standard) var(--sw-motion-easing-standard) both;
}

/* Cost breakdown inside card */
.sw-profit-cost-list {
    background: var(--sw-bg-card);
    overflow: hidden;
}

.sw-profit-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 1rem;
    border-bottom: 1px solid var(--sw-border-light);
    font-size: 0.82rem;
}

.sw-profit-cost-row:last-child {
    border-bottom: none;
}

.sw-profit-cost-label {
    color: var(--sw-text-secondary);
}

.sw-profit-cost-amount {
    font-weight: 600;
    color: var(--sw-loss);
}

.sw-profit-cost-row--zero .sw-profit-cost-amount {
    color: var(--sw-text-muted);
    font-weight: 400;
}

.sw-profit-cost-row--total {
    border-top: 2px solid var(--sw-border);
}

.sw-profit-cost-row--total .sw-profit-cost-label {
    color: var(--sw-text-primary);
    font-weight: 700;
}

.sw-profit-cost-row--total .sw-profit-cost-amount {
    font-weight: 700;
    font-size: 0.87rem;
}

/* ── Verdict ── */
.sw-profit-verdict {
    border-radius: var(--sw-radius-lg);
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sw-profit-verdict-label {
    font-weight: 700;
    font-size: 0.85rem;
}

.sw-profit-verdict-text {
    font-size: 0.78rem;
    line-height: 1.4;
}

.sw-profit-verdict--good {
    background: var(--sw-profit-bg);
    border: 1px solid #bbf7d0;
    color: #065f46;
}

.sw-profit-verdict--caution {
    background: var(--sw-warning-bg);
    border: 1px solid #fde68a;
    color: #92400e;
}

.sw-profit-verdict--bad {
    background: var(--sw-loss-bg);
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* ── Warnings ── */
.sw-profit-warnings {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.sw-profit-warning-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: var(--sw-warning-bg);
    border: 1px solid #fde68a;
    border-radius: var(--sw-radius);
    font-size: 0.78rem;
    color: #92400e;
}

.sw-profit-warning-icon {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--sw-warning);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.sw-profit-warning-text {
    line-height: 1.35;
}

/* ── Empty State ── */
.sw-profit-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--sw-text-muted);
    background: var(--sw-bg-card);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-lg);
}

/* ── Action Row ── */
.sw-profit-action-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--sw-border);
    flex-wrap: wrap;
}

.sw-profit-action-save {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.sw-profit-action-error {
    width: 100%;
    font-size: 0.8rem;
    color: var(--sw-loss);
    margin-top: 0.35rem;
}

/* ── Mobile Sticky Bottom Bar ── */
.sw-profit-mobile-sticky {
    display: none;
    grid-template-rows: 0fr auto;
    position: fixed;
    left: max(0.75rem, env(safe-area-inset-left));
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: 0.75rem;
    z-index: 89;
    width: auto;
    max-width: 42rem;
    max-height: calc(100dvh - var(--sw-header-height) - 1.5rem);
    margin-inline: auto;
    border: 1px solid var(--sw-profit-state-border);
    border-radius: var(--sw-radius-lg);
    background: color-mix(in srgb, var(--sw-bg-card) 90%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: var(--sw-shadow-lg);
    color: var(--sw-text-primary);
    overflow: hidden;
    opacity: 0;
    transform: translateY(calc(100% + var(--sw-motion-distance-md)));
    pointer-events: none;
    transition:
        grid-template-rows var(--sw-motion-duration-slow) var(--sw-motion-easing-standard),
        border-color var(--sw-motion-duration-standard) var(--sw-motion-easing-standard),
        border-radius var(--sw-motion-duration-standard) var(--sw-motion-easing-standard),
        opacity var(--sw-motion-duration-standard) var(--sw-motion-easing-exit),
        transform var(--sw-motion-duration-standard) var(--sw-motion-easing-exit);
}

.sw-profit-form-error {
    display: grid;
    gap: 0.15rem;
    margin: 0 0 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--sw-loss) 38%, var(--sw-border));
    border-radius: var(--sw-radius-md);
    background: color-mix(in srgb, var(--sw-loss-bg) 76%, var(--sw-bg-card));
    color: var(--sw-text-primary);
}

.sw-profit-form-error strong {
    color: var(--sw-loss);
    font-size: 0.8rem;
}

.sw-profit-form-error span {
    color: var(--sw-text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
}

.sw-profit-comparison {
    min-width: 0;
    overflow: clip;
}

.sw-profit-comparison .sw-profit-card-title .btn {
    min-width: 44px;
    min-height: 44px;
}

.sw-profit-comparison-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
    animation: sw-profit-status-enter var(--sw-motion-duration-standard) var(--sw-motion-easing-enter) both;
}

.sw-profit-comparison-summary {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-md);
    background: var(--sw-bg-subtle);
    transition:
        background-color var(--sw-motion-duration-standard) var(--sw-motion-easing-standard),
        border-color var(--sw-motion-duration-standard) var(--sw-motion-easing-standard),
        box-shadow var(--sw-motion-duration-standard) var(--sw-motion-easing-standard);
}

.sw-profit-comparison-summary.is-winner {
    border-color: color-mix(in srgb, var(--sw-profit) 42%, var(--sw-border));
    background: color-mix(in srgb, var(--sw-profit-bg) 72%, var(--sw-bg-card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-profit) 14%, transparent);
}

.sw-profit-comparison-summary span,
.sw-profit-comparison-summary small {
    overflow: hidden;
    color: var(--sw-text-secondary);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-profit-comparison-summary strong {
    overflow: hidden;
    color: var(--sw-text-primary);
    font-family: var(--sw-font-numeric);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-profit-comparison-summary.is-winner strong {
    color: var(--sw-profit);
}

.sw-profit-comparison-editor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 0.75rem;
    min-width: 0;
}

.sw-profit-comparison-editor > div {
    min-width: 0;
}

.sw-profit-comparison-table {
    max-width: 100%;
    margin-top: 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.sw-profit-comparison-table table {
    min-width: 32rem;
    margin-bottom: 0;
}

.sw-profit-mobile-sticky.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-timing-function:
        var(--sw-motion-easing-standard),
        var(--sw-motion-easing-standard),
        var(--sw-motion-easing-standard),
        var(--sw-motion-easing-enter),
        var(--sw-motion-easing-enter);
}

.sw-profit-mobile-sticky.is-expanded,
.sw-profit-mobile-sticky.sw-profit-mobile-sticky--expanded {
    grid-template-rows: 1fr auto;
    border-radius: var(--sw-radius-lg);
}

.sw-profit-mobile-sticky.is-hidden,
.sw-profit-mobile-sticky--away {
    transform: translateY(calc(100% + var(--sw-motion-distance-md)));
    opacity: 0;
    pointer-events: none;
}

.sw-profit-mobile-sticky-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 0.4rem 0.65rem;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    border: 0;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--sw-transition-fast);
}

.sw-profit-mobile-sticky-toggle:hover,
.sw-profit-mobile-sticky-toggle:focus-visible {
    background: color-mix(in srgb, var(--sw-profit-state-surface) 54%, transparent);
}

.sw-profit-hud-primary,
.sw-profit-mobile-sticky-margin,
.sw-profit-hud-break-even {
    display: grid;
    min-width: 0;
    gap: 0.05rem;
}

.sw-profit-hud-primary small,
.sw-profit-mobile-sticky-margin small,
.sw-profit-hud-break-even small {
    color: var(--sw-text-muted);
    font-size: 0.62rem;
    font-weight: 650;
    line-height: 1.1;
    white-space: nowrap;
}

.sw-profit-hud-primary strong,
.sw-profit-mobile-sticky-margin strong,
.sw-profit-hud-break-even strong {
    overflow: hidden;
    font-family: var(--sw-font-numeric);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-profit-hud-primary strong {
    color: var(--sw-profit-state-color);
    font-size: clamp(1rem, 4.5vw, 1.2rem);
}

.sw-profit-hud-affordance {
    color: var(--sw-brand);
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
}

.sw-profit-mobile-sticky-profit,
.sw-profit-mobile-sticky-margin,
.sw-profit-mobile-sticky-cta {
    font-weight: 700;
    transition: color var(--sw-transition-fast);
}

.sw-profit-mobile-sticky-sep {
    color: var(--sw-text-muted);
    margin: 0 0.35rem;
}

.sw-profit-mobile-sticky-chevron {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--sw-text-muted);
    transition: transform var(--sw-motion-duration-standard) var(--sw-motion-easing-standard);
}

.sw-profit-mobile-sticky.is-expanded .sw-profit-mobile-sticky-chevron,
.sw-profit-mobile-sticky--expanded .sw-profit-mobile-sticky-chevron {
    transform: rotate(180deg);
}

.sw-profit-mobile-sticky-sheet {
    display: grid;
    align-content: start;
    min-height: 0;
    max-height: none;
    padding: 0 1rem;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--sw-motion-duration-fast) var(--sw-motion-easing-exit),
        padding var(--sw-motion-duration-standard) var(--sw-motion-easing-standard),
        visibility 0s linear var(--sw-motion-duration-standard);
}

.sw-profit-mobile-sticky.is-expanded .sw-profit-mobile-sticky-sheet,
.sw-profit-mobile-sticky--expanded .sw-profit-mobile-sticky-sheet {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    border-bottom: 1px solid var(--sw-border);
    padding: 0.85rem 1rem 0.65rem;
    opacity: 1;
    visibility: visible;
    transition:
        opacity var(--sw-motion-duration-standard) var(--sw-motion-easing-enter),
        padding var(--sw-motion-duration-standard) var(--sw-motion-easing-standard),
        visibility 0s linear 0s;
}

.sw-profit-hud-sheet-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    margin-bottom: 0.65rem;
}

.sw-profit-hud-sheet-heading > div {
    display: grid;
    min-width: 0;
    gap: 0.05rem;
}

.sw-profit-hud-sheet-heading strong {
    color: var(--sw-profit-state-color);
    font-size: 0.82rem;
}

.sw-profit-hud-sheet-heading span:last-child {
    overflow: hidden;
    color: var(--sw-text-secondary);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-profit-hud-collapse {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--sw-border);
    border-radius: 50%;
    background: var(--sw-bg-card);
    color: var(--sw-text-secondary);
    cursor: pointer;
}

.sw-profit-hud-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin: 0;
}

.sw-profit-hud-grid > div {
    min-width: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--sw-border-light);
    border-radius: var(--sw-radius-sm);
    background: color-mix(in srgb, var(--sw-bg-subtle) 68%, transparent);
}

.sw-profit-hud-grid-wide {
    grid-column: 1 / -1;
}

.sw-profit-hud-grid dt,
.sw-profit-hud-grid dd {
    margin: 0;
}

.sw-profit-hud-grid dt {
    color: var(--sw-text-secondary);
    font-size: 0.65rem;
}

.sw-profit-hud-grid dd {
    margin-top: 0.12rem;
    overflow: hidden;
    color: var(--sw-text-primary);
    font-family: var(--sw-font-numeric);
    font-size: 0.82rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-profit-mobile-sticky-row {
    display: contents;
}

.sw-profit-mobile-sticky-row > span:first-child {
    color: var(--sw-text-secondary);
}

.sw-profit-mobile-sticky-row > span:last-child {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    transition: color var(--sw-transition-fast);
}

.sw-profit-mobile-sticky-goal {
    grid-column: 1 / -1;
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 0.15rem;
}

.sw-profit-mobile-sticky-link {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.45rem;
    border: 0;
    background: transparent;
    color: var(--sw-brand);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem;
    text-align: center;
    cursor: pointer;
}

@keyframes sw-profit-pop {
    0% {
        transform: scale(0.96);
    }
    65% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

/* ── Dark Mode: Profit Sandbox ── */
[data-theme="dark"] .sw-profit-summary--profit {
    background: #0d3320;
    border-color: #14532d;
}

[data-theme="dark"] .sw-profit-summary--profit .sw-profit-metric-label {
    color: #86efac;
}

[data-theme="dark"] .sw-profit-summary--loss {
    background: #3b1111;
    border-color: #7f1d1d;
}

[data-theme="dark"] .sw-profit-summary--loss .sw-profit-metric-label {
    color: #fca5a5;
}

[data-theme="dark"] .sw-profit-verdict--good {
    background: #0d3320;
    border-color: #14532d;
    color: #86efac;
}

[data-theme="dark"] .sw-profit-verdict--caution {
    background: #332b00;
    border-color: #665600;
    color: #fcd34d;
}

[data-theme="dark"] .sw-profit-verdict--bad {
    background: #3b1111;
    border-color: #7f1d1d;
    color: #fca5a5;
}

[data-theme="dark"] .sw-profit-warning-item {
    background: #332b00;
    border-color: #665600;
    color: #fcd34d;
}

[data-theme="dark"] .sw-profit-inline-warning {
    color: #fcd34d;
}

[data-theme="dark"] .sw-profit-sub-metric,
[data-theme="dark"] .sw-profit-detail-row,
[data-theme="dark"] .sw-profit-cost-list {
    background-color: var(--sw-bg-card);
    border-color: var(--sw-border);
}

[data-theme="dark"] .sw-profit-cost-row {
    border-color: var(--sw-border);
}

[data-theme="dark"] .sw-profit-cost-row--total {
    border-color: var(--sw-border);
}

[data-theme="dark"] .sw-profit-cost-row--zero .sw-profit-cost-amount {
    color: var(--sw-text-muted);
}

[data-theme="dark"] .sw-profit-mobile-sticky {
    background-color: color-mix(in srgb, var(--sw-bg-card) 92%, transparent);
    border-color: var(--sw-profit-state-border);
}

[data-theme="dark"] .sw-profit-empty-state {
    background-color: var(--sw-bg-card);
    border-color: var(--sw-border);
}

[data-theme="dark"] .sw-profit-input-adornment {
    background: #151b2a;
    border-color: var(--sw-border);
    color: var(--sw-text-secondary);
}

[data-theme="dark"] .sw-profit-stepper-btn {
    background: #151b2a;
    border-color: var(--sw-border);
    color: var(--sw-text-secondary);
}

[data-theme="dark"] .sw-profit-advanced-toggle {
    background: var(--sw-bg-card);
    border-color: var(--sw-border);
    color: var(--sw-brand-light);
}

[data-theme="dark"] .sw-profit-advanced-toggle:hover:not(:disabled),
[data-theme="dark"] .sw-profit-advanced-toggle:focus-visible {
    background: var(--sw-bg-subtle);
    color: #a7f3d0;
    border-color: rgba(16, 185, 129, 0.28);
}

[data-theme="dark"] .sw-profit-advanced-costs.is-open {
    border-top-color: var(--sw-border);
}

[data-theme="dark"] .sw-profit-costs-footer {
    border-top-color: var(--sw-border);
}

[data-theme="dark"] .sw-profit-demo-cta {
    border-top-color: var(--sw-border);
}

[data-theme="dark"] .sw-profit-eyebrow,
[data-theme="dark"] .sw-profit-section-tag {
    background: color-mix(in srgb, var(--sw-brand) 16%, var(--sw-bg-card));
    color: color-mix(in srgb, var(--sw-brand-light) 70%, var(--sw-text-primary));
}

[data-theme="dark"] .sw-profit-section-tag--common {
    background: var(--sw-bg-subtle);
    color: var(--sw-text-secondary);
}

[data-theme="dark"] .sw-profit-preset-status {
    background: color-mix(in srgb, var(--sw-brand) 12%, var(--sw-bg-card));
}

[data-theme="dark"] .sw-profit-preset-status.is-customized {
    background: color-mix(in srgb, var(--sw-warning-bg) 74%, var(--sw-bg-card));
}

[data-theme="dark"] .sw-profit-result-hero.is-profit,
[data-theme="dark"] .sw-profit-guidance.is-profit,
[data-theme="dark"] .sw-profit-hud.is-profit {
    --sw-profit-state-color: color-mix(in srgb, var(--sw-profit) 72%, var(--sw-text-primary));
}

[data-theme="dark"] .sw-profit-result-hero.is-break-even,
[data-theme="dark"] .sw-profit-result-hero.is-near-break-even,
[data-theme="dark"] .sw-profit-guidance.is-break-even,
[data-theme="dark"] .sw-profit-guidance.is-near-break-even,
[data-theme="dark"] .sw-profit-hud.is-break-even,
[data-theme="dark"] .sw-profit-hud.is-near-break-even {
    --sw-profit-state-color: color-mix(in srgb, var(--sw-warning) 65%, var(--sw-text-primary));
}

[data-theme="dark"] .sw-profit-result-hero,
[data-theme="dark"] .sw-profit-guidance,
[data-theme="dark"] .sw-profit-hud-grid > div,
[data-theme="dark"] .sw-profit-hud-collapse {
    border-color: var(--sw-profit-state-border, var(--sw-border));
}

[data-theme="dark"] .sw-inventory-tabs {
    background: rgba(24, 29, 41, 0.92);
    border-color: rgba(71, 85, 105, 0.42);
}

[data-theme="dark"] .sw-inventory-tab {
    color: #cbd5e1;
}

[data-theme="dark"] .sw-inventory-tab span {
    background: rgba(71, 85, 105, 0.42);
    color: #e2e8f0;
}

[data-theme="dark"] .sw-inventory-tab:hover,
[data-theme="dark"] .sw-inventory-tab:focus-visible {
    color: #ecfdf5;
    background: rgba(16, 185, 129, 0.12);
}

[data-theme="dark"] .sw-inventory-tab.is-active {
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.96);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.14);
}

[data-theme="dark"] .sw-inventory-tab.is-active span {
    background: rgba(16, 185, 129, 0.18);
    color: #a7f3d0;
}

[data-theme="dark"] .sw-actions-menu-item-danger {
    color: #fca5a5;
}

[data-theme="dark"] .sw-actions-menu-item-danger:hover {
    background: rgba(239, 68, 68, 0.18);
}

[data-theme="dark"] .marginmetric-mobile-tabbar {
    background: rgba(9, 18, 15, 0.94);
    border-top-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .marginmetric-mobile-tabbar-item {
    color: var(--sw-text-sidebar);
}

[data-theme="dark"] .marginmetric-mobile-tabbar-item:hover,
[data-theme="dark"] .marginmetric-mobile-tabbar-item:focus-visible,
[data-theme="dark"] .marginmetric-mobile-tabbar-item.active {
    color: #d1fae5;
}

[data-theme="dark"] .marginmetric-mobile-tabbar-item.active .marginmetric-mobile-tabbar-icon,
[data-theme="dark"] .marginmetric-mobile-tabbar-item:hover .marginmetric-mobile-tabbar-icon,
[data-theme="dark"] .marginmetric-mobile-tabbar-item:focus-visible .marginmetric-mobile-tabbar-icon {
    background: rgba(16, 185, 129, 0.18);
}

@media (min-width: 769px) {
    .marginmetric-layout[data-sidebar-collapsed="true"] .marginmetric-sidebar {
        left: calc(-1 * var(--sw-sidebar-width)) !important;
    }

    .marginmetric-layout[data-sidebar-collapsed="true"] .marginmetric-content {
        margin-left: 0 !important;
    }

    .marginmetric-layout[data-sidebar-collapsed="true"] .marginmetric-header {
        padding-left: 1rem !important;
    }

    .marginmetric-layout[data-sidebar-collapsed="true"] .marginmetric-hamburger {
        display: inline-flex;
    }

    .marginmetric-layout[data-sidebar-collapsed="true"] .marginmetric-header-brand {
        display: inline-flex;
    }

    .marginmetric-layout[data-sidebar-collapsed="true"] .marginmetric-header {
        gap: 1.25rem;
    }
}

@media (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
    .marginmetric-sidebar {
        width: min(84vw, 19rem) !important;
        left: calc(-1 * min(84vw, 19rem)) !important;
        box-shadow: var(--sw-shadow-lg);
    }

    .marginmetric-sidebar.open {
        left: 0 !important;
    }

    .marginmetric-sidebar-toggle {
        display: none !important;
    }

    .marginmetric-sidebar-backdrop {
        display: block !important;
    }

    .marginmetric-sidebar-backdrop.visible {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .marginmetric-content {
        margin-left: 0 !important;
        padding-bottom: 1rem !important;
    }

    .marginmetric-mobile-tabbar {
        display: none !important;
    }

    .marginmetric-header-brand {
        display: inline-flex !important;
    }

    .marginmetric-hamburger {
        display: inline-flex !important;
    }
}

html[data-keyboard-open="true"] .sw-profit-hud,
.marginmetric-layout[data-sidebar-open="true"] .sw-profit-hud,
body:has(.confirm-overlay) .sw-profit-hud,
body:has(.modal-backdrop) .sw-profit-hud,
body:has(.modal.show) .sw-profit-hud,
body.modal-open .sw-profit-hud {
    opacity: 0;
    transform: translateY(calc(100% + var(--sw-motion-distance-md)));
    visibility: hidden;
    pointer-events: none;
}

.marginmetric-layout[data-reduce-motion="true"] .sw-profit-advanced-costs,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-advanced-costs-body,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-advanced-chevron,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-result-hero,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-value-change,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-field-impact,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-result-impact,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-cost-impact,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-composition-segment,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-preset-status,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-comparison-cards,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-comparison-summary,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-hud,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-hud-details,
.marginmetric-layout[data-reduce-motion="true"] .sw-profit-mobile-sticky-chevron {
    animation: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .sw-profit-advanced-costs,
    .sw-profit-advanced-costs-body,
    .sw-profit-advanced-chevron,
    .sw-profit-result-hero,
    .sw-profit-value-change,
    .sw-profit-field-impact,
    .sw-profit-result-impact,
    .sw-profit-cost-impact,
    .sw-profit-composition-segment,
    .sw-profit-preset-status,
    .sw-profit-comparison-cards,
    .sw-profit-comparison-summary,
    .sw-profit-hud,
    .sw-profit-hud-details,
    .sw-profit-mobile-sticky-chevron {
        animation: none !important;
        transition: none !important;
    }
}

/* ──── Profit Sandbox Responsive ──── */

/* Mobile: stacked calculator layout */
@media (max-width: 1023px) {
    .sw-profit-sandbox-grid {
        grid-template-columns: 1fr;
    }

    .sw-profit-mobile-sticky {
        display: grid;
        bottom: calc(0.75rem + env(safe-area-inset-bottom));
        border-radius: var(--sw-radius-lg);
        margin-inline: auto;
    }

    .sw-profit-mobile-sticky.is-expanded,
    .sw-profit-mobile-sticky.sw-profit-mobile-sticky--expanded {
        border-radius: var(--sw-radius-lg);
    }

    .sw-profit-action-row {
        flex-direction: column;
        padding-bottom: calc(var(--sw-tabbar-height) + 1.2rem);
    }

    .sw-profit-action-row .btn {
        width: 100%;
        min-height: 2.75rem;
        font-size: 0.9rem;
    }

    .sw-profit-action-save {
        margin-left: 0;
        width: 100%;
    }

    .sw-profit-action-save .btn {
        width: 100%;
    }

    .sw-profit-sub-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sw-profit-advanced-costs-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Small phone refinements */
@media (max-width: 420px) {
    .sw-profit-metric-primary {
        font-size: 2rem;
    }

    .sw-profit-summary-card {
        padding: 1.25rem 1rem;
    }

    .sw-profit-sub-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .sw-profit-mobile-sticky-toggle {
        grid-template-columns: auto minmax(0, 1fr) auto auto auto;
        gap: 0.35rem 0.5rem;
        padding-inline: 0.6rem;
    }

    .sw-profit-hud-affordance {
        display: none;
    }

    .sw-profit-composition-legend,
    .sw-profit-comparison-cards {
        grid-template-columns: 1fr;
    }

    .sw-profit-action-row {
        padding-bottom: calc(var(--sw-tabbar-height) + 1.4rem);
    }

    .sw-local-pref-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .sw-local-pref-controls {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .sw-profit-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .sw-profit-intro-actions {
        align-items: stretch;
        width: 100%;
    }

    .sw-profit-flow {
        justify-content: flex-start;
    }

    .sw-profit-reset-action {
        align-self: flex-start;
    }

    .sw-profit-section-header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sw-profit-section-tag,
    .sw-profit-advanced-toggle {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .sw-profit-preset-status,
    .sw-profit-guidance {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sw-profit-preset-status .btn,
    .sw-profit-guidance .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .sw-profit-costs-card-body {
        gap: 0.85rem;
        padding-top: 1rem;
    }

    .sw-profit-costs-footer {
        padding-top: 0.8rem;
    }

    .sw-profit-advanced-costs {
        margin-inline: 0.85rem;
    }

    .sw-profit-stepper-mobile {
        display: flex;
    }

    .sw-profit-stepper-desktop {
        display: none;
    }

    .sw-profit-advanced-costs-body {
        grid-template-columns: 1fr;
    }

    .sw-profit-mobile-sticky {
        bottom: calc(var(--sw-tabbar-height) + env(safe-area-inset-bottom) + 0.5rem);
        max-height: min(70dvh, calc(100dvh - var(--sw-header-height) - var(--sw-tabbar-height) - env(safe-area-inset-bottom) - 1rem));
    }

    .sw-profit-advanced-header {
        align-items: start;
    }

    .sw-profit-advanced-toggle {
        width: 100%;
    }

    .sw-settings-collapsible-summary {
        flex-direction: column;
    }

    .sw-settings-collapsible-summary .btn {
        width: 100%;
    }

    .sw-settings-fee-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .sw-settings-fee-actions .btn,
    .sw-settings-fee-actions .badge {
        width: fit-content;
    }

    .sw-settings-shell {
        grid-template-columns: 1fr;
    }

    .sw-settings-nav {
        position: static;
    }

    .sw-settings-section-grid,
    .dashboard-loading-grid {
        grid-template-columns: 1fr;
    }
}

/* Desktop: two-column layout at 1024px+ */
@media (min-width: 1024px) {
    .sw-profit-sandbox-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(300px, 320px);
        gap: 1rem;
    }

    .sw-profit-results {
        position: sticky;
        top: calc(var(--sw-header-height) + 1.5rem);
    }

    .sw-profit-mobile-sticky {
        display: none;
    }

    .sw-profit-stepper-mobile {
        display: none;
    }

    .sw-profit-stepper-desktop {
        display: flex;
    }

    .sw-profit-action-row {
        flex-direction: row;
    }

    .sw-profit-action-row .btn {
        min-height: 2.5rem;
    }

    .sw-profit-action-save {
        margin-left: auto;
    }

    .sw-profit-action-save .btn {
        min-width: 180px;
    }

}

/* Large desktop: wider results panel */
@media (min-width: 1440px) {
    .sw-profit-sandbox-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(320px, 360px);
    }
}

/* ──── Focus-Visible Hygiene ──── */

/* Nav links */
.marginmetric-nav a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--sw-brand-light) inset;
}

/* Main app form inputs and selects */
.form-control:focus-visible,
.form-select:focus-visible,
.sw-form-input:focus-visible {
    outline: none;
    border-color: var(--sw-brand);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
}

/* Checkboxes */
.form-check-input:focus-visible,
.sw-form-checkbox-input:focus-visible {
    outline: 2px solid var(--sw-brand);
    outline-offset: 1px;
}

/* Generic page links */
a:focus-visible {
    outline: 2px solid var(--sw-brand);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Auth links */
.sw-auth-link:focus-visible {
    outline: 2px solid var(--sw-brand-light);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ──── Identity and account experience ──── */

.sw-identity-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--sw-font);
    color: var(--sw-text-primary);
    background:
        radial-gradient(circle at 8% 12%, var(--sw-brand-bg), transparent 32rem),
        linear-gradient(145deg, var(--sw-bg-page), var(--sw-bg-card));
}

.sw-identity-header,
.sw-identity-footer {
    width: min(100% - 2rem, 1240px);
    margin-inline: auto;
    display: flex;
    align-items: center;
}

.sw-identity-header {
    min-height: 72px;
    justify-content: space-between;
    gap: 1rem;
    /* Size container: brand swaps banner<->icon based on available header room. */
    container: identity-header / inline-size;
}

.sw-identity-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--sw-text-primary);
    font-family: var(--sw-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
}

/* Height-based sizing keeps the banner aspect-correct and crisp; width follows. */
.sw-identity-brand-mark {
    display: none;
    /* Match landing/app banner presence; scales up on desktop. */
    height: clamp(2.35rem, 5.5vw, 3.4rem);
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
}

.sw-identity-brand-mark--desktop {
    display: inline-block;
}

.sw-identity-brand-mark--mobile {
    height: clamp(2.3rem, 6vw, 2.85rem);
}

/* The auth header has fewer actions, so banner branding fits on most phones. */
@container identity-header (max-width: 17rem) {
    .sw-identity-brand-mark--desktop {
        display: none;
    }

    .sw-identity-brand-mark--mobile {
        display: inline-block;
    }
}

/* Match the landing and app dark-mode logo treatment. */
[data-theme="dark"] .sw-identity-brand-mark {
    filter: brightness(0) invert(1);
}

.sw-identity-header-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.sw-identity-back-link,
.sw-identity-theme-toggle {
    min-height: var(--sw-shell-header-mobile-control-height);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.5rem;
    border: none;
    background: none;
    color: var(--sw-text-secondary);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
}

.sw-identity-back-link:hover,
.sw-identity-theme-toggle:hover {
    color: var(--sw-brand-dark);
}

.sw-identity-theme-toggle span:last-child {
    color: var(--sw-brand-dark);
}

.sw-identity-main {
    width: min(100% - 2rem, 1240px);
    margin: auto;
    padding: clamp(1.5rem, 5vh, 4.5rem) 0;
}

.sw-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 500px);
    align-items: center;
    gap: clamp(2rem, 7vw, 7rem);
}

.sw-auth-context {
    max-width: 590px;
}

.sw-auth-eyebrow {
    display: inline-flex;
    padding: 0.4rem 0.7rem;
    border-radius: var(--sw-radius-pill);
    color: var(--sw-brand-ink);
    background: var(--sw-brand-bg);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sw-auth-context h2 {
    max-width: 12ch;
    margin: 1rem 0;
    color: var(--sw-text-primary);
    font-family: var(--sw-font-display);
    font-size: clamp(2.6rem, 6vw, 5.25rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.sw-auth-context > p {
    max-width: 52ch;
    margin: 0;
    color: var(--sw-text-secondary);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.65;
}

.sw-auth-benefits {
    display: grid;
    gap: 0.65rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.sw-auth-benefits li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--sw-text-primary);
    font-weight: 650;
}

.sw-auth-benefits li::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    flex: 0 0 auto;
    border: 3px solid var(--sw-bg-card);
    border-radius: 50%;
    background: var(--sw-brand);
    box-shadow: 0 0 0 1px var(--sw-brand);
}

.sw-auth-stage {
    min-width: 0;
}

.sw-auth-card,
.sw-auth-stage:not(:has(.sw-auth-card)) {
    width: 100%;
    box-sizing: border-box;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border: 1px solid var(--sw-border);
    border-radius: clamp(var(--sw-radius-lg), 3vw, 24px);
    background: var(--sw-bg-card);
    box-shadow: var(--sw-shadow-lg);
}

.sw-auth-title,
.sw-auth-stage > h1 {
    margin: 0 0 0.45rem;
    color: var(--sw-text-primary);
    font-family: var(--sw-font-display);
    font-size: clamp(1.75rem, 3vw, 2.2rem);
    letter-spacing: -0.035em;
}

.sw-auth-subtitle {
    margin-bottom: 1.75rem;
    font-size: 0.95rem;
    line-height: 1.55;
}

.sw-auth-form {
    gap: 0.25rem;
}

.sw-auth-title {
    margin: 0 0 0.4rem;
    color: var(--sw-text-primary);
    font-family: var(--sw-font-display);
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: 0;
    text-align: center;
}

.sw-auth-subtitle {
    margin: 0 auto 1.5rem;
    max-width: 27rem;
    color: var(--sw-text-secondary);
    font-size: 1rem;
    line-height: 1.55;
    text-align: center;
}

.sw-form-group {
    margin-bottom: 0.85rem;
}

.sw-form-input,
.sw-manage-content .form-control {
    min-height: 46px;
    padding: 0.7rem 0.85rem;
}

.sw-form-input:disabled,
.sw-manage-content .form-control:disabled {
    color: var(--sw-text-muted);
    background: var(--sw-neutral-100);
    cursor: not-allowed;
}

.sw-auth-submit {
    min-height: 56px;
    margin-top: 0.75rem;
    background: var(--sw-gradient-cta);
    box-shadow: var(--sw-shadow-brand);
}

.sw-auth-links {
    margin-top: 0.8rem;
    text-align: center;
}

.sw-auth-action-row,
.sw-manage-actions,
.sw-auth-provider-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sw-auth-action-row > *,
.sw-auth-provider-list > * {
    flex: 1 1 10rem;
}

.sw-auth-provider-list {
    flex-direction: column;
    margin-top: 0.25rem;
}

.sw-auth-provider-list > * {
    flex: 0 0 auto;
}

.sw-auth-provider-button {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 2rem;
    align-items: center;
    min-height: 56px;
    padding-inline: 1rem;
    width: 100%;
    border-radius: 999px;
    border-color: var(--sw-border);
    background: var(--sw-bg-card);
    box-shadow: var(--sw-shadow-sm);
    font-size: 1rem;
}

.sw-auth-provider-button:hover,
.sw-auth-provider-button:focus-visible {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: var(--sw-shadow-md);
}

.sw-auth-provider-mark {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: var(--sw-brand);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
}

.sw-auth-provider-button > span:last-child {
    min-width: 0;
    font-weight: 650;
    text-align: center;
}

.sw-auth-provider-mark--google {
    background:
        conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0 100%);
    color: #fff;
}

.sw-auth-provider-mark--microsoft {
    background:
        linear-gradient(#f25022 0 0) left top / calc(50% - 1px) calc(50% - 1px) no-repeat,
        linear-gradient(#7fba00 0 0) right top / calc(50% - 1px) calc(50% - 1px) no-repeat,
        linear-gradient(#00a4ef 0 0) left bottom / calc(50% - 1px) calc(50% - 1px) no-repeat,
        linear-gradient(#ffb900 0 0) right bottom / calc(50% - 1px) calc(50% - 1px) no-repeat;
    border-radius: 0.45rem;
    color: transparent;
}

.sw-auth-provider-mark--default {
    background: rgba(16, 185, 129, 0.12);
    color: var(--sw-brand);
}

.sw-auth-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.25rem 0;
    color: var(--sw-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sw-auth-divider span {
    color: var(--sw-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sw-auth-divider::before,
.sw-auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--sw-border);
}

.sw-auth-development-link {
    color: var(--sw-text-muted);
    font-size: 0.8rem;
}

.sw-auth-stage > hr,
.sw-manage-content hr {
    border: 0;
    border-top: 1px solid var(--sw-border);
}

.sw-auth-stage > .row,
.sw-auth-stage > .row > [class*="col-"],
.sw-manage-content > .row,
.sw-manage-content > .row > [class*="col-"] {
    display: block;
    width: 100%;
}

.sw-auth-stage .form-floating,
.sw-manage-content .form-floating {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

.sw-auth-stage .form-floating label,
.sw-manage-content .form-floating label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    color: var(--sw-text-primary);
    font-size: 0.85rem;
    font-weight: 650;
    transform: none;
}

.sw-identity-footer {
    min-height: 64px;
    justify-content: flex-end;
    gap: 1rem;
    color: var(--sw-text-muted);
    font-size: 0.78rem;
}

.sw-identity-footer a {
    color: var(--sw-text-secondary);
    text-decoration: none;
}

.sw-identity-footer a:hover {
    color: var(--sw-brand);
}

.sw-manage-layout {
    padding: 0;
}

.sw-manage-container {
    width: min(100%, 1120px);
    margin-inline: auto;
}

.sw-manage-hero {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.sw-manage-hero h1 {
    margin: 0.75rem 0 0.35rem;
    font-family: var(--sw-font-display);
    font-size: clamp(2rem, 5vw, 3.4rem);
    letter-spacing: -0.045em;
}

.sw-manage-hero p,
.sw-manage-page-header p {
    margin: 0;
    color: var(--sw-text-secondary);
    line-height: 1.55;
}

.sw-manage-row {
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
}

.sw-manage-nav {
    position: sticky;
    top: 1rem;
    margin: 0;
    padding: 0.75rem;
}

.sw-manage-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sw-manage-nav-label {
    margin: 0.55rem 0.75rem 0.35rem;
    color: var(--sw-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sw-manage-nav-label:not(:first-child) {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--sw-border-light);
}

.sw-manage-nav-link {
    min-height: 42px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.sw-manage-nav-link.active {
    color: var(--sw-text-sidebar-active);
    background: var(--sw-gradient-cta);
    box-shadow: var(--sw-shadow-brand);
}

.sw-manage-nav-link-danger {
    color: var(--sw-loss);
}

.sw-manage-nav-link-danger:hover {
    color: var(--sw-loss);
    background: var(--sw-loss-bg);
}

.sw-manage-page-header {
    margin-bottom: 1rem;
}

.sw-manage-page-header h2,
.sw-manage-content > h3 {
    margin: 0 0 0.35rem;
    color: var(--sw-text-primary);
    font-family: var(--sw-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.025em;
}

.sw-manage-card,
.sw-manage-content > .row .card {
    max-width: 760px;
    box-sizing: border-box;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-lg);
    background: var(--sw-bg-card);
    box-shadow: var(--sw-shadow);
}

.sw-manage-content > .row .card-body {
    padding: 0;
}

.sw-manage-actions {
    align-items: center;
    margin-top: 0.5rem;
}

.sw-manage-info-list {
    color: var(--sw-text-secondary);
    line-height: 1.65;
}

.sw-manage-info-list ul,
ul.sw-manage-info-list {
    padding-left: 1.2rem;
}

.sw-manage-danger-card {
    border-color: var(--sw-loss);
}

.sw-manage-danger-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    border-radius: var(--sw-radius);
    color: var(--sw-loss);
    background: var(--sw-loss-bg);
}

.sw-manage-danger-heading h3,
.sw-manage-danger-heading p {
    margin: 0;
}

.sw-manage-danger-heading p {
    margin-top: 0.2rem;
    font-size: 0.85rem;
}

.sw-manage-danger-mark {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 2px solid var(--sw-loss);
    border-radius: 50%;
    font-weight: 850;
}

[data-theme="dark"] .sw-identity-page {
    background:
        radial-gradient(circle at 8% 12%, var(--sw-brand-bg), transparent 30rem),
        linear-gradient(145deg, var(--sw-bg-page), var(--sw-bg-card));
}

[data-theme="dark"] .sw-auth-eyebrow {
    color: var(--sw-brand-light);
}

[data-theme="dark"] .sw-identity-theme-toggle span:last-child,
[data-theme="dark"] .sw-identity-back-link:hover,
[data-theme="dark"] .sw-identity-theme-toggle:hover {
    color: var(--sw-brand-light);
}

@media (max-width: 900px) {
    .sw-auth-shell {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .sw-auth-context {
        max-width: 640px;
        text-align: center;
        margin-inline: auto;
    }

    .sw-auth-context h2 {
        max-width: none;
        font-size: clamp(2rem, 9vw, 3.35rem);
    }

    .sw-auth-context > p {
        margin-inline: auto;
    }

    .sw-auth-benefits {
        display: none;
    }

    .sw-auth-stage {
        width: min(100%, 520px);
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .sw-identity-header {
        width: 100%;
        height: var(--sw-shell-header-mobile-height);
        min-height: var(--sw-shell-header-mobile-height);
        box-sizing: border-box;
        align-items: flex-end;
        padding: 0 var(--sw-shell-header-mobile-inline-inset) var(--sw-shell-header-mobile-bottom-inset);
    }

    .sw-identity-brand-mark {
        height: var(--sw-shell-header-mobile-brand-height);
    }

    .sw-identity-theme-toggle span:first-child {
        display: none;
    }

    .sw-identity-main {
        padding: var(--sw-space-page-top-mobile) 0 1.5rem;
    }

    .sw-auth-shell {
        gap: 1rem;
    }

    .sw-auth-context h2 {
        margin: 0.6rem 0;
    }

    .sw-auth-card,
    .sw-auth-stage:not(:has(.sw-auth-card)) {
        padding: 1.5rem 1.25rem;
    }

    .sw-auth-title {
        font-size: clamp(1.95rem, 7vw, 2.45rem);
    }

    .sw-auth-subtitle {
        margin-bottom: 1.2rem;
        font-size: 0.95rem;
    }

    .sw-auth-submit,
    .sw-auth-provider-button {
        min-height: 52px;
    }

    .sw-manage-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .sw-manage-nav {
        position: static;
    }

    .sw-manage-nav ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem;
    }

    .sw-manage-nav li + li {
        margin-top: 0;
    }

    .sw-manage-nav-link {
        justify-content: center;
        text-align: center;
    }

    .sw-manage-actions > * {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .sw-identity-header,
    .sw-identity-footer {
        width: min(100% - 1rem, 1240px);
    }

    .sw-identity-main {
        width: min(100% - 2rem, 1240px);
    }

    .sw-identity-brand {
        font-size: 1rem;
        gap: 0.4rem;
    }

    .sw-identity-brand span {
        display: none;
    }

    .sw-identity-back-link,
    .sw-identity-theme-toggle {
        min-height: var(--sw-shell-header-mobile-control-height);
        padding: 0.4rem 0.55rem;
        font-size: 0.72rem;
    }

    .sw-auth-context p {
        display: none;
    }

    .sw-auth-context h2 {
        font-size: clamp(1.8rem, 10vw, 2.65rem);
    }

    .sw-auth-card,
    .sw-auth-stage:not(:has(.sw-auth-card)) {
        padding: 1.2rem 0.95rem;
        border-radius: var(--sw-radius-lg);
    }

    .sw-auth-title {
        font-size: clamp(1.8rem, 9vw, 2.2rem);
    }

    .sw-auth-subtitle {
        font-size: 0.9rem;
    }

    .sw-form-input,
    .sw-manage-content .form-control {
        min-height: 44px;
        padding: 0.62rem 0.75rem;
    }

    .sw-auth-submit {
        margin-top: 0.65rem;
    }

    .sw-auth-provider-button {
        grid-template-columns: 1.75rem minmax(0, 1fr) 1.75rem;
        padding-inline: 0.85rem;
        font-size: 0.94rem;
    }

    .sw-auth-provider-mark {
        width: 1.75rem;
        height: 1.75rem;
        flex-basis: 1.75rem;
    }

    .sw-identity-footer {
        justify-content: center;
    }

    .sw-auth-shell {
        gap: 0.85rem;
    }

    .sw-auth-context h2 {
        font-size: clamp(1.75rem, 10vw, 2.25rem);
    }

    .sw-auth-card,
    .sw-auth-stage:not(:has(.sw-auth-card)) {
        padding: 1rem 0.9rem;
        border-radius: var(--sw-radius);
    }

    .sw-auth-title,
    .sw-auth-stage > h1 {
        font-size: clamp(1.55rem, 8vw, 2rem);
    }

    .sw-auth-subtitle {
        font-size: 0.85rem;
    }

    .sw-auth-provider-button {
        font-size: 0.9rem;
        grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
        padding-inline: 0.75rem;
    }

    .sw-auth-provider-mark {
        width: 1.5rem;
        height: 1.5rem;
        flex-basis: 1.5rem;
    }

    .sw-identity-header {
        width: 100%;
        min-height: var(--sw-shell-header-mobile-height);
    }

    .sw-identity-header-actions {
        gap: 0.25rem;
    }

    .sw-identity-back-link,
    .sw-identity-theme-toggle {
        padding-inline: 0.45rem;
        font-size: 0.68rem;
    }
}

@media (max-width: 360px) {
    .sw-identity-brand span {
        display: none;
    }

    .sw-identity-brand {
        gap: 0;
    }
}

/* Theme toggle and header buttons */
.theme-toggle-btn:focus-visible,
.marginmetric-hamburger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--sw-brand);
}

/* Toast close button */
.toast-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
    opacity: 1;
}

@keyframes sw-profit-advanced-enter {
    from {
        opacity: 0;
        transform: translateY(calc(-1 * var(--sw-motion-distance-sm)));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sw-profit-status-enter {
    from {
        opacity: 0;
        transform: translateY(var(--sw-motion-distance-sm));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sw-profit-value-change {
    from {
        opacity: 0.72;
        transform: translateY(var(--sw-profit-value-y));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sw-profit-composition-enter {
    from {
        opacity: 0.7;
        transform: scaleX(0.86);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes sw-profit-field-impact {
    from {
        opacity: 0.82;
        transform: translateY(var(--sw-motion-distance-sm));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sw-profit-result-impact {
    from {
        background-color: color-mix(in srgb, var(--sw-brand-bg) 72%, var(--sw-bg-card));
        transform: translateX(var(--sw-motion-distance-sm));
    }
    to {
        background-color: transparent;
        transform: translateX(0);
    }
}

@keyframes sw-profit-cost-impact {
    from {
        background-color: color-mix(in srgb, var(--sw-warning-bg) 72%, var(--sw-bg-card));
        transform: translateX(var(--sw-motion-distance-sm));
    }
    to {
        background-color: transparent;
        transform: translateX(0);
    }
}

.sw-profit-cost-impact {
    animation: sw-profit-cost-impact var(--sw-motion-duration-standard) var(--sw-motion-easing-standard) both;
}

/* ──── Reduced Motion ──── */

/* A single restrained entrance language keeps Welcome -> Identity -> app
   navigation feeling like one product. The route wrapper is keyed in
   MainLayout so this replays on app navigation without animating each card. */
@keyframes sw-content-enter {
    from {
        opacity: 0;
        transform: translateY(0.35rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sw-content-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sw-surface-pop {
    from {
        opacity: 0;
        transform: translateY(-0.25rem) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.marginmetric-route-content,
.sw-auth-stage {
    min-width: 0;
    animation: sw-content-enter var(--sw-transition-spring) backwards;
}

/* Keep viewport-fixed tools fixed while the surrounding route enters. */
.marginmetric-route-content:has(.sw-profit-hud) {
    animation-name: sw-content-fade;
}

/* Theme changes use the browser's view-transition snapshot where available.
   The class-based fallback still softens the high-contrast surface changes. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--sw-transition-theme-duration);
    animation-timing-function: var(--sw-transition-theme-easing);
}

html.sw-theme-transitioning body,
html.sw-theme-transitioning .landing-shell,
html.sw-theme-transitioning .marginmetric-content,
html.sw-theme-transitioning .marginmetric-header,
html.sw-theme-transitioning .marginmetric-sidebar,
html.sw-theme-transitioning .sw-identity-page,
html.sw-theme-transitioning .card,
html.sw-theme-transitioning .sw-card,
html.sw-theme-transitioning .metric-card,
html.sw-theme-transitioning .dashboard-chart-card,
html.sw-theme-transitioning .sw-auth-card,
html.sw-theme-transitioning .btn,
html.sw-theme-transitioning .form-control,
html.sw-theme-transitioning .form-select,
html.sw-theme-transitioning .mm-theme-switch-track {
    transition-property: background-color, border-color, color, box-shadow, fill, stroke;
    transition-duration: var(--sw-transition-theme-duration);
    transition-timing-function: var(--sw-transition-theme-easing);
}

/* ──── Landing-match refresh ────
   Brings the /welcome landing feel (gradient shell, dot-grid, glass cards,
   brand-tinted shadows, springy CTAs) into the authenticated app + Identity
   shell. Tokens live in :root / [data-theme="dark"]; rules sit after the
   dark-theme block so glass surfaces win in both themes. */

/* One atmospheric shell contract for Welcome, Identity, and the app: the
   same emerald field and 22px dot rhythm, subtle in light mode and more
   luminous in dark mode. */
.marginmetric-content {
    position: relative;
    background: var(--sw-bg-shell);
}

.marginmetric-content::before,
.sw-identity-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--sw-shell-dot) 1.1px, transparent 1.2px);
    background-size: var(--sw-shell-dot-size);
    -webkit-mask-image: var(--sw-shell-dot-mask);
    mask-image: var(--sw-shell-dot-mask);
    opacity: var(--sw-shell-dot-opacity);
    pointer-events: none;
    z-index: 0;
}

.marginmetric-main {
    position: relative;
    z-index: 1;
}

.sw-auth-layout {
    background: var(--sw-bg-shell);
}

.sw-identity-page {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background: var(--sw-bg-shell);
}

.sw-identity-header,
.sw-identity-main,
.sw-identity-footer {
    position: relative;
    z-index: 1;
}

/* Glass card surfaces (top-level cards only; inner tables/forms stay opaque) */
.card,
.sw-card,
.sw-auth-card,
.sw-manage-nav {
    background: var(--sw-card-glass);
    border-color: var(--sw-card-border-glass);
    border-radius: var(--sw-radius-xl);
    box-shadow: var(--sw-shadow-float);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.card-header,
.sw-card-header {
    background: transparent;
    border-bottom-color: var(--sw-card-border-glass);
    border-radius: var(--sw-radius-xl) var(--sw-radius-xl) 0 0;
}

[data-theme="dark"] .card,
[data-theme="dark"] .sw-card,
[data-theme="dark"] .sw-auth-card,
[data-theme="dark"] .sw-manage-nav {
    background: var(--sw-card-glass);
    border-color: var(--sw-card-border-glass);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .sw-card-header {
    background: transparent;
    border-bottom-color: var(--sw-card-border-glass);
}

/* Metric cards: keep the radial accent, layer it over a translucent base */
.metric-card {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.78));
    border-radius: var(--sw-radius-xl);
}

.metric-card:hover {
    box-shadow: var(--sw-shadow-float);
}

[data-theme="dark"] .metric-card {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.10), transparent 32%),
        linear-gradient(180deg, rgba(26, 29, 39, 0.92), rgba(34, 38, 57, 0.86));
}

/* Header: translucent with blur, softened border */
.marginmetric-header {
    background: var(--sw-header-glass);
    box-shadow: inset 0 -1px var(--sw-card-border-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

[data-theme="dark"] .marginmetric-header {
    background-color: var(--sw-header-glass);
    box-shadow: inset 0 -1px var(--sw-border);
}

/* Sidebar: active item gets the landing CTA gradient + brand glow */
.marginmetric-nav a.active {
    background: var(--sw-gradient-cta);
    box-shadow: var(--sw-shadow-brand);
}

/* Springy CTA feedback on primary/success buttons (landing parity) */
.btn-primary,
.btn-success {
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s, transform var(--sw-transition-spring);
}

.btn-primary:hover:not(:disabled),
.btn-success:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.02);
}

.btn-primary:active:not(:disabled),
.btn-success:active:not(:disabled) {
    transform: scale(0.97);
}

/* Display-type tracking on page titles (landing headings use -0.04/-0.05em) */
.marginmetric-page-title h2,
.sw-page-header h2,
.sw-auth-card-title {
    font-family: var(--sw-font-display);
    letter-spacing: -0.04em;
}

/* Pill chips: metric badges pick up the landing 999px chip radius */
.metric-badge {
    border-radius: var(--sw-radius-pill);
    padding: 0.15em 0.6em;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.01ms !important;
    }
}

/* ──── Admin console ──── */

.admin-layout {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow-x: clip;
    color: var(--sw-text-primary);
    background: var(--sw-bg-shell);
}

.admin-layout,
.admin-layout *,
.admin-layout *::before,
.admin-layout *::after {
    box-sizing: border-box;
}

.admin-layout::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--sw-shell-dot) 1.1px, transparent 1.2px);
    background-size: var(--sw-shell-dot-size);
    -webkit-mask-image: var(--sw-shell-dot-mask);
    mask-image: var(--sw-shell-dot-mask);
    opacity: var(--sw-shell-dot-opacity);
}

.admin-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--sw-header-height);
    padding: 0 1.5rem;
    background: var(--sw-header-glass);
    border-bottom: 1px solid var(--sw-card-border-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.admin-header-left,
.admin-header-right,
.admin-page-actions {
    display: flex;
    align-items: center;
}

.admin-header-left {
    min-width: 0;
    gap: 0.7rem;
}

.admin-header-right {
    flex: 0 0 auto;
    gap: 0.7rem;
}

.admin-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.admin-brand img {
    display: block;
    width: auto;
    height: 2rem;
}

[data-theme="dark"] .admin-brand img {
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .admin-badge,
[data-theme="dark"] .admin-nav-link--app,
[data-theme="dark"] .admin-subnav a.active {
    color: var(--sw-text-primary);
}

[data-theme="dark"] .admin-eyebrow,
[data-theme="dark"] .admin-card-kicker,
[data-theme="dark"] .admin-link-card-kicker,
[data-theme="dark"] .admin-link-card-action,
[data-theme="dark"] .admin-inline-note strong {
    color: var(--sw-brand-light);
}

.admin-badge,
.admin-section-badge,
.admin-health-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    border-radius: var(--sw-radius-pill);
    white-space: nowrap;
}

.admin-badge {
    padding: 0.24rem 0.58rem;
    color: var(--sw-brand-ink);
    background: var(--sw-brand-bg);
    border: 1px solid color-mix(in srgb, var(--sw-brand) 28%, transparent);
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sw-shell-header-mobile-control-height);
    height: var(--sw-shell-header-mobile-control-height);
    padding: 0;
    color: var(--sw-text-secondary);
    background: var(--sw-bg-card);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius);
    cursor: pointer;
    transition: color var(--sw-transition-fast), background var(--sw-transition-fast), border-color var(--sw-transition-fast), transform var(--sw-transition-spring);
}

.admin-theme-toggle:hover {
    color: var(--sw-brand-dark);
    background: var(--sw-brand-bg);
    border-color: var(--sw-brand);
    transform: translateY(-1px);
}

.admin-theme-toggle:focus-visible,
.admin-nav-link:focus-visible,
.admin-subnav a:focus-visible,
.admin-link-card:focus-visible {
    outline: 2px solid var(--sw-brand);
    outline-offset: 2px;
}

.admin-theme-toggle svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.125rem;
    padding: 0.38rem 0.7rem;
    color: var(--sw-text-secondary);
    border-radius: var(--sw-radius-sm);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 650;
    transition: color var(--sw-transition-fast), background var(--sw-transition-fast);
}

.admin-nav-link:hover {
    color: var(--sw-text-primary);
    background: var(--sw-bg-subtle);
}

.admin-nav-link--app {
    color: var(--sw-brand-dark);
    background: var(--sw-brand-bg);
}

.admin-subnav {
    position: sticky;
    top: var(--sw-header-height);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 3.25rem;
    padding: 0 1.5rem;
    overflow-x: auto;
    background: var(--sw-card-glass);
    border-bottom: 1px solid var(--sw-card-border-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    scrollbar-width: none;
}

.admin-subnav::-webkit-scrollbar {
    display: none;
}

.admin-subnav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.45rem 0.8rem;
    color: var(--sw-text-secondary);
    border-radius: var(--sw-radius-pill);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 650;
    white-space: nowrap;
    transition: color var(--sw-transition-fast), background var(--sw-transition-fast), box-shadow var(--sw-transition-fast);
}

.admin-subnav a:hover {
    color: var(--sw-text-primary);
    background: var(--sw-bg-subtle);
}

.admin-subnav a.active {
    color: var(--sw-brand-ink);
    background: var(--sw-brand-bg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sw-brand) 18%, transparent);
}

.admin-main {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: var(--sw-space-page-top) var(--sw-space-page-inline) 2rem;
}

.admin-route-content {
    min-width: 0;
    animation: sw-content-enter var(--sw-transition-spring) backwards;
}

.admin-overview-shell {
    display: grid;
    gap: var(--sw-space-section);
}

.admin-eyebrow,
.admin-card-kicker {
    color: var(--sw-brand-dark);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.admin-eyebrow {
    display: block;
    margin-bottom: 0.2rem;
}

.admin-page-title-row,
.admin-table-toolbar,
.admin-section-heading-row,
.admin-card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-page-actions {
    flex: 0 0 auto;
    gap: 0.7rem;
}

.admin-updated-at {
    flex: 0 0 auto;
    color: var(--sw-text-muted);
    font-size: 0.76rem;
}

.admin-section {
    min-width: 0;
}

.admin-section-heading-row {
    align-items: flex-end;
    margin-bottom: var(--sw-space-section-header);
}

.admin-section-heading-row h3,
.admin-card-header-row h3,
.admin-safety-note h3 {
    margin: 0;
    color: var(--sw-text-primary);
    font-family: var(--sw-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.admin-section-heading-row p,
.admin-card-copy {
    margin: 0.2rem 0 0;
    color: var(--sw-text-muted);
    font-size: 0.78rem;
}

.admin-section-badge {
    flex: 0 0 auto;
    padding: 0.2rem 0.58rem;
    color: var(--sw-text-secondary);
    background: var(--sw-bg-subtle);
    font-size: 0.68rem;
    font-weight: 650;
}

.admin-card {
    min-width: 0;
    padding: 1.25rem;
    background: var(--sw-card-glass);
    border: 1px solid var(--sw-card-border-glass);
    border-radius: var(--sw-radius-xl);
    box-shadow: var(--sw-shadow-float);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.admin-card h5 {
    margin: 0 0 1rem;
    color: var(--sw-text-primary);
    font-family: var(--sw-font-display);
    font-size: 0.98rem;
    font-weight: 700;
}

.admin-card-header-row {
    align-items: flex-start;
}

.admin-card-kicker {
    display: block;
    margin-bottom: 0.2rem;
}

.admin-card-copy {
    margin-bottom: 1rem;
}

.admin-card-total,
.admin-trend-summary strong {
    color: var(--sw-text-primary);
    font-family: var(--sw-font-display);
    font-variant-numeric: tabular-nums;
}

.admin-card-total {
    font-size: 1.65rem;
    line-height: 1;
}

.admin-status-panel {
    display: grid;
    grid-template-columns: minmax(15rem, 0.9fr) minmax(0, 1.6fr);
    gap: 1.4rem;
    padding: 1.3rem 1.4rem;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--sw-brand) 12%, transparent), transparent 45%),
        var(--sw-card-glass);
    border: 1px solid var(--sw-card-border-glass);
    border-left: 3px solid var(--sw-neutral-500);
    border-radius: var(--sw-radius-xl);
    box-shadow: var(--sw-shadow-float);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.admin-status-panel.is-healthy {
    border-left-color: var(--sw-profit);
}

.admin-status-panel.is-warning {
    border-left-color: var(--sw-warning);
}

.admin-status-panel.is-danger {
    border-left-color: var(--sw-loss);
}

.admin-status-summary {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.admin-status-summary > div {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-status-summary p {
    margin: 0.3rem 0 0;
    color: var(--sw-text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.admin-status-icon {
    position: relative;
    flex: 0 0 auto;
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0.2rem;
    background: var(--sw-neutral-500);
    border: 0.24rem solid color-mix(in srgb, var(--sw-neutral-500) 18%, transparent);
    border-radius: var(--sw-radius-pill);
    background-clip: padding-box;
}

.admin-status-panel.is-healthy .admin-status-icon {
    background-color: var(--sw-profit);
    border-color: color-mix(in srgb, var(--sw-profit) 18%, transparent);
}

.admin-status-panel.is-warning .admin-status-icon {
    background-color: var(--sw-warning);
    border-color: color-mix(in srgb, var(--sw-warning) 18%, transparent);
}

.admin-status-panel.is-danger .admin-status-icon {
    background-color: var(--sw-loss);
    border-color: color-mix(in srgb, var(--sw-loss) 18%, transparent);
}

.admin-health-badge {
    padding: 0.22rem 0.58rem;
    font-size: 0.68rem;
    font-weight: 700;
}

.admin-health-badge.is-healthy {
    color: var(--sw-profit);
    background: var(--sw-profit-bg);
}

.admin-health-badge.is-warning {
    color: var(--sw-warning);
    background: var(--sw-warning-bg);
}

.admin-health-badge.is-danger {
    color: var(--sw-loss);
    background: var(--sw-loss-bg);
}

.admin-health-badge.is-neutral {
    color: var(--sw-text-secondary);
    background: var(--sw-bg-subtle);
}

.admin-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--sw-border-light);
    border-radius: var(--sw-radius-lg);
    overflow: hidden;
}

.admin-status-detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.75rem 0.85rem;
    background: color-mix(in srgb, var(--sw-bg-card) 72%, transparent);
    border-right: 1px solid var(--sw-border-light);
}

.admin-status-detail:last-child {
    border-right: 0;
}

.admin-status-detail span,
.admin-volume-item span {
    color: var(--sw-text-secondary);
    font-size: 0.67rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-status-detail strong {
    margin: 0.18rem 0;
    overflow: hidden;
    color: var(--sw-text-primary);
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-status-detail small,
.admin-volume-item small {
    color: var(--sw-text-muted);
    font-size: 0.67rem;
}

.admin-kpi-grid,
.admin-stat-grid {
    display: grid;
    gap: 0.85rem;
}

.admin-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-kpi-grid .metric-card {
    min-height: 8.6rem;
}

.admin-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 8.5rem;
    padding: 1.1rem;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--sw-brand) 12%, transparent), transparent 34%),
        var(--sw-card-glass);
    border: 1px solid var(--sw-card-border-glass);
    border-top: 3px solid var(--sw-brand);
    border-radius: var(--sw-radius-xl);
    box-shadow: var(--sw-shadow-sm);
}

.admin-stat-card span {
    color: var(--sw-text-secondary);
    font-size: 0.76rem;
    font-weight: 650;
}

.admin-stat-card strong {
    margin: 0.35rem 0;
    color: var(--sw-text-primary);
    font-family: var(--sw-font-display);
    font-size: 1.8rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.admin-stat-card small {
    margin-top: auto;
    color: var(--sw-text-muted);
    font-size: 0.72rem;
}

.admin-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.85fr);
    gap: 1rem;
}

.admin-analytics-grid--balanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-trend-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
}

.admin-trend-summary strong {
    font-size: 1.4rem;
    line-height: 1;
}

.admin-trend-summary span {
    margin-top: 0.18rem;
    color: var(--sw-text-muted);
    font-size: 0.67rem;
}

.admin-activity-chart {
    display: flex;
    align-items: flex-end;
    gap: clamp(0.15rem, 0.55vw, 0.38rem);
    height: 9.5rem;
    padding: 0.7rem 0.2rem 0;
    border-bottom: 1px solid var(--sw-border);
    background: repeating-linear-gradient(
        to top,
        transparent,
        transparent calc(25% - 1px),
        var(--sw-border-light) 25%
    );
}

.admin-activity-column {
    display: flex;
    align-items: flex-end;
    flex: 1 1 0;
    height: 100%;
    min-width: 0.16rem;
}

.admin-activity-bar {
    display: block;
    width: 100%;
    height: var(--admin-bar-height);
    min-height: 0.2rem;
    background: var(--sw-gradient-cta);
    border-radius: var(--sw-radius-pill) var(--sw-radius-pill) 0 0;
    opacity: 0.88;
    transition: opacity var(--sw-transition-fast), transform var(--sw-transition-fast);
}

.admin-activity-column:hover .admin-activity-bar {
    opacity: 1;
    transform: scaleX(1.12);
}

.admin-chart-axis,
.admin-chart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-chart-axis {
    padding-top: 0.35rem;
    color: var(--sw-text-muted);
    font-size: 0.64rem;
}

.admin-chart-footer {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.8rem;
    color: var(--sw-text-secondary);
    font-size: 0.72rem;
}

.admin-chart-footer strong {
    color: var(--sw-text-primary);
    font-variant-numeric: tabular-nums;
}

.admin-chart-footer .is-positive {
    color: var(--sw-profit);
}

.admin-chart-footer .is-negative {
    color: var(--sw-warning);
}

.admin-chart-footer .is-neutral {
    color: var(--sw-text-muted);
}

.admin-progress-list {
    display: grid;
    gap: 1rem;
}

.admin-progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
    color: var(--sw-text-secondary);
    font-size: 0.76rem;
}

.admin-progress-label strong {
    color: var(--sw-text-primary);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.admin-progress-track {
    height: 0.48rem;
    overflow: hidden;
    background: var(--sw-bg-subtle);
    border-radius: var(--sw-radius-pill);
}

.admin-progress-track span {
    display: block;
    width: var(--admin-progress);
    height: 100%;
    background: var(--sw-gradient-cta);
    border-radius: inherit;
}

.admin-volume-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.admin-volume-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.85rem;
    background: var(--sw-bg-subtle);
    border: 1px solid var(--sw-border-light);
    border-radius: var(--sw-radius-lg);
}

.admin-volume-item strong {
    margin: 0.25rem 0;
    color: var(--sw-text-primary);
    font-family: var(--sw-font-display);
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
}

.admin-inline-note {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    color: var(--sw-text-muted);
    border-top: 1px solid var(--sw-border-light);
    font-size: 0.75rem;
}

.admin-inline-note strong {
    color: var(--sw-brand-dark);
    font-family: var(--sw-font-display);
    font-size: 1.05rem;
}

.admin-attention-list {
    display: grid;
}

.admin-attention-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.72rem 0;
    border-bottom: 1px solid var(--sw-border-light);
}

.admin-attention-row:last-child {
    border-bottom: 0;
}

.admin-attention-row > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-attention-row strong {
    color: var(--sw-text-primary);
    font-size: 0.78rem;
}

.admin-attention-row small {
    overflow: hidden;
    color: var(--sw-text-muted);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-attention-row > span:last-child {
    color: var(--sw-text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.admin-attention-dot {
    width: 0.58rem;
    height: 0.58rem;
    background: var(--sw-neutral-500);
    border-radius: var(--sw-radius-pill);
}

.admin-attention-dot.is-healthy {
    background: var(--sw-profit);
}

.admin-attention-dot.is-warning {
    background: var(--sw-warning);
}

.admin-attention-dot.is-danger {
    background: var(--sw-loss);
}

.admin-attention-dot.is-neutral {
    background: var(--sw-neutral-500);
}

.admin-home-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-link-card {
    display: flex;
    flex-direction: column;
    min-height: 11rem;
    padding: 1.25rem;
    color: var(--sw-text-secondary);
    background: var(--sw-card-glass);
    border: 1px solid var(--sw-card-border-glass);
    border-radius: var(--sw-radius-xl);
    box-shadow: var(--sw-shadow-sm);
    text-decoration: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: border-color var(--sw-transition-fast), box-shadow var(--sw-transition-smooth), transform var(--sw-transition-spring);
}

.admin-link-card:hover {
    color: var(--sw-text-secondary);
    border-color: var(--sw-brand);
    box-shadow: var(--sw-shadow-float);
    transform: translateY(-2px);
}

.admin-link-card-kicker {
    margin-bottom: 0.55rem;
    color: var(--sw-brand-dark);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-link-card strong {
    margin-bottom: 0.45rem;
    color: var(--sw-text-primary);
    font-family: var(--sw-font-display);
    font-size: 1.02rem;
}

.admin-link-card-action {
    margin-top: auto;
    padding-top: 1rem;
    color: var(--sw-brand-dark);
    font-size: 0.8rem;
    font-weight: 700;
}

.admin-safety-note {
    color: var(--sw-text-secondary);
    border-left: 3px solid var(--sw-brand);
}

.admin-safety-note h3 {
    margin-bottom: 0.35rem;
}

.admin-safety-note p {
    color: var(--sw-text-secondary);
    font-size: 0.8rem;
}

.admin-search {
    width: min(20rem, 100%);
}

.admin-table-scroll {
    margin-top: 1rem;
    overflow-x: auto;
}

.admin-users-table {
    min-width: 52rem;
    font-size: 0.84rem;
}

.admin-status-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.admin-empty-state {
    padding: 1.5rem 0 0.4rem;
    color: var(--sw-text-muted);
    text-align: center;
}

.admin-info-list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem 1rem;
    margin: 0;
    font-size: 0.84rem;
}

.admin-info-list dt {
    color: var(--sw-text-secondary);
    font-weight: 600;
}

.admin-info-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--sw-text-primary);
}

.admin-health-empty {
    padding: 1rem;
    color: var(--sw-text-muted);
    background: var(--sw-bg-subtle);
    border: 1px dashed var(--sw-border);
    border-radius: var(--sw-radius-lg);
    font-size: 0.78rem;
    text-align: center;
}

@media (max-width: 980px) {
    .admin-status-panel,
    .admin-analytics-grid,
    .admin-analytics-grid--balanced {
        grid-template-columns: 1fr;
    }

    .admin-kpi-grid,
    .admin-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-status-detail:nth-child(2) {
        border-right: 0;
    }

    .admin-status-detail:nth-child(-n + 2) {
        border-bottom: 1px solid var(--sw-border-light);
    }
}

@media (max-width: 760px) {
    .admin-header {
        height: var(--sw-shell-header-mobile-height);
        padding: 0 var(--sw-space-page-inline-mobile);
    }

    .admin-brand img {
        width: auto;
        height: 1.75rem;
        max-width: none;
    }

    .admin-header-right {
        gap: 0.3rem;
    }

    .admin-nav-link--app {
        display: none;
    }

    .admin-nav-link {
        min-height: var(--sw-shell-header-mobile-control-height);
        padding-inline: 0.5rem;
    }

    .admin-subnav {
        top: var(--sw-shell-header-mobile-height);
        min-height: 3rem;
        gap: 0.1rem;
        padding: 0 0.5rem;
    }

    .admin-subnav a {
        padding-inline: 0.55rem;
        font-size: 0.78rem;
    }

    .admin-main {
        padding: var(--sw-space-page-top-mobile) var(--sw-space-page-inline-mobile) 1.25rem;
    }

    .admin-overview-shell {
        gap: var(--sw-space-section-mobile);
    }

    .admin-page-title-row,
    .admin-table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-page-actions {
        justify-content: space-between;
        width: 100%;
    }

    .admin-section-heading-row {
        align-items: flex-start;
    }

    .admin-kpi-grid,
    .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-home-grid {
        grid-template-columns: 1fr;
    }

    .admin-link-card {
        min-height: 9.5rem;
    }

    .admin-search {
        width: 100%;
    }
}

@media (max-width: 350px) {
    .admin-badge {
        display: none;
    }

    .admin-brand img {
        height: 1.65rem;
    }
}

@media (max-width: 520px) {
    .admin-badge {
        padding-inline: 0.42rem;
        font-size: 0.58rem;
    }

    .admin-nav-link {
        font-size: 0.76rem;
    }

    .admin-status-panel {
        padding: 1rem;
    }

    .admin-status-grid,
    .admin-kpi-grid,
    .admin-stat-grid,
    .admin-volume-grid {
        grid-template-columns: 1fr;
    }

    .admin-status-detail {
        border-right: 0;
        border-bottom: 1px solid var(--sw-border-light);
    }

    .admin-status-detail:nth-child(3) {
        border-bottom: 1px solid var(--sw-border-light);
    }

    .admin-status-detail:last-child {
        border-bottom: 0;
    }

    .admin-section-heading-row {
        flex-direction: column;
    }

    .admin-activity-chart {
        gap: 0.13rem;
        height: 8rem;
    }

    .admin-chart-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-card {
        padding: 1rem;
    }
}

.badge-success {
    background: var(--sw-profit-bg);
    color: var(--sw-profit);
}

.badge-warning {
    background: var(--sw-warning-bg);
    color: var(--sw-warning);
}

.badge-secondary {
    background: var(--sw-bg-subtle);
    color: var(--sw-text-secondary);
}

.badge-danger {
    background: var(--sw-loss-bg);
    color: var(--sw-loss);
}

.mt-4 {
    margin-top: 1.5rem;
}

/* ──── Settings Page 360px Responsive ──── */

@media (max-width: 420px) {
    .sw-page-header h2 {
        font-size: 1.25rem;
    }

    .sw-card-body {
        padding: 1rem;
    }

    .sw-card-body--flush {
        padding: 0;
    }

    /* Theme select takes full width on narrow viewports */
    #themeSelect {
        width: 100%;
    }

    .sw-settings-collapsible-summary,
    .sw-settings-collapsible-panel {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .sw-settings-fee-form {
        margin-top: 1rem;
        padding-top: 1rem;
    }

    .welcome-card {
        padding: 1.25rem;
    }

    .welcome-card-summary {
        grid-template-columns: 1fr;
    }

    .welcome-card-actions {
        flex-direction: column;
    }

    .welcome-card-actions .btn {
        width: 100%;
    }
}

/* ───── Blazor Server reconnect overlay ─────
   Blazor toggles its components-reconnect-* classes on this reserved element.
   marginmetric.js adds mm-reconnect-visible only after a sustained, visible-page
   interruption, so an ordinary iOS app resume never flashes a blocking modal. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--sw-bg-sidebar) 55%, transparent);
    backdrop-filter: blur(2px);
}

#components-reconnect-modal.mm-reconnect-visible.components-reconnect-show:not(.components-reconnect-failed):not(.components-reconnect-rejected),
#components-reconnect-modal.mm-reconnect-visible.components-reconnect-retrying:not(.components-reconnect-failed):not(.components-reconnect-rejected) {
    display: flex;
}

.mm-reconnect-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.75rem 2rem;
    background: var(--sw-bg-sidebar);
    color: var(--sw-text-sidebar-active);
    border-radius: var(--sw-radius-lg);
    box-shadow: var(--sw-shadow-lg);
    text-align: center;
    max-width: 280px;
}

.mm-reconnect-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--sw-text-sidebar-active) 20%, transparent);
    border-top-color: var(--sw-brand-light);
    animation: mm-reconnect-spin 0.8s linear infinite;
}

@keyframes mm-reconnect-spin {
    to {
        transform: rotate(360deg);
    }
}

.mm-reconnect-text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--sw-text-sidebar-hover);
}

.mm-reconnect-reload-btn {
    display: none;
    border: none;
    border-radius: var(--sw-radius-pill);
    padding: 0.45rem 1.25rem;
    background: var(--sw-gradient-cta);
    color: var(--sw-text-sidebar-active);
    font-weight: 600;
    cursor: pointer;
}

/* Terminal reconnect states stay visually suppressed while marginmetric.js
   performs the one-shot reload. These rules remain as a defensive/manual
   fallback if script execution is interrupted after the delayed card appears. */
#components-reconnect-modal.components-reconnect-failed .mm-reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .mm-reconnect-spinner {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .mm-reconnect-text::after,
#components-reconnect-modal.components-reconnect-rejected .mm-reconnect-text::after {
    content: " Reloading…";
}

#components-reconnect-modal.components-reconnect-failed .mm-reconnect-reload-btn,
#components-reconnect-modal.components-reconnect-rejected .mm-reconnect-reload-btn {
    display: inline-block;
}
/* Shipping cost reconciliation center */
.sw-shipping-center { overflow: hidden; }
.sw-shipping-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.sw-shipping-header h3 { font-size: 1.05rem; }
.sw-shipping-header p { max-width: 46rem; }
.sw-shipping-connection-label { display: grid; gap: .35rem; min-width: min(100%, 14rem); font-size: .8rem; color: var(--sw-text-secondary); }
.sw-shipping-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.sw-shipping-stat { min-width: 0; display: grid; gap: .25rem; padding: .9rem; border: 1px solid var(--sw-border); border-radius: var(--sw-radius); background: var(--sw-neutral-50); }
.sw-shipping-stat > span { color: var(--sw-text-secondary); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.sw-shipping-stat > strong { color: var(--sw-text-primary); overflow-wrap: anywhere; }
.sw-shipping-stat.is-actual { background: var(--sw-profit-bg); border-color: var(--sw-profit); }
.sw-shipping-stat.is-estimated { background: var(--sw-warning-bg); border-color: var(--sw-warning); }
.sw-shipping-stat.is-unresolved { background: var(--sw-loss-bg); border-color: var(--sw-loss); }
.sw-shipping-action-row { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sw-shipping-center button, .sw-shipping-center input, .sw-shipping-center select { min-height: 44px; }
.sw-shipping-action-row > span { flex: 1 1 18rem; }
.sw-shipping-review-list { min-width: 0; border: 0; padding: 0; margin: 1rem 0 0; }
.sw-shipping-review-list > legend { color: var(--sw-text-primary); font-weight: 700; font-size: .95rem; margin-bottom: .65rem; }
.sw-shipping-review-card { min-width: 0; display: grid; grid-template-columns: minmax(8.5rem, auto) minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1rem; margin-bottom: .7rem; border: 1px solid var(--sw-border); border-radius: var(--sw-radius); background: var(--sw-bg-card); }
.sw-shipping-select { display: flex; gap: .55rem; align-items: center; min-height: 44px; color: var(--sw-text-secondary); font-size: .82rem; cursor: pointer; }
.sw-shipping-select input { width: 1.15rem; height: 1.15rem; accent-color: var(--sw-brand); flex: 0 0 auto; }
.sw-shipping-review-main { min-width: 0; }
.sw-shipping-order-heading { display: flex; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.sw-shipping-order-heading strong, .sw-shipping-item-summary { overflow-wrap: anywhere; }
.sw-shipping-order-heading span, .sw-shipping-item-summary, .sw-shipping-review-main p { color: var(--sw-text-secondary); font-size: .86rem; }
.sw-shipping-item-summary { margin-top: .25rem; }
.sw-shipping-state-line { display: flex; align-items: center; gap: .55rem; margin-top: .65rem; }
.sw-shipping-review-main p { margin: .45rem 0 .15rem; }
.sw-shipping-row-actions { display: flex; justify-content: flex-end; }
.sw-shipping-bulk-bar { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem; margin-top: 1rem; border: 1px solid var(--sw-brand); border-radius: var(--sw-radius); background: var(--sw-brand-bg); }
.sw-shipping-bulk-controls { display: grid; grid-template-columns: minmax(10rem, 14rem) auto; gap: .4rem .65rem; align-items: end; }
.sw-shipping-bulk-controls > label, .sw-shipping-bulk-controls > small { grid-column: 1 / -1; }
.sw-shipping-bulk-controls > label { color: var(--sw-text-primary); font-weight: 700; }
.sw-shipping-bulk-controls > small { color: var(--sw-text-secondary); }
.sw-shipping-dialog { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - var(--sw-tabbar-height) - 2rem); overflow: auto; }
.sw-shipping-allocation-list { display: grid; gap: .4rem; margin: 1rem 0; }
.sw-shipping-allocation-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .7rem; border: 1px solid var(--sw-border); border-radius: var(--sw-radius-sm); overflow-wrap: anywhere; }
.sw-shipping-allocation-list .is-total { border-color: var(--sw-brand); background: var(--sw-brand-bg); }

@media (max-width: 768px) {
    .sw-shipping-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sw-shipping-review-card { grid-template-columns: minmax(0, 1fr) auto; }
    .sw-shipping-select { grid-column: 1 / -1; }
    .sw-shipping-bulk-bar { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .sw-shipping-summary-grid, .sw-shipping-review-card, .sw-shipping-bulk-controls { grid-template-columns: minmax(0, 1fr); }
    .sw-shipping-row-actions, .sw-shipping-row-actions .btn, .sw-shipping-bulk-controls .btn, .sw-shipping-action-row .btn { width: 100%; }
    .sw-shipping-order-heading { display: grid; }
    .sw-shipping-dialog { width: 100%; max-width: none; bottom: calc(var(--sw-tabbar-height) + env(safe-area-inset-bottom)); top: auto; transform: translateX(-50%); border-radius: var(--sw-radius-lg) var(--sw-radius-lg) 0 0; }
}