/**
 * Agentic Trading Lab - Professional Trading Dashboard
 * Dark theme, sharp design, institutional feel
 */

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

/*
 * Form controls do not inherit the page font: the UA stylesheet gives every
 * `button`/`input`/`select` its own default (Arial here) and every `textarea`
 * `monospace`. With no base rule, 15 of the 16 buttons on My Agents and the
 * plain-English "Trading instruction" textarea painted in a different typeface
 * than the text around them -- the single widest typographic inconsistency in
 * the app. `font-family` only, deliberately: `font: inherit` would also reset
 * size/weight, and the controls that set those want to keep them. The mono
 * fields (.agent-capital-input, .date-input, .control-select, ...) declare
 * `font-family: var(--font-mono)` on a class, so they still win over this.
 */
button,
input,
select,
textarea {
    font-family: inherit;
}

:root {
    /* 10jqka-inspired dark theme - professional trading */
    --bg-primary: #0a0e27;
    --bg-surface: #0f1328;
    --bg-card: #131a35;
    --bg-input: #0a0e27;
    --bg-hover: #1a2047;
    
    /* Text */
    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    
    /* Borders */
    --border-color: #1f2937;
    --grid-color: #111827;
    
    /* Semantic colors - 10jqka palette */
    --success-color: #00c851;
    --danger-color: #ff4141;
    --warning-color: #ffa500;
    --info-color: #00bfff;
    --neutral-color: #5c7cfa;

    /* Ink for text sitting on a bright accent fill (--info-color and friends).
       Same value as --bg-primary today, but a distinct token because it is a
       *foreground* role: if the surface palette is ever retuned, this must
       follow the fill's contrast requirement, not the page background. */
    --text-on-accent: #0a0e27;
    
    /* Typography */
    --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;

    /* Shared accent (used outside .home-view, e.g. My Agents) */
    --home-accent-cyan: #22d3ee;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

html {
    /* Keep brand center aligned with landing (which always has a scrollbar). */
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-base);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   HEADER
   ============================================================================ */

.header {
    display: grid;
    /* Content-sized, not minmax(0, 1fr) either side. Two fr tracks are forced
       equal, so the wider group sets both: the nav side wants ~505px, which
       reserves ~1010px for side chrome and leaves the row needing ~1480px
       before it fits. Under that the brand was the only thing with no reserved
       width, so it was what got covered. Sized to content, the row fits from
       900px up and the free space is shared out instead. */
    grid-template-columns: auto auto auto;
    align-items: center;
    background-color: var(--bg-surface);
    padding: 10px 24px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
    position: relative;
}

.header-brand {
    /* Real middle track, not a full-span overlapping rail. The rail centred the
       brand on the viewport by sharing the side chrome's grid area and
       reserving no width of its own, which is exactly why the chrome could
       paint over the logo and wordmark. Its own track cannot be overlapped;
       the cost is that it now centres in the space the side groups leave
       rather than on the viewport. See .header for why that trade is forced. */
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    pointer-events: auto;
}

.header-left {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.header-github-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.header-discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 14px;
    border-radius: 8px;
    border: 1px solid rgba(34, 211, 238, 0.55);
    background: rgba(12, 28, 52, 0.92);
    box-shadow:
        0 0 14px rgba(34, 211, 238, 0.18),
        inset 0 0 0 1px rgba(34, 211, 238, 0.06);
    color: #f8fafc;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.header-discord-btn:hover {
    border-color: rgba(34, 211, 238, 0.85);
    background: rgba(16, 36, 64, 0.96);
    box-shadow:
        0 0 18px rgba(34, 211, 238, 0.32),
        inset 0 0 0 1px rgba(34, 211, 238, 0.1);
    color: #ffffff;
}

.header-discord-btn__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #5865f2;
    fill: currentColor;
}

.header-discord-btn__label {
    line-height: 1;
    letter-spacing: 0.01em;
}

.header-discord-btn__arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #ffffff;
    opacity: 0.92;
    margin-left: 2px;
}

.header-github-link:hover {
    color: var(--text-primary);
}

.header-github-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.header-github-name {
    white-space: nowrap;
}

a.header-brand:hover .title-section h1 {
    color: var(--info-color);
}

.logo-container {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #07182d;
}

.logo-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.22);
}
.title-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.title-with-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

.title-section h1 {
    margin: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    white-space: nowrap;
}

.beta-badge {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background-color: var(--info-color);
    padding: 2px 6px;
    border-radius: 2px;
    text-transform: none;
    letter-spacing: 0.4px;
}

.title-section p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.header-center {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.market-info {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11px;
}

.info-label {
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.3px;
}

.info-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 12px;
}

.header-right {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.primary-nav {
    flex-shrink: 1;
    min-width: 0;
}

.header-account {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 0;
}

.auth-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-account-btn {
    display: inline-flex;
    align-items: center;
    max-width: 160px;
    min-width: 0;
    padding: 7px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
}

.auth-account-btn:hover {
    border-color: var(--info-color);
    color: var(--info-color);
}

.auth-user-label {
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    /* The cap, not the name, is what the header has to be laid out against --
       it is the account group's worst case at every width above 1024px. */
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.auth-btn,
.auth-btn-secondary {
    white-space: nowrap;
    flex-shrink: 0;
}

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

.auth-btn-text:hover {
    background: transparent;
    color: var(--text-primary);
    border-color: transparent;
}

.auth-btn {
    padding: 7px 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.auth-btn-primary {
    border-color: rgba(34, 211, 238, 0.55);
    background: linear-gradient(135deg, #22d3ee, #38bdf8);
    color: #041018;
    box-shadow: 0 4px 14px rgba(34, 211, 238, 0.2);
}

.auth-btn-primary:hover {
    filter: brightness(1.05);
    border-color: rgba(34, 211, 238, 0.75);
}

.auth-btn:hover {
    border-color: var(--info-color);
    color: var(--info-color);
}

.auth-btn-secondary {
    color: var(--text-secondary);
}

/* Destructive-control red. MUST stay after .auth-btn:hover above: the two
   hover rules have identical (0,2,0) specificity, so source order is the only
   thing making this one win. A copy of .agent-delete-btn's palette rather than
   a reuse of it -- that class is agent-scoped, and the codebase already makes
   this same "same look, own class" split between .account-menu-item--danger
   and .agent-menu-item--danger. #f87171 is what every other destructive
   control here uses (.agent-delete-btn, .agent-menu-item--danger,
   .account-menu-item--danger), while --danger-color #ff4141 is the more
   common choice for negative P&L -- but neither is an absolute rule and there
   are exceptions both ways, so match the nearest precedent rather than
   assuming a clean split. */
.auth-btn-danger {
    border-color: rgba(248, 113, 113, 0.55);
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
}

.auth-btn-danger:hover {
    border-color: #f87171;
    background: rgba(248, 113, 113, 0.2);
    color: #fca5a5;
}

.auth-modal[hidden] {
    display: none !important;
}

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.auth-modal-panel {
    position: relative;
    width: min(420px, calc(100vw - 32px));
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.auth-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 22px;
    cursor: pointer;
}

.auth-modal-title {
    margin: 0 0 6px;
    font-size: 20px;
}

.auth-modal-subtitle {
    margin: 0 0 18px;
    color: var(--text-secondary);
    font-size: 13px;
}

.auth-form {
    display: grid;
    gap: 12px;
}

.auth-field {
    display: grid;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.auth-field[hidden] {
    display: none !important;
}

.auth-field input,
.auth-field select {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    /* Native <select> menus are painted from the UA's color scheme, not ours;
       without this the inherited light text lands on a light OS panel.
       Intentionally on the shared rule: the text inputs want dark autofill,
       spinners and scrollbars for the same reason. */
    color-scheme: dark;
}

.auth-field select option {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.auth-error {
    margin: 0;
    color: #ef4444;
    font-size: 12px;
}

.auth-submit,
.auth-submit-btn {
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: var(--info-color);
    /*
     * Dark on cyan, not #fff: white on --info-color (#00bfff) measures 2.12:1,
     * under the WCAG AA 4.5:1 floor. This rule paints the primary button of the
     * sign-in modal, the Run Backtest modal and both create-agent modals -- i.e.
     * the submit control at every step of this flow. #041018 measures ~9:1 and
     * matches how the same cyan is already paired on .home-btn-primary.
     */
    color: #041018;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    transition: filter 0.15s, background-color 0.15s;
}

.auth-submit:hover,
.auth-submit-btn:hover {
    filter: brightness(1.08);
}

.auth-submit:disabled,
.auth-submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.credential-copy-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.credential-copy-row input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 12px;
}

.credential-copy-btn {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.credential-copy-btn:hover {
    border-color: var(--info-color);
    color: var(--info-color);
}

.credential-warning {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    font-size: 12px;
    line-height: 1.45;
}

.credential-hint {
    margin: 0;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

.auth-switch {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12px;
}

.auth-link-btn {
    border: none;
    background: transparent;
    color: var(--info-color);
    cursor: pointer;
    font-size: 12px;
    text-decoration: underline;
}

/* The reset flow's Resend button while its countdown runs: still readable
   (the label is the countdown), no longer a link. */
.auth-link-btn:disabled {
    color: var(--text-muted);
    cursor: default;
    text-decoration: none;
}

.auth-resend {
    margin: 2px 0 10px;
    text-align: left;
}

.mode-toggle {
    display: flex;
    gap: 4px;
    background-color: var(--bg-card);
    padding: 4px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.mode-btn {
    padding: 8px 16px;
    border: none;
    background-color: transparent;
    color: var(--text-secondary);
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.15s;
    white-space: nowrap;
}

.mode-btn.active {
    background-color: var(--info-color);
    color: white;
}

.mode-btn:hover:not(.active) {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

.icon-buttons {
    display: flex;
    gap: 4px;
}

.icon-btn {
    width: 28px;
    height: 28px;
    border: none;
    background-color: transparent;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* ============================================================================
   TICKER BAR
   ============================================================================ */

.ticker-bar {
    display: flex;
    align-items: stretch;
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.ticker-marquee {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    position: relative;
}

.ticker-marquee::before,
.ticker-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    z-index: 1;
    pointer-events: none;
}

.ticker-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-surface), transparent);
}

.ticker-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-surface), transparent);
}

.ticker-track {
    display: flex;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.ticker-track:has(.ticker-placeholder) {
    width: 100%;
    transform: none;
}

.ticker-set {
    display: flex;
    flex: 0 0 auto;
    flex-shrink: 0;
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-right: 1px solid rgba(148, 163, 184, 0.16);
    white-space: nowrap;
    flex: 0 0 auto;
    flex-shrink: 0;
}

.ticker-item:last-child {
    border-right: 1px solid rgba(148, 163, 184, 0.16);
}

.ticker-item .symbol {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 42px;
    letter-spacing: 0.02em;
}

.ticker-item .price {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.ticker-item .change {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    min-width: 52px;
}

.ticker-item .change.positive {
    color: var(--success-color);
}

.ticker-item .change.negative {
    color: var(--danger-color);
}

.ticker-chart {
    width: 24px;
    height: 10px;
    color: var(--text-muted);
}

.ticker-chart.positive {
    color: var(--success-color);
}

.ticker-chart.negative {
    color: var(--danger-color);
}

.ticker-placeholder {
    padding: 10px 12px;
    color: var(--text-secondary);
    font-size: 11px;
    width: 100%;
}

.ticker-spacer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-left: auto;
    flex: 0 0 auto;
}

.ticker-dropdown {
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

.ticker-filter {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 600;
}

.ticker-info {
    background-color: var(--bg-surface);
    padding: 4px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 9px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.ticker-markets-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--success-color);
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

.ticker-markets-open.is-closed {
    color: var(--text-muted);
}

.ticker-markets-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-color);
    box-shadow: 0 0 6px rgba(0, 200, 81, 0.6);
}

.ticker-markets-open.is-closed .ticker-markets-dot {
    background: var(--text-muted);
    box-shadow: none;
}

.ticker-source-label {
    cursor: help;
    color: var(--text-muted);
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ticker-source-label:hover {
    color: var(--text-secondary);
}

/* ============================================================================
   MAIN CONTAINER
   ============================================================================ */

.main-container {
    display: grid;
    grid-template-columns: 250px 1fr 320px;
    gap: 12px;
    padding: 12px;
    padding-bottom: 40px;
}

.left-panel,
.center-panel,
.right-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: visible;
    overflow-x: hidden;
    align-content: flex-start;
}

/* ============================================================================
   CONTROL SECTIONS (Left Panel)
   ============================================================================ */

.control-section {
    background-color: var(--bg-card);
    padding: 14px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    flex: 0 0 auto;
}

.control-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0.4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.control-group {
    margin-bottom: 12px;
}

.control-group:last-child {
    margin-bottom: 0;
}

.control-group label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: none;
    margin-bottom: 5px;
    letter-spacing: 0.3px;
}

.date-range-inputs {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}

.date-input-wrapper {
    position: relative;
    flex: 1;
    max-width: 122px;
    display: flex;
    align-items: center;
}

.date-input,
.control-select {
    width: 100%;
    padding: 3px 6px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
    font-size: 12.5px;
    font-family: var(--font-mono);
    height: 24px;
    line-height: 1;
    /* Native <select> menus and date pickers are painted from the UA's color
       scheme, not ours; without this the inherited light text lands on a light
       OS panel. Applies to .date-input too -- see the picker-indicator rule
       below, which must not re-invert the now-light glyph. */
    color-scheme: dark;
}

.control-select option {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.date-input {
    padding-right: 1px;
}

.date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    /* Deliberately no invert() filter. The UA draws this glyph from the
       element's color-scheme, so under `color-scheme: dark` above it is
       already light; inverting would turn it near-black on --bg-input and
       make the picker button invisible. */
}

.date-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.date-input:focus,
.control-select:focus {
    outline: none;
    border-color: var(--info-color);
    box-shadow: 0 0 4px rgba(77, 171, 247, 0.2);
}

.control-select:disabled {
    cursor: not-allowed;
    color: var(--text-muted);
    opacity: 0.62;
}

.market-data-notice {
    margin: 6px 0 0;
    padding: 6px 8px;
    border-left: 2px solid var(--warning-color);
    background: rgba(245, 158, 11, 0.08);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.market-data-notice[hidden] {
    display: none;
}

.market-data-notice.is-ifind {
    border-left-color: #fb7185;
    background: rgba(251, 113, 133, 0.07);
}

/* Degraded backtest chart: index benchmarks dropped because the market-data
   provider was unreachable. Same treatment as .market-data-notice, including
   the explicit [hidden] rule — without it the display above would beat the
   hidden attribute and the notice would show on every healthy chart. */
.chart-baseline-notice {
    margin: 0 0 10px;
    padding: 6px 8px;
    border-left: 2px solid var(--warning-color);
    background: rgba(245, 158, 11, 0.08);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.chart-baseline-notice[hidden] {
    display: none;
}

.date-separator {
    color: var(--text-secondary);
    font-size: 12px;
    padding: 0 2px;
    margin-top: 1px;
}

.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
}

.checkbox-item input {
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: var(--info-color);
}

.radio-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
}

.radio-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
}

.radio-item input {
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: var(--info-color);
}

.company-name {
    color: var(--text-secondary);
    font-size: 11px;
    margin-left: auto;
}

.custom-assets {
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}

/* ============================================================================
   ASSET UNIVERSE INTERFACE
   ============================================================================ */

.control-helper {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    margin-top: -4px;
}

.universe-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.universe-tab {
    padding: 8px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.universe-tab:hover {
    color: var(--text-primary);
}

.universe-tab.active {
    color: var(--info-color);
    border-bottom-color: var(--info-color);
}

.universe-content {
    display: none;
}

.universe-content.active {
    display: block;
}

.ifind-universe-panel {
    padding: 10px;
    border: 1px solid rgba(251, 113, 133, 0.34);
    border-radius: 5px;
    background: rgba(251, 113, 133, 0.05);
    letter-spacing: 0;
}

.ifind-universe-panel[hidden],
.universe-tabs[hidden] {
    display: none;
}

.ifind-universe-select {
    margin-bottom: 10px;
}

.ifind-universe-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.ifind-universe-title {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
}

.ifind-timeframe {
    flex: 0 0 auto;
    padding: 2px 5px;
    border: 1px solid rgba(251, 113, 133, 0.4);
    border-radius: 3px;
    color: #fda4af;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
}

.ifind-symbol-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ifind-symbol-item {
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-input);
    overflow: hidden;
}

.ifind-symbol-item span,
.ifind-symbol-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ifind-symbol-item span {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
}

.ifind-symbol-item small {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 10px;
}

/* Preset Cards */
.preset-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.preset-card {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    background-color: var(--bg-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
}

.preset-card:hover {
    border-color: var(--info-color);
    background-color: var(--bg-hover);
}

.preset-card.selected {
    border-color: var(--info-color);
    background-color: rgba(0, 191, 255, 0.08);
}

.preset-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.preset-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.preset-btn {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    margin-top: auto;
}

.preset-btn:hover {
    border-color: var(--info-color);
    color: var(--info-color);
}

.preset-card.selected .preset-btn {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: var(--text-on-accent);
}

.preset-card.selected .preset-btn:hover {
    opacity: 0.8;
}

/* Custom Universe Builder */
.custom-universe {
    background-color: var(--bg-card);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.custom-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.search-input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    position: relative;
}

.search-asset-input {
    flex: 1;
    padding: 8px 12px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    transition: all 0.15s;
}

.search-asset-input:focus {
    outline: none;
    border-color: var(--info-color);
}

.search-asset-input::placeholder {
    color: var(--text-muted);
}

.asset-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 60px;
    background-color: var(--bg-card);
    border: 1px solid var(--info-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    margin-top: -1px;
}

.autocomplete-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.15s;
}

.autocomplete-option:last-child {
    border-bottom: none;
}

.autocomplete-option:hover {
    background-color: var(--bg-hover);
}

.autocomplete-option strong {
    color: var(--info-color);
    font-weight: 600;
}

.add-asset-btn {
    padding: 8px 12px;
    background-color: var(--info-color);
    border: none;
    border-radius: 4px;
    color: var(--text-on-accent);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.add-asset-btn:hover {
    opacity: 0.8;
}

.selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 32px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background-color: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
}

.chip-ticker {
    color: var(--info-color);
    font-weight: 600;
}

.chip-remove {
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 700;
    transition: all 0.15s;
}

.chip-remove:hover {
    color: var(--danger-color);
}

.chips-helper {
    font-size: 12.5px;
    color: var(--text-muted);
}

.universe-spacing {
    margin-top: 8px;
}

.add-company-btn {
    width: 100%;
    padding: 5px;
    background-color: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 3px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.add-company-btn:hover {
    border-color: var(--info-color);
    color: var(--info-color);
}

.reset-defaults-btn {
    width: 100%;
    padding: 5px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.reset-defaults-btn:hover {
    background-color: var(--bg-input);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.panel-footer {
    background-color: var(--bg-input);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    margin-top: 8px;
}

.footer-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.info-row .info-label {
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: none;
}

.info-row .info-value {
    color: var(--text-primary);
    text-align: right;
    font-family: var(--font-mono);
    word-break: break-word;
    font-size: 8px;
}

.info-row .info-value.success {
    color: var(--success-color);
}

/* ============================================================================
   SECTION CARDS (Center & Right)
   ============================================================================ */

.section-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 14px;
    flex: 0 0 auto;
}

.section-card.compact {
    padding: 12px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.section-card h2 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.section-card h3 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.section-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.section-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.performance-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 24px;
}

.section-card .performance-title-row h2 {
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

.data-source-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.data-source-badge.is-simulated {
    border-color: rgba(245, 158, 11, 0.42);
    background: rgba(245, 158, 11, 0.08);
    color: #fbbf24;
}

.data-source-badge.is-alpaca {
    border-color: rgba(34, 197, 94, 0.32);
    color: #86efac;
}

.data-source-badge.is-ifind {
    border-color: rgba(251, 113, 133, 0.42);
    background: rgba(251, 113, 133, 0.08);
    color: #fda4af;
}

.data-source-badge[hidden] {
    display: none;
}

.chart-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.run-backtest-btn {
    padding: 6px 12px;
    background-color: var(--info-color);
    border: none;
    border-radius: 3px;
    color: white;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.run-backtest-btn:hover {
    background-color: #5ba3f5;
}

.time-btn {
    padding: 6px 10px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: none;
    letter-spacing: 0.2px;
}

.time-btn.active {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: white;
}

.time-btn:hover:not(.active) {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* ============================================================================
   PnL DISPLAY
   ============================================================================ */

.pnl-display {
    display: flex;
    gap: 12px;
    padding: 10px;
    background-color: var(--bg-input);
    border-radius: 4px;
    margin-bottom: 12px;
}

.pnl-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pnl-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: none;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.pnl-value {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-mono);
}

.pnl-value.positive {
    color: var(--success-color);
}

.pnl-value.negative {
    color: var(--danger-color);
}

.pnl-vs {
    font-size: 11px;
    color: var(--text-secondary);
}

/* ============================================================================
   CHART
   ============================================================================ */

.chart-container {
    position: relative;
    height: 380px;
}

.performance-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
    margin-bottom: 4px;
}

.performance-legend-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
}

.performance-legend-button:hover:not(:disabled) {
    border-color: var(--border-color);
    background: var(--bg-hover);
}

.performance-legend-button[aria-pressed="false"] {
    color: var(--text-muted);
    opacity: 0.72;
}

.performance-legend-button[aria-pressed="false"] .performance-series-swatch {
    filter: grayscale(1);
}

.performance-legend-button:disabled {
    cursor: default;
}

.performance-legend-button:focus-visible,
.performance-comparison-scroll:focus-visible {
    outline: 2px solid var(--info-color);
    outline-offset: 2px;
}

.performance-series-swatch {
    display: inline-block;
    flex: 0 0 auto;
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

.performance-comparison {
    margin: 10px -14px -14px;
    border-top: 1px solid var(--border-color);
    background: rgba(8, 18, 40, 0.28);
}

.performance-comparison-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 9px;
}

.section-card .performance-comparison-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 12px;
    letter-spacing: 0;
}

.performance-comparison-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
    text-align: right;
}

.performance-comparison-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.performance-comparison table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}

.performance-comparison th,
.performance-comparison td {
    padding: 10px 12px;
    border-top: 1px solid var(--border-color);
    text-align: right;
    vertical-align: top;
}

.performance-comparison thead th {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.performance-comparison th:first-child {
    width: 132px;
    text-align: left;
}

.performance-comparison tbody th {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
}

.performance-comparison td {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 11px;
}

.performance-comparison [data-series-key="agent"] {
    background: rgba(0, 191, 255, 0.06);
}

.performance-metric-value {
    white-space: nowrap;
}

.performance-best {
    color: var(--success-color);
}

.performance-best-label {
    display: block;
    margin-top: 3px;
    color: var(--success-color);
    font-family: var(--font-base);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.performance-deltas {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 3px 6px;
    margin-top: 5px;
}

.performance-delta {
    font-family: var(--font-base);
    font-size: 9px;
    line-height: 1.35;
    white-space: nowrap;
}

.performance-delta.is-positive {
    color: var(--success-color);
}

.performance-delta.is-negative {
    color: var(--danger-color);
}

.performance-delta.is-neutral {
    color: var(--text-muted);
}

.performance-comparison-status {
    margin: 0;
    padding: 8px 14px 10px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.4;
}

.performance-comparison-status:empty {
    display: none;
}

.performance-comparison[data-state="partial"] .performance-comparison-status,
.performance-comparison[data-state="error"] .performance-comparison-status {
    color: var(--warning-color);
}

@media (max-width: 600px) {
    .chart-container {
        height: 320px;
        min-height: 320px;
    }

    .performance-comparison-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .performance-comparison-header p {
        text-align: left;
    }
}

/* Backtest Trading Log: a dense, independently scrolling activity feed. */
.playground-backtest-panel .right-panel {
    min-width: 0;
}

.trading-log-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    max-height: 720px;
    padding: 0;
    overflow: hidden;
}

.trading-log-header {
    margin: 0;
    padding: 14px;
}

.trading-log-header h2 {
    margin-bottom: 0;
}

.trading-log-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.trading-log-scroll {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid var(--border-color);
    border-radius: 0;
    background: rgba(8, 18, 40, 0.18);
}

.trading-log-scroll:focus-visible {
    outline: 2px solid var(--info-color);
    outline-offset: -2px;
}

.trading-log-event {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}

.trading-log-event:last-child {
    border-bottom: 0;
}

.trading-log-event-head {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: 8px;
    align-items: start;
}

.trading-log-action {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 6px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1;
}

.trading-log-asset {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.trading-log-asset strong {
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.2;
}

.trading-log-asset small,
.trading-log-asset time {
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.3;
}

.trading-log-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 9px 0 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.trading-log-event-meta > span {
    display: grid;
    gap: 2px;
    min-width: 78px;
}

.trading-log-event-meta small {
    color: var(--text-muted);
    font-family: var(--font-base);
    font-size: 9px;
}

.trading-log-event .trading-log-reason {
    margin: 9px 0 0;
    color: var(--text-primary);
    font-size: 10px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.trading-log-reason-label {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.trading-log-event .trading-log-costs,
.trading-log-event .trading-log-native-costs {
    margin-top: 8px;
}

.trading-log-empty {
    margin: 0;
    padding: 18px 14px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
}

@media (min-width: 1280px) {
    .playground-backtest-panel.main-container {
        grid-template-columns: minmax(220px, 250px) minmax(620px, 1fr) minmax(320px, 360px);
    }
}

@media (max-width: 1279px) {
    .playground-backtest-panel.main-container {
        grid-template-columns: 1fr;
    }

    .playground-backtest-panel .right-panel {
        display: flex;
    }

    .trading-log-card {
        max-height: 560px;
    }
}

@media (max-width: 600px) {
    .trading-log-card {
        max-height: none;
    }

    .trading-log-scroll {
        overflow-y: visible;
    }

    .trading-log-event-meta {
        gap: 8px;
    }
}

.chart-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px;
    background-color: var(--bg-input);
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 12px;
    border: 1px solid var(--border-color);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.legend-color {
    width: 10px;
    height: 2px;
    border-radius: 1px;
}

.legend-color.selected-agent {
    background-color: #4dabf7;
    height: 2px;
}

.legend-color.market-baseline {
    background-color: #ff9800;
}

.legend-color.equal-weight {
    background-color: #a0a0a0;
}

.legend-color.deepseek-agent {
    background-color: #ff6b6b;
}

.execution-detail {
    display: none;
}

/* ============================================================================
   DECISION LOG TABLE
   ============================================================================ */

.log-controls {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.filter-select {
    flex: 1;
    padding: 5px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    color-scheme: dark;
}

.filter-select option {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.filter-btn {
    padding: 5px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
}

.decision-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin-bottom: 10px;
}

.decision-table thead {
    background-color: var(--bg-input);
    border-bottom: 1px solid var(--border-color);
}

.decision-table th {
    padding: 6px;
    text-align: left;
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.2px;
}

.decision-table td {
    padding: 6px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.decision-table tr:hover {
    background-color: var(--bg-hover);
}

.action-buy {
    color: var(--success-color);
    font-weight: 700;
}

.action-sell {
    color: var(--danger-color);
    font-weight: 700;
}

.trading-log-scroll {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: rgba(8, 18, 40, 0.35);
}

.trading-log-scroll .decision-table {
    margin-bottom: 0;
    min-width: 840px;
}

.trading-log-scroll .decision-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bg-input);
    box-shadow: 0 1px 0 var(--border-color);
}

.trading-log-scroll::-webkit-scrollbar {
    width: 8px;
}

.trading-log-scroll::-webkit-scrollbar-track {
    background: var(--bg-card);
}

.trading-log-scroll::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.trading-log-scroll::-webkit-scrollbar-thumb:hover {
    background: #5a6574;
}

.trading-log-empty {
    color: var(--text-secondary);
    text-align: center;
    padding: 1.25rem 0;
    font-size: 0.9rem;
}

.trading-log-native {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
}

.trading-log-scroll .trading-log-value {
    min-width: 230px;
    font-variant-numeric: tabular-nums;
}

.trading-log-costs,
.trading-log-native-costs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin-top: 4px;
    line-height: 1.35;
}

.trading-log-costs {
    color: var(--text-secondary);
    font-size: 10px;
}

.trading-log-costs span,
.trading-log-native-costs span {
    white-space: nowrap;
}

.trading-log-native-costs strong {
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
}

.trading-log-scroll .trading-log-asset {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 116px;
}

.trading-log-scroll .trading-log-asset strong {
    font-size: 11px;
    line-height: 1.2;
}

.trading-log-scroll .trading-log-asset small,
.trading-log-scroll .trading-log-reason {
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.3;
}

.trading-log-scroll .trading-log-quantity {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.trading-log-scroll .trading-log-reason {
    min-width: 116px;
    max-width: 180px;
    white-space: normal;
}

.trading-log-scroll .order-status {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.trading-log-scroll .order-status-filled {
    color: #6ee7a0;
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.22);
}

.trading-log-scroll .order-status-partial {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.24);
}

.trading-log-scroll .order-status-rejected {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.22);
}

.action-hold {
    color: var(--text-secondary);
    font-weight: 700;
}

.view-all-btn {
    width: 100%;
    padding: 6px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: none;
}

.view-all-btn:hover {
    background-color: var(--bg-input);
    border-color: var(--info-color);
    color: var(--info-color);
}

/* ============================================================================
   RIGHT PANEL METRICS
   ============================================================================ */

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
}

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

.metric-label {
    color: var(--text-secondary);
    font-weight: 600;
}

.metric-value {
    color: var(--text-primary);
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 11px;
}

.metric-value.positive {
    color: var(--success-color);
}

.metric-value.negative {
    color: var(--danger-color);
}

.view-more-btn {
    width: 100%;
    padding: 5px;
    background-color: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 3px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 8px;
    text-transform: none;
}

.view-more-btn:hover {
    border-color: var(--info-color);
    color: var(--info-color);
}

/* ============================================================================
   PERFORMANCE DRIVERS
   ============================================================================ */

.driver-item {
    display: flex;
    gap: 6px;
    padding: 6px;
    background-color: var(--bg-input);
    border-radius: 3px;
    border-left: 2px solid var(--border-color);
    font-size: 11px;
    margin-bottom: 5px;
    color: var(--text-secondary);
}

.driver-item.positive {
    border-left-color: var(--success-color);
}

.driver-icon {
    flex: 0 0 10px;
    font-weight: 700;
    color: var(--success-color);
}

.driver-text {
    flex: 1;
    line-height: 1.3;
}

.view-details-btn {
    width: 100%;
    padding: 5px;
    background-color: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 3px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 6px;
    text-transform: none;
}

.view-details-btn:hover {
    border-color: var(--info-color);
    color: var(--info-color);
}

/* ============================================================================
   LIVE MARKET EVENTS
   ============================================================================ */

.market-events-panel .section-title {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.market-events-header {
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.market-events-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.market-events-live-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.market-events-live-label {
    color: var(--info-color);
}

.market-events-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--success-color);
    box-shadow: 0 0 6px rgba(0, 200, 81, 0.55);
    flex-shrink: 0;
}

.market-events-updated {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    line-height: 1.4;
}

.market-events-disclaimer {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
    margin: 0;
}

.market-events-body {
    margin-bottom: 4px;
}

.market-events-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 210px;
    overflow-y: auto;
    overflow-x: hidden;
}

.market-events-list::-webkit-scrollbar {
    width: 6px;
}

.market-events-list::-webkit-scrollbar-track {
    background: var(--bg-card);
}

.market-events-list::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 3px;
}

