:root {
  color-scheme: dark;
  --bg: #101114;
  --panel: #1c1b1f;
  --panel-2: #252328;
  --input: #16161a;
  --border: #614d38;
  --border-soft: #39373d;
  --text: #f2f2f4;
  --muted: #a8abb4;
  --accent: #ffa436;
  --accent-soft: #3e2e1e;
  --success: #42ce78;
  --danger: #f05252;
  --info: #64a8ff;
  --shadow: 0 18px 50px rgba(0, 0, 0, .2);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f6;
  --panel: #fff;
  --panel-2: #f7f7f8;
  --input: #fff;
  --border: #d3a774;
  --border-soft: #dcdee3;
  --text: #202126;
  --muted: #666b76;
  --accent: #e88610;
  --accent-soft: #fff1df;
  --success: #208b4d;
  --danger: #d83c3c;
  --info: #276ec2;
  --shadow: 0 16px 44px rgba(27, 28, 31, .08);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scrollbar-color: var(--border-soft) var(--bg); }
body {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}
button, input, select { font: inherit; letter-spacing: 0; }
button, a { touch-action: manipulation; }
a { color: var(--accent); text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

@keyframes spin { to { transform: rotate(360deg); } }