/* workspace.css — MoreRight Workspace Theme
   Applied to: dashboard.html, research.html
   Warm dark palette. Monospace everything. Sharp edges. Precision instrument.
   Extropic-influenced: warm charcoal instead of cold black.
   "Like entering a different room." */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');

/* ── Variables ──────────────────────────────────────────── */
:root {
    --ws-bg:           #0c0908;
    --ws-surface:      #131110;
    --ws-surface-2:    #1a1816;
    --ws-surface-3:    #201e1b;
    --ws-border:       rgba(255, 220, 200, 0.07);
    --ws-border-mid:   rgba(255, 220, 200, 0.12);
    --ws-border-dim:   rgba(255, 220, 200, 0.04);
    --ws-text:         #f5f2f0;
    --ws-text-dim:     #a09890;
    --ws-text-faint:   #5a5250;
    --ws-text-muted:   #786e6a;
    --ws-accent:       #c8976a;     /* warm amber — section numbers, active states */
    --ws-accent-dim:   rgba(200, 151, 106, 0.15);
    --ws-red:          #cc3322;
    --ws-red-dim:      rgba(204, 51, 34, 0.12);
    --ws-green:        #3ddc84;
    --ws-green-dim:    rgba(61, 220, 132, 0.12);
    --ws-orange:       #e07830;
    --ws-yellow:       #c8a030;
    --font-ws:         'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Base reset for workspace pages ────────────────────── */
body.workspace {
    background: var(--ws-bg);
    color: var(--ws-text);
    font-family: var(--font-ws);
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.workspace *,
body.workspace *::before,
body.workspace *::after {
    box-sizing: border-box;
}

body.workspace h1,
body.workspace h2,
body.workspace h3,
body.workspace h4 {
    font-family: var(--font-ws);
    font-weight: 700;
    color: var(--ws-text);
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}

body.workspace h2 { font-size: 1.4rem; }
body.workspace h3 { font-size: 1.1rem; font-weight: 500; }
body.workspace p  { margin: 0 0 0.75rem; color: var(--ws-text-dim); }
body.workspace a  { color: var(--ws-text); text-decoration: none; border-bottom: 1px solid var(--ws-border-mid); }
body.workspace a:hover { color: var(--ws-accent); border-color: var(--ws-accent); }
body.workspace code { font-family: var(--font-ws); font-size: 0.85em; background: var(--ws-surface-2); padding: 0.1em 0.35em; }

/* ── Nav override for workspace ─────────────────────────── */
body.workspace #main-nav {
    background: rgba(12, 9, 8, 0.92) !important;
    border-bottom: 1px solid var(--ws-border) !important;
    backdrop-filter: blur(16px);
}

/* ── Hero strip ─────────────────────────────────────────── */
.ws-hero {
    position: relative;
    width: 100%;
    height: 180px;
    background: var(--ws-surface);
    border-bottom: 1px solid var(--ws-border);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.ws-hero canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ws-hero-identity {
    position: relative;
    z-index: 2;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 220px;
}

.ws-hero-identity .ws-chapter-num {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: var(--ws-accent);
    font-weight: 700;
    text-transform: uppercase;
}

.ws-hero-identity #hero-rank-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ws-text);
    letter-spacing: -0.02em;
    line-height: 1;
}

.ws-hero-identity #hero-rank-sub {
    font-size: 0.72rem;
    color: var(--ws-text-faint);
    font-weight: 400;
}

.ws-hero-stats {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 0;
    margin-left: auto;
    padding: 1.25rem 1.5rem;
    border-left: 1px solid var(--ws-border);
}

.ws-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 1.2rem;
    border-right: 1px solid var(--ws-border);
}

.ws-stat:last-child { border-right: none; }

.ws-stat > span:first-child {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ws-text);
    letter-spacing: -0.02em;
    line-height: 1;
}

.ws-stat > span:last-child {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-text-faint);
}

/* ── Tab bar ─────────────────────────────────────────────── */
.ws-tab-bar {
    position: sticky;
    top: 48px; /* below nav */
    z-index: 40;
    background: var(--ws-bg);
    border-bottom: 1px solid var(--ws-border);
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ws-tab-bar::-webkit-scrollbar { display: none; }

.ws-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ws-text-faint);
    font-family: var(--font-ws);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

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

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

/* ── Sections ────────────────────────────────────────────── */
.ws-section {
    display: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}

.ws-section.active { display: block; }

