/* Login / Signup / Forgot Password styling */
.auth-page { padding: 140px 20px 60px; min-height: calc(100vh - 140px); background: linear-gradient(180deg, rgba(15,23,42,0.04), rgba(255,255,255,0.02)); }
.auth-card { max-width: 420px; margin: 0 auto; background: rgba(255,255,255,0.02); border-radius: 12px; padding: 28px; box-shadow: 0 6px 30px rgba(2,6,23,0.5); border: 1px solid rgba(255,255,255,0.03); }
.auth-header h2 { margin: 0 0 6px; font-size: 1.5rem; color: var(--light); }
.auth-header p { margin: 0 0 18px; color: rgba(255,255,255,0.7); }
.auth-form { display:flex; flex-direction:column; gap:12px; }
.auth-form label { color: rgba(255,255,255,0.8); font-size:0.9rem; }
.auth-form input { padding: 10px 12px; border-radius:6px; border:1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); color: var(--light); }
.auth-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:6px; }
.auth-actions .btn { padding: 10px 16px; border-radius:8px; }
.auth-alt { margin-top:8px; color: rgba(255,255,255,0.8); }
.auth-alt a, .auth-actions a { color: var(--digital-blue); text-decoration: none; }

@media (max-width: 720px) {
    .auth-card { padding: 18px; margin-top: 100px; }
    .auth-page { padding-top: 120px; }
}

/* Modal specific styles */
.auth-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2000; }
.auth-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.auth-modal-panel { position: relative; width: 100%; max-width: 460px; padding: 22px; box-sizing: border-box; }
.auth-modal-close { position: absolute; top: 8px; right: 8px; background: transparent; border: none; color: var(--light); font-size: 1.6rem; cursor: pointer; }
.auth-modal .auth-card { margin: 0; max-width: 100%; }

@media (max-width: 520px) {
    .auth-modal-panel { padding: 12px; }
}

/* Make modal panel opaque apple-green with readable form styling */
.auth-modal-panel { background: #8DB600; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.45); }
.auth-modal .auth-card { background: transparent; box-shadow: none; border: none; padding: 0; }
.auth-modal .auth-header h2, .auth-modal .auth-header p { color: #052000; }
.auth-modal .auth-form label { color: rgba(0,32,0,0.85); }
.auth-modal .auth-form input { background: #ffffff; color: #052000; border: 1px solid rgba(0,0,0,0.08); }
.auth-modal .auth-actions .btn { background: #054d00; color: #fff; border: none; }
.auth-modal .auth-alt a, .auth-modal .auth-actions a { color: rgba(0,48,0,0.95); }