.login-body{min-height:100svh;padding:clamp(24px,5.7vw,96px);background:radial-gradient(ellipse at center,#f3f5f9,#fdfdfd)}
.login-wrap{width:min(1488px,100%);min-height:750px;grid-template-columns:50.8% 49.2%;border-radius:20px;box-shadow:0 20px 55px #1b000216}
.brand-panel{padding:44px 54px;background:linear-gradient(180deg,#0000,#000a 92%),url('login-dragon-bg.webp') center/100% 100% no-repeat}
.brand-center{top:calc(49% - 100px);transform:translate(-50%,-50%);width:94%}
.brand-center .company-logo-frame{display:inline-grid;place-items:center;width:240px;height:100px;padding:0}
.brand-center .company-logo-frame img{display:block;width:100%;height:100%;object-fit:contain}
.brand-center h1{font-size:40px;line-height:1.4;margin:18px 0 4px;font-weight:700;letter-spacing:.2px}
.brand-center p{font-size:21px;color:#c9ddf9;margin:0}
.benefits{bottom:44px;left:9%;right:9%;align-items:center;justify-content:space-between;gap:20px;font-size:14px;white-space:nowrap}
.benefits span{display:flex;align-items:center;gap:11px}
.benefits span+span{border-left:1px solid #7294b9;padding-left:28px}
.login-icon{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.benefits .login-icon{width:29px;height:29px}
.login-panel{padding:64px 11.1%}
.login-panel form{width:100%;max-width:560px;transform:translateY(20px)}
.login-panel h2{font-size:46px;line-height:1.4;letter-spacing:-1px;color:#082c63;font-weight:700;margin:0 0 4px}
.login-panel form>p{font-size:21px;line-height:1.6;color:#8796b3;margin:0 0 34px;white-space:nowrap}
.login-panel label{font-size:17px;margin:20px 0 6px;color:#082b62;font-weight:600}
.login-field{position:relative;color:#4c6590}
.login-field>.login-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);pointer-events:none}
.login-panel .login-field input{height:64px;margin:0;padding:14px 56px 14px 62px;background:#f0f4fa;border:1px solid #d9e2f0;border-radius:13px;color:#1d1a1a;font-size:18px;outline:none}
.login-panel .login-field input:focus{border-color:#276fce;box-shadow:0 0 0 3px #2475dd18}
.login-panel input::placeholder{color:#98a5ba;font-size:16px}
.password-toggle{position:absolute;right:12px;top:10px;display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:#8798b6;cursor:pointer;border-radius:8px}
.login-options{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0 26px;font-size:17px}
.login-options .remember{display:flex;align-items:center;gap:11px;margin:0;font-weight:400;cursor:pointer}
.login-panel .remember input{width:25px;height:25px;margin:0;padding:0;accent-color:#1675ff;cursor:pointer}
.forgot-password{border:0;background:none;padding:0;color:#0968ff;cursor:pointer;font:inherit}
.login-panel .primary{height:64px;margin:0;border-radius:13px;background:linear-gradient(180deg,#0b4188,#062b61);font-size:21px;box-shadow:0 10px 24px #0b40851a;display:flex;align-items:center;justify-content:center;gap:16px}
.login-panel .primary:hover{background:linear-gradient(180deg,#124f9a,#073574)}
.login-body button:focus-visible,.login-body input:focus-visible{outline:3px solid #5da4ff;outline-offset:3px}
.login-panel .alert{margin:15px 0;font-size:14px}
.recovery-dialog{padding:30px;color:#173c78;line-height:1.8}.recovery-dialog p{margin:16px 0 24px}.recovery-dialog button{border:0;border-radius:8px;padding:10px 25px;background:#0b4188;color:#fff;cursor:pointer}
@media(min-width:1700px){.login-wrap{min-height:800px}}
@media(max-width:1250px){.login-body{padding:36px}.login-wrap{min-height:680px}.login-panel{padding:42px 8%}.login-panel h2{font-size:36px}.login-panel form>p{font-size:16px}.brand-panel{padding:36px}.brand-center h1{font-size:30px}.brand-center p{font-size:17px}.benefits{left:6%;right:6%;gap:10px;font-size:11px}.benefits span{gap:6px}.benefits span+span{padding-left:12px}.benefits .login-icon{width:24px}}
@media(max-width:760px){.login-body{padding:20px 16px}.login-wrap{grid-template-columns:1fr;min-height:0;border-radius:18px;max-width:560px}.brand-panel{min-height:310px;padding:23px;background-size:cover;background-position:center 58%}.brand-tag{display:block;font-size:8px;letter-spacing:3px}.brand-center{top:57%}.brand-center .company-logo-frame{width:154px;height:65px}.brand-center h1{font-size:27px;margin-top:7px}.brand-center p{font-size:15px}.benefits{display:none}.login-panel{padding:32px 26px 38px}.login-panel form{transform:none}.login-panel h2{font-size:32px}.login-panel form>p{font-size:14px;white-space:normal;margin-bottom:24px}.login-panel label,.login-options{font-size:15px}.login-panel .login-field input{height:58px;font-size:16px}.password-toggle{top:7px}.login-panel .primary{height:58px;font-size:18px}}
@media(min-width:1251px){.brand-center .company-logo-frame{width:260px;height:110px}.brand-center h1{margin-top:0;font-size:42px}.login-panel form{transform:translateY(36px)}.login-panel h2{font-size:48px}}
/* Desktop: fit the card inside one screen (no vertical scroll) */
@media(min-width:761px){.login-body{--lp:clamp(16px,4vh,48px);padding:var(--lp) clamp(24px,4vw,72px)}.login-wrap{height:calc(100svh - 2*var(--lp));min-height:560px;max-height:880px}.brand-panel{background-size:cover}.login-panel{padding-top:32px;padding-bottom:32px}.login-panel form{transform:none}}
@media(min-width:761px) and (max-height:820px){.brand-center .company-logo-frame{width:210px;height:88px}.brand-center h1{font-size:36px}.brand-center p{font-size:18px}.benefits{bottom:28px}.login-panel h2{font-size:40px}.login-panel form>p{font-size:18px;margin-bottom:22px}.login-panel label{font-size:16px;margin:14px 0 6px}.login-panel .login-field input{height:54px;font-size:17px}.password-toggle{top:5px}.login-options{margin:16px 0 20px;font-size:16px}.login-panel .primary{height:56px;font-size:19px}}
/* DRAGON Agent brand: square logo above the wordmark image */
.brand-panel{background-color:#050505}
.brand-center .company-logo-frame{width:198px;height:170px;filter:drop-shadow(0 6px 22px #c9020c55)}
.brand-center .company-logo-frame img{width:100%;height:100%}
.brand-center h1{margin:22px 0 10px;line-height:0}
.brand-center .brand-wordmark{display:inline-block;object-fit:fill;width:min(400px,78%);height:auto;filter:drop-shadow(0 2px 10px #000c)}
.brand-center p{color:#e6e6e6;text-shadow:0 1px 8px #000}
.benefits{color:#f2f2f2}
.benefits span+span{border-left-color:#7b010780}
@media(min-width:761px) and (max-height:820px){.brand-center .company-logo-frame{width:152px;height:130px}.brand-center .brand-wordmark{width:min(340px,74%)}}
@media(max-width:760px){.brand-center .company-logo-frame{width:112px;height:96px}.brand-center h1{margin:12px 0 6px}.brand-center .brand-wordmark{width:min(260px,72%)}}
/* DRAGON Agent brand: red-black login panel */
.login-panel h2{color:#141414}
.login-panel form>p{color:#7a7a7a}
.login-panel label{color:#1d1d1d}
.login-field{color:#630106}
.login-panel .login-field input{background:#f6f4f4;border-color:#e6dede}
.login-panel .login-field input:focus{border-color:#7b0107;box-shadow:0 0 0 3px #7b010720}
.password-toggle{color:#8a7f7f}
.login-panel .remember input{accent-color:#7b0107}
.forgot-password{color:#6c0106}
.login-panel .primary{background:linear-gradient(180deg,#7b0107,#3d0003);box-shadow:0 10px 24px #65010626}
.login-panel .primary:hover{background:linear-gradient(180deg,#93030a,#4f0206)}
.login-body button:focus-visible,.login-body input:focus-visible{outline-color:#990209}
.recovery-dialog{color:#1d1d1d}.recovery-dialog button{background:#670106}