/* ── CyberHackademie — Cassette Futurism Theme ─────────────── */

:root {
    --crt-bg: #f8efe2;
    --crt-screen-bg: #f5ebdb;
    --crt-primary: #ff751f;
    --crt-primary-dark: #d45d14;
    --crt-text: #1a1410;
    --crt-text-dim: #6b5d53;
    --crt-glow: rgba(255, 117, 31, 0.3);
    --crt-grid: rgba(255, 117, 31, 0.04);

    body { margin: 0; }

/* ── HUD (Dark Cockpit) Theme ── */
    --hud-bg: #0f0c0a;
    --hud-panel: #171210;
    --hud-panel-alt: #1e1814;
    --hud-border: rgba(255, 136, 0, 0.15);
    --hud-border-strong: rgba(255, 136, 0, 0.35);
    --hud-primary: #ff8800;
    --hud-primary-dim: #cc6600;
    --hud-glow: rgba(255, 136, 0, 0.2);
    --hud-text: #e6d8c8;
    --hud-text-dim: #8a7a6a;
    --hud-text-muted: #5a4e42;
    --hud-accent: #00d4aa;
    --hud-warning: #ff4444;
    --hud-success: #44dd88;
    --hud-grid: rgba(255, 136, 0, 0.03);
}

/* ── Global ──────────────────────────────────────────── */

body {
    background-color: var(--crt-bg);
    background-image:
        linear-gradient(var(--crt-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--crt-grid) 1px, transparent 1px);
    background-size: 40px 40px;
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    position: relative;
}

/* Full-page scanlines */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.02) 2px,
        rgba(0, 0, 0, 0.02) 4px
    );
    pointer-events: none;
    z-index: 10000;
}

/* Full-page vignette + CRT curvature */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(42, 31, 26, 0.08) 100%
    );
    pointer-events: none;
    z-index: 9999;
}

/* CRT screen flicker */
@keyframes crt-flicker {
    0% { opacity: 1; }
    50% { opacity: 0.998; }
    100% { opacity: 1; }
}

body {
    animation: crt-flicker 0.15s infinite;
}

/* ── Field Block ──────────────────────────────────────── */

.field-block {
    border: 2px solid rgba(26, 20, 16, 0.2);
    padding: 6px 12px 4px;
    transition: border-color 0.2s;
}

.field-block:focus-within {
    border-color: var(--crt-primary);
}

.field-block + .field-block {
    margin-top: 8px;
}

.field-block-label {
    font-family: 'VT323', monospace;
    font-size: 0.75rem;
    color: var(--crt-text-dim);
    text-transform: lowercase;
    letter-spacing: 1px;
    display: block;
    line-height: 1;
    margin-bottom: 2px;
    user-select: none;
}

.field-block .terminal-input {
    border: none;
    background: transparent;
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 1.25rem;
    outline: none;
    width: 100%;
    padding: 2px 0 4px;
}

.field-block .terminal-input:focus {
    box-shadow: none;
}

/* ── Power LED + Brand Badge ──────────────────────────── */

.crt-led {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--crt-primary);
    border-radius: 50%;
    box-shadow:
        0 0 6px var(--crt-primary),
        0 0 12px var(--crt-glow);
    animation: led-pulse 2s ease-in-out infinite;
}

@keyframes led-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.crt-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 3px;
    color: var(--crt-text-dim);
    text-transform: uppercase;
}

/* ── Typography ───────────────────────────────────────── */

.crt-heading {
    font-family: 'Orbitron', sans-serif;
    color: var(--crt-text);
    letter-spacing: 1px;
}

.crt-subtitle {
    font-family: 'VT323', monospace;
    font-size: 1.125rem;
    color: var(--crt-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ── Terminal Input (standalone) ──────────────────────── */

.terminal-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(26, 20, 16, 0.2);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 1.125rem;
    outline: none;
    width: 100%;
    padding: 8px 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.terminal-input:focus {
    border-bottom-color: var(--crt-primary);
    box-shadow: 0 2px 8px rgba(255, 117, 31, 0.12);
}

/* ── Retro Button ─────────────────────────────────────── */

.retro-btn {
    position: relative;
    background: transparent;
    border: 2px solid var(--crt-primary);
    color: var(--crt-primary);
    font-family: 'VT323', monospace;
    letter-spacing: 2.5px;
    padding: 14px 36px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.retro-btn:hover {
    background: var(--crt-primary);
    color: var(--crt-bg);
    box-shadow: 0 0 24px var(--crt-glow);
    transform: translateY(-1px);
}

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

/* ── Blinking Cursor ──────────────────────────────────── */

.blink-cursor::after {
    content: '▌';
    animation: blink 1s step-end infinite;
    color: var(--crt-primary);
    font-size: 1.1em;
    margin-left: 2px;
}

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

/* ── Status message (terminal style) ──────────────────── */

.terminal-msg {
    border-left: 3px solid var(--crt-primary);
    padding: 10px 16px;
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.terminal-msg.error {
    border-left-color: #c0392b;
    background: rgba(192, 57, 43, 0.06);
    color: #8a2e22;
}

.terminal-msg.success {
    border-left-color: #27ae60;
    background: rgba(39, 174, 96, 0.06);
    color: #1a7a42;
}

/* ── Scrollbar ────────────────────────────────────────── */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--crt-bg); }
::-webkit-scrollbar-thumb { background: var(--crt-primary); border-radius: 0; }

/* ═══════════════════════════════════════════════════════════
   HUD Theme — Dark Cockpit / Spaceship Console
   ═══════════════════════════════════════════════════════════ */

/* ── HUD Base ── */
.hud-bg    { background: var(--hud-bg); }
.hud-text  { color: var(--hud-text); }
.hud-text-dim  { color: var(--hud-text-dim); }
.hud-text-muted { color: var(--hud-text-muted); }

/* ── HUD Panel ── */
.hud-panel {
    background: var(--hud-panel);
    border: 1px solid var(--hud-border);
    position: relative;
    transition: border-color 0.2s;
}
.hud-panel:hover {
    border-color: var(--hud-border-strong);
}
.hud-panel-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--hud-primary);
    display: block;
    padding: 6px 10px 4px;
    user-select: none;
    border-bottom: 1px solid var(--hud-border);
}
.hud-panel-body {
    padding: 10px;
}
.hud-panel-body-compact {
    padding: 6px 10px;
}

/* ── HUD Stat Tile ── */
.hud-stat {
    text-align: center;
    padding: 14px 8px;
}
.hud-stat-value {
    font-family: 'VT323', monospace;
    font-size: 1.8rem;
    color: var(--hud-primary);
    line-height: 1;
}
.hud-stat-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5rem;
    letter-spacing: 2px;
    color: var(--hud-text-muted);
    text-transform: uppercase;
    margin-top: 4px;
}

/* ── HUD Progress Bar ── */
.hud-progress {
    height: 6px;
    background: var(--hud-panel-alt);
    border: 1px solid var(--hud-border);
    position: relative;
    overflow: hidden;
}
.hud-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--hud-primary-dim), var(--hud-primary));
    transition: width 0.4s ease;
    box-shadow: 0 0 8px var(--hud-glow);
}

/* ── HUD Data Row ── */
.hud-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,136,0,0.06);
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
}
.hud-row:last-child {
    border-bottom: none;
}
.hud-row-key {
    color: var(--hud-text-dim);
}
.hud-row-val {
    color: var(--hud-text);
}

/* ── HUD Terminal Line ── */
.hud-line {
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    padding: 3px 0;
    color: var(--hud-text-dim);
    border-bottom: 1px solid rgba(255,136,0,0.04);
}
.hud-line-prompt::before {
    content: '> ';
    color: var(--hud-primary);
}
.hud-line-success { color: var(--hud-success); }
.hud-line-error   { color: var(--hud-warning); }
.hud-line-accent  { color: var(--hud-primary); }

/* ── HUD LED indicators ── */
.hud-led {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}
.hud-led-green  { background: var(--hud-success); box-shadow: 0 0 4px var(--hud-success); }
.hud-led-red    { background: var(--hud-warning); box-shadow: 0 0 4px var(--hud-warning); }
.hud-led-amber  { background: var(--hud-primary); box-shadow: 0 0 4px var(--hud-glow); }
.hud-led-teal   { background: var(--hud-accent); box-shadow: 0 0 4px var(--hud-accent); }

/* ── HUD Button (retro style for dark) ── */
.hud-btn {
    background: transparent;
    border: 1px solid var(--hud-border-strong);
    color: var(--hud-primary);
    font-family: 'VT323', monospace;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 20px;
    cursor: pointer;
    transition: all 0.2s;
}
.hud-btn:hover {
    background: var(--hud-primary);
    color: var(--hud-bg);
    box-shadow: 0 0 16px var(--hud-glow);
}

/* ── HUD Status Bar (top & bottom) ── */
.hud-statusbar {
    background: rgba(15,12,10,0.95);
    border-bottom: 1px solid var(--hud-border);
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    color: var(--hud-text-dim);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    user-select: none;
}
.hud-statusbar-bottom {
    border-bottom: none;
    border-top: 1px solid var(--hud-border);
}
.hud-statusbar-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── HUD Nav Sidebar ── */
.hud-nav {
    background: rgba(15,12,10,0.6);
    border-right: 1px solid var(--hud-border);
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 160px;
    flex-shrink: 0;
}
.hud-nav-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: var(--hud-text-muted);
    padding: 0 10px 10px;
    text-transform: uppercase;
}
.hud-nav-item {
    font-family: 'VT323', monospace;
    font-size: 1.05rem;
    padding: 8px 12px;
    color: var(--hud-text-dim);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.15s;
    cursor: pointer;
}
.hud-nav-item:hover {
    color: var(--hud-text);
    border-left-color: var(--hud-text-muted);
}
.hud-nav-item.active {
    color: var(--hud-primary);
    border-left-color: var(--hud-primary);
    background: rgba(255,136,0,0.06);
}
.hud-nav-item.active::after {
    content: '▌';
    animation: blink 1s step-end infinite;
    color: var(--hud-primary);
    margin-left: 4px;
}

/* ── HUD Grid helpers ── */
.hud-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.hud-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.hud-grid-span-2 { grid-column: span 2; }
.hud-grid-full  { grid-column: 1 / -1; }

/* ── HUD Scrollbar (for dark) ── */
.hud-scroll::-webkit-scrollbar { width: 4px; }
.hud-scroll::-webkit-scrollbar-track { background: transparent; }
.hud-scroll::-webkit-scrollbar-thumb { background: var(--hud-border-strong); border-radius: 0; }

/* ── HUD Mode: override CRT body effects ── */
body.hud-active {
    background: var(--hud-bg) !important;
    animation: none !important;
}
body.hud-active::before,
body.hud-active::after {
    display: none !important;
}
/* html overflow fix for HUD pages */
body.hud-active > * { max-height: 100vh; }

/* ── HUD Panel Corner Brackets ── */
.hud-panel-bracket { position: relative; }
.hud-panel-bracket::before {
    content: '┌';
    position: absolute;
    top: -1px; left: -1px;
    font-family: 'VT323', monospace;
    font-size: 0.5rem;
    color: var(--hud-border-strong);
    line-height: 1;
}
.hud-panel-bracket::after {
    content: '┘';
    position: absolute;
    bottom: -1px; right: -1px;
    font-family: 'VT323', monospace;
    font-size: 0.5rem;
    color: var(--hud-border-strong);
    line-height: 1;
}

/* ── HUD Decorative Divider ── */
.hud-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.45rem;
    letter-spacing: 2px;
    color: var(--hud-text-muted);
    text-transform: uppercase;
}
.hud-divider::before,
.hud-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hud-border-strong), transparent);
}
.hud-divider-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hud-border-strong), transparent);
    margin: 6px 0;
}

/* ── HUD Bar Chart (CSS-only) ── */
.hud-chart-bar {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 60px;
    padding: 4px 0;
}
.hud-chart-bar-item {
    flex: 1;
    background: linear-gradient(180deg, var(--hud-primary), var(--hud-primary-dim));
    min-height: 4px;
    position: relative;
    transition: height 0.4s ease;
    box-shadow: 0 0 4px var(--hud-glow);
}
.hud-chart-bar-item:nth-child(1) { height: 70%; }
.hud-chart-bar-item:nth-child(2) { height: 45%; }
.hud-chart-bar-item:nth-child(3) { height: 90%; }
.hud-chart-bar-item:nth-child(4) { height: 30%; }
.hud-chart-bar-item:nth-child(5) { height: 65%; }
.hud-chart-bar-item:nth-child(6) { height: 55%; }
.hud-chart-bar-item:nth-child(7) { height: 80%; }
.hud-chart-bar-item:nth-child(8) { height: 20%; }

/* ── HUD Radar / Scanning Effect ── */
.hud-radar {
    width: 80px;
    height: 80px;
    border: 1px solid var(--hud-border-strong);
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: radial-gradient(circle, transparent 60%, rgba(255,136,0,0.05));
}
.hud-radar::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 1px;
    height: 50%;
    background: linear-gradient(to bottom, var(--hud-primary), transparent);
    transform-origin: bottom center;
    animation: radar-sweep 3s linear infinite;
}
.hud-radar::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 4px;
    background: var(--hud-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px var(--hud-glow);
}
@keyframes radar-sweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── HUD Pulse Ring ── */
.hud-pulse-ring {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 1px solid var(--hud-primary);
    position: relative;
    margin: 0 auto;
}
.hud-pulse-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px solid rgba(255,136,0,0.3);
}
.hud-pulse-ring::after {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: var(--hud-primary);
    opacity: 0.6;
    box-shadow: 0 0 10px var(--hud-glow);
    animation: pulse-ring 2s ease-in-out infinite;
}
@keyframes pulse-ring {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 0.3; }
}

