:root {
    /* Colors */
    --bg-darker:   #111;
    --bg-base:     #1a1a1a;
    --bg-surface:  #222;
    --bg-surface-2:#2a2a2a;
    --bg-elevated: #333;
    --bg-hover:    #3a3a3a;
    
    --accent:       #00ff88;
    --accent-hover: #00cc6a;
    --danger:       #ff4444;
    --danger-hover: #cc0000;
    
    --text-main:   #fff;
    --text-muted:  #aaa;
    
    --border-dark: #111;
    --border-main: #333;
    --border-light:#444;
    --border-focus:#555;

    --font-stack: Arial, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0; 
    padding: 0; 
    height: 100vh; 
    background: var(--bg-base); 
    color: var(--text-main); 
    font-family: var(--font-stack);
    overflow: hidden;
}

h2, h3 { margin: 0 0 8px 0; }
.hidden { display: none !important; }
.info { margin-top: 10px; color: var(--text-muted); font-size: 0.9em; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(0, 255, 136, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 136, 0.6); }

button {
    background: var(--accent);
    color: var(--bg-darker);
    border: none;
    padding: 8px 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s;
}
button:hover { background: var(--accent-hover); }

button.stop-btn { background: var(--danger); color: var(--text-main); }
button.stop-btn:hover { background: var(--danger-hover); }

input[type="number"], select {
    background: var(--bg-darker);
    color: var(--accent);
    border: 1px solid var(--border-focus);
    padding: 6px;
    border-radius: 3px;
}
input[type="number"]:disabled { color: #777; }
input[type="range"] { accent-color: var(--accent); }

.input-small { width: 50px; }
.input-medium { width: 60px; }