.ws-section-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ws-border);
}

.ws-chapter-num {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: var(--ws-accent);
    font-weight: 700;
    text-transform: uppercase;
}

.ws-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ws-text);
    letter-spacing: -0.01em;
}

/* ── Panels ──────────────────────────────────────────────── */
.ws-panel {
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.ws-panel-header {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ws-text-faint);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.ws-panel-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.ws-panel-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--ws-border);
}

.ws-panel-grid-3 > * {
    padding: 1rem;
    border-right: 1px solid var(--ws-border);
}

.ws-panel-grid-3 > *:last-child { border-right: none; }

.ws-panel-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--ws-border);
}

.ws-panel-grid-4 > * {
    padding: 1rem;
    border-right: 1px solid var(--ws-border);
}

.ws-panel-grid-4 > *:last-child { border-right: none; }

/* ── Terminal / code panels ──────────────────────────────── */
.ws-terminal {
    background: #0a0806;
    border: 1px solid var(--ws-border);
    font-family: var(--font-ws);
    font-size: 0.8rem;
    color: var(--ws-text-dim);
    padding: 1rem;
    line-height: 1.5;
}

.ws-terminal .t-label {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 0.5rem;
}

.ws-terminal .t-system  { color: var(--ws-text-faint); }
.ws-terminal .t-user    { color: var(--ws-text-dim); }
.ws-terminal .t-agent   { color: var(--ws-accent); }
.ws-terminal .t-tool    { color: var(--ws-yellow); }

.ws-code-block {
    background: #0a0806;
    border: 1px solid var(--ws-border);
    padding: 1rem;
    font-size: 0.78rem;
    color: var(--ws-text-dim);
    overflow-x: auto;
    white-space: pre;
}

/* ── Score chips ─────────────────────────────────────────── */
.ws-chip {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.15em 0.5em;
    font-family: var(--font-ws);
}

.ws-chip-critical { background: var(--ws-red-dim);   color: #ff5544; border: 1px solid rgba(204,51,34,0.3); }
.ws-chip-high     { background: rgba(224,120,48,0.12); color: #e09040; border: 1px solid rgba(224,120,48,0.3); }
.ws-chip-moderate { background: rgba(200,160,48,0.12); color: #c8a840; border: 1px solid rgba(200,160,48,0.3); }
.ws-chip-low      { background: var(--ws-green-dim);  color: #3ddc84; border: 1px solid rgba(61,220,132,0.3); }
.ws-chip-pending  { background: rgba(255,220,200,0.06); color: var(--ws-text-faint); border: 1px solid var(--ws-border-mid); }
.ws-chip-validated { background: var(--ws-green-dim); color: var(--ws-green); border: 1px solid rgba(61,220,132,0.3); }
.ws-chip-accent   { background: var(--ws-accent-dim); color: var(--ws-accent); border: 1px solid rgba(200,151,106,0.3); }

/* ── Stats ───────────────────────────────────────────────── */
.ws-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--ws-border);
    margin-bottom: 1.25rem;
}

.ws-stats-cell {
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--ws-border);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ws-stats-cell:last-child { border-right: none; }

.ws-stats-num {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ws-text);
    letter-spacing: -0.02em;
    line-height: 1;
}

.ws-stats-lbl {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-text-faint);
}

/* ── Rank bar ────────────────────────────────────────────── */
.ws-rank-bar {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem 1.25rem;
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
    margin-bottom: 1.25rem;
}

.ws-rank-badge {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ws-rank-tier {
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ws-accent);
    font-weight: 700;
}

.ws-rank-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ws-text);
    letter-spacing: -0.01em;
}

.ws-rank-streak {
    font-size: 0.78rem;
    color: var(--ws-text-dim);
}

.ws-rank-streak strong { color: var(--ws-text); }

/* ── Progress / accuracy bar ─────────────────────────────── */
.ws-acc-row {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
    margin-bottom: 1.25rem;
}

.ws-acc-num {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ws-text);
    line-height: 1;
}

.ws-acc-label {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-text-faint);
    margin-bottom: 0.3rem;
}

.ws-bar-wrap {
    height: 4px;
    background: var(--ws-surface-2);
    margin-top: 0.75rem;
    flex: 1;
}

.ws-bar-fill {
    height: 100%;
    background: var(--ws-accent);
    transition: width 0.6s ease;
}

