:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; padding: 28px 18px 16px; display: flex; flex-direction: column; align-items: center; background: linear-gradient(145deg,#e9f0fb,#f7f9fc 45%,#edf2f8); color: #17243b; }
.shell { width: min(100%, 540px); margin: auto 0; }
.intro { margin-bottom: 20px; }
.eyebrow { margin: 0 0 8px; color: #315dc1; font-size: .82rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
h1 { margin: 0 0 8px; font-size: clamp(1.7rem,5vw,2.2rem); line-height: 1.25; }
.intro > p:last-child { margin: 0; color: #52627a; line-height: 1.6; }
.surface-nav { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.surface-nav a { padding: 9px 13px; border: 1px solid #d6e0f0; border-radius: 10px; background: rgba(255,255,255,.72); color: #274269; font-size: .92rem; font-weight: 650; text-decoration: none; }
.surface-nav a:hover,.surface-nav a:focus-visible { border-color: #315dc1; }
.surface-nav .current { border-color: #315dc1; background: #315dc1; color: white; }
.card { padding: clamp(20px,5vw,30px); border: 1px solid #e0e7f1; border-radius: 18px; background: white; box-shadow: 0 18px 45px rgba(28,50,85,.1); }
.card h2 { margin: 0 0 16px; font-size: 1.13rem; }
.section-form { margin-top: 28px; padding-top: 25px; border-top: 1px solid #e5eaf2; }
.signed-in { margin: 0 0 18px; line-height: 1.5; }
.hint { margin: 10px 0 18px; color: #607089; font-size: .9rem; line-height: 1.6; }
.card a { color: #2855b8; }
.card-footer { margin: 24px 0 0; }
label { display: grid; gap: 7px; margin: 15px 0; font-weight: 650; font-size: .93rem; }
input { width: 100%; padding: 11px 12px; border: 1px solid #c8d3e3; border-radius: 9px; color: inherit; font: inherit; }
input:focus-visible { outline: 2px solid #315dc1; outline-offset: 2px; }
button { width: 100%; margin-top: 9px; padding: 12px; border: 0; border-radius: 9px; background: #315dc1; color: white; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #244a9e; }
.message { padding: 11px 13px; border-radius: 9px; line-height: 1.5; }
.message.error { background: #fff0ee; color: #a5251b; }
.message.success { background: #e8f6ee; color: #1e6940; }
.icp-footer { width: 100%; margin-top: 26px; text-align: center; font-size: 12px; line-height: 1.5; }
.icp-footer a { color: #667085; text-decoration: none; }
.icp-footer a:hover,.icp-footer a:focus-visible { text-decoration: underline; }
@media (max-width: 420px) { body { padding: 22px 14px 16px; } .surface-nav a { flex: 1 1 auto; text-align: center; } }