/* ============================================================
   ACCOUNT — copied verbatim from mockup `Wishgenerator.com/account.css`
   (1:1 source-of-truth). Reuses theme tokens from main.css :root
   (--color-primary, --shadow-*, etc.); local-scoped fallbacks below
   cover the handful of names our main.css doesn't define yet.

   DO NOT diverge from the mockup classes. PHP templates must emit
   exactly these classnames; new visual states should be added as
   mockup updates merged back in.
   ============================================================ */

/* Local-scoped tokens — only the names main.css doesn't already
   provide. Scoped to `.account-shell` so we don't leak into the
   rest of the site (header/footer stay untouched). */
.account-shell {
  --gradient-primary: linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%);
  --gradient-cta:     linear-gradient(135deg, #6050b0 0%, #9d80f8 100%);
  --color-primary-lilac: #c4b8ff;
  --radius-pill: 100px;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.25s;
  --duration-slow: 0.3s;
  --shadow-primary:       0 12px 24px -6px rgba(96, 80, 176, 0.35);
  --shadow-primary-hover: 0 16px 32px -6px rgba(96, 80, 176, 0.45);
}

/* Base modal + toast — ported from mockup wishes-ui.css. These primitives
   are shared by the upsell modal, contact/reminder drawers (Phase 6), and
   the toast helper in account.js. NOT scoped to .account-shell because
   the upsell modal renders at body-level (outside .account-shell) so it
   can overlay the entire viewport. */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(47, 47, 49, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1400;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 1rem;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
  transform: translateY(10px) scale(0.96);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal h3 {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 0.6rem; color: var(--color-text-dark);
}
.modal p {
  color: var(--color-text-muted);
  font-size: 0.94rem; line-height: 1.55;
  margin-bottom: 1.25rem;
}
.modal-actions {
  display: flex; gap: 0.6rem;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.modal-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}

/* Upsell modal specifics — featured list, close button, golden tint on
   the icon to nudge "this is a premium thing" without yelling. */
.account-upsell {
  position: relative;
}
.account-upsell__close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(178, 178, 174, 0.18);
  color: var(--color-text-muted);
  font-size: 1.2rem; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.account-upsell__close:hover {
  background: rgba(178, 178, 174, 0.32);
  color: var(--color-text-dark);
}
.account-upsell__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.account-upsell__features {
  list-style: none;
  padding: 0; margin: 0 0 1rem;
  display: flex; flex-direction: column;
  gap: 0.45rem;
}
.account-upsell__features li {
  font-size: 0.92rem;
  color: var(--color-text-dark);
  padding-left: 0.25rem;
}
.account-upsell__actions {
  justify-content: space-between;
}

/* Toast — bottom-center slide-up, used by account.js. Reuses the project's
   global toast style if main.css ever defines one; otherwise these self-
   contained rules cover the cabinet. */
.toast.account-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-text-dark);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 100px;
  font-size: 0.88rem; font-weight: 500;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 1500;
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.toast.account-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.account-toast.toast--error { background: #c54343; }

/* ===== LAYOUT SHELL ============================================== */
.account-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w, 260px) 1fr;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  align-items: start;
}

.account-main {
  padding: 2rem 2.5rem 4rem;
  min-width: 0; /* prevent grid blowout */
  width: 100%;
}

.account-main__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.account-main__titles h1 {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-text-dark);
  margin-bottom: 0.25rem;
  line-height: 1.05;
}
.account-main__titles h1 .greeting-wave { display: inline-block; transform: rotate(0); animation: wave 2.6s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%,60%,100%{transform:rotate(0);} 10%{transform:rotate(14deg);} 20%{transform:rotate(-8deg);} 30%{transform:rotate(14deg);} 40%{transform:rotate(-4deg);} 50%{transform:rotate(10deg);} }
.account-main__subtitle {
  color: var(--color-text-muted);
  font-size: 1rem;
  max-width: 540px;
}

/* ===== SIDEBAR =================================================== */
/* Two-layer sidebar:
   - `.account-sidebar` is the OUTER placeholder. Stays in the CSS Grid
      first column with `align-self: start` so the column never collapses,
      even when the inner rail goes `position: fixed`.
   - `.account-sidebar__inner` is the visible visual rail. JS may switch
      it between flow / fixed-top / fixed-bottom / absolute (state machine
      lives at the bottom of account.js). When fixed, JS stamps an
      explicit `height` on the outer so the column keeps its size. */
.account-sidebar {
  position: relative;
  align-self: start;
  margin: 1.5rem 0;
}
.account-sidebar__inner {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  /* Inheriting width from the outer placeholder lets the inner rail keep
     its size even when JS sets `position: fixed`. */
  width: 100%;
  box-sizing: border-box;
}

.account-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.account-sidebar__brand img { height: 26px; }

.account-sidebar__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--gradient-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: var(--shadow-primary);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
}
.account-sidebar__cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary-hover); }

.account-sidebar__nav { display: flex; flex-direction: column; gap: 0.15rem; }
.account-sidebar__nav-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  font-weight: 700;
  padding: 0.4rem 0.6rem 0.3rem;
}
.account-sidebar__nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-dark);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: background 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
}
.account-sidebar__nav-item:hover { background: rgba(96,80,176,0.06); color: var(--color-primary); }
.account-sidebar__nav-item .nav-icon { color: var(--color-text-muted); flex-shrink: 0; transition: color 0.15s; }
.account-sidebar__nav-item:hover .nav-icon { color: var(--color-primary); }
.account-sidebar__nav-item.is-active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}
.account-sidebar__nav-item.is-active .nav-icon { color: var(--color-primary); }
.account-sidebar__nav-item.is-active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--color-primary);
  border-start-end-radius: 2px;
  border-end-end-radius: 2px;
}
.account-sidebar__nav-item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.account-sidebar__nav-item.is-disabled:hover { background: transparent; color: var(--color-text-dark); }
.account-sidebar__nav-item.is-disabled:hover .nav-icon { color: var(--color-text-muted); }
.account-sidebar__nav-label-text { flex: 1; }

/* Log out — subtle, separated from nav with a divider */
.account-sidebar__nav-item--logout {
  margin-top: 0.25rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text-muted);
}
.account-sidebar__nav-item--logout .nav-icon { color: var(--color-text-muted); }
.account-sidebar__nav-item--logout:hover {
  background: rgba(197,67,67,0.08);
  color: #c54343;
  border-radius: var(--radius-sm);
}
.account-sidebar__nav-item--logout:hover .nav-icon { color: #c54343; }
.account-sidebar__soon {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: rgba(178,178,174,0.18);
  color: var(--color-text-muted);
  font-style: normal;
}

/* Plan widget */
.account-sidebar__plan {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: 0.9rem 0.9rem 1rem;
}
.account-sidebar__plan h4 {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}
.account-sidebar__plan-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary);
  margin-inline-start: 0.4rem;
}
.account-sidebar__plan-progress {
  height: 6px;
  background: rgba(96,80,176,0.10);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: 0.5rem 0;
}
.account-sidebar__plan-bar {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-pill);
  transition: width 0.3s var(--ease-standard);
}
.account-sidebar__plan-text { font-size: 0.78rem; color: var(--color-text-dark); margin-bottom: 0.2rem; }
.account-sidebar__plan-text strong { font-weight: 700; }
.account-sidebar__plan-reset { font-size: 0.7rem; color: var(--color-text-muted); margin-bottom: 0.75rem; }
.account-sidebar__plan-upgrade {
  width: 100%;
  text-align: center;
  padding: 0.55rem 1rem;
  background: linear-gradient(115deg, #b48a4a 0%, #f0c878 25%, #c89548 50%, #f5d99a 75%, #b48a4a 100%);
  background-size: 200% 100%;
  animation: btn-premium-shift 4s ease-in-out infinite;
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.account-sidebar__plan-upgrade:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(200, 149, 72, 0.6); }
.account-sidebar__plan-status { font-size: 0.7rem; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.plan-current__status { font-size: 0.8rem; color: var(--color-text-muted); margin: 0.25rem 0 0; }
.account-empty--flush { margin: 0; }

/* Invite */
.account-sidebar__invite {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: 0.9rem;
  margin-top: auto;
}
.account-sidebar__invite h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.2rem; }
.account-sidebar__invite p { font-size: 0.72rem; color: var(--color-text-muted); margin-bottom: 0.55rem; line-height: 1.4; }
.account-sidebar__invite-input { display: flex; gap: 0.3rem; }
.account-sidebar__invite-input input {
  flex: 1;
  min-width: 0;
  font-size: 0.72rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  font-family: inherit;
  color: var(--color-text-muted);
}
.account-sidebar__invite-copy {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: all 0.15s var(--ease-standard);
}
.account-sidebar__invite-copy:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-light); }

/* ===== SIDEBAR VARIANTS ============================================ */
/* 'compact' middle option retired (Phase 6.7) — VARIANTS = ['wide', 'icon']. */

/* icon-only — collapsed rail */
.account-shell[data-sidebar="icon"] { grid-template-columns: 76px 1fr; }
.account-shell[data-sidebar="icon"] .account-sidebar { padding: 0.85rem 0.55rem; align-items: center; gap: 0.6rem; }
.account-shell[data-sidebar="icon"] .account-sidebar__brand { padding: 0.25rem; border-bottom: none; justify-content: center; }
.account-shell[data-sidebar="icon"] .account-sidebar__brand-text { display: none; }
.account-shell[data-sidebar="icon"] .account-sidebar__cta {
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
}
.account-shell[data-sidebar="icon"] .account-sidebar__cta-label { display: none; }
.account-shell[data-sidebar="icon"] .account-sidebar__nav-label { display: none; }
.account-shell[data-sidebar="icon"] .account-sidebar__nav-item {
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: var(--radius-sm);
}
.account-shell[data-sidebar="icon"] .account-sidebar__nav-label-text,
.account-shell[data-sidebar="icon"] .account-sidebar__soon { display: none; }
.account-shell[data-sidebar="icon"] .account-sidebar__nav-item.is-active::before { display: none; }
.account-shell[data-sidebar="icon"] .account-sidebar__plan,
.account-shell[data-sidebar="icon"] .account-sidebar__invite { display: none; }
.account-shell[data-sidebar="icon"] .account-sidebar__nav-item { position: relative; }
.account-shell[data-sidebar="icon"] .account-sidebar__nav-item:hover::after {
  content: attr(data-tip);
  position: absolute;
  inset-inline-start: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-text-dark);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

/* ===== SUB-TABS ==================================================== */
.account-sub-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.account-sub-tab {
  padding: 0.85rem 1.1rem;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  background: transparent;
  border-left: none; border-right: none; border-top: none;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -1px;
}
.account-sub-tab:hover { color: var(--color-text-dark); }
.account-sub-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

/* ===== CARDS ======================================================= */
.account-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.account-card__head {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.account-card__head h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 0.25rem;
}
.account-card__head p { color: var(--color-text-muted); font-size: 0.92rem; }

