/* Duke Fleet Control Panel — Themes */
:root, [data-theme="dark"] {
    --bg-dark: #121212;
    --bg-card: #1E1E1E;
    --bg-input: #2a2a2a;
    --bg-hover: #333333;
    --accent-red: #BB86FC;
    --accent-blue: #8AB4F8;
    --text: #E0E0E0;
    --text-dim: #999;
    --link: #8AB4F8;
    --success: #81C784;
    --warning: #FFB74D;
    --error: #EF5350;
    --code-bg: #0d1117;
    --border: #3a3a3a;
    --radius: 8px;
    --strong-text: #fff;
    --overlay-bg: rgba(0,0,0,0.6);
    --lightbox-bg: rgba(0,0,0,0.85);
    --shadow-hover: rgba(0,0,0,0.4);
}

[data-theme="light"] {
    --bg-dark: #FDF6E3;
    --bg-card: #FAF9F6;
    --bg-input: #EDE8D8;
    --bg-hover: #E8E2D0;
    --accent-red: #7B5EA7;
    --accent-blue: #3A7BD5;
    --text: #333333;
    --text-dim: #666;
    --link: #3A7BD5;
    --success: #2E7D32;
    --warning: #E65100;
    --error: #C62828;
    --code-bg: #F0EBD8;
    --border: #D4CEBC;
    --radius: 8px;
    --strong-text: #111;
    --overlay-bg: rgba(0,0,0,0.3);
    --lightbox-bg: rgba(0,0,0,0.6);
    --shadow-hover: rgba(0,0,0,0.08);
}

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

/* Generic hidden class — used by JS to toggle visibility */
.hidden { display: none !important; }

body {
    background: var(--bg-dark);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
}

/* Header */
header {
    background: var(--bg-card);
    border-bottom: 2px solid var(--accent-red);
    padding: 12px 20px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

h1 {
    color: var(--accent-red);
    font-size: 20px;
    font-weight: 700;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clock {
    color: var(--text-dim);
    font-size: 13px;
    font-family: monospace;
}

.theme-toggle {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--text-dim);
    transform: scale(1.1);
}

/* Tabs */
#tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
}

.tab {
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    border-radius: var(--radius) var(--radius) 0 0;
    white-space: nowrap;
    position: relative;
    transition: all 0.2s;
}

.tab:hover { color: var(--text); background: var(--bg-hover); }
.tab.active {
    color: var(--text);
    background: var(--bg-dark);
    border-bottom: 2px solid var(--accent-red);
}

.badge {
    background: var(--warning);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
}
.badge.hidden { display: none; }

/* Main */
main { padding: 16px 20px; max-width: 1400px; margin: 0 auto; }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* Section cards */
.section-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
    border-left: 3px solid var(--accent-blue);
}

.section-card h2 {
    color: var(--accent-red);
    font-size: 15px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dashboard row */
.dashboard-row { display: flex; gap: 16px; }
.dashboard-row .half { flex: 1; min-width: 0; }

/* Agent grid */
.agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.agent-card {
    background: var(--bg-input);
    border-radius: var(--radius);
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid var(--border);
}

.agent-card:hover { background: var(--bg-hover); transform: translateY(-1px); }
.agent-card.health-good { border-left-color: var(--success); }
.agent-card.health-warn { border-left-color: var(--warning); }
.agent-card.health-bad { border-left-color: var(--error); }

.agent-name {
    font-weight: 700;
    font-size: 14px;
    text-transform: capitalize;
    margin-bottom: 4px;
}

.agent-role { color: var(--text-dim); font-size: 12px; margin-bottom: 6px; }

.agent-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
}

.stat {
    background: var(--bg-dark);
    padding: 2px 8px;
    border-radius: 4px;
}

.stat-label { color: var(--text-dim); }
.stat-value { font-weight: 600; }

.circuit-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.circuit-closed { background: var(--success); color: #000; }
.circuit-open { background: var(--error); color: #fff; }
.circuit-half-open { background: var(--warning); color: #000; }

/* Split pane */
.split-pane { display: flex; gap: 16px; min-height: 500px; }

.sidebar {
    width: 300px;
    min-width: 250px;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 8px;
    overflow-y: auto;
    max-height: 70vh;
}

.main-panel {
    flex: 1;
    min-width: 0;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 70vh;
}

/* Sidebar items */
.sidebar-item {
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    word-break: break-all;
    transition: background 0.15s;
}

.sidebar-item:hover { background: var(--bg-hover); }
.sidebar-item.active { background: var(--bg-input); border-left: 2px solid var(--accent-red); }

.sidebar-item .item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status badges */
.status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-needs_review, .status-needs-review { background: var(--warning); color: #000; }
.status-approved { background: var(--success); color: #000; }
.status-rejected { background: var(--error); color: #fff; }
.status-commented { background: var(--link); color: #000; }
.status-draft { background: var(--text-dim); color: #000; }
.status-review { background: var(--warning); color: #000; }
.status-posted { background: var(--success); color: #000; }

/* Panel header */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.panel-header h3 { font-size: 14px; }
.panel-header.hidden { display: none; }

/* Rendered markdown content */
.rendered-content {
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: break-word;
}

.rendered-content h1 {
    font-size: 26px;
    color: var(--accent-red);
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border);
}
.rendered-content h2 { font-size: 21px; color: var(--link); margin: 18px 0 8px; }
.rendered-content h3 { font-size: 17px; color: var(--text); margin: 14px 0 6px; font-weight: 700; }
.rendered-content h4 { font-size: 15px; color: var(--text-dim); margin: 12px 0 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.rendered-content p { margin: 8px 0; }
.rendered-content ul, .rendered-content ol { padding-left: 20px; margin: 8px 0; }
.rendered-content li { margin: 3px 0; }
.rendered-content a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, color 0.2s;
    word-break: break-all;
}
.rendered-content a:hover { border-bottom-color: var(--link); }
.rendered-content code {
    background: var(--code-bg);
    color: var(--warning);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
    font-size: 13px;
}
.rendered-content pre {
    background: var(--code-bg);
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow-x: auto;
    margin: 10px 0;
    font-size: 13px;
    line-height: 1.5;
}
.rendered-content pre code { background: none; padding: 0; border: none; color: var(--text); }
.rendered-content table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 10px 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}
.rendered-content th {
    background: var(--bg-input);
    padding: 8px 12px;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-dim);
    font-weight: 700;
    border-bottom: 2px solid var(--border);
}
.rendered-content td {
    padding: 7px 12px;
    text-align: left;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.rendered-content tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.rendered-content tr:hover td { background: var(--bg-hover); }
.rendered-content blockquote {
    border-left: 3px solid var(--accent-red);
    padding-left: 12px;
    margin: 8px 0;
    color: var(--text-dim);
}
.rendered-content strong { color: var(--strong-text); }
.rendered-content hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* Auto-linkified file paths */
.file-link {
    font-family: monospace;
    color: var(--warning);
    background: var(--code-bg);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    word-break: break-all;
}
.file-link:hover { border-color: var(--warning); color: var(--text); }

/* Action bar */
.action-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.action-bar.hidden { display: none; }

.comment-input {
    flex: 1;
    min-width: 150px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
}
.comment-input:focus { outline: none; border-color: var(--link); }

/* Buttons */
.btn {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn:hover { opacity: 0.85; transform: translateY(-1px); }

.btn-success { background: var(--success); color: #000; border-color: var(--success); }
.btn-error { background: var(--error); color: #fff; border-color: var(--error); }
.btn-info { background: var(--link); color: #000; border-color: var(--link); }
.btn-warn { background: var(--warning); color: #000; border-color: var(--warning); }
.btn-link { background: none; border: none; color: var(--link); text-decoration: underline; padding: 0; }
.btn-back { margin-bottom: 12px; }
.btn-small { padding: 4px 10px; font-size: 12px; }
.btn-mini {
    padding: 4px 8px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
}
.btn-mini:hover { opacity: 0.85; transform: scale(1.05); }
.btn-mini.btn-warning { background: var(--warning); color: #000; }
.btn-mini.btn-error { background: var(--error); color: #fff; }

/* Live Terminal View */
.terminal-view-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 20px;
}

.terminal-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

.terminal-view-header h2 {
    margin: 0;
    color: var(--accent-red);
    font-size: 18px;
}

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

.terminal-agent-select {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}

.terminal-auto-refresh {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
}

.terminal-auto-refresh input[type="checkbox"] {
    cursor: pointer;
}

.terminal-output {
    background: #1a1b26;
    border: 1px solid #292e42;
    border-radius: 4px;
    padding: 12px;
    min-height: 500px;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.terminal-lines-select {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.terminal-info {
    color: var(--text-dim);
    font-size: 11px;
    margin-bottom: 8px;
    padding: 4px 8px;
    background: var(--bg-input);
    border-radius: 4px;
    display: inline-block;
}

.terminal-content {
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #c0caf5;
}

/* Claude Code ANSI theme classes */
.cc-prompt { color: #7aa2f7; font-weight: bold; }
.cc-bullet { color: #9ece6a; }
.cc-thinking { color: #bb9af7; font-style: italic; }
.cc-separator { color: #565f89; }

.terminal-placeholder {
    color: var(--text-dim);
    text-align: center;
    padding: 40px 20px;
    font-size: 14px;
}

.terminal-error {
    color: var(--error);
    text-align: center;
    padding: 40px 20px;
    font-size: 14px;
}

.terminal-prompt-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.terminal-prompt-input {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px 12px;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    width: 100%;
    min-height: 120px;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.terminal-prompt-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.terminal-prompt-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.terminal-hint {
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
}

/* Events */
.events-scroll {
    max-height: 300px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.6;
}

.event-line {
    padding: 2px 0;
    border-bottom: 1px solid var(--border);
    word-break: break-all;
    opacity: 0.85;
}
.event-line .event-ts { color: var(--text-dim); }

/* Portfolio */
.portfolio-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.portfolio-stat {
    background: var(--bg-input);
    border-radius: var(--radius);
    padding: 10px;
    text-align: center;
}

.portfolio-stat .label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; }
.portfolio-stat .value { font-size: 18px; font-weight: 700; margin-top: 2px; }
.portfolio-stat .value.positive { color: var(--success); }
.portfolio-stat .value.negative { color: var(--error); }

.position-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: var(--bg-input);
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 13px;
}
.position-row .sym { font-weight: 700; }
.position-row .dir { text-transform: uppercase; font-size: 11px; font-weight: 600; }
.position-row .dir.long { color: var(--success); }
.position-row .dir.short { color: var(--error); }

/* File controls */
.file-controls {
    margin-bottom: 12px;
}

.file-controls select {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
}

/* Upload hero zone */
.upload-hero {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 0;
}

.upload-dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    transition: all 0.25s;
    cursor: pointer;
}
.upload-dropzone.dragover {
    border-color: var(--link);
    background: rgba(79,195,247,0.08);
    transform: scale(1.01);
}
.upload-dropzone:hover { border-color: var(--text-dim); }

.upload-icon { font-size: 40px; color: var(--link); margin-bottom: 8px; }
.upload-headline { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.upload-subtext { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; max-width: 400px; margin-left: auto; margin-right: auto; }
.upload-browse-btn { font-size: 14px; padding: 8px 24px; }

.upload-options-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.upload-option { max-width: 500px; }

.upload-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: block;
    margin-bottom: 4px;
}

.upload-select {
    width: 100%;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
}

.upload-hint {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    line-height: 1.4;
}

.staged-files {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.staged-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}
.staged-file-item:last-child { border-bottom: none; }

.staged-file-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staged-file-size {
    font-size: 12px;
    color: var(--text-dim);
    white-space: nowrap;
}

.btn-remove-staged {
    background: none;
    border: none;
    color: var(--error);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.btn-remove-staged:hover { opacity: 0.7; }

.upload-submit-btn {
    margin-top: 14px;
    font-size: 15px;
    padding: 10px 32px;
    width: 100%;
    max-width: 500px;
}
.upload-submit-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

#upload-status {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
}
#upload-status.success { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
#upload-status.error { background: color-mix(in srgb, var(--error) 15%, transparent); color: var(--error); }

#recent-uploads { margin-top: 12px; }

.recent-upload-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-input);
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 12px;
}
.recent-upload-item .upload-filename { font-weight: 600; color: var(--text); }
.recent-upload-item .upload-meta { color: var(--text-dim); }
.recent-upload-item .upload-sent-to { color: var(--link); }

/* File category bar */
.file-category-bar {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.file-category-bar .chip { padding: 6px 14px; }
.chip-hint {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: var(--text-dim);
    margin-top: 1px;
}
.chip.active .chip-hint { color: var(--text); opacity: 0.8; }

/* Image viewer in file panel */
.file-image {
    max-width: 100%;
    border-radius: var(--radius);
}

/* Modal */
.modal { display: none; }
.modal:not(.hidden) {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay-bg);
}

.modal-content {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    width: 90%;
    max-width: 500px;
    border: 1px solid var(--border);
}

.modal-content h3 { margin-bottom: 12px; color: var(--accent-red); }

.modal-input, .modal-textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    margin-bottom: 8px;
}
.modal-textarea { min-height: 150px; max-height: 400px; resize: vertical; }
.modal-input:focus, .modal-textarea:focus { outline: none; border-color: var(--link); }

.modal-content label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-dim);
}
.modal-content select {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

/* Agent detail */
.detail-section {
    background: var(--bg-input);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 12px;
}
.detail-section h4 {
    color: var(--link);
    font-size: 13px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.msg-item {
    background: var(--bg-dark);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 4px;
    font-size: 12px;
    transition: opacity 0.3s ease;
}
.msg-item .msg-from { color: var(--accent-red); font-weight: 600; }
.msg-item .msg-subject { color: var(--text); }
.msg-item .msg-body {
    margin-top: 6px;
    color: var(--text);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}
.msg-item .msg-attachment {
    margin-top: 4px;
    padding: 4px 8px;
    background: var(--bg-input);
    border-radius: 3px;
    color: var(--text-dim);
    font-size: 11px;
    display: inline-block;
}
.msg-item .msg-ts { color: var(--text-dim); font-size: 11px; margin-top: 4px; }
.msg-item .message-link {
    color: var(--link);
    text-decoration: underline;
    word-break: break-all;
}
.msg-item .message-link:hover {
    color: var(--accent-blue);
}

/* Placeholder */
.placeholder-text { color: var(--text-dim); font-style: italic; padding: 20px; text-align: center; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* Toast notification */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    font-size: 13px;
    z-index: 300;
    animation: slideIn 0.3s ease;
}
.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--error); }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ========== FILTER BAR ========== */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: var(--radius);
    flex-wrap: wrap;
}

.filter-search {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    width: 180px;
}
.filter-search:focus { outline: none; border-color: var(--link); }

.filter-chips { display: flex; gap: 4px; flex-wrap: wrap; }

.chip {
    background: var(--bg-input);
    color: var(--text-dim);
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--text-dim); }
.chip.active {
    background: var(--accent-red);
    color: #fff;
    border-color: var(--accent-red);
}

.filter-bar select {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.filter-count {
    color: var(--text-dim);
    font-size: 12px;
    margin-left: auto;
}

/* ========== PROMPTS ========== */
.prompts-header {
    margin-bottom: 16px;
}
.prompts-header h2 {
    color: var(--accent-red);
    font-size: 18px;
}
.prompts-subtitle {
    color: var(--text-dim);
    font-size: 13px;
    margin-top: 4px;
}

.prompt-category {
    margin-bottom: 20px;
}

.prompt-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.prompt-category-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.prompt-category-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--link);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prompt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

.prompt-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}
.prompt-card:hover {
    border-color: var(--link);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-hover);
}

.prompt-card-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 4px;
}

.prompt-card-desc {
    color: var(--text-dim);
    font-size: 12px;
    flex: 1;
    margin-bottom: 8px;
}

.prompt-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.prompt-agent-badge {
    background: var(--bg-input);
    color: var(--link);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: capitalize;
}

.prompt-send-hint {
    color: var(--text-dim);
}

/* ========== MEDIA GALLERY ========== */
.media-header {
    margin-bottom: 16px;
}
.media-header h2 {
    color: var(--accent-red);
    font-size: 18px;
    margin-bottom: 10px;
}
.media-filters {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.media-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}
.media-card:hover {
    border-color: var(--link);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-hover);
}

.media-thumb {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    background: var(--bg-dark);
}

.media-info {
    padding: 8px 10px;
}

.media-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-meta {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* ========== LIGHTBOX ========== */
.lightbox {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--lightbox-bg);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox.hidden { display: none; }

.lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    position: relative;
}

.lightbox-content img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: var(--radius);
    display: block;
}

.lightbox-close {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--accent-red);
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 301;
}

.lightbox-caption {
    text-align: center;
    color: var(--text);
    font-size: 13px;
    margin-top: 8px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
}

/* ========== CUSTOM PROMPT COMPOSER ========== */
.custom-prompt-card {
    background: var(--bg-card);
    border: 2px solid var(--accent-blue);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 20px;
}
.custom-prompt-card h2 {
    color: var(--accent-red);
    font-size: 15px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-prompt-row {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.custom-prompt-field {
    margin-bottom: 8px;
}

.custom-prompt-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.custom-prompt-select,
.custom-prompt-input {
    width: 100%;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    -webkit-user-select: text;
    user-select: text;
}
.custom-prompt-select:focus,
.custom-prompt-input:focus { outline: none; border-color: var(--link); }

.custom-prompt-textarea {
    width: 100%;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    max-height: 400px;
    -webkit-user-select: text;
    user-select: text;
}
.custom-prompt-textarea:focus { outline: none; border-color: var(--link); }

.custom-prompt-send {
    margin-top: 8px;
    font-size: 15px;
    padding: 10px 28px;
}
.custom-prompt-send:disabled {
    opacity: 0.6;
    cursor: wait;
}

#custom-prompt-status {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
}
#custom-prompt-status.success { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
#custom-prompt-status.error { background: color-mix(in srgb, var(--error) 15%, transparent); color: var(--error); }

/* ========== UPLOAD CONTEXT TEXTAREA ========== */
.upload-textarea {
    width: 100%;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    -webkit-user-select: text;
    user-select: text;
}
.upload-textarea:focus { outline: none; border-color: var(--link); }

/* ========== MOBILE COPY/PASTE & TOUCH ========== */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Enable text selection everywhere for copy/paste */
body, p, span, div, td, th, li, pre, code,
.rendered-content, .rendered-content *,
.msg-item, .detail-section,
.event-line, .sidebar-item .item-name,
.agent-name, .agent-role, .stat-value,
.portfolio-stat .value, .portfolio-stat .label,
.prompt-card-title, .prompt-card-desc {
    -webkit-user-select: text;
    user-select: text;
}

/* Inputs/textareas must allow paste */
input, textarea, select {
    -webkit-user-select: text;
    user-select: text;
}

/* ========== FLEET CONTROLS ========== */
.fleet-controls-card {
    padding: 12px 16px !important;
}
.fleet-controls-row {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.fleet-control-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.control-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    font-weight: 600;
}
.control-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.control-status {
    font-size: 13px;
    color: var(--text);
    min-width: 80px;
}
/* Toggle switch */
.toggle-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}
.toggle-track {
    display: inline-flex;
    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: 12px;
    position: relative;
    transition: background 0.2s;
}
.toggle-btn.active .toggle-track {
    background: var(--success);
}
.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle-btn.active .toggle-thumb {
    left: 22px;
}
/* RAM bar */
.ram-bar-container {
    width: 140px;
    height: 22px;
    background: var(--bg-input);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
}
.ram-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s, background 0.5s;
    background: var(--success);
}
.ram-bar.warn { background: var(--warning); }
.ram-bar.crit { background: var(--error); }
.ram-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

/* ========== ENHANCED DASHBOARD ========== */
.dashboard-subsections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.dash-sub {
    background: var(--bg-input);
    border-radius: var(--radius);
    padding: 12px;
}
.dash-sub h4 {
    color: var(--link);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
    font-weight: 700;
}

/* Regime dots */
.regime-dots {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.regime-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.regime-dot.win { background: var(--success); }
.regime-dot.loss { background: var(--error); }

/* Allocation cards */
.alloc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.alloc-card {
    background: var(--bg-dark);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}
.alloc-ticker { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.alloc-pct { font-size: 20px; font-weight: 700; color: var(--accent-red); }
.alloc-meta { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.tier-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    margin-top: 4px;
}
.tier-proven { background: var(--success); color: #000; }
.tier-rookie { background: var(--warning); color: #000; }
.tier-no_edge, .tier-no-edge { background: var(--error); color: #fff; }

/* Scan cards */
.scan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}
.scan-card {
    background: var(--bg-dark);
    border-radius: 6px;
    padding: 10px;
}
.scan-type { font-weight: 700; font-size: 13px; text-transform: uppercase; margin-bottom: 4px; }
.scan-stat { font-size: 12px; color: var(--text-dim); }
.scan-stat strong { color: var(--text); }

/* Quantum Astro-Financial Database */
.db-hero {
    text-align: center;
    padding: 16px 8px 14px;
    background: linear-gradient(135deg, rgba(138,180,248,0.06) 0%, rgba(187,134,252,0.06) 100%);
    border-radius: var(--radius);
    margin-bottom: 14px;
    border: 1px solid rgba(138,180,248,0.12);
}
.db-hero-number {
    font-size: 38px;
    font-weight: 800;
    color: var(--accent-blue);
    letter-spacing: -1px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.db-hero-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 4px;
}
.db-hero-subtitle {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    letter-spacing: 0.2px;
}

.db-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.db-category-card {
    background: var(--bg-dark);
    border-radius: 6px;
    padding: 10px 6px 8px;
    text-align: center;
    border: 1px solid var(--border);
    transition: border-color 0.2s, transform 0.2s;
}
.db-category-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-1px);
}
.db-category-icon {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 4px;
    opacity: 0.85;
}
.db-category-count {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.db-category-label {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 2px;
    line-height: 1.2;
}

.db-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 0;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 6px;
}
.db-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-footer-size {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.db-footer-sync {
    font-size: 11px;
    color: var(--text-dim);
}

/* Live pulse indicator */
.db-live-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    position: relative;
    flex-shrink: 0;
}
.db-live-pulse::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--success);
    opacity: 0;
    animation: dbPulse 2s ease-out infinite;
}
@keyframes dbPulse {
    0% { transform: scale(0.5); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Growth badge */
.db-growth-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, transparent);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Quick stats row */
.db-quick-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 6px;
}
.db-quick-chip {
    font-size: 11px;
    color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
    padding: 3px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Expandable detail panel */
.db-detail-panel {
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    animation: dbSlideIn 0.3s ease;
}
@keyframes dbSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.db-detail-section {
    margin-bottom: 16px;
}
.db-detail-section h3 {
    font-size: 13px;
    color: var(--accent-red);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Table list */
.db-table-list { display: flex; flex-direction: column; gap: 4px; }
.db-table-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 3px 0;
}
.db-table-name {
    width: 180px;
    min-width: 120px;
    color: var(--text-dim);
    font-family: monospace;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.db-table-bar-bg {
    flex: 1;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}
.db-table-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-red));
    border-radius: 3px;
    transition: width 0.8s ease;
}
.db-table-count {
    min-width: 50px;
    text-align: right;
    color: var(--text);
    font-family: monospace;
    font-size: 11px;
}

/* Recent trades */
.db-trades-list { display: flex; flex-direction: column; gap: 4px; }
.db-trade-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 4px 8px;
    background: var(--bg-input);
    border-radius: 6px;
}
.db-trade-symbol {
    font-weight: 700;
    color: var(--text);
    min-width: 70px;
}
.db-trade-dir {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
}
.dir-long { color: var(--success); background: color-mix(in srgb, var(--success) 15%, transparent); }
.dir-short { color: #f87171; background: color-mix(in srgb, #f87171 15%, transparent); }
.db-trade-pnl {
    font-family: monospace;
    font-weight: 700;
    min-width: 60px;
}
.trade-win { color: var(--success); }
.trade-loss { color: #f87171; }
.db-trade-reason {
    color: var(--text-dim);
    font-size: 10px;
    margin-left: auto;
}

/* Deep cache */
.db-cache-list { display: flex; flex-direction: column; gap: 3px; }
.db-cache-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    padding: 3px 8px;
    background: var(--bg-input);
    border-radius: 6px;
}
.db-cache-sym { font-weight: 700; color: var(--accent-blue); min-width: 80px; }
.db-cache-size { color: var(--text-dim); font-family: monospace; }
.db-cache-time { color: var(--text-dim); font-size: 10px; margin-left: auto; }

/* ========== DATA FILE VIEWER MODAL ========== */
.datafile-modal-content {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    width: 92%;
    max-width: 900px;
    max-height: 85vh;
    overflow-y: auto;
    border: 1px solid var(--border);
}
.datafile-modal-content h3 {
    margin-bottom: 12px;
    color: var(--accent-red);
    font-size: 16px;
    word-break: break-all;
}
.datafile-modal-content pre {
    background: var(--code-bg);
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.5;
    max-height: 60vh;
    overflow-y: auto;
}
.datafile-modal-content .rendered-content {
    max-height: 65vh;
    overflow-y: auto;
}

/* ========== UNIVERSE MAP ========== */
.universe-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.universe-search {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 14px;
    width: 200px;
}
.universe-search:focus { outline: none; border-color: var(--link); }
.universe-filter-chips { display: flex; gap: 4px; }

.universe-layout {
    display: flex;
    gap: 16px;
    min-height: 500px;
}
.universe-grid-wrap {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    max-height: 75vh;
}
.universe-detail-panel {
    width: 400px;
    min-width: 300px;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    overflow-y: auto;
    max-height: 75vh;
    border: 1px solid var(--border);
}

.universe-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--link);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.universe-section-title:first-child { margin-top: 0; }

.universe-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.universe-card {
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    text-align: center;
}
.universe-card:hover { border-color: var(--text-dim); transform: translateY(-1px); }
.universe-card.active { border-color: var(--accent-red); background: var(--bg-hover); }
.universe-card.status-live { border-color: var(--success); }
.universe-card.status-tested { border-color: var(--link); }
.universe-card.status-deprecated { border-color: var(--text-dim); opacity: 0.5; }

.universe-code {
    font-family: monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.universe-card-name {
    font-size: 10px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.universe-status-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.universe-status-dot.live { background: var(--success); }
.universe-status-dot.tested { background: var(--link); }
.universe-status-dot.deprecated { background: var(--text-dim); }

/* Universe detail fields */
.universe-detail-title {
    font-size: 20px;
    font-weight: 700;
    font-family: monospace;
    color: var(--accent-red);
    margin-bottom: 4px;
}
.universe-detail-name {
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 12px;
}
.universe-field-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.universe-field-label { color: var(--text-dim); font-weight: 600; min-width: 100px; }
.universe-field-value { color: var(--text); text-align: right; word-break: break-word; max-width: 260px; }

/* Universe view toggle */
.universe-view-toggle {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

/* Universe strategy description in detail panel */
.universe-strategy-desc {
    background: var(--bg-input);
    border-left: 3px solid var(--accent-blue);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
}
.universe-strategy-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--link);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

/* ========== UNIVERSE GRAPH ========== */
#universe-graph {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    position: relative;
    min-height: 600px;
    overflow: visible !important;
}
#universe-graph svg {
    width: 100%;
    height: 100%;
    display: block;
    min-height: 600px;
}
#universe-graph .graph-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    z-index: 10;
}
#universe-graph .graph-controls button {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
#universe-graph .graph-controls button:hover {
    background: var(--bg-hover);
    border-color: var(--text-dim);
}

/* Graph tooltip */
.graph-tooltip {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.graph-tooltip .tt-code {
    font-weight: 700;
    font-family: monospace;
    color: var(--accent-red);
}
.graph-tooltip .tt-name {
    color: var(--text-dim);
    margin-left: 6px;
}
.graph-tooltip .tt-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 6px;
}

/* SVG graph node styles */
.graph-node { cursor: pointer; }
.graph-node:hover .node-ring { opacity: 1; }
.graph-node-label {
    font-family: monospace;
    font-weight: 700;
    fill: var(--text);
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: central;
}
.graph-node-sublabel {
    font-size: 9px;
    fill: var(--text-dim);
    pointer-events: none;
    text-anchor: middle;
}

/* Node status colors in SVG — set via inline styles for cross-browser */
.graph-edge {
    stroke: var(--border);
    stroke-width: 1.5;
    fill: none;
    marker-end: url(#arrowhead);
}
.graph-edge-highlight {
    stroke: var(--accent-red);
    stroke-width: 2;
}

/* ========== POSITION CARDS ========== */
.positions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.position-card {
    background: var(--bg-input);
    border-radius: var(--radius);
    padding: 14px;
    border-left: 4px solid var(--border);
    transition: all 0.2s;
}
.position-card:hover { transform: translateY(-1px); box-shadow: 0 2px 8px var(--shadow-hover); }
.position-card.pnl-positive { border-left-color: var(--success); }
.position-card.pnl-negative { border-left-color: var(--error); }
.position-card.param-danger { border-left-color: var(--error); border-left-width: 5px; }
.position-card.param-warning { border-left-color: var(--warning); border-left-width: 5px; }

.position-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.position-symbol {
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
}

.direction-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.direction-badge.long { background: var(--success); color: #000; }
.direction-badge.short { background: var(--error); color: #fff; }

.position-pnl {
    margin-left: auto;
    text-align: right;
    font-weight: 700;
    font-size: 15px;
}
.position-pnl.positive { color: var(--success); }
.position-pnl.negative { color: var(--error); }

.position-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin-bottom: 10px;
}

.position-param {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 3px 0;
}
.position-param .param-label { color: var(--text-dim); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.3px; }
.position-param .param-value { font-weight: 600; color: var(--text); font-size: 13px; }

.param-warning-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
}
.param-warning-badge.amber { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.param-warning-badge.red { background: color-mix(in srgb, var(--error) 20%, transparent); color: var(--error); }

.position-warnings {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.position-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.position-meta-item {
    display: flex;
    align-items: center;
    gap: 3px;
}
.position-meta-item .meta-label { font-weight: 600; }

/* Progress bar: price between stop and target */
.progress-bar-container {
    margin-top: 8px;
    margin-bottom: 4px;
}
.progress-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 2px;
}
.progress-bar-track {
    width: 100%;
    height: 6px;
    background: var(--bg-dark);
    border-radius: 3px;
    position: relative;
    overflow: visible;
}
.progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
    min-width: 2px;
}
.progress-bar-fill.positive { background: var(--success); }
.progress-bar-fill.negative { background: var(--error); }
.progress-bar-fill.neutral { background: var(--text-dim); }

.progress-bar-marker {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 10px;
    background: var(--text);
    border-radius: 1px;
    transform: translateX(-50%);
}

/* BE triggered badge */
.be-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}
.be-badge.active { background: var(--success); color: #000; }
.be-badge.inactive { background: var(--bg-dark); color: var(--text-dim); }

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
    .dashboard-row { flex-direction: column; }
    .split-pane { flex-direction: column; }
    .sidebar { width: 100%; max-height: 250px; }
    .agent-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    header { padding: 8px 12px; }
    main { padding: 8px 12px; }

    /* Bigger touch targets */
    .tab { padding: 10px 14px; font-size: 13px; }
    .btn { padding: 10px 16px; font-size: 14px; }
    .chip { padding: 8px 12px; font-size: 13px; }
    .sidebar-item { padding: 12px 10px; font-size: 14px; }

    /* Fleet controls responsive */
    .fleet-controls-row { gap: 16px; }
    .ram-bar-container { width: 120px; }

    /* Custom prompt responsive */
    .custom-prompt-row { flex-direction: column; gap: 8px; }
    .custom-prompt-select,
    .custom-prompt-input,
    .custom-prompt-textarea { font-size: 16px; } /* prevents iOS zoom on focus */

    /* Upload responsive */
    .upload-select,
    .upload-textarea { font-size: 16px; }
    .upload-submit-btn { max-width: 100%; }

    /* Prompt grid single column on mobile */
    .prompt-grid { grid-template-columns: 1fr; }

    /* Modal full-width on mobile */
    .modal-content { width: 95%; max-width: 95%; }
    .modal-input, .modal-textarea { font-size: 16px; }

    /* Media grid smaller on mobile */
    .media-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }

    /* Filter bar wrap better */
    .filter-bar { gap: 6px; }
    .filter-search { width: 100%; }

    /* File category chips scroll */
    .file-category-bar { overflow-x: auto; flex-wrap: nowrap; }

    /* Bigger select targets */
    select { font-size: 16px; min-height: 44px; }
    input[type="text"] { font-size: 16px; min-height: 44px; }
    textarea { font-size: 16px; }

    /* Universe map mobile */
    .universe-header { flex-wrap: wrap; }
    .universe-layout { flex-direction: column; }
    .universe-detail-panel { width: 100%; min-width: 0; max-height: 400px; overflow-y: auto; }
    .universe-card-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
    .universe-search { width: 100%; }
    .universe-view-toggle { margin-left: 0; }
    #universe-graph {
        min-height: 85vh !important;
        height: auto !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        position: relative !important;
    }
    #universe-graph svg {
        min-width: 100%;
        min-height: 85vh;
        width: auto;
        height: auto;
    }

    /* Dashboard subsections stack */
    .dashboard-subsections { grid-template-columns: 1fr; }

    /* Position cards single column on mobile */
    .positions-grid { grid-template-columns: 1fr; }
    .position-params { grid-template-columns: 1fr; }

    /* Datafile modal full width */
    .datafile-modal-content { width: 98%; max-width: 98%; }

    /* Quantum DB responsive */
    .db-hero-number { font-size: 30px; }
    .db-category-grid { grid-template-columns: repeat(2, 1fr); }
    .db-footer { flex-direction: column; align-items: flex-start; }

    /* Pine Scripts responsive */
    .pine-grid { grid-template-columns: 1fr; }
    .pine-viewer-header { flex-direction: column; gap: 8px; }
    .pine-viewer-actions { flex-direction: column; width: 100%; }
    .pine-viewer-actions .btn { width: 100%; text-align: center; }
}

