/* Public stylesheet: only what the login page needs. The app's own styles are served after login. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.hero { position: relative; height: clamp(260px, 42vh, 420px); overflow: hidden; isolation: isolate; }
.scene { position: absolute; inset: 0; z-index: 0; }
.scene svg { width: 100%; height: 100%; display: block; }
.hero-content { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 clamp(16px, 4vw, 48px) clamp(40px, 6vw, 60px); pointer-events: none; }

.roundel { --size: clamp(56px, 8vw, 84px); display: inline-flex; align-items: center; position: relative; height: var(--size); filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.roundel .ring { width: var(--size); height: var(--size); border-radius: 50%; border: calc(var(--size) * .16) solid var(--red); flex: none; }
.roundel .bar { position: absolute; left: calc(var(--size) * -.15); top: 50%; transform: translateY(-50%); height: calc(var(--size) * .34); padding: 0 calc(var(--size) * .3) 0 calc(var(--size) * 1.05); background: var(--blue); color: #fff; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: clamp(13px, 1.9vw, 22px); display: flex; align-items: center; white-space: nowrap; border-radius: 3px; }

.login-wrap { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.login-card { align-self: start; margin: -40px auto 40px; position: relative; z-index: 2; width: min(400px, calc(100% - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-l); padding: 26px 28px; }
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.field input { border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 11px 12px; background: var(--surface-2); width: 100%; font-size: 16px; }
.field input:focus { outline: 2px solid color-mix(in srgb, var(--blue) 50%, transparent); border-color: var(--blue); }
.btn { border: 1px solid var(--red-2); background: var(--red); color: #fff; padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; width: 100%; box-shadow: var(--shadow-s); }
.btn:hover { background: var(--red-2); }
.err { color: var(--red); font-size: 13.5px; min-height: 1.2em; margin: 4px 0 8px; }