:root { color-scheme: light; font-family: Inter, ui-rounded, system-ui, sans-serif; color: #17324d; background: #d8eef2; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 50% 10%, #fff8df 0 12%, transparent 38%), linear-gradient(150deg, #8bd0df, #d8eef2 55%, #e9d6a4); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(430px, 100%); padding: clamp(26px, 6vw, 44px); border: 1px solid #cabd9e; border-radius: 24px; background: rgb(255 253 245 / 96%); box-shadow: 0 22px 65px rgb(23 50 77 / 24%); }
.eyebrow { margin: 0 0 6px; color: #8a5900; font-size: .76rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.1rem); line-height: .98; }
.intro { margin: 18px 0 24px; color: #52667a; line-height: 1.55; }
form { display: grid; gap: 9px; }
label { margin-top: 7px; font-weight: 850; }
input { width: 100%; min-height: 49px; padding: 10px 13px; border: 2px solid #c8b996; border-radius: 11px; background: white; color: #17324d; font: inherit; }
input:focus { outline: 3px solid #8acfe0; outline-offset: 2px; border-color: #17324d; }
button { min-height: 52px; margin-top: 13px; border: 0; border-radius: 12px; background: #17324d; color: white; font: 900 1rem/1 inherit; cursor: pointer; box-shadow: inset 0 -4px rgb(0 0 0 / 18%); }
button:disabled { cursor: wait; opacity: .65; }
.soundbite-recorder { display: grid; gap: 7px; margin: 10px 0 2px; border: 1px solid #cabd9e; border-radius: 12px; padding: 12px; }
.soundbite-recorder legend { font-weight: 900; }
.soundbite-recorder legend small, .soundbite-recorder p, .soundbite-recorder span { color: #657484; font-size: .78rem; }
.soundbite-recorder p { margin: 0; line-height: 1.35; }
.soundbite-recorder div { display: flex; gap: 7px; }
.soundbite-recorder button { min-height: 36px; margin: 0; padding: 6px 10px; font-size: .78rem; }
.soundbite-recorder audio { width: 100%; height: 36px; }
.status { min-height: 1.5em; margin: 4px 0 0; color: #a52f29; font-weight: 800; }
.privacy { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #ded4bb; color: #657484; font-size: .82rem; line-height: 1.45; }
@media (prefers-reduced-motion: no-preference) { .login-card { animation: arrive .35s ease-out; } @keyframes arrive { from { opacity: 0; transform: translateY(14px); } } }