/* =========================================================
   Static Noir Mint Dark — Account
   Page: account.html
   • Glass card with full-width gradient title bar
   • Disabled fields readable but muted
   • Accessible focus & button glow
   ========================================================= */

/* Center the card within main-content */
.account-wrapper {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--text);
}

/* Card */
.account-form {
  width: min(640px, 100%);
  background: var(--glass);                 /* ~0.8 opacity for video underlay */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  backdrop-filter: saturate(1.1) blur(2px);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

/* Title bar: full-width gradient, centered */
.account-title {
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 12px;
  padding: 12px 14px;
  background: var(--grad-primary);
  color: var(--title-color);                /* unified title color */
  text-align: center;
  border-top-left-radius: calc(var(--radius) - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 800;
}

/* Labels & controls + compact page layout */
.account-label {
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
  margin-bottom: 4px;
  display: block;
}

/* Use root .account-input from index.css; only tune transitions for this page */
.account-form .account-input {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease;
}

/* Softer page-specific focus glow (override root strong glow) */
.account-form .account-input:focus {
  box-shadow: 0 0 0 2px rgba(56,189,148,.12), 0 0 16px rgba(56,189,148,.10);
}

.account-form form {
  display: grid;
  gap: 10px;
}

.account-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.account-field {
  display: flex;
  flex-direction: column;
}


/* Account page sections (Profile / Password) */
.account-wrapper .account-form {
  gap: 14px;
}

.account-section-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(230,238,245,.10);
  border-radius: 14px;
  padding: 12px;
}

.account-section-title {
  margin: 0 0 10px 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(230,238,245,.10);
  color: var(--title-color);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.account-section-card form {
  gap: 8px;
}

.account-section-card .account-row {
  gap: 10px;
}

/* Tone down glow specifically for account page sensitive/common fields */
.account-wrapper #email:focus,
.account-wrapper #username:focus,
.account-wrapper #current:focus,
.account-wrapper #new:focus,
.account-wrapper #confirm:focus {
  box-shadow: 0 0 0 1px rgba(56,189,148,.12), 0 0 8px rgba(56,189,148,.06);
}

/* Disabled (readonly) fields: muted but readable */
.account-input:disabled {
  opacity: .7;
  cursor: not-allowed;
  background: rgba(255,255,255,.03);
  color: rgba(230,238,245,.85);
  border-color: rgba(230,238,245,.15);
}

/* Flash messages */
.message {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}

.message.error {
  background: rgba(255,86,86,.12);
  border-color: rgba(255,86,86,.35);
  color: var(--error-text-color);           /* centralized */
}

.message.success {
  background: rgba(56,189,148,.12);
  border-color: rgba(56,189,148,.35);
  color: var(--success-text-color);         /* centralized */
}

/* Submit button — site gradient style */
.btn.account-btn {
  width: 100%;
  background: var(--grad-primary);
  color: var(--text);
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow .25s ease, transform .12s ease;
}

.btn.account-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 0 14px rgba(56,189,148,.10);
}

.btn.account-btn:focus-visible {
  outline: 2px solid rgba(56,189,148,.55);
  outline-offset: 2px;
}

/* Small screens */
@media (max-width: 480px) {
  .account-title {
    margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 10px;
    padding: 10px 12px;
  }

  .account-form {
    gap: 10px;
  }

  .account-section-card {
    padding: 10px;
  }

  .account-section-title {
    padding: 7px 9px;
    margin-bottom: 8px;
  }

  .account-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .btn.account-btn {
    padding: 12px;
  }
}

/* === Added: account flash modifiers (class coverage) === */
.message.account-error {
  border-left: 3px solid rgba(255,107,107,.55);
}

.message.account-success {
  border-left: 3px solid rgba(56,189,148,.6);
}