/* /Layout/MainLayout.razor.rz.scp.css */
.shell[b-gu37e01g62] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.topnav[b-gu37e01g62] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0 24px;
    min-height: 56px;
    flex-shrink: 0;
    background: var(--color-background-primary);
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.brand[b-gu37e01g62] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.brand-top[b-gu37e01g62] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.brand-accent[b-gu37e01g62] { color: var(--color-accent); }

.brand-sub[b-gu37e01g62] {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-tertiary);
    text-decoration: none;
    letter-spacing: 0;
}

.brand-sub:hover[b-gu37e01g62] { color: var(--color-text-secondary); }

.brand-byline[b-gu37e01g62] {
    font-size: 9px;
    font-weight: 400;
    color: var(--color-text-tertiary);
    text-decoration: none;
    letter-spacing: 0.02em;
    opacity: 0.7;
}

.body-row[b-gu37e01g62] {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.content-area[b-gu37e01g62] {
    flex: 1;
    min-width: 0;
    padding: 24px;
    overflow-y: auto;
}

.site-footer[b-gu37e01g62] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-primary);
}

.footer-copy[b-gu37e01g62] {
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.footer-links[b-gu37e01g62] {
    display: flex;
    gap: 20px;
}

.footer-links a[b-gu37e01g62] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    text-decoration: none;
}

.footer-links a:hover[b-gu37e01g62] {
    color: var(--color-text-secondary);
}

.footer-copy a[b-gu37e01g62] {
    color: inherit;
    text-decoration: none;
}

.footer-copy a:hover[b-gu37e01g62] {
    color: var(--color-text-secondary);
}

.footer-flag[b-gu37e01g62] {
    width: 16px;
    height: 8px;
    vertical-align: middle;
    margin: 0 2px;
    border-radius: 1px;
}

/* ═══════════════════════════════════════════════════════════
   Mobile ResearchPanel overlay wrapper
   On desktop this is transparent — the RP sits inline.
   On mobile it becomes a fixed full-screen overlay.
   ═══════════════════════════════════════════════════════════ */
.rp-mobile-overlay[b-gu37e01g62] {
    display: contents; /* desktop: behave as if the wrapper isn't there */
}

/* FAB — hidden on desktop */
.rp-fab[b-gu37e01g62] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   TABLET: ≤1024px  — narrower padding, same layout
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .topnav[b-gu37e01g62] {
        padding: 0 16px;
    }

    .content-area[b-gu37e01g62] {
        padding: 16px;
    }

    .site-footer[b-gu37e01g62] {
        padding: 12px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE: ≤768px  — stacked layout, no sidebar
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .topnav[b-gu37e01g62] {
        padding: 0 12px;
        min-height: 52px;
    }

    .brand[b-gu37e01g62] {
        font-size: 15px;
    }

    .brand-byline[b-gu37e01g62] {
        font-size: 8px;
    }

    .content-area[b-gu37e01g62] {
        padding: 12px;
    }

    /* ── ResearchPanel: hide inline, show as overlay ── */
    .rp-mobile-overlay[b-gu37e01g62] {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 800;
        background: var(--color-background-primary);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .rp-mobile-overlay-open[b-gu37e01g62] {
        display: flex;
    }

    /* Floating action button to toggle ResearchPanel */
    .rp-fab[b-gu37e01g62] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: none;
        background: var(--color-accent);
        color: #fff;
        font-size: 22px;
        cursor: pointer;
        z-index: 790;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s, background 0.15s;
    }

    .rp-fab:active[b-gu37e01g62] {
        transform: scale(0.92);
    }

    .rp-fab-active[b-gu37e01g62] {
        background: var(--color-text-secondary);
    }

    /* ── Footer: stack vertically; more top padding for optical vertical center ── */
    .site-footer[b-gu37e01g62] {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 6px;
        flex-shrink: 0;
        padding: 32px 12px 12px;
    }

    .footer-links[b-gu37e01g62] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 16px;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.nav-area[b-3yo8kts1rd] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav[b-3yo8kts1rd] {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav[b-3yo8kts1rd]  .nav-tab {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    padding: 0 16px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.nav[b-3yo8kts1rd]  .nav-tab:hover {
    color: var(--color-text-primary);
}

.nav[b-3yo8kts1rd]  .nav-tab.active {
    color: #2272BE;
    border-bottom-color: #2272BE;
    font-weight: 600;
}

.nav-divider[b-3yo8kts1rd] {
    width: 1px;
    height: 18px;
    background: var(--color-border-tertiary);
    opacity: 0.5;
    margin: 0 2px;
}

/* Free-tier upsell pill — small, brand-accent, recognisable as an upgrade button without
   shouting. Sits between the nav tabs and the theme toggle. */
.nav-upgrade[b-3yo8kts1rd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    background: var(--color-accent);
    border: 0.5px solid transparent;
    transition: background 0.15s, transform 0.1s;
}

.nav-upgrade:hover[b-3yo8kts1rd] {
    background: var(--color-card-chrome-hover);
    transform: translateY(-1px);
}

.icon-btn[b-3yo8kts1rd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: color 0.15s;
    font-size: 16px;
    line-height: 1;
}

.icon-btn i[b-3yo8kts1rd] {
    display: block;
    width: 16px;
    height: 16px;
    text-align: center;
}

.icon-btn:hover[b-3yo8kts1rd] {
    color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE: hamburger + drawer
   ═══════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.nav-hamburger[b-3yo8kts1rd] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.nav-hamburger:hover[b-3yo8kts1rd] {
    color: var(--color-text-primary);
}

/* Drawer backdrop */
.nav-drawer-backdrop[b-3yo8kts1rd] {
    display: none;
}

/* Drawer panel — slides in from right */
.nav-drawer[b-3yo8kts1rd] {
    display: none;
}

@media (max-width: 768px) {
    .nav-desktop[b-3yo8kts1rd] { display: none; }

    .nav-hamburger[b-3yo8kts1rd] {
        display: flex;
    }

    .nav-drawer-backdrop[b-3yo8kts1rd] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 900;
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }

    .nav-drawer[b-3yo8kts1rd] {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 288px;
        max-width: 86vw;
        background: var(--color-background-primary);
        border-left: 0.5px solid var(--color-border-tertiary);
        padding: 0;
        z-index: 910;
        transform: translateX(100%);
        transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18);
    }

    .nav-drawer-open[b-3yo8kts1rd] {
        transform: translateX(0);
    }

    .nav-drawer-header[b-3yo8kts1rd] {
        flex-shrink: 0;
        padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 14px;
        border-bottom: 0.5px solid var(--color-border-tertiary);
        background: var(--color-background-secondary);
    }

    .nav-drawer-brand[b-3yo8kts1rd] {
        font-size: 17px;
        font-weight: 700;
        color: var(--color-text-primary);
        letter-spacing: -0.02em;
    }

    .nav-drawer-brand-accent[b-3yo8kts1rd] {
        color: var(--color-accent);
    }

    .nav-drawer-brand-sub[b-3yo8kts1rd] {
        margin-top: 2px;
        font-size: 11px;
        font-weight: 500;
        color: var(--color-text-tertiary);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .nav-drawer-scroll[b-3yo8kts1rd] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 12px 8px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .nav-drawer-section[b-3yo8kts1rd] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .nav-drawer-label[b-3yo8kts1rd] {
        padding: 4px 14px 6px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-tertiary);
    }

    .nav-drawer[b-3yo8kts1rd]  .nav-drawer-link,
    .nav-drawer button.nav-drawer-link[b-3yo8kts1rd] {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 11px 14px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 500;
        color: var(--color-text-secondary);
        text-decoration: none;
        border: none;
        background: none;
        cursor: pointer;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
        min-height: 44px;
    }

    .nav-drawer[b-3yo8kts1rd]  .nav-drawer-link i,
    .nav-drawer button.nav-drawer-link i[b-3yo8kts1rd] {
        width: 20px;
        text-align: center;
        font-size: 18px;
        opacity: 0.9;
    }

    /* HarborIqMark sits in the same 20px icon column as the Tabler glyphs above */
    .nav-drawer button.nav-drawer-link[b-3yo8kts1rd]  .iq-mark {
        opacity: 0.9;
    }

    .nav-drawer[b-3yo8kts1rd]  .nav-drawer-link:hover,
    .nav-drawer button.nav-drawer-link:hover[b-3yo8kts1rd] {
        background: var(--color-background-secondary);
        color: var(--color-text-primary);
    }

    .nav-drawer[b-3yo8kts1rd]  .nav-drawer-link.active {
        background: color-mix(in srgb, var(--color-accent) 14%, transparent);
        color: var(--color-accent);
        font-weight: 600;
    }

    .nav-drawer[b-3yo8kts1rd]  .nav-drawer-link.active i {
        opacity: 1;
    }

    .nav-drawer-footer[b-3yo8kts1rd] {
        flex-shrink: 0;
        padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
        border-top: 0.5px solid var(--color-border-tertiary);
        display: flex;
        flex-direction: column;
        gap: 8px;
        background: var(--color-background-primary);
    }

    .nav-drawer-upgrade[b-3yo8kts1rd] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        background: var(--color-accent);
        text-decoration: none;
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-drawer-upgrade:hover[b-3yo8kts1rd] {
        background: var(--color-card-chrome-hover);
    }

    .nav-drawer-theme[b-3yo8kts1rd] {
        justify-content: flex-start;
    }
}

/* HarborIQ: "IQ" in the user's chosen accent color, matching the research panel header. */
.nav-iq[b-3yo8kts1rd] {
    color: var(--color-accent);
    font-weight: 700;
}
/* /Layout/ResearchPanel.razor.rz.scp.css */
/* Outer shell: icon strip + optional flyout side by side */
.rp-shell[b-4db9ka2wfl] {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    align-self: stretch;
}

/* Permanent icon strip */
.rp-strip[b-4db9ka2wfl] {
    width: 48px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    background: var(--color-background-primary);
    border-right: 0.5px solid var(--color-border-tertiary);
}

.rp-strip-top[b-4db9ka2wfl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rp-strip-bottom[b-4db9ka2wfl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.rp-strip-btn--indicator[b-4db9ka2wfl] {
    position: relative;
}

.rp-notif-dot[b-4db9ka2wfl] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    border: 1.5px solid var(--color-background-primary);
}

.rp-strip-btn[b-4db9ka2wfl] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    color: var(--color-text-tertiary);
    font-size: 18px;
    transition: background 0.1s, color 0.1s;
}

.rp-strip-btn:hover[b-4db9ka2wfl] {
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
}

.rp-strip-btn.rp-strip-active[b-4db9ka2wfl] {
    background: var(--color-background-secondary);
    color: var(--color-accent);
}

/* HarborIqMark: dim the lower wave when the section is active so the accent-colored IQ leads */
.rp-strip-active[b-4db9ka2wfl]  .iq-mark-wave2 {
    opacity: 0.55;
}

/* Profile avatar tile — Slack-style filled initials tile, more prominent than a plain icon */
.rp-avatar-btn[b-4db9ka2wfl] {
    width: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Clears the 3px keyline + ring (box-shadow takes no layout space) above the tier label */
    gap: 5px;
    padding: 0;
    padding-bottom: 4px;
    background: none;
    border: none;
    cursor: pointer;
}

.rp-tier-label[b-4db9ka2wfl] {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.5;
    white-space: nowrap;
}

.rp-tier-label.tier-free[b-4db9ka2wfl] {
    color: var(--color-text-tertiary);
    background: rgba(128, 128, 128, 0.1);
    border: 0.5px solid rgba(128, 128, 128, 0.15);
}

.rp-tier-label.tier-pro[b-4db9ka2wfl] {
    color: #4d8bff;
    background: rgba(77, 139, 255, 0.12);
    border: 0.5px solid rgba(77, 139, 255, 0.2);
}

.rp-tier-label.tier-premium[b-4db9ka2wfl] {
    color: #d4a843;
    background: rgba(212, 168, 67, 0.12);
    border: 0.5px solid rgba(212, 168, 67, 0.2);
}

.rp-avatar[b-4db9ka2wfl] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--color-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.12s, transform 0.12s;
}

/* Tier ring: 1px dark keyline against the tile, then a 2px coloured ring. The keyline
   also hides the light anti-aliasing seam at the tile edge on fractional-DPI screens. */
.rp-avatar--premium[b-4db9ka2wfl] {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 0 3px #d4a843;
}

.rp-avatar--pro[b-4db9ka2wfl] {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 0 3px #4d8bff;
}

.rp-avatar--free[b-4db9ka2wfl] {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 0 3px rgba(128, 128, 128, 0.4);
}

.rp-avatar-btn:hover .rp-avatar[b-4db9ka2wfl] {
    transform: translateY(-1px);
}

.rp-avatar-btn:hover .rp-avatar:not(.rp-avatar--premium):not(.rp-avatar--pro):not(.rp-avatar--free)[b-4db9ka2wfl] {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 0 3px var(--color-accent);
}

/* --color-accent only changes for the Emerald/Obsidian card backgrounds — Default and
   Harbor Blue both resolve to the same blue (see app.css), so the avatar would stay
   blue even when "Default" is selected. Give it a neutral fill in that one case so
   picking Default reads as different from picking Harbor Blue. */
html:not([data-card-chrome]) .rp-avatar[b-4db9ka2wfl] {
    background: #64748b;
}

/* Fly-out panel */
.rp-flyout[b-4db9ka2wfl] {
    width: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-background-panel);
    border-right: none;
    overflow: hidden;
    transition: width 180ms ease;
}

.rp-flyout-open[b-4db9ka2wfl] {
    width: var(--rp-fw, 300px);
    border-right: 0.5px solid var(--color-border-tertiary);
}

.rp-resize-handle[b-4db9ka2wfl] {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
    transition: background 0.15s;
}

.rp-resize-handle:hover[b-4db9ka2wfl] {
    background: rgba(99, 102, 241, 0.25);
}

.rp-flyout-hdr[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    flex-shrink: 0;
}

.rp-flyout-title-group[b-4db9ka2wfl] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.rp-flyout-title[b-4db9ka2wfl] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rp-iq-brand[b-4db9ka2wfl] {
    font-size: 13px;
    color: var(--color-text-primary);
    letter-spacing: 0.01em;
    text-transform: none;
}

.rp-iq[b-4db9ka2wfl] {
    color: var(--color-accent);
    font-weight: 700;
}

.rp-flyout-company[b-4db9ka2wfl] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    line-height: 1.3;
}

.rp-flyout-meta[b-4db9ka2wfl] {
    font-size: 10px;
    color: var(--color-text-tertiary);
    opacity: 0.75;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-flyout-close[b-4db9ka2wfl] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-tertiary);
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 16px;
}

.rp-flyout-close:hover[b-4db9ka2wfl] {
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
}

/* Body scroll area */
.rp-body[b-4db9ka2wfl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 16px;
}

/* Ticker input row */
.rp-ticker-row[b-4db9ka2wfl] {
    display: flex;
    gap: 4px;
    padding: 10px 10px 6px;
}

.rp-ticker-input[b-4db9ka2wfl] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    padding: 5px 8px;
    border-radius: 4px;
    border: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    outline: none;
}

.rp-ticker-input:focus[b-4db9ka2wfl] {
    border-color: var(--color-accent);
}

.rp-ticker-has-value[b-4db9ka2wfl] {
    padding-right: 26px;
}

.rp-ticker-clear[b-4db9ka2wfl] {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: var(--color-text-tertiary);
    color: var(--color-background-primary);
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.5;
    padding: 0;
    line-height: 1;
}

.rp-ticker-clear:hover[b-4db9ka2wfl] {
    opacity: 1;
}

.rp-ticker-input[b-4db9ka2wfl]::placeholder {
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--color-text-tertiary);
    opacity: 0.6;
}


/* Ticker input wrapper + autocomplete dropdown */
.rp-ticker-wrap[b-4db9ka2wfl] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.rp-ticker-wrap .rp-ticker-input[b-4db9ka2wfl] {
    width: 100%;
    box-sizing: border-box;
}

.rp-ticker-dropdown[b-4db9ka2wfl] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--color-background-panel);
    border: 1px solid var(--color-border-secondary);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rp-ticker-option[b-4db9ka2wfl] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    cursor: pointer;
    user-select: none;
}

.rp-ticker-option:last-child[b-4db9ka2wfl] {
    border-bottom: none;
}

.rp-ticker-option:hover[b-4db9ka2wfl] {
    background: var(--color-background-secondary);
}

.rp-ticker-option-sym[b-4db9ka2wfl] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.04em;
}

.rp-ticker-option-name[b-4db9ka2wfl] {
    font-size: 10px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section body padding */
.rp-section-body[b-4db9ka2wfl] {
    padding: 8px 12px 12px;
}

.rp-pos[b-4db9ka2wfl] { color: var(--color-positive); }
.rp-neg[b-4db9ka2wfl] { color: var(--color-negative); }

.rp-quote-stats[b-4db9ka2wfl] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.rp-stat[b-4db9ka2wfl] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--color-background-secondary);
    border-radius: 4px;
    padding: 6px 8px;
}

