/* System font stack — matches homepage */

:root {
    color-scheme: dark;
    --nav-width: 124px;
    --nav-width-compact: 160px;
    /* Core Colors - matched to original Catalayer_1 */
    --bg-app: #06080d;
    --bg-pane: #06080d;
    /* Main content - matches catalayer.com homepage */
    --bg-nav: #111419;
    /* Sidebars */
    --bg-card: #111419;
    --bg-hover: #121a28;
    --bg-footer: #06080d;

    --accent: #64ce9b;
    --accent-dim: rgba(100, 206, 155, 0.1);
    --red: #ef5b5b;
    --gold: #e2b340;
    --gold-dim: rgba(226, 179, 64, 0.08);
    --gold-border: rgba(226, 179, 64, 0.25);
    --gold-text: #e2b340;
    --status-bar-height: 24px;
    --rail-width: 216px;

    --border: #1a2232;
    --border-active: rgba(100, 206, 155, 0.5);

    /* ===== UNIFIED DESIGN SYSTEM (v1) ===== */
    /* Spacing */
    --ws-gap-section: 14px;        /* between major page sections */
    --ws-gap-grid: 14px;           /* between grid cards */
    --ws-gap-inner: 12px;          /* inside cards between elements */

    /* Cards */
    --ws-card-padding: 16px;
    --ws-card-radius: 4px;
    --ws-card-bg: #111419;
    --ws-card-border: var(--surface-border-soft);
    --ws-card-hover-bg: #161a20;
    --ws-card-hover-border: var(--surface-border-strong);

    /* Typography */
    --ws-page-eyebrow: 9px;
    --ws-page-title: 22px;
    --ws-page-body: 12px;
    --ws-card-title: 10px;
    --ws-card-body: 11px;
    --ws-meta: 9px;
    --ws-list-item: 12.5px;

    /* Controls */
    --ws-control-height: 28px;
    --ws-control-radius: 3px;

    /* List rows */
    --ws-list-row-padding: 9px 0;

    --surface-border-soft: rgba(255, 255, 255, 0.08);
    --surface-border-strong: rgba(255, 255, 255, 0.12);
    --surface-hover: rgba(255, 255, 255, 0.045);

    /* Text */
    --text-main: #ffffff;
    --text-dim: #b7becc;
    --text-muted: #9aa4b3;

    /* Fonts — must match homepage (SF Pro / Helvetica Neue system stack) */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Universal font inheritance — prevents browser defaults leaking into form controls */
input, button, textarea, select, option {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Hide scrollbars globally while keeping scroll functionality */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
}

body {
    background: var(--bg-app);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1.5;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Auth check grace period */
body.auth-checking .m-header-right,
body.auth-checking .signin-btn,
body.auth-checking #nav-logout-link {
    pointer-events: none !important;
}
/* Phase 5I-2-D: if localStorage hint is set, show logout from first paint via html class */
html.auth-hint-authed #nav-logout-link {
    display: flex !important;
}

body.app-booting #app-viewport {
    opacity: 1;
}

body.app-booting .nav-pane,
body.app-booting .news-pane,
body.app-booting .stocks-pane,
body.app-booting #reader-header-area,
body.app-booting .mobile-header,
body.app-booting .status-bar {
    display: flex !important;
}

body.app-booting .reader-pane {
    grid-area: reader !important;
}

body.app-booting #content-mount {
    display: block;
}

html.route-login body.app-booting .nav-pane,
html.route-login body.app-booting .news-pane,
html.route-login body.app-booting .stocks-pane,
html.route-login body.app-booting .reader-pane,
html.route-login body.app-booting .mobile-header,
html.route-login body.app-booting .status-bar {
    display: none !important;
}

html.route-login body.app-booting #app-viewport {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "reader";
}

html.route-login body.app-booting .auth-pane {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 1;
    height: 100vh;
    max-height: 100vh;
    padding: 42px 48px;
}

html.route-workspace-surface body.app-booting .news-pane,
html.route-workspace-surface body.app-booting #reader-header-area,
html.route-workspace-surface body.app-booting .mobile-header,
html.route-workspace-surface body.app-booting .status-bar {
    display: none !important;
}

html.route-workspace-surface body.app-booting #app-viewport {
    display: grid;
    grid-template-columns: var(--nav-width) minmax(0, 1fr) var(--rail-width);
    grid-template-areas: "nav reader stocks";
}

html.route-workspace-surface body.app-booting .nav-pane {
    display: flex !important;
    grid-area: nav !important;
}

html.route-workspace-surface body.app-booting .reader-pane {
    display: flex !important;
    grid-column: 2 / 3 !important;
    grid-area: reader !important;
}

html.route-workspace-surface body.app-booting .stocks-pane {
    display: flex !important;
    grid-area: stocks !important;
}
/* Phase 5D-WR3R: workspace is auth-gated — show nav auth links and rail from first HTML paint */
/* Specificity 0,3,2 beats media-query workspace-surface-mode rule (0,3,0) */
html.route-workspace-surface body.app-booting #nav-logout-link {
    display: flex !important;
}
html.route-workspace-surface body.app-booting .signin-btn {
    opacity: 1 !important;
}
/* WR3R: workspace-shell boot — ensure stocks-pane shows even after enterPanel removes route-workspace-surface */
/* body.app-booting.workspace-shell specificity 0,3,1 beats .app-container.workspace-surface-mode (0,3,0) media rule */
body.app-booting.workspace-shell .stocks-pane {
    display: flex !important;
    grid-area: stocks !important;
}
/* Workspace surface: keep news skeleton hidden even if app-booting is removed before JS runs */
html.route-workspace-surface .news-pane,
html.route-workspace-surface #reader-header-area {
    display: none;
}
/* Phase 5I-3-HF1: desktop viewport — mobile header must not appear during news boot.
   body.app-booting .mobile-header shows it globally; suppress on wide screens.
   Workspace already hidden via route-workspace-surface override (all viewports).
   Mobile (≤900px) unchanged — mobile-header still shows during boot on small screens. */
@media (min-width: 901px) {
    body.app-booting .mobile-header,
    body.app-booting .status-bar {
        display: none !important;
    }
}

/* Phase 5I-3-HF2: Fix A — news toolbar shows as skeleton during app-booting.
   news-mode-seg: color:transparent hides text, keeps pill container/bg = skeleton.
   search-wrap: icon + input hidden, container gets faint bg = skeleton search bar. */
/* Phase 5I-4K: toolbar stays visible during app-booting — no skeleton hiding */
body.app-booting .news-pane .news-mode-seg .header-btn {
    color: var(--text-dim);
    pointer-events: none;
}
body.app-booting .news-pane .search-wrap > i {
    visibility: visible;
}
body.app-booting .news-pane #news-search-input {
    visibility: visible;
}
body.app-booting .news-pane .search-wrap {
    background: transparent;
}

/* 3-Pane Main Layout - exact match to original Catalayer_1 */
.app-container {
    display: grid;
    grid-template-columns: var(--nav-width) minmax(0, 0.95fr) minmax(0, 1.15fr) var(--rail-width);
    grid-template-rows: 1fr;
    grid-template-areas:
        "nav news reader stocks";
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
}

.app-container.rail-hidden-mode {
    grid-template-columns: var(--nav-width) minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas: "nav news reader";
}

.app-container.rail-hidden-mode .stocks-pane,
body.rail-hidden-mode .stocks-pane {
    display: none !important;
}

.nav-pane {
    grid-area: nav;
}

.news-pane {
    grid-area: news;
}

.reader-pane {
    grid-area: reader;
}

.stocks-pane {
    grid-area: stocks;
}

/* Footer: fixed position like original Catalayer_1 */

.status-bar {
    position: fixed;
    bottom: 0;
    left: var(--nav-width);
    right: var(--rail-width);
    width: auto;
    height: var(--status-bar-height);
    background: var(--bg-pane);
    border-top: 1px solid rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px 0 0;
    font-family: var(--font-sans);
    font-size: 10px;
    color: rgba(154,164,179,0.25);
    z-index: 100;
    box-sizing: border-box;
}

.app-container.rail-hidden-mode ~ .status-bar,
body.rail-hidden-mode .status-bar {
    right: 0;
}

/* Social icon links (no border) */
.status-bar .social-link {
    color: var(--text-dim);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 10px;
    border: none;
    transition: color 0.15s;
}

.status-bar .social-link:hover {
    color: var(--accent);
}

/* Text nav links (with right border dividers) */
.status-bar a:not(.social-link) {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.15s;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;
    margin: 0;
    font-size: 11px;
}

.status-bar a:not(.social-link):hover {
    color: var(--accent);
}

.status-bar .footer-copy {
    padding: 0 12px;
    color: var(--text-muted);
    font-size: 11px;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Phosphor Icons Alignments */
i[class^="ph"],
i[class*=" ph"] {
    vertical-align: middle;
    line-height: 1;
}

/* Status bar separators - real 1px line, full height */
.status-bar .sep {
    align-self: stretch;
    width: 1px;
    background: var(--border);
    margin: 0;
    flex-shrink: 0;
}

/* Removed - social icons no longer need left border */

.pane {
    height: 100%;
    /* Changed from 100vh to allow grid to manage height */
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Ensure content stays inside */
}

/* Pane 1: Left Nav - matches original 100px width with logo header */
.nav-pane {
    grid-area: nav;
    background: var(--bg-nav);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 200;
    border-right: 1px solid var(--border);
    width: var(--nav-width);
    max-width: var(--nav-width);
}

.nav-pane.admin-nav-pane {
    overflow-y: auto;
}

.nav-logo {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    cursor: pointer;
    flex-shrink: 0;
    gap: 6px;
}

/* Phase 4D-2B: nav logo image dimensions moved from app-shell inline style */
/* Phase 4D-2E: hotfix — strengthen rule; was not loading due to stale CSS cache */
.nav-pane .nav-logo img,
.nav-logo img {
    width: 80px !important;
    max-width: 80px !important;
    height: auto !important;
    max-height: 80px !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto 4px;
}


.nav-logo-text {
    font-size: 10px;
    font-weight: 600;
    color: #b7becc;
    letter-spacing: 0.5px;
    font-family: var(--font-sans);
}

.sidebar-divider {
    width: 100%;
    height: 1px;
    flex-shrink: 0;
    background-color: rgba(255,255,255,0.08);
    margin: 12px 0;
}

.nav-section-title {
    width: 100%;
    padding: 10px 14px 6px;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--accent);
}

.nav-item {
    width: 100%;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px 0 10px;
    color: #c8d0dc;
    text-decoration: none;
    font-size: 11px;
    gap: 8px;
    transition: color 0.2s;
    cursor: pointer;
    position: relative;
    z-index: 10;
    white-space: nowrap;
}

.nav-item i {
    font-size: 13px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    color: #c8d0dc;
}

.nav-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.nav-item.nav-item-admin {
    min-height: 44px;
}

.nav-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.nav-label {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}

.nav-subcopy {
    font-size: 9px;
    color: var(--text-muted);
    white-space: normal;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

.nav-item[id^="nav-"] {
    height: 44px;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
}

.nav-arrow {
    font-size: 9px !important;
    margin-left: auto;
    width: auto !important;
    color: var(--text-muted);
}

.nav-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
}

.news-item.active {
    border-bottom: none;
    background: #141b24;
}

.news-item.active-story {
    background: rgba(100, 206, 155, 0.16);
    border-left: 2px solid var(--accent);
    border-bottom: none;
}

.nav-item.active {
    color: var(--accent);
    background: #06080d;
    border-left: 2px solid var(--accent);
    padding-left: 8px;
}

.nav-item.active i {
    color: var(--accent);
    font-weight: 700;
}
/* Sub-items (Finder, Signals under Monitor) */
.nav-item.nav-item-sub {
    height: 38px;
    flex-shrink: 0;
    font-size: 10.5px;
    color: #5a6880;
}
.nav-item.nav-item-sub i {
    color: #5a6880;
}
.nav-item.nav-item-sub:hover {
    color: #9aa4b3;
}
.nav-item.nav-item-sub:hover i {
    color: #9aa4b3;
}
/* Sub-items active */
.nav-item.nav-item-sub.active {
    color: var(--accent);
    background: #06080d;
}
.nav-item.nav-item-sub.active i {
    color: var(--accent);
}
/* Nav group collapsible */
.nav-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.nav-group-toggle {
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0 10px;
    margin: 0;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.02em;
    box-sizing: border-box;
}
.nav-group-toggle:hover {
    color: #ffffff;
}
.nav-group-toggle i:first-child {
    font-size: 13px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    color: inherit;
}
.nav-group-toggle .nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-group-caret {
    font-size: 11px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.nav-group-items {
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.nav-group.open .nav-group-items {
    display: flex;
}
.nav-group.open .nav-group-caret {
    transform: rotate(180deg);
}
.nav-group.open .nav-group-toggle {
    color: var(--text-dim);
}



/* Island status bar */
.dashboard-island-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    margin-bottom: 20px;
    font-size: 12px;
}
.dashboard-island-bar.island-connected {
    background: rgba(100, 206, 155, 0.04);
    border-color: rgba(100, 206, 155, 0.15);
}
.dashboard-island-bar.island-prompt {
    background: rgba(255, 255, 255, 0.018);
}
.island-bar-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.island-bar-overline {
    font-size: 9.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(100, 206, 155, 0.6);
}
.island-bar-text {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.5;
}
.island-bar-cta {
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.8;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.island-bar-cta:hover { opacity: 1; }

/* Dashboard panel header live dot */
.dashboard-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dashboard-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.6;
    flex-shrink: 0;
    margin-left: auto;
}

/* Dashboard panel footer link */
.dashboard-panel-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.dashboard-panel-link {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.dashboard-panel-link:hover { color: var(--accent); }

/* AI rail page intelligence label */
.rail-page-label {
    font-size: 9.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(100, 206, 155, 0.55);
    padding: 0 14px;
    margin-bottom: -8px;
}

/* Rail quick actions for non-admin */
.rail-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.rail-quick-btn {
    background: #111419;
    border: 1px solid rgba(255,255,255,0.07);
    color: var(--text-dim);
    font-size: 11px;
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.15s, color 0.15s;
}
.rail-quick-btn:hover {
    background: rgba(100,206,155,0.06);
    color: var(--text-main);
    border-color: rgba(100,206,155,0.2);
}


#nav-plans-link {
    color: #b69a55;
}

#nav-plans-link i,
#nav-plans-link, #nav-plans-link .nav-label {
    color: inherit;
}

#nav-plans-link:hover {
    color: #d3b875;
    background: rgba(196, 166, 88, 0.08);
}

#nav-plans-link.active {
    color: #e2c680;
    background: rgba(196, 166, 88, 0.11);
    border-left-color: #e2c680 !important;
}

#nav-plans-link.active i {
    color: #e2c680;
}
#nav-plans-link i {
    color: #b69a55 !important;
}

/* Flyout Menus */
.flyout-menu {
    position: absolute;
    left: 100%;
    /* Align perfectly with sidebar edge */
    bottom: 0;
    height: auto;
    max-height: 85vh;
    width: max-content;
    overflow-y: auto;
    overflow-x: hidden;
    background: #13171c;
    /* Deep obsidian */
    border: 1px solid var(--border);
    border-left: none;
    z-index: 1000;
    display: none;
    padding: 14px 16px;
    box-shadow: 15px 0 40px rgba(0, 0, 0, 0.8);
    animation: menuSlide 0.1s ease-out;
    pointer-events: auto;
}

@keyframes menuSlide {
    from {
        transform: translateX(5px);
        opacity: 0;
    }

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

/* Hover Bridge: Solid connection between nav item and flyout */
.nav-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: -40px;
    /* Bridge for flyout menus only - no pointer events by default */
    width: 40px;
    height: 100%;
    z-index: 300;
    background: transparent;
    pointer-events: none;
}
.nav-item:hover::after {
    pointer-events: auto;
}

.nav-item:hover .flyout-menu {
    display: block;
}

/* Specific position for flyouts: Top aligned to nav item */
.nav-item[data-view="region"] .flyout-menu,
.nav-item[data-view="signin"] .flyout-menu {
    bottom: auto;
    top: 0;
}

@keyframes slideIn {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }

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

.flyout-section {
    margin-bottom: 24px;
}

.flyout-section:last-child {
    margin-bottom: 0;
}

.flyout-title {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.flyout-list {
    list-style: none;
}

.flyout-item {
    padding: 10px 0;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.flyout-item i {
    width: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--accent);
}

.flyout-item:hover {
    color: #fff;
}

.flyout-item i.check {
    font-size: 12px;
    color: var(--accent);
    visibility: hidden;
}

.flyout-item.active i.check {
    visibility: visible;
}

/* Pane 2: News List (Left half of Center) */
.news-pane {
    background: var(--bg-pane);
    min-width: 0;
    padding-bottom: 28px;
    /* room for fixed footer */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ad-container {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}

.ad-slot {
    height: 80px;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 12px;
    pointer-events: none;
    /* Non-clickable as requested */
}

.ad-img {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid var(--border);
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-img::after {
    content: 'PRO';
    font-size: 10px;
    font-weight: 900;
    color: var(--accent);
    opacity: 0.2;
}

.ad-text {
    font-size: 11px;
}

.ad-text strong {
    display: block;
    color: var(--accent);
    margin-bottom: 4px;
}

/* --- New Phase 8 News UI --- */
.news-alert-box {
    background: rgba(100, 206, 155, 0.06);
    border: 1px solid rgba(100, 206, 155, 0.18);
    border-radius: 3px;
    padding: 6px 14px;
    margin: 8px 10px 6px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
}

.news-alert-dot {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 4px var(--accent);
    flex-shrink: 0;
    animation: pulse-dot 4.5s infinite ease-in-out;
}

@keyframes pulse-dot {
    0% {
        transform: scale(1);
        opacity: 0.9;
        box-shadow: 0 0 6px rgba(100, 206, 155, 0.4);
    }

    50% {
        transform: scale(1.1);
        opacity: 0.3;
        box-shadow: 0 0 12px rgba(100, 206, 155, 0.6);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 8px rgba(100, 206, 155, 0.4);
    }
}

.news-live-banner {
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 10px;
    padding: 0 15px 15px 15px;
    border-bottom: 1px dashed #2a3240;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-list-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    /* allow flex shrink */
}

.news-list-scroll {
    flex: 1;
    overflow-y: auto;
    transition: filter 0.3s ease;
}

/* Authentication Blur Overlay */
.news-blur-active {
    filter: blur(5px) saturate(0.78) brightness(0.86);
    pointer-events: none;
    user-select: none;
}

.news-blur-active .news-item {
    opacity: 0.68;
}

.news-blur-active .news-item.active,
.news-blur-active .news-item.is-breaking-1 {
    background: rgba(255, 255, 255, 0.028);
    border-left-color: rgba(100, 206, 155, 0.22);
}

.news-blur-active .news-title,
.news-blur-active .news-source,
.news-blur-active .ticker-badge,
.news-blur-active .news-alert-box {
    filter: saturate(0.72) brightness(0.88);
}

.news-login-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    border: 1px solid rgba(100, 206, 155, 0.45);
    background: rgba(15, 22, 30, 0.94);
    color: #d8e2f0;
    width: min(500px, calc(100% - 36px));
    min-height: 208px;
    padding: 36px 34px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1.45;
}

.news-login-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 14px;
    line-height: 1.2;
}

.news-login-subtitle {
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 18px;
    max-width: 30ch;
}

.news-login-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}

.news-login-actions .btn-solid,
.news-login-actions .btn-outline {
    margin-top: 0;
    width: 188px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
}

.news-login-note {
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-muted);
}

.btn-solid {
    margin-top: 14px;
    display: inline-flex;
    min-height: 40px;
    min-width: 118px;
    border: 1px solid #64ce9b;
    color: #d5f3e6;
    background: #1a2f25;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-sans);
}

.btn-solid:hover {
    filter: brightness(1.1);
}

/* -------------------------------- */

/* News Item Component (4-line layout) */
.news-item {
    padding: 12px 14px 12px 12px;
    border-bottom: none;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start !important;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}

.news-item:hover {
    background: var(--surface-hover);
}

.news-item:hover .news-title,
.news-item.active .news-title {
    color: #fff;
}

.news-item.active {
    background: rgba(100, 206, 155, 0.06);
    border-left: 2px solid var(--accent);
    border-bottom: none;
}

.news-time {
    font-family: var(--font-mono);
    color: rgba(154, 164, 179, 0.48);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    white-space: nowrap;
    padding-top: 5px;
    width: 36px;
    min-width: 36px;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.news-time-hhmm {
    font-size: 9px;
    line-height: 1.4;
}

.news-time-date {
    font-size: 7.5px;
    line-height: 1.3;
    opacity: 0.75;
}

.news-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-start;
    min-width: 0;
}

.news-tickers {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--accent);
    font-weight: 700;
}

.news-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--text-dim);
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-source {
    font-family: var(--font-mono);
    font-size: 8.5px;
    color: rgba(154, 164, 179, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 2px;
}

.news-source a {
    color: inherit;
    text-decoration: none;
}

.news-source a:hover {
    color: var(--accent);
}

/* Breaking News Special Style */
.news-item.breaking {
    background: rgba(239, 91, 91, 0.05);
    border-left: 2px solid var(--red);
}

.news-item.breaking .news-tickers {
    color: var(--red);
}

/* Pane 3: Content Reader (Right half of Center) */
.reader-pane {
    background: var(--bg-pane);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 36px;
    /* room for fixed footer */
}

.reader-content {
    padding: 18px 12px 32px;
    overflow-y: scroll;
    flex: 1;
}
.reader-content.reader-story-mode {
    padding: 0;
}

.boot-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    max-width: 520px;
    margin: 0 auto;
    color: var(--text-main);
    text-align: center;
    position: relative;
}

.boot-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    opacity: 0.96;
    position: fixed;
    top: 10px;
    left: 10px;
}

.boot-center {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.boot-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--accent);
    animation: boot-spin 0.8s linear infinite;
}

.boot-title {
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-main);
}

.boot-copy {
    max-width: 460px;
    font-size: 11px;
    line-height: 1.65;
    color: rgba(183, 190, 204, 0.72);
}

@keyframes boot-spin {
    to {
        transform: rotate(360deg);
    }
}

.reader-detail {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 820px; /* Aligned with the red lines for v0.5.7 precision */
    margin: 0 auto;
}

.reader-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-main);
}

.reader-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 12px;
    color: var(--text-muted);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.reader-source-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
}

.reader-stock-tags {
    font-family: var(--font-sans);
    padding: 2px 6px;
    background: var(--accent-dim);
    border-radius: 3px;
    color: var(--accent);
}

.reader-body {
    font-size: 12px;
    line-height: 1.7;
    color: #cbd5e1;
    white-space: pre-wrap;
    text-align: justify;
    word-break: break-word;
    hyphens: auto;
}

.comments-section {
    margin-top: 120px;
    /* significantly lower than text */
    padding-top: 30px;
    border-top: 1px solid var(--border);
}

.comments-section h3 {
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--text-dim);
    text-transform: uppercase;
}

/* Pane 4: Stocks Ticker */
.stocks-pane {
    background: var(--bg-nav);
    width: var(--rail-width);
    border-right: none;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    /* allow notif flyout to escape */
    position: relative;
    z-index: 1300;
    min-height: 0;
}

/* Stocks pane header - center the bell icon */
.stocks-header {
    justify-content: center !important;
    overflow: visible !important;
    /* let notif flyout escape */
    position: relative;
    z-index: 1301;
}

.stocks-msg-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    transition: color 0.15s;
}

.stocks-msg-btn:hover {
    color: var(--accent);
}

.pane-header {
    height: 42px;
    min-height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    gap: 8px;
}

.header-btn {
    height: var(--ws-control-height);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-dim);
    padding: 0 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--ws-control-radius);
    transition: border-color 0.15s, color 0.15s;
}

.header-btn:hover {
    border-color: var(--accent);
    color: #fff;
}

.header-btn i {
    font-size: 11px;
    opacity: 0.88;
}

.news-pane .pane-header {
    justify-content: flex-start;
}

.news-pane .header-btn {
    border: none;
    /* Removed borders as requested */
    color: var(--text-dim);
    font-weight: 600;
    font-family: var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
}

/* Top News Dropdowns */
.tn-dropdown-wrap {
    position: relative;
    display: inline-block;
}

.tn-flyout {
    position: absolute;
    top: 100%;
    left: 0;
    background: #13171c;
    border: 1px solid var(--border);
    width: 200px;
    display: none;
    z-index: 1000;
    box-shadow: 15px 0 40px rgba(0, 0, 0, 0.8);
    padding: 8px 0;
    animation: menuSlide 0.1s ease-out;
}

.tn-dropdown-wrap:hover .tn-flyout {
    display: block;
}

.tn-item {
    padding: 8px 16px;
    color: var(--text-dim);
    font-family: var(--font-sans);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    transition: color 0.15s, background 0.15s;
}


.tn-item:hover,
.tn-item.active {
    background: rgba(100, 206, 155, 0.08);
    color: var(--accent);
}

/* ═══ Auth ═══ */

.auth-pane {
    grid-column: 2 / 4;
    grid-row: 1;
    display: none;
    justify-content: center;
    align-items: center;
    align-self: start;
    height: calc(100vh - var(--status-bar-height));
    max-height: calc(100vh - var(--status-bar-height));
    padding: 40px 48px;
    box-sizing: border-box;
    z-index: 50;
    overflow-y: auto;
    position: relative;
    background:
        radial-gradient(ellipse at 50% 18%, rgba(100, 206, 155, 0.07), transparent 52%),
        linear-gradient(180deg, #05080d 0%, #080c12 50%, #05080d 100%);
}

.auth-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.4;
    pointer-events: none;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}

.auth-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1060px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.018);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* ── Left: Brand ── */

.auth-back-link {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
    transition: color 0.15s;
}

.auth-back-link:hover {
    color: var(--text-main);
}

.auth-brand {
    padding: 42px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        linear-gradient(170deg, rgba(100, 206, 155, 0.05) 0%, transparent 50%);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.auth-brand-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.auth-brand-logo {
    width: auto;
    height: 34px;
    object-fit: contain;
    display: block;
    align-self: flex-start;
    margin-bottom: 22px;
}

.auth-brand-eyebrow {
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 12px;
}

.auth-brand-headline {
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-main);
    margin: 0 0 14px;
    letter-spacing: -0.02em;
    max-width: 11ch;
}

.auth-brand-copy {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-dim);
    max-width: 36ch;
    margin-bottom: 20px;
}

.auth-brand-points {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-brand-point {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.45;
}

.auth-brand-point::before {
    content: '';
    width: 4px;
    height: 4px;
    margin-top: 6px;
    background: var(--accent);
    flex-shrink: 0;
}

/* ── Right: Form Panel ── */

.auth-panel {
    padding: 42px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-panel-topline {
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
    font-weight: 500;
}

.auth-panel-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.12;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.auth-panel-subtitle {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
    margin-top: 6px;
    margin-bottom: 18px;
}

.auth-panel-support {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
    margin-top: -2px;
    margin-bottom: 14px;
}

.auth-trial-strip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: -8px;
    margin-bottom: 14px;
}

.auth-trial-badge {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid var(--gold-border);
    background: transparent;
    color: var(--gold-text);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.auth-trial-text {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.auth-field label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.auth-field input {
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-main);
    padding: 0 14px;
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
}

.auth-field input:focus {
    outline: none;
    border-color: rgba(100, 206, 155, 0.45);
    background: rgba(255, 255, 255, 0.05);
}

.auth-field input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 9999px #0a0e14 inset !important;
    box-shadow: 0 0 0 9999px #0a0e14 inset !important;
    -webkit-text-fill-color: #a3adba !important;
    caret-color: #a3adba !important;
    background-color: #0a0e14 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

.auth-field.has-error input {
    border-color: rgba(239, 91, 91, 0.45);
    background: rgba(239, 91, 91, 0.04);
}

.auth-field-error {
    font-size: 11px;
    line-height: 1.5;
    color: #ffa3a3;
}

.auth-primary-btn {
    width: 100%;
    height: 48px;
    border: none;
    background: var(--accent);
    color: #041008;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    margin-top: 2px;
}

.auth-primary-btn:hover { background: #76d8a8; }
.auth-primary-btn:active { background: #5cc08e; }
.auth-primary-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.auth-secondary-btn {
    width: 100%;
    height: 46px;
    border: 1px solid var(--surface-border-soft);
    background: transparent;
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.auth-secondary-btn:hover {
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--text-main);
}

.auth-inline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 400;
}

.auth-check input {
    margin: 0;
    accent-color: var(--accent);
}

.auth-helper-copy {
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-dim);
}

.auth-helper-inline {
    font-size: 11px;
    color: var(--text-muted);
}

.auth-inline-btn {
    width: auto;
    min-width: 140px;
}

.auth-inline-row-recovery {
    align-items: center;
    justify-content: flex-start;
}

.auth-input-readonly {
    color: var(--text-muted) !important;
    background: rgba(255, 255, 255, 0.015) !important;
}

.auth-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.auth-link {
    color: var(--text-dim);
    font-size: 11px;
    text-decoration: none;
    transition: color 0.15s;
}

.auth-link:hover { color: var(--accent); }
.auth-link-muted { color: var(--text-muted); }
.auth-link-gold { color: var(--gold); }

.auth-footer-copy,
.auth-footer-legal {
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-muted);
    margin-top: 6px;
    text-align: center;
}

/* auth-back-row removed — back link is now in left brand panel */

.auth-state-panel {
    border: 1px solid rgba(100, 206, 155, 0.22);
    background: rgba(100, 206, 155, 0.04);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-state-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.auth-feedback {
    font-size: 12px;
    line-height: 1.5;
    padding: 10px 12px;
}

.auth-feedback.error {
    background: rgba(239, 91, 91, 0.08);
    border: 1px solid rgba(239, 91, 91, 0.2);
    color: #ffa3a3;
}

.auth-feedback.success {
    background: rgba(100, 206, 155, 0.08);
    border: 1px solid rgba(100, 206, 155, 0.2);
    color: #a8e6c8;
}

.auth-method-switch {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.auth-method-tab {
    height: 42px;
    border: 1px solid var(--surface-border-soft);
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.auth-method-tab.active {
    border-color: rgba(100, 206, 155, 0.35);
    background: rgba(100, 206, 155, 0.08);
    color: var(--text-main);
}

@media (max-width: 1100px) {
    .auth-pane {
        grid-column: 1 / -1;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        min-height: auto;
        max-width: 540px;
    }

    .auth-pane {
        padding: 24px 16px;
    }

    .auth-brand {
        padding: 28px 24px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .auth-back-link {
        margin-bottom: 20px;
    }

    .auth-brand-headline {
        font-size: 28px;
        max-width: none;
    }

    .auth-panel {
        padding: 28px 24px;
    }

    .tier-grid-four,
    .home-status-grid,
    .home-status-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-quick-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.reader-header-tabs {
    display: flex;
    justify-content: center;
    height: 42px;
    min-height: 42px;
    box-sizing: border-box;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-pane);
}

.reader-header-tabs button {
    flex: 1;
    text-align: center;
    justify-content: center;
}

.dynamic-tab {
    max-width: 140px;
    display: inline-flex !important;
    white-space: nowrap !important;
    flex-wrap: nowrap;
    overflow: hidden;
}

.tn-item {
    user-select: none;
}


/* Scoped Breaking News Highlight - Label Area Only */
.news-item.is-breaking-1 {
    background: transparent !important;
    border-left: 5px solid #ef4444 !important;
}

.news-item.is-breaking-1 .ni-header-row {
    margin-bottom: 4px;
}

/* Breaking Label - Solid Red */
.breaking-label {
    background: #ef4444;
    color: #fff;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 800;
}

/* Stock Codes (Tickers) - Transparent/Hollow */
.sidebar-ticker,
.article-ticker {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    display: inline-block;
    padding: 1px 4px;
    border-radius: 2px;
    margin-right: 4px;
    font-size: 10px;
    font-weight: 700;
}

.news-tickers-list .sidebar-ticker {
    padding: 1px 4px;
    margin-right: 2px;
    font-size: 9px;
    letter-spacing: 0.2px;
}

.news-item.is-breaking-1 .sidebar-ticker {
    border-color: #ef4444;
    color: #ef4444;
}

/* Reader Cleanup - Remove all special red indicators/borders */
.reader-body-wrap {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 12px 0 0 !important;
}

/* Story mode: remove body wrap top padding to eliminate gap */
.reader-content.reader-story-mode .reader-body-wrap {
    padding: 0 0 0 0 !important;
    margin: 0 !important;
}

/* Story mode: give body text vertical breathing room */
.reader-content.reader-story-mode .reader-body {
    padding: 12px 0 16px !important;
}

.story-source-lead-wrap {
    padding-top: 24px;
}

.story-source-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--surface-border-soft);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.55;
}

.story-source-note i {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
    flex: 0 0 auto;
}

.story-source-details {
    border: 1px solid var(--surface-border-soft);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.015);
    overflow: hidden;
}

.story-source-details summary {
    list-style: none;
    cursor: pointer;
    padding: 11px 12px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.story-source-details summary::-webkit-details-marker {
    display: none;
}

.story-source-details-body {
    padding: 0 12px 12px;
}

.story-source-details .reader-body-wrap {
    max-width: none;
    padding-top: 0 !important;
}

.story-ai-skeleton {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.story-ai-skeleton-card {
    border: 1px solid rgba(100, 206, 155, 0.08);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.016);
    padding: 16px;
}

.story-ai-skeleton-card-summary,
.story-ai-skeleton-card-impact {
    min-height: 132px;
}
/* Phase 5I-2-HF1-C: impact card needs flex gap so kicker doesn't sit on top of first row */
.story-ai-skeleton-card-impact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.story-ai-skeleton-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.story-ai-skeleton-kicker,
.story-ai-skeleton-badge,
.story-ai-skeleton-line,
.story-ai-skeleton-pill,
.story-ai-skeleton-dot {
    background: rgba(255, 255, 255, 0.055);
    border-radius: 3px;
}

.story-ai-skeleton-kicker {
    width: 96px;
    height: 11px;
}

.story-ai-skeleton-badge {
    width: 82px;
    height: 10px;
}

.story-ai-skeleton-lines {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.story-ai-skeleton-line {
    height: 11px;
}

.story-ai-skeleton-line.w-93 { width: 93%; }
.story-ai-skeleton-line.w-88 { width: 88%; }
.story-ai-skeleton-line.w-84 { width: 84%; }
.story-ai-skeleton-line.w-80 { width: 80%; }
.story-ai-skeleton-line.w-76 { width: 76%; }
.story-ai-skeleton-line.w-74 { width: 74%; }
.story-ai-skeleton-line.w-72 { width: 72%; }
.story-ai-skeleton-line.w-70 { width: 70%; }
.story-ai-skeleton-line.w-68 { width: 68%; }
.story-ai-skeleton-line.w-66 { width: 66%; }
.story-ai-skeleton-line.w-64 { width: 64%; }
.story-ai-skeleton-line.w-62 { width: 62%; }
.story-ai-skeleton-line.w-61 { width: 61%; }

.story-ai-skeleton-impact-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.story-ai-skeleton-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) 54px;
    gap: 12px;
    align-items: center;
}

.story-ai-skeleton-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.story-ai-skeleton-pill {
    width: 54px;
    height: 11px;
}

.story-ai-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.story-ai-skeleton-card-mini {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reader-body {
    background: transparent !important;
    color: var(--text) !important;
}

/* Redesigned Unavailable View - Extra Compact */
.unified-unavailable {
    margin: 10px auto;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Tightest gap */
    max-width: 460px;
}

.un-content .un-text {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.un-content .un-subtext {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
}

.un-actions {
    margin-top: 12px;
}

.un-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    /* Aggressively shrunk */
    background: #fff;
    color: #000;
    text-decoration: none;
    font-weight: 800;
    font-size: 11px;
    /* Small font */
    border-radius: 2px;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    min-width: 140px;
    /* Shrunk min-width */
}

.tn-sub-flyout {
    position: absolute;
    top: -8px;
    left: 100%;
    background: #13171c;
    border: 1px solid var(--border);
    border-left: none;
    width: 160px;
    display: none;
    padding: 8px 0;
    box-shadow: 15px 0 40px rgba(0, 0, 0, 0.8);
    animation: menuSlide 0.1s ease-out;
}

.tn-item.has-sub:hover .tn-sub-flyout {
    display: block;
}

.news-pane .header-btn:hover {
    color: var(--accent);
}

/* Pane 3 Header - no duplicate rule, height controlled by first .reader-header-tabs block */
.reader-pane .pane-header {
    padding: 0;
    flex-shrink: 0;
}

.reader-header-btn {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    height: 48px;
    border: none;
    border-right: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    font-weight: 700;
    cursor: pointer;
    font-size: 10px;
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}

.reader-header-btn:not(:last-child)::after {
    display: none;
}

.reader-header-btn.active {
    background: transparent;
    color: var(--text-main);
}

.reader-header-btn:hover {
    background: transparent;
    color: var(--accent);
}

.close-tab {
    margin-left: 8px;
    font-size: 11px;
    color: var(--text-muted);
    transition: color 0.15s;
}

.close-tab:hover {
    color: #f87171;
}

/* --- New Phase 8 Home Content --- */
.home-content-wrap {
    max-width: none;
    margin: 0;
    padding: 30px 40px;
}

.home-hero-subtitle {
    font-family: var(--font-sans);
    color: #9aa4b3;
    font-size: 10px;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.home-hero-title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 16px;
    font-family: var(--font-sans);
}

.home-hero-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #b7becc;
    margin-bottom: 24px;
    font-family: var(--font-sans);
    max-width: 680px;
}

/* unified font rule for all text elements */
input,
button,
select,
textarea,
a,
span,
div,
li,
td,
th {
    font-family: var(--font-sans);
}

.home-btn-group {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.btn-outline {
    background: transparent;
    border: 1px solid #2a3240;
    color: #b7becc;
    padding: 6px 16px;
    font-size: 11px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline:hover {
    border-color: #fff;
    color: #fff;
}

.home-pricing-hint {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-sans);
    margin-bottom: 36px;
}

.home-section-title {
    font-family: var(--font-sans);
    font-size: 13px;
    color: #fff;
    margin-bottom: 14px;
    margin-top: 30px;
}

.home-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.home-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.home-card {
    background: #111418;
    border: 1px solid #2a3240;
    padding: 16px;
    font-size: 12px;
    color: #b7becc;
    font-family: var(--font-sans);
    line-height: 1.6;
}

.home-card-control {
    border: 1px solid var(--border);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.control-title {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #fff;
}

.control-desc {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-sans);
    margin-bottom: 10px;
}

.control-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #fff;
    font-family: var(--font-sans);
    cursor: pointer;
}

.control-label input[type="checkbox"] {
    accent-color: #fff;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* -------------------------------- */

/* Pane 4 Header Specifics */
.stocks-pane .pane-header {
    padding: 0 10px 0 14px !important;
    height: 42px;
    min-height: 42px;
}

.stocks-msg-btn {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stocks-msg-btn:hover {
    background: var(--bg-hover);
    color: #fff;
}

/* Timeframe buttons for stocks */
.timeframe-bar {
    display: flex;
    padding: 10px 15px;
    gap: 10px;
    border-bottom: 1px solid var(--border);
}

.tf-btn {
    flex: 1;
    height: 26px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-family: var(--font-sans);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tf-btn.active {
    background: #64ce9b;
    border-color: var(--accent);
    color: #000;
    font-weight: 700;
}

/* Auth & Admin Mode Overrides */
.app-container.auth-mode,
.app-container.admin-mode,
.app-container.full-page-mode {
    grid-template-columns: 100px 0fr 1fr 0fr; /* Hide sidebars in admin mode */
    grid-template-areas: "nav news reader stocks";
}

.app-container.auth-mode {
    grid-template-columns: 1fr;
    grid-template-areas: "reader";
}

.app-container.admin-mode,
.app-container.full-page-mode {
    grid-template-columns: var(--nav-width) minmax(0, 1fr);
    grid-template-areas: "nav reader";
}

.app-container.workspace-surface-mode {
    grid-template-columns: var(--nav-width) minmax(0, 1fr) var(--rail-width);
    grid-template-areas: "nav reader stocks";
}

.app-container.auth-mode .news-pane,
.app-container.auth-mode .nav-pane,
.app-container.auth-mode .stocks-pane,
.app-container.auth-mode .reader-pane,
.app-container.auth-mode .mobile-header,
.app-container.admin-mode .news-pane,
.app-container.admin-mode .stocks-pane,
.app-container.full-page-mode .news-pane,
.app-container.full-page-mode .stocks-pane,
.app-container.workspace-surface-mode .news-pane {
    display: none !important;
}

.app-container.admin-mode .reader-pane,
.app-container.full-page-mode .reader-pane {
    grid-column: 2 / -1 !important;
}

.app-container.workspace-surface-mode .reader-pane {
    grid-column: 2 / 3 !important;
}

.app-container.workspace-surface-mode .reader-content {
    padding: 18px 30px 32px;
}

.app-container.workspace-surface-mode .workspace-home-shell {
    max-width: 100%;
}

.app-container.workspace-surface-mode.rail-hidden-mode {
    grid-template-columns: var(--nav-width) minmax(0, 1fr);
    grid-template-areas: "nav reader";
}

.app-container.workspace-surface-mode .reader-header-tabs,
.app-container.workspace-surface-mode #reader-header-area {
    display: none !important;
}

.app-container.auth-mode .auth-pane {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 1;
    height: 100vh;
    max-height: 100vh;
    padding: 42px 48px;
}

.admin-mode .reader-header-area,
.admin-mode .reader-header-tabs,
.full-page-mode .reader-header-area,
.full-page-mode .reader-header-tabs {
    display: none !important;
}

.status-bar {
    display: flex !important;
    align-items: center;
    padding: 0 12px 0 0;
    background: var(--bg-pane);
}

.admin-mode .status-bar,
.full-page-mode .status-bar,
.auth-mode .status-bar {
    justify-content: flex-end !important;
    right: 0;
}

.auth-mode .status-bar {
    display: none !important;
}

/* Ensure admin content isn't constrained by 820px reader width */
.admin-mode .reader-article-wrap,
.admin-mode .cp-wrap,
.full-page-mode .reader-article-wrap,
.full-page-mode .cp-wrap {
    max-width: none !important;
    width: 100% !important;
    padding: 30px 60px;
}

.full-page-mode .reader-content {
    padding: 0 0 52px;
}

.stock-row {
    padding: 8px 10px;
    border-bottom: 1px solid var(--surface-border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-sans);
    font-size: 11px;
    cursor: default;
    transition: background 0.18s ease;
}

.stock-row:hover {
    background: #111419;
}

.stock-sym {
    font-weight: 500;
    font-size: 11px;
    color: #9aa5b5;
    flex-shrink: 0;
}

.stock-price-wrap {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.stock-price {
    font-size: 11px;
    color: #e2e8f0;
    font-weight: 500;
}

.stock-change {
    font-size: 10px;
    text-align: right;
}

.up {
    color: #4ade80;
    /* Brighter, more distinct green like original */
}

.down {
    color: #f87171;
    /* Brighter, distinct red like original */
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.1);
}

.ad-slot.active-opt {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
}

.ad-slot.language-opt {
    transition: all 0.2s;
    pointer-events: auto !important;
    /* Enable interaction for these specific slots */
}

.ad-slot.language-opt:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

.anim-fade {
    animation: fadeIn 0.3s ease-out;
}

.flyout-item {
    text-align: left;
    direction: ltr;
}

.news-item.breaking {
    background: rgba(239, 68, 68, 0.1);
    border-left: 2px solid #ef4444;
}

.news-item.breaking .news-title {
    color: #ef4444 !important;
}

.news-item.breaking .news-tickers {
    color: #f87171 !important;
}

.flyout-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 8px;
}

/* Lucide SVG overrides */
svg {
    stroke-width: 2;
    vertical-align: middle;
}

.nav-item svg {
    width: 22px;
    height: 22px;
    color: var(--text-dim);
}

.nav-item.active svg {
    color: var(--accent);
}

.nav-logo svg {
    width: 32px;
    height: 32px;
}

.header-btn svg {
    width: 18px;
    height: 18px;
}

.title-link svg {
    width: 14px;
    height: 14px;
    margin-left: 6px;
    color: var(--text-muted);
}

.flyout-item svg {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

.reader-source-link svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

.status-bar svg {
    width: 20px;
    height: 20px;
}

.ph-fill.ph-push-pin svg {
    fill: var(--accent);
    stroke: var(--accent);
}

.lucide,
i[data-lucide] {
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    vertical-align: middle;
}

/* ============================================================
   CONTENT PAGES — Home / About / Plus / Static
   ============================================================ */

/* Shared container */
.cp-wrap {
    padding: 0;
    max-width: 100%;
    color: var(--text-main);
    font-family: var(--font-sans);
}

/* Eyebrow */
.cp-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Hero headline */
.cp-headline {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-main);
    margin-bottom: 14px;
}

/* Subheadline / intro body */
.cp-sub {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-dim);
    margin-bottom: 22px;
}

/* CTA group */
.cp-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.cp-hint {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 28px;
}

/* Section divider + title */
.cp-section {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.cp-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.cp-section-body {
    font-size: 12px;
    line-height: 1.75;
    color: var(--text-dim);
}

.cp-section-body p {
    margin-bottom: 10px;
}

/* Value blocks (3-col grid) */
.cp-value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 10px;
}

.cp-value-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 14px 16px;
}

.cp-value-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}

.cp-value-body {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.6;
}

/* Steps */
.cp-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.cp-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 12px;
    color: var(--text-dim);
}

.cp-step-num {
    font-size: 9px;
    font-weight: 800;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid rgba(100, 206, 155, 0.25);
    padding: 2px 6px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Bullet list */
.cp-bullets {
    list-style: none;
    padding: 0;
    margin-top: 8px;
}

.cp-bullets li {
    position: relative;
    padding-left: 14px;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.7;
}

.cp-bullets li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}

/* Disclaimer */
.cp-disclaimer {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 6px;
    font-style: italic;
}

/* FAQ */
.cp-faq {
    margin-top: 10px;
}

.cp-faq-item {
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
}

.cp-faq-q {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 5px;
}

.cp-faq-a {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.6;
}

/* PLUS price */
.cp-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-main);
    margin: 10px 0 4px;
}

.cp-price-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 18px;
}

/* Stripe button (ready for integration) */
.btn-stripe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    background: var(--accent);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-sans);
    border: 1px solid var(--accent);
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
}

.btn-stripe:hover {
    opacity: 0.85;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    background: transparent;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-sans);
    border: 1px solid var(--border);
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Home btn-group (inherits) */
.home-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-cta-row {
    gap: 7px;
}

.cp-wrap-wide {
    max-width: none;
    width: 100%;
}

.home-future-line {
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.65;
    max-width: 640px;
}

.cp-sub-tight {
    max-width: 760px;
}

.home-value-grid .cp-value-block {
    min-height: 126px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 12px 14px;
}

.home-value-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-value-grid-three .cp-value-title {
    margin-bottom: 5px;
    line-height: 1.45;
}

.home-value-grid-three .cp-value-body {
    line-height: 1.55;
}

.home-endcap {
    padding-bottom: 36px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--surface-border-soft);
}

.home-state-shell {
    padding-bottom: 28px;
    max-width: 860px;
}

.home-state-compact {
    gap: 18px;
}

.home-operator-shell {
    gap: 22px;
    max-width: 980px;
}

.home-hero-slim {
    padding-bottom: 6px;
}

.home-hero-actions-inline {
    min-width: 220px;
}

.home-hero-actions-grid {
    min-width: 280px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.home-hero-actions-grid button {
    width: 100%;
}

.home-hero-primary-action {
    grid-column: 1 / -1;
}

.home-guest-feature {
    padding: 18px 20px;
    gap: 0;
}

.home-guest-feature .cp-section-title {
    margin-bottom: 10px;
}

.home-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.home-status-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-accent-card {
    border-color: rgba(100, 206, 155, 0.28);
    background: #161a20;
}

.home-accent-title {
    color: var(--accent);
}

.home-layer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.home-layer-grid-compact {
    margin-top: 0;
}

.home-layer-card {
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    padding: 14px 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 132px;
}

.home-layer-card-active {
    border-color: rgba(100, 206, 155, 0.22);
    background: rgba(255, 255, 255, 0.045);
}

.home-layer-kicker {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.home-layer-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.home-layer-body {
    font-size: 11px;
    line-height: 1.65;
    color: var(--text-dim);
}

.home-overview-grid .overview-card {
    min-height: 126px;
}

.home-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.home-quick-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-quick-card {
    border: 1px solid var(--surface-border-soft);
    background: rgba(255, 255, 255, 0.016);
    color: inherit;
    text-align: left;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.home-quick-card:hover {
    border-color: var(--surface-border-strong);
    background: rgba(255, 255, 255, 0.038);
}

.home-quick-card span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
}

.home-quick-card small {
    font-size: 10px;
    line-height: 1.55;
    color: var(--text-dim);
}

.home-operator-shell .overview-card {
    min-height: 122px;
}

.home-operator-shell .dashboard-grid-two {
    gap: 14px;
}

.home-operator-shell .dashboard-panel {
    min-height: 100%;
}

.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.tier-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 22px;
}

.tier-row {
    display: grid;
    gap: 24px;
}

.tier-row+.tier-row {
    margin-top: 22px;
}

.tier-row-primary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tier-row-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}

.tier-row-label {
    margin-top: 22px;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tier-card {
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.tier-card-current {
    border-color: rgba(100, 206, 155, 0.4);
    background: linear-gradient(180deg, rgba(100, 206, 155, 0.08), rgba(255, 255, 255, 0.03));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.tier-card:hover {
    border-color: var(--surface-border-strong);
    background: rgba(255, 255, 255, 0.045);
    transform: translateY(-1px);
}

.tier-coming-soon {
    opacity: 0.88;
}

.tier-card-featured,
.tier-plus {
    border-color: rgba(196, 166, 88, 0.34);
    background: linear-gradient(180deg, rgba(196, 166, 88, 0.14), rgba(255, 255, 255, 0.03));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
    transform: translateY(-2px);
}

.tier-card-live {
    background: #111419;
}

.tier-card-future {
    background: linear-gradient(180deg, rgba(100, 206, 155, 0.028), rgba(255, 255, 255, 0.018));
    border-color: rgba(100, 206, 155, 0.14);
    opacity: 0.92;
}

.tier-topline {
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--accent);
}

.tier-current-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 20px;
    padding: 0 8px;
    border: 1px solid rgba(100, 206, 155, 0.28);
    background: rgba(100, 206, 155, 0.1);
    color: var(--accent);
    font-size: 9px;
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tier-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tier-title {
    font-size: 18px;
    line-height: 1.1;
}

.tier-price {
    font-size: 13px;
    color: var(--text-main);
    font-weight: 700;
    text-align: right;
}

.tier-description {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.6;
}

.tier-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.6;
}

.tier-bullets li {
    position: relative;
    padding-left: 12px;
}

.tier-bullets li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--accent);
}

.tier-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
}

.cp-section-body-tight {
    margin-bottom: 12px;
    max-width: 62ch;
}

.plan-ladder-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.plan-ladder-item {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.plan-ladder-item-featured {
    border-top-color: rgba(255, 215, 0, 0.42);
}

.plan-ladder-topline {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--text-muted);
}

.plan-ladder-title {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
}

.plan-ladder-body {
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-dim);
}

.faq-compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-compact-item {
    border: 1px solid var(--surface-border-soft);
    background: rgba(255, 255, 255, 0.02);
    padding: 0 14px;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.faq-compact-item:hover {
    border-color: var(--surface-border-strong);
    background: #111419;
}

.faq-compact-item summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 0;
    font-size: 12px;
    color: var(--text-main);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.faq-compact-item summary::-webkit-details-marker {
    display: none;
}

.faq-compact-item summary::after {
    content: '+';
    color: var(--gold-text);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.faq-compact-item[open] summary::after {
    content: '−';
}

.faq-compact-item>div {
    padding: 0 0 14px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-dim);
}

/* Phase Subscription V1A-Visual R1: Plans / Account aligned to Workspace panels */
.subscription-shell,
.account-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.subscription-hero,
.account-hero-panel {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    background: linear-gradient(180deg, rgba(100, 206, 155, 0.055), rgba(255, 255, 255, 0.024));
    border-color: rgba(100, 206, 155, 0.18);
}

.subscription-shell .subscription-hero {
    background: linear-gradient(180deg, rgba(196, 166, 88, 0.07), rgba(255, 255, 255, 0.022));
    border-color: rgba(196, 166, 88, 0.18);
}

.subscription-hero-copy,
.account-hero-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.subscription-eyebrow {
    color: var(--accent);
    margin-bottom: 0;
}

.subscription-shell .subscription-eyebrow {
    color: var(--gold-text);
}

.subscription-hero h1,
.account-hero-panel h1 {
    color: var(--text-main);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 800;
    margin: 0;
}

.subscription-hero p,
.account-hero-panel p,
.account-current-plan-card p {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
    max-width: 620px;
}

.subscription-chip-row,
.account-hero-meta,
.account-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.subscription-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid var(--surface-border-soft);
    background: rgba(255, 255, 255, 0.022);
    border-radius: 3px;
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
}

.subscription-shell .subscription-chip {
    border-color: rgba(196, 166, 88, 0.18);
    background: rgba(196, 166, 88, 0.045);
}

.subscription-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.subscription-plan-card {
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    border-radius: 4px;
    padding: 20px;
    min-width: 0;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.subscription-plan-card:hover {
    border-color: var(--surface-border-strong);
    background: rgba(255, 255, 255, 0.038);
    transform: translateY(-1px);
}

.subscription-plan-card.is-featured {
    border-color: rgba(196, 166, 88, 0.42);
    background: linear-gradient(180deg, rgba(196, 166, 88, 0.105), rgba(255, 255, 255, 0.03));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(196, 166, 88, 0.1);
}

.subscription-plan-card.is-pro {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018));
}

.subscription-plan-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
}

.subscription-plan-kicker,
.account-plan-label,
.account-metric-label,
.account-kv-label {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.subscription-plan-title {
    color: var(--text-main);
    font-size: 17px;
    line-height: 1.18;
    font-weight: 800;
    margin: 4px 0 0;
}

.subscription-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 21px;
    padding: 0 8px;
    border: 1px solid rgba(196, 166, 88, 0.34);
    background: rgba(196, 166, 88, 0.08);
    color: var(--gold-text);
    border-radius: 3px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.subscription-badge.is-empty {
    visibility: hidden;
}

.subscription-price-row {
    padding-top: 2px;
}

.subscription-price {
    color: var(--gold-text);
    font-size: 25px;
    line-height: 1;
    font-weight: 800;
}

.subscription-plan-copy {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.6;
    min-height: 54px;
    margin: 0;
}

.subscription-feature-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.subscription-feature-row {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.45;
}

.subscription-feature-marker {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-text);
    opacity: 0.68;
    margin-top: 5px;
}

.subscription-card-cta,
.account-action-button {
    height: 36px;
    min-height: 36px;
    font-size: 10px;
    padding: 0 14px;
}

.subscription-card-cta {
    width: 100%;
    margin-top: auto;
}

.account-action-button.subscription-gold-cta {
    width: auto;
    min-width: 116px;
    font-size: 10px;
}

.subscription-gold-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    border: 1px solid rgba(196, 166, 88, 0.72);
    border-radius: 2px;
    background: linear-gradient(180deg, #d8b95f, #b89437);
    color: #111419;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s, border-color 0.15s;
}

.subscription-gold-cta:hover {
    filter: brightness(1.06);
    border-color: rgba(226, 179, 64, 0.9);
}

.subscription-card-stripe,
.account-billing-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--surface-border-soft);
    background: rgba(255, 255, 255, 0.018);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 10px;
    min-height: 34px;
    padding: 0 10px;
}

.subscription-card-stripe {
    justify-content: center;
    margin-top: 0;
}

.subscription-stripe-logo {
    width: 48px;
    height: auto;
    display: block;
    flex-shrink: 0;
}

.subscription-faq-panel {
    margin-top: 0;
}

.subscription-faq-list .faq-compact-item {
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.016);
}

.subscription-faq-list .faq-compact-item summary::after {
    color: var(--gold-text);
}

.account-hero-panel {
    margin-bottom: 0;
}

.account-summary-grid,
.account-metric-grid {
    display: grid;
    gap: 10px;
}

.account-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-kv-card,
.account-metric-card {
    border: 1px solid var(--surface-border-soft);
    background: rgba(255, 255, 255, 0.018);
    border-radius: 4px;
    padding: 12px;
    min-width: 0;
}

.account-kv-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.account-kv-value {
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.account-kv-value.is-muted {
    color: var(--text-muted);
}

.account-plan-layout {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.1fr);
    gap: 14px;
}

.account-current-plan-card {
    border: 1px solid rgba(100, 206, 155, 0.2);
    background: linear-gradient(180deg, rgba(100, 206, 155, 0.06), rgba(255, 255, 255, 0.018));
    border-radius: 4px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 190px;
}

.account-plan-name {
    color: var(--text-main);
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
}

.account-plan-name.is-paid {
    color: var(--accent);
}

.account-access-matrix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.account-access-row {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--surface-border-soft);
    background: rgba(255, 255, 255, 0.018);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.account-access-row span {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.35;
}

.account-access-row strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 3px;
    border: 1px solid var(--surface-border-soft);
    color: var(--text-main);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.account-access-row strong.is-enabled {
    border-color: rgba(100, 206, 155, 0.28);
    background: rgba(100, 206, 155, 0.08);
    color: var(--accent);
}

.account-access-row strong.is-locked {
    color: var(--text-muted);
}

.account-access-row strong.is-limit {
    border-color: rgba(196, 166, 88, 0.24);
    color: var(--gold-text);
}

.account-action-row {
    margin-top: auto;
}

.account-metric-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.account-metric-card {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.account-metric-value {
    color: var(--text-main);
    font-size: 19px;
    line-height: 1.15;
    font-weight: 800;
}

.account-metric-caption {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.account-billing-panel .account-billing-trust {
    justify-content: flex-start;
    margin-top: 2px;
}

.account-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.account-form-panel {
    min-height: 300px;
}

.account-form-panel .settings-input {
    max-width: none;
    border-color: var(--surface-border-soft);
    background: rgba(0, 0, 0, 0.24);
    border-radius: 3px;
}

.account-form-panel .settings-label {
    color: var(--text-muted);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.account-form-panel .dashboard-actions {
    margin-top: auto;
}

@media (max-width: 1040px) {
    .subscription-plan-grid,
    .account-summary-grid,
    .account-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-plan-layout,
    .account-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .subscription-hero,
    .account-hero-panel {
        flex-direction: column;
    }

    .subscription-plan-grid,
    .account-summary-grid,
    .account-metric-grid,
    .account-access-matrix {
        grid-template-columns: 1fr;
    }

    .subscription-plan-card {
        min-height: 0;
    }

}

/* Phase Subscription V1A-Visual R3: Attio-like pricing architecture + account control center */
.subscription-shell,
.account-shell {
    gap: 16px;
}

.subscription-hero,
.account-hero-panel {
    border: 1px solid var(--surface-border-soft);
    border-radius: 6px;
    padding: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.014));
    box-shadow: none;
}

.subscription-shell .subscription-hero {
    border-color: rgba(196, 166, 88, 0.16);
    background: linear-gradient(180deg, rgba(196, 166, 88, 0.052), rgba(255,255,255,0.014));
}

.subscription-hero h1,
.account-hero-panel h1 {
    font-size: 25px;
    letter-spacing: 0;
}

.subscription-chip {
    min-height: 24px;
    border-radius: 999px;
    padding: 0 10px;
    background: rgba(255,255,255,0.026);
}

.subscription-pricing-module {
    border: 1px solid rgba(196, 166, 88, 0.14);
    border-radius: 6px;
    background: rgba(255,255,255,0.012);
    padding: 12px;
}

.subscription-pricing-module .subscription-plan-grid {
    gap: 10px;
}

.subscription-plan-card {
    min-height: 332px;
    border-radius: 6px;
    padding: 18px;
    gap: 12px;
    background: rgba(17, 20, 25, 0.78);
}

.subscription-plan-card.is-featured {
    border-color: rgba(196, 166, 88, 0.48);
    background: linear-gradient(180deg, rgba(196, 166, 88, 0.12), rgba(255,255,255,0.022));
    box-shadow: inset 0 1px 0 rgba(196, 166, 88, 0.12), 0 18px 42px rgba(0,0,0,0.18);
}

.subscription-plan-card-top {
    min-height: 48px;
}

.subscription-price {
    font-size: 27px;
}

.subscription-plan-copy {
    min-height: 58px;
}

.subscription-feature-list {
    flex: 1;
    gap: 9px;
    justify-content: flex-start;
}

.subscription-feature-marker {
    background: var(--gold-text);
    box-shadow: 0 0 0 3px rgba(196, 166, 88, 0.08);
}

.subscription-module-trust {
    justify-content: center;
    border-width: 1px 0 0;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 0;
    background: transparent;
    min-height: 40px;
    margin-top: 10px;
    padding-top: 10px;
}

.subscription-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.subscription-section-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
    max-width: 520px;
}

.subscription-comparison-panel,
.subscription-faq-panel {
    border: 1px solid var(--surface-border-soft);
    border-radius: 6px;
    background: rgba(255,255,255,0.012);
    padding: 16px;
}

.subscription-comparison-scroll {
    overflow-x: auto;
}

.subscription-comparison-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    color: var(--text-dim);
    font-size: 11px;
}

.subscription-comparison-table th,
.subscription-comparison-table td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.055);
    text-align: left;
    vertical-align: middle;
}

.subscription-comparison-table thead th {
    color: var(--text-muted);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
}

.subscription-comparison-table tbody th[scope="row"] {
    color: var(--text-main);
    font-weight: 650;
}

.subscription-comparison-table .is-plus {
    background: rgba(196, 166, 88, 0.044);
    color: var(--gold-text);
}

.subscription-comparison-section th {
    padding-top: 18px;
    color: var(--gold-text);
    background: rgba(196, 166, 88, 0.035);
    border-bottom-color: rgba(196, 166, 88, 0.12);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.subscription-faq-panel {
    background: transparent;
}

.subscription-faq-list .faq-compact-item {
    border-radius: 6px;
    background: rgba(255,255,255,0.012);
}

.account-hero-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.012));
}

.account-plan-layout {
    grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1.18fr);
}

.account-current-plan-card {
    border-color: rgba(196, 166, 88, 0.28);
    background: linear-gradient(180deg, rgba(196, 166, 88, 0.095), rgba(255,255,255,0.018));
    border-radius: 6px;
    padding: 18px;
    min-height: 230px;
}

.account-plan-name.is-paid {
    color: var(--gold-text);
}

.account-plan-price {
    color: var(--gold-text);
    font-size: 24px;
    line-height: 1;
    font-weight: 850;
}

.account-plan-status,
.account-panel-label {
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-access-panel {
    border: 1px solid var(--surface-border-soft);
    border-radius: 6px;
    background: rgba(255,255,255,0.012);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.account-access-matrix {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.account-access-row {
    min-height: 42px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.055);
    border-radius: 0;
    background: transparent;
}

.account-access-row:last-child {
    border-bottom: 0;
}

.account-access-row strong.is-enabled {
    border-color: rgba(196, 166, 88, 0.26);
    background: rgba(196, 166, 88, 0.068);
    color: var(--gold-text);
}

.account-access-row strong.is-locked {
    background: rgba(255,255,255,0.025);
}

.account-metric-card {
    min-height: 86px;
    border-radius: 6px;
}

.account-billing-panel .account-summary-grid {
    margin-bottom: 10px;
}

.account-form-panel {
    min-height: 244px;
    border-radius: 6px;
}

@media (max-width: 720px) {
    .subscription-pricing-module,
    .subscription-comparison-panel,
    .subscription-faq-panel,
    .subscription-hero,
    .account-hero-panel {
        padding: 14px;
    }

    .subscription-section-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.overview-card {
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    border-radius: 4px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 140px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.overview-card:hover {
    border-color: var(--surface-border-strong);
    background: #161a20;
}

.overview-card-featured {
    border-color: var(--surface-border-soft);
}

.overview-card-featured .overview-value {
    font-size: 18px;
}

.overview-card-primary {
}

.overview-card-secondary .overview-value {
    font-size: 18px;
}

.overview-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--text-muted);
}

.overview-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.overview-detail {
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-dim);
}

.dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dashboard-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding: 0;
}

.dashboard-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
    align-items: stretch;
}

.dashboard-grid {
    display: grid;
    gap: 14px;
}

.dashboard-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-panel {
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.dashboard-panel:hover {
    border-color: var(--surface-border-strong);
    background: rgba(255, 255, 255, 0.038);
}

.dashboard-panel-highlight {
    border-color: var(--surface-border-soft);
}

.dashboard-panel-ai {
    border-color: rgba(100, 206, 155, 0.24);
    background: rgba(255, 255, 255, 0.058);
}

.dashboard-panel-minimal {
    padding: 16px 18px;
    gap: 12px;
}

.dashboard-panel-clean .cp-bullets {
    gap: 8px;
}

.dashboard-panel-clean .cp-bullets li {
    line-height: 1.55;
}

.home-hero-meta {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.65;
    color: var(--text-muted);
}

.home-hero-meta strong {
    color: var(--text-main);
    font-weight: 600;
}

.dashboard-panel-secondary {
    background: rgba(255, 255, 255, 0.02);
}

.dashboard-panel-wide {
    margin-top: 0;
    margin-bottom: 0;
}

.dashboard-span-full {
    grid-column: 1 / -1;
}

.dashboard-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.dashboard-panel-head .cp-section-title {
    margin-bottom: 0;
}

.dashboard-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid var(--border);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.dashboard-badge-plus,
.dashboard-badge-permanent {
    color: #000;
    background: var(--gold);
    border-color: rgba(255, 215, 0, 0.35);
}

.dashboard-badge-trial {
    background: var(--accent);
    border-color: rgba(100, 206, 155, 0.4);
    color: #000;
}

.dashboard-badge-free {
    color: var(--text-dim);
}

.dashboard-badge-pro,
.dashboard-badge-ultra {
    border-color: rgba(100, 206, 155, 0.3);
    color: var(--accent);
}

.dashboard-meta {
    font-size: 10px;
    color: var(--text-muted);
}

.dashboard-kpi {
    font-size: 24px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--text-main);
}

.dashboard-stat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-stat-list-tight {
    gap: 8px;
}

.dashboard-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 11px;
    color: var(--text-dim);
}

.dashboard-stat-row strong {
    color: var(--text-main);
    text-align: right;
}

.dashboard-usage-meter {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.dashboard-usage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #a8f0cb);
}

.dashboard-helper,
.dashboard-placeholder,
.dashboard-empty,
.dashboard-copy-block {
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-dim);
}

.history-empty-state {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    padding: 22px 0 6px;
    min-height: 220px;
    justify-content: center;
}

.history-empty-eyebrow {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--accent);
}

.history-empty-title {
    font-size: 22px;
    line-height: 1.15;
    color: var(--text-main);
    font-weight: 700;
    max-width: 24ch;
}

.history-empty-body,
.history-empty-note {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-dim);
    max-width: 52ch;
}

.history-empty-note {
    color: var(--text-muted);
}

.history-empty-actions {
    margin-top: 4px;
}

.dashboard-copy-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-list.compact {
    gap: 8px;
}

.dashboard-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dashboard-list-row.compact {
    padding: 8px 0;
}

.dashboard-list-row:last-child {
    border-bottom: none;
}

.dashboard-list-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-list-title {
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.45;
}

.dashboard-list-meta {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.5;
}

.dashboard-subsection {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-subtitle {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--text-muted);
}

.dashboard-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border: 1px solid var(--surface-border-soft);
    font-size: 10px;
    color: var(--text-main);
    transition: border-color 0.18s ease, background 0.18s ease;
}

.dashboard-chip:hover {
    border-color: var(--border-active);
    background: rgba(100, 206, 155, 0.06);
}

.dashboard-chip-muted {
    color: var(--text-dim);
}

.dashboard-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.history-shell {
    gap: 16px;
}

.history-tabbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 4px;
    border: 1px solid var(--surface-border-soft);
    background: rgba(255, 255, 255, 0.02);
}

.history-tab {
    height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.history-tab.active {
    border-color: var(--border-active);
    color: var(--text-main);
    background: rgba(100, 206, 155, 0.08);
}

.dashboard-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-form-grid .settings-field:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.dashboard-quote {
    color: var(--accent);
    font-size: 14px;
    line-height: 1.6;
}

.btn-small {
    height: 30px;
    padding: 0 12px;
    font-size: 10px;
}

.rail-tabbar,
.rail-timeframe-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px 10px 0;
}

.rail-tab,
.rail-timeframe-bar .tf-btn {
    height: 24px;
}

.rail-tab {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 8.5px;
    font-family: var(--font-sans);
    cursor: pointer;
    padding: 0 4px;
}

.rail-tab.active {
    background: rgba(100, 206, 155, 0.12);
    border-color: var(--border-active);
    color: var(--text-main);
}

.rail-scroll {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 0 6px;
    overflow-x: hidden;
    max-width: 100%;
}

.rail-input-shell,
.rail-response-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rail-query-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rail-query-input {
    width: 100%;
    min-height: 76px;
    resize: vertical;
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.55;
    padding: 10px 12px;
    outline: none;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.rail-query-input:focus {
    border-color: var(--border-active);
    background: #161a20;
}

.rail-query-actions {
    display: flex;
    gap: 8px;
}

.rail-query-actions .btn-outline,
.rail-query-actions .btn-stripe {
    flex: 1;
}

.rail-suggestion-list,
.rail-source-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rail-suggestion-chip,
.rail-source-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.rail-suggestion-chip:hover,
.rail-source-chip:hover {
    border-color: var(--border-active);
    background: rgba(100, 206, 155, 0.08);
    color: var(--text-main);
}

.rail-response-title {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
}

.rail-response-text {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.6;
    white-space: pre-line;
}

.rail-followups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 14px;
}

.rail-followup-label {
    color: var(--accent);
    font-size: 9px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.rail-summary-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rail-summary-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.rail-summary-row:first-child {
    border-top: none;
    padding-top: 0;
}

.rail-summary-label {
    color: var(--accent);
    font-size: 9px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.rail-summary-value {
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}

.rail-summary-copy {
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.55;
}

.rail-section-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--accent);
    margin-bottom: 6px;
}

.rail-note,
.rail-empty,
.rail-card-body {
    font-size: 10px;
    line-height: 1.55;
    color: var(--text-dim);
    overflow-wrap: anywhere;
}

.rail-card-stack,
.rail-section {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0 14px;
}

.rail-story-panel {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    overflow: hidden;
}

.rail-story-panel-featured {
    border-color: rgba(100, 206, 155, 0.3);
    background: rgba(100, 206, 155, 0.05);
}

.rail-story-kicker {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--accent);
}

.rail-story-title {
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.42;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rail-card {
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    padding: 10px 12px;
    margin: 0 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.18s ease, background 0.18s ease;
    min-width: 0;
    max-width: calc(100% - 28px);
    overflow: hidden;
}

.rail-card-featured {
    border-color: rgba(100, 206, 155, 0.28);
    background: rgba(100, 206, 155, 0.05);
}

.rail-mode-banner {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    border: 1px solid var(--surface-border-soft);
    background: #111419;
}

.rail-mode-banner-live {
    border-color: rgba(100, 206, 155, 0.28);
    background: rgba(100, 206, 155, 0.045);
}

.rail-mode-banner-result {
    border-color: rgba(100, 206, 155, 0.34);
    background: linear-gradient(180deg, rgba(100, 206, 155, 0.075), rgba(255, 255, 255, 0.025));
}

.rail-mode-banner-error {
    border-color: rgba(243, 179, 179, 0.22);
    background: rgba(243, 179, 179, 0.035);
}

.rail-mode-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--accent);
}

.rail-mode-title {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.rail-mode-copy {
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.rail-card-processing {
    border-color: rgba(100, 206, 155, 0.34);
    background: rgba(100, 206, 155, 0.07);
}

.rail-card-emphasis {
    border-color: rgba(100, 206, 155, 0.22);
    background: rgba(255, 255, 255, 0.05);
}

.rail-result-banner {
    gap: 8px;
    border-color: rgba(100, 206, 155, 0.36);
    background: linear-gradient(180deg, rgba(100, 206, 155, 0.085), rgba(255, 255, 255, 0.035));
}

.rail-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.rail-card:hover {
    border-color: var(--surface-border-strong);
    background: #161a20;
}

.rail-card-title {
    font-size: 11px;
    color: var(--text-main);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rail-card-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
}

.rail-card-error {
    color: #f3b3b3;
}

.rail-inline-status {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-main);
}

.rail-result-stat {
    color: var(--text-main);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    font-family: var(--font-mono);
}

.rail-analysis-stage-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rail-analysis-stage {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
}

.rail-analysis-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    border: 1px solid var(--surface-border-soft);
    color: var(--text-muted);
    font-size: 9px;
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.02);
}

.rail-analysis-stage.is-active .rail-analysis-step {
    border-color: rgba(100, 206, 155, 0.34);
    background: rgba(100, 206, 155, 0.11);
    color: var(--text-main);
}

.rail-analysis-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.rail-analysis-label {
    color: var(--text-main);
    font-size: 10px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rail-analysis-text {
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rail-analysis-stage-live .rail-analysis-stage {
    padding: 1px 0;
}

.rail-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}

.rail-chip-list-compact {
    gap: 5px;
}

.rail-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid var(--surface-border-soft);
    font-size: 9px;
    color: var(--text-main);
    transition: border-color 0.18s ease, background 0.18s ease;
}

.rail-chip:hover {
    border-color: var(--border-active);
    background: rgba(100, 206, 155, 0.06);
}

.rail-chip-muted {
    color: var(--text-dim);
}

.rail-mini-list {
    margin: 0;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rail-mini-list li {
    color: var(--text-dim);
}

.rail-link-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
}

.rail-market-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--surface-border-soft);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-main);
    text-decoration: none;
    min-width: 0;
    max-width: 100%;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.rail-market-link:hover {
    border-color: var(--border-active);
    background: rgba(100, 206, 155, 0.05);
}

.rail-market-title {
    font-size: 10px;
    line-height: 1.45;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.rail-market-meta {
    font-size: 9px;
    line-height: 1.45;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.rail-bullet-list {
    margin: 0;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rail-bullet-list li {
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.5;
}

.rail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rail-list-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    font-size: 10px;
    color: var(--text-dim);
}

.rail-list-rank {
    color: var(--text-muted);
    text-align: right;
}

.rail-list-key {
    color: var(--text-main);
}

.rail-story-link {
    width: 100%;
    border: 1px solid var(--surface-border-soft);
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.rail-story-link:hover {
    border-color: var(--border-active);
    background: rgba(100, 206, 155, 0.06);
}

.rail-story-headline {
    color: var(--text-main);
    font-size: 10px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.rail-story-meta {
    color: var(--text-muted);
    font-size: 9px;
}

.rail-mini-note {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.55;
    padding-top: 0;
}

.rail-usage-strip {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    padding: 8px 10px;
    border: 1px solid rgba(100, 206, 155, 0.2);
    background: rgba(100, 206, 155, 0.05);
}

.rail-usage-strip strong {
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.1;
    justify-self: end;
}

.rail-usage-strip-muted {
    border-color: var(--surface-border-soft);
    background: rgba(255, 255, 255, 0.02);
}

.rail-usage-label,
.rail-usage-meta {
    font-size: 9px;
    line-height: 1.45;
}

.rail-usage-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.rail-usage-meta {
    color: var(--text-dim);
    grid-column: 1 / -1;
}

.rail-action-btn {
    width: 100%;
    justify-content: center;
    margin-top: 2px;
}

.about-layer-grid {
    margin-top: 14px;
}

.about-layer-grid .cp-value-block {
    min-height: 0;
}

.stocks-header {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 14px !important;
    height: 48px;
    min-height: 48px;
    position: relative;
}

.stocks-header-top {
    position: static;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    width: auto;
    flex: 0 0 auto;
    align-self: center;
}

.stocks-header-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 0 10px 0 0;
}

.stocks-header-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--text-dim);
}

.stocks-header-title {
    display: none !important;
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1.05;
    padding-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 2px;
}

.rail-collapse-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}

.rail-collapse-btn:hover {
    color: var(--text-main);
    border-color: var(--border-active);
    background: rgba(100, 206, 155, 0.08);
}

.rail-reopen-tab {
    position: fixed;
    right: 0;
    top: 56px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: 160px;
    padding: 10px 0;
    border: 1px solid var(--border);
    border-right: none;
    background: rgba(16, 19, 23, 0.96);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 1280;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    box-shadow: -12px 0 28px rgba(0, 0, 0, 0.22);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

body.rail-collapsed-mode .rail-reopen-tab {
    display: inline-flex;
}

.rail-reopen-tab:hover {
    border-color: var(--border-active);
    background: rgba(100, 206, 155, 0.08);
    color: var(--text-main);
    box-shadow: -14px 0 32px rgba(0, 0, 0, 0.28);
}

/* ═════════════════════════════════════════
   BATCH 10-ITEM UPDATES
   ═════════════════════════════════════════ */

/* Breaking news — red theme */
.news-item.is-breaking-1 {
    background: rgba(239, 68, 68, 0.08) !important;
    border-left: 2px solid #ef4444 !important;
}

.news-item.is-breaking-1 .news-tickers {
    color: #fff !important;
}

.breaking-title {
    color: #fff !important;
    font-weight: 600;
}

/* New UI Optimization: Inline Breaking Badge in News List */
.ni-tickers-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
    flex-wrap: wrap;
    min-height: 15px;
}

.ni-tickers-row .headline-reactions-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 0;
}

.breaking-badge-inline {
    background: #ef4444;
    color: #fff;
    font-size: 7px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 2px;
    letter-spacing: 0.8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    height: 14px;
}

.news-tickers-list {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 100%;
}

.news-context-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 14px;
    padding: 1px 5px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.news-secondary-cluster .news-tickers-list {
    align-items: center;
}

.ticker-overflow-badge {
    opacity: 0.78;
}

/* Source link on news item row */
.title-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--accent);
    font-size: 10px;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.title-link:hover {
    opacity: 0.75;
}

.breaking-link {
    color: #fff !important;
}

.reader-source-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

a.reader-source-link:hover {
    color: var(--accent) !important;
}

.reader-ticker-wrap {
    color: #fff !important;
}

.reader-ticker-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    align-content: flex-start;
}

.news-source {
    margin-top: 0;
}

/* Login overlay — full news-pane height */
.news-pane {
    position: relative;
}

.news-login-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 20;
    border: 1px solid rgba(100, 206, 155, 0.45);
    background: rgba(13, 18, 24, 0.96);
    color: #d8e2f0;
    width: min(460px, calc(100% - 40px));
    min-height: 190px;
    padding: 34px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: all;
}

/* Reader content — scroll fix with footer clearance */
.reader-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px 40px;
    padding-bottom: 52px;
    min-height: 0;
}

/* Article detail scroll layout with fixed header */
.reader-detail {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    max-width: 900px;
}

.reader-fixed-header {
    flex-shrink: 0;
    background: var(--bg-pane);
    border-bottom: 1px solid var(--border);
    z-index: 10;
    padding-top: 14px;
}

.reader-title-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-top: 4px;
}

.title-right-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.reader-pub-time-top {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.breaking-chip-mini {
    background: #ef4444;
    color: #fff;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 10px;
    display: inline-block;
    margin-bottom: 4px;
}

.reader-scroll-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 40px 20px;
    min-height: 0;
    position: relative;
    width: 100%;
}

.reader-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
    font-size: 11px;
    width: 100%;
}

.reader-meta-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center !important;
    column-gap: 10px;
    row-gap: 8px;
}

.reader-meta-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.reader-meta-right {
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}

.reader-source-slot {
    align-self: center;
    display: inline-flex;
    align-items: center;
}

.reader-meta-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.reader-meta-row .reader-ticker-list {
    flex: 0 1 auto;
}

.reader-meta-row .reader-meta-right {
    margin-left: 0;
    grid-column: 1;
}

.reader-source-link {
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-family: var(--font-mono);
}

.reader-pub-time-meta {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    white-space: nowrap;
}

.reader-divider {
    height: 1px;
    background: var(--border);
    margin: 14px 0;
}

/* Stocks — rank column + scroll */
#stocks-root {
    flex: 1 1 auto !important;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.stock-rank {
    font-size: 9px;
    color: var(--text-muted);
    width: 14px;
    flex-shrink: 0;
    text-align: right;
    margin-right: 2px;
}

/* Footer social logos — even smaller */
/* Phase 4D-2D: footer social SVG vertical alignment moved from app-shell inline style */
.status-bar a.social-link svg {
    width: 10px !important;
    height: 10px !important;
    vertical-align: middle;
}


/* ═══ PLUS Gold Button ═══ */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 28px;
    background: var(--gold);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}

.btn-gold:hover {
    opacity: 0.85;
}


/* ═══ Layout bottom clearance (above status bar ~26px) ═══ */
.layout-body {
    padding-bottom: 26px !important;
}


/* ═══ Settings Page ═══ */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.settings-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-size: 12px;
    min-height: 44px;
    height: 44px;
    padding: 9px 12px;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
}

.settings-input:focus {
    border-color: var(--accent);
}

.workspace-select {
    position: relative;
    width: 100%;
    max-width: 380px;
}

.workspace-select-trigger {
    width: 100%;
    max-width: 380px;
    min-height: 44px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-size: 12px;
    padding: 9px 44px 9px 12px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
}

.workspace-select-trigger:hover,
.workspace-select.open .workspace-select-trigger,
.workspace-select-trigger:focus {
    border-color: var(--accent);
}

.workspace-select-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-select-trigger i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--text-dim);
    pointer-events: none;
}

.workspace-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    padding: 6px;
    display: none;
    z-index: 500;
}

.workspace-select.open .workspace-select-menu {
    display: block;
}

.workspace-select-option {
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--text-dim);
    text-align: left;
    padding: 10px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.workspace-select-option:hover,
.workspace-select-option.active {
    background: rgba(100, 206, 155, 0.12);
    color: var(--text-main);
}

