:root{
  --gold:#C3A431; --teal:#006C66; --burgundy:#7B1F24;
  --light-bg:#F8F5F0; --dark-bg:#0B0F10; --text-light:#333; --text-dark:#F0F0F0;
  --card:#FFFFFF; --card-dark:#121A1B; --muted:#77808B; --border:#E7E7E7; --border-dark:#243033;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:'Inter',sans-serif; color:var(--text-light); background:var(--light-bg); -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body.dark-theme{ color:var(--text-dark); background:var(--dark-bg); }

header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(160%) blur(6px);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px;}
.brand{display:flex; align-items:center; gap:12px}
.brand h1{font-family:'Pacifico',cursive; font-size:1.35rem; line-height:1; color:var(--gold); margin:0}
.theme-toggle{ background:var(--teal); color:#fff; padding:.5rem 1rem; border:none; border-radius:20px; cursor:pointer; transition:background .3s ease; }
.theme-toggle:hover{ background:var(--burgundy); }

/* Background flair */
.bg{ position:fixed; inset:0; pointer-events:none; }
.bg:before{ content:""; position:absolute; inset:-20% -10% auto -10%; height:70vh;
  background: radial-gradient(900px 320px at 50% -10%, rgba(0,108,102,.25) 0%, rgba(0,108,102,0) 60%),
              radial-gradient(900px 320px at 50% 110%, rgba(195,164,49,.20) 0%, rgba(195,164,49,0) 60%);
  opacity:.8; }
.card::before{
  content:""; position:absolute; inset:-30% 10% auto auto; width:200px; height:200px;
  background:radial-gradient(circle, rgba(195,164,49,.25), transparent 70%);
  opacity:.4; filter:blur(10px); transform:translateY(-30%); pointer-events:none;
}

/* Layout */
.auth{ min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display:grid; place-items:center; padding: clamp(16px, 3.2vw, 32px); }
.card{ width:100%; max-width: 480px; background:var(--card); border:1px solid var(--border); border-radius:16px; padding: clamp(18px, 3vw, 28px); box-shadow: 0 20px 40px rgba(0,0,0,.08); position:relative; overflow:hidden; }
.card > *{ position:relative; z-index:1; }
body.dark-theme .card{ background:var(--card-dark); border-color:var(--border-dark); box-shadow: 0 20px 40px rgba(0,0,0,.45); }

.card h2{ font-weight:700; margin:0 0 8px; font-size: clamp(1.25rem, 3.6vw, 1.6rem); }
.subtitle{ color:var(--muted); margin:0 0 18px; font-size:.98rem; }

.field{ margin-bottom:14px; }
.label{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; font-weight:600; color:var(--teal); }
.hint{ font-weight:400; color:var(--muted); font-size:.9rem; }
.control{ position:relative; }
.input{ width:100%; padding:14px 14px; border:2px solid var(--border); border-radius:10px; background:inherit; color:inherit; font-size:16px; transition:border-color .2s ease, box-shadow .2s ease; }
.input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(195,164,49,.18); }
body.dark-theme .input{ border-color:var(--border-dark); }
.input[aria-invalid="true"]{ border-color:#c62828; box-shadow:0 0 0 3px rgba(198,40,40,.18); }
.toggle-pass{ position:absolute; right:10px; top:50%; transform:translateY(-50%); border:none; background:transparent; color:inherit; cursor:pointer; padding:6px; }

.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; }
.checkbox{ display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; font-size:.95rem; }
.checkbox input{ width:18px; height:18px; }

.actions{ margin-top:16px; display:grid; gap:10px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; border:none; border-radius:12px; padding:14px 16px; cursor:pointer; font-weight:600; transition:transform .05s ease, box-shadow .2s ease, background .2s ease; }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background:var(--teal); color:#fff; box-shadow:0 10px 24px rgba(0,108,102,.28); }
.btn-primary:hover{ background:#055a55; }
.btn-secondary{ background:#2b2f31; color:#fff; }
body.light-theme .btn-secondary{ background:#F1F3F5; color:#0b0f10; }

.or{ display:flex; align-items:center; gap:12px; margin:6px 0; color:var(--muted); font-size:.9rem; }
.or:before, .or:after{ content:""; flex:1; height:1px; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity:.35; }

.auth-tabs{ position:relative; display:grid; grid-template-columns:repeat(2,1fr); border-radius:18px; border:1px solid rgba(0,0,0,.08); background:rgba(0,0,0,.02); overflow:hidden; }
body.dark-theme .auth-tabs{ border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.05); }
.auth-tabs button{ border:none; background:transparent; padding:.85rem 1rem; font-weight:600; color:var(--muted); cursor:pointer; transition:color .2s ease; position:relative; z-index:1; }
.auth-tabs button[data-active="true"]{ color:var(--teal); }
body.dark-theme .auth-tabs button[data-active="true"]{ color:#F5E9C9; }
.auth-tabs-indicator{
  position:absolute; bottom:0; left:0; width:50%; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--teal));
  transition:transform .3s ease;
  z-index:0;
}

.strength-meter{ margin-top:.6rem; }
.strength-bar{ height:6px; border-radius:999px; background:rgba(0,0,0,.08); overflow:hidden; }
body.dark-theme .strength-bar{ background:rgba(255,255,255,.2); }
.strength-bar-fill{ display:block; height:100%; width:0%; border-radius:inherit; background:var(--teal); transition:width .3s ease, background .3s ease; }
.strength-meter small{ display:block; margin-top:.35rem; font-size:.85rem; color:var(--muted); }
.match-hint{ display:block; margin-top:.35rem; font-size:.85rem; color:#c62828; }
.match-hint.valid{ color:#2e7d32; }

.links{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.links a{ color:var(--teal); font-weight:600; text-decoration:none; }
.links a:hover{ text-decoration:underline; }

footer{ text-align:center; padding:20px; font-size:.9rem; color:var(--muted); }

@media (max-width:600px){
  .card{ padding:18px; }
  .row{ flex-direction:column; align-items:flex-start; }
  .auth-tabs button{ font-size:.95rem; }
}