/* ============================================================================
 * auth.css — Sign-in / sign-up modal for Tarabalam (client-side Firebase Auth)
 * ----------------------------------------------------------------------------
 * Self-contained, matches the app's dark cosmic theme. Additive: no existing
 * selector is overridden, so nothing else in the app changes.
 * ==========================================================================*/

.tb-auth-overlay{
  position:fixed; inset:0; z-index:100000; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(4,6,20,0.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.tb-auth-overlay.open{ display:flex; }

.tb-auth-card{
  width:100%; max-width:380px; box-sizing:border-box;
  background:linear-gradient(180deg,#12162e 0%,#0c1024 100%);
  border:1px solid rgba(200,80,0,0.45); border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,215,0,0.06) inset;
  padding:26px 22px 22px; position:relative;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  animation:tbAuthIn .25s ease;
}
@keyframes tbAuthIn{ from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;} }

.tb-auth-close{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:9px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  color:#ffb8a0; font-size:16px; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.tb-auth-close:hover{ background:rgba(200,80,0,0.22); }

.tb-auth-title{
  font-family:'Cinzel',serif; font-size:20px; font-weight:700; color:#fff8ee;
  text-align:center; letter-spacing:.04em; margin-bottom:4px;
}
.tb-auth-sub{ font-size:12px; color:#ffd090; text-align:center; margin-bottom:18px; opacity:.85; }

.tb-auth-google{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px; border-radius:11px; cursor:pointer;
  background:#ffffff; border:none; color:#1f1f1f; font-size:14px; font-weight:600;
  transition:transform .12s, box-shadow .15s; box-shadow:0 3px 12px rgba(0,0,0,0.35);
}
.tb-auth-google:hover{ box-shadow:0 5px 18px rgba(0,0,0,0.45); }
.tb-auth-google:active{ transform:scale(.98); }
.tb-auth-google svg{ width:18px; height:18px; flex:0 0 auto; }

.tb-auth-or{ display:flex; align-items:center; gap:10px; margin:16px 0; color:rgba(200,215,255,0.45); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.tb-auth-or::before, .tb-auth-or::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,0.12); }

.tb-auth-field{ margin-bottom:12px; }
.tb-auth-label{ display:block; font-size:11px; font-weight:600; color:rgba(200,215,255,0.75); letter-spacing:.04em; margin-bottom:6px; }
.tb-auth-input{
  width:100%; box-sizing:border-box; padding:12px 14px; border-radius:11px;
  background:rgba(12,15,42,0.9); border:1.5px solid rgba(120,90,180,0.45);
  color:#fff; font-size:14px; font-family:inherit; transition:border-color .15s, box-shadow .15s;
}
.tb-auth-input::placeholder{ color:rgba(200,215,255,0.35); }
.tb-auth-input:focus{ outline:none; border-color:#f5c518; box-shadow:0 0 0 3px rgba(245,197,24,0.12); }

.tb-auth-error{ display:none; font-size:12px; color:#ff9080; background:rgba(200,40,40,0.12); border:1px solid rgba(255,120,100,0.3); border-radius:9px; padding:9px 12px; margin-bottom:12px; line-height:1.4; }
.tb-auth-error.show{ display:block; }

.tb-auth-submit{
  width:100%; padding:13px 16px; border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,#d4850a,#f5c518,#d4850a);
  color:#1a1000; font-size:14px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 4px 18px rgba(213,133,10,0.45); transition:transform .12s, opacity .15s;
}
.tb-auth-submit:hover{ opacity:.95; }
.tb-auth-submit:active{ transform:scale(.98); }
.tb-auth-submit:disabled{ opacity:.6; cursor:default; }

.tb-auth-forgot{ display:block; text-align:center; margin-top:12px; font-size:12px; color:#a0c4ff; background:none; border:none; cursor:pointer; width:100%; }
.tb-auth-forgot:hover{ text-decoration:underline; }

.tb-auth-toggle{ text-align:center; margin-top:16px; font-size:12.5px; color:rgba(200,215,255,0.7); }
.tb-auth-toggle button{ background:none; border:none; color:#ffd700; font-weight:700; cursor:pointer; font-size:12.5px; padding:0 2px; }
.tb-auth-toggle button:hover{ text-decoration:underline; }

.tb-auth-fine{ margin-top:14px; font-size:10px; color:rgba(200,215,255,0.4); text-align:center; line-height:1.5; }

/* ── Signed-in account view ── */
.tb-auth-account{ text-align:center; }
.tb-auth-avatar{
  width:64px; height:64px; border-radius:50%; margin:6px auto 12px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(135deg,#c85000,#f5c518); color:#1a1000; font-size:26px; font-weight:800;
}
.tb-auth-avatar img{ width:100%; height:100%; object-fit:cover; }
.tb-auth-name{ font-size:17px; font-weight:800; color:#fff8ee; margin-bottom:3px; }
.tb-auth-email{ font-size:12.5px; color:rgba(200,215,255,0.7); margin-bottom:20px; word-break:break-all; }
.tb-auth-signout{
  width:100%; padding:12px 16px; border-radius:12px; cursor:pointer;
  background:rgba(200,80,0,0.14); border:1px solid rgba(200,80,0,0.5); color:#ff9d70;
  font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; transition:background .15s;
}
.tb-auth-signout:hover{ background:rgba(200,80,0,0.24); }