:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f7fb;
  --surface-3: #edeff6;
  --line: #e6e8ef;
  --line-soft: #eef0f4;
  --line-strong: #d2d7e6;
  --ink: #11131a;
  --ink-2: #4b5168;
  --ink-3: #878da3;
  --violet: #6d5ef8;
  --violet-2: #8a6cff;
  --teal: #11c9c0;
  --amber: #ffb020;
  --green: #1fbf75;
  --red: #f0506e;
  --ink-green: #129a5d;
  --ink-amber: #b9770c;
  --ink-red: #d64562;
  --grad: linear-gradient(135deg, #6d5ef8 0%, #8a6cff 45%, #11c9c0 100%);
  --grad-soft: linear-gradient(135deg, rgba(109, 94, 248, 0.14), rgba(17, 201, 192, 0.14));
  --shadow: 0 1px 2px rgba(17, 19, 26, 0.04);
  --r: 18px;
  --r-sm: 12px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;
  --r-xs: 8px;
  --r-s: 9px;
  --r-m: 11px;
  --fs-xs: 12.5px;
  --fs-sm: 13.5px;
  --fs-md: 14px;
  --fs-lg: 14.5px;
  --fs-xl: 16px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fw-med: 600;
  --fw-semi: 700;
  --fw-bold: 800;
}
.btn {
  border: none; cursor: pointer; font-family: var(--font); font-weight: var(--fw-semi); font-size: var(--fs-md);
  padding: 11px 18px; border-radius: var(--r-sm); transition: 0.16s; line-height: 1; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
}
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 22px rgba(109, 94, 248, 0.38); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(109, 94, 248, 0.5); }
.btn-ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-strong); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }
.btn-sm { padding: 7px 12px; font-size: var(--fs-sm); border-radius: var(--r-s); }
.btn-icon { padding: 0; width: 34px; height: 34px; border-radius: var(--r-s); flex-shrink: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.chip-v { background: rgba(109, 94, 248, 0.12); color: var(--violet); }
.chip-g { background: rgba(31, 191, 117, 0.14); color: var(--ink-green); }