/* ═══════════════════════════════════════════════════════════════
   SCC Terminal — Stock Command Center
   Aesthetic: CRT trading terminal × modern dark UI
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tokens ──────────────────────────────────────────────────── */
:root {
    /* Surface */
    --void:       #06080d;
    --base:       #0b0e14;
    --surface:    #0f1319;
    --raised:     #141820;
    --overlay:    #1a1f2b;
    --border:     #1e2433;
    --border-lit: #2a3148;

    /* Accent — electric cyan */
    --cyan:       #00e5ff;
    --cyan-dim:   #00b8d4;
    --cyan-glow:  rgba(0, 229, 255, 0.08);
    --cyan-ghost: rgba(0, 229, 255, 0.03);

    /* Semantic */
    --up:         #00e676;
    --up-bg:      rgba(0, 230, 118, 0.08);
    --down:       #ff1744;
    --down-bg:    rgba(255, 23, 68, 0.08);
    --warn:       #ffab00;
    --warn-bg:    rgba(255, 171, 0, 0.08);

    /* Text */
    --t1:         #e8ecf4;
    --t2:         #8892a4;
    --t3:         #505a6e;

    /* Type */
    --mono:       'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;
    --sans:       'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Dimensions */
    --sidebar-w:  220px;
    --topbar-h:   48px;
    --radius:     6px;
    --radius-sm:  3px;
}

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

body {
    font-family: var(--sans);
    background: var(--void);
    color: var(--t1);
    font-size: 13px;
    line-height: 1.55;
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan-dim); text-decoration: none; }

/* ─── Scanline Overlay ────────────────────────────────────────── */
.scanline-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
}

/* ─── Layout ──────────────────────────────────────────────────── */
.layout {
    display: flex;
    height: 100vh;
}

/* ─── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    background: var(--base);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
}

/* Glow line on right edge */
.sidebar::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--cyan) 30%,
        var(--cyan) 70%,
        transparent 100%
    );
    opacity: 0.15;
}

.sidebar-brand {
    padding: 16px 14px 12px;
}

.brand-mark {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--cyan), var(--cyan-dim));
    border-radius: 6px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.brand-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--void);
}

.brand-name {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--t1);
    letter-spacing: 2px;
}

.brand-sub {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t3);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: -1px;
}

.brand-divider {
    height: 1px;
    background: linear-gradient(90deg, var(--border-lit), transparent);
    margin-top: 12px;
}

/* Nav */
.nav-section {
    padding: 8px 10px 4px;
}

.nav-label {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 6px 6px;
}

.nav-links {
    list-style: none;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--t2);
    font-size: 12.5px;
    font-weight: 500;
    transition: all 0.15s ease;
    position: relative;
    margin-bottom: 1px;
}

.nav-link:hover {
    color: var(--t1);
    background: var(--cyan-ghost);
}

.nav-link.active {
    color: var(--cyan);
    background: var(--cyan-glow);
}

.nav-link.disabled {
    color: var(--t3);
    pointer-events: none;
    opacity: 0.5;
}

.nav-active-bar {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 16px;
    background: var(--cyan);
    border-radius: 1px;
    box-shadow: 0 0 8px var(--cyan);
}

.nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Collapsible nav group */
.nav-group-toggle {
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.nav-chevron {
    width: 12px;
    height: 12px;
    margin-left: auto;
    flex-shrink: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
    opacity: 0.5;
}

.nav-group.open .nav-chevron {
    transform: rotate(180deg);
}

.nav-sub {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.nav-group.open .nav-sub {
    max-height: 200px;
}

.nav-sub-link {
    padding-left: 36px !important;
    font-size: 11.5px !important;
}

.nav-sub-link::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--t3);
    transition: background 0.15s ease;
}

.nav-sub-link.active::before {
    background: var(--cyan);
    box-shadow: 0 0 4px var(--cyan);
}

/* Sidebar footer */
.sidebar-footer {
    margin-top: auto;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Sidebar toggle button */
.sidebar-toggle {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.sidebar-toggle:hover {
    color: var(--cyan);
    border-color: var(--cyan);
    background: var(--cyan-glow);
}

.sidebar-toggle-icon {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}

.system-pulse {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--t3);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.pulse-dot.online {
    background: var(--up);
    box-shadow: 0 0 6px var(--up), 0 0 12px rgba(0,230,118,0.2);
    animation: pulse 2s ease-in-out infinite;
}

.pulse-dot.offline {
    background: var(--t3);
}

.pulse-dot.error {
    background: var(--down);
    box-shadow: 0 0 6px var(--down);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pulse-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t3);
    letter-spacing: 0.3px;
}

/* ─── Main ────────────────────────────────────────────────────── */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--base);
}

/* ─── Topbar ──────────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-h);
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--surface);
}

.page-title {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.meta-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--t3);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.meta-clock {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 1px;
}

.meta-value {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--t2);
}

.topbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
}

/* ─── Content ─────────────────────────────────────────────────── */
.content {
    flex: 1;
    padding: 16px 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ─── Status Strip ────────────────────────────────────────────── */
.status-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
    animation: fadeUp 0.4s ease both;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.strip-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.strip-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cyan-ghost), transparent 60%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.strip-card:hover::before {
    opacity: 1;
}

.strip-card:hover {
    border-color: var(--border-lit);
}

.strip-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--raised);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.strip-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--t2);
}

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

.strip-label {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 500;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.strip-value {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--t1);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.strip-badge {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    flex-shrink: 0;
    background: rgba(136, 146, 164, 0.1);
    color: var(--t3);
    border: 1px solid var(--border);
}

.strip-badge.badge-up,
.badge-up {
    background: var(--up-bg);
    color: var(--up);
    border-color: rgba(0, 230, 118, 0.15);
}

.strip-badge.badge-down,
.badge-down {
    background: var(--down-bg);
    color: var(--down);
    border-color: rgba(255, 23, 68, 0.15);
}

.strip-badge.badge-warn,
.badge-warn {
    background: var(--warn-bg);
    color: var(--warn);
    border-color: rgba(255, 171, 0, 0.15);
}

/* ─── Chart Grid ──────────────────────────────────────────────── */
.chart-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
    animation: fadeUp 0.5s ease 0.1s both;
}

.chart-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

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

.panel-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 4px var(--cyan);
}

.panel-title {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.panel-actions {
    display: flex;
    gap: 2px;
}

.panel-btn {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.5px;
}

.panel-btn:hover {
    color: var(--t2);
    border-color: var(--border-lit);
}

.panel-btn.active {
    color: var(--cyan);
    border-color: var(--cyan);
    background: var(--cyan-glow);
}

.panel-body {
    flex: 1;
    padding: 12px;
    min-height: 220px;
    position: relative;
}

.panel-body-tall {
    min-height: 360px;
}

.panel-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t3);
    letter-spacing: 0.3px;
}

.panel-footer {
    padding: 6px 14px;
    border-top: 1px solid var(--border);
}

.panel-foot-label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t3);
    letter-spacing: 0.3px;
}

/* ─── Info Strip ──────────────────────────────────────────────── */
.info-strip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    animation: fadeUp 0.5s ease 0.2s both;
}

.info-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-value {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--t2);
}

.info-divider {
    width: 1px;
    height: 16px;
    background: var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   AUTH / LOGIN PAGE
   ═══════════════════════════════════════════════════════════════ */

.auth-layout {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: fadeUp 0.4s ease both;
}

.auth-status-body {
    min-height: 48px;
}

.auth-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--t3);
}

.auth-loading-bar {
    width: 24px;
    height: 2px;
    background: var(--border);
    border-radius: 1px;
    position: relative;
    overflow: hidden;
}

.auth-loading-bar::after {
    content: '';
    position: absolute;
    left: -50%;
    top: 0;
    width: 50%;
    height: 100%;
    background: var(--cyan);
    animation: loadSlide 1s ease-in-out infinite;
}

@keyframes loadSlide {
    0% { left: -50%; }
    100% { left: 150%; }
}

/* Session info grid */
.auth-info-grid {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 4px 12px;
    font-size: 12px;
}

.auth-info-grid dt {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 2px;
}

.auth-info-grid dd {
    color: var(--t1);
    font-weight: 600;
    font-family: var(--mono);
    font-size: 12px;
}

/* Form */
.auth-form-intro p {
    font-size: 12px;
    color: var(--t3);
    margin-bottom: 16px;
    line-height: 1.6;
}

.totp-field {
    margin-bottom: 4px;
}

.totp-label {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.totp-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.totp-input-wrap {
    flex: 1;
    position: relative;
}

.totp-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--void);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 10px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    caret-color: var(--cyan);
}

.totp-input::placeholder {
    color: var(--t3);
    opacity: 0.3;
    letter-spacing: 6px;
}

.totp-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px var(--cyan-glow), 0 0 20px rgba(0, 229, 255, 0.05);
}

.totp-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.totp-input:focus ~ .totp-underline {
    opacity: 0.5;
}

/* Auth button */
.auth-btn {
    padding: 10px 24px;
    background: var(--cyan);
    border: none;
    border-radius: var(--radius);
    color: var(--void);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    position: relative;
    overflow: hidden;
}

.auth-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.auth-btn:hover::before {
    transform: translateX(100%);
}

.auth-btn:hover {
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.25);
}

.auth-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auth-btn:disabled::before {
    display: none;
}

.spin-icon {
    width: 16px;
    height: 16px;
    animation: spin 0.8s linear infinite;
}

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

.hidden { display: none !important; }

/* Feedback */
.auth-feedback {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    border: 1px solid var(--border);
}

.auth-feedback.feedback-success {
    background: var(--up-bg);
    color: var(--up);
    border-color: rgba(0, 230, 118, 0.15);
}

.auth-feedback.feedback-error {
    background: var(--down-bg);
    color: var(--down);
    border-color: rgba(255, 23, 68, 0.15);
}

/* ─── Refresh Bar ─────────────────────────────────────────────── */
.refresh-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    animation: fadeUp 0.3s ease both;
}

.refresh-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t3);
    letter-spacing: 0.3px;
}

.refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--t2);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.refresh-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    background: var(--cyan-glow);
}

.refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.refresh-icon {
    width: 13px;
    height: 13px;
    transition: transform 0.3s ease;
}

.refresh-btn.spinning .refresh-icon {
    animation: spin 0.8s linear infinite;
}

/* ─── DAG Heatmap ────────────────────────────────────────────── */
.heatmap-body {
    padding: 12px;
}

.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

/* Individual DAG tile */
.heatmap-tile {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--border);
    background: var(--raised);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.heatmap-tile:hover {
    border-color: var(--border-lit);
    background: var(--overlay);
}

.heatmap-tile.hm-selected {
    border-color: var(--cyan);
    background: var(--cyan-glow);
}

/* State left-border accent */
.heatmap-tile.hm-success { border-left: 3px solid var(--up); }
.heatmap-tile.hm-failed  { border-left: 3px solid var(--down); }
.heatmap-tile.hm-running { border-left: 3px solid var(--cyan); }
.heatmap-tile.hm-queued  { border-left: 3px solid var(--warn); }
.heatmap-tile.hm-paused  { border-left: 3px solid var(--t3); opacity: 0.6; }
.heatmap-tile.hm-no-runs { border-left: 3px solid var(--border-lit); opacity: 0.6; }

.hm-tile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.hm-tile-name {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.hm-tile-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.hm-tile-dur {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t3);
}

.hm-tile-recent {
    display: flex;
    gap: 2px;
    align-items: center;
}

.hm-mini-dot {
    width: 5px;
    height: 5px;
    border-radius: 1px;
    display: inline-block;
}

.hm-mini-dot.dot-success { background: var(--up); }
.hm-mini-dot.dot-failed  { background: var(--down); }
.hm-mini-dot.dot-running { background: var(--cyan); }
.hm-mini-dot.dot-queued  { background: var(--warn); }

/* ─── Detail Drawer ──────────────────────────────────────────── */
.heatmap-drawer {
    border-top: 1px solid var(--border);
    background: var(--raised);
    animation: fadeUp 0.2s ease both;
}

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

.heatmap-drawer-meta {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.drawer-meta-grid {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 4px 12px;
    align-items: center;
}

.drawer-ml {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.drawer-mv {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t2);
}

.heatmap-drawer-tasks {
    padding: 10px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ─── DAG Monitor ────────────────────────────────────────────── */
.mon-strip {
    animation: fadeUp 0.4s ease both;
}

.dag-monitor-panel {
    animation: fadeUp 0.5s ease 0.15s both;
}

.dag-offline,
.dag-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
}

.dag-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.dag-table thead th {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--raised);
    position: sticky;
    top: 0;
    white-space: nowrap;
}

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

.dag-table tbody tr:last-child {
    border-bottom: none;
}

.dag-table tbody tr:hover {
    background: var(--cyan-ghost);
}

.dag-table td {
    padding: 10px 12px;
    vertical-align: middle;
    white-space: nowrap;
}

/* DAG name cell */
.dag-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dag-name-id {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--t1);
}

.dag-name-desc {
    font-size: 10px;
    color: var(--t3);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dag-tags {
    display: flex;
    gap: 4px;
    margin-top: 3px;
}

.dag-tag {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--cyan-glow);
    color: var(--cyan-dim);
    border: 1px solid rgba(0, 229, 255, 0.1);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Schedule cell */
.dag-schedule {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t2);
}

/* Status badge */
.dag-status {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 3px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: inline-block;
}

.dag-status.status-success {
    background: var(--up-bg);
    color: var(--up);
    border: 1px solid rgba(0, 230, 118, 0.15);
}

.dag-status.status-failed {
    background: var(--down-bg);
    color: var(--down);
    border: 1px solid rgba(255, 23, 68, 0.15);
}

.dag-status.status-running {
    background: var(--cyan-glow);
    color: var(--cyan);
    border: 1px solid rgba(0, 229, 255, 0.15);
    animation: pulse 2s ease-in-out infinite;
}

.dag-status.status-queued {
    background: var(--warn-bg);
    color: var(--warn);
    border: 1px solid rgba(255, 171, 0, 0.15);
}

.dag-status.status-paused {
    background: rgba(136, 146, 164, 0.08);
    color: var(--t3);
    border: 1px solid var(--border);
}

.dag-status.status-no-runs {
    background: rgba(136, 146, 164, 0.05);
    color: var(--t3);
    border: 1px solid var(--border);
}

/* Time cells */
.dag-time {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t2);
}

.dag-time-secondary {
    display: block;
    font-size: 9px;
    color: var(--t3);
    margin-top: 1px;
}

/* Duration cell */
.dag-duration {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t2);
}

/* Recent runs mini-dots */
.dag-recent-runs {
    display: flex;
    gap: 3px;
    align-items: center;
}

.dag-run-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
    position: relative;
    cursor: default;
}

.dag-run-dot.dot-success {
    background: var(--up);
    box-shadow: 0 0 4px rgba(0, 230, 118, 0.3);
}

.dag-run-dot.dot-failed {
    background: var(--down);
    box-shadow: 0 0 4px rgba(255, 23, 68, 0.3);
}

.dag-run-dot.dot-running {
    background: var(--cyan);
    box-shadow: 0 0 4px rgba(0, 229, 255, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

.dag-run-dot.dot-queued {
    background: var(--warn);
}

/* Expand row for task details */
.dag-tasks-row td {
    padding: 0 12px;
    background: var(--raised);
}

.dag-tasks-row.hidden td {
    padding: 0;
    height: 0;
    overflow: hidden;
}

.dag-tasks-container {
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dag-task-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 9px;
    padding: 4px 8px;
    border-radius: 3px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--t2);
}

.dag-task-chip .chip-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.chip-dot.dot-success { background: var(--up); }
.chip-dot.dot-failed { background: var(--down); }
.chip-dot.dot-running { background: var(--cyan); animation: pulse 2s ease-in-out infinite; }
.chip-dot.dot-queued { background: var(--warn); }
.chip-dot.dot-none { background: var(--t3); }

/* ═══════════════════════════════════════════════════════════════
   CORPORATES PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ─── Content Panes ──────────────────────────────────────────── */
.corp-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.corp-pane {
    display: none;
    flex-direction: column;
    flex: 1;
}

.corp-pane.active {
    display: flex;
}

/* ─── Announcements Controls ─────────────────────────────────── */
.ann-controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ann-controls-left {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.ann-controls-right {
    display: flex;
    align-items: center;
}

.ann-field-label {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.ann-select {
    padding: 5px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--t1);
    font-family: var(--mono);
    font-size: 11px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
    min-width: 130px;
}

.ann-select:focus {
    border-color: var(--cyan);
}

.ann-select option {
    background: var(--base);
    color: var(--t1);
}

.ann-input {
    padding: 5px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--t1);
    font-family: var(--mono);
    font-size: 11px;
    outline: none;
    transition: border-color 0.2s ease;
    width: 180px;
}

.ann-input::placeholder {
    color: var(--t3);
    opacity: 0.5;
}

.ann-input:focus {
    border-color: var(--cyan);
}

.ann-total-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t3);
    letter-spacing: 0.3px;
}

/* ─── Announcements Table ────────────────────────────────────── */
.ann-table-wrap {
    overflow-y: auto;
}

.ann-table tbody tr {
    cursor: default;
}

.ann-scrip {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--cyan-dim);
}

.ann-headline {
    font-size: 11px;
    color: var(--t1);
    display: block;
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ann-headline.ann-critical {
    color: var(--warn);
}

.ann-cat-badge {
    font-family: var(--mono);
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--raised);
    border: 1px solid var(--border);
    color: var(--t2);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.ann-pdf-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan-dim);
    transition: color 0.15s ease;
}

.ann-pdf-link:hover {
    color: var(--cyan);
}

/* ─── Placeholder States ─────────────────────────────────────── */
.ann-placeholder {
    padding: 40px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Pagination ─────────────────────────────────────────────── */
.ann-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ann-pag-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ann-pag-right {
    display: flex;
    align-items: center;
}

.ann-pag-pages {
    display: flex;
    gap: 2px;
    align-items: center;
}

.ann-pag-dots {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t3);
    padding: 0 4px;
}

/* ─── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-lit); }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR COLLAPSED STATE
   ═══════════════════════════════════════════════════════════════ */
.layout.sidebar-collapsed .sidebar {
    width: 52px;
}

.layout.sidebar-collapsed .brand-text,
.layout.sidebar-collapsed .nav-label,
.layout.sidebar-collapsed .nav-link span,
.layout.sidebar-collapsed .nav-chevron,
.layout.sidebar-collapsed .nav-sub,
.layout.sidebar-collapsed .pulse-label,
.layout.sidebar-collapsed .nav-active-bar {
    display: none;
}

.layout.sidebar-collapsed .sidebar-brand {
    padding: 12px 10px 8px;
}

.layout.sidebar-collapsed .brand-mark {
    justify-content: center;
}

.layout.sidebar-collapsed .nav-section {
    padding: 4px 6px;
}

.layout.sidebar-collapsed .nav-link {
    justify-content: center;
    padding: 8px;
}

.layout.sidebar-collapsed .nav-link .nav-icon {
    margin: 0;
}

/* Tooltip on hover when collapsed */
.layout.sidebar-collapsed .nav-link {
    position: relative;
}

.layout.sidebar-collapsed .nav-link::after {
    content: attr(title);
    display: none;
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface);
    border: 1px solid var(--border-lit);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t1);
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.layout.sidebar-collapsed .nav-link:hover::after {
    display: block;
}

/* Flip the toggle arrow */
.layout.sidebar-collapsed .sidebar-toggle-icon {
    transform: rotate(180deg);
}

