/* ===== PORTAL HTML/BODY ===== */
html.portal-html {
  height: 100%;
}

body.portal-body {
  height: 100%;
  background: var(--gray-900);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

html.portal-html { height: 100%; }

/* ===== BACKGROUND ===== */
.portal-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.portal-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(42,90,74,0.18), transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(26,58,90,0.18), transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(42,90,74,0.06), transparent 60%);
  animation: meshFloat 12s ease-in-out infinite alternate;
}

@keyframes meshFloat {
  0% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.05) translate(-10px, 15px); }
  66% { transform: scale(0.98) translate(10px, -10px); }
  100% { transform: scale(1.02) translate(-5px, 5px); }
}

.portal-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 70%);
}

/* ===== CARD ===== */
.portal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: 24px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 4px 16px rgba(0,0,0,0.08),
    0 24px 60px rgba(0,0,0,0.16);
  overflow: hidden;
}

/* ===== LOGO ===== */
.portal-logo {
  text-align: center;
  margin-bottom: 32px;
}

.portal-logo a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portal-logo-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* ===== FORM ===== */
.portal-card .form-group {
  margin-bottom: 16px;
}

.portal-card .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.input-wrapper {
  position: relative;
}

.portal-card .form-group input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.portal-card .form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42,90,74,0.1);
}

.portal-card .form-group input::placeholder {
  color: var(--text-tertiary);
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-tertiary);
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle:hover { color: var(--text-secondary); }
.password-toggle svg { width: 20px; height: 20px; }

/* ===== BUTTON ===== */
.btn-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: linear-gradient(rgb(249, 247, 245) 0%, rgb(236, 235, 233) 100%);
  color: #000;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-full);
  padding: 14px 28px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    rgb(255, 255, 255) 0px 2px 0px 0px inset,
    rgba(255, 255, 255, 0.5) 0px 1px 1px 0px inset,
    rgba(0, 0, 0, 0.5) 0px 0px 1px 0px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
    rgba(0, 0, 0, 0.1) 0px 12px 30px 0px;
  margin-top: 24px;
}

.btn-signin:hover {
  transform: translateY(-1px);
  box-shadow:
    rgb(255, 255, 255) 0px 2px 0px 0px inset,
    rgba(255, 255, 255, 0.5) 0px 1px 1px 0px inset,
    rgba(0, 0, 0, 0.5) 0px 0px 1px 0px,
    rgba(0, 0, 0, 0.15) 0px 4px 8px 0px,
    rgba(0, 0, 0, 0.12) 0px 16px 36px 0px;
}

.btn-signin:active { transform: translateY(0); }

/* ===== LINKS ===== */
.forgot-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.forgot-link:hover { color: var(--text-secondary); }

.portal-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

.back-link {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.back-link:hover { color: var(--accent); }

/* ===== VIEW TRANSITIONS ===== */
.portal-view {
  display: none;
  opacity: 0;
}

.portal-view.is-active {
  display: block;
  animation: viewFadeIn 0.35s ease forwards;
}

.portal-view.is-leaving {
  animation: viewFadeOut 0.2s ease forwards;
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes viewFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

/* ===== FORGOT PASSWORD ===== */
.reset-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  background: var(--bg);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}

.reset-icon svg { width: 26px; height: 26px; color: var(--accent); }

.reset-heading {
  text-align: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
}

.reset-subtitle {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 28px;
}

.back-to-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color 0.2s ease;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  width: 100%;
}

.back-to-signin svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.back-to-signin:hover { color: var(--accent); }
.back-to-signin:hover svg { transform: translateX(-2px); }

/* ===== SUCCESS STATE ===== */
.success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  background: rgba(42,90,74,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(42,90,74,0.12);
}

.success-icon svg { width: 26px; height: 26px; color: var(--accent); }

.success-email {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
  word-break: break-all;
}

.resend-row {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.resend-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}

.resend-btn:hover { opacity: 0.7; }
.resend-btn:disabled { opacity: 0.4; cursor: default; }

/* ===== FIELD VALIDATION ===== */
.field-error {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #f87171;
  margin-top: 6px;
  padding-left: 2px;
  line-height: 1.3;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}

.form-group.has-error .field-error {
  max-height: 40px;
  opacity: 1;
}

.form-group.has-error .field-error:empty {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.portal-card .form-group.has-error input {
  border-color: rgba(248,113,113,0.5);
  box-shadow: 0 0 0 3px rgba(248,113,113,0.08);
}

.portal-card .form-group.has-error input:focus {
  border-color: rgba(248,113,113,0.6);
  box-shadow: 0 0 0 3px rgba(248,113,113,0.12);
}

.portal-card .form-group.has-error label {
  color: #f87171;
}

/* ===== GENERAL LOGIN ERROR ===== */
.portal-error {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #fca5a5;
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(248,113,113,0.12);
  border-radius: var(--radius-sm);
  line-height: 1.4;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease, margin-top 0.35s ease;
  padding: 0 16px;
}

.portal-error.is-visible {
  max-height: 80px;
  opacity: 1;
  padding: 12px 16px;
}

.portal-error.is-visible:empty {
  max-height: 0;
  opacity: 0;
  padding: 0 16px;
  margin-top: 0;
}

/* ===== BUTTON STATES ===== */
.btn-signin.is-loading {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

.btn-signin.is-success {
  background: linear-gradient(135deg, #2a5a4a 0%, #34d399 100%);
  color: #fff;
  box-shadow:
    rgba(52,211,153,0.2) 0px 0px 0px 0px inset,
    rgba(52,211,153,0.15) 0px 4px 16px 0px;
}

/* ===== SHAKE ANIMATION ===== */
@keyframes portalShake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-5px); }
  20% { transform: translateX(5px); }
  30% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  50% { transform: translateX(-3px); }
  60% { transform: translateX(2px); }
  70% { transform: translateX(-1px); }
}

.shake {
  animation: portalShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}