:root{
  --emerald-900:#07372B; --emerald-800:#0A4D3C; --emerald-700:#0E6B52; --emerald-600:#128268;
  --gold-600:#B68A2E; --gold-500:#C9A24B; --gold-200:#EAD9A8; --gold-100:#F4ECD6;
  --ivory:#F7F6F1; --cream:#FCFBF7; --card:#FFFFFF; --border:#E7E3D6;
  --ink:#16201C; --muted:#5C665F;
  --radius:22px; --field-r:13px;
  --shadow-sm:0 2px 10px rgba(10,77,60,.06);
  --shadow-lg:0 34px 80px -24px rgba(10,77,60,.40);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink); background:var(--ivory);
  min-height:100vh; display:flex; flex-direction:column;
  position:relative; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

/* ---------- Image-free decorative background ---------- */
.bg-base{position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(18,130,104,.12), transparent 60%),
    radial-gradient(900px 520px at 90% -6%, rgba(182,138,46,.12), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--ivory) 55%, #F1F0E9 100%);}
.bg-grid{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(10,77,60,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,77,60,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 42%, rgba(0,0,0,.8), transparent 75%);
          mask-image:radial-gradient(circle at 50% 42%, rgba(0,0,0,.8), transparent 75%);}
.bg-art{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5}
.bg-art svg{position:absolute}
.ring-tl{top:-220px; left:-200px; color:var(--emerald-700)}
.ring-br{bottom:-260px; right:-220px; color:var(--gold-500)}

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
.topbar{
  width:100%; padding:20px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  position:relative; z-index:2;
}
.sem-pill{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:700; letter-spacing:.4px;
  color:var(--emerald-800);
  background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-sm);
  padding:9px 16px; border-radius:999px;
}
.sem-pill svg{width:16px; height:16px; color:var(--gold-600)}
.home-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--emerald-800); text-decoration:none;
  padding:6px 4px; position:relative;
}
.home-link svg{width:16px; height:16px; transition:transform .25s var(--ease)}
.home-link::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-500)); transition:width .3s var(--ease)}
.home-link:hover::after{width:100%}
.home-link:hover svg{transform:translateX(2px)}
.home-link:focus-visible{outline:3px solid var(--gold-200); outline-offset:4px; border-radius:6px}

/* ============================================================
   LOGIN CARD
   ============================================================ */
main{flex:1 0 auto; display:grid; place-items:center; padding:24px 20px 56px}
.login-card{
  position:relative;
  width:100%; max-width:440px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:40px 38px 34px; overflow:hidden;
}
.login-card::before{ /* top gold band */
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-500),var(--gold-200));
}

/* DEVELOPER: replace seal SVG with real logo <img class="crest" src="ugb-logo.png" alt="..."> */
.crest{
  width:74px; height:74px; margin:6px auto 16px; display:grid; place-items:center;
  border-radius:50%; background:radial-gradient(circle at 50% 35%, #fff, #F4F2EA);
  box-shadow:0 10px 26px -10px rgba(10,77,60,.4), inset 0 0 0 2px var(--gold-200);
}
.crest svg{width:46px; height:46px}

.login-title{
  text-align:center;
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:700;
  font-size:30px; line-height:1.1; color:var(--emerald-900); letter-spacing:.3px;
}
.gold-divider{display:flex; align-items:center; justify-content:center; gap:12px; margin:10px 0 6px}
.gold-divider span{height:1px; width:42px; background:linear-gradient(90deg,transparent,var(--gold-600))}
.gold-divider span:last-child{background:linear-gradient(90deg,var(--gold-600),transparent)}
.gold-divider b{width:7px; height:7px; transform:rotate(45deg); background:var(--gold-600)}
.login-sub{text-align:center; font-size:13.5px; color:var(--muted); margin-bottom:24px}

/* ---------- Fields ---------- */
.field{margin-bottom:16px}
.field label{
  display:block; font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px;
}
.input-wrap{position:relative; display:flex; align-items:center}
.input-wrap > svg.lead{
  position:absolute; left:14px; width:18px; height:18px; color:var(--emerald-600); pointer-events:none;
}
.input-wrap input{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:#FBFAF6; border:1.5px solid var(--border); border-radius:var(--field-r);
  padding:13px 14px 13px 42px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.input-wrap input::placeholder{color:#A4ACA6}
.input-wrap input:focus{
  outline:none; background:#fff; border-color:var(--emerald-600);
  box-shadow:0 0 0 4px rgba(18,130,104,.12);
}
.toggle-pw{
  position:absolute; right:8px; width:34px; height:34px; display:grid; place-items:center;
  border:none; background:transparent; color:var(--muted); cursor:pointer; border-radius:8px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.toggle-pw:hover{color:var(--emerald-700); background:var(--gold-100)}
.toggle-pw svg{width:18px; height:18px}
.toggle-pw:focus-visible{outline:3px solid var(--gold-200); outline-offset:2px}

/* ---------- Captcha ---------- */
.cap-label{font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin:6px 0 7px}
.cap-row{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:stretch}
.cap-chip{
  display:flex; align-items:center; justify-content:center;
  min-width:104px; padding:0 16px;
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:21px; letter-spacing:2px;
  color:#fff; border-radius:var(--field-r);
  background:linear-gradient(160deg,var(--emerald-700),var(--emerald-900));
  box-shadow:inset 0 0 0 1.5px rgba(234,217,168,.35);
  user-select:none; position:relative;
  /* faint stripe texture for an authentic captcha feel */
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px),
    linear-gradient(160deg,var(--emerald-700),var(--emerald-900));
}
.cap-row input{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:#FBFAF6; border:1.5px solid var(--border); border-radius:var(--field-r); padding:12px 14px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.cap-row input:focus{outline:none; background:#fff; border-color:var(--emerald-600); box-shadow:0 0 0 4px rgba(18,130,104,.12)}
.cap-refresh{
  width:46px; display:grid; place-items:center;
  background:#fff; border:1.5px solid var(--border); border-radius:var(--field-r);
  color:var(--emerald-700); cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .4s var(--ease);
}
.cap-refresh:hover{border-color:var(--gold-200)}
.cap-refresh:active svg{transform:rotate(180deg)}
.cap-refresh svg{width:18px; height:18px; transition:transform .4s var(--ease)}
.cap-refresh:focus-visible{outline:3px solid var(--gold-200); outline-offset:2px}

/* ---------- Message + Button + Forgot ---------- */
.form-msg{
  font-size:13px; font-weight:600; text-align:center; min-height:18px; margin:14px 0 0;
}
.form-msg.err{color:#B4232A}
.form-msg.ok{color:var(--emerald-700)}

.btn-login{
  width:100%; margin-top:16px; cursor:pointer;
  font:inherit; font-size:15px; font-weight:700; letter-spacing:.4px; color:#fff;
  border:none; border-radius:var(--field-r); padding:15px 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg,var(--emerald-700),var(--emerald-900));
  box-shadow:0 14px 28px -12px rgba(10,77,60,.7);
  position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-login::after{ /* gold sheen sweep */
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(234,217,168,.35) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s var(--ease);
}
.btn-login:hover{transform:translateY(-2px); box-shadow:0 20px 36px -14px rgba(10,77,60,.75)}
.btn-login:hover::after{transform:translateX(120%)}
.btn-login svg{width:18px; height:18px}
.btn-login:focus-visible{outline:3px solid var(--gold-200); outline-offset:3px}

.forgot{display:block; text-align:center; margin-top:18px; font-size:13.5px; font-weight:600;
  color:var(--emerald-700); text-decoration:none; position:relative; width:max-content; margin-inline:auto; padding-bottom:2px}
.forgot::after{content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-500)); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.forgot:hover::after{transform:scaleX(1)}
.forgot:focus-visible{outline:3px solid var(--gold-200); outline-offset:3px; border-radius:4px}

/* ============================================================
   FOOTER
   ============================================================ */
footer{flex-shrink:0; text-align:center; padding:22px 24px; position:relative; z-index:2;
  background:
    radial-gradient(700px 200px at 50% -60%, rgba(182,138,46,.16), transparent 60%),
    linear-gradient(180deg,var(--emerald-800),var(--emerald-900));
  color:#fff;}
footer p{font-size:13px; letter-spacing:.3px; color:rgba(255,255,255,.85)}
footer p strong{color:var(--gold-200); font-weight:600}

/* ---------- Responsive ---------- */
@media (max-width:480px){
  .topbar{padding:16px 18px}
  .home-link span{display:none}
  .login-card{padding:32px 24px 28px}
  .cap-chip{min-width:88px; font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .btn-login:hover{transform:none}
}

.back-home-link {
    display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background-color: #fff;
color: #3c7163;
font-size: 16px;
font-weight: 900;
text-decoration: none;
border-radius: 999px;
cursor: pointer;
border: 1px solid var(--border);
}

.back-home-link svg {
    width: 16px;
    height: 16px;
}

.back-home-link:hover {
    background-color: #e2e4e7;
    text-decoration: none;
}

.error-msg{
    color:red;
}


/*otp model popup*/


.modalBackground {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.70) !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 999990 !important;
}


.modalPopup {
    width: 520px !important;
    max-width: 92vw !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    z-index: 1000000000 !important;
}

.modalPopup,
.modalPopup * {
    box-sizing: border-box;
}

.modalPopup .modal-content {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: #ffffff !important;
    background-image: none !important;

    border: none !important;
    border-radius: 22px !important;
    overflow: hidden !important;

    opacity: 1 !important;
    filter: none !important;

    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28) !important;
}


.modalPopup .modal-header {
    position: relative !important;
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 16px 24px !important;

    background: linear-gradient(160deg, #08765f, #004c3d) !important;
    color: #ffffff !important;

    border: none !important;
    text-align: left !important;
}

.modalPopup .modal-title {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}


.modalPopup .modal-header .close {
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;

    display: block !important;
    float: none !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: #ffffff !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-shadow: none !important;
    text-decoration: none !important;

    opacity: 0.9 !important;
    cursor: pointer !important;
}

.modalPopup .modal-header .close:hover,
.modalPopup .modal-header .close:focus {
    color: #ffffff !important;
    opacity: 1 !important;
    text-decoration: none !important;
}


.modalPopup .modal-body {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 22px 28px 28px !important;

    background-color: #ffffff !important;
    background-image: none !important;
    color: #333333 !important;

    text-align: left !important;
    opacity: 1 !important;
}

.modalPopup .modal-body .row {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.modalPopup .modal-body .col-md-12,
.modalPopup .modal-body .col-md-8 {
    display: block !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


.modalPopup #lblOTPMSG {
    display: block !important;
    width: 100% !important;

    margin: 0 0 13px !important;
    padding: 0 !important;

    color: #a71914 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}


.modalPopup .modal-body .form-control,
.modalPopup #txtOTP {
    display: block !important;
    float: none !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    background-color: #ffffff !important;
    background-image: none !important;
    color: #333333 !important;

    border: 1px solid #ded8cb !important;
    border-radius: 14px !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    text-align: left !important;

    outline: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.modalPopup .modal-body .form-control:focus,
.modalPopup #txtOTP:focus {
    border-color: #08765f !important;
    box-shadow: 0 0 0 3px rgba(8, 118, 95, 0.13) !important;
}


.modalPopup #timerBlock {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
}

.modalPopup .timer-text {
    display: block !important;
    width: 100% !important;

    margin: 8px 0 0 !important;
    padding: 0 !important;

    color: #08765f !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}


.modalPopup .error-msg,
.modalPopup #lblPopMessage {
    display: block !important;
    width: 100% !important;

    margin: 8px 0 0 !important;
    padding: 0 !important;

    color: #d32f2f !important;
    font-size: 13px !important;
    text-align: left !important;
}


.modalPopup .modal-footer {
    display: block !important;
    width: 100% !important;
    min-height: 70px !important;

    margin: 0 !important;
    padding: 14px 24px !important;

    background-color: #ffffff !important;
    background-image: none !important;

    border: none !important;
    border-top: 1px solid #ded8cb !important;
    border-radius: 0 !important;

    text-align: right !important;
}


.modalPopup .modal-footer > div {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
}


.modalPopup .modal-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;

    width: auto !important;
    min-width: 98px !important;
    height: 34px !important;

    margin: 6px 2px !important;
    padding: 9px 24px !important;

    background: linear-gradient(160deg, #08765f, #004c3d) !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 999px !important;
    outline: none !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;

    box-shadow: none !important;
    cursor: pointer !important;
}

.modalPopup .modal-btn:hover,
.modalPopup .modal-btn:focus {
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 0.92 !important;
}


.modalPopup #lnkBtnClose {
    background: linear-gradient(160deg, #f15a4a, #d9362b) !important;
    color: #ffffff !important;
}


.modalPopup #btnResend {
    margin-top: 8px !important;
}


.modalProgress {
    position: fixed !important;
    z-index: 999995 !important;

    width: 100% !important;
    height: 100% !important;

    top: 0 !important;
    left: 0 !important;

    background-color: rgba(0, 0, 0, 0.61) !important;
}

@media (max-width: 576px) {
    .modalPopup {
        width: 92vw !important;
    }

    .modalPopup .modal-body {
        padding: 20px !important;
    }

    .modalPopup .modal-footer {
        padding: 12px 18px !important;
    }

    .modalPopup .modal-btn {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}