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

:root {
    --bg-color: #020617; 
    --text-color: #06b6d4; 
    --glow-color: rgba(6, 182, 212, 0.5);
    --error-color: #f43f5e; 
    --system-color: #8b5cf6; 
    --success-color: #10b981; 
    --font-family: 'Fira Code', monospace;
}

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

body, html {
    width: 100%; height: 100%;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: 16px;
    overflow: hidden;
}

.quantum-grid {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: 
        linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1; pointer-events: none;
}

.scan-line {
    position: fixed; top: 0; left: 0; width: 100vw; height: 2px;
    background: rgba(6, 182, 212, 0.15);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
    z-index: 2; pointer-events: none;
    animation: scan 8s linear infinite;
}
@keyframes scan { 0% { top: -10%; } 100% { top: 110%; } }

#neural-canvas { position: fixed; top: 0; left: 0; z-index: 3; pointer-events: none; opacity: 0.25; }

body::before {
    content: "TEEMO.OS.V9 // LAT: 34.05 // LNG: -118.24 // UPLINK: SECURE";
    position: fixed; top: 15px; right: 20px;
    font-size: 10px; color: rgba(6, 182, 212, 0.4);
    letter-spacing: 2px; z-index: 99; pointer-events: none;
}

body::after {
    content: ""; position: fixed; bottom: 20px; right: 20px;
    width: 40px; height: 40px;
    border-right: 2px solid var(--text-color);
    border-bottom: 2px solid var(--text-color);
    opacity: 0.3; z-index: 99; pointer-events: none;
}

.crt-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none; z-index: 999;
    animation: flicker 0.15s infinite;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
}

.terminal-container {
    position: relative; z-index: 10;
    padding: 60px 30px 30px 30px; 
    width: 100%; height: 100%;
    overflow-y: auto;
    text-shadow: 0 0 5px var(--glow-color);
    background: radial-gradient(circle at center, rgba(2,6,23,0.2) 0%, rgba(2,6,23,0.8) 100%);
    scrollbar-width: none;
}
.terminal-container::-webkit-scrollbar { display: none; }

.output-line { margin-bottom: 10px; line-height: 1.6; word-wrap: break-word; letter-spacing: 0.5px; }
.output-line.system { color: var(--system-color); text-shadow: 0 0 8px rgba(139, 92, 246, 0.6); }
.output-line.error { color: var(--error-color); text-shadow: 0 0 8px rgba(244, 63, 94, 0.6); }
.output-line.success { color: var(--success-color); text-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }
.output-line.warning { color: #f59e0b; text-shadow: 0 0 8px rgba(245, 158, 11, 0.6); }

.glitch-text {
    position: relative;
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    color: var(--error-color);
    text-shadow: 2px 0 #0ff, -2px 0 #f0f;
}

.input-line { display: flex; align-items: center; margin-top: 15px; padding-bottom: 50px; }
.prompt { margin-right: 10px; color: var(--text-color); font-weight: bold; }
input[type="text"] {
    background: transparent; border: none; color: transparent;
    outline: none; font-family: var(--font-family); font-size: 16px;
    width: 1px; opacity: 0;
}

/* 【修复点】文字常亮，光标闪烁 */
.input-display { color: var(--text-color); text-shadow: 0 0 8px var(--text-color); }
.cursor { animation: blink 1s step-end infinite; color: var(--text-color); text-shadow: 0 0 8px var(--text-color); }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes flicker { 0% { opacity: 0.95; } 50% { opacity: 0.85; } 100% { opacity: 0.95; } }
@keyframes glitch-skew {
    0% { transform: skew(0deg); } 20% { transform: skew(-10deg); }
    40% { transform: skew(10deg); } 60% { transform: skew(-5deg); }
    80% { transform: skew(5deg); } 100% { transform: skew(0deg); }
}

@media (max-width: 768px) {
    body, html { font-size: 14px; }
    .terminal-container { padding: 50px 15px 15px 15px; }
    body::before { font-size: 8px; top: 5px; right: 10px; }
}