*{box-sizing:border-box}
html,body{margin:0;height:100%}
body.login-page{font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:#1a1a1a;background:#e9e6e1 url('studio-desk-screen.jpg') center/cover no-repeat;min-height:100vh;overflow:hidden}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Computer: the form lives on the iMac screen in the photo. JS sets the screen box. */
.monitor{position:fixed;inset:0;pointer-events:none}
.bezel,.chin,.neck,.foot{display:contents}
.chin,.neck,.foot{display:none}
.screen{position:absolute;pointer-events:auto;overflow:hidden}
.screen-in{position:absolute;left:50%;top:50%;width:440px;transform-origin:center;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:10px 24px}
.login-logo{width:210px;height:auto}
.login-head{margin:0;font-size:13px;font-weight:500;color:#2a2a2a}
.login-head span:first-child{font-weight:700;letter-spacing:.16em;display:block;font-size:15px;margin-bottom:2px}
.screen-in form{width:100%;display:flex;flex-direction:column;gap:9px}
.role-switch{display:flex;border:1px solid #1c1d21;border-radius:5px;overflow:hidden;padding:0;margin:2px 0}
.role-switch input{position:absolute;opacity:0;pointer-events:none}
.role-switch label{flex:1;min-height:40px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;letter-spacing:.1em;cursor:pointer;background:#fff;color:#1c1d21;text-transform:uppercase}
.role-switch input:checked+label{background:#1c1d21;color:#fff}
.role-switch input:focus-visible+label{outline:2px solid #2f6fd6;outline-offset:-3px}
.login-field{position:relative}
.login-field svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:#2a2a2a;color:#2a2a2a}
.login-in{height:44px;width:100%;border:1px solid #cfccc7;border-radius:4px;background:#fff;color:#1a1a1a;padding:0 12px 0 38px;font:inherit;font-size:15px}
.login-in:focus{outline:2px solid #1c1d21;outline-offset:1px}
.login-btn{height:44px;border:0;border-radius:4px;background:#1c1d21;color:#fff;font:inherit;font-weight:600;letter-spacing:.14em;font-size:13px;cursor:pointer}
.login-btn:hover{background:#000}
.login-err{margin:0;background:#fbe3e3;color:#8a1c1c;border-radius:5px;padding:8px 10px;font-size:13px}
.login-welcome{margin:0;font-size:13px;color:#4a4a4a}
.login-foot{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:rgba(20,20,22,.85);color:#ececec;padding:10px 18px;border-radius:999px;font-size:13px;text-align:center;width:max-content;max-width:calc(100vw - 32px)}
.login-foot a{color:#fff;font-weight:600}

/* Phone / tall screen: draw a monitor in front of the blurred desk photo. */
body.is-phone{overflow:auto;background:#121417;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:28px 16px calc(24px + env(safe-area-inset-bottom))}
body.is-phone::before{content:"";position:fixed;inset:-20px;background:url('studio-desk-screen.jpg') center/cover;filter:blur(10px) brightness(.55);z-index:-1}
.is-phone .monitor{position:relative;inset:auto;pointer-events:auto;width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center}
.is-phone .bezel{display:block;width:100%;background:#17191c;border-radius:18px 18px 0 0;padding:12px 12px 14px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.is-phone .bezel::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:#3a3d42;margin:-4px auto 8px}
.is-phone .screen{position:static;width:auto;height:auto;background:#f2ece7;border-radius:4px;overflow:visible}
.is-phone .screen-in{position:static;transform:none!important;width:100%;padding:24px 20px 20px}
.is-phone .chin{display:block;width:100%;height:30px;background:linear-gradient(#e9eaec,#cfd1d4);border-radius:0 0 14px 14px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.is-phone .neck{display:block;width:70px;height:34px;background:linear-gradient(90deg,#b9bcc0,#e4e6e8 50%,#b9bcc0);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.is-phone .foot{display:block;width:170px;height:8px;border-radius:8px 8px 3px 3px;background:#d7d9dc}
.is-phone .login-in,.is-phone .login-btn{height:48px;font-size:16px}
.is-phone .role-switch label{min-height:46px}
.is-phone .login-foot{position:static;transform:none;max-width:420px;width:100%;border-radius:14px;line-height:1.5}