/* ============================================================
   AME — account.css
   Account settings (/account) + Plans (/account/plans).
   ============================================================ */

.account-page, .plans-page { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-lg, 20px); }

/* ---------- identity strip ---------- */
.acct-identity {
  display: flex; align-items: center; gap: var(--space-lg, 20px);
  padding: var(--space-lg, 22px) var(--space-xl, 28px);
  background:
    radial-gradient(320px 140px at 100% 0%, rgba(79,140,255,.10), transparent 70%),
    var(--surface);
  flex-wrap: wrap;
}
.acct-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: #fff; flex: 0 0 auto;
  background: linear-gradient(135deg, #4f8cff 0%, #7f5af0 100%);
  box-shadow: 0 6px 18px rgba(79,140,255,.35);
}
.acct-id-main { flex: 1 1 200px; min-width: 0; }
.acct-name { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.acct-email { margin: 2px 0 0; color: var(--text-muted); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; }
.acct-since { text-align: right; }
.acct-since-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.acct-since-date { display: block; font-weight: 700; font-size: .95rem; }
.acct-plans-link { white-space: nowrap; }

/* ---------- sections & rows ---------- */
.acct-section { padding: var(--space-lg, 22px) var(--space-xl, 28px); }
.acct-h { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; }
.acct-sub { margin: 0 0 var(--space-md, 14px); font-size: .9rem; }
.acct-row {
  display: flex; align-items: center; gap: var(--space-md, 14px);
  padding: var(--space-md, 14px) 0;
  border-bottom: 1px solid var(--border);
  transition: background .15s ease;
}
.acct-row-last { border-bottom: none; }
.acct-row-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-row-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 700; }
.acct-row-value { font-size: 1rem; font-weight: 600; }
.acct-row-desc { font-size: .88rem; color: var(--text-muted); line-height: 1.45; }
.acct-pw { letter-spacing: 2px; }

/* ---------- danger zone ---------- */
.acct-danger { border-left: 4px solid var(--color-danger); }
.btn-danger {
  background: var(--color-danger); color: #fff; border: 1px solid var(--color-danger);
  transition: background .15s ease, transform .12s ease;
}
.btn-danger:hover:not(:disabled) { background: var(--color-danger-hover); }
.btn-danger:active:not(:disabled) { transform: scale(.98); }
.acct-delete-warn {
  margin: 0 0 var(--space-md, 14px); padding: var(--space-md, 14px);
  background: var(--color-danger-light); border-radius: var(--radius, 10px);
  color: var(--color-danger); font-size: .92rem; line-height: 1.5;
}

/* ---------- code input ---------- */
.code-input {
  text-align: center; font-size: 1.6rem; font-weight: 800; letter-spacing: .5em;
  text-indent: .5em; font-variant-numeric: tabular-nums;
}

/* ============================================================
   PLANS
   ============================================================ */
.plans-soon {
  display: flex; align-items: center; gap: var(--space-xl, 28px);
  padding: var(--space-lg, 24px) var(--space-xl, 30px);
  background:
    radial-gradient(360px 180px at 0% 100%, rgba(255,159,67,.12), transparent 70%),
    radial-gradient(300px 160px at 100% 0%, rgba(79,140,255,.12), transparent 70%),
    var(--surface);
  border: 1px dashed var(--accent);
  flex-wrap: wrap;
}
.plans-soon-art { flex: 0 0 auto; }
.plans-soon-text { flex: 1 1 240px; }
.plans-soon-text h2 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 800; }
.plans-soon-text p { margin: 0; color: var(--text-muted); line-height: 1.55; font-size: .95rem; }

/* rocket + flame + sparks */
.plans-rocket { width: 104px; height: auto; display: block; animation: rocketFloat 3.2s ease-in-out infinite; }
.plans-rocket .flame { transform-origin: 60px 96px; animation: flameFlicker .32s ease-in-out infinite alternate; }
.plans-rocket .flame-in { animation-duration: .22s; }
.plans-rocket .spark { animation: sparkPulse 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.plans-rocket .spark-2 { animation-delay: .7s; }
.plans-rocket .spark-3 { animation-delay: 1.4s; }
@keyframes rocketFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes flameFlicker { from { transform: scaleY(1); opacity: 1; } to { transform: scaleY(.68); opacity: .7; } }
@keyframes sparkPulse { 0%,100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }

.plans-section { padding: var(--space-lg, 22px) var(--space-xl, 28px); }
.plans-h { margin: 0 0 var(--space-md, 14px); font-size: 1.1rem; font-weight: 800; }
.plans-sub { margin: -6px 0 var(--space-md, 14px); font-size: .9rem; }

.plans-current { display: flex; align-items: flex-start; gap: var(--space-md, 16px); }
.plans-badge-free {
  flex: 0 0 auto; font-weight: 800; letter-spacing: .06em;
  background: var(--color-success); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: .8rem;
}
.plans-current-title { margin: 0 0 2px; font-weight: 700; font-size: 1.02rem; }
.plans-current-info p.muted { margin: 0; font-size: .9rem; line-height: 1.5; }

.plans-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plans-perks li { display: flex; align-items: baseline; gap: 10px; font-size: .95rem; }
.perk-star { color: var(--accent); font-size: 1rem; }

/* tier rows (a selector, not a card grid) */
.plans-tiers { display: flex; flex-direction: column; gap: 10px; }
.tier {
  display: flex; align-items: center; gap: var(--space-md, 16px);
  padding: var(--space-md, 16px) var(--space-lg, 18px);
  border: 1px solid var(--border); border-radius: var(--radius, 10px);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tier:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 22px rgba(79,140,255,.12); }
.tier-best { border-color: var(--accent); background: rgba(79,140,255,.06); }
.tier-left { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.tier-dur { font-weight: 800; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tier-per { font-size: .84rem; }
.tier-price { font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; }
.tier-badge {
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  background: var(--color-warning, #f39c12); color: #fff;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.tier-badge-best { background: var(--color-success); }

@media (max-width: 560px) {
  .acct-identity { padding: var(--space-md, 16px); }
  .acct-since { text-align: left; }
  .tier { flex-wrap: wrap; }
  .tier-price { min-width: 0; text-align: left; }
}

/* ================= TOGGLE SWITCH (email preferences) ================= */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0;
  background: var(--border, #d4dae3);
  border-radius: 999px;
  transition: background .2s ease;
}
.switch-track::before {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.switch input:checked + .switch-track { background: var(--accent, #4f8cff); }
.switch input:checked + .switch-track::before { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent, #4f8cff); outline-offset: 2px; }
.acct-nl-status { min-height: 18px; margin: 10px 0 0; font-size: .85rem; }