/* ── HUD Data Grid ── */
.hud-data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--hud-border);
}
.hud-data-cell {
    background: var(--hud-panel);
    padding: 8px 6px;
    text-align: center;
}
.hud-data-cell-value {
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: var(--hud-primary);
}
.hud-data-cell-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.4rem;
    letter-spacing: 1px;
    color: var(--hud-text-muted);
    text-transform: uppercase;
    margin-top: 2px;
}

/* ── HUD Hex Grid ── */
.hud-hex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    padding: 8px 0;
}
.hud-hex {
    width: 24px; height: 14px;
    background: var(--hud-panel-alt);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    transition: background 0.2s;
}
.hud-hex.active { background: var(--hud-primary); box-shadow: 0 0 6px var(--hud-glow); }
.hud-hex.solved { background: var(--hud-success); }
.hud-hex.pending { background: var(--hud-text-muted); }

/* ── HUD Typing Indicator ── */
.hud-typing::after {
    content: '▌';
    animation: blink 1s step-end infinite;
    color: var(--hud-primary);
    margin-left: 2px;
}

/* ── HUD Grid Center Fix ── */
.hud-grid-center {
    margin: 0 auto;
    max-width: 1200px;
}

/* ═══════════════════════════════════════════════════════════
   Lumon — Retro Corporate Terminal (Severance-inspired)
   ═══════════════════════════════════════════════════════════ */

.lumo-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--crt-bg);
}

.lumo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    border-bottom: 1px solid rgba(26,20,16,0.08);
    font-family: 'VT323', monospace;
    font-size: 0.8rem;
    color: var(--crt-text-dim);
    flex-shrink: 0;
}
.lumo-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lumo-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lumo-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}
.lumo-greeting {
    font-family: 'VT323', monospace;
    font-size: 1.8rem;
    color: var(--crt-text);
    margin-bottom: 3px;
    letter-spacing: 1px;
}
.lumo-greeting-name {
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: var(--crt-text-dim);
    margin-bottom: 40px;
}

.lumo-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 400px;
}
.lumo-btn {
    display: block;
    width: 100%;
    padding: 18px 0;
    background: transparent;
    border: 2px solid rgba(26,20,16,0.15);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.lumo-btn:hover {
    border-color: var(--crt-primary);
    color: var(--crt-primary);
    background: rgba(255,117,31,0.04);
}
.lumo-btn:active {
    transform: scale(0.98);
}
.lumo-btn-sub {
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--crt-text-dim);
    display: block;
    margin-top: 2px;
    text-transform: none;
}

.lumo-footer {
    text-align: center;
    padding: 20px 20px 24px;
    font-family: 'VT323', monospace;
    font-size: 0.6rem;
    color: var(--crt-text-dim);
    opacity: 0.35;
    flex-shrink: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.lumo-cursor::after {
    content: '▌';
    animation: blink 1s step-end infinite;
    color: var(--crt-primary);
    margin-left: 2px;
}

.lumo-sep {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 60px;
    margin: 0 auto 30px;
}
.lumo-sep::before,
.lumo-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(26,20,16,0.1);
}

/* ═══════════════════════════════════════════════════════════
   Lumon — Typing Animation (centered)
   ═══════════════════════════════════════════════════════════ */

.lumo-type-wrap {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    clip-path: inset(0 100% 0 0);
    animation: type-reveal 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.lumo-type-greeting {
    animation-delay: 0.4s;
}

.lumo-type-name {
    animation-delay: 1.2s;
    animation-duration: 0.8s;
}

@keyframes type-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

/* Blinking cursor after greeting + name */
.lumo-cursor-type {
    display: inline-block;
    width: 0;
    overflow: visible;
    animation: cursor-blink 0.8s step-end 3;
    animation-delay: 0.4s;
}
.lumo-cursor-type-name {
    display: inline-block;
    width: 0;
    overflow: visible;
    animation: cursor-blink 0.8s step-end 3;
    animation-delay: 1.2s;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ── Button reveal (staggered) ── */

.lumo-btn-reveal {
    opacity: 0;
    transform: translateY(12px);
    animation: lumo-fade-up 0.45s ease forwards;
    width: 100%;
}

.lumo-btn-reveal:nth-child(1) { animation-delay: 2.2s; }
.lumo-btn-reveal:nth-child(2) { animation-delay: 2.4s; }
.lumo-btn-reveal:nth-child(3) { animation-delay: 2.6s; }
.lumo-btn-reveal:nth-child(4) { animation-delay: 2.8s; }

@keyframes lumo-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Separator reveal */
.lumo-sep-reveal {
    opacity: 0;
    animation: lumo-fade-in 0.4s ease forwards;
    animation-delay: 2.0s;
}

@keyframes lumo-fade-in {
    to { opacity: 1; }
}

/* No blinking cursor on the static "BONJOUR," — only the type cursor */
.lumo-greeting-name.blink-cursor::after {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   Lumon — Forms, Tables, Components
   ═══════════════════════════════════════════════════════════ */

.lumo-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--crt-bg);
}

/* ── Page header ── */
.lumo-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(26,20,16,0.08);
}
.lumo-page-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: var(--crt-primary);
    text-transform: uppercase;
}
.lumo-page-user {
    font-family: 'VT323', monospace;
    font-size: 0.8rem;
    color: var(--crt-text-dim);
}
.lumo-page-user a {
    color: var(--crt-text-dim);
    text-decoration: none;
    margin-left: 12px;
    font-size: 0.7rem;
}
.lumo-page-user a:hover { color: var(--crt-primary); }

