:root{
  --bg:#0a0a0b;
  --panel:#151618;
  --field:#1A1B1E;
  --fieldBorder:#2a2b2f;
  --text:#e9e9eb;
  --muted:#bdbec4;
  --dim:#8b8d94;
  --accent:#ff8b2a;
  --accent-strong:#ff7a00;
  --gold:#cfa25d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* Background */
.bg{
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:-2;
  background: #0a0a0b url('bg.jpg') center/cover no-repeat;
}

/* Disable synthetic overlay layers so only bg.jpg is visible */
.bg-layer{ display:none }

/* Header icons (mobile baseline) */
.topbar{
  position:fixed; right:12px; top:12px; display:flex; align-items:center; gap:10px;
}
.lang{
  border:1.5px solid var(--accent);
  color:#111; background:var(--accent);
  font-weight:700; font-size:11px;
  width:26px; height:20px; display:grid; place-items:center; border-radius:6px;
  box-shadow:0 0 0 1px rgba(0,0,0,0.4) inset;
}
.icons{display:flex; gap:8px}
.icon-btn{
  cursor:pointer; border:none; background:rgba(0,0,0,0.35);
  width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center;
  box-shadow:0 0 0 1px rgba(255,139,42,0.35) inset;
}
.icon-btn svg{width:20px; height:20px}

/* Content container (mobile-first) */
.card{
  position:relative;
  max-width:720px;
  margin:64px auto 0;
  padding:16px 16px 24px;
}

.greeting h1{
  margin:0 0 2px; font-size:30px; letter-spacing:.2px; font-weight:400;
}
.greeting p{
  margin:0; font-size:18px; color:#d8d8dc; letter-spacing:.2px;
}

/* Tabs */
.tabs{margin-top:22px; position:relative; display:flex; gap:22px; align-items:flex-end}
.tab{
  background:none; border:none; color:var(--dim); font-size:18px; padding:0; cursor:pointer;
}
.tab.active{color:var(--accent)}
.tab-underline{
  position:absolute; left:0; right:55%; bottom:-5px; height:3px; background:var(--accent); border-radius:2px;
}
.tabs::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:1.2px; background:#5a5b60;
}

/* Form */
.form{margin-top:26px}
.label{
  display:block; color:#e6e6ea; margin:14px 0 8px; font-size:16px;
}
.input-wrap{
  position:relative; height:54px; border-radius:14px;
  background:linear-gradient(#1a1b1e,#1a1b1e) padding-box, linear-gradient(180deg,#2b2c30,#111214) border-box;
  border:1px solid transparent; display:flex; align-items:center; padding:0 14px; color:#cfd0d6;
}
.input-wrap input{
  flex:1; height:100%; border:none; outline:none; background:transparent; color:#e9e9ed;
  font-size:16px;
}
.input-wrap input::placeholder{color:#9ea0a7}

.prefix{
  display:flex; align-items:center; gap:6px; color:#e9e9ed; margin-right:8px; font-size:16px;
}
.prefix .country{font-weight:600}
.prefix .chev{width:16px; height:16px; color:#c6c7ce}

.eye{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border:none; background:transparent; color:#c6c7ce; cursor:pointer;
}
.eye svg{width:22px; height:22px}

.row{display:flex; gap:12px; align-items:center; margin-top:12px}
.between{justify-content:space-between}
.remember{display:flex; gap:10px; align-items:flex-start; color:#e9e9ed; font-size:14px; line-height:1.2}
.remember input{width:18px; height:18px; accent-color:var(--accent)}

.link{color:#d6d6db; text-decoration:none; font-size:14px}
.accent{color:var(--accent)}

.primary{
  margin-top:20px; width:100%; height:56px; border:none; border-radius:16px; cursor:pointer;
  color:#fff; font-weight:500; font-size:20px; letter-spacing:.2px;
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
  box-shadow:0 10px 24px rgba(255,132,36,0.28);
}

.signup{margin:16px 0 0; text-align:center; color:#cacbd2; font-size:14px}
.signup .accent{text-decoration:none}

/* ---------- Responsive upscales ---------- */
@media (min-width:480px){
  .topbar{right:16px; top:14px}
  .icon-btn{width:30px; height:30px}
  .icon-btn svg{width:21px; height:21px}

  .card{margin:72px auto 0; padding:18px 18px 28px}
  .greeting h1{font-size:40px}
  .greeting p{font-size:20px}

  .tab{font-size:20px}
  .tab-underline{height:3px}

  .input-wrap{height:58px; border-radius:16px; padding:0 16px}
  .input-wrap input{font-size:17px}
  .prefix{font-size:17px}
  .eye{right:14px}

  .remember{font-size:15px}
  .link{font-size:15px}
  .primary{height:60px; font-size:22px}
  .signup{font-size:15px}
}

@media (min-width:768px){
  .topbar{right:22px; top:18px; gap:14px}
  .lang{font-size:12px; width:28px; height:22px}
  .icon-btn{width:32px; height:32px; border-radius:9px}
  .icon-btn svg{width:22px; height:22px}

  .card{margin:80px auto 0; padding:20px 24px 32px}
  .greeting h1{font-size:44px}
  .greeting p{font-size:24px}

  .tabs{gap:34px; margin-top:30px}
  .tab{font-size:26px}
  .tab-underline{bottom:-6px; height:4px}
  .tabs::after{bottom:-8px; height:1.5px}

  .label{font-size:22px; margin:18px 0 10px}
  .input-wrap{height:68px; border-radius:18px; padding:0 18px}
  .input-wrap input{font-size:20px}
  .prefix{font-size:20px}
  .prefix .chev{width:18px; height:18px}
  .eye{right:16px; width:28px; height:28px}
  .eye svg{width:24px; height:24px}

  .row{gap:16px; margin-top:14px}
  .remember{font-size:20px}
  .link{font-size:16px}
  .primary{height:66px; font-size:26px; border-radius:18px}
  .signup{font-size:18px}
}
/* Panels for tab content */
.panel{display:none}
.panel.active{display:block}

/* Make underline follow the active tab */
.tabs{--tab-left:0px; --tab-width:140px; position:relative}
.tab-underline{
  position:absolute; bottom:-5px;
  left:var(--tab-left); width:var(--tab-width); height:3px;
  background:var(--accent); border-radius:2px; transition:left .25s ease,width .25s ease;
}
@media (min-width:768px){
  .tab-underline{bottom:-6px; height:4px}
}
/* Country code dropdown */
.cc-wrap{position:relative}
.cc-trigger{
  display:flex; align-items:center; gap:6px; color:#e9e9ed; margin-right:8px; font-size:16px;
  background:transparent; border:none; padding:0; cursor:pointer;
}
@media (min-width:768px){ .cc-trigger{font-size:20px} }
.cc-menu{
  position:absolute; left:10px; top:62px; z-index:20; width:280px; max-height:300px;
  background:#141518; border:1px solid #2b2c30; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.45);
  display:none; overflow:hidden;
}
.input-wrap .cc-menu{ top:calc(100% + 8px) } /* if input height changes */
.cc-menu.open{display:block}
.cc-search-wrap{padding:8px 10px; border-bottom:1px solid #232429}
.cc-search{
  width:100%; height:36px; border-radius:8px; border:1px solid #2b2c30; background:#1a1b1e; color:#e9e9ed; outline:none; padding:0 10px; font-size:14px;
}
.cc-list{max-height:230px; overflow:auto}
.cc-option{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; cursor:pointer; font-size:14px; color:#e9e9ed;
}
.cc-option:hover{background:#1d1f23}
.cc-name{opacity:.9}
.cc-dial{color:var(--accent); font-weight:600}