:root {
  --bg-primary: #1e1e1e;
  --bg-panel: #252526;
  --bg-hover: #2a2d2e;
  --bg-active: #37373d;
  --bg-input: #3c3c3c;
  --border-color: #333;
  --border-light: #3c3c3c;
  --text-primary: #cccccc;
  --text-secondary: #858585;
  --text-muted: #555;
  --accent-blue: #007acc;
  --accent-blue-light: #75beff;
  --accent-blue-bg: #094771;
  --accent-green: #4caf50;
  --accent-green-light: #81c784;
  --accent-red: #f48771;
  --button-primary: #0e639c;
  --button-primary-hover: #1177bb;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
  display: flex;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #424242; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #4f4f4f; }
::-webkit-scrollbar-corner { background: transparent; }

select, input[type="text"], input[type="number"], button {
  padding: 5px 8px;
  border-radius: 3px;
  border: 1px solid var(--border-light);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

select:focus, input:focus { border-color: var(--accent-blue); }

button { cursor: pointer; font-weight: 500; }
button:hover { border-color: var(--accent-blue); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input[type="range"] {
  -webkit-appearance: none;
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--accent-blue);
  border-radius: 50%;
  cursor: pointer;
}

.hidden { display: none !important; }
.mono { font-family: Consolas, "Courier New", monospace; }