/* ============================================================================
   PINE SCRIPTS TAB
   ============================================================================ */

.pine-header { margin-bottom: 16px; }
.pine-header h2 { margin: 0 0 4px; color: var(--text); }
.pine-subtitle { color: var(--text-dim); font-size: 13px; margin: 0; }

.pine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.pine-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.pine-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.pine-card:active { transform: translateY(0); }

.pine-card-icon {
    font-size: 32px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: 10px;
    flex-shrink: 0;
}

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

.pine-card-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pine-card-desc {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
}

.pine-card-meta {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    opacity: 0.7;
}

.pine-card-arrow {
    font-size: 24px;
    color: var(--text-dim);
    flex-shrink: 0;
}

.pine-badge-latest {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    background: #089981;
    color: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

/* Pine Script Viewer */
.pine-viewer { padding: 0; }

.pine-viewer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.pine-viewer-header h3 {
    flex: 1;
    margin: 0;
    font-size: 16px;
    color: var(--text);
}

.pine-viewer-actions {
    display: flex;
    gap: 8px;
}

.pine-code {
    background: var(--bg-dark);
    color: #d4d4d4;
    padding: 16px;
    margin: 0;
    font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.btn-copied {
    background: #089981 !important;
    border-color: #089981 !important;
}
.btn-warn {
    background: #FF8C00 !important;
    border-color: #FF8C00 !important;
    font-size: 12px !important;
}

/* ========== ADHD-OPTIMIZED DELIVERABLES ========== */

/* Deliverables container */
#deliverable-cards-container {
    padding: 12px;
}

/* Section headers */
.deliverable-section {
    margin-bottom: 24px;
}

.section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-block;
}

