/* =============================================================================
   MyApollo v3 — /account shell.
   Sidebar + main panel + bento tiles + bookings list. Pairs with chat-v3.css
   for the messaging section.
   ============================================================================= */

.v3-acct {
  background: var(--bg);
  position: relative;
  min-height: 100dvh;
}
.v3-acct .v3-nav__links a { white-space: nowrap; }

/* ── Layout shell ─────────────────────────────────────────────────────── */
.v3-acct__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: clamp(20px, 3vw, 32px) 0 calc(80px + env(safe-area-inset-bottom, 0px));
}
.v3-acct__shell > * { min-width: 0; }

@media (min-width: 1024px) {
  .v3-acct__shell {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--sp-6);
    padding-bottom: var(--sp-7);
  }
}

/* ── Sidebar (desktop) ────────────────────────────────────────────────── */
.v3-acct__side {
  display: none;
}
@media (min-width: 1024px) {
  .v3-acct__side {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    position: sticky;
    top: calc(var(--nav-h) + var(--sp-4));
    align-self: start;
    padding: var(--sp-4);
    background:
      linear-gradient(180deg, rgba(245,240,230,0.04), rgba(245,240,230,0.01)),
      var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-xl);
    backdrop-filter: blur(14px) saturate(140%);
  }
}
.v3-acct__side-user {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--line);
  margin-bottom: var(--sp-2);
}
.v3-acct__side-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--rose) 100%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #1a1814;
  font: 700 0.95rem/1 var(--font-body);
  flex-shrink: 0;
}
.v3-acct__side-user-info {
  min-width: 0;
}
.v3-acct__side-name {
  font: 600 0.875rem/1.2 var(--font-body);
  color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v3-acct__side-email {
  font: var(--font-body-sm);
  color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.v3-acct__side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  color: var(--ink-dim);
  font: 500 0.9375rem/1 var(--font-body);
  text-decoration: none;
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
  border: 1px solid transparent;
}
.v3-acct__side-link:hover {
  color: var(--ink);
  background: var(--glass-bg);
}
.v3-acct__side-link[aria-current="page"] {
  background: var(--gold-soft);
  border-color: rgba(201, 168, 76, 0.32);
  color: var(--cream);
}
.v3-acct__side-link i {
  width: 18px;
  text-align: center;
  color: var(--gold);
}
.v3-acct__side-link .badge {
  margin-left: auto;
  font: 700 0.6875rem/1 var(--font-body);
  background: var(--gold);
  color: #1a1814;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  min-width: 18px; text-align: center;
}

.v3-acct__side-foot {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* ── Main panel ───────────────────────────────────────────────────────── */
.v3-acct__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.v3-acct__main-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  flex-wrap: wrap;
}
.v3-acct__main-head h1 {
  font: var(--font-display-lg);
  letter-spacing: -0.01em;
}
.v3-acct__main-head .v3-kicker {
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold-soft);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(201, 168, 76, 0.28);
}

/* Sections — only the active one is shown */
.v3-acct__section {
  display: none;
}
.v3-acct__section.is-active {
  display: block;
  animation: v3-acct-fade var(--t-base) var(--ease);
}
@keyframes v3-acct-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-acct__section.is-active { animation: none; }
}

/* ── Dashboard bento ──────────────────────────────────────────────────── */
.v3-acct__bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}
.v3-acct__bento > * { min-width: 0; }
@media (min-width: 600px) {
  .v3-acct__bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .v3-acct__bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .v3-acct__bento > .v3-acct__tile--wide { grid-column: span 2; }
}

.v3-acct__tile {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, rgba(245,240,230,0.04), rgba(245,240,230,0.01)),
    var(--surface-2);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 160px;
  overflow: hidden;
}
.v3-acct__tile--gold {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 168, 76, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(245,240,230,0.04), rgba(245,240,230,0.01)),
    var(--surface-2);
  border-color: rgba(201, 168, 76, 0.32);
}
.v3-acct__tile-head {
  display: flex; align-items: center; gap: 8px;
  font: 700 0.6875rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.v3-acct__tile-head i { font-size: 0.85rem; }
.v3-acct__tile-num {
  font: 700 2.4rem/1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--cream);
}
.v3-acct__tile-num small {
  font: 500 0.8125rem/1 var(--font-body);
  color: var(--ink-dim);
  margin-left: 6px;
}
.v3-acct__tile-sub {
  font: var(--font-body-sm);
  color: var(--ink-dim);
  margin-top: auto;
}
.v3-acct__tile-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 0.8125rem/1 var(--font-body);
  color: var(--gold-light);
  margin-top: 4px;
  cursor: pointer;
  text-decoration: none;
}
.v3-acct__tile-cta:hover { color: var(--cream); }

/* ── Bookings list ────────────────────────────────────────────────────── */
.v3-acct__bookings {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.v3-acct__bookings-empty {
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  color: var(--ink-dim);
}
.v3-acct__bookings-empty i {
  font-size: 2.4rem;
  color: var(--gold-soft);
  margin-bottom: var(--sp-3);
  display: inline-block;
}
.v3-acct__booking {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(245,240,230,0.04), rgba(245,240,230,0.01)),
    var(--surface-2);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(10px);
}
.v3-acct__booking-thumb {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--gold) 0%, var(--rose) 100%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #1a1814;
  font: 700 1rem/1 var(--font-body);
  flex-shrink: 0;
}
.v3-acct__booking-meta {
  min-width: 0;
}
.v3-acct__booking-id {
  font: var(--font-mono-sm);
  color: var(--gold-light);
  letter-spacing: 0.02em;
}
.v3-acct__booking-line {
  font: 600 0.9375rem/1.2 var(--font-body);
  color: var(--cream);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v3-acct__booking-line span { color: var(--ink-dim); font-weight: 400; }
.v3-acct__booking-actions {
  display: flex; gap: 6px;
  flex-shrink: 0;
}

.v3-acct__booking-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v3-acct__booking-status--paid    { background: rgba(78,194,123,0.12); color: #6fae6f; border: 1px solid rgba(78,194,123,0.28); }
.v3-acct__booking-status--pending { background: rgba(214,168,79,0.12); color: var(--gold); border: 1px solid rgba(214,168,79,0.28); }
.v3-acct__booking-status--cancelled { background: rgba(201,108,108,0.12); color: var(--err); border: 1px solid rgba(201,108,108,0.28); }
.v3-acct__booking-status--confirmed { background: rgba(78,194,123,0.12); color: #6fae6f; border: 1px solid rgba(78,194,123,0.28); }

/* ── Profile section ──────────────────────────────────────────────────── */
.v3-acct__profile {
  max-width: 560px;
  background:
    linear-gradient(180deg, rgba(245,240,230,0.04), rgba(245,240,230,0.01)),
    var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  backdrop-filter: blur(14px) saturate(140%);
  display: flex; flex-direction: column;
  gap: var(--sp-4);
}
.v3-acct__profile-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.v3-acct__profile-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--rose) 100%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #1a1814;
  font: 700 1.2rem/1 var(--font-body);
  flex-shrink: 0;
}

/* ── Mobile bottom nav ────────────────────────────────────────────────── */
.v3-acct__mobnav {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  background: color-mix(in oklab, var(--surface-2) 92%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid var(--line-2);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 800;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.32);
}
@media (min-width: 1024px) {
  .v3-acct__mobnav { display: none; }
}
.v3-acct__mobnav-link {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 4px;
  font: 600 0.625rem/1 var(--font-body);
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
  position: relative;
}
.v3-acct__mobnav-link i { font-size: 1.1rem; color: var(--ink-dim); }
.v3-acct__mobnav-link[aria-current="page"] { color: var(--gold); }
.v3-acct__mobnav-link[aria-current="page"] i { color: var(--gold); }
.v3-acct__mobnav-badge {
  position: absolute;
  top: 4px; right: 28%;
  background: var(--gold);
  color: #1a1814;
  font: 700 0.625rem/1 var(--font-body);
  padding: 2px 5px;
  border-radius: var(--r-pill);
  min-width: 14px; text-align: center;
}

/* Auth-gated overlay (signed-out state) */
.v3-acct__gate {
  margin: var(--sp-7) auto;
  max-width: 480px;
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 168, 76, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(245,240,230,0.04), rgba(245,240,230,0.01)),
    var(--surface-2);
  border: 1px solid rgba(201, 168, 76, 0.32);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-card);
}
.v3-acct__gate i { font-size: 2.4rem; color: var(--gold); margin-bottom: var(--sp-3); display: inline-block; }
.v3-acct__gate h2 { font: var(--font-display-lg); margin-bottom: var(--sp-2); }
.v3-acct__gate p { color: var(--ink-dim); margin-bottom: var(--sp-4); }

/* When signed-out, hide app shell; when signed-in, hide gate */
.v3-acct[data-auth="signed-in"] .v3-acct__gate,
.v3-acct[data-auth="signed-in"] [data-show-when="signed-out"],
.v3-acct[data-auth="signed-out"] .v3-acct__shell,
.v3-acct[data-auth="signed-out"] .v3-acct__mobnav,
.v3-acct[data-auth="signed-out"] [data-show-when="signed-in"] {
  display: none;
}

/* ═══════════════════════════════════════════════════════ */
/*  USER-TYPE BANNER + APOLLO PORTAL (v3)                  */
/* ═══════════════════════════════════════════════════════ */
.utb-v3{
  display:flex;align-items:center;gap:14px;
  padding:1rem 1.2rem;margin:1.4rem 0 1rem;
  background:rgba(15,14,12,.55);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.utb-v3.is-apollo{
  border-color:rgba(201,168,76,.45);
  background:linear-gradient(180deg,rgba(201,168,76,.10),rgba(15,14,12,.55));
}
.utb-v3__icon{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.55);font-size:1rem;flex-shrink:0;
}
.utb-v3.is-apollo .utb-v3__icon{
  background:rgba(201,168,76,.18);border-color:rgba(201,168,76,.45);
  color:var(--gold-light,#e4cc7a);
}
.utb-v3__body{flex:1;min-width:0;}
.utb-v3__label{
  font-family:var(--font-display,Cormorant Garamond,serif);
  font-size:1.15rem;font-weight:600;letter-spacing:-.01em;
}
.utb-v3.is-apollo .utb-v3__label{color:var(--gold-light,#e4cc7a);}
.utb-v3__desc{
  font-size:.84rem;color:rgba(255,255,255,.6);
  line-height:1.5;margin-top:.2rem;
}
.utb-v3__action{flex-shrink:0;}
.utb-v3__action .v3-btn{padding:.55rem 1rem;font-size:.74rem;}

.apollo-v3-base{
  padding:1.4rem;background:rgba(15,14,12,.55);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;
  margin-bottom:1.2rem;
}

.apollo-v3-portal{
  padding:1.6rem;
  background:linear-gradient(180deg,rgba(201,168,76,.04),rgba(15,14,12,.55));
  border:1px solid rgba(201,168,76,.30);border-radius:20px;
  backdrop-filter:blur(14px);
}
.apollo-v3-portal[hidden]{display:none;}
.apollo-v3-portal__head{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin-bottom:.7rem;
}
.apollo-v3-portal__tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:#0a0a08;background:var(--gold,#c9a84c);
  padding:.35rem .8rem;border-radius:99px;
}
.apollo-v3-portal__status{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;color:rgba(255,255,255,.65);
}
.apollo-v3-pill{
  padding:.25rem .7rem;border-radius:99px;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(201,168,76,.12);color:var(--gold,#c9a84c);
  border:1px solid rgba(201,168,76,.30);
}
.apollo-v3-pill.is-pending_review{
  background:rgba(184,92,92,.10);color:#d68585;border-color:rgba(184,92,92,.30);
}
.apollo-v3-pill.is-published{
  background:rgba(127,176,105,.12);color:#a3c485;border-color:rgba(127,176,105,.40);
}
.apollo-v3-pill.is-archived{
  background:rgba(120,120,110,.10);color:rgba(255,255,255,.55);border-color:rgba(120,120,110,.30);
}

.apollo-v3-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;
}
@media (max-width:760px){.apollo-v3-grid{grid-template-columns:1fr;}}

.apollo-v3-card{
  padding:1.3rem;background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);border-radius:14px;
}
.apollo-v3-card h3{
  font-size:1.05rem;margin:0 0 .9rem;
  display:flex;align-items:center;gap:8px;
  color:var(--gold-light,#e4cc7a);
}
.apollo-v3-card h3 i{font-size:.85rem;}

.apollo-v3-row{margin-bottom:1rem;}
.apollo-v3-row:last-child{margin-bottom:0;}
.apollo-v3-label{
  display:block;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.65);margin-bottom:.4rem;
}
.apollo-v3-hint{
  font-size:.7rem;color:rgba(255,255,255,.4);
  margin-top:.4rem;font-weight:400;text-transform:none;letter-spacing:0;
}
.apollo-v3-label .apollo-v3-hint{
  margin-top:0;display:inline;opacity:.7;
}
.apollo-v3-input{
  width:100%;padding:.75rem 1rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.10);background:rgba(10,9,7,.5);
  color:rgba(255,255,255,.95);font-size:.88rem;
  font-family:var(--font-body,DM Sans,sans-serif);outline:none;
  transition:border-color .25s,box-shadow .25s;
}
.apollo-v3-input:focus{
  border-color:var(--gold,#c9a84c);
  box-shadow:0 0 0 3px rgba(201,168,76,.10);
}
.apollo-v3-input::placeholder{color:rgba(255,255,255,.3);}
textarea.apollo-v3-input{min-height:100px;resize:vertical;line-height:1.6;}

#v3-slug-preview{color:var(--gold-light,#e4cc7a);font-style:normal;font-weight:600;}

.apollo-v3-areas{display:flex;flex-wrap:wrap;gap:6px;}
.apollo-v3-area{
  padding:.4rem .85rem;border-radius:99px;
  border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.55);
  font-size:.78rem;font-weight:500;cursor:pointer;
  transition:all .2s ease;font-family:var(--font-body,DM Sans,sans-serif);
}
.apollo-v3-area:hover{
  border-color:var(--gold,#c9a84c);color:var(--gold-light,#e4cc7a);
}
.apollo-v3-area.is-picked{
  background:rgba(201,168,76,.14);
  border-color:var(--gold,#c9a84c);color:var(--gold-light,#e4cc7a);
}

/* ── Tabbed flow inside the Apollo Portal ─────────────────────────────
   Three tabs (Identity → About → Preview & publish) with a sliding gold
   underline indicator and direction-aware slide transitions between
   panels. Mobile: tabs become a horizontally scrollable strip; desktop:
   full-width row with the indicator interpolating between buttons.       */
.apollo-v3-tabs{
  margin: 0 0 1.4rem;
}
.apollo-v3-tabs__nav{
  position: relative;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(15, 14, 12, .55);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.apollo-v3-tabs__nav::-webkit-scrollbar{ display: none; }
.apollo-v3-tab{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: max-content;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: rgba(255, 255, 255, .55);
  font: 600 .82rem/1 var(--font-body, DM Sans, sans-serif);
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s ease, background-color .25s ease;
}
.apollo-v3-tab:hover{ color: rgba(255, 255, 255, .85); }
.apollo-v3-tab:focus-visible{
  outline: 2px solid var(--gold, #c9a84c);
  outline-offset: 2px;
}
.apollo-v3-tab[aria-selected="true"]{
  color: var(--gold-light, #e4cc7a);
  background: color-mix(in oklab, var(--gold, #c9a84c) 14%, transparent);
}
.apollo-v3-tab__num{
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .55);
  transition: background-color .25s ease, color .25s ease;
}
.apollo-v3-tab[aria-selected="true"] .apollo-v3-tab__num{
  background: var(--gold, #c9a84c);
  color: #0a0a08;
}
.apollo-v3-tab__lbl{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 540px){
  .apollo-v3-tab{ padding: 8px 10px; }
  .apollo-v3-tab__lbl i{ display: none; }
  .apollo-v3-tab__lbl{ font-size: .78rem; }
}
.apollo-v3-tabs__indicator{
  position: absolute;
  bottom: 6px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--gold, #c9a84c);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), width .35s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

/* Panels — direction-aware slide. Reuses the booking-wizard pattern. */
.apollo-v3-tabs__panels{
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}
.apollo-v3-panel{
  display: none;
}
.apollo-v3-panel.is-active{ display: block; }
.apollo-v3-panel.is-entering-forward{ animation: apollo-v3-panel-in-fwd 380ms cubic-bezier(.22, 1, .36, 1) both; }
.apollo-v3-panel.is-entering-back{    animation: apollo-v3-panel-in-back 380ms cubic-bezier(.22, 1, .36, 1) both; }
.apollo-v3-panel.is-leaving-forward,
.apollo-v3-panel.is-leaving-back{
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.apollo-v3-panel.is-leaving-forward{ animation: apollo-v3-panel-out-fwd 320ms cubic-bezier(.55, 0, .65, 1) both; }
.apollo-v3-panel.is-leaving-back{    animation: apollo-v3-panel-out-back 320ms cubic-bezier(.55, 0, .65, 1) both; }
@keyframes apollo-v3-panel-in-fwd{
  from { opacity: 0; transform: translate3d(36px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes apollo-v3-panel-out-fwd{
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(-36px, 0, 0); }
}
@keyframes apollo-v3-panel-in-back{
  from { opacity: 0; transform: translate3d(-36px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes apollo-v3-panel-out-back{
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(36px, 0, 0); }
}
@media (prefers-reduced-motion: reduce){
  .apollo-v3-panel.is-entering-forward,
  .apollo-v3-panel.is-entering-back,
  .apollo-v3-panel.is-leaving-forward,
  .apollo-v3-panel.is-leaving-back{ animation: none !important; }
  .apollo-v3-tabs__indicator{ transition: none !important; }
}

/* Panel internals — head, flow nav, publish CTA. */
.apollo-v3-panel{
  padding: 1.3rem;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
}
.apollo-v3-panel__head{
  margin-bottom: 1.1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.apollo-v3-panel__head h3{
  font-size: 1.05rem;
  margin: 0 0 .35rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-light, #e4cc7a);
}
.apollo-v3-panel__head h3 i{ font-size: .85rem; }
.apollo-v3-panel__head p{ margin: 0; }
.apollo-v3-panel__flow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(255, 255, 255, .08);
}
.apollo-v3-panel__flow-hint{
  flex: 1;
  text-align: center;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .35);
}
.apollo-v3-panel__flow .v3-btn{ flex-shrink: 0; }

/* Publish-tab CTA block (above the back/next flow row) */
.apollo-v3-publish{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 1.2rem;
  margin-top: 1.2rem;
  background: linear-gradient(180deg, rgba(201, 168, 76, .06), rgba(15, 14, 12, .35));
  border: 1px solid rgba(201, 168, 76, .22);
  border-radius: 12px;
  text-align: center;
}
.apollo-v3-publish__hint{
  margin: 0;
  font-size: .74rem;
  color: rgba(255, 255, 255, .55);
  max-width: 32ch;
}
.apollo-v3-publish .v3-btn--lg{ padding: .85rem 1.6rem; font-size: .92rem; }

/* The live preview card inside the publish panel — centered, no rail. */
.apollo-v3-panel .apollo-v3-preview{
  display: block;
  max-width: 360px;
  margin: 0 auto;
}

/* ── Status workflow stepper (Draft → Pending → Published) ────────────── */
.apollo-v3-stepper{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 14px;
  background: rgba(15, 14, 12, .55);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  position: relative;
}
.apollo-v3-stepper__step{
  display:flex; flex-direction:column; align-items:center;
  gap: 4px; text-align:center;
  padding: 8px 6px;
  border-radius: 10px;
  position: relative;
  transition: background-color .25s ease, transform .25s ease;
}
.apollo-v3-stepper__step::after{
  /* connector line to next step */
  content: '';
  position: absolute;
  top: 22px; right: -50%;
  width: 100%; height: 1px;
  background: rgba(255, 255, 255, .08);
  z-index: 0;
}
.apollo-v3-stepper__step:last-child::after{ display:none; }
.apollo-v3-stepper__dot{
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .35);
  font-size: .78rem;
  position: relative; z-index: 1;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.apollo-v3-stepper__lbl{
  font-size: .78rem; font-weight: 700;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .02em;
}
.apollo-v3-stepper__sub{
  font-size: .66rem;
  color: rgba(255, 255, 255, .35);
  line-height: 1.3;
}
/* States: completed (done), current (active), upcoming */
.apollo-v3-stepper__step[data-state="done"] .apollo-v3-stepper__dot{
  background: color-mix(in oklab, var(--gold, #c9a84c) 20%, rgba(15, 14, 12, .55));
  border-color: var(--gold, #c9a84c);
  color: var(--gold, #c9a84c);
}
.apollo-v3-stepper__step[data-state="done"] + .apollo-v3-stepper__step::before,
.apollo-v3-stepper__step[data-state="done"]::after{
  background: var(--gold, #c9a84c);
}
.apollo-v3-stepper__step[data-state="current"] .apollo-v3-stepper__dot{
  background: var(--gold, #c9a84c);
  border-color: var(--gold, #c9a84c);
  color: #0a0a08;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold, #c9a84c) 18%, transparent);
  transform: scale(1.08);
}
.apollo-v3-stepper__step[data-state="current"] .apollo-v3-stepper__lbl{
  color: var(--gold-light, #e4cc7a);
}

/* ── Published-state hero banner ──────────────────────────────────────── */
.apollo-v3-livebanner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap: 12px;
  padding: 14px 18px;
  margin: 0 0 1.4rem;
  background: linear-gradient(135deg, color-mix(in oklab, #7fb069 18%, transparent), color-mix(in oklab, var(--gold, #c9a84c) 10%, transparent));
  border: 1px solid color-mix(in oklab, #7fb069 40%, transparent);
  border-radius: 14px;
  animation: apollo-v3-livebanner-pop .45s cubic-bezier(.22,1,.36,1);
}
@keyframes apollo-v3-livebanner-pop{
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.apollo-v3-livebanner[hidden]{ display:none; }
.apollo-v3-livebanner__txt{
  display:flex; flex-direction:column; gap: 2px;
  font-size: .92rem; color: rgba(255, 255, 255, .9);
}
.apollo-v3-livebanner__txt strong{
  color: #a3c485;
  letter-spacing: .01em;
}
.apollo-v3-livebanner__url{
  font-family: var(--font-mono, JetBrains Mono, ui-monospace, monospace);
  font-size: .78rem;
  color: rgba(255, 255, 255, .65);
}
.apollo-v3-livebanner__url em{
  color: var(--gold-light, #e4cc7a);
  font-style: normal;
  font-weight: 600;
}
.apollo-v3-livebanner__actions{ display:flex; gap: 8px; flex-wrap: wrap; }
.apollo-v3-livebanner__actions .v3-btn{ font-size: .78rem; padding: .5rem 1rem; }

/* ── Character counters next to labels ────────────────────────────────── */
.apollo-v3-label{ position: relative; }
.apollo-v3-counter{
  float: right;
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .45);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-transform: none;
  transition: color .25s ease;
}
.apollo-v3-counter[data-state="warn"]{ color: #e4cc7a; }
.apollo-v3-counter[data-state="full"]{ color: #d68585; }

/* ── Slug input with inline status badge ──────────────────────────────── */
.apollo-v3-slug-wrap{
  position: relative;
}
.apollo-v3-slug-wrap .apollo-v3-input{ padding-right: 44px; }
.apollo-v3-slug-status{
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .35);
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
  pointer-events: none;
}
.apollo-v3-slug-status[data-state="empty"]{ opacity: 0; }
.apollo-v3-slug-status[data-state="valid"]{
  background: color-mix(in oklab, #7fb069 25%, transparent);
  color: #a3c485;
}
.apollo-v3-slug-status[data-state="invalid"]{
  background: color-mix(in oklab, #d68585 25%, transparent);
  color: #d68585;
}
.apollo-v3-slug-status[data-state="valid"]::before{ content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.apollo-v3-slug-status[data-state="invalid"]::before{ content: '\f00d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.apollo-v3-input[data-validity="invalid"]{
  border-color: color-mix(in oklab, #d68585 50%, var(--line-2, rgba(255,255,255,.10)));
}
.apollo-v3-input[data-validity="valid"]{
  border-color: color-mix(in oklab, #7fb069 50%, var(--line-2, rgba(255,255,255,.10)));
}
.apollo-v3-hint[data-state="invalid"]{ color: #d68585; }
.apollo-v3-hint[data-state="valid"]{ color: #a3c485; }

/* ── Logo URL with inline image thumbnail ─────────────────────────────── */
.apollo-v3-logo-wrap{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.apollo-v3-logo-preview{
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(15, 14, 12, .65);
  border: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .35);
  font-size: 1.1rem;
  overflow: hidden;
  position: relative;
  transition: border-color .25s ease, background-color .25s ease;
}
.apollo-v3-logo-preview img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.apollo-v3-logo-preview[data-state="loading"]{ border-color: color-mix(in oklab, var(--gold, #c9a84c) 40%, transparent); }
.apollo-v3-logo-preview[data-state="loaded"]{ border-color: color-mix(in oklab, #7fb069 50%, transparent); }
.apollo-v3-logo-preview[data-state="errored"]{ border-color: color-mix(in oklab, #d68585 50%, transparent); color: #d68585; }

/* ── Live preview card (mock public Apollo card) ──────────────────────── */
.apollo-v3-preview{
  min-width: 0;
}
.apollo-v3-preview__sticky{
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apollo-v3-preview__head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
}
.apollo-v3-preview__hint{
  font-size: .66rem;
  color: rgba(255, 255, 255, .35);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.apollo-v3-card-mock{
  position: relative;
  padding: 1.4rem 1.2rem 1.2rem;
  background: linear-gradient(180deg, rgba(245, 240, 230, .04), rgba(15, 14, 12, .65));
  border: 1px solid rgba(201, 168, 76, .25);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 64px -32px rgba(0, 0, 0, .55);
}
.apollo-v3-card-mock::before{
  /* subtle gold glow corner */
  content: '';
  position: absolute;
  inset: -40% 60% 60% -40%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--gold, #c9a84c) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.apollo-v3-card-mock__topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 1rem;
  position: relative; z-index: 1;
}
.apollo-v3-card-mock__rating{
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold-light, #e4cc7a);
  letter-spacing: .04em;
}
.apollo-v3-card-mock__rating i{ font-size: .68rem; margin-right: 2px; }
.apollo-v3-card-mock__pill{
  font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(201, 168, 76, .12);
  color: var(--gold-light, #e4cc7a);
  border: 1px solid rgba(201, 168, 76, .30);
}
.apollo-v3-card-mock__pill[data-state="pending_review"]{
  background: rgba(184, 92, 92, .12); color: #d68585;
  border-color: rgba(184, 92, 92, .30);
}
.apollo-v3-card-mock__pill[data-state="published"]{
  background: rgba(127, 176, 105, .14); color: #a3c485;
  border-color: rgba(127, 176, 105, .40);
}
.apollo-v3-card-mock__avatar{
  position: relative; z-index: 1;
  width: 88px; height: 88px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold, #c9a84c), color-mix(in oklab, var(--gold, #c9a84c) 60%, #6e5510));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 2.1rem; font-weight: 700;
  color: #0a0a08;
  overflow: hidden;
  box-shadow: 0 8px 32px -12px rgba(201, 168, 76, .55);
}
.apollo-v3-card-mock__avatar img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.apollo-v3-card-mock__name{
  text-align: center;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.1;
  color: rgba(255, 255, 255, .95);
  margin-bottom: 2px;
  position: relative; z-index: 1;
  word-break: break-word;
}
.apollo-v3-card-mock__tag{
  text-align: center;
  font-style: italic;
  font-size: .88rem;
  color: var(--gold-light, #e4cc7a);
  margin-bottom: .9rem;
  position: relative; z-index: 1;
  word-break: break-word;
}
.apollo-v3-card-mock__tag:empty,
.apollo-v3-card-mock__tag[data-empty="true"]{ opacity: .4; }
.apollo-v3-card-mock__blurb{
  font-size: .82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .7);
  margin: 0 0 1rem;
  position: relative; z-index: 1;
  word-break: break-word;
}
.apollo-v3-card-mock__blurb[data-empty="true"]{ color: rgba(255, 255, 255, .35); font-style: italic; }
.apollo-v3-card-mock__areas{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 1rem;
  position: relative; z-index: 1;
}
.apollo-v3-card-mock__areas .apollo-v3-card-mock__area{
  font-size: .64rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .08);
}
.apollo-v3-card-mock__area-empty{
  font-size: .72rem;
  font-style: italic;
  color: rgba(255, 255, 255, .3);
}
.apollo-v3-card-mock__cta{
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding-top: .8rem;
  border-top: 1px dashed rgba(255, 255, 255, .08);
  position: relative; z-index: 1;
}
.apollo-v3-card-mock__cta-btn{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700;
  padding: .55rem 1.4rem;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--gold, #c9a84c), color-mix(in oklab, var(--gold, #c9a84c) 50%, #b48830));
  color: #0a0a08;
  opacity: .65;
  cursor: not-allowed;
}
.apollo-v3-card-mock__cta-hint{
  font-size: .6rem;
  color: rgba(255, 255, 255, .3);
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce){
  .apollo-v3-livebanner,
  .apollo-v3-stepper__dot{ animation: none !important; transition: none !important; }
}

.apollo-v3-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:1.4rem;padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.apollo-v3-foot .v3-btn{font-size:.78rem;}