.market-events-list::-webkit-scrollbar-thumb:hover {
    background: #5a6574;
}

.market-events-state {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 8px 4px;
    line-height: 1.4;
}

.market-event-card {
    padding: 7px 8px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

.market-event-card-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.market-event-symbol {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}

.market-event-type-badge {
    justify-self: start;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 5px;
    border-radius: 2px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background-color: rgba(31, 41, 55, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.event-type-earnings,
.event-type-guidance,
.event-type-filing {
    border-color: #3b4f6b;
    color: #b8c7dc;
}

.event-type-product,
.event-type-management,
.event-type-operations {
    border-color: #3d4f63;
    color: #b3c0cf;
}

.event-type-regulation,
.event-type-ma {
    border-color: #4a4a63;
    color: #c0bccf;
}

.event-type-default {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.market-event-time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

.market-event-headline {
    font-size: 11px;
    color: var(--text-primary);
    line-height: 1.35;
    margin: 0 0 3px;
}

.market-event-source {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.2;
}

.market-events-view-all {
    margin-top: 6px;
}

@keyframes market-event-fade-in {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.market-event-card--fade-in {
    animation: market-event-fade-in 0.45s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .market-event-card--fade-in {
        animation: none;
    }
}

/* Final Backtest feed overrides stay scoped so legacy decision-table rules
   cannot reintroduce a wide table or page-level overflow. */
.playground-backtest-panel .trading-log-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    max-height: 720px;
    padding: 0;
    overflow: hidden;
}

.playground-backtest-panel .trading-log-scroll {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid var(--border-color);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
}

.playground-backtest-panel .trading-log-empty {
    margin: 0;
    padding: 18px 14px;
    text-align: center;
}

@media (max-width: 1279px) {
    .playground-backtest-panel .trading-log-card {
        max-height: 560px;
    }
}

@media (max-width: 600px) {
    .playground-backtest-panel .trading-log-card {
        max-height: none;
    }

    .playground-backtest-panel .trading-log-scroll {
        overflow-y: visible;
    }
}

/* ============================================================================
   QUICK SCENARIOS
   ============================================================================ */

.scenario-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 5px;
    text-transform: none;
}

.scenario-btn:last-child {
    margin-bottom: 0;
}

.scenario-btn:hover {
    background-color: var(--bg-hover);
    border-color: var(--info-color);
    color: var(--info-color);
}

.scenario-icon {
    font-size: 12px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 1440px) {
    .main-container {
        grid-template-columns: 220px 1fr 300px;
    }
}

@media (max-width: 1200px) {
    .main-container {
        grid-template-columns: 1fr 300px;
    }

    .left-panel {
        display: none;
    }

    .chart-legend {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1280px) {
    .title-section h1 {
        font-size: 26px;
    }

    .auth-account-btn {
        max-width: 120px;
    }

    .auth-user-label {
        max-width: 96px;
    }
}

@media (max-width: 1100px) {
    .mode-btn {
        padding: 7px 12px;
        font-size: 13px;
    }

    .title-section h1 {
        font-size: 22px;
    }

    .auth-account-btn {
        max-width: 100px;
    }

    .auth-user-label {
        max-width: 80px;
    }
}

/* The header is one row only down to 900px, where the nav becomes a hamburger.
   In that band the three groups have to actually fit: everything in .header-left
   and .header-account is flex-shrink: 0, so nothing gives way on its own and the
   surplus lands on the brand. The labels below are dropped in the order they
   stop earning their width, each at the measured point where the row overflows.

   Staged rather than collapsed all at once because the brand centres in whatever
   space the two side groups leave: the further apart their widths, the further
   the brand sits from the centre. Hiding the left group in one step costs ~215px
   of offset; hiding it in two keeps it near ~160px down to 1340px.

   Each width is the measured overflow point of the *signed-in* header, which is
   the wider one -- an avatar, a 100px-capped name and a caret where signed out
   has just "Sign in". Sizing these to the signed-out header would leave every
   signed-in user, i.e. every user the fix is for, still overflowing. */
@media (max-width: 1440px) {
    .header-github-name {
        display: none;
    }
}

@media (max-width: 1340px) {
    .header-discord-btn {
        padding: 7px 10px;
        gap: 8px;
        font-size: 11px;
    }

    .header-discord-btn__label {
        display: none;
    }

    .header-discord-btn__arrow {
        display: none;
    }
}

/* Avatar only, and the row's own side padding halved. By here these are the
   difference between the header fitting and the account controls leaving the
   viewport -- the name is still in the account menu one click away. */
@media (max-width: 1024px) {
    .auth-user-label {
        display: none;
    }

    .header {
        padding: 10px 12px;
    }
}

@media (max-width: 900px) {
    .header {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .header-brand {
        grid-column: 1;
        grid-row: auto;
        justify-self: center;
        /* Safe again here, and needed: one column per group means nothing can
           be overlapped, while the wordmark is wider than a 320px viewport --
           left to size the track it would sit hard against the left padding
           and overhang only to the right. */
        min-width: 0;
    }

    .header-left {
        grid-column: 1;
        grid-row: auto;
        justify-self: center;
        order: -1;
        flex-wrap: wrap;
        justify-content: center;
    }

    .header-right {
        grid-column: 1;
        grid-row: auto;
        justify-self: stretch;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        gap: 8px;
    }

    .header-account {
        margin-left: auto;
    }

    .header-center {
        order: 3;
        width: 100%;
    }

    .main-container {
        grid-template-columns: 1fr;
    }

    .playground-backtest-panel .left-panel {
        display: flex;
    }

    .playground-backtest-panel .right-panel {
        display: flex;
    }

    .performance-card .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .performance-card .chart-controls {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .performance-card .chart-controls .backtest-run-select {
        flex: 1 0 100%;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .right-panel {
        display: none;
    }

    .chart-legend {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .header {
        padding: 10px 12px;
    }

    .market-info {
        gap: 8px;
    }

    .decision-table {
        font-size: 11px;
    }

    .decision-table td,
    .decision-table th {
        padding: 4px;
    }
}

/* ============================================================================
   PAPER TRADING VIEW
   ============================================================================ */

.paper-trading-view {
    width: 100%;
    height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    background-color: var(--bg-primary);
}

.paper-container {
    display: grid;
    grid-template-columns: 250px 1fr 332px;
    gap: 12px;
    padding-bottom: 40px;
}

.paper-left-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    min-height: 0;
}

.paper-left-panel > .paper-card:first-child {
    flex-shrink: 0;  /* Account summary stays fixed height */
}

.paper-left-panel > .paper-card:last-child {
    flex-shrink: 0;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}
.paper-left-panel > .paper-card:last-child::-webkit-scrollbar {
    width: 8px;
}

.paper-left-panel > .paper-card:last-child::-webkit-scrollbar-track {
    background: var(--bg-card);
}

.paper-left-panel > .paper-card:last-child::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.paper-left-panel > .paper-card:last-child::-webkit-scrollbar-thumb:hover {
    background: #5a6574;
}

.paper-center-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.paper-right-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: visible;
    overflow-x: hidden;
    align-content: flex-start;
}

.paper-right-panel > .paper-card {
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.paper-right-panel > .paper-card::-webkit-scrollbar {
    width: 8px;
}

.paper-right-panel > .paper-card::-webkit-scrollbar-track {
    background: var(--bg-card);
}

.paper-right-panel > .paper-card::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.paper-right-panel > .paper-card::-webkit-scrollbar-thumb:hover {
    background: #5a6574;
}

.paper-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.paper-center-panel .paper-card {
    height: 420px;
    overflow: hidden;
}

.paper-card h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    color: var(--text-primary);
    letter-spacing: 0.4px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.paper-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--grid-color);
}

.paper-metric:last-child {
    border-bottom: none;
}

.paper-label {
    font-size: 11px;
    color: var(--text-secondary);
}

.paper-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.paper-value.positive {
    color: var(--success-color);
}

.paper-value.negative {
    color: var(--danger-color);
}

.paper-refresh-btn {
    background-color: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 6px;
}

.paper-refresh-btn:hover {
    background-color: #1a2047;
    border-color: #3f51b5;
}

.positions-list,
.trades-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.positions-list::-webkit-scrollbar,
.trades-list::-webkit-scrollbar {
    width: 8px;
}

.positions-list::-webkit-scrollbar-track,
.trades-list::-webkit-scrollbar-track {
    background: var(--bg-card);
}

.positions-list::-webkit-scrollbar-thumb,
.trades-list::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.positions-list::-webkit-scrollbar-thumb:hover,
.trades-list::-webkit-scrollbar-thumb:hover {
    background: #5a6574;
}

.position-item,
.trade-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    background-color: transparent;
    border-radius: 0;
    font-size: 11px;
    border-left: none;
    border-bottom: 1px solid var(--grid-color);
}

.position-item:last-child,
.trade-item:last-child {
    border-bottom: none;
}

.position-item:hover,
.trade-item:hover {
    background-color: transparent;
}

.position-symbol,
.trade-symbol {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 11px;
}

.position-qty,
.trade-qty {
    color: var(--text-secondary);
    font-size: 10px;
}

.position-pnl,
.trade-side {
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 11px;
}

.position-pnl.positive,
.trade-side.buy {
    color: var(--success-color);
}

.position-pnl.negative,
.trade-side.sell {
    color: var(--danger-color);
}

.trade-side.hold {
    color: var(--warning-color);
}

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

.loading {
    text-align: center;
    color: var(--text-muted);
    padding: 16px;
    font-size: 11px;
}

.paper-center-panel .chart-container {
    height: 100%;
    min-height: 350px;
    flex: 1;
}

@media (max-width: 1400px) {
    .paper-container {
        grid-template-columns: 1fr;
    }

    .paper-left-panel,
    .paper-right-panel {
        max-height: 300px;
    }
}

/* ============================================================================
   LEADERBOARD VIEW
   ============================================================================ */

.leaderboard-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 106px);
    overflow-y: auto;
    background-color: var(--bg-primary);
}

.leaderboard-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    max-width: 100%;
}

.leaderboard-container.compact {
    gap: 6px;
    padding: 10px;
    height: auto;
    overflow-y: auto;
}

/* Contest identity header (merged into the leaderboard card) */
.leaderboard-contest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

/* ── Live Trading Leaderboard ────────────────────────────────────────────────
   The live board reuses the Competition chart, table and curve picker
   wholesale; everything below is the chrome that makes it a *season* rather
   than a window — and, in the preview banner's case, the only thing on screen
   that can tell a real season from a stand-in. */

.season-preview-banner {
    margin: 8px 0 0;
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255, 165, 0, 0.45);
    border-left: 4px solid var(--warning-color);
    background: rgba(255, 165, 0, 0.10);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.55;
}

.season-preview-banner strong {
    color: var(--warning-color);
    font-weight: 700;
}

.season-strip {
    margin: 8px 0 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

/* `display: flex` on a class beats the UA stylesheet's `[hidden] {display:none}`,
   so without these the season chrome renders on the Competition board — the
   strip fully drawn, the gap list as an empty red bar. Any future `.season-*`
   container that sets `display` needs the same override. */
.season-strip[hidden],
.season-gaps[hidden] {
    display: none;
}

/* No season has run yet, so the numbers are structural rather than measured.
   Dimming them keeps "Day 0 of 10" from reading as a real standing. */
.season-strip.is-placeholder .season-progress-label,
.season-strip.is-placeholder .season-dates,
.season-strip.is-placeholder .season-next-advance {
    color: var(--text-muted);
}

.season-strip-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.season-identity {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.season-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: rgba(34, 211, 238, 0.14);
    color: var(--home-accent-cyan);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.season-dates {
    color: var(--text-secondary);
    font-size: 13px;
}

.season-entry-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.season-entry-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--text-muted);
    flex: none;
}

.season-entry-state.is-open .season-entry-dot { background-color: var(--success-color); }
.season-entry-state.is-closed .season-entry-dot { background-color: var(--warning-color); }
.season-entry-state.is-open { color: var(--success-color); }

.season-strip-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.season-progress-track {
    position: relative;
    flex: 1 1 180px;
    min-width: 120px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--bg-input);
    overflow: hidden;
}

.season-progress-fill {
    height: 100%;
    border-radius: 999px;
    background-color: var(--home-accent-cyan);
    transition: width 0.3s ease;
}

.season-progress-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.season-next-advance {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.season-reset-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.season-gaps {
    margin: 8px 0 0;
    padding: 10px 12px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(255, 65, 65, 0.28);
    background: rgba(255, 65, 65, 0.07);
    border-radius: 6px;
}

.season-gap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.5;
}

.season-gap-date {
    font-weight: 700;
    color: var(--danger-color);
    white-space: nowrap;
}

.season-gap-why {
    color: var(--text-secondary);
}

.season-gap-detail {
    width: 100%;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
}

@media (max-width: 640px) {
    .season-strip-top,
    .season-strip-progress {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .season-progress-track {
        width: 100%;
        flex-basis: auto;
    }
}

.contest-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contest-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.contest-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.contest-live-badge {
    transform: scale(0.85);
    transform-origin: left center;
}

.contest-subtitle {
    margin: 0;
    font-size: 11px;
    color: var(--text-secondary);
}

.contest-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.contest-action-btn {
    padding: 5px 12px;
    font-size: 11px;
}

/* Combined Header Bar (Stats + Controls) */
.leaderboard-header-bar {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.leaderboard-header-bar.compact {
    padding: 6px 10px;
    border-radius: 6px;
    gap: 12px;
}

/* Header Stats Section */
.leaderboard-header {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}

.leaderboard-header.compact {
    padding: 8px 12px;
    border-radius: 6px;
}

.header-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.header-stats.compact {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    flex: 0 0 auto;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-item.compact {
    gap: 2px;
}

.stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0.5px;
}

.stat-item.compact .stat-label {
    font-size: 9px;
    letter-spacing: 0.3px;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-item.compact .stat-value {
    font-size: 14px;
}

.stat-subtext {
    font-size: 12px;
    color: var(--text-muted);
}

.stat-item.compact .stat-subtext {
    display: none;
}

/* Header Controls (in combined bar) */
.header-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 0 0 auto;
}

.header-controls.compact {
    gap: 8px;
}

/* Show-on-Chart multi-select dropdown */
.curve-picker {
    position: relative;
    flex: 0 0 auto;
}

.curve-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}

.curve-picker-trigger:hover,
.curve-picker.is-open .curve-picker-trigger {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.06);
}

.curve-picker-sep {
    color: var(--text-muted);
    font-weight: 500;
}

.curve-picker-count {
    color: var(--text-secondary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.curve-picker-caret {
    color: var(--text-muted);
    font-size: 10px;
    margin-left: 2px;
}

.curve-picker-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    width: min(320px, calc(100vw - 32px));
    max-height: min(420px, 70vh);
    overflow: auto;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.curve-picker-menu-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 2px 4px 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}

.curve-picker-clear {
    border: none;
    background: transparent;
    color: var(--home-accent-cyan, #22d3ee);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}

.curve-picker-clear:hover {
    text-decoration: underline;
}

.curve-picker-group + .curve-picker-group {
    margin-top: 4px;
}

.curve-picker-group-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
}

.curve-picker-group-check {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 3px;
    border: 1.5px solid rgba(148, 163, 184, 0.55);
    background: transparent;
    cursor: pointer;
    position: relative;
    padding: 0;
}

.curve-picker-group-check.is-checked {
    border-color: #38bdf8;
    background: #38bdf8;
}

.curve-picker-group-check.is-checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #0b1220;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.curve-picker-group-check.is-partial {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.2);
}

.curve-picker-group-check.is-partial::after {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 6px;
    height: 2px;
    background: #38bdf8;
    border-radius: 1px;
}

.curve-picker-group-expand {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 2px;
    text-align: left;
}

.curve-picker-group-expand:hover {
    color: #67e8f9;
}

.curve-picker-group-chevron {
    color: var(--text-muted);
    font-size: 12px;
    width: 12px;
    text-align: center;
}

.curve-picker-children {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 6px 24px;
}

.curve-picker-children.is-collapsed {
    display: none;
}

.curve-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
}

.curve-picker-item:hover {
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-primary);
}

.curve-picker-item input {
    accent-color: #38bdf8;
    width: 14px;
    height: 14px;
    margin: 0;
}

.curve-picker-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Control & Filter Tabs */
.leaderboard-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
}

/* Compact Controls Bar */
.chart-controls-bar {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.chart-controls-bar.compact {
    gap: 8px;
    padding: 8px 10px;
    flex-wrap: wrap;
}

.chart-controls-bar.compact.minimal {
    gap: 16px;
    justify-content: space-between;
}

.filter-tabs,
.metric-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-tabs.compact,
.view-buttons.compact {
    gap: 4px;
    flex-wrap: wrap;
}

.filter-tab,
.metric-tab {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.filter-tab.compact,
.metric-tab.compact {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 3px;
}

.filter-tab:hover,
.metric-tab:hover {
    background-color: var(--bg-hover);
    border-color: var(--neutral-color);
    color: var(--text-primary);
}

.filter-tab.active,
.metric-tab.active {
    background-color: var(--neutral-color);
    border-color: var(--neutral-color);
    color: white;
}

.control-options {
    display: flex;
    gap: 16px;
    align-items: center;
}

.normalize-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.normalize-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--neutral-color);
}

/* Main Content Layout */
.leaderboard-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    min-height: 500px;
}

/* Compact Main Layout */
.leaderboard-main {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 8px;
    min-height: 300px;
}

.leaderboard-main.compact {
    gap: 6px;
    min-height: auto;
    max-height: 380px;
}

.leaderboard-main.compact.full-width {
    grid-template-columns: 1fr;
    max-height: none;
}

.chart-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px;
}

.chart-section.full-width {
    width: 100%;
}

.chart-hint {
    text-align: center;
    font-size: 9px;
    color: var(--text-muted);
    margin-top: -2px;
}

/* Custom chart legend with line-style samples */
.chart-legend-custom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 14px;
    padding: 8px 6px 2px;
}

.chart-legend-custom .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1;
    border-radius: 4px;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.chart-legend-custom .legend-item:hover {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-primary);
}

.chart-legend-custom .legend-sample {
    flex: 0 0 auto;
    display: block;
}

.chart-legend-custom .legend-item.legend-hidden {
    opacity: 0.45;
}

.chart-legend-custom .legend-item.legend-hidden .legend-label {
    text-decoration: line-through;
}

/* Table sort toggle */
.sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sort-toggle .sort-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-right: 2px;
}

.sort-btn {
    background: var(--bg-secondary, rgba(148, 163, 184, 0.08));
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sort-btn:hover {
    color: var(--text-primary);
}

.sort-btn.active {
    background: var(--accent-color, #3b82f6);
    border-color: var(--accent-color, #3b82f6);
    color: #fff;
}

/* Leaderboard Bottom Section (Table + Sidebars) */
.leaderboard-bottom {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 8px;
}

.leaderboard-bottom.compact {
    gap: 6px;
    grid-template-columns: 1fr 300px;
}

/* Leaderboard Table Section */
.leaderboard-table-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}

.leaderboard-table-section.compact {
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
    min-height: auto;
}

/* Table Sidebar (beside rankings table) */
.leaderboard-table-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leaderboard-table-sidebar.compact {
    gap: 6px;
    min-width: 300px;
    max-height: 500px;
    overflow-y: auto;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.table-header.compact {
    padding-bottom: 4px;
}

.table-header h3 {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

.section-header h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.update-indicator {
    font-size: 12px;
    color: var(--success-color);
    font-weight: 500;
}

.table-wrapper {
    overflow-x: auto;
    border-radius: 4px;
}

.table-wrapper.compact {
    overflow-x: auto;
    border-radius: 3px;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.leaderboard-table.compact {
    font-size: 10px;
}

.leaderboard-table thead {
    background-color: var(--bg-hover);
    border-bottom: 1px solid var(--border-color);
}

.leaderboard-table.compact thead {
    background-color: var(--bg-hover);
}

.leaderboard-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: none;
    font-size: 11px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.leaderboard-table.compact th {
    padding: 4px 6px;
    font-size: 9px;
    letter-spacing: 0.3px;
}

.leaderboard-table th.rank-col { width: 60px; text-align: center; }
.leaderboard-table th.name-col { width: 220px; }
.leaderboard-table th.portfolio-col { width: 130px; text-align: right; }
.leaderboard-table th.return-col { width: 110px; text-align: right; }
.leaderboard-table th.sharpe-col { width: 100px; text-align: right; }
.leaderboard-table th.dd-col { width: 100px; text-align: right; }

.leaderboard-table th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.leaderboard-table th.sortable:hover {
    color: var(--text-primary);
}
.leaderboard-table th.sortable.is-sorted {
    color: var(--accent-color, #60a5fa);
}
.leaderboard-table th.sortable .sort-arrow {
    display: inline-block;
    min-width: 0.75em;
    margin-left: 2px;
    font-size: 10px;
    opacity: 0.9;
}

.leaderboard-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s;
}

.leaderboard-table.compact tbody tr {
    border-bottom: 1px solid rgba(31, 41, 55, 0.5);
}

.leaderboard-table tbody tr:hover {
    background-color: var(--bg-hover);
    cursor: pointer;
}

.leaderboard-table td {
    padding: 12px;
    color: var(--text-primary);
}

.leaderboard-table.compact td {
    padding: 4px 6px;
    font-size: 10px;
}

.leaderboard-table td.rank-cell {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--neutral-color);
}

.rank-badge {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    background-color: var(--bg-hover);
    color: var(--text-secondary);
}

.rank-badge.top3 {
    background-color: rgba(0, 200, 81, 0.1);
    color: var(--success-color);
}

.team-name-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.team-badge {
    background-color: var(--neutral-color);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.return-positive {
    color: var(--success-color);
}

.return-negative {
    color: var(--danger-color);
}

.metric-value-text {
    font-weight: 500;
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
}

.status-badge.live,
.status-badge.paper {
    background-color: rgba(0, 200, 81, 0.15);
    color: var(--success-color);
}

.status-badge-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    background: currentColor;
    vertical-align: 1px;
}

.status-badge.paper,
.status-badge.backtested,
.status-badge.idle,
.status-badge.draft {
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
}

.status-badge.upcoming {
    background-color: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

/* Live Trading board states. `preview` deliberately borrows the warning colour
   rather than a neutral grey: it is the badge saying the numbers beside it are
   not real, which is a louder claim than "idle". */
.status-badge.preview {
    background-color: rgba(255, 165, 0, 0.15);
    color: var(--warning-color);
}

.status-badge.running {
    background-color: rgba(0, 200, 81, 0.15);
    color: var(--success-color);
}

.status-badge.closed {
    background-color: rgba(156, 163, 175, 0.15);
    color: var(--text-secondary);
}

.status-badge.baseline {
    background-color: rgba(200, 200, 81, 0.15);
    color: #c8c851;
}

.status-badge.not-live {
    background-color: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
}

.status-badge.backtested,
.status-badge.idle {
    background-color: rgba(107, 114, 128, 0.18);
    color: var(--text-muted);
}

.leaderboard-footer {
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.view-all-btn {
    background-color: transparent;
    border: none;
    color: var(--neutral-color);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
}

.view-all-btn:hover {
    color: #7c8ff5;
}

/* Sidebar */
.leaderboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.leaderboard-sidebar.compact {
    gap: 8px;
    min-width: 260px;
}

.sidebar-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-card.compact {
    padding: 8px;
    gap: 6px;
    border-radius: 6px;
}

.sidebar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-title.compact {
    font-size: 12px;
    padding-bottom: 4px;
}

/* Ranking Rules */
.ranking-formula {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
}

.ranking-formula.compact {
    gap: 4px;
    font-size: 10px;
}

.formula-text {
    background-color: var(--bg-hover);
    padding: 8px;
    border-radius: 4px;
    color: var(--text-primary);
    margin: 0;
}

.formula-compact {
    background-color: var(--bg-hover);
    padding: 4px 6px;
    border-radius: 3px;
    color: var(--text-primary);
    margin: 0;
    font-size: 10px;
    font-weight: 600;
}

.formula-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.formula-items.compact {
    gap: 2px;
}

.formula-items li {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.4;
}

.formula-items.compact li {
    font-size: 9px;
    line-height: 1.3;
}

.formula-note {
    color: var(--text-muted);
    font-size: 11px;
    margin: 0;
    font-style: italic;
}

/* Team Detail */
.team-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
}

.team-detail.compact {
    gap: 4px;
    font-size: 10px;
}

.no-selection {
    color: var(--text-muted);
    text-align: center;
    padding: 20px 10px;
}

.team-detail.compact .no-selection {
    padding: 10px 5px;
    font-size: 9px;
}

.team-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.team-detail-row:last-child {
    border-bottom: none;
}

.team-detail-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.team-detail-value {
    color: var(--text-primary);
    font-weight: 600;
}

/* Competition Feed */
.feed-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.feed-items.compact {
    gap: 4px;
    max-height: 120px;
}

.feed-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background-color: var(--bg-hover);
    border-radius: 4px;
    font-size: 11px;
}

.feed-item.compact {
    padding: 4px;
    gap: 4px;
    font-size: 9px;
    border-radius: 3px;
}

.feed-time {
    color: var(--text-muted);
    font-weight: 600;
    min-width: 35px;
}

.feed-item.compact .feed-time {
    min-width: 25px;
    font-size: 8px;
}

.feed-text {
    flex: 1;
    color: var(--text-primary);
}

.feed-change {
    color: var(--success-color);
    font-weight: 600;
    min-width: 45px;
    text-align: right;
}

.view-feed-btn {
    background-color: transparent;
    border: none;
    color: var(--neutral-color);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 0;
    transition: color 0.2s;
    margin-top: 4px;
}

.view-feed-btn:hover {
    color: #7c8ff5;
}

/* Equity Curves Chart Section */
.equity-curves-section {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chart-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.chart-view-btn {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.chart-view-btn.compact {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 3px;
}

.chart-view-btn:hover {
    background-color: var(--bg-hover);
    border-color: var(--neutral-color);
    color: var(--text-primary);
}

.chart-view-btn.active {
    background-color: var(--neutral-color);
    border-color: var(--neutral-color);
    color: white;
}

.log-scale-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    margin-left: auto;
}

.log-scale-checkbox.compact {
    gap: 4px;
    font-size: 11px;
    margin-left: 0;
}

.log-scale-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--neutral-color);
}

.log-scale-checkbox.compact input[type="checkbox"] {
    width: 12px;
    height: 12px;
}

/* View Toggle ($ / % switch) */
.view-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.view-toggle.compact {
    gap: 0;
}

.view-toggle-btn {
    background-color: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border-right: 1px solid var(--border-color);
}

.view-toggle-btn.compact {
    padding: 5px 10px;
    font-size: 11px;
}

.view-toggle-btn:last-child {
    border-right: none;
}

.view-toggle-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.view-toggle-btn.active {
    background-color: var(--neutral-color);
    color: white;
    border-color: var(--neutral-color);
}

.chart-container {
    position: relative;
    height: 300px;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(15, 19, 40, 0.5) 0%, rgba(13, 27, 42, 0.3) 100%);
    padding: 10px;
}

.chart-container.large {
    height: 400px;
}

.chart-container.medium {
    height: 380px;
    padding: 6px;
}

.leaderboard-main.compact.full-width .chart-container.medium {
    height: 280px;
}

.chart-container canvas {
    max-height: 100%;
}

.chart-legend-info {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
}

.legend-note {
    display: inline-block;
}

/* Responsive Design */
@media (max-width: 1600px) {
    .leaderboard-main.compact {
        grid-template-columns: 1fr;
    }
    
    .leaderboard-main.compact.full-width {
        grid-template-columns: 1fr;
    }
    
    .leaderboard-bottom.compact {
        grid-template-columns: 1fr 260px;
    }
    
    .leaderboard-table-sidebar.compact {
        min-width: 260px;
    }
}

@media (max-width: 1200px) {
    .leaderboard-main.compact {
        grid-template-columns: 1fr;
    }
    
    .leaderboard-sidebar.compact {
        display: none;
    }
    
    .leaderboard-bottom.compact {
        grid-template-columns: 1fr;
    }
    
    .leaderboard-table-sidebar.compact {
        display: none;
    }
    
    .leaderboard-content {
        grid-template-columns: 1fr;
    }
    
    .leaderboard-sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    .leaderboard-container {
        padding: 8px;
        gap: 8px;
    }
    
    .leaderboard-container.compact {
        padding: 8px;
        gap: 8px;
    }
    
    .header-stats {
        grid-template-columns: 1fr;
    }
    
    .header-stats.compact {
        grid-template-columns: 2fr 2fr;
    }
    
    .filter-tabs,
    .metric-tabs {
        flex-direction: row;
    }
    
    .chart-container.medium {
        height: 250px;
    }
    
    .leaderboard-table {
        font-size: 11px;
    }
    
    .leaderboard-table.compact {
        font-size: 9px;
    }
    
    .leaderboard-table th,
    .leaderboard-table td {
        padding: 8px;
    }
    
    .leaderboard-table.compact th,
    .leaderboard-table.compact td {
        padding: 3px 4px;
    }
}

/* ============================================================================
   MY TRADING ALGO VIEW
   ============================================================================ */

.my-trading-algo-view {
    width: 100%;
    height: calc(100vh - 106px);
    overflow: hidden;
    background-color: var(--bg-primary);
    padding: 12px;
    box-sizing: border-box;
}

.algo-page-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 12px;
    height: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.algo-chat-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 14px;
}

.algo-panel-header h2 {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--text-primary);
}

.algo-panel-header p {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.algo-chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 4px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-input);
    min-height: 200px;
}

.algo-chat-msg {
    display: flex;
}

.algo-chat-msg.user {
    justify-content: flex-end;
}

.algo-chat-msg.bot {
    justify-content: flex-start;
}

.algo-chat-bubble {
    max-width: 92%;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--text-primary);
}

.algo-chat-msg.user .algo-chat-bubble {
    background: rgba(0, 191, 255, 0.18);
    border: 1px solid rgba(0, 191, 255, 0.35);
}

.algo-chat-msg.bot .algo-chat-bubble {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.algo-chat-input-row {
    display: flex;
    gap: 8px;
}

.algo-chat-input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
}

.algo-chat-input:focus {
    outline: none;
    border-color: var(--info-color);
}

.algo-chat-send-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background: var(--info-color);
    color: white;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.algo-chat-send-btn:hover {
    filter: brightness(1.08);
}

.algo-chat-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.algo-blocks-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 12px;
}

.algo-blocks-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.algo-blocks-toolbar h2 {
    margin: 0 0 4px;
    font-size: 18px;
    color: var(--text-primary);
}

.algo-blocks-subtitle {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.algo-toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.algo-team-name-input {
    width: 200px;
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
}

.execute-algo-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #00c851, #00a844);
    color: white;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 200, 81, 0.25);
}

.execute-algo-btn:hover {
    filter: brightness(1.06);
}

.execute-algo-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.algo-blocks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.algo-block-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.algo-block-card.highlight {
    border-color: var(--info-color);
    box-shadow: 0 0 0 1px rgba(0, 191, 255, 0.25);
}

.algo-block-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.algo-block-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--info-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.algo-block-head h3 {
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
}

.algo-block-en {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

.algo-block-textarea {
    width: 100%;
    min-height: 88px;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
    font-family: inherit;
    box-sizing: border-box;
}

.algo-block-textarea:focus {
    outline: none;
    border-color: var(--info-color);
}

.algo-execute-status {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

.algo-execute-status.success {
    border-color: var(--success-color);
    color: var(--success-color);
}

.algo-execute-status.error {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.backtest-run-progress {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.06);
}

.backtest-config-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.backtest-config-row {
    display: grid;
    gap: 4px;
}

.backtest-config-core-row {
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}

.backtest-config-core-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.backtest-config-row dt {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.backtest-config-row dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

.backtest-config-secondary-value {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.backtest-config-detail-group {
    margin-top: 5px;
    border-top: 1px solid var(--border-color);
}

.backtest-config-details {
    border-bottom: 1px solid var(--border-color);
}

.backtest-config-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    list-style: none;
}

.backtest-config-details summary::-webkit-details-marker {
    display: none;
}

.backtest-config-details summary::after {
    color: var(--info-color);
    content: '+';
    font-size: 16px;
    font-weight: 400;
}

.backtest-config-details[open] summary::after {
    content: '−';
}

.backtest-config-detail-row {
    margin: 0 0 13px;
    padding: 0 0 13px;
    border-left: 2px solid rgba(79, 195, 247, 0.45);
    padding-left: 10px;
}

.backtest-config-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 12px;
    padding: 0 0 14px;
}

.backtest-config-detail-cell {
    min-width: 0;
}

.backtest-config-detail-cell span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.backtest-config-detail-cell strong {
    display: block;
    color: var(--text-primary);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.backtest-config-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 13px;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.45;
}

.backtest-config-meta-row span {
    min-width: 0;
}

.backtest-config-meta-row strong {
    display: block;
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.backtest-config-prompt {
    white-space: pre-wrap;
    font-weight: 500;
    line-height: 1.45;
    max-height: 140px;
    overflow: auto;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-color);
}

.run-backtest-modal {
    z-index: 1300;
}

.run-backtest-modal-panel {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    /* Column layout so the submit button can be pinned to the bottom below. */
    display: flex;
    flex-direction: column;
}

.run-backtest-billing-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.55);
}

.run-backtest-billing-toggle button {
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.run-backtest-billing-toggle button[aria-checked="true"] {
    border-color: rgba(34, 211, 238, 0.42);
    background: rgba(34, 211, 238, 0.12);
    color: #67e8f9;
}

.run-backtest-api-keys {
    margin-top: 8px;
}

/*
 * Pin the primary CTA. The panel's content runs ~1080px tall, so on a 1440x900
 * screen the "▶ Run Backtest" button rendered at y=1045 -- 145px past the fold
 * (measured live), and worse on a 1366x768 laptop. The panel scrolls, but
 * nothing said so, so the payoff action of the whole product was invisible on
 * open. Sticky keeps it in view at every scroll position.
 */
.run-backtest-modal-panel > #runBacktestModalSubmit {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    /* Opaque: the content scrolls underneath this button. Matches .auth-submit. */
    background-color: var(--info-color);
    box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, 0.6);
}

/*
 * Reclaim ~170px of that overflow at the source: two preset cards each
 * reserving 180px for three short lines is what pushed the CTA off-screen.
 * Scoped to this modal so the roomier cards elsewhere are untouched.
 */
.run-backtest-modal .preset-card {
    min-height: 0;
    padding: 12px;
}

.run-backtest-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.run-backtest-readonly {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.run-backtest-capital-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.run-backtest-edit-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-cyan, #22d3ee);
    cursor: pointer;
}

.run-backtest-edit-link:hover {
    text-decoration: underline;
}

.run-backtest-prompt-preview {
    margin: 0;
    max-height: 120px;
    overflow: auto;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary, rgba(255, 255, 255, 0.04));
    font-family: inherit;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    color: var(--text-primary);
}

.run-backtest-modal .universe-tabs {
    margin-top: 8px;
}

.run-backtest-modal .preset-cards {
    margin-top: 10px;
}

.backtest-run-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.backtest-run-progress-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.backtest-run-elapsed {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--home-accent-cyan, #22d3ee);
}

.backtest-run-progress-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-bottom: 10px;
}

.backtest-run-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.85), rgba(0, 191, 255, 0.95));
    transition: width 0.8s ease;
}

.backtest-run-progress-message {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.45;
}

.backtest-run-progress-hint {
    margin: 0;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.backtest-run-progress.is-error {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.08);
}

.backtest-run-progress.is-error .backtest-run-elapsed {
    color: #f87171;
}

.algo-setup-status {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

.algo-setup-status.error {
    border-color: var(--danger-color);
    color: #fca5a5;
}

.algo-setup-status.success {
    border-color: var(--success-color);
    color: var(--success-color);
}

.algo-setup-status code {
    font-size: 12px;
    color: var(--info-color);
}

@media (max-width: 1100px) {
    .algo-page-layout {
        grid-template-columns: 1fr;
        height: auto;
        overflow-y: auto;
    }

    .my-trading-algo-view {
        height: auto;
        overflow-y: auto;
    }

    .algo-blocks-grid {
        grid-template-columns: 1fr;
    }

    .algo-blocks-toolbar {
        flex-direction: column;
    }

    .algo-toolbar-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .algo-team-name-input {
        flex: 1;
        min-width: 140px;
    }
}

/* ============================================================================
   SITE NAVIGATION & NEW PAGE SHELLS
   ============================================================================ */

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

.nav-menu-toggle {
    display: none;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.discord-nav-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #5865F2;
    background: rgba(88, 101, 242, 0.15);
    color: #c4cbff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s;
}

.discord-nav-btn:hover {
    background: rgba(88, 101, 242, 0.28);
    color: white;
}

.discord-nav-btn-sm {
    padding: 5px 10px;
    font-size: 10px;
}

.page-view {
    padding: 12px;
    padding-bottom: 40px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.page-header .home-btn-primary {
    flex-shrink: 0;
}

.page-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.account-view {
    max-width: 1180px;
}

.account-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px 22px;
}

.account-card--empty:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.account-empty-copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.account-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.account-row:last-of-type {
    border-bottom: none;
}

.account-label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.account-value {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.account-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-start;
}

.page-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.home-view {
    --home-surface-card: rgba(15, 27, 55, 0.82);
    --home-surface-inner: rgba(8, 18, 40, 0.62);
    --home-border-card: rgba(148, 163, 184, 0.16);
    --home-border-subtle: rgba(148, 163, 184, 0.09);
    --home-accent-cyan: #22d3ee;
    --home-positive-green: #22c55e;
    --home-negative-red: #ef4444;
    --home-warning-amber: #f59e0b;
    --home-discord-purple: #5865f2;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    max-width: none;
    margin: 0;
    padding: 0 0 40px;
    display: block;
    position: relative;
}

/* Strict 2-page home pager: Landing ↔ Dashboard only */
html[data-nav-page="home"] {
    --app-chrome-height: 148px;
}
html[data-nav-page="home"] body {
    overflow: hidden;
    height: 100%;
}
html[data-nav-page="home"] #homeView.home-view {
    height: calc(100dvh - var(--app-chrome-height));
    max-height: calc(100dvh - var(--app-chrome-height));
    overflow: hidden;
    padding: 0;
}
html[data-nav-page="home"] #homeView .home-page--pager {
    height: 100%;
    overflow: hidden;
    padding: 0;
}
/* Native Y scroll + mandatory snap — Mac trackpad inertia, no wheel hijack. */
html[data-nav-page="home"] #homeView .home-pager-track {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
html[data-nav-page="home"] #homeView .home-pager-track::-webkit-scrollbar {
    display: none;
}
html[data-nav-page="home"] #homeView .home-pager-screen {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
html[data-nav-page="home"] #homeView #homeScreenLanding {
    position: relative;
}
html[data-nav-page="home"] #homeView .home-landing-hero {
    height: 100%;
    min-height: 0;
    /* Match .home-page gutters — pager zeroes page padding, so hero must carry
       the rail. The bottom reserve is NOT here: it is height-conditional, in
       the `min-height` block just below. See `--home-hint-strip`. */
    padding: clamp(20px, 3vh, 40px) clamp(40px, 5vw, 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}
/* The strip the scroll hint occupies, in ONE place because four numbers have
   to agree: the hint's own `bottom: 18px` plus its measured 56px height set the
   74px floor, the desktop reserve and the <=1200px reserve both spend it, and
   the guard reads it. They were two unlinked literals plus a "~50px" estimate
   that was wrong by 6px, so restyling `.home-scroll-hint-label` silently
   invalidated all of them.

   96 AND NOT THE 74px FLOOR: the extra 22px is clearance, so the hero's last
   laid-out element stops short of the hint's box rather than finishing flush
   against it. Only the floor is pinned (`_HINT_STRIP_FLOOR_PX`), and nothing
   pins 96 -- which is the right way round, but is not a licence to trim this
   to 74 on the strength of the guard still passing. The 96 predates the
   re-measurement above: it was chosen against the "~90px" that the wrong
   ~50px estimate produced, and it stands because it clears the real band, not
   because anything re-derived it. Trimming it needs its own measurement. */
:root { --home-hint-strip: 96px; }

/* RESERVED ONLY WHERE THE HERO CAN AFFORD IT, and the gate is the point.
   The hint is `position: absolute` at `bottom: 18px` with `z-index: 3` and live
   pointer-events, so anything laid out in its band is un-clickable rather than
   merely overlapped -- but the board panel is `overflow: hidden` around a chart
   with a hard `min-height: 132px`, so buying the strip out of the hero's height
   is not free at short viewports. Measured with the panel populated (7 rows and
   the chart wrapper), an UNCONDITIONAL 96px reserve overflowed the panel by
   12/32/52/72px at viewport heights 680/660/640/620 and pushed the "See both
   leaderboards" footer button outside its own clipping box -- silently, since
   the panel is `overflow: hidden`, and `elementFromPoint` showed the button
   unreachable at 1440x640, 1366x620 and 1600x620. It cost visible rows well
   above that too: 7 -> 5 at 1280x720. A 1366x768 laptop, once browser chrome
   and the app's 148px header come off, lands inside that band.

   768px is where the reserve measured FREE: at >=768 the panel keeps all seven
   rows and overflows by 0, identical to before the reserve existed; at 760 it
   starts costing rows. Below the gate the hint overlaps the card as it did
   before any of this -- cosmetic, and measured, the footer button and both hero
   CTAs stay clickable there. Cosmetic overlap beats a clipped control.

   Consequence worth knowing: where this applies the hero is no longer
   symmetric, so `justify-content: center` centres content in a box whose bottom
   inset is larger than its top. That is deliberate; the hint sits in the
   difference. Pinned by test_the_hero_reserves_the_scroll_hints_strip. */
@media (min-height: 768px) {
    html[data-nav-page="home"] #homeView .home-landing-hero {
        padding-bottom: var(--home-hint-strip);
    }
}
html[data-nav-page="home"] #homeView .home-landing-hero-inner {
    /* Wider page-1 rail so a larger center gap does not crush the two columns.
       Page-2 padding (home-dashboard-screen-inner) stays untouched. */
    width: 100%;
    /* 1440 left 240px of dead margin EACH SIDE at 1920 (measured: the rail sat
       at x=232.5 inside 80px of hero padding, so 160px of it was pure centring
       slack), and the board column is capped, so that slack came straight out
       of the chart. Measured plot area was 320px at 1920 and 316px at 2560 --
       NARROWER than the 627px the same board gets at 1100px wide, where the
       hero stacks and the cap is released. The board being widest on a small
       laptop and narrowest on a 4K monitor is the defect.

       1444 rather than 1500, and the 56px is not slack: `#homeView` is a
       scroll-snap pager, and the number that must match screen 1 is the
       CONTENT rail, not the border box. `.home-dashboard-screen-inner` caps
       itself at 1500px but then insets its content by `padding: 16px 28px`,
       so its content rail is 1500 - 56 = 1444. This screen has no such
       padding, so 1444 here puts both content edges on the same x.

       Setting this to 1500 to "match" screen 1 is the trap, and it measures
       WORSE than the 1440 it replaced: matching the border boxes lands both
       at x=202.5 while the content edges sit 28px apart at 1920 and 2560,
       against 2px before. 1440 was very nearly right by accident -- its 60px
       under-size was almost exactly screen 1's 56px of padding. Move this
       only together with screen 1's rail OR its padding; pinned by
       test_the_two_pager_screens_share_one_content_rail. */
    max-width: 1444px;
    margin-inline: auto;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 6.8rem);
    box-sizing: border-box;
}
html[data-nav-page="home"] #homeView .home-landing-hero-copy {
    flex: 1 1 0;
    min-width: 0;
    /* Extra inset so large headlines never sit on the viewport edge (Mac / wide laptops). */
    padding-inline-start: clamp(0px, 2vw, 24px);
}
/* `align-self: stretch` is what makes the panel's own `height: 100%` mean
   anything. `.home-landing-hero-inner` is `align-items: center`, so without
   this the board's cross size comes from its CONTENT, the percentage below
   resolves against an indefinite height and falls back to `auto`, and the
   panel grows past the hero -- which is `overflow: hidden`, so it is silently
   CUT rather than scrolled. That shipped: the panel header and the footer
   button were off-screen at 1280x720, 1366x768, 1201x760 and 1240x700, with no
   scrollbar and nothing failing. Stretch gives the board the row's definite
   height, which is the only thing that lets the rules below bound the panel. */
html[data-nav-page="home"] #homeView .home-landing-board {
    /* Grows FASTER than the copy column rather than splitting 1:1. The copy is
       a headline, a one-line lede and two buttons -- it stops improving past
       ~720px, while the board holds a chart whose plot area is what this whole
       screen is for. The endpoint rail needs a measured ~220px floor
       (boardLabelBlockWidth) no matter how wide the card is, so at 660px of
       card that rail WAS 40% of the canvas; the fix is a bigger denominator,
       not a smaller rail.

       1.25 is a CEILING the headline sets, not a taste call, and it is the
       ceiling for THIS rail -- re-measure if the rail moves. Copy width is
       (rail - gap) / (1 + ratio) less a 24px inset, and the tightest viewport
       is NOT the narrowest: `gap: clamp(2.5rem, 5vw, 6.8rem)` keeps growing to
       108.8px while the rail is pinned at 1444, so the copy column shrinks
       above ~1744 and bottoms out at 2176+ (both clamps sit at their maximum
       there, so nothing wider is tighter).

       TWO bounds stack here and they swap over, which an earlier table missed
       by measuring only the first: the copy column (this ratio) and the
       headline's OWN `max-width: 36rem` = 576px, further down this file. Below
       ~1650px of viewport the column is narrower than 576 and the ratio binds;
       above it the column clears 576, the h1 stops at its cap, and the ratio
       stops mattering at all. Slack below is measured for the shipped accent
       line, "each model ranks", against the h1's laid-out content width --
       min(column, 576) -- and not against the column, Inter loaded, with W
       marking a headline that actually wrapped (rendered height, not
       arithmetic):

         ratio   1201   1600   1744   1920   2176
         1.25   +57.0  +68.9  +26.5  +26.5  +26.5
         1.30   +48.0  +66.9  +26.5  +26.5  +20.5
         1.35   +39.0  +54.9  +17.5  +13.5   +8.5
         1.38   +34.0  +47.9  +10.5   +6.5   +1.5
         1.40   +30.0  +42.9   +5.5   +2.5   -3.5W

       MEASURED-HEADLINE: "each model ranks"

       That line is what the guard reads, and it is a marker rather than prose
       on purpose: this comment names the RETIRED headline too, a few lines
       down, so a check that merely looks for the shipped string SOMEWHERE in
       the block is satisfied by the history -- revert screen 0 and it still
       passes, over a grid measured for the other copy. One line, one quoted
       string, nothing else quoted on it.

       The flat +26.5 across 1744-2176 is the cap binding, not a coincidence.
       The ceiling is now ~1.38. It was 1.28 for the previous headline, "AI
       models finished", which is 25.6px wider: that copy wrapped at 1.30 (2176)
       and at 1.35 from 1744 up, and at the shipped 1.25 it cleared its cap by
       +1.0px at every viewport from 1744 -- one pixel, at three of five widths
       measured. A font update or one longer word would have wrapped it, and the
       column-only table read that as +17/+13/+7.7 of headroom.

       So this number is deliberately NOT raised to its new ceiling: the copy
       got shorter, the constraint did not get looser, and the next headline
       spends the margin again. Raising it is still not free; re-measure at 2176
       and up, and against the cap. Pinned by
       test_the_board_ratio_leaves_the_headline_room.

       Shrink is 0, written into the shorthand. The rule this replaced read
       `flex: 1 1 0` with a `flex-shrink: 0` three lines below overriding the `1`,
       so the source said the two columns were symmetric and the computed style
       said otherwise.

       `max-width: none` is load-bearing and must not be "tidied" away. The
       unscoped `.home-landing-board` rule further down carries `max-width:
       42rem`, which this rule's own cap used to mask. Simply DELETING the cap
       here does not uncap the column -- it hands it to that 42rem, measured
       pinning the board to 672px at 1600/1920/2560 and silently undoing most
       of this fix. The cap is dropped rather than re-tuned because the rail's
       1444px already bounds this column to ~740px (measured peak 740.5 around
       1744), so any number written here is either dead -- the 42rem it replaces
       never applied above 1200px -- or a second constant to keep in step with
       the rail. */
    flex: 1.25 0 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    display: flex;
    align-self: stretch;
    min-height: 0;
}
/* The pager clips rather than scrolls (.home-pager-screen is overflow:hidden),
   so the panel is sized against the viewport, not left to its content.
   It takes the whole hero row: measured at 1440x900 the panel's fixed chrome
   (head 44 + meta 49 + table head 26 + Season-0 note 62 + footer button 36 +
   padding 36 = 253) leaves 267px of a 520px cap, and seven rows need 202 -- so
   under the old cap a chart had ~0px, and a negative budget at 1366x768.
   Above 1200px the hero is a flex ROW, so the cap was never load-bearing for
   the copy column; it was a card proportion chosen when this panel held only a
   table.

   SEVEN ROWS DO NOT FIT AT EVERY HEIGHT, and that is the honest outcome rather
   than a shortfall. At 1280x720 the hero row is 571px against 642px of
   content (253 chrome + 187 chart + 202 rows), so something has to give; the
   list is `overflow-y: auto` precisely so it is the thing that gives. An
   earlier revision of this comment claimed "7/7 rows visible with zero clip
   across 1280x720 -> 1920x1080", which was true only because the panel was
   overflowing the hero -- every row was inside the LIST, and the list was
   outside the SCREEN. Re-measure rather than re-reason if the chrome above
   changes; every height in this design is a browser measurement.

   That instruction has been acted on once: the scroll hint's reserve changes
   the chrome by `--home-hint-strip`, but only at `min-height: 768px` and up.
   The 1280x720 figures above are BELOW that gate and still measure exactly as
   written (hero row 528px, unchanged from before the reserve existed). Above
   it the row is shorter -- measured 697 -> 628 at 1440x900, 866 -> 803 at
   1920x1080, 573 -> 500 at 1366x768 -- and the gate sits where that subtraction
   measured free: seven rows still visible, panel overflow 0. An UNGATED
   reserve is what made those numbers wrong, and it clipped the footer button
   below ~690px of viewport; see the reserve's own comment. */
html[data-nav-page="home"] #homeView .home-landing-board .home-module {
    height: 100%;
    min-height: 0;
    max-height: none;
}

/* Below 1200px the hero stacks to a column (see the unscoped rule further down).
   On screen 1 that is harmless; here it is not. `.home-pager-screen` is
   `height:100%; overflow:hidden` inside a scroll-snap pager, so a stacked
   column taller than the screen is CLIPPED, not scrolled — the last standings
   rows simply vanish and the scroll hint lands on top of the table. The board
   is the content of this screen now, so it takes the leftover height and lets
   its own row list scroll (`.home-module-rank-list` is already overflow-y:auto,
   which needs a parent with a real bounded height to do anything). */
@media (max-width: 1200px) {
    /* Where even the shrunk copy is not enough — a short window, ~700px tall —
       screen 0 scrolls rather than swallowing rows. Flexing the panel down to
       nothing left a board with a visible header, a visible footer and ZERO
       standings between them, which is worse than a scrollbar. The board keeps
       a real minimum height and the screen gives way instead. */
    html[data-nav-page="home"] #homeView #homeScreenLanding {
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    html[data-nav-page="home"] #homeView .home-landing-hero {
        height: auto;
        min-height: 100%;
        /* Reserves the scroll hint's own strip. The hint is position:absolute
           at bottom:18px and measures 56px tall, so the band it occupies is
           74px -- the "~50px" this comment used to quote was the estimate that
           was wrong by 6px, and it outlived the literals it described. The
           value is the shared token for that reason: the desktop reserve spends
           the same one and the guard reads it, so there is nothing left here to
           drift out of step. See `--home-hint-strip`. */
        padding-block: clamp(14px, 2vh, 28px) var(--home-hint-strip);
    }
    html[data-nav-page="home"] #homeView .home-landing-hero-inner {
        min-height: 0;
        gap: clamp(14px, 2.2vh, 24px);
    }
    html[data-nav-page="home"] #homeView .home-landing-hero-copy {
        flex: 0 0 auto;
    }
    /* The copy shrinks so the board keeps the height. Stacked, the two compete
       for one clipped screen, and the headline winning meant a leaderboard
       showing two of seven rows — the screen exists to show the board. */
    html[data-nav-page="home"] #homeView .home-landing-headline {
        font-size: clamp(1.75rem, 3.5vw, 2.4rem);
        margin-bottom: 10px;
    }
    html[data-nav-page="home"] #homeView .home-landing-headline .home-headline-line--2,
    html[data-nav-page="home"] #homeView .home-landing-headline .home-headline-accent {
        margin-top: 0.2em;
    }
    html[data-nav-page="home"] #homeView .home-landing-lede {
        margin: 0 auto 14px;
        font-size: 14px;
        line-height: 1.5;
    }
    html[data-nav-page="home"] #homeView .home-landing-cta {
        min-height: 42px;
        padding: 10px 22px;
        font-size: 15px;
    }
    html[data-nav-page="home"] #homeView .home-landing-ctas {
        gap: 12px;
    }
    html[data-nav-page="home"] #homeView .home-landing-board {
        flex: 1 1 auto;
        min-height: 0;
        max-width: 100%;
    }
    html[data-nav-page="home"] #homeView .home-landing-board .home-module {
        height: auto;
        min-height: 400px;
        max-height: none;
    }
}
html[data-nav-page="home"] #homeView .home-dashboard-screen-inner {
    height: 100%;
    box-sizing: border-box;
    padding: 16px 28px 20px;
    display: flex;
    flex-direction: column;
    max-width: 1500px;
    width: 100%;
    margin-inline: auto;
    overflow: hidden;
}
html[data-nav-page="home"] #homeView .home-modules {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
html[data-nav-page="home"] #homeView .dashboard-top-grid {
    flex: 1.12 1 0;
    min-height: 0;
    display: grid;
    /* Three equal columns so bottom row can span 2+1 and align to the same rails.
       The ranking module left this grid for screen 0, so Portfolio takes the
       2-wide slot Market holds below it and the rails still line up. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
html[data-nav-page="home"] #homeView .dashboard-top-grid .home-module--portfolio {
    grid-column: span 2;
}
html[data-nav-page="home"] #homeView .dashboard-bottom-grid {
    flex: 0.98 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
html[data-nav-page="home"] #homeView .dashboard-bottom-grid .home-module--market {
    grid-column: span 2;
}

/* display:* rules on cards must not override the HTML hidden attribute */
#homeModules [hidden] { display: none !important; }

/* --- Dashboard polish additions --- */
.hm-demo-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(148, 163, 184, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(148, 163, 184, 0.08);
    white-space: nowrap;
}
.hm-demo-badge[hidden] { display: none !important; }
.hm-demo-badge--quiet {
    font-weight: 600;
    color: var(--text-muted);
}
.hm-demo-note {
    margin: -4px 0 10px;
    font-size: 11px;
    color: var(--text-muted);
}
.hm-metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 8px;
    flex-shrink: 0;
}
.hm-metric {
    padding: 8px 9px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(8, 14, 28, 0.45);
}
.hm-metric-label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.hm-metric-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.hm-workflow {
    list-style: none;
    margin: auto 0 0;
    padding: 10px 0 0;
    display: flex;
    align-items: center;
    gap: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    font-size: 11px;
    font-weight: 650;
    color: var(--text-muted);
}
.hm-workflow li {
    display: inline-flex;
    align-items: center;
}
.hm-workflow li:not(:last-child)::after {
    content: "→";
    margin: 0 8px;
    color: rgba(148, 163, 184, 0.55);
    font-weight: 500;
}
.hm-rank-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    margin: -4px 0 10px;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Shown only when the rankings above are the hard-coded sample roster. */
.hm-rank-sample {
    margin: 8px 0 0;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 165, 0, 0.35);
    background: rgba(255, 165, 0, 0.09);
    color: var(--warning-color);
    font-size: 11.5px;
    line-height: 1.45;
}

.hm-rank-season {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

.hm-inline-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: rgba(34, 211, 238, 0.9);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hm-inline-link:hover {
    color: var(--home-accent-cyan);
}
.hm-method-link {
    color: rgba(34, 211, 238, 0.85);
    text-decoration: none;
    font-weight: 600;
}
.hm-method-link:hover { text-decoration: underline; }
.hm-type-badge {
    display: inline-flex;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: middle;
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(148, 163, 184, 0.06);
}
.hm-type-badge--model { color: rgba(125, 211, 252, 0.95); border-color: rgba(56, 189, 248, 0.25); }
.hm-type-badge--baseline { color: rgba(196, 181, 253, 0.95); border-color: rgba(167, 139, 250, 0.25); }
.hm-type-badge--index { color: rgba(148, 163, 184, 0.95); }
.hm-rank-entry {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
    overflow: hidden;
}
.hm-rank-entry .home-module-rank-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hm-type-badge { flex-shrink: 0; }
.hm-source-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}
.hm-source-label:hover { color: rgba(34, 211, 238, 0.9); }
.hm-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.hm-side-label {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.hm-quote-list li:hover {
    border-color: rgba(34, 211, 238, 0.25);
    background: rgba(34, 211, 238, 0.05);
}
.hm-port-footer {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    padding-top: 8px;
}
.home-module-cta { width: auto; }


.home-module {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(165deg, #141c2e 0%, #0d1322 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.03);
    overflow: hidden;
}
.home-module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.home-module-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(226, 232, 240, 0.92);
}
.home-module-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--home-accent-cyan);
    border: 1px solid rgba(34, 211, 238, 0.28);
    background: rgba(34, 211, 238, 0.08);
}
.home-module-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.home-module-name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.home-module-desc {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.45;
    max-width: 28ch;
}
.home-module-link {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 10px;
    align-self: flex-start;
    border: none;
    background: none;
    color: var(--home-accent-cyan);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.home-module-link:hover { text-decoration: underline; }
.hm-head-link { margin: 0; padding: 0; }
.hm-mini-btn {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.7);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}
.hm-mini-btn--ghost {
    border-color: rgba(34, 211, 238, 0.45);
    color: var(--home-accent-cyan);
    background: rgba(34, 211, 238, 0.08);
}
.hm-mini-btn--accent {
    border-color: transparent;
    color: #041018;
    background: linear-gradient(135deg, #22d3ee, #38bdf8);
    box-shadow: 0 2px 10px rgba(34, 211, 238, 0.18);
}
.hm-footer-btn {
    margin-top: auto;
    flex-shrink: 0;
    width: 100%;
    border: 1px solid rgba(34, 211, 238, 0.32);
    background: rgba(34, 211, 238, 0.05);
    color: var(--home-accent-cyan);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}
.hm-footer-btn:hover { background: rgba(34, 211, 238, 0.12); }
.hm-footer-btn[hidden] { display: none !important; }
.home-module--portfolio {
    overflow: hidden;
}
.home-module--portfolio .home-module-head {
    margin-bottom: 6px;
}
.home-module--portfolio .hm-footer-btn {
    padding: 8px 12px;
}

/* Portfolio */
.hm-port-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.hm-port-user-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.home-module--portfolio .home-module-name {
    font-size: 13.5px;
}
.home-module-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    color: #041018;
    background: linear-gradient(135deg, #22d3ee, #38bdf8);
    flex-shrink: 0;
}
.hm-port-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 0;
    align-items: end;
    margin-bottom: 6px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}
.hm-port-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px 0 0;
    min-width: 0;
}
.hm-port-metric--side {
    padding: 0 0 1px 12px;
    border-left: 1px solid rgba(148, 163, 184, 0.16);
}
.hm-port-metric-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hm-port-metric-value {
    font-size: 14px;
    font-weight: 700;
    color: #e5e7eb;
    letter-spacing: -0.02em;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.hm-port-metric--equity .hm-port-metric-value {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
}
.hm-port-metric-value em {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 2px;
}
.hm-port-range {
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
    flex-shrink: 0;
}
.hm-range-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 650;
    padding: 3px 7px;
    border-radius: 6px;
    cursor: pointer;
}
.hm-range-btn.is-active {
    color: var(--home-accent-cyan);
    background: rgba(34, 211, 238, 0.12);
}
.hm-port-figure {
    position: relative;
    margin: 0 0 8px;
    flex: 1 1 auto;
    min-height: 132px;
    max-height: none;
    display: flex;
    align-items: stretch;
}
.hm-port-chart {
    width: 100%;
    height: 100%;
    min-height: 132px;
    display: block;
}
.hm-port-tooltip {
    position: absolute;
    z-index: 5;
    min-width: 132px;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(10, 14, 28, 0.94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.35;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 10px));
}
.hm-port-tooltip[hidden] { display: none !important; }
.hm-port-tooltip strong {
    display: block;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    margin: 2px 0;
}
.hm-port-tooltip .hm-port-tip-chg.is-pos { color: #4ade80; }
.hm-port-tooltip .hm-port-tip-chg.is-neg { color: #f87171; }
.hm-port-tooltip .hm-port-tip-chg.is-flat { color: var(--text-muted); }
.hm-port-footer {
    margin-top: auto;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.hm-port-alloc-block { min-width: 0; }
.hm-port-alloc-title {
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.hm-port-alloc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
}
.hm-donut {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}
.hm-alloc-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 11.5px;
    color: var(--text-secondary);
    min-width: 0;
}
.hm-alloc-legend li {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.hm-alloc-legend li:last-child { border-bottom: none; padding-bottom: 0; }
.hm-alloc-legend li:first-child { padding-top: 0; }
.hm-alloc-legend strong {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hm-alloc-legend em {
    font-style: normal;
    color: var(--text-muted);
    width: 36px;
    text-align: right;
    white-space: nowrap;
}
.hm-alloc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hm-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.hm-dot--cash { background: #22d3ee; }
.hm-dot--stocks { background: #22c55e; }
.hm-dot--crypto { background: #a78bfa; }
.hm-buying-power {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.3;
}
.hm-buying-power strong { color: var(--home-accent-cyan); }

/* Agent — team overview (not a single-agent detail card) */
.hm-head-outline-btn {
    appearance: none;
    flex-shrink: 0;
    margin: 0;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: transparent;
    color: rgba(226, 232, 240, 0.88);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hm-head-outline-btn:hover {
    border-color: rgba(34, 211, 238, 0.4);
    color: var(--home-accent-cyan, #22d3ee);
    background: rgba(34, 211, 238, 0.06);
}
.hm-agent-empty {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 12px;
    min-height: 0;
    padding: 20px 12px;
}
.hm-agent-empty-copy {
    margin: 0;
    max-width: 22em;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-muted);
}
.hm-agent-empty-cta {
    appearance: none;
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.08);
    color: var(--home-accent-cyan, #22d3ee);
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: 0.01em;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hm-agent-empty-cta:hover {
    background: rgba(34, 211, 238, 0.14);
    border-color: rgba(34, 211, 238, 0.5);
    color: #67e8f9;
}
.hm-agent-filled {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.hm-agent-filled[hidden],
.hm-agent-empty[hidden] {
    display: none !important;
}
.home-module--agent .home-module-head {
    margin-bottom: 10px;
}
.hm-agent-overview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    flex: 1;
}
.hm-agent-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    flex-shrink: 0;
    padding: 2px 0 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.hm-agent-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.hm-agent-stat-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: rgba(248, 250, 252, 0.96);
    line-height: 1;
}
.hm-agent-stat--paper .hm-agent-stat-value {
    color: var(--home-accent-cyan, #22d3ee);
}
.hm-agent-stat--idle .hm-agent-stat-value {
    color: rgba(148, 163, 184, 0.95);
}
.hm-agent-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hm-agent-activity {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    flex: 1 1 auto;
}
.hm-agent-activity-label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    flex-shrink: 0;
}
.hm-agent-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    overflow: auto;
}
.hm-agent-activity-list li { margin: 0; padding: 0; }
.hm-agent-activity-row {
    appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    text-align: left;
    margin: 0;
    padding: 7px 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.hm-agent-activity-row:hover {
    background: rgba(34, 211, 238, 0.06);
}
.hm-agent-activity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 5px;
    background: rgba(148, 163, 184, 0.65);
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.1);
}
.hm-agent-activity-dot.is-cyan,
.hm-agent-activity-dot.is-paper {
    background: var(--home-accent-cyan, #22d3ee);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
}
.hm-agent-activity-dot.is-pos,
.hm-agent-activity-dot.is-backtest {
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.12);
}
.hm-agent-activity-dot.is-neg {
    background: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}
.hm-agent-activity-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text-secondary);
}
.hm-agent-activity-name {
    font-weight: 700;
    color: rgba(226, 232, 240, 0.94);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hm-agent-activity-desc {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hm-agent-activity-badge {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}
.hm-agent-activity-badge.is-pos {
    color: #86efac;
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.22);
}
.hm-agent-activity-badge.is-neg {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.22);
}
.hm-agent-activity-time {
    color: var(--text-muted);
    white-space: nowrap;
    font-size: 11px;
    margin-top: 2px;
}
.hm-agent-activity-empty {
    margin: 0;
    padding: 8px 2px 0;
    font-size: 12.5px;
    color: var(--text-muted);
}
@media (max-width: 820px) {
    .hm-agent-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .hm-agent-stat {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
    }
    .hm-agent-stat-value { font-size: 18px; }
}

/* Screen 0's equity chart. `clamp(140px, 26vh, 280px)` yields 187-280px across
   1280x720 -> 1920x1080. Deliberately smaller than /'s clamp: this panel is
   bounded by the pager, / 's card by the document.

   `flex-grow: 0` so the list, which is `flex: 1 1 auto; overflow-y: auto`,
   absorbs SURPLUS height rather than the chart stretching. But `flex-shrink`
   is 1, not 0, so the chart also gives way first under a DEFICIT -- and there
   is a real deficit: at 1240x700 the panel gets 509px against 637px of
   content, and with a rigid chart the list was left showing ONE row of seven.
   The standings are this panel's subject and the chart is its illustration, so
   the illustration is what shrinks. `min-height` keeps it from collapsing to a
   sliver, which is the failure `flex: 0 0 auto` was originally guarding
   against -- a floor states that directly instead of buying it by refusing to
   shrink at all. */
.hm-rank-chart {
    flex: 0 1 auto;
    position: relative;
    height: clamp(140px, 26vh, 280px);
    min-height: 132px;
    margin-bottom: 10px;
}
.hm-rank-chart canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Leaderboard */
.hm-rank-table-head {
    display: grid;
    grid-template-columns: 22px minmax(0, 1.2fr) 72px 64px 48px;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding: 0 2px;
}
.hm-rank-table-head span:nth-child(n+3) { text-align: right; }
.home-module-rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
.home-module-rank-list::-webkit-scrollbar {
    width: 6px;
}
.home-module-rank-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 999px;
}
.home-module-rank-list::-webkit-scrollbar-track {
    background: transparent;
}
.home-module-rank-list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1.2fr) 72px 64px 48px;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    /* Tighter than the 8px list gap: the chart above took the height these rows
       used to spread into, and seven of them still have to fit without the
       pager clipping (it is overflow:hidden with no scrollbar). */
    padding-block: 3px;
    line-height: 1.35;
}
/* The identity link between a row and its curve; the list is the chart's
   legend, which is why the chart ships none of its own.

   Lives inside `.hm-rank-entry` (a flex cell) rather than as a direct child of
   the `<li>`, which is a five-column grid whose template mirrors
   `.hm-rank-table-head`. A sixth grid child shifts every cell one column right
   and silently unaligns the table from its own head -- `flex: 0 0 auto` below
   only means anything because the parent is the flex cell. Spacing comes from
   that parent's `gap: 4px`, so no margin here. */
.hm-rank-swatch {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.home-module-rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(148, 163, 184, 0.12);
}
.home-module-rank--1 { color: #041018; background: #fbbf24; }
.home-module-rank--2 { color: #041018; background: #94a3b8; }
.home-module-rank--3 { color: #041018; background: #d97706; }
.home-module-rank-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 600;
}
.hm-rank-ret, .hm-rank-sharpe, .hm-rank-value { text-align: right; font-variant-numeric: tabular-nums; }
.hm-rank-sharpe { color: var(--text-secondary); }
.hm-rank-value { color: var(--text-secondary); font-size: 11px; }
.home-module-rank-empty {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 0;
    grid-column: 1 / -1;
}

/* Market */
.hm-market-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.hm-market-title-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    justify-self: start;
}
.hm-market-head .hm-tabs {
    justify-self: center;
}
.hm-market-head .hm-source-label {
    justify-self: end;
    text-align: right;
}
.hm-tabs, .hm-side-tabs { display: flex; gap: 2px; }
.hm-tab, .hm-side-tab {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 650;
    padding: 4px 10px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.hm-tab.is-active, .hm-side-tab.is-active {
    color: var(--home-accent-cyan);
    border-bottom-color: var(--home-accent-cyan);
}
.hm-side-tab { font-size: 12px; padding: 3px 8px; }
.hm-market-grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.hm-market-feed {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-right: 0;
    margin-right: 0;
    border-right: none;
}
.hm-market-feed[hidden] {
    display: none !important;
}
.home-module-market-status {
    margin: 0 0 8px;
    font-size: 11.5px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.home-module-market-status[hidden] { display: none !important; }
.hm-news-list {
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
.hm-news-list::-webkit-scrollbar {
    width: 6px;
}
.hm-news-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 999px;
}
.hm-news-list::-webkit-scrollbar-track {
    background: transparent;
}
.hm-news-list li {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 10px;
    align-items: start;
    min-width: 0;
}
.hm-news-logo {
    width: 30px; height: 30px; border-radius: 8px;
    display: grid; place-items: center;
    font-size: 10px; font-weight: 800;
    color: #041018;
    background: linear-gradient(135deg, #94a3b8, #64748b);
}
.hm-news-logo--bull { background: linear-gradient(135deg, #86efac, #22c55e); }
.hm-news-logo--bear { background: linear-gradient(135deg, #fca5a5, #ef4444); }
.hm-news-logo--neut { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.hm-news-main { min-width: 0; }
.hm-news-main a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hm-news-main a:hover { color: var(--home-accent-cyan); }
.hm-news-meta {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.hm-sent {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.hm-sent--bullish { color: #86efac; background: rgba(34,197,94,0.12); }
.hm-sent--bearish { color: #fca5a5; background: rgba(239,68,68,0.12); }
.hm-sent--neutral { color: #cbd5e1; background: rgba(148,163,184,0.12); }
.home-module-news-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 0;
}
.hm-quote-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}
.hm-quote-list li {
    display: grid;
    grid-template-columns: 44px 1fr auto 52px;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(8, 14, 28, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.1);
}
.hm-quote-sym { font-weight: 700; color: var(--text-primary); }
.hm-quote-price { color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.hm-quote-chg { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.hm-quote-spark { width: 52px; height: 18px; }

/* Community */
.hm-community-head-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.hm-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12.5px;
    font-weight: 650;
    color: #86efac;
}
.hm-community-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.hm-community-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(8, 14, 28, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.1);
}
.hm-community-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1;
}
.hm-community-label { font-size: 11.5px; color: var(--text-muted); }
.hm-community-delta { font-size: 11px; font-weight: 650; }
.hm-activity-label {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--text-muted);
}
.hm-activity-list {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}
.hm-activity-list li {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    gap: 8px;
    align-items: start;
    font-size: 13px;
    color: var(--text-secondary);
}
.hm-act-dot {
    width: 7px; height: 7px; border-radius: 50%;
    margin-top: 5px;
    background: var(--home-accent-cyan);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}
.hm-activity-list time {
    color: var(--text-muted);
    white-space: nowrap;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
    html[data-nav-page="home"] #homeView .dashboard-top-grid {
        grid-template-columns: 1fr 1fr;
    }
    html[data-nav-page="home"] #homeView .dashboard-top-grid .home-module--portfolio {
        grid-column: 1 / -1;
    }
    html[data-nav-page="home"] #homeView .dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }
    html[data-nav-page="home"] #homeView .dashboard-bottom-grid .home-module--market {
        grid-column: auto;
    }
}
@media (max-width: 820px) {
    html[data-nav-page="home"] #homeView .home-dashboard-screen-inner {
        padding: 16px;
        overflow: auto;
    }
    html[data-nav-page="home"] #homeView .home-modules,
    html[data-nav-page="home"] #homeView .dashboard-top-grid,
    html[data-nav-page="home"] #homeView .dashboard-bottom-grid {
        display: flex;
        flex-direction: column;
        height: auto;
        flex: none;
    }
    .home-module { min-height: 320px; height: auto; }
}

.home-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: rgba(148, 163, 184, 0.9);
    cursor: pointer;
    transition: color 0.2s, opacity 0.25s;
}
.home-scroll-hint:hover { color: var(--home-accent-cyan); }
.home-scroll-hint-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.home-scroll-hint-icon {
    width: 22px;
    height: 22px;
    animation: home-scroll-bounce 1.6s ease-in-out infinite;
}
.home-scroll-hint.is-hidden { opacity: 0; pointer-events: none; }
@keyframes home-scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-nav-page="home"] #homeView .home-pager-track { scroll-behavior: auto; }
    .home-scroll-hint-icon { animation: none; }
}


.home-page {
    width: 100%;
    box-sizing: border-box;
    /* ~2× previous side gutters (was clamp(20px, 2vw, 40px) + max-width 1600px) */
    padding-inline: clamp(40px, 4vw, 80px);
}

.home-page__inner {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.8vw, 24px);
}

.tabular-nums { font-variant-numeric: tabular-nums; }
.positive { color: var(--home-positive-green); }
.negative { color: var(--home-negative-red); }

.home-view .ui-icon { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.home-view .ui-icon--inline { width: 14px; height: 14px; }
.home-view .ui-icon--discord { fill: currentColor; stroke: none; }

.home-view .icon-shell {
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid rgba(56, 189, 248, 0.22); border-radius: 10px;
    background: rgba(14, 165, 233, 0.08); flex-shrink: 0; color: var(--home-accent-cyan);
}
.home-view .icon-shell--sm { width: 30px; height: 30px; border-radius: 8px; }
.home-view .icon-shell--sm .ui-icon { width: 15px; height: 15px; }
.home-view .icon-shell--xs { width: 24px; height: 24px; border-radius: 6px; }
.home-view .icon-shell--xs .ui-icon { width: 13px; height: 13px; }
.home-view .icon-shell--discord { border-color: rgba(88,101,242,0.35); background: rgba(88,101,242,0.1); color: var(--home-discord-purple); }
.home-view .icon-shell--positive { border-color: rgba(34,197,94,0.28); background: rgba(34,197,94,0.08); color: var(--home-positive-green); }
.home-view .icon-shell--muted { border-color: var(--home-border-subtle); background: rgba(148,163,184,0.06); color: rgba(148,163,184,0.85); }

.home-live-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--home-positive-green); box-shadow: 0 0 8px rgba(34,197,94,0.55);
    animation: home-live-pulse 2s ease-in-out infinite;
}
.home-live-dot--lg { width: 8px; height: 8px; }

@keyframes home-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(0.92); }
}

.home-section-title {
    margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: none; color: rgba(148,163,184,0.85);
}

.home-link-btn {
    font-size: 12px; font-weight: 600; color: var(--home-accent-cyan);
    text-decoration: none; background: none; border: none; cursor: pointer; padding: 0;
}
.home-link-btn:hover { text-decoration: underline; }

.home-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: 9px; font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none; border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.home-btn[hidden] { display: none !important; }
.home-btn:disabled, .home-btn:disabled:hover { cursor: not-allowed; opacity: 0.5; box-shadow: none; filter: none; }
.home-btn-primary { background: var(--home-accent-cyan); color: #041018; border-color: var(--home-accent-cyan); box-shadow: 0 6px 24px rgba(34,211,238,0.24); }
.home-btn-primary:hover { filter: brightness(1.05); }
.home-btn-secondary { background: rgba(8,18,40,0.55); color: var(--text-primary); border-color: rgba(148,163,184,0.22); }
.home-btn-secondary:hover { border-color: rgba(88,101,242,0.45); background: rgba(88,101,242,0.1); }
.home-btn-outline { width: 100%; margin-top: 14px; background: transparent; color: var(--home-accent-cyan); border-color: rgba(34,211,238,0.3); }
.home-btn-outline:hover { background: rgba(34,211,238,0.08); }

/* Landing-style first viewport (ported from dashboard/landing Hero) */
.home-landing-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 148px);
    padding: clamp(28px, 4vh, 56px) 0 clamp(36px, 5vh, 72px);
    overflow: hidden;
    box-sizing: border-box;
}
.home-landing-hero-grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.3;
    background-image:
        linear-gradient(to right, rgba(30, 42, 74, 0.5) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(30, 42, 74, 0.5) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 80%);
    mask-image: radial-gradient(ellipse at center, black, transparent 80%);
}
.home-landing-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4rem;
    flex: 1 1 auto;
    min-height: 0;
}
.home-landing-hero-copy {
    flex: 1 1 0;
    min-width: 0;
}
.home-landing-headline {
    margin: 0 0 32px;
    max-width: 36rem;
    font-size: clamp(2.85rem, 3.9vw, 4.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #e5e7eb;
}
.home-landing-headline .home-headline-line {
    display: block;
    opacity: 0;
    transform: translateY(18px);
    animation: home-headline-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.home-landing-headline .home-headline-line--1 {
    animation-delay: 0.08s;
}
.home-landing-headline .home-headline-line--2,
.home-landing-headline .home-headline-accent {
    display: inline-block;
    margin-top: 0.42em;
    animation-delay: 0.42s;
}
@keyframes home-headline-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .home-landing-headline .home-headline-line {
        opacity: 1;
        transform: none;
        animation: none;
    }
}
.home-landing-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.home-landing-cta {
    min-height: 48px;
    padding: 12px 32px;
    font-size: 16px;
    border-radius: 9px;
    text-decoration: none;
}
.home-landing-lede {
    margin: -14px 0 28px;
    max-width: 34rem;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(226, 232, 240, 0.82);
}
.home-landing-board {
    flex: 1 1 0;
    width: 100%;
    max-width: 42rem;
    min-width: 0;
    flex-shrink: 0;
    display: flex;
}
/* The promoted board is a hero element, not a dashboard tile. `.home-module`
   takes `height: 100%`, which resolves against a sized grid cell on screen 1
   and against nothing here — so the panel carries its own height. */
.home-landing-board .home-module {
    width: 100%;
    height: 480px;
    max-height: 480px;
    padding: 18px 20px;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.home-landing-board .home-module-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
}
.hm-rank-title-icon {
    width: 18px;
    height: 18px;
    color: #fbbf24;
    flex-shrink: 0;
}
/* Wider rails than the one-third-width dashboard tile this markup was written
   for: "Ending value" does not fit the 72px column it used to sit in. */
.home-landing-board .hm-rank-table-head,
.home-landing-board .home-module-rank-list li {
    grid-template-columns: 26px minmax(0, 1.4fr) 96px 78px 62px;
    gap: 8px;
}
.home-landing-board .home-module-rank-list li { font-size: 13.5px; }
.home-landing-board .hm-rank-value { font-size: 12px; }

/* Live hero (former first screen: network + spotlight) */
.home-hero {
    position: relative; overflow: hidden;
    border: 1px solid rgba(34,211,238,0.3); border-radius: 14px;
    background: linear-gradient(135deg, rgba(8,18,42,0.98), rgba(10,14,39,0.98) 55%, rgba(7,24,45,0.98));
    box-shadow: 0 0 64px rgba(34,211,238,0.1), 0 20px 40px rgba(0,0,0,0.32);
    padding: clamp(24px, 2.5vw, 32px);
}
.home-live-section-title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: none;
    color: rgba(148, 163, 184, 0.85);
    position: relative;
    z-index: 2;
}
.home-live-hero .home-hero-left { min-height: 300px; }
.home-live-hero .hero-agent-network { bottom: 72px; }
.home-live-hero .home-hero-grid {
    grid-template-columns: 1fr;
}

.home-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 70% 60%, rgba(34,211,238,0.12) 0%, transparent 48%);
}
.home-hero-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(420px, 0.95fr);
    gap: 24px; align-items: stretch;
}
.home-hero-left { display: flex; flex-direction: column; min-width: 0; position: relative; min-height: 340px; padding-bottom: 8px; }
.home-eyebrow { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: none; color: var(--home-accent-cyan); }
.home-headline {
    margin: 0 0 12px; font-size: clamp(40px, 3.2vw, 58px); font-weight: 800;
    line-height: 1.05; letter-spacing: -0.04em; color: var(--text-primary);
    position: relative; z-index: 2;
}
.home-headline-accent {
    color: var(--home-accent-cyan);
}
.home-description { margin: 0 0 18px; color: var(--text-secondary); font-size: 15px; line-height: 1.6; max-width: 520px; position: relative; z-index: 2; }

.hero-agent-network {
    position: absolute;
    right: 0;
    bottom: 72px;
    width: min(92%, 620px);
    height: auto;
    opacity: 0.92;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}
.hero-agent-network-svg { display: block; width: 100%; height: auto; }

.network-ring--outer { animation: network-ring-drift 14s linear infinite; transform-origin: 360px 155px; }
.network-ring--inner { animation: network-ring-drift 10s linear infinite reverse; transform-origin: 360px 155px; }
.network-pulse-ring { animation: network-node-pulse 6s ease-in-out infinite; transform-origin: 360px 148px; }
.network-live-dot { animation: home-live-pulse 2.4s ease-in-out infinite; }
.network-agent-node { animation: network-node-float 8s ease-in-out infinite; }
.network-agent-node--green { animation-delay: 1.2s; }
.network-agent-node--purple { animation-delay: 2.4s; }

@keyframes network-ring-drift {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes network-node-pulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.04); }
}
@keyframes network-node-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.home-platform-metrics {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0; margin-top: auto; padding-top: 16px;
    border-top: 1px solid var(--home-border-subtle);
    position: relative; z-index: 2;
}
.home-platform-metric {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px; min-width: 0;
}
.home-platform-metric:not(:last-child) { border-right: 1px solid var(--home-border-subtle); }
.home-platform-metric:first-child { padding-left: 0; }
.home-platform-metric-icon { color: var(--home-accent-cyan); opacity: 0.9; }
.home-platform-metric-value { display: block; font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.home-platform-metric-label { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.home-metric-value--flash { color: var(--home-accent-cyan); transition: color 0.25s, transform 0.25s; transform: scale(1.04); }
.home-highlight-positive { color: var(--home-positive-green); font-weight: 700; }
.home-highlight-negative { color: var(--home-negative-red); font-weight: 700; }
.home-field--flash { background: rgba(34,211,238,0.08); border-radius: 6px; transition: background 0.25s; }

/* Spotlight */
.home-spotlight {
    display: flex; flex-direction: column; gap: 14px; padding: 20px 22px;
    background: var(--home-surface-inner); border: 1px solid var(--home-border-subtle);
    border-radius: 12px; min-width: 0; transition: box-shadow 0.25s, border-color 0.25s;
}
.home-spotlight--flash { border-color: rgba(34,211,238,0.35); box-shadow: 0 0 0 1px rgba(34,211,238,0.15), 0 0 24px rgba(34,211,238,0.12); }
.home-spotlight-header { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--home-border-subtle); }
.home-spotlight-title { margin: 0; flex: 1; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: none; }
.home-spotlight-agent { display: flex; gap: 12px; align-items: flex-start; }
.home-spotlight-agent-row { display: flex; align-items: center; gap: 6px; }
.home-spotlight-agent-name { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.home-verified { color: var(--home-accent-cyan); display: inline-flex; }
.home-spotlight-strategy { margin: 4px 0 6px; font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.home-spotlight-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
    padding: 12px 0; border-top: 1px solid var(--home-border-subtle); border-bottom: 1px solid var(--home-border-subtle);
}
.home-spotlight-stat { padding: 0 10px; min-width: 0; }
.home-spotlight-stat:not(:last-child) { border-right: 1px solid var(--home-border-subtle); }
.home-spotlight-stat:first-child { padding-left: 0; }
.home-spotlight-stat-label { display: block; font-size: 10px; text-transform: none; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; }
.home-spotlight-stat-value { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.home-spotlight-stat-value.positive { color: var(--home-positive-green); }
.home-spotlight-rank-context { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.home-sparkline { width: 40px; height: 16px; }
.home-sparkline--inline { display: block; margin-top: 4px; }
.home-spotlight-action-block { display: flex; flex-direction: column; gap: 6px; }
.home-spotlight-action-block--flash {
    background: rgba(34,211,238,0.06);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(34,211,238,0.2);
    padding: 8px;
    margin: -8px;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.home-spotlight-action-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.home-spotlight-action-label, .home-spotlight-footer-label { font-size: 10px; text-transform: none; letter-spacing: 0.05em; color: var(--text-muted); }
.home-spotlight-action-time { font-size: 11px; color: var(--text-muted); }
.home-spotlight-action-main { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.home-highlight-positive { color: var(--home-positive-green); font-weight: 700; }
.home-spotlight-rationale { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.home-spotlight-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--home-border-subtle); }
.home-spotlight-footer-value { font-size: 12px; font-weight: 600; color: var(--text-primary); }

/* Dashboard grid */
.home-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.15fr) minmax(300px, 1.05fr) minmax(250px, 0.85fr) minmax(260px, 0.9fr);
    gap: 14px;
}
.home-dash-card {
    padding: 18px 18px 16px; background: var(--home-surface-card);
    border: 1px solid var(--home-border-card); border-radius: 12px; min-width: 0;
    display: flex; flex-direction: column;
}
.home-dash-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.home-dash-subtitle { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }

.home-highlight-positive { color: var(--home-positive-green); font-weight: 700; }

/* News & signals panel (matches .home-dash-card chrome; full-width, not a grid item) */
.home-news-signals {
    padding: 18px 18px 16px; background: var(--home-surface-card);
    border: 1px solid var(--home-border-card); border-radius: 12px; min-width: 0;
}
.home-section-title-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.home-section-title-row .home-section-title { flex: 1; }
.nns-source-tag { font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: normal; margin-left: 4px; }
.nns-updated { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.nns-badge {
    display: inline-block; padding: 4px 8px; border-radius: 3px;
    font-size: 11px; font-weight: 600; text-transform: none;
    background-color: rgba(245, 158, 11, 0.15); color: var(--home-warning-amber);
}
.nns-overview { margin: 0 0 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

.nns-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nns-col h3 {
    margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: none; color: rgba(148,163,184,0.85);
}
.nns-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nns-item {
    padding: 9px 0; border-bottom: 1px solid var(--home-border-subtle);
    font-size: 12px; display: flex; flex-direction: column; gap: 3px;
}
.nns-list .nns-item:last-child { border-bottom: none; }
.nns-item a { color: var(--text-primary); font-weight: 600; text-decoration: none; line-height: 1.4; overflow-wrap: anywhere; }
.nns-item a:hover { color: var(--home-accent-cyan); text-decoration: underline; }
.nns-meta { color: var(--text-muted); font-size: 11px; }
.nns-empty { color: var(--text-muted); font-size: 12px; padding: 9px 0; }

.nns-signal { gap: 4px; }
.nns-chip {
    display: inline-block; align-self: flex-start; padding: 2px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0.03em;
}
.nns-bullish .nns-chip { color: var(--home-positive-green); background: rgba(34,197,94,0.15); }
.nns-bearish .nns-chip { color: var(--home-negative-red); background: rgba(239,68,68,0.15); }
.nns-neutral .nns-chip { color: var(--text-muted); background: rgba(107,114,128,0.15); }
.nns-score { color: var(--text-muted); font-size: 11px; }
.nns-rationale { color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.nns-src { align-self: flex-start; color: var(--home-accent-cyan); font-size: 11px; text-decoration: none; }
.nns-src:hover { text-decoration: underline; }

/* Timeline activity */
.home-dash-card--activity .home-timeline {
    min-height: 300px;
    max-height: 300px;
    overflow: hidden;
}
.home-timeline { display: flex; flex-direction: column; position: relative; padding-left: 4px; flex: 1; }
.home-timeline::before {
    content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px;
    background: linear-gradient(180deg, rgba(34,211,238,0.25), rgba(148,163,184,0.08));
}
.home-timeline-item {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px;
    padding: 10px 0; transition: opacity 0.25s ease, transform 0.25s ease;
}
.home-timeline-item--new { opacity: 0; transform: translateY(-10px); }
.home-timeline-item--highlight .home-timeline-body {
    background: rgba(34,211,238,0.06);
    border-left: 2px solid rgba(34,211,238,0.45);
    padding-left: 10px;
    margin-left: -10px;
    border-radius: 0 8px 8px 0;
    transition: background 0.25s, border-color 0.25s;
}
.home-timeline-item--blue .home-timeline-dot { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.4); }
.home-timeline-item--blue .home-timeline-action { color: #60a5fa; }
.home-timeline-dot {
    width: 9px; height: 9px; border-radius: 50%; margin-top: 4px;
    background: var(--home-accent-cyan); box-shadow: 0 0 8px rgba(34,211,238,0.4);
}
.home-timeline-item--green .home-timeline-dot { background: var(--home-positive-green); box-shadow: 0 0 8px rgba(34,197,94,0.4); }
.home-timeline-item--red .home-timeline-dot { background: var(--home-negative-red); box-shadow: 0 0 8px rgba(239,68,68,0.35); }
.home-timeline-item--amber .home-timeline-dot { background: var(--home-warning-amber); box-shadow: 0 0 8px rgba(245,158,11,0.35); }
.home-timeline-item--purple .home-timeline-dot { background: var(--home-discord-purple); }
.home-timeline-item--cyan .home-timeline-dot { background: var(--home-accent-cyan); }
.home-timeline-rail { display: flex; justify-content: center; }
.home-timeline-body { min-width: 0; }
.home-timeline-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; }
.home-timeline-time { font-size: 11px; color: var(--text-muted); }
.home-timeline-icon { color: rgba(148,163,184,0.7); }
.home-timeline-text { margin: 0 0 2px; font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.home-timeline-action { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--home-accent-cyan); }
.home-timeline-item--green .home-timeline-action { color: var(--home-positive-green); }
.home-timeline-item--red .home-timeline-action { color: var(--home-negative-red); }
.home-timeline-item--amber .home-timeline-action { color: var(--home-warning-amber); }
.home-timeline-context { margin: 0; font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* Leaderboard */
.home-leaderboard-wrap {
    overflow-x: auto;
    margin-bottom: 4px;
    flex: 1;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(71, 85, 105, 0.55) rgba(8, 18, 40, 0.35);
}
.home-leaderboard-wrap::-webkit-scrollbar { height: 5px; }
.home-leaderboard-wrap::-webkit-scrollbar-track {
    background: rgba(8, 18, 40, 0.35);
    border-radius: 999px;
}
.home-leaderboard-wrap::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.55);
    border-radius: 999px;
}
.home-leaderboard-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.72);
}
.home-leaderboard { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.home-leaderboard th {
    text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: none; color: var(--text-muted); padding: 0 4px 8px; border-bottom: 1px solid var(--home-border-subtle);
}
.home-leaderboard td {
    padding: 8px 4px; border-bottom: 1px solid var(--home-border-subtle);
    color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-leaderboard tbody tr:last-child td { border-bottom: none; }
/* Home preview: core columns only — avoids a loud horizontal scrollbar in the card */
.home-dash-card--agents .home-leaderboard th:nth-child(5),
.home-dash-card--agents .home-leaderboard th:nth-child(6),
.home-dash-card--agents .home-leaderboard td:nth-child(5),
.home-dash-card--agents .home-leaderboard td:nth-child(6) { display: none; }
.home-dash-card--agents .home-leaderboard th:nth-child(1),
.home-dash-card--agents .home-leaderboard td:nth-child(1) { width: 14%; }
.home-dash-card--agents .home-leaderboard th:nth-child(2),
.home-dash-card--agents .home-leaderboard td:nth-child(2) { width: 34%; }
.home-dash-card--agents .home-leaderboard th:nth-child(3),
.home-dash-card--agents .home-leaderboard td:nth-child(3) { width: 28%; text-align: right; }
.home-dash-card--agents .home-leaderboard th:nth-child(4),
.home-dash-card--agents .home-leaderboard td:nth-child(4) { width: 24%; text-align: right; }
.home-dash-card--agents .home-leaderboard-wrap { overflow-x: hidden; }
.home-agent-cell { display: inline-flex; align-items: center; gap: 6px; }
.home-rank-badge {
    display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
    font-size: 11px; font-weight: 700; background: rgba(148,163,184,0.12); color: var(--text-secondary);
}
.home-rank-badge--1 { background: rgba(234,179,8,0.15); color: #fbbf24; }
.home-rank-badge--2 { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.home-rank-badge--3 { background: rgba(180,83,9,0.15); color: #fb923c; }
.home-rank-move { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; }
.home-rank-move.up { color: var(--home-positive-green); }
.home-rank-move.down { color: var(--home-negative-red); }
.home-rank-move.flat { color: var(--text-muted); }

/* Season card */
.home-season-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 6px; }
.home-season-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.home-season-window { margin: 0 0 4px; font-size: 13px; color: var(--text-secondary); }
.home-season-days { margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--home-accent-cyan); }
.home-season-counts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.home-season-count { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.home-progress-labels { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.home-progress-value { font-size: 12px; font-weight: 700; color: var(--home-accent-cyan); }
.home-progress-track { height: 7px; border-radius: 999px; background: rgba(8,18,40,0.75); overflow: hidden; }
.home-progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0891b2, var(--home-accent-cyan)); }

/* Market pulse */
.home-pulse-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.home-pulse-tab {
    padding: 5px 10px; border-radius: 999px; border: 1px solid var(--home-border-subtle);
    background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.home-pulse-tab.active, .home-pulse-tab:hover { border-color: rgba(34,211,238,0.35); color: var(--home-accent-cyan); background: rgba(34,211,238,0.06); }
.home-pulse-list { display: flex; flex-direction: column; gap: 0; flex: 1; margin-bottom: 4px; }
.home-pulse-row {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
    padding: 9px 0; border-bottom: 1px solid var(--home-border-subtle); font-size: 12px;
    transition: background 0.25s, box-shadow 0.25s;
}
.home-pulse-row:hover { background: rgba(34,211,238,0.04); border-radius: 6px; padding-inline: 6px; margin-inline: -6px; }
.home-pulse-row--flash { background: rgba(34,211,238,0.1); box-shadow: inset 0 0 0 1px rgba(34,211,238,0.25); border-radius: 6px; padding-inline: 6px; margin-inline: -6px; }
.home-pulse-muted { color: var(--text-muted); font-size: 11px; }
.home-pulse-row:last-child { border-bottom: none; }
.home-pulse-ticker { font-weight: 700; color: var(--text-primary); }
.home-pulse-agents { color: var(--text-muted); font-size: 11px; }
.home-pulse-change.positive { color: var(--home-positive-green); font-weight: 600; }
.home-sparkline { flex-shrink: 0; }

/* Insights */
.home-insights-heading { margin-bottom: 12px; }
.home-insights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-insight-card {
    padding: 18px; background: var(--home-surface-card); border: 1px solid var(--home-border-card);
    border-radius: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.home-insight-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.home-insight-stat { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; flex: 1; }

/* Resources */
.home-resources { margin-top: 28px; }
.home-resources-heading { margin-bottom: 14px; }
.home-resources-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.home-resource-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--home-surface-card);
    border: 1px solid var(--home-border-card);
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    min-width: 0;
    text-align: left;
    font: inherit;
}
.home-resource-card:hover {
    border-color: rgba(34,211,238,0.35);
    background: rgba(34,211,238,0.04);
}
.home-resource-card--button { width: 100%; }
.home-resource-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.home-resource-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.home-resource-subtitle { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.home-resource-arrow { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; transition: color 0.2s ease, transform 0.2s ease; }
.home-resource-card:hover .home-resource-arrow { color: var(--home-accent-cyan); transform: translateX(2px); }
.home-timeline-fallback,
.home-pulse-fallback {
    margin: 0;
    padding: 24px 8px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 1024px) {
    .home-resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .home-resources-grid { grid-template-columns: 1fr; }
}

/* Live toast */
.home-live-toast {
    position: fixed; right: 24px; bottom: 24px; z-index: 1000;
    width: min(360px, calc(100vw - 48px)); padding: 16px 18px;
    background: rgba(10, 18, 40, 0.96); border: 1px solid rgba(34,211,238,0.35);
    border-radius: 12px; box-shadow: 0 0 32px rgba(34,211,238,0.15), 0 16px 40px rgba(0,0,0,0.45);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-sizing: border-box;
    overflow: hidden;
}
.home-live-toast .ui-icon {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}
.home-live-toast--visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.home-live-toast-close {
    position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
    display: grid; place-items: center; border: none; border-radius: 6px;
    background: rgba(148,163,184,0.08); color: var(--text-muted); cursor: pointer;
    padding: 0;
}
.home-live-toast-close .ui-icon { width: 14px; height: 14px; }
.home-live-toast-close:hover { color: var(--text-primary); background: rgba(148,163,184,0.14); }
.home-live-toast-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-right: 28px; }
.home-live-toast-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: none; color: var(--home-accent-cyan); line-height: 1.3; }
.home-live-toast-body { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.home-live-toast-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 8px;
    background: rgba(14, 165, 233, 0.08);
    color: var(--home-accent-cyan);
}
.home-live-toast-icon .ui-icon { width: 15px; height: 15px; }
.home-live-toast-content { flex: 1; min-width: 0; }
.home-live-toast-agent { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.35; overflow-wrap: anywhere; }
.home-live-toast-action { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--home-positive-green); line-height: 1.4; overflow-wrap: anywhere; }
.home-live-toast-rationale { margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.45; font-style: italic; overflow-wrap: anywhere; }
.home-live-toast--green { border-color: rgba(34,197,94,0.4); box-shadow: 0 0 32px rgba(34,197,94,0.12), 0 16px 40px rgba(0,0,0,0.45); }
.home-live-toast--green .home-live-toast-action { color: var(--home-positive-green); }
.home-live-toast--green .home-live-toast-icon { border-color: rgba(34,197,94,0.28); background: rgba(34,197,94,0.08); color: var(--home-positive-green); }
.home-live-toast--red { border-color: rgba(239,68,68,0.4); box-shadow: 0 0 32px rgba(239,68,68,0.1), 0 16px 40px rgba(0,0,0,0.45); }
.home-live-toast--red .home-live-toast-action { color: var(--home-negative-red); }
.home-live-toast--red .home-live-toast-icon { border-color: rgba(239,68,68,0.28); background: rgba(239,68,68,0.08); color: var(--home-negative-red); }
.home-live-toast--cyan { border-color: rgba(34,211,238,0.35); }
.home-live-toast--cyan .home-live-toast-action { color: var(--home-accent-cyan); }
.home-live-toast--blue { border-color: rgba(59,130,246,0.35); box-shadow: 0 0 32px rgba(59,130,246,0.1), 0 16px 40px rgba(0,0,0,0.45); }
.home-live-toast--blue .home-live-toast-action { color: #60a5fa; }
.home-live-toast--blue .home-live-toast-icon { border-color: rgba(59,130,246,0.28); background: rgba(59,130,246,0.08); color: #60a5fa; }

@media (max-width: 1200px) {
    .home-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-hero-grid { grid-template-columns: 1fr; }
    .home-landing-hero-inner { flex-direction: column; align-items: stretch; }
    .home-landing-hero-copy { text-align: center; }
    .home-landing-headline { margin-left: auto; margin-right: auto; }
    .home-landing-ctas { justify-content: center; }
    .home-landing-board { max-width: 100%; }
    .nns-split { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .hero-agent-network { opacity: 0.55; width: min(100%, 480px); bottom: 68px; }
    .home-platform-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-platform-metric { border-right: none !important; padding: 10px 0; }
    .home-platform-metric:nth-child(odd) { padding-right: 12px; border-right: 1px solid var(--home-border-subtle) !important; }
    .home-insights-grid { grid-template-columns: 1fr; }
    .home-spotlight-stats { grid-template-columns: 1fr; }
    .home-spotlight-stat { border-right: none !important; padding: 8px 0; border-bottom: 1px solid var(--home-border-subtle); }
    .home-spotlight-stat:last-child { border-bottom: none; }
    .home-landing-hero { min-height: auto; padding-top: 20px; }
    .home-landing-board .home-module { height: 420px; min-height: 420px; max-height: 420px; }
}

@media (max-width: 720px) {
    .home-hero-left { min-height: 280px; }
    .hero-agent-network { position: relative; right: auto; bottom: auto; width: 100%; opacity: 0.5; margin: 8px 0 4px; }
    .home-dashboard-grid { grid-template-columns: 1fr; }
    .home-platform-metrics { grid-template-columns: 1fr; }
    .home-platform-metric { border-right: none !important; }
    .home-live-toast { left: 16px; right: 16px; bottom: 16px; width: auto; }
    .home-landing-ctas { flex-direction: column; width: 100%; }
    .home-landing-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .home-live-dot, .home-timeline-item, .home-live-toast, .home-spotlight,
    .network-ring, .network-pulse-ring, .network-agent-node, .network-live-dot {
        animation: none !important; transition: none !important;
    }
}

.agents-grid,
.participants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.participants-empty-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100vh - 200px);
    padding: 24px 16px;
    box-sizing: border-box;
}

.participants-empty {
    padding: 28px 24px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary, transparent);
    text-align: center;
    max-width: 480px;
    width: 100%;
}

.participants-empty-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.participants-empty-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.agent-card,
.participant-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Grid items default to min-width: auto, so a long nowrap submeta
       ("Nemotron 3 Nano 30b A3b · Hosted AI · U.S.") would grow the card
       instead of ellipsizing. 0 lets the track width win. */
    min-width: 0;
}

/* My Agents loading skeletons — shipped in app.html so the grid shows card
   shapes pre-JS; the first agents render overwrites the grid and clears them. */
.agent-card--skeleton {
    min-height: 172px;
    border: 1px solid var(--border-color);
    background: linear-gradient(100deg,
        var(--bg-card) 40%, var(--bg-hover) 50%, var(--bg-card) 60%);
    background-size: 200% 100%;
    animation: agent-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes agent-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .agent-card--skeleton { animation: none; }
}

.agent-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.agent-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.agent-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.agent-discord {
    font-size: 12.5px;
    font-weight: 600;
}

.agent-discord.connected {
    color: var(--success-color);
}

.agent-discord.pending {
    color: var(--warning-color);
}

.agent-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.agent-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.agent-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.agent-run-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agent-run-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.agent-run-primary {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.35;
}

.agent-run-secondary {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.3;
}

.agent-run-link:hover {
    border-color: var(--info-color);
    color: var(--text-primary);
}

.chart-controls .backtest-run-select {
    flex: 0 1 auto;
    min-width: 220px;
    max-width: 360px;
}

.agent-action-btn {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--info-color);
    background: rgba(0, 191, 255, 0.12);
    color: var(--info-color);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}

.agent-action-btn:hover {
    background: rgba(0, 191, 255, 0.22);
}

.agent-action-secondary {
    border-color: var(--border-color);
    background: transparent;
    color: var(--text-secondary);
}

.agent-action-secondary:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
    background: var(--bg-hover);
}

