/* Shared Google-style tokens for all client pages */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #202124;
  font-family: 'Google Sans', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.auth-card {
  width: 380px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  padding: 48px 40px 36px;
  text-align: center;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  background: #fff;
}
@media (max-width: 480px) {
  body { align-items: stretch; }
  .auth-card {
    width: 100%;
    border: none;
    border-radius: 0;
    padding: 32px 24px 24px;
    min-height: 100vh;
  }
}

/* When the page is loaded inside an iframe (e.g. embedded on Google Sites),
   keep the card look but make the body background transparent so the card
   sits flush against whatever color the parent page uses. */
html.iframed, html.iframed body {
  background: transparent !important;
}
html.iframed body {
  align-items: flex-start;
  padding: 0;
}
html.iframed .auth-card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
}
.logo {
  font-size: 24px;
  margin-bottom: 16px;
  font-weight: 500;
}
.logo span:nth-child(1){color:#4285F4}
.logo span:nth-child(2){color:#EA4335}
.logo span:nth-child(3){color:#FBBC05}
.logo span:nth-child(4){color:#4285F4}
.logo span:nth-child(5){color:#34A853}
.logo span:nth-child(6){color:#EA4335}

h2 {
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
  color: #202124;
}
.sub-text {
  font-size: 14px;
  margin-bottom: 24px;
  color: #202124;
}
.case-id {
  font-size: 13px;
  color: #5f6368;
  margin-bottom: 24px;
}
.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dadce0;
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  font-size: 14px;
  color: #3c4043;
  margin: 8px auto 24px;
}
.account-chip .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1a73e8;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}
.input-group {
  text-align: left;
  margin-bottom: 20px;
  position: relative;
}
.label {
  display: block;
  font-size: 13px;
  color: #5f6368;
  margin-bottom: 8px;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"] {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  color: #202124;
  outline: none;
  transition: border 0.1s;
  background: #fff;
}
input:focus {
  border: 2px solid #1a73e8;
  padding: 0 13px;
}
input.error { border: 1px solid #d93025; }
.error-msg {
  color: #d93025;
  font-size: 12px;
  margin-top: 6px;
  display: none;
}
.error-msg.show { display: block; }

.toggle-container {
  display: flex;
  align-items: center;
  margin: -4px 0 20px 0;
  cursor: pointer;
  font-size: 14px;
  color: #3c4043;
}
.switch { position: relative; display: inline-block; width: 36px; height: 20px; margin-right: 12px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #bdc1c6; transition: .4s; border-radius: 20px;
}
.slider:before {
  position: absolute; content: "";
  height: 12px; width: 12px;
  left: 4px; bottom: 4px;
  background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: #1a73e8; }
input:checked + .slider:before { transform: translateX(16px); }

.btn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.link-btn {
  background: none;
  border: none;
  color: #1a73e8;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 12px;
}
button.submit-btn {
  padding: 10px 24px;
  background-color: #0b57d0;
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-width: 96px;
}
button.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
button.full { width: 100%; }

.footer-text {
  font-size: 12px;
  color: #5f6368;
  text-align: center;
  margin-top: auto;
  padding-top: 28px;
  line-height: 1.4;
}

.spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #1a73e8;
  border-radius: 50%;
  width: 30px; height: 30px;
  animation: spin 1s linear infinite;
  margin: 40px auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.paragraph-text { text-align: left; font-size: 14px; line-height: 1.6; color: #3c4043; }
.divider { height: 1px; background: #e0e0e0; margin: 20px 0; }

.code-input {
  letter-spacing: 8px;
  text-align: center;
  font-size: 20px;
}

/* Status banner pushed by admin reject */
.notice {
  display: none;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
  background: #fce8e6;
  color: #c5221f;
  text-align: left;
}
.notice.show { display: block; }