.settings-plan-card {
    background: #111419;
    border: 1px solid var(--border);
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 380px;
}

.plan-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 2px 8px;
    text-transform: uppercase;
}

.plan-badge-plus {
    background: var(--gold);
    color: #000;
}

.plan-badge-trial {
    background: var(--accent);
    color: #000;
}

.plan-badge-free {
    background: var(--border);
    color: var(--text-muted);
}

.plan-info {
    font-size: 11px;
    color: var(--text-dim);
}

.plan-status-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 10px;
    color: var(--text-muted);
}

.plan-help {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.6;
}

.settings-helper {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.6;
}

.settings-inline-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-status-strip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    border: 1px solid rgba(100, 206, 155, 0.28);
    background: rgba(100, 206, 155, 0.08);
    color: #d8f4e7;
    font-size: 10px;
}

/* Auth feedback messages (no browser popups) */
.auth-feedback {
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: #111419;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.45;
    text-align: left;
    font-family: var(--font-sans);
}

.auth-feedback.success {
    border-color: rgba(100, 206, 155, 0.45);
    background: rgba(100, 206, 155, 0.12);
    color: #d3f6e7;
}

.auth-feedback.error {
    border-color: rgba(239, 91, 91, 0.45);
    background: rgba(239, 91, 91, 0.12);
    color: #ffd3d3;
}

/* Keep center panes above the fixed status bar */
.news-pane,
.reader-pane {
    height: calc(100vh - var(--status-bar-height));
    max-height: calc(100vh - var(--status-bar-height));
    padding-bottom: 0 !important;
}

.news-list-scroll {
    padding-bottom: 10px;
}

.reader-content {
    padding-bottom: 20px !important;
}

.reader-scroll-area {
    padding-bottom: 26px;
}

/* ===== v3.1 Interaction + Reader Polishing ===== */
.news-alert-box {
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 15px !important;
    padding: 18px 22px !important;
    min-height: 58px !important;
}

.news-alert-dot {
    width: 14px;
    height: 14px;
}

.news-headline-row {
    display: block;
    min-width: 0;
}

.news-secondary-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 15px;
}

.news-headline-row .news-title {
    display: block;
    min-width: 0;
}

.news-secondary-row .news-source {
    display: flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 0;
    opacity: 0.86;
}

.news-secondary-cluster {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    min-width: 0;
}

.title-link {
    font-size: 7.6px;
    line-height: 1.2;
    opacity: 0.72;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.9px;
}

.about-intro-section {
    margin-top: 2px;
}

.status-bar a.social-link svg {
    width: 14px !important;
    height: 14px !important;
}

.notif-wrapper {
    position: relative;
    cursor: pointer;
    z-index: 12000;
}

.notif-bell {
    font-size: 15px;
    color: var(--text-muted);
    transition: color 0.2s;
}

.notif-wrapper:hover .notif-bell,
.notif-wrapper.open .notif-bell {
    color: #fff;
}

.notif-badge {
    display: none;
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 999px;
}

.notif-flyout {
    display: none;
    position: absolute;
    right: 100%;
    top: 0;
    width: 320px;
    background: #0b0e11;
    border: 1px solid var(--border);
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.6);
    z-index: 25000;
    padding: 10px 0;
    pointer-events: auto;
}

.notif-title {
    padding: 10px 15px;
    border-bottom: 1px solid #1a202c;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.notif-body {
    max-height: 280px;
    overflow-y: auto;
    padding: 10px 15px;
    color: var(--text-dim);
    font-size: 11px;
}

.reader-title-compact {
    font-size: 26px;
    line-height: 1.28;
    padding-right: 0;
}

.reader-meta-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.reader-meta-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.reader-ticker-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.breaking-chip {
    display: inline-block;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    padding: 2px 7px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.reader-breaking .reader-divider {
    background: rgba(239, 68, 68, 0.45);
}

.reader-body-breaking {
    color: #e2e8f0;
}

.site-toast-host {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: calc(60px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 50000;
    align-items: flex-end;
    pointer-events: none;
    max-width: min(360px, calc(100vw - 28px));
}

.site-toast {
    min-width: 220px;
    max-width: 340px;
    padding: 11px 13px;
    border: 1px solid rgba(122, 138, 158, 0.24);
    background: rgba(10, 14, 19, 0.94);
    color: #dbe2ed;
    font-size: 11px;
    line-height: 1.45;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: auto;
}

.site-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.site-toast.success {
    border-color: rgba(100, 206, 155, 0.45);
    background: rgba(100, 206, 155, 0.14);
}

.site-toast.error {
    border-color: rgba(239, 91, 91, 0.45);
    background: rgba(239, 91, 91, 0.14);
}

@media (max-width: 768px) {
    .site-toast-host {
        left: max(14px, env(safe-area-inset-left));
        right: max(14px, env(safe-area-inset-right));
        bottom: calc(70px + env(safe-area-inset-bottom));
        top: auto;
        align-items: stretch;
        max-width: none;
        transition: opacity 0.18s ease, transform 0.18s ease, top 0.18s ease, bottom 0.18s ease;
    }

    .site-toast-host.site-toast-host-mobile-top {
        top: calc(68px + env(safe-area-inset-top));
        bottom: auto;
    }

    .site-toast-host.site-toast-host-mobile-hidden {
        opacity: 0;
        transform: translateY(6px);
    }

    .site-toast {
        min-width: 0;
        max-width: none;
        width: 100%;
        padding: 10px 12px;
        font-size: 10px;
    }
}

.system-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 6, 10, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 55000;
    opacity: 0;
    transition: opacity 0.16s ease;
}

.system-modal-backdrop.show {
    opacity: 1;
}

.system-modal {
    width: min(520px, 100%);
    border: 1px solid rgba(100, 206, 155, 0.38);
    background: #0b0f14;
    padding: 24px 22px 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.system-modal-title {
    font-size: 18px;
    color: #eef3fb;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}

.system-modal-body {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.7;
}

.system-modal-price {
    font-size: 18px;
    color: var(--text-main);
    margin-top: 12px;
    margin-bottom: 6px;
    font-weight: 700;
}

.system-modal-bullets {
    list-style: none;
    margin-top: 12px;
}

.system-modal-bullets li {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.65;
    position: relative;
    padding-left: 14px;
}

.system-modal-bullets li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--accent);
}

.system-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.system-modal-actions .btn-solid,
.system-modal-actions .btn-outline {
    margin-top: 0;
}

.system-modal-note {
    margin-top: 10px;
    font-size: 10px;
    color: var(--text-muted);
}

.system-modal-success {
    border-color: rgba(100, 206, 155, 0.46);
}

.system-modal-note-strong {
    font-size: 11px;
    color: var(--text-dim);
}

/* ===== v3.6 Reader/Notification polish ===== */
/* Removed .news-type-label and .is-type-X styles as labels are removed */

.reader-content.reader-story-mode {
    padding: 0 !important;
}

.reader-scroll-area {
    padding: 26px 32px 18px !important;
    min-height: 0;
}

/* Story mode: remove top padding from scroll area */
.reader-content.reader-story-mode .reader-scroll-area {
    padding-top: 0 !important;
}

.reader-article-wrap,
.reader-compose-wrap {
    width: 100%;
    max-width: 100%;
}

.reader-title-compact {
    font-size: 26px;
    line-height: 1.24;
    display: block;
    flex: 1;
    min-width: 0;
    padding-right: 0;
}

body.admin-user .reader-detail,
body.admin-user .reader-article-wrap {
    max-width: 940px;
}

body.admin-user .reader-title-compact {
    font-size: 28px;
    line-height: 1.22;
}

body.admin-user .reader-meta-row {
    grid-template-columns: auto minmax(180px, auto) minmax(0, 1fr);
}

/* AI Summary Button */
.ai-summary-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    height: 30px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 2px;
    white-space: nowrap;
}
.ai-summary-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
}
.ai-summary-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
}
.ai-summary-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* AI Summary Panel */
.ai-summary-panel {
    margin: 0 0 16px 0;
    border-left: 2px solid var(--accent);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.04);
    border-radius: 0 4px 4px 0;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.6;
}
.ai-summary-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.ai-summary-content p {
    margin: 0;
    color: var(--text);
}
.ai-summary-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-family: var(--font-mono);
}
.ai-summary-error {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}
@keyframes ai-spin {
    to { transform: rotate(360deg); }
}
.ai-spin {
    display: inline-block;
    animation: ai-spin 0.8s linear infinite;
}

/* ── Catalayer AI Chat (admin-only) ─────────────────────────── */
/* Wrapper is just a passthrough — #stocks-root keeps its native scroll.
   Input is absolutely positioned at the bottom of .stocks-pane. */
.rail-scroll-with-input {
    display: block;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}
.rail-scroll-with-input .rail-scroll-body {
    padding: 10px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
}
/* Leave room at the bottom of #stocks-root so content isn't covered by the
   sticky input. Height = input shell measured at ~170px. */
#stocks-root.rail-chat-admin { padding-bottom: 170px; }
#stocks-root.rail-chat-locked { padding-bottom: 54px; }
.rail-chat-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 14px 8px;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}
.rail-chat-bubble {
    padding: 9px 11px;
    border-radius: 4px;
    font-size: 12.5px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 88%;
    box-sizing: border-box;
    animation: rail-chat-fade-in 0.22s ease-out;
}
.rail-chat-bubble-user {
    align-self: flex-end;
    background: var(--accent-dim);
    border: 1px solid var(--border-active);
    color: var(--text-main);
}
.rail-chat-bubble-ai {
    align-self: flex-start;
    background: #111419;
    border: 1px solid var(--surface-border-soft);
    color: var(--text-main);
}
.rail-chat-bubble-ai strong {
    color: var(--accent);
    font-weight: 600;
}
.rail-chat-bubble-ai em {
    color: var(--text-dim);
    font-style: italic;
}
.rail-chat-bubble-ai a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(100, 206, 155, 0.45);
}
.rail-chat-bubble-ai a:hover { text-decoration-color: var(--accent); }
.rail-chat-code {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--surface-border-soft);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--accent);
}
.rail-chat-ul, .rail-chat-ol {
    margin: 6px 0 6px 18px;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.55;
}
.rail-chat-ul li, .rail-chat-ol li {
    margin: 2px 0;
    padding-left: 2px;
}
.rail-chat-ul { list-style: disc outside; }
.rail-chat-ul li::marker { color: var(--accent); }
.rail-chat-ol { list-style: decimal outside; }
.rail-chat-ol li::marker { color: var(--text-muted); }
@keyframes rail-chat-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rail-chat-thinking {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 11px;
    background: #111419;
    border: 1px solid var(--surface-border-soft);
    border-radius: 4px;
    align-self: flex-start;
}
.rail-chat-thinking span {
    font-style: italic;
    margin-right: 6px;
    color: var(--text-muted);
}
.rail-chat-thinking i {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    animation: rail-chat-blink 1.3s infinite ease-in-out both;
}
.rail-chat-thinking i:nth-child(2) { animation-delay: 0.15s; }
.rail-chat-thinking i:nth-child(3) { animation-delay: 0.30s; }
.rail-chat-thinking i:nth-child(4) { animation-delay: 0.45s; }
@keyframes rail-chat-blink {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40%           { opacity: 1;   transform: scale(1.15); }
}
.rail-chat-followups {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.rail-chat-chip {
    background: transparent;
    border: 1px solid var(--surface-border-soft);
    color: var(--text-muted);
    font-size: 11px;
    padding: 6px 9px;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    font-family: inherit;
}
.rail-chat-chip:hover {
    border-color: var(--border-active);
    color: var(--text-main);
    background: var(--bg-hover);
}

/* Fixed-at-bottom input ── anchored absolutely to .stocks-pane bottom */
.rail-chat-input-shell {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    border-top: none;
    background: var(--bg-nav);
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
}
.rail-chat-input-locked {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 11.5px;
    padding: 12px 14px;
}
.rail-chat-input-locked i {
    font-size: 14px;
    opacity: 0.7;
}
.rail-chat-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}
.rail-chat-input {
    width: 100%;
    min-height: 92px;            /* ~4 lines at 12.5px / 1.5 line-height + padding */
    max-height: 200px;
    resize: none;
    background: #111419;
    border: 1px solid var(--surface-border-soft);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 12.5px;
    line-height: 1.5;
    padding: 9px 11px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
    overflow-y: auto;
}
.rail-chat-input::placeholder { color: var(--text-muted); }
.rail-chat-input:focus {
    border-color: var(--border-active);
}
.rail-chat-input:disabled { opacity: 0.55; }
.rail-chat-actions {
    display: flex;
    gap: 6px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
.rail-chat-ask-btn {
    min-width: 64px;
    height: 30px;              /* matches btn-small */
    box-sizing: border-box;
    border: 1px solid transparent;  /* reserve same 2px as Fast button for exact pixel match */
    line-height: 1;
    padding: 0 12px;
}

/* Model picker (Fast / Thinking) — upward popover ────────── */
.rail-chat-model-wrap {
    position: relative;
    display: inline-flex;
}
.rail-chat-model-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;  /* matches Ask button */
    background: #111419;
    border: 1px solid var(--surface-border-soft);
    color: var(--text-muted);
    font-size: 11px;
    font-family: inherit;
    padding: 0 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    box-sizing: border-box;
    line-height: 1;
}
.rail-chat-model-btn:hover {
    border-color: var(--border-active);
    color: var(--text-main);
    background: var(--bg-hover);
}
.rail-chat-model-btn i { font-size: 12px; }
.rail-chat-model-caret { font-size: 9px !important; opacity: 0.7; }
.rail-chat-model-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    background: #111419;
    border: 1px solid var(--surface-border-soft);
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    z-index: 50;
    animation: rail-chat-menu-in 0.14s ease-out;
}
@keyframes rail-chat-menu-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rail-chat-model-option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-main);
    padding: 8px 10px;
    border-radius: 3px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    box-sizing: border-box;
}
.rail-chat-model-option:hover { background: var(--bg-hover); }
.rail-chat-model-option.active { background: var(--accent-dim); }
.rail-chat-model-option > i:first-child {
    font-size: 14px;
    color: var(--accent);
    flex: 0 0 auto;
}
.rail-chat-model-option-body { flex: 1 1 auto; min-width: 0; }
.rail-chat-model-option-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.3;
}
.rail-chat-model-option-hint {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 1px;
}
.rail-chat-model-option > .ph-check { color: var(--accent); font-size: 12px; }