.section-title.priority-p0 {
    background: var(--error);
    color: #fff;
}

.section-title.priority-p1 {
    background: var(--warning);
    color: #000;
}

.section-title.priority-p2 {
    background: var(--success);
    color: #000;
}

.section-title.priority-p3 {
    background: var(--text-dim);
    color: #000;
}

/* Deliverable card */
.deliverable-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 4px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.deliverable-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    background: var(--bg-hover);
}

.deliverable-card.priority-p0 {
    border-left-color: var(--error);
    background: rgba(239, 83, 80, 0.05);
}

.deliverable-card.priority-p1 {
    border-left-color: var(--warning);
    background: rgba(255, 183, 77, 0.05);
}

.deliverable-card.priority-p2 {
    border-left-color: var(--success);
    background: rgba(129, 199, 132, 0.03);
}

.deliverable-card.priority-p3 {
    border-left-color: var(--text-dim);
    background: rgba(153, 153, 153, 0.03);
}

/* Card header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.card-priority {
    display: flex;
    align-items: center;
    gap: 6px;
}

.priority-icon {
    font-size: 18px;
}

.priority-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-dim);
}

.card-agent {
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: capitalize;
}

.card-time {
    font-weight: 500;
}

/* Card title */
.card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--strong-text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.type-icon {
    font-size: 16px;
}

