* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #0A0E17; color: #8A96A8; line-height: 1.7; font-size: 15px; font-weight: 300; }
::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: #0A0E17; } ::-webkit-scrollbar-thumb { background: #00D4FF; }

.scanline-overlay { position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 212, 255, 0.03) 2px, rgba(0, 212, 255, 0.03) 4px); pointer-events: none; z-index: 1000; }
.grid-bg { position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(26, 32, 48, 0.15) 79px, rgba(26, 32, 48, 0.15) 80px), repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(26, 32, 48, 0.15) 79px, rgba(26, 32, 48, 0.15) 80px); pointer-events: none; z-index: 0; }

.glitch-blocks { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.glitch-block { position: absolute; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 51, 102, 0.2) 2px, rgba(255, 51, 102, 0.2) 4px); }

.top-status { position: fixed; top: 0; left: 0; right: 0; height: 48px; background: rgba(10, 14, 23, 0.85); backdrop-filter: blur(8px); z-index: 100; display: flex; align-items: center; padding: 0 24px; gap: 16px; border-bottom: 1px solid #1E3A5F; }
.status-text { font-family: 'Share Tech Mono', monospace; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #00D4FF; white-space: nowrap; overflow: hidden; }
.progress-bar { flex: 1; height: 4px; background: #1A2030; border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: #00D4FF; transition: width 0.3s ease; }

.hud-content { position: relative; z-index: 2; max-width: 900px; margin: 72px auto 40px; padding: 0 24px; }

.panel { position: relative; background: rgba(10, 14, 23, 0.7); backdrop-filter: blur(4px); border: 1px solid #1E3A5F; padding: 32px; margin-bottom: 24px; opacity: 0; transform: translateX(-30px); transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s; }
.panel.visible { opacity: 1; transform: translateX(0); }
.panel:hover { animation: glitchHover 0.15s ease; }
@keyframes glitchHover { 0% { transform: translateX(0); text-shadow: none; } 50% { transform: translateX(2px); text-shadow: -3px 0 rgba(255, 51, 102, 0.3); } 100% { transform: translateX(0); text-shadow: none; } }

.panel-corners { position: absolute; inset: -2px; pointer-events: none; }
.corner { position: absolute; }
.corner.tl { top: -2px; left: -2px; }
.corner.tr { top: -2px; right: -2px; }
.corner.bl { bottom: -2px; left: -2px; }
.corner.br { bottom: -2px; right: -2px; }

.panel-row { display: flex; gap: 24px; }
.panel-row .panel { flex: 1; transform: translateX(-30px); }
.panel-row .panel:nth-child(2) { transform: translateX(30px); }
.panel-row .panel.visible { transform: translateX(0); }

.data-display { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 48px; color: #E0E8F0; margin-bottom: 8px; }
.data-display.glow { text-shadow: 0 0 20px rgba(0, 212, 255, 0.5); }
.system-header { font-family: 'Share Tech Mono', monospace; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #00D4FF; margin-bottom: 12px; }
.body-text { color: #8A96A8; margin-bottom: 12px; }
.corrupted-text { font-family: 'VT323', monospace; font-size: 18px; color: #FF3366; }

.recovery-arc { position: absolute; top: 16px; right: 16px; }
.arc-fill { transition: stroke-dashoffset 1.5s ease; }
.panel.visible .arc-fill { stroke-dashoffset: 25; }

.recovery-complete { font-family: 'VT323', monospace; font-size: 24px; color: #00FF88; min-height: 30px; }
.blink-cursor { display: inline-block; width: 4px; height: 14px; background: #00D4FF; animation: blink 1s step-end infinite; vertical-align: middle; margin-left: 2px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Palette: #1A2030 #1E3A5F #00D4FF #FF3366 #00FF88 #E0E8F0 */
@media (max-width: 768px) {
    .panel-row { flex-direction: column; }
    .data-display { font-size: 32px; }
}