@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f7f6f2;
  --ink: #101834;
  --muted: #6b7084;
  --line: #e4e2da;
  --card: #ffffff;
  --accent: #5a6cf0;
  --c1: #5a6cf0; --c2: #f5655a; --c3: #2bb5a0; --c4: #f7b731;
  --c5: #9b6bef; --c6: #3fb9ef; --c7: #f28ab2; --c8: #7bc67e;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
.btn {
  border: 0; border-radius: 999px; padding: 12px 22px; cursor: pointer;
  background: var(--ink); color: #fff; font-weight: 600;
  transition: transform .08s ease, opacity .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.blue { background: var(--accent); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.danger { background: transparent; color: #c0392b; box-shadow: inset 0 0 0 1.5px #f1c4bf; }
.logo-img { height: 22px; width: auto; display: block; }
.logo { font-weight: 800; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 8px; }
.logo i { width: 14px; height: 14px; border-radius: 4px; background: var(--accent); display: inline-block; box-shadow: 6px 6px 0 -1px var(--c2); }