/* Light & dark themes */
:root { color-scheme: light dark; }
.dark body { background-color: #0f172a; color: #e2e8f0; }
.dark .card { background-color: #0b1220; border-color: #1e293b; }
.dark header { background-color: rgba(2,6,23,0.9); }

.input { @apply w-full rounded-xl border border-slate-300 p-3 text-sm focus:outline-none focus:ring-2 focus:ring-sky-500 dark:bg-slate-900 dark:border-slate-700; }
.btn-primary { @apply w-full rounded-xl bg-sky-600 text-white py-3 font-semibold active:scale-[.98]; }
.btn-secondary { @apply inline-block w-full text-center rounded-xl border border-slate-300 py-3 font-semibold dark:border-slate-700; }
.card { @apply rounded-2xl border border-slate-200 p-4 shadow-sm dark:border-slate-800; }
.svc-card { @apply rounded-2xl border border-slate-200 p-4 shadow-sm active:scale-[.99] dark:border-slate-800; display:block; }
.pay { @apply rounded-xl border border-slate-200 px-3 py-2 dark:border-slate-700; }

/* Chat bubbles */
.msg { @apply max-w-[80%] px-3 py-2 rounded-2xl; }
.msg.from { @apply bg-slate-100 self-start dark:bg-slate-800; }
.msg.to { @apply bg-sky-600 text-white self-end ml-auto; }