.login-page { background:#f8fafc; color:#0f172a; }
.login-page::before { position:fixed; inset:0; content:""; pointer-events:none; background:radial-gradient(circle at 50% 0%,rgba(8,145,178,.08),transparent 27rem),linear-gradient(rgba(148,163,184,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.07) 1px,transparent 1px); background-size:auto,36px 36px,36px 36px; }
.login-stage { position:relative; display:grid; place-items:center; padding-top:1.25rem; padding-bottom:1.25rem; }
.login-card { position:relative; max-width:23rem; padding:1.5rem; border:1px solid #e2e8f0; border-radius:.9rem; background:rgba(255,255,255,.97); box-shadow:0 14px 38px rgba(15,23,42,.09); }
.vessel-emblem { display:grid; place-items:center; width:3.5rem; height:3.5rem; padding:.7rem; border:1px solid #bae6fd; border-radius:.8rem; color:#0e7490; background:#ecfeff; }
.company-name { color:#b45309; font-size:.65rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.product-name { color:#0f172a; font-size:1.65rem; font-weight:750; letter-spacing:-.035em; }
.login-card form { margin-top:1.35rem; }
.login-card form > :not([hidden]) ~ :not([hidden]) { margin-top:.9rem; }
.login-card label > span:first-child { color:#334155; }
.login-input { padding-top:.65rem; padding-bottom:.65rem; border:1px solid #cbd5e1; background:#fff; color:#0f172a !important; transition:border-color .15s ease,box-shadow .15s ease; }
.login-input:hover { border-color:#94a3b8; }
.login-input:focus { border-color:#0891b2; background:#fff; box-shadow:0 0 0 3px rgba(8,145,178,.12); }
#password-visibility { color:#64748b; }
#password-visibility:hover { color:#0e7490; }
.login-button { padding-top:.65rem; padding-bottom:.65rem; background:#0e7490; box-shadow:0 5px 14px rgba(14,116,144,.18); }
.login-button:hover { background:#155e75; transform:translateY(-1px); }
.login-button:active { transform:translateY(0); }
@media (max-width:420px) { .login-stage { place-items:start center; padding-top:max(1rem,env(safe-area-inset-top)); } .login-card { padding:1.25rem; border-radius:.75rem; } }
@media (prefers-reduced-motion:reduce) { .login-button { transform:none !important; } }