/* ── Page body ── */
.lumo-page-body {
    flex: 1;
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* ── Back link ── */
.lumo-back {
    display: inline-block;
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    color: var(--crt-text-dim);
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.2s;
}
.lumo-back:hover { color: var(--crt-primary); }
.lumo-back::before { content: '← '; }

/* ── Input ── */
.lumo-input-wrap {
    margin-bottom: 16px;
}
.lumo-input-label {
    display: block;
    font-family: 'VT323', monospace;
    font-size: 0.75rem;
    color: var(--crt-text-dim);
    margin-bottom: 3px;
}
.lumo-input {
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 2px solid rgba(26,20,16,0.12);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.lumo-input:focus {
    border-color: var(--crt-primary);
}

/* ── Big Code Input (join page) ── */
.lumo-input-code {
    width: 100%;
    padding: 16px;
    background: transparent;
    border: 2px solid rgba(26,20,16,0.12);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: 12px;
    text-transform: uppercase;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.lumo-input-code:focus {
    border-color: var(--crt-primary);
}

/* ── Button (small/action) ── */
.lumo-action-btn {
    display: inline-block;
    padding: 8px 24px;
    background: transparent;
    border: 2px solid rgba(26,20,16,0.15);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
.lumo-action-btn:hover {
    border-color: var(--crt-primary);
    color: var(--crt-primary);
    background: rgba(255,117,31,0.04);
}

/* ── Session List ── */
.lumo-sessions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lumo-session-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border: 2px solid rgba(26,20,16,0.1);
    text-decoration: none;
    transition: all 0.2s;
}
.lumo-session-card:hover {
    border-color: var(--crt-primary);
    background: rgba(255,117,31,0.03);
}
.lumo-session-name {
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: var(--crt-text);
}
.lumo-session-meta {
    font-family: 'VT323', monospace;
    font-size: 0.75rem;
    color: var(--crt-text-dim);
    margin-top: 2px;
}
.lumo-session-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Status badge ── */
.lumo-status {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5rem;
    letter-spacing: 2px;
    padding: 4px 10px;
    border: 1px solid;
    text-transform: uppercase;
}
.lumo-status.active {
    color: #2d7a4a;
    border-color: rgba(45,122,74,0.3);
    background: rgba(45,122,74,0.05);
}
.lumo-status.paused {
    color: #b8860b;
    border-color: rgba(184,134,11,0.3);
    background: rgba(184,134,11,0.05);
}
.lumo-status.archived {
    color: var(--crt-text-dim);
    border-color: rgba(26,20,16,0.1);
}

/* ── Join Code Display ── */
.lumo-code-box {
    text-align: center;
    padding: 30px;
    border: 2px solid rgba(255,117,31,0.15);
    background: rgba(255,117,31,0.03);
    margin-bottom: 24px;
}
.lumo-code-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5rem;
    letter-spacing: 3px;
    color: var(--crt-text-dim);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.lumo-code-value {
    font-family: 'VT323', monospace;
    font-size: 2.8rem;
    letter-spacing: 14px;
    color: var(--crt-primary);
    user-select: all;
}
.lumo-code-hint {
    font-family: 'VT323', monospace;
    font-size: 0.7rem;
    color: var(--crt-text-dim);
    margin-top: 6px;
}

/* ── Participant list ── */
.lumo-participant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(26,20,16,0.06);
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
}
.lumo-participant:last-child { border-bottom: none; }
.lumo-participant-id {
    color: var(--crt-text-dim);
    font-size: 0.75rem;
    font-family: monospace;
}
.lumo-participant-remove {
    color: #c0392b;
    text-decoration: none;
    font-size: 0.7rem;
    opacity: 0.5;
}
.lumo-participant-remove:hover { opacity: 1; }

/* ── Challenge row (in session) ── */
.lumo-challenge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(26,20,16,0.06);
}
.lumo-challenge-row:last-child { border-bottom: none; }
.lumo-challenge-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lumo-challenge-theme {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.45rem;
    letter-spacing: 2px;
    padding: 3px 8px;
    border: 1px solid rgba(26,20,16,0.1);
    color: var(--crt-text-dim);
    text-transform: uppercase;
}
.lumo-challenge-name {
    font-family: 'VT323', monospace;
    font-size: 0.95rem;
    color: var(--crt-text);
}
.lumo-challenge-pts {
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    color: var(--crt-primary);
}

/* ── Section header ── */
.lumo-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 3px;
    color: var(--crt-text-dim);
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(26,20,16,0.08);
}
.lumo-section {
    margin-bottom: 24px;
}

/* ── Messages / alerts ── */
.lumo-msg {
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    padding: 10px 16px;
    margin-bottom: 16px;
    border-left: 3px solid;
}
.lumo-msg.success {
    border-color: #2d7a4a;
    background: rgba(45,122,74,0.05);
    color: #1a5a35;
}
.lumo-msg.error {
    border-color: #c0392b;
    background: rgba(192,57,43,0.05);
    color: #8a2e22;
}
.lumo-msg.info {
    border-color: var(--crt-primary);
    background: rgba(255,117,31,0.04);
    color: var(--crt-text-dim);
}

/* ── Page footer ── */
.lumo-page-footer {
    text-align: center;
    padding: 16px 20px;
    font-family: 'VT323', monospace;
    font-size: 0.6rem;
    color: var(--crt-text-dim);
    opacity: 0.3;
    letter-spacing: 2px;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   Folder — Terminal directory style (épuré)
   ═══════════════════════════════════════════════════════════ */

.fold-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--crt-bg);
}

.fold-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(26,20,16,0.06);
    font-family: 'VT323', monospace;
    font-size: 0.8rem;
    color: var(--crt-text-dim);
}
.fold-header a {
    color: var(--crt-text-dim);
    text-decoration: none;
    margin-left: 14px;
}
.fold-header a:hover { color: var(--crt-primary); }

.fold-body {
    flex: 1;
    padding: 32px 24px;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}

/* ── Path line ── */
.fold-path {
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    color: var(--crt-text-dim);
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(26,20,16,0.06);
}

/* ── Folder entries ── */
.fold-list {
    display: flex;
    flex-direction: column;
}
.fold-entry {
    display: flex;
    align-items: center;
    padding: 8px 0;
    text-decoration: none;
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: var(--crt-text);
    border-bottom: 1px solid rgba(26,20,16,0.04);
    transition: color 0.15s;
}
.fold-entry:hover {
    color: var(--crt-primary);
}
.fold-entry-icon {
    color: var(--crt-text-dim);
    margin-right: 10px;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.fold-entry-name {
    flex: 1;
}
.fold-entry-meta {
    font-size: 0.75rem;
    color: var(--crt-text-dim);
    margin-left: 12px;
}
.fold-entry-status {
    font-size: 0.65rem;
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid;
    letter-spacing: 1px;
}
.fold-entry-status.active {
    color: #2d7a4a;
    border-color: rgba(45,122,74,0.2);
}
.fold-entry-status.paused {
    color: #b8860b;
    border-color: rgba(184,134,11,0.2);
}
.fold-entry-status.archived {
    color: var(--crt-text-dim);
    border-color: rgba(26,20,16,0.08);
}

/* ── Actions bar ── */
.fold-actions {
    display: flex;
    gap: 8px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(26,20,16,0.06);
}
.fold-btn {
    font-family: 'VT323', monospace;
    font-size: 0.8rem;
    color: var(--crt-text-dim);
    text-decoration: none;
    padding: 6px 16px;
    border: 1px solid rgba(26,20,16,0.1);
    transition: all 0.15s;
}
.fold-btn:hover {
    color: var(--crt-primary);
    border-color: var(--crt-primary);
}

/* ── Empty state ── */
.fold-empty {
    text-align: center;
    padding: 60px 0;
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    color: var(--crt-text-dim);
}

/* ── Back link ── */
.fold-back {
    font-family: 'VT323', monospace;
    font-size: 0.8rem;
    color: var(--crt-text-dim);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 16px;
}
.fold-back:hover { color: var(--crt-primary); }

/* ── Form (épuré) ── */
.fold-form {
    max-width: 400px;
}
.fold-label {
    display: block;
    font-family: 'VT323', monospace;
    font-size: 0.8rem;
    color: var(--crt-text-dim);
    margin-bottom: 3px;
}
.fold-input {
    width: 100%;
    padding: 8px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(26,20,16,0.15);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
}
.fold-input:focus {
    border-bottom-color: var(--crt-primary);
}

/* ── Big code input ── */
.fold-input-code {
    width: 100%;
    padding: 12px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(26,20,16,0.15);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: 16px;
    text-transform: uppercase;
    outline: none;
    box-sizing: border-box;
}
.fold-input-code:focus {
    border-bottom-color: var(--crt-primary);
}

/* ── Code display ── */
.fold-code-box {
    padding: 24px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(26,20,16,0.06);
    text-align: center;
}
.fold-code-label {
    font-family: 'VT323', monospace;
    font-size: 0.75rem;
    color: var(--crt-text-dim);
    margin-bottom: 3px;
}
.fold-code-value {
    font-family: 'VT323', monospace;
    font-size: 2.5rem;
    letter-spacing: 14px;
    color: var(--crt-primary);
}
.fold-code-hint {
    font-family: 'VT323', monospace;
    font-size: 0.7rem;
    color: var(--crt-text-dim);
    margin-top: 4px;
}

/* ── Session detail elements ── */
.fold-section {
    margin-bottom: 24px;
}
.fold-section-title {
    font-family: 'VT323', monospace;
    font-size: 0.8rem;
    color: var(--crt-text-dim);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(26,20,16,0.06);
}

.fold-participant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(26,20,16,0.04);
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
}
.fold-participant:last-child { border-bottom: none; }
.fold-participant-id {
    color: var(--crt-text-dim);
    font-size: 0.75rem;
}
.fold-participant-remove {
    color: #c0392b;
    text-decoration: none;
    font-size: 0.7rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'VT323', monospace;
    opacity: 0.4;
}
.fold-participant-remove:hover { opacity: 1; }

.fold-challenge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(26,20,16,0.04);
    text-decoration: none;
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
}
.fold-challenge:hover { color: var(--crt-primary); }
.fold-challenge:last-child { border-bottom: none; }
.fold-challenge-theme {
    font-size: 0.7rem;
    color: var(--crt-text-dim);
    margin-right: 8px;
}
.fold-challenge-name {
    color: var(--crt-text);
    flex: 1;
}
.fold-challenge:hover .fold-challenge-name { color: var(--crt-primary); }
.fold-challenge-pts {
    color: var(--crt-primary);
    font-size: 0.8rem;
    margin-left: 8px;
}

/* ── Messages ── */
.fold-msg {
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    padding: 8px 14px;
    margin-bottom: 16px;
    border-left: 2px solid;
}
.fold-msg.success {
    border-color: #2d7a4a;
    color: #1a5a35;
    background: rgba(45,122,74,0.04);
}
.fold-msg.error {
    border-color: #c0392b;
    color: #8a2e22;
    background: rgba(192,57,43,0.04);
}
.fold-msg.info {
    border-color: var(--crt-primary);
    color: var(--crt-text-dim);
}

/* ── Footer ── */
.fold-footer {
    text-align: center;
    padding: 16px 20px;
    font-family: 'VT323', monospace;
    font-size: 0.55rem;
    color: var(--crt-text-dim);
    opacity: 0.3;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* ── Cylinder — scrollable session list (big & epure) ── */

.cyl-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--crt-bg);
    overflow: hidden;
}

.cyl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid rgba(26,20,16,0.08);
    font-family: 'VT323', monospace;
    font-size: 1.15rem;
    color: var(--crt-text-dim);
    flex-shrink: 0;
}
.cyl-header a {
    color: var(--crt-text-dim);
    text-decoration: none;
    margin-left: 16px;
    font-size: 1rem;
}
.cyl-header a:hover { color: var(--crt-primary); }

.cyl-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.cyl-band {
    display: flex;
    align-items: center;
    padding: 20px 28px;
    text-decoration: none;
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    color: var(--crt-text);
    border-bottom: 1px solid rgba(26,20,16,0.06);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.cyl-band:hover {
    background: rgba(255,117,31,0.04);
    color: var(--crt-primary);
}
.cyl-band-icon {
    margin-right: 16px;
    font-size: 1rem;
    color: var(--crt-text-dim);
}
.cyl-band-name { flex: 1; }
.cyl-band-date {
    font-size: 0.85rem;
    color: var(--crt-text-dim);
    margin-right: 16px;
}
.cyl-band-status {
    font-size: 0.7rem;
    letter-spacing: 2px;
    padding: 4px 12px;
    border: 1px solid;
}
.cyl-band-status.active {
    color: #2d7a4a;
    border-color: rgba(45,122,74,0.25);
}
.cyl-band-status.paused {
    color: #b8860b;
    border-color: rgba(184,134,11,0.25);
}
.cyl-band-status.archived {
    color: var(--crt-text-dim);
    border-color: rgba(26,20,16,0.08);
}

.cyl-actions {
    padding: 16px 28px;
    border-top: 1px solid rgba(26,20,16,0.06);
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    background: var(--crt-bg);
}
.cyl-btn {
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    color: var(--crt-text-dim);
    text-decoration: none;
    padding: 8px 20px;
    border: 1px solid rgba(26,20,16,0.12);
    transition: all 0.15s;
}
.cyl-btn:hover {
    color: var(--crt-primary);
    border-color: var(--crt-primary);
}

.cyl-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: var(--crt-text-dim);
}

.cyl-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 28px;
    font-family: 'VT323', monospace;
}
.cyl-path {
    font-size: 0.9rem;
    color: var(--crt-text-dim);
    margin-bottom: 24px;
}
.cyl-form { width: 100%; max-width: 440px; }
.cyl-label {
    font-size: 0.85rem;
    color: var(--crt-text-dim);
    margin-bottom: 3px;
    display: block;
}
.cyl-input {
    width: 100%;
    padding: 10px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(26,20,16,0.15);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    outline: none;
    box-sizing: border-box;
}
.cyl-input:focus { border-bottom-color: var(--crt-primary); }

.cyl-input-code {
    width: 100%;
    padding: 14px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(26,20,16,0.15);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 3rem;
    text-align: center;
    letter-spacing: 18px;
    text-transform: uppercase;
    outline: none;
    box-sizing: border-box;
}
.cyl-input-code:focus { border-bottom-color: var(--crt-primary); }

.cyl-back {
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    color: var(--crt-text-dim);
    text-decoration: none;
    margin-bottom: 20px;
    display: inline-block;
}
.cyl-back:hover { color: var(--crt-primary); }

.cyl-msg {
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    padding: 10px 16px;
    margin-bottom: 16px;
    border-left: 2px solid;
}
.cyl-msg.success { border-color: #2d7a4a; color: #1a5a35; background: rgba(45,122,74,0.04); }
.cyl-msg.error   { border-color: #c0392b; color: #8a2e22; background: rgba(192,57,43,0.04); }
.cyl-msg.info    { border-color: var(--crt-primary); color: var(--crt-text-dim); }

.cyl-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
}
.cyl-detail-body .fold-section-title { font-size: 0.85rem; }
.cyl-detail-body .fold-participant { font-size: 0.95rem; padding: 8px 0; }
.cyl-detail-body .fold-challenge { font-size: 1rem; padding: 10px 0; }
.cyl-detail-body .fold-code-value { font-size: 3rem; }
.cyl-detail-body .fold-code-label { font-size: 0.85rem; }

.cyl-footer {
    text-align: center;
    padding: 14px 20px;
    font-family: 'VT323', monospace;
    font-size: 0.75rem;
    color: var(--crt-text-dim);
    opacity: 0.3;
    letter-spacing: 2px;
    text-transform: uppercase;
    flex-shrink: 0;
}


/* ── Fresh — minimal terminal list ── */

.fresh-page {
    min-height: 100vh;
    background: var(--crt-bg);
    display: flex;
    flex-direction: column;
    font-family: 'VT323', monospace;
    color: var(--crt-text);
}

.fresh-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px 12px;
    font-size: 0.85rem;
    color: var(--crt-text-dim);
}
.fresh-top a {
    color: var(--crt-text-dim);
    text-decoration: none;
    margin-left: 14px;
}
.fresh-top a:hover { color: var(--crt-primary); }
.fresh-path {
    font-size: 0.9rem;
    color: var(--crt-text-dim);
    padding: 0 28px 8px;
}

.fresh-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.fresh-item {
    display: flex;
    align-items: center;
    padding: 14px 28px;
    text-decoration: none;
    color: var(--crt-text);
    font-size: 1rem;
    border-bottom: 1px solid rgba(26,20,16,0.04);
}
.fresh-item:hover {
    background: rgba(255,117,31,0.04);
    color: var(--crt-primary);
}
.fresh-item-icon { margin-right: 12px; color: var(--crt-text-dim); font-size: 0.9rem; }
.fresh-item-name { flex: 1; }
.fresh-item-date { font-size: 0.75rem; color: var(--crt-text-dim); margin-right: 12px; }
.fresh-item-status { font-size: 0.65rem; letter-spacing: 1px; padding: 3px 10px; border: 1px solid rgba(26,20,16,0.1); }
.fresh-item-status.active { color: #2d7a4a; border-color: rgba(45,122,74,0.2); }
.fresh-item-status.paused { color: #b8860b; border-color: rgba(184,134,11,0.2); }
.fresh-item-status.archived { color: var(--crt-text-dim); border-color: rgba(26,20,16,0.06); }

.fresh-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--crt-text-dim);
}

.fresh-actions {
    padding: 14px 28px 24px;
    display: flex;
    gap: 8px;
    font-size: 0.85rem;
}
.fresh-btn {
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    color: var(--crt-text-dim);
    text-decoration: none;
    padding: 6px 16px;
    border: 1px solid rgba(26,20,16,0.1);
}
.fresh-btn:hover {
    color: var(--crt-primary);
    border-color: var(--crt-primary);
}

.fresh-form-page {
    min-height: 100vh;
    background: var(--crt-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    font-family: 'VT323', monospace;
}
.fresh-form-top {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    font-size: 0.85rem;
    color: var(--crt-text-dim);
    background: var(--crt-bg);
}
.fresh-form-top a {
    color: var(--crt-text-dim);
    text-decoration: none;
    margin-left: 14px;
}
.fresh-form-top a:hover { color: var(--crt-primary); }
.fresh-form-path {
    font-size: 0.85rem;
    color: var(--crt-text-dim);
    margin-bottom: 20px;
}
.fresh-form { width: 100%; max-width: 400px; }
.fresh-label {
    display: block;
    font-size: 0.8rem;
    color: var(--crt-text-dim);
    margin-bottom: 3px;
    text-align: left;
}
.fresh-input {
    width: 100%;
    padding: 10px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(26,20,16,0.15);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    outline: none;
    box-sizing: border-box;
}
.fresh-input:focus { border-bottom-color: var(--crt-primary); }

.fresh-input-code {
    width: 100%;
    padding: 14px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(26,20,16,0.15);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 2.8rem;
    text-align: center;
    letter-spacing: 16px;
    text-transform: uppercase;
    outline: none;
    box-sizing: border-box;
}
.fresh-input-code:focus { border-bottom-color: var(--crt-primary); }

.fresh-msg {
    font-size: 0.85rem;
    padding: 8px 14px;
    margin-bottom: 14px;
    border-left: 2px solid;
}
.fresh-msg.success { border-color: #2d7a4a; color: #1a5a35; }
.fresh-msg.error   { border-color: #c0392b; color: #8a2e22; }
.fresh-msg.info    { border-color: var(--crt-primary); color: var(--crt-text-dim); }

.fresh-back {
    font-size: 0.8rem;
    color: var(--crt-text-dim);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 20px;
}
.fresh-back:hover { color: var(--crt-primary); }

.fresh-detail {
    min-height: 100vh;
    background: var(--crt-bg);
    display: flex;
    flex-direction: column;
    font-family: 'VT323', monospace;
}
.fresh-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    max-width: 660px;
    margin: 0 auto;
    width: 100%;
}

.fresh-code-box {
    padding: 24px 0 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(26,20,16,0.06);
    text-align: center;
}
.fresh-code-label { font-size: 0.8rem; color: var(--crt-text-dim); }
.fresh-code-value {
    font-size: 2.8rem;
    letter-spacing: 14px;
    color: var(--crt-primary);
    margin: 4px 0;
}
.fresh-code-hint { font-size: 0.7rem; color: var(--crt-text-dim); }

.fresh-section { margin-bottom: 24px; }
.fresh-section-title {
    font-size: 0.8rem;
    color: var(--crt-text-dim);
    margin-bottom: 3px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(26,20,16,0.06);
}

.fresh-participant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(26,20,16,0.04);
    font-size: 0.85rem;
}
.fresh-participant:last-child { border-bottom: none; }
.fresh-participant-id { color: var(--crt-text-dim); font-size: 0.75rem; }
.fresh-participant-remove {
    color: #c0392b;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'VT323', monospace;
    font-size: 0.7rem;
    opacity: 0.4;
}
.fresh-participant-remove:hover { opacity: 1; }

.fresh-challenge {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(26,20,16,0.04);
    text-decoration: none;
    font-size: 0.9rem;
}
.fresh-challenge:hover { color: var(--crt-primary); }
.fresh-challenge:last-child { border-bottom: none; }
.fresh-challenge-theme { font-size: 0.7rem; color: var(--crt-text-dim); margin-right: 8px; }
.fresh-challenge-name { flex: 1; color: var(--crt-text); }
.fresh-challenge:hover .fresh-challenge-name { color: var(--crt-primary); }
.fresh-challenge-pts { color: var(--crt-primary); font-size: 0.8rem; margin-left: 8px; }


/* ── Session list inside Lumon home layout ── */

.lumo-session-scroll {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-top: 1px solid rgba(26,20,16,0.06);
    border-bottom: 1px solid rgba(26,20,16,0.06);
    padding: 4px 0;
}

.lumo-session-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    text-decoration: none;
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: var(--crt-text);
    border-bottom: 1px solid rgba(26,20,16,0.04);
    transition: background 0.1s, color 0.1s;
}
.lumo-session-row:last-child { border-bottom: none; }
.lumo-session-row:hover {
    background: rgba(255,117,31,0.04);
    color: var(--crt-primary);
}
.lumo-session-row-icon { margin-right: 10px; color: var(--crt-text-dim); font-size: 0.8rem; }
.lumo-session-row-name { flex: 1; }
.lumo-session-row-date { font-size: 0.7rem; color: var(--crt-text-dim); margin-right: 8px; }
.lumo-session-row-status {
    font-size: 0.55rem;
    letter-spacing: 1px;
    padding: 2px 8px;
    border: 1px solid rgba(26,20,16,0.1);
}
.lumo-session-row-status.active { color: #2d7a4a; border-color: rgba(45,122,74,0.2); }
.lumo-session-row-status.paused { color: #b8860b; border-color: rgba(184,134,11,0.2); }
.lumo-session-row-status.archived { color: var(--crt-text-dim); border-color: rgba(26,20,16,0.06); }

.lumo-session-empty {
    text-align: center;
    padding: 30px 0;
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    color: var(--crt-text-dim);
}


/* ── Lumon layout for session list (top→bottom, not centered) ── */
.lumo-main-list {
    justify-content: flex-start;
    padding-top: 24px;
    padding-bottom: 16px;
}
.lumo-main-list .lumo-session-scroll {
    margin-top: 8px;
    margin-bottom: 8px;
}


/* ── Tighter session list ── */
.lumo-main-list-sessions .lumo-session-scroll {
    border-top: 1px solid rgba(26,20,16,0.06);
    border-bottom: 1px solid rgba(26,20,16,0.06);
    flex: 1;
    overflow-y: auto;
    width: 100%;
    max-width: 700px;
    margin: 6px auto;
    padding: 2px 0;
}
.lumo-main-list-sessions .lumo-session-row {
    padding: 7px 12px;
    font-size: 0.95rem;
}
.lumo-main-list-sessions .lumo-buttons {
    margin-top: 10px;
    gap: 8px;
}
.lumo-main-list-sessions .lumo-btn {
    padding: 10px 0;
    font-size: 1rem;
}
.lumo-main-list-sessions .lumo-greeting {
    font-size: 1.4rem;
    margin-bottom: 3px;
}


/* ── Session list dedicated layout (big, fits screen) ── */

.sess-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--crt-bg);
    overflow: hidden;
    font-family: 'VT323', monospace;
}

.sess-head {
    flex-shrink: 0;
    text-align: center;
    padding: 18px 20px 0;
}
.sess-head h1 {
    font-family: 'VT323', monospace;
    font-size: 2.4rem;
    color: var(--crt-text);
    margin: 0;
    font-weight: normal;
}

.sess-spacer-top {
    flex-shrink: 0;
    height: 10px;
}

.sess-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.sess-row {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 6px;
    text-decoration: none;
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    color: var(--crt-text);
    border: 1px solid rgba(26,20,16,0.1);
    transition: border-color 0.15s, background 0.1s, color 0.1s;
}
.sess-row:hover {
    border-color: var(--crt-primary);
    background: rgba(255,117,31,0.03);
    color: var(--crt-primary);
}
.sess-row-icon { margin-right: 14px; color: var(--crt-text-dim); font-size: 1rem; flex-shrink: 0; }
.sess-row-name { flex: 1; }
.sess-row-date { font-size: 0.85rem; color: var(--crt-text-dim); margin-right: 14px; flex-shrink: 0; }
.sess-row-status { font-size: 0.65rem; letter-spacing: 1px; padding: 3px 12px; border: 1px solid rgba(26,20,16,0.1); flex-shrink: 0; }
.sess-row-status.active { color: #2d7a4a; border-color: rgba(45,122,74,0.2); }
.sess-row-status.paused { color: #b8860b; border-color: rgba(184,134,11,0.2); }
.sess-row-status.archived { color: var(--crt-text-dim); border-color: rgba(26,20,16,0.06); }

.sess-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: var(--crt-text-dim);
}

.sess-spacer-bottom {
    flex-shrink: 0;
    height: 10px;
}

.sess-foot {
    flex-shrink: 0;
    display: flex;
    gap: 14px;
    justify-content: center;
    padding: 0 20px 20px;
}
.sess-btn {
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    color: var(--crt-text-dim);
    text-decoration: none;
    padding: 14px 42px;
    border: 2px solid rgba(26,20,16,0.12);
    transition: all 0.15s;
}
.sess-btn:hover {
    color: var(--crt-primary);
    border-color: var(--crt-primary);
}

.sess-msg {
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    padding: 6px 14px;
    margin: 0 auto 8px;
    border-left: 2px solid;
    max-width: 900px;
    width: 100%;
    box-sizing: border-box;
}
.sess-msg.success { border-color: #2d7a4a; color: #1a5a35; }
.sess-msg.error { border-color: #c0392b; color: #8a2e22; }
.sess-msg.info { border-color: var(--crt-primary); color: var(--crt-text-dim); }



/* ── Session form pages (create, join, detail, play) ── */

.sess-form-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--crt-bg);
    overflow: hidden;
    font-family: 'VT323', monospace;
}

.sess-form-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;  /* centering that doesn't clip the top on overflow */
    overflow-y: auto;
    padding: 0 28px;
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: center;
}

/* Centering that degrades to scrollable top-align when content overflows */
.sess-form-body::before,
.sess-form-body::after {
    content: "";
    margin-top: auto;
    margin-bottom: auto;
    flex-shrink: 0;
}
.sess-form-body h1 {
    font-family: 'VT323', monospace;
    font-size: 2.4rem;
    color: var(--crt-text);
    margin: 0;
    font-weight: normal;
}

.sess-form {
    width: 100%;
    max-width: 500px;
    margin-top: 20px;
}
.sess-form-label {
    display: block;
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: var(--crt-text-dim);
    margin-bottom: 6px;
    text-align: left;
}
.sess-form-input {
    width: 100%;
    padding: 12px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(26,20,16,0.15);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    outline: none;
    box-sizing: border-box;
}
.sess-form-input:focus { border-bottom-color: var(--crt-primary); }

.sess-form-input-code {
    width: 100%;
    padding: 16px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(26,20,16,0.15);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 3.5rem;
    text-align: center;
    letter-spacing: 20px;
    text-transform: uppercase;
    outline: none;
    box-sizing: border-box;
}
.sess-form-input-code:focus { border-bottom-color: var(--crt-primary); }

.sess-form-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
}
.sess-form-btn {
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    color: var(--crt-text-dim);
    text-decoration: none;
    padding: 12px 36px;
    border: 2px solid rgba(26,20,16,0.12);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.sess-form-btn:hover {
    color: var(--crt-primary);
    border-color: var(--crt-primary);
}

.sess-back {
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: var(--crt-text-dim);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 16px;
}
.sess-back:hover { color: var(--crt-primary); }

/* ── Session detail page ── */

.sess-detail-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--crt-bg);
    overflow: hidden;
    font-family: 'VT323', monospace;
}

.sess-detail-head {
    flex-shrink: 0;
    text-align: center;
    padding: 16px 20px 4px;
}
.sess-detail-head h1 {
    font-family: 'VT323', monospace;
    font-size: 2.2rem;
    color: var(--crt-text);
    margin: 0;
    font-weight: normal;
}

.sess-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 20px 0;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.sess-detail-foot {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 10px 20px 18px;
    border-top: 1px solid rgba(26,20,16,0.06);
}

.sess-code-box {
    text-align: center;
    padding: 16px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(26,20,16,0.06);
}
.sess-code-label { font-size: 0.9rem; color: var(--crt-text-dim); margin-bottom: 2px; }
.sess-code-value {
    font-size: 3rem;
    letter-spacing: 14px;
    color: var(--crt-primary);
    margin: 4px 0;
}
.sess-code-hint { font-size: 0.75rem; color: var(--crt-text-dim); }

.sess-section { margin-bottom: 20px; }
.sess-section-title {
    font-size: 1rem;
    color: var(--crt-text-dim);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(26,20,16,0.06);
}

.sess-participant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(26,20,16,0.04);
    font-size: 0.9rem;
}
.sess-participant:last-child { border-bottom: none; }
.sess-participant-id { color: var(--crt-text-dim); font-size: 0.8rem; font-family: monospace; }
.sess-participant-remove {
    color: #c0392b; background: none; border: none; cursor: pointer;
    font-family: 'VT323', monospace; font-size: 0.8rem; opacity: 0.4;
}
.sess-participant-remove:hover { opacity: 1; }

.sess-challenge {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(26,20,16,0.04);
    text-decoration: none;
    font-size: 1rem;
}
.sess-challenge:hover { color: var(--crt-primary); }
.sess-challenge:last-child { border-bottom: none; }
.sess-challenge-theme { font-size: 0.75rem; color: var(--crt-text-dim); margin-right: 10px; }
.sess-challenge-name { flex: 1; color: var(--crt-text); }
.sess-challenge:hover .sess-challenge-name { color: var(--crt-primary); }
.sess-challenge-pts { color: var(--crt-primary); font-size: 0.9rem; margin-left: 8px; }

/* ── Challenge play page ── */

.sess-play-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--crt-bg);
    overflow: hidden;
    font-family: 'VT323', monospace;
}

.sess-play-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.sess-play-foot {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 10px 20px 18px;
    border-top: 1px solid rgba(26,20,16,0.06);
}

.sess-msg {
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    padding: 8px 14px;
    margin-bottom: 10px;
    border-left: 2px solid;
    box-sizing: border-box;
}
.sess-msg.success { border-color: #2d7a4a; color: #1a5a35; }
.sess-msg.error { border-color: #c0392b; color: #8a2e22; }
.sess-msg.info { border-color: var(--crt-primary); color: var(--crt-text-dim); }


/* ── Score bar graph ── */
.sess-graph-bar {
    flex: 1;
    height: 16px;
    background: rgba(255,117,31,0.06);
    border: 1px solid rgba(255,117,31,0.1);
    position: relative;
    overflow: hidden;
}
.sess-graph-fill {
    height: 100%;
    background: var(--crt-primary);
    opacity: 0.6;
    min-width: 4px;
}


/* ── Danger button ── */
.sess-btn-danger {
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    color: #c0392b;
    text-decoration: none;
    padding: 8px 24px;
    border: 2px solid #c0392b;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.sess-btn-danger:hover {
    background: #c0392b;
    color: var(--crt-bg);
}


/* ── Challenge form fields ── */
.sess-form-body input[type="text"],
.sess-form-body input[type="number"],
.sess-form-body select,
.sess-form-body textarea {
    width: 100%;
    padding: 8px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(26,20,16,0.15);
    color: var(--crt-text);
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    outline: none;
    box-sizing: border-box;
}
.sess-form-body input:focus,
.sess-form-body select:focus,
.sess-form-body textarea:focus {
    border-bottom-color: var(--crt-primary);
}
.sess-form-body textarea {
    min-height: 80px;
    border: 1px solid rgba(26,20,16,0.12);
    padding: 8px 10px;
}
.sess-form-body select {
    border: 1px solid rgba(26,20,16,0.12);
    padding: 8px 10px;
}


/* ── Activity builders (QCM / link) ── */
#qcm-builder, #link-builder {
    text-align: left;
}
.qcm-question, .link-col {
    border: 1px solid rgba(26,20,16,0.1);
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.25);
}
.qcm-question input[type="text"],
.link-col input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}


/* ── Challenge detail: wide two-column layout ── */
.chal-layout {
    justify-content: flex-start !important;
    max-width: 1100px;
    width: 100%;
    text-align: left;
}
.chal-layout::before,
.chal-layout::after {
    display: none;
}
.chal-grid {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 16px;
}
.chal-info {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    text-align: left;
}
.chal-preview {
    flex: 2;
    min-width: 320px;
    text-align: center;
}
.chal-section {
    margin-bottom: 14px;
    text-align: left;
}
.chal-section .sess-section-title {
    font-size: 1rem;
}


/* ── Tag checkboxes ── */
#id_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
    border: none;
}
#id_tags label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid rgba(255,117,31,0.3);
    color: var(--crt-primary);
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    cursor: pointer;
}
#id_tags input {
    accent-color: var(--crt-primary);
    width: 15px;
    height: 15px;
}