:root{
  --login-forest:#062817;
  --login-forest-2:#0a3d24;
  --login-green:#0d7a3c;
  --login-green-bright:#2faf50;
  --login-gold:#d2a64b;
  --login-ink:#14221a;
  --login-muted:#667085;
  --login-border:#dce5df;
  --login-soft:#f2f8f4;
}

.login-page{
  min-height:100vh;
  margin:0;
  padding:16px;
  display:grid;
  place-items:center;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 5% 5%,rgba(42,131,77,.13),transparent 28%),
    radial-gradient(circle at 92% 92%,rgba(210,166,75,.12),transparent 24%),
    #edf3ef;
  color:var(--login-ink);
}

.login-page button,.login-page input{font-family:inherit}
.login-page svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.login-experience{
  width:min(1480px,100%);
  min-height:min(820px,calc(100vh - 32px));
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(480px,.82fr);
  border:1px solid rgba(5,55,30,.14);
  border-radius:28px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 30px 90px rgba(5,43,23,.2);
}

.login-hero{position:relative;isolation:isolate;min-height:100%;overflow:hidden;background:var(--login-forest)}
.login-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% center;z-index:-3}
.login-hero-overlay{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,rgba(2,19,11,.94) 0%,rgba(3,28,16,.72) 54%,rgba(3,29,17,.4) 100%),
    linear-gradient(180deg,rgba(4,28,17,.18) 0%,rgba(3,31,18,.5) 45%,rgba(2,25,14,.96) 100%);
}
.login-hero:after{
  content:"";position:absolute;inset:auto -120px -160px auto;width:520px;height:520px;border-radius:50%;z-index:-1;
  border:1px solid rgba(210,166,75,.5);box-shadow:0 0 0 35px rgba(210,166,75,.025),0 0 0 70px rgba(210,166,75,.018);
}
.login-hero-content{height:100%;padding:46px 56px 38px;display:flex;flex-direction:column;color:#fff}
.hero-brand{display:flex;align-items:center;gap:14px}
.hero-brand img{width:62px;height:62px;object-fit:cover;border-radius:17px;border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.hero-brand strong{display:block;font-size:22px;letter-spacing:.8px}.hero-brand strong span{color:#69bc52}.hero-brand small{display:block;color:#d6b461;font-size:10px;font-weight:800;letter-spacing:1.1px;margin-top:4px}
.hero-message{margin:auto 0 32px;max-width:690px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;color:#d8b761;font-size:11px;font-weight:900;letter-spacing:1.55px;margin-bottom:15px}
.hero-kicker:before{content:"";width:38px;height:2px;background:#d8b761;border-radius:99px}
.hero-message h1{margin:0;font-size:clamp(38px,4vw,61px);line-height:1.06;letter-spacing:-1.8px;max-width:670px;text-wrap:balance}
.hero-message h1 em{font-style:normal;color:#d9b453}
.hero-message p{max-width:590px;margin:19px 0 0;color:#e2ece6;font-size:17px;line-height:1.65}
.hero-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px;max-width:720px;margin-bottom:28px}
.hero-features article{display:flex;align-items:center;gap:12px;min-width:0}
.feature-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border:1px solid rgba(111,197,79,.45);border-radius:50%;color:#8bd05e;background:rgba(3,35,19,.34)}
.feature-icon svg{width:23px;height:23px}
.hero-features strong,.hero-features small{display:block}.hero-features strong{font-size:13px}.hero-features small{margin-top:4px;color:#c9d8cf;font-size:11px;line-height:1.35}
.hero-metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(8,35,23,.68);backdrop-filter:blur(10px);overflow:hidden}
.hero-metrics div{padding:17px 19px;position:relative}.hero-metrics div+div:before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:rgba(255,255,255,.14)}
.hero-metrics strong,.hero-metrics span{display:block}.hero-metrics strong{font-size:22px;color:#8bd05e;line-height:1.1}.hero-metrics span{margin-top:6px;color:#dce8e0;font-size:10px;text-transform:uppercase;letter-spacing:.55px}
.hero-trust{margin-top:18px;padding:12px 15px;border-radius:12px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.055);display:flex;align-items:center;justify-content:center;gap:9px;color:#d9e6de;font-size:12px}
.hero-trust svg{width:19px;height:19px;color:#a9d85a}

.login-access,.login-panel{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:38px clamp(40px,5vw,72px) 24px;background:linear-gradient(145deg,#fff 0%,#fbfdfc 100%)}
.login-access:before,.login-panel:before{content:"";position:absolute;right:-180px;top:-230px;width:480px;height:480px;border:1px solid rgba(210,166,75,.48);border-radius:50%;pointer-events:none}
.login-card{position:relative;z-index:1;width:100%;max-width:460px;margin:0 auto}
.login-card-header{display:block;margin-bottom:28px}
.login-card-header h1{margin:0;font-size:clamp(28px,3vw,36px);line-height:1.12;letter-spacing:-.9px;color:#17251d;font-weight:800}
.login-card-header p{margin:10px 0 0;max-width:36em;color:var(--login-muted);font-size:14px;line-height:1.55;font-weight:500}
.login-card-brand{display:flex;align-items:center;gap:12px;min-width:0}
.login-card-brand img{width:55px;height:55px;border-radius:15px;object-fit:cover;box-shadow:0 9px 20px rgba(7,52,30,.17)}
.login-card-brand strong{display:block;font-size:18px;letter-spacing:.5px;color:#092f1b}.login-card-brand strong span{color:#168044}.login-card-brand small{display:block;margin-top:3px;color:var(--login-muted);font-size:10px}
.demo-badge{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #cae4d1;border-radius:999px;color:#236338;background:#eef8f0;font-size:10px;font-weight:900;letter-spacing:.25px;white-space:nowrap}
.demo-badge svg{width:15px;height:15px;color:#c99527}
.login-heading{text-align:center;margin-bottom:23px}
.login-shield{width:42px;height:42px;margin:0 auto 13px;display:grid;place-items:center;border-radius:50%;color:#178144;background:#f1f9f3;border:1px solid #d9ebde;box-shadow:0 0 0 7px #fbfdfb}
.login-shield svg{width:21px;height:21px}
.login-heading h2{margin:0;font-size:clamp(28px,3vw,38px);line-height:1.12;letter-spacing:-.9px;color:#17251d}
.login-heading p{max-width:420px;margin:10px auto 0;color:var(--login-muted);font-size:14px;line-height:1.55}
.login-alert{display:flex;align-items:flex-start;gap:9px;margin-bottom:17px;padding:12px 14px;border:1px solid #f0b9b4;border-radius:11px;background:#fff3f2;color:#9d2920;font-size:13px;line-height:1.4}
.login-alert svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
.login-form{display:grid;gap:16px}
.login-field{display:grid;gap:7px;margin:0}.login-field label{color:#27372d;font-size:12px;font-weight:800}
.login-form .login-field input[type="email"],
.login-form .login-field input[type="password"],
.login-form .login-field input[type="text"]{
  width:100%;height:54px;padding:0 14px;border:1px solid #ccd7d0;border-radius:11px;background:#fff;
  box-shadow:0 2px 7px rgba(16,24,40,.025);color:#1c2a22;font-size:14px;outline:0;
  transition:border-color .16s,box-shadow .16s;
}
.login-form .login-field input:focus{border-color:#43a467;box-shadow:0 0 0 4px rgba(22,128,68,.1)}
.login-aux-controls{display:grid;gap:12px;margin:2px 0 4px}
.remember-control{position:relative;display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;min-height:22px;padding:2px 0;font-size:13px;line-height:1.3;color:#536158;cursor:pointer;font-weight:500;user-select:none}
.remember-control input[type="checkbox"]{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;pointer-events:none}
.remember-control>span{width:16px;height:16px;flex:0 0 16px;border:1px solid #bdc9c1;border-radius:4px;background:#fff;display:grid;place-items:center;box-sizing:border-box;transition:.16s}
.remember-control input:checked+span{background:#168044;border-color:#168044}
.remember-control input:checked+span:after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.remember-control input:focus-visible+span{box-shadow:0 0 0 4px rgba(22,128,68,.13)}
.login-submit{width:100%;height:54px;margin-top:4px;border:0;border-radius:11px;background:linear-gradient(135deg,#0b7135 0%,#169144 60%,#57b52e 130%);color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.25px;cursor:pointer;box-shadow:0 12px 24px rgba(13,122,60,.23);transition:transform .16s,filter .16s,box-shadow .16s}
.login-submit:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 15px 28px rgba(13,122,60,.28)}.login-submit:active{transform:translateY(0)}.login-submit svg{width:19px;height:19px}
.demo-access{margin-top:20px;padding:15px 16px;border:1px solid #a6d0b2;border-radius:13px;background:linear-gradient(135deg,#f4faf5,#fff);position:relative}
.demo-access-title{display:flex;align-items:center;gap:10px}.demo-access-title>svg{width:23px;height:23px;color:#168044;flex:0 0 23px}.demo-access-title strong,.demo-access-title small{display:block}.demo-access-title strong{font-size:13px}.demo-access-title small{margin-top:2px;color:var(--login-muted);font-size:10px}
.demo-credentials{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.demo-credentials div{padding:10px;border-radius:9px;background:#fff;border:1px solid #e1ebe4;min-width:0}.demo-credentials span,.demo-credentials strong{display:block}.demo-credentials span{color:var(--login-muted);font-size:9px;text-transform:uppercase;letter-spacing:.5px}.demo-credentials strong{margin-top:4px;color:#1c6d39;font-size:11px;word-break:break-word}
.demo-actions{display:flex;gap:8px;margin-top:10px}.demo-actions button{flex:1;min-height:35px;border:1px solid #b8d8c0;border-radius:8px;background:#fff;color:#176f39;display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;font-weight:800;cursor:pointer;transition:.16s}.demo-actions button:hover{background:#eaf6ed;border-color:#8cc49b}.demo-actions button svg{width:15px;height:15px}
.copy-feedback{min-height:14px;margin:7px 0 -3px;text-align:center;color:#16733a;font-size:10px;font-weight:700}
.login-card-footer{margin-top:18px;padding-top:17px;border-top:1px solid #e3e9e5;color:#6c7971}.login-card-footer p{margin:0;font-size:11px;line-height:1.5}
.login-meta{position:relative;z-index:1;display:flex;justify-content:center;gap:22px;margin-top:17px;color:#7d8982;font-size:9px}.login-meta span+span{position:relative}.login-meta span+span:before{content:"";position:absolute;left:-12px;top:2px;bottom:2px;width:1px;background:#cfd8d2}

@media(max-width:1180px){
  .login-experience{grid-template-columns:minmax(0,1fr) minmax(430px,.8fr)}
  .login-hero-content{padding:38px 40px 32px}
  .hero-message h1{font-size:43px}
  .hero-features{grid-template-columns:1fr;gap:9px}.hero-features article:nth-child(n+4){display:none}
  .hero-metrics{grid-template-columns:repeat(2,1fr)}.hero-metrics div:nth-child(3):before{display:none}
}

@media(max-width:930px){
  .login-page{padding:0;background:#fff;display:block}
  .login-experience{width:100%;min-height:100vh;border:0;border-radius:0;display:block;box-shadow:none}
  .login-hero{min-height:370px}.login-hero-content{padding:28px 32px}.hero-message{margin:auto 0 0}.hero-message h1{max-width:700px;font-size:39px}.hero-message p{font-size:15px}.hero-features,.hero-metrics,.hero-trust{display:none}
  .login-access,.login-panel{padding:34px 28px}.login-card{max-width:460px}.login-meta{margin-bottom:8px}
}

@media(max-width:620px){
  .login-hero{min-height:260px}.login-hero-content{padding:22px}.hero-brand img{width:48px;height:48px;border-radius:13px}.hero-brand strong{font-size:17px}.hero-brand small{font-size:8px}.hero-kicker{font-size:9px;margin-bottom:10px}.hero-message h1{font-size:29px;letter-spacing:-.8px}.hero-message p{display:none}
  .login-access,.login-panel{padding:28px 20px 20px}.login-card-header{margin-bottom:22px}.login-card-header h1{font-size:28px}.login-card-header p{font-size:13px}
  .login-card-brand img{width:48px;height:48px}.login-card-brand strong{font-size:15px}.login-card-brand small{font-size:9px}.demo-badge{padding:7px 9px;font-size:8px}.demo-badge svg{display:none}
  .login-heading h2{font-size:29px}.login-heading p{font-size:13px}.demo-credentials{grid-template-columns:1fr}.demo-actions{flex-direction:column}.login-meta{flex-wrap:wrap;gap:9px}.login-meta span+span:before{display:none}
  .login-aux-controls{gap:11px}.remember-control{font-size:12px}
}

@media(max-width:390px){
  .hero-brand small{display:none}.hero-message h1{font-size:26px}.login-heading{text-align:left}.login-shield{margin-left:0}.login-heading p{margin-left:0}.login-meta{display:none}
  .login-access,.login-panel{padding:24px 16px 16px}
}

@media(max-height:735px) and (min-width:931px){
  .login-page{padding:10px}.login-experience{min-height:calc(100vh - 20px)}
  .login-hero-content{padding:27px 42px 24px}.hero-brand img{width:50px;height:50px}.hero-message{margin:auto 0 20px}.hero-message h1{font-size:39px}.hero-message p{font-size:14px;margin-top:12px}.hero-features{margin-bottom:15px}.hero-features article:nth-child(n+3){display:none}.hero-metrics div{padding:11px 16px}.hero-trust{display:none}
  .login-access,.login-panel{padding:22px 48px 16px}.login-card-header{margin-bottom:18px}.login-card-header h1{font-size:30px}.login-card-header p{margin-top:6px;font-size:13px}.login-heading{margin-bottom:15px}.login-heading h2{font-size:30px}.login-heading p{margin-top:6px}.login-form{gap:12px}.login-form .login-field input[type="email"],.login-form .login-field input[type="password"],.login-form .login-field input[type="text"]{height:48px}.login-submit{height:49px}.login-aux-controls{gap:10px}.demo-access{margin-top:13px;padding:11px 14px}.demo-credentials{margin-top:8px}.demo-actions{margin-top:7px}.login-card-footer{margin-top:12px;padding-top:12px}.login-meta{margin-top:8px}
}

@media(prefers-reduced-motion:reduce){.login-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.demo-environment-banner{margin:0;padding:8px 16px;background:#0f766e;color:#fff;font-size:14px;font-weight:700;text-align:center}