.layout.sidebar-collapsed .sidebar-footer {
    justify-content: center;
    padding: 8px 6px;
}

.layout.sidebar-collapsed .system-pulse {
    display: none;
}

/* Brand divider */
.layout.sidebar-collapsed .brand-divider {
    margin-top: 8px;
}

/* Sidebar transition */
.sidebar {
    transition: width 0.25s ease;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .chart-grid { grid-template-columns: 1fr; }
    .status-strip { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .sidebar { display: none; }
    .content { padding: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   Terminal Section
   ═══════════════════════════════════════════════════════════════ */

/* ─── Password Gate ──────────────────────────────────────────── */
.term-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
}

.term-gate-box {
    text-align: center;
    max-width: 360px;
    width: 100%;
}

.term-gate-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background: var(--overlay);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.term-gate-icon svg {
    width: 28px;
    height: 28px;
    color: var(--cyan);
}

.term-gate-title {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: 6px;
}

.term-gate-sub {
    font-size: 12px;
    color: var(--t3);
    margin-bottom: 20px;
}

.term-gate-form {
    display: flex;
    gap: 8px;
}

.term-gate-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--t1);
    font-family: var(--mono);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.term-gate-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px var(--cyan-glow);
}

.term-gate-input::placeholder {
    color: var(--t3);
}

.term-gate-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--cyan), var(--cyan-dim));
    border: none;
    border-radius: var(--radius);
    color: var(--void);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.term-gate-btn:hover { opacity: 0.85; }
.term-gate-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.term-gate-error {
    margin-top: 12px;
    font-size: 12px;
    color: var(--down);
    min-height: 18px;
}

/* ─── Terminal Container ─────────────────────────────────────── */
.term-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
}

/* ─── Tab Bar ────────────────────────────────────────────────── */
.term-tabs {
    display: flex;
    align-items: stretch;
    background: var(--base);
    border-bottom: 1px solid var(--border);
    min-height: 36px;
    flex-shrink: 0;
}

.term-tabs-scroll {
    display: flex;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
}
.term-tabs-scroll::-webkit-scrollbar { display: none; }

.term-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    min-width: 100px;
    max-width: 180px;
    height: 36px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--t3);
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    user-select: none;
}

.term-tab:hover {
    color: var(--t2);
    background: var(--surface);
}

.term-tab.active {
    color: var(--cyan);
    background: var(--surface);
}

.term-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--cyan);
}

.term-tab-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.term-tab-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--t3);
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s;
    flex-shrink: 0;
}

.term-tab:hover .term-tab-close { opacity: 1; }
.term-tab-close:hover { background: var(--overlay); color: var(--down); }

.term-tab-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    border: none;
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.term-tab-add:hover {
    color: var(--cyan);
    background: var(--surface);
}

/* ─── Terminal Panels ────────────────────────────────────────── */
.term-panels {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--base);
}

.term-panel {
    position: absolute;
    inset: 0;
    padding: 4px 0 0 4px;
}

.term-panel .xterm {
    height: 100%;
}

.term-panel .xterm-viewport {
    scrollbar-width: thin;
    scrollbar-color: var(--border-lit) transparent;
}

.term-panel .xterm-viewport::-webkit-scrollbar {
    width: 6px;
}

.term-panel .xterm-viewport::-webkit-scrollbar-track {
    background: transparent;
}

.term-panel .xterm-viewport::-webkit-scrollbar-thumb {
    background: var(--border-lit);
    border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   Paper Trading v2 — SHIP strategies
   Scoped to .pt2-*
   ═══════════════════════════════════════════════════════════════ */

.hidden { display: none !important; }

.pt2-up   { color: var(--up); }
.pt2-down { color: var(--down); }
.pt2-flat { color: var(--t2); }

/* ── Mode bar ─────────────────────────────────────────────────── */
.pt2-modebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 16px;
    flex-wrap: wrap;
}
.pt2-modetabs {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 2px;
}
.pt2-modetab {
    background: transparent;
    border: none;
    color: var(--t2);
    padding: 6px 14px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 2px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.15s;
}
.pt2-modetab:hover { color: var(--t1); }
.pt2-modetab.active {
    background: var(--cyan-glow);
    color: var(--cyan);
    box-shadow: inset 0 0 0 1px var(--cyan-dim);
}
.pt2-modetab-sub {
    color: var(--t3);
    font-size: 9px;
    margin-left: 6px;
    text-transform: none;
    letter-spacing: 0;
}
.pt2-modetab.active .pt2-modetab-sub { color: var(--cyan-dim); }

.pt2-mode-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t2);
    flex-wrap: wrap;
}
.pt2-mode-meta-label { color: var(--t3); text-transform: uppercase; letter-spacing: 0.05em; }
.pt2-mode-meta-value { color: var(--t1); }
.pt2-mode-meta-divider {
    width: 1px; height: 12px; background: var(--border-lit);
    display: inline-block; margin: 0 6px;
}

/* ── Portfolio strip ──────────────────────────────────────────── */
.pt2-portfolio-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.pt2-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pt2-stat-label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pt2-stat-value {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--t1);
    font-weight: 600;
}