/* Card summary */
.card-summary {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 12px;
    opacity: 0.85;
}

/* Card actions */
.card-actions {
    display: flex;
    gap: 8px;
}

.card-btn {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.card-btn:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #000;
}

/* Expand sections */
.expand-section {
    background: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 16px;
    transition: all 0.2s;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
}

.expand-section:hover {
    background: var(--bg-hover);
    border-color: var(--text-dim);
    color: var(--text);
}

/* Deliverable filter bar */
.deliverable-filter-bar {
    background: var(--bg-card);
    padding: 12px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-btn {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    background: var(--bg-hover);
}

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

/* ========== DYNAMIC PROMPT FORM BUILDER ========== */

.prompt-form-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 10000;
    padding: 0;
}

.prompt-form-header {
    background: var(--bg-darker);
    padding: 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.prompt-form-header h3 {
    margin: 0 0 8px 0;
    color: var(--text);
    font-size: 20px;
}

.prompt-form-desc {
    margin: 0;
    color: var(--text-dim);
    font-size: 14px;
}

.prompt-form {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.prompt-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prompt-input-label {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
}

.prompt-input {
    padding: 10px 12px;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.prompt-input:focus {
    outline: none;
    border-color: var(--primary);
}

.prompt-input::placeholder {
    color: var(--text-dim);
}

textarea.prompt-input {
    resize: vertical;
    min-height: 80px;
}

.prompt-radio-group,
.prompt-checkbox-group,
.prompt-multiselect {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--bg-darker);
    border-radius: 6px;
}

.prompt-radio-label,
.prompt-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text);
    font-size: 14px;
    padding: 6px;
    border-radius: 4px;
    transition: background 0.15s;
}

.prompt-radio-label:hover,
.prompt-checkbox-label:hover {
    background: var(--bg-hover);
}

.prompt-radio-label input[type="radio"],
.prompt-checkbox-label input[type="checkbox"] {
    cursor: pointer;
}

.prompt-form-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    background: var(--bg-darker);
    position: sticky;
    bottom: 0;
}

.prompt-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 20px;
}

.prompt-preview-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    max-width: 700px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

.prompt-preview-content h3 {
    margin: 0 0 16px 0;
    color: var(--text);
}

.prompt-preview-text {
    background: var(--bg-darker);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
    margin: 16px 0;
    max-height: 400px;
    overflow-y: auto;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.template-category {
    margin-bottom: 24px;
}

.template-category h4 {
    margin: 0 0 12px 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
}

.template-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.template-btn {
    padding: 12px 16px;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.template-btn:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.template-btn:active {
    transform: translateY(0);
}

#prompt-template-selector {
    padding: 20px;
}

#prompt-form-mount {
    position: relative;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .prompt-form-container {
        width: 95%;
        max-height: 90vh;
    }

    .template-list {
        grid-template-columns: 1fr;
    }

    .prompt-form-footer {
        flex-direction: column;
    }

    .prompt-form-footer button {
        width: 100%;
    }
}

