:root{
  --bg-gutter:#1a1a1a;
  --page:#ffffff;
  --text:#111111;
  --muted:#6b6b6b;
  --line:#cfcfcf;
  --border:#cfcfcf;
  --border-2:#bfbfbf;
  --btn-black:#151515;
  --btn-black-hover:#101010;
  --yellow:#ffd400; /* screenshot-like yellow */
  --yellow-hover:#ffcf00;
  --link:#111111;
  --radius:6px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--page);
  color: var(--text);
}

/* Side gutters like screenshot */
.side{
  position:fixed;
  top:0; bottom:0;
  width: 18vw;
  min-width: 170px;
  background: var(--bg-gutter);
  z-index: 0;
}
.side-left{left:0}
.side-right{right:0}
@media (max-width: 900px){
  .side{width: 10vw; min-width: 90px;}
}
@media (max-width: 620px){
  .side{display:none;}
}

/* Centered white content */
.page{
  position:relative;
  z-index:1;
  min-height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: 56px 18px;
}

.card{
  width: 560px;
  max-width: 100%;
  padding: 0;
}

.title{
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.6px;
  margin: 0 0 26px 0;
  font-weight: 800;
}

.google-btn{
  width:100%;
  height: 52px;
  border-radius: var(--radius);
  border: 0;
  background: var(--btn-black);
  color: #fff;
  font-weight: 650;
  font-size: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  cursor:pointer;
  transition: background .15s ease, transform .05s ease;
}
.google-btn:hover{ background: var(--btn-black-hover); }
.google-btn:active{ transform: translateY(1px); }

.divider{
  margin: 22px 0 18px;
  display:flex;
  align-items:center;
  gap: 14px;
  color: var(--muted);
  font-size: 14px;
}
.divider .line{
  height:1px;
  flex:1;
  background: var(--line);
}
.divider .or{
  color: #444;
}

.field{
  display:block;
  margin: 0 0 18px 0;
}

.label{
  display:block;
  font-size: 15px;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.input{
  width:100%;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  outline: none;
  background:#fff;
  color: var(--text);
}
.input:focus{
  border-color: var(--border-2);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}

.password-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.password-wrap .input{
  padding-right: 52px;
}
.eye-btn{
  position:absolute;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #7a7a7a;
  display:grid;
  place-items:center;
  cursor:pointer;
  border-radius: 999px;
}
.eye-btn:hover{
  background: rgba(0,0,0,0.04);
  color: #444;
}

.note{
  text-align:center;
  margin: 10px 0 14px;
  color: #6a6a6a;
  font-size: 15px;
}

.cta{
  width:100%;
  height: 56px;
  border-radius: var(--radius);
  border: 0;
  background: var(--yellow);
  color: #111;
  font-weight: 750;
  font-size: 16px;
  cursor:pointer;
  transition: background .15s ease, transform .05s ease;
}
.cta:hover{ background: var(--yellow-hover); }
.cta:active{ transform: translateY(1px); }

.signin{
  text-align:center;
  margin: 20px 0 10px;
  color: #5f5f5f;
  font-size: 15px;
}

.legal{
  text-align:center;
  margin: 10px 0 0;
  color: #6b6b6b;
  font-size: 14px;
}

.link{
  color: var(--link);
  text-decoration: underline;
}

.status{
  text-align:center;
  margin: 10px 0 0;
  min-height: 20px;
  font-size: 14px;
  color: #1a1a1a;
}

/* Mobile typography closer to screenshot proportions */
@media (max-width: 520px){
  .page{ padding: 38px 16px; }
  .title{
    font-size: 34px;
    margin-bottom: 20px;
  }
  .input, .cta, .google-btn{ height: 54px; }
}
.responsive-img{
  width: 100%;
  max-width: 100%;
  height: auto;      /* keeps correct aspect ratio */
  display: block;    /* removes bottom gap */
}