/* Empty banner (live-mode placeholder) */
.pt2-empty-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--warn-bg);
    border: 1px solid var(--warn);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 14px;
}
.pt2-empty-body { display: flex; flex-direction: column; gap: 2px; }
.pt2-empty-title { font-size: 12px; font-weight: 600; color: var(--t1); }
.pt2-empty-sub { font-size: 11px; color: var(--t2); }

/* ── Strategy grid ────────────────────────────────────────────── */
.pt2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.pt2-grid-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--t3);
    font-family: var(--mono);
    font-size: 11px;
    padding: 24px;
}

.pt2-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pt2-card:hover {
    border-color: var(--cyan-dim);
    transform: translateY(-1px);
}

.pt2-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pt2-id-badge {
    background: var(--cyan-glow);
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    padding: 2px 8px;
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.pt2-card-iter {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t3);
    text-transform: uppercase;
}
.pt2-card-verdict {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: 0.05em;
}
.pt2-verdict-ship {
    background: var(--up-bg);
    color: var(--up);
    border: 1px solid var(--up);
}

.pt2-card-title {
    font-size: 12px;
    color: var(--t1);
    font-weight: 500;
    line-height: 1.35;
    min-height: 32px;
}

.pt2-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin-top: 2px;
}
.pt2-card-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pt2-card-stat-label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pt2-card-stat-value {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t1);
    font-weight: 600;
}

.pt2-card-empty {
    color: var(--t3);
    font-family: var(--mono);
    font-size: 10px;
    padding: 10px 0;
    text-align: center;
}

/* ── Detail drawer ────────────────────────────────────────────── */
.pt2-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
}
.pt2-drawer-mask {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 13, 0.6);
}
.pt2-drawer-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(960px, 95vw);
    background: var(--base);
    border-left: 1px solid var(--border-lit);
    overflow-y: auto;
    padding: 16px 20px 32px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pt2-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.pt2-drawer-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pt2-drawer-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--t1);
}
.pt2-drawer-iter {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t3);
    text-transform: uppercase;
}
.pt2-drawer-close {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--t2);
    padding: 6px 12px;
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 10px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pt2-drawer-close:hover { border-color: var(--cyan-dim); color: var(--t1); }

.pt2-drawer-mode-row {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: var(--mono);
    font-size: 10px;
}
.pt2-drawer-mode-label { color: var(--t3); text-transform: uppercase; letter-spacing: 0.05em; }
.pt2-drawer-mode-value {
    color: var(--cyan);
    background: var(--cyan-glow);
    padding: 2px 8px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pt2-drawer-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pt2-section-title {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
    margin-bottom: 4px;
}

/* Summary tile grid */
.pt2-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
}
.pt2-summary-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pt2-summary-tile-label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pt2-summary-tile-value {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t1);
    font-weight: 600;
}

/* Equity chart */
.pt2-chart-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 12px;
    height: 280px;
    position: relative;
}

/* Tables */
.pt2-table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    overflow: auto;
    max-height: 360px;
}
.pt2-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 11px;
}
.pt2-table thead th {
    position: sticky;
    top: 0;
    background: var(--raised);
    color: var(--t3);
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-lit);
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.05em;
    font-weight: 500;
    z-index: 1;
}
.pt2-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--t1);
}
.pt2-table tbody tr:last-child td { border-bottom: none; }
.pt2-table tbody tr:hover td { background: var(--cyan-ghost); }
.pt2-table .pt2-num { text-align: right; font-variant-numeric: tabular-nums; }
.pt2-table .pt2-mono-cell { color: var(--t2); }
.pt2-table .pt2-empty-cell {
    text-align: center;
    color: var(--t3);
    padding: 18px;
}

@media (max-width: 1280px) {
    .pt2-portfolio-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
    .pt2-portfolio-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── Page-level tabs (Summary | Live | Historical) ─────────────── */
.pt2-pagetabs {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
    padding-bottom: 0;
}
.pt2-pagetab {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    color: var(--t2);
    padding: 9px 18px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.12s;
    margin-bottom: -1px;
}
.pt2-pagetab:hover { color: var(--t1); }
.pt2-pagetab.active {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
}
.pt2-pagetab-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t2);
    padding-bottom: 8px;
}

/* ── Page sections ─────────────────────────────────────────────── */
.pt2-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pt2-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.pt2-charts-row-2 .pt2-chart-card { min-height: 220px; }
.pt2-chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pt2-chart-full { grid-column: 1 / -1; }
.pt2-section-titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pt2-chart-caption {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t3);
    margin-top: 2px;
}

/* ── Stat-card sub label (e.g. trade count under PnL) ──────────── */
.pt2-stat-sub {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Compare row inside Summary cards (BT → LIVE) ─────────────── */
.pt2-compare-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    padding-top: 6px;
}
.pt2-compare-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pt2-compare-label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pt2-compare-pnl {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}
.pt2-compare-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t2);
}
.pt2-compare-arrow {
    font-family: var(--mono);
    font-size: 16px;
    color: var(--t3);
    text-align: center;
}