.agent-delete-btn {
    border-color: rgba(248, 113, 113, 0.55);
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
}

.agent-delete-btn:hover {
    border-color: #f87171;
    background: rgba(248, 113, 113, 0.2);
    color: #fca5a5;
}

.agent-action-discord {
    display: inline-flex;
    align-items: center;
    border-color: #5865F2;
    background: rgba(88, 101, 242, 0.16);
    color: #c7ccff;
}

.agent-action-discord:hover {
    background: rgba(88, 101, 242, 0.30);
    color: #ffffff;
}

.status-badge.builtin {
    background: rgba(88, 101, 242, 0.18);
    color: #c7ccff;
    border: 1px solid rgba(88, 101, 242, 0.45);
}

.agent-card-builtin {
    border-color: rgba(88, 101, 242, 0.35);
}

.agent-description {
    margin: 6px 0 2px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ===========================================================================
   My Portfolio — Overview + Capital Allocation (My Agents page)
   =========================================================================== */
.portfolio-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 28px;
    align-items: stretch;
}

.pf-overview-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px 24px 20px;
    border-radius: 12px;
}

.pf-overview-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pf-overview-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.22);
    color: var(--home-accent-cyan);
}

.pf-overview-icon svg {
    width: 20px;
    height: 20px;
}

/* Beat `.section-card h3 { font-size: 12px }` (higher specificity). */
.section-card.pf-overview-card .pf-overview-title {
    margin: 0;
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--text-primary);
}

.pf-overview-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.pf-overview-hero-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pf-overview-hero-col--right {
    text-align: right;
    align-items: flex-end;
}

.section-card.pf-overview-card .pf-overview-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.section-card.pf-overview-card .pf-overview-total {
    font-size: 30px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
    line-height: 1.15;
}

.section-card.pf-overview-card .pf-overview-pnl,
.section-card.pf-overview-card .pf-overview-split-value {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
    line-height: 1.15;
}

.pf-overview-split {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.pf-overview-split-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pf-overview-split-col--right {
    text-align: right;
    align-items: flex-end;
}

.pf-overview-split-row {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}

.section-card.pf-overview-card .pf-overview-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-mono);
    line-height: 1.5;
}

.pf-overview-pill--alloc {
    color: #22d3ee;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.28);
}

/* Slate, matching AVAILABLE_SLICE_COLOR in portfolio.js — the donut beside this
   card shows the same quantity, and two colours for it read as two concepts. */
.pf-overview-pill--avail {
    color: #94a3b8;
    background: rgba(100, 116, 139, 0.14);
    border: 1px solid rgba(100, 116, 139, 0.32);
}

.pf-overview-bar {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(100, 116, 139, 0.25);
}

.pf-overview-bar-alloc {
    height: 100%;
    background: #22d3ee;
}

.pf-overview-bar-avail {
    height: 100%;
    background: #64748b;
}

.pf-allocation-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px 18px;
    border-radius: 12px;
}

.section-card.pf-allocation-card .allocation-title {
    margin: 0;
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--text-primary);
}

.pf-allocation-card .allocation-body {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
}

.pf-allocation-card .allocation-chart-wrap {
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
}

.pf-allocation-card .allocation-detail {
    flex: 1;
    min-width: 0;
}

.pf-allocation-card .allocation-legend {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.allocation-legend-host {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.allocation-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.allocation-legend-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 211, 238, 0.35) transparent;
    overscroll-behavior: contain;
}

.allocation-legend-scroll:not(.allocation-legend-scroll--expanded) {
    /* Fade hints that more items are below without expanding. */
    mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
}

.allocation-legend-scroll::-webkit-scrollbar {
    width: 6px;
}

.allocation-legend-scroll::-webkit-scrollbar-thumb {
    background: rgba(34, 211, 238, 0.35);
    border-radius: 999px;
}

.allocation-legend-toggle-row {
    list-style: none;
    margin: 0;
    padding: 0;
}

.allocation-legend-toggle {
    width: 100%;
    margin-top: 2px;
    padding: 6px 10px;
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 8px;
    background: rgba(34, 211, 238, 0.08);
    color: var(--home-accent-cyan, #22d3ee);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.allocation-legend-toggle:hover {
    background: rgba(34, 211, 238, 0.14);
    border-color: rgba(34, 211, 238, 0.45);
}

.allocation-legend-hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.agents-grid-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    padding: 8px 14px;
}

.agents-grid-footer-count {
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 140px;
    text-align: center;
}

.agents-grid-footer-btn {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.agents-grid-footer-btn--nav {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    border-radius: 999px;
}

.agents-grid-footer-btn--nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.agents-grid-footer-btn--nav:not(:disabled):hover {
    color: var(--home-accent-cyan, #22d3ee);
    border-color: rgba(34, 211, 238, 0.45);
    background: rgba(34, 211, 238, 0.08);
}

/* Legacy allocation helpers still used by the donut legend rows */
.allocation-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 10px;
}

.allocation-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.allocation-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.allocation-chart-wrap {
    position: relative;
    flex-shrink: 0;
    width: 130px;
    height: 130px;
}

.allocation-detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.allocation-total {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.allocation-total-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
}

.allocation-total-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
    line-height: 1.1;
}

.allocation-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.allocation-legend-item--loading .allocation-legend-label {
    color: var(--text-secondary);
    font-size: 13px;
    font-style: italic;
}

.section-card.pf-allocation-card .allocation-legend-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--text-secondary);
}

.section-card.pf-allocation-card .allocation-legend-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-card.pf-allocation-card .allocation-legend-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.section-card.pf-allocation-card .allocation-legend-pct {
    color: var(--text-secondary);
    font-size: 15px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.section-card.pf-allocation-card .allocation-legend-value {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 15px;
    text-align: right;
    white-space: nowrap;
}

/* My Agents section header + toolbar */
.agents-section {
    margin-top: 4px;
}

.agents-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.agents-section-head .page-title {
    margin: 0;
}

.agents-section-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.agent-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.agent-toolbar-add {
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
}

.agent-toolbar-search {
    position: relative;
    display: flex;
    align-items: center;
}

.agent-toolbar-search-icon {
    position: absolute;
    left: 10px;
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

.agent-toolbar-search input {
    padding: 8px 12px 8px 30px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    width: 200px;
}

.agent-toolbar-search input::placeholder { color: var(--text-muted); }

.agent-toolbar-search input:focus {
    outline: none;
    border-color: var(--info-color);
}

.agent-view-toggle {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.agent-view-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: var(--bg-input);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.agent-view-btn + .agent-view-btn {
    border-left: 1px solid var(--border-color);
}

.agent-view-btn svg { width: 16px; height: 16px; }

.agent-view-btn:hover { color: var(--text-secondary); }

.agent-view-btn.active {
    background: rgba(34, 211, 238, 0.14);
    color: var(--home-accent-cyan);
}

/* Status-aware agent cards (PAPER / BACKTESTED / DRAFT) */
.agents-section .agents-grid:not(.agents-grid--list) {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.agents-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.agent-card--status {
    gap: 14px;
    padding: 18px;
    min-height: 100%;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.agent-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.agent-card-top > .status-badge,
.agent-card-top > .marketplace-mode-chip {
    flex-shrink: 0;
    white-space: nowrap;
}

.agent-card-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.agent-card--status .agent-card-identity {
    cursor: pointer;
    border-radius: 8px;
}
.agent-card--status .agent-card-identity:hover .agent-name,
.agent-card--status .agent-card-identity:focus-visible .agent-name {
    color: var(--home-accent-cyan, #22d3ee);
}
.agent-card--status .agent-card-identity:focus-visible {
    outline: 2px solid var(--home-accent-cyan, #22d3ee);
    outline-offset: 2px;
}

.agent-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(34, 211, 238, 0.1);
    color: var(--home-accent-cyan, #22d3ee);
    border: 1px solid rgba(34, 211, 238, 0.22);
}

.agent-card-icon svg {
    width: 22px;
    height: 22px;
}

.agent-card-identity-text {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.agent-card--status .agent-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-card-submeta {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-secondary);
    /* One line, always: wrapping "Claude Haiku 4.5 · Hosted AI · U.S."
       used to push Paper Trading / Configure down on some cards in a
       row and not others, so the grid looked staggered at high zoom.
       Height pins the box to a single line-height so a wrap (cached CSS,
       min-width:auto on a grid item, high zoom) cannot change card layout;
       the full string stays on `title` for hover. */
    display: block;
    max-width: 100%;
    min-width: 0;
    height: 1.35em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-card--placeholder .agent-card-submeta {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    height: auto;
}

.agent-card-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.agent-card-hero-text {
    min-width: 0;
    flex: 1;
}

.agent-card-metric-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.agent-card-mode-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.28);
}

.agent-card-mode-chip--backtest {
    color: #67e8f9;
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.28);
}

.agent-card-mode-chip--simulation {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(129, 140, 248, 0.3);
}

.agent-card-metric-label {
    display: inline;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0;
}

.agent-card-metric-value {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-primary);
}

.agent-card-capital-note {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.agent-card-capitals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.agent-card-capital {
    min-width: 0;
}

.agent-card-capital .agent-card-metric-value {
    font-size: 22px;
}

.agent-card-latest {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agent-card-latest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.agent-card-latest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agent-card-latest-return {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.agent-card-latest-return.is-pos { color: #4ade80; }
.agent-card-latest-return.is-neg { color: var(--danger-color); }

.agent-card-latest-meta {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.agent-card-latest .agent-card-runs-link {
    padding-top: 4px;
    padding-bottom: 0;
}

.agent-card-change {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
}

.agent-card-change.is-pos { color: #4ade80; }
.agent-card-change.is-neg { color: var(--danger-color); }
.agent-card-change.is-muted {
    color: var(--text-muted);
    font-weight: 500;
}

.agent-card-period {
    margin: -4px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.agent-card-divider {
    height: 1px;
    background: rgba(148, 163, 184, 0.12);
    margin: 0;
}

.agent-card-runs-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.agent-card-runs-link:hover {
    color: var(--home-accent-cyan, #22d3ee);
}

.agent-card-runs-icon,
.agent-card-runs-chevron {
    display: inline-flex;
    flex: 0 0 auto;
}

.agent-card-runs-icon svg,
.agent-card-runs-chevron svg {
    width: 16px;
    height: 16px;
}

.agent-card-runs-link > span:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.agent-card-sparkline {
    flex: 0 0 auto;
    margin-top: 4px;
    opacity: 0.95;
}

.agent-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.agent-card-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.agent-card-stat-label {
    font-size: 12.5px;
    color: var(--text-muted);
}

.agent-card-stat-value {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-primary);
}

.agent-card-activity {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.agent-card-activity-icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.agent-card-activity-icon svg {
    width: 18px;
    height: 18px;
}

.agent-card-activity-icon--buy { color: #4ade80; }
.agent-card-activity-icon--done { color: #67e8f9; }

.agent-card-activity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.agent-card-activity-sub {
    font-size: 12.5px;
    color: var(--text-muted);
}

.agent-card-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 22px 14px;
    border: 1px dashed rgba(107, 114, 128, 0.45);
    border-radius: 10px;
    text-align: center;
    color: var(--text-muted);
    background: rgba(15, 19, 40, 0.35);
}

.agent-card-empty-icon {
    display: inline-flex;
    color: var(--text-muted);
    opacity: 0.7;
    margin-bottom: 2px;
}

.agent-card-empty-icon svg {
    width: 28px;
    height: 28px;
}

.agent-card-empty strong {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 650;
}

.agent-card-empty span {
    font-size: 13px;
    line-height: 1.4;
    max-width: 240px;
}

.agent-card-running {
    margin-bottom: 14px;
}

.agent-card-running-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.agent-card-running-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-cyan, #22d3ee);
    animation: agent-card-running-pulse 1.4s ease-in-out infinite;
}

.agent-card-running-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.agent-card-running-elapsed {
    margin-left: auto;
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.agent-card-running-track {
    height: 4px;
    border-radius: 999px;
    background: var(--border-color);
    overflow: hidden;
}

.agent-card-running-bar {
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: var(--accent-cyan, #22d3ee);
    animation: agent-card-running-slide 1.6s ease-in-out infinite;
}

@keyframes agent-card-running-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@keyframes agent-card-running-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .agent-card-running-dot,
    .agent-card-running-bar {
        animation: none;
    }
    .agent-card-running-bar {
        width: 100%;
        opacity: 0.5;
    }
}

.agent-card-actions--status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.agent-card-cta {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--home-accent-cyan, #22d3ee);
    color: #04101a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}

.agent-card-cta:hover {
    filter: brightness(1.06);
}

.agent-card-cta--outline {
    background: transparent;
    border-color: var(--home-accent-cyan, #22d3ee);
    color: var(--home-accent-cyan, #22d3ee);
}

.agent-card-cta--outline:hover {
    filter: none;
    background: rgba(34, 211, 238, 0.1);
}

/*
 * A neutral treatment, not a faded primary. `opacity: 0.45` over the solid
 * cyan fill left the permanently-disabled "Run Paper Trading" button sitting
 * next to the real "Run Backtest" as the same shape and colour at a slightly
 * different brightness -- the action row squint-tested as two cyan CTAs, which
 * halved the pull of the one action this flow exists to drive. The blend also
 * dropped the label to roughly 3:1 against its own fill.
 */
.agent-card-cta--disabled {
    opacity: 1;
    background: rgba(148, 163, 184, 0.10);
    border-color: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
}

.agent-card-cta--disabled:hover {
    filter: none;
}

.agent-card-menu {
    position: relative;
    flex: 0 0 auto;
}

.agent-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.agent-menu-toggle svg {
    width: 18px;
    height: 18px;
}

.agent-menu-toggle:hover,
.agent-menu-toggle[aria-expanded="true"] {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: rgba(148, 163, 184, 0.35);
}

.agent-menu-dropdown {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 20;
    min-width: 148px;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agent-menu-dropdown[hidden] {
    display: none !important;
}

.agent-menu-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.agent-menu-item:hover {
    background: var(--bg-hover);
}

.agent-menu-item--danger {
    color: #f87171;
}

/* List view — one full-width card per row */
.agents-grid--list {
    grid-template-columns: 1fr;
}

.agents-grid--list .agent-card--status {
    max-width: 720px;
}

/* Responsive */
@media (max-width: 960px) {
    .portfolio-top-grid {
        grid-template-columns: 1fr;
    }

    .pf-allocation-card .allocation-body {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .section-card.pf-overview-card .pf-overview-total { font-size: 26px; }
    .section-card.pf-overview-card .pf-overview-pnl,
    .section-card.pf-overview-card .pf-overview-split-value { font-size: 20px; }
    .pf-allocation-card .allocation-chart-wrap {
        flex-basis: 130px;
        width: 130px;
        height: 130px;
    }
    .agents-section-head { align-items: flex-start; }
    .agent-toolbar-search input { width: 100%; }
}

.add-agent-options {
    display: grid;
    gap: 10px;
}

.add-agent-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}

.add-agent-option strong {
    font-size: 14px;
}

.add-agent-option span {
    font-size: 13px;
    color: var(--text-secondary);
}

.add-agent-option:hover {
    border-color: var(--info-color);
    background: var(--bg-hover);
}

.playground-view,
.competition-view {
    padding-bottom: 0;
}

.playground-agent-header,
.competition-season-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.playground-agent-info,
.competition-season-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.playground-agent-name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.competition-season-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    width: 100%;
}

.competition-season-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subtab-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
}

.subtab-btn {
    /*
     * 13px/9px, not 11px/7px: this bar is the primary navigation *inside* the
     * product (My Agents / Backtest / Paper Trading), yet it was the smallest
     * interactive text on the page -- 11px in a 26px-tall target, against a
     * 14px/32px top nav. 13px + 9px padding brings it to ~32px, matching the
     * nav above it.
     */
    padding: 9px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 3px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    /* Enumerated, not `all`: `all` also animates layout properties. */
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.subtab-btn.active {
    background: var(--info-color);
    /*
     * Dark on cyan, not white: white on --info-color (#00bfff) measures 2.12:1,
     * below the WCAG AA 4.5:1 floor, on the most-used control in the flow.
     * #041018 measures ~9:1 and matches how the same cyan is already paired
     * with a dark foreground on .home-btn-primary / .agent-card-cta.
     */
    color: #041018;
}

.subtab-btn:hover:not(.active) {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/*
 * styles.css had zero `:focus-visible` rules and eight bare `outline: none`
 * resets, and this bar had no focus style of any kind -- keyboard users could
 * not see which tab they were on. Scoped to the flow's controls rather than a
 * global reset so it cannot disturb unrelated views.
 */
.subtab-btn:focus-visible,
.agent-card-cta:focus-visible,
.agent-view-btn:focus-visible,
.home-btn:focus-visible {
    outline: 2px solid var(--home-accent-cyan);
    outline-offset: 2px;
}

.overview-grid {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 12px;
    padding-bottom: 40px;
}

.overview-chart-card {
    min-height: 360px;
}

.overview-chart-container {
    height: 300px;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 40px;
}

.about-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.about-text + .about-text {
    margin-top: 10px;
}

/* "This is not built yet" sits below the description of what it will do. */
.about-text-muted {
    color: var(--text-muted);
    font-style: italic;
}

.about-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.6;
}

.participant-desc {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.status-badge.draft {
    background-color: rgba(107, 114, 128, 0.18);
    color: var(--text-muted);
}

.status-badge.offline {
    background-color: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
}

.competition-leaderboard-panel {
    height: auto;
    overflow-y: visible;
}

@media (max-width: 1100px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .nav-menu-toggle {
        display: inline-flex;
    }

    .primary-nav {
        display: none;
        width: 100%;
        order: 4;
        flex-direction: column;
        align-items: stretch;
    }

    .primary-nav.open {
        display: flex;
    }

    .primary-nav .mode-btn {
        width: 100%;
        text-align: left;
    }

    .header-right {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   Fullscreen Agent Editor
   ========================================================================== */

body.agent-editor-open {
    overflow: hidden;
}

.agent-editor-view {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #0a1224);
    overflow: hidden;
}

.agent-editor-view[hidden] {
    display: none !important;
}

.agent-editor-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(8, 18, 40, 0.92);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}

.agent-editor-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.agent-editor-back-btn svg {
    width: 16px;
    height: 16px;
}

.agent-editor-back-btn:hover {
    border-color: var(--home-accent-cyan, #22d3ee);
    color: var(--home-accent-cyan, #22d3ee);
    background: rgba(34, 211, 238, 0.08);
}

.agent-editor-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agent-editor-name-input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.agent-editor-name-input:focus {
    outline: none;
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}

.agent-editor-name-input--bound,
.agent-editor-name-input:read-only {
    border-color: transparent;
    background: transparent;
    padding-left: 0;
    cursor: default;
}

.agent-editor-name-input--bound:focus,
.agent-editor-name-input:read-only:focus {
    border-color: transparent;
    box-shadow: none;
}

.agent-editor-description {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
    resize: vertical;
    min-height: 44px;
    font-family: inherit;
}

.agent-editor-description:focus {
    outline: none;
    border-color: rgba(34, 211, 238, 0.4);
}

.agent-capital-card {
    margin-bottom: 12px;
}

/* Beat `.section-card h3 { font-size: 12px }` (higher specificity). */
.section-card .agent-capital-title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--text-primary);
}

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

.agent-capital-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.agent-capital-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.agent-capital-max {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 6px;
}

.agent-capital-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 15px;
    font-family: var(--font-mono);
}

.agent-capital-input:focus {
    outline: none;
    border-color: rgba(34, 211, 238, 0.4);
}

.agent-capital-note {
    font-size: 13px;
    color: var(--text-secondary);
}

.agent-editor-broker {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-editor-broker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agent-editor-broker-status {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
}

.agent-editor-broker-status--ok {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.08);
}

.agent-editor-broker-status--warn {
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
}

.agent-editor-broker-meta {
    font-size: 13px;
    color: #94a3b8;
}

.agent-editor-live-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #e2e8f0;
}

.agent-editor-broker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-editor-live-result {
    font-size: 13px;
    color: #cbd5e1;
    margin: 0;
}

.agent-editor-live-result--error {
    color: #fca5a5;
}

.agent-cash-allocation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.25);
    color: #67e8f9;
    font-size: 11px;
    font-weight: 700;
}

.agent-editor-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.agent-editor-dirty-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fbbf24;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.35);
}

.agent-editor-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-editor-meta {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.agent-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 32px;
    width: 100%;
    box-sizing: border-box;
}

.agent-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    align-items: start;
}

.agent-editor-main {
    min-width: 0;
}

.agent-editor-history {
    position: sticky;
    top: 12px;
    align-self: start;
}

.agent-editor-history-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 120px);
}

.agent-editor-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Beat `.section-card h3 { font-size: 12px }` (higher specificity). */
.section-card .agent-editor-history-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--text-primary);
}

.agent-editor-run-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--home-accent-cyan, #22d3ee);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.25);
}

.agent-editor-history-hint {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.agent-editor-run-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    min-height: 120px;
}

.agent-editor-run-empty {
    margin: 0;
    padding: 12px;
    border-radius: 6px;
    border: 1px dashed var(--border-color);
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.agent-editor-run-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.agent-editor-run-item:hover {
    border-color: var(--info-color);
    background: rgba(0, 191, 255, 0.08);
    color: var(--text-primary);
}

.agent-editor-run-primary {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.35;
}

.agent-editor-run-secondary {
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.3;
}

.agent-editor-run-meta {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.3;
}

.agent-editor-hint {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.agent-editor-hint kbd {
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    font-size: 12px;
}

/* Beat `.section-card h3 { font-size: 12px }` (higher specificity). */
.section-card .agent-editor-intro-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--text-primary);
}

.agent-editor-intro-text {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.agent-editor-save-status {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--home-accent-cyan, #22d3ee);
}

.agent-editor-save-status--error {
    color: #f87171;
}

@media (max-width: 1100px) {
    .agent-editor-layout {
        grid-template-columns: 1fr;
    }

    .agent-editor-history {
        position: static;
        max-height: none;
    }

    .agent-editor-history-card {
        max-height: none;
    }

    .agent-editor-run-history {
        max-height: 360px;
    }
}

@media (max-width: 640px) {
    .agent-editor-header {
        flex-wrap: wrap;
        padding: 10px 12px;
    }

    .agent-editor-header-actions {
        width: 100%;
        justify-content: stretch;
    }

    .agent-editor-header-actions .home-btn {
        flex: 1;
    }

    .agent-editor-body {
        padding: 12px;
    }
}

/* Header account dropdown */
.account-menu-wrap {
    position: relative;
}

.auth-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
}

.auth-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.auth-caret {
    font-size: 10px;
    color: var(--text-secondary);
}

.account-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 200px;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-menu[hidden] {
    display: none !important;
}

.account-menu-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}

.account-menu-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.account-menu-email {
    font-size: 11px;
    color: var(--text-secondary);
    word-break: break-all;
}

.account-menu-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

/* Author `display: block` above beats the UA [hidden] rule — same footgun as
   .agent-cp-field[hidden]. Without this, Admin stays visible for every user. */
.account-menu-item[hidden] {
    display: none !important;
}

.account-menu-item:hover {
    background: var(--bg-hover);
}

.account-menu-item--danger {
    color: #f87171;
}

/* Account page — identity summary + settings workspace */
.account-view #accountSignedIn {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.account-view .account-workspace {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.7fr);
    gap: 20px;
    align-items: start;
}

.account-view .account-identity {
    position: sticky;
    top: 88px;
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(103, 232, 249, 0.22);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(18, 33, 62, 0.98), rgba(11, 20, 40, 0.98));
    box-shadow: 0 18px 38px rgba(2, 8, 23, 0.22);
}

.account-view .account-identity-avatar-wrap {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 24px;
}

.account-view .auth-avatar--large {
    width: 72px;
    height: 72px;
    border: 2px solid rgba(103, 232, 249, 0.45);
    font-size: 26px;
    box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.06);
}

.account-view .account-profile-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border: 1px solid rgba(52, 211, 153, 0.28);
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.08);
    color: #6ee7b7;
    font-size: 11px;
    font-weight: 700;
}