.rp-stat-lbl[b-4db9ka2wfl] {
    font-size: 10px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rp-stat-val[b-4db9ka2wfl] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rp-pos-badges[b-4db9ka2wfl] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rp-pos-badge[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rp-pos-badge i[b-4db9ka2wfl] {
    font-size: 13px;
    color: var(--color-text-tertiary);
}

.rp-ext-links-grid[b-4db9ka2wfl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 4px;
}

.rp-ext-link[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 5px 7px;
    border-radius: 4px;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
}

.rp-ext-link:hover[b-4db9ka2wfl] {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* News feed */
.rp-news-section[b-4db9ka2wfl] {
    margin-top: 10px;
    border-top: 0.5px solid var(--color-border-tertiary);
    padding-top: 8px;
}

.rp-news-label[b-4db9ka2wfl] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    padding: 0 12px 6px;
}

.rp-news-item[b-4db9ka2wfl] {
    display: grid;
    grid-template-columns: 22px 44px 1fr;
    gap: 4px;
    align-items: baseline;
    padding: 4px 12px;
    text-decoration: none;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.rp-news-item:last-child[b-4db9ka2wfl] { border-bottom: none; }

.rp-news-item:hover .rp-news-headline[b-4db9ka2wfl] { color: var(--color-accent); }

.rp-news-source[b-4db9ka2wfl] {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-accent);
    white-space: nowrap;
}

.rp-news-time[b-4db9ka2wfl] {
    font-size: 10px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.rp-news-headline[b-4db9ka2wfl] {
    font-size: 11px;
    color: var(--color-text-primary);
    line-height: 1.4;
}

/* Chart */
.rp-chart-body[b-4db9ka2wfl] {
    padding: 0;
}

.rp-chart-container[b-4db9ka2wfl] {
    width: 100%;
    min-height: 400px;
}

/* Social / Reddit */
.rp-post[b-4db9ka2wfl] {
    display: block;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.rp-post:last-child[b-4db9ka2wfl] { border-bottom: none; }

.rp-post-title[b-4db9ka2wfl] {
    font-size: 12px;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rp-post:hover .rp-post-title[b-4db9ka2wfl] { color: var(--color-accent); }

.rp-post-meta[b-4db9ka2wfl] {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: var(--color-text-tertiary);
}

/* Health check-in */
.rp-health-field[b-4db9ka2wfl] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.rp-health-lbl[b-4db9ka2wfl] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.rp-health-pip-scale[b-4db9ka2wfl] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rp-health-pip-labels[b-4db9ka2wfl] {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
}

.rp-health-pip-label[b-4db9ka2wfl] {
    font-size: 9px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rp-health-pips[b-4db9ka2wfl] {
    display: flex;
    gap: 3px;
}

.rp-health-pip[b-4db9ka2wfl] {
    flex: 1;
    min-width: 0;
    height: 24px;
    border-radius: 12px;
    border: 1px solid var(--color-border-secondary);
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.1s, background 0.1s, color 0.1s;
}

.rp-health-pip:hover[b-4db9ka2wfl] { border-color: var(--color-accent); color: var(--color-accent); }
.rp-health-pip-on[b-4db9ka2wfl] { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
/* Fixed colors so the score pips don't follow the card-background accent:
   mood blue, energy green, stress red. */
.rp-health-pip-on.rp-health-pip-mood[b-4db9ka2wfl] { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.rp-health-pip-on.rp-health-pip-energy[b-4db9ka2wfl] { background: #22c55e; border-color: #22c55e; color: #fff; }
.rp-health-pip-on.rp-health-pip-stress[b-4db9ka2wfl] { background: #ef4444; border-color: #ef4444; color: #fff; }

.rp-health-sleep-sentiment-row[b-4db9ka2wfl] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.rp-health-sleep-group[b-4db9ka2wfl] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rp-health-sentiment-group[b-4db9ka2wfl] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.rp-health-sleep-row[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rp-health-sleep-input[b-4db9ka2wfl] {
    width: 60px;
    padding: 5px 7px;
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-sm);
    box-sizing: border-box;
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
}

.rp-health-sleep-input:focus[b-4db9ka2wfl] { border-color: var(--color-accent); }

.rp-health-unit[b-4db9ka2wfl] { font-size: 11px; color: var(--color-text-tertiary); }

.rp-health-notes[b-4db9ka2wfl] {
    width: 100%;
    padding: 6px 8px;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 4px;
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    font-size: 12px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.rp-health-notes:focus[b-4db9ka2wfl] { border-color: var(--color-accent); }
.rp-health-notes[b-4db9ka2wfl]::placeholder { color: var(--color-text-tertiary); }

.rp-health-actions[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.rp-health-save-group[b-4db9ka2wfl] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rp-health-save[b-4db9ka2wfl] {
    padding: 6px 14px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}

.rp-health-save:hover[b-4db9ka2wfl] { opacity: 0.85; }
.rp-health-sentiment-select[b-4db9ka2wfl] {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 5px 32px 5px 7px;
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-sm);
    background: var(--color-background-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.rp-health-sentiment-select:hover[b-4db9ka2wfl] { border-color: var(--color-border-secondary); color: var(--color-text-primary); }
.rp-health-sentiment-select:focus[b-4db9ka2wfl] { border-color: var(--color-accent); }


.rp-cal-rating-box[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-background-primary);
    border-radius: 4px;
    padding: 6px 8px;
    margin-top: 4px;
}

.rp-cal-rating-lbl[b-4db9ka2wfl] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.rp-cal-rating-val[b-4db9ka2wfl] {
    font-size: 16px;
    font-weight: 700;
}

.rp-health-status[b-4db9ka2wfl] { font-size: 11px; color: var(--color-text-tertiary); }

@keyframes rp-saved-fade-b-4db9ka2wfl {
    0%   { opacity: 0; transform: translateY(-2px); }
    15%  { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

.rp-health-saved[b-4db9ka2wfl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-positive);
    animation: rp-saved-fade-b-4db9ka2wfl 2.5s ease forwards;
}

.rp-health-delete[b-4db9ka2wfl] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--color-text-tertiary);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, color 0.1s;
}

.rp-health-delete:hover[b-4db9ka2wfl] {
    background: rgba(239,68,68,0.12);
    color: #ef4444;
}

.rp-health-delete-confirm[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.rp-health-delete-msg[b-4db9ka2wfl] {
    font-size: 11px;
    color: var(--color-text-secondary);
    flex: 1;
}

.rp-health-delete-yes[b-4db9ka2wfl] {
    padding: 4px 10px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}

.rp-health-delete-yes:hover[b-4db9ka2wfl] { opacity: 0.85; }

.rp-health-delete-cancel[b-4db9ka2wfl] {
    padding: 4px 10px;
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s;
}

.rp-health-delete-cancel:hover[b-4db9ka2wfl] { background: var(--color-background-primary); }

/* Calendar */
.rp-cal-wrap[b-4db9ka2wfl] {
    border-top: 0.5px solid var(--color-border-tertiary);
    padding: 10px 12px 4px;
}

.rp-cal-nav[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.rp-cal-nav-btn[b-4db9ka2wfl] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-tertiary);
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.rp-cal-nav-btn:hover[b-4db9ka2wfl] { color: var(--color-text-primary); background: var(--color-background-secondary); }

.rp-cal-month-label[b-4db9ka2wfl] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rp-cal-grid[b-4db9ka2wfl] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.rp-cal-dow[b-4db9ka2wfl] {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    text-align: center;
    padding: 2px 0 4px;
}

.rp-cal-day[b-4db9ka2wfl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 4px;
    cursor: pointer;
    min-height: 32px;
}

.rp-cal-blank[b-4db9ka2wfl]  { cursor: default; }
.rp-cal-future[b-4db9ka2wfl] { cursor: default; opacity: 0.3; }

.rp-cal-day:not(.rp-cal-blank):not(.rp-cal-future):hover[b-4db9ka2wfl] { background: var(--color-background-secondary); }

.rp-cal-num[b-4db9ka2wfl] {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1;
}

.rp-cal-today .rp-cal-num[b-4db9ka2wfl] {
    color: var(--color-accent);
    font-weight: 700;
}

.rp-cal-selected[b-4db9ka2wfl] {
    background: var(--color-background-secondary);
    outline: 1px solid var(--color-accent);
}

.rp-cal-dot[b-4db9ka2wfl] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-text-tertiary);
}

.rp-cal-dot-good[b-4db9ka2wfl] { background: var(--color-positive); }
.rp-cal-dot-mid[b-4db9ka2wfl]  { background: var(--color-accent); }
.rp-cal-dot-bad[b-4db9ka2wfl]  { background: var(--color-negative); }

.rp-cal-dot.tr-green[b-4db9ka2wfl]  { background: var(--color-positive); }
.rp-cal-dot.tr-yellow[b-4db9ka2wfl] { background: #e8b84b; }
.rp-cal-dot.tr-orange[b-4db9ka2wfl] { background: #f97316; }
.rp-cal-dot.tr-red[b-4db9ka2wfl]    { background: var(--color-negative); }

/* Selected day detail */
.rp-cal-detail[b-4db9ka2wfl] {
    margin-top: 8px;
    padding: 10px;
    background: var(--color-background-secondary);
    border-radius: 6px;
    border: 0.5px solid var(--color-border-tertiary);
}

.rp-cal-detail-empty[b-4db9ka2wfl] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    text-align: center;
}

.rp-cal-detail-date[b-4db9ka2wfl] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.rp-rating-help[b-4db9ka2wfl] {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-tertiary);
    font-size: 12px;
    cursor: help;
}

.rp-rating-popup-fixed[b-4db9ka2wfl] {
    position: fixed;
    z-index: 999;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 10px 14px;
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    pointer-events: none;
}

.rp-rating-popup-row[b-4db9ka2wfl] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.rp-rating-popup-name[b-4db9ka2wfl] {
    font-weight: 600;
    color: var(--color-text-primary);
    width: 44px;
    flex-shrink: 0;
}

.rp-rating-popup-def[b-4db9ka2wfl] {
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.rp-cal-detail-row[b-4db9ka2wfl] {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: 6px;
}

.rp-cal-detail-row .rp-cal-stat[b-4db9ka2wfl] {
    flex: 1;
    min-width: 0;
    padding: 4px 4px;
}

.rp-cal-stat[b-4db9ka2wfl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    background: var(--color-background-primary);
    border-radius: 4px;
    padding: 4px 4px;
}

.rp-cal-stat-lbl[b-4db9ka2wfl] {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
}

.rp-cal-stat-val[b-4db9ka2wfl] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tr-green[b-4db9ka2wfl]  { color: var(--color-positive); }
.tr-yellow[b-4db9ka2wfl] { color: #e8b84b; }
.tr-orange[b-4db9ka2wfl] { color: #f97316; }
.tr-red[b-4db9ka2wfl]    { color: var(--color-negative); }

.rp-cal-detail-notes[b-4db9ka2wfl] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    line-height: 1.4;
    border-top: 0.5px solid var(--color-border-tertiary);
    padding-top: 6px;
    margin-top: 2px;
}

.rp-health-history[b-4db9ka2wfl] {
    border-top: 0.5px solid var(--color-border-tertiary);
    padding-top: 8px;
    margin-top: 4px;
}

.rp-health-row[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.rp-health-row:last-child[b-4db9ka2wfl] { border-bottom: none; }
.rp-health-row-today[b-4db9ka2wfl] { background: var(--color-background-secondary); }

.rp-health-date[b-4db9ka2wfl] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    min-width: 44px;
}

.rp-health-pills[b-4db9ka2wfl] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.rp-hpill[b-4db9ka2wfl] {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
    border: 0.5px solid var(--color-border-tertiary);
}

.rp-hpill-stress[b-4db9ka2wfl] {
    color: var(--color-negative);
    border-color: var(--color-negative);
}

/* States */
.rp-hint[b-4db9ka2wfl] {
    padding: 16px 12px;
    font-size: 12px;
    color: var(--color-text-tertiary);
    line-height: 1.5;
    text-align: center;
}

.rp-loading[b-4db9ka2wfl],
.rp-empty[b-4db9ka2wfl] {
    font-size: 12px;
    color: var(--color-text-tertiary);
    padding: 8px 0;
    text-align: center;
}

@keyframes spin-b-4db9ka2wfl {
    to { transform: rotate(360deg); }
}

.spin[b-4db9ka2wfl] {
    display: inline-block;
    animation: spin-b-4db9ka2wfl 1s linear infinite;
}

/* Check-in prompt banner */
.rp-checkin-prompt[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(99, 102, 241, 0.08);
    border-bottom: 0.5px solid rgba(99, 102, 241, 0.2);
    flex-shrink: 0;
}

.rp-checkin-prompt-msg[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.rp-checkin-prompt-msg i[b-4db9ka2wfl] {
    font-size: 13px;
    color: var(--color-accent);
}

.rp-checkin-prompt-dismiss[b-4db9ka2wfl] {
    background: none;
    border: none;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    font-family: inherit;
    transition: color 0.1s, background 0.1s;
}

.rp-checkin-prompt-dismiss:hover[b-4db9ka2wfl] {
    color: var(--color-text-secondary);
    background: rgba(0,0,0,0.06);
}

/* StockTwits feed */
.rp-st-feed[b-4db9ka2wfl] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rp-st-msg[b-4db9ka2wfl] {
    padding: 10px 14px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.rp-st-msg:last-child[b-4db9ka2wfl] {
    border-bottom: none;
}

.rp-st-msg-header[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.rp-st-username[b-4db9ka2wfl] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rp-st-sentiment[b-4db9ka2wfl] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.03em;
}

.rp-st-bull[b-4db9ka2wfl] {
    color: var(--color-text-success);
    background: color-mix(in srgb, var(--color-text-success) 12%, transparent);
}

.rp-st-bear[b-4db9ka2wfl] {
    color: var(--color-text-danger);
    background: color-mix(in srgb, var(--color-text-danger) 12%, transparent);
}

.rp-st-time[b-4db9ka2wfl] {
    margin-left: auto;
    font-size: 11px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.rp-st-body[b-4db9ka2wfl] {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.45;
    word-break: break-word;
}

.rp-st-body :global(.rp-st-cashtag)[b-4db9ka2wfl],
.rp-st-body :global(.rp-st-link)[b-4db9ka2wfl] {
    color: var(--color-brand);
    text-decoration: none;
    font-weight: 500;
}

.rp-st-body :global(.rp-st-cashtag:hover)[b-4db9ka2wfl],
.rp-st-body :global(.rp-st-link:hover)[b-4db9ka2wfl] {
    text-decoration: underline;
}

/* Watcher count + sentiment dial */
.rp-st-meta[b-4db9ka2wfl] {
    padding: 8px 14px 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
}

.rp-st-watchers[b-4db9ka2wfl] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-right: 2px;
}

.rp-st-watchers i[b-4db9ka2wfl] {
    font-size: 12px;
}


.rp-st-bear-lbl[b-4db9ka2wfl] {
    font-size: 10px;
    font-weight: 600;
    color: #ef4444;
    flex-shrink: 0;
}

.rp-st-bull-lbl[b-4db9ka2wfl] {
    font-size: 10px;
    font-weight: 600;
    color: #22c55e;
    flex-shrink: 0;
}

.rp-st-bar-track[b-4db9ka2wfl] {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(to right, #ef4444, #eab308, #22c55e);
    position: relative;
}

.rp-st-bar-thumb[b-4db9ka2wfl] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 13px;
    background: var(--color-text-primary);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ── Daily digest section (#253) ── */
.rp-d-hdr[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.rp-d-date[b-4db9ka2wfl] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rp-d-at[b-4db9ka2wfl] {
    font-weight: 400;
    color: var(--color-text-tertiary);
}

.rp-d-refresh[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 14px;
}

.rp-d-refresh:hover:not(:disabled)[b-4db9ka2wfl] {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.rp-d-refresh:disabled[b-4db9ka2wfl] {
    opacity: 0.45;
    cursor: default;
}

.rp-d-narrative[b-4db9ka2wfl] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-primary);
    margin-bottom: 10px;
}

.rp-d-p[b-4db9ka2wfl] {
    margin: 0 0 8px;
}

.rp-d-h[b-4db9ka2wfl],
.rp-d-label[b-4db9ka2wfl] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin: 10px 0 4px;
}

.rp-d-li[b-4db9ka2wfl] {
    position: relative;
    padding-left: 12px;
    margin-bottom: 4px;
}

.rp-d-li[b-4db9ka2wfl]::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
}

.rp-d-error[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
    font-size: 11px;
}

.rp-d-error--soft[b-4db9ka2wfl] {
    background: none;
    padding: 0;
    color: var(--color-text-tertiary);
}

.rp-d-retry[b-4db9ka2wfl] {
    border: none;
    background: none;
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.rp-d-exp[b-4db9ka2wfl] {
    display: grid;
    grid-template-columns: 1fr auto 44px;
    gap: 6px;
    align-items: baseline;
    font-size: 11px;
    padding: 3px 0;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    color: var(--color-text-primary);
}

.rp-d-exp:last-child[b-4db9ka2wfl] { border-bottom: none; }

.rp-d-exp-qty[b-4db9ka2wfl] {
    color: var(--color-text-tertiary);
}

.rp-d-exp-dte[b-4db9ka2wfl] {
    text-align: right;
    font-weight: 600;
}

/* Closed today: Position | Action | % | P&L. Long legs are sold to close, short legs bought back. */
.rp-d-closed[b-4db9ka2wfl] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) 52px 56px;
    gap: 8px;
    align-items: baseline;
    font-size: 11px;
    padding: 3px 0;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    color: var(--color-text-primary);
}

.rp-d-closed:last-child[b-4db9ka2wfl] { border-bottom: none; }

.rp-d-closed-hd[b-4db9ka2wfl] {
    font-size: 10px;
    color: var(--color-text-tertiary);
    padding-top: 0;
}

.rp-d-closed-pos[b-4db9ka2wfl],
.rp-d-closed-act[b-4db9ka2wfl] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-d-closed-sub[b-4db9ka2wfl] {
    margin-left: 3px;
    color: var(--color-text-tertiary);
}

.rp-d-num[b-4db9ka2wfl] {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rp-d-closed-hd .rp-d-num[b-4db9ka2wfl] { font-weight: 400; }

.rp-d-quota[b-4db9ka2wfl] {
    margin-top: 12px;
    font-size: 11px;
    color: var(--color-text-secondary);
}

/* "[PRO] 1 of 3 updates left today." — the badge leads, so drop its usual left margin. */
.rp-d-allowance[b-4db9ka2wfl] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rp-d-quota .rp-d-allowance[b-4db9ka2wfl]  .tier-badge { margin-left: 0; }

/* The shared one-line upsell, sized to the panel's 11px footer. */
.rp-d-quota[b-4db9ka2wfl]  p.upgrade-hint {
    margin: 4px 0 0;
    font-size: 11px;
}

.rp-d-disclaimer[b-4db9ka2wfl] {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.4;
    color: var(--color-text-tertiary);
}

.rp-d-optin[b-4db9ka2wfl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding-top: 20px;
}

.rp-d-optin-icon[b-4db9ka2wfl] {
    display: flex;
    color: var(--color-accent);
}

.rp-d-optin-title[b-4db9ka2wfl] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rp-d-optin-text[b-4db9ka2wfl] {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.rp-d-optin-fine[b-4db9ka2wfl] {
    margin: 0 0 6px;
    font-size: 10px;
    line-height: 1.45;
    color: var(--color-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE: ≤768px — fill the overlay, no icon strip
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Shell fills overlay */
    .rp-shell[b-4db9ka2wfl] {
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    /* Icon strip becomes a horizontal row at top */
    .rp-strip[b-4db9ka2wfl] {
        width: 100%;
        flex-direction: row;
        padding: 8px 12px;
        border-right: none;
        border-bottom: 0.5px solid var(--color-border-tertiary);
        overflow-x: auto;
    }

    .rp-strip-top[b-4db9ka2wfl],
    .rp-strip-bottom[b-4db9ka2wfl] {
        flex-direction: row;
        gap: 4px;
    }

    .rp-strip-btn[b-4db9ka2wfl] {
        width: 44px;
        height: 44px;
    }

    .rp-avatar-btn[b-4db9ka2wfl] {
        width: 44px;
        height: 44px;
    }

    /* Flyout fills remaining space below the strip */
    .rp-flyout[b-4db9ka2wfl] {
        width: 100% !important;
        flex: 1;
        min-height: 0;
        border-right: none;
    }

    .rp-flyout-open[b-4db9ka2wfl] {
        width: 100% !important;
        border-right: none;
    }

    /* Disable the drag-to-resize handle on mobile */
    .rp-resize-handle[b-4db9ka2wfl] {
        display: none;
    }

    /* app.css gives selects a 36px touch target on phones; match it so the
       sleep box lines up with the sentiment dropdown beside it. */
    .rp-health-sleep-input[b-4db9ka2wfl] {
        min-height: 36px;
    }
}
/* /Pages/Analytics.razor.rz.scp.css */
/* Analytics skeleton */
.an-skel-layout[b-tz9my07zhi] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.an-skel-card[b-tz9my07zhi] {
    background:
        linear-gradient(var(--color-background-primary), var(--color-background-primary)) padding-box,
        linear-gradient(180deg, var(--card-edge-top), var(--card-edge-bottom)) border-box;
    border: 1px solid transparent;
    box-shadow: var(--card-shadow);
    border-radius: var(--border-radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.an-skel-title[b-tz9my07zhi]  { height: 12px; width: 140px; }
.an-skel-grid[b-tz9my07zhi]   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.an-skel-stat[b-tz9my07zhi]   { display: flex; flex-direction: column; gap: 8px; }
.an-skel-label[b-tz9my07zhi]  { height: 10px; width: 60%; }
.an-skel-value[b-tz9my07zhi]  { height: 22px; width: 75%; }
.an-skel-two[b-tz9my07zhi]    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.an-skel-row[b-tz9my07zhi]    { height: 14px; width: 100%; margin-bottom: 4px; }
.an-skel-row-sm[b-tz9my07zhi] { height: 14px; width: 80%; margin-bottom: 4px; }
.an-skel-chart[b-tz9my07zhi]  { height: 120px; width: 100%; border-radius: 4px; }

.an-layout[b-tz9my07zhi] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.an-empty[b-tz9my07zhi] {
    text-align: center;
    padding: 64px 24px;
    font-size: 14px;
    color: var(--color-text-tertiary);
}

/* Section cards — lit gradient edge + soft shadow (matches portfolio cards) */
.an-section[b-tz9my07zhi] {
    background:
        linear-gradient(var(--color-background-primary), var(--color-background-primary)) padding-box,
        linear-gradient(180deg, var(--card-edge-top), var(--card-edge-bottom)) border-box;
    border: 1px solid transparent;
    box-shadow: var(--card-shadow);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.an-section-header[b-tz9my07zhi] {
    padding: 14px 20px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-secondary);
}

.an-section-title[b-tz9my07zhi] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.an-section-desc[b-tz9my07zhi] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}

.an-section-body[b-tz9my07zhi] {
    padding: 18px 20px;
}

/* Allocation donuts under P&L by Ticker */
.an-allocation[b-tz9my07zhi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 0.5px solid var(--color-border-tertiary);
}

/* Two-column layout */
.an-two-col[b-tz9my07zhi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Daily Performance calendar */
.an-cal-header[b-tz9my07zhi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.an-cal-nav[b-tz9my07zhi] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.an-cal-nav-btn[b-tz9my07zhi] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-tertiary);
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 16px;
}

.an-cal-nav-btn:hover[b-tz9my07zhi] {
    color: var(--color-text-primary);
    background: var(--color-background-primary);
}

.an-cal-month-label[b-tz9my07zhi] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    min-width: 128px;
    text-align: center;
}

.an-cal-layout[b-tz9my07zhi] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .an-cal-layout[b-tz9my07zhi] { grid-template-columns: 1fr; }
}

.an-cal-grid[b-tz9my07zhi] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.an-cal-dow-row[b-tz9my07zhi] { margin-bottom: 6px; }

.an-cal-dow[b-tz9my07zhi] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-tertiary);
    text-align: center;
    padding: 2px 0;
}

.an-cal-day[b-tz9my07zhi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 66px;
    padding: 8px 4px 10px;
    border-radius: 8px;
    border: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-secondary);
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
}

.an-cal-day:not(.an-cal-blank):not(.an-cal-future):hover[b-tz9my07zhi] {
    border-color: var(--color-text-tertiary);
}

.an-cal-blank[b-tz9my07zhi] { background: transparent; border: none; cursor: default; }
.an-cal-future[b-tz9my07zhi] { cursor: default; opacity: 0.35; }

.an-cal-num[b-tz9my07zhi] {
    align-self: flex-start;
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1;
}

.an-cal-today .an-cal-num[b-tz9my07zhi] { color: var(--color-accent); font-weight: 700; }

.an-cal-selected[b-tz9my07zhi] {
    border-color: var(--color-accent);
    outline: 1.5px solid var(--color-accent);
}

.an-cal-pnl[b-tz9my07zhi] {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin-top: 4px;
}

.an-cal-pnl.pos[b-tz9my07zhi] { color: var(--color-positive); }
.an-cal-pnl.neg[b-tz9my07zhi] { color: var(--color-negative); }
.an-cal-pnl-none[b-tz9my07zhi] { color: var(--color-text-tertiary); font-weight: 500; }

.an-cal-dot[b-tz9my07zhi] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: auto;
    background: var(--color-text-tertiary);
}

.an-cal-dot.tr-green[b-tz9my07zhi]  { background: var(--color-positive); }
.an-cal-dot.tr-yellow[b-tz9my07zhi] { background: #e8b84b; }
.an-cal-dot.tr-orange[b-tz9my07zhi] { background: #f97316; }
.an-cal-dot.tr-red[b-tz9my07zhi]    { background: var(--color-negative); }

/* Selected-day detail panel — top margin matches the DOW header row height
   so the panel's top edge lines up with the first row of day cards */
.an-cal-detail-panel[b-tz9my07zhi] {
    margin-top: 22px;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 14px;
}

@media (max-width: 900px) {
    .an-cal-detail-panel[b-tz9my07zhi] { margin-top: 0; }
}

.an-cal-detail-empty[b-tz9my07zhi] {
    font-size: 12px;
    color: var(--color-text-tertiary);
    text-align: center;
    padding: 24px 8px;
    line-height: 1.5;
}

.an-cal-detail-date[b-tz9my07zhi] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.an-cal-detail-stats[b-tz9my07zhi] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.an-cal-stat[b-tz9my07zhi] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    background: var(--color-background-primary);
    border-radius: 6px;
    padding: 8px 10px;
}

.an-cal-stat-lbl[b-tz9my07zhi] {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
}

.an-cal-stat-val[b-tz9my07zhi] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.an-cal-stat-val.pos[b-tz9my07zhi] { color: var(--color-positive); }
.an-cal-stat-val.neg[b-tz9my07zhi] { color: var(--color-negative); }
.an-cal-denom[b-tz9my07zhi] { font-size: 10px; font-weight: 500; color: var(--color-text-tertiary); }

.an-cal-rating[b-tz9my07zhi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-background-primary);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
}

.an-cal-rating-lbl[b-tz9my07zhi] { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }
.an-cal-rating-val[b-tz9my07zhi] { font-size: 17px; font-weight: 800; }
.an-cal-rating-val.tr-green[b-tz9my07zhi]  { color: var(--color-positive); }
.an-cal-rating-val.tr-yellow[b-tz9my07zhi] { color: #e8b84b; }
.an-cal-rating-val.tr-orange[b-tz9my07zhi] { color: #f97316; }
.an-cal-rating-val.tr-red[b-tz9my07zhi]    { color: var(--color-negative); }

.an-cal-detail-notes[b-tz9my07zhi] {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    border-top: 0.5px solid var(--color-border-tertiary);
    padding-top: 10px;
    margin-top: 2px;
    white-space: pre-wrap;
}

/* Greeks stat grid */
.an-stat-grid[b-tz9my07zhi] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.an-stat[b-tz9my07zhi] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.an-stat-label[b-tz9my07zhi] {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.an-stat-value[b-tz9my07zhi] {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.an-stat-sub[b-tz9my07zhi] {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-secondary);
}

/* P&L bars */
.an-bars[b-tz9my07zhi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bar-row[b-tz9my07zhi] {
    display: grid;
    grid-template-columns: 44px 1fr 64px;
    align-items: center;
    gap: 10px;
}

.bar-ticker[b-tz9my07zhi] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.02em;
}

.bar-track[b-tz9my07zhi] {
    height: 6px;
    background: var(--color-border-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.bar-fill[b-tz9my07zhi] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.bar-pos[b-tz9my07zhi] { background: var(--color-text-success); }
.bar-neg[b-tz9my07zhi] { background: var(--color-text-danger); }

.bar-value[b-tz9my07zhi] {
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Strategy breakdown */
.strat-empty[b-tz9my07zhi] {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.strat-subhead[b-tz9my07zhi] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-tertiary);
    margin-bottom: 8px;
}

.strat-subhead--groups[b-tz9my07zhi] {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 0.5px solid var(--color-border-tertiary);
}

.strat-types[b-tz9my07zhi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 90px;
    gap: 6px 16px;
    align-items: baseline;
    font-size: 13px;
}

.strat-type-name[b-tz9my07zhi] { color: var(--color-text-primary); }
.strat-type-name--muted[b-tz9my07zhi] { color: var(--color-text-secondary); }

.strat-type-count[b-tz9my07zhi] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    text-align: right;
}

.strat-type-pnl[b-tz9my07zhi],
.strat-pnl[b-tz9my07zhi] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.strat-table[b-tz9my07zhi] {
    display: flex;
    flex-direction: column;
}

.strat-row[b-tz9my07zhi] {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(76px, 1fr) minmax(64px, 0.8fr) 64px minmax(96px, 1.1fr);
    column-gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    font-size: 13px;
}

.strat-row:last-child[b-tz9my07zhi] { border-bottom: none; }

.strat-row--head[b-tz9my07zhi] {
    padding: 0 0 6px;
    font-size: 10.5px;
    color: var(--color-text-tertiary);
}

.strat-row .r[b-tz9my07zhi] { text-align: right; }

.strat-name-cell[b-tz9my07zhi] { min-width: 0; }

/* Wraps rather than ellipsizes, so the holdings drop to a second line when they don't fit.
   Spacing lives on the trailing side of each item so a wrapped line stays flush with "Net debit". */
.strat-name-cell > div[b-tz9my07zhi] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 2px;
}

/* What the group holds, inline after its name. */
.strat-comp[b-tz9my07zhi] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.strat-ticker[b-tz9my07zhi] {
    font-weight: 700;
    color: var(--color-text-primary);
    margin-right: 6px;
}

.strat-name[b-tz9my07zhi] {
    min-width: 0;
    margin-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.strat-warn[b-tz9my07zhi] {
    color: var(--color-text-warning);
    font-size: 12px;
    margin: 0 8px 0 -4px;
}

.strat-meta[b-tz9my07zhi] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.strat-today[b-tz9my07zhi],
.strat-greeks[b-tz9my07zhi] {
    font-variant-numeric: tabular-nums;
}

.strat-greeks[b-tz9my07zhi] {
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.strat-sep[b-tz9my07zhi] {
    margin: 0 4px;
    opacity: 0.4;
}

/* Net debit/credit, full width under each group's main line. */
.strat-risk[b-tz9my07zhi] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.strat-risk strong[b-tz9my07zhi] {
    font-weight: 600;
    color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    .strat-row[b-tz9my07zhi] {
        grid-template-columns: minmax(0, 1fr) auto auto;
        row-gap: 4px;
    }

    /* Today and the greeks drop on phones; open P&L, expiry, and the risk line stay. */
    .strat-row > :nth-child(3)[b-tz9my07zhi],
    .strat-row > :nth-child(5)[b-tz9my07zhi] {
        display: none;
    }

    /* The name cell is too narrow on phones to fit the holdings inline, so they drop to their own
       wrapping line under the ticker instead of being ellipsized. */
    .strat-comp[b-tz9my07zhi] {
        flex-basis: 100%;
        white-space: normal;
    }
}

/* DTE timeline */
.dte-timeline[b-tz9my07zhi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dte-header[b-tz9my07zhi] {
    display: grid;
    grid-template-columns: 68px 96px 64px 160px 160px 1fr 64px 90px 80px;
    gap: 8px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--color-border-secondary);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dte-header > span:not(:first-child)[b-tz9my07zhi] { text-align: right; }
.dte-header > span:nth-child(2)[b-tz9my07zhi],
.dte-header > span:nth-child(3)[b-tz9my07zhi],
.dte-header > span:nth-child(4)[b-tz9my07zhi],
.dte-header > span:nth-child(5)[b-tz9my07zhi]      { text-align: left; }

.dte-sort[b-tz9my07zhi] {
    cursor: pointer;
    user-select: none;
    transition: color 0.12s;
}

.dte-sort:hover[b-tz9my07zhi] { color: var(--color-text-secondary); }

.dte-sort-active[b-tz9my07zhi] { color: var(--color-text-primary); }

.dte-sort-caret[b-tz9my07zhi] {
    margin-left: 5px;
    font-size: 9px;
    vertical-align: middle;
}

.dte-row[b-tz9my07zhi] {
    display: grid;
    grid-template-columns: 68px 96px 64px 160px 160px 1fr 64px 90px 80px;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    font-size: 13px;
    border-radius: 6px;
    margin: 0 -6px;
    transition: background 0.12s;
}

.dte-row:hover[b-tz9my07zhi] { background: var(--color-background-secondary); }
.dte-row:last-child[b-tz9my07zhi] { border-bottom: none; }

.dte-row:last-child[b-tz9my07zhi] { border-bottom: none; }

/* .dte-pill is defined in the global app.css and stretches to fill its grid cell by
   default (grid items are justify-self: stretch unless told otherwise) — pin it to the
   start of the column so widening/narrowing the DTE column actually changes the visible
   gap before Expiration instead of just fattening the pill. */
.dte-row > .dte-pill[b-tz9my07zhi] {
    justify-self: start;
}

.dte-pos-name[b-tz9my07zhi] {
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: left;
}

.dte-days[b-tz9my07zhi] {
    text-align: right;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.dte-dir[b-tz9my07zhi] {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid currentColor;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    opacity: 0.9;
}

.dte-ticker[b-tz9my07zhi] {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
}

.dte-company[b-tz9my07zhi] {
    font-size: 12px;
    color: var(--color-text-secondary);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.dte-expiry[b-tz9my07zhi] {
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-align: left;
}

.dte-notional[b-tz9my07zhi] {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.dte-pnl[b-tz9my07zhi] {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* P&L History chart */
.an-history-empty[b-tz9my07zhi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 0;
    color: var(--color-text-tertiary);
}

.an-history-empty-icon[b-tz9my07zhi] { font-size: 28px; }
.an-history-empty-msg[b-tz9my07zhi]  { font-size: 13px; }

.an-chart-wrap[b-tz9my07zhi] {
    width: 100%;
    overflow: hidden;
}

.an-chart[b-tz9my07zhi] {
    width: 100%;
    height: auto;
    display: block;
}

.chart-axis[b-tz9my07zhi] {
    stroke: var(--color-border-secondary);
    stroke-width: 0.5;
}

.chart-zero[b-tz9my07zhi] {
    stroke: var(--color-border-secondary);
    stroke-width: 0.5;
    stroke-dasharray: 3 3;
}

.chart-line[b-tz9my07zhi] {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-netliq[b-tz9my07zhi]  { stroke: var(--color-accent); }
.chart-openpnl[b-tz9my07zhi] { stroke: var(--color-text-success); }

.chart-axis-label[b-tz9my07zhi] {
    font-size: 9px;
    fill: var(--color-text-tertiary);
    text-anchor: middle;
    font-family: inherit;
}

.chart-axis-y[b-tz9my07zhi] { text-anchor: end; }

.an-chart-legend[b-tz9my07zhi] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--color-text-secondary);
}

.legend-dot[b-tz9my07zhi] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.legend-netliq[b-tz9my07zhi]  { background: var(--color-accent); }
.legend-openpnl[b-tz9my07zhi] { background: var(--color-text-success); }
.legend-pos[b-tz9my07zhi]     { background: var(--color-text-success); }
.legend-neg[b-tz9my07zhi]     { background: var(--color-text-danger); }
.legend-mood[b-tz9my07zhi]    { background: #3b82f6; }
.legend-energy[b-tz9my07zhi]  { background: #f59e0b; }
.legend-sleep[b-tz9my07zhi]   { background: #06b6d4; }

.legend-spacer[b-tz9my07zhi] { flex: 1; }

.legend-stress-swatch[b-tz9my07zhi] {
    width: 28px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #22c55e, #ef4444);
    flex-shrink: 0;
    align-self: center;
}

.legend-sentiment-swatch[b-tz9my07zhi] {
    width: 28px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #22c55e, #94a3b8, #ef4444);
    flex-shrink: 0;
    align-self: center;
}

/* Daily Performance chart */
.dp-chart-wrap[b-tz9my07zhi] {
    position: relative;
}

.dp-tip-overlay[b-tz9my07zhi] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}

.dp-tip-zone[b-tz9my07zhi] {
    position: absolute;
    top: 0; bottom: 0;
    pointer-events: all;
    cursor: crosshair;
}

/* Detail strip — below chart, never overlapping bars */
.dp-detail-bar[b-tz9my07zhi] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 6px;
    padding: 8px 2px 6px;
    border-top: 0.5px solid var(--color-border-tertiary);
    margin-top: 8px;
    min-height: 36px;
}

.dp-detail-empty[b-tz9my07zhi] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    font-style: italic;
}

.dp-detail-date[b-tz9my07zhi] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.dp-detail-sep[b-tz9my07zhi] {
    width: 1px;
    height: 14px;
    background: var(--color-border-secondary);
    flex-shrink: 0;
    align-self: center;
}

.dp-detail-stat[b-tz9my07zhi] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.dp-detail-lbl[b-tz9my07zhi] {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dp-detail-lbl-mood[b-tz9my07zhi]      { color: #3b82f6; }
.dp-detail-lbl-energy[b-tz9my07zhi]    { color: #f59e0b; }
.dp-detail-lbl-stress[b-tz9my07zhi]    { color: #ef4444; }
.dp-detail-lbl-sleep[b-tz9my07zhi]     { color: #06b6d4; }
.dp-detail-lbl-sentiment[b-tz9my07zhi] { color: #8b5cf6; }

.dp-detail-val[b-tz9my07zhi] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.dp-detail-denom[b-tz9my07zhi] {
    font-size: 10px;
    font-weight: 400;
    color: var(--color-text-tertiary);
    margin-left: 1px;
}

/* Flex header variant for sections that have a right-side control */
.an-header-flex[b-tz9my07zhi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.an-range-select[b-tz9my07zhi] {
    font-size: 12px;
    font-family: inherit;
    padding: 5px 9px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    background: var(--color-background-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    transition: border-color 0.15s;
}

.an-range-select:focus[b-tz9my07zhi] { border-color: var(--color-accent); }

/* Shared color utilities (defined in Home.razor.css, repeat here for scoped CSS) */
.pos[b-tz9my07zhi] { color: var(--color-text-success); }
.neg[b-tz9my07zhi] { color: var(--color-text-danger); }

/* ═══════════════════════════════════════════════════════════
   TABLET: ≤1024px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .an-stat-grid[b-tz9my07zhi] { grid-template-columns: repeat(2, 1fr); }
    .an-two-col[b-tz9my07zhi] { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE: ≤768px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .an-page-header[b-tz9my07zhi] { font-size: 15px; margin-bottom: 16px; }

    /* Skeleton */
    .an-skel-grid[b-tz9my07zhi] { grid-template-columns: repeat(2, 1fr); }
    .an-skel-two[b-tz9my07zhi] { grid-template-columns: 1fr; }

    /* Stat grids */
    .an-stat-grid[b-tz9my07zhi] { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .an-two-col[b-tz9my07zhi] { grid-template-columns: 1fr; }

    /* Section cards */
    .an-section[b-tz9my07zhi] { padding: 14px; margin-bottom: 14px; }
    .an-section-title[b-tz9my07zhi] { font-size: 13px; }

    /* Calendar */
    .an-cal-layout[b-tz9my07zhi] { grid-template-columns: 1fr; }
    .an-cal-grid[b-tz9my07zhi] { gap: 3px; }
    .an-cal-month-label[b-tz9my07zhi] { font-size: 12px; min-width: 96px; }
    .an-cal-detail-stats[b-tz9my07zhi] { grid-template-columns: repeat(2, 1fr); }

    /* P&L by ticker and strategy: horizontal scroll for wide tables */
    .an-ticker-table[b-tz9my07zhi],
    .an-strat-table[b-tz9my07zhi] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .an-ticker-row[b-tz9my07zhi],
    .an-ticker-header[b-tz9my07zhi],
    .an-strat-row[b-tz9my07zhi],
    .an-strat-header[b-tz9my07zhi] {
        min-width: 600px;
    }

    /* Expiration timeline: horizontal scroll — the 9-column grid needs ~850px. The row's
       -6px hover bleed is cancelled so it isn't clipped by the scroll container. */
    .dte-timeline[b-tz9my07zhi] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dte-row[b-tz9my07zhi],
    .dte-header[b-tz9my07zhi] {
        min-width: 860px;
    }

    .dte-row[b-tz9my07zhi] {
        margin: 0;
    }

    /* Chart containers */
    .an-chart-container[b-tz9my07zhi] {
        max-width: 100%;
    }
}
/* /Pages/Contact.razor.rz.scp.css */
.contact-shell[b-tubrnb0mhu] {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 24px 72px;
    animation: hv-fade-up 0.4s ease both;
}

/* ── Hero header ── */

.contact-head[b-tubrnb0mhu] {
    text-align: center;
    margin-bottom: 40px;
}

.contact-eyebrow[b-tubrnb0mhu] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.contact-title[b-tubrnb0mhu] {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0 0 12px;
}

.contact-sub[b-tubrnb0mhu] {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 480px;
    margin: 0 auto;
}

/* ── Channel cards ── */

.contact-channels[b-tubrnb0mhu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.contact-card[b-tubrnb0mhu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 32px 24px 28px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.contact-card:hover[b-tubrnb0mhu] {
    border-color: var(--color-border-secondary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* ── Icon circle ── */

.contact-card-icon[b-tubrnb0mhu] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    font-size: 24px;
    color: var(--color-accent);
    margin-bottom: 16px;
}

/* ── Text ── */

.contact-card-label[b-tubrnb0mhu] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    margin: 0 0 8px;
}

.contact-card-value[b-tubrnb0mhu] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
}

a.contact-card:hover .contact-card-value[b-tubrnb0mhu] {
    color: var(--color-accent);
}

.contact-card-address[b-tubrnb0mhu] {
    font-style: normal;
    line-height: 1.6;
}

/* ── Responsive: stack on narrow screens ── */

@media (max-width: 540px) {
    .contact-channels[b-tubrnb0mhu] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Home.razor.rz.scp.css */
.greeting-plaque[b-xdjmpblbyc] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
}

.plaque-greeting[b-xdjmpblbyc] {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.plaque-name[b-xdjmpblbyc] {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 13px;
    font-style: italic;
    font-weight: 500;
    color: var(--color-accent);
}


.reauth-banner[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    color: #92400e;
}

[data-theme="dark"] .reauth-banner[b-xdjmpblbyc] {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.08);
}

.reauth-banner a[b-xdjmpblbyc] {
    color: inherit;
    font-weight: 600;
}

.error-state[b-xdjmpblbyc] {
    text-align: center;
    padding: 48px;
    font-size: 14px;
    color: var(--color-text-danger);
}

/* Skeleton loading state — base shimmer in app.css */

.skeleton-summary[b-xdjmpblbyc] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.skel-stat[b-xdjmpblbyc] {
    background:
        linear-gradient(var(--color-background-primary), var(--color-background-primary)) padding-box,
        linear-gradient(180deg, var(--card-edge-top), var(--card-edge-bottom)) border-box;
    border: 1px solid transparent;
    box-shadow: var(--card-shadow);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skel-label[b-xdjmpblbyc] { height: 10px; width: 55%; }
.skel-value[b-xdjmpblbyc] { height: 22px; width: 70%; }

.skel-group[b-xdjmpblbyc] {
    background:
        linear-gradient(var(--color-background-primary), var(--color-background-primary)) padding-box,
        linear-gradient(180deg, var(--card-edge-top), var(--card-edge-bottom)) border-box;
    border: 1px solid transparent;
    box-shadow: var(--card-shadow);
    border-radius: var(--border-radius-lg);
    margin-bottom: 12px;
    overflow: hidden;
}

.skel-group-header[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--color-card-chrome);
}

.skel-group-left[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.skel-ticker[b-xdjmpblbyc] { height: 16px; width: 44px; }
.skel-price[b-xdjmpblbyc]  { height: 13px; width: 88px; }
.skel-pnl[b-xdjmpblbyc]    { height: 13px; width: 56px; }

.filter-bar-row[b-xdjmpblbyc] {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 14px;
}

/* Match the summary card's first-column right edge: 25% at desktop (4-col grid),
   50% at ≤1024px (2-col grid). Search grows to fill; sort sits flush at that edge. */
.filter-left[b-xdjmpblbyc] {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex: 0 0 25%;
    min-width: 0;
}

.sort-group[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sort-label[b-xdjmpblbyc] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}

.sort-select[b-xdjmpblbyc] {
    appearance: none;
    -webkit-appearance: none;
    height: 22px;
    box-sizing: border-box;
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-family: inherit;
    padding: 0 26px 0 10px;
    outline: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.15s;
}

.sort-select option[b-xdjmpblbyc] {
    background: var(--color-background-primary);
    color: var(--color-text-primary);
}

.sort-select:hover[b-xdjmpblbyc] { border-color: var(--color-border-secondary); color: var(--color-text-primary); }
.sort-select:focus[b-xdjmpblbyc] { border-color: var(--color-accent); }

.sort-btn[b-xdjmpblbyc] {
    font-size: 11px;
    font-weight: 500;
    padding: 0 9px;
    border-radius: var(--border-radius-sm);
    border: 0.5px solid var(--color-border-tertiary);
    background: transparent;
    display: flex;
    align-items: center;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.sort-btn:hover[b-xdjmpblbyc] { background: var(--color-background-secondary); color: var(--color-text-primary); }

.sort-dir-btn[b-xdjmpblbyc] {
    font-size: 13px;
    height: 22px;
    box-sizing: border-box;
    padding: 0;
    width: 24px;
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-sm);
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
}

.sort-dir-btn:hover[b-xdjmpblbyc] { border-color: var(--color-border-secondary); color: var(--color-text-primary); }
.sort-dir-btn:focus[b-xdjmpblbyc] { border-color: var(--color-accent); outline: none; }

.sort-spacer[b-xdjmpblbyc] { flex: 1; }

.dash-topbar[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 20px;
}

.topbar-spacer[b-xdjmpblbyc] { flex: 1; }

.search-wrap[b-xdjmpblbyc] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    box-sizing: border-box;
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-md);
    background: var(--color-background-primary);
    transition: border-color 0.15s;
}

.search-wrap:focus-within[b-xdjmpblbyc] {
    border-color: var(--color-accent);
}

.search-icon[b-xdjmpblbyc] {
    position: absolute;
    left: 8px;
    font-size: 13px;
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.search-input[b-xdjmpblbyc] {
    padding: 0 30px 0 26px;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 12px;
    font-family: inherit;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    outline: none;
}

.search-input[b-xdjmpblbyc]::placeholder { color: var(--color-text-tertiary); }

.search-has-value[b-xdjmpblbyc] { padding-right: 50px; }

.search-clear[b-xdjmpblbyc] {
    position: absolute;
    right: 28px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: var(--color-text-tertiary);
    color: var(--color-background-primary);
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.5;
    padding: 0;
    line-height: 1;
}

.search-clear:hover[b-xdjmpblbyc] { opacity: 1; }

/* Position filters: icon button at the right edge of the search box + click-open flyout */
.pos-filter-btn[b-xdjmpblbyc] {
    position: absolute;
    right: 3px;
    width: 22px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--color-text-tertiary);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.pos-filter-btn:hover[b-xdjmpblbyc],
.pos-filter-btn.open[b-xdjmpblbyc] { color: var(--color-text-primary); background: var(--color-background-hover); }
.pos-filter-btn.active[b-xdjmpblbyc] { color: var(--color-accent); }

/* Dot marks a non-default filter even when the flyout is closed */
.pos-filter-btn.active[b-xdjmpblbyc]::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
}

.pos-filter-backdrop[b-xdjmpblbyc] {
    position: fixed;
    inset: 0;
    z-index: 199;
}

.pos-filter-menu[b-xdjmpblbyc] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    width: 240px;
    padding: 10px 14px 12px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pos-filter-label[b-xdjmpblbyc] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.pos-filter-label:not(:first-child)[b-xdjmpblbyc] { margin-top: 4px; }

.pos-filter-check[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-primary);
    cursor: pointer;
}

.pos-filter-check input[b-xdjmpblbyc] {
    margin: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.pos-filter-select[b-xdjmpblbyc] {
    width: 100%;
    height: 26px;
    font-size: 12px;
}

.search-dropdown[b-xdjmpblbyc] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 100%;
    background: var(--color-background-panel);
    border: 1px solid var(--color-border-secondary);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-dropdown-item[b-xdjmpblbyc] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    cursor: pointer;
    user-select: none;
}

.search-dropdown-item:last-child[b-xdjmpblbyc] { border-bottom: none; }
.search-dropdown-item:hover[b-xdjmpblbyc] { background: var(--color-background-secondary); }

.search-dropdown-sym[b-xdjmpblbyc] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.04em;
}

.search-dropdown-name[b-xdjmpblbyc] {
    font-size: 10px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Filter notice */
.filter-notice[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-secondary);
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-sm);
    padding: 7px 12px;
    margin-bottom: 14px;
}

.filter-notice strong[b-xdjmpblbyc] { color: var(--color-text-primary); font-weight: 600; }

.filter-clear[b-xdjmpblbyc] {
    margin-left: auto;
    font-size: 11px;
    padding: 2px 8px;
    color: var(--color-text-tertiary);
}

/* Summary card */
.summary-card[b-xdjmpblbyc] {
    position: relative;
    background:
        linear-gradient(var(--color-background-primary), var(--color-background-primary)) padding-box,
        linear-gradient(180deg, var(--card-edge-top), var(--card-edge-bottom)) border-box;
    border: 1px solid transparent;
    border-radius: var(--border-radius-md);
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.privacy-toggle[b-xdjmpblbyc] {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--border-radius-sm);
    transition: color 0.15s;
    z-index: 1;
}

.privacy-toggle:hover[b-xdjmpblbyc] { color: var(--color-text-secondary); }

.summary-grid[b-xdjmpblbyc] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat[b-xdjmpblbyc] {
    padding: 16px 20px;
    border-right: 0.5px solid var(--color-border-tertiary);
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

/* Primary stats fill row 1 (cols 1-3), secondary stats row 2; the combined
   options cell is last in the DOM but pinned to col 4 across both rows. */
.stat-secondary[b-xdjmpblbyc],
.stat-options[b-xdjmpblbyc] {
    border-bottom: none;
}

.stat-options[b-xdjmpblbyc] {
    grid-column: 4;
    grid-row: 1 / span 2;
    border-right: none;
    display: flex;
    flex-direction: column;
}

/* Value on the left, strike / contract / symbol counts on the right */
.opt-head[b-xdjmpblbyc] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px 10px;
    /* Minimum gap above the bar when the cell isn't tall enough for margin-top:auto (phone) */
    margin-bottom: 12px;
}

.opt-counts[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.opt-count[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    cursor: default;
}

.opt-count i[b-xdjmpblbyc] {
    font-size: 14px;
    color: var(--color-text-tertiary);
}

/* Long/short share of gross options value: thin proportional track */
.opt-ls[b-xdjmpblbyc] {
    display: flex;
    gap: 2px;
    height: 6px;
    margin-top: auto;
    padding-top: 0;
}

.opt-ls-long[b-xdjmpblbyc],
.opt-ls-short[b-xdjmpblbyc] {
    border-radius: 3px;
    min-width: 3px;
}

.opt-ls-long[b-xdjmpblbyc] {
    flex: 0 0 auto;
    background: #22c55e;
}

.opt-ls-short[b-xdjmpblbyc] {
    flex: 1 1 0;
    background: #ef4444;
}

.opt-ls-neutral .opt-ls-long[b-xdjmpblbyc],
.opt-ls-neutral .opt-ls-short[b-xdjmpblbyc] {
    background: var(--color-border-secondary);
}

.opt-ls-legend[b-xdjmpblbyc] {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.opt-ls-amt[b-xdjmpblbyc] {
    margin-left: 4px;
    font-weight: 600;
}

/* Same green/red as the P&L figures; the bar keeps the brighter fills */
.opt-ls-amt.long[b-xdjmpblbyc] { color: var(--color-positive); }
.opt-ls-amt.short[b-xdjmpblbyc] { color: var(--color-negative); }

[data-theme="light"] .opt-ls-long[b-xdjmpblbyc] { background: #16a34a; }
[data-theme="light"] .opt-ls-short[b-xdjmpblbyc] { background: #dc2626; }

.stat-label[b-xdjmpblbyc] {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.stat-value[b-xdjmpblbyc] {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

.stat-value-sm[b-xdjmpblbyc] {
    font-size: 17px;
}

.stat-sep[b-xdjmpblbyc] {
    margin: 0 6px;
    color: var(--color-border-secondary);
    font-weight: 300;
}

.ov-amount[b-xdjmpblbyc] {
    font-weight: 700;
    color: #ffffff;
}

[data-theme="light"] .ov-amount[b-xdjmpblbyc] {
    color: #0a0c10;
}

.ov-amount.manual[b-xdjmpblbyc] {
    font-weight: 600;
    color: var(--color-text-tertiary);
}

/* Total + manual value row: on desktop inline; on mobile the manual value right-justifies. */
.ov-total-row[b-xdjmpblbyc] {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}

.ov-manual-inline[b-xdjmpblbyc] {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-size: 13px;
    font-weight: 400;
}

/* Position groups — lit gradient edge (brighter top) + soft layered shadow */
.group[b-xdjmpblbyc] {
    background:
        linear-gradient(var(--color-background-primary), var(--color-background-primary)) padding-box,
        linear-gradient(180deg, var(--card-edge-top), var(--card-edge-bottom)) border-box;
    border: 1px solid transparent;
    border-radius: var(--border-radius-lg);
    margin-bottom: 12px;
    overflow: visible;
    box-shadow: var(--card-shadow);
}

.group-header[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    background: var(--color-card-chrome);
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
    /* 1px smaller than the card radius so the chrome bg doesn't bleed over the gradient edge */
    border-radius: calc(var(--border-radius-lg) - 1px) calc(var(--border-radius-lg) - 1px) 0 0;
}

.group > :last-child[b-xdjmpblbyc] {
    border-radius: 0 0 calc(var(--border-radius-lg) - 1px) calc(var(--border-radius-lg) - 1px);
}

.group-header:last-child[b-xdjmpblbyc],
.group-header:has(+ .group-body-closing)[b-xdjmpblbyc] {
    border-radius: calc(var(--border-radius-lg) - 1px);
}

.group-center[b-xdjmpblbyc] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
    white-space: nowrap;
}

.group-center-value[b-xdjmpblbyc] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.group-center-label[b-xdjmpblbyc] {
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.group-header:hover[b-xdjmpblbyc] { background: var(--color-card-chrome-hover); }


.group-left[b-xdjmpblbyc] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.group-right[b-xdjmpblbyc] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}

/* Min-width matches the rendered width of "NASDAQ" so shorter stacks
   (e.g. NYSE ⓘ) keep the price column on the same line as NASDAQ cards. */
.group-ticker-stack[b-xdjmpblbyc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 44px;
}

.group-ticker[b-xdjmpblbyc] {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--color-text-tertiary);
}

.group-ticker:hover[b-xdjmpblbyc] {
    text-decoration-color: var(--color-text-primary);
}

.group-exchange[b-xdjmpblbyc] {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Multi-word exchanges (e.g. NYSE ARCA) show the first word plus an info
   icon; hovering it opens the same flyout as the Greeks help, sized to fit
   and dropping below the icon rather than above. */
.greeks-popup.exchange-popup[b-xdjmpblbyc] {
    top: calc(100% + 6px);
    bottom: auto;
    width: auto;
    white-space: nowrap;
}

.exchange-popup .greeks-popup-name[b-xdjmpblbyc] {
    width: auto;
}

/* Manual-value flyout on the summary stats: keeps the text baseline (greeks-help
   centres by default) and opens leftward so the right-hand options card can't overflow. */
.greeks-help.manual-help[b-xdjmpblbyc] {
    align-items: baseline;
    cursor: help;
}

.greeks-popup.manual-popup[b-xdjmpblbyc] {
    left: auto;
    right: -8px;
}

/* Bottom-row stats open upward: .summary-card clips overflow. */
.greeks-popup.manual-popup-up[b-xdjmpblbyc] {
    top: auto;
    bottom: calc(100% + 6px);
}

.group-exchange-info[b-xdjmpblbyc] {
    font-size: 11px;
    cursor: help;
}

.group-exchange-info:hover[b-xdjmpblbyc] {
    color: var(--color-text-secondary);
}

.group-price[b-xdjmpblbyc] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.group-pnl[b-xdjmpblbyc] { text-align: right; }

.group-pnl-value[b-xdjmpblbyc] {
    font-size: 14px;
    font-weight: 600;
}

.group-pnl-label[b-xdjmpblbyc] {
    font-size: 10px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
    letter-spacing: 0.02em;
}

.chevron-icon[b-xdjmpblbyc] {
    font-size: 16px;
    color: var(--color-text-tertiary);
    transition: transform 180ms ease;
}

.chevron-open[b-xdjmpblbyc] {
    transform: rotate(180deg);
}

/* Card expand/collapse: animates height via grid rows (0fr <-> 1fr) plus a fade, so
   the cards below glide rather than jump. The inner wrapper clips only while an
   animation runs, leaving flyouts inside the body free to overflow once it settles. */
@keyframes group-expand-in-b-xdjmpblbyc {
    from { grid-template-rows: 0fr; opacity: 0; }
    to   { grid-template-rows: 1fr; opacity: 1; }
}

@keyframes group-collapse-out-b-xdjmpblbyc {
    from { grid-template-rows: 1fr; opacity: 1; }
    to   { grid-template-rows: 0fr; opacity: 0; }
}

@keyframes group-body-clip-b-xdjmpblbyc {
    from, to { overflow: hidden; }
}

.group-body-anim[b-xdjmpblbyc] {
    display: grid;
    grid-template-rows: 1fr;
    animation: group-expand-in-b-xdjmpblbyc 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.group-body-inner[b-xdjmpblbyc] {
    min-height: 0;
    animation: group-body-clip-b-xdjmpblbyc 260ms;
}

/* Duration mirrors GroupCollapseMs in Home.razor. */
.group-body-closing[b-xdjmpblbyc] {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
    animation: group-collapse-out-b-xdjmpblbyc 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.group-body-closing > .group-body-inner[b-xdjmpblbyc] {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .group-body-anim[b-xdjmpblbyc],
    .group-body-inner[b-xdjmpblbyc] { animation: none; }
}

/* Badges */
.badge[b-xdjmpblbyc] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    font-size: 11px;
    font-weight: 600;
    padding: 0 9px;
    border-radius: 20px;
    letter-spacing: 0.01em;
}

.badge-cc[b-xdjmpblbyc]  { background: var(--badge-cc-bg);  color: var(--badge-cc-color); }
.badge-neg[b-xdjmpblbyc] { background: var(--badge-neg-bg); color: var(--badge-neg-color); }

/* Column headers */
.col-headers[b-xdjmpblbyc] {
    display: grid;
    gap: 8px;
    padding: 8px 18px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.col-label[b-xdjmpblbyc] {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.col-sortable[b-xdjmpblbyc] {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.col-sortable:hover[b-xdjmpblbyc] {
    color: var(--color-text-secondary);
}
.col-sortable.col-sorted[b-xdjmpblbyc] {
    color: var(--color-accent);
}

/* Position rows */
.position-row[b-xdjmpblbyc] {
    display: grid;
    gap: 8px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    transition: background 0.1s;
}

.position-row:last-of-type[b-xdjmpblbyc] { border-bottom: none; }
.position-row:hover[b-xdjmpblbyc] { background: var(--color-background-secondary); }

/* Expand button */
.pos-expand-cell[b-xdjmpblbyc] { display: flex; align-items: center; justify-content: center; }
.pos-expand-btn[b-xdjmpblbyc] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 4px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    transition: color 0.1s, border-color 0.1s;
}
.pos-expand-btn:hover[b-xdjmpblbyc] { color: var(--color-text-primary); border-color: var(--color-text-tertiary); }
.pos-delete-btn[b-xdjmpblbyc] { color: var(--color-text-tertiary); }
.pos-delete-btn:hover[b-xdjmpblbyc] { color: var(--color-text-danger); border-color: var(--color-text-danger); }

/* Manual position actions — floated top-right of detail panel */
.manual-pos-actions[b-xdjmpblbyc] {
    position: absolute;
    top: 10px;
    right: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    z-index: 10;
}

/* Stock rows have no other detail content, so absolute positioning would
   collapse .pos-detail and clip the button. Keep these in normal flow. */
.pos-detail--actions-only[b-xdjmpblbyc] {
    justify-content: flex-end;
}

.manual-pos-actions--inline[b-xdjmpblbyc] {
    position: static;
    margin-left: auto;
}

.manual-action-btns[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.manual-action-btn[b-xdjmpblbyc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: var(--border-radius-sm);
    border: 1px solid;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.manual-action-sync[b-xdjmpblbyc] {
    background: color-mix(in srgb, var(--sync-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--sync-color) 40%, transparent);
    color: var(--sync-color);
}
.manual-action-sync:hover[b-xdjmpblbyc] { background: color-mix(in srgb, var(--sync-color) 22%, transparent); }

.manual-action-delete[b-xdjmpblbyc] {
    background: transparent;
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}
.manual-action-delete:hover[b-xdjmpblbyc] { background: rgba(239, 68, 68, 0.08); }

.delete-confirm[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 6px;
    animation: delete-confirm-in-b-xdjmpblbyc 0.15s ease-out;
}

/* Strategy payoff/edit/delete controls swap places with .delete-confirm; same entrance. */
.strategy-subheader-tools[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 4px;
    animation: delete-confirm-in-b-xdjmpblbyc 0.15s ease-out;
}

@keyframes delete-confirm-in-b-xdjmpblbyc {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .delete-confirm[b-xdjmpblbyc],
    .strategy-subheader-tools[b-xdjmpblbyc] { animation: none; }
}

.delete-confirm-label[b-xdjmpblbyc] {
    font-size: 11px;
    color: #ef4444;
    font-weight: 500;
    white-space: nowrap;
}

.manual-action-delete-confirm[b-xdjmpblbyc] {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    white-space: nowrap;
}
.manual-action-delete-confirm:hover[b-xdjmpblbyc] { background: #dc2626; }

.manual-action-delete-cancel[b-xdjmpblbyc] {
    background: transparent;
    border: 1px solid var(--color-border-secondary);
    color: var(--color-text-secondary);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.manual-action-delete-cancel:hover[b-xdjmpblbyc] {
    background: var(--color-background-hover);
    color: var(--color-text-primary);
}

/* Sync confirm panel */
.manual-sync-confirm[b-xdjmpblbyc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    padding: 8px 10px;
    min-width: 220px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.manual-sync-label[b-xdjmpblbyc] {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    align-self: flex-start;
}

.manual-sync-none[b-xdjmpblbyc] {
    font-size: 12px;
    color: var(--color-text-tertiary);
    font-style: italic;
    align-self: flex-start;
}

.manual-sync-option[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-secondary);
    cursor: pointer;
    align-self: flex-start;
    width: 100%;
}

.manual-sync-actions[b-xdjmpblbyc] {
    display: flex;
    gap: 6px;
    align-self: flex-end;
}

.manual-action-confirm[b-xdjmpblbyc] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.35);
    color: #22c55e;
}
.manual-action-confirm:hover:not(:disabled)[b-xdjmpblbyc] { background: rgba(34, 197, 94, 0.18); }
.manual-action-confirm:disabled[b-xdjmpblbyc] { opacity: 0.35; cursor: default; }

.manual-action-cancel[b-xdjmpblbyc] {
    background: transparent;
    border-color: var(--color-border-secondary);
    color: var(--color-text-tertiary);
}
.manual-action-cancel:hover[b-xdjmpblbyc] { color: var(--color-text-primary); }

/* Position detail panel */
.pos-detail[b-xdjmpblbyc] {
    background: var(--color-background-secondary);
    border-bottom: 0.5px solid var(--color-border-tertiary);
    padding: 12px 18px 12px 46px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    gap: 12px;
    align-items: stretch;
    animation: pos-detail-in-b-xdjmpblbyc 0.16s ease-out;
}

@keyframes pos-detail-in-b-xdjmpblbyc {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pos-detail[b-xdjmpblbyc] { animation: none; }
}

.pos-detail-section[b-xdjmpblbyc] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    padding-right: 20px;
    border-right: 0.5px solid var(--color-border-tertiary);
}

.pos-detail-section:last-child[b-xdjmpblbyc] {
    border-right: none;
    padding-right: 0;
}

.scenarios-label[b-xdjmpblbyc] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-tertiary);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.scenarios-edit-link[b-xdjmpblbyc] {
    color: var(--color-text-secondary);
    font-size: 14px;
    text-decoration: none;
    line-height: 1;
    margin-left: auto;
}

.scenarios-edit-link:hover[b-xdjmpblbyc] {
    color: var(--color-accent);
}

/* Check all / clear all / edit, right-aligned in the checklist header. */
.checklist-actions[b-xdjmpblbyc] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.checklist-actions .scenarios-edit-link[b-xdjmpblbyc] {
    margin-left: 0;
}

/* Matches .scenarios-edit-link. */
.checklist-action-btn[b-xdjmpblbyc] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1;
}

.checklist-action-btn:hover:not(:disabled)[b-xdjmpblbyc] {
    color: var(--color-accent);
}

.checklist-action-btn:disabled[b-xdjmpblbyc] {
    opacity: 0.35;
    cursor: default;
}

.scenario-row[b-xdjmpblbyc] {
    display: grid;
    align-items: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.pos-detail-section--greeks .scenario-row[b-xdjmpblbyc] {
    grid-template-columns: 72px 1fr;
}

.pos-detail-section--profits .scenario-row[b-xdjmpblbyc] {
    grid-template-columns: 84px 60px 1fr;
}

.pos-detail-section--stops .scenario-row[b-xdjmpblbyc] {
    grid-template-columns: 84px 60px 1fr;
}

.pos-detail-section--checklist[b-xdjmpblbyc] {
    min-width: 150px;
}

.checklist-count[b-xdjmpblbyc] {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-tertiary);
    background: var(--color-background-primary);
    border-radius: 8px;
    padding: 1px 5px;
    margin-left: 2px;
}

.checklist-count--done[b-xdjmpblbyc] {
    color: var(--color-text-success);
}

.checklist-count-check[b-xdjmpblbyc] {
    color: var(--color-text-success);
    font-size: 9px;
    margin-left: 1px;
}

.checklist-count-false[b-xdjmpblbyc] {
    color: #ef4444;
    font-size: 9px;
    margin-left: 1px;
}

.checklist-count-sep[b-xdjmpblbyc] {
    opacity: 0.4;
    margin: 0 1px;
}

/* label | note per row. The label takes its natural width (single line, full
   text up to the 100-char cap) and the note input right-aligns, so the inputs
   still form one aligned column and the section sizes to its widest row. */
.checklist-item[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    border-radius: 3px;
}

.checklist-item-main[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
}

.checklist-item:hover .checklist-box[b-xdjmpblbyc] {
    border-color: var(--color-text-secondary);
}

.checklist-note-input[b-xdjmpblbyc] {
    flex: 0 0 auto;
    width: 220px;
    margin-left: auto;
    padding: 3px 8px;
    font-size: 11px;
    font-family: inherit;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 4px;
    outline: none;
}

.checklist-note-input[b-xdjmpblbyc]::placeholder {
    color: var(--color-text-tertiary);
}

.checklist-note-input:focus[b-xdjmpblbyc] {
    border-color: var(--color-accent);
}

.checklist-note-input:disabled[b-xdjmpblbyc] {
    opacity: 0.45;
    cursor: not-allowed;
    background: transparent;
}

.checklist-box[b-xdjmpblbyc] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border: 1.5px solid var(--color-border-secondary);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--color-text-success);
    transition: border-color 0.1s, background 0.1s;
}

.checklist-item--checked .checklist-box[b-xdjmpblbyc] {
    background: var(--color-text-success);
    border-color: var(--color-text-success);
    color: #fff;
}

.checklist-item--false .checklist-box[b-xdjmpblbyc] {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.checklist-label[b-xdjmpblbyc] {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.3;
    /* One line per item; full text always shown (bounded by the 100-char cap). */
    white-space: nowrap;
}

.checklist-item--checked .checklist-label[b-xdjmpblbyc] {
    color: var(--color-text-tertiary);
    text-decoration: line-through;
}

.checklist-item--false .checklist-label[b-xdjmpblbyc] {
    color: var(--color-text-tertiary);
}

.checklist-pill[b-xdjmpblbyc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    font-size: 11px;
    font-weight: 600;
    padding: 0 9px;
    border-radius: 20px;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

.checklist-pill--pending[b-xdjmpblbyc] {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
}

.checklist-pill--done[b-xdjmpblbyc] {
    background: rgba(34, 197, 94, 0.14);
    color: #22c55e;
}

[data-theme="dark"] .checklist-pill--pending[b-xdjmpblbyc] { background: rgba(239, 68, 68, 0.18); }
[data-theme="dark"] .checklist-pill--done[b-xdjmpblbyc]    { background: rgba(34, 197, 94, 0.18); }

.checklist-pill-check[b-xdjmpblbyc] { font-size: 9px; margin-left: 1px; color: #22c55e; }
.checklist-pill-false[b-xdjmpblbyc] { font-size: 9px; margin-left: 1px; color: #ef4444; }
.checklist-pill-sep[b-xdjmpblbyc]   { opacity: 0.5; margin: 0 1px; }

/* Leading tile — sits where a logo would, opens the chart */
.ticker-chart-tile[b-xdjmpblbyc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-right: 8px;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.14);
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, transform 0.05s;
}

.ticker-chart-tile:hover[b-xdjmpblbyc] {
    background: rgba(127, 127, 127, 0.26);
    color: var(--color-text-primary);
}

.ticker-chart-tile:active[b-xdjmpblbyc] {
    transform: scale(0.96);
}

.scenario-gain--loss[b-xdjmpblbyc] {
    color: var(--color-text-danger) !important;
}

.scenario-met--stop[b-xdjmpblbyc] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-danger);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.scenario-name[b-xdjmpblbyc] {
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scenario-gain[b-xdjmpblbyc] { font-size: 12px; font-weight: 600; text-align: right; padding-right: 10px; }
.scenario-result[b-xdjmpblbyc] { font-weight: 500; text-align: right; }
.scenario-warn[b-xdjmpblbyc] { font-size: 11px; color: var(--color-text-secondary); font-style: italic; display: flex; align-items: center; gap: 4px; }
.scenario-warn-icon[b-xdjmpblbyc] { font-size: 13px; font-style: normal; cursor: help; opacity: 0.7; }

/* Hit levels keep their price column (e.g. a stop parked at break-even); status lives on the label + row tint. */
.scenario-status[b-xdjmpblbyc] { font-size: 13px; margin-left: 4px; vertical-align: -1px; }
.scenario-row--target-met[b-xdjmpblbyc], .scenario-row--stop-met[b-xdjmpblbyc] { border-radius: 4px; margin: 0 -6px; padding: 0 6px; }
.scenario-row--target-met[b-xdjmpblbyc] { background: color-mix(in srgb, var(--color-text-success) 10%, transparent); }
.scenario-row--target-met .scenario-status[b-xdjmpblbyc] { color: var(--color-text-success); }
.scenario-row--stop-met[b-xdjmpblbyc] { background: color-mix(in srgb, var(--color-text-danger) 10%, transparent); }
.scenario-row--stop-met .scenario-status[b-xdjmpblbyc] { color: var(--color-text-danger); }
.scenario-row--target-met .scenario-result[b-xdjmpblbyc],
.scenario-row--stop-met .scenario-result[b-xdjmpblbyc] { color: var(--color-text-tertiary); }

.position-row-closed[b-xdjmpblbyc] { opacity: 0.55; background: var(--color-background-secondary); }
.position-row-closed:hover[b-xdjmpblbyc] { opacity: 0.75; }
.position-row-closed .pos-name[b-xdjmpblbyc] {
    text-decoration: line-through;
    text-decoration-color: var(--color-text-tertiary);
    text-decoration-thickness: 1px;
}

.closed-badge[b-xdjmpblbyc] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(100, 116, 139, 0.12);
    color: var(--color-text-tertiary);
    border: 0.5px solid rgba(100, 116, 139, 0.3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Share rows sit above the contracts and get a left rule so the two kinds of
   holding are separable at a glance without changing the shared column grid.
   Same 3px weight as the options strategy rule, but indigo to match the
   Shares badge rather than the accent colour. */
.position-row-stock[b-xdjmpblbyc] {
    box-shadow: inset 3px 0 0 #6366f1;
    background: color-mix(in srgb, var(--color-background-secondary) 55%, transparent);
}

[data-theme="dark"] .position-row-stock[b-xdjmpblbyc] {
    box-shadow: inset 3px 0 0 #818cf8;
}

.stock-badge[b-xdjmpblbyc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    border: 0.5px solid rgba(99, 102, 241, 0.35);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[data-theme="dark"] .stock-badge[b-xdjmpblbyc] {
    background: rgba(99, 102, 241, 0.16);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.4);
}

.pos-name[b-xdjmpblbyc] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.pos-meta[b-xdjmpblbyc] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: 3px;
    line-height: 1.4;
}

.col-val[b-xdjmpblbyc] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.col-val.muted[b-xdjmpblbyc] { font-weight: 400; color: var(--color-text-secondary); }


/* Insights */
.insight[b-xdjmpblbyc] {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* The cell shrinks to its widest pill (inline-grid = max-content) and every
   pill row stretches to match, so stacked insights form equal-width badges. */
.insight-cell[b-xdjmpblbyc] {
    display: inline-grid;
    align-content: start;
    justify-items: stretch;
}

.insight-pill[b-xdjmpblbyc] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.01em;
    margin-bottom: 2px;
    text-align: center;
}

.insight-pill-warn[b-xdjmpblbyc] {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    border: 0.5px solid rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .insight-pill-warn[b-xdjmpblbyc] {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.3);
}

.insight-pill-info[b-xdjmpblbyc] {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
    border: 0.5px solid rgba(100, 116, 139, 0.4);
}

[data-theme="dark"] .insight-pill-info[b-xdjmpblbyc] {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    border-color: rgba(100, 116, 139, 0.35);
}

.insight-pill-profit[b-xdjmpblbyc] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    border: 0.5px solid rgba(34, 197, 94, 0.35);
}

[data-theme="dark"] .insight-pill-profit[b-xdjmpblbyc] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}

.insight-pill-stop[b-xdjmpblbyc] {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border: 0.5px solid rgba(239, 68, 68, 0.35);
}

[data-theme="dark"] .insight-pill-stop[b-xdjmpblbyc] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

.insight strong[b-xdjmpblbyc] { color: var(--color-text-primary); font-weight: 600; }

/* Group footer */
.group-footer[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: var(--color-card-chrome);
    border-top: 0.5px solid var(--color-border-tertiary);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.footer-stat[b-xdjmpblbyc] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.footer-stat strong[b-xdjmpblbyc] { color: var(--color-text-primary); font-weight: 600; }

.footer-middle[b-xdjmpblbyc] { display: flex; align-items: center; gap: 5px; }

.footer-sep[b-xdjmpblbyc] { color: var(--color-text-tertiary); }

.footer-pct[b-xdjmpblbyc] { color: var(--color-text-tertiary); font-size: 11px; }

/* Shared color utilities */
.pos[b-xdjmpblbyc] { color: var(--color-text-success); }
.neg[b-xdjmpblbyc] { color: var(--color-text-danger); }
.warn[b-xdjmpblbyc] { color: #92400e; }

/* Live status indicator */
.live-status[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.live-dot[b-xdjmpblbyc] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.live-dot-on[b-xdjmpblbyc] {
    background: var(--color-text-success);
    animation: live-pulse 2.4s ease-in-out infinite;
}

.live-dot-off[b-xdjmpblbyc] { background: var(--color-text-tertiary); }

.live-sep[b-xdjmpblbyc] {
    color: var(--color-border-secondary);
    user-select: none;
}

.live-clock[b-xdjmpblbyc] {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Price-update flash on position rows */
@keyframes price-flash-b-xdjmpblbyc {
    0%   { color: #34d399; }
    100% { color: inherit; }
}

.price-flash .col-val[b-xdjmpblbyc] { animation: price-flash-b-xdjmpblbyc 0.75s ease-out forwards; }

.group-flash .group-pnl-value[b-xdjmpblbyc],
.group-flash .group-price span[b-xdjmpblbyc] { animation: price-flash-b-xdjmpblbyc 0.75s ease-out forwards; }

/* Get started card (empty portfolio state) */
.get-started-card[b-xdjmpblbyc] {
    width: 100%;
    box-sizing: border-box;
    background:
        linear-gradient(var(--color-background-primary), var(--color-background-primary)) padding-box,
        linear-gradient(180deg, var(--card-edge-top), var(--card-edge-bottom)) border-box;
    border: 1px solid transparent;
    box-shadow: var(--card-shadow);
    border-radius: var(--border-radius-lg);
    padding: 20px 16px;
    margin-bottom: 12px;
}

.get-started-title[b-xdjmpblbyc] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px;
}

.get-started-subtitle[b-xdjmpblbyc] {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0 0 16px;
}

.get-started-options[b-xdjmpblbyc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.get-started-option[b-xdjmpblbyc] {
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.get-started-option-icon[b-xdjmpblbyc] {
    font-size: 18px;
    color: var(--color-text-tertiary);
    line-height: 1;
    margin-bottom: 2px;
}

.get-started-option-label[b-xdjmpblbyc] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.get-started-option-desc[b-xdjmpblbyc] {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.get-started-action[b-xdjmpblbyc] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    align-self: flex-start;
    text-decoration: none;
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.get-started-action:hover[b-xdjmpblbyc] {
    background: var(--color-background-secondary);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ── Strategy grouping ─────────────────────────────────────────── */

/* Circular action buttons at the end of the group header row (strategy link, ...).
   New header actions: add another <button class="group-action-btn"> after the last one. */

.group-action-btn[b-xdjmpblbyc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}

.group-action-btn:hover[b-xdjmpblbyc] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.group-action-btn.linked[b-xdjmpblbyc] {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.14);
    color: #22c55e;
}

[data-theme="dark"] .group-action-btn.linked[b-xdjmpblbyc] { background: rgba(34, 197, 94, 0.18); }

.group-action-btn.active[b-xdjmpblbyc] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.strategy-group-wrapper[b-xdjmpblbyc] {
    border-left: 3px solid var(--color-accent);
    margin: 6px 0 0;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

.strategy-subheader[b-xdjmpblbyc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
    border-radius: 0 var(--border-radius-sm) 0 0;
}

.strategy-subheader-top[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.strategy-subheader-badge[b-xdjmpblbyc] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.02em;
}

.strategy-subheader-warn[b-xdjmpblbyc] {
    color: var(--color-text-warning, #f59e0b);
    font-size: 14px;
    cursor: help;
}

.strategy-subheader-actions[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.strategy-subheader-pnl[b-xdjmpblbyc] {
    display: flex;
    gap: 16px;
    padding-left: 14px;
}

.strategy-pnl-item[b-xdjmpblbyc] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
}

.strategy-pnl-label[b-xdjmpblbyc] {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
}

.strategy-subheader-edit[b-xdjmpblbyc] {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.strategy-subheader-edit:hover[b-xdjmpblbyc] {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.strategy-subheader-remove[b-xdjmpblbyc] {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.strategy-subheader-remove:hover[b-xdjmpblbyc] {
    color: var(--color-text-danger, #ef4444);
    background: color-mix(in srgb, var(--color-text-danger, #ef4444) 10%, transparent);
}

.strategy-collapse-btn[b-xdjmpblbyc] {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 11px;
    padding: 1px 3px;
    border-radius: 3px;
    transition: color 0.15s;
}
.strategy-collapse-btn:hover[b-xdjmpblbyc] {
    color: var(--color-text-secondary);
}

.strategy-collapsed-row[b-xdjmpblbyc] {
    cursor: pointer;
    border-left: 3px solid var(--color-accent);
    transition: background 0.15s;
}
.strategy-collapsed-row:hover[b-xdjmpblbyc] {
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.dte-multi[b-xdjmpblbyc] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}

.strategy-collapsed-badge[b-xdjmpblbyc] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.02em;
}

.strategy-leg[b-xdjmpblbyc] {
    /* border now on .strategy-group-wrapper */
}

.strategy-group-wrapper .position-row-stock[b-xdjmpblbyc] {
    box-shadow: none;
}

.strategy-check[b-xdjmpblbyc] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.strategy-action-bar[b-xdjmpblbyc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-surface-alt, var(--color-bg));
    border-top: 1px solid var(--color-border);
    margin-top: 2px;
}

.strategy-action-count[b-xdjmpblbyc] {
    font-size: 13px;
    color: var(--color-text-secondary);
    flex: 1;
}

.strategy-action-btn[b-xdjmpblbyc] {
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    border: none;
}

.strategy-action-cancel[b-xdjmpblbyc] {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.strategy-action-create[b-xdjmpblbyc] {
    background: var(--color-accent);
    color: #fff;
}

.strategy-action-create:disabled[b-xdjmpblbyc] {
    opacity: 0.5;
    cursor: not-allowed;
}

.strategy-payoff-btn[b-xdjmpblbyc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--color-border-tertiary);
    border-radius: 5px;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    transition: all 0.15s;
}

.strategy-payoff-btn:hover[b-xdjmpblbyc] {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: rgba(99, 102, 241, 0.08);
}

/* ═══════════════════════════════════════════════════════════
   TABLET: ≤1024px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .summary-grid[b-xdjmpblbyc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Summary drops to 2 columns here, so its first-column edge is now at 50% */
    .filter-left[b-xdjmpblbyc] {
        flex-basis: 50%;
    }

    /* Third and fourth stats no longer end a 4-col row */
    /* 2 cols: options cell moves to col 2 spanning rows 2-3; the rest
       auto-flow as P1 P2 / P3 · / S1 · / S2 S3. DOM: P1 P2 P3 S1 S2 S3 O. */
    .stat-options[b-xdjmpblbyc] { grid-column: 2; grid-row: 2 / span 2; border-bottom: 0.5px solid var(--color-border-tertiary); }
    .stat-secondary[b-xdjmpblbyc] { border-bottom: 0.5px solid var(--color-border-tertiary); }
    .stat:nth-child(2)[b-xdjmpblbyc], .stat:nth-child(6)[b-xdjmpblbyc] { border-right: none; }
    .stat:nth-child(5)[b-xdjmpblbyc], .stat:nth-child(6)[b-xdjmpblbyc] { border-bottom: none; }

    .group-right[b-xdjmpblbyc] { gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE: ≤768px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── Greeting ── */
    .greeting-plaque[b-xdjmpblbyc] {
        margin-left: 0;
        min-width: 0;
    }

    .plaque-greeting[b-xdjmpblbyc] {
        font-size: 11px;
    }

    .plaque-name[b-xdjmpblbyc] {
        font-size: 12px;
    }

    /* ── Top bar: stack search above actions ── */
    .dash-topbar[b-xdjmpblbyc] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-bar-row[b-xdjmpblbyc] {
        flex-wrap: wrap;
    }

    /* Even spacing above/below the filter bar (matches .filter-bar-row's 14px) */
    .summary-card[b-xdjmpblbyc] {
        margin-bottom: 14px;
    }

    .filter-left[b-xdjmpblbyc] {
        flex-basis: 100%;
    }

    /* Match the 36px mobile touch-target height app.css gives buttons/selects */
    .search-wrap[b-xdjmpblbyc] {
        height: 36px;
    }

    .sort-dir-btn[b-xdjmpblbyc] {
        width: 36px;
    }

    /* Expand / Collapse aren't useful on mobile — hide to save the row */
    .sort-spacer[b-xdjmpblbyc],
    .sort-btn[b-xdjmpblbyc] {
        display: none;
    }

    .live-status[b-xdjmpblbyc] {
        font-size: 11px;
    }

    .live-sep[b-xdjmpblbyc],
    .live-clock[b-xdjmpblbyc] {
        display: none;
    }

    /* ── Summary card: 2 cols ── */
    .summary-grid[b-xdjmpblbyc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Phone: options cell goes full width at the bottom; the rest flow
       P1 P2 / P3 S1 / S2 S3. DOM: P1 P2 P3 S1 S2 S3 O. */
    .stat-options[b-xdjmpblbyc] { grid-column: 1 / -1; grid-row: auto; border-bottom: none; }
    .stat-secondary[b-xdjmpblbyc] { border-bottom: 0.5px solid var(--color-border-tertiary); }
    .stat:nth-child(2)[b-xdjmpblbyc], .stat:nth-child(4)[b-xdjmpblbyc], .stat:nth-child(6)[b-xdjmpblbyc] { border-right: none; }
    .stat:nth-child(5)[b-xdjmpblbyc], .stat:nth-child(6)[b-xdjmpblbyc] { border-bottom: 0.5px solid var(--color-border-tertiary); }

    .stat[b-xdjmpblbyc] {
        padding: 12px 14px;
    }

    .stat-value[b-xdjmpblbyc] {
        font-size: 15px;
    }

    .stat-value-sm[b-xdjmpblbyc] {
        font-size: 14px;
    }

    /* Options value: total left, manual right; full width so the L/S bar
       drops to its own line below, as before. */
    .ov-total-row[b-xdjmpblbyc] {
        display: flex;
        align-items: baseline;
        gap: 6px;
        flex: 1 1 100%;
    }

    .ov-manual-inline[b-xdjmpblbyc] {
        margin-left: auto;
        font-size: 11px;
    }

    /* Hide slash separators on mobile */
    .ov-sep[b-xdjmpblbyc] {
        display: none;
    }

    /* ── Skeleton loading: 2 cols ── */
    .skeleton-summary[b-xdjmpblbyc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ── Group headers: stacked card layout ──
       Line 1: chart tile · ticker · price+change
       Line 2: strategy badge · checklist pill · action buttons
       Line 4: open P&L · today P&L
       Chevron pinned top-right */
    .group-header[b-xdjmpblbyc] {
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 6px;
        position: relative;
        padding-right: 36px;
    }

    .group-left[b-xdjmpblbyc] {
        flex: 0 0 100%;
        min-width: 0;
        flex-wrap: wrap;
        gap: 6px 6px;
        align-items: center;
    }

    /* Line 1: chart tile + ticker left, price+change right */
    .ticker-chart-tile[b-xdjmpblbyc] {
        width: 28px;
        height: 28px;
        margin-right: 2px;
        order: 0;
    }

    .group-ticker-stack[b-xdjmpblbyc] {
        order: 0;
    }

    .group-ticker[b-xdjmpblbyc] {
        font-size: 14px;
    }

    .group-price[b-xdjmpblbyc] {
        font-size: 12px;
        order: 0;
        margin-left: auto;
    }

    /* Invisible line-break after line-1 items (order 0) */
    .group-left[b-xdjmpblbyc]::before {
        content: "";
        order: 1;
        flex: 0 0 100%;
        height: 0;
    }

    /* Line 2: badge left, checklist right — spread across the row */
    .group-left > .badge[b-xdjmpblbyc] {
        order: 2;
        margin-left: 38px;
    }

    .group-left > .group-action-btn[b-xdjmpblbyc] {
        order: 2;
    }

    .group-left > .checklist-pill[b-xdjmpblbyc] {
        order: 2;
        margin-left: auto;
    }

    /* Line 3: open P&L left, today P&L right — spread across the row */
    .group-right[b-xdjmpblbyc] {
        flex: 0 0 100%;
        justify-content: space-between;
        gap: 12px;
        padding-left: 38px;
    }

    .group-pnl[b-xdjmpblbyc] {
        text-align: left;
    }

    .group-pnl:last-of-type[b-xdjmpblbyc] {
        text-align: right;
    }

    .group-pnl-value[b-xdjmpblbyc] {
        font-size: 13px;
    }

    .group-pnl-label[b-xdjmpblbyc] {
        font-size: 9px;
    }

    /* Chevron: pin to top-right corner */
    .chevron-icon[b-xdjmpblbyc] {
        position: absolute !important;
        top: 14px;
        right: 14px;
    }

    .group-center[b-xdjmpblbyc] {
        display: none;
    }

    /* ── Hide secondary columns on mobile ── */
    .mob-hide[b-xdjmpblbyc] {
        display: none !important;
    }

    /* ── Column headers: hide on mobile (card layout has no header row) ── */
    .col-headers[b-xdjmpblbyc] {
        display: none !important;
    }

    /* ── Position rows → stacked card layout ──
       Override the inline grid-template-columns with flex so the
       data reflows into readable rows instead of one cramped grid line.
       Visible columns on mobile: position name, qty, mark, open P&L,
       today P&L, DTE, insights. All others hidden via .mob-hide. */
    .position-row[b-xdjmpblbyc],
    .position-row-stock[b-xdjmpblbyc] {
        display: flex !important;
        flex-wrap: wrap;
        gap: 2px 8px;
        padding: 12px 14px;
        align-items: baseline;
    }

    /* Expand button: pin to the left of the name line */
    .position-row > .pos-expand-cell[b-xdjmpblbyc] {
        flex: 0 0 22px;
        align-self: flex-start;
        margin-top: 2px;
    }

    /* Name/meta block: takes the rest of the first line */
    .position-row > .pos-expand-cell + div[b-xdjmpblbyc] {
        flex: 1 1 calc(100% - 34px);
        min-width: 0;
    }

    /* Data cells (qty, mark, P&L, DTE): flow as a second row */
    .position-row > div:not(.pos-expand-cell):not(.pos-expand-cell + div):not(.insight-cell):not(.mob-hide)[b-xdjmpblbyc] {
        flex: 0 0 auto;
        font-size: 12px;
        display: inline-flex;
        align-items: baseline;
        gap: 3px;
        padding: 2px 0;
    }

    /* Dot separators between visible data values */
    .position-row > div:not(.pos-expand-cell):not(.pos-expand-cell + div):not(.insight-cell):not(.mob-hide) + div:not(.insight-cell):not(.mob-hide)[b-xdjmpblbyc]::before {
        content: "·";
        color: var(--color-text-tertiary);
        margin-right: 2px;
    }

    /* Insight cell: full width at the bottom of the card */
    .position-row .insight-cell[b-xdjmpblbyc] {
        flex: 0 0 100%;
        margin-top: 4px;
    }

    /* DTE pill: compact */
    .position-row .dte-pill[b-xdjmpblbyc] {
        font-size: 11px;
    }

    /* Strategy collapsed rows */
    .strategy-collapsed-row[b-xdjmpblbyc] {
        display: flex !important;
        flex-wrap: wrap;
        gap: 2px 8px;
    }

    /* ── Position detail: stack sections ── */
    .pos-detail[b-xdjmpblbyc] {
        flex-direction: column;
        padding: 12px 14px;
        gap: 14px;
    }

    .pos-detail-section[b-xdjmpblbyc] {
        padding-right: 0;
        border-right: none;
        border-bottom: 0.5px solid var(--color-border-tertiary);
        padding-bottom: 12px;
    }

    .pos-detail-section:last-child[b-xdjmpblbyc] {
        border-bottom: none;
        padding-bottom: 0;
    }

    .manual-pos-actions[b-xdjmpblbyc] {
        position: static;
        flex-direction: row;
        align-items: center;
    }

    .checklist-item[b-xdjmpblbyc] {
        flex-wrap: wrap;
    }

    .checklist-item-main[b-xdjmpblbyc] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .checklist-label[b-xdjmpblbyc] {
        white-space: normal;
        word-break: break-word;
    }

    .checklist-note-input[b-xdjmpblbyc] {
        width: 100%;
        flex: 0 0 100%;
        margin-left: 28px;
        box-sizing: border-box;
        max-width: calc(100% - 28px);
    }

    /* ── Get started: single column ── */
    .get-started-options[b-xdjmpblbyc] {
        grid-template-columns: 1fr;
    }

    /* ── Group footer: wrap ── */
    .group-footer[b-xdjmpblbyc] {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 14px;
    }

    .footer-stat[b-xdjmpblbyc] {
        font-size: 11px;
    }

    /* ── Sort controls ── */
    .sort-group[b-xdjmpblbyc] {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* ── Filter notice ── */
    .filter-notice[b-xdjmpblbyc] {
        flex-wrap: wrap;
        font-size: 11px;
        padding: 6px 10px;
    }

    /* ── Strategy elements ── */
    .strategy-subheader-pnl[b-xdjmpblbyc] {
        flex-wrap: wrap;
        gap: 8px;
        padding-left: 0;
    }

    .strategy-action-bar[b-xdjmpblbyc] {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* ── Badges ── */
    .badge[b-xdjmpblbyc],
    .checklist-pill[b-xdjmpblbyc] {
        height: 18px;
        font-size: 10px;
        padding: 0 7px;
    }

    /* Visually match the pills; the ::after keeps a 36px touch target. */
    .group-action-btn[b-xdjmpblbyc] {
        width: 18px;
        height: 18px;
        min-height: 0;
        font-size: 11px;
        position: relative;
    }

    .group-action-btn[b-xdjmpblbyc]::after {
        content: "";
        position: absolute;
        inset: -9px;
    }

    /* ── Error/loading states ── */
    .error-state[b-xdjmpblbyc] {
        padding: 24px;
        font-size: 13px;
    }

    /* ── Reauth banner ── */
    .reauth-banner[b-xdjmpblbyc] {
        font-size: 12px;
        padding: 8px 12px;
    }
}

/* New-position arrival: a card or row that first appears on a refresh slides in with
   an accent glow and carries a short-lived "New" tag. Lifetime mirrors ArrivalSeconds
   in Home.razor. */
@keyframes arrive-in-b-xdjmpblbyc {
    from { opacity: 0; transform: translateY(-10px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes arrive-glow-b-xdjmpblbyc {
    0%   { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 70%, transparent),
                       0 0 22px color-mix(in srgb, var(--color-accent) 35%, transparent),
                       var(--card-shadow); }
    100% { box-shadow: 0 0 0 1px transparent, 0 0 22px transparent, var(--card-shadow); }
}

@keyframes arrive-wash-b-xdjmpblbyc {
    0%   { background-color: color-mix(in srgb, var(--color-accent) 16%, transparent); }
    100% { background-color: transparent; }
}

@keyframes new-tag-life-b-xdjmpblbyc {
    0%   { opacity: 0; transform: scale(0.8); }
    5%   { opacity: 1; transform: none; }
    85%  { opacity: 1; }
    100% { opacity: 0; }
}

.group--arriving[b-xdjmpblbyc] {
    animation: arrive-in-b-xdjmpblbyc 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
               arrive-glow-b-xdjmpblbyc 2.6s ease-out;
}

.position-row--arriving[b-xdjmpblbyc] {
    animation: arrive-in-b-xdjmpblbyc 380ms cubic-bezier(0.2, 0.8, 0.2, 1),
               arrive-wash-b-xdjmpblbyc 2.6s ease-out;
}

/* Ticker + "New" tag on one line, so the tag never changes the card height. */
.group-ticker-row[b-xdjmpblbyc] {
    display: inline-flex;
    align-items: center;
}

.new-tag[b-xdjmpblbyc] {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
    vertical-align: middle;
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 15%, transparent);
    animation: new-tag-life-b-xdjmpblbyc 8s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .group--arriving[b-xdjmpblbyc]       { animation: arrive-glow-b-xdjmpblbyc 2.6s ease-out; }
    .position-row--arriving[b-xdjmpblbyc] { animation: arrive-wash-b-xdjmpblbyc 2.6s ease-out; }
}

/* Strategy mode on a plan without strategy groups: the teaser sits where the action bar would. */
.strategy-teaser[b-xdjmpblbyc] {
    padding: 10px 12px;
}
/* /Pages/Privacy.razor.rz.scp.css */
.privacy-shell[b-1gfq8sfwvg] {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 24px 72px;
    animation: hv-fade-up 0.4s ease both;
}

.privacy-head[b-1gfq8sfwvg] {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.privacy-title[b-1gfq8sfwvg] {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0;
}

.privacy-effective[b-1gfq8sfwvg] {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin: 8px 0 0;
}

.privacy-body h2[b-1gfq8sfwvg] {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 32px 0 12px;
}

.privacy-body h3[b-1gfq8sfwvg] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 24px 0 8px;
}

.privacy-body p[b-1gfq8sfwvg] {
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin: 0 0 18px;
}

.privacy-body p:last-child[b-1gfq8sfwvg] {
    margin-bottom: 0;
}

.privacy-body ul[b-1gfq8sfwvg] {
    margin: 0 0 18px;
    padding-left: 24px;
}

.privacy-body li[b-1gfq8sfwvg] {
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.privacy-body li:last-child[b-1gfq8sfwvg] {
    margin-bottom: 0;
}

.privacy-body code[b-1gfq8sfwvg] {
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
}

.privacy-body a[b-1gfq8sfwvg] {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
/* /Pages/Profile.razor.rz.scp.css */
/* Match the Settings page container so both pages' cards read as one system. */
.profile-layout[b-tbv5s47tl8] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-section[b-tbv5s47tl8] {
    background:
        linear-gradient(var(--color-background-primary), var(--color-background-primary)) padding-box,
        linear-gradient(180deg, var(--card-edge-top), var(--card-edge-bottom)) border-box;
    border: 1px solid transparent;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.section-header[b-tbv5s47tl8] {
    padding: 16px 20px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-secondary);
}

.section-title[b-tbv5s47tl8] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.section-desc[b-tbv5s47tl8] {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}

.section-body[b-tbv5s47tl8] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.field-row[b-tbv5s47tl8] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-label[b-tbv5s47tl8] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.field-input[b-tbv5s47tl8] {
    padding: 8px 10px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.field-input:focus[b-tbv5s47tl8] { border-color: var(--color-accent); }

.field-actions[b-tbv5s47tl8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

@keyframes saved-fade-b-tbv5s47tl8 {
    0%   { opacity: 0; transform: translateY(-2px); }
    15%  { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

.saved-banner[b-tbv5s47tl8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(34, 197, 94, 0.08);
    border: 0.5px solid rgba(34, 197, 94, 0.3);
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-positive, #22c55e);
    animation: saved-fade-b-tbv5s47tl8 2.5s ease forwards;
}

.saved-banner i[b-tbv5s47tl8] { font-size: 15px; }

.form-error[b-tbv5s47tl8] {
    font-size: 12px;
    color: var(--color-text-danger);
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.08);
    border-radius: var(--border-radius-sm);
}

.btn-danger[b-tbv5s47tl8] {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: transparent;
    color: #ef4444;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s;
}

.btn-danger:hover[b-tbv5s47tl8] { background: rgba(239, 68, 68, 0.08); }

.delete-confirm-msg[b-tbv5s47tl8] {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Achievements */
/* Trophy case behind the badges: a recessed panel lit by a soft gold spotlight from above,
   with a gold shelf line beneath. Light theme by default, deeper "velvet" in dark. */
.ach-case[b-tbv5s47tl8] {
    --ach-case-bg: linear-gradient(#eef1f6, #e6eaf1);
    --ach-case-inset: inset 0 2px 8px rgba(15, 23, 42, 0.12);
    --ach-case-spot: rgba(211, 168, 54, 0.18);
    border-radius: var(--border-radius-md);
    padding: 26px 20px 22px;
    background:
        radial-gradient(ellipse 50% 90% at 50% 0%, var(--ach-case-spot), transparent 70%),
        var(--ach-case-bg);
    box-shadow: var(--ach-case-inset), inset 0 0 0 1px rgba(211, 168, 54, 0.25);
}

[data-theme="dark"] .ach-case[b-tbv5s47tl8] {
    --ach-case-bg: linear-gradient(#0b1020, #0e1424);
    --ach-case-inset: inset 0 3px 12px rgba(0, 0, 0, 0.7);
    --ach-case-spot: rgba(211, 168, 54, 0.16);
}

.ach-shelf[b-tbv5s47tl8] {
    height: 3px;
    max-width: 420px;
    margin: 18px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #a9822a, #f6e3ab, #a9822a, transparent);
}

/* Centered, so new badges grow outward from the middle of the card. */
.ach-grid[b-tbv5s47tl8] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.ach-badge[b-tbv5s47tl8] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 96px;
    text-align: center;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.ach-badge-img[b-tbv5s47tl8] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #d9a83b;
    box-shadow: 0 0 0 3px rgba(217, 168, 59, 0.22), var(--card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ach-badge:hover .ach-badge-img[b-tbv5s47tl8] {
    transform: scale(1.06);
    box-shadow: 0 0 0 5px rgba(217, 168, 59, 0.3), var(--card-shadow);
}

.ach-badge-label[b-tbv5s47tl8] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ach-empty[b-tbv5s47tl8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0 2px;
    font-size: 13px;
    color: var(--color-text-tertiary);
}

.ach-empty .ti[b-tbv5s47tl8] {
    font-size: 26px;
    opacity: 0.6;
}

/* ── 3D challenge coin in the achievement modal ─────────────────────────────
   Rotation comes from js/achievement-coin.js (transform + --sheen on .ach-coin). */
.ach-coin-stage[b-tbv5s47tl8] {
    position: relative;
    z-index: 1;
    width: 180px;
    height: 180px;
    display: grid;
    place-items: center;
    perspective: 700px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.ach-coin-stage.dragging[b-tbv5s47tl8] {
    cursor: grabbing;
}

.ach-coin-shadow[b-tbv5s47tl8] {
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 110px;
    height: 14px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.35), transparent);
    filter: blur(2px);
}

.ach-coin[b-tbv5s47tl8] {
    --t: 20px;
    position: relative;
    width: 150px;
    height: 150px;
    transform-style: preserve-3d;
    will-change: transform;
}

.ach-coin-face[b-tbv5s47tl8] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.ach-coin-front[b-tbv5s47tl8] { transform: translateZ(calc(var(--t) / 2)); }
.ach-coin-back[b-tbv5s47tl8]  { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }

/* Gold bezel on both faces */
.ach-coin-face[b-tbv5s47tl8]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: inset 0 0 0 5px #d9a83b, inset 0 0 0 6px #7a5512, inset 0 2px 0 5px #ffe7a3;
}

/* Specular sheen that slides across as the coin turns */
.ach-coin-face[b-tbv5s47tl8]::after {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.08) 54%, transparent 62%);
    transform: translateX(var(--sheen, -60%));
    mix-blend-mode: overlay;
}

.ach-coin-front img[b-tbv5s47tl8] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Engraved reverse: member number + award date */
.ach-coin-back[b-tbv5s47tl8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    color: #6b4a0f;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 55%),
        radial-gradient(circle, #d9a83b 0 55%, #a8791f 100%);
}

.ach-coin-ring[b-tbv5s47tl8] {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1px dashed rgba(107, 74, 15, 0.55);
}

.ach-engrave[b-tbv5s47tl8] {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45), 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.ach-coin-mark[b-tbv5s47tl8] { width: 34px; height: 20px; margin-bottom: 2px; }
.ach-coin-k1[b-tbv5s47tl8]   { font-size: 8px; font-weight: 800; letter-spacing: 0.22em; }
.ach-coin-k2[b-tbv5s47tl8]   { font-size: 22px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ach-coin-k3[b-tbv5s47tl8]   { font-size: 7px; font-weight: 700; letter-spacing: 0.18em; opacity: 0.85; }
.ach-coin-k4[b-tbv5s47tl8]   { font-size: 7px; font-weight: 600; letter-spacing: 0.12em; margin-top: 3px; opacity: 0.8; }

/* Reeded (ridged) edge; geometry is inline per segment from Profile.razor */
.ach-coin-edge[b-tbv5s47tl8] {
    position: absolute;
    left: 50%;
    top: 50%;
    height: var(--t);
    background: repeating-linear-gradient(90deg, #7a5512 0 1px, #e8c063 1px 3px, #a8791f 3px 4px);
}

.ach-coin-hint[b-tbv5s47tl8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--color-text-tertiary);
    transition: opacity 0.4s;
}

.ach-coin-hint.gone[b-tbv5s47tl8] {
    opacity: 0;
}

/* Achievement detail modal */
.modal-backdrop[b-tbv5s47tl8] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(3px);
    animation: ach-fade-in-b-tbv5s47tl8 0.15s ease-out;
}

.modal-dismiss[b-tbv5s47tl8] {
    position: absolute;
    inset: 0;
}

.ach-modal-panel[b-tbv5s47tl8] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 360px;
    max-width: calc(100vw - 32px);
    padding: 40px 28px 28px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    animation: ach-scale-in-b-tbv5s47tl8 0.2s cubic-bezier(0.2, 0.8, 0.2, 1.1);
}

.modal-action[b-tbv5s47tl8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.1s, background 0.1s;
}

.modal-action:hover[b-tbv5s47tl8] {
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
}

.ach-modal-close[b-tbv5s47tl8] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

.ach-modal-glow[b-tbv5s47tl8] {
    position: absolute;
    top: -60px;
    left: 50%;
    width: 260px;
    height: 260px;
    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(217, 168, 59, 0.35), transparent 70%);
    animation: ach-glow-pulse-b-tbv5s47tl8 2.4s ease-in-out infinite;
}

.ach-modal-status[b-tbv5s47tl8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #a8791f;
    background: rgba(217, 168, 59, 0.16);
}

.ach-modal-title[b-tbv5s47tl8] {
    margin-top: 10px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    background: linear-gradient(180deg, #f3d17a, #b8842a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #b8842a;
}

.ach-modal-desc[b-tbv5s47tl8] {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-align: center;
}

.ach-modal-awarded[b-tbv5s47tl8] {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    letter-spacing: 0.01em;
}

.ach-plaque[b-tbv5s47tl8] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border-radius: 5px;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(160deg, #f6e3ab, #d3a836 55%, #a9822a);
    border: 1px solid #6b4f14;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 2px rgba(0, 0, 0, 0.22),
        0 2px 4px rgba(0, 0, 0, 0.18);
}

.ach-modal-plaque[b-tbv5s47tl8] {
    margin-top: 8px;
    padding: 7px 22px;
}

.ach-badge-plaque[b-tbv5s47tl8] {
    margin-top: 4px;
    padding: 4px 12px;
}

.ach-plaque-label[b-tbv5s47tl8] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ach-badge-plaque .ach-plaque-label[b-tbv5s47tl8] {
    font-size: 8px;
    letter-spacing: 0.05em;
}

.ach-plaque-num[b-tbv5s47tl8] {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ach-badge-plaque .ach-plaque-num[b-tbv5s47tl8] {
    font-size: 13px;
}

.ach-plaque-total[b-tbv5s47tl8] {
    font-weight: 600;
    opacity: 0.85;
}

.ach-plaque-label[b-tbv5s47tl8],
.ach-plaque-num[b-tbv5s47tl8],
.ach-plaque-total[b-tbv5s47tl8] {
    color: #3a2606;
}

@keyframes ach-fade-in-b-tbv5s47tl8 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ach-scale-in-b-tbv5s47tl8 {
    from { opacity: 0; transform: scale(0.92) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes ach-glow-pulse-b-tbv5s47tl8 {
    0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;    transform: translateX(-50%) scale(1.08); }
}

/* Dev-only admin escape hatch (the "Dev: Tier Override" card) — reuses the same amber
   "warn" tokens as Settings' DTE Thresholds rather than introducing a new color pair, just to
   make it visually obvious this isn't a real subscription control. */
.profile-section--dev[b-tbv5s47tl8] {
    background:
        linear-gradient(var(--color-background-primary), var(--color-background-primary)) padding-box,
        linear-gradient(180deg, var(--dte-warn-color), var(--dte-warn-color)) border-box;
}

.profile-section--dev .section-header[b-tbv5s47tl8] {
    background: var(--dte-warn-bg);
}

.profile-section--dev .section-title[b-tbv5s47tl8] {
    color: var(--dte-warn-color);
}

.dev-badge[b-tbv5s47tl8] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    margin-left: 8px;
    border-radius: 999px;
    background: var(--dte-warn-color);
    color: var(--dte-warn-bg);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* Dev tier override — three equal buttons spanning the card width. */
.dev-tier-grid[b-tbv5s47tl8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.dev-tier-btn[b-tbv5s47tl8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border-secondary);
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.dev-tier-btn:hover:not(:disabled)[b-tbv5s47tl8] {
    color: var(--color-text-primary);
    border-color: var(--color-text-tertiary);
}

.dev-tier-btn.active[b-tbv5s47tl8] {
    background: var(--dte-warn-color);
    border-color: var(--dte-warn-color);
    color: var(--dte-warn-bg);
}

.dev-tier-btn:disabled[b-tbv5s47tl8] { opacity: 0.6; cursor: default; }

/* Shared controls used by the Subscription card. */
@keyframes spin-b-tbv5s47tl8 {
    to { transform: rotate(360deg); }
}

.saved-msg-slot[b-tbv5s47tl8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    min-width: 64px;
    visibility: hidden;
}

.saved-msg[b-tbv5s47tl8] {
    color: var(--color-positive, #22c55e);
    visibility: visible;
    animation: saved-fade-b-tbv5s47tl8 2.5s ease forwards;
}

.saved-msg i[b-tbv5s47tl8] { font-size: 14px; }

.save-spinner[b-tbv5s47tl8] {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-tbv5s47tl8 0.7s linear infinite;
    vertical-align: -2px;
    margin-right: 4px;
}

/* Toggle group */
.toggle-group[b-tbv5s47tl8] {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.toggle-btn[b-tbv5s47tl8] {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border-secondary);
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.toggle-btn.active[b-tbv5s47tl8] {
    background: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    color: var(--color-background-primary);
}

.btn-primary[b-tbv5s47tl8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--border-radius-sm);
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    align-self: flex-start;
}

.btn-primary:hover[b-tbv5s47tl8] { background: var(--color-card-chrome-hover); }

/* ── Subscription (top) card ──────────────────────────────────────────────
   Moved here from Settings. The section chrome (.profile-section, .section-header,
   .section-body) and the shared controls above are defined earlier in this file. */

/* Return-from-Stripe banners */
.billing-banner[b-tbv5s47tl8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--border-radius-lg);
    font-size: 13px;
    border: 1px solid var(--color-border-tertiary);
}

.billing-banner--ok[b-tbv5s47tl8] {
    color: var(--color-positive);
    border-color: color-mix(in srgb, var(--color-positive) 35%, transparent);
    background: color-mix(in srgb, var(--color-positive) 8%, transparent);
}

.billing-banner--muted[b-tbv5s47tl8] {
    color: var(--color-text-secondary);
    background: var(--color-background-secondary);
}

.billing-msg[b-tbv5s47tl8] {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.billing-msg--error[b-tbv5s47tl8] { color: var(--color-negative); }

.interval-toggle[b-tbv5s47tl8] {
    display: flex;
    justify-content: center;
}

/* Free user's plan line under the tiers — one slim row, intentionally lighter than the paid
   current-plan panel so it reads as a footnote, not a competing card. */
.free-plan-strip[b-tbv5s47tl8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-md);
    background: var(--color-background-secondary);
}

.free-plan-badge[b-tbv5s47tl8] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.free-plan-text[b-tbv5s47tl8] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.free-plan-name[b-tbv5s47tl8] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.free-plan-since[b-tbv5s47tl8] {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* Tier cards */
.tier-grid[b-tbv5s47tl8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: stretch;
}

.tier-card[b-tbv5s47tl8] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 20px 22px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-lg);
    background: var(--color-background-secondary);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.tier-card:hover[b-tbv5s47tl8] {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow);
}

/* Promoted tier — accent border + soft ring, plus the ribbon above. */
.tier-card--featured[b-tbv5s47tl8] {
    border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, transparent), var(--card-shadow);
}

.tier-ribbon[b-tbv5s47tl8] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    background: var(--color-accent);
    color: #fff;
    box-shadow: var(--card-shadow);
}

.tier-tagline[b-tbv5s47tl8] {
    font-size: 12.5px;
    line-height: 1.35;
    text-align: center;
    color: var(--color-text-tertiary);
    /* Reserve room so a shorter tagline doesn't shrink its card out of step with the taller one. */
    min-height: 34px;
}

.tier-savings[b-tbv5s47tl8] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-positive);
    background: color-mix(in srgb, var(--color-positive) 12%, transparent);
    padding: 2px 9px;
    border-radius: 999px;
}

/* Tier medallions — the same badge art set as each Stripe product's image. */
.tier-medallion[b-tbv5s47tl8] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--card-shadow);
}

.tier-name[b-tbv5s47tl8] {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
}

.tier-price[b-tbv5s47tl8] {
    display: flex;
    align-items: baseline;
    gap: 3px;
    color: var(--color-text-primary);
}

.tier-amount[b-tbv5s47tl8] {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tier-interval[b-tbv5s47tl8] {
    font-size: 13px;
    color: var(--color-text-tertiary);
}

.tier-price--empty[b-tbv5s47tl8] {
    font-size: 13px;
    color: var(--color-text-tertiary);
}

.tier-cta[b-tbv5s47tl8] {
    width: 100%;
    justify-content: center;
    /* Pin the button to the card bottom so both cards' CTAs align regardless of the
       savings badge or tagline length above. Override .btn-primary's flex-start. */
    margin-top: auto;
    align-self: stretch;
}

.btn-primary:disabled[b-tbv5s47tl8] { opacity: 0.6; cursor: default; }

/* Current-plan panel (already-subscribed users) — a header band with the medallion, tier name and
   status pill, then a stat row (Member for / Renews). */
.current-plan[b-tbv5s47tl8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.current-plan-header[b-tbv5s47tl8] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.current-plan-header .tier-medallion[b-tbv5s47tl8] {
    width: 52px;
    height: 52px;
}

.current-plan-heading[b-tbv5s47tl8] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* Push the status pill to the far right of the header. */
    margin-right: auto;
}

.current-plan-tier[b-tbv5s47tl8] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}

.current-plan-sub[b-tbv5s47tl8] {
    font-size: 12.5px;
    color: var(--color-text-tertiary);
    letter-spacing: 0.01em;
}

/* Access state and renewal intent are separate pills sitting side by side, so a cancelled-but-
   still-active plan reads as both "Active" and "Won't renew" rather than one ambiguous label. */
.status-pills[b-tbv5s47tl8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-pill[b-tbv5s47tl8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-pill-dot[b-tbv5s47tl8] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-pill--ok[b-tbv5s47tl8] {
    color: var(--color-positive);
    background: color-mix(in srgb, var(--color-positive) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-positive) 30%, transparent);
}

.status-pill--warn[b-tbv5s47tl8] {
    color: #f59e0b;
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}

.status-pill--muted[b-tbv5s47tl8] {
    color: var(--color-text-secondary);
    background: var(--color-background-secondary);
    border-color: var(--color-border-secondary);
}

/* Stat tiles — hairline dividers via a 1px gap over a border-coloured background. auto-fit keeps a
   lone stat full-width when there's no renewal date. */
.current-plan-stats[b-tbv5s47tl8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    background: var(--color-border-tertiary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.plan-stat[b-tbv5s47tl8] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    background: var(--color-background-secondary);
}

.plan-stat-label[b-tbv5s47tl8] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
}

.plan-stat-value[b-tbv5s47tl8] {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}

@media (max-width: 640px) {
    .tier-grid[b-tbv5s47tl8] { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE: ≤768px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .profile-layout[b-tbv5s47tl8] { gap: 12px; }
    .section-header[b-tbv5s47tl8] { padding: 14px; }
    .section-body[b-tbv5s47tl8] { padding: 14px; gap: 12px; }
    .section-title[b-tbv5s47tl8] { font-size: 13px; }
    .ach-case[b-tbv5s47tl8] { padding: 20px 12px 16px; }
    .dev-tier-grid[b-tbv5s47tl8] { grid-template-columns: 1fr; }
    .tier-grid[b-tbv5s47tl8] { grid-template-columns: 1fr; }
}
/* /Pages/Settings.razor.rz.scp.css */
.settings-layout[b-e3vdrle1o8] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Sections stack in a single column at the full container width; the
   grid/col wrappers remain in the markup for a possible future split. */
.settings-grid[b-e3vdrle1o8] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

.settings-col[b-e3vdrle1o8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.settings-section[b-e3vdrle1o8] {
    background:
        linear-gradient(var(--color-background-primary), var(--color-background-primary)) padding-box,
        linear-gradient(180deg, var(--card-edge-top), var(--card-edge-bottom)) border-box;
    border: 1px solid transparent;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.section-header[b-e3vdrle1o8] {
    padding: 16px 20px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-secondary);
}

.section-title[b-e3vdrle1o8] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.section-desc[b-e3vdrle1o8] {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}

.section-body[b-e3vdrle1o8] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.field-row[b-e3vdrle1o8] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-label[b-e3vdrle1o8] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.field-input[b-e3vdrle1o8] {
    padding: 8px 10px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.field-input:focus[b-e3vdrle1o8] { border-color: var(--color-accent); }

.field-row.two-col[b-e3vdrle1o8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.field-input-suffix[b-e3vdrle1o8] {
    font-size: 12px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

/* Manual Positions: label-left / control-right settings rows */
.c-body[b-e3vdrle1o8] { gap: 0; }

.c-row[b-e3vdrle1o8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 15px 0;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    flex-wrap: wrap;
}

.c-row--last[b-e3vdrle1o8] { border-bottom: none; }

/* Small basis so a dropdown fits beside the label like the switches do; the
   description wraps instead. */
.c-row-label[b-e3vdrle1o8] { flex: 1 1 160px; min-width: 0; }

.c-title[b-e3vdrle1o8] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.c-desc[b-e3vdrle1o8] {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}

.c-control[b-e3vdrle1o8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;   /* stays right-aligned even when it wraps under the label */
}

.c-select[b-e3vdrle1o8] {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-background-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-sm);
    padding: 9px 32px 9px 14px;
    cursor: pointer;
    min-width: 150px;
    outline: none;
    transition: border-color 0.15s, color 0.15s;
}

.c-select:hover[b-e3vdrle1o8] { border-color: var(--color-border-secondary); color: var(--color-text-primary); }
.c-select:focus[b-e3vdrle1o8] { border-color: var(--color-accent); }

.c-custom-input[b-e3vdrle1o8] {
    width: 80px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius-sm);
    padding: 8.5px 8px;
    outline: none;
}

.c-switch[b-e3vdrle1o8] {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--color-border-secondary);
    border: none;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
    transition: background 0.15s;
}

.c-switch[b-e3vdrle1o8]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-background-primary);
    transition: transform 0.15s;
}

.c-switch.on[b-e3vdrle1o8] { background: var(--color-accent); }
.c-switch.on[b-e3vdrle1o8]::after { transform: translateX(16px); }

.field-actions[b-e3vdrle1o8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

@keyframes saved-fade-b-e3vdrle1o8 {
    0%   { opacity: 0; transform: translateY(-2px); }
    15%  { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes spin-b-e3vdrle1o8 {
    to { transform: rotate(360deg); }
}

.saved-msg-slot[b-e3vdrle1o8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    min-width: 64px;
    visibility: hidden;
}

.saved-msg[b-e3vdrle1o8] {
    color: var(--color-positive, #22c55e);
    visibility: visible;
    animation: saved-fade-b-e3vdrle1o8 2.5s ease forwards;
}

.saved-msg i[b-e3vdrle1o8] { font-size: 14px; }

.save-spinner[b-e3vdrle1o8] {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-e3vdrle1o8 0.7s linear infinite;
    vertical-align: -2px;
    margin-right: 4px;
}

.form-select[b-e3vdrle1o8] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-family: inherit;
    padding: 5px 32px 5px 12px;
    outline: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s;
}

.form-select:hover[b-e3vdrle1o8] { border-color: var(--color-border-secondary); color: var(--color-text-primary); }
.form-select:focus[b-e3vdrle1o8] { border-color: var(--color-accent); }

/* Toggle group */
.toggle-group[b-e3vdrle1o8] {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.toggle-btn[b-e3vdrle1o8] {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border-secondary);
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.toggle-btn.active[b-e3vdrle1o8] {
    background: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    color: var(--color-background-primary);
}

/* Card chrome swatch picker */
.swatch-row-label[b-e3vdrle1o8] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: 6px;
}

.swatch-group[b-e3vdrle1o8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.swatch-btn[b-e3vdrle1o8] {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border-secondary);
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.swatch-btn.active[b-e3vdrle1o8] {
    border-color: var(--color-accent);
    color: var(--color-text-primary);
    font-weight: 600;
}

.swatch[b-e3vdrle1o8] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.12);
    flex-shrink: 0;
}

.swatch-default[b-e3vdrle1o8]  { background: #e2e8f0; }
.swatch-blue[b-e3vdrle1o8]     { background: #185FA5; }
.swatch-emerald[b-e3vdrle1o8]  { background: #1a6b4a; }
.swatch-obsidian[b-e3vdrle1o8] { background: #1a1825; }
.swatch-violet[b-e3vdrle1o8]   { background: #4c1d95; }
.swatch-brick[b-e3vdrle1o8]    { background: #7f1d1d; }
.swatch-amber[b-e3vdrle1o8]    { background: #a16207; }
.swatch-ocean[b-e3vdrle1o8]    { background: #0e7490; }
.swatch-sunset[b-e3vdrle1o8]   { background: linear-gradient(90deg, #9a3412, #a16207); }
.swatch-midnight[b-e3vdrle1o8] { background: linear-gradient(90deg, #1e1b2e, #1e3a8a); }
.swatch-nebula[b-e3vdrle1o8]   { background: linear-gradient(90deg, #6d28d9, #1d4ed8); }
.swatch-lagoon[b-e3vdrle1o8]   { background: linear-gradient(90deg, #0e7490, #047857); }
.swatch-forest[b-e3vdrle1o8]   { background: linear-gradient(90deg, #166534, #115e59); }
.swatch-deepsea[b-e3vdrle1o8]  { background: linear-gradient(90deg, #1e3a8a, #0e7490); }
.swatch-rosewood[b-e3vdrle1o8] { background: linear-gradient(90deg, #581c87, #9f1239); }

/* Profit / Stop tab header */
.pl-tab-header[b-e3vdrle1o8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* Visible-column toggle chips */
.col-chips[b-e3vdrle1o8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.col-chip[b-e3vdrle1o8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--color-border-secondary);
    background: var(--color-background-secondary);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.col-chip:hover[b-e3vdrle1o8] {
    color: var(--color-text-primary);
    border-color: var(--color-text-tertiary);
}

.col-chip--on[b-e3vdrle1o8] {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 600;
}

.col-chip i[b-e3vdrle1o8] { font-size: 13px; }

/* DTE threshold zones */
.dte-zones[b-e3vdrle1o8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 4px;
}

.dte-zone[b-e3vdrle1o8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--border-radius-md);
    border: 0.5px solid transparent;
}

.dte-zone--urgent[b-e3vdrle1o8] { background: rgba(239, 68, 68, 0.08);  border-color: rgba(239, 68, 68, 0.3); }
.dte-zone--warn[b-e3vdrle1o8]   { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.3); }
.dte-zone--ok[b-e3vdrle1o8]     { background: rgba(34, 197, 94, 0.08);  border-color: rgba(34, 197, 94, 0.3); }

.dte-zone-top[b-e3vdrle1o8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dte-zone-name[b-e3vdrle1o8] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.dte-zone--urgent .dte-zone-name[b-e3vdrle1o8] { color: var(--dte-urgent-color); }
.dte-zone--warn   .dte-zone-name[b-e3vdrle1o8] { color: var(--dte-warn-color); }
.dte-zone--ok     .dte-zone-name[b-e3vdrle1o8] { color: var(--dte-ok-color); }

.dte-zone-range[b-e3vdrle1o8] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: rgba(127, 127, 127, 0.16);
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.dte-zone-edit[b-e3vdrle1o8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
}

.dte-zone-lbl[b-e3vdrle1o8] {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dte-zone-input[b-e3vdrle1o8] {
    width: 62px;
    padding: 7px 4px;
    text-align: center;
    border: 1.5px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    background: var(--color-background-primary);
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
    -moz-appearance: textfield;
}

/* Drop the browser's number spinner for a cleaner value tile */
.dte-zone-input[b-e3vdrle1o8]::-webkit-outer-spin-button,
.dte-zone-input[b-e3vdrle1o8]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Each input's border + focus ring picks up its zone colour */
.dte-zone--urgent .dte-zone-input[b-e3vdrle1o8] { border-color: rgba(239, 68, 68, 0.4); }
.dte-zone--urgent .dte-zone-input:focus[b-e3vdrle1o8] {
    border-color: rgba(239, 68, 68, 0.9);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.dte-zone--warn .dte-zone-input[b-e3vdrle1o8] { border-color: rgba(245, 158, 11, 0.4); }
.dte-zone--warn .dte-zone-input:focus[b-e3vdrle1o8] {
    border-color: rgba(245, 158, 11, 0.9);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

@media (max-width: 800px) {
    .dte-zones[b-e3vdrle1o8] { grid-template-columns: 1fr; }
}

.form-error[b-e3vdrle1o8] {
    font-size: 12px;
    color: var(--color-text-danger);
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.08);
    border-radius: var(--border-radius-sm);
}

/* Schwab connection card */
.connection-card[b-e3vdrle1o8] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.conn-table[b-e3vdrle1o8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.conn-row[b-e3vdrle1o8] {
    display: grid;
    grid-template-columns: 76px 1fr;
    align-items: center;
    gap: 12px;
}

.conn-row-lbl[b-e3vdrle1o8] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.conn-row-val[b-e3vdrle1o8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.conn-footer[b-e3vdrle1o8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 12px;
}

/* Disconnected state: status + note stacked, then a right-aligned action row
   below, matching the content-then-.field-actions pattern of the other cards. */
.connection-disconnected[b-e3vdrle1o8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.connection-disconnected-info[b-e3vdrle1o8] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.connection-status[b-e3vdrle1o8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot[b-e3vdrle1o8] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-pending[b-e3vdrle1o8]      { background: #f59e0b; }
.status-connected[b-e3vdrle1o8]    { background: #22c55e; }
.status-disconnected[b-e3vdrle1o8] { background: var(--color-border-secondary); }
.status-error[b-e3vdrle1o8]        { background: #ef4444; }

.connection-note[b-e3vdrle1o8] {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.permission-badge[b-e3vdrle1o8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    letter-spacing: 0.01em;
}

[data-theme="dark"] .permission-badge[b-e3vdrle1o8] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

/* Outlined twin of .btn-danger (same size) so Reconnect/Disconnect read as a pair.
   inline-flex centers the label when the mobile 36px touch-target min-height kicks in. */
.btn-secondary[b-e3vdrle1o8] {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border-secondary);
    background: transparent;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-secondary:hover[b-e3vdrle1o8] {
    background: var(--color-background-hover);
    color: var(--color-text-primary);
}

.btn-primary[b-e3vdrle1o8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--border-radius-sm);
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    align-self: flex-start;
}

.btn-primary:hover[b-e3vdrle1o8] { background: var(--color-card-chrome-hover); }
.btn-primary:disabled[b-e3vdrle1o8] { opacity: 0.6; cursor: default; }

.btn-danger[b-e3vdrle1o8] {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: transparent;
    color: #ef4444;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s;
}

.btn-danger:hover[b-e3vdrle1o8] { background: rgba(239, 68, 68, 0.08); }

.stream-status-row[b-e3vdrle1o8] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.stream-dot[b-e3vdrle1o8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stream-dot-on[b-e3vdrle1o8]      { background: var(--color-text-success); animation: live-pulse 2.4s ease-in-out infinite; }
.stream-dot-off[b-e3vdrle1o8]     { background: var(--color-border-secondary); }
.stream-dot-unknown[b-e3vdrle1o8] { background: #f59e0b; }

.stream-label[b-e3vdrle1o8] { font-weight: 500; }

.stream-checking[b-e3vdrle1o8] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* Profit Levels */
.section-empty[b-e3vdrle1o8] {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin: 0;
}

/* No bottom margin here or on the checklist list: .section-body's gap spaces the content from
   its actions row, the same distance every card uses. */
.pl-table[b-e3vdrle1o8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pl-table thead th[b-e3vdrle1o8] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px 6px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    text-align: left;
}

.pl-table thead .pl-th-order[b-e3vdrle1o8] { width: 36px; }

.pl-row td[b-e3vdrle1o8] {
    padding: 6px 8px;
    vertical-align: middle;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.pl-row:last-child td[b-e3vdrle1o8] { border-bottom: none; }

.pl-order-cell[b-e3vdrle1o8] { width: 36px; }

.pl-order-btn[b-e3vdrle1o8] {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 1px 3px;
    line-height: 1;
    border-radius: 3px;
    display: block;
}
.pl-order-btn:hover:not(:disabled)[b-e3vdrle1o8] { color: var(--color-text-primary); background: var(--color-background-secondary); }
.pl-order-btn:disabled[b-e3vdrle1o8] { opacity: 0.2; cursor: default; }

.pl-label-input[b-e3vdrle1o8]  { width: 100%; min-width: 0; }
/* Unified value field: input + unit share one bordered pill */
.pl-value-cell[b-e3vdrle1o8] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    background: var(--color-background-secondary);
    padding-right: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pl-value-cell:focus-within[b-e3vdrle1o8] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.field-input.pl-value-input[b-e3vdrle1o8] {
    width: 88px;
    text-align: right;
    font-weight: 600;
    border: none;
    background: transparent;
    padding: 8px 4px 8px 10px;
    -moz-appearance: textfield;
}

.pl-value-input[b-e3vdrle1o8]::-webkit-outer-spin-button,
.pl-value-input[b-e3vdrle1o8]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pl-type-toggle[b-e3vdrle1o8]  { flex-shrink: 0; }

/* Keep type/value/remove columns snug so the label column absorbs the width */
.pl-table th:nth-child(3)[b-e3vdrle1o8], .pl-row td:nth-child(3)[b-e3vdrle1o8] { width: 110px; }
.pl-table th:nth-child(4)[b-e3vdrle1o8], .pl-row td:nth-child(4)[b-e3vdrle1o8] { width: 150px; }
.pl-row td:nth-child(5)[b-e3vdrle1o8] { width: 40px; }

.pl-unit[b-e3vdrle1o8] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-tertiary);
}

.pl-remove[b-e3vdrle1o8] {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 4px;
}
.pl-remove:hover[b-e3vdrle1o8] { color: var(--color-text-danger, #ef4444); background: none; }

.checklist-settings-list[b-e3vdrle1o8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checklist-settings-row[b-e3vdrle1o8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checklist-settings-num[b-e3vdrle1o8] {
    font-size: 12px;
    color: var(--color-text-tertiary);
    width: 16px;
    flex-shrink: 0;
    text-align: right;
}

.checklist-settings-input[b-e3vdrle1o8] {
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE: ≤768px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .settings-page[b-e3vdrle1o8] { gap: 14px; }

    .card[b-e3vdrle1o8] {
        border-radius: var(--border-radius-md);
    }

    .c-header[b-e3vdrle1o8] {
        padding: 14px;
    }

    .c-body[b-e3vdrle1o8] {
        padding: 0 14px 14px;
    }

    /* Two-col fields → single column */
    .field-row.two-col[b-e3vdrle1o8] {
        grid-template-columns: 1fr;
    }

    /* DTE zones already goes 1fr at 800px, reinforce */
    .dte-zones[b-e3vdrle1o8] {
        grid-template-columns: 1fr;
    }

    /* Settings rows */
    .c-row[b-e3vdrle1o8] {
        gap: 10px;
        padding: 12px 0;
    }

    /* Card background swatches — wrap instead of overflowing */
    .swatch-group[b-e3vdrle1o8] {
        flex-wrap: wrap;
    }

    .swatch-btn[b-e3vdrle1o8] {
        padding: 6px 10px;
    }

    /* Checklist builder */
    .cl-item-grid[b-e3vdrle1o8] {
        grid-template-columns: 1fr;
    }

    /* Danger zone */
    .danger-zone-actions[b-e3vdrle1o8] {
        flex-direction: column;
        align-items: stretch;
    }

}

/* A saved level beyond the plan's limit: kept, but not applied on the dashboard. */
.pl-row--inactive td[b-e3vdrle1o8] { opacity: 0.45; }
.checklist-settings-row--inactive[b-e3vdrle1o8] { opacity: 0.45; }

/* Actions row with something on the left (an upgrade hint) and Saved + Save on the right. */
.field-actions--split[b-e3vdrle1o8] {
    justify-content: space-between;
}

.field-actions--split[b-e3vdrle1o8]  .upgrade-hint { margin: 0; }

.field-actions-right[b-e3vdrle1o8] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
/* /Pages/Support.razor.rz.scp.css */
.support-shell[b-wa0jwiymkh] {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 24px 72px;
    animation: hv-fade-up 0.4s ease both;
}

/* ── Hero header ── */

.support-head[b-wa0jwiymkh] {
    text-align: center;
    margin-bottom: 40px;
}

.support-eyebrow[b-wa0jwiymkh] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.support-title[b-wa0jwiymkh] {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0 0 12px;
}

.support-sub[b-wa0jwiymkh] {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 520px;
    margin: 0 auto;
}

/* ── Quick-contact channels ── */

.support-channels[b-wa0jwiymkh] {
    display: flex;
    gap: 12px;
    margin-bottom: 48px;
}

.support-channel[b-wa0jwiymkh] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.support-channel:hover[b-wa0jwiymkh] {
    border-color: var(--color-border-secondary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.support-channel > i[b-wa0jwiymkh] {
    font-size: 22px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.channel-label[b-wa0jwiymkh] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    margin-bottom: 2px;
}

.channel-value[b-wa0jwiymkh] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.support-channel:hover .channel-value[b-wa0jwiymkh] {
    color: var(--color-accent);
}

/* ── Sections ── */

.support-section[b-wa0jwiymkh] {
    margin-bottom: 48px;
}

.section-heading[b-wa0jwiymkh] {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-heading > i[b-wa0jwiymkh] {
    color: var(--color-accent);
    font-size: 20px;
}

.section-desc[b-wa0jwiymkh] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 24px;
    line-height: 1.6;
}

/* ── FAQ accordion ── */

.faq-list[b-wa0jwiymkh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.faq-item[b-wa0jwiymkh] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: border-color 0.15s;
}

.faq-item[open][b-wa0jwiymkh] {
    border-color: var(--color-border-secondary);
}

.faq-question[b-wa0jwiymkh] {
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

.faq-question[b-wa0jwiymkh]::-webkit-details-marker {
    display: none;
}

.faq-question[b-wa0jwiymkh]::after {
    content: "\eb3a"; /* ti-chevron-down */
    font-family: "tabler-icons";
    font-size: 16px;
    color: var(--color-text-tertiary);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 12px;
}

.faq-item[open] > .faq-question[b-wa0jwiymkh]::after {
    transform: rotate(180deg);
}

.faq-answer[b-wa0jwiymkh] {
    padding: 0 20px 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* ── Troubleshooting tips ── */

.tip-grid[b-wa0jwiymkh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.tip-card[b-wa0jwiymkh] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 20px;
}

.tip-card h3[b-wa0jwiymkh] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px;
}

.tip-card p[b-wa0jwiymkh] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

.tip-card a[b-wa0jwiymkh] {
    color: var(--color-accent);
    text-decoration: none;
}

.tip-card a:hover[b-wa0jwiymkh] {
    text-decoration: underline;
}

/* ── Support form ── */

[b-wa0jwiymkh] .support-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 28px;
}

[b-wa0jwiymkh] .form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-wa0jwiymkh] .form-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-tertiary);
}

[b-wa0jwiymkh] .form-input {
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text-primary);
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-md);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
}

[b-wa0jwiymkh] .form-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

[b-wa0jwiymkh] .form-input::placeholder {
    color: var(--color-text-tertiary);
}

[b-wa0jwiymkh] textarea.form-input {
    resize: vertical;
    min-height: 100px;
}

[b-wa0jwiymkh] select.form-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

[b-wa0jwiymkh] .form-submit {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--color-accent);
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}

[b-wa0jwiymkh] .form-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

[b-wa0jwiymkh] .form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ── Status banner ── */

[b-wa0jwiymkh] .form-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--border-radius-md);
    font-size: 14px;
    line-height: 1.5;
}

[b-wa0jwiymkh] .form-status-success {
    background: color-mix(in srgb, #22c55e 10%, transparent);
    border: 1px solid color-mix(in srgb, #22c55e 30%, transparent);
    color: #15803d;
}

[b-wa0jwiymkh] .form-status-error {
    background: color-mix(in srgb, #ef4444 10%, transparent);
    border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
    color: #dc2626;
}

/* ── Spinner ── */

[b-wa0jwiymkh] .form-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-wa0jwiymkh 0.6s linear infinite;
}

@keyframes spin-b-wa0jwiymkh {
    to { transform: rotate(360deg); }
}

/* ── Validation ── */

[b-wa0jwiymkh] .validation-message {
    font-size: 12px;
    color: #ef4444;
    margin-top: 2px;
}

/* ── Responsive ── */

@media (max-width: 600px) {
    .support-channels[b-wa0jwiymkh] {
        flex-direction: column;
    }

    .tip-grid[b-wa0jwiymkh] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Terms.razor.rz.scp.css */
.terms-shell[b-p52z9z1kcu] {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 24px 72px;
    animation: hv-fade-up 0.4s ease both;
}

.terms-head[b-p52z9z1kcu] {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.terms-title[b-p52z9z1kcu] {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0;
}

.terms-body p[b-p52z9z1kcu] {
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin: 0 0 18px;
}

.terms-body p:last-child[b-p52z9z1kcu] {
    margin-bottom: 0;
}

/* Lead risk warning sits a touch stronger than the body disclosures. */
.terms-body p.terms-lead[b-p52z9z1kcu] {
    color: var(--color-text-primary);
    font-weight: 500;
}

.terms-body a[b-p52z9z1kcu] {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
/* /Shared/AboutModal.razor.rz.scp.css */
/* ── Modal shell (mirrors StrategyPickerPopover / AddPositionModal) ── */
.modal-backdrop[b-vepymz2l2t] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(3px);
}

.modal-dismiss[b-vepymz2l2t] {
    position: absolute;
    inset: 0;
}

.modal-panel[b-vepymz2l2t] {
    position: relative;
    z-index: 1;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.modal-header[b-vepymz2l2t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--color-card-chrome);
    border-bottom: 0.5px solid var(--color-border-tertiary);
    flex-shrink: 0;
}

.modal-header-left[b-vepymz2l2t] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.modal-title[b-vepymz2l2t] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.modal-close[b-vepymz2l2t] {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 4px 6px;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background 0.1s, color 0.1s;
}

.modal-close:hover[b-vepymz2l2t] {
    background: rgba(255,255,255,0.22);
    color: var(--color-text-primary);
}

.modal-body[b-vepymz2l2t] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
}

/* ── About content ── */
.about-hero[b-vepymz2l2t] {
    padding: 22px 18px 16px;
    text-align: center;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.about-brand[b-vepymz2l2t] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.about-brand-accent[b-vepymz2l2t] {
    color: var(--color-accent);
}

.about-eyebrow[b-vepymz2l2t] {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.about-desc[b-vepymz2l2t] {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.about-section[b-vepymz2l2t] {
    padding: 14px 18px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.about-note[b-vepymz2l2t] {
    margin: 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-text-tertiary);
}

.about-links[b-vepymz2l2t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 4px 12px;
    padding: 12px 18px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.about-links a[b-vepymz2l2t] {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
    padding: 4px 0;
}

.about-links a:hover[b-vepymz2l2t] { text-decoration: underline; }

.about-footer[b-vepymz2l2t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 18px 14px;
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.about-footer a[b-vepymz2l2t] {
    color: inherit;
    text-decoration: none;
}

.about-footer a:hover[b-vepymz2l2t] {
    color: var(--color-text-secondary);
    text-decoration: underline;
}

.about-build[b-vepymz2l2t] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    border: 0.5px solid var(--color-border-tertiary);
}
/* /Shared/AddPositionModal.razor.rz.scp.css */
.modal-backdrop[b-gx6eus2s5t] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(3px);
}

.modal-dismiss[b-gx6eus2s5t] {
    position: absolute;
    inset: 0;
}

.modal-panel[b-gx6eus2s5t] {
    position: relative;
    z-index: 1;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    width: 460px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.28);
    /* Not overflow:hidden — the Expiration/Strike dropdowns must be able to extend
       past the panel's bottom edge. Header and footer round their own corners instead. */
}

/* Header matches card chrome */
.modal-header[b-gx6eus2s5t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--color-card-chrome);
    border-bottom: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.modal-header-left[b-gx6eus2s5t] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.modal-title[b-gx6eus2s5t] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.modal-subtitle[b-gx6eus2s5t] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    font-weight: 500;
}

.modal-close[b-gx6eus2s5t] {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 4px 6px;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background 0.1s, color 0.1s;
}

.modal-close:hover[b-gx6eus2s5t] {
    background: rgba(255,255,255,0.22);
    color: var(--color-text-primary);
}

/* Body */
.modal-body[b-gx6eus2s5t] {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.form-section[b-gx6eus2s5t] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.form-section:last-child[b-gx6eus2s5t] {
    border-bottom: none;
}

.form-row[b-gx6eus2s5t] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-row.two-col[b-gx6eus2s5t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-label[b-gx6eus2s5t] {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.form-input[b-gx6eus2s5t] {
    padding: 8px 10px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus[b-gx6eus2s5t] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* Segmented Call/Put control */
.segmented-control[b-gx6eus2s5t] {
    display: flex;
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    padding: 3px;
    gap: 3px;
}

.seg-btn[b-gx6eus2s5t] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.seg-btn:hover:not(.seg-btn--active)[b-gx6eus2s5t] {
    background: var(--color-background-hover);
    color: var(--color-text-primary);
}

.seg-btn--active[b-gx6eus2s5t] {
    font-weight: 600;
    color: #fff;
}

.seg-btn--call.seg-btn--active[b-gx6eus2s5t]  { background: #16a34a; }
.seg-btn--put.seg-btn--active[b-gx6eus2s5t]   { background: #dc2626; }
.seg-btn--stock.seg-btn--active[b-gx6eus2s5t] { background: #6366f1; }

/* Ticker row */
.ticker-input-wrap[b-gx6eus2s5t] {
    position: relative;
}

.ticker-field-wrap[b-gx6eus2s5t] {
    position: relative;
    display: flex;
    align-items: center;
}

.ticker-input[b-gx6eus2s5t] {
    font-weight: 500;
    padding-right: 32px !important;
}

.ticker-input--loaded[b-gx6eus2s5t] {
    border-color: #16a34a;
}

.ticker-spinner[b-gx6eus2s5t] {
    position: absolute;
    right: 10px;
    font-size: 14px;
    color: var(--color-text-tertiary);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.ticker-spinner--done[b-gx6eus2s5t] {
    color: #16a34a;
}

@keyframes spin-b-gx6eus2s5t { to { transform: rotate(360deg); } }
.spin[b-gx6eus2s5t] { display: inline-block; animation: spin-b-gx6eus2s5t 0.8s linear infinite; }

/* Chain loaded status */
.chain-status-row[b-gx6eus2s5t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chain-status[b-gx6eus2s5t] {
    font-size: 11px;
    color: var(--color-text-success);
    display: flex;
    align-items: center;
    gap: 4px;
}

.underlying-price[b-gx6eus2s5t] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.underlying-price strong[b-gx6eus2s5t] {
    color: var(--color-text-primary);
    font-weight: 700;
}

/* Autocomplete dropdown */
.ticker-suggestions[b-gx6eus2s5t] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
}

.ticker-suggestions li[b-gx6eus2s5t] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.ticker-suggestions li:hover[b-gx6eus2s5t] { background: var(--color-background-hover); }

.ticker-sug-sym[b-gx6eus2s5t] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
    min-width: 52px;
}

.ticker-sug-name[b-gx6eus2s5t] {
    font-size: 12px;
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Trade price with $ prefix */
.price-input-wrap[b-gx6eus2s5t] {
    position: relative;
    display: flex;
    align-items: center;
}

.price-prefix[b-gx6eus2s5t] {
    position: absolute;
    left: 10px;
    font-size: 13px;
    color: var(--color-text-tertiary);
    pointer-events: none;
    z-index: 1;
}

.price-input[b-gx6eus2s5t] {
    padding-left: 20px !important;
}

/* Bid / Ask / Mark chips */
.chain-price-hint[b-gx6eus2s5t] {
    display: flex;
    gap: 6px;
}

.price-chip[b-gx6eus2s5t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 10px;
    color: var(--color-text-tertiary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-sm);
    padding: 5px 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s, background 0.12s;
}

.price-chip:hover[b-gx6eus2s5t] {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.price-chip strong[b-gx6eus2s5t] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0;
    text-transform: none;
}

.price-chip--mark[b-gx6eus2s5t] {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.price-chip--mark strong[b-gx6eus2s5t] { color: var(--color-accent); }

.price-chip--active[b-gx6eus2s5t] {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 15%, transparent);
    color: var(--color-text-primary);
}

.price-chip--mark--active[b-gx6eus2s5t] {
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* Expiration dropdown */
.exp-dropdown-wrap[b-gx6eus2s5t] {
    position: relative;
}

.exp-trigger[b-gx6eus2s5t] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-align: left;
}

.exp-trigger--set[b-gx6eus2s5t] {
    font-weight: 600;
}

.exp-trigger-dte[b-gx6eus2s5t] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-tertiary);
}

.exp-trigger-placeholder[b-gx6eus2s5t] {
    color: var(--color-text-tertiary);
}

.exp-trigger-caret[b-gx6eus2s5t] {
    margin-left: auto;
    font-size: 14px;
    color: var(--color-text-tertiary);
}

.exp-trigger:disabled[b-gx6eus2s5t] {
    opacity: 0.5;
    cursor: default;
}

.exp-dropdown[b-gx6eus2s5t] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0;
}

.exp-dropdown-item[b-gx6eus2s5t] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    transition: background 0.1s;
}

.exp-dropdown-item:last-child[b-gx6eus2s5t] {
    border-bottom: none;
}

.exp-dropdown-item:hover[b-gx6eus2s5t] {
    background: var(--color-background-secondary);
}

.exp-dropdown-item--active[b-gx6eus2s5t] {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.exp-dropdown-item--active:hover[b-gx6eus2s5t] {
    background: color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.exp-item-placeholder[b-gx6eus2s5t] {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.exp-item-date[b-gx6eus2s5t] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.exp-item-right[b-gx6eus2s5t] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.exp-item-agg[b-gx6eus2s5t] {
    font-size: 10px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

/* Footer */
.modal-footer[b-gx6eus2s5t] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 18px;
    border-top: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-secondary);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.btn-ghost[b-gx6eus2s5t] {
    background: none;
    border: 1px solid var(--color-border-secondary);
    color: var(--color-text-secondary);
    padding: 7px 16px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s, color 0.1s;
}

.btn-ghost:hover[b-gx6eus2s5t] {
    background: var(--color-background-hover);
    color: var(--color-text-primary);
}

.btn-primary[b-gx6eus2s5t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-accent);
    border: none;
    color: #fff;
    padding: 7px 18px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}

.btn-primary:hover:not(:disabled)[b-gx6eus2s5t] { opacity: 0.88; }
.btn-primary:disabled[b-gx6eus2s5t] { opacity: 0.5; cursor: default; }

/* Free plan's open-position cap, e.g. "7 of 10 open manual positions". */
.position-cap-line[b-gx6eus2s5t] {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}

/* Success state */
.form-error[b-gx6eus2s5t] {
    font-size: 12px;
    color: var(--color-text-danger);
    background: color-mix(in srgb, var(--color-text-danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text-danger) 25%, transparent);
    border-radius: var(--border-radius-sm);
    padding: 8px 12px;
}

.submit-success[b-gx6eus2s5t] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-success);
    padding: 32px 0;
    justify-content: center;
}

/* ═══ MOBILE ═══ */
@media (max-width: 768px) {
    .modal-panel[b-gx6eus2s5t] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-gx6eus2s5t],
    .modal-footer[b-gx6eus2s5t] {
        border-radius: 0;
    }

    .modal-body[b-gx6eus2s5t] {
        flex: 1;
        overflow-y: auto;
    }
}
/* /Shared/ChartModal.razor.rz.scp.css */
.modal-backdrop[b-drdqovnu49] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(3px);
}

.modal-dismiss[b-drdqovnu49] {
    position: absolute;
    inset: 0;
}

.modal-panel[b-drdqovnu49] {
    position: relative;
    z-index: 1;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.chart-modal-panel[b-drdqovnu49] {
    display: flex;
    flex-direction: column;
    width: 820px;
    height: 600px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    min-width: 360px;
    min-height: 300px;
}

.modal-header[b-drdqovnu49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--color-card-chrome);
    border-bottom: 0.5px solid var(--color-border-tertiary);
    cursor: move;
    flex-shrink: 0;
}

.modal-header-left[b-drdqovnu49] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.modal-title[b-drdqovnu49] {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.01em;
}

.modal-subtitle[b-drdqovnu49] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    font-weight: 500;
}

.modal-header-actions[b-drdqovnu49] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.modal-action[b-drdqovnu49] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.1s, background 0.1s;
}

.modal-action:hover[b-drdqovnu49] {
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
}

.chart-modal-body[b-drdqovnu49] {
    flex: 1;
    min-height: 0;
    padding: 12px;
}

.chart-modal-container[b-drdqovnu49] {
    width: 100%;
    height: 100%;
}

/* Bottom-right corner grip for resizing */
.chart-resize-handle[b-drdqovnu49] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 2;
    background:
        linear-gradient(135deg, transparent 0 50%, var(--color-text-tertiary) 50% 60%, transparent 60% 72%, var(--color-text-tertiary) 72% 82%, transparent 82%);
    opacity: 0.6;
}

.chart-resize-handle:hover[b-drdqovnu49] {
    opacity: 1;
}

/* ═══ MOBILE ═══ */
@media (max-width: 768px) {
    .modal-panel[b-drdqovnu49] {
        border-radius: 0;
    }

    .chart-modal-panel[b-drdqovnu49] {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        min-width: 0;
        min-height: 0;
        border-radius: 0;
    }

    .chart-resize-handle[b-drdqovnu49] { display: none; }
}
/* /Shared/CookieConsent.razor.rz.scp.css */
.cookie-banner[b-rmgs7n1tkw] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 24px;
    background: var(--color-background-secondary);
    border-top: 1px solid var(--color-border-tertiary);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
}

.cookie-text[b-rmgs7n1tkw] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    flex: 1;
    min-width: 0;
}

.cookie-text a[b-rmgs7n1tkw] {
    color: var(--color-accent);
    text-decoration: underline;
}

.cookie-actions[b-rmgs7n1tkw] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-btn[b-rmgs7n1tkw] {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.cookie-btn:hover[b-rmgs7n1tkw] { opacity: 0.85; }

.cookie-btn-accept[b-rmgs7n1tkw] {
    background: var(--color-accent);
    color: #fff;
}

.cookie-btn-reject[b-rmgs7n1tkw] {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-secondary);
}

.cookie-btn-reject:hover[b-rmgs7n1tkw] {
    background: var(--color-background-tertiary, rgba(128, 128, 128, 0.08));
}

@media (max-width: 600px) {
    .cookie-banner[b-rmgs7n1tkw] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .cookie-actions[b-rmgs7n1tkw] {
        justify-content: flex-end;
    }
}
/* /Shared/DonutChart.razor.rz.scp.css */
/* Categorical slots, validated as an adjacent set for CVD and normal vision
   against #ffffff (light) and #111827 (dark). Light slots 3–5 sit under 3:1,
   so the legend always shows values. */
.donut[b-myj27fag0y] {
    --donut-1: #2a78d6;
    --donut-2: #eb6834;
    --donut-3: #1baf7a;
    --donut-4: #eda100;
    --donut-5: #e87ba4;
    --donut-6: #008300;
    --donut-7: #4a3aa7;
    --donut-other: #9ca3af;

    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

[data-theme="dark"] .donut[b-myj27fag0y] {
    --donut-1: #3987e5;
    --donut-2: #d95926;
    --donut-3: #199e70;
    --donut-4: #c98500;
    --donut-5: #d55181;
    --donut-6: #008300;
    --donut-7: #9085e9;
    --donut-other: #6b7280;
}

.donut-title[b-myj27fag0y] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-tertiary);
}

.donut-empty[b-myj27fag0y] {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.donut-figure[b-myj27fag0y] {
    position: relative;
    width: 132px;
    height: 132px;
    align-self: center;
}

.donut-svg[b-myj27fag0y] {
    width: 100%;
    height: 100%;
    display: block;
}

.donut-slice[b-myj27fag0y] {
    stroke-width: 14;
    cursor: default;
    transition: opacity 0.12s ease;
}

.donut-slice--dim[b-myj27fag0y] {
    opacity: 0.35;
}

.donut-center[b-myj27fag0y] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 0 26px;
    text-align: center;
}

.donut-center-val[b-myj27fag0y] {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.1;
}

.donut-center-lbl[b-myj27fag0y] {
    font-size: 10px;
    color: var(--color-text-tertiary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.donut-legend[b-myj27fag0y] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.donut-legend-row[b-myj27fag0y] {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto 34px;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    padding: 2px 4px;
    border-radius: 4px;
}

.donut-legend-row--active[b-myj27fag0y] {
    background: var(--color-background-secondary);
}

.donut-swatch[b-myj27fag0y] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.donut-legend-lbl[b-myj27fag0y] {
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.donut-legend-val[b-myj27fag0y],
.donut-legend-pct[b-myj27fag0y] {
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.donut-legend-pct[b-myj27fag0y] {
    color: var(--color-text-tertiary);
}

.donut-help-icon[b-myj27fag0y] {
    font-size: 13px;
    cursor: help;
    opacity: 0.7;
}

/* Drops below and opens leftward: the analytics card clips overflow, and this
   chart sits in the right-hand column. */
.greeks-popup.donut-help-popup[b-myj27fag0y] {
    top: calc(100% + 6px);
    bottom: auto;
    left: auto;
    right: -8px;
    width: 300px;
}
/* /Shared/FeatureTeaser.razor.rz.scp.css */
/* Same surface as the Greeks flyout (.greeks-popup), laid inline instead of floating. */
.feature-teaser[b-vb2x5qr4v8] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--border-radius-md);
    padding: 10px 14px;
    max-width: 360px;
}

.feature-teaser--compact[b-vb2x5qr4v8] {
    padding: 8px 12px;
    max-width: 260px;
}

.feature-teaser-head[b-vb2x5qr4v8] {
    display: flex;
    align-items: center;
}

.feature-teaser-name[b-vb2x5qr4v8] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.feature-teaser-desc[b-vb2x5qr4v8] {
    margin: 4px 0 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-secondary);
    text-transform: none;
    letter-spacing: normal;
}

.feature-teaser-link[b-vb2x5qr4v8] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.feature-teaser-link:hover[b-vb2x5qr4v8] {
    text-decoration: underline;
}
/* /Shared/HarborIqMark.razor.rz.scp.css */
.iq-mark[b-z1ws1q6zxe] {
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.iq-mark-letters[b-z1ws1q6zxe] {
    stroke: var(--color-accent);
}
/* /Shared/NotFoundView.razor.rz.scp.css */
.nf-wrap[b-72iuh8p39w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 72px 24px;
    text-align: center;
}

.nf-code[b-72iuh8p39w] {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-text-tertiary);
}

.nf-title[b-72iuh8p39w] {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.nf-desc[b-72iuh8p39w] {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.nf-home[b-72iuh8p39w] {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--color-accent);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
}

.nf-home:hover[b-72iuh8p39w] { filter: brightness(1.08); }
/* /Shared/PayoffDiagramModal.razor.rz.scp.css */
.payoff-overlay[b-zb3ll9gvfx] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: payoff-fade-b-zb3ll9gvfx 0.15s ease-out;
}

@keyframes payoff-fade-b-zb3ll9gvfx {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.payoff-modal[b-zb3ll9gvfx] {
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    width: 620px;
    max-width: 92vw;
    overflow: hidden;
    animation: payoff-scale-b-zb3ll9gvfx 0.18s ease-out;
}

@keyframes payoff-scale-b-zb3ll9gvfx {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.payoff-header[b-zb3ll9gvfx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    background: var(--color-card-chrome);
}

.payoff-title[b-zb3ll9gvfx] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.payoff-close[b-zb3ll9gvfx] {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.12s;
}

.payoff-close:hover[b-zb3ll9gvfx] {
    color: var(--color-text-primary);
}

.payoff-body[b-zb3ll9gvfx] {
    padding: 18px;
}

.payoff-chart[b-zb3ll9gvfx] {
    width: 100%;
    height: auto;
}

/* Content around the chart lines up with its plot area: the SVG is 560 wide with a
   50-unit Pad each side (PayoffDiagramModal.Width/Pad), and it scales with the body. */
.payoff-legend[b-zb3ll9gvfx],
.payoff-stats[b-zb3ll9gvfx],
.payoff-note[b-zb3ll9gvfx] {
    margin-left: calc(100% * 50 / 560);
    margin-right: calc(100% * 50 / 560);
}

.payoff-legend[b-zb3ll9gvfx] {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.payoff-legend-item[b-zb3ll9gvfx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.payoff-legend-swatch[b-zb3ll9gvfx] {
    width: 16px;
    border-top: 2px solid var(--color-accent);
}

.payoff-legend-swatch--now[b-zb3ll9gvfx] {
    border-top-style: dashed;
    opacity: 0.6;
}

.payoff-stats[b-zb3ll9gvfx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 0.5px solid var(--color-border-tertiary);
}

.payoff-stat-sub[b-zb3ll9gvfx] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.payoff-stat-sub .pos[b-zb3ll9gvfx] { color: var(--color-text-success); }
.payoff-stat-sub .neg[b-zb3ll9gvfx] { color: var(--color-text-danger); }

.payoff-stat[b-zb3ll9gvfx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.payoff-stat-label[b-zb3ll9gvfx] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.payoff-stat-value[b-zb3ll9gvfx] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.payoff-stat-value--profit[b-zb3ll9gvfx] { color: var(--color-text-success); }
.payoff-stat-value--loss[b-zb3ll9gvfx]   { color: var(--color-text-danger); }

.payoff-note[b-zb3ll9gvfx] {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 11px;
    color: var(--color-text-tertiary);
}

/* ═══ MOBILE ═══ */
@media (max-width: 768px) {
    .payoff-modal[b-zb3ll9gvfx] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .payoff-body[b-zb3ll9gvfx] {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
    }

    .payoff-stats[b-zb3ll9gvfx] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /Shared/PlansModal.razor.rz.scp.css */
/* ── Modal shell (mirrors AboutModal / AddPositionModal) ── */
.modal-backdrop[b-itmvjj319l] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(3px);
}

.modal-dismiss[b-itmvjj319l] {
    position: absolute;
    inset: 0;
}

.modal-panel[b-itmvjj319l] {
    position: relative;
    z-index: 1;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    width: 640px;
    max-width: calc(100vw - 32px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.modal-header[b-itmvjj319l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--color-card-chrome);
    border-bottom: 0.5px solid var(--color-border-tertiary);
    flex-shrink: 0;
}

.modal-header-left[b-itmvjj319l] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.modal-title[b-itmvjj319l] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.modal-subtitle[b-itmvjj319l] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    font-weight: 500;
}

.modal-close[b-itmvjj319l] {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 4px 6px;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background 0.1s, color 0.1s;
}

.modal-close:hover[b-itmvjj319l] {
    background: rgba(255,255,255,0.22);
    color: var(--color-text-primary);
}

.modal-body[b-itmvjj319l] {
    overflow: auto;
    flex: 1;
}

.modal-footer[b-itmvjj319l] {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-top: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-secondary);
    flex-shrink: 0;
}

.btn-primary[b-itmvjj319l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-accent);
    border: none;
    color: #fff;
    padding: 7px 18px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.btn-primary:hover[b-itmvjj319l] { opacity: 0.88; }

/* ── Comparison table ── */
.plans-table[b-itmvjj319l] {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 12px;
}

/* Tier headers stay visible while scrolling to a highlighted row. */
.plans-table thead th[b-itmvjj319l] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-background-primary);
    border-bottom: 0.5px solid var(--color-border-secondary);
    padding: 12px 10px 10px;
    vertical-align: bottom;
}

.plans-feature-col[b-itmvjj319l] {
    text-align: left;
    padding: 8px 10px 8px 18px;
    color: var(--color-text-primary);
}

.plans-tier-col[b-itmvjj319l] {
    width: 112px;
    text-align: center;
    padding: 8px 10px;
}

/* TierBadge carries a left margin for sitting beside a name; centred here. */
.plans-tier-col[b-itmvjj319l]  .tier-badge {
    margin-left: 0;
}

.plans-price[b-itmvjj319l] {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.plans-yours[b-itmvjj319l] {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* The viewer's own plan column, lightly tinted top to bottom. */
.plans-current[b-itmvjj319l] {
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.plans-table thead th.plans-current[b-itmvjj319l] {
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-background-primary));
}

.plans-section td[b-itmvjj319l] {
    padding: 14px 18px 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.plans-row td[b-itmvjj319l] {
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

/* The row the "See plans" link came from. */
.plans-row--focus td[b-itmvjj319l] {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.plans-row--focus .plans-feature-col[b-itmvjj319l] {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.plans-yes[b-itmvjj319l] {
    color: var(--color-positive);
    font-size: 15px;
}

.plans-no[b-itmvjj319l] {
    color: var(--color-text-tertiary);
}

.plans-value[b-itmvjj319l] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.plans-footnote[b-itmvjj319l] {
    font-size: 11px;
    color: var(--color-text-tertiary);
}
/* /Shared/StrategyPickerPopover.razor.rz.scp.css */
/* ── Modal shell (mirrors AddPositionModal) ── */
.modal-backdrop[b-e8ku3tl3b2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(3px);
}

.modal-dismiss[b-e8ku3tl3b2] {
    position: absolute;
    inset: 0;
}

.modal-panel[b-e8ku3tl3b2] {
    position: relative;
    z-index: 1;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    width: 420px;
    max-width: calc(100vw - 32px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.modal-header[b-e8ku3tl3b2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--color-card-chrome);
    border-bottom: 0.5px solid var(--color-border-tertiary);
    flex-shrink: 0;
}

.modal-header-left[b-e8ku3tl3b2] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.modal-title[b-e8ku3tl3b2] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.modal-subtitle[b-e8ku3tl3b2] {
    font-size: 11px;
    color: var(--color-text-tertiary);
    font-weight: 500;
}

.modal-close[b-e8ku3tl3b2] {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 4px 6px;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background 0.1s, color 0.1s;
}

.modal-close:hover[b-e8ku3tl3b2] {
    background: rgba(255,255,255,0.22);
    color: var(--color-text-primary);
}

.modal-body[b-e8ku3tl3b2] {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
}

.form-section[b-e8ku3tl3b2] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.form-section:last-child[b-e8ku3tl3b2] {
    border-bottom: none;
}

.form-row[b-e8ku3tl3b2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-e8ku3tl3b2] {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.form-label-optional[b-e8ku3tl3b2] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0.65;
}

.form-input[b-e8ku3tl3b2] {
    padding: 8px 10px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus[b-e8ku3tl3b2] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.modal-footer[b-e8ku3tl3b2] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 18px;
    border-top: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-secondary);
    flex-shrink: 0;
}

.btn-ghost[b-e8ku3tl3b2] {
    background: none;
    border: 1px solid var(--color-border-secondary);
    color: var(--color-text-secondary);
    padding: 7px 16px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s, color 0.1s;
}

.btn-ghost:hover[b-e8ku3tl3b2] {
    background: var(--color-background-hover);
    color: var(--color-text-primary);
}

.btn-primary[b-e8ku3tl3b2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-accent);
    border: none;
    color: #fff;
    padding: 7px 18px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}

.btn-primary:hover:not(:disabled)[b-e8ku3tl3b2] { opacity: 0.88; }
.btn-primary:disabled[b-e8ku3tl3b2] { opacity: 0.5; cursor: default; }

/* ── Strategy list (picker-specific) ── */
.strategy-list[b-e8ku3tl3b2] {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    background: var(--color-background-secondary);
}

.strategy-category[b-e8ku3tl3b2] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-tertiary);
    padding: 8px 12px 4px;
}

.strategy-option[b-e8ku3tl3b2] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 6px 12px 6px 20px;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text-primary);
    cursor: pointer;
    border-radius: 0;
    transition: background 0.1s;
}

.strategy-option:hover[b-e8ku3tl3b2] {
    background: var(--color-background-hover);
}

.strategy-option.selected[b-e8ku3tl3b2] {
    background: var(--color-accent);
    color: #fff;
}

.suggested-badge[b-e8ku3tl3b2] {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-accent);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

.strategy-option.selected .suggested-badge[b-e8ku3tl3b2] {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ── Validation pill ── */
.validation-msg[b-e8ku3tl3b2] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--border-radius-md);
    font-size: 13px;
    line-height: 1.4;
}

.validation-msg i[b-e8ku3tl3b2] {
    flex-shrink: 0;
    margin-top: 1px;
}

.validation-msg.valid[b-e8ku3tl3b2] {
    background: color-mix(in srgb, #10b981 10%, transparent);
    color: var(--color-text-success);
}

.validation-msg.warning[b-e8ku3tl3b2] {
    background: color-mix(in srgb, #f59e0b 10%, transparent);
    color: #f59e0b;
}

/* ═══ MOBILE ═══ */
@media (max-width: 768px) {
    .modal-panel[b-e8ku3tl3b2] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
}
/* /Shared/TierBadge.razor.rz.scp.css */
.tier-badge[b-k026mp0726] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1.4;
    margin-left: 6px;
    align-self: center;
}

.tier-badge-free[b-k026mp0726] {
    color: var(--color-text-tertiary);
    background: rgba(128, 128, 128, 0.08);
    border: 0.5px solid rgba(128, 128, 128, 0.15);
}

.tier-badge-pro[b-k026mp0726] {
    color: #4d8bff;
    background: rgba(77, 139, 255, 0.10);
    border: 0.5px solid rgba(77, 139, 255, 0.2);
}

.tier-badge-premium[b-k026mp0726] {
    color: #d4a843;
    background: rgba(212, 168, 67, 0.10);
    border: 0.5px solid rgba(212, 168, 67, 0.2);
}
/* /Shared/UpgradeHint.razor.rz.scp.css */
.upgrade-hint[b-req2ca5k5g] {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.upgrade-hint-link[b-req2ca5k5g] {
    margin-left: 2px;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.upgrade-hint-link:hover[b-req2ca5k5g] {
    text-decoration: underline;
}