/* ── Mini cards (Historical per-day grid) ─────────────────────── */
.pt2-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.pt2-card-mini {
    padding: 10px 12px;
    gap: 4px;
}
.pt2-card-mini .pt2-card-head { gap: 6px; }
.pt2-card-title-mini {
    font-size: 11px;
    color: var(--t2);
    line-height: 1.3;
    min-height: 28px;
}
.pt2-card-mini-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t3);
}

/* ── Date select (Historical) ─────────────────────────────────── */
.pt2-date-select {
    background: var(--surface);
    border: 1px solid var(--border-lit);
    color: var(--cyan);
    padding: 5px 10px;
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    min-width: 140px;
}
.pt2-date-select:hover, .pt2-date-select:focus {
    border-color: var(--cyan-dim);
    outline: none;
}

/* ── Live page: live bar + market state styling ───────────────── */
.pt2-livebar {
    margin-bottom: 0;
}
.pt2-mode-meta-pill {
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--border-lit);
}
.pt2-pill-ok   { background: var(--up-bg);   color: var(--up);   border-color: var(--up); }
.pt2-pill-info { background: var(--cyan-glow); color: var(--cyan); border-color: var(--cyan-dim); }
.pt2-pill-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }

.pt2-live-banner {
    font-family: var(--mono);
    font-size: 11px;
    padding: 8px 12px;
    border-radius: 2px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--t2);
    line-height: 1.4;
}
.pt2-live-banner:empty { display: none; }
.pt2-banner-info { border-color: var(--border-lit); color: var(--t2); }
.pt2-banner-ok   { border-color: var(--up); color: var(--up); background: var(--up-bg); }
.pt2-banner-warn { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }

/* ── Drawer: action group (mode tabs + close) ─────────────────── */
.pt2-drawer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Refresh indicator ─────────────────────────────────────────── */
.pt2-refresh-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pt2-refresh-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--up);
    box-shadow: 0 0 6px var(--up);
    animation: pt2-pulse 2s ease-in-out infinite;
}
@keyframes pt2-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}
.pt2-refresh-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--cyan);
    width: 18px; height: 18px;
    line-height: 14px;
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 12px;
    padding: 0;
    margin-left: 4px;
}
.pt2-refresh-btn:hover { border-color: var(--cyan-dim); }

/* ── Heatmap controls (range toggle + meta caption) ───────────── */
.pt2-heatmap-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pt2-heatmap-controls-label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pt2-heatmap-controls-meta {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t3);
    letter-spacing: 0.04em;
}

/* ── Heatmap (Summary tab — per-strategy × per-date PnL) ──────── */
/* Sized so all 17 strategy rows are visible without inner scrolling.
   Horizontal overflow is allowed (when many dates accumulate). */
.pt2-heatmap-wrap {
    border: 1px solid var(--border);
    border-radius: 2px;
    overflow-x: auto;
    overflow-y: visible;
    background: var(--surface);
}
.pt2-heatmap {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--mono);
    font-size: 10.5px;
    table-layout: auto;
}
.pt2-heatmap thead th,
.pt2-heatmap tfoot th {
    background: var(--raised);
    color: var(--t3);
    font-weight: 500;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 8px;
    text-align: right;
    border-bottom: 1px solid var(--border-lit);
}
.pt2-heatmap tfoot th {
    border-top: 1px solid var(--border-lit);
    border-bottom: none;
    padding: 7px 8px;
}
.pt2-heatmap thead th.pt2-heatmap-corner,
.pt2-heatmap tfoot th.pt2-heatmap-foothdr {
    text-align: left;
    background: var(--raised);
    position: sticky;
    left: 0;
    z-index: 3;
    border-right: 1px solid var(--border-lit);
    color: var(--t2);
}
.pt2-heatmap-totalhdr {
    background: var(--overlay) !important;
    color: var(--cyan-dim) !important;
    border-left: 1px solid var(--border-lit);
}

