:root { --login-navy:#0b1739; --login-blue:#3157d5; --login-blue-dark:#2447bd; --login-ink:#17223b; --login-muted:#667085; --login-border:#dfe4ec; --login-bg:#f4f6fb; }
.login-shell,.pos-login-shell{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--login-ink)}
.login-shell{display:grid;grid-template-columns:minmax(360px,46%) 1fr;min-height:calc(100vh - 144px);margin:-1rem calc(50% - 50vw) -60px;overflow:hidden;background:#fff}
.login-visual{position:relative;display:flex;flex-direction:column;padding:3rem clamp(2rem,5vw,5rem);color:#fff;background:radial-gradient(circle at 10% 85%,rgba(70,112,231,.45),transparent 35%),radial-gradient(circle at 95% 5%,rgba(71,140,220,.32),transparent 30%),linear-gradient(145deg,#0a1739,#10285d 65%,#183c80)}
.login-visual:after{content:"";position:absolute;right:-110px;bottom:8%;width:330px;height:330px;border:1px solid rgba(255,255,255,.1);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.035),0 0 0 110px rgba(255,255,255,.025)}
.login-brand{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;font-size:1.15rem;font-weight:750;letter-spacing:-.02em;width:max-content}
.login-brand-mark{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.7rem;color:#fff;background:linear-gradient(145deg,#5678ef,#3157d5);box-shadow:0 8px 22px rgba(14,35,93,.24);font-size:1.15rem;font-weight:800}
.login-visual-content{position:relative;z-index:1;margin:auto 0;max-width:590px;padding:4rem 0}
.login-kicker{display:block;margin-bottom:.8rem;color:#4568db;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.login-visual .login-kicker{color:#9eb5ff}
.login-visual h1{margin:0 0 1.35rem;font-size:clamp(2.6rem,4.2vw,4.8rem);line-height:1.04;letter-spacing:-.055em;font-weight:760}
.login-visual-content>p{max-width:520px;margin:0;color:#c7d2ec;font-size:1.08rem;line-height:1.75}
.login-benefits{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:2.2rem}.login-benefits span{padding:.55rem .85rem;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(255,255,255,.07);color:#dbe4fb;font-size:.78rem}
.login-visual-foot{position:relative;z-index:1;margin:0;color:#8293bd;font-size:.78rem}
.login-panel{display:flex;align-items:center;justify-content:center;padding:3rem clamp(1.5rem,6vw,7rem)}
.login-card{width:100%;max-width:470px}.login-mobile-brand{display:none}.login-heading{margin-bottom:2rem}.login-heading h2,.pos-section-heading h2{margin:0;color:var(--login-ink);font-size:2rem;line-height:1.2;letter-spacing:-.035em;font-weight:750}.login-heading p,.pos-section-heading p{margin:.65rem 0 0;color:var(--login-muted)}
.login-alert{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:1.25rem;padding:.85rem 1rem;border:1px solid #fecaca;border-radius:.7rem;color:#9f2832;background:#fff5f5;font-size:.875rem}.login-alert svg{flex:0 0 19px;width:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-form{display:flex;flex-direction:column;gap:1.15rem}.login-field label{display:block;margin-bottom:.45rem;color:#344054;font-size:.84rem;font-weight:650}.login-field small{display:block;margin-top:.4rem;color:#8992a3;font-size:.74rem}.login-input-wrap{position:relative}.login-input-wrap svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:19px;fill:none;stroke:#98a2b3;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.login-input-wrap .form-control{height:3.25rem;padding:.7rem 1rem .7rem 3rem;border:1px solid var(--login-border);border-radius:.7rem;background:#fff;color:var(--login-ink);box-shadow:0 1px 2px rgba(16,24,40,.03)}.login-input-wrap .form-control::placeholder{color:#a1a9b6}.login-input-wrap .form-control:focus{border-color:#7891e8;box-shadow:0 0 0 4px rgba(49,87,213,.1)}.field-error{display:block;margin-top:.35rem;color:#c13d49;font-size:.78rem}
.login-check{display:flex;align-items:center;gap:.55rem;color:#526078;font-size:.84rem;cursor:pointer}.login-check input{width:1rem;height:1rem;accent-color:var(--login-blue)}
.login-submit{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:3.2rem;padding:.7rem 1.2rem;border:0;border-radius:.7rem;color:#fff;background:linear-gradient(135deg,#3e64dd,#294dca);box-shadow:0 10px 22px rgba(49,87,213,.22);font-weight:700;transition:transform .15s,box-shadow .15s,background .15s}.login-submit:hover{transform:translateY(-1px);background:linear-gradient(135deg,#3459d0,#2142ae);box-shadow:0 13px 27px rgba(49,87,213,.28)}.login-submit svg{width:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.login-help{margin:1.75rem 0 0;text-align:center;color:#929aa8;font-size:.76rem}
.pos-login-shell{min-height:calc(100vh - 144px);margin:-1rem calc(50% - 50vw) -60px;padding:2.2rem clamp(1.25rem,5vw,5rem) 3rem;background:radial-gradient(circle at 8% 5%,rgba(49,87,213,.09),transparent 25%),radial-gradient(circle at 92% 90%,rgba(49,87,213,.07),transparent 28%),var(--login-bg)}
.pos-login-topbar{display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto}.login-brand-dark{color:var(--login-navy)}.pos-secure{display:flex;align-items:center;gap:.45rem;color:#6b7588;font-size:.78rem;font-weight:600}.pos-secure span{width:.48rem;height:.48rem;border-radius:50%;background:#27ae72;box-shadow:0 0 0 4px rgba(39,174,114,.12)}
.pos-login-card{width:min(100%,820px);margin:3rem auto 0;padding:clamp(1.5rem,4vw,3rem);border:1px solid rgba(216,222,233,.85);border-radius:1.25rem;background:rgba(255,255,255,.95);box-shadow:0 24px 65px rgba(27,42,75,.1)}
.pos-card-head{display:flex;align-items:center;gap:1rem}.pos-card-head h1{margin:0;color:var(--login-ink);font-size:1.6rem;letter-spacing:-.03em;font-weight:750}.pos-card-head p{margin:.25rem 0 0;color:var(--login-muted);font-size:.88rem}.pos-card-head .login-kicker{margin-bottom:.3rem}.pos-icon{display:grid;place-items:center;flex:0 0 3.6rem;height:3.6rem;border-radius:1rem;color:#fff;background:linear-gradient(145deg,#4c70e2,#294dca);box-shadow:0 10px 25px rgba(49,87,213,.2)}.pos-icon svg{width:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pos-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin:1.7rem 0 2.2rem}.pos-progress span{height:4px;border-radius:99px;background:#e6e9f0}.pos-progress span.active{background:var(--login-blue)}
.pos-section-heading{margin-bottom:1.5rem}.pos-section-heading>span{display:block;margin-bottom:.45rem;color:#71809b;font-size:.72rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.pos-section-heading h2{font-size:1.55rem}
.pos-option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}.pos-option{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:145px;padding:1rem;border:1px solid var(--login-border);border-radius:.9rem;color:var(--login-ink);background:#fff;text-align:center;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}.pos-option:hover{transform:translateY(-2px);border-color:#91a4e8;color:var(--login-blue-dark);box-shadow:0 10px 24px rgba(38,62,123,.1)}.pos-option strong{margin-top:.7rem;font-size:.92rem}.pos-option small{margin-top:.2rem;color:#8a94a6;font-size:.72rem}.pos-option-icon{display:grid;place-items:center;width:2.65rem;height:2.65rem;border-radius:.7rem;color:var(--login-blue);background:#eef2ff}.pos-option-icon svg{width:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.pos-avatar{display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:50%;color:#3157d5;background:linear-gradient(145deg,#edf1ff,#dfe7ff);font-weight:800;text-transform:uppercase}.pos-avatar-large{width:4.4rem;height:4.4rem;margin:0 auto .9rem;font-size:1.2rem}.pos-pin-heading{text-align:center}.pos-pin-form{max-width:400px;margin:0 auto}.pos-pin-input{width:100%;height:4.4rem;padding:.6rem 1rem;border:1px solid var(--login-border);border-radius:.8rem;outline:none;color:var(--login-ink);background:#fafbfe;text-align:center;font-size:2rem;font-weight:700;letter-spacing:.5em}.pos-pin-input:focus{border-color:#7891e8;box-shadow:0 0 0 4px rgba(49,87,213,.1)}.pos-pin-input::placeholder{color:#bdc4d0}.pos-back{color:#687790;text-align:center;text-decoration:none;font-size:.8rem}.pos-back:hover{color:var(--login-blue)}.pos-empty{padding:1.3rem;border:1px dashed #cad1df;border-radius:.8rem;color:#6e788b;background:#fafbfc;text-align:center;font-size:.88rem}.pos-login-footer{margin:1.4rem auto 0;text-align:center;color:#8992a3;font-size:.76rem}
@media(max-width:767.98px){.login-shell{display:block;min-height:calc(100vh - 130px);background:var(--login-bg)}.login-visual{display:none}.login-panel{min-height:inherit;padding:2rem 1.25rem}.login-card{padding:1.5rem;border:1px solid var(--login-border);border-radius:1rem;background:#fff;box-shadow:0 14px 35px rgba(27,42,75,.08)}.login-mobile-brand{display:flex;align-items:center;gap:.65rem;margin-bottom:2rem;font-weight:750}.login-heading h2{font-size:1.7rem}.pos-login-shell{padding:1.4rem 1rem 2.5rem}.pos-login-card{margin-top:1.7rem;padding:1.25rem;border-radius:1rem}.pos-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pos-card-head{align-items:flex-start}.pos-secure{font-size:0}.pos-secure span{display:block}}
@media(max-width:420px){.pos-option-grid{grid-template-columns:1fr 1fr}.pos-option{min-height:130px;padding:.75rem}.pos-login-card{padding:1rem}.pos-card-head h1{font-size:1.35rem}}
@media(prefers-reduced-motion:reduce){.login-submit,.pos-option{transition:none}}