/* TrkFit V4 — css/auth.css */

.auth-wrap {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}
@media(min-width:800px){ .auth-wrap { grid-template-columns: 1fr 1fr; } }

/* Left branding panel */
.auth-brand {
  display: none;
  background: linear-gradient(145deg,#00c96e,#0072ff);
  padding: 48px 40px;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
@media(min-width:800px){ .auth-brand { display:flex; } }

.auth-brand::before {
  content:'';
  position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.07'%3E%3Ccircle cx='40' cy='40' r='36'/%3E%3C/g%3E%3C/svg%3E");
}

.auth-brand-logo { position:relative; display:flex; align-items:center; gap:10px; }
.auth-brand-logo span { font-family:var(--font-head); font-size:22px; font-weight:800; color:#fff; }

.auth-brand-tagline {
  position:relative;
  font-family:var(--font-head);
  font-size:clamp(28px,3vw,40px);
  font-weight:800;
  color:#fff;
  line-height:1.2;
}
.auth-brand-tagline em { font-style:normal; opacity:.7; font-size:.7em; }

.auth-brand-features {
  position:relative;
  display:flex; flex-direction:column; gap:14px;
}
.auth-feat-item {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  padding:12px 16px;
  font-size:13px; font-weight:600; color:#fff;
}

/* Right form panel */
.auth-form-panel {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding: clamp(24px,6vw,64px) clamp(16px,6vw,56px);
  min-height:100dvh;
  background:var(--c-bg);
  width: 100%;
  box-sizing: border-box;
}

.auth-form-wrap {
  width:100%; max-width:420px;
}

.auth-top-logo {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-size:20px; font-weight:800;
  color:var(--c-text); margin-bottom:32px;
  text-decoration:none;
}
@media(min-width:800px){ .auth-top-logo { display:none; } }

.auth-tabs {
  display:flex;
  background:var(--c-surface2);
  border:1px solid var(--c-border);
  border-radius:var(--r-full);
  padding:4px; gap:4px;
  margin-bottom:28px;
}
.auth-tab {
  flex:1; padding:9px 16px;
  border-radius:var(--r-full);
  font-size:14px; font-weight:700;
  color:var(--c-text3);
  transition:all var(--tr-md);
  text-align:center; cursor:pointer;
}
.auth-tab.active {
  background:var(--c-surface);
  color:var(--c-text);
  box-shadow:var(--sh-sm);
}

.auth-heading { font-family:var(--font-head); font-size:26px; font-weight:800; color:var(--c-text); margin-bottom:6px; }
.auth-sub     { font-size:13px; color:var(--c-text3); margin-bottom:28px; }

.auth-form { display:flex; flex-direction:column; gap:16px; }

/* Google btn */
.btn-google {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:11px 20px;
  border:1.5px solid var(--c-border);
  border-radius:var(--r-full);
  background:var(--c-surface);
  color:var(--c-text2);
  font-size:14px; font-weight:700;
  transition:all var(--tr);
  cursor:pointer;
}
.btn-google:hover { border-color:var(--c-blue); color:var(--c-blue); background:var(--c-blue-lt); }
.btn-google svg { width:18px; height:18px; }

.auth-footer {
  margin-top:20px;
  text-align:center;
  font-size:13px;
  color:var(--c-text3);
}
.auth-footer a { color:var(--c-accent); font-weight:700; }
.auth-footer a:hover { text-decoration:underline; }

.auth-error {
  background:var(--c-red-lt);
  border:1px solid rgba(255,77,109,.2);
  border-radius:var(--r-sm);
  padding:10px 14px;
  font-size:13px;
  color:var(--c-red);
  display:none;
}
.auth-error.show { display:block; }

.forgot-link {
  font-size:12px; color:var(--c-text3);
  text-align:right; display:block;
  margin-top:-8px;
  transition:color var(--tr);
}
.forgot-link:hover { color:var(--c-accent); }

.password-wrap { position:relative; }
.password-wrap .input { padding-right:44px; }
.eye-btn {
  position:absolute; right:12px; top:50%;
  transform:translateY(-50%);
  color:var(--c-text3); font-size:16px;
  cursor:pointer; padding:4px;
  transition:color var(--tr);
}
.eye-btn:hover { color:var(--c-text); }