@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");
:root{--bg:#060a0e;--panel:#0d141c;--line:rgba(160,185,201,.16);--text:#edf4f6;--muted:#8d9ba8;--green:#35d145;--green2:#7cf35d;--gold:#d6b04a;--mono:"DM Mono",monospace;--display:"Space Grotesk",sans-serif;--body:"Manrope",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh}.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}.auth-visual{position:relative;overflow:hidden;background:#0b1118}.auth-visual img{width:100%;height:100%;object-fit:cover;filter:grayscale(.48) contrast(1.08);opacity:.78}.auth-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,8,12,.2),rgba(4,8,12,.72)),linear-gradient(0deg,rgba(4,8,12,.85),transparent 55%)}.grid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(150,180,195,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(150,180,195,.08) 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(180deg,black,transparent 90%)}.visual-content{position:absolute;z-index:2;left:8%;right:8%;bottom:8%}.visual-content .kicker{font:500 10px var(--mono);letter-spacing:.16em;color:var(--green2)}.visual-content h1{font:600 clamp(48px,6vw,82px)/.95 var(--display);letter-spacing:-.065em;margin:18px 0}.visual-content p{max-width:450px;color:#b2bdc5;line-height:1.8;font-size:14px}.metric-row{display:flex;gap:38px;margin-top:30px}.metric strong{display:block;font:600 23px var(--display)}.metric span{font:400 9px var(--mono);text-transform:uppercase;color:#84929c}.auth-panel{display:flex;align-items:center;justify-content:center;padding:50px;background:radial-gradient(circle at 70% 20%,rgba(53,209,69,.08),transparent 25%)}.auth-box{width:min(100%,520px)}.brand{display:inline-flex;width:185px;height:72px;align-items:center;overflow:hidden;margin-bottom:40px}.brand img{width:180px;height:105px;object-fit:contain}.back{display:inline-block;color:#8997a2;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:32px}.back:hover{color:var(--green2)}.auth-box h2{font:600 43px var(--display);letter-spacing:-.055em;margin:0}.auth-box>p{color:var(--muted);font-size:13px;line-height:1.7;margin:10px 0 32px}.auth-form{display:grid;gap:17px}.field{display:grid;gap:8px}.field label,.field-row label{font:500 10px var(--mono);letter-spacing:.06em;color:#b7c2ca;text-transform:uppercase}.input-wrap{position:relative}.input-wrap input{width:100%;height:54px;border:1px solid var(--line);border-radius:7px;background:#090e14;color:#e9f1f3;padding:0 16px 0 44px;outline:0;font:400 13px var(--mono);transition:.25s}.input-wrap input:focus{border-color:rgba(124,243,93,.55);box-shadow:0 0 0 4px rgba(53,209,69,.06)}.input-wrap .icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#778691;font-size:17px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}.options{display:flex;justify-content:space-between;align-items:center;font:500 10px var(--mono);color:#9aa7b1}.check{display:flex;gap:8px;align-items:center}.check input{accent-color:var(--green);width:15px;height:15px}.forgot{color:var(--gold)}.auth-submit{height:56px;border:0;border-radius:7px;background:var(--green);color:#061007;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.25s;margin-top:5px}.auth-submit:hover{background:var(--green2);transform:translateY(-2px);box-shadow:0 14px 35px rgba(53,209,69,.2)}.switch{text-align:center;color:#8996a1;font:400 11px var(--mono);margin-top:20px}.switch a{color:var(--gold);text-decoration:none}.terms{font-size:10px;color:#72808a;line-height:1.7}.terms a{color:#aebbc3}.form-message{display:none;padding:12px 14px;border:1px solid rgba(124,243,93,.3);background:rgba(53,209,69,.07);color:var(--green2);border-radius:6px;font:400 11px var(--mono)}.form-message.show{display:block}@media(max-width:900px){.auth-shell{grid-template-columns:1fr}.auth-visual{min-height:320px}.auth-panel{padding:45px 20px}.auth-visual img{position:absolute}.visual-content{bottom:45px}.brand{margin-bottom:24px}}@media(max-width:520px){.auth-visual{min-height:270px}.visual-content h1{font-size:46px}.metric-row{gap:18px}.metric strong{font-size:18px}.two-col{grid-template-columns:1fr}.auth-panel{padding:35px 20px}.auth-box h2{font-size:38px}}
/* ===== v2: image-only visual side, smaller logo, animated coins ===== */
.brand{width:auto;height:auto;overflow:visible;margin-bottom:24px}
.brand img{width:150px;height:auto;max-height:46px;object-fit:contain}
.auth-visual img{filter:saturate(1.12) contrast(1.05);opacity:1}
.auth-visual:after{background:linear-gradient(90deg,rgba(4,8,12,.15),rgba(4,8,12,.35)),linear-gradient(0deg,rgba(4,8,12,.5),transparent 60%)}
.coin-orbit{position:absolute;inset:0;z-index:2;pointer-events:none}
.coin{position:absolute;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-style:normal;font:700 18px/1 var(--display);color:#4a3505;background:radial-gradient(circle at 32% 28%,#ffe9a3,#e8b73c 55%,#a9781a);box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 20px rgba(214,176,74,.35),inset 0 -3px 6px rgba(0,0,0,.25);animation:coinfloat 6s ease-in-out infinite}
.coin:after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed rgba(120,85,10,.45)}
.coin.c1{left:10%;top:14%}
.coin.c2{right:14%;top:32%;width:34px;height:34px;font-size:14px;animation-duration:7.5s}
.coin.c3{left:16%;bottom:18%;width:38px;height:38px;font-size:15px;animation-duration:8s}
.coin.c4{right:18%;bottom:10%;width:28px;height:28px;font-size:12px;animation-duration:6.5s}
@keyframes coinfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.auth-panel{background:radial-gradient(circle at 70% 15%,rgba(53,209,69,.10),transparent 40%)}
.auth-box{padding:34px 30px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(150deg,rgba(17,26,36,.85),rgba(9,13,19,.9));box-shadow:0 30px 70px rgba(0,0,0,.45)}
.auth-submit{background:linear-gradient(120deg,var(--green),var(--green2))}
@media(max-width:900px){.auth-visual{min-height:300px}.auth-box{padding:26px 20px}}
@media(max-width:520px){.coin.c2,.coin.c4{display:none}.coin{width:32px;height:32px;font-size:13px}.auth-visual{min-height:240px}}





/* ===== FIX FULL PAGE SCROLL FOR LOGIN + SIGNUP ===== */

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body {
  height: 100vh;
  overflow: hidden;
}

.auth-shell {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}

/* Left Image Section */
.auth-visual {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.auth-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Right Login / Signup Section */
.auth-panel {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Form Box */
.auth-box {
  width: min(100%, 520px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;

  padding: 26px 30px;

  /* Hide scrollbar but allow scroll only if very small laptop */
  scrollbar-width: none;
}

.auth-box::-webkit-scrollbar {
  display: none;
}

/* Logo size */
.brand {
  margin-bottom: 14px;
}

.brand img {
  width: 140px;
  max-height: 42px;
}

/* Back button spacing */
.back {
  margin-bottom: 18px;
}

/* Form compact */
.auth-form {
  gap: 13px;
}

.input-wrap input {
  height: 50px;
}

.auth-submit {
  height: 52px;
}

/* Signup checkbox */
.terms {
  margin-top: 2px;
}

/* Switch text */
.switch {
  margin: 15px 0 0;
}


/* ===== TABLET & MOBILE ===== */

@media (max-width: 900px) {

  body {
    height: auto;
    overflow-y: auto;
  }

  .auth-shell {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .auth-visual {
    height: 300px;
    min-height: 300px;
  }

  .auth-panel {
    height: auto;
    min-height: auto;
    overflow: visible;
    padding: 40px 20px;
  }

  .auth-box {
    max-height: none;
    overflow: visible;
  }
}


@media (max-width: 520px) {

  .auth-visual {
    height: 240px;
    min-height: 240px;
  }

  .auth-panel {
    padding: 30px 15px;
  }

  .auth-box {
    padding: 24px 18px;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .brand img {
    width: 125px;
  }

  .back {
    margin-bottom: 16px;
  }
}




/* ===== PHONE COUNTRY CODE ===== */

.phone-wrap {
  display: flex;
  gap: 10px;
}

.country-code {
  width: 155px;
  height: 50px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #090e14;
  color: var(--text);
  font: 400 11px var(--mono);
  outline: none;
  cursor: pointer;
}

.country-code:focus {
  border-color: rgba(124, 243, 93, 0.55);
  box-shadow: 0 0 0 4px rgba(53, 209, 69, 0.06);
}

.phone-input {
  flex: 1;
  min-width: 0;
}

.phone-input input {
  height: 50px;
}

@media (max-width: 520px) {
  .phone-wrap {
    gap: 7px;
  }

  .country-code {
    width: 125px;
    font-size: 10px;
  }
}