:root {
  --bg: #0e0f13;
  --bg-2: #15171d;
  --bg-3: #1c1f27;
  --bg-4: #232732;
  --line: #2a2f3a;
  --line-strong: #3a4150;
  --fg: #e7e9ee;
  --fg-2: #b8bdc8;
  --fg-3: #7e8594;
  --accent: #7c9cff;
  --accent-2: #5b7fff;
  --accent-soft: rgba(124,156,255,.14);
  --warn: #ffb86b;
  --good: #8ee0a1;
  --danger: #ff7b7b;
  --star: #ffcf5c;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow: 0 6px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --shadow-soft: 0 2px 8px rgba(0,0,0,.25);
  --t-fast: 120ms cubic-bezier(.2,.7,.2,1);
  --t-mid: 220ms cubic-bezier(.2,.7,.2,1);
  --grid-gap: 8px;
  --sidebar-w: 260px;
  --topbar-h: 52px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root.theme-auto {
    --bg: #f6f7fa;
    --bg-2: #ffffff;
    --bg-3: #f0f2f7;
    --bg-4: #e7eaf2;
    --line: #dde1ea;
    --line-strong: #c8cdd9;
    --fg: #1a1d24;
    --fg-2: #495063;
    --fg-3: #7a8294;
    --accent-soft: rgba(91,127,255,.10);
    --shadow: 0 6px 24px rgba(20,30,60,.10), 0 2px 6px rgba(20,30,60,.06);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--fg-3); }
.small { font-size: 12px; }

.btn {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn:hover { background: var(--bg-4); border-color: var(--line-strong); }
.btn.primary { background: var(--accent-2); border-color: var(--accent-2); color: white; }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.icon-btn {
  background: transparent;
  border: none;
  color: var(--fg-2);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-3); color: var(--fg); }

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-4);
  border: 1px solid var(--line-strong);
  padding: 8px 14px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  z-index: 1000;
  font-size: 13px;
}