/* ================================================================
   ERATGUARD PREMIUM AUTH SYSTEM V1
   Single visual owner for Login / Register / Forgot / Reset
   ================================================================ */

:root{
  --eg-bg:#020812;
  --eg-panel:#061323;
  --eg-panel-2:#081a2e;
  --eg-blue:#1688ff;
  --eg-cyan:#31c7ff;
  --eg-white:#f5f9ff;
  --eg-text:#aab9cf;
  --eg-muted:#657792;
  --eg-border:rgba(102,166,255,.23);
  --eg-glow:rgba(18,137,255,.28);
  --eg-danger:#ff7585;
  --eg-success:#66e5ae;
  --eg-radius:15px;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  min-height:100%;
}

body.eg-auth{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--eg-white);
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 50% -8%,rgba(10,91,190,.34),transparent 32%),
    radial-gradient(circle at 100% 13%,rgba(0,132,255,.10),transparent 25%),
    linear-gradient(180deg,#06172c 0%,#020a14 48%,#01050b 100%);
}

body.eg-auth:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(rgba(36,130,255,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,130,255,.11) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,#000,transparent 62%);
}

.eg-auth-shell{
  width:min(100%,480px);
  min-height:100vh;
  margin:auto;
  position:relative;
  padding:20px 22px 24px;
  isolation:isolate;
}

.eg-auth-hex{
  position:absolute;
  z-index:-1;
  top:0;
  right:-55px;
  width:280px;
  height:250px;
  opacity:.18;
  pointer-events:none;
  background:
    radial-gradient(circle at 40% 35%,rgba(32,157,255,.24),transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='48' viewBox='0 0 42 48'%3E%3Cpath d='M21 1L40 12v24L21 47 2 36V12z' fill='none' stroke='%232a92ff' stroke-opacity='.42'/%3E%3C/svg%3E");
  mask-image:linear-gradient(135deg,#000,transparent 78%);
}

.eg-brand{
  text-align:center;
}

.eg-brand-shield{
  width:68px;
  height:auto;
  display:block;
  margin:0 auto;
  filter:drop-shadow(0 0 15px rgba(24,151,255,.42));
}

.eg-brand-name{
  margin-top:3px;
  font-size:25px;
  line-height:1;
  font-weight:900;
  letter-spacing:4px;
}

.eg-brand-name span{
  color:var(--eg-blue);
}

.eg-brand-tag{
  margin-top:7px;
  color:#a4b4cb;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:1.55px;
  text-transform:uppercase;
}

.eg-wave{
  position:relative;
  height:78px;
  margin:0 -22px -7px;
  overflow:hidden;
  pointer-events:none;
}

.eg-wave:before,
.eg-wave:after{
  content:"";
  position:absolute;
  width:132%;
  height:115px;
  left:-16%;
  border-radius:50%;
  transform:rotate(5deg);
}

.eg-wave:before{
  top:4px;
  border-bottom:7px solid transparent;
  background:
    linear-gradient(
      to bottom,
      transparent 76%,
      #0c82ff 77%,
      #5dd8ff 81%,
      #f4fdff 84%,
      #168dff 88%,
      transparent 91%
    );
  filter:
    drop-shadow(0 0 8px rgba(0,155,255,.85))
    drop-shadow(0 0 15px rgba(25,119,255,.40));
}

.eg-wave:after{
  top:9px;
  border-bottom:1px solid rgba(220,249,255,.72);
  opacity:.8;
}

.eg-auth-content{
  position:relative;
  z-index:2;
}

.eg-auth-title{
  margin:0;
  font-size:31px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.8px;
}

.eg-auth-title span{
  color:var(--eg-blue);
}

.eg-auth-subtitle{
  margin:7px 0 0;
  color:#8a9bb5;
  font-size:13px;
  line-height:1.45;
}

.eg-auth-form{
  margin-top:17px;
}

.eg-field{
  margin-top:11px;
}

.eg-field:first-child{
  margin-top:0;
}

.eg-field label{
  display:block;
  margin:0 0 6px 3px;
  color:#b0bdd0;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.1px;
  text-transform:uppercase;
}

.eg-input{
  position:relative;
}

.eg-input-icon{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  color:#718bad;
  display:grid;
  place-items:center;
  pointer-events:none;
}

.eg-input-icon svg,
.eg-eye svg{
  width:20px;
  height:20px;
}

.eg-input input{
  width:100%;
  height:53px;
  padding:0 50px;
  border:1px solid var(--eg-border);
  border-radius:var(--eg-radius);
  outline:0;
  color:#f5f9ff;
  background:rgba(5,20,38,.84);
  font-size:14px;
  transition:.2s ease;
  -webkit-appearance:none;
}

.eg-input input::placeholder{
  color:#61728c;
}

.eg-input input:focus{
  border-color:rgba(49,161,255,.78);
  background:rgba(7,25,47,.96);
  box-shadow:
    0 0 0 3px rgba(22,136,255,.08),
    0 0 22px rgba(22,136,255,.10);
}

.eg-eye{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  padding:0;
  border:0;
  display:grid;
  place-items:center;
  color:#8096b6;
  background:transparent;
  cursor:pointer;
}

.eg-auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  color:#a9b7ca;
  font-size:12px;
}

.eg-auth-link{
  color:#20b9ff;
  text-decoration:none;
  font-weight:700;
}

.eg-check{
  display:flex;
  align-items:center;
  gap:8px;
}

.eg-check input{
  width:18px;
  height:18px;
  accent-color:var(--eg-blue);
}

.eg-btn{
  width:100%;
  height:54px;
  margin-top:15px;
  border:0;
  border-radius:17px;
  position:relative;
  color:white;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(135deg,#0874e9,#159eff);
  box-shadow:
    0 12px 30px rgba(0,112,255,.25),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.eg-btn:after{
  content:"→";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-52%);
  color:#75e5ff;
  font-size:23px;
  font-weight:400;
}

.eg-btn:active{
  transform:scale(.987);
}

.eg-secondary-action{
  margin-top:17px;
  text-align:center;
  color:#8b9bb1;
  font-size:12px;
}

.eg-secondary-action a{
  margin-left:5px;
  color:#20b9ff;
  font-weight:800;
  text-decoration:none;
}

.eg-policy{
  margin-top:8px;
  padding:9px 11px;
  border:1px solid rgba(53,145,255,.14);
  border-radius:11px;
  color:#71839e;
  background:rgba(13,50,92,.14);
  font-size:10px;
  line-height:1.45;
}

.eg-policy b{
  color:#58a7ff;
}

.eg-legal{
  margin-top:11px;
  text-align:center;
  color:#718099;
  font-size:10px;
  line-height:1.45;
}

.eg-legal a{
  color:#4da1ff;
  text-decoration:none;
}

.eg-alert{
  margin-top:13px;
  padding:11px 13px;
  border-radius:12px;
  font-size:12px;
  line-height:1.45;
}

.eg-alert-error{
  color:#ffc4cc;
  border:1px solid rgba(255,83,105,.27);
  background:rgba(255,83,105,.08);
}

.eg-alert-success{
  color:#c6ffe0;
  border:1px solid rgba(70,224,160,.26);
  background:rgba(70,224,160,.08);
}

.eg-auth-foot{
  margin-top:18px;
  text-align:center;
  color:#44556e;
  font-size:9px;
  letter-spacing:.9px;
  text-transform:uppercase;
}

@media(max-width:600px){
  .eg-auth-shell{
    padding-top:17px;
  }

  .eg-brand-shield{
    width:60px;
  }

  .eg-brand-name{
    font-size:23px;
  }

  .eg-wave{
    height:67px;
  }

  .eg-auth-title{
    font-size:29px;
  }

  .eg-input input{
    height:51px;
  }

  .eg-btn{
    height:51px;
  }
}

@media(max-width:600px) and (max-height:760px){
  .eg-auth-shell{
    padding-top:12px;
  }

  .eg-brand-shield{
    width:53px;
  }

  .eg-brand-name{
    font-size:21px;
  }

  .eg-brand-tag{
    margin-top:4px;
  }

  .eg-wave{
    height:58px;
  }

  .eg-auth-form{
    margin-top:13px;
  }

  .eg-field{
    margin-top:8px;
  }

  .eg-input input{
    height:48px;
  }
}

/* ================================================================
   ERATGUARD PREMIUM AUTH V2
   Reference geometry refinement
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@600;700;800&family=Figtree:wght@400;500;600;700&display=swap');

:root{
  --eg-display:"Exo 2","Segoe UI",system-ui,sans-serif;
  --eg-body:"Figtree","Segoe UI",system-ui,sans-serif;
}

body.eg-auth{
  font-family:var(--eg-body);
  background:
    radial-gradient(ellipse at 50% -6%,
      rgba(10,91,190,.36) 0%,
      rgba(4,33,68,.18) 31%,
      transparent 55%),
    linear-gradient(180deg,#06172c 0%,#020914 46%,#01050b 100%);
}

.eg-auth-shell{
  overflow:hidden;
}

/* Reference-style right-side honeycomb field */
.eg-auth-hex{
  top:0;
  right:-15px;
  width:285px;
  height:300px;
  opacity:.42;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(6,27,53,.16) 24%,
      rgba(7,51,96,.20) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34.64' viewBox='0 0 40 34.64'%3E%3Cpath d='M10 0L20 5.77L20 17.32L10 23.09L0 17.32L0 5.77Z M30 0L40 5.77L40 17.32L30 23.09L20 17.32L20 5.77Z M20 17.32L30 23.09L30 34.64L10 34.64L10 23.09Z' fill='none' stroke='%231e6fd9' stroke-width='.65' stroke-opacity='.58'/%3E%3C/svg%3E");
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.20) 25%,#000 100%),
    linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.20) 25%,#000 100%);
}

/* Brand proportions from the visual reference */
.eg-brand{
  position:relative;
  z-index:4;
}

.eg-brand-shield{
  width:72px;
  filter:
    drop-shadow(0 0 6px rgba(47,196,255,.75))
    drop-shadow(0 0 18px rgba(30,139,255,.45));
}

.eg-brand-name{
  font-family:var(--eg-display);
  font-size:27px;
  font-weight:800;
  letter-spacing:.115em;
}

.eg-brand-tag{
  font-family:var(--eg-body);
  color:#b8c6da;
  font-size:9px;
  font-weight:500;
  letter-spacing:.17em;
}

/*
   True reference wave.
   SVG data URI replaces the previous ellipse/ring approximation.
*/
.eg-wave{
  height:112px;
  margin:-2px -22px -23px;
  overflow:hidden;
  position:relative;
  z-index:3;
}

.eg-wave:before{
  content:"";
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
  transform:none;
  filter:none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 112' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%231e8bff'/%3E%3Cstop offset='.38' stop-color='%232fc4ff'/%3E%3Cstop offset='.63' stop-color='%23f3fdff'/%3E%3Cstop offset='.82' stop-color='%236fdcff'/%3E%3Cstop offset='1' stop-color='%231e8bff'/%3E%3C/linearGradient%3E%3Cfilter id='glow' x='-20%25' y='-80%25' width='140%25' height='260%25'%3E%3CfeGaussianBlur stdDeviation='4' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-20 25 C90 2 165 12 252 58 C326 97 397 100 500 49' fill='none' stroke='%230b69db' stroke-opacity='.34' stroke-width='13'/%3E%3Cpath d='M-20 25 C90 2 165 12 252 58 C326 97 397 100 500 49' fill='none' stroke='url(%23g)' stroke-width='5' filter='url(%23glow)'/%3E%3Cpath d='M-20 22 C90 0 165 10 252 56 C326 95 397 98 500 47' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}

.eg-wave:after{
  content:"";
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
  transform:none;
  opacity:1;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 68%,
      rgba(2,9,20,.38) 83%,
      rgba(2,9,20,.82) 100%
    );
  pointer-events:none;
}

.eg-auth-content{
  z-index:5;
}

.eg-auth-title{
  font-family:var(--eg-display);
  font-size:31px;
  font-weight:800;
  letter-spacing:-.025em;
}

.eg-auth-subtitle{
  color:#93a3ba;
  font-family:var(--eg-body);
}

.eg-field label{
  font-family:var(--eg-body);
}

.eg-input input{
  font-family:var(--eg-body);
  background:#071426;
  border-color:#1a2a42;
}

.eg-input input:focus{
  border-color:#1e8bff;
  box-shadow:0 0 0 3px rgba(30,139,255,.12);
}

.eg-btn{
  font-family:var(--eg-body);
  border-radius:999px;
  background:linear-gradient(180deg,#2a98ff 0%,#0964e9 100%);
  box-shadow:
    0 12px 30px -10px rgba(30,139,255,.72),
    inset 0 1px 0 rgba(105,198,255,.42);
}

.eg-btn:after{
  color:#73e5ff;
  font-weight:400;
}

@media(max-width:600px){
  .eg-brand-shield{
    width:68px;
  }

  .eg-brand-name{
    font-size:26px;
  }

  .eg-wave{
    height:106px;
    margin-top:-4px;
    margin-bottom:-22px;
  }
}

@media(max-width:600px) and (max-height:760px){
  .eg-brand-shield{
    width:60px;
  }

  .eg-brand-name{
    font-size:24px;
  }

  .eg-wave{
    height:92px;
    margin-bottom:-20px;
  }
}