/* ===== STATS STRIP (same vocabulary as /my-wishes/) =============== */
.account-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.account-stat {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.account-stat__num {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text-dark);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.account-stat__num.is-accent { color: var(--color-primary); }
.account-stat__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.account-stat__trend {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(16,185,129,0.12);
  color: var(--color-success);
}
.account-stat__trend.is-flat { background: rgba(178,178,174,0.18); color: var(--color-text-muted); }
/* Phase 6.9 B1 — trend pill variants used by template (`is-neutral`/`is-warn`).
   `is-flat` is the legacy alias for `is-neutral` and is kept for backwards-
   compatibility with any markup still passing it. */
.account-stat__trend.is-neutral { background: rgba(178,178,174,0.18); color: var(--color-text-muted); }
.account-stat__trend.is-warn    { background: rgba(197,67,67,0.12); color: #c54343; }

/* ===== WISH GRID (mini) — borrowed from My Wishes ================ */
.account-wish-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.account-wish-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all 0.25s var(--ease-standard);
  text-decoration: none;
  color: inherit;
}
.account-wish-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.account-wish-card__thumb {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  position: relative;
}
.account-wish-card__thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
}
.account-wish-card__status {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.account-wish-card__status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); }
.account-wish-card__status.is-draft .dot { background: #d4b25d; }
.account-wish-card__status.is-pending .dot { background: #5b9bd5; }
.account-wish-card__body { padding: 1rem 1.2rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
.account-wish-card__meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; flex-wrap: wrap; font-size: 0.72rem; color: var(--color-text-muted); }
.account-wish-card__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; margin-bottom: 0.4rem; }
.account-wish-card__quote { font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.55; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== FORMS ====================================================== */
.account-form { display: grid; gap: 1.25rem; max-width: 540px; }
.account-form.is-wide { max-width: 720px; }
.account-form-row { display: grid; gap: 0.4rem; }
.account-form-row.is-split { grid-template-columns: 1fr 1fr; gap: 1rem; }
.account-form-row label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--color-text-dark);
  text-transform: uppercase;
}
.account-form-row .field-hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
  line-height: 1.45;
}
.account-input,
.account-select {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  color: var(--color-text-dark);
  transition-property: border-color, box-shadow;
  transition-duration: 0.15s;
  width: 100%;
}
.account-input:focus,
.account-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(96,80,176,0.12);
}
.account-input[readonly] { background: var(--color-bg-light); color: var(--color-text-muted); }
.account-input--with-verified { padding-right: 5rem; }
.account-field-wrap { position: relative; }
.account-verified-pill {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0.2rem 0.55rem;
  background: rgba(16,185,129,0.12);
  color: var(--color-success);
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 0.25rem;
}

.account-form-foot { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.5rem; }
.account-form-foot .saved-flash { color: var(--color-success); font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; opacity: 0; transition: opacity 0.2s; }
.account-form-foot .saved-flash.show { opacity: 1; }

/* ===== TOGGLE LIST (Notifications) ================================ */
.account-toggle-list { display: flex; flex-direction: column; }
.account-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--color-border);
}
.account-toggle-row:last-child { border-bottom: none; }
.account-toggle-row__copy h4 { font-size: 1rem; font-weight: 600; margin-bottom: 0.2rem; letter-spacing: -0.01em; }
.account-toggle-row__copy p { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5; }

.acc-switch { position: relative; flex-shrink: 0; width: 46px; height: 26px; }
.acc-switch input { opacity: 0; width: 0; height: 0; }
.acc-switch__track {
  position: absolute; inset: 0; cursor: pointer;
  background: #d8d6d2;
  border-radius: 100px;
  transition: background 0.2s;
}
.acc-switch__track::before {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: transform 0.2s var(--ease-standard);
}
.acc-switch input:checked ~ .acc-switch__track { background: var(--color-primary); }
.acc-switch input:checked ~ .acc-switch__track::before { transform: translateX(20px); }
.acc-switch input:focus-visible ~ .acc-switch__track { box-shadow: 0 0 0 3px rgba(96,80,176,0.25); }

/* ===== AVATAR / DEFAULT-PHOTO UPLOAD ============================== */
.account-avatar-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.account-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.account-avatar-info h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.2rem; }
.account-avatar-info p { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 0.6rem; line-height: 1.5; }
/* Avatar copy + buttons stack vertically next to the circle (matches the
   mockup): title → hint → button row. The container needs to be a flex
   column with start-aligned items, not inline-flex. */
.account-avatar-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}
.account-avatar-actions .btn { padding: 0.5rem 1rem; font-size: 0.82rem; }

/* Hover state for avatar: clickable label, dark tint + tiny blur + camera icon.
   Triggered on hover and keyboard focus-within so it's accessible. */
.account-avatar {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.account-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-avatar__overlay {
    position: absolute; inset: 0;
    background: rgba(47, 47, 49, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
    pointer-events: none;
}
.account-avatar:hover .account-avatar__overlay,
.account-avatar:focus-within .account-avatar__overlay {
    opacity: 1;
}

/* New avatar-actions layout (title + hint + button row, side-by-side with the
   avatar instead of stacked below it). */
.account-avatar-actions__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}
.account-avatar-actions__hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.45;
    max-width: 420px;
}
.account-avatar-actions__buttons {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}
/* "Remove" button — hollow white with red label + red trash icon. Uses
   the .btn-danger we already defined for Sign-out buttons. */
.account-avatar-actions__buttons .btn-danger,
.account-avatar-actions__buttons .btn-danger:hover { color: #c54343; }
.account-avatar-actions__buttons .btn-danger svg { color: #c54343; }
.account-avatar-actions__buttons .btn { gap: 0.4rem; display: inline-flex; align-items: center; }
.account-avatar-actions__buttons .btn svg { vertical-align: middle; flex-shrink: 0; }

/* "Type DELETE" codeword styling — monospace + red accent. Sits inside the
   field label, makes the magic word visually distinct. */
.account-delete-codeword {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    background: rgba(197, 67, 67, 0.10);
    color: #c54343;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Inline empty state — single muted paragraph inside an account-card body.
   Lighter than `.account-empty` (which is a full centered block with
   illustration + CTA). Used for "No payment method" / "No invoices yet". */
.account-empty-inline {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}
.account-empty-inline p { margin: 0; }
.account-empty-inline a { color: var(--color-primary); font-weight: 600; }

/* "THIS DEVICE" badge next to the device name in Active Sessions. Small
   green pill — visually mirrors the .account-status-pill family but with
   success colour instead of primary tint. */
.account-session-current {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-success);
    margin-inline-start: 0.4rem;
    padding: 0.15rem 0.5rem;
    background: rgba(16, 185, 129, 0.12);
    border-radius: var(--radius-pill);
    vertical-align: middle;
}
.account-session-row .btn-danger { font-size: 0.82rem; padding: 0.5rem 1rem; }
.account-sessions-list { display: flex; flex-direction: column; }

/* Mockup `wishes-ui.css` defines .btn-danger as a hollow white button with
   a red label and neutral border, blushing red on hover. We never pulled
   wishes-ui.css into the theme (main.css already has its own button stack),
   so the sessions / delete-account rows had no .btn-danger and fell back to
   the unstyled <button>. Define the missing variant locally here. */
.btn-danger {
    background: var(--color-bg-white, #fff);
    color: #c54343;
    border: 1px solid var(--color-border, rgba(178, 178, 174, 0.20));
}
.btn-danger:hover { background: #fdecec; border-color: #c54343; }
.btn-danger:disabled { background: #f3f1ee; color: #b88c8c; border-color: var(--color-border); cursor: not-allowed; }

/* Payment Method + Billing History — side-by-side on desktop, stacked on
   mobile. Mirrors the mockup's account-card pair under "My plan". */
.account-plan-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}
.account-plan-bottom-grid > .account-card { margin: 0; }

/* Account cards become flex columns so any inner .account-empty can stretch
   to fill the full card height — required when the Payment Method + Billing
   History cards sit side-by-side at 50/50 and need to match heights even
   when their copy length differs. */
.account-card {
    display: flex;
    flex-direction: column;
}
.account-card > .account-empty { height: 100%; }

/* Sub-tabs strip needs horizontal scroll on narrow screens but should NEVER
   show a vertical scrollbar (the row is only ~46px tall — a stray vertical
   scrollbar made the strip look like a dropdown). */
.account-sub-tabs { overflow-y: hidden; }
@media (max-width: 760px) {
    .account-plan-bottom-grid { grid-template-columns: 1fr; }
}

/* Profile-specific tail (Phase 6): plan status badge, flash banner, divider. */
.account-flash {
  padding: 0.9rem 1.25rem;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #047857;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}
.account-plan-status {
  display: flex; flex-direction: column;
  gap: 0.45rem;
  padding: 0.25rem 0;
}
.account-plan-status p { margin: 0; color: var(--color-text-dark); }
.account-plan-status__badge {
  display: inline-block; align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(178, 178, 174, 0.18);
  color: var(--color-text-muted);
}
.account-plan-status__badge.is-premium {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: #fff;
}
.account-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.5rem 0 0;
}

/* /account/create/ — the wrapper hosts the front-page generator inside
   the cabinet shell. Strips out anything that's homepage-only:
   marketing hero, FAQs, testimonials. The generator itself (.genv2-*)
   keeps its visual identity. */
.account-create-wrap > .home-hero,
.account-create-wrap > .home-cta-banner,
.account-create-wrap > .use-cases,
.account-create-wrap > .benefits,
.account-create-wrap > .testimonials,
.account-create-wrap > .faq-section { display: none; }
.account-create-wrap .genv2-section { padding-top: 0; padding-bottom: 0; }

/* Phase 6.8 P / 6.9 H2 — Strip the cabinet's main padding on /account/create/
 * so the generator sits flush with the page-shell. Default .account-main
 * has 2rem 2.5rem 4rem padding (line 162); on this page the generator
 * has its own internal padding and the cabinet padding only wastes room. */
.account-main:has(> .account-create-wrap) { padding: 0; }
.account-create-wrap { padding: 0; margin: 0; }

/* Phase 6.9 H3 — let the .genv2-section inherit the cabinet's bg instead
 * of painting its own home-page colour (`--color-page-bg #f5f3f0`). The
 * inner .genv2-wrap card keeps its white surface from generator-v2.css.
 * Also zero out the outer `.container` padding so the white card hits
 * the cabinet shell edges flush (mobile especially). */
.account-create-wrap .genv2-section { background: transparent; }
.account-create-wrap .genv2-section > .container { padding: 0; max-width: none; }

/* Phase 6.9 G — Hide the sidebar "Layout" toggle button. Markup stays
 * in template-parts/account/sidebar.php so it's a one-line revert if we
 * want to re-enable variant switching later. JS handler in account.js
 * early-returns when no buttons match the selector. */
[data-sidebar-variant-toggle] { display: none !important; }

/* /account/wishes/ — same /my-wishes/ body, but the page-shell already
   shows its own page header. Suppress page-shell's empty title block
   (the template-part emits its own .page-header). */
.account-main:has(> .account-main__header:empty),
.account-wishes-wrap ~ .account-main__header { display: none; }
.account-wishes-wrap .container { padding: 0; max-width: none; }
.account-wishes-wrap .page-header { margin-top: 0; }

.account-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-light);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  position: relative;
}
.account-dropzone:hover { border-color: var(--color-primary); background: rgba(96,80,176,0.04); }
.account-dropzone.is-drag { border-color: var(--color-primary); background: var(--color-primary-light); }
.account-dropzone.has-image {
  padding: 1.25rem;
  background: var(--color-bg-white);
  border-style: solid;
  border-color: var(--color-border);
}
.account-dropzone__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 0.85rem;
}
.account-dropzone__title { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.account-dropzone__hint { font-size: 0.82rem; color: var(--color-text-muted); }
.account-dropzone__hint strong { color: var(--color-primary); cursor: pointer; }
.account-dropzone__preview {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.account-dropzone__preview-img {
  width: 120px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.account-dropzone__preview-info { flex: 1; text-align: left; }
.account-dropzone__preview-info h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.2rem; }
.account-dropzone__preview-info p { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.account-dropzone__preview-actions { display: flex; gap: 0.4rem; }
.account-dropzone__preview-actions .btn { padding: 0.4rem 0.85rem; font-size: 0.78rem; }

/* attach by default row */
.account-attach-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  margin-top: 1.25rem;
}
.account-attach-row__copy h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.15rem; }
.account-attach-row__copy p { font-size: 0.78rem; color: var(--color-text-muted); }

/* ===== DELETE ACCOUNT ============================================= */
.account-delete-warn {
  background: #fdecec;
  border: 1px solid rgba(197,67,67,0.25);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.25rem;
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.account-delete-warn__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(197,67,67,0.15);
  color: #c54343;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.account-delete-warn h4 { color: #c54343; font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem; }
.account-delete-warn p { color: #8a3535; font-size: 0.85rem; line-height: 1.5; }
.account-delete-warn ul { margin: 0.5rem 0 0 1.2rem; color: #8a3535; font-size: 0.85rem; line-height: 1.65; }

.account-delete-confirm-row {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.85rem 0;
  cursor: pointer;
}
.account-delete-confirm-row input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: #c54343;
  cursor: pointer;
}
.account-delete-confirm-row label { font-size: 0.9rem; color: var(--color-text-dark); cursor: pointer; line-height: 1.5; }

.btn-danger-solid {
  background: #c54343;
  color: #fff;
  border: none;
  box-shadow: 0 10px 20px -6px rgba(197,67,67,0.4);
}
.btn-danger-solid:hover { background: #b03737; box-shadow: 0 14px 26px -6px rgba(197,67,67,0.55); transform: translateY(-2px); }
.btn-danger-solid:disabled { background: #d8d6d2; color: #8b8b88; box-shadow: none; cursor: not-allowed; transform: none; }

/* ===== CREATE PAGE PLACEHOLDER ==================================== */
.account-create-placeholder {
  background: var(--color-bg-white);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 4rem 2rem;
  text-align: center;
}
.account-create-placeholder__icon {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-primary);
}
.account-create-placeholder h2 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}
.account-create-placeholder p {
  color: var(--color-text-muted);
  max-width: 480px;
  margin: 0 auto 1.5rem;
  line-height: 1.55;
}
.account-create-placeholder__hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  background: var(--color-bg-light);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-md);
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ===== EMPTY STATES ============================================== */
.account-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--color-text-muted);
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
}
.account-empty__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 0.75rem;
}
.account-empty h3 { color: var(--color-text-dark); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.3rem; }
.account-empty p { font-size: 0.88rem; margin-bottom: 0.8rem; }

/* ===== AVATAR DROPDOWN (in site-header) =========================== */
.account-avatar-trigger {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  position: relative;
  background-size: cover;
  background-position: center;
}
.account-avatar-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.4rem;
  min-width: 180px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: all 0.15s var(--ease-standard);
}
.account-avatar-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.account-avatar-menu a, .account-avatar-menu button {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-dark);
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.account-avatar-menu a:hover, .account-avatar-menu button:hover { background: var(--color-primary-light); color: var(--color-primary); }
.account-avatar-menu .menu-divider { height: 1px; background: var(--color-border); margin: 0.25rem 0; }

/* ===== MOBILE ===================================================== */
.account-sidebar-toggle { display: none !important; }
.account-sidebar-backdrop { display: none; }

@media (max-width: 980px) {
  .account-shell,
  .account-shell[data-sidebar="compact"],
  .account-shell[data-sidebar="icon"] {
    grid-template-columns: 1fr;
  }
  .account-sidebar {
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh;
    width: 280px;
    margin: 0;
    border-radius: 0;
    border-right: 1px solid var(--color-border);
    border-top: none; border-bottom: none; border-left: none;
    /* Closed-state offset. The open-state rule below overrides this with
     * !important — chained transitions between the two values were
     * intermittently sticky in Chrome (computed-style stayed at -100%
     * after the class flipped). Dropping the transition makes the
     * drawer open instantly, which is fine UX-wise for a mobile burger. */
    transform: translate3d(-100%, 0, 0);
    z-index: 1200;
    overflow-y: auto;
    align-self: stretch;
  }
  .account-shell[data-sidebar="icon"] .account-sidebar {
    width: 280px;
    align-items: stretch;
    padding: 1rem;
  }
  .account-shell[data-sidebar="icon"] .account-sidebar__nav-item {
    width: 100%; justify-content: flex-start; padding: 0.55rem 0.7rem;
  }
  .account-shell[data-sidebar="icon"] .account-sidebar__nav-label-text { display: inline; }
  .account-shell[data-sidebar="icon"] .account-sidebar__brand-text { display: inline; }
  .account-shell[data-sidebar="icon"] .account-sidebar__cta {
    width: 100%; height: auto; padding: 0.85rem 1rem; border-radius: var(--radius-pill);
  }
  .account-shell[data-sidebar="icon"] .account-sidebar__cta-label { display: inline; }
  .account-shell[data-sidebar="icon"] .account-sidebar__plan,
  .account-shell[data-sidebar="icon"] .account-sidebar__invite { display: block; }

  /* Phase 6.8 Group O: the cabinet drawer is REPLACED by the global
   * bottom-sheet on mobile. The .account-sidebar-toggle burger now
   * dispatches the sheet-open event (see main.js). The cabinet sidebar
   * + backdrop are hidden on mobile so even if `is-drawer-open` gets
   * toggled by stale code paths, nothing flashes. The burger button
   * itself stays visible — it's the cabinet's entry point into the
   * shared sheet. */
  .account-sidebar { display: none !important; }
  .account-sidebar-backdrop { display: none !important; }
  .account-sidebar-toggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-dark);
    cursor: pointer;
    margin-right: 0.5rem;
  }

  .account-main { padding: 1rem 1.25rem 3rem; }
  .account-main__titles h1 { font-size: 1.75rem; }
  .account-main__header { gap: 0.75rem; }

  .account-stats { grid-template-columns: repeat(2, 1fr); }
  .account-wish-grid { grid-template-columns: 1fr; }

  .account-card { padding: 1.5rem 1.25rem; }
  .account-form-row.is-split { grid-template-columns: 1fr; }
  .account-avatar-row { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 600px) {
  .account-main__header { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   PHASE B/C PAGES — Delivery, Bonuses, Contacts, Reminders
   ============================================================ */

/* Preview ribbon shown in page headers */
.account-preview-tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(122,87,68,0.12);
  color: var(--color-accent-brown);
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Filter pills (reused from wishes) */
.account-filter-row {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.account-filter-pills { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.account-pill {
  padding: 0.4rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-bg-white); color: var(--color-text-muted);
  font-size: 0.8rem; font-family: inherit; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: all 0.18s var(--ease-standard);
}
.account-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.account-pill.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.account-pill .pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 0.4rem;
  background: rgba(96,80,176,0.12); color: var(--color-primary);
  border-radius: var(--radius-pill);
}
.account-pill.is-active .pill-count { background: rgba(255,255,255,0.22); color: #fff; }

/* Search input (reused pattern) */
.account-search {
  position: relative; flex: 1; max-width: 360px; min-width: 200px;
}
.account-search input {
  width: 100%;
  padding: 0.55rem 1rem 0.55rem 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-white);
  font-family: inherit; font-size: 0.88rem;
  -webkit-appearance: none;
  appearance: none;
  transition-property: border-color, box-shadow;
  transition-duration: 0.2s;
}
.account-search input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(96,80,176,0.12); }
.account-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }

/* ===== DELIVERY HISTORY =========================================== */
.account-delivery-list {
  display: flex; flex-direction: column;
}
.account-delivery-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--color-border);
}
.account-delivery-row:last-child { border-bottom: none; }
/* Phase 6.9.1 — when a cancel button is present (scheduled deliveries),
   add a 5th column for it. :has() is supported in all evergreen browsers. */
