/* Auth modal (dedicated stylesheet) */
:root { --auth-radius: 14px }

#auth-modal { position: fixed; inset: 0; background: rgba(2,6,23,.55); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 1000 }
#auth-modal.open { display: flex; animation: auth-fade-in .18s ease-out }
@keyframes auth-fade-in { from { opacity: 0; transform: scale(.98) } to { opacity: 1; transform: scale(1) } }

.auth-card { position: relative; width: min(520px, 94vw); border-radius: var(--auth-radius); padding: 0; overflow: hidden; background: linear-gradient(180deg, rgba(17,24,39,1), rgba(15,23,42,1)); box-shadow: 0 22px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(148,163,184,.12) inset; border: 1px solid rgba(37,48,69,.65) }

.auth-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: rgba(255,255,255,.02); border-bottom: 1px solid rgba(148,163,184,.12) }
.auth-header h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .2px; color: #e5e7eb }
.auth-header .icon-btn { appearance: none; border: 1px solid #2b3447; width: 32px; height: 32px; border-radius: 10px; background: #141b2d; color: #e5e7eb; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: .15s ease }
.auth-header .icon-btn:hover { background: #19223a; border-color: #344059 }

.auth-tabs { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(148,163,184,.12) }
.auth-tabs button { appearance: none; padding: 8px 12px; border-radius: 10px; border: 1px solid #2b3447; background: #151c2f; color: #e5e7eb; cursor: pointer; transition: .15s ease; font-weight: 600 }
.auth-tabs button:hover { background: #1a2240; border-color: #344059 }
.auth-tabs button.active { background: linear-gradient(135deg, var(--primary), var(--accent)); border-color: transparent; color: #0b1020 }

.auth-body { padding: 16px }

#auth-error { color: #fecaca; background: #7f1d1d; border: 1px solid #991b1b; padding: 8px 10px; border-radius: 10px; margin: 4px 0 12px; font-size: 13px }
#auth-error:empty { display: none }

.auth-pane { display: grid; gap: 12px }
.auth-pane[hidden] { display: none }

.auth-fields { display: grid; gap: 12px }
.auth-fields label { display: grid; gap: 6px; font-size: 14px; color: #cbd5e1 }
.auth-fields input { width: 100%; padding: 12px 12px; border-radius: 10px; border: 1px solid #2b3447; background: #0b1020; color: #e5e7eb; transition: .15s ease }
.auth-fields input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.25) }

.auth-actions { display: flex; gap: 10px; margin-top: 4px; align-items: center }
button.btn { appearance: none; display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border: 1px solid #2b3447; border-radius: .7rem; background: #151c2f; color: #e5e7eb; cursor: pointer; transition: transform .08s ease, background .15s ease, border-color .15s ease }
button.btn:hover { background: #1a2240; border-color: #344059 }
button.btn:active { transform: translateY(1px) }
button.btn.primary { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #0b1020; border-color: transparent; font-weight: 700 }

/* Mobile fine-tune */
@media (max-width: 480px){
  .auth-header, .auth-tabs { padding: 10px 12px }
  .auth-body { padding: 12px }
  .auth-tabs button { padding: 6px 10px }
}