:root {
    --bg: #0a0e14;
    --panel-bg: rgba(12, 16, 24, 0.9);
    --border: #2f3a4a;
    --text: #c8d0dc;
    --accent: #3a8cff;
    --warning: #e6a700;
    --danger: #e63030;
    --metal: linear-gradient(180deg, #4a505c 0%, #2a3038 100%);
}

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

body {
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    background: var(--bg);
    overflow: hidden;
    height: 100vh; width: 100vw;
    user-select: none;
    color: var(--text);
}

/* 3D 容器 */
#canvas-container { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; }

/* 顶部状态栏 */
#top-bar {
    position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
    z-index: 20;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 20px;
    display: flex; align-items: center; gap: 16px;
    font-size: 13px; letter-spacing: 1px;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.alert-indicator {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #5a6a7a;
    background: #1a2a3a;
}
.alert-indicator.safe { background: #00cc66; border-color: #00ff88; box-shadow: 0 0 10px #00ff88; }
.alert-indicator.warning { background: #e6a700; border-color: #ffcc00; box-shadow: 0 0 10px #ffcc00; }
.alert-indicator.danger { background: #e63030; border-color: #ff4444; box-shadow: 0 0 12px #ff4444; animation: blink 0.5s infinite; }
.alert-indicator.offline { background: #333; }
.separator { width: 1px; height: 16px; background: var(--border); }
.hint { font-size: 10px; opacity: 0.6; margin-left: auto; }

@keyframes blink { 50% { opacity: 0.3; } }

/* 警报灯 */
#alarm-light { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:10; }
#alarm-light.active { animation: alarm-flash 0.8s infinite; }
@keyframes alarm-flash { 50% { background: rgba(255,30,10,0.08); } }

/* 震动 */
#shake-overlay { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9; }
#shake-overlay.shaking { animation: shake 0.15s infinite; }
@keyframes shake { 25%{transform:translate(-4px,3px)} 50%{transform:translate(2px,-2px)} 75%{transform:translate(-3px,-1px)} }

/* 底部控制台 */
#console-panel {
    position: fixed;
    bottom: 16px; left: 50%; transform: translateX(-50%);
    z-index: 20;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 24px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}
.console-row {
    display: flex; align-items: center; gap: 24px;
    flex-wrap: wrap; justify-content: center;
}

/* 圆形仪表 */
.gauge-circle {
    width: 110px; height: 130px;
    display: flex; flex-direction: column; align-items: center;
    position: relative;
}
.gauge-circle svg {
    width: 80px; height: 80px;
    transform: rotate(-90deg);
}
.bg-ring {
    fill: none; stroke: #1f2833; stroke-width: 8;
}
.progress-ring {
    fill: none; stroke: var(--accent); stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 264; /* 2 * PI * 42 ≈ 263.89 */
    stroke-dashoffset: 264;
    transition: stroke-dashoffset 0.3s, stroke 0.5s;
}
.gauge-label {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: 1.5px; margin-top: 4px; color: #8899aa;
}
.gauge-value {
    font-size: 14px; font-weight: bold;
    letter-spacing: 0.5px; margin-top: 2px;
}

/* 旋钮控制 */
.knob-control {
    display: flex; flex-direction: column; align-items: center;
    width: 100px;
}
.knob-control label {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: 1.5px; color: #8899aa; margin-bottom: 6px;
}
.knob-slider {
    -webkit-appearance: none;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #4a505c, #1e242c);
    border: 3px solid #5a6a7a;
    outline: none;
    cursor: pointer;
    position: relative;
}
.knob-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 8px; height: 30px;
    background: #c0d0e0;
    border-radius: 2px;
    transform: rotate(0deg);
    box-shadow: 0 0 6px #aaccff;
    margin-top: -15px;
}
.knob-value {
    font-size: 13px; font-weight: bold;
    letter-spacing: 0.5px; margin-top: 6px;
}

/* 按钮 */
.button-group {
    display: flex; flex-direction: column; gap: 8px;
}
.scram-button {
    background: #5a1a1a; color: #ffaaaa;
    border: 2px solid #aa3333; border-radius: 4px;
    padding: 10px 16px; font-weight: bold; font-size: 14px;
    letter-spacing: 1px; cursor: pointer;
    transition: 0.2s; text-transform: uppercase;
}
.scram-button:hover { background: #7a2222; box-shadow: 0 0 15px #ff444488; }
.reset-button {
    background: #1a2a3a; color: #aaccee;
    border: 2px solid #3a5a7a; border-radius: 4px;
    padding: 8px 16px; font-size: 12px; cursor: pointer;
    letter-spacing: 1px;
}
.reset-button:hover { background: #2a3a4a; }

/* 熔毁 */
#meltdown-overlay {
    position: fixed; top:0; left:0; width:100%; height:100%;
    z-index: 100; background: rgba(0,0,0,0.9);
    display: flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:0.5s;
}
#meltdown-overlay.active { opacity:1; pointer-events:all; }
#meltdown-text { text-align:center; color:#ff4422; }
#meltdown-text h1 { font-size:48px; text-shadow:0 0 40px #ff2200; }
#meltdown-reset-btn {
    margin-top:20px; padding:12px 30px; background:#441111; color:#ffccaa;
    border:2px solid #ff5533; border-radius:4px; cursor:pointer; font-weight:bold;
}