/* ── Dashboard "Today's Themes" card (Catalayer AI /core/digest) ─── */
.cl-themes-card {
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    border-radius: 4px;
}
.cl-themes-body {
    font-size: 12px;
    color: var(--text-muted);
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cl-themes-meta {
    font-size: 11px;
    color: var(--text-muted);
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--surface-border-soft);
    margin-bottom: 8px;
}
.cl-themes-meta strong { color: var(--text-main); font-weight: 600; }
.cl-themes-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cl-theme-row {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cl-theme-row:last-child { border-bottom: none; }
.cl-theme-row-main {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: 11px;
}
.cl-theme-type {
    font-weight: 600;
    color: var(--text-main);
    text-transform: capitalize;
}
.cl-theme-direction {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.cl-dir-bull { background: var(--accent-dim); color: var(--accent); }
.cl-dir-bear { background: rgba(239, 91, 91, 0.12); color: var(--red); }
.cl-dir-neutral { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }
.cl-theme-importance {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cl-theme-count { font-size: 10px; color: var(--text-dim); margin-left: auto; }
.cl-theme-headline {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cl-theme-tickers {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}
.cl-themes-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 10px 0;
    font-style: italic;
}

/* Home button in stocks-header-top — matches .rail-collapse-btn frame */
.rail-home-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.45;
    transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.15s;
}
.rail-home-btn.is-active {
    cursor: pointer;
    color: var(--text-main);
    opacity: 1;
}
.rail-home-btn.is-active:hover {
    color: var(--accent);
    border-color: var(--border-active);
    background: rgba(100, 206, 155, 0.08);
}
.rail-home-svg { display: block; }

/* ── Deep Analysis (rail-deep-mode) ── */
.rail-deep-mode {
    padding: 10px 12px;
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    border: 1px solid rgba(88, 166, 255, 0.25);
    border-radius: 6px;
    margin-top: 6px;
}
.rail-deep-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.rail-deep-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #58a6ff;
    background: rgba(88, 166, 255, 0.12);
    border: 1px solid rgba(88, 166, 255, 0.3);
    border-radius: 3px;
    padding: 2px 6px;
}
.rail-deep-thesis {
    font-size: 13px;
    font-weight: 600;
    color: #e6edf3;
    line-height: 1.5;
    margin-bottom: 10px;
}
.rail-deep-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}
.rail-chip-direction {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid;
}
.dir-bullish  { color: #3fb950; border-color: rgba(63,185,80,0.4); background: rgba(63,185,80,0.1); }
.dir-bearish  { color: #f85149; border-color: rgba(248,81,73,0.4); background: rgba(248,81,73,0.1); }
.dir-neutral  { color: #8b949e; border-color: rgba(139,148,158,0.4); background: rgba(139,148,158,0.08); }
.dir-mixed    { color: #d29922; border-color: rgba(210,153,34,0.4); background: rgba(210,153,34,0.1); }
.rail-deep-section-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8b949e;
    margin-bottom: 4px;
}
.rail-deep-list {
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
}
.rail-deep-list li {
    font-size: 11px;
    color: #c9d1d9;
    padding: 2px 0;
    padding-left: 10px;
    position: relative;
}
.rail-deep-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: #58a6ff;
}
.rail-deep-confidence {
    font-size: 11px;
    color: #8b949e;
    font-style: italic;
    margin-bottom: 10px;
    line-height: 1.4;
}
.rail-deep-poly-angle {
    font-size: 11px;
    color: #d29922;
    background: rgba(210,153,34,0.08);
    border-left: 2px solid rgba(210,153,34,0.4);
    padding: 4px 8px;
    margin-bottom: 10px;
    border-radius: 0 3px 3px 0;
}
.rail-deep-reset {
    font-size: 10px;
    color: #58a6ff;
    background: none;
    border: 1px solid rgba(88,166,255,0.3);
    border-radius: 3px;
    padding: 3px 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.rail-deep-reset:hover {
    background: rgba(88,166,255,0.1);
}
.rail-deep-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8b949e;
    font-size: 12px;
    padding: 14px 4px;
}
.rail-deep-error {
    color: #f85149;
    font-size: 12px;
    padding: 10px 4px;
}

/* ── Polymarket Cards ── */
.rail-poly-empty {
    color: #8b949e;
    font-size: 12px;
    padding: 10px 4px;
}
.rail-poly-loading {
    color: #8b949e;
    font-size: 12px;
    padding: 10px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rail-poly-card {
    background: #111419;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    padding: 8px 10px;
    margin-bottom: 7px;
}
.rail-poly-card:last-child { margin-bottom: 0; }
.rail-poly-q {
    font-size: 11px;
    font-weight: 600;
    color: #c9d1d9;
    margin-bottom: 6px;
    line-height: 1.4;
}
.rail-poly-q a {
    color: inherit;
    text-decoration: none;
}
.rail-poly-q a:hover { color: #58a6ff; }
.rail-poly-odds {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}
.rail-poly-odds span {
    font-size: 10px;
    background: rgba(88,166,255,0.08);
    border: 1px solid rgba(88,166,255,0.2);
    border-radius: 3px;
    padding: 2px 6px;
    color: #58a6ff;
    font-weight: 600;
}
.rail-poly-vol {
    font-size: 10px;
    color: #8b949e;
}
.rail-poly-footer {
    margin-top: 6px;
    font-size: 9px;
    color: #484f58;
    text-align: right;
}

/* Relocated Reaction Bar Styling */

.headline-reaction-badge {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: #fff;
    padding: 0 5px;
    border-radius: 0; /* Square for "block" look */
    font-size: 9px;
    font-weight: 700;
    margin-left: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    height: 100%; /* Stretch to fill row height - "顶格" alignment */
    vertical-align: middle;
    text-transform: uppercase;
    box-sizing: border-box;
}

.headline-reaction-badge.large {
    font-size: 12px;
    padding: 2px 8px;
    margin-bottom: 4px;
}

.headline-reactions-inline {
    display: inline;
    margin-left: 6px;
}

.headline-reactions-inline .headline-reaction-badge {
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 2px;
    vertical-align: middle;
    letter-spacing: 0.6px;
    border-color: rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.82);
}

/* Removed old redundant .action-btn overrides to let line 1013 tabs styles prevail */


.react-count {
    background: rgba(0, 0, 0, 0.2);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
}

.reader-title-text {
    flex: 1;
    min-width: 0;
    display: block;
    width: 100%;
}

    .story-type-chip {
        display: none;
    }

    .reader-fallback {
        padding-top: 4px;
    }

    .reader-fallback-card {
        padding: 14px 14px 16px;
        gap: 10px;
    }

    .reader-fallback-title {
        font-size: 15px;
        max-width: 100%;
    }

    .reader-fallback-copy {
        font-size: 11px;
        max-width: 100%;
    }

    .reader-fallback-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .reader-fallback-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .reader-fallback-btn {
        width: 100%;
        min-width: 0;
    }

/* Refined Unavailable Box Stylings - Minimalist */
/* Redesigned Unavailable View - Borderless & Elegant */
.unified-unavailable {
    margin: 60px auto;
    padding: 0;
    background: transparent;
    border: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: 500px;
}

.un-content .un-text {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.un-content .un-subtext {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 0;
    line-height: 1.6;
}

.un-actions {
    margin-top: 15px;
}

.reader-fallback {
    width: 100%;
    padding: 0;
}

.reader-fallback-card {
    width: 100%;
    border: 1px solid var(--surface-border-soft);
    background: rgba(255, 255, 255, 0.02);
    padding: 20px 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    border-radius: 4px;
    box-sizing: border-box;
}

.reader-fallback-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.reader-fallback-kicker {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
}

.reader-fallback-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-main);
    max-width: 100%;
}

.reader-fallback-copy {
    margin: 0;
    font-size: 11px;
    line-height: 1.65;
    color: var(--text-dim);
    max-width: 100%;
}

.reader-fallback-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.reader-fallback-grid-compact {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.reader-fallback-item {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reader-fallback-item-compact {
    min-height: 0;
}

.reader-fallback-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
}

.reader-fallback-value {
    font-size: 10px;
    line-height: 1.55;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.reader-fallback-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.reader-fallback-btn {
    min-width: 140px;
    justify-content: center;
}

.un-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 700;
    font-size: 11px;
    border-radius: 2px;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: auto;
}

.un-btn:hover {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.un-btn i {
    font-size: 12px;
}

.reader-breaking .reader-article-wrap {
    padding-left: 0;
}

.reader-header-inner {
    width: 100%;
    max-width: 100%;
}

.reader-meta {
    margin-bottom: 8px;
    padding-bottom: 2px;
    border-bottom: none !important;
}

.reader-content-divider {
    width: auto;
    height: 1px;
    background: var(--border);
    margin: 2px -40px 14px -40px;
}

.reader-source-link {
    pointer-events: auto;
}

.news-source a,
.reader-source-link {
    position: relative;
    z-index: 6;
}

.news-blur-active {
    pointer-events: auto;
    user-select: auto;
}

.reader-header-btn.dynamic-tab {
    justify-content: space-between;
    padding-right: 12px;
    gap: 10px;
}

.tab-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-close-btn {
    margin-left: 6px;
    margin-right: 4px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.tab-close-btn:hover {
    color: #fca5a5;
}

.reader-body p {
    margin: 0 0 12px;
}

.reader-body p:last-child {
    margin-bottom: 0;
}

.react-count {
    background: var(--accent);
    color: #000;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 2px;
    font-weight: 800;
    min-width: 14px;
    text-align: center;
}

.reader-compose-wrap {
    border-top: none;
    padding: 0;
}

.reader-detail {
    min-height: 0;
}

.reader-body-wrap {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.reader-body {
    width: 100%;
    font-family: var(--font-sans);
}

.notif-flyout {
    right: calc(100% + 8px);
    top: -8px;
}

.notif-body {
    padding: 0;
}

.notif-item {
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid #1a202c;
    background: transparent;
    color: #d8e2f0;
    padding: 10px 14px;
    cursor: pointer;
}

.notif-item:hover {
    background: rgba(100, 206, 155, 0.09);
}

.notif-item-meta {
    font-size: 10px;
    color: var(--accent);
    margin-bottom: 4px;
}

.notif-item-reaction {
    font-size: 11px;
    color: #e4edf9;
    margin-bottom: 3px;
}

.notif-item-headline {
    font-size: 11px;
    line-height: 1.45;
    color: #aebbd0;
}

@keyframes cl-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.anim-spin {
    animation: cl-spin 1s linear infinite;
    display: inline-block;
}

/* Admin Dashboard Styles - Premium Terminal Look */
.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 980px;
    margin-top: 24px;
    font-size: 13px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.admin-shell {
    padding-bottom: 24px;
}

.admin-hero {
    margin-bottom: 8px;
}

/* Admin drawer */
.admin-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; }
.admin-drawer { position: fixed; top: 0; right: 0; width: 480px; height: 100vh; background: #111419; border-left: 1px solid var(--surface-border-soft); z-index: 9999; display: flex; flex-direction: column; box-shadow: -4px 0 20px rgba(0,0,0,0.3); animation: adminDrawerIn 0.2s ease; }
@keyframes adminDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.admin-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--surface-border-soft); gap: 12px; }
.admin-drawer-body { flex: 1; overflow-y: auto; padding: 0 20px 20px; }
.admin-drawer-footer { padding: 12px 20px; border-top: 1px solid var(--surface-border-soft); display: flex; gap: 8px; flex-wrap: wrap; }
.admin-drawer-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--surface-border-soft); padding: 0; flex-shrink: 0; }
.admin-drawer-tab { padding: 10px 14px; font-size: 10px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.admin-drawer-tab:hover { color: var(--text-main); }
.admin-drawer-tab.active { color: var(--accent); border-color: var(--accent); }
@media (max-width: 768px) { .admin-drawer { width: 100%; } }

/* Admin confirm modal */
.admin-confirm-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.admin-confirm { background: #111419; border: 1px solid var(--surface-border-soft); border-radius: 6px; padding: 24px; max-width: 420px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.admin-confirm-danger .btn-stripe { background: #ef5b5b; border-color: #ef5b5b; }
.admin-confirm-danger .btn-stripe:hover { background: #d94a4a; }

/* Admin status badges */
.admin-badge { font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; display: inline-block; }
.admin-badge-green { color: var(--accent); border: 1px solid var(--accent); }
.admin-badge-red { color: #ef5b5b; border: 1px solid #ef5b5b; }
.admin-badge-gold { color: var(--gold-text, #e2c680); border: 1px solid rgba(226,198,128,0.3); }
.admin-badge-muted { color: var(--text-muted); border: 1px solid rgba(255,255,255,0.08); }
.admin-badge-purple { color: #a78bfa; border: 1px solid rgba(167,139,250,0.4); }

/* Admin charts, filters, time range */
.admin-chart-container { position: relative; width: 100%; height: 220px; }
.admin-chart-container canvas { width: 100%; height: 100%; display: block; }
.admin-filter-bar { display: flex; align-items: center; gap: 10px; }
.admin-search-input { flex: 1; background: rgba(0,0,0,0.3); border: 1px solid var(--border); color: var(--text-main); font-size: 12px; height: 36px; padding: 0 12px; border-radius: 3px; font-family: var(--font-mono); }
.admin-search-input:focus { border-color: var(--accent); outline: none; }
.admin-filter-bar select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%239aa4b3'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.admin-time-range { display: flex; gap: 4px; }
.admin-time-btn { padding: 5px 12px; font-size: 10px; background: transparent; border: 1px solid var(--surface-border-soft); color: var(--text-dim); cursor: pointer; border-radius: 2px; font-family: var(--font-mono); transition: border-color 0.15s, color 0.15s; }
.admin-time-btn:hover { border-color: var(--text-muted); color: var(--text-main); }
.admin-time-btn.active { border-color: var(--accent); color: var(--accent); }

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-table th {
    text-align: left;
    padding: 14px 12px;
    background: rgba(45, 55, 72, 0.6);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}

.admin-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    color: #e2e8f0;
}

.admin-table tr:hover td {
    background: rgba(100, 206, 155, 0.05);
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.action-btn.danger {
    background: rgba(245, 101, 101, 0.1) !important;
    color: #f56565 !important;
    border: 1px solid rgba(245, 101, 101, 0.3) !important;
}

.action-btn.danger:hover {
    background: #f56565 !important;
    color: white !important;
}

.admin-editor-empty {
    padding: 16px 18px;
    border: 1px dashed var(--surface-border-soft);
    color: var(--text-dim);
    font-size: 12px;
}

.admin-editor-card {
    border: 1px solid var(--surface-border-soft);
    background: rgba(255, 255, 255, 0.02);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.admin-editor-kicker {
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}

.admin-editor-title {
    font-size: 15px;
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.4;
}

.admin-editor-grid {
    margin-top: 2px;
}

.admin-editor-note {
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-dim);
    padding: 10px 12px;
    border: 1px solid var(--surface-border-soft);
    background: rgba(255, 255, 255, 0.02);
}

.admin-editor-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =============================================
   PHASE 0.5.0: FULL RESPONSIVE LAYOUT (MOBILE/TABLET)
   ============================================= */

.mobile-header {
    display: none;
    height: 60px;
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    z-index: 500;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.m-header-center {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.m-header-logo img {
    height: 32px;
}

.m-header-title {
    display: none;
    max-width: 68vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-main);
}

.m-header-left,
.m-header-right,
.m-header-spacer {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-dim);
}

.m-header-left,
.m-header-right {
    cursor: pointer;
}

.m-header-spacer {
    pointer-events: none;
    opacity: 0;
}

.m-header-left:hover,
.m-header-right:hover {
    color: var(--text-main);
}

.mobile-nav-close {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: var(--text-muted);
}

@media (max-width: 1400px) {
    .app-container {
        grid-template-columns: var(--nav-width-compact) minmax(0, 1fr) minmax(0, 1.2fr);
        grid-template-areas: "nav news reader";
    }

    .nav-pane {
        width: var(--nav-width-compact) !important;
        max-width: var(--nav-width-compact) !important;
    }


    /* Workspace surface mode at 1400px: nav + reader + no rail */
    .app-container.workspace-surface-mode {
        grid-template-columns: var(--nav-width-compact) minmax(0, 1fr);
        grid-template-areas: "nav reader";
    }
    .app-container.workspace-surface-mode .stocks-pane {
        display: none !important;
    }

    .app-container.full-page-mode,
    .app-container.admin-mode {
        grid-template-columns: var(--nav-width-compact) minmax(0, 1fr);
        grid-template-areas: "nav reader";
    }

    .stocks-pane {
        display: none !important;
    }

    .status-bar {
        left: var(--nav-width-compact);
        right: 0;
        width: auto;
    }

    .dashboard-grid-two,
    .dashboard-form-grid,
    .tier-row-primary {
        grid-template-columns: 1fr;
    }

    .tier-row-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Overview 6-col grid → 3-col on medium screens */
    .overview-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ═══ Medium desktop / tablet landscape (1100px) ═══ */
@media (max-width: 1100px) {
    /* Default 3-pane: equal split, no fixed minimums */
    .app-container {
        grid-template-columns: var(--nav-width-compact) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "nav news reader";
    }

    .app-container.rail-hidden-mode {
        grid-template-columns: var(--nav-width-compact) minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Nav shrinks to compact width */
    .nav-pane {
        width: var(--nav-width-compact) !important;
        max-width: var(--nav-width-compact) !important;
    }

    /* Workspace surface: nav + full-width reader */
    .app-container.workspace-surface-mode,
    .app-container.workspace-surface-mode.rail-hidden-mode,
    .app-container.full-page-mode,
    .app-container.admin-mode {
        grid-template-columns: var(--nav-width-compact) minmax(0, 1fr);
        grid-template-areas: "nav reader";
    }

    .stocks-pane {
        display: none !important;
    }

    .overview-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .dashboard-grid-two {
        grid-template-columns: 1fr;
    }

    .dashboard-panel-head {
        flex-wrap: wrap;
        gap: 8px;
    }

    .reader-content .overview-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 900px breakpoint is now handled by the mobile layout below */

@media (max-width: 900px) {
    body {
        overflow: hidden;
    }

    .app-container,
    .app-container.rail-hidden-mode,
    .app-container.rail-collapsed-mode,
    .app-container.workspace-surface-mode,
    .app-container.workspace-surface-mode.rail-hidden-mode,
    .app-container.full-page-mode,
    .app-container.admin-mode {
        display: block !important;
        position: relative;
        padding-top: 60px;
        height: 100dvh;
        width: 100%;
        overflow: hidden;
        inset: 0;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
    }

    .app-container.auth-mode {
        padding-top: 0;
    }

    .mobile-header {
        display: flex;
        padding: 0 14px;
    }

    .nav-pane {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -100%;
        width: min(82vw, 320px);
        max-width: min(82vw, 320px) !important;
        height: 100dvh;
        background: #15181c;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        padding-top: 18px;
        box-shadow: 20px 0 50px rgba(0, 0, 0, 0.8);
        overflow-y: auto;
    }

    .nav-pane.mobile-open {
        left: 0;
    }

    .mobile-nav-close {
        display: none;
    }

    /* Restore full labels in mobile nav drawer (overrides 1400px icon-only mode) */
    .nav-label {
        display: inline !important;
    }
    .nav-group-caret {
        display: inline-block !important;
    }
    .nav-item {
        height: auto;
        min-height: 52px;
        font-size: 14px;
        padding-left: 20px !important;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .nav-item.nav-item-sub {
        padding-left: 20px !important;
    }

    .nav-item::after {
        display: none;
    }

    .nav-item i {
        font-size: 18px;
        width: 24px;
    }

    .nav-logo img {
        max-width: 80px !important;
        max-height: 80px !important;
    }
    .nav-logo {
        min-height: 92px;
        height: auto;
        padding-top: 10px;
    }

    .dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .status-bar {
        position: relative;
        left: 0;
        right: 0;
        width: 100%;
        flex-wrap: wrap;
        height: auto;
        min-height: 44px;
        padding: 12px 10px 18px;
        justify-content: center;
        gap: 8px;
    }

    .status-bar .sep {
        display: none;
    }

    .status-bar a:not(.social-link),
    .status-bar .footer-copy,
    .status-bar .social-link {
        height: auto;
        padding: 0 4px;
    }

    .pane:not(.nav-pane) {
        width: 100%;
        border-right: none;
        border-bottom: none;
        min-height: 0;
        height: calc(100dvh - 60px);
        max-height: calc(100dvh - 60px);
        overflow: hidden;
        display: none !important;
    }

    .app-container.mobile-pane-news .news-pane {
        display: flex !important;
    }

    /* workspace-surface / full-page modes must always hide news, even if mobile-pane-news is set */
    .app-container.workspace-surface-mode .news-pane,
    .app-container.full-page-mode .news-pane {
        display: none !important;
    }

    .pane.reader-pane {
        display: flex !important;
    }

    .app-container.auth-mode .auth-pane {
        display: flex !important;
        padding: 16px 14px 22px;
        height: 100dvh;
        max-height: 100dvh;
    }

    .news-pane,
    .reader-pane {
        height: calc(100dvh - 60px);
        max-height: calc(100dvh - 60px);
    }

    .news-pane {
        padding-bottom: 0;
    }

    .reader-pane {
        padding-bottom: 0;
    }

    .stocks-pane {
        display: none !important;
    }

    .reader-content {
        padding: 16px 16px 28px;
        overflow-y: auto;
    }

    .reader-title {
        font-size: 26px;
        line-height: 1.18;
    }

    .reader-meta {
        gap: 10px;
        flex-wrap: wrap;
        padding-bottom: 16px;
    }

    .reader-meta-row {
        grid-template-columns: 1fr;
    }

    .reader-meta-inline {
        gap: 8px;
    }

    .reader-body {
        font-size: 13px;
        line-height: 1.75;
        text-align: left;
    }

    .reader-header-tabs {
        display: none !important;
    }

    .pane-header {
        height: auto;
        min-height: 48px;
        padding: 10px 14px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .news-pane .pane-header {
        position: sticky;
        top: 0;
        z-index: 20;
        background: var(--bg-pane);
        display: grid;
        grid-template-columns: repeat(3, minmax(0, max-content));
        align-items: center;
        gap: 8px;
        justify-content: start;
    }

    .search-wrap {
        order: 0;
        flex: 1 1 auto !important;
        width: 100%;
        margin-left: 0 !important;
        min-width: 0;
        grid-column: 1 / -1;
    }

    .header-btn {
        height: 32px;
        padding: 0 6px;
        font-size: 10px;
        white-space: nowrap;
        min-width: 0;
    }

    .news-alert-box {
        margin: 10px 14px 8px;
        padding: 12px 14px;
        font-size: 13px;
        line-height: 1.5;
        min-height: 0;
        text-align: left;
        justify-content: flex-start;
    }

    .news-alert-dot {
        width: 10px;
        height: 10px;
    }

    .news-list-scroll {
        padding-bottom: 12px;
    }

    .news-item {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
        padding: 11px 12px 11px 8px;
    }

    .news-time {
        font-size: 8px;
        padding-top: 4px;
    }

    .news-content {
        gap: 4px;
    }

    .news-title {
        font-size: 15px;
        line-height: 1.38;
        -webkit-line-clamp: 4;
    }

    .news-source {
        font-size: 8px;
        letter-spacing: 0.7px;
    }

    .news-login-overlay {
        width: calc(100% - 24px);
        min-height: auto;
        padding: 22px 18px;
    }

    .news-login-title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .news-login-subtitle {
        font-size: 13px;
        max-width: none;
        margin-bottom: 16px;
    }

    .news-login-actions {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .news-login-actions .btn-solid,
    .news-login-actions .btn-outline {
        width: 100%;
    }

    .cp-wrap,
    .cp-wrap-wide,
    .home-state-shell,
    .home-operator-shell {
        max-width: none;
    }

    .cp-headline {
        font-size: 24px;
        line-height: 1.22;
        margin-bottom: 12px;
    }

    .cp-sub {
        margin-bottom: 18px;
    }

    .cp-section {
        margin-top: 24px;
        padding-top: 18px;
    }

    .home-btn-group,
    .home-cta-row {
        gap: 8px;
    }

    .home-btn-group .btn-stripe,
    .home-btn-group .btn-outline,
    .home-btn-group .subscription-gold-cta,
    .dashboard-actions .btn-stripe,
    .dashboard-actions .btn-outline,
    .dashboard-actions .btn-gold {
        width: 100%;
    }

    .overview-grid,
    .home-status-grid,
    .home-status-grid-three,
    .home-value-grid-three,
    .home-layer-grid,
    .tier-grid,
    .tier-grid-four,
    .tier-row-primary,
    .tier-row-secondary,
    .plan-ladder-strip,
    .dashboard-grid-two,
    .dashboard-form-grid,
    .home-quick-grid,
    .home-quick-grid-three {
        grid-template-columns: 1fr;
    }

    .dashboard-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .home-hero-actions-grid {
        width: 100%;
        min-width: 0;
        grid-template-columns: 1fr;
    }

    .home-hero-primary-action {
        grid-column: auto;
    }

    .dashboard-panel,
    .home-layer-card,
    .home-value-grid .cp-value-block,
    .home-overview-grid .overview-card {
        min-height: 0;
    }

    .dashboard-list-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .history-tabbar {
        width: 100%;
        overflow-x: auto;
    }

    .history-tab {
        white-space: nowrap;
    }

    .auth-shell {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .auth-pane {
        padding: 12px 12px 18px;
        overflow-y: auto;
    }

    .auth-brand-panel,
    .auth-card {
        padding: 14px 14px;
        box-shadow: none;
    }

    .auth-brand-panel {
        gap: 6px;
        justify-content: flex-start;
    }

    .auth-brand-stack {
        gap: 8px;
        margin-top: 2px;
    }

    .auth-brand-title,
    .auth-brand-copy,
    .auth-brand-points {
        display: none !important;
    }

    .auth-back-link {
        font-size: 9px;
        letter-spacing: 0.7px;
    }

    .auth-method-switch {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .auth-brand-logo {
        width: auto;
        height: 32px;
    }

    .auth-brand-title {
        font-size: 19px;
        line-height: 1.02;
        max-width: 12ch;
    }

    .auth-brand-copy {
        font-size: 9px;
        line-height: 1.45;
        max-width: 30ch;
    }

    .auth-brand-points {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 8px;
        font-size: 9px;
    }

    .auth-brand-points > div {
        gap: 6px;
    }

    .auth-brand-points > div::before {
        width: 4px;
        height: 4px;
    }

    .auth-card-title {
        font-size: 22px;
    }

    .auth-form {
        gap: 8px;
        margin-top: 8px;
    }

    .auth-field input {
        height: 42px;
        font-size: 12px;
        padding: 0 10px;
    }

    .auth-method-tab {
        height: 38px;
        font-size: 10px;
    }

    .auth-inline-row,
    .auth-code-row,
    .auth-footer-links {
        flex-direction: column;
        align-items: stretch;
    }

    .auth-footer-links {
        gap: 8px;
        padding-top: 10px;
    }

    .auth-card-subtitle,
    .auth-card-support,
    .auth-helper-copy,
    .auth-footer-copy {
        font-size: 10px;
        line-height: 1.5;
    }

    .auth-inline-btn {
        width: 100%;
        min-width: 0;
    }

    .auth-check {
        align-items: flex-start;
    }

    #admin-user-list-container {
        overflow-x: auto;
    }

    .admin-table {
        min-width: 720px;
    }

    .flyout-menu {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        display: none;
        box-shadow: none;
        background: #111419;
        margin-top: 5px;
        border: none;
        max-height: none;
        padding: 5px 0 5px 20px;
    }

    .nav-item:hover .flyout-menu {
        display: block;
    }

    /* ═══ Mobile workspace pages ═══ */
    .overview-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .overview-card {
        padding: 10px !important;
    }

    .overview-value {
        font-size: 18px !important;
    }

    .cp-wrap, .cp-wrap-wide {
        padding: 14px !important;
    }

    .dashboard-shell {
        gap: 10px !important;
    }

    .dashboard-panel {
        padding: 14px !important;
    }

    /* Stack header + actions vertically on mobile */
    .dashboard-shell > div:first-child {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Full-width buttons on mobile */
    .btn-stripe, .btn-outline, .btn-premium {
        font-size: 11px !important;
        padding: 8px 14px !important;
    }

    /* Plans page cards stack */
    .cp-wrap-wide[style*="max-width:1020px"] > div[style*="display:flex"][style*="gap:12px"] {
        flex-direction: column !important;
    }

    /* Island alert flow preview scroll */
    .dashboard-panel [style*="display:flex"][style*="gap:8px"][style*="overflow-x"] {
        gap: 6px !important;
    }

    /* Monitor/Apps inner cards */
    .dashboard-panel [style*="display:grid"][style*="repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    .dashboard-panel [style*="display:grid"][style*="1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Freelancer edit drawer */
    #fl-drawer, #na-drawer, #sf-run-drawer {
        width: 100% !important;
    }

    /* Create monitor modal */
    #create-monitor-modal > div,
    #delete-monitor-modal > div,
    #starter-limit-modal > div {
        width: 94% !important;
        max-width: none !important;
    }

    /* Reader pane in workspace mode */
    .reader-pane {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Reader content needs to scroll */
    .reader-content {
        overflow-y: auto !important;
    }

    /* Force button groups to wrap */
    [style*="flex-shrink:0"] {
        flex-shrink: 1 !important;
        flex-wrap: wrap !important;
    }

    /* Island bar text wrap */
    .dashboard-island-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .island-bar-text {
        font-size: 10px !important;
    }

    /* Source Finder detail title */
    .reader-title-compact {
        font-size: 16px !important;
    }
}

/* === Dashboard v2 enhancements === */

/* Overview card icon */
.overview-card-icon {
    font-size: 17px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
/* Overview status bar at bottom of card */
.overview-status {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.overview-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.overview-status-text {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* Panel live badge */
.panel-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--accent);
    text-transform: uppercase;
}
.panel-live-badge::before {
    content: ;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

/* Dashboard activity list items */
.dash-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}
.dash-list-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    min-width: 0;
}
.dash-list-row:last-child { border-bottom: none; }
.dash-bullet {
    color: var(--text-muted);
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 1px;
}
.dash-list-title {
    flex: 1;
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.dash-list-time {
    font-size: 9.5px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Workflow continuity */
.continuity-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    flex: 1;
}
.continuity-card { height: 100%; box-sizing: border-box; }
.continuity-card {
    flex: 1 1 0;
    min-width: 100px;
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    border-radius: 4px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.continuity-card:hover {
    border-color: var(--surface-border-strong);
    background: #161a20;
}
.continuity-card-title {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.continuity-card-meta {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.next-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    flex: 1;
}
.next-action-btn { height: 100%; box-sizing: border-box; }
.next-action-btn {
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    border-radius: 4px;
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
    text-align: left;
}
.next-action-btn:hover {
    border-color: rgba(100,206,155,0.25);
    background: #161a20;
}
.next-action-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.next-action-label i { font-size: 12px; color: var(--text-muted); }
.next-action-detail {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.5;
}


.workspace-home-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}
.workspace-home-shell .dashboard-panel {
    padding: 14px;
    gap: 10px;
}
.workspace-hero {
    align-items: flex-start;
    justify-content: flex-start;
}
.workspace-plan-badge {
    display: none;
    border: 1px solid rgba(113, 207, 156, 0.22);
    background: rgba(113, 207, 156, 0.09);
    color: var(--green-2);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.workspace-panel-subtitle {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    text-transform: none;
}
.workspace-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.workspace-status-card {
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    border-radius: 4px;
    padding: 13px 14px;
    min-height: 132px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    display: grid;
    grid-template-rows: auto auto minmax(34px, auto) auto;
    row-gap: 6px;
    text-align: left;
}
.workspace-status-card-skeleton {
    cursor: default;
    grid-template-rows: auto auto auto auto;
    align-content: start;
}
.workspace-status-card-skeleton:hover {
    border-color: var(--surface-border-soft);
    background: #111419;
}
/* Phase 5H-2B-D: skeleton card geometry — match final card structure */
.workspace-mover-card-skeleton,
.workspace-status-card-skeleton {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 14px;
    background: rgba(255,255,255,0.015);
}
.workspace-mover-card-skeleton .workspace-skeleton-line,
.workspace-status-card-skeleton .workspace-skeleton-line {
    border-radius: 2px;
}
.workspace-status-card:hover,
.workspace-takeaway-card:hover,
.workspace-mover-card:hover,
.workspace-mover-list-row:hover,
.workspace-signal-pack:hover,
.workspace-activity-row:hover {
    border-color: var(--surface-border-strong);
    background: #161a20;
}
.workspace-status-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.workspace-status-value {
    font-size: 22px;
    line-height: 1.2;
    color: var(--text-main);
    font-weight: 700;
}
.workspace-status-detail,
.workspace-status-cta {
    font-size: 12px;
    line-height: 1.5;
}
.workspace-status-detail {
    color: var(--text-muted);
}
.workspace-status-cta,
.workspace-mover-cta,
.workspace-takeaway-cta {
    color: var(--green-2);
    font-weight: 600;
}
.workspace-window-chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.workspace-window-chip {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    color: var(--text-muted);
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 8px;
}
.workspace-movers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.workspace-mover-card,
.workspace-takeaway-card,
.workspace-signal-pack,
.workspace-activity-row {
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    border-radius: 4px;
}
.workspace-mover-card,
.workspace-takeaway-card {
    padding: 14px;
    min-height: 196px;
    text-align: left;
    cursor: pointer;
}
.workspace-mover-card {
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    row-gap: 8px;
}
.workspace-takeaway-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.workspace-mover-meta-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.workspace-mover-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border: 1px solid rgba(113, 207, 156, 0.24);
    background: rgba(113, 207, 156, 0.10);
    color: var(--green-2);
    border-radius: 6px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 10px;
}
.workspace-mover-chip-subtle {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
}
.workspace-mover-title,
.workspace-takeaway-title {
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-main);
    font-weight: 700;
}
.workspace-mover-meta,
.workspace-mover-assets,
.workspace-takeaway-meta,
.workspace-activity-meta {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}
.workspace-mover-summary,
.workspace-takeaway-summary {
    font-size: 12px;
    line-height: 1.65;
    color: var(--text-dim);
}
.workspace-mover-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.workspace-mover-list-row,
.workspace-activity-row {
    width: 100%;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    cursor: pointer;
}
.workspace-mover-list-title,
.workspace-activity-title {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-main);
    font-weight: 600;
}
.workspace-mover-list-main {
    min-width: 0;
}
.workspace-mover-list-meta {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}
.workspace-mover-list-side {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.workspace-mover-list-pills {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.workspace-section-split {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    gap: 10px;
}
.workspace-takeaways-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.workspace-takeaway-card-head {
    min-height: 24px;
}
.workspace-takeaway-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.workspace-takeaway-card-cta {
    margin-top: auto;
    padding-top: 8px;
}
.workspace-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.workspace-mini-stat {
    border: 1px solid var(--surface-border-soft);
    background: rgba(255,255,255,0.015);
    border-radius: 4px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.workspace-mini-stat span {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.workspace-mini-stat strong {
    font-size: 20px;
    color: var(--text-main);
}
.workspace-signal-packs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.workspace-signal-pack {
    padding: 12px 14px;
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}
.workspace-activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.workspace-skeleton-line {
    height: 10px;
    border-radius: 2px;
    background: rgba(255,255,255,0.06);
}
.workspace-skeleton-line-xs { width: 22%; }
.workspace-skeleton-line-sm { width: 32%; }
.workspace-skeleton-line-md { width: 64%; }
.workspace-skeleton-line-lg { width: 88%; }
.workspace-status-card-skeleton .workspace-skeleton-line-sm { width: 38%; }
.workspace-status-card-skeleton .workspace-skeleton-line-md { width: 72%; }
.workspace-status-card-skeleton .workspace-skeleton-line-lg { width: 90%; }
/* Phase 5I-4E: skeleton pill unified to match workspace-skeleton-line token */
.workspace-filter-skeleton-pill {
    display: inline-block;
    width: 38px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.06);
    box-sizing: border-box;
    vertical-align: middle;
}
/* Phase 5I-4F: unified workspace skeleton visual tokens */
:root {
    --workspace-skeleton-bg: rgba(255,255,255,0.06);
    --workspace-skeleton-card-bg: rgba(255,255,255,0.015);
    --workspace-skeleton-border: rgba(255,255,255,0.06);
    --workspace-skeleton-radius: 6px;
    --workspace-skeleton-pill-radius: 999px;
}
.workspace-status-card-skeleton,
.workspace-mover-card-skeleton {
    background: var(--workspace-skeleton-card-bg);
    border: 1px solid var(--workspace-skeleton-border);
    border-radius: var(--workspace-skeleton-radius);
}
.workspace-skeleton-line,
.workspace-status-card-skeleton .workspace-skeleton-line,
.workspace-mover-card-skeleton .workspace-skeleton-line {
    background: var(--workspace-skeleton-bg);
    border-radius: 2px;
}
.workspace-filter-skeleton-pill {
    background: var(--workspace-skeleton-bg);
    border: 1px solid var(--workspace-skeleton-border);
    border-radius: var(--workspace-skeleton-pill-radius);
}
.workspace-mover-list-row:has(.workspace-skeleton-line) {
    background: var(--workspace-skeleton-card-bg);
    border-color: var(--workspace-skeleton-border);
}
/* Phase 5I-4F: news boot reader scaffold matches story-mode geometry (no reader-content padding) */
.reader-content:has([data-news-boot-scaffold="reader"]) {
    padding: 0 !important;
}
@media (max-width: 1400px) {
    .workspace-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .workspace-movers-grid,
    .workspace-takeaways-grid,
    .workspace-signal-packs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 1100px) {
    .workspace-section-split {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 820px) {
    .workspace-status-grid,
    .workspace-movers-grid,
    .workspace-takeaways-grid,
    .workspace-signal-packs,
    .workspace-mini-stats,
    .next-actions-grid {
        grid-template-columns: 1fr;
    }
    .workspace-window-chip-row {
        justify-content: flex-start;
    }
    .workspace-plan-badge {
        align-self: flex-start;
    }
}

/* AI Rail redesign */
.rail-greeting {
    padding: 0;
}
.rail-greeting-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.25;
    margin-bottom: 8px;
}
.rail-greeting-body {
    font-size: 11px;
    line-height: 1.65;
    color: var(--text-dim);
}
.rail-input-wrap {
    margin: 0 10px;
    position: relative;
}
.rail-input-field {
    width: 100%;
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 10px 36px 10px 12px;
    outline: none;
    resize: none;
    min-height: 54px;
    transition: border-color 0.18s;
}
.rail-input-field:focus {
    border-color: var(--border-active);
}
.rail-input-send {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    transition: color 0.15s;
}
.rail-input-send:hover { color: var(--accent); }
.rail-quick-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 14px;
}

.rail-quick-list-inner {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rail-quick-list-inner .rail-quick-item {
    padding: 7px 10px;
    margin: 0;
}
.rail-quick-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 11px;
    color: var(--text-dim);
    cursor: pointer;
    background: rgba(255,255,255,0.03);
    border: none;
    font-family: inherit;
    text-align: left;
    transition: background 0.13s, color 0.13s;
    border-radius: 3px;
    width: 100%;
    margin: 0;
}
.rail-quick-item:hover {
    background: rgba(255,255,255,0.07);
    color: var(--text-main);
}
.rail-quick-item i {
    font-size: 12px;
    color: var(--text-muted);
    width: 14px;
    flex-shrink: 0;
}

.rail-greeting-block {
    padding: 0 14px;
}
.rail-stat-block {
    padding: 14px;
    margin: 0 14px;
    border: 1px solid var(--surface-border-soft);
    background: #111419;
    border-radius: 4px;
}
.rail-stat-block + .rail-stat-block {
    margin-top: 0;
}
.rail-stat-overline {
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.rail-stat-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}
.rail-stat-icon {
    font-size: 13px;
    color: var(--accent);
}
.rail-stat-main {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.rail-stat-check { color: var(--accent); font-size: 12px; }
.rail-stat-sub {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.5;
}
.rail-stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}
.rail-stat-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    min-width: 18px;
}
.rail-stat-label {
    font-size: 11px;
    color: var(--text-dim);
}
.rail-divider {
    height: 0;
    margin: 0;
}

/* Parent group toggle — no highlight when child is active */

/* Custom select for drawer */
.fle-select-wrap {
    position: relative;
}
.fle-select {
    width: 100%;
    padding: 7px 32px 7px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--surface-border-soft);
    border-radius: 3px;
    color: var(--text-main);
    font-size: 11px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.fle-select:focus { border-color: var(--border-active); }
.fle-select-wrap::after {
    content: "\e148";
    font-family: "Phosphor";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-muted);
    pointer-events: none;
}
.fle-input {
    width: 100%;
    padding: 7px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--surface-border-soft);
    border-radius: 3px;
    color: var(--text-main);
    font-size: 11px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.fle-input:focus { border-color: var(--border-active); }
.fle-input[type=number] { font-family: var(--font-mono); }
.fle-textarea {
    width: 100%;
    padding: 7px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--surface-border-soft);
    border-radius: 3px;
    color: var(--text-dim);
    font-size: 9.5px;
    font-family: var(--font-mono);
    outline: none;
    min-height: 48px;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
}
.fle-textarea:focus { border-color: var(--border-active); color: var(--text-main); }
.fle-label { font-size: 10px; color: var(--text-dim); display: block; margin-bottom: 4px; }
.fle-field { margin-bottom: 10px; }
.fle-section {
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent);
    margin: 16px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--surface-border-soft);
}
.fle-section:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.fle-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-dim);
    cursor: pointer;
    margin-bottom: 6px;
}
.fle-check input { accent-color: var(--accent); }
.fle-hint { font-size: 9px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.fle-grp {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--surface-border-soft);
    border-radius: 3px;
    background: rgba(255,255,255,0.015);
}
.fle-grp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.fle-grp-name {
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 10px;
    font-weight: 600;
    outline: none;
    flex: 1;
    font-family: inherit;
}
.fle-grp-del {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.fle-grp-del:hover { opacity: 1; color: var(--red); }

/* Custom dropdown (replaces native select) */
.fle-dropdown {
    position: relative;
    width: 100%;
}
.fle-dropdown-trigger {
    width: 100%;
    padding: 7px 32px 7px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--surface-border-soft);
    border-radius: 3px;
    color: var(--text-main);
    font-size: 11px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: border-color 0.15s;
}
.fle-dropdown-trigger:hover { border-color: var(--surface-border-strong); }
.fle-dropdown-trigger.open { border-color: var(--border-active); }
.fle-dropdown-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-muted);
    pointer-events: none;
}
.fle-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #161a20;
    border: 1px solid var(--surface-border-soft);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}
.fle-dropdown.open .fle-dropdown-menu { display: block; }
.fle-dropdown-item {
    padding: 8px 12px;
    font-size: 11px;
    color: var(--text-dim);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.fle-dropdown-item:hover { background: rgba(255,255,255,0.05); color: var(--text-main); }
.fle-dropdown-item.selected { color: var(--accent); }


/* ── Premium / Billing design system ────────────────────────── */
.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    border: 1px solid var(--gold-border);
    border-radius: 2px;
    background: var(--gold-dim);
    color: var(--gold-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-premium:hover {
    background: rgba(226, 179, 64, 0.15);
    border-color: var(--gold-text);
}
.badge-premium {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border: 1px solid var(--gold-border);
    border-radius: 2px;
    color: var(--gold-text);
    background: var(--gold-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.badge-active {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border: 1px solid var(--accent);
    border-radius: 2px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.badge-inactive {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.premium-card {
    border: 1px solid var(--gold-border) !important;
    background: var(--gold-dim) !important;
}
.premium-price {
    color: var(--gold-text);
    font-weight: 700;
}
.gated-overlay {
    padding: 16px;
    border: 1px solid var(--gold-border);
    border-radius: 4px;
    background: var(--gold-dim);
    text-align: center;
}
.gated-overlay-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-text);
    margin-bottom: 6px;
}
.gated-overlay-body {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Plans nav item - permanent gold background */
.nav-item-premium {
    background: var(--gold-dim) !important;
    border-left: 2px solid var(--gold-border) !important;
}
.nav-item-premium .nav-label {
    color: var(--gold-text) !important;
}
.nav-item-premium i {
    color: var(--gold-text) !important;
}

/* Workspace skeleton loading styles */
.workspace-boot-shell {
    min-height: 60vh;
}
.workspace-skeleton-metrics {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 16px 0 20px;
}
.workspace-skeleton-card {
    min-height: 120px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
    animation: workspace-skeleton-pulse 1.8s ease-in-out infinite;
}
.workspace-skeleton-panel {
    margin-top: 8px;
}
.workspace-skeleton-text {
    height: 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 2px;
    animation: workspace-skeleton-pulse 1.8s ease-in-out infinite;
}
.workspace-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}
.workspace-skeleton-story {
    min-height: 160px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
    animation: workspace-skeleton-pulse 1.8s ease-in-out infinite;
}
@keyframes workspace-skeleton-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.55; }
}
@media (max-width: 900px) {
    .workspace-skeleton-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    .workspace-skeleton-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .workspace-skeleton-metrics {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Phase 4D-1: workspace first-paint grid lock
   Moved from app-shell.html inline <style> (Phase 3C origin).
   Layout authority now belongs to this CSS file.
   DO NOT re-add to any HTML <style> block.
   ============================================================ */

/* Workspace 3-column grid: nav | content | AI-rail
   Active whenever <html class="route-workspace-surface"> is set.
   Provides stable grid BEFORE app3.js runs (first-paint authority). */
html.route-workspace-surface #app-viewport {
    display: grid;
    grid-template-columns: var(--nav-width, 200px) minmax(0, 1fr) var(--rail-width, 320px);
    grid-template-areas: "nav reader stocks";
}

html.route-workspace-surface #app-viewport.rail-hidden-mode,
html.route-workspace-surface #app-viewport.full-page-mode,
html.route-workspace-surface #app-viewport.admin-mode {
    grid-template-columns: var(--nav-width, 200px) minmax(0, 1fr);
    grid-template-areas: "nav reader";
}

/* During app-booting: collapse to single-column reader-only view.
   Only applies when no static workspace shell is present (non-workspace routes via news.html).
   workspace/index.html has body.workspace-shell which keeps the 3-column layout. */
html.route-workspace-surface body.app-booting:not(.workspace-shell) #app-viewport {
    grid-template-columns: 1fr !important;
    grid-template-areas: "reader" !important;
}
/* When workspace shell is present: restore full 3-column layout during app-booting.
   Ensures nav + content + AI rail are all visible from first frame. */
html.route-workspace-surface body.app-booting.workspace-shell #app-viewport {
    grid-template-columns: var(--nav-width, 200px) minmax(0, 1fr) var(--rail-width, 300px) !important;
    grid-template-areas: "nav reader stocks" !important;
}

/* During app-booting: hide all panes except reader.
   Prevents flash of unstyled sidebar / rail before JS initialises. */
html.route-workspace-surface .news-pane,
html.route-workspace-surface #reader-header-area {
    display: none !important;
}

html.route-workspace-surface body.app-booting .stocks-pane {
    display: flex !important;
}
/* ============================================================ */


.workspace-status-card,
.workspace-mover-card,
.workspace-mover-list-row,
.workspace-takeaway-card,
.workspace-signal-pack,
.workspace-activity-row,
.next-action-btn {
    appearance: none;
    -webkit-appearance: none;
}
.workspace-mover-list-row {
    border: 1px solid rgba(255,255,255,0.08);
    background: #101519;
    border-radius: 4px;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.workspace-mover-list-row:hover {
    border-color: rgba(255,255,255,0.12);
    background: #14191d;
    transform: translateY(-1px);
}
.workspace-list-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: 6px;
    padding: 0 10px;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--text-main);
}
.workspace-mover-chip-critical,
.workspace-list-pill.workspace-mover-chip-critical {
    border-color: rgba(255,205,102,0.32);
    background: rgba(255,205,102,0.10);
    color: #ffd46b;
}
.workspace-panel-refreshing .workspace-movers-grid,
.workspace-panel-refreshing .workspace-mover-list {
    opacity: 0.76;
    transition: opacity 0.16s ease;
}
.workspace-activity-list { display:none; }

/* ── Phase 5E-N3 ─────────────────────────────────────────────────────────── */

/* N3-D: hide Live feed large banner — replaced by inline compact meta if needed */
.news-alert-box { display: none !important; }

/* N3-E: news mode segmented control */
.news-mode-seg {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 2px;
    gap: 0;
}
.news-mode-seg .header-btn {
    height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

/* ── Phase 5E-N3R ───────────────────────────────────────────────────────────── */

/* N3R-E1: segmented control active state — Catalayer mint green */
.news-mode-seg .header-btn.seg-active {
    background: rgba(100,206,155,0.18);
    color: var(--accent);
    font-weight: 600;
}
.news-mode-seg .header-btn:not(.seg-active) {
    background: transparent;
    color: var(--text-dim);
    font-weight: 400;
}

/* ── Phase 5F-2R + 5F-3A ──────────────────────────────────────────────────── */

/* 5F2R-B: search container focus — replace green underline with subtle glow */
.news-pane .search-wrap:focus-within {
    background: rgba(100,206,155,0.05);
    border-radius: 4px;
    outline: 1px solid rgba(100,206,155,0.25);
    outline-offset: 1px;
}

/* 5F3A-A: news feed fade on mode switch (opacity driven by JS) */
#news-feed-root {
    will-change: opacity;
}

/* 5F3A-C: reader body paragraph spacing */
.reader-body {
    font-size: 13px;
    line-height: 1.75;
    color: var(--text-dim);
    max-width: 680px;
}
.reader-body br + br {
    display: block;
    content: '';
    margin-top: 6px;
}

/* 5F3A-C: show/collapse source body toggle */
.story-body-toggle {
    display: block;
    margin-top: 14px;
    font-size: 10px;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--surface-border-soft);
    border-radius: 3px;
    padding: 4px 12px;
    cursor: pointer;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    transition: color 0.12s, border-color 0.12s;
}
.story-body-toggle:hover {
    color: var(--accent);
    border-color: rgba(100,206,155,0.4);
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* Phase 5I-4G: final workspace loading visual unification                    */
/* Placed at end of file to win cascade over all earlier workspace rules.     */
/* ─────────────────────────────────────────────────────────────────────────── */
:root {
    --workspace-loading-card-bg: rgba(255,255,255,0.018);
    --workspace-loading-line-bg: rgba(255,255,255,0.06);
    --workspace-loading-border: rgba(255,255,255,0.065);
    --workspace-loading-card-radius: 6px;
    --workspace-loading-pill-radius: 999px;
}

.workspace-status-card-skeleton,
.workspace-mover-card-skeleton,
.workspace-mover-list-row:has(.workspace-skeleton-line) {
    background: var(--workspace-loading-card-bg);
    border: 1px solid var(--workspace-loading-border);
    border-radius: var(--workspace-loading-card-radius);
}

.workspace-status-card-skeleton .workspace-skeleton-line,
.workspace-mover-card-skeleton .workspace-skeleton-line,
.workspace-mover-list-row:has(.workspace-skeleton-line) .workspace-skeleton-line,
.workspace-skeleton-line {
    background: var(--workspace-loading-line-bg);
    border-radius: 2px;
}

.workspace-filter-skeleton-pill {
    background: var(--workspace-loading-line-bg);
    border: 1px solid var(--workspace-loading-border);
    border-radius: var(--workspace-loading-pill-radius);
}

/* Phase 5I-4G: news boot reader scaffold geometry */
.reader-content:has([data-news-boot-scaffold="reader"]) {
    padding: 0 !important;
}

[data-news-boot-scaffold="reader"] {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

[data-news-boot-scaffold="reader"] .reader-scroll-area {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding-top: 24px;
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 5I-4H: workspace loading skeleton final fix                          */
/* :has() selectors → specificity (0,2,0), beats all single-class base rules  */
/* ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --workspace-loading-card-bg-final: rgba(255,255,255,0.018);
    --workspace-loading-line-bg-final: rgba(255,255,255,0.06);
    --workspace-loading-border-final: rgba(255,255,255,0.065);
    --workspace-loading-card-radius-final: 6px;
    --workspace-loading-chip-radius-final: 3px;
}

/* Top status cards + mover cards + list rows: unified loading surface */
.workspace-status-card:has(.workspace-skeleton-line),
.workspace-status-card-skeleton,
.workspace-mover-card:has(.workspace-skeleton-line),
.workspace-mover-card-skeleton,
.workspace-mover-list-row:has(.workspace-skeleton-line) {
    background: var(--workspace-loading-card-bg-final);
    border: 1px solid var(--workspace-loading-border-final);
    border-radius: var(--workspace-loading-card-radius-final);
}

/* Unified skeleton line brightness across all loading cards */
.workspace-status-card:has(.workspace-skeleton-line) .workspace-skeleton-line,
.workspace-status-card-skeleton .workspace-skeleton-line,
.workspace-mover-card:has(.workspace-skeleton-line) .workspace-skeleton-line,
.workspace-mover-card-skeleton .workspace-skeleton-line,
.workspace-mover-list-row:has(.workspace-skeleton-line) .workspace-skeleton-line,
.workspace-skeleton-line {
    background: var(--workspace-loading-line-bg-final);
    border-radius: 2px;
}

/* Time filter loading pill: match final chip geometry (not capsule) */
.workspace-filter-skeleton-pill {
    display: inline-block;
    width: 34px;
    height: 24px;
    border-radius: var(--workspace-loading-chip-radius-final);
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    box-sizing: border-box;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 5I-4I: explicit workspace-loading-surface class — !important final   */
/* Bypasses all cascade issues. Applied directly to DOM elements via class.   */
/* ═══════════════════════════════════════════════════════════════════════════ */
.workspace-loading-surface {
    background: #141820 !important;
    border: 1px solid rgba(255,255,255,0.065) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

.workspace-loading-surface .workspace-skeleton-line {
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
}

/* Time filter loading pill: match chip geometry, not capsule */
.workspace-filter-skeleton-pill {
    display: inline-block;
    width: 34px;
    height: 24px;
    border-radius: 3px !important;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    box-sizing: border-box;
    vertical-align: middle;
}

/* Phase 5I-4I icon+height fix: hide status card icons during loading; normalize skeleton card height */
.workspace-loading-surface .overview-card-icon {
    display: none;
}
.workspace-loading-surface {
    min-height: unset !important;
}

/* ── Monitor v2 M3A: cockpit shell classes ─────────────────────────────────── */
/* phase-monitor-v2-m3a-r2-workspace-parity-20260525 */

.monitor-cockpit {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.monitor-hero {
    margin-bottom: 4px;
}

.monitor-metric-grid {
    /* Inherits overview-grid — no override needed */
}

.monitor-alert-list .dashboard-panel-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.monitor-card-grid .dashboard-panel-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.monitor-pack-grid {
    /* 4-col grid set inline for flexibility */
}

@media (max-width: 900px) {
    .monitor-pack-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .monitor-metric-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .monitor-pack-grid {
        grid-template-columns: 1fr !important;
    }
    .monitor-metric-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.monitor-coverage .dashboard-panel-head {
    margin-bottom: 0;
}

.monitor-intelligence {
    /* rail scroll content — no structural override needed */
}

/* M3A boot metric classes removed in M4D (replaced by workspace-status-card skeleton) */

.monitor-data-list,
.monitor-card-grid-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.monitor-data-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--surface-border-soft);
    border-radius: 4px;
    background: rgba(255,255,255,0.015);
}

.monitor-data-row-copy {
    flex: 1;
    min-width: 0;
}

.monitor-data-row-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.5;
    margin-bottom: 4px;
}

.monitor-data-row-meta,
.monitor-rail-note {
    font-size: 10px;
    color: var(--text-dim);
    line-height: 1.6;
}

.monitor-compact-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.monitor-compact-badge-live {
    color: var(--accent);
    border-color: var(--accent);
}

/* ── end Monitor v2 M3A ──────────────────────────────────────────────────── */


.monitor-hero {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:4px;
}
.monitor-hero h1 {
    font-size:18px;
    font-weight:700;
    color:var(--text-main);
    margin:4px 0 6px;
}
.monitor-hero-copy,
.monitor-section-subtitle,
.monitor-coverage-copy,
.monitor-pack-copy,
.monitor-builder-copy,
.monitor-builder-summary-copy,
.monitor-preview-copy,
.monitor-pack-status {
    font-size:10px;
    color:var(--text-dim);
    line-height:1.6;
}
.monitor-hero-actions {
    display:flex;
    gap:6px;
    flex-shrink:0;
    padding-top:4px;
}
.monitor-metric-grid {
    grid-template-columns:repeat(6,1fr) !important;
    gap:10px;
}
.monitor-cockpit .dashboard-panel,
.monitor-cockpit .overview-card {
    border-radius:6px;
}
.monitor-empty-card {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:18px;
    border:1px solid var(--surface-border-soft);
    border-radius:6px;
    background:rgba(255,255,255,0.014);
}
.monitor-empty-icon {
    width:26px;
    height:26px;
    border-radius:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,0.08);
    color:var(--accent);
    background:rgba(100,206,155,0.06);
}
.mon-panel-empty-title {
    font-size:13px;
    font-weight:600;
    color:var(--text-main);
}
.monitor-empty-copy {
    font-size:11px;
    line-height:1.7;
    color:var(--text-dim);
}
.monitor-empty-actions,
.monitor-empty-chip-row,
.monitor-coverage-chip-row,
.monitor-ui-modal-actions,
.monitor-ui-modal-actions-right,
.monitor-threshold-group {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.monitor-data-row {
    align-items:center;
    border-radius:6px;
    padding:12px;
    background:rgba(255,255,255,0.018);
    transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.monitor-data-row:hover,
.monitor-pack-card:hover,
.monitor-builder-card:hover {
    border-color:rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.03);
}
.monitor-pack-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}
.monitor-pack-card,
.monitor-builder-card {
    text-align:left;
    padding:14px;
    border:1px solid var(--surface-border-soft);
    border-radius:6px;
    background:rgba(255,255,255,0.014);
    transition:border-color .18s ease, background .18s ease, transform .18s ease;
    cursor:pointer;
}
.monitor-pack-card.is-active,
.monitor-builder-card.is-active,
.monitor-threshold-btn.is-active,
.monitor-builder-chip.is-active {
    border-color:rgba(100,206,155,0.35);
    background:rgba(100,206,155,0.08);
    color:var(--accent);
}
.monitor-pack-title-row {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
}
.monitor-pack-title,
.monitor-builder-title,
.monitor-preview-label {
    font-size:11px;
    font-weight:600;
    color:var(--text-main);
}
.monitor-pack-action {
    margin-top:12px;
    font-size:10px;
    color:var(--accent);
    font-weight:600;
}
.monitor-ui-modal-overlay {
    position:fixed;
    inset:0;
    z-index:10020;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.72);
    padding:18px;
}
.monitor-ui-modal {
    width:min(680px,100%);
    max-height:min(84vh,820px);
    overflow:auto;
    background:#11161c;
    border:1px solid var(--surface-border-soft);
    border-radius:8px;
    box-shadow:0 30px 80px rgba(0,0,0,0.45);
    padding:18px;
}
.monitor-ui-modal-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
}
.monitor-ui-modal-head h2 {
    margin:4px 0 0;
    font-size:18px;
    color:var(--text-main);
}
.monitor-ui-modal-close {
    appearance:none;
    border:0;
    background:transparent;
    color:var(--text-dim);
    font-size:22px;
    line-height:1;
    cursor:pointer;
}
.monitor-ui-modal-body {
    display:flex;
    flex-direction:column;
    gap:14px;
}
.monitor-builder-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.monitor-builder-step-note {
    font-size:11px;
    color:var(--text-muted);
    line-height:1.7;
}
.monitor-builder-summary {
    display:flex;
    align-items:flex-start;
    gap:10px;
}
.monitor-builder-field {
    display:flex;
    flex-direction:column;
    gap:6px;
}
.monitor-builder-field span {
    font-size:10px;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.08em;
}
.monitor-builder-field input,
.monitor-builder-field textarea {
    width:100%;
    border:1px solid var(--surface-border-soft);
    border-radius:6px;
    background:rgba(255,255,255,0.02);
    color:var(--text-main);
    padding:10px 12px;
    font:inherit;
}
.monitor-builder-field textarea {
    min-height:100px;
    resize:vertical;
}
.monitor-threshold-btn,
.monitor-builder-chip {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:6px 10px;
    border:1px solid var(--surface-border-soft);
    border-radius:6px;
    background:rgba(255,255,255,0.02);
    color:var(--text-dim);
    font-size:10px;
}
.monitor-threshold-btn {
    cursor:pointer;
}
.monitor-threshold-btn.is-disabled,
.btn-stripe.is-disabled {
    opacity:.45;
    pointer-events:none;
}
.monitor-preview-section {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:12px;
    border:1px solid var(--surface-border-soft);
    border-radius:6px;
    background:rgba(255,255,255,0.014);
}
.monitor-section-highlight {
    border-color:rgba(100,206,155,0.35) !important;
    box-shadow:0 0 0 1px rgba(100,206,155,0.18) inset, 0 0 0 1px rgba(100,206,155,0.12);
}
.monitor-rail-loading {
    text-align:left;
    padding:0;
}
@media (max-width: 900px) {
    .monitor-hero,
    .monitor-ui-modal-actions {
        flex-direction:column;
        align-items:stretch;
    }
    .monitor-pack-grid,
    .monitor-builder-grid,
    .monitor-metric-grid {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}
@media (max-width: 640px) {
    .monitor-pack-grid,
    .monitor-builder-grid,
    .monitor-metric-grid {
        grid-template-columns:1fr !important;
    }
}


/* phase-monitor-v2-m4b-functional-loop-20260525 */
.mon-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1.4;
}
.monitor-empty-state {
    padding: 28px 24px;
    text-align: center;
}
.monitor-item-card {
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    transition: border-color 0.15s;
}
.monitor-item-card:hover {
    border-color: rgba(255,255,255,0.14);
}
.monitor-alert-card {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.monitor-alert-card:last-child {
    border-bottom: none;
}
.monitor-pack-card.enabled {
    border-color: var(--accent);
    background: rgba(100,206,155,0.04);
}
.mon-card-btn {
    font-size: 9px;
    padding: 4px 10px;
}
.mon-btn-danger {
    color: var(--red);
    border-color: var(--red) !important;
}
.mon-btn-danger:hover {
    background: rgba(239,91,91,0.08);
    border-color: var(--red) !important;
    color: var(--red) !important;
}
@media (max-width: 900px) {
    .monitor-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .monitor-card-grid { grid-template-columns: 1fr !important; }
}


/* ── M4C: Monitor v2 Visual & Interaction Polish ── phase-monitor-v2-m4c-visual-interaction-polish-20260525 */

/* ── Hero ── */
.mon-page-title { font-size:22px; font-weight:700; color:var(--text-main); margin:0 0 4px 0; }
.mon-page-sub { font-size:13px; color:var(--text-muted); margin:0 0 18px 0; }
.mon-hero-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:3px; font-size:12px; font-weight:600; cursor:pointer; text-decoration:none; }
.mon-scan-btn { }

/* ── Monitor cards ── */
.mon-card-paused { opacity:.6; }
.mon-badge-active { display:inline-block; font-size:9px; padding:2px 7px; border-radius:3px; font-weight:700; background:rgba(100,206,155,.15); color:#64ce9b; letter-spacing:.04em; }
.mon-badge-paused { display:inline-block; font-size:9px; padding:2px 7px; border-radius:3px; font-weight:700; background:rgba(160,160,170,.15); color:var(--text-muted); letter-spacing:.04em; }
.mon-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:6px; }
.mon-card-name-block { flex:1; min-width:0; }
.mon-card-name { font-size:13px; font-weight:600; color:var(--text-main); margin-bottom:3px; }
.mon-card-type-row { display:flex; gap:4px; flex-wrap:wrap; }
.mon-type-chip { display:inline-block; font-size:9px; font-weight:700; padding:1px 6px; border-radius:3px; text-transform:uppercase; letter-spacing:.04em; background:rgba(100,206,155,.1); color:var(--accent); border:1px solid rgba(100,206,155,.2); }
.mon-preview-chip { display:inline-block; font-size:9px; color:var(--text-muted); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:3px; padding:1px 5px; }
.mon-kw-row { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0; }
.mon-kw-chip { font-size:10px; padding:2px 7px; border-radius:3px; background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text-muted); }
.mon-kw-more { font-size:10px; color:var(--text-muted); padding:2px 4px; }
.mon-card-meta-row { display:flex; gap:8px; font-size:11px; color:var(--text-muted); margin:4px 0 2px; flex-wrap:wrap; align-items:center; }
.mon-meta-item { display:flex; align-items:center; gap:3px; }
.mon-meta-label { font-size:9px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.mon-meta-val { font-size:11px; color:var(--text-main); }
.mon-meta-sep { color:var(--border); }
.mon-card-scan-row { font-size:10px; color:var(--text-muted); margin-bottom:4px; }
.mon-card-divider { border:none; border-top:1px solid var(--border); margin:8px 0; }
.mon-card-actions { display:flex; gap:6px; flex-wrap:wrap; }
.mon-section-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin:0 0 10px; }

/* ── Signal Packs ── */
.mon-pack-header { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.mon-pack-name { font-size:13px; font-weight:600; color:var(--text-main); margin-bottom:3px; }
.mon-pack-cat { display:inline-block; font-size:9px; font-weight:700; padding:2px 7px; border-radius:3px; text-transform:uppercase; letter-spacing:.04em; border:1px solid; }
.mon-pack-desc { font-size:11px; color:var(--text-muted); margin:3px 0 6px; line-height:1.45; }
.mon-pack-rules-row { font-size:10px; color:var(--text-muted); margin-bottom:8px; display:flex; align-items:center; gap:4px; }
.mon-pack-actions { display:flex; gap:6px; }

/* ── Scan summary ── */
.mon-scan-summary { display:flex; align-items:center; gap:20px; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:4px; padding:10px 14px; margin-bottom:10px; flex-wrap:wrap; }
.mon-scan-stat { display:flex; flex-direction:column; gap:2px; }
.mon-scan-stat-label { font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
.mon-scan-stat-val { font-size:13px; font-weight:700; color:var(--text-main); }
.mon-scan-stat-val.mon-stat-accent { color:var(--accent); }
.mon-scan-cta { margin-left:auto; }
@media (max-width:600px) { .mon-scan-cta { margin-left:0; } }

/* ── Alert rows ── */
.mon-alert-row { display:flex; align-items:flex-start; gap:10px; }
.mon-alert-body { flex:1; min-width:0; }
.mon-alert-title { font-size:12px; font-weight:600; color:var(--text-main); margin-bottom:2px; }
.mon-alert-meta { font-size:10px; color:var(--text-muted); margin-bottom:3px; }
.mon-alert-time { font-size:10px; color:var(--text-muted); }
.mon-alert-actions { display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.mon-card-reviewed { opacity:.5; }
.mon-count-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; font-size:10px; font-weight:700; border-radius:9px; padding:0 5px; }
.mon-impact-badge { display:inline-block; font-size:9px; font-weight:700; padding:2px 7px; border-radius:3px; text-transform:uppercase; letter-spacing:.04em; color:#fff; flex-shrink:0; margin-top:2px; }
.mon-reviewed-label { font-size:10px; color:var(--text-muted); font-style:italic; }

/* ── Empty states ── */
.mon-empty-icon { font-size:28px; margin-bottom:6px; opacity:.4; }
.mon-empty-title { font-size:13px; font-weight:600; color:var(--text-main); margin-bottom:3px; }
.mon-empty-desc { font-size:11px; color:var(--text-muted); margin-bottom:10px; line-height:1.5; }
.mon-empty-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* ── Legacy coverage metrics ── */
.mon-coverage-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.mon-coverage-stat { display:flex; flex-direction:column; align-items:center; text-align:center; padding:10px 6px; background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:4px; }
.mon-cov-val { font-size:20px; font-weight:700; color:var(--text-main); line-height:1; margin-bottom:3px; }
.mon-cov-label { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; gap:3px; }
.mon-coverage-note { grid-column:1/-1; background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:4px; padding:10px 12px; margin-top:4px; }
.mon-cov-note-head { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:4px; }
.mon-cov-note-body { font-size:11px; color:var(--text-muted); line-height:1.5; }

/* ── Create Monitor Modal ── */
.mon-modal-box { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999; background:#111419; border:1px solid var(--border); border-radius:4px; width:min(480px,94vw); max-height:86vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,.5); }
.mon-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 0; }
.mon-modal-title { font-size:14px; font-weight:700; color:var(--text-main); }
.mon-modal-close { background:none; border:none; color:var(--text-muted); font-size:18px; cursor:pointer; padding:0 2px; line-height:1; }
.mon-modal-close:hover { color:var(--text-main); }
/* M4N: static preboot skeleton — CSS-controlled, zero JS paint gap */
.mon-boot-static { display:none; }
html.preboot-monitor-route .mon-boot-static { display:block; }
.mon-modal-step-hint { font-size:10px; color:var(--text-muted); padding:4px 18px 0; }
.mon-modal-desc { font-size:11px; color:var(--text-muted); padding:8px 18px 0; line-height:1.5; }
.mon-modal-section { padding:12px 18px 0; }
.mon-modal-section-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:8px; }
.mon-modal-footer { display:flex; gap:8px; justify-content:flex-end; padding:12px 18px 14px; border-top:1px solid var(--border); margin-top:12px; }
.mon-type-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.mon-type-tile { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:4px; padding:10px 12px; cursor:pointer; transition:border-color .15s; }
.mon-type-tile:hover, .mon-type-tile.selected { border-color:var(--accent); }
.mon-type-tile .tile-name { font-size:12px; font-weight:600; color:var(--text-main); margin-bottom:2px; }
.mon-type-tile .tile-desc { font-size:10px; color:var(--text-muted); }
.mon-form-field { margin-bottom:12px; }
.mon-field-label { display:block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:5px; }
.mon-text-input { width:100%; padding:7px 10px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:3px; color:var(--text-main); font-size:12px; box-sizing:border-box; font-family:inherit; }
.mon-text-input:focus { border-color:var(--accent); outline:none; }
.mon-thresh-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mon-thresh-btn { padding:4px 10px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:3px; color:var(--text-muted); cursor:pointer; font-size:11px; font-family:inherit; }
.mon-thresh-btn:hover { border-color:var(--accent); color:var(--text-main); }
.mon-thresh-btn.active { background:rgba(100,206,155,.15); border-color:rgba(100,206,155,.4); color:var(--accent); }
.mon-form-err { font-size:10px; color:var(--red); margin-top:3px; display:none; }

/* ── Detail drawer ── */
.mon-detail-drawer { position:fixed; top:0; right:0; height:100vh; width:min(380px,95vw); background:#111419; border-left:1px solid var(--border); z-index:9998; overflow-y:auto; box-shadow:-4px 0 24px rgba(0,0,0,.4); display:flex; flex-direction:column; }
.mon-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.mon-drawer-title { font-size:14px; font-weight:700; color:var(--text-main); }
.mon-drawer-body { flex:1; padding:16px 18px; overflow-y:auto; }
.mon-drawer-section { margin-bottom:16px; }
.mon-drawer-footer { padding:12px 18px; border-top:1px solid var(--border); display:flex; gap:8px; flex-shrink:0; }
.mon-drawer-btn { padding:6px 14px; font-size:11px; border-radius:3px; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-dim); font-family:inherit; }
.mon-drawer-btn:hover { border-color:var(--accent); color:var(--accent); }
.mon-drawer-note { font-size:10px; color:var(--text-muted); font-style:italic; margin-top:6px; }

/* ── Loading ── */
.mon-loading-row { display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:12px; padding:20px 0; }

/* ── Delete confirm ── */
.mon-delete-confirm-btn { padding:6px 14px; background:var(--red); border:1px solid var(--red); border-radius:3px; color:#fff; cursor:pointer; font-size:11px; font-family:inherit; }
.mon-delete-confirm-btn:hover { opacity:.85; }

/* ── Threshold chip ── */
.mon-threshold-chip { display:inline-block; font-size:9px; padding:1px 6px; border-radius:3px; background:rgba(100,206,155,.1); color:var(--accent); border:1px solid rgba(100,206,155,.2); }

/* ── Responsive ── */
@media (max-width:900px) {
    .mon-type-grid { grid-template-columns:1fr; }
    .mon-coverage-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:600px) {
    .mon-coverage-grid { grid-template-columns:repeat(2,1fr); }
    .mon-scan-summary { flex-direction:column; gap:8px; }
}

/* ── M4D: Workspace Parity additions ── */
/* 5-column status grid for Monitor (workspace-status-grid is 4-col) */
.mon-status-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    .mon-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .mon-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* phase-monitor-v2-m4f-monitor-ia-layout-repair-20260525 */
.monitor-cockpit{gap:12px;padding-bottom:28px;width:100%;align-self:stretch}
.monitor-hero{padding-bottom:2px;width:100%;max-width:none}
.monitor-cockpit .workspace-status-grid,.monitor-metric-grid{width:100%;align-self:stretch;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:0}
.monitor-metric-card{cursor:pointer;text-align:left;min-height:132px}
.monitor-metric-card.is-disabled{opacity:.74;cursor:not-allowed}
.monitor-section-subtitle{font-size:12px;color:var(--text-muted);margin-top:6px;line-height:1.55}
.monitor-card-grid-stack,.monitor-data-list{display:grid;gap:10px}
.monitor-item-card,.monitor-data-row,.monitor-empty-card,.monitor-scan-banner,.monitor-builder-inline-shell,.monitor-builder-config-shell{border:1px solid var(--surface-border-soft);border-radius:4px;background:#111419}
.monitor-item-card{padding:14px}
.monitor-row-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.monitor-row-title{font-size:13px;font-weight:600;line-height:1.45;color:var(--text-main)}
.monitor-row-badges,.monitor-chip-row,.monitor-row-actions,.monitor-pack-action-row,.mon-pack-cat-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.monitor-card-summary{font-size:11px;line-height:1.6;color:var(--text-dim);margin-top:8px}
.monitor-row-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:10px;color:var(--text-muted);margin-top:10px}
.monitor-row-actions{margin-top:12px}
.monitor-compact-badge{display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:0 9px;border-radius:3px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.monitor-compact-badge.is-active{border-color:rgba(100,206,155,.24);color:var(--accent);background:rgba(100,206,155,.08)}
.monitor-empty-card{padding:22px 20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;justify-content:center;min-height:172px}
.monitor-empty-card.compact{min-height:136px}
.monitor-empty-icon{width:34px;height:34px;border-radius:4px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);color:var(--text-muted)}
.mon-panel-empty-title{font-size:15px;font-weight:700;color:var(--text-main);line-height:1.35}
.mon-panel-empty-desc{font-size:12px;line-height:1.7;color:var(--text-muted);max-width:620px}
.monitor-empty-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.monitor-scan-banner{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:14px;margin-bottom:10px;align-items:center}
.monitor-scan-banner-stat{display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--text-muted)}
.monitor-scan-banner-stat .label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.monitor-scan-banner-stat strong{font-size:13px;color:var(--text-main)}
.monitor-scan-banner-action{display:flex;justify-content:flex-end}
.monitor-data-row{padding:12px 14px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;transition:border-color .18s ease,background .18s ease}
.monitor-data-row:hover,.monitor-builder-card:hover{border-color:rgba(255,255,255,.14);background:#161a20}
.monitor-data-row.is-muted{opacity:.72}
.monitor-data-row-title{font-size:12px;font-weight:600;color:var(--text-main);line-height:1.45}
.monitor-data-row-meta{font-size:10px;color:var(--text-muted);line-height:1.65;margin-top:4px}
.monitor-results-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.monitor-results-panel{height:100%}
.monitor-ui-modal-overlay{position:fixed;inset:0;z-index:9999;background:rgba(5,7,10,.78);display:flex;align-items:center;justify-content:center;padding:24px}
.monitor-ui-modal{width:min(860px,100%);background:#111419;border:1px solid var(--surface-border-soft);border-radius:8px;padding:18px 18px 16px;box-shadow:0 30px 80px rgba(0,0,0,.44)}
.monitor-ui-modal-wide{max-width:860px}
.monitor-ui-modal-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}
.monitor-ui-modal-head h3{margin:0;font-size:20px;line-height:1.2;color:var(--text-main)}
.monitor-ui-close{border:0;background:transparent;color:var(--text-dim);font-size:24px;line-height:1;cursor:pointer}
.monitor-ui-modal-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:16px}
.monitor-builder-step-note{font-size:11px;color:var(--text-muted);line-height:1.65;margin-top:4px}
.monitor-builder-grid-start,.monitor-builder-grid-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.monitor-builder-grid{display:grid;gap:12px;grid-template-columns:1fr}
.monitor-builder-card{border:1px solid var(--surface-border-soft);border-radius:4px;background:#111419;padding:14px;text-align:left;cursor:pointer;transition:border-color .18s ease,background-color .18s ease}
.monitor-builder-card.is-active{border-color:rgba(100,206,155,.24);background:rgba(100,206,155,.08)}
.monitor-builder-card-title{font-size:13px;font-weight:700;color:var(--text-main);margin-bottom:6px}
.monitor-builder-card-copy{font-size:11px;line-height:1.6;color:var(--text-dim)}
.monitor-builder-inline-shell,.monitor-builder-config-shell{padding:14px;margin-top:12px}
.monitor-builder-inline-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.monitor-builder-inline-title{font-size:13px;font-weight:700;color:var(--text-main)}
.monitor-pack-grid-inline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.monitor-builder-field{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--text-muted)}
.monitor-builder-field input,.monitor-builder-field textarea{width:100%;border-radius:4px;border:1px solid var(--surface-border-soft);background:rgba(255,255,255,.02);color:var(--text-main);padding:10px 12px;font:inherit}
.monitor-builder-field textarea{min-height:96px;resize:vertical}
.monitor-threshold-row{display:flex;gap:8px;flex-wrap:wrap}
.monitor-threshold-btn{border-radius:3px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);color:var(--text-dim);padding:8px 12px;font-size:10px;font-weight:700;cursor:pointer}
.monitor-threshold-btn.is-active{border-color:rgba(100,206,155,.24);background:rgba(100,206,155,.08);color:var(--accent)}
.monitor-preview-section{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid rgba(255,255,255,.05)}
.monitor-preview-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.monitor-preview-value{font-size:15px;font-weight:700;color:var(--text-main)}
.monitor-preview-copy{font-size:11px;line-height:1.65;color:var(--text-muted)}
.monitor-preview-chip{display:inline-flex;align-items:center;gap:6px;border-radius:3px;padding:4px 8px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(100,206,155,.1);border:1px solid rgba(100,206,155,.2);color:var(--accent)}
.monitor-section-highlight{box-shadow:0 0 0 1px rgba(100,206,155,.18) inset}
.monitor-hero-shell-inline,.monitor-boot-panel-inline{animation:none}
.monitor-boot-metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.monitor-boot-metric{min-height:132px}
.monitor-boot-panel{min-height:158px}
.monitor-rail-layout{display:grid;gap:10px}
.monitor-rail-card{padding:14px;border-radius:4px}
.monitor-rail-card-loading{min-height:124px}
.monitor-rail-loading .workspace-skeleton-line{margin-bottom:8px}
.monitor-rail-card .stocks-pane-card-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px}
.monitor-rail-card .stocks-pane-card-value{font-size:12px;line-height:1.65;color:var(--text-dim)}
.mon-inline-link{padding:0;border:0;background:transparent;color:var(--accent);font-size:11px;font-weight:600}
@media (max-width:1200px){.monitor-metric-grid,.monitor-boot-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.monitor-scan-banner{grid-template-columns:repeat(2,minmax(0,1fr))}.monitor-builder-grid-start,.monitor-builder-grid-types,.monitor-pack-grid-inline,.monitor-results-grid{grid-template-columns:1fr}}
@media (max-width:720px){.monitor-metric-grid,.monitor-boot-metric-grid{grid-template-columns:1fr}.monitor-scan-banner{grid-template-columns:1fr}.monitor-data-row,.monitor-row-head,.monitor-builder-inline-head{flex-direction:column}.monitor-ui-modal{padding:18px}}

/* phase-monitor-v2-m4g-workspace-component-parity-20260525 */

/* Fix: override M3A's !important 6-col with correct 4-col for metric grid */
.monitor-metric-grid,
.monitor-boot-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px; }

/* Compact empty state — replaces monitor-empty-card in My Monitors */
.mon-panel-empty {
    min-height: 160px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px;
    border: 1px solid var(--surface-border-soft);
    border-radius: 6px;
    background: rgba(255,255,255,0.012);
}
.mon-panel-empty-icon {
    font-size: 18px;
    color: var(--text-muted);
    opacity: 0.55;
    margin-bottom: 2px;
}
.mon-panel-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.4;
}
.mon-panel-empty-desc {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.6;
}

/* Selected pack/type summary in create modal — collapsed state */
.monitor-selected-summary {
    background: rgba(100,206,155,0.05);
    border-color: rgba(100,206,155,0.2) !important;
}

/* Monitor item card improvements */
.monitor-item-card {
    padding: 14px 16px;
    background: rgba(255,255,255,0.016);
    border: 1px solid var(--surface-border-soft);
    border-radius: 6px;
    transition: border-color 0.15s;
}
.monitor-item-card:hover { border-color: rgba(255,255,255,0.14); }
.monitor-row-main { display: flex; flex-direction: column; gap: 0; }

/* Mon card btn sizing parity with Workspace */
.mon-card-btn { font-size: 10px; padding: 5px 11px; min-height: 26px; }

/* Results grid responsive fix */
@media (max-width: 900px) {
    .monitor-results-grid { grid-template-columns: 1fr; }
    .monitor-metric-grid, .monitor-boot-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
    .monitor-metric-grid, .monitor-boot-metric-grid { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}

/* phase-monitor-v2-m4j-runtime-visual-root-cause-20260525 */

/* Scan strip — full-width strip above results grid */
.mon-scan-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border: 1px solid var(--surface-border-soft);
    border-radius: 4px;
    background: rgba(255,255,255,0.018);
}
.mon-scan-strip-skel {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.mon-scan-strip-stats {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
}
.mon-scan-stat { display: flex; flex-direction: column; gap: 3px; }
.mon-scan-stat-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    white-space: nowrap;
}
.mon-scan-stat-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
}

/* My Monitors panel header add button */
.mon-panel-add-btn {
    font-size: 11px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Monitor item card compact — match Workspace card density */
.monitor-item-card {
    padding: 13px 14px;
    background: rgba(255,255,255,0.016);
    border: 1px solid var(--surface-border-soft);
    border-radius: 4px;
}
.monitor-row-meta {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.monitor-row-meta span {
    white-space: nowrap;
    font-size: 10px;
    color: var(--text-muted);
}
.monitor-row-meta strong { color: var(--text-dim); }

/* Responsive scan strip */
@media (max-width: 720px) {
    .mon-scan-strip { flex-wrap: wrap; gap: 10px; }
    .mon-scan-strip-stats { flex-wrap: wrap; gap: 10px; }
    .monitor-row-meta { flex-wrap: wrap; }
}

/* phase-monitor-v2-m4j-runtime-visual-root-cause-20260525 */

/* Task A: Monitor preboot body skeleton */
.monitor-boot-body-skel { margin-top: 12px; }
.monitor-boot-results-skel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
@media (max-width: 900px) { .monitor-boot-results-skel { grid-template-columns: 1fr; } }

/* Task E: Active Monitors CTA accent */
.mon-cta-accent { color: var(--accent) !important; font-weight: 600; font-size: 11px; }
.workspace-status-card:hover .mon-cta-accent { text-decoration: underline; }

/* Task F: Delete danger hover fix — already in M4I, reinforce */
.mon-btn-danger { color: var(--red); border-color: var(--red) !important; }
.mon-btn-danger:hover { background: rgba(239,91,91,0.1); border-color: var(--red) !important; color: var(--red) !important; }
.mon-delete-confirm-btn { padding: 8px 16px; background: var(--red); border: 1px solid var(--red); border-radius: 3px; color: #fff; cursor: pointer; font-size: 11px; font-family: inherit; font-weight: 600; }
.mon-delete-confirm-btn:hover { background: #c0392b; border-color: #c0392b; }

/* Task G: Empty state parity */
.mon-panel-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 28px 20px; }
.mon-panel-empty-icon { font-size: 22px; color: var(--text-muted); margin-bottom: 4px; }
.mon-panel-empty-title { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.mon-panel-empty-desc { font-size: 11px; color: var(--text-muted); line-height: 1.65; max-width: 260px; }

/* Task H: Scan summary strip stays single row on desktop */
.mon-scan-strip { flex-wrap: nowrap; }
.mon-scan-strip-stats { flex-wrap: nowrap; overflow-x: auto; }
@media (max-width: 720px) { .mon-scan-strip { flex-wrap: wrap; } .mon-scan-strip-stats { flex-wrap: wrap; } }

/* Zone-based layout stability */
[data-monitor-zone] { display: contents; }
[data-monitor-zone="metrics"] { display: block; }
[data-monitor-zone="monitors"] { display: block; }
[data-monitor-zone="scan-strip"] { display: block; }

/* M4K: Preboot monitor route — hide workspace static shell, show stocks-pane */
html.preboot-monitor-route .workspace-home-shell { display: none !important; }
html.preboot-monitor-route .stocks-pane { display: flex !important; }

/* M4M Task A: prevent monitor-hero h1 from downgrading cp-headline typography */
.dashboard-hero .cp-headline { font-size: 22px !important; font-weight: 800 !important; }
.monitor-hero h1 { font-size: 22px !important; font-weight: 800 !important; margin-bottom: 14px !important; }

/* ── M4Q: Monitor dedicated shell refresh parity ────────────────────────── */
.monitor-results-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;}
@media(max-width:900px){.monitor-results-grid{grid-template-columns:1fr;}}
.monitor-loading-panel .workspace-mover-list-row{min-height:34px;}
.monitor-cockpit-loading .workspace-status-card{pointer-events:none;cursor:default;}
.monitor-cockpit-loading .dashboard-panel{min-height:auto;}

/* Phase Subscription V1A-Visual R3B: align Plans / Account full-page gutter to Workspace reader content */
.app-container.full-page-mode .reader-content > .subscription-shell,
.app-container.full-page-mode .reader-content > .account-shell {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* Phase Subscription V1A-Visual R3C: Plans header follows Workspace title treatment */
.subscription-shell > .subscription-hero {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 8px;
}
.subscription-shell > .subscription-hero .subscription-hero-copy {
    gap: 0;
}
.subscription-shell > .subscription-hero h1 {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.25;
    margin: 0 0 14px;
}
.subscription-shell > .subscription-hero p {
    font-size: 12px;
    line-height: 1.7;
    margin: 0;
    color: var(--text-dim);
}
.subscription-shell > .subscription-hero .subscription-chip-row {
    margin-top: 0;
}

/* Phase Subscription V1A-Visual R3D: pricing section labels use gold */
.subscription-shell .subscription-section-head .cp-section-title,
.subscription-shell .subscription-comparison-section th {
    color: var(--gold-text) !important;
}

/* Phase Subscription V1A-Visual R4: pricing conversion polish */
.subscription-module-trust {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 54px;
    border-top-color: rgba(196, 166, 88, 0.12);
    color: var(--text-muted);
}
.subscription-trust-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.subscription-trust-secondary {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}
.subscription-comparison-table {
    font-size: 10.5px;
}
.subscription-comparison-table th,
.subscription-comparison-table td {
    padding: 10px 14px;
}
.subscription-comparison-table tbody th[scope="row"] {
    color: #f4f6fa;
    font-weight: 760;
}
.subscription-comparison-table .is-plus {
    background: rgba(196, 166, 88, 0.024);
}
.subscription-comparison-section th {
    padding-top: 12px;
    padding-bottom: 10px;
    background: rgba(196, 166, 88, 0.018);
    border-bottom-color: rgba(196, 166, 88, 0.08);
    font-size: 9.5px;
}

/* Phase Subscription V1A-Visual R5: Plans surface alignment + gold-only pricing accent */
.subscription-shell {
    --plans-accent: var(--gold-text);
    --plans-accent-strong: #d8b95f;
    --plans-accent-soft: rgba(196, 166, 88, 0.14);
    --plans-surface: #111419;
    --plans-surface-hover: #161a20;
    --plans-border: var(--surface-border-soft);
    --plans-border-strong: var(--surface-border-strong);
}
.subscription-shell .subscription-eyebrow,
.subscription-shell .cp-eyebrow,
.subscription-shell .cp-section-title {
    color: var(--plans-accent) !important;
}
.subscription-shell .subscription-chip {
    border-color: var(--plans-accent-soft) !important;
    background: rgba(255,255,255,0.022) !important;
    color: var(--text-dim) !important;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.subscription-shell .subscription-chip:hover,
.subscription-shell .subscription-chip:focus-visible {
    border-color: rgba(196, 166, 88, 0.34) !important;
    background: rgba(196, 166, 88, 0.055) !important;
    color: var(--plans-accent) !important;
    outline: none;
}
.subscription-shell .subscription-pricing-module,
.subscription-shell .subscription-comparison-panel,
.subscription-shell .subscription-faq-panel {
    border: 1px solid var(--plans-border) !important;
    border-radius: 4px !important;
    background: var(--plans-surface) !important;
    box-shadow: none !important;
}
.subscription-shell .subscription-pricing-module {
    padding: 14px !important;
}
.subscription-shell .subscription-plan-card {
    border: 1px solid var(--plans-border) !important;
    border-radius: 4px !important;
    background: var(--plans-surface) !important;
    box-shadow: none !important;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.subscription-shell .subscription-plan-card:hover {
    border-color: rgba(196, 166, 88, 0.26) !important;
    background: var(--plans-surface-hover) !important;
    transform: translateY(-1px);
    box-shadow: none !important;
}
.subscription-shell .subscription-plan-card.is-featured {
    border-color: rgba(196, 166, 88, 0.42) !important;
    background: var(--plans-surface) !important;
    box-shadow: inset 0 1px 0 rgba(196, 166, 88, 0.18) !important;
}
.subscription-shell .subscription-plan-card.is-featured:hover {
    border-color: rgba(196, 166, 88, 0.62) !important;
    background: var(--plans-surface-hover) !important;
}
.subscription-shell .subscription-plan-card.is-pro {
    background: var(--plans-surface) !important;
}
.subscription-shell .subscription-badge {
    border-color: rgba(196, 166, 88, 0.36) !important;
    background: rgba(196, 166, 88, 0.055) !important;
    color: var(--plans-accent) !important;
}
.subscription-shell .subscription-price,
.subscription-shell .subscription-feature-marker,
.subscription-shell .subscription-comparison-table .is-plus,
.subscription-shell .subscription-comparison-section th,
.subscription-shell .faq-compact-item summary::after {
    color: var(--plans-accent) !important;
}
.subscription-shell .subscription-feature-marker {
    background: var(--plans-accent) !important;
    box-shadow: 0 0 0 3px rgba(196, 166, 88, 0.065) !important;
}
.subscription-shell .subscription-gold-cta {
    border-color: rgba(196, 166, 88, 0.72) !important;
    background: linear-gradient(180deg, #d8b95f, #b89437) !important;
    color: #111419 !important;
    box-shadow: none !important;
}
.subscription-shell .subscription-gold-cta:hover,
.subscription-shell .subscription-gold-cta:focus-visible {
    border-color: rgba(226, 179, 64, 0.92) !important;
    background: linear-gradient(180deg, #e0c56d, #c19c3e) !important;
    color: #101318 !important;
    outline: 1px solid rgba(196, 166, 88, 0.42) !important;
    outline-offset: 2px;
    filter: none !important;
}
.subscription-shell .btn-outline.subscription-card-cta {
    border-color: var(--plans-border) !important;
    background: rgba(255,255,255,0.012) !important;
    color: var(--text-dim) !important;
}
.subscription-shell .btn-outline.subscription-card-cta:hover,
.subscription-shell .btn-outline.subscription-card-cta:focus-visible {
    border-color: rgba(196, 166, 88, 0.32) !important;
    background: rgba(196, 166, 88, 0.035) !important;
    color: var(--plans-accent) !important;
    outline: 1px solid rgba(196, 166, 88, 0.28) !important;
    outline-offset: 2px;
}
.subscription-shell .subscription-module-trust {
    border-top: 1px solid rgba(255,255,255,0.065) !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--text-muted) !important;
}
.subscription-shell .subscription-stripe-logo path {
    fill: #ffffff !important;
}
.subscription-shell .subscription-comparison-table th,
.subscription-shell .subscription-comparison-table td {
    border-bottom-color: rgba(255,255,255,0.055) !important;
}
.subscription-shell .subscription-comparison-table tbody tr:hover td,
.subscription-shell .subscription-comparison-table tbody tr:hover th[scope="row"] {
    background: rgba(255,255,255,0.018) !important;
}
.subscription-shell .subscription-comparison-table .is-plus {
    background: rgba(196, 166, 88, 0.014) !important;
}
.subscription-shell .subscription-comparison-section th {
    background: transparent !important;
    border-bottom: 1px solid rgba(196, 166, 88, 0.13) !important;
    box-shadow: inset 0 -1px 0 rgba(196, 166, 88, 0.045) !important;
}
.subscription-shell .subscription-faq-panel {
    padding: 16px !important;
}
.subscription-shell .subscription-faq-list .faq-compact-item {
    border: 1px solid var(--plans-border) !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.014) !important;
    transition: border-color .18s ease, background .18s ease;
}
.subscription-shell .subscription-faq-list .faq-compact-item:hover {
    border-color: rgba(196, 166, 88, 0.24) !important;
    background: rgba(255,255,255,0.026) !important;
}
.subscription-shell .faq-compact-item summary:focus-visible {
    outline: 1px solid rgba(196, 166, 88, 0.38) !important;
    outline-offset: 3px;
}

/* Phase Subscription V1A-Visual Final: Free is neutral; paid account states use gold */
.subscription-shell .subscription-plan-card.is-free,
.subscription-shell .subscription-plan-card.is-free:hover {
    border-color: var(--plans-border) !important;
    background: var(--plans-surface) !important;
    box-shadow: none !important;
}
.subscription-shell .subscription-plan-card.is-free:hover {
    border-color: var(--plans-border-strong) !important;
    background: var(--plans-surface-hover) !important;
}
.subscription-shell .subscription-plan-card.is-free .subscription-price {
    color: var(--text-main) !important;
}
.subscription-shell .subscription-plan-card.is-free .subscription-feature-marker {
    background: rgba(255,255,255,0.22) !important;
    box-shadow: none !important;
}
.subscription-faq-panel .subscription-section-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.account-shell.is-free .account-hero-panel,
.account-shell.is-free .account-current-plan-card,
.account-shell.is-free .account-access-panel,
.account-shell.is-free .account-kv-card,
.account-shell.is-free .account-metric-card,
.account-shell.is-free .account-form-panel {
    border-color: var(--surface-border-soft) !important;
    background: #111419 !important;
    box-shadow: none !important;
}
.account-shell.is-free .subscription-chip {
    border-color: var(--surface-border-soft) !important;
    background: rgba(255,255,255,0.022) !important;
    color: var(--text-dim) !important;
}
.account-shell.is-free .account-plan-name,
.account-shell.is-free .account-plan-price,
.account-shell.is-free .account-plan-status,
.account-shell.is-free .account-panel-label {
    color: var(--text-main) !important;
}
.account-shell.is-free .account-plan-status,
.account-shell.is-free .account-panel-label {
    color: var(--text-muted) !important;
}
.account-shell.is-free .account-access-row strong.is-enabled,
.account-shell.is-free .account-access-row strong.is-limit,
.account-shell.is-free .account-access-row strong.is-locked {
    border-color: var(--surface-border-soft) !important;
    background: rgba(255,255,255,0.022) !important;
    color: var(--text-muted) !important;
}
.account-shell.is-free .account-access-row strong.is-enabled {
    color: var(--text-dim) !important;
}
.account-shell.is-free .account-action-button.subscription-gold-cta {
    border-color: rgba(196, 166, 88, 0.72) !important;
    background: linear-gradient(180deg, #d8b95f, #b89437) !important;
    color: #111419 !important;
}
.account-shell.is-paid-plan .account-current-plan-card {
    border-color: rgba(196, 166, 88, 0.32) !important;
    background: linear-gradient(180deg, rgba(196,166,88,0.055), rgba(255,255,255,0.018)) !important;
    box-shadow: inset 0 1px 0 rgba(196, 166, 88, 0.12) !important;
}
.account-shell.is-paid-plan .account-plan-price,
.account-shell.is-paid-plan .account-plan-name.is-paid,
.account-shell.is-paid-plan .account-access-row strong.is-enabled,
.account-shell.is-paid-plan .account-access-row strong.is-limit {
    color: var(--gold-text) !important;
}
.account-form-panel .dashboard-actions .btn-outline {
    border-color: var(--surface-border-soft) !important;
    background: rgba(255,255,255,0.018) !important;
    color: var(--text-dim) !important;
}
.account-form-panel .dashboard-actions .btn-outline:hover,
.account-form-panel .dashboard-actions .btn-outline:focus-visible {
    border-color: var(--surface-border-strong) !important;
    background: rgba(255,255,255,0.035) !important;
    color: var(--text-main) !important;
    outline: none !important;
}

/* Phase Subscription V1A Account Repair: English Workspace-aligned account control center */
.account-shell .account-page-header {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.account-shell .account-page-header .cp-headline {
    margin: 12px 0 0;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.08;
    letter-spacing: 0;
    color: var(--text-main);
}
.account-shell .account-eyebrow {
    color: var(--gold-text) !important;
}
.account-shell .account-header-subtitle {
    max-width: 760px;
    margin: 14px 0 0;
    color: var(--text-dim);
}
.account-shell .account-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.account-shell .account-state-chip {
    border-color: var(--surface-border-soft) !important;
    background: rgba(255,255,255,0.022) !important;
    color: var(--text-dim) !important;
    box-shadow: none !important;
}
.account-shell .account-current-panel,
.account-shell .account-usage-panel,
.account-shell > .account-access-panel,
.account-shell .account-billing-panel,
.account-shell .account-form-panel {
    border-color: var(--surface-border-soft);
    background: #111419;
    box-shadow: none;
}
.account-shell .account-current-panel {
    padding: 18px;
}
.account-shell .account-subscription-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.account-shell .account-subscription-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 680px;
}
.account-shell .account-subscription-main p {
    max-width: 620px;
    margin: 2px 0 0;
    color: var(--text-dim);
    line-height: 1.55;
}
.account-shell .account-subscription-actions,
.account-shell .account-billing-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}
.account-shell .account-plan-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.account-shell .account-plan-name {
    color: var(--text-main);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}
.account-shell .account-plan-price {
    color: var(--text-main);
    font-size: 18px;
    font-weight: 700;
}
.account-shell .account-status-badge {
    width: fit-content;
    border: 1px solid var(--surface-border-soft);
    border-radius: 999px;
    background: rgba(255,255,255,0.022);
    color: var(--text-muted);
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.account-shell .account-current-panel.is-free-plan {
    border-color: var(--surface-border-soft) !important;
    background: #111419 !important;
    box-shadow: none !important;
}
.account-shell .account-current-panel.is-free-plan .account-plan-name,
.account-shell .account-current-panel.is-free-plan .account-plan-price {
    color: var(--text-main) !important;
}
.account-shell .account-current-panel.is-free-plan .account-status-badge {
    border-color: var(--surface-border-soft) !important;
    background: rgba(255,255,255,0.022) !important;
    color: var(--text-muted) !important;
}
.account-shell .account-current-panel.is-paid-plan {
    border-color: rgba(196, 166, 88, 0.34);
    background: linear-gradient(180deg, rgba(196,166,88,0.04), #111419 42%);
    box-shadow: inset 0 1px 0 rgba(196, 166, 88, 0.12);
}
.account-shell .account-current-panel.is-paid-plan .account-plan-name,
.account-shell .account-current-panel.is-paid-plan .account-plan-price,
.account-shell .account-current-panel.is-paid-plan .account-status-badge {
    color: var(--gold-text);
}
.account-shell .account-current-panel.is-paid-plan .account-status-badge {
    border-color: rgba(196,166,88,0.28);
    background: rgba(196,166,88,0.06);
}
.account-shell .account-metric-grid {
    gap: 10px;
}
.account-shell .account-metric-card {
    min-height: 96px;
    border-color: var(--surface-border-soft) !important;
    background: rgba(255,255,255,0.016) !important;
    box-shadow: none !important;
}
.account-shell .account-metric-value {
    color: var(--text-main) !important;
}
.account-shell > .account-access-panel {
    padding: 16px 18px;
}
.account-shell > .account-access-panel .account-access-matrix {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--surface-border-soft);
}
.account-shell > .account-access-panel .account-access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 11px 0;
    border-bottom: 1px solid var(--surface-border-soft);
    color: var(--text-dim);
}
.account-shell > .account-access-panel .account-access-row span {
    color: var(--text-main);
    font-weight: 650;
}
.account-shell > .account-access-panel .account-access-row strong {
    min-width: 86px;
    text-align: center;
    border: 1px solid var(--surface-border-soft);
    border-radius: 999px;
    background: rgba(255,255,255,0.022);
    color: var(--text-muted);
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.account-shell > .account-access-panel.is-free-plan {
    border-color: var(--surface-border-soft) !important;
    background: #111419 !important;
    box-shadow: none !important;
}
.account-shell > .account-access-panel.is-free-plan .account-access-row strong.is-enabled,
.account-shell > .account-access-panel.is-free-plan .account-access-row strong.is-limit,
.account-shell > .account-access-panel.is-free-plan .account-access-row strong.is-locked {
    border-color: var(--surface-border-soft) !important;
    background: rgba(255,255,255,0.022) !important;
    color: var(--text-muted) !important;
}
.account-shell > .account-access-panel.is-paid-plan .account-access-row strong.is-enabled,
.account-shell > .account-access-panel.is-paid-plan .account-access-row strong.is-limit {
    border-color: rgba(196,166,88,0.28);
    background: rgba(196,166,88,0.055);
    color: var(--gold-text);
}
.account-shell .account-billing-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--surface-border-soft);
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255,255,255,0.01);
}
.account-shell .account-billing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 48px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--surface-border-soft);
    color: var(--text-dim);
}
.account-shell .account-billing-row:nth-child(odd) {
    border-right: 1px solid var(--surface-border-soft);
}
.account-shell .account-billing-row:nth-last-child(-n+2) {
    border-bottom: 0;
}
.account-shell .account-billing-row span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.account-shell .account-billing-row strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 750;
    text-align: right;
}
.account-shell .account-billing-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}
.account-shell .account-billing-trust .subscription-stripe-logo {
    width: 46px;
    height: auto;
}
.account-shell .account-settings-grid {
    align-items: start;
}
.account-shell .account-settings-grid .account-form-panel {
    min-height: 0;
}
.account-shell .account-settings-grid .dashboard-panel-head {
    margin-bottom: 12px;
}
.account-shell .account-settings-grid .dashboard-actions .btn-outline {
    min-width: 132px;
}

/* Phase Subscription V1A Account IA Repair: remove duplicate header state and fake usage metrics */
.account-shell .account-eyebrow {
    color: var(--accent) !important;
}
.account-shell .account-header-email {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}
.account-shell .account-usage-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.account-shell .account-usage-grid-compact .account-metric-card {
    min-height: 88px;
}
@media (max-width: 920px) {
    .account-shell .account-subscription-summary {
        align-items: flex-start;
        flex-direction: column;
    }
    .account-shell .account-subscription-actions,
    .account-shell .account-billing-actions {
        justify-content: flex-start;
    }
    .account-shell .account-billing-list {
        grid-template-columns: 1fr;
    }
    .account-shell .account-billing-row,
    .account-shell .account-billing-row:nth-child(odd) {
        border-right: 0;
    }
    .account-shell .account-billing-row:nth-last-child(2) {
        border-bottom: 1px solid var(--surface-border-soft);
    }
    .account-shell .account-usage-grid-compact {
        grid-template-columns: 1fr;
    }
}

/* Phase Subscription V1A Account Final Layout Repair: simplified control center */
.account-shell .account-subscription-access-panel {
    padding: 16px 18px;
}
.account-shell .account-subscription-access-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.4fr) minmax(420px, 0.6fr);
    gap: 12px;
    align-items: stretch;
}
.account-shell .account-current-panel,
.account-shell .account-access-panel,
.account-shell .account-settings-group {
    border: 1px solid var(--surface-border-soft);
    border-radius: 4px;
    background: rgba(255,255,255,0.014);
    box-shadow: none;
}
.account-shell .account-current-panel {
    display: flex;
    min-height: 100%;
    padding: 14px;
    flex-direction: column;
}
.account-shell .account-card-title {
    margin-bottom: 12px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.account-shell .account-current-panel .account-subscription-summary {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
}
.account-shell .account-current-panel .account-subscription-actions {
    justify-content: flex-start;
}
.account-shell .account-current-panel.is-free-plan {
    border-color: var(--surface-border-soft) !important;
    background: rgba(255,255,255,0.014) !important;
    box-shadow: none !important;
}
.account-shell .account-access-panel {
    padding: 14px;
}
.account-shell .account-access-panel .account-access-matrix {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--surface-border-soft);
}
.account-shell .account-access-panel .account-access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
    padding: 9px 0;
    border-bottom: 1px solid var(--surface-border-soft);
}
.account-shell .account-access-panel .account-access-row span {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
}
.account-shell .account-access-panel .account-access-row strong {
    min-width: 92px;
    text-align: center;
    border: 1px solid var(--surface-border-soft);
    border-radius: 999px;
    background: rgba(255,255,255,0.022);
    color: var(--text-muted);
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.account-shell .account-access-panel.is-free-plan .account-access-row strong.is-enabled,
.account-shell .account-access-panel.is-free-plan .account-access-row strong.is-limit,
.account-shell .account-access-panel.is-free-plan .account-access-row strong.is-locked {
    border-color: var(--surface-border-soft) !important;
    background: rgba(255,255,255,0.022) !important;
    color: var(--text-muted) !important;
}
.account-shell .account-access-panel.is-paid-plan .account-access-row strong.is-enabled,
.account-shell .account-access-panel.is-paid-plan .account-access-row strong.is-limit {
    border-color: rgba(196,166,88,0.28);
    background: rgba(196,166,88,0.055);
    color: var(--gold-text);
}
.account-shell .account-billing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--surface-border-soft);
}
.account-shell .account-billing-footer .account-billing-trust {
    margin: 0;
}
.account-shell .account-billing-footer .account-billing-actions {
    margin: 0;
    justify-content: flex-end;
}
.account-shell .account-settings-panel {
    padding: 16px 18px;
}
.account-shell .account-settings-panel .account-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.account-shell .account-settings-group {
    padding: 14px;
}
.account-shell .account-settings-group .dashboard-actions {
    margin-top: 12px;
}

