:root {
    --noteme-primary: #0d6efd;
    --noteme-dark: #07152f;
    --noteme-text: #132238;
    --noteme-muted: #66758a;
    --noteme-border: #e7ebf1;
    --noteme-surface: #ffffff;
    --noteme-background: #f2f6fb;
}

html { color-scheme: light; }
body { background: var(--noteme-background); color: var(--noteme-text); min-height: 100vh; }
.site-shell { min-height: 100vh; padding: max(1.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.brand-mark { align-items: center; background: linear-gradient(135deg, #0b5ed7, #5135a8); border-radius: 1rem; color: #fff; display: inline-flex; font-weight: 800; height: 3rem; justify-content: center; letter-spacing: -.04em; width: 3rem; }
.hero-card { background: var(--noteme-surface); border: 1px solid var(--noteme-border); border-radius: 1.5rem; box-shadow: 0 1rem 3rem rgba(7, 21, 47, .08); max-width: 62rem; }
.eyebrow { color: var(--noteme-primary); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-title { font-size: clamp(2.3rem, 8vw, 5rem); font-weight: 800; letter-spacing: -.055em; line-height: .98; }
.hero-copy { color: var(--noteme-muted); font-size: clamp(1rem, 2.5vw, 1.25rem); line-height: 1.65; max-width: 42rem; }
.status-pill { align-items: center; background: #e9f7f1; border-radius: 999px; color: #0f7653; display: inline-flex; font-size: .9rem; font-weight: 700; gap: .55rem; min-height: 2.75rem; padding: .6rem 1rem; }
.status-dot { background: #15966a; border-radius: 50%; height: .6rem; width: .6rem; }
.auth-shell { min-height: 100vh; padding: 1.25rem; }
.auth-card { background: var(--noteme-surface); border: 1px solid var(--noteme-border); border-radius: 1.5rem; box-shadow: 0 1rem 3rem rgba(7, 21, 47, .08); max-width: 34rem; width: 100%; }
.brand-link { color: var(--noteme-dark); text-decoration: none; }
.brand-mark-sm { border-radius: .7rem; height: 2.25rem; width: 2.25rem; }
.form-control { min-height: 3rem; }
.admin-header { position: sticky; top: 0; z-index: 10; }
.stat-card { background: var(--noteme-surface); border: 1px solid var(--noteme-border); border-radius: 1rem; }
.content-column { max-width: 58rem; }
.filter-card, .form-card, .table-card { background: var(--noteme-surface); border: 1px solid var(--noteme-border); border-radius: 1rem; }
.table-card { overflow: hidden; }
.table-card .table > :not(caption) > * > * { padding: 1rem; }
.status-badge { border-radius: 999px; display: inline-block; font-size: .78rem; font-weight: 700; padding: .35rem .65rem; }
.status-pending { background: #fff4d6; color: #7a5200; }
.status-active { background: #e3f7ee; color: #0b6848; }
.status-suspended { background: #ffe5e5; color: #9b1c1c; }
.status-disabled { background: #e9edf2; color: #4a5565; }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(13, 110, 253, .35); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }