/* Sign-in/sign-up modal content. The overlay/card mechanics (.tp-modal,
   .tp-dialog, .tp-backdrop, .tp-close, body.tp-locked) already exist on
   every page via its own inline <style> -- this only styles the
   auth-specific elements inside #auth-modal, with its own self-contained
   (not page-variable-dependent, since the two page families use different
   custom-property names) light/dark palette. */

#auth-modal .auth-dialog{max-width:380px;}

#auth-modal .auth-tabs{
  display:flex; gap:6px; margin:0 0 18px; padding:4px;
  background:#eef1f3; border-radius:999px;
}
#auth-modal .auth-tab{
  flex:1; border:0; background:transparent; cursor:pointer;
  padding:8px 10px; border-radius:999px; font:inherit; font-weight:600; font-size:.88rem;
  color:#5b6578; transition:background .15s ease, color .15s ease;
}
#auth-modal .auth-tab.is-active{background:#ffffff; color:#1c2430; box-shadow:0 1px 2px rgba(16,24,40,.08);}

#auth-modal .auth-title{margin:0 0 14px; font-size:1.3rem; text-align:center;}

#auth-modal .auth-form[hidden]{display:none;}
#auth-modal .auth-name-row{display:flex; gap:10px;}
#auth-modal .auth-name-row .auth-label{flex:1; min-width:0;}
#auth-modal select.auth-input{appearance:auto;}
#auth-modal .auth-label{
  display:block; font-weight:600; font-size:.85rem; color:#5b6578; margin:0 0 14px;
}
#auth-modal .auth-input{
  display:block; width:100%; margin-top:6px; padding:10px 12px;
  border:1px solid #d9dee7; border-radius:10px; font:inherit; font-size:.95rem;
  color:#1c2430; background:#ffffff;
}
#auth-modal .auth-input:focus{outline:2px solid #2c5aa6; outline-offset:1px;}

#auth-modal .auth-error{
  margin:0 0 14px; padding:9px 12px; border-radius:8px;
  background:#fbe9e7; color:#b3261e; font-size:.85rem;
}
#auth-modal .auth-error[hidden]{display:none;}

#auth-modal .auth-success{
  margin:0 0 14px; padding:9px 12px; border-radius:8px;
  background:#e5f4ea; color:#1a7a42; font-size:.85rem;
}
#auth-modal .auth-success[hidden]{display:none;}

#auth-modal .auth-link{
  display:block; width:100%; text-align:center; margin:-6px 0 14px;
  border:0; background:none; padding:0; cursor:pointer;
  font:inherit; font-size:.82rem; color:#5b6578; text-decoration:underline;
}
#auth-modal .auth-link:hover{color:#2c5aa6;}

#auth-modal .auth-google-wrap[hidden]{display:none;}
#auth-modal #auth-google-btn{display:flex; justify-content:center; margin-bottom:12px;}
#auth-modal .auth-divider{
  display:flex; align-items:center; gap:10px; margin:0 0 16px;
  color:#8b94a3; font-size:.78rem;
}
#auth-modal .auth-divider::before, #auth-modal .auth-divider::after{
  content:""; flex:1; height:1px; background:#d9dee7;
}

#auth-modal .auth-submit{
  display:block; width:100%; padding:11px 16px; border:0; border-radius:999px;
  background:linear-gradient(135deg,#2c5aa6,#1f4e8c); color:#fff;
  font:inherit; font-weight:700; font-size:.95rem; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 10px 22px -12px rgba(44,90,166,.55);
}
#auth-modal .auth-submit:hover{transform:translateY(-1px);}
#auth-modal .auth-submit:disabled{opacity:.7; cursor:default; transform:none;}

/* Exam-gate and quota messages injected into topic pages by topic-engine.js */
.auth-gate{
  margin:14px 0; padding:18px; border-radius:14px;
  background:#eef1f3; border:1px solid #d9dee7; text-align:center;
}
.auth-gate p{margin:0 0 12px; color:#1c2430;}
.auth-gate .auth-gate-cta{
  display:inline-block; padding:9px 20px; border-radius:999px; border:0;
  background:#2c5aa6; color:#fff; font:inherit; font-weight:700; cursor:pointer;
}
.auth-quota-note{
  margin:8px 0 0; padding:8px 12px; border-radius:8px;
  background:#eef1f3; color:#5b6578; font-size:.82rem;
}

:root[data-theme="dark"] #auth-modal .auth-tabs{background:#1c232e;}
:root[data-theme="dark"] #auth-modal .auth-tab{color:#9aa6ba;}
:root[data-theme="dark"] #auth-modal .auth-tab.is-active{background:#2a3444; color:#f2f5fa;}
:root[data-theme="dark"] #auth-modal .auth-input{background:#1a2029; border-color:#333e4f; color:#e7ebf1;}
:root[data-theme="dark"] #auth-modal .auth-error{background:rgba(179,38,30,.18); color:#ff9a90;}
:root[data-theme="dark"] #auth-modal .auth-success{background:rgba(58,166,99,.16); color:#3aa663;}
:root[data-theme="dark"] #auth-modal .auth-link{color:#9aa6ba;}
:root[data-theme="dark"] #auth-modal .auth-link:hover{color:#7ea6e0;}
:root[data-theme="dark"] #auth-modal .auth-divider{color:#6b7482;}
:root[data-theme="dark"] #auth-modal .auth-divider::before, :root[data-theme="dark"] #auth-modal .auth-divider::after{background:#333e4f;}
:root[data-theme="dark"] .auth-gate{background:#1c232e; border-color:#333e4f;}
:root[data-theme="dark"] .auth-gate p{color:#e7ebf1;}
:root[data-theme="dark"] .auth-quota-note{background:#1c232e; color:#9aa6ba;}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #auth-modal .auth-tabs{background:#1c232e;}
  :root:not([data-theme="light"]) #auth-modal .auth-tab{color:#9aa6ba;}
  :root:not([data-theme="light"]) #auth-modal .auth-tab.is-active{background:#2a3444; color:#f2f5fa;}
  :root:not([data-theme="light"]) #auth-modal .auth-input{background:#1a2029; border-color:#333e4f; color:#e7ebf1;}
  :root:not([data-theme="light"]) #auth-modal .auth-error{background:rgba(179,38,30,.18); color:#ff9a90;}
  :root:not([data-theme="light"]) #auth-modal .auth-success{background:rgba(58,166,99,.16); color:#3aa663;}
  :root:not([data-theme="light"]) #auth-modal .auth-link{color:#9aa6ba;}
  :root:not([data-theme="light"]) #auth-modal .auth-link:hover{color:#7ea6e0;}
  :root:not([data-theme="light"]) #auth-modal .auth-divider{color:#6b7482;}
  :root:not([data-theme="light"]) #auth-modal .auth-divider::before, :root:not([data-theme="light"]) #auth-modal .auth-divider::after{background:#333e4f;}
  :root:not([data-theme="light"]) .auth-gate{background:#1c232e; border-color:#333e4f;}
  :root:not([data-theme="light"]) .auth-gate p{color:#e7ebf1;}
  :root:not([data-theme="light"]) .auth-quota-note{background:#1c232e; color:#9aa6ba;}
}