: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;
}