:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
button, input[type="submit"] { cursor: pointer; }
code { overflow-wrap: anywhere; }
.chart-shell { position: relative; min-height: 22rem; }

/* Compatibility styling for the account and CRUD forms while dashboard views use Tailwind utilities. */
.auth-card, main > section:not([class]) { max-width: 42rem; margin: 2rem auto; padding: 1.5rem; border: 1px solid #1e293b; border-radius: 1rem; background: #0f172a; }
form:not(.button_to) { display: grid; gap: .75rem; }
input, select, textarea { width: 100%; min-height: 2.75rem; padding: .65rem .8rem; color: #f8fafc; border: 1px solid #334155; border-radius: .65rem; background: #020617; }
input:focus, select:focus, textarea:focus { outline: 2px solid #34d399; outline-offset: 2px; }
input[type="submit"], .button { display: inline-flex; width: auto; justify-content: center; padding: .7rem 1rem; color: #022c22; border: 0; border-radius: .65rem; background: #34d399; font-weight: 700; text-decoration: none; }
.errors { padding: 1rem; border: 1px solid #f43f5e55; border-radius: .75rem; background: #f43f5e15; color: #fecdd3; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.inline-actions, .inline-form { display: flex; align-items: center; gap: .75rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .75rem; border-bottom: 1px solid #1e293b; text-align: left; }
@media (max-width: 42rem) { .page-heading, .inline-actions, .inline-form { align-items: stretch; flex-direction: column; } table { display: block; overflow-x: auto; } }