*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; font-family: var(--font); background: var(--canvas); color: var(--ink); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 86% -10%, rgb(var(--mauve-rgb) / 16%) 0, transparent 28rem), radial-gradient(circle at 8% 38%, rgb(var(--rose-rgb) / 7%) 0, transparent 24rem), var(--canvas); font-size: 1rem; line-height: 1.5; }
a { color: var(--link); text-decoration-thickness: .08em; text-underline-offset: .16em; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.75rem, 5vw, 2.65rem); line-height: 1.12; letter-spacing: -.035em; margin-bottom: var(--space-3); }
h2 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -.015em; }
h3 { font-size: 1rem; margin-bottom: .25rem; }
img { max-width: 100%; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; padding: .75rem 1rem; background: var(--ink); color: var(--canvas); }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-soft); }
.eyebrow { color: var(--accent-text); font-size: .76rem; font-weight: 800; letter-spacing: .095em; text-transform: uppercase; margin-bottom: .4rem; }
.app-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: .75rem; height: 4.5rem; padding: .65rem max(1rem, calc((100vw - var(--max-width)) / 2)); background: rgb(var(--canvas-rgb) / 88%); border-bottom: 1px solid rgb(var(--line-rgb) / 80%); backdrop-filter: blur(18px); }
.brand { min-width: 0; display: flex; align-items: center; gap: .7rem; color: var(--ink); font-weight: 750; text-decoration: none; }
.brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; width: 2.55rem; height: 2.55rem; flex: 0 0 auto; background: var(--accent-gradient); color: var(--button-ink); border-radius: .75rem; font-family: var(--font); font-size: 1.15rem; font-weight: 850; box-shadow: 0 8px 24px rgb(var(--mauve-rgb) / 30%); }
.brand-mark-large { width: 3.5rem; height: 3.5rem; font-size: 2rem; border-radius: 1.05rem 1.05rem 1.05rem .35rem; }
.brand-mark-logo { display: block; object-fit: cover; background: var(--canvas); }
.app-main { width: min(100% - 2rem, var(--max-width)); margin: 0 auto; padding: var(--space-6) 0 calc(var(--nav-height) + var(--space-6)); }
.guest-main { min-height: 100vh; }
.bottom-nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--nav-height) + env(safe-area-inset-bottom)); padding: .45rem .25rem env(safe-area-inset-bottom); background: rgb(var(--canvas-rgb) / 96%); border-top: 1px solid var(--line); box-shadow: 0 -12px 32px rgb(100 64 87 / 7%); backdrop-filter: blur(18px); }
.bottom-nav a { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: .18rem; color: var(--ink-soft); font-size: .7rem; font-weight: 650; text-decoration: none; border-radius: .7rem; }
.bottom-nav a[aria-current="page"] { color: var(--ink); background: linear-gradient(135deg, rgb(var(--rose-rgb) / 14%), rgb(var(--mauve-rgb) / 18%)); box-shadow: inset 0 0 0 1px rgb(var(--mauve-rgb) / 18%); }
.nav-icon { display: grid; place-items: center; min-height: 1.35rem; font-size: 1.25rem; line-height: 1; }
.calendar-icon { width: 1.15rem; height: 1.05rem; border: 2px solid currentColor; border-radius: .2rem; position: relative; }
.calendar-icon::before { content: ""; position: absolute; left: -2px; right: -2px; top: .2rem; border-top: 2px solid currentColor; }
.people-icon { width: 1.25rem; height: 1rem; border: 2px solid currentColor; border-radius: 50% 50% .3rem .3rem; border-top-color: transparent; position: relative; }
.people-icon::before { content: ""; position: absolute; width: .42rem; height: .42rem; left: .27rem; top: -.45rem; border: 2px solid currentColor; border-radius: 50%; background: var(--canvas); }
.header-actions { display: flex; align-items: center; gap: .55rem; }.notification-link { position: relative; width: 2.7rem; height: 2.7rem; display: grid; place-items: center; color: var(--ink-soft); border: 1px solid var(--line); border-radius: .75rem; text-decoration: none; }.notification-link > span { position: absolute; top: -.35rem; right: -.35rem; min-width: 1.25rem; height: 1.25rem; display: grid; place-items: center; padding: 0 .25rem; background: var(--danger); color: white; border-radius: 1rem; font-size: .65rem; font-weight: 800; }
.offline-banner { position: fixed; z-index: 100; top: 0; left: 0; right: 0; padding: .75rem 1rem; text-align: center; background: var(--amber-100); color: var(--amber-700); font-weight: 700; }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.grow { flex: 1; min-width: 0; }
.desktop-only { display: none !important; }
@media (max-width: 420px) { .app-header { padding-inline: .8rem; }.brand { gap: .55rem; }.page-heading.row-between { align-items: flex-start; gap: .75rem; }.page-heading.row-between > :first-child { min-width: 0; }.page-heading.row-between > .button { flex: 0 0 auto; }.bottom-nav a { font-size: .66rem; } }
@media (max-width: 620px) { .usage-row { grid-template-columns: 1fr; align-items: start; }.usage-delete { margin-top: .15rem; } }
@media (min-width: 800px) { .bottom-nav { position: fixed; top: 4.5rem; bottom: auto; width: min(100% - 2rem, var(--max-width)); height: 3.8rem; margin: .65rem max(1rem, calc((100vw - var(--max-width)) / 2)) 0; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); grid-template-columns: repeat(5, 8rem); justify-content: center; padding: .35rem; background: rgb(var(--surface-rgb) / 88%); } .bottom-nav a { flex-direction: row; font-size: .82rem; } .app-main { padding-top: calc(var(--space-8) + 3.8rem); padding-bottom: var(--space-8); } .desktop-only { display: inline-flex !important; } }
@media print { .app-header, .bottom-nav, .no-print, .toast-stack { display: none !important; } .app-main { width: 100%; padding: 0; } body { background: white; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }