/* ============================================================
 * auth.css — Auth view styles (login/register)
 * My Travel History v2.0 — Modular CSS
 * ============================================================ */

/* ========== Auth (Stage 1) ========== */
#auth{z-index:1000;padding:var(--sp-4);
  background:url('../img/login-bg.webp') center/cover no-repeat #1C1917}
#auth::before{content:'';position:fixed;inset:0;
  background:linear-gradient(160deg,rgba(15,23,42,.6) 0%,rgba(30,41,59,.5) 40%,rgba(15,23,42,.55) 100%);
  pointer-events:none;z-index:0}
#auth.on{align-items:center;justify-content:center}

.ac{width:100%;max-width:400px;position:relative;z-index:1;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-2xl);overflow:hidden;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 32px 64px rgba(0,0,0,.3);
  animation:authCardIn .6s var(--ease)}

.ac-head{padding:40px 32px 28px;text-align:center;color:#fff}
.ac-head-icon{width:88px;height:88px;margin:0 auto 16px;
  border-radius:22px;overflow:hidden;
  box-shadow:0 8px 24px rgba(37,99,235,.35)}
.ac-head-icon img{width:100%;height:100%;object-fit:cover}
.ac-head h1{font-family:var(--font-h);font-size:26px;font-weight:800;letter-spacing:-.02em}
.ac-head p{font-size:14px;opacity:.65;margin-top:6px;line-height:1.6}

.ac-tabs{display:flex;border-bottom:2px solid rgba(255,255,255,.08)}
.ac-tab{flex:1;padding:14px;text-align:center;font-weight:600;font-size:14px;color:rgba(255,255,255,.4);
  background:transparent;border-bottom:2px solid transparent;margin-bottom:-2px;transition:.2s}
.ac-tab.on{color:#fff;border-bottom-color:var(--primary)}
.ac-form{padding:24px 32px 28px;display:none}.ac-form.on{display:block}
.ac-err{background:rgba(239,68,68,.12);color:#fca5a5;padding:12px 14px;border-radius:var(--r);font-size:13px;
  margin-bottom:12px;display:none;border-left:3px solid var(--error)}
.ac-err.on{display:block;animation:shake .3s}

.abtn{width:100%;min-height:52px;background:linear-gradient(135deg,#2563EB,#60A5FA);color:#fff;
  border-radius:var(--r-lg);font-size:16px;font-weight:700;transition:.2s;margin-top:var(--sp-2)}
.abtn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,.3)}
.abtn:active{transform:scale(.97)}.abtn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.google-signin-btn{width:100%;min-height:56px;background:rgba(255,255,255,.95);color:var(--g800);
  border:1.5px solid rgba(255,255,255,.2);border-radius:var(--r-lg);font-size:16px;font-weight:700;
  transition:.2s;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 24px;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.google-signin-btn:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.15)}
.google-signin-btn:active{transform:scale(.97)}