:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#f8fafc;background:#eaf0f4}
    *{box-sizing:border-box}
    body{margin:0;padding:0;min-height:100vh;min-height:100svh}
    a{color:inherit;text-underline-offset:4px}
    a:focus-visible{outline:3px solid #99f6e4;outline-offset:5px;border-radius:5px}
    .login-shell{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;overflow:hidden;background:#0f172a}
    .login-shell::before{content:"";position:absolute;inset:0;z-index:-2;background:url("../img/Doctor-and-patient.jpg") center 40%/cover no-repeat}
    .login-shell::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,22,40,.96) 0%,rgba(12,29,48,.84) 42%,rgba(10,30,43,.67) 100%)}
    .login-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:36px 5.5%}
    .logo{display:block;width:220px;max-width:100%;height:auto}
    .back-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:#e2e8f0;font-size:14px}
    .back-link:hover{text-decoration:underline}
    .back-link svg{width:18px;height:18px;flex-shrink:0}
    .login-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:8%;width:100%;max-width:1320px;margin:auto;padding:56px 5.5% 72px;flex:1}
    .intro{max-width:560px}
    .eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#99f6e4;margin:0 0 24px}
    .eyebrow::before{content:"";width:28px;height:2px;background:#5eead4}
    h1{font-size:clamp(38px,4.6vw,66px);line-height:1.08;letter-spacing:-.045em;margin:0 0 24px;text-wrap:balance}
    h1 span{color:#a5e9e0}
    .intro-copy{font-size:18px;line-height:1.75;color:#d9e5ed;max-width:39ch;margin:0}
    .intro-note{display:flex;align-items:center;gap:14px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);color:#cbd5e1;font-size:13px;line-height:1.6}
    .intro-note svg{width:24px;height:24px;flex-shrink:0;color:#99f6e4}
    .login-panel{width:100%;max-width:450px;justify-self:end;padding:42px;border:1px solid rgba(226,232,240,.24);border-radius:26px;background:rgba(20,39,57,.92);box-shadow:0 24px 64px rgba(0,0,0,.2)}
    @supports(backdrop-filter:blur(24px)){.login-panel{background:rgba(20,39,57,.82);backdrop-filter:blur(24px)}}
    .panel-icon{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border:1px solid rgba(153,246,228,.3);border-radius:16px;background:rgba(94,234,212,.1);color:#99f6e4;margin-bottom:26px}
    .panel-icon svg{width:26px;height:26px}
    h2{font-size:30px;letter-spacing:-.035em;line-height:1.2;margin:0 0 12px}
    .panel-copy{font-size:15px;line-height:1.75;color:#d6e2eb;margin:0 0 28px}
    .login-button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:15px 20px;border:1px solid rgba(153,246,228,.35);border-radius:12px;background:#0f766e;color:#fff;text-decoration:none;font-size:15px;font-weight:650;transition:background .2s,transform .2s}
    .login-button:hover{background:#115e59;transform:translateY(-1px)}
    .login-button svg{width:19px;height:19px}
    .login-help{margin:22px 0 0;text-align:center;font-size:13px;color:#cbd5e1;line-height:1.8}
    .login-help a{font-weight:600;color:#f1f5f9}
    .divider{height:1px;background:rgba(226,232,240,.18);margin:30px 0}
    .register{margin:0;color:#cbd5e1;text-align:center;font-size:14px;line-height:1.9}
    .register a{display:inline-block;font-weight:650;color:#99f6e4}
    .login-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0 5.5% 28px;color:#cbd5e1;font-size:12px;line-height:1.7}
    .login-footer p{margin:0}
    .login-footer a{overflow-wrap:anywhere}
    @media(min-width:1600px){.login-main{padding-top:90px;padding-bottom:110px}}
    @media(max-width:850px){.login-main{grid-template-columns:1fr;gap:36px;padding-top:28px}.intro{max-width:600px}.intro-note{display:none}.login-panel{justify-self:start;max-width:600px}.intro-copy{max-width:52ch}h1{max-width:18ch}.login-header{padding-bottom:24px}.login-shell::after{background:linear-gradient(160deg,rgba(9,22,40,.95),rgba(12,29,48,.85))}}
    @media(max-width:480px){.login-header{padding:24px;gap:14px}.logo{width:155px}.back-link{font-size:12px}.login-main{padding:16px 24px 36px}.login-panel{padding:28px 24px;border-radius:20px}.intro-copy{font-size:16px}h1{font-size:38px}.login-footer{padding:0 24px 24px}}
    @media(prefers-reduced-motion:reduce){.login-button{transition:none}.login-button:hover{transform:none}}

/* Shared account form controls. */
button,input{font:inherit}
.login-panel form{margin:0}
.auth-field{margin-bottom:18px}
.auth-field label{display:block;color:#f1f5f9;font-size:13px;font-weight:600;margin-bottom:8px}
.auth-field input{display:block;width:100%;min-width:0;min-height:50px;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;color:#0f172a;padding:13px 14px;font-size:15px;color-scheme:light}
.auth-field input::placeholder{color:#64748b;opacity:1}
.auth-field input:focus-visible{outline:3px solid #99f6e4;outline-offset:3px;border-color:#0f766e}
.auth-password{position:relative}
.auth-password input{padding-right:72px}
.password-toggle{position:absolute;right:5px;top:5px;bottom:5px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:#0f766e;font-size:12px;font-weight:700;cursor:pointer}
.password-toggle:hover{background:#e2e8f0}
.password-toggle:focus-visible{outline:2px solid #0f766e;outline-offset:1px}
.auth-options{display:flex;justify-content:flex-end;margin:-3px 0 22px;font-size:13px}
.auth-options a{color:#e2e8f0}
.auth-form .login-button{width:100%;font-family:inherit}
.auth-form .login-button:disabled{background:#284d53;color:#e2e8f0;border-color:#63858b;cursor:not-allowed;transform:none}
.auth-notice{margin:0 0 22px;padding:12px 14px;border:1px solid rgba(153,246,228,.25);border-radius:10px;background:rgba(15,23,42,.3);font-size:13px;line-height:1.65;color:#e2e8f0}
.auth-notice a{color:#99f6e4}
.auth-footnote{margin:14px 0 0;color:#cbd5e1;font-size:12px;line-height:1.7}
.auth-error{color:#fecaca;font-size:13px;margin:8px 0 0}
[hidden]{display:none!important}