/* ========== DOWNLOADS TAB ========== */

.downloads-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.download-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s;
}

.download-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.download-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.download-info {
    flex: 1;
    min-width: 0;
}

.download-filename {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    word-break: break-word;
}

.download-meta {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 4px;
}

.download-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 13px;
    text-decoration: none;
}

.section-description {
    color: var(--text-dim);
    margin-bottom: 20px;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .download-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .download-btn {
        width: 100%;
        text-align: center;
    }
}

/* ========================================================================
   VIDEO STUDIO STYLES
   ======================================================================== */

.video-studio-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.video-studio-header h2 {
    margin: 0 0 8px 0;
}

/* Template Grid */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 20px;
}

.template-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.template-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.template-card h4 {
    margin: 0 0 8px 0;
    color: var(--text);
    font-size: 16px;
}

.template-desc {
    color: var(--text-dim);
    font-size: 13px;
    margin-bottom: 8px;
}

.template-specs {
    color: var(--text-dim);
    font-size: 11px;
    font-family: monospace;
}

/* Asset Library */
.asset-library-tabs {
    display: flex;
    gap: 8px;
    padding: 20px 20px 0 20px;
    border-bottom: 1px solid var(--border);
}

.asset-tab {
    background: transparent;
    border: none;
    padding: 12px 20px;
    color: var(--text-dim);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
}

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

.asset-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.asset-upload-zone {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-hover);
}

.asset-count {
    color: var(--text-dim);
    font-size: 13px;
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding: 20px;
    min-height: 200px;
}

.asset-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.asset-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.asset-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.asset-name {
    font-size: 12px;
    color: var(--text);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* Render Queue */
.render-queue {
    padding: 20px;
}

.render-job {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.render-job-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.render-job-icon {
    font-size: 20px;
}

.render-job-name {
    flex: 1;
    font-weight: 600;
    color: var(--text);
}

.render-job-status {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.render-job-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.render-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-hover);
    border-radius: 4px;
    overflow: hidden;
}

.render-progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s ease;
}

.render-progress-text {
    font-size: 12px;
    color: var(--text-dim);
    min-width: 40px;
    text-align: right;
}

.render-job-actions {
    display: flex;
    gap: 8px;
}

.render-job.status-completed {
    border-color: var(--success);
}

.render-job.status-error {
    border-color: var(--error);
}

.render-job.status-in-progress .render-progress-fill {
    background: linear-gradient(90deg, var(--accent), var(--success));
}

/* Quick Create Panel */
.video-quick-create {
    margin-top: 20px;
}

.quick-create-form {
    padding: 20px;
}

.quick-create-form label {
    display: block;
    margin-bottom: 16px;
    color: var(--text);
    font-weight: 500;
    font-size: 14px;
}

.quick-create-form input[type="text"],
.quick-create-form select,
.quick-create-form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
}

.quick-create-form textarea {
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
}

.quick-create-form input:focus,
.quick-create-form select:focus,
.quick-create-form textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* Status badges for video studio */
.status-badge.status-warning {
    background: #ff9800;
    color: white;
}

.status-badge.status-success {
    background: var(--success);
    color: white;
}

.status-badge.status-error {
    background: var(--error);
    color: white;
}

/* ========== MOBILE FIXES (Bug 6) ========== */

/* Tab bar: horizontal scroll on small screens */
#tabs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#tabs::-webkit-scrollbar {
    display: none;
}

/* Deliverable filter bar: horizontal scroll instead of wrapping off-screen */
@media (max-width: 768px) {
    .deliverable-filter-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .deliverable-filter-bar::-webkit-scrollbar {
        display: none;
    }

    /* Terminal output: prevent horizontal overflow on mobile */
    .terminal-output {
        max-width: 100vw;
        overflow-x: auto;
        min-height: 300px;
    }

    /* Universe detail panel: full-width on mobile */
    .universe-detail-panel {
        width: 100%;
        min-width: 0;
        max-height: 300px;
        overflow-y: auto;
    }

    /* Prevent accidental zoom on double-tap for interactive elements */
    button, .tab, .chip, .card-btn, .filter-btn, .sidebar-item {
        touch-action: manipulation;
    }

    /* Card actions: wrap on small screens */
    .card-actions {
        flex-wrap: wrap;
    }

    /* Inbox message bodies: prevent overflow */
    .msg-body {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}