.ws-bar-fill.bar-green { background: var(--ws-green); }
.ws-bar-fill.bar-red   { background: var(--ws-red); }

/* ── Challenge box ───────────────────────────────────────── */
.ws-challenge {
    border: 1px solid var(--ws-border);
    padding: 1.25rem;
    background: var(--ws-surface);
    margin-bottom: 1.25rem;
}

.ws-challenge-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.ws-challenge-title {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ws-accent);
    font-weight: 700;
}

.ws-challenge-days {
    font-size: 0.7rem;
    color: var(--ws-text-faint);
}

.ws-challenge-desc {
    font-size: 0.85rem;
    color: var(--ws-text-dim);
    margin-bottom: 0.75rem;
}

.ws-challenge-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.ws-challenge-track {
    flex: 1;
    height: 3px;
    background: var(--ws-surface-2);
}

.ws-challenge-fill {
    height: 100%;
    background: var(--ws-accent);
    transition: width 0.4s ease;
}

.ws-challenge-prize {
    font-size: 0.72rem;
    color: var(--ws-text-faint);
}

.ws-challenge-prize strong { color: var(--ws-text); }

/* ── Activity feed ───────────────────────────────────────── */
.ws-activity-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--ws-border-dim);
    font-size: 0.82rem;
}

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

.ws-activity-name { color: var(--ws-text); font-weight: 500; }
.ws-activity-time { font-size: 0.68rem; color: var(--ws-text-faint); }

/* ── Badge grid ──────────────────────────────────────────── */
.ws-badge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--ws-border);
    border: 1px solid var(--ws-border);
    margin-bottom: 1.25rem;
}

.ws-badge-cell {
    background: var(--ws-surface);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    opacity: 0.45;
    transition: opacity 0.2s;
}

.ws-badge-cell.earned { opacity: 1; }

.ws-badge-cell.earned .ws-badge-name {
    color: var(--ws-accent);
}

.ws-badge-icon {
    width: 28px;
    height: 28px;
    border: 2px solid var(--ws-border-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--ws-text-faint);
    margin-bottom: 0.25rem;
}

.ws-badge-cell.earned .ws-badge-icon {
    border-color: var(--ws-accent);
    color: var(--ws-accent);
}

.ws-badge-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ws-text-dim);
}

.ws-badge-desc {
    font-size: 0.68rem;
    color: var(--ws-text-faint);
    line-height: 1.35;
}

/* ── Rank progression ────────────────────────────────────── */
.ws-rank-progression {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--ws-border);
}

.ws-rank-step {
    padding: 0.85rem 1rem;
    border-right: 1px solid var(--ws-border);
}

.ws-rank-step:last-child { border-right: none; }
.ws-rank-step.current { background: var(--ws-accent-dim); }

.ws-rank-step-name {
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 0.25rem;
    color: var(--ws-text);
}

.ws-rank-step.current .ws-rank-step-name { color: var(--ws-accent); }

.ws-rank-step-req {
    font-size: 0.68rem;
    color: var(--ws-text-faint);
}

/* ── Score table ─────────────────────────────────────────── */
.ws-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.ws-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-text-faint);
    border-bottom: 1px solid var(--ws-border);
    font-weight: 700;
}

.ws-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--ws-border-dim);
    color: var(--ws-text-dim);
}

.ws-table tr:last-child td { border-bottom: none; }
.ws-table tr:hover td { background: var(--ws-surface); color: var(--ws-text); }

/* ── Buttons ─────────────────────────────────────────────── */
.ws-btn {
    display: inline-block;
    background: none;
    border: 1px solid var(--ws-border-mid);
    color: var(--ws-text-dim);
    font-family: var(--font-ws);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    text-decoration: none !important;
}

.ws-btn:hover {
    border-color: var(--ws-accent);
    color: var(--ws-accent);
    background: var(--ws-accent-dim);
}

.ws-btn-primary {
    background: var(--ws-accent-dim);
    border-color: var(--ws-accent);
    color: var(--ws-accent);
}

.ws-btn-primary:hover {
    background: rgba(200,151,106,0.25);
}

.ws-btn-danger {
    border-color: rgba(204,51,34,0.3);
    color: var(--ws-red);
}

.ws-btn-danger:hover {
    background: var(--ws-red-dim);
    border-color: var(--ws-red);
}

.ws-btn-sm {
    font-size: 0.68rem;
    padding: 0.3rem 0.65rem;
}

/* ── Inputs ──────────────────────────────────────────────── */
.ws-input {
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
    color: var(--ws-text);
    font-family: var(--font-ws);
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
    outline: none;
    width: 100%;
    transition: border-color 0.15s;
}

.ws-input:focus {
    border-color: var(--ws-accent);
}

.ws-input::placeholder { color: var(--ws-text-faint); }

.ws-label {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-text-faint);
    font-weight: 700;
    margin-bottom: 0.35rem;
}

/* ── Arena / Red Team ─────────────────────────────────────── */
.ws-attack-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--ws-border);
    margin-bottom: 1.25rem;
}

.ws-attack-cell {
    padding: 0.85rem;
    border-right: 1px solid var(--ws-border);
    border-bottom: 1px solid var(--ws-border);
    cursor: pointer;
    transition: background 0.15s;
}

.ws-attack-cell:hover { background: var(--ws-surface-2); }

.ws-attack-cell:nth-child(4n) { border-right: none; }
.ws-attack-cell:nth-child(n+5) { border-bottom: none; }

.ws-attack-id {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: var(--ws-text-faint);
    margin-bottom: 0.2rem;
}

.ws-attack-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ws-text);
    margin-bottom: 0.15rem;
}

.ws-attack-desc {
    font-size: 0.68rem;
    color: var(--ws-text-faint);
    line-height: 1.3;
    margin-bottom: 0.4rem;
}

.ws-attack-tag {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ws-accent);
    font-weight: 700;
}

/* Arena cascade canvas */
#arena-cascade-canvas {
    width: 100%;
    height: 260px;
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
    display: block;
    margin-bottom: 1.25rem;
}

.ws-cascade-label {
    position: absolute;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    pointer-events: none;
}

/* ── Usage meters ─────────────────────────────────────────── */
.ws-usage-meter {
    margin-bottom: 0.75rem;
}

.ws-usage-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.ws-usage-name {
    font-size: 0.72rem;
    color: var(--ws-text-dim);
}

.ws-usage-count {
    font-size: 0.72rem;
    color: var(--ws-text-faint);
    font-family: var(--font-ws);
}

.ws-usage-track {
    height: 3px;
    background: var(--ws-surface-2);
}

.ws-usage-fill {
    height: 100%;
    background: var(--ws-accent);
    transition: width 0.4s ease;
}

.ws-usage-fill.warn     { background: var(--ws-orange); }
.ws-usage-fill.critical { background: var(--ws-red); }

/* ── API / Dev section ────────────────────────────────────── */
.ws-endpoint {
    border: 1px solid var(--ws-border);
    margin-bottom: 0.75rem;
}

.ws-endpoint-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: var(--ws-surface);
    border-bottom: 1px solid var(--ws-border);
    cursor: pointer;
}

.ws-method {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 0.15em 0.5em;
    text-transform: uppercase;
}

.ws-method-get  { background: rgba(170,170,85,0.12);  color: #aaaa55; border: 1px solid rgba(170,170,85,0.2); }
.ws-method-post { background: rgba(85,170,85,0.12);   color: #55aa55; border: 1px solid rgba(85,170,85,0.2); }

.ws-endpoint-path {
    font-size: 0.8rem;
    font-family: var(--font-ws);
    color: var(--ws-text);
}

.ws-endpoint-desc {
    font-size: 0.72rem;
    color: var(--ws-text-faint);
    margin-left: auto;
}

.ws-endpoint-body {
    padding: 0.85rem;
    font-size: 0.78rem;
    color: var(--ws-text-dim);
}

/* API key display */
.ws-api-key-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem;
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
    margin-bottom: 0.75rem;
}

.ws-api-key-val {
    font-family: var(--font-ws);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--ws-text-dim);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Playground */
.ws-playground {
    border: 1px solid var(--ws-border);
    margin-top: 1.25rem;
}

.ws-playground-header {
    padding: 0.5rem 0.85rem;
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ws-accent);
    font-weight: 700;
    border-bottom: 1px solid var(--ws-border);
    background: var(--ws-surface);
}

.ws-playground-body {
    padding: 0.85rem;
}

.ws-playground-output {
    background: #0a0806;
    border: 1px solid var(--ws-border-dim);
    padding: 0.75rem;
    font-size: 0.78rem;
    color: var(--ws-text-faint);
    min-height: 80px;
    font-family: var(--font-ws);
    white-space: pre-wrap;
}

