:root {
    --bg-color: #0a0a0a;
    --card-bg: #111111;
    --text-main: #e0e0e0;
    --accent: #00ff41; /* Hacker Green */
    --accent-dim: #008F11;
    --error: #ff3333;
    --border: #333;
    --font-mono: 'Courier New', Courier, monospace;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-mono);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Header & Nav */
header {
    background: var(--card-bg);
    border-bottom: 1px solid var(--accent-dim);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h1, h2, h3 { color: var(--accent); text-transform: uppercase; letter-spacing: 2px; }

a { color: var(--accent); text-decoration: none; transition: 0.3s; }
a:hover { text-shadow: 0 0 8px var(--accent); }

nav a { margin: 0 15px; font-weight: bold; }
nav .active { border-bottom: 2px solid var(--accent); }

/* Layout Containers */
main { padding: 2rem; max-width: 1000px; margin: 0 auto; }
.container { background: var(--card-bg); padding: 2rem; border: 1px solid var(--border); }

/* Forms & Inputs */
input, textarea {
    background: #000;
    border: 1px solid var(--accent-dim);
    color: var(--accent);
    padding: 10px;
    font-family: var(--font-mono);
    width: 100%;
    box-sizing: border-box;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 5px var(--accent-dim); }

button {
    background: var(--accent-dim);
    color: #000;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    font-family: var(--font-mono);
    text-transform: uppercase;
}
button:hover { background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* Challenge Cards */
.challenge-list { list-style: none; padding: 0; }
.challenge-card {
    border: 1px solid var(--border);
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.challenge-card:hover { border-color: var(--accent); }

/* Scoreboard Table */
.cyber-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.cyber-table th, .cyber-table td { border: 1px solid var(--border); padding: 12px; text-align: left; }
.cyber-table th { color: var(--accent); text-transform: uppercase; }
.highlight-row { background: rgba(0, 255, 65, 0.1); }

/* Utility */
.solved-badge { color: var(--bg-color); background: var(--accent); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }
.tag { font-size: 0.8rem; border: 1px solid #555; padding: 2px 6px; color: #888; margin-left: 10px; }