/* =============================================================
   ParaGate Standalone Auth Pages (Unified Styling)
   Purpose:
     Centralize styling for login, sub-user login, logout confirmation and future
     forgot/reset password pages. Eliminates inline <style> duplication.
   Theme:
     - Uses design-system tokens when loaded after design-system.css
     - Defaults to dark aesthetic (forced) for marketing-focused auth pages
   Classes:
     .auth-body            Fullscreen center layout wrapper (flex)
     .auth-surface         Primary card container (glass / gradient hybrid)
     .auth-logo            Logo / badge container
     .auth-title           Main heading (gradient text)
     .auth-meta            Uppercase meta label
     .auth-divider         Horizontal divider with subtle line + centered text
     .auth-footer-links    Footer policy links row
     .auth-field           Wrapper for form group spacing
     .auth-password-toggle Eye icon toggle button
     .auth-message         Generic message block (info/error/success variants)

   To Force Dark Mode:
     Add body[data-theme="dark"].auth-force-dark (or manually add data-theme attribute)
   ============================================================= */

body.auth-force-dark { background: radial-gradient(circle at 30% 22%, #183446, #0f1c29 65%, #0b1722 100%); color: var(--text-primary, #e8f2f8); min-height:100vh; display:flex; align-items:center; justify-content:center; margin:0; font-family:'Segoe UI','Noto Sans TC',system-ui,-apple-system,BlinkMacSystemFont,'Microsoft JhengHei',sans-serif; }

.auth-surface { width:100%; max-width:460px; padding:2.4rem 2.15rem 2.6rem; border-radius: var(--radius-lg, 20px); position:relative; background: linear-gradient(145deg,#132836,#112330); border:1px solid var(--border-color, rgba(255,255,255,0.12)); box-shadow: 0 12px 42px -18px rgba(0,0,0,0.65),0 6px 18px -8px rgba(0,0,0,0.55); overflow:hidden; }
.auth-surface:before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 18%, rgba(51,161,224,0.18), transparent 60%), radial-gradient(circle at 12% 80%, rgba(21,77,113,0.22), transparent 55%); pointer-events:none; }

.auth-logo { text-align:center; margin-bottom:1.75rem; }
.auth-logo img { width:96px; height:96px; object-fit:cover; border-radius:20px; box-shadow:0 6px 24px -8px rgba(0,0,0,0.55); }
.auth-meta { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--text-muted, #6d8694); margin-bottom:.5rem; text-align:center; }
.auth-title { font-size:1.65rem; text-align:center; font-weight:700; margin:0 0 1.75rem; background: linear-gradient(90deg,#d1ecfa,#68c2eb); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Form */
.auth-field { margin-bottom:1.15rem; }
.auth-field label { display:block; font-size:.85rem; font-weight:600; margin-bottom:.5rem; color: var(--text-secondary, #9cb4c3); letter-spacing:.3px; }
.auth-field input { width:100%; border:1px solid var(--input-border, #2b5166); background: var(--input-bg, #142835); color: var(--text-primary, #e8f2f8); border-radius: var(--radius-md,10px); padding:.85rem .95rem; font-size:.95rem; transition:border-color .25s, box-shadow .25s, background .25s; }
.auth-field input:focus { outline:none; border-color: var(--input-border-focus, #3396D3); box-shadow: var(--focus-ring,0 0 0 3px rgba(51,161,224,0.4)); }

.password-field { position:relative; }
.auth-password-toggle { position:absolute; top:50%; right:14px; transform:translateY(-50%); background:none; border:none; color: var(--text-muted, #6d8694); cursor:pointer; padding:0; display:flex; align-items:center; font-size:1.05rem; }
.auth-password-toggle:hover { color: var(--text-secondary, #9cb4c3); }

/* Buttons */
.auth-btn-primary, .auth-btn-gradient { width:100%; background: var(--btn-primary-bg,#3396D3); border:1px solid var(--btn-primary-bg,#3396D3); color:#fff; font-weight:600; padding:.9rem 1.25rem; border-radius: var(--radius-md,10px); font-size:.95rem; letter-spacing:.3px; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer; transition:background .25s,transform .25s,box-shadow .25s; }
.auth-btn-primary:hover, .auth-btn-gradient:hover { background: var(--btn-primary-bg-hover,#2d8cc7); box-shadow: 0 8px 26px -8px rgba(51,161,224,0.55); transform:translateY(-2px); }
.auth-btn-primary:active, .auth-btn-gradient:active { background: var(--btn-primary-bg-active,#277db3); transform:translateY(0); }
.auth-btn-gradient { background: linear-gradient(135deg,#667eea 0%, #764ba2 100%); border:none; }
.auth-btn-gradient:hover { filter:brightness(1.08); }
.auth-btn-gradient:active { filter:brightness(.95); }
.auth-btn-disabled { opacity:.55; cursor:not-allowed; box-shadow:none; transform:none; }

.actions-row { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.5rem; }
.actions-row .btn { flex:1 1 auto; }

/* Messages */
.auth-message { border-radius: var(--radius-md,10px); padding:.85rem 1rem; font-size:.8rem; line-height:1.3; margin-bottom:1.15rem; border:1px solid var(--border-color, rgba(255,255,255,0.14)); background:rgba(19,40,54,0.6); color: var(--text-secondary,#9cb4c3); }
.auth-message.error { background:#4a1f1b; border-color:#c15147; color:#ffb7ae; }
.auth-message.success { background:#103a2b; border-color:#2d8c66; color:#9fe5ce; }

/* Divider */
.auth-divider { display:flex; align-items:center; text-align:center; margin:1.6rem 0 1.2rem; color: var(--text-muted,#6d8694); font-size:.75rem; letter-spacing:.06em; }
.auth-divider:before, .auth-divider:after { content:""; flex:1; height:1px; background: rgba(255,255,255,0.12); }
.auth-divider span { padding:0 .9rem; }

/* Footer */
.auth-footer-links { margin-top:1.8rem; display:flex; justify-content:center; gap:1.25rem; font-size:.7rem; letter-spacing:.05em; }
.auth-footer-links a { color: var(--text-muted,#6d8694); text-decoration:none; transition:color .25s; }
.auth-footer-links a:hover { color: var(--text-secondary,#9cb4c3); text-decoration:underline; }

/* Responsive */
@media (max-width: 600px) {
  .auth-surface { padding:2rem 1.55rem 2.2rem; margin:1rem; }
  .auth-title { font-size:1.45rem; margin-bottom:1.4rem; }
}