:root {
    color-scheme: light;
    font-family: system-ui, sans-serif;
    color: #203d49;
    background: #eaf2f3;
    --accent: #146875;
    --nav: #173e49;
    --line: #c9dde0;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); }
.top {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 4.25rem; padding: .75rem clamp(1rem, 5vw, 4rem);
    background: #f8fbfb; border-bottom: 1px solid var(--line);
}
.brand { display: flex; gap: .65rem; align-items: center; font-weight: 750; letter-spacing: .05em; }
.brand span { display: grid; place-items: center; width: 2rem; height: 2rem; color: white; background: var(--accent); border-radius: .6rem; }
.workspace { display: grid; grid-template-columns: 13rem minmax(0, 1fr); min-height: calc(100vh - 4.25rem); }
nav { display: flex; flex-direction: column; gap: .25rem; padding: 1.2rem .75rem; background: var(--nav); }
nav a { text-decoration: none; color: #e2f1f1; padding: .75rem 1rem; border-radius: .6rem; }
nav a:hover, nav a[aria-current] { background: var(--accent); color: white; }
main { padding: clamp(1rem, 4vw, 3rem); min-width: 0; }
.auth { max-width: 33rem; margin: 4vh auto; }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 1rem; }
h2 { margin: 0 0 .75rem; font-size: 1.12rem; }
.welcome { margin: 0 0 1.4rem; }
.panel { background: #f8fbfb; border: 1px solid var(--line); border-radius: 1rem; padding: clamp(1rem, 3vw, 1.6rem); }
.cards { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; }
.metric { font-size: 2rem; font-weight: 750; margin: .5rem 0; }
.muted, small { color: #4e6c77; }
.booking { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .65rem; padding: .8rem 0; text-decoration: none; }
.booking + .booking { border-top: 1px solid var(--line); }
.booking:hover strong { text-decoration: underline; }
.booking small { display: block; margin-top: .3rem; }
.status { color: var(--accent); font-size: .85rem; }
button { border: 0; border-radius: .6rem; background: var(--accent); color: white; font: inherit; font-weight: 650; padding: .65rem 1rem; min-height: 44px; cursor: pointer; }
button.secondary { color: var(--accent); background: #e2eff0; }
.auth form { margin: 1.25rem 0; }
.auth label { display: block; margin-bottom: .4rem; }
.auth input:not([type="hidden"]) { width: 100%; min-height: 44px; border: 1px solid #a7c4c9; border-radius: .6rem; font: inherit; color: inherit; padding: .6rem; }
.errorlist { color: #a2253d; padding-left: 1.25rem; }
:focus-visible { outline: 2px solid #008c9c; outline-offset: 3px; }
@media (max-width: 720px) {
    .workspace, .cards { grid-template-columns: minmax(0, 1fr); }
    .workspace { grid-template-rows: auto 1fr; }
    nav { flex-direction: row; flex-wrap: wrap; align-content: start; padding: .5rem; gap: .15rem; }
    nav a { padding: .65rem; min-height: 44px; }
}