.account-delivery-row:has(.account-delivery-row__cancel) {
  grid-template-columns: auto 1fr auto auto auto;
}
.account-delivery-row__channel {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.account-delivery-row__channel.is-email    { background: linear-gradient(135deg, #6050b0, #c4b8ff); }
.account-delivery-row__channel.is-telegram { background: linear-gradient(135deg, #2aabee, #88c8eb); }
.account-delivery-row__channel.is-sms      { background: linear-gradient(135deg, #10b981, #6ee7b7); }
.account-delivery-row__channel.is-whatsapp { background: linear-gradient(135deg, #25d366, #87e9ad); }
.account-delivery-row__channel.is-slack    { background: linear-gradient(135deg, #4a154b, #ecb22e); }
.account-delivery-row__main { min-width: 0; }
.account-delivery-row__title {
  font-size: 0.95rem; font-weight: 600; color: var(--color-text-dark);
  letter-spacing: -0.01em;
  margin-bottom: 0.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-delivery-row__meta {
  font-size: 0.78rem; color: var(--color-text-muted);
  display: flex; align-items: center; gap: 0.5rem;
}
.account-delivery-row__meta strong { font-weight: 600; color: var(--color-text-dark); }
.account-delivery-row__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-muted); }
.account-delivery-row__time { font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; }

.delivery-status {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0.25rem 0.65rem; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 0.35rem;
  white-space: nowrap;
}
.delivery-status .dot { width: 6px; height: 6px; border-radius: 50%; }
.delivery-status.is-delivered { background: rgba(16,185,129,0.12); color: var(--color-success); }
.delivery-status.is-delivered .dot { background: var(--color-success); }
.delivery-status.is-pending { background: rgba(91,155,213,0.12); color: #2c6da1; }
.delivery-status.is-pending .dot { background: #5b9bd5; }
.delivery-status.is-failed { background: rgba(197,67,67,0.12); color: #c54343; }
.delivery-status.is-failed .dot { background: #c54343; }
.delivery-status.is-opened { background: rgba(122,87,68,0.12); color: var(--color-accent-brown); }
.delivery-status.is-opened .dot { background: var(--color-accent-brown); }
/* Phase 6.9.1 — 5th state used by scheduled deliveries (lavender). */
.delivery-status.is-scheduled { background: rgba(196,184,255,0.25); color: var(--color-primary); }
.delivery-status.is-scheduled .dot { background: var(--color-primary); }

/* ===== BONUSES ==================================================== */
.account-balance-hero {
  background: var(--gradient-cta);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  margin-bottom: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 2rem;
  box-shadow: var(--shadow-primary);
  position: relative;
  overflow: hidden;
}
.account-balance-hero::before {
  content: ''; position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.account-balance-hero::after {
  content: ''; position: absolute; right: 40px; bottom: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
.account-balance-hero__main { position: relative; z-index: 1; }
.account-balance-hero__label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.2px;
  opacity: 0.85; font-weight: 600; margin-bottom: 0.4rem;
}
.account-balance-hero__amount {
  font-size: 3rem; font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; margin-bottom: 0.45rem;
}
.account-balance-hero__amount sup {
  font-size: 1rem; opacity: 0.85; font-weight: 600; vertical-align: top; margin-left: 0.25rem;
}
.account-balance-hero__hint { font-size: 0.88rem; opacity: 0.85; max-width: 340px; line-height: 1.5; }
.account-balance-hero__actions { display: flex; flex-direction: column; gap: 0.5rem; position: relative; z-index: 1; }
.account-balance-hero__actions .btn {
  background: rgba(255,255,255,0.15); color: #fff; backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 0.55rem 1.2rem; font-size: 0.85rem;
}
.account-balance-hero__actions .btn:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); }
.account-balance-hero__actions .btn--solid {
  background: #fff; color: var(--color-primary); border-color: #fff;
}
.account-balance-hero__actions .btn--solid:hover { background: #f8f4ff; }

/* Earn-more strip */
.account-earn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-bottom: 2rem;
}
.account-earn-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: all 0.18s var(--ease-standard);
  cursor: pointer;
}
.account-earn-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.account-earn-card__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.account-earn-card__title { font-size: 0.88rem; font-weight: 600; letter-spacing: -0.01em; }
.account-earn-card__reward { font-size: 0.78rem; color: var(--color-primary); font-weight: 700; }

/* Ledger */
.account-ledger-group { margin-bottom: 1.75rem; }
.account-ledger-group:last-child { margin-bottom: 0; }
.account-ledger-group__title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-text-muted); font-weight: 700;
  padding-bottom: 0.55rem; margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}
.account-ledger-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 1rem;
  padding: 0.8rem 0.25rem;
  border-bottom: 1px dashed var(--color-border);
}
.account-ledger-row:last-child { border-bottom: none; }
.account-ledger-row__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.account-ledger-row__icon.is-credit { background: rgba(16,185,129,0.12); color: var(--color-success); }
.account-ledger-row__icon.is-debit { background: rgba(96,80,176,0.12); color: var(--color-primary); }
.account-ledger-row__title { font-size: 0.92rem; font-weight: 600; margin-bottom: 0.1rem; letter-spacing: -0.01em; }
.account-ledger-row__sub { font-size: 0.76rem; color: var(--color-text-muted); }
.account-ledger-row__date { font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; }
.account-ledger-row__amount { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.account-ledger-row__amount.is-credit { color: var(--color-success); }
.account-ledger-row__amount.is-debit { color: var(--color-text-dark); }

/* ===== CONTACTS ==================================================== */
.account-contacts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.account-contact-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  transition: all 0.2s var(--ease-standard);
  box-shadow: var(--shadow-sm);
}
.account-contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(96,80,176,0.25); }
.account-contact-card__head { display: flex; align-items: center; gap: 0.85rem; }
.account-contact-card__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 700;
  flex-shrink: 0;
  background-size: cover; background-position: center;
}
.account-contact-card__name { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.1rem; }
.account-contact-card__handle { font-size: 0.78rem; color: var(--color-text-muted); }
.account-contact-card__fav {
  margin-left: auto;
  background: transparent; border: none;
  color: var(--color-text-muted);
  cursor: pointer; padding: 0.3rem;
  transition: color 0.15s;
}
.account-contact-card__fav.is-on { color: #d4b25d; }
.account-contact-card__fav:hover { color: #d4b25d; }
.account-contact-card__meta {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.6rem 0.85rem;
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
  font-size: 0.78rem; color: var(--color-text-muted);
}
.account-contact-card__meta-row { display: flex; justify-content: space-between; gap: 0.5rem; }
.account-contact-card__meta-row strong { color: var(--color-text-dark); font-weight: 600; }
.account-contact-card__actions { display: flex; gap: 0.4rem; }
.account-contact-card__actions .btn { flex: 1; padding: 0.5rem 0.6rem; font-size: 0.8rem; }

/* ===== REMINDERS =================================================== */
.account-reminders-highlight {
  background: linear-gradient(135deg, rgba(196,184,255,0.20), rgba(245,243,240,0.5));
  border: 1px solid rgba(96,80,176,0.18);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}
.account-reminders-highlight__head {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--color-primary); font-weight: 700;
  margin-bottom: 0.85rem;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.account-reminders-highlight__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem;
}
.account-reminders-row,
.account-reminders-highlight__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 0.25rem;
  border-bottom: 1px solid var(--color-border);
}
.account-reminders-highlight__item {
  border-bottom: none;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}
.account-reminders-row:last-child { border-bottom: none; }
.account-reminders-date {
  width: 56px;
  text-align: center;
  flex-shrink: 0;
}
.account-reminders-date__day {
  font-size: 1.65rem; font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text-dark);
  line-height: 1;
}
.account-reminders-date__month {
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--color-primary);
  margin-top: 0.2rem;
}
.account-reminders-date.is-soon .account-reminders-date__day { color: var(--color-primary); }
.account-reminders-row__main { min-width: 0; }
.account-reminders-row__name { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.15rem; }
.account-reminders-row__event {
  font-size: 0.78rem; color: var(--color-text-muted);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.account-reminders-row__event .badge {
  padding: 0.1rem 0.5rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.4px;
}
.account-reminders-row__action {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s var(--ease-standard);
}
.account-reminders-row__action:hover { background: var(--color-primary); color: #fff; }

/* ============================================================
   DASHBOARD V2 — Compact grid
   ============================================================ */
.dash2-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.1rem;
}
.dash2-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  min-width: 0;
}
.dash2-card__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.5rem; margin-bottom: 1rem;
}
.dash2-card__title {
  font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.9px;
  color: var(--color-text-muted);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.dash2-card__title svg { color: var(--color-primary); }
.dash2-card__link {
  font-size: 0.78rem; font-weight: 600; color: var(--color-primary);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.2rem;
}
.dash2-card__link svg {
  transition: transform 0.18s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.dash2-card__link:hover {
  gap: 0.4rem;
}
.dash2-card__link:hover svg {
  transform: translateX(3px);
}

/* Phase 6.9 F2 — Scoped overrides for the dashboard's "Upcoming" empty
 * state. The reminders-page card-style block is reused but shrunk so it
 * fits inside the smaller dash2-card slot. */
.dash2-card__empty.account-empty {
  padding: 1.25rem 0.5rem;
  gap: 0.55rem;
}
.dash2-card__empty .account-empty__icon {
  width: 40px;
  height: 40px;
  padding: 0;
}
.dash2-card__empty .account-empty__icon svg {
  width: 22px;
  height: 22px;
}
.dash2-card__empty.account-empty h3 { font-size: 0.95rem; margin: 0; }
.dash2-card__empty.account-empty p  { font-size: 0.8rem; }
.dash2-card__empty.account-empty .btn {
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
}
.dash2-card__body { flex: 1; }

/* Layout: row 1 — stats (5) + last wish (7) */
.dash2-stats { grid-column: span 5; }
.dash2-wish  { grid-column: span 7; }
/* Row 2 — bonuses, deliveries, reminders (each 4) */
.dash2-bonuses { grid-column: span 4; }
.dash2-deliveries { grid-column: span 4; }
.dash2-reminders { grid-column: span 4; }

@media (max-width: 1200px) {
  .dash2-stats, .dash2-wish { grid-column: span 12; }
  .dash2-bonuses, .dash2-deliveries, .dash2-reminders { grid-column: span 6; }
}
@media (max-width: 700px) {
  .dash2-bonuses, .dash2-deliveries, .dash2-reminders { grid-column: span 12; }
}

/* Stats summary card — 2x2 mini grid */
.dash2-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;
}
.dash2-stat {
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.95rem;
  /* Phase 6.8 D — Tiles are <a> links now (Phase 6.7 J) with hover/active
   * feedback. The chevron slides in on hover, the whole tile lifts. */
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.2s var(--ease-standard),
              box-shadow 0.2s var(--ease-standard),
              background 0.2s var(--ease-standard);
}
.dash2-stat:hover {
  transform: translateY(-2px);
  background: var(--color-bg-white);
  box-shadow: 0 6px 16px -4px rgba(96, 80, 176, 0.18);
}
.dash2-stat:active {
  transform: translateY(0);
}
.dash2-stat__chevron {
  margin-left: auto;
  opacity: 0.6;
  transition: transform 0.18s var(--ease-standard), opacity 0.18s;
}
.dash2-stat:hover .dash2-stat__chevron {
  transform: translateX(3px);
  opacity: 1;
}
.dash2-stat__label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  margin-right: 0.35rem;
}
.dash2-stat__label-text { margin-right: auto; }
.dash2-stat__num {
  font-size: 1.65rem; font-weight: 800; letter-spacing: -0.03em;
  color: var(--color-text-dark); line-height: 1; margin-bottom: 0.3rem;
}
.dash2-stat__num.is-accent { color: var(--color-primary); }
.dash2-stat__label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.6px;
  font-weight: 600; color: var(--color-text-muted);
  display: flex; justify-content: space-between; align-items: center;
}
.dash2-stat__delta {
  font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: rgba(16,185,129,0.14); color: var(--color-success);
  text-transform: none; letter-spacing: 0;
}
.dash2-stat__delta.is-flat { background: rgba(178,178,174,0.18); color: var(--color-text-muted); }

/* Featured last wish card */
.dash2-wish-feature {
  display: grid; grid-template-columns: 174px 1fr;
  gap: 1.25rem;
  align-items: stretch;
}
.dash2-wish-feature__img {
  border-radius: var(--radius-md);
  background-size: cover; background-position: center;
  aspect-ratio: 1/1;
  min-height: 140px;
  position: relative;
  overflow: hidden;
}
.dash2-wish-feature__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.35) 100%);
}
.dash2-wish-feature__status {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.95);
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.dash2-wish-feature__status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); }
/* Stacking guard: when the dash2-wish card narrows (e.g. < 700px), the
   image cell occasionally bleeds onto the body cell because the grid
   tracks collapse. Forcing a z-index stack keeps the text on top, and
   `overflow: hidden` on the image stops the gradient from leaking. */
.dash2-wish-feature__img { z-index: 0; }
.dash2-wish-feature__body {
    display: flex; flex-direction: column; min-width: 0;
    position: relative;
    z-index: 1;
}
.dash2-wish-feature__meta {
  font-size: 0.72rem; color: var(--color-text-muted);
  margin-bottom: 0.35rem;
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.dash2-wish-feature__title {
  font-size: 1.2rem; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.3; margin-bottom: 0.55rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dash2-wish-feature__quote {
  font-size: 0.88rem; color: var(--color-text-muted);
  line-height: 1.55; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 0.85rem;
}
.dash2-wish-feature__actions { display: flex; gap: 0.5rem; }
.dash2-wish-feature__actions .btn { padding: 0.5rem 1rem; font-size: 0.82rem; }

/* Compact mini-list rows used inside dash2 cards */
.dash2-mini-list { display: flex; flex-direction: column; }
.dash2-mini-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}
.dash2-mini-row:last-child { border-bottom: none; }
.dash2-mini-row__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash2-mini-row__icon.is-credit { background: rgba(16,185,129,0.14); color: var(--color-success); }
.dash2-mini-row__icon.is-debit { background: rgba(96,80,176,0.14); color: var(--color-primary); }
.dash2-mini-row__icon.is-email { background: rgba(96,80,176,0.14); color: var(--color-primary); }
.dash2-mini-row__icon.is-telegram { background: rgba(42,171,238,0.18); color: #1f93d3; }
.dash2-mini-row__icon.is-sms { background: rgba(16,185,129,0.14); color: var(--color-success); }
.dash2-mini-row__main { min-width: 0; }
.dash2-mini-row__title {
  font-size: 0.88rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--color-text-dark);
  margin-bottom: 0.1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash2-mini-row__meta { font-size: 0.74rem; color: var(--color-text-muted); }
.dash2-mini-row__trailing { font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.dash2-mini-row__trailing.is-credit { color: var(--color-success); }
.dash2-mini-row__trailing.is-muted { color: var(--color-text-muted); font-weight: 500; font-size: 0.74rem; }
.dash2-mini-row__date-tile {
  width: 36px; height: 36px;
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash2-mini-row__date-tile-day { font-size: 0.95rem; font-weight: 800; line-height: 1; color: var(--color-primary); }
.dash2-mini-row__date-tile-month { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; color: var(--color-primary); margin-top: 0.05rem; letter-spacing: 0.5px; }

/* Mobile adjustments for new pages */
@media (max-width: 980px) {
  .account-earn-grid { grid-template-columns: repeat(2, 1fr); }
  .account-contacts-grid { grid-template-columns: 1fr; }
  .account-reminders-highlight__grid { grid-template-columns: 1fr; }
  .account-balance-hero { flex-direction: column; align-items: stretch; padding: 1.5rem; gap: 1.25rem; }
  .account-balance-hero__actions { flex-direction: row; }
  .account-balance-hero__amount { font-size: 2.25rem; }
  .account-delivery-row { grid-template-columns: auto 1fr; row-gap: 0.5rem; }
  .account-delivery-row__time, .account-delivery-row .delivery-status { grid-column: 2; justify-self: start; }
  .dash2-wish-feature { grid-template-columns: 1fr; }
  .dash2-wish-feature__img { aspect-ratio: 16/9; min-height: 0; }
}

/* ============================================================
   MY WISHES (embedded in account shell)
   ============================================================ */
.myw-view-switch {
  display: inline-flex; gap: 0.3rem; margin-left: auto;
}

.myw-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.myw-grid.is-list { grid-template-columns: 1fr; }
.myw-grid.is-list .myw-card { flex-direction: row; }
.myw-grid.is-list .myw-card__thumb { width: 280px; aspect-ratio: 4/3; flex-shrink: 0; }

.myw-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s var(--ease-standard);
  position: relative;
}
.myw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.myw-card:hover .myw-card__actions { opacity: 1; transform: translateY(0); }

.myw-card__thumb {
  aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  position: relative;
}
.myw-card__thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
}

.myw-card__actions {
  position: absolute; top: 10px; right: 10px;
  display: flex; gap: 5px;
  opacity: 0; transform: translateY(-4px);
  transition: all 0.2s var(--ease-standard);
  z-index: 2;
}
.myw-action {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
  color: var(--color-text-dark); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: all 0.18s var(--ease-standard);
}
.myw-action:hover { transform: scale(1.08); color: var(--color-primary); }
.myw-action--danger:hover { color: #c54343; }

.myw-card__body { padding: 1rem 1.2rem 1.2rem; flex: 1; display: flex; flex-direction: column; min-width: 0; }
.myw-card__meta {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; color: var(--color-text-muted);
  margin-bottom: 0.45rem; flex-wrap: wrap;
}
.myw-card__title {
  font-size: 1rem; font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.35; margin-bottom: 0.4rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.myw-card__quote {
  font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.55;
  flex: 1; margin-bottom: 0.9rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.myw-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding-top: 0.75rem; border-top: 1px dashed var(--color-border);
}
.myw-card__link {
  font-size: 0.82rem; font-weight: 600; color: var(--color-primary);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem;
  transition: gap 0.15s;
}
.myw-card__link:hover { gap: 0.4rem; }

.myw-vis {
  display: inline-flex;
  background: var(--color-bg-light);
  border-radius: var(--radius-pill);
  padding: 2px;
}
.myw-vis__btn {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem 0.6rem;
  border: none; background: transparent;
  border-radius: var(--radius-pill);
  font-size: 0.7rem; font-weight: 600; color: var(--color-text-muted);
  cursor: pointer; font-family: inherit;
  transition: all 0.18s var(--ease-standard);
}
.myw-vis__btn.is-active { background: var(--color-primary); color: #fff; }

@media (max-width: 980px) {
  .myw-grid { grid-template-columns: repeat(2, 1fr); }
  .myw-grid.is-list .myw-card { flex-direction: column; }
  .myw-grid.is-list .myw-card__thumb { width: 100%; }
}
@media (max-width: 640px) {
  .myw-grid { grid-template-columns: 1fr; }
  .myw-view-switch { margin-left: 0; }
}

/* ============================================================
   GALLERY — 8-slot photo grid
   ============================================================ */
.gallery-progress {
  width: 160px; height: 8px;
  background: var(--color-bg-light);
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex-shrink: 0;
}
.gallery-progress__bar {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-pill);
  transition: width 0.3s var(--ease-standard);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  padding: 0.25rem;
  border-radius: var(--radius-md);
  transition: background 0.18s var(--ease-standard);
}
.gallery-grid.is-drag {
  background: rgba(96,80,176,0.06);
  outline: 2px dashed var(--color-primary);
  outline-offset: -8px;
}

.gallery-tile {
  /* Phase 6.9.4 — image tiles are img-square (1:1, on `__img`) + caption
   * row beneath. The outer wrapper itself NO LONGER has aspect-ratio,
   * because the caption row needs vertical space below the square.
   * `.gallery-tile--empty` matches the IMG SQUARE only (align-self:start)
   * so both tiles' visible squares are equal width and height. */
  position: relative;
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  text-align: center;
  width: 100%;
  min-width: 0;
}

.gallery-tile__img {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--radius-md);
  background-size: cover; background-position: center;
  border: 2px solid var(--color-border);
  position: relative;
  overflow: hidden;
  transition: all 0.2s var(--ease-standard);
  background-color: var(--color-bg-light);
}
/* The inner <img> fills the square wrapper completely (no letterboxing).
   Wrapper has aspect-ratio + overflow:hidden so the cover-cropped image
   never overflows the rounded border. */
.gallery-tile__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
.gallery-tile:hover .gallery-tile__img { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gallery-tile.is-default .gallery-tile__img {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(96,80,176,0.18);
}

.gallery-tile__badge {
  position: absolute; top: 8px; left: 8px;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0.25rem 0.55rem 0.25rem 0.5rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 0.25rem;
  box-shadow: 0 2px 8px rgba(96,80,176,0.35);
}

.gallery-tile__delete {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%; border: none;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  color: var(--color-text-dark);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: all 0.18s var(--ease-standard);
  box-shadow: var(--shadow-sm);
}
.gallery-tile:hover .gallery-tile__delete { opacity: 1; }
.gallery-tile__delete:hover { color: #c54343; transform: scale(1.08); }

.gallery-tile__check {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  transition: color 0.15s;
}
.gallery-tile.is-default .gallery-tile__check {
  color: var(--color-primary);
  font-weight: 600;
}
.gallery-tile__check input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
  margin: 0;
}

/* Phase 6.9.4 — match the visible image square of `.gallery-tile__img`.
   Image tiles have an `__img` block at aspect-ratio 1/1 + a `__check`
   caption row BELOW it, so the whole `.gallery-tile` grid item is
   taller than 1:1. The empty tile gets `align-self: start` so it stays
   1:1 (same visible size as the image square), aligned to the top of
   the row, while the image tile keeps its caption underneath. Both
   tiles' visible squares are now identical width AND height. */
.gallery-tile--empty {
  width: 100%;
  align-self: start;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  border: 2px dashed var(--color-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem;
  background: var(--color-bg-light);
  color: var(--color-text-muted);
  font-size: 0.85rem; font-weight: 500;
  cursor: pointer;
  transition: all 0.18s var(--ease-standard);
  font-family: inherit;
  box-sizing: border-box;
}
.gallery-tile--empty:not(:disabled):hover {
  border-color: var(--color-primary);
  background: rgba(96,80,176,0.04);
  color: var(--color-primary);
  transform: translateY(-2px);
}
.gallery-tile--empty:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  background: var(--color-bg-light);
}

.gallery-hint {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
}
.gallery-hint svg { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.gallery-hint strong { color: var(--color-text-dark); font-weight: 600; }

.gallery-upgrade {
  margin-top: 1.5rem;
  background: var(--gradient-cta);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  display: flex; align-items: center; gap: 1.25rem;
  box-shadow: var(--shadow-primary);
  position: relative;
  overflow: hidden;
}
.gallery-upgrade::before {
  content: ''; position: absolute; right: -50px; top: -50px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.gallery-upgrade__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.gallery-upgrade__copy { flex: 1; position: relative; z-index: 1; }
.gallery-upgrade__copy h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; letter-spacing: -0.015em; }
.gallery-upgrade__copy p { font-size: 0.88rem; opacity: 0.9; line-height: 1.5; }
.gallery-upgrade .btn-primary {
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 6px 14px -2px rgba(0,0,0,0.22);
  position: relative; z-index: 1;
  white-space: nowrap;
}
.gallery-upgrade .btn-primary:hover { transform: translateY(-2px); background: #f8f4ff; }

/* Gold premium pill — sits in the gallery usage row, replaces the old
   lilac progress bar. Visual copies .genv2-v2-prem-trigger from the
   generator (same gradient, animation, hover-lift), but compact and
   inline so it fits next to the "4 of 4 used" text. Variables and
   keyframes are inlined so this works without generator-v2-redesign.css
   being on the page. */
@keyframes account-gallery-pill-bg-shift {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes account-gallery-pill-shimmer {
  0%   { background-position: -120% 50%; }
  100% { background-position:  220% 50%; }
}
.account-gallery-upgrade-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: var(--radius-pill, 100px);
  padding: 0.55rem 1rem 0.55rem 0.75rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  text-align: left;
  background: linear-gradient(115deg, #b48a4a 0%, #f0c878 25%, #c89548 50%, #f5d99a 75%, #b48a4a 100%);
  background-size: 200% 100%;
  animation: account-gallery-pill-bg-shift 4s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(200, 149, 72, 0.55);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
}
.account-gallery-upgrade-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(200, 149, 72, 0.65);
}
.account-gallery-upgrade-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: -120% 50%;
  animation: account-gallery-pill-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
.account-gallery-upgrade-pill > * { position: relative; z-index: 1; }
.account-gallery-upgrade-pill__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.account-gallery-upgrade-pill:hover .account-gallery-upgrade-pill__star {
  transform: scale(1.15) rotate(12deg);
}
.account-gallery-upgrade-pill__text {
  display: inline-block;
  color: #fff;
}

/* Centered upgrade CTA repeated under the photo grid (free users below the
   cap). The top gold pill scrolls out of view, so this keeps the path to
   Premium reachable after the user scrolls down through their photos. */
.account-gallery-cta-bottom {
  margin-top: 1.75rem;
  text-align: center;
}

@media (max-width: 980px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-upgrade { flex-direction: column; align-items: stretch; text-align: center; }
  .gallery-upgrade__icon { margin: 0 auto; }
  /* On narrow screens drop the pill to a second line under the usage text. */
  .account-gallery-upgrade-pill { align-self: flex-start; }
}
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   PROFILE · MY PLAN
   ============================================================ */
.plan-current { display: flex; flex-direction: column; gap: 1.5rem; }
.plan-current__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
}
.plan-current__badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 0.25rem 0.65rem;
  background: var(--color-bg-light);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  margin-bottom: 0.6rem;
}
.plan-current__badge.is-premium {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.plan-current__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 0.25rem; }
.plan-current__sub { font-size: 0.9rem; color: var(--color-text-muted); max-width: 480px; }

.plan-usage {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
}
.plan-usage__row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.45rem;
}
.plan-usage__label { font-size: 0.85rem; color: var(--color-text-muted); }
.plan-usage__value { font-size: 0.95rem; }
.plan-usage__value strong { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text-dark); }
.plan-usage__bar {
  height: 8px; background: rgba(96,80,176,0.12);
  border-radius: var(--radius-pill); overflow: hidden;
  margin-bottom: 0.65rem;
}
.plan-usage__bar-fill {
  height: 100%; background: var(--gradient-primary);
  transition: width 0.3s var(--ease-standard);
}
.plan-usage__meta {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--color-text-muted);
}
.plan-usage__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.plan-usage__meta svg { color: var(--color-primary); }

/* Upgrade card — split layout */
.plan-upgrade-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(96,80,176,0.18);
  background: linear-gradient(135deg, rgba(196,184,255,0.10) 0%, var(--color-bg-white) 60%);
}
.plan-upgrade-card__inner {
  display: grid;
  grid-template-columns: 1fr 320px;
}
.plan-upgrade-card__main { padding: 2rem 2.25rem; }
.plan-upgrade-card__eyebrow {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 0.3rem 0.7rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}
.plan-upgrade-card__main h2 {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 0.4rem;
}
.plan-upgrade-card__sub {
  font-size: 0.95rem; color: var(--color-text-muted);
  max-width: 480px;
  margin-bottom: 1.5rem;
  line-height: 1.55;
}

.plan-features {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1.5rem;
}
.plan-features li {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.88rem; color: var(--color-text-dark);
  line-height: 1.4;
}
.plan-features__check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.plan-upgrade-card__pricing {
  background: var(--color-bg-white);
  border-left: 1px solid var(--color-border);
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column; gap: 1rem;
}

.plan-billing-toggle {
  display: flex;
  background: var(--color-bg-light);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.plan-billing-toggle__btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.5rem 0.5rem;
  border: none; background: transparent;
  border-radius: var(--radius-pill);
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.18s var(--ease-standard);
}
.plan-billing-toggle__btn.is-active {
  background: var(--color-bg-white);
  color: var(--color-text-dark);
  box-shadow: var(--shadow-sm);
}
.plan-billing-toggle__save {
  font-size: 0.65rem; font-weight: 700;
  padding: 0.1rem 0.4rem;
  background: rgba(16,185,129,0.18);
  color: var(--color-success);
  border-radius: var(--radius-pill);
}

.plan-price {
  text-align: center;
  padding: 0.5rem 0 0.25rem;
}
.plan-price__main {
  display: inline-flex; align-items: baseline; gap: 0.15rem;
  color: var(--color-text-dark);
}
.plan-price__currency { font-size: 1.25rem; font-weight: 700; }
.plan-price__amount {
  font-size: 3rem; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
}
.plan-price__unit { font-size: 0.9rem; color: var(--color-text-muted); margin-left: 0.2rem; }
.plan-price__sub {
  font-size: 0.78rem; color: var(--color-text-muted);
  margin-top: 0.4rem;
}

.plan-upgrade-card__cta {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
}
.plan-upgrade-card__guarantee {
  font-size: 0.74rem; color: var(--color-text-muted);
  text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
}
.plan-upgrade-card__guarantee svg { color: var(--color-success); }

/* Payment method */
.plan-payment {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  background: var(--color-bg-light);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
}
.plan-payment__card { display: flex; align-items: center; gap: 1rem; }
.plan-payment__brand {
  background: linear-gradient(135deg, #1a1f71, #2c388a);
  color: #fff;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 1px;
  font-family: ui-monospace, monospace;
}
.plan-payment__num { font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; font-family: ui-monospace, monospace; }
.plan-payment__sub { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.2rem; }

@media (max-width: 980px) {
  .plan-upgrade-card__inner { grid-template-columns: 1fr; }
  .plan-upgrade-card__main { padding: 1.5rem 1.25rem; }
  .plan-upgrade-card__pricing { border-left: none; border-top: 1px solid var(--color-border); padding: 1.5rem 1.25rem; }
  .plan-features { grid-template-columns: 1fr; }
  .plan-payment { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Reminders page — B5
   ============================================================
   Builds on top of the existing .account-reminders-* primitives
   (highlight strip, calendar row, .acc-switch toggle). New additions:
     - .account-reminders-list-card        grouped month list wrapper
     - .account-reminders-group            month bucket
     - .account-reminders-row__action-cluster   row right side: CTA + edit + toggle
     - .account-reminder-toggle            scoped sizing tweak for .acc-switch
     - .account-channel-chip               checkbox chip used in the drawer
     - .account-drawer                     generic side panel — reused
                                            by contacts drawer (B4) when it lands
   ============================================================ */

/* Calendar list — grouping ─────────────────────────────────── */
.account-reminders-list-card { padding-bottom: 0.25rem; }
.account-reminders-list { display: flex; flex-direction: column; gap: 0.5rem; }
.account-reminders-group + .account-reminders-group { margin-top: 0.75rem; }
.account-reminders-group__title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 0 0 0.4rem;
  padding: 0.35rem 0.25rem;
}
.account-reminders-row {
  transition: background 0.15s var(--ease-standard);
  border-radius: var(--radius-sm);
}
.account-reminders-row:hover { background: var(--color-bg-light); }
.account-reminders-row.is-paused { opacity: 0.62; }
.account-reminders-row.is-expired { opacity: 0.45; }
.account-reminders-row.is-expired .account-reminders-row__action,
.account-reminders-row.is-paused  .account-reminders-row__action { pointer-events: none; }
.account-reminders-row__name .badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  margin-left: 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}
.account-reminders-row__name .badge-soft {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.account-reminders-row__name .badge-paused {
  background: rgba(178, 178, 174, 0.22);
  color: var(--color-text-muted);
}
.account-reminders-row__name .badge-expired {
  background: rgba(197, 67, 67, 0.12);
  color: #c54343;
}
.account-reminders-row__action-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.account-reminder-toggle { transform: scale(0.86); transform-origin: right center; }

/* Inline icon button reused by the row's Edit affordance. */
.btn-icon-text {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-icon-text:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}

/* ── Slide-in drawer (shared with future contacts drawer) ──── */
/* Phase 6.10.2 B — `.account-drawer` was a right-side slide-in; it's now a
   CENTERED MODAL matching the Cloud Design export (Contact + Reminder modals).
   Only contacts/drawer.php + reminders/drawer.php use these classes, so the
   conversion is self-contained. Mobile (≤480px) becomes a bottom-sheet below. */
.account-drawer {
  position: fixed; inset: 0;
  z-index: 1500;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.account-drawer.is-open { pointer-events: auto; }
.account-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 10, 30, 0.5);
  opacity: 0;
  transition: opacity 0.25s var(--ease-standard);
}
.account-drawer.is-open .account-drawer__backdrop { opacity: 1; }
.account-drawer__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh;
  background: var(--color-bg-white);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 24px 60px rgba(15, 10, 30, 0.2);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(14px) scale(0.985);
  opacity: 0;
  transition: transform 0.28s var(--ease-standard), opacity 0.2s var(--ease-standard);
}
.account-drawer.is-open .account-drawer__panel { transform: none; opacity: 1; }
/* Drag handle — only visible on the mobile bottom-sheet variant. */
.account-drawer__handle { display: none; }
.account-drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1.4rem 1.5rem 1rem;
  flex-shrink: 0;
}
.account-drawer__eyebrow {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.account-drawer__head h2 {
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text-dark);
}
.account-drawer__close {
  background: transparent;
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.account-drawer__close:hover { background: var(--color-bg-light); color: var(--color-text-dark); }
.account-drawer__body {
  padding: 0.25rem 1.5rem 0.5rem;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 1.05rem;
}
.account-drawer__foot {
  padding: 1rem 1.5rem 1.4rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-white);
  display: flex; align-items: center; gap: 0.5rem;
  flex-shrink: 0;
}
.account-drawer__foot-spacer { flex: 1; }
.account-drawer__group-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}
.account-drawer__radio-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.account-drawer__radio {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, border-color 0.15s;
}
.account-drawer__radio:hover { background: var(--color-bg-light); }
.account-drawer__radio input { accent-color: var(--color-primary); }
.account-drawer__radio:has(input:checked) {
  background: var(--color-primary-light);
  border-color: var(--color-primary-lilac);
  color: var(--color-primary);
  font-weight: 600;
}
.account-drawer__toggle-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  cursor: pointer;
  margin-top: 0.4rem;
}
.account-drawer__toggle-link input { accent-color: var(--color-primary); }

/* ── Channel chips (drawer) ─────────────────────────────────── */
.account-reminders-channels {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.account-channel-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.85rem;
  background: var(--color-bg-white);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.account-channel-chip input {
  position: absolute;
  opacity: 0; pointer-events: none;
  width: 0; height: 0;
}
.account-channel-chip:hover { background: var(--color-bg-light); }
.account-channel-chip:has(input:checked) {
  background: var(--color-primary-light);
  border-color: var(--color-primary-lilac);
  color: var(--color-primary);
  font-weight: 600;
}
.account-channel-chip__icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: currentColor;
  opacity: 0.85;
}
.account-channel-chip__hint {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  padding-left: 0.25rem;
  border-left: 1px solid var(--color-border);
  margin-left: 0.25rem;
}
.account-channel-chip__hint a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.account-channel-chip__hint a:hover { text-decoration: underline; }
.account-channel-chip.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.account-channel-chip.is-disabled:hover { background: var(--color-bg-white); }

/* ════════════════════════════════════════════════════════════════
   Phase 6.10.2 B — Contact + Reminder MODAL field design
   Ported from the Cloud Design export. Scoped to .account-drawer so
   it only affects the two modals.
   ════════════════════════════════════════════════════════════════ */

/* Uppercase muted field labels. */
.account-drawer .account-form-row > label,
.account-drawer__group-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
  display: block;
}
.account-drawer .account-form-row.is-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.account-drawer .account-form-row.is-split > div { display: flex; flex-direction: column; }
.account-contact-required { color: var(--color-danger, #c54343); }

/* Inputs / selects inside the modal. */
.account-drawer .account-input,
.account-drawer .account-select {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 0.85rem;
  font-size: 0.92rem;
  color: var(--color-text-dark);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input, 12px);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.account-drawer textarea.account-input { height: auto; min-height: 76px; padding: 0.7rem 0.85rem; line-height: 1.4; }
.account-drawer .account-input:focus,
.account-drawer .account-select:focus {
  outline: none;
  border-color: var(--color-primary-lilac, #c4b8ff);
  box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.15);
}

/* Icon-prefixed field wrap (name / email / date). */
.account-field-icon { position: relative; }
.account-field-icon > svg {
  position: absolute; inset-inline-start: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--color-text-muted); pointer-events: none;
}
.account-field-icon .account-input { padding-inline-start: 2.3rem; }

/* Phone with country prefix. */
.account-phone-field {
  display: flex; align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input, 12px);
  overflow: hidden;
  background: var(--color-bg-white);
}
.account-phone-field:focus-within { border-color: var(--color-primary-lilac, #c4b8ff); box-shadow: 0 0 0 3px rgba(96,80,176,0.15); }
.account-phone-field__prefix {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0 0.7rem; background: var(--color-bg-light);
  border: 0; border-inline-end: 1px solid var(--color-border);
  font-size: 0.88rem; color: var(--color-text-dark); cursor: pointer; white-space: nowrap;
}
.account-phone-field .account-input {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; flex: 1 1 auto;
}

/* Photo field — 88×88 thumb + Choose/Change button + hint. */
.account-photo-field { display: flex; align-items: center; gap: 0.9rem; }
.account-photo-field__preview {
  position: relative;
  width: 88px; height: 88px; flex: 0 0 auto;
  border-radius: var(--radius-input, 12px);
  background: var(--color-bg-light);
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--color-text-muted);
}
.account-photo-field__preview.is-empty { border: 1px dashed var(--color-border); }
.account-photo-field__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-photo-field__remove {
  position: absolute; top: 4px; inset-inline-end: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; border: 0;
  font-size: 1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; z-index: 2;
}
.account-photo-field__body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.account-photo-field__btn {
  align-self: flex-start;
  padding: 0.5rem 1rem;
  font-size: 0.85rem; font-weight: 600;
  color: var(--color-text-dark);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.account-photo-field__btn:hover { background: var(--color-bg-light); }
.account-photo-field__hint { font-size: 0.74rem; color: var(--color-text-muted); }

/* intl-tel-input wrapper inside the contact modal — full width. */
.account-drawer .iti { display: block; width: 100%; }

/* Phase 6.10.2 B — air-datepicker + intl-tel-input dropdowns must float ABOVE
   the contact/reminder modal (.account-drawer z-1500). Defaults are far lower
   (air-datepicker 100), so they'd render behind the modal panel. */
.air-datepicker { --adp-z-index: 1700; z-index: 1700; }
.air-datepicker--navigation { z-index: 1700; }
.air-datepicker-overlay { --adp-overlay-z-index: 1690; z-index: 1690; }
/* Body-appended dropdown wrapper must float above everything (incl. the
   inline generator on /account/create/). Matches generator-v2-delivery.css. */
.iti__dropdown, .iti--container { z-index: 1000200; }

/* Segmented control (REPEAT). */
.account-segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--color-bg-light);
  border-radius: var(--radius-pill);
  padding: 4px; gap: 4px;
}
.account-segmented label {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem; font-weight: 600;
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.account-segmented label input { position: absolute; opacity: 0; pointer-events: none; }
.account-segmented label:has(input:checked) {
  background: var(--gradient-primary, linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%));
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(96,80,176,0.6);
}

/* Stepper (REMIND ME). */
.account-stepper {
  display: flex; flex-direction: row; align-items: stretch;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input, 12px);
  overflow: hidden;
  background: var(--color-bg-white);
}
.account-stepper__btn {
  width: 42px; flex: 0 0 auto;
  background: var(--color-bg-light); border: 0;
  font-size: 1.2rem; line-height: 1; color: var(--color-text-dark); cursor: pointer;
  display: grid; place-items: center;
}
.account-stepper__btn:hover { background: var(--color-border); }
.account-stepper__value {
  flex: 1 1 auto; text-align: center;
  font-size: 0.88rem; color: var(--color-text-dark); white-space: nowrap;
}
.account-stepper input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* Notify-via chips. */
.account-notify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.account-notify-chip {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input, 12px);
  background: var(--color-bg-white);
  cursor: pointer; font-size: 0.9rem; user-select: none;
}
.account-notify-chip input { accent-color: var(--color-primary); width: 16px; height: 16px; }
.account-notify-chip__icon { display: inline-flex; color: var(--color-text-muted); }
.account-notify-chip:has(input:checked) {
  border-color: var(--color-primary-lilac, #c4b8ff);
  background: var(--color-primary-light, rgba(96,80,176,0.08));
}
.account-notify-chip:has(input:checked) .account-notify-chip__icon { color: var(--color-primary); }

/* Contact-picker "enter a name manually" — real visible checkbox. */
.account-drawer__manual-check {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--color-text-muted);
  cursor: pointer; margin-top: 0.55rem; user-select: none;
  align-self: flex-start;
}
.account-drawer__manual-check input {
  accent-color: var(--color-primary);
  width: 16px; height: 16px; margin: 0; cursor: pointer;
}

/* Summary line above the footer. */
.account-drawer__summary {
  font-size: 0.8rem; color: var(--color-text-muted);
  text-align: center; padding: 0.2rem 1.5rem 0;
}

/* Footer red text delete on the left. */
.account-drawer__foot .btn-danger-text {
  background: 0; border: 0; color: var(--color-danger, #c54343);
  font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 0.4rem 0;
}
.account-drawer__foot .btn-danger-text:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .account-reminders-row {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    row-gap: 0.5rem;
  }
  .account-reminders-row__action-cluster {
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 0.4rem;
  }
}

/* Mobile bottom-sheet (≤480px). */
@media (max-width: 480px) {
  .account-drawer { align-items: flex-end; padding: 0; }
  .account-drawer__panel {
    width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .account-drawer.is-open .account-drawer__panel { transform: none; }
  .account-drawer__handle {
    display: block; width: 40px; height: 4px; border-radius: 2px;
    background: var(--color-border); margin: 0.6rem auto 0;
  }
  .account-drawer__foot { flex-direction: column-reverse; align-items: stretch; }
  .account-drawer__foot .btn { width: 100%; justify-content: center; }
  .account-drawer__foot .btn-danger-text { text-align: center; }
  .account-drawer__foot-spacer { display: none; }
  .account-drawer .account-form-row.is-split { grid-template-columns: 1fr; }
}


/* ============================================================
   Contacts page — B4
   ============================================================
   /account/contacts/ — saved-recipients grid + slide-in Create/Edit
   drawer. Lives at the very bottom of account.css so it's easy to
   carve into its own file later if the page grows past the 400-LOC
   self-containment ceiling.
   ------------------------------------------------------------ */

/* ── Toolbar (stats + search + filter pills) ───────────────── */
.account-contacts-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.account-contacts-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.account-contacts-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.account-contacts-stat strong {
  color: var(--color-text-dark);
  font-size: 1rem;
  font-weight: 700;
}
.account-contacts-stat--accent {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.account-contacts-stat--accent strong { color: var(--color-primary); }

.account-contacts-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.account-contacts-search {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
}
.account-contacts-search__icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.account-contacts-search__input {
  padding-left: 2.4rem;
}
.account-contacts-filters {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}
.account-contacts-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  text-transform: capitalize;
  transition: all 0.15s var(--ease-standard);
}
.account-contacts-filter:hover {
  border-color: var(--color-primary);
  color: var(--color-text-dark);
}
.account-contacts-filter.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.account-contacts-filter__count {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.05rem 0.4rem;
  background: rgba(0,0,0,0.06);
  border-radius: var(--radius-pill);
  color: inherit;
}
.account-contacts-filter.is-active .account-contacts-filter__count {
  background: rgba(255,255,255,0.22);
}

/* ── Phase 6.8 H — Filter dropdown (matches /account/wishes/ pattern) ──
 * Lives inside .account-contacts-controls next to the search input.
 * Click the trigger to flip .is-open on the wrap, panel slides in. Same
 * .filter-dropdown-toggle / .filter-pills selectors as wishes-v2.css —
 * but scoped to the contacts page so the two stylesheets don't conflict
 * if both load on the same template. */
.account-contacts-filter-wrap {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}
.account-contacts-filter-wrap .filter-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-white);
  color: var(--color-text-dark);
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.account-contacts-filter-wrap .filter-dropdown-toggle:hover,
.account-contacts-filter-wrap.is-open .filter-dropdown-toggle {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.account-contacts-filter-wrap .filter-pills {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-width: calc(100vw - 2rem);
  z-index: 20;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.25rem;
  padding: 0.5rem;
  margin: 0;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 60vh;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.account-contacts-filter-wrap.is-open .filter-pills {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.account-contacts-filter-wrap .filter-pills .pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
  width: 100%;
  padding: 0.45rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-primary);
  font-weight: 500;
  transition: all 0.15s var(--ease-standard);
}
.account-contacts-filter-wrap .filter-pills .pill:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.account-contacts-filter-wrap .filter-pills .pill.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
/* Hide the count number (keep markup so future restore is one line). */
.account-contacts-filter-wrap .filter-pills .pill .pill-count { display: none; }

/* RTL: flip the panel anchor edge. */
[dir="rtl"] .account-contacts-filter-wrap .filter-pills { right: auto; left: 0; }

/* ── Grid of cards ─────────────────────────────────────────── */
.account-contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.account-contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.1rem;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s var(--ease-standard);
}
.account-contact-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.account-contact-card__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.account-contact-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--gradient-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.account-contact-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-contact-card__initials {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.account-contact-card__title {
  min-width: 0;
  flex: 1;
}
.account-contact-card__name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-dark);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-contact-card__handle {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0.1rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
}

.account-contact-card__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.account-contact-card__chip {
  /* Phase 6.8 I — Width was fixed at 28px so phone/email text spilled out
   * of the chip. Now the chip auto-sizes to its content with a minimum
   * footprint, has internal padding so labels breathe, and a small gap
   * between any icon + the text inside it. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 28px;
  height: 28px;
  padding: 0 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
}

/* Phase 6.7 L — kebab is absolutely positioned at the card's top-right;
 * Send-wish spans the full card width on its own row. */
.account-contact-card { position: relative; }
.account-contact-card__actions {
  display: block;
  margin-top: auto;
  padding-top: 0.4rem;
}
.account-contact-card__cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  text-align: center;
  white-space: nowrap;
}

