:root{
  --ink:#0f2f2b;
  --muted:#6b7f7b;
  --line:#dce8e5;
  --ivory:#f7faf9;
  --white:#ffffff;
  --emerald:#0d665d;
  --emerald-2:#0a4b45;
  --deep:#082f2c;
  --gold:#d9b45d;
  --gold-soft:#f4e6bc;
  --cyan:#e8f6f3;
  --shadow:0 28px 70px rgba(18,55,49,.15);
  --urdu:"Jameel Noori Nastaleeq","Jameel Noori Nastaleeq Kasheeda","Noto Nastaliq Urdu",serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:var(--ink)}
body{font-family:var(--urdu);overflow:hidden;background:
  radial-gradient(circle at 12% 14%, rgba(217,180,93,.18), transparent 18%),
  radial-gradient(circle at 85% 84%, rgba(13,102,93,.14), transparent 20%),
  linear-gradient(135deg,#eef5f2 0%,#f8fbfa 42%,#edf4f3 100%);position:relative}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;background-image:linear-gradient(rgba(9,73,68,.03) 1px, transparent 1px),linear-gradient(90deg, rgba(9,73,68,.03) 1px, transparent 1px);background-size:34px 34px}
body{display:flex;align-items:center;justify-content:center;padding:24px;}

button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.portal-shell{
  width:min(1180px, calc(100vw - 54px));
  min-height:min(760px, calc(100vh - 48px));
  height:min(760px, calc(100vh - 48px));
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  background:#f8fbfa;
  overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(12,83,76,.08);
  box-shadow:0 28px 80px rgba(12,55,49,.13);
}
.visual-panel{
  position:relative;
  min-height:100%;
  padding:clamp(34px,4.6vw,68px);
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 12%, rgba(217,180,93,.22), transparent 28%),
    radial-gradient(circle at 86% 88%, rgba(35,164,151,.18), transparent 30%),
    linear-gradient(145deg,#07342f 0%,#0a4a43 52%,#0b5a51 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.pattern{position:absolute;inset:0;opacity:.15;pointer-events:none;background-image:
  linear-gradient(30deg,rgba(255,255,255,.08) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.08) 87.5%,rgba(255,255,255,.08)),
  linear-gradient(150deg,rgba(255,255,255,.08) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.08) 87.5%,rgba(255,255,255,.08)),
  linear-gradient(30deg,rgba(255,255,255,.08) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.08) 87.5%,rgba(255,255,255,.08)),
  linear-gradient(150deg,rgba(255,255,255,.08) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.08) 87.5%,rgba(255,255,255,.08)),
  linear-gradient(60deg,rgba(255,255,255,.05) 25%,transparent 25.5%,transparent 75%,rgba(255,255,255,.05) 75%);
background-size:54px 94px;background-position:0 0,0 0,27px 47px,27px 47px,0 0}
.visual-panel:after{content:"";position:absolute;left:-8%;bottom:-18%;width:68%;aspect-ratio:1;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 60px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.02)}
.visual-glow{position:absolute;border-radius:999px;filter:blur(1px);pointer-events:none}
.glow-a{width:180px;height:180px;right:-60px;top:24%;background:rgba(217,180,93,.10)}
.glow-b{width:260px;height:260px;left:-110px;bottom:6%;background:rgba(34,211,177,.08)}
.brand-top,.hero-copy,.feature-strip,.visual-footer{position:relative;z-index:2}
.brand-top{display:flex;align-items:center;gap:18px}
.brand-mark{width:72px;height:72px;border:1px solid rgba(245,220,155,.46);border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.brand-mark svg{width:44px;height:44px;fill:none;stroke:#efd58c;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.brand-copy{display:flex;flex-direction:column;gap:1px}
.brand-kicker{font-size:14px;color:#efd58c;line-height:2}
.brand-copy h1{font-size:clamp(24px,2.1vw,37px);margin:0;line-height:1.55;font-weight:700;letter-spacing:-.2px}
.brand-copy p{margin:0;color:rgba(255,255,255,.68);font-size:13px;line-height:2}
.hero-copy{max-width:720px;margin-block:auto;padding:28px 0}
.hero-badge{display:inline-flex;align-items:center;border:1px solid rgba(239,213,140,.35);background:rgba(255,255,255,.06);color:#f2dc9f;border-radius:999px;padding:7px 14px;font-size:12px;line-height:1.8;margin-bottom:18px}
.hero-copy h2{font-size:clamp(35px,4.1vw,64px);line-height:1.6;margin:0 0 15px;font-weight:700;letter-spacing:-.7px}
.hero-copy p{font-size:clamp(14px,1.25vw,18px);line-height:2.25;color:rgba(255,255,255,.72);margin:0;max-width:650px}
.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:760px}
.feature-item{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.055);backdrop-filter:blur(5px)}
.feature-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.08);color:#efd58c;flex:none}
.feature-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feature-item div{display:flex;flex-direction:column}
.feature-item strong{font-size:15px;line-height:1.8}.feature-item small{font-size:10px;line-height:1.7;color:rgba(255,255,255,.55)}
.visual-footer{font-size:11px;color:rgba(255,255,255,.44);letter-spacing:.4px}
.login-panel{min-height:100%;background:#f9fbfa;display:grid;place-items:center;padding:clamp(26px,4vw,58px);position:relative}
.login-panel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 8%,rgba(15,118,110,.08),transparent 26%),radial-gradient(circle at 12% 88%,rgba(217,180,93,.10),transparent 22%);pointer-events:none}
.login-inner{width:min(100%,510px);position:relative;z-index:1}
.mobile-brand{display:none}
.welcome-block{margin-bottom:28px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid #d6e8e4;background:#eef8f6;color:#34756d;border-radius:999px;padding:5px 11px;font-size:11px;line-height:1.8}
.eyebrow span{width:7px;height:7px;border-radius:50%;background:#22aa97;box-shadow:0 0 0 4px rgba(34,170,151,.12)}
.welcome-block h2{font-size:clamp(34px,4vw,52px);line-height:1.5;margin:10px 0 0;color:#143c37;font-weight:700}
.welcome-block p{font-size:13px;line-height:2.05;color:#71837f;margin:2px 0 0}
.login-form{display:flex;flex-direction:column}
.field-label{font-size:13px;font-weight:700;line-height:2;margin:0 2px 5px;color:#203f3b}
.field-wrap{position:relative;height:56px}
.field-wrap input{width:100%;height:100%;border:1px solid #d3e1de;background:#fff;border-radius:15px;padding:0 50px 0 48px;color:#173a36;outline:none;font-family:Tahoma,Arial,sans-serif;font-size:14px;direction:rtl;transition:.2s ease;box-shadow:0 3px 14px rgba(18,55,49,.025)}
.field-wrap input::placeholder{font-family:var(--urdu);color:#9aa9a6;font-size:12px}
.field-wrap input:focus{border-color:#3f9b91;box-shadow:0 0 0 4px rgba(26,137,126,.09),0 8px 24px rgba(18,55,49,.055)}
.field-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:grid;place-items:center;color:#6e8b86}
.field-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.field-help{font-size:10.5px;color:#93a09d;line-height:2;margin:4px 4px 12px}
.password-wrap input{padding-left:48px}
.eye-btn{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:transparent;color:#728985;display:grid;place-items:center;border-radius:10px;cursor:pointer}
.eye-btn:hover{background:#eff6f4}.eye-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.eye-closed{display:none}
.form-options{display:flex;align-items:center;justify-content:space-between;margin:12px 1px 14px;font-size:11px;line-height:2;color:#6d807c}
.check-row{display:flex;align-items:center;gap:8px;cursor:pointer}.check-row input{position:absolute;opacity:0;pointer-events:none}.fake-check{width:17px;height:17px;border:1px solid #bfd2ce;border-radius:5px;background:#fff;position:relative;flex:none}.check-row input:checked+.fake-check{background:#0d766b;border-color:#0d766b}.check-row input:checked+.fake-check:after{content:"";position:absolute;width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);left:4px;top:4px}
.text-link{color:#24786f;text-decoration:none}.text-link:hover{text-decoration:underline}
.form-message{display:none;margin:0 0 10px;padding:9px 12px;border-radius:10px;font-size:11px;line-height:1.9}.form-message.show{display:block}.form-message.error{background:#fff1f1;border:1px solid #ffd6d6;color:#a13a3a}.form-message.info{background:#eef8f6;border:1px solid #d7ece8;color:#2f736b}
.login-btn{height:56px;border:0;border-radius:15px;background:linear-gradient(100deg,#0d8b7d,#0b4b57);color:#fff;display:flex;align-items:center;justify-content:center;gap:13px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 14px 28px rgba(9,99,88,.18);transition:.2s ease}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(9,99,88,.24)}.login-btn:active{transform:translateY(0)}.login-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg)}
.divider{display:flex;align-items:center;gap:12px;color:#a2aeab;margin:19px 0 15px;font-size:10px;line-height:2}.divider:before,.divider:after{content:"";height:1px;background:#e0e9e7;flex:1}
.activate-btn{width:100%;min-height:62px;border:1px solid #d4e3e0;border-radius:15px;background:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 14px;color:#234541;cursor:pointer;text-align:right;transition:.2s ease;box-shadow:0 5px 18px rgba(20,59,53,.03)}
.activate-btn:hover{border-color:#9ccbc5;box-shadow:0 8px 24px rgba(20,59,53,.06)}.activate-btn .plus{width:37px;height:37px;border-radius:12px;background:#eaf7f4;color:#0b8a7c;display:grid;place-items:center;font-family:Arial,sans-serif;font-size:24px;font-weight:300}.activate-btn span:nth-child(2){display:flex;flex-direction:column}.activate-btn strong{font-size:13px;line-height:1.8}.activate-btn small{font-size:9.5px;color:#8a9a96;line-height:1.8}.activate-btn>svg{width:18px;height:18px;fill:none;stroke:#8ea09c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg)}
.security-note{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:7px;color:#8b9a97;font-size:10px;line-height:1.8}.security-note svg{width:17px;height:17px;fill:none;stroke:#6ca49c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.login-footer{text-align:center;font-size:9px;color:#aeb9b7;margin-top:14px;line-height:1.9}
@media(max-width:1040px){.portal-shell{grid-template-columns:1fr 1fr}.visual-panel{padding:42px}.hero-copy h2{font-size:42px}.feature-strip{grid-template-columns:1fr}.feature-item:nth-child(3){display:none}}
@media(max-width:820px){body{overflow:auto;padding:0}.portal-shell{display:block;height:auto;min-height:100vh;width:100%;border-radius:0;box-shadow:none;border:none;background:#f7fbfa}.visual-panel{display:none}.login-panel{min-height:100svh;padding:22px 18px 26px;align-items:center}.login-inner{width:min(100%,480px)}.mobile-brand{display:flex;align-items:center;justify-content:center;gap:11px;margin:2px 0 27px}.mini-mark{width:45px;height:45px;border-radius:14px;background:linear-gradient(145deg,#0d665d,#0b4540);color:#efd58c;display:grid;place-items:center;font-size:19px;box-shadow:0 9px 24px rgba(10,80,72,.14)}.mobile-brand>div:last-child{display:flex;flex-direction:column}.mobile-brand strong{font-size:16px;line-height:1.8;color:#173e39}.mobile-brand span{font-size:10px;color:#82928e;line-height:1.6}.welcome-block{text-align:center;margin-bottom:22px}.eyebrow{font-size:10px}.welcome-block h2{font-size:38px;margin-top:7px}.welcome-block p{font-size:11px}.field-wrap{height:54px}.login-btn{height:54px}.security-note{margin-top:14px}}
@media(max-width:430px){.login-panel{padding-inline:14px}.mobile-brand{margin-bottom:20px}.welcome-block h2{font-size:34px}.form-options{font-size:10px}.activate-btn{min-height:58px}.field-help{font-size:9.5px}}
@media(max-height:720px) and (min-width:821px){.login-panel{padding-block:20px}.welcome-block{margin-bottom:16px}.welcome-block h2{font-size:38px}.field-wrap{height:50px}.field-help{margin-bottom:7px}.login-btn{height:50px}.divider{margin:12px 0 10px}.activate-btn{min-height:56px}.security-note{margin-top:10px}.login-footer{margin-top:8px}.visual-panel{padding-block:28px}.hero-copy{padding:12px 0}.hero-copy h2{font-size:42px}.feature-item{padding-block:9px}}