*{box-sizing:border-box}
:root{--navy:#17265f;--purple:#7739f4;--blue:#3439eb;--muted:#7180a7}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body{min-height:100vh;display:grid;place-items:center;padding:22px;background:#f4f6ff;color:var(--navy);overflow-x:hidden}
button,a,label{cursor:pointer}.ambient{position:fixed;border-radius:50%;pointer-events:none}.a{width:520px;height:520px;left:-270px;bottom:-300px;background:radial-gradient(circle,#dfe5ff,transparent 68%)}.b{width:620px;height:620px;right:-330px;top:-350px;background:radial-gradient(circle,#e8e9ff,transparent 68%)}.dots-bg{position:fixed;left:20px;top:85px;width:125px;height:105px;opacity:.5;background-image:radial-gradient(#bfc7ee 2px,transparent 2px);background-size:32px 30px}
.portal{width:min(1180px,100%);height:min(735px,calc(100vh - 44px));min-height:650px;display:grid;grid-template-columns:56% 44%;overflow:hidden;border-radius:30px;background:#fff;box-shadow:0 28px 85px rgba(35,45,130,.19);position:relative;z-index:1}
.login-side{height:100%;min-height:0;padding:20px 48px 14px;display:flex;flex-direction:column;overflow:hidden}
.brand{text-align:center;flex:none}.logo-box{position:relative;width:260px;height:74px;border:1px dashed #aeb8dd;border-radius:12px;background:#fff;padding:6px}.logo-box img{width:100%;height:100%;object-fit:contain}.edit{position:absolute;right:6px;bottom:5px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#4439e7;color:#fff;font-size:12px;box-shadow:0 5px 12px #554ddd66}
.brand h1{margin:6px 0 0;font-size:27px;letter-spacing:-.8px}.brand h1 span{font-weight:500;color:#65749f}.brand p{font-size:12px;color:#66759f;margin:3px 0 6px}.brand>i{display:block;width:45px;height:3px;border-radius:4px;background:linear-gradient(90deg,#393beb,#873af5);margin:auto}
.welcome{text-align:center;margin:8px 0 12px;flex:none}.welcome small{font-size:9px;letter-spacing:2px;font-weight:900;color:#6557e8}.welcome h2{font-size:26px;margin:5px 0 4px}.welcome p{margin:0;font-size:12px;color:#6f7ca3}
.tabs{height:62px;min-height:62px;display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid #dfe3f0;border-radius:12px;overflow:hidden;flex:none}.tab{border:0;background:#fff;color:#263568;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}.tab+.tab{border-left:1px solid #e1e5f0}.tab.active{color:#fff;background:linear-gradient(105deg,#3439ea,#8438f4);box-shadow:0 8px 22px #5144dc3d}.tab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.form-card{height:auto;min-height:unset;margin-top:10px;padding:15px 22px;border:1px solid #edf0f7;border-radius:15px;box-shadow:0 12px 30px #26357d12;flex:none}.view{display:none;animation:in .25s ease}.view.active{display:block}@keyframes in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
label{font-size:12px;font-weight:800;display:block;margin-bottom:8px}.password-label{margin-top:13px}.input{height:56px;border:1px solid #d9dfef;border-radius:10px;display:flex;align-items:center;gap:9px;padding:0 13px;background:#fff;transition:.2s}.input:focus-within{border-color:#6254ed;box-shadow:0 0 0 4px #5c50ed12}.input input{width:100%;border:0;outline:0;background:transparent;font-size:13px;color:#17265f}.input input::placeholder{color:#99a5c5}.leading{font-size:17px;color:#6876a6}.flag{font-size:10px;font-weight:900;color:#6e7ca5}.code{font-weight:900;border-right:1px solid #e1e5ef;padding-right:10px}.eye{border:0;background:none;color:#7582a8;padding:4px;display:grid;place-items:center}.eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.under{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.under label{margin:0;font-size:11px;color:#68759c;font-weight:600}.under input{accent-color:#4b40e8}.under button{border:0;background:none;color:#4435df;font-size:11px;font-weight:900}.primary{width:100%;height:58px;border:0;border-radius:10px;margin-top:15px;color:#fff;font-weight:900;font-size:14px;background:linear-gradient(105deg,#3339eb,#8939f5);box-shadow:0 11px 24px #4b3ee544;position:relative;overflow:hidden;transition:.22s}.primary:hover{transform:translateY(-2px);box-shadow:0 15px 30px #4b3ee54f}.primary:active{transform:scale(.99)}.primary b{margin-left:9px;font-size:18px}.field-error{display:none;color:#d3485b;font-size:9px;font-weight:800;margin-top:5px}.input.invalid{border-color:#dc6876}.input.valid{border-color:#49af88}
.secure-box{height:63px;margin-top:13px;border-radius:11px;background:linear-gradient(100deg,#f1f3ff,#fafaff);display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:10px}.secure-icon{width:37px;height:37px;border-radius:50%;background:#e6e7ff;color:#4b40e8;display:grid;place-items:center}.secure-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.secure-box span{display:block;color:#6d789d}.secure-box strong{display:block;color:#3731d7;margin-top:3px}.secure-box>b{margin-left:auto;color:#2ba471}
footer{margin-top:auto;padding:13px 6px 0;display:flex;justify-content:space-between;gap:12px;align-items:flex-end;font-size:10px;color:#6e7ba0}.support{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.support>a{text-decoration:none;color:#4450b5;font-weight:700}.support>a:hover{color:#3429dd}.copyright{text-align:right;line-height:1.6}.copyright span{color:#7681a4}.copyright b{color:#7540ed}

.visual-side{height:100%;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 35%,#3536b9,#18196d 58%,#10134d);color:#fff}.visual-top{position:absolute;top:27px;left:30px;z-index:5;font-size:9px;letter-spacing:1.5px;color:#b9c3ff}.visual-top span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#63efc5;box-shadow:0 0 10px #63efc5;margin-right:7px}
.slides{position:absolute;inset:0}.slide{position:absolute;inset:0;opacity:0;transform:translateX(28px);transition:.55s ease;padding:96px 34px 40px}.slide.active{opacity:1;transform:none}.slide img{position:absolute;inset:15% 8% 13%;width:84%;height:72%;object-fit:contain;object-position:center;opacity:1;z-index:2;filter:drop-shadow(0 20px 28px rgba(0,0,0,.25))}.slide-content{position:relative;z-index:3;max-width:410px}.slide-content small{font-size:9px;letter-spacing:2px;color:#aebaff}.slide-content h2{font-size:31px;line-height:1.08;margin:9px 0 10px}.slide-content h2 em{font-style:normal;color:#71bcff}.slide-content p{font-size:12px;line-height:1.6;color:#b7c0e8;max-width:330px}
.slide-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#11155e55,#11155e22 45%,#0e124e88);z-index:1;pointer-events:none}.sample-card{position:absolute;right:10%;bottom:110px;z-index:3;width:250px;padding:18px;border-radius:15px;background:#262690dd;border:1px solid #8490f2aa;box-shadow:0 20px 40px #0005;backdrop-filter:blur(6px)}.sample-card b{display:block;font-size:14px}.sample-card span{display:block;color:#b5c0ea;font-size:9px;margin-top:5px}.sample-card strong{display:block;font-size:11px;margin-top:15px}.progress{height:7px;background:#5b61a7;border-radius:9px;margin-top:7px;overflow:hidden}.progress i{display:block;height:100%;width:92%;background:linear-gradient(90deg,#50caff,#7b62ff);border-radius:9px}
.slider-ui{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:11px}.slider-ui button{width:30px;height:30px;border-radius:50%;border:1px solid #8791e4;background:#ffffff10;color:#fff;font-size:21px}.slider-ui button:hover{background:#ffffff25;transform:scale(1.06)}.slide-dots{display:flex;gap:5px;align-items:center}.slide-dots i{width:6px;height:6px;border-radius:50%;background:#6974ca}.slide-dots i.active{width:19px;border-radius:8px;background:#70baff}.media-tools{position:absolute;right:18px;bottom:18px;z-index:8;text-align:right}.media-tools label{display:inline-block;padding:7px 11px;border:1px solid #8993e8aa;border-radius:20px;background:#ffffff10;font-size:9px;color:#e0e4ff}.media-tools small{display:block;font-size:7px;color:#8792d3;margin-top:4px}

.modal-backdrop{position:fixed;inset:0;background:#11163eaa;backdrop-filter:blur(8px);display:none;place-items:center;z-index:30;padding:20px}.modal-backdrop.show{display:grid}.modal{width:min(420px,100%);background:#fff;border-radius:20px;padding:26px;position:relative;box-shadow:0 25px 80px #080c3c99}.close{position:absolute;right:13px;top:12px;border:0;background:#f0f2fa;width:30px;height:30px;border-radius:50%;font-size:19px;color:#5f6888}.modal-icon{width:46px;height:46px;border-radius:13px;background:#e8e7ff;color:#493ce5;display:grid;place-items:center;margin-bottom:13px}.modal>small{font-size:9px;letter-spacing:1.8px;font-weight:900;color:#6557e8}.modal h3{font-size:23px;margin:5px 0}.modal p{font-size:12px;line-height:1.55;color:#707ba1}.modal .primary{margin-top:14px}.valid{font-size:10px;background:#f2f4ff;color:#59668e;border-radius:9px;padding:10px;margin-top:10px}.valid strong{color:#4436df}.message{display:none;font-size:10px;border-radius:9px;padding:10px;margin-top:9px}.message.show{display:block}.message.error{color:#a52f45;background:#fff0f3}.message.success{color:#177950;background:#ebfaf3}
.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%,20px);opacity:0;background:#1b235d;color:#fff;padding:10px 15px;border-radius:9px;font-size:10px;z-index:40;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:980px){.portal{grid-template-columns:1fr;height:auto;min-height:650px}.visual-side{height:560px}.login-side{height:auto;min-height:650px}.form-card{height:315px;min-height:315px}}
@media(max-width:560px){body{padding:8px;display:block}.portal{width:100%;min-height:0;border-radius:20px}.login-side{padding:20px 13px 16px;min-height:0}.logo-box{width:220px;height:64px}.brand h1{font-size:25px}.brand p{font-size:10.5px}.welcome{margin:13px 0 16px}.welcome h2{font-size:23px}.tabs{height:auto;min-height:0;grid-template-columns:1fr}.tab{height:52px}.tab+.tab{border-left:0;border-top:1px solid #e1e5f0}.form-card{height:385px;min-height:385px;padding:18px 13px 15px}.visual-side{height:500px}.slide{padding:76px 20px 35px}.slide-content h2{font-size:25px}.slide-content p{font-size:11px}.sample-card{bottom:80px;right:7%;width:240px}.media-tools{right:8px;bottom:8px}.media-tools small{display:none}footer{flex-direction:column;align-items:center;text-align:center}.copyright{text-align:center}}

/* Final visual rule: slide/logo artwork stays in the foreground */
.slide > img{pointer-events:none}

/* Final drag/swipe behavior */
.visual-side{touch-action:pan-y;cursor:grab}
.visual-side:active{cursor:grabbing}
.slide{will-change:transform,opacity}
.visual-side.drag-left .slide.active{transform:translateX(-8px)}
.visual-side.drag-right .slide.active{transform:translateX(8px)}
.logo-box{cursor:default}
.logo-box .edit{display:none}

/* Final: static, centered branding; no visible upload controls */
.logo-box{display:grid;place-items:center;cursor:default}
.logo-box img{display:block;margin:auto;object-position:center center}
.media-tools{display:none!important}

/* Final CBMCE logo presentation */
.logo-box{
  width:290px;
  height:82px;
  margin:0 auto;
  padding:7px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.logo-box img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center center;
}
@media(max-width:560px){
  .logo-box{width:240px;height:68px;padding:6px 12px}
}