.account-contact-card__menu {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.account-contact-card__menu-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s var(--ease-standard);
}
.account-contact-card__menu-btn:hover {
  color: var(--color-text-dark);
  border-color: var(--color-primary);
}
.account-contact-card__menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, 0 12px 30px rgba(0,0,0,0.08));
  padding: 0.35rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: all 0.15s var(--ease-standard);
  z-index: 50;
}
.account-contact-card__menu.is-open .account-contact-card__menu-list {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.account-contact-card__menu-list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border: none;
  background: transparent;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-text-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.account-contact-card__menu-list button:hover {
  background: var(--color-bg-light);
}
.account-contact-card__menu-list button.is-danger { color: #c54343; }
.account-contact-card__menu-list button.is-danger:hover { background: #fdecec; }

/* The slide-in drawer itself is already styled by the .account-drawer*
   block higher up (originally created for /account/reminders/). We reuse
   that .account-drawer__panel / __head / __body / __foot CSS verbatim
   — only the small contacts-specific tweak below is needed.

   Drawer z-index lives at 1500 from the reminders block; sits above
   .account-shell (no z-index) but below toast (1500+). The upsell-modal
   has z-index 1400, so an open drawer covers it — fine, because the
   poetic-tone upsell triggered FROM inside the drawer needs to render
   above the drawer panel itself. Bump it via [data-contact-drawer]
   .modal-overlay {} below if we add nested modals later. */

.account-contact-required {
  color: var(--color-primary);
  font-weight: 700;
  margin-left: 0.15rem;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .account-contacts-grid {
    grid-template-columns: 1fr;
  }
  .account-contacts-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .account-contacts-search {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* RTL support. Phase 6.10.2 B — the drawer is now a centered modal, so the
   old slide-in transform flip is gone; centering is direction-agnostic. */
[dir="rtl"] .account-contact-card__menu-list { right: auto; left: 0; }
[dir="rtl"] .account-contacts-search__icon { left: auto; right: 0.85rem; }
[dir="rtl"] .account-contacts-search__input { padding-left: 0.9rem; padding-right: 2.4rem; }

/* ============================================================
   Bonuses page — B3
   /account/bonuses/ — hero balance, 2-column ledger + earn-more.
   All rules are scoped under .account-bonus-* / .account-bonus-grid
   so they don't leak into other account pages.
   ============================================================ */

/* Hero card — big balance number + caption + action buttons. The card
   keeps the .account-card chrome but overrides the head/body layout so
   the balance number can really breathe. */
.account-bonus-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  background: linear-gradient(135deg, rgba(96, 80, 176, 0.06) 0%, rgba(196, 184, 255, 0.10) 100%);
}
.account-bonus-hero__main { min-width: 0; }
.account-bonus-hero__balance {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  line-height: 1;
}
.account-bonus-hero__icon {
  font-size: 2rem;
  line-height: 1;
}
.account-bonus-hero__num {
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.account-bonus-hero__caption {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0.4rem 0 0;
  text-transform: lowercase;
  letter-spacing: 0.01em;
}
.account-bonus-hero__reset {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0.6rem 0 0;
}
.account-bonus-hero__reset strong { color: var(--color-text-dark); font-weight: 600; }
.account-bonus-hero__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.account-bonus-hero__actions .btn { gap: 0.4rem; }

/* 2-column body: ledger left, earn-more right. Collapses below 980px. */
.account-bonus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* Ledger card */
.account-bonus-ledger { margin-bottom: 0; }
.account-bonus-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}
.account-bonus-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  background: rgba(178, 178, 174, 0.14);
  color: var(--color-text-muted);
}
.account-bonus-badge strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.account-bonus-badge.is-credit { background: rgba(16, 185, 129, 0.12); color: var(--color-success); }
.account-bonus-badge.is-debit  { background: rgba(197, 67, 67, 0.10); color: #b53939; }

.account-bonus-rows {
  display: flex;
  flex-direction: column;
}
.account-bonus-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-border);
}
.account-bonus-row:last-child { border-bottom: none; }
.account-bonus-row__date {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.account-bonus-row__body { min-width: 0; }
.account-bonus-row__label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-dark);
  letter-spacing: -0.005em;
}
.account-bonus-row__ref {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.account-bonus-row__ref:hover { color: var(--color-primary); text-decoration: underline; }
.account-bonus-row__amount {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.account-bonus-row__amount.is-credit { color: var(--color-success); }
.account-bonus-row__amount.is-debit  { color: #b53939; }

.account-bonus-ledger__foot {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

/* Earn-more sidebar (sticks to the top of its column on desktop) */
.account-bonus-earn { position: sticky; top: calc(var(--header-h, 64px) + 1rem); }
.account-bonus-earn__card { margin-bottom: 0; }

.account-bonus-earn-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 0.9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}
.account-bonus-earn-item:last-of-type { border-bottom: none; }
.account-bonus-earn-item__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(96, 80, 176, 0.10);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.account-bonus-earn-item__body { min-width: 0; }
.account-bonus-earn-item__body h4 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.2rem;
}
.account-bonus-earn-item__body p {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 0.5rem;
}
.account-bonus-earn-item__cta {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.account-bonus-earn-item__cta:hover { text-decoration: underline; }
.account-bonus-earn-item__reward {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-success);
  background: rgba(16, 185, 129, 0.12);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Invite input + Copy button cluster inside the earn-more card. */
.account-bonus-invite {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
}
.account-bonus-invite .account-input {
  font-size: 0.82rem;
  padding: 0.5rem 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.account-bonus-invite .btn { padding: 0.5rem 0.85rem; font-size: 0.82rem; white-space: nowrap; }

/* Premium-upgrade row — full-bleed gradient CTA at the bottom of the card.
   Phase 6.9 — premium plan not launched yet; hidden via the `display:none`
   below. Revert by switching it back to `display: grid`. */
.account-bonus-earn-premium {
  display: none;
  grid-template-columns: 36px 1fr auto;
  gap: 0.9rem;
  align-items: center;
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  background: linear-gradient(115deg, #b48a4a 0%, #f0c878 25%, #c89548 50%, #f5d99a 75%, #b48a4a 100%);
  background-size: 200% 100%;
  animation: btn-premium-shift 4s ease-in-out infinite;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-primary);
  transition: transform 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
}
.account-bonus-earn-premium:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary-hover);
  color: #fff;
}
.account-bonus-earn-premium__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.account-bonus-earn-premium__body h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.15rem;
  color: #fff;
}
.account-bonus-earn-premium__body p {
  font-size: 0.8rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
}
.account-bonus-earn-premium__cta {
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.18);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .account-bonus-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .account-bonus-hero__actions { justify-content: flex-start; }
  .account-bonus-hero__num { font-size: 2.6rem; }
  .account-bonus-grid { grid-template-columns: 1fr; }
  .account-bonus-earn { position: static; top: auto; }
}

@media (max-width: 560px) {
  .account-bonus-row { grid-template-columns: 52px 1fr auto; gap: 0.7rem; }
  .account-bonus-invite { grid-template-columns: 1fr; }
  .account-bonus-invite .btn { width: 100%; }
}

/* ============================================================
   Delivery page — B2
   Builds on the .account-delivery-* primitives already defined
   under "DELIVERY HISTORY" higher up. Adds:
     • day-bucket headers between rows,
     • two filter rows stacked vertically,
     • cancel-button styling (text variant + danger hover),
     • a placeholder column so non-cancellable rows still align
       with the 4-column grid,
     • load-more wrapper centering,
     • delivery-specific empty-state spacing,
     • a soft loading state for the list during refetches.
   ============================================================ */
/* Phase 6.9.2 — two custom dropdowns on opposite ends. The toggles use
   the `.filter-dropdown-toggle` shell from /account/contacts/; we add a
   couple of overrides + reposition the popover anchors. */
.account-delivery-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.account-delivery-filter {
  position: relative;
  flex: 0 1 auto;
}
.account-delivery-filter .filter-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  color: var(--color-text-dark);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-standard), background 0.15s, box-shadow 0.15s;
}
.account-delivery-filter .filter-dropdown-toggle:hover,
.account-delivery-filter .filter-dropdown-toggle:focus-visible,
.account-delivery-filter .filter-dropdown-toggle[aria-expanded="true"] {
  border-color: rgba(96, 80, 176, 0.45);
  box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.08);
  outline: none;
}
.account-delivery-filter .filter-dropdown-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
}
.account-delivery-filter .filter-dropdown-value {
  font-weight: 600;
  color: var(--color-text-dark);
}
.account-delivery-filter .filter-dropdown-chevron {
  color: var(--color-text-muted);
  transition: transform 0.18s var(--ease-standard);
}
.account-delivery-filter .filter-dropdown-toggle[aria-expanded="true"] .filter-dropdown-chevron {
  transform: rotate(180deg);
}

/* Panel — opens DOWNWARD. Left-aligned for the channel dropdown,
   right-aligned for the status dropdown so neither popover overflows
   the viewport. */
.account-delivery-filter .filter-pills {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  padding: 0.4rem;
  margin: 0;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px -8px rgba(15, 10, 30, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 30;
}
.account-delivery-filter[data-filter-wrap="status"] .filter-pills {
  left: auto;
  right: 0;
}
.account-delivery-filter .filter-pills[hidden] { display: none; }
.account-delivery-filter .filter-pills .pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-dark);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.12s;
}
.account-delivery-filter .filter-pills .pill:hover {
  background: var(--color-bg-light);
}
.account-delivery-filter .filter-pills .pill.is-active {
  background: rgba(96, 80, 176, 0.1);
  color: var(--color-primary);
  font-weight: 600;
}
.account-delivery-filter .filter-pills .pill .pill-count {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  min-width: 22px;
  text-align: center;
  background: rgba(96, 80, 176, 0.1);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
}
.account-delivery-filter .filter-pills .pill.is-active .pill-count {
  background: rgba(96, 80, 176, 0.18);
}

@media (max-width: 480px) {
  .account-delivery-filters { flex-direction: column; align-items: stretch; }
  .account-delivery-filter { width: 100%; }
  .account-delivery-filter .filter-dropdown-toggle { width: 100%; justify-content: space-between; }
  .account-delivery-filter .filter-pills { left: 0; right: 0; min-width: 0; }
}

.account-delivery-wrap { padding: 0.75rem 1rem; }
.account-delivery-wrap .account-delivery-list { width: 100%; }

.account-delivery-day + .account-delivery-day { margin-top: 0.5rem; }
.account-delivery-day__label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px;
  font-weight: 700; color: var(--color-text-muted);
  padding: 0.75rem 0.25rem 0.5rem;
  border-bottom: 1px dashed var(--color-border);
  margin-bottom: 0.25rem;
}

.account-delivery-row a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s, color 0.15s;
}
.account-delivery-row a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.account-delivery-row__cancel {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  color: #c54343;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.account-delivery-row__cancel:hover {
  background: rgba(197, 67, 67, 0.08);
  border-color: rgba(197, 67, 67, 0.18);
}
.account-delivery-row__cancel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(197, 67, 67, 0.18);
}
/* Keeps the 4-column grid stable when a row has no cancel button —
   without this, non-cancellable rows would let the status pill flow
   into the empty 4th column and shift visual alignment. */
.account-delivery-row__cancel-placeholder {
  display: inline-block; width: 1px; height: 1px;
}

.account-delivery-loadmore {
  display: flex; justify-content: center;
  padding: 1.25rem 0 0.25rem;
}
.account-delivery-loadmore[hidden] { display: none; }

.account-delivery-empty { margin: 0.5rem 0; }

.account-delivery-list.is-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s;
}

@media (max-width: 980px) {
  .account-delivery-stats { grid-template-columns: repeat(2, 1fr); }
  .account-delivery-row {
    grid-template-columns: auto 1fr;
    row-gap: 0.5rem;
  }
  .account-delivery-row__time,
  .account-delivery-row .delivery-status,
  .account-delivery-row__cancel {
    grid-column: 2;
    justify-self: start;
  }
  .account-delivery-row__cancel-placeholder { display: none; }
}

/* ─── Email verification — Personal tab pill + banner ──────────────── */

.account-verify-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.55rem;
  padding: 0.18rem 0.55rem 0.18rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
  line-height: 1;
  white-space: nowrap;
}
.account-verify-pill svg { flex: 0 0 12px; }
.account-verify-pill.is-verified {
  color: #0d8a4a;
  background: rgba(16, 185, 129, 0.13);
}
.account-verify-pill.is-unverified {
  color: #b3651a;
  background: rgba(245, 158, 11, 0.14);
}

.account-verify-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(96, 80, 176, 0.05) 100%);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: var(--radius-md);
}
.account-verify-banner__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.16);
  color: #b3651a;
}
.account-verify-banner__body { flex: 1; min-width: 0; }
.account-verify-banner__body h4 {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-dark);
}
.account-verify-banner__body p {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.account-verify-banner__body p strong { color: var(--color-text-dark); }
.account-verify-banner__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.account-verify-banner__btn.is-sent {
  background: #10b981;
  color: #fff;
}
.account-verify-banner__btn[disabled] { opacity: 0.7; cursor: default; }

@media (max-width: 720px) {
  .account-verify-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }
  .account-verify-banner__btn { width: 100%; justify-content: center; }
}

/* ─── /account/verify-email/ landing page (success / expired / invalid) */

.account-verify-page {
  max-width: 540px;
  margin: 4rem auto;
  padding: 3rem 2rem;
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.account-verify-page__icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.account-verify-page__icon.is-success {
  background: rgba(16, 185, 129, 0.15);
  color: #0d8a4a;
}
.account-verify-page__icon.is-success svg {
  width: 44px;
  height: 44px;
  stroke-width: 3;
}
.account-verify-page__icon.is-error {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}
.account-verify-page__icon.is-error svg {
  width: 44px;
  height: 44px;
  stroke-width: 2.4;
}
.account-verify-page__icon.is-info {
  background: rgba(96, 80, 176, 0.12);
  color: #6050b0;
}
.account-verify-page__icon.is-info svg {
  width: 44px;
  height: 44px;
  stroke-width: 2;
}
.account-verify-page h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--color-text-dark);
}
.account-verify-page p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 1.6rem;
}
.account-verify-page p:last-of-type { margin-bottom: 2rem; }
.account-verify-page__actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: center;
}
.account-verify-page__actions .btn { min-width: 220px; }
.account-verify-page__secondary {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.account-verify-page__secondary:hover { color: var(--color-text-dark); }

@media (max-width: 560px) {
  .account-verify-page { margin: 2rem 1rem; padding: 2.2rem 1.3rem; }
  .account-verify-page h1 { font-size: 1.35rem; }
}