/* Buttons — solid (.btn-primary), outline (.btn-ghost), and the
   square icon button (.icon-btn) used for the theme toggle. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .92rem; padding: 10px 18px;
  border-radius: 10px; border: 1px solid var(--border);
  transition: transform .15s, box-shadow .25s, border-color .2s, background .2s;
  cursor: pointer;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 22px rgba(124,92,255,0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(124,92,255,0.5); }
.btn-ghost { background: var(--btn-ghost-bg); color: var(--text); }
.btn-ghost:hover { border-color: var(--brand); transform: translateY(-2px); }

/* Icon button + sun/moon swap driven by [data-theme] */
.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 10px; border: 1px solid var(--border); background: var(--btn-ghost-bg);
  color: var(--text); cursor: pointer; transition: border-color .2s, transform .15s, color .2s;
}
.icon-btn:hover { border-color: var(--brand); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .to-dark { display: none; }
.icon-btn .to-light { display: block; }
:root[data-theme="light"] .icon-btn .to-light { display: none; }
:root[data-theme="light"] .icon-btn .to-dark { display: block; }