/* Phase Subscription V1A Account Final Polish R3: simplified control center details */
.account-shell .account-gold-outline-cta {
    border: 1px solid rgba(196,166,88,0.66);
    border-radius: 4px;
    background: transparent;
    color: var(--gold-text);
    box-shadow: none;
}
.account-shell .account-gold-outline-cta:hover,
.account-shell .account-gold-outline-cta:focus-visible {
    border-color: rgba(216,185,95,0.9);
    background: rgba(196,166,88,0.06);
    color: #f0d27a;
    box-shadow: 0 0 0 3px rgba(196,166,88,0.08);
    outline: none;
}
.account-shell.is-free .account-current-panel .account-gold-outline-cta {
    background: transparent !important;
}
.account-shell .account-detail-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--surface-border-soft);
}
.account-shell .account-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 44px;
    padding: 10px 0;
    border-bottom: 1px solid var(--surface-border-soft);
}
.account-shell .account-detail-row span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.account-shell .account-detail-row strong {
    min-width: 0;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-align: right;
}
.account-shell .account-security-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.account-shell .account-settings-group .dashboard-actions .btn-outline {
    min-width: 132px;
}

/* Phase Subscription V1A Account Final Redesign: balanced account control center */
.account-shell .account-subscription-access-panel,
.account-shell .account-billing-panel,
.account-shell .account-settings-panel {
    padding: 16px;
}
.account-shell .account-subscription-access-grid {
    grid-template-columns: minmax(320px, 1fr) minmax(420px, 1fr);
}
.account-shell .account-current-panel,
.account-shell .account-access-panel,
.account-shell .account-settings-group {
    background: rgba(255,255,255,0.016);
}
.account-shell .account-current-panel {
    min-height: 382px;
    justify-content: space-between;
}
.account-shell .account-subscription-main {
    gap: 10px;
}
.account-shell .account-subscription-main p {
    max-width: 420px;
}
.account-shell .account-access-panel .account-access-row {
    min-height: 34px;
    padding: 7px 0;
}
.account-shell .account-access-panel .account-access-row strong {
    min-width: 86px;
}
.account-shell .account-card-copy {
    margin: -4px 0 12px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}
.account-shell .account-settings-group {
    min-height: 220px;
}
.account-shell .account-security-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.account-shell .account-billing-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.account-shell .account-billing-row,
.account-shell .account-billing-row:nth-child(odd) {
    border-right: 1px solid var(--surface-border-soft);
    border-bottom: 0;
}
.account-shell .account-billing-row:last-child {
    border-right: 0;
}
@media (max-width: 920px) {
    .account-shell .account-subscription-access-grid,
    .account-shell .account-settings-panel .account-settings-grid {
        grid-template-columns: 1fr;
    }
    .account-shell .account-current-panel {
        min-height: 0;
    }
    .account-shell .account-security-form,
    .account-shell .account-billing-list {
        grid-template-columns: 1fr;
    }
    .account-shell .account-billing-row,
    .account-shell .account-billing-row:nth-child(odd) {
        border-right: 0;
        border-bottom: 1px solid var(--surface-border-soft);
    }
    .account-shell .account-billing-row:last-child {
        border-bottom: 0;
    }
    .account-shell .account-billing-footer {
        align-items: flex-start;
        flex-direction: column;
    }
    .account-shell .account-billing-footer .account-billing-actions {
        justify-content: flex-start;
    }
}

/* Phase Subscription V1A-Account Claude Rebuild: flat 4-section control center */
.account-shell .account-sub-summary-section,
.account-shell .account-plan-access-section,
.account-shell .account-ba-section {
    padding: 16px 18px;
}
.account-shell .account-sub-summary-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.45fr) 1fr;
    gap: 0;
    align-items: start;
    border-top: 1px solid var(--surface-border-soft);
    padding-top: 14px;
}
.account-shell .account-sub-items {
    display: flex;
    flex-direction: column;
    padding-right: 24px;
    border-right: 1px solid var(--surface-border-soft);
}
.account-shell .account-sub-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 10px 0;
    border-bottom: 1px solid var(--surface-border-soft);
}
.account-shell .account-sub-item:last-child {
    border-bottom: 0;
}
.account-shell .account-sub-item-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.account-shell .account-sub-item-value {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 750;
    text-align: right;
}
.account-shell .account-sub-item-value.is-paid-value {
    color: var(--gold-text);
}
.account-shell .account-sub-muted {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
}
.account-shell .account-sub-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-left: 24px;
}
.account-shell .account-sub-explanation {
    margin: 0;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.55;
    max-width: 560px;
}
.account-shell .account-sub-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}
.account-shell .account-plan-access-section .account-access-matrix-flat {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--surface-border-soft);
}
.account-shell .account-plan-access-section .account-access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
    padding: 9px 0;
    border-bottom: 1px solid var(--surface-border-soft);
}
.account-shell .account-plan-access-section .account-access-row:last-child {
    border-bottom: 0;
}
.account-shell .account-plan-access-section .account-access-row span {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 650;
}
.account-shell .account-plan-access-section .account-access-row strong {
    min-width: 92px;
    text-align: center;
    border: 1px solid var(--surface-border-soft);
    border-radius: 999px;
    background: rgba(255,255,255,0.022);
    color: var(--text-muted);
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.account-shell.is-paid-plan .account-plan-access-section .account-access-row strong.is-enabled,
.account-shell.is-paid-plan .account-plan-access-section .account-access-row strong.is-limit {
    border-color: rgba(196,166,88,0.28);
    background: rgba(196,166,88,0.055);
    color: var(--gold-text);
}
.account-shell .account-ba-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
    gap: 0;
    align-items: start;
    border-top: 1px solid var(--surface-border-soft);
    padding-top: 14px;
}
.account-shell .account-ba-billing {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-right: 24px;
    border-right: 1px solid var(--surface-border-soft);
}
.account-shell .account-ba-billing-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}
.account-shell .account-ba-billing-trust .subscription-stripe-logo {
    flex-shrink: 0;
    width: 44px;
    height: auto;
}
.account-shell .account-ba-billing-fields {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--surface-border-soft);
}
.account-shell .account-ba-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 10px 0;
    border-bottom: 1px solid var(--surface-border-soft);
}
.account-shell .account-ba-field-row:last-child {
    border-bottom: 0;
}
.account-shell .account-ba-field-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.account-shell .account-ba-field-value {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}
.account-shell .account-ba-field-muted {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
}
.account-shell .account-ba-billing-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}
.account-shell .account-ba-security {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 24px;
}
.account-shell .account-ba-email-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--surface-border-soft);
}
.account-shell .account-ba-block-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.account-shell .account-ba-email-value {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.account-shell .account-ba-block-copy {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}
.account-shell .account-ba-password-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.account-shell .account-security-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.account-shell .account-ba-pw-action {
    margin-top: 4px;
}
@media (max-width: 920px) {
    .account-shell .account-sub-summary-grid,
    .account-shell .account-ba-grid {
        grid-template-columns: 1fr;
    }
    .account-shell .account-sub-items {
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px solid var(--surface-border-soft);
        padding-bottom: 14px;
        margin-bottom: 14px;
    }
    .account-shell .account-sub-right {
        padding-left: 0;
    }
    .account-shell .account-ba-billing {
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px solid var(--surface-border-soft);
        padding-bottom: 20px;
        margin-bottom: 4px;
    }
    .account-shell .account-ba-security {
        padding-left: 0;
    }
}

/* Phase Subscription V1A-Account V2: workspace-aligned visual design */
.account-shell .acct-sub-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.account-shell .acct-sub-card {
    border: 1px solid var(--surface-border-soft);
    background: rgba(255,255,255,0.014);
    border-radius: 4px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.account-shell .acct-sub-card-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.account-shell .acct-sub-card-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
}
.account-shell .acct-sub-card-value.is-paid {
    color: var(--gold-text);
}
.account-shell .acct-sub-card-value.is-secondary {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
}
.account-shell .acct-sub-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.account-shell .acct-sub-desc {
    margin: 0;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.55;
    max-width: 520px;
}
.account-shell .acct-sub-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}
.account-shell .acct-access-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--surface-border-soft);
}
.account-shell .acct-access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
    padding: 9px 0;
    border-bottom: 1px solid var(--surface-border-soft);
}
.account-shell .acct-access-row:last-child {
    border-bottom: 0;
}
.account-shell .acct-access-label {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
}
.account-shell .acct-access-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-align: right;
}
.account-shell .acct-access-val.is-on {
    color: var(--accent);
}
.account-shell.is-paid-plan .acct-access-val.is-on {
    color: var(--gold-text);
}
.account-shell .acct-access-val.is-off {
    opacity: 0.4;
}
.account-shell .acct-billing-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}
.account-shell .acct-billing-trust .subscription-stripe-logo {
    width: 40px;
    height: auto;
    flex-shrink: 0;
}
.account-shell .acct-billing-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--surface-border-soft);
}
.account-shell .acct-ba-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
    padding: 8px 0;
    border-bottom: 1px solid var(--surface-border-soft);
}
.account-shell .acct-ba-row:last-child {
    border-bottom: 0;
}
.account-shell .acct-ba-label {
    color: var(--text-dim);
    font-size: 13px;
}
.account-shell .acct-ba-value {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}
.account-shell .acct-ba-value.is-dim {
    color: var(--text-muted);
    font-weight: 600;
}
.account-shell .acct-field-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.account-shell .acct-login-email {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}
.account-shell .acct-login-desc {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}
@media (max-width: 920px) {
    .account-shell .acct-sub-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .account-shell .acct-sub-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

/* ===== Phase V1A-Account Final: New classes ===== */

/* Collapsible access details */
.account-shell .acct-access-details {
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    margin-top: 16px;
    padding-top: 12px;
}
.account-shell .acct-access-details .acct-access-list {
    margin-top: 10px;
    padding: 0;
}
.account-shell .acct-access-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #aaa);
    list-style: none;
    user-select: none;
    padding: 4px 0;
    outline: none;
}
.account-shell .acct-access-summary::-webkit-details-marker { display: none; }
.account-shell .acct-access-summary::before {
    content: '▸';
    font-size: 10px;
    transition: transform 0.18s;
    color: var(--text-muted, #666);
}
.account-shell .acct-access-details[open] .acct-access-summary::before {
    transform: rotate(90deg);
}
.account-shell .acct-access-summary:hover {
    color: var(--text-primary, #e8e8e8);
}
.account-shell .acct-access-helper {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, #666);
}

/* Billing footer: trust + actions in same row */
.account-shell .acct-billing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.account-shell .acct-billing-footer-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
@media (max-width: 760px) {
    .account-shell .acct-billing-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Account Settings card: email block */
.account-shell .acct-settings-email-block {
    padding: 4px 0 14px;
}
.account-shell .acct-settings-divider {
    height: 1px;
    background: var(--border-subtle, rgba(255,255,255,0.08));
    margin: 4px 0 18px;
}
.account-shell .acct-settings-password-block {
    padding-top: 4px;
}
.account-shell .acct-settings-password-block .account-security-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 400px;
    margin-top: 12px;
}
.account-shell .acct-pw-action {
    padding-top: 4px;
}
/* ===== END Phase V1A-Account Final ===== */

/* ===== Phase V1A-Account Final Closeout ===== */

/* ── 1. View included access disclosure ─────────────────────────── */
.account-shell .acct-access-details {
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    margin-top: 16px;
}
.account-shell .acct-access-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 0;
    list-style: none;
    user-select: none;
    outline: none;
    transition: color 0.15s;
}
.account-shell .acct-access-summary::-webkit-details-marker { display: none; }
.account-shell .acct-access-chevron {
    font-size: 14px;
    color: var(--text-muted, #666);
    transition: transform 0.18s;
    line-height: 1;
    flex-shrink: 0;
}
.account-shell .acct-access-details[open] .acct-access-chevron {
    transform: rotate(90deg);
}
.account-shell .acct-access-label-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #aaa);
    transition: color 0.15s;
}
.account-shell .acct-access-summary:hover .acct-access-label-text {
    color: var(--text-primary, #e8e8e8);
}
.account-shell .acct-access-summary:hover .acct-access-chevron {
    color: var(--text-secondary, #aaa);
}
.account-shell .acct-access-helper {
    font-size: 11px;
    color: var(--text-muted, #666);
    font-weight: 400;
    margin-left: auto;
}
.account-shell .acct-access-details .acct-access-list {
    padding: 8px 0 4px;
}

/* ── 2. Billing Summary 4-cell horizontal grid ──────────────────── */
.account-shell .acct-billing-cells {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 0;
}
.account-shell .acct-billing-cell {
    border: 1px solid var(--surface-border-soft);
    background: rgba(255,255,255,0.014);
    border-radius: 4px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.account-shell .acct-billing-cell-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #666);
}
.account-shell .acct-billing-cell-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #e8e8e8);
}
.account-shell .acct-billing-cell-value.is-dim {
    color: var(--text-muted, #666);
}
.account-shell.is-paid-plan .acct-billing-cell-value.is-permanent,
.account-shell.is-pro .acct-billing-cell-value.is-permanent {
    color: var(--gold-soft, #d4a843);
}
@media (max-width: 760px) {
    .account-shell .acct-billing-cells {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .account-shell .acct-billing-cells {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── 3. Account Settings 2-col row ─────────────────────────────── */
.account-shell .acct-settings-cards {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 10px;
    align-items: start;
}
.account-shell .acct-settings-card {
    border: 1px solid var(--surface-border-soft);
    background: rgba(255,255,255,0.014);
    border-radius: 4px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.account-shell .acct-login-note {
    font-size: 11px;
    color: var(--text-muted, #666);
    margin: 2px 0 0;
    line-height: 1.4;
}
.account-shell .acct-settings-copy {
    font-size: 12px;
    color: var(--text-muted, #666);
    margin: 0;
    line-height: 1.45;
}
/* All 4 password fields in one row */
.account-shell .acct-pw-row1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
    margin-top: 4px;
}
.account-shell .acct-pw-row1 .settings-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.account-shell .acct-pw-btn {
    height: 44px;
    white-space: nowrap;
    padding: 0 16px;
    box-sizing: border-box;
    align-self: end;
}
@media (max-width: 900px) {
    .account-shell .acct-settings-cards {
        grid-template-columns: 1fr;
    }
    .account-shell .acct-pw-row1 {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .account-shell .acct-pw-row1 {
        grid-template-columns: 1fr;
    }
}

/* ── 4. Subscription is-permanent accent ───────────────────────── */
.account-shell.is-pro .acct-sub-card-value.is-permanent,
.account-shell.is-paid-plan .acct-sub-card-value.is-permanent {
    color: var(--gold-soft, #d4a843);
}
/* ===== END Phase V1A-Account Final Closeout ===== */

/* V1A-HF1: summary::before kill + billing cell uniform */
.account-shell .acct-access-summary::before,
.account-shell .acct-access-details[open] .acct-access-summary::before {
    content: none !important;
    display: none !important;
    transition: none;
}
.account-shell .acct-access-summary::marker {
    display: none;
}


/* ── Billing history (admin permanent) ─────────────────────────── */
.account-shell .acct-billing-history {
    margin-top: 16px;
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
    padding-top: 14px;
}
.account-shell .acct-bh-head {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted, #666);
    margin-bottom: 10px;
}
.account-shell .acct-bh-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
    border-radius: 6px;
    flex-wrap: wrap;
}
.account-shell .acct-bh-date {
    font-size: 11px;
    color: var(--text-muted, #666);
    min-width: 80px;
    flex-shrink: 0;
}
.account-shell .acct-bh-desc {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #e8e8e8);
    flex: 1;
}
.account-shell .acct-bh-ref {
    font-size: 11px;
    font-family: monospace;
    color: var(--text-muted, #666);
}
.account-shell .acct-bh-amount {
    font-size: 12px;
    color: var(--text-secondary, #aaa);
    min-width: 90px;
    text-align: right;
}
.account-shell .acct-bh-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.account-shell .acct-bh-badge.is-permanent {
    background: rgba(212, 168, 67, 0.12);
    color: var(--gold-soft, #d4a843);
    border: 1px solid rgba(212, 168, 67, 0.25);
}