/* MedLink sign-in surface: local, responsive, and independent of Tailwind. */
:root { --login-ink:#10213f; --login-muted:#7286a2; --login-line:#dbe6f0; --login-green:#0cc878; --login-green-dark:#078b5a; --login-navy:#0d1b35; }
body.login-page { min-height:100vh; margin:0; background:#f4f8fc; color:var(--login-ink); font-family:Manrope,Arial,sans-serif; }
body.login-page > .flex { display:grid !important; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); min-height:100vh; overflow:hidden; }
body.login-page > .flex > div:first-child { position:relative; display:flex !important; flex-direction:column; justify-content:center; overflow:hidden; width:auto !important; min-height:100vh; padding:42px clamp(32px,6vw,92px); background:linear-gradient(145deg,#0c1933 0%,#132d50 56%,#106b68 100%); color:#fff; }
body.login-page > .flex > div:first-child:before, body.login-page > .flex > div:first-child:after { position:absolute; border:1px solid rgba(140,246,200,.17); border-radius:50%; content:""; pointer-events:none; }
body.login-page > .flex > div:first-child:before { width:520px; height:520px; right:-260px; top:-170px; box-shadow:0 0 0 42px rgba(140,246,200,.04),0 0 0 84px rgba(140,246,200,.025); }
body.login-page > .flex > div:first-child:after { width:260px; height:260px; left:-165px; bottom:-120px; }
body.login-page > .flex > div:first-child > .absolute { display:none; }
body.login-page > .flex > div:first-child > .relative { z-index:1; max-width:600px; color:#fff; }
body.login-page > .flex > div:first-child > .relative:before { display:block; width:52px; height:52px; margin-bottom:25px; border-radius:16px; background:linear-gradient(135deg,#10d98a,#0bb4d9); color:#062b38; content:"✚"; font-size:32px; font-weight:800; line-height:52px; text-align:center; box-shadow:0 12px 26px rgba(8,212,142,.22); }
body.login-page > .flex > div:first-child h2 { max-width:570px; margin:0 0 16px; color:#fff; font-size:clamp(2.2rem,4.4vw,4.1rem); line-height:1.02; letter-spacing:-.065em; }
body.login-page > .flex > div:first-child p { max-width:530px; margin:0 0 30px; color:#c4d7ea; font-size:1.03rem; line-height:1.7; }
body.login-page > .flex > div:first-child .flex.flex-col { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
body.login-page > .flex > div:first-child .flex.flex-col > div { min-height:86px; padding:13px; border:1px solid rgba(255,255,255,.13); border-radius:15px; background:rgba(255,255,255,.07); }
body.login-page > .flex > div:first-child .flex.flex-col > div .material-icons { display:block; width:auto; padding:0; color:#70efb2; background:none; font-size:20px; }
body.login-page > .flex > div:first-child .flex.flex-col > div span:last-child { display:block; margin-top:9px; color:#fff; font-size:.75rem; font-weight:800; line-height:1.35; }
body.login-page > .flex > div:last-child { display:flex !important; align-items:center; justify-content:center; width:auto !important; min-height:100vh; padding:48px clamp(24px,6vw,86px); background:#fbfdff; }
body.login-page > .flex > div:last-child > form { width:min(430px,100%); }
body.login-page > .flex > div:last-child .w-full.max-w-md { width:100%; max-width:none; }
body.login-page > .flex > div:last-child .mb-10 { margin-bottom:30px; }
body.login-page > .flex > div:last-child .mb-10 > .flex { margin-bottom:26px; }
body.login-page > .flex > div:last-child .mb-10 > .flex > div:first-child { width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg,#10d98a,#0bb4d9); box-shadow:0 12px 24px rgba(8,212,142,.2); }
body.login-page > .flex > div:last-child .mb-10 > .flex > div:first-child .material-icons { color:#062b38; font-size:28px; }
body.login-page > .flex > div:last-child .mb-10 > .flex > span { color:var(--login-ink); font-size:1.25rem; letter-spacing:-.035em; }
body.login-page > .flex > div:last-child h1 { margin:0; color:var(--login-ink); font-size:clamp(1.9rem,3vw,2.35rem); letter-spacing:-.055em; }
body.login-page > .flex > div:last-child .mb-10 > p { margin:9px 0 0; color:var(--login-muted); font-size:.9rem; line-height:1.55; }
body.login-page > .flex > div:last-child .space-y-6 { display:block; }
body.login-page > .flex > div:last-child .space-y-6 > div { margin-bottom:18px; }
body.login-page > .flex > div:last-child label { color:var(--login-ink); font-size:.78rem; font-weight:800; }
body.login-page > .flex > div:last-child input[type=text], body.login-page > .flex > div:last-child input[type=password] { width:100%; min-height:52px; box-sizing:border-box; padding:0 46px; border:1px solid var(--login-line); border-radius:14px; outline:0; background:#fff; color:var(--login-ink); font:inherit; font-size:.88rem; transition:border-color .16s,box-shadow .16s; }
body.login-page > .flex > div:last-child input[type=text]::placeholder, body.login-page > .flex > div:last-child input[type=password]::placeholder { color:#a3b2c5; }
body.login-page > .flex > div:last-child input[type=text]:focus, body.login-page > .flex > div:last-child input[type=password]:focus { border-color:var(--login-green); box-shadow:0 0 0 4px rgba(12,200,120,.13); }
body.login-page > .flex > div:last-child .relative.group > .material-icons { color:#93a8c1; }
body.login-page > .flex > div:last-child .relative.group > button { display:grid; width:32px; height:32px; place-items:center; padding:0; border:0; border-radius:9px; background:transparent; color:#93a8c1; cursor:pointer; }
body.login-page > .flex > div:last-child .relative.group > button:hover { background:#eef8f4; color:var(--login-green-dark); }
body.login-page > .flex > div:last-child .flex.items-center { gap:9px; margin:4px 0 24px; color:var(--login-muted); font-size:.76rem; }
body.login-page > .flex > div:last-child input[type=checkbox] { width:16px; height:16px; accent-color:var(--login-green); }
body.login-page > .flex > div:last-child .login-error { min-height:20px; margin:-3px 0 14px; color:#b42318; font-size:.8rem; font-weight:700; line-height:1.45; }
body.login-page > .flex > div:last-child .space-y-4 { display:block; padding-top:0; }
body.login-page > .flex > div:last-child .space-y-4 > button[name=submitbtn] { display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; gap:8px; border:0; border-radius:14px; background:var(--login-green); color:#052e26; font:inherit; font-size:.85rem; font-weight:800; box-shadow:0 12px 24px rgba(12,200,120,.2); cursor:pointer; transition:transform .16s,box-shadow .16s,background .16s; }
body.login-page > .flex > div:last-child .space-y-4 > button[name=submitbtn]:hover { transform:translateY(-1px); background:#09b66d; box-shadow:0 15px 28px rgba(12,200,120,.28); }
body.login-page .login-biometric-button { display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; gap:8px; margin-top:10px; border:1px solid #cfe2ee; border-radius:14px; background:#fff; color:#12304d; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; transition:background .16s,border-color .16s,transform .16s,box-shadow .16s; }
body.login-page .login-biometric-button:hover:not(:disabled) { transform:translateY(-1px); border-color:#8edebd; background:#f5fffa; box-shadow:0 10px 20px rgba(17,87,83,.08); }
body.login-page .login-biometric-button:disabled { cursor:not-allowed; opacity:.6; }
body.login-page .login-biometric-button .material-symbols-outlined { color:var(--login-green-dark); font-size:21px; }
body.login-page .login-biometric-status { min-height:18px; margin:8px 0 0; color:#66809d; font-size:.7rem; font-weight:700; line-height:1.45; text-align:center; }
body.login-page .login-biometric-status.error { color:#b42318; }
body.login-page > .flex > div:last-child .space-y-4 > .relative { display:flex; align-items:center; gap:12px; height:auto; margin:24px 0; padding:0; color:#9aadbf; font-size:.68rem; font-weight:800; letter-spacing:.12em; }
body.login-page > .flex > div:last-child .space-y-4 > .relative:before, body.login-page > .flex > div:last-child .space-y-4 > .relative:after { height:1px; flex:1; background:#e2eaf2; content:""; }
body.login-page > .flex > div:last-child .space-y-4 > .relative > div { display:none; }
body.login-page > .flex > div:last-child .space-y-4 > .relative > span { padding:0; background:transparent; color:inherit; }
body.login-page .login-guest-link { display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; box-sizing:border-box; gap:8px; border:1px solid #b7e8d2; background:#effbf5; color:var(--login-green-dark); font-size:.85rem; font-weight:800; text-decoration:none; }
body.login-page .login-guest-link:hover { background:#e4f8ed; }
body.login-page > .flex > div:last-child .mt-8 { margin:26px 0 0; color:#8496ad; font-size:.75rem; line-height:1.5; text-align:center; }
body.login-page > .flex > div:last-child .mt-16 { display:flex; justify-content:center; gap:18px; margin-top:42px; color:#9aacbe; font-size:.7rem; }
body.login-page > .flex > div:last-child .mt-16 a { color:inherit; text-decoration:none; }
body.login-page > .flex > div:last-child .mt-16 a:hover { color:var(--login-green-dark); }
@media (max-width:960px) { body.login-page > .flex { grid-template-columns:1fr; } body.login-page > .flex > div:first-child { min-height:360px; padding:32px 26px; } body.login-page > .flex > div:first-child > .relative { margin:auto 0 0; } body.login-page > .flex > div:first-child h2 { font-size:clamp(2.2rem,8vw,3.4rem); } body.login-page > .flex > div:last-child { min-height:0; padding:44px 24px 52px; } }
@media (max-width:560px) { body.login-page > .flex > div:first-child { min-height:0; padding:28px 22px 34px; } body.login-page > .flex > div:first-child h2 { font-size:2.35rem; } body.login-page > .flex > div:first-child .flex.flex-col { grid-template-columns:1fr; gap:8px; } body.login-page > .flex > div:first-child .flex.flex-col > div { display:flex; align-items:center; gap:10px; min-height:0; padding:11px 12px; } body.login-page > .flex > div:first-child .flex.flex-col > div span:last-child { margin:0; } body.login-page > .flex > div:last-child { padding:34px 20px 40px; } body.login-page > .flex > div:last-child .mt-16 { margin-top:30px; } }