:root {
    --bg-color: #050505;
    --text-color: #33FF33;
    --font-stack: 'VT323', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-stack); }
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    width: 100vw; height: 100vh;
    overflow: hidden; position: relative;
    font-size: 1.5rem; display: flex; flex-direction: column;
}

.crt-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    z-index: 10; pointer-events: none;
    animation: flicker 0.15s infinite;
    box-shadow: inset 0 0 150px rgba(0,0,0,1), inset 0 0 40px rgba(0,0,0,0.8);
}
.crt-overlay::before {
    content: " "; display: block; position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}
.crt-overlay::after {
    content: " "; display: block; position: absolute;
    bottom: -20%; left: 0; width: 100%; height: 15vh;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.2), 0 0 20px var(--text-color);
    z-index: 12; pointer-events: none;
    animation: glitchSweepUp 6s infinite ease-in-out;
}
@keyframes glitchSweepUp {
    0% { transform: translateY(100vh); opacity: 0; }
    3% { transform: translateY(30vh); opacity: 1; filter: contrast(3) blur(2px) hue-rotate(90deg); }
    5% { transform: translateY(0); opacity: 0.8; filter: contrast(1) blur(0px); }
    7% { transform: translateY(-50vh); opacity: 0; }
    100% { transform: translateY(-50vh); opacity: 0; }
}
@keyframes flicker {
    0% { opacity: 0.95; }
    50% { opacity: 1; }
    100% { opacity: 0.95; }
}

.terminal {
    width: 100%; height: 100%; padding: 40px;
    display: flex; flex-direction: column;
    text-shadow: 0 0 5px var(--text-color);
    overflow-y: auto; position: relative; z-index: 5;
    animation: crtTurnOn 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes crtTurnOn {
    0% { transform: scale(1, 0.005); background: #fff; filter: brightness(100); opacity: 1; text-shadow: none; color: transparent; }
    30% { transform: scale(1, 0.005); background: #fff; filter: brightness(100); color: transparent; }
    60% { transform: scale(1, 1); background: transparent; filter: brightness(10); }
    100% { transform: scale(1, 1); filter: brightness(1); }
}

.terminal::-webkit-scrollbar { width: 10px; }
.terminal::-webkit-scrollbar-track { background: transparent; }
.terminal::-webkit-scrollbar-thumb { background: var(--text-color); }
#output { flex-grow: 1; display: flex; flex-direction: column; }
#output p { margin-bottom: 5px; word-break: break-word; white-space: pre-wrap; }
.input-line { position: relative; display: flex; align-items: center; margin-top: 10px; min-height: 1.5rem; }
.prompt { margin-right: 10px; }
#terminal-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: text; z-index: 10; }
#input-mirror { white-space: pre; }
.cursor { animation: blink 1s step-end infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.hub-link { display: inline-block; margin-top: 20px; padding: 10px 20px; background-color: var(--text-color); color: var(--bg-color); text-decoration: none; font-weight: bold; text-shadow: none; box-shadow: 0 0 10px var(--text-color); transition: transform 0.2s; }
.hub-link:hover { transform: scale(1.05); }
.error-msg { color: #ff3333 !important; text-shadow: 0 0 5px rgba(255, 51, 51, 0.7) !important; }
.processing { animation: blink 1s infinite; }
.flicker-heavy { animation: flickerHeavy 0.1s infinite !important; }
@keyframes flickerHeavy { 0% { opacity: 0.7; filter: brightness(2); } 50% { opacity: 0.1; filter: brightness(0.5); } 100% { opacity: 1; filter: brightness(3); } }
.loading-bar-red { height: 15px; background-color: #ff3333; width: 0%; margin: 10px 0; box-shadow: 0 0 10px #ff3333; animation: loadingBar 2s linear forwards; }
@keyframes loadingBar { to { width: 100%; } }
.flash-red { animation: flashRed 1s infinite; }
@keyframes flashRed { 0%, 100% { box-shadow: inset 0 0 150px rgba(255,0,0,0); background-color: transparent; } 50% { box-shadow: inset 0 0 150px rgba(255,0,0,0.6); background-color: #1a0000; color: #ff3333 !important; } }