/* ── Earnings ─────────────────────────────────────────────── */
.ws-withdraw-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem;
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
    margin-bottom: 1.25rem;
}

.ws-withdraw-amount {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ws-text);
    line-height: 1;
}

.ws-withdraw-sub {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: var(--ws-text-faint);
    text-transform: uppercase;
    margin-top: 0.2rem;
}

/* ── Empty states ─────────────────────────────────────────── */
.ws-empty {
    border: 1px dashed var(--ws-border);
    padding: 2.5rem;
    text-align: center;
    color: var(--ws-text-faint);
    font-size: 0.82rem;
}

.ws-empty p { color: var(--ws-text-faint); margin: 0 0 0.5rem; }

/* ── Study section ────────────────────────────────────────── */
.ws-study-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.ws-study-scene {
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
}

.ws-study-scene-full {
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
    margin-bottom: 1.5rem;
}

.ws-study-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ws-border);
}

.ws-study-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--ws-text);
}

.ws-study-paper {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: var(--ws-accent);
}

.ws-study-canvas-wrap {
    height: 400px;
    position: relative;
    overflow: hidden;
    background: var(--ws-bg);
}

.ws-study-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.ws-study-controls {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ws-border);
    flex-wrap: wrap;
}

.ws-study-controls label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--ws-text-dim);
}

.ws-study-controls input[type="range"] {
    width: 100px;
    accent-color: var(--ws-accent);
}

.ws-study-controls .val {
    font-family: var(--font-ws);
    font-size: 0.72rem;
    color: var(--ws-accent);
    min-width: 1.5rem;
}

.ws-study-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.68rem;
    color: var(--ws-text-faint);
    border-top: 1px solid var(--ws-border-dim);
}

/* ── Research workspace specific ─────────────────────────── */
.ws-topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    height: 44px;
    background: var(--ws-surface);
    border-bottom: 1px solid var(--ws-border);
    position: sticky;
    top: 48px;
    z-index: 30;
}

.ws-name-input {
    background: none;
    border: none;
    color: var(--ws-text);
    font-family: var(--font-ws);
    font-size: 0.85rem;
    font-weight: 500;
    outline: none;
    flex: 1;
    min-width: 0;
}

.ws-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.ws-grid-app {
    display: grid;
    grid-template-columns: 200px 1fr 260px;
    height: calc(100vh - 92px); /* below nav + topbar */
    overflow: hidden;
}

.ws-sidebar-app {
    background: var(--ws-surface);
    border-right: 1px solid var(--ws-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ws-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--ws-border);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-text-faint);
    font-weight: 700;
}

.ws-tree {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.ws-tree-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.85rem;
    font-size: 0.78rem;
    color: var(--ws-text-dim);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-ws);
    gap: 0.5rem;
    transition: background 0.1s, color 0.1s;
}

.ws-tree-item:hover { background: var(--ws-surface-2); color: var(--ws-text); }
.ws-tree-item.selected { background: var(--ws-accent-dim); color: var(--ws-accent); }

.ws-canvas-wrap {
    position: relative;
    background: var(--ws-bg);
    overflow: hidden;
}

.ws-canvas-toolbar {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0;
    z-index: 10;
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
}

.ws-view-btn {
    padding: 0.35rem 0.85rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--font-ws);
    background: none;
    border: none;
    border-right: 1px solid var(--ws-border);
    color: var(--ws-text-faint);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.ws-view-btn:last-child { border-right: none; }
.ws-view-btn.active, .ws-view-btn:hover { color: var(--ws-accent); background: var(--ws-accent-dim); }

.ws-node-count {
    padding: 0.35rem 0.75rem;
    font-size: 0.65rem;
    color: var(--ws-text-faint);
    font-family: var(--font-ws);
}

.ws-inspector-panel {
    background: var(--ws-surface);
    border-left: 1px solid var(--ws-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.ws-inspector-header {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--ws-border);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-text-faint);
    font-weight: 700;
}

.ws-inspector-empty {
    padding: 1.25rem 0.85rem;
    font-size: 0.75rem;
    color: var(--ws-text-faint);
    line-height: 1.45;
}

#inspector-viz-canvas {
    display: block;
    width: 100%;
    height: 200px;
    background: var(--ws-bg);
    border-bottom: 1px solid var(--ws-border);
}

/* ── Chat drawer ─────────────────────────────────────────── */
.ws-chat-drawer {
    position: fixed;
    bottom: 0;
    left: 200px;
    right: 260px;
    background: var(--ws-surface);
    border-top: 1px solid var(--ws-border);
    border-left: 1px solid var(--ws-border);
    border-right: 1px solid var(--ws-border);
    z-index: 50;
    transform: translateY(calc(100% - 44px));
    transition: transform 0.2s ease;
}

.ws-chat-drawer.open {
    transform: translateY(0);
}

.ws-chat-handle {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--ws-text-dim);
    font-weight: 700;
    gap: 0.5rem;
    border-bottom: 1px solid var(--ws-border);
    user-select: none;
}

.ws-chat-handle:hover { background: var(--ws-surface-2); }

.ws-chat-toggle {
    margin-left: auto;
    font-size: 0.6rem;
    color: var(--ws-text-faint);
}

.ws-chat-body {
    display: flex;
    flex-direction: column;
    height: 320px;
}

.ws-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ws-msg {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ws-msg-label {
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    font-weight: 700;
    text-transform: uppercase;
}

.ws-msg-system .ws-msg-label { color: var(--ws-text-faint); }
.ws-msg-user   .ws-msg-label { color: var(--ws-text-dim); }
.ws-msg-agent  .ws-msg-label { color: var(--ws-accent); }
.ws-msg-tool   .ws-msg-label { color: var(--ws-yellow); }

.ws-msg-text {
    font-size: 0.8rem;
    color: var(--ws-text-dim);
    line-height: 1.45;
}

.ws-msg-system .ws-msg-text { color: var(--ws-text-faint); }
.ws-msg-agent  .ws-msg-text { color: var(--ws-text); }

.ws-chat-input-row {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--ws-border);
}

.ws-chat-input {
    flex: 1;
    background: #0a0806;
    border: none;
    border-right: 1px solid var(--ws-border);
    color: var(--ws-text);
    font-family: var(--font-ws);
    font-size: 0.8rem;
    padding: 0.6rem 0.85rem;
    resize: none;
    outline: none;
}

.ws-chat-input::placeholder { color: var(--ws-text-faint); }

.ws-chat-send {
    background: var(--ws-accent-dim);
    border: none;
    color: var(--ws-accent);
    font-family: var(--font-ws);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 1rem;
    cursor: pointer;
    letter-spacing: 0.06em;
    transition: background 0.15s;
}

.ws-chat-send:hover { background: rgba(200,151,106,0.25); }

.ws-chat-meta {
    display: flex;
    gap: 1rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.6rem;
    color: var(--ws-text-faint);
    border-top: 1px solid var(--ws-border-dim);
}

/* ── Sub-tabs for nested sections (Red Team) ─────────────── */
.ws-subtab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ws-border);
    margin-bottom: 1.5rem;
}

.ws-subtab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ws-text-faint);
    font-family: var(--font-ws);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.55rem 1rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.ws-subtab:hover { color: var(--ws-text-dim); }
.ws-subtab.active { color: var(--ws-accent); border-bottom-color: var(--ws-accent); }

.ws-subsection { display: none; }
.ws-subsection.active { display: block; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .ws-hero { height: auto; flex-wrap: wrap; }
    .ws-hero-stats { margin-left: 0; border-left: none; border-top: 1px solid var(--ws-border); width: 100%; }
    .ws-panel-grid-4,
    .ws-stats-row { grid-template-columns: repeat(2, 1fr); }
    .ws-panel-grid-3 { grid-template-columns: 1fr 1fr; }
    .ws-study-grid { grid-template-columns: 1fr; }
    .ws-attack-grid { grid-template-columns: repeat(2, 1fr); }
    .ws-rank-progression { grid-template-columns: repeat(2, 1fr); }
    .ws-badge-grid { grid-template-columns: repeat(2, 1fr); }
    .ws-grid-app { grid-template-columns: 1fr; }
    .ws-chat-drawer { left: 0; right: 0; }
}

@media (max-width: 600px) {
    .ws-section { padding: 1.5rem 1rem; }
    .ws-stats-row,
    .ws-panel-grid-4,
    .ws-panel-grid-3 { grid-template-columns: 1fr 1fr; }
    .ws-attack-grid { grid-template-columns: 1fr 1fr; }
    .ws-badge-grid { grid-template-columns: repeat(2, 1fr); }
    .ws-rank-progression { grid-template-columns: 1fr 1fr; }
    .ws-hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); }
}