.account-view .account-profile-status::before {
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: #34d399;
    content: "";
}

.account-view .account-section-kicker {
    margin: 0 0 7px;
    color: #67e8f9;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.account-view .account-identity-name {
    margin: 0;
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 750;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.account-view .account-identity-email {
    margin: 6px 0 22px;
    color: var(--text-secondary);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.account-view .account-identity-facts {
    margin: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.account-view .account-identity-facts > div {
    display: grid;
    grid-template-columns: minmax(88px, 0.8fr) minmax(0, 1.2fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.account-view .account-identity-facts dt,
.account-view .account-identity-facts dd {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
}

.account-view .account-identity-facts dt {
    color: var(--text-secondary);
    font-weight: 600;
}

.account-view .account-identity-facts dd {
    color: var(--text-primary);
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

.account-view .account-identity-actions {
    margin-top: 20px;
}

.account-view .account-identity-actions .auth-btn {
    width: 100%;
}

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

.account-view .account-settings-grid > .account-section {
    min-width: 0;
    margin-top: 0;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    background: rgba(17, 29, 54, 0.82);
}

.account-view .account-settings-grid > .account-section:nth-child(3),
.account-view .account-settings-grid > .account-section:nth-child(4) {
    grid-column: span 2;
}

.account-view .account-section-title {
    margin-bottom: 14px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.13);
    font-size: 14px;
}

.account-view .account-password-form {
    max-width: none;
}

.account-view .account-avatar-row,
.account-view .account-avatar-actions {
    width: 100%;
}

.account-view .account-avatar-actions .auth-btn:first-of-type {
    flex: 1;
}

.account-view .auth-field input:focus-visible,
.account-view .auth-btn:focus-visible {
    outline: 2px solid #67e8f9;
    outline-offset: 2px;
}

.account-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.account-section-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.account-password-form {
    max-width: 360px;
}

/* The class is on all three account forms, but `>` is deliberate and narrows
   this to two buttons: Save name and Update password, the only submits that are
   direct children of a form. The email form's pair is nested in
   .account-email-actions and sized by that rule instead -- the child combinator
   is what keeps the two from fighting over the same buttons. */
.account-password-form > .auth-btn {
    width: 100%;
}

.password-policy-hints {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 11px;
    color: #fbbf24;
}

.account-success {
    font-size: 12px;
    color: #34d399;
}

.account-hint {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* `1fr auto`, not a single column: Cancel is hidden in the idle state and so
   generates no grid item, leaving "Send code" spanning the full first track.
   Once the code step un-hides Cancel it takes the auto track beside it, instead
   of stacking full-width underneath and reading as an equal-weight action. */
.account-email-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    width: 100%;
}

.account-email-actions .auth-btn {
    width: 100%;
}

.auth-avatar--large {
    width: 56px;
    height: 56px;
    font-size: 22px;
}

.account-avatar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-avatar-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 860px) {
    .account-view .account-workspace,
    .account-view .account-settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-view .account-identity {
        position: static;
    }

    .account-view .account-settings-grid > .account-section:nth-child(3),
    .account-view .account-settings-grid > .account-section:nth-child(4) {
        grid-column: auto;
    }
}

@media (max-width: 540px) {
    .account-view .account-identity,
    .account-view .account-settings-grid > .account-section {
        padding: 16px;
    }

    .account-view .account-identity-avatar-wrap {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-view .account-avatar-actions,
    .account-view .account-email-actions {
        grid-template-columns: minmax(0, 1fr);
        flex-direction: column;
    }

    .account-view .account-avatar-actions .auth-btn,
    .account-view .account-email-actions .auth-btn {
        width: 100%;
    }
}

/* My Agents — asset-class shelves. A real panel, not loose prose: these sections
   sit directly above bordered cards, so an unframed <h3>/<p> pair read as page
   copy rather than as a container the cards belong to. The page is --bg-primary,
   the panel --bg-surface, the cards --bg-card: each step lighter than the one
   beneath, so no shadow is needed to separate them. */
.agents-category {
    margin-top: 24px;
    padding: 18px 18px 20px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-surface);
}
.agents-category:first-child { margin-top: 8px; }
.agents-category-head {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}
.agents-category-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.agents-category-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--info-color);
}
.agents-category-icon svg { width: 100%; height: 100%; }
.agents-category-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
/* Reports what the shelf holds, not what is on screen — see
   renderAgentCategories. `margin-left: auto` parks it at the right edge of the
   heading row without a spacer element. */
.agents-category-count {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
.agents-category-sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}
/* The chips themselves are .marketplace-category-chip — shared with Community
   on purpose, so the same taxonomy looks the same on both surfaces. This rule
   only spaces the row inside the shelf head. */
.agents-market-chips { margin: 12px 0 0; }

/* Locked shelves (Crypto, Futures). Neither asset class has a bar source, a
   MarketProfile or any engine support, so the row must read as "not built yet",
   never as "built and broken": dashed and muted, with no grid, no chips and
   nothing clickable inside it. */
.agents-category--locked {
    border-style: dashed;
    background: transparent;
    opacity: 0.62;
}
.agents-category--locked .agents-category-head {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.agents-category--locked .agents-category-icon,
.agents-category--locked .agents-category-title {
    color: var(--text-secondary);
}
/* Belt and braces with aria-disabled: no hover, no cursor change, no focus
   stop, even if a future edit puts an interactive element in one of these rows. */
.agents-category--locked * { pointer-events: none; }
.agents-category-tag {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border: 1px dashed var(--border-color);
    white-space: nowrap;
}

/* Empty-shelf Community call to action. This shipped as an <a href="#"> whose
   class matched no rule in this file, so the primary path off an empty shelf
   inherited plain link styling and did not read as actionable. */
.agents-empty-community-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    margin: 0 2px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(0, 191, 255, 0.12);
    border: 1px solid var(--info-color);
    cursor: pointer;
    transition: all 0.15s;
}
.agents-empty-community-btn:hover {
    color: var(--text-on-accent);
    background-color: var(--info-color);
}
.agent-card--placeholder {
    border-style: dashed;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    align-items: flex-start;
}

/* Configure CTA + Default badge (Demo 1) */
.agent-card-actions--status { flex-wrap: wrap; }
.agent-card-cta--configure {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    flex-basis: 100%;
}
.agent-card-cta--configure:hover { border-color: var(--text-secondary); }
.agent-default-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    vertical-align: middle;
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.12);
}

/* Agent Supermarket */
.marketplace-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.marketplace-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

/* One step down from .page-title (22px): the Community page owns the h2, the
   marketplace is a section within it. */
.marketplace-section-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.marketplace-section-sub {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    max-width: 56ch;
}

.marketplace-search {
    min-width: min(100%, 280px);
}

.marketplace-grid {
    margin-top: 4px;
}

.marketplace-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
}

.marketplace-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.marketplace-card-description {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.92rem;
}

.marketplace-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.marketplace-repo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.85);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.marketplace-repo-btn:hover {
    color: #e2e8f0;
    border-color: rgba(226, 232, 240, 0.45);
    background: rgba(30, 41, 59, 0.95);
}

.marketplace-repo-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.marketplace-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.marketplace-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #67e8f9;
    background: rgba(103, 232, 249, 0.1);
    border: 1px solid rgba(103, 232, 249, 0.25);
}

.marketplace-mode-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

.marketplace-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}

/* Second facet row (model vendor). Pulled up under the market row so the two
   read as one stacked filter block rather than two unrelated controls. */
.marketplace-vendor-chips {
    margin-top: -8px;
}

/* Open-weight marker. Sits in the tag row so it wraps with the tags rather
   than competing with the mode chip for the card's top-right corner. */
.marketplace-licence-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--success-color);
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
}

/* Split CTA: the primary Add button keeps its weight; the model picker is a
   quieter sibling so it cannot compete with the conversion click. */
.marketplace-clone-split {
    position: relative;
    display: flex;
    gap: 6px;
    width: 100%;
}

.marketplace-clone-split .marketplace-clone-btn {
    flex: 1 1 auto;
}

.marketplace-clone-model-btn {
    flex: 0 0 auto;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.marketplace-clone-model-btn:hover {
    color: var(--text-primary);
    border-color: var(--info-color);
}

.marketplace-model-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 20;
    min-width: 200px;
    padding: 6px;
    border-radius: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.marketplace-model-menu[hidden] {
    display: none !important;
}

.marketplace-category-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s;
}

.marketplace-category-chip:hover {
    color: var(--text-primary);
    border-color: var(--info-color);
}

.marketplace-category-chip.active {
    color: var(--text-on-accent);
    background-color: var(--info-color);
    border-color: var(--info-color);
}

/* Agent editor — model picker (Demo 1) */
.agent-editor-model-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.agent-editor-model-field[hidden],
.agent-editor-managed-model-field[hidden] {
    display: none;
}
.agent-editor-managed-model-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.agent-editor-managed-model-value {
    font-size: 13px;
    color: var(--text-primary);
}
.agent-editor-managed-model-note {
    font-size: 12px;
    color: var(--text-secondary);
}
.agent-editor-model-label {
    font-size: 13px;
    color: var(--text-secondary);
}
.agent-editor-model-select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 4px 8px;
    /* Native <select> menus often paint a light OS panel; without this the
       inherited light text becomes unreadable on white. */
    color-scheme: dark;
}
.agent-editor-model-select option {
    background-color: var(--bg-card);
    color: var(--text-primary);
}
.agent-editor-simple textarea {
    width: 100%;
    resize: vertical;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    /*
     * 14px, not `0.95rem`: `rem` resolves against the 16px html root while the
     * whole app is sized off the 14px body, so 0.95rem painted this field at
     * 15.2px -- a fractional size (blurry sub-pixel text) on a different scale
     * from every other control.
     */
    font-size: 14px;
    line-height: 1.5;
    padding: 10px 12px;
    margin-top: 10px;
}
.agent-editor-simple-note {
    margin: 10px 0 0;
    font-size: 13px;
    color: #fbbf24;
}

.agent-editor-default-details {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.agent-editor-default-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
}

.agent-editor-default-text {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-left: 2px solid var(--border-color);
    color: var(--text-secondary);
}

.agent-editor-analyst-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    margin: 16px 0 20px;
}

.agent-editor-analyst-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}

.agent-editor-analyst-option:has(input:focus-visible) {
    outline: 2px solid rgba(34, 211, 238, 0.65);
    outline-offset: 2px;
}

.agent-editor-analyst-option:has(input:checked) {
    border-color: var(--info-color);
    background: rgba(0, 191, 255, 0.08);
}

.agent-editor-analyst-tooltip {
    position: fixed;
    left: var(--analyst-tooltip-left, 16px);
    top: var(--analyst-tooltip-top, 16px);
    z-index: 1300;
    box-sizing: border-box;
    width: max-content;
    max-width: min(280px, var(--analyst-tooltip-max-width, calc(100vw - 32px)));
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.38);
    border-radius: 8px;
    background: rgba(10, 14, 28, 0.96);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: anywhere;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}

.agent-editor-analyst-option.is-tooltip-visible .agent-editor-analyst-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .agent-editor-analyst-tooltip {
        transition: none;
    }
}

.agent-editor-credential-field {
    margin-top: 6px;
}

.agent-editor-credential-remove {
    align-self: flex-start;
    margin-top: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border, #d0d5dd);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #667085);
    font-size: 12px;
    cursor: pointer;
}

.agent-editor-credential-remove:hover:not(:disabled) {
    border-color: #d92d20;
    color: #d92d20;
}

.agent-editor-credential-remove:disabled {
    opacity: 0.6;
    cursor: default;
}

/* /app toast — success confirmations. Deliberately not named .home-live-toast:
   that selector family is a leftover with no remaining markup anywhere in
   app.html/index.html, and reusing a dead name is how two features end up
   sharing one rule by accident. Kept opacity-hidden rather than [hidden] so the
   live region stays rendered (see showAppToast). */
.app-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 12px);
    z-index: 9000;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid rgba(34, 197, 94, 0.45);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .app-toast { transition: none; transform: translate(-50%, 0); }
}

/* Pending submit buttons — disabled alone is nearly invisible in this theme. */
.auth-submit-btn.is-pending {
    opacity: 0.75;
    cursor: progress;
}

.auth-submit-btn.is-pending::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: app-btn-spin 640ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .auth-submit-btn.is-pending::before { animation: none; }
}

.agent-card.is-just-created {
    animation: agent-card-flash 2.4s ease-out;
}

@keyframes agent-card-flash {
    0%, 40% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.55); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .agent-card.is-just-created { animation: none; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.55); }
}

.agent-card-running-step {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    opacity: 0.75;
}

/* Empty before the first step. The head is a flex row with an 8px gap, so an
   empty span is not free -- it opens a visible hole between the label and the
   elapsed timer. */
.agent-card-running-step:empty {
    display: none;
}

.agent-card-running-detail {
    margin: 6px 0 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    opacity: 0.7;
}

/* Empty before the first step. The node must still exist -- the per-second
   patch targets it by attribute and only a change to the *set* of running
   agents triggers a full re-render -- so hide it rather than omit it. */
.agent-card-running-detail:empty {
    display: none;
}

.agent-card-running-stale {
    margin: 4px 0 0;
    font-size: 12px;
    color: #fbbf24;
}

/* Rendered on every running card and empty while progress is fresh -- same
   reason as the detail node: the per-second patch fills this in by attribute,
   and a node that only exists once it has content can never be filled in. */
.agent-card-running-stale:empty {
    display: none;
}

/* Credits & Billing — compact, audit-first checkout surface. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.credits-view {
    max-width: 1120px;
    margin: 0 auto;
    color: var(--text-primary);
}

.credits-shell {
    width: 100%;
}

.credits-page-header {
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.credits-title-row,
.credits-section-head,
.credits-refund-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.credits-title-row {
    justify-content: flex-start;
}

.credits-title-row .page-title {
    margin-bottom: 4px;
}

.credits-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-height: 42px;
    border-bottom: 1px solid var(--border-color);
}

.credits-tab {
    position: relative;
    min-width: 94px;
    padding: 0 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.credits-tab:hover,
.credits-tab:focus-visible {
    color: var(--text-primary);
    outline: none;
}

.credits-tab.is-active {
    border-bottom-color: #22d3ee;
    color: #f8fafc;
}

.credits-panel[hidden] {
    display: none;
}

.credits-test-badge,
.credits-admin-badge,
.credits-rate {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid rgba(245, 158, 11, 0.42);
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

.credits-admin-badge {
    border-color: rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.08);
    color: #67e8f9;
}

.credits-rate {
    border-color: var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.credits-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
}

.credits-icon-btn:hover,
.credits-icon-btn:focus-visible {
    border-color: var(--info-color);
    color: var(--info-color);
}

.credits-icon-btn svg,
.credits-purchase-btn svg,
.credits-balance-note svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
}

.credits-empty-state {
    max-width: 520px;
    padding: 28px 0;
}

.credits-empty-state h3,
.credits-section h3,
.credits-refund-head h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
}

.credits-empty-state p {
    margin: 8px 0 16px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.credits-balance-band {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 24px 0 26px;
    border-bottom: 1px solid var(--border-color);
}

.credits-section-kicker {
    margin: 0 0 7px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.credits-balance {
    margin: 0;
    color: #f8fafc;
    font-family: var(--font-mono);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.credits-account-status,
.credits-status,
.credits-muted,
.credits-refund-order {
    margin: 7px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
}

.credits-account-status.is-success,
.credits-status.is-success {
    color: #4ade80;
}

.credits-account-status.is-error,
.credits-status.is-error {
    color: #f87171;
}

.credits-status.is-pending {
    color: #fbbf24;
}

.credits-balance-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 360px;
    padding: 12px 14px;
    border-left: 2px solid rgba(74, 222, 128, 0.6);
    background: rgba(34, 197, 94, 0.06);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.credits-balance-note svg {
    flex: 0 0 17px;
    margin-top: 1px;
    color: #4ade80;
}

.credits-section {
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
}

.credits-api-keys-intro,
.credits-api-keys-footnote {
    max-width: 720px;
    margin: -4px 0 18px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.credits-api-keys-footnote {
    margin: 18px 0 0;
    color: var(--text-muted);
}

.credits-api-keys-layout {
    display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(320px, 1.28fr);
    gap: 28px;
    align-items: start;
}

.credits-api-key-form {
    display: grid;
    gap: 13px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
}

.credits-key-guide,
.credits-key-guide-steps {
    min-width: 0;
}

.credits-key-guide[hidden],
.credits-key-guide-steps[hidden],
.credits-key-guide-fallback[hidden] {
    display: none;
}

.credits-key-guide-steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.credits-key-guide-step {
    position: relative;
    display: grid;
    gap: 9px;
    min-width: 0;
    padding-bottom: 12px;
}

.credits-key-guide-step:last-child {
    padding-bottom: 0;
}

.credits-key-guide-head {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.credits-key-guide-head h4,
.credits-key-guide-head p {
    margin: 0;
}

.credits-key-guide-head h4 {
    color: var(--text-primary);
    font-size: 12px;
}

.credits-key-guide-head p {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

.credits-key-guide-number {
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-primary);
    color: var(--info-color);
    font-size: 11px;
    font-weight: 700;
}

.credits-key-guide-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    text-decoration: none;
}

.credits-key-guide-link svg,
.credits-key-guide-arrow {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}

.credits-key-guide-arrow {
    justify-self: center;
    transform: rotate(90deg);
    color: var(--text-muted);
}

.credits-key-guide-illustration,
.credits-key-guide-paste {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 7px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 10px;
}

.credits-key-guide-window-bar {
    grid-column: 1 / -1;
    height: 3px;
    background: var(--border-color);
}

.credits-key-guide-create,
.credits-key-guide-verify {
    color: var(--info-color);
    font-weight: 700;
}

.credits-key-guide-masked,
.credits-key-guide-input {
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.credits-key-guide-paste > span:first-child {
    grid-column: 1 / -1;
}

.credits-key-guide-fallback {
    margin: 0;
    padding: 10px 0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

.credits-key-troubleshooting {
    margin: -4px 0 0;
    color: #fbbf24;
    font-size: 11px;
    line-height: 1.45;
}

.credits-key-field {
    display: grid;
    gap: 7px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.credits-key-field input,
.credits-key-field select {
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
}

.credits-key-field input:focus,
.credits-key-field select:focus {
    border-color: var(--info-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.12);
}

.credits-key-default {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 11px;
}

.credits-key-default input {
    accent-color: #22d3ee;
}

.credits-key-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    margin-top: 2px;
}

.credits-key-save svg,
.credits-key-action svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
}

.credits-key-list-wrap {
    min-width: 0;
}

.credits-key-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-height: 30px;
}

.credits-key-list {
    border-top: 1px solid var(--border-color);
}

.credits-key-row {
    display: grid;
    grid-template-columns:
        minmax(120px, 0.75fr)
        minmax(180px, 1fr)
        minmax(360px, 1.35fr)
        max-content;
    gap: 14px;
    align-items: center;
    min-height: 66px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.credits-key-row-head,
.credits-key-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.credits-key-row-head {
    flex-wrap: wrap;
}

.credits-key-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.credits-key-meta {
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 11px;
}

.credits-key-meta > span + span::before {
    margin-right: 8px;
    color: var(--text-muted);
    content: "•";
}

.credits-key-last-four {
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.credits-key-verification-message {
    flex-basis: 100%;
    color: var(--text-muted);
    line-height: 1.35;
}

.credits-key-meta > .credits-key-verification-message::before {
    content: none;
}

.credits-key-status,
.credits-key-default-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.credits-key-status.is-verified {
    border-color: rgba(74, 222, 128, 0.38);
    color: #4ade80;
}

.credits-key-status.is-invalid {
    border-color: rgba(248, 113, 113, 0.42);
    color: #f87171;
}

.credits-key-status.is-verification_unavailable {
    border-color: rgba(251, 191, 36, 0.42);
    color: #fbbf24;
}

.credits-key-default-badge {
    border-color: rgba(34, 211, 238, 0.38);
    color: #67e8f9;
}

.credits-key-launch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px;
    align-items: end;
    min-width: 0;
}

.credits-key-model-label {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
}

.credits-key-model {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 11px;
}

.credits-key-run {
    border-color: rgba(34, 211, 238, 0.45);
    color: #67e8f9;
    white-space: nowrap;
}

.credits-key-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    align-self: start;
}

.credits-key-inline-action {
    flex-basis: 100%;
    justify-content: flex-start;
    margin-top: 2px;
    width: max-content;
}

.credits-key-delete {
    border-color: rgba(248, 113, 113, 0.52);
    color: #f87171;
}

.credits-key-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}

.credits-key-action:hover,
.credits-key-action:focus-visible {
    border-color: var(--info-color);
    color: var(--text-primary);
    outline: none;
}

.credits-key-action.is-danger:hover,
.credits-key-action.is-danger:focus-visible {
    border-color: rgba(248, 113, 113, 0.6);
    color: #f87171;
}

.credits-section-head {
    align-items: flex-end;
    margin-bottom: 16px;
}

.credits-package-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 8px;
}

.credits-package-btn {
    min-height: 76px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
}

.credits-package-btn:hover:not(:disabled) {
    border-color: rgba(34, 211, 238, 0.5);
    background: var(--bg-hover);
}

.credits-package-btn.is-selected {
    border-color: #22d3ee;
    background: rgba(34, 211, 238, 0.08);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.18);
}

.credits-package-btn strong,
.credits-package-btn span {
    display: block;
    letter-spacing: 0;
}

.credits-package-btn strong {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
}

.credits-package-btn span {
    margin-top: 7px;
    color: var(--text-secondary);
    font-size: 11px;
}

.credits-package-btn:disabled,
.credits-purchase-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.credits-custom-row {
    display: grid;
    grid-template-columns: 120px minmax(180px, 260px) minmax(180px, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.credits-custom-row label,
.credits-refund-field {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.credits-custom-row p {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
}

.credits-money-input {
    display: flex;
    align-items: center;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-input);
    overflow: hidden;
}

.credits-money-input:focus-within {
    border-color: var(--info-color);
    box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.12);
}

.credits-money-input > span {
    padding-left: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 13px;
}

.credits-money-input input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 10px 0 4px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
}

.credits-purchase-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 210px;
    min-height: 40px;
    margin-top: 16px;
}

.credits-ledger-list {
    border-top: 1px solid var(--border-color);
}

.credits-ledger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 58px;
    padding: 10px 2px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.credits-ledger-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.credits-ledger-meta strong {
    color: var(--text-primary);
    font-size: 12px;
}

.credits-ledger-meta span {
    color: var(--text-muted);
    font-size: 11px;
}

.credits-ledger-amount {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.credits-ledger-amount.is-positive { color: #4ade80; }
.credits-ledger-amount.is-negative { color: #f87171; }

.credits-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.credits-admin-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    color: var(--text-primary);
    font-size: 11px;
}

.credits-admin-table th,
.credits-admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    white-space: nowrap;
}

.credits-admin-table th {
    background: var(--bg-input);
    color: var(--text-secondary);
    font-weight: 700;
}

.credits-admin-table td:first-child,
.credits-admin-table td:nth-child(2),
.credits-admin-table td:nth-child(3),
.credits-admin-table td:nth-child(5) {
    font-family: var(--font-mono);
}

.credits-admin-table tr:last-child td {
    border-bottom: none;
}

.credits-admin-empty {
    padding: 20px 12px !important;
    color: var(--text-muted);
    text-align: center !important;
}

.credits-order-status {
    color: #fbbf24;
    text-transform: capitalize;
}

.credits-refund-btn {
    min-width: 64px;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid rgba(248, 113, 113, 0.45);
    border-radius: 4px;
    background: rgba(248, 113, 113, 0.08);
    color: #f87171;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.credits-refund-btn:hover {
    border-color: #f87171;
    background: rgba(248, 113, 113, 0.16);
}

.credits-refund-dialog {
    width: min(440px, calc(100vw - 32px));
    margin: auto;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.credits-refund-dialog::backdrop {
    background: rgba(3, 7, 18, 0.78);
}

.credits-refund-dialog form {
    padding: 20px;
}

.credits-refund-head {
    align-items: flex-start;
    margin-bottom: 16px;
}

.credits-refund-order {
    padding: 9px 10px;
    border-left: 2px solid var(--warning-color);
    background: rgba(245, 158, 11, 0.06);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}

.credits-refund-field {
    display: block;
    margin: 16px 0 7px;
}

.credits-refund-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

/* Admin provider controls stay separate from the user key vault. The section
   is an unframed console band; only the editable tools and repeated rows are
   framed so the registry remains easy to scan. */
