:root{--login-ink:#172239;--login-muted:#78849a;--login-blue:#3c63e8;--login-border:#e5e9f1}
.login-page{min-height:100vh;overflow-x:hidden;background:#f7f8fb;color:var(--login-ink);font-family:"DM Sans",sans-serif;font-size:14px}
.login-layout{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr)}
.login-showcase{position:relative;overflow:hidden;background:#111a2e;color:#fff;padding:42px clamp(36px,6.1vw,96px) 25px;display:flex;flex-direction:column;justify-content:center;min-height:100vh}
.showcase-grain{position:absolute;inset:0;pointer-events:none;opacity:.24;background-image:radial-gradient(rgba(255,255,255,.15) .7px,transparent .7px);background-size:18px 18px;mask-image:linear-gradient(115deg,#000,transparent 70%)}
.login-showcase:before,.login-showcase:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.login-showcase:before{width:600px;height:600px;right:-260px;top:-250px;border:1px solid rgba(147,170,255,.09);box-shadow:0 0 0 70px rgba(147,170,255,.018),0 0 0 140px rgba(147,170,255,.016)}
.login-showcase:after{width:460px;height:460px;left:-315px;bottom:-260px;border:1px solid rgba(147,170,255,.1);box-shadow:0 0 0 55px rgba(147,170,255,.02)}
.showcase-content{width:min(100%,570px);margin:0 auto;position:relative;z-index:1;display:flex;flex-direction:column}
.login-brand{display:inline-flex;align-items:center;gap:12px;width:max-content;text-decoration:none;color:#fff}
.login-brand:hover{color:#fff}
.login-brand-mark{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#6785ff,#385ada);color:#fff;font:800 21px "Manrope",sans-serif;box-shadow:0 6px 18px rgba(56,90,218,.35)}
.login-brand-name{font:800 17px "Manrope",sans-serif;letter-spacing:-.7px}
.login-brand-name span{font-weight:500;color:#9eabc5;margin-left:4px}
.showcase-copy{margin-top:clamp(43px,8vh,86px);position:relative;z-index:2}
.showcase-kicker{display:flex;align-items:center;gap:9px;color:#aab8d6;font-size:10px;font-weight:700;letter-spacing:1.55px}
.showcase-kicker>span{width:7px;height:7px;background:#88a1ff;border-radius:50%;box-shadow:0 0 13px #88a1ff}
.showcase-copy h1{font:700 clamp(38px,4.1vw,58px)/1.13 "Manrope",sans-serif;letter-spacing:-2.7px;margin:17px 0 14px}
.showcase-copy h1 span{color:#92aaff}
.showcase-copy p{max-width:390px;color:#a8b3c9;font-size:14px;line-height:1.75;margin:0}
.showcase-visual{height:310px;position:relative;margin:19px -10px 0}
.visual-glow{position:absolute;width:310px;height:220px;left:50%;top:48%;transform:translate(-50%,-50%);background:rgba(60,99,232,.23);filter:blur(75px);border-radius:50%}
.visual-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(170,190,255,.09);border-radius:50%;transform:translate(-50%,-50%) rotate(-12deg)}
.orbit-one{width:520px;height:235px}.orbit-two{width:450px;height:195px;transform:translate(-50%,-50%) rotate(18deg)}
.dashboard-preview{position:absolute;z-index:2;width:min(410px,82%);height:238px;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-2.2deg);padding:16px 19px 13px;background:linear-gradient(145deg,rgba(35,48,76,.97),rgba(22,33,57,.98));border:1px solid rgba(177,194,238,.2);border-radius:13px;box-shadow:0 30px 60px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.06)}
.preview-top{height:20px;display:flex;justify-content:space-between;align-items:center;color:#cad5eb}
.preview-logo{font-size:9px;font-weight:700;letter-spacing:.25px}.preview-logo i{color:#88a1ff;margin-right:5px}
.preview-dots{display:flex;gap:4px}.preview-dots i{width:4px;height:4px;border-radius:50%;background:#697895}
.preview-caption{margin-top:14px;color:#8291ad;font-size:7px;letter-spacing:1px;font-weight:700}
.preview-title{font:600 13px "Manrope",sans-serif;color:#f1f4fb;margin-top:3px}
.preview-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.preview-stat{height:51px;border:1px solid rgba(191,205,238,.12);background:rgba(255,255,255,.025);border-radius:7px;padding:7px 9px;position:relative}
.preview-stat>span{display:block;color:#9caaca;font-size:7px}.preview-stat>strong{display:block;color:#eef2fb;font-size:9px;margin-top:3px;font-weight:600}
.preview-bar{position:absolute;right:9px;bottom:10px;width:58px;height:3px;border-radius:4px;background:#3e4b66}.preview-bar i{display:block;width:73%;height:100%;border-radius:4px;background:#819dff}
.preview-avatars{position:absolute;right:8px;bottom:6px;display:flex;align-items:center}.preview-avatars>*{width:15px;height:15px;border-radius:50%;margin-left:-3px;border:1px solid #263653;display:grid;place-items:center;font-size:6px;font-style:normal;background:#7893f2;color:#fff}.preview-avatars i:nth-child(2){background:#46a88a}.preview-avatars i:nth-child(3){background:#d78c59}.preview-avatars b{background:#374764;color:#ced7e9;font-weight:500}
.preview-chart{height:74px;position:relative;margin-top:10px}.chart-lines{position:absolute;inset:6px 0 9px;display:flex;flex-direction:column;justify-content:space-between}.chart-lines i{height:1px;background:rgba(195,207,234,.09)}
.preview-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.chart-area{fill:url(#chartFill)}.chart-line{fill:none;stroke:#8da8ff;stroke-width:2}
.floating-note{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;background:rgba(30,44,72,.92);border:1px solid rgba(192,207,246,.16);border-radius:9px;padding:9px 11px;box-shadow:0 12px 30px rgba(0,0,0,.2);backdrop-filter:blur(10px)}
.floating-note>span:nth-child(2){display:flex;flex-direction:column;gap:2px}.floating-note strong{color:#f4f6fb;font-size:9px;font-weight:650}.floating-note small{color:#a1aec7;font-size:7px}.note-top{top:12px;right:1px}.note-bottom{bottom:3px;left:2px}
.note-icon,.note-check{width:27px;height:27px;display:grid;place-items:center;border-radius:7px;background:rgba(124,154,255,.15);color:#9cb2ff;font-size:13px}.note-check{background:rgba(72,187,144,.15);color:#69d1a7}.note-arrow{color:#8ea4d4;font-size:10px;margin-left:4px}
.showcase-footer{border-top:1px solid rgba(220,229,248,.12);padding-top:16px;display:flex;justify-content:space-between;gap:10px;color:#93a0ba;font-size:9px;letter-spacing:.2px}
.showcase-footer i{font-size:12px;color:#91a9ff;margin-right:5px;vertical-align:-1px}
.login-panel{min-height:100vh;background:#fff;display:flex;align-items:center;justify-content:center;padding:56px clamp(36px,7vw,100px) 30px}
.login-panel-inner{width:min(100%,405px);min-height:calc(100vh - 86px);display:flex;flex-direction:column;justify-content:center}
.mobile-brand{display:none}
.login-form-wrap{width:100%;margin:auto 0}
.login-heading{margin-bottom:34px}
.login-eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:1.45px;color:#72809a}
.login-heading h2{font:700 clamp(25px,2.4vw,31px)/1.24 "Manrope",sans-serif;letter-spacing:-1.1px;color:#18233a;margin:11px 0 8px}
.login-heading p{margin:0;color:#7e899c;font-size:13px}
.login-form{display:flex;flex-direction:column;gap:22px}
.login-field>label,.login-label-row>label{display:block;color:#35415a;font-size:11px;font-weight:700;margin-bottom:8px}
.login-label-row{display:flex;align-items:center;justify-content:space-between}
.login-label-row a{font-size:11px;font-weight:650;color:#3b5ed1;text-decoration:none}.login-label-row a:hover{text-decoration:underline}
.login-input-wrap{height:50px;display:flex;align-items:center;gap:11px;padding:0 14px;border:1px solid #e1e6ef;background:#fff;border-radius:8px;transition:border-color .18s,box-shadow .18s,background .18s}
.login-input-wrap:focus-within{border-color:#8199f5;box-shadow:0 0 0 3px rgba(60,99,232,.11);background:#fff}
.login-input-wrap.has-error{border-color:#d94f5b}
.login-input-icon{width:29px;height:29px;flex:none;display:grid;place-items:center;border-radius:8px;background:#edf2ff;color:#4a68d2}.login-input-icon i{font-size:15px}
.login-input-wrap input{min-width:0;flex:1;height:100%;border:0;outline:0;background:transparent;color:#202b42;font:500 12px "DM Sans",sans-serif}
.login-input-wrap input::placeholder{color:#a6afbd}
.password-toggle{display:grid;place-items:center;width:31px;height:31px;margin-right:-6px;padding:0;border:0;border-radius:8px;background:#f0f3ff;color:#4767d3}.password-toggle:hover{background:#e2e9ff;color:#294cbd}.password-toggle i{font-size:15px}
.login-field-error{display:block;margin-top:6px;color:#c23d45;font-size:11px}
.login-options{margin-top:-4px}
.remember-option{display:inline-flex;align-items:center;gap:9px;position:relative;color:#68758a;font-size:11px;cursor:pointer;user-select:none}
.remember-option input{position:absolute;width:1px;height:1px;opacity:0}
.custom-check{width:16px;height:16px;border:1px solid #d5dbe6;border-radius:4px;display:grid;place-items:center;color:transparent;background:#fff;transition:.16s}
.custom-check i{font-size:11px}.remember-option input:checked+.custom-check{background:#3c63e8;border-color:#3c63e8;color:white}.remember-option input:focus-visible+.custom-check{outline:3px solid rgba(60,99,232,.2)}
.login-submit{height:49px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:8px;background:linear-gradient(105deg,#4268ed,#684de0);color:#fff;font:700 12px "DM Sans",sans-serif;box-shadow:0 8px 20px rgba(66,86,218,.25);transition:transform .15s,background .15s,box-shadow .15s}
.login-submit:hover{background:linear-gradient(105deg,#355bdb,#5940cb);box-shadow:0 10px 24px rgba(66,86,218,.33);transform:translateY(-1px)}.login-submit:active{transform:translateY(0)}.login-submit i{font-size:14px;transition:transform .15s}.login-submit:hover i{transform:translateX(3px)}
.login-security{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:27px;color:#8994a6;font-size:10px}.security-icon{width:23px;height:23px;display:grid;place-items:center;background:#f2f5fc;border-radius:50%;color:#6380d8;font-size:11px}
.login-footer{display:flex;justify-content:space-between;gap:12px;padding-top:24px;color:#98a1b0;font-size:9px}
.login-alert{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border-radius:7px;font-size:11px;margin:-16px 0 20px}
.login-alert i{font-size:14px}.login-alert-success{background:#eef9f3;color:#237b52}.login-alert-error{background:#fff2f1;color:#b43e43}
@media(max-width:1100px){.login-showcase{padding-left:34px;padding-right:34px}.login-panel{padding-left:48px;padding-right:48px}.showcase-copy h1{font-size:43px}.showcase-visual{margin-left:-22px;margin-right:-22px}}
@media(max-width:860px){.login-layout{display:block}.login-showcase{display:none}.login-panel{min-height:100vh;padding:32px 24px 20px;background:radial-gradient(ellipse at 92% 3%,rgba(111,143,255,.12),transparent 30%),#fff}.login-panel-inner{width:min(100%,420px);min-height:calc(100vh - 52px)}.mobile-brand{display:flex;align-items:center;gap:10px;margin:0 0 48px}.mobile-brand .login-brand-mark{width:35px;height:35px;border-radius:10px;font-size:18px}.mobile-brand .login-brand-name{font-size:16px}.login-heading{margin-bottom:30px}.login-form-wrap{margin:auto 0}}
@media(max-width:420px){.login-panel{padding:24px 21px 16px}.mobile-brand{margin-bottom:42px}.login-heading h2{font-size:26px}.login-footer{font-size:8px}.login-security{font-size:9px}}
@media(max-height:650px) and (min-width:861px){.login-layout{display:block}.login-showcase{display:none}.login-panel{min-height:100vh;padding:20px 24px 14px;background:radial-gradient(ellipse at 92% 3%,rgba(111,143,255,.12),transparent 30%),#fff}.login-panel-inner{width:min(100%,400px);min-height:calc(100vh - 34px)}.mobile-brand{display:flex;align-items:center;gap:10px;margin:0 0 18px}.mobile-brand .login-brand-mark{width:32px;height:32px;border-radius:9px;font-size:17px}.mobile-brand .login-brand-name{font-size:15px}.login-heading{margin-bottom:20px}.login-heading h2{margin-top:7px;font-size:26px}.login-form{gap:15px}.login-input-wrap{height:45px}.login-submit{height:45px}.login-security{margin-top:14px}.login-footer{padding-top:13px}}
@media(max-width:860px){
    .login-page{background:#10182b;color:#f5f7ff}
    .login-panel{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 12% 9%,rgba(80,115,255,.31),transparent 34%),radial-gradient(ellipse at 92% 80%,rgba(31,191,218,.14),transparent 37%),linear-gradient(145deg,#111a30 0%,#17233e 52%,#11192d 100%);color:#f5f7ff}
    .login-panel:before,.login-panel:after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(2px)}
    .login-panel:before{width:320px;height:320px;top:-150px;right:-110px;background:radial-gradient(circle,rgba(101,132,255,.25),rgba(101,132,255,.06) 48%,transparent 72%);box-shadow:0 0 90px rgba(83,116,255,.17)}
    .login-panel:after{width:270px;height:270px;left:-140px;bottom:-90px;background:radial-gradient(circle,rgba(44,195,220,.17),rgba(44,195,220,.04) 50%,transparent 72%);box-shadow:0 0 80px rgba(44,195,220,.12)}
    .login-panel-inner{position:relative;z-index:1}
    .mobile-brand .login-brand-mark{background:linear-gradient(145deg,#829cff,#4b64eb);box-shadow:0 8px 24px rgba(79,106,237,.4)}
    .mobile-brand .login-brand-name{color:#fff}.mobile-brand .login-brand-name span{color:#a7b6dc}
    .login-eyebrow{color:#9eafff}
    .login-heading h2{color:#f8f9ff}
    .login-heading p{color:#aab5cd}
    .login-field>label,.login-label-row>label{color:#e0e6f4}
    .login-label-row a{color:#a6b8ff}
    .login-input-wrap{border-color:rgba(193,207,244,.17);background:rgba(255,255,255,.065);box-shadow:inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(12px)}
    .login-input-wrap:focus-within{border-color:rgba(137,160,255,.8);background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(102,131,255,.16),0 0 24px rgba(87,119,255,.1)}
    .login-input-wrap.has-error{border-color:#ff8c9a}
    .login-input-icon{background:linear-gradient(145deg,rgba(117,146,255,.25),rgba(87,113,227,.17));color:#b6c4ff}
    .login-input-wrap input{color:#f6f7ff}.login-input-wrap input::placeholder{color:#8f9bb5}
    .password-toggle{background:rgba(117,146,255,.18);color:#bcc8ff}.password-toggle:hover{background:rgba(117,146,255,.3);color:#fff}
    .remember-option{color:#c0c9db}.custom-check{background:rgba(255,255,255,.07);border-color:rgba(203,215,244,.27)}
    .remember-option input:checked+.custom-check{background:linear-gradient(145deg,#6888ff,#7358eb);border-color:#7893ff}
    .login-submit{background:linear-gradient(105deg,#5879ff,#7958ee);box-shadow:0 9px 26px rgba(90,105,245,.33),inset 0 1px rgba(255,255,255,.22)}
    .login-submit:hover{background:linear-gradient(105deg,#6886ff,#8869fb);box-shadow:0 12px 30px rgba(90,105,245,.43),inset 0 1px rgba(255,255,255,.28)}
    .security-icon{background:rgba(124,155,255,.17);color:#aabbff}
    .login-security{color:#aab5cd}
    .login-footer{color:#8896b1;border-top:1px solid rgba(208,219,245,.12)}
    .login-alert-success{background:rgba(33,162,112,.17);color:#9ae5c3;border:1px solid rgba(110,225,171,.2)}
    .login-alert-error{background:rgba(214,74,95,.18);color:#ffc0c6;border:1px solid rgba(255,134,148,.22)}
    .login-field-error{color:#ffabb4}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}