:root {
    --bg-dark: #050505;
    --neon-p: #bc13fe;
    --neon-b: #00d2ff;
    --neon-g: #00ff41;
}

body {
    background: var(--bg-dark);
    margin: 0; font-family: 'Courier New', monospace;
    display: flex; justify-content: center; align-items: center;
    height: 100vh; overflow: hidden;
}

#matrix-canvas { position: fixed; top: 0; left: 0; z-index: -1; opacity: 0.2; }

.main-frame { width: 90%; max-width: 850px; z-index: 10; }

.terminal-window {
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--neon-p);
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(188, 19, 254, 0.2);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.top-bar {
    background: #1a1a1a; padding: 12px;
    display: flex; align-items: center;
    border-bottom: 1px solid #333;
}

.dots { display: flex; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.title-text { color: #888; font-size: 13px; flex-grow: 1; text-align: center; }

.screen { padding: 25px; min-height: 400px; }

.info-block p { margin: 4px 0; font-size: 14px; }
.neon-blue { color: var(--neon-b); text-shadow: 0 0 5px var(--neon-b); }
.dim-text { color: #444; }

.input-row { display: flex; align-items: center; margin-top: 20px; }
.p-root { color: var(--neon-g); font-weight: bold; margin-right: 12px; }

.main-input {
    background: transparent; border: none; outline: none;
    color: #fff; font-size: 16px; width: 100%; font-family: inherit;
}

.button-row { margin-top: 25px; display: flex; gap: 15px; }

.glitch-btn {
    background: transparent; border: 1px solid var(--neon-p);
    color: var(--neon-p); padding: 10px 25px; cursor: pointer;
    font-family: inherit; font-weight: bold; transition: 0.3s;
    text-transform: uppercase; letter-spacing: 2px;
}

.glitch-btn:hover {
    background: var(--neon-p); color: #000;
    box-shadow: 0 0 20px var(--neon-p);
}

.log-stream { height: 100px; overflow-y: auto; font-size: 12px; color: #888; margin-top: 20px; }

.p-container { display: flex; align-items: center; gap: 15px; margin-top: 20px; }
.p-bar-bg { flex-grow: 1; background: #111; height: 8px; border-radius: 4px; overflow: hidden; }
.p-fill { height: 100%; width: 0%; background: var(--neon-p); box-shadow: 0 0 10px var(--neon-p); }
#percent { color: var(--neon-p); font-size: 12px; }

.code-view { 
    background: rgba(0,0,0,0.6); border: 1px solid #333; 
    padding: 15px; margin-top: 15px; max-height: 150px; overflow: auto;
}
pre { margin: 0; color: var(--neon-g); font-size: 13px; word-break: break-all; white-space: pre-wrap; }

.alert-success { color: var(--neon-g); font-size: 14px; margin-top: 20px; font-weight: bold; }