:root { color-scheme: light; font-family: system-ui, sans-serif; color: #152d3b; background: #edf3f5; }
* { box-sizing: border-box; }
body { margin: 0; padding: 24px 16px; }
main { width: 100%; max-width: 480px; margin: 4vh auto; padding: 28px; background: white; border-radius: 16px; box-shadow: 0 8px 32px #152d3b14; }
h1 { font-size: 1.8rem; line-height: 1.2; }
p { line-height: 1.5; }
.brand { font-weight: 700; color: #28556c; }
label { font-weight: 600; }
input[type=text], select, button { width: 100%; min-height: 48px; font: inherit; border-radius: 8px; padding: 12px; }
input[type=text], select { border: 1px solid #647b88; margin-top: 8px; }
#vessel-field { margin-top: 24px; }
button { border: 0; background: #164f6a; color: white; font-weight: 700; cursor: pointer; }
button:hover { background: #103d52; }
:focus-visible { outline: 3px solid #bb6900; outline-offset: 3px; }
.hint { color: #4d6470; font-size: .9rem; }
#access-error { color: #a12222; }
[aria-invalid=true] { border-color: #a12222; }
[hidden] { display: none; }
@media (max-width: 360px) { main { padding: 20px; } }