:root { --primary: #00ff00; --bg: #0a0a0a; --card: #141414; --danger: #ff3e3e; --yellow: #f39c12; }
body { background: var(--bg); color: #fff; font-family: 'Courier New', monospace; margin: 0; }
.flex-center { display: flex; justify-content: center; align-items: center; height: 100vh; }

/* Login Box */
.login-box { background: var(--card); padding: 30px; border-radius: 8px; border: 1px solid #333; width: 100%; max-width: 350px; text-align: center; }
.header-box { background: var(--primary); color: #000; padding: 10px; font-weight: bold; margin-bottom: 20px; }
.header-box.yellow { background: var(--yellow); }

/* Dashboard Layout */
.main-header { background: #000; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--primary); }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; padding: 20px; }
.card { background: var(--card); padding: 20px; border-radius: 8px; border: 1px solid #222; }

/* Elements */
textarea { width: 100%; height: 300px; background: #000; color: #fff; border: 1px solid #444; padding: 10px; box-sizing: border-box; resize: none; }
input { width: 100%; padding: 12px; background: #000; color: var(--primary); border: 1px solid #444; margin: 10px 0; box-sizing: border-box; }
button { width: 100%; padding: 12px; background: var(--primary); color: #000; border: none; font-weight: bold; cursor: pointer; }
.btn-yellow { background: var(--yellow); }
.btn-save { background: #2ecc71; color: #fff; margin-top: 10px; }

/* Terminal */
.terminal-display { background: #000; padding: 15px; height: 250px; overflow-y: auto; border: 1px solid #444; color: var(--primary); margin-bottom: 10px; }
pre { margin: 0; white-space: pre-wrap; font-size: 0.9em; }

.logout { color: var(--danger); text-decoration: none; font-weight: bold; }
.error { color: var(--danger); margin-bottom: 15px; font-size: 0.8em; }