.admin-provider-section {
    margin-top: 24px;
    padding: 24px 0 8px;
    border-top: 1px solid var(--border-color);
}

.admin-provider-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-provider-section h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
}

.admin-provider-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.12fr) minmax(300px, 0.88fr);
    gap: 24px;
    align-items: start;
}

.admin-provider-list-wrap,
.admin-provider-form,
.admin-platform-key-form {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
}

.admin-provider-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
}

.admin-provider-list-head .credits-section-kicker {
    margin-bottom: 0;
}

.admin-provider-list {
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
}

.admin-provider-row {
    padding: 13px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.admin-provider-row:last-child {
    border-bottom: 0;
}

.admin-provider-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-provider-row-head strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-provider-state {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
}

.admin-provider-state.is-enabled {
    border-color: rgba(74, 222, 128, 0.38);
    color: #4ade80;
}

.admin-provider-state.is-disabled {
    border-color: rgba(248, 113, 113, 0.42);
    color: #f87171;
}

.admin-provider-row-meta,
.admin-provider-credential {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-provider-credential {
    color: var(--text-secondary);
}

.admin-provider-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.admin-provider-form {
    display: grid;
    gap: 13px;
}

.admin-provider-form > .credits-section-kicker {
    margin-bottom: -2px;
}

.admin-provider-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    color: var(--text-secondary);
    font-size: 11px;
}

.admin-provider-checks label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.admin-provider-checks input {
    accent-color: #22d3ee;
}

.admin-platform-key-area {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.admin-platform-key-area .admin-provider-heading {
    margin-bottom: 12px;
}

.admin-platform-key-form {
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) minmax(240px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.admin-provider-form > .auth-btn,
.admin-platform-key-form > .auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: max-content;
    gap: 8px;
    min-height: 36px;
    padding: 7px 12px;
    white-space: nowrap;
}

.admin-provider-form .auth-btn svg,
.admin-platform-key-form .auth-btn svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
}

@media (max-width: 760px) {
    .credits-balance-band {
        align-items: flex-start;
        flex-direction: column;
    }

    .credits-balance-note {
        max-width: none;
    }

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

    .credits-api-keys-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .credits-custom-row {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .credits-custom-row p {
        grid-column: 2;
    }

    .admin-provider-grid {
        grid-template-columns: 1fr;
    }

    .admin-platform-key-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-platform-key-form .auth-btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .credits-view {
        padding: 12px 14px 36px;
    }

    .credits-page-header {
        flex-direction: row;
    }

    .credits-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .credits-tabs {
        overflow-x: auto;
    }

    .credits-tab {
        min-width: 82px;
        padding: 0 10px;
    }

    .credits-balance {
        font-size: 28px;
    }

    .credits-section-head {
        align-items: flex-start;
    }

    .credits-custom-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .credits-custom-row p {
        grid-column: 1;
    }

    .credits-purchase-btn {
        width: 100%;
        min-width: 0;
    }

    .credits-key-guide-link {
        min-height: 44px;
    }

    .credits-key-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px 0;
    }

    .credits-key-launch {
        grid-template-columns: 1fr;
    }

    .credits-key-model-label {
        grid-column: 1;
    }

    .credits-key-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .credits-ledger-row {
        gap: 12px;
    }

    .credits-refund-actions .auth-btn {
        flex: 1;
    }

    .admin-provider-section {
        margin-top: 16px;
        padding-top: 20px;
    }

    .admin-provider-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .admin-provider-list-wrap,
    .admin-provider-form,
    .admin-platform-key-form {
        padding: 14px;
    }

    .admin-platform-key-form {
        grid-template-columns: 1fr;
    }

    .admin-platform-key-form .auth-btn {
        grid-column: auto;
        width: 100%;
    }

    .admin-provider-row-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Determinate: width is data, so the indeterminate sweep must not also run. */
.agent-card-running-bar.is-determinate {
    animation: none;
    transition: width 400ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .agent-card-running-bar.is-determinate { transition: none; }
}

/* —— Admin console —— */
.admin-view {
    max-width: 1100px;
}

.admin-view .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.admin-stat {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.admin-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

@media (max-width: 720px) {
    .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.admin-table-wrap {
    overflow-x: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.admin-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.admin-pager-range {
    font-size: 13px;
    color: var(--text-secondary);
}

.admin-pager-buttons {
    display: flex;
    gap: 8px;
}

.admin-pager-buttons .auth-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-users-table th,
.admin-users-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    vertical-align: middle;
}

.admin-users-table th {
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.admin-users-table tr:last-child td {
    border-bottom: none;
}

/* Reads as a qualifier on the column, not a second column heading. Inherits
   the th's own --text-secondary and steps back with opacity rather than naming
   a --text-tertiary token, which this stylesheet does not define. */
.admin-th-note {
    display: block;
    font-weight: 400;
    font-size: 0.78em;
    opacity: 0.75;
}

.admin-users-table input[type="number"],
.admin-users-table select {
    width: 100%;
    min-width: 72px;
    max-width: 120px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
}

.admin-users-table .admin-email {
    word-break: break-all;
    max-width: 220px;
}

.admin-empty {
    color: var(--text-secondary);
    text-align: center;
    padding: 24px 12px;
}

.admin-role-locked {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.admin-save-btn {
    white-space: nowrap;
}

/* —— Admin Grant Credits console —— */
.admin-tabs {
    display: flex;
    gap: 4px;
    margin: 18px 0 0;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    overflow-x: auto;
}

.admin-tab {
    min-height: 38px;
    padding: 8px 15px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.admin-tab:hover,
.admin-tab:focus-visible {
    color: var(--text-primary);
    background: rgba(148, 163, 184, 0.12);
}

.admin-tab.is-active {
    color: var(--text-primary);
    background: rgba(103, 232, 249, 0.14);
}

.admin-tab-panel {
    min-width: 0;
    padding-top: 4px;
}

.admin-credits-console {
    margin: 28px 0;
    padding: 24px 0 8px;
    border-top: 1px solid var(--border-color);
}

.admin-credits-heading,
.admin-credits-subheading,
.admin-credits-form-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.admin-credits-heading h3,
.admin-credits-subheading h4,
.admin-credits-form-heading h4 {
    margin: 2px 0 0;
    color: var(--text-primary);
}

.admin-credits-heading h3 {
    font-size: 22px;
}

.admin-credits-subheading h4,
.admin-credits-form-heading h4 {
    font-size: 16px;
}

.admin-credits-summary-copy {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.admin-credits-pool-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
    align-items: stretch;
    gap: 16px;
    margin: 20px 0 24px;
}

.admin-credits-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.admin-credits-summary {
    display: grid;
    grid-template-columns: minmax(212px, 250px) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    height: 100%;
    margin: 0;
    padding: 22px 24px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
}

.admin-credits-pool-ring {
    position: relative;
    width: 212px;
    height: 212px;
}

.admin-credits-pool-ring svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.admin-credits-pool-ring circle {
    fill: none;
    stroke-width: 18;
}

.admin-credits-pool-ring-track {
    stroke: rgba(148, 163, 184, 0.18);
}

.admin-credits-pool-ring-available {
    stroke: #4ade80;
    stroke-linecap: round;
    transition: stroke-dasharray 240ms ease, stroke-dashoffset 240ms ease;
}

.admin-credits-pool-ring-allocated {
    stroke: #f87171;
    stroke-linecap: round;
    transition: stroke-dasharray 240ms ease, stroke-dashoffset 240ms ease;
}

.admin-credits-pool-ring-center {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    pointer-events: none;
    text-align: center;
}

.admin-credits-pool-ring-center span {
    color: var(--text-secondary);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-credits-pool-ring-center strong {
    margin-top: 5px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.admin-credits-pool-ring-center small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
}

.admin-credits-pool-legend {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.admin-credits-pool-legend-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.admin-credits-pool-legend-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.admin-credits-pool-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.admin-credits-pool-swatch.is-available {
    background: #4ade80;
}

.admin-credits-pool-swatch.is-allocated {
    background: #f87171;
}

.admin-credits-pool-legend-label {
    color: var(--text-secondary);
    font-size: 13px;
}

.admin-credits-pool-legend-row strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-align: right;
}

.admin-credits-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0;
}

.admin-credits-form {
    display: grid;
    height: 100%;
    box-sizing: border-box;
    gap: 11px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.28);
}

.admin-credits-form-heading {
    align-items: center;
    margin-bottom: 2px;
}

.admin-credits-form-heading > svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: #67e8f9;
}

.admin-credits-form .auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: 100%;
}

.admin-credits-form .auth-btn svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
}

.admin-credits-users,
.admin-credits-activity {
    margin-top: 24px;
}

.admin-credits-count {
    color: var(--text-secondary);
    font-size: 12px;
}

.admin-credits-search {
    display: flex;
    gap: 8px;
    margin: 12px 0 10px;
}

.admin-credits-search input {
    min-width: 0;
    flex: 1;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
}

.admin-credits-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
}

.admin-credits-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.admin-credits-pager-range {
    color: var(--text-secondary);
    font-size: 13px;
}

.admin-credits-pager-buttons {
    display: flex;
    gap: 8px;
}

.admin-credits-pager-buttons .auth-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.admin-credits-users-table,
.admin-credits-activity-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 12px;
}

.admin-credits-users-table th,
.admin-credits-users-table td,
.admin-credits-activity-table th,
.admin-credits-activity-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    text-align: left;
    vertical-align: middle;
}

.admin-credits-users-table th,
.admin-credits-activity-table th {
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.admin-credits-users-table tr:last-child td,
.admin-credits-activity-table tr:last-child td {
    border-bottom: none;
}

.admin-credits-account strong,
.admin-credits-account span {
    display: block;
}

.admin-credits-account strong {
    color: var(--text-primary);
    font-weight: 600;
}

.admin-credits-account span,
.admin-credits-time,
.admin-credits-reason {
    color: var(--text-secondary);
}

.admin-credits-account span {
    margin-top: 3px;
    font-size: 11px;
}

.admin-credits-role {
    white-space: nowrap;
}

.admin-status-active,
.admin-status-restricted {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
}

.admin-status-active {
    color: #86efac;
}

.admin-status-restricted {
    color: #fda4af;
}

.admin-credits-status-detail {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 10px;
    white-space: nowrap;
}

.admin-credits-role-select {
    width: 94px;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
}

.admin-credits-number,
.admin-credits-activity-amount {
    color: var(--text-primary);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.admin-credits-activity-amount.is-positive {
    color: #86efac;
}

.admin-credits-activity-amount.is-negative {
    color: #fda4af;
}

.admin-credits-amount-input {
    width: 112px;
    min-width: 96px;
    padding: 7px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: 12px var(--font-mono);
}

.admin-credits-row-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.admin-credits-row-actions .credits-key-action {
    min-height: 30px;
    padding: 5px 8px;
}

.admin-credits-status {
    margin-top: 14px;
}

@media (max-width: 820px) {
    .admin-credits-pool-layout {
        grid-template-columns: 1fr;
    }

    .admin-credits-summary,
    .admin-credits-actions {
        grid-template-columns: 1fr;
    }

    .admin-credits-pool-legend {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .admin-credits-heading,
    .admin-credits-subheading {
        flex-direction: column;
    }

    .admin-credits-heading-actions {
        align-self: stretch;
        justify-content: space-between;
    }

    .admin-credits-summary {
        grid-template-columns: 1fr;
    }

    .admin-credits-pool-ring {
        width: 190px;
        height: 190px;
    }

}

/* —— Admin Analytics: dense, read-only operator intelligence —— */
.admin-analytics-overview {
    display: grid;
    gap: 26px;
    padding: 24px 0 48px;
}

.admin-analytics-heading,
.admin-analytics-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.admin-analytics-heading h3,
.admin-analytics-section-head h4,
.admin-analytics-profile-summary h3 {
    margin: 3px 0 0;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.admin-analytics-heading h3 {
    font-size: clamp(24px, 3vw, 34px);
}

.admin-analytics-heading > div:first-child > p:last-child {
    max-width: 680px;
    margin: 8px 0 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.admin-analytics-update {
    display: grid;
    justify-items: end;
    gap: 8px;
    flex: 0 0 auto;
}

.admin-analytics-update p,
#adminAnalyticsUserRange {
    margin: 0;
    color: var(--text-muted);
    font: 11px var(--font-mono);
}

.admin-analytics-filters,
.admin-analytics-attention-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(103, 232, 249, 0.2);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(103, 232, 249, 0.055), transparent 40%),
        rgba(15, 23, 42, 0.42);
}

.admin-analytics-filters label,
.admin-analytics-attention-filters label {
    display: grid;
    align-content: end;
    gap: 7px;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.admin-analytics-filters input,
.admin-analytics-filters select,
.admin-analytics-attention-filters input,
.admin-analytics-attention-filters select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-input);
    color: var(--text-primary);
    color-scheme: dark;
    font: 13px var(--font-family);
}

.admin-analytics-filters .admin-analytics-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 4px;
    letter-spacing: 0;
    text-transform: none;
}

.admin-analytics-check input {
    width: 17px;
    min-height: 17px;
    flex: 0 0 17px;
}

.admin-analytics-filters > .auth-btn,
.admin-analytics-attention-filters > .auth-btn {
    min-height: 44px;
    align-self: end;
}

#adminAnalyticsFilterError {
    grid-column: 1 / -1;
    margin: 0;
}

.admin-analytics-section {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: 0 18px 55px rgba(2, 6, 23, 0.14);
}

.admin-analytics-section[aria-busy="true"] {
    border-color: rgba(103, 232, 249, 0.3);
}

.admin-analytics-section-head {
    align-items: center;
    margin-bottom: 18px;
}

.admin-analytics-section-head h4 {
    font-size: 19px;
}

.admin-analytics-section [role="alert"],
.admin-analytics-profile-panel [role="alert"] {
    margin: 12px 0;
    padding: 11px 12px;
    border-left: 3px solid #fb7185;
    background: rgba(244, 63, 94, 0.08);
    color: #fecdd3;
    font-size: 13px;
}

.admin-analytics-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.admin-analytics-snapshot-grid article {
    position: relative;
    min-width: 0;
    min-height: 142px;
    padding: 17px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 9px;
    background:
        radial-gradient(circle at 100% 0, rgba(103, 232, 249, 0.13), transparent 48%),
        rgba(2, 6, 23, 0.24);
}

.admin-analytics-snapshot-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(#67e8f9, rgba(103, 232, 249, 0));
}

.admin-analytics-snapshot-grid span,
.admin-analytics-snapshot-grid small {
    display: block;
    color: var(--text-secondary);
}

.admin-analytics-snapshot-grid span {
    min-height: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-analytics-snapshot-grid strong {
    display: block;
    margin: 12px 0 9px;
    color: #f8fafc;
    font: 700 clamp(24px, 3vw, 34px) var(--font-mono);
    letter-spacing: -0.05em;
    overflow-wrap: anywhere;
}

.admin-analytics-snapshot-grid small {
    font-size: 11px;
    line-height: 1.4;
}

.admin-analytics-operational-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 18px 0 0;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    overflow: hidden;
}

.admin-analytics-operational-strip > div {
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid rgba(148, 163, 184, 0.14);
}

.admin-analytics-operational-strip > div:last-child {
    border-right: 0;
}

.admin-analytics-operational-strip dt {
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.admin-analytics-operational-strip dd {
    margin: 6px 0 0;
    color: var(--text-primary);
    font: 700 15px var(--font-mono);
}

.admin-analytics-engagement-grid,
.admin-analytics-health-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    gap: 16px;
}

.admin-analytics-engagement-grid > article,
.admin-analytics-health-grid > article {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.2);
}

.admin-analytics-engagement-grid h5,
.admin-analytics-health-grid h5,
.admin-analytics-profile-overview h4 {
    margin: 0 0 14px;
    color: var(--text-primary);
    font-size: 13px;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.admin-analytics-chart-wrap {
    position: relative;
    min-height: 280px;
}

.admin-analytics-trend canvas {
    width: 100% !important;
    height: 280px !important;
}

.admin-analytics-funnel ol,
.admin-analytics-state-list,
.admin-analytics-timeline,
#adminAnalyticsMilestones,
#adminAnalyticsBillingMix {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-analytics-funnel li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.5);
}

.admin-analytics-funnel li::before {
    content: "";
    position: absolute;
    inset: auto auto 0 0;
    width: var(--analytics-progress, 0%);
    height: 2px;
    background: #a3e635;
    transition: width 240ms ease;
}

.admin-analytics-funnel li span {
    color: var(--text-secondary);
    font-size: 12px;
}

.admin-analytics-funnel li strong,
.admin-analytics-funnel li small {
    font-family: var(--font-mono);
}

.admin-analytics-funnel li small {
    color: #bef264;
}

.admin-analytics-state-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 38px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.admin-analytics-state-list li:last-child {
    border-bottom: 0;
}

.admin-analytics-state-list strong,
.admin-analytics-number {
    color: var(--text-primary);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.admin-analytics-state-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.045em;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-analytics-state-badge.is-blocked { color: #fda4af; background: rgba(244, 63, 94, 0.1); }
.admin-analytics-state-badge.is-needs_attention { color: #fdba74; background: rgba(249, 115, 22, 0.1); }
.admin-analytics-state-badge.is-dormant { color: #c4b5fd; background: rgba(139, 92, 246, 0.1); }
.admin-analytics-state-badge.is-onboarding { color: #7dd3fc; background: rgba(14, 165, 233, 0.1); }
.admin-analytics-state-badge.is-active { color: #86efac; background: rgba(34, 197, 94, 0.1); }

.admin-analytics-table-wrap {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
}

.admin-analytics-friction-table,
.admin-analytics-attention-table,
.admin-analytics-activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.admin-analytics-attention-table,
.admin-analytics-activity-table {
    min-width: 840px;
}

.admin-analytics-friction-table th,
.admin-analytics-friction-table td,
.admin-analytics-attention-table th,
.admin-analytics-attention-table td,
.admin-analytics-activity-table th,
.admin-analytics-activity-table td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    text-align: left;
    vertical-align: top;
}

.admin-analytics-friction-table th,
.admin-analytics-attention-table th,
.admin-analytics-activity-table th {
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-analytics-friction-table tr:last-child td,
.admin-analytics-attention-table tr:last-child td,
.admin-analytics-activity-table tr:last-child td {
    border-bottom: 0;
}

.admin-analytics-attention-filters {
    grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) auto;
    margin-bottom: 14px;
    padding: 12px;
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(2, 6, 23, 0.18);
}

.admin-analytics-account strong,
.admin-analytics-account span,
.admin-analytics-account small {
    display: block;
}

.admin-analytics-account strong {
    color: var(--text-primary);
    font-size: 13px;
}

.admin-analytics-account span,
.admin-analytics-account small,
.admin-analytics-reason {
    margin-top: 4px;
    color: var(--text-secondary);
}

.admin-analytics-account span {
    word-break: break-all;
}

.admin-analytics-account small {
    font: 10px var(--font-mono);
}

.admin-analytics-reason {
    max-width: 330px;
    margin-bottom: 0;
    line-height: 1.45;
}

.admin-analytics-pager {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.admin-analytics-empty-row {
    color: var(--text-secondary);
    font-size: 13px;
}

.admin-analytics-profile {
    padding: 22px 0 50px;
}

#adminAnalyticsProfileBack {
    margin-bottom: 16px;
}

.admin-analytics-profile-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.admin-analytics-profile-summary {
    position: sticky;
    top: 82px;
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(103, 232, 249, 0.2);
    border-radius: 10px;
    background:
        radial-gradient(circle at 100% 0, rgba(103, 232, 249, 0.1), transparent 38%),
        var(--bg-card);
}

.admin-analytics-profile-summary h3 {
    margin-top: 8px;
    font-size: 23px;
    overflow-wrap: anywhere;
}

#adminAnalyticsProfileEmail {
    margin: 5px 0 18px;
    color: var(--text-secondary);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.admin-analytics-profile-facts {
    display: grid;
    gap: 0;
    margin: 0;
}

.admin-analytics-profile-facts > div {
    display: grid;
    gap: 5px;
    padding: 10px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.admin-analytics-profile-facts dt {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.admin-analytics-profile-facts dd {
    margin: 0;
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

#adminAnalyticsProfileEvidence {
    margin: 15px 0;
    color: var(--text-secondary);
    font-size: 11px;
}

#adminAnalyticsProfileEvidence summary {
    cursor: pointer;
}

#adminAnalyticsProfileEvidence ul {
    padding-left: 20px;
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}

#adminAnalyticsOpenAccount {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    color: #67e8f9;
    font-size: 12px;
    font-weight: 700;
}

.admin-analytics-profile-content {
    min-width: 0;
}

.admin-analytics-profile-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: rgba(2, 6, 23, 0.3);
}

.admin-analytics-profile-tabs button {
    min-height: 40px;
    padding: 8px 13px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font: 700 12px var(--font-family);
    cursor: pointer;
}

.admin-analytics-profile-tabs button:hover,
.admin-analytics-profile-tabs button.is-active {
    background: rgba(103, 232, 249, 0.12);
    color: var(--text-primary);
}

.admin-analytics-profile-panel {
    min-width: 0;
    margin-top: 14px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
}

.admin-analytics-profile-panel > [data-section-more] {
    margin-top: 14px;
}

.admin-analytics-profile-overview {
    display: grid;
    gap: 16px;
}

.admin-analytics-profile-overview > section {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.18);
}

#adminAnalyticsMilestones li,
.admin-analytics-timeline li {
    position: relative;
    padding: 0 0 14px 19px;
    border-left: 1px solid rgba(103, 232, 249, 0.28);
}

#adminAnalyticsMilestones li::before,
.admin-analytics-timeline li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: -4px;
    width: 7px;
    height: 7px;
    border: 1px solid #67e8f9;
    border-radius: 50%;
    background: var(--bg-card);
}

#adminAnalyticsMilestones li:last-child,
.admin-analytics-timeline li:last-child {
    padding-bottom: 0;
}

#adminAnalyticsMilestones strong,
#adminAnalyticsMilestones time,
.admin-analytics-timeline strong,
.admin-analytics-timeline time {
    display: block;
}

#adminAnalyticsMilestones strong,
.admin-analytics-timeline strong {
    color: var(--text-primary);
    font-size: 12px;
}

#adminAnalyticsMilestones time,
.admin-analytics-timeline time {
    margin-top: 4px;
    color: var(--text-muted);
    font: 10px var(--font-mono);
}

.admin-analytics-timeline li > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.admin-analytics-timeline p {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

.admin-analytics-summary-grid,
#adminAnalyticsUsageSummary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.admin-analytics-summary-grid > div,
#adminAnalyticsUsageSummary > div {
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 7px;
}

.admin-analytics-summary-grid dt,
#adminAnalyticsUsageSummary dt {
    color: var(--text-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.admin-analytics-summary-grid dd,
#adminAnalyticsUsageSummary dd {
    margin: 7px 0 0;
    color: var(--text-primary);
    font: 700 14px var(--font-mono);
    overflow-wrap: anywhere;
}

.admin-analytics-profile-usage {
    display: grid;
    gap: 14px;
}

#adminAnalyticsBillingMix li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border-left: 2px solid #a3e635;
    background: rgba(163, 230, 53, 0.06);
    color: var(--text-secondary);
    font-size: 11px;
}

#adminAnalyticsBillingMix strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.admin-analytics-filters :focus-visible,
.admin-analytics-attention-filters :focus-visible,
.admin-analytics-profile :focus-visible,
.admin-tab:focus-visible {
    outline: 2px solid #67e8f9;
    outline-offset: 2px;
}

@media (max-width: 1100px) {
    .admin-analytics-filters {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .admin-analytics-operational-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-analytics-operational-strip > div {
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    }
}

@media (max-width: 900px) {
    .admin-analytics-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-analytics-engagement-grid,
    .admin-analytics-health-grid,
    .admin-analytics-profile-layout {
        grid-template-columns: 1fr;
    }

    .admin-analytics-profile-summary {
        position: static;
    }

    .admin-analytics-attention-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .admin-analytics-overview {
        gap: 18px;
        padding-top: 18px;
    }

    .admin-analytics-heading,
    .admin-analytics-section-head {
        flex-direction: column;
    }

    .admin-analytics-update {
        width: 100%;
        justify-items: stretch;
    }

    .admin-analytics-update p {
        text-align: left;
    }

    .admin-analytics-filters,
    .admin-analytics-attention-filters,
    .admin-analytics-snapshot-grid,
    .admin-analytics-operational-strip,
    .admin-analytics-summary-grid,
    #adminAnalyticsUsageSummary {
        grid-template-columns: 1fr;
    }

    .admin-analytics-filters > .auth-btn,
    .admin-analytics-attention-filters > .auth-btn {
        width: 100%;
    }

    .admin-analytics-section,
    .admin-analytics-profile-panel,
    .admin-analytics-profile-summary {
        padding: 15px;
    }

    .admin-analytics-operational-strip > div {
        border-right: 0;
    }

    .admin-analytics-chart-wrap,
    .admin-analytics-trend canvas {
        min-height: 220px;
        height: 220px !important;
    }

    .admin-analytics-timeline li > div {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-analytics-funnel li::before,
    .admin-analytics-section,
    .admin-analytics-profile-tabs button {
        transition: none;
    }
}