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

:root{
  --bg:#0B0B0B;
  --panel:#1c1c1c;
  --muted:#a7a7a7;
  --text:#eaeaea;
  --input:#242424;
  --input-border:#2f2f2f;
  --focus:#EFA70B;
  --brand:#EFA70B;      /* golden accent */
  --brand-press:#c28f0b;
  --radius:14px;
  --shadow: 0 20px 50px rgba(0,0,0,.45);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
  letter-spacing:.2px;
}

/* Top bar */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 36px;
}
.logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.header a.tutor-link{ font-size:13px; color:#EFA70B; text-decoration:none; opacity:.9; }
.header a.tutor-link:hover{ opacity:1; text-decoration:underline }

/* Layout (left hero + right card, no vertical jump) */
.main{
    max-width: 100%;
    display: flex;
    margin: 0 auto;
    /* display: grid
; */
    justify-content: space-around;
    grid-template-columns: 1fr minmax(380px, 430px);
    gap: 30px;
    align-items: center;
    /* padding: 40px 36px 80px; */
    min-height: calc(100vh - 0px);
}
.hero{
  display:flex;
  flex-direction:column;
  gap: 10px;
  justify-content:center;              
}

/* Left hero */
.hero h1{
  font-size:48px;
  line-height:1.02;
  margin:0 0 0px 0;
  letter-spacing:.5px;
}
.hero .accent{ color:var(--brand); }
.hero p{ margin:0; color:#cfcfcf; font-weight:500; font-size:18px; }
.hero p .handle{ color:var(--brand); font-weight:700; }

/* Auth card */
.card{
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow: 0 15px 40px rgba(0,0,0,.38);  /* softer */
  padding:28px;
  max-width:440px;                            /* keep desktop width tidy */
}
.card h3{ margin:0 0 6px 0; font-size:18px; text-align:center; opacity:.95; }
.card .welcome{ text-align:center; color:var(--muted); font-size:14px; margin-bottom:18px; }

.form-row{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
label{ font-size:12px; color:#cfcfcf; opacity:.9; }

/* Inputs — single source of truth */
input[type="text"],
input[type="email"],
input[type="password"]{
  width:100%;
  height:48px;
  padding:12px 14px;
  background:var(--input);
  border:1px solid var(--input-border);
  border-radius:12px;
  color:var(--text);
  color-scheme:dark;
  outline:none;
  transition:border .2s, box-shadow .2s;
}
input::placeholder{ color:#8a8a8a; }
input:focus{ border-color:#595959; box-shadow:0 0 0 3px rgba(226,163,9,.16); }

/* Autofill fixes */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--input) inset !important;
  box-shadow:0 0 0 1000px var(--input) inset !important;
  border:1px solid var(--input-border) !important;
  caret-color:var(--text);
}
:-moz-autofill{
  box-shadow:0 0 0 1000px var(--input) inset !important;
  -moz-text-fill-color:var(--text) !important;
  border:1px solid var(--input-border) !important;
}

/* Inline row */
.form-inline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:6px 0 18px;
  font-size:13px;
}
.checkbox{ display:inline-flex; gap:8px; align-items:center; color:#cfcfcf; }
.checkbox input{ width:16px; height:16px; accent-color: var(--brand); transform: translateY(1px); }
a.link{ color:#bfbfbf; text-decoration:none; }
a.link:hover{ color:#fff; text-decoration:underline; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:13px 16px; border-radius:10px; font-weight:700; border:0; cursor:pointer;
  transition: transform .02s ease, filter .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background:var(--brand); color:#161616; }
.btn-primary:hover{ filter:saturate(1.05) brightness(.98); background:var(--brand-press); }

/* tiny legal */
.legal{ margin-top:18px; color:#a9a9a9; font-size:11px; text-align:center; line-height:1.4; }
.legal a{ color:#c8c8c8; text-decoration:underline; }

/* Header logo image */
.logo-img{ height:56px; width:auto; display:block; }

/* View toggling for login/signup */
.view{ display:none; }
.view.active{ display:block; }

/* Sign in / Sign up switch row */
.auth-switch{
  display:flex; justify-content:center; gap:8px; margin-top:14px; font-size:14px; color:#cfcfcf;
}
.link-btn{ background:none; border:0; padding:0; font:inherit; color:var(--brand); cursor:pointer; }
.link-btn:hover{ text-decoration:underline; }

/* Password eye */
.password-wrap{ position:relative; }
.password-wrap input[type="password"],
.password-wrap input[type="text"]{ padding-right:46px; }
.password-wrap .eye{
  position:absolute; right:10px; top:60%; transform:translateY(-50%);
  background:transparent; border:0; cursor:pointer; font-size:16px; color:#cfcfcf;
}

/* Responsive */
@media (max-width: 980px){
  .main{ grid-template-columns: 1fr; gap:24px; padding:20px; }
  .hero h1{ font-size:44px; }
  .header{ padding:20px; }
}
@media (max-width:980px){
  .main{ padding-top:28px; flex-direction:column}
}