.pt2-heatmap tbody td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    line-height: 1.15;
    white-space: nowrap;
}
.pt2-heatmap tbody td.pt2-heatmap-strat {
    text-align: left;
    background: var(--surface);
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 1px solid var(--border-lit);
    padding: 4px 10px;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
}
.pt2-heatmap-strat-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pt2-heatmap-strat-title {
    color: var(--t2);
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.pt2-heatmap-cell { font-variant-numeric: tabular-nums; }
.pt2-heatmap-pnl  { font-weight: 600; color: var(--t1); }
.pt2-heatmap-trades {
    display: inline-block;
    font-size: 8px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 4px;
    opacity: 0.7;
}
.pt2-heatmap-empty { color: var(--t3); }
.pt2-heatmap-row { cursor: pointer; transition: background 0.1s; }
.pt2-heatmap-row:hover td:not(.pt2-heatmap-strat):not(.pt2-heatmap-total) {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.pt2-heatmap-row:hover td.pt2-heatmap-strat {
    background: var(--overlay);
}

.pt2-heatmap-total {
    font-weight: 700;
    border-left: 1px solid var(--border-lit);
}
.pt2-heatmap-grand {
    font-weight: 700;
    border-left: 1px solid var(--border-lit);
}

/* ═══════════════════════════════════════════════════════════════
   Live OE
   ═══════════════════════════════════════════════════════════════ */
.oe-banner {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.oe-banner-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.oe-status-pill {
    padding: 4px 12px;
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    border: 1px solid var(--border-lit);
    color: var(--t1);
}
.oe-banner-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t3);
    margin-left: auto;
}
.oe-banner-msg {
    font-family: var(--mono);
    font-size: 12px;
}
.oe-banner-shadow { border-color: var(--cyan-dim); }
.oe-banner-shadow .oe-banner-msg { color: var(--cyan); }
.oe-banner-shadow .oe-status-pill { background: var(--cyan-glow); color: var(--cyan); border-color: var(--cyan-dim); }
.oe-banner-halted { border-color: var(--warn); }
.oe-banner-halted .oe-banner-msg { color: var(--warn); }
.oe-banner-halted .oe-status-pill { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.oe-banner-live   { border-color: var(--down); background: var(--down-bg); }
.oe-banner-live .oe-banner-msg { color: var(--down); font-weight: 600; }
.oe-banner-live .oe-status-pill { background: var(--down-bg); color: var(--down); border-color: var(--down); }

/* Toggle cards */
.oe-toggle-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.oe-toggle-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.oe-toggle-card-head { display: flex; flex-direction: column; gap: 2px; }
.oe-toggle-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.oe-toggle-help {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t3);
}
.oe-toggle-state {
    font-family: var(--mono);
    font-size: 22px;
    color: var(--t1);
    font-weight: 700;
}
.oe-toggle-actions { display: flex; gap: 8px; margin-top: 4px; }

/* Buttons */
.oe-btn {
    padding: 8px 14px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-lit);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.15s;
}
.oe-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.oe-btn-arm  { background: var(--up-bg);   color: var(--up);   border-color: var(--up); }
.oe-btn-arm:hover:not(:disabled)  { background: var(--up); color: var(--base); }
.oe-btn-halt { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.oe-btn-halt:hover:not(:disabled) { background: var(--warn); color: var(--base); }
.oe-btn-live { background: var(--down-bg); color: var(--down); border-color: var(--down); }
.oe-btn-live:hover:not(:disabled) { background: var(--down); color: var(--base); }
.oe-btn-disabled { background: var(--surface); color: var(--t3); border-color: var(--border); }
.oe-btn-save {
    background: var(--cyan-glow); color: var(--cyan); border-color: var(--cyan-dim);
    padding: 5px 10px; font-size: 10px;
}
.oe-btn-save:hover { background: var(--cyan-dim); color: var(--base); }

/* Toggle switch */
.oe-toggle-row-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.oe-switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 28px;
    flex-shrink: 0;
}
.oe-switch input { opacity: 0; width: 0; height: 0; }
.oe-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--surface);
    border: 1px solid var(--border-lit);
    border-radius: 14px;
    transition: 0.2s;
}
.oe-slider::before {
    position: absolute;
    content: "";
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background: var(--t2);
    border-radius: 50%;
    transition: 0.2s;
}
.oe-switch input:checked + .oe-slider::before { transform: translateX(28px); background: var(--base); }
.oe-switch-arm  input:checked + .oe-slider { background: var(--up);   border-color: var(--up); }
.oe-switch-live input:checked + .oe-slider { background: var(--down); border-color: var(--down); }

/* Max-lots input */
.oe-strategy-maxlots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t3);
}
.oe-strategy-maxlots label { text-transform: uppercase; letter-spacing: 0.05em; }
.oe-maxlots-input {
    background: var(--surface);
    border: 1px solid var(--border-lit);
    color: var(--t1);
    padding: 4px 8px;
    width: 70px;
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 11px;
}
.oe-maxlots-input:focus { outline: none; border-color: var(--cyan-dim); }

/* Strategy cards */
.oe-section { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.oe-strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.oe-strategy-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.oe-strategy-head { display: flex; align-items: center; gap: 10px; }
.oe-strategy-state {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 2px;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.oe-on  { background: var(--up-bg);   color: var(--up);   border: 1px solid var(--up); }
.oe-off { background: var(--surface); color: var(--t3);   border: 1px solid var(--border-lit); }
.oe-strategy-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t3);
}
.oe-strategy-actions { display: flex; gap: 6px; margin-top: 6px; }
.oe-strategy-actions .oe-btn { padding: 6px 10px; font-size: 10px; flex: 1; }

.oe-audit-table tbody td { font-size: 10px; }

/* ── Single-column collapse on narrow screens ─────────────────── */
@media (max-width: 1024px) {
    .pt2-charts-row { grid-template-columns: 1fr; }
    .pt2-pagetab-meta { display: none; }
    .oe-toggle-row { grid-template-columns: 1fr; }
}