:root { color-scheme: light; }
body { font-family: system-ui, sans-serif; margin: 0; color: #1b1b1b; background: #f7f7f5; line-height: 1.5; }
header { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: #0f3d2e; color: #fff; }
header a { color: #fff; text-decoration: none; }
header .brand { font-weight: 700; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
a { color: #0f3d2e; }
a:hover { text-decoration: underline; }
main { max-width: 64rem; margin: 2rem auto; padding: 0 1.5rem; }
section { background: #fff; border: 1px solid #ddd; border-radius: .5rem; padding: 1rem 1.5rem; margin: 1rem 0; }
section h2, section h3 { margin-top: 0; }
button { font: inherit; cursor: pointer; background: #fff; color: #0f3d2e; border: 1px solid #0f3d2e; border-radius: .3rem; padding: .5rem 1rem; }
button:hover { background: #e6eee8; }
:focus-visible { outline: 3px solid #ae751b; outline-offset: 3px; }
[role="alert"], [role="status"] { background: #fff3cd; border: 1px solid #e0c46c; padding: .75rem 1rem; border-radius: .3rem; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: .75rem; border-bottom: 1px solid #ddd; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1rem 0; }
.toolbar [aria-current="page"] { font-weight: 700; }
.actions form { display: inline-block; margin: 0 .25rem .25rem 0; }
.badge { display: inline-block; background: #ae751b; color: #fff; border-radius: .3rem; padding: 0 .4rem; font-size: .85em; }
.legend .swatch { display: inline-block; width: .9rem; height: .9rem; border-radius: .2rem; vertical-align: middle; margin-left: .5rem; }
.swatch.booked { background: #2f6b55; }
.swatch.walk-in { background: #ae751b; }
.calendar-scroll { overflow-x: auto; background: #fff; border: 1px solid #ddd; border-radius: .5rem; }
svg.calendar { display: block; font-size: 12px; }
svg.calendar .bay-name { font-weight: 700; fill: #1b1b1b; }
svg.calendar .hour { fill: #555; }
svg.calendar .hour-rule { stroke: #e3e3e3; }
svg.calendar .bay-rule { stroke: #ccc; }
svg.calendar .open-window { fill: #eef5f0; }
svg.calendar .booking rect { fill: #2f6b55; }
svg.calendar .booking.walk-in rect { fill: #ae751b; }
svg.calendar .booking text { fill: #fff; }
svg.calendar .booking-time { font-size: 11px; }
svg.calendar .now { stroke: #c0392b; stroke-width: 2; }
.note { color: #555; }