:root {
  --red: #c62020;
  --red-dark: #9e1717;
  --ink: #1d1d1f;
  --muted: #6b6b70;
  --line: #e4e4e7;
  --bg: #f6f5f3;
  --card: #ffffff;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Heebo', Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input { font: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  background: var(--red); color: #fff; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: background .15s;
}
.btn:hover { background: var(--red-dark); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: #fff; }
.btn:disabled { opacity: .5; cursor: default; }