*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--soft-gray); font-size: 16px; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
img { max-width: 100%; }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--shadow);
}
.card + .card { margin-top: var(--s-4); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border-radius: 999px; padding: 10px 20px;
  font-weight: 600; font-size: 15px; border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--teal-grad); color: var(--white); box-shadow: 0 2px 8px rgba(14, 163, 138, .35); }
.btn-primary:hover { filter: brightness(.96); box-shadow: 0 3px 12px rgba(14, 163, 138, .45); }
.btn-primary:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; box-shadow: none; }
.btn-secondary { background: var(--white); color: var(--teal); border-color: var(--teal); }
.btn-secondary:hover { background: var(--seafoam-light); }
.btn-ghost { background: transparent; color: var(--teal); }
.btn-ghost:hover { background: var(--seafoam-light); }
.btn-danger { background: transparent; color: var(--coral); }
.btn-danger:hover { background: #FFF1F0; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-block { width: 100%; }

.input, textarea.input {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(14, 163, 138, .12); }
label.field { display: block; margin-bottom: var(--s-4); }
label.field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--s-1); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--seafoam-light); color: var(--teal-dark);
  border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 500;
}
.chip.gray { background: var(--soft-gray); color: var(--muted); }
.chip.coral { background: #FFF1F0; color: var(--coral); }
.chip.dark { background: var(--ink); color: var(--white); }

.row { display: flex; gap: var(--s-3); align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: var(--s-3); }
.mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); }

.empty-state { text-align: center; padding: var(--s-12) var(--s-6); color: var(--muted); }
.empty-state .empty-art { width: 190px; max-width: 60%; margin: 0 auto var(--s-4); display: block; }
.empty-state .empty-caption { max-width: 380px; margin-left: auto; margin-right: auto; }
.empty-state.empty-sm { padding: var(--s-6); }
.empty-state.empty-sm .empty-art { width: 110px; margin-bottom: var(--s-2); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--teal-grad); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
  flex-shrink: 0;
}
.divider { border: 0; border-top: 1px solid var(--border); margin: var(--s-4) 0; }

#toasts { position: fixed; bottom: var(--s-6); left: 50%; transform: translateX(-50%); z-index: 100; }
.toast {
  background: var(--ink); color: var(--white); border-radius: var(--radius-sm);
  padding: 10px 20px; margin-top: var(--s-2); box-shadow: var(--shadow-lg);
  animation: toast-in .2s ease-out; font-size: 14px;
}
.toast.error { background: var(--coral); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--seafoam-light); border-top-color: var(--teal);
  animation: spin .8s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }