/* ==========================================================================
   ACCOUNT PAGES SHELL — Profile / Subscription / Settings
   Inherits theme variables from styles.css (--bg-body, --text-primary, …)
   ========================================================================== */

.acct-page {
  min-height: 100vh;
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* Soft gradient backdrop */
.acct-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 12% -10%, rgba(58,175,212,0.18), transparent 45%),
    radial-gradient(circle at 95% 105%, rgba(58,175,212,0.12), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Top bar ---------- */
.acct-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Task #752: top padding accounts for the iOS notch in the Median
     wrapper (status-bar-style=black-translucent). 0px fallback on
     browsers/devices without a notch. NOTE: body{padding-top:env(safe-
     area-inset-top)} is also set, but acct pages aren't flex-centered,
     so this rule keeps the topbar's *internal* padding correct so the
     logo and avatar sit a comfortable distance below the status bar. */
  padding: calc(18px + env(safe-area-inset-top, 0px)) 32px 18px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg-body) 75%, transparent);
  border-bottom: 1px solid var(--border-light);
}
.acct-topbar-left { display: flex; align-items: center; gap: 18px; }
.acct-back-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--border-light);
  color: var(--text-secondary); padding: 8px 14px; border-radius: 10px;
  font-size: 13px; cursor: pointer; transition: all .18s ease;
  font-family: inherit;
}
.acct-back-btn:hover { background: var(--bg-hover-light); color: var(--text-primary); border-color: var(--border-medium); }
.acct-back-btn svg { width: 14px; height: 14px; }
.acct-logo-link {
  display: inline-flex; align-items: center;
  text-decoration: none; border-radius: 6px;
  transition: opacity .18s ease;
}
.acct-logo-link:hover { opacity: 0.78; }
.acct-logo-link:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 4px; }
.acct-logo { height: 22px; width: auto; filter: var(--logo-filter); display: block; }
.acct-topbar-right { display: flex; align-items: center; gap: 10px; }

.acct-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-light);
  color: var(--text-secondary); cursor: pointer; transition: all .18s ease;
}
.acct-icon-btn:hover { background: var(--bg-hover-light); color: var(--text-primary); border-color: var(--border-medium); }
.acct-icon-btn svg { width: 16px; height: 16px; }

/* ---------- Page shell ---------- */
.acct-shell {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 32px 96px;
}
@media (max-width: 720px) {
  .acct-shell { padding: 20px 18px 72px; }
  /* Task #752 + #841 + #842: preserve the iOS notch inset in the mobile
     override so the sticky topbar doesn't slide under the Median status
     bar. Base offset bumped again to 48px (round 2) so the logo + theme
     toggle sit comfortably below the status bar even on Median WebView
     builds where env(safe-area-inset-top) resolves to ~0. */
  .acct-topbar {
    padding: calc(48px + env(safe-area-inset-top, 0px)) 18px 18px;
    /* Task #842: remove the visible horizontal seam between the topbar
       and the page body on mobile — fully transparent background, no
       border, no blur, so the whole page reads as one continuous
       surface. Desktop styling is unchanged. */
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Task #841: mobile-only back arrow shown on Profile / Subscription / Settings.
   Hidden on desktop (the sidebar / dropdown already provides navigation). */
.acct-back-mobile {
  display: none;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 1px solid var(--border-light);
  color: var(--text-secondary); cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  align-items: center; justify-content: center;
  margin: 0 0 14px; padding: 0;
  transition: all .18s ease;
}
.acct-back-mobile:hover { background: var(--bg-hover-light); color: var(--text-primary); border-color: var(--border-medium); }
.acct-back-mobile svg { width: 18px; height: 18px; display: block; }

@media (max-width: 768px) {
  .acct-back-mobile { display: inline-flex; }
  /* Task #841: the user-avatar dropdown is redundant on these account
     pages (the page itself is the account surface). Hide it on mobile
     so the topbar shows only the DEON logo + theme toggle. */
  .acct-topbar [data-shared-user-dropdown] { display: none; }
}

.acct-header { margin-bottom: 40px; }
.acct-eyebrow {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary); font-weight: 600; margin-bottom: 10px;
}
.acct-title {
  font-size: 38px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.15; margin: 0 0 8px;
  background: linear-gradient(180deg, var(--text-primary) 0%, color-mix(in srgb, var(--text-primary) 80%, transparent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Task #844: mobile-only — loosen line-height + add a sliver of
   bottom padding so the descender of g/y/p ("Settings",
   "Subscription") isn't clipped by -webkit-background-clip:text.
   Desktop typography is intentionally unchanged. */
@media (max-width: 768px) {
  .acct-title {
    line-height: 1.35;
    padding-bottom: 4px;
  }
}
.acct-subtitle { color: var(--text-secondary); font-size: 15px; max-width: 56ch; line-height: 1.55; }

/* ---------- Tabs (used on Settings) ---------- */
.acct-tabs {
  display: flex; gap: 4px; margin-bottom: 28px;
  background: var(--bg-card); padding: 4px; border-radius: 12px;
  border: 1px solid var(--border-light); width: fit-content;
}
.acct-tab {
  background: transparent; border: 0; padding: 8px 16px; border-radius: 9px;
  color: var(--text-secondary); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .15s ease; font-family: inherit;
}
.acct-tab:hover { color: var(--text-primary); }
.acct-tab.active {
  background: var(--bg-hover-medium);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ---------- Card ---------- */
.acct-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 20px;
  position: relative;
  transition: border-color .25s ease;
}
.acct-card:hover { border-color: var(--border-medium); }
.acct-card-head { margin-bottom: 22px; }
.acct-card-title {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  margin: 0 0 4px; color: var(--text-primary);
}
.acct-card-sub { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
@media (max-width: 640px) {
  #billingHistoryCard.is-empty .acct-card-sub { display: none; }
}

/* ---------- Form fields ---------- */
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.acct-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
@media (max-width: 640px) {
  .acct-grid, .acct-grid-3 { grid-template-columns: 1fr; }
}
.acct-field { display: flex; flex-direction: column; gap: 7px; }
.acct-field-full { grid-column: 1 / -1; }
.acct-label {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.acct-input, .acct-select {
  width: 100%; padding: 11px 14px;
  background: var(--bg-input-solid); color: var(--text-primary);
  border: 1px solid var(--border-light); border-radius: 10px;
  font-size: 14px; font-family: inherit; transition: all .18s ease;
  outline: none;
}
@media (max-width: 768px) {
  .acct-input, .acct-select { font-size: 16px; }
}
.acct-input:focus, .acct-select:focus {
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px rgba(58,175,212,0.18);
}
.acct-input:read-only, .acct-input[disabled] {
  opacity: 0.6; cursor: not-allowed;
}
.acct-input-help { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Avatar block ---------- */
.acct-avatar-row { display: flex; align-items: center; gap: 22px; }
.acct-avatar {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--bg-elevated, #1A1A1E);
  border: 2px solid var(--border-medium);
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-brand-primary); font-size: 32px; font-weight: 600;
}
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-avatar-actions { display: flex; flex-direction: column; gap: 8px; }
.acct-avatar-meta { font-size: 12.5px; color: var(--text-muted); }

/* ---------- Buttons ---------- */
.acct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .18s ease;
  font-family: inherit;
}
/* Full pill shape on every .acct-btn variant across the account
   area (Settings, Profile, Subscription, sign-in overlay) to match
   the auth modal's pill aesthetic. */
.acct-btn { border-radius: 9999px; padding: 10px 22px; }
.acct-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.acct-btn-primary {
  background: var(--color-brand-primary); color: #00131C;
  box-shadow: 0 2px 12px rgba(58,175,212,0.35);
}
.acct-btn-primary:hover:not(:disabled) {
  filter: brightness(1.07);
  box-shadow: 0 4px 18px rgba(58,175,212,0.45);
  transform: translateY(-1px);
}
.acct-btn-ghost {
  background: transparent; color: var(--text-primary);
  border-color: var(--border-medium);
}
.acct-btn-ghost:hover:not(:disabled) { background: var(--bg-hover-light); border-color: var(--border-strong); }
.acct-btn-danger {
  background: transparent; color: #F87171;
  border-color: rgba(248,113,113,0.4);
}
.acct-btn-danger:hover:not(:disabled) {
  background: rgba(248,113,113,0.12);
  border-color: rgba(248,113,113,0.7);
}
.acct-btn-danger-solid {
  background: #DC2626; color: white; border-color: #DC2626;
}
.acct-btn-danger-solid:hover:not(:disabled) { background: #B91C1C; border-color: #B91C1C; }
.acct-btn-pill { border-radius: 999px; padding-left: 24px; padding-right: 24px; }
.acct-link-cancel {
  background: transparent;
  border: none;
  padding: 10px 8px;
  margin: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #DC2626;
  cursor: pointer;
  text-decoration: none;
  border-radius: 4px;
  transition: color .18s ease, opacity .18s ease;
}
.acct-link-cancel:hover:not(:disabled) { color: #B91C1C; opacity: 0.85; }
.acct-link-cancel:focus-visible {
  outline: 2px solid rgba(220, 38, 38, 0.5);
  outline-offset: 2px;
}
.acct-link-cancel:disabled { opacity: 0.5; cursor: not-allowed; }
body.light-mode .acct-link-cancel { color: #DC2626; }
body.light-mode .acct-link-cancel:hover:not(:disabled) { color: #991B1B; }

.acct-card-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--border-light);
}

/* ---------- Toast ---------- */
.acct-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-elevated, #1A1A1E);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
  padding: 12px 20px; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  font-size: 13.5px; font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: all .25s cubic-bezier(.2,.8,.2,1);
  z-index: 1000;
}
.acct-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.acct-toast.error { border-color: rgba(248,113,113,0.5); }
.acct-toast.success { border-color: rgba(74,222,128,0.5); }

/* ---------- Plan card (Subscription page) ---------- */
.acct-plan-card {
  background: linear-gradient(135deg, rgba(58,175,212,0.12) 0%, rgba(58,175,212,0.04) 60%, transparent 100%);
  border: 1px solid rgba(58,175,212,0.35);
  border-radius: 18px; padding: 32px;
  position: relative; overflow: hidden;
}
.acct-plan-card::after {
  content: ''; position: absolute; top: -40%; right: -20%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(58,175,212,0.18), transparent 70%);
  pointer-events: none;
}
.acct-plan-name {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-brand-primary);
  margin-bottom: 10px;
}
.acct-plan-price {
  font-size: 44px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-primary); margin-bottom: 4px;
}
.acct-plan-price small { font-size: 16px; font-weight: 500; color: var(--text-secondary); }
.acct-plan-meta { color: var(--text-secondary); font-size: 13.5px; margin-bottom: 20px; }
.acct-plan-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }

.acct-features {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
}
@media (max-width: 640px) { .acct-features { grid-template-columns: 1fr; } }
.acct-features li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--text-primary);
}
.acct-features li svg { width: 14px; height: 14px; color: var(--color-brand-primary); flex-shrink: 0; }

/* Invoices */
.acct-invoice-list { display: flex; flex-direction: column; gap: 1px; }
.acct-invoice-row {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 16px;
  padding: 14px 4px; border-bottom: 1px solid var(--border-light);
  font-size: 13.5px;
}
.acct-invoice-row:last-child { border-bottom: 0; }
.acct-invoice-date { color: var(--text-primary); font-weight: 500; }
.acct-invoice-amount { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.acct-invoice-status {
  font-size: 11px; padding: 3px 9px; border-radius: 6px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.acct-invoice-status.paid { background: rgba(74,222,128,0.15); color: #4ADE80; }
.acct-invoice-status.open { background: rgba(251,191,36,0.15); color: #FBBF24; }
.acct-invoice-status.void { background: rgba(160,160,168,0.15); color: var(--text-secondary); }
.acct-invoice-link {
  color: var(--color-brand-primary); text-decoration: none;
  font-size: 12px; font-weight: 600;
}
.acct-invoice-link:hover { text-decoration: underline; }
.acct-empty { color: var(--text-muted); font-size: 13.5px; text-align: center; padding: 28px 0; }

/* ---------- Toggle switch ---------- */
.acct-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}
.acct-toggle-row:last-child { border-bottom: 0; }
.acct-toggle-text { flex: 1; }
.acct-toggle-title { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 3px; }
.acct-toggle-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.acct-switch {
  position: relative; width: 42px; height: 24px;
  background: var(--bg-toggle); border-radius: 999px;
  cursor: pointer; flex-shrink: 0;
  transition: background .2s ease;
  border: 1px solid var(--border-light);
}
.acct-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: all .2s cubic-bezier(.2,.8,.2,1);
}
.acct-switch.on {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}
.acct-switch.on::after { left: 21px; }

/* ---------- Theme picker ---------- */
.acct-theme-picker { display: flex; gap: 12px; }
.acct-theme-option {
  flex: 1; padding: 14px; border-radius: 12px;
  background: var(--bg-input-solid); border: 1px solid var(--border-light);
  cursor: pointer; transition: all .18s ease;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-primary); font-family: inherit;
}
.acct-theme-option:hover { border-color: var(--border-medium); }
.acct-theme-option.active {
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px rgba(58,175,212,0.15);
}
.acct-theme-swatch {
  width: 100%; aspect-ratio: 16/9; border-radius: 8px;
  border: 1px solid var(--border-light);
}
.acct-theme-swatch.dark { background: linear-gradient(135deg, #0A0A0B, #242429); }
.acct-theme-swatch.light { background: linear-gradient(135deg, #DCE0E6, #FFFFFF); }

/* ---------- Modal ---------- */
.acct-modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 100; display: none;
  align-items: center; justify-content: center;
  padding: 18px;
}
.acct-modal-bg.show { display: flex; }
.acct-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 18px; padding: 28px;
  max-width: 460px; width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.acct-modal-title { font-size: 19px; font-weight: 600; margin: 0 0 8px; color: var(--text-primary); }
.acct-modal-text { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 20px; }
.acct-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Stack of labelled inputs inside a modal (used by Change password). */
.acct-modal-fields { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; }
.acct-modal-field { display: flex; flex-direction: column; gap: 6px; }
.acct-modal-field-label {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.acct-modal-error {
  display: none;
  font-size: 13px; color: #F87171; line-height: 1.45;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 10px; padding: 10px 12px;
  margin: 0 0 16px;
}
.acct-modal-error.show { display: block; }

/* Small muted explanatory line shown in place of a row (e.g. Change
   password row hidden for Google-only sign-ins). */
.acct-muted-note {
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}
.acct-toggle-row + .acct-muted-note { border-top: 0; }
.acct-muted-note:last-child { border-bottom: 0; }

/* Skeleton */
.acct-skel {
  background: linear-gradient(90deg, var(--bg-hover-light) 0%, var(--bg-hover-medium) 50%, var(--bg-hover-light) 100%);
  background-size: 200% 100%;
  animation: acctSkel 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes acctSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }