body {
    font-family: 'Inter', sans-serif;
    background-color: #050911;
    color: #e2e8f0;
    overflow-x: hidden;
}
#topbar, .stage, .controls-row { user-select: none; -webkit-user-select: none; }
.mono {
    font-family: 'JetBrains Mono', monospace;
}
.blueprint-bg {
    background-image: 
        linear-gradient(to right, rgba(30, 58, 138, 0.13) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(30, 58, 138, 0.13) 1px, transparent 1px);
    background-size: 32px 32px;
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.4);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.8);
}
.glass-panel {
    background: rgba(9, 14, 26, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.22);
    box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.78), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}
.nav-pill {
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-pill.active-rocket {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(37, 99, 235, 0.5));
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}
.nav-pill.active-pump {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(234, 88, 12, 0.5));
    border-color: #fbbf24;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.35);
}
.nav-pill.active-gyro {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(5, 150, 105, 0.5));
    border-color: #34d399;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.35);
}
.btn-sub {
    transition: all 0.18s ease;
}
.btn-sub.active {
    background: rgba(56, 189, 248, 0.25);
    border-color: #38bdf8;
    color: #fff;
}
.stage-btn.active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(220, 38, 38, 0.45));
    border-color: #fbbf24;
    color: #fff;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
}
.part-item.active {
    background: rgba(56, 189, 248, 0.18);
    border-left: 3px solid #38bdf8;
    color: #fff;
}
#hover-tooltip {
    pointer-events: none;
    transition: opacity 0.12s ease;
}
input[type=range] {
    accent-color: #38bdf8;
}
/* ===================== LAYOUT SHELL ===================== */
:root { --dock-space: 76px; --top-space: 118px; --accent: #38bdf8; --accent-rgb: 56, 189, 248; }
body[data-ws="turbopump"] { --accent: #fbbf24; --accent-rgb: 251, 191, 36; }
body[data-ws="gyro"] { --accent: #34d399; --accent-rgb: 52, 211, 153; }

.topbar {
    background: linear-gradient(to bottom, rgba(6, 9, 15, 0.92), rgba(6, 9, 15, 0.72));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

/* Segmented controls */
.seg {
    display: flex; gap: 2px; padding: 3px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
}
.seg :is(button, a) {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: 9px;
    font-size: 12.5px; font-weight: 600; color: #94a3b8;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.seg :is(button, a) svg { width: 16px; height: 16px; }
.seg :is(button, a):hover { color: #e2e8f0; background: rgba(148, 163, 184, 0.08); }
.seg :is(button, a).active {
    color: #fff;
    background: rgba(var(--accent-rgb), 0.18);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.55), 0 0 18px rgba(var(--accent-rgb), 0.18);
}
.seg :is(button, a).active svg { color: var(--accent); }
.seg-sm button { padding: 5px 11px; font-size: 12px; }

.icon-btn {
    display: flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 10px; border-radius: 10px;
    font-size: 12px; font-weight: 500; color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.6);
    transition: all 0.18s ease;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { color: #fff; border-color: rgba(148, 163, 184, 0.35); }
.icon-btn.active { color: #fff; border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.15); }

/* Contextual view toolbar */
.toolbar {
    display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px;
    padding: 5px;
    background: rgba(9, 14, 26, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
}
.tb-sep { width: 1px; height: 20px; background: rgba(148, 163, 184, 0.18); }
.tb-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px; border-radius: 9px;
    font-size: 12px; font-weight: 500; color: #cbd5e1;
    transition: all 0.18s ease;
}
.tb-btn:hover { color: #fff; background: rgba(148, 163, 184, 0.1); }
.tb-btn svg { width: 14px; height: 14px; }
.tb-fire { color: #fdba74; }
.tb-fire.active { color: #fff; background: rgba(249, 115, 22, 0.28); box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.6); }
.tb-toggle i {
    width: 26px; height: 15px; border-radius: 999px; position: relative;
    background: rgba(71, 85, 105, 0.8); transition: background 0.2s ease;
}
.tb-toggle i::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
    border-radius: 50%; background: #e2e8f0; transition: transform 0.2s ease;
}
.tb-toggle.active i { background: var(--accent); }
.tb-toggle.active i::after { transform: translateX(11px); }

/* Slide-in drawers */
.drawer { bottom: var(--dock-space); transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, bottom 0.3s ease; }
.drawer-left { transform: translateX(calc(-100% - 24px)); opacity: 0; pointer-events: none; }
.drawer-right { transform: translateX(calc(100% + 24px)); opacity: 0; pointer-events: none; }
.drawer.open { transform: none; opacity: 1; pointer-events: auto; }
.close-btn {
    width: 26px; height: 26px; border-radius: 8px; font-size: 18px; line-height: 1;
    color: #94a3b8; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.close-btn:hover { color: #fff; background: rgba(148, 163, 184, 0.15); }
.info-block { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 12px; padding: 10px 12px; }
.info-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }

/* Bottom dock */
.dock-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 6px 6px 6px 14px;
    background: rgba(9, 14, 26, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
}
.dock-chip { padding: 3px 8px; border-radius: 7px; background: rgba(148, 163, 184, 0.1); }
.dock-panel {
    max-height: 0; opacity: 0; transform: translateY(14px); overflow: hidden; pointer-events: none !important;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, transform 0.35s ease;
}
.dock-panel.open { max-height: 70vh; opacity: 1; transform: none; pointer-events: auto !important; overflow-y: auto; }
#dock.expanded #dock-chevron { transform: rotate(180deg); }
.gauge {
    display: flex; flex-direction: column; justify-content: space-between; gap: 2px;
    background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(30, 41, 59, 1);
    border-radius: 12px; padding: 8px 10px;
    font-family: 'JetBrains Mono', monospace; font-weight: 700;
}
.gauge > span, .gauge > div > span:first-child { font-size: 10px; font-weight: 400; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.gauge .sub { font-size: 10px; font-weight: 400; color: #94a3b8; }

#start-hint.hide { opacity: 0; }

/* Graphics menu */
.gfx-btn { border-color: rgba(var(--accent-rgb), 0.35); }
.gfx-btn .chev { width: 12px !important; height: 12px !important; opacity: 0.7; transition: transform 0.2s ease; }
.gfx-btn.active .chev { transform: rotate(180deg); }
#gfx-menu { width: 320px; max-width: calc(100vw - 24px); max-height: calc(100vh - 80px); overflow-y: auto; }
.gfx-preset {
    display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px;
    border: 1px solid transparent; transition: all 0.15s ease;
}
.gfx-preset:hover { background: rgba(148, 163, 184, 0.08); }
.gfx-preset.active { background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.45); }
.gfx-dot { flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px solid #64748b; position: relative; }
.gfx-preset.active .gfx-dot { border-color: var(--accent); }
.gfx-preset.active .gfx-dot::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--accent); }
.gfx-opt { display: flex; align-items: center; gap: 9px; padding: 5px 4px; font-size: 12px; color: #cbd5e1; cursor: pointer; }
.gfx-opt input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; }

/* Fluid legend */
.flow-row { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 6px 7px; border-radius: 9px; transition: all 0.15s ease; }
.flow-row:hover { background: rgba(148, 163, 184, 0.08); }
.flow-row.active { background: rgba(148, 163, 184, 0.14); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35); }
.flow-row.dim { opacity: 0.45; }
.flow-swatch {
    flex: none; width: 22px; height: 8px; margin-top: 5px; border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--sw) 55%, transparent), var(--sw), color-mix(in srgb, var(--sw) 55%, #fff));
    box-shadow: 0 0 8px var(--sw);
}
#flow-legend.collapsed .flow-body { display: none; }
#flow-legend.collapsed #flow-legend-chev { transform: rotate(-90deg); }
@media (max-width: 420px) { .icon-btn { padding: 0 8px; } }

/* Elements marked hidden stay hidden even when the page CSS loads after Tailwind */
.hidden:not([class*=":"]) { display: none !important; }

/* Dock tabs */
.dock-tab { padding: 5px 12px; border-radius: 9px; font-size: 12px; font-weight: 600; color: #94a3b8; border: 1px solid transparent; transition: all 0.15s ease; }
.dock-tab:hover { color: #fff; background: rgba(148, 163, 184, 0.1); }
.dock-tab.active { color: #fff; background: rgba(var(--accent-rgb), 0.16); border-color: rgba(var(--accent-rgb), 0.5); }

/* Engine lab */
.eng-prop { text-align: left; padding: 5px 9px; border-radius: 9px; border: 1px solid rgba(148, 163, 184, 0.16); background: rgba(15, 23, 42, 0.6); transition: all 0.15s ease; }
.eng-prop:hover { border-color: rgba(148, 163, 184, 0.4); }
.eng-prop.active { border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.14); }
.eng-alt { padding: 3px 8px; border-radius: 7px; font-size: 11px; color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.18); }
.eng-alt.active { color: #fff; border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.16); }

/* Control-loop bars (guidance) */
.cbar { position: relative; height: 8px; border-radius: 999px; background: rgba(51, 65, 85, 0.7); overflow: hidden; }
.cbar::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(226, 232, 240, 0.5); }
.cbar > i { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-radius: 999px; }
.drawer > .glass-panel { background: rgba(9, 14, 26, 0.9); }
@media (max-width: 640px) {
    .drawer { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; }
}
.seg a { text-decoration: none; }

/* Mischgerät signal path */
.mg-btn { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 8px; color: #e2e8f0; background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(148, 163, 184, 0.25); transition: all 0.15s ease; }
.mg-btn:hover { border-color: rgba(148, 163, 184, 0.55); }
.mg-btn.active { color: #fff; background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.6); }
.mg-block { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 76px; padding: 5px 8px; border-radius: 9px; text-align: left;
    background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(148, 163, 184, 0.18); border-top: 2px solid var(--c); transition: all 0.15s ease; }
.mg-block b { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--c); }
.mg-block span { font-size: 11px; font-weight: 600; color: #e2e8f0; line-height: 1.15; }
.mg-block i { font-style: normal; font-size: 9.5px; color: #94a3b8; }
.mg-block:hover { border-color: rgba(148, 163, 184, 0.45); border-top-color: var(--c); }
.mg-block.active { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.55); border-top-color: var(--c); }
.mg-arrow { align-self: center; color: #475569; font-size: 12px; }
.mg-back { font-size: 9.5px; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }

/* ===================== SCROLLING LAYOUT: 3D view on top, panels below ===================== */
.stage { position: relative; margin-top: 56px; height: calc(100vh - 56px - 64px); height: calc(100svh - 56px - 64px); min-height: 380px; overflow: hidden;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12); }
@media (max-width: 640px) { .stage { height: 62vh; height: 62svh; min-height: 300px; } }
.controls-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 8px 12px; min-height: 64px;
    background: linear-gradient(to bottom, rgba(9, 14, 26, 0.95), rgba(5, 9, 17, 0.6)); }
.controls-row .toolbar { box-shadow: none; }
.controls-summary { padding: 6px 10px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.12); background: rgba(15, 23, 42, 0.6); }
.below { max-width: 1240px; margin: 0 auto; padding: 6px 12px 0; display: flex; flex-direction: column; gap: 14px; }
.below .dock-panel { max-height: none; opacity: 1; transform: none; overflow: visible; pointer-events: auto !important; }
.below .glass-panel { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8); }
.info-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .info-grid { grid-template-columns: minmax(0, 1fr) 330px; } }
#dc-body h2#dc-title { font-size: 1.25rem; }
.tb-range { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 12px; font-weight: 500; }
.tb-range input { width: 130px; height: 6px; accent-color: var(--accent); cursor: pointer; }
@media (max-width: 420px) { .tb-range input { width: 96px; } }
.stage-hint, .details-cue { position: absolute; left: 50%; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 12; white-space: nowrap;
    font-size: 12px; padding: 7px 14px; border-radius: 999px; background: rgba(9, 14, 26, 0.88); border: 1px solid rgba(148, 163, 184, 0.25); color: #e2e8f0; }
.stage-hint { top: 50%; }
.stage-hint.show { opacity: 1; transform: translate(-50%, 0); }
.details-cue { bottom: 16px; border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.8); }
.details-cue.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }
.details-cue:hover { background: rgba(var(--accent-rgb), 0.18); }

/* Exploded-view labels */
#explode-labels { transition: opacity 0.2s ease; }
#explode-labels svg path { stroke: rgba(125, 211, 252, 0.55); stroke-width: 1; fill: none; }
#explode-labels svg circle { fill: #7dd3fc; }
.xl-label { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 3px 8px; border-radius: 8px; pointer-events: auto;
    background: rgba(9, 14, 26, 0.82); border: 1px solid rgba(125, 211, 252, 0.3); line-height: 1.15; white-space: nowrap; transition: border-color 0.15s ease, background 0.15s ease; }
.xl-label b { font-size: 11.5px; font-weight: 600; color: #f1f5f9; }
.xl-label i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: #fcd34d; opacity: 0.85; }
.xl-label:hover, .xl-label.active { border-color: #7dd3fc; background: rgba(14, 116, 144, 0.45); }
@media (max-width: 640px) { .xl-label i { display: none; } .xl-label b { font-size: 10.5px; } }
@media (min-width: 900px) { #inspector-drawer { align-self: start; position: sticky; top: 68px; } #dc-empty { min-height: 260px; } }
.mg-btn:disabled { opacity: 0.4; cursor: default; }

/* Phase 7 */
#explode-labels, #explode-labels svg { pointer-events: none !important; }
#explode-labels.off .xl-label { pointer-events: none; }
.page-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 17px; color: #f8fafc; letter-spacing: 0.01em; white-space: nowrap; }
@media (max-width: 420px) { .page-title { font-size: 14px; } }
.deeplink { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 600;
    color: #fde68a; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.4); transition: all 0.15s ease; }
.deeplink:hover { background: rgba(245, 158, 11, 0.2); color: #fff; }
.deeplink svg { width: 16px; height: 16px; flex: none; }