/* Global Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; min-height: 100vh; background: #0b0e14; color: #e2e8f0; font-family: 'Segoe UI', monospace; }

/* Sidebar */
nav { width: 220px; background: #151921; border-right: 1px solid #2d3748; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
nav a { color: #63b3ed; text-decoration: none; font-weight: bold; font-size: 0.9rem; }
nav a:hover { color: #fff; }

/* Main Content */
main { flex-grow: 1; padding: 40px; max-width: 900px; }
.card { background: #1a1c25; border: 1px solid #2d3748; padding: 25px; border-radius: 12px; margin-bottom: 20px; }
h1 { font-size: 1.4rem; margin-bottom: 1rem; color: #fff; }

/* Inputs & Buttons */
input { background: #0f111a; border: 1px solid #4a5568; padding: 12px; border-radius: 6px; width: 100%; color: #63b3ed; font-family: monospace; margin-bottom: 10px; }
button { background: #2b6cb0; color: white; border: none; padding: 12px 20px; cursor: pointer; border-radius: 6px; font-weight: bold; }
button.primary { background: #38a169; }
#resultArea { border-left: 4px solid #38a169; }