:root {
  font-family: Arial, sans-serif;
  color-scheme: dark;
  --bg: #101c32;
  --panel: #1d2d49;
  --panel-hover: #263b5d;
  --text: #e7eef8;
  --muted: #a9bad1;
  --accent: #63b3ed;
  --accent-hover: #4299e1;
  --border: #344967;
  --input: #14243c;
  --danger: #f87171;
  --success: #4ade80;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f7fc;
  --panel: #ffffff;
  --panel-hover: #eaf2fb;
  --text: #24344d;
  --muted: #687b95;
  --accent: #3182ce;
  --accent-hover: #2563a8;
  --border: #d8e3f0;
  --input: #f8fbff;
  --danger: #dc4444;
  --success: #16834a;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  font-family: Arial, sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, sans-serif;
  transition: background .2s ease, color .2s ease;
}

button, input, select, textarea {
  font-family: Arial, sans-serif;
}

button {
  cursor: pointer;
}

.theme-toggle {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 15px;
  font-size: 14px;
}

.theme-toggle:hover {
  background: var(--panel-hover);
}