:root { color-scheme: light dark; --accent: #2563eb; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.5; }
.topbar { display: flex; align-items: baseline; gap: 1rem; padding: .75rem 1.5rem; background: var(--accent); color: #fff; }
.topbar a { color: inherit; text-decoration: none; }
.brand { font-weight: 700; font-size: 1.25rem; }
.subtitle { opacity: .85; }
main { max-width: 60rem; margin: 2rem auto; padding: 0 1.5rem; }
.hint { opacity: .7; }
footer { max-width: 60rem; margin: 3rem auto 1rem; padding: 0 1.5rem; font-size: .8rem; opacity: .6; }
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.userbox { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.userbox form { margin: 0; }
.role { font-size: .85rem; opacity: .85; }
.userbox button { font: inherit; cursor: pointer; padding: .2rem .7rem; border: 1px solid rgb(255 255 255 / .6); border-radius: .3rem; background: transparent; color: #fff; }
.userbox button:hover { background: rgb(255 255 255 / .15); }
.button { display: inline-block; padding: .5rem 1.2rem; border-radius: .3rem; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; }
.button:hover { filter: brightness(1.1); }