:root{
  --zf-bg:#070809;
  --zf-bg-elev:#0d0f12;
  --zf-bg-soft:#121418;
  --zf-surface-1:rgba(15,17,21,.78);
  --zf-surface-2:rgba(255,255,255,.045);
  --zf-surface-3:rgba(255,255,255,.072);
  --zf-border-soft:rgba(255,255,255,.08);
  --zf-border-strong:rgba(255,255,255,.14);
  --zf-text-1:#f6f1ea;
  --zf-text-2:rgba(246,241,234,.74);
  --zf-text-3:rgba(246,241,234,.54);
  --zf-gold:#d4b078;
  --zf-gold-strong:#e0bf8e;
  --zf-gold-deep:#9b7648;
  --zf-danger:#b1525a;
  --zf-shadow-lg:0 26px 80px rgba(0,0,0,.42);
  --zf-shadow-md:0 18px 48px rgba(0,0,0,.26);
  --zf-shadow-sm:0 12px 28px rgba(0,0,0,.16);
  --zf-radius-xl:28px;
  --zf-radius-lg:22px;
  --zf-radius-md:18px;
  --zf-radius-sm:14px;
  --zf-blur:22px;
  --zf-focus:0 0 0 3px rgba(212,176,120,.20);
  --zf-topbar-bg:rgba(7,8,10,.56);
}

html,body{background:
  radial-gradient(circle at top, rgba(212,176,120,.06), transparent 30%),
  linear-gradient(180deg,#070809 0%,#090b0d 100%);
  color:var(--zf-text-1);
}
body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing:-.011em;
}

/* stage 1 foundation: unify premium shell */
.topbar{
  height:68px;
  padding:0 max(14px,env(safe-area-inset-left)) 0 max(14px,env(safe-area-inset-right));
  background:linear-gradient(180deg, rgba(7,8,10,.78), var(--zf-topbar-bg));
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}
.brandMain{
  font-size:15px;
  font-weight:720;
  letter-spacing:-.02em;
  color:var(--zf-text-1);
}
.brandAlt{color:var(--zf-text-2);font-weight:680}
.brandSub{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(246,241,234,.48);
}
.topbarRight{gap:8px}

.topbarRight .actionIcon,
.chatHeaderRight .actionIcon,
#accessBtn.actionIcon--account,
.topBtn,
.iconBtn,
#menuBtn,
#newChatBtn{
  width:42px;
  min-width:42px;
  height:42px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  color:var(--zf-text-1);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.topbarRight .actionIcon:hover,
.chatHeaderRight .actionIcon:hover,
#accessBtn.actionIcon--account:hover,
.topBtn:hover,
.iconBtn:hover,
#menuBtn:hover,
#newChatBtn:hover{
  border-color:rgba(212,176,120,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow:0 14px 28px rgba(0,0,0,.18);
  transform:translateY(-1px);
}
.topbarRight .actionIcon:focus-visible,
.chatHeaderRight .actionIcon:focus-visible,
#accessBtn.actionIcon--account:focus-visible,
.topBtn:focus-visible,
.iconBtn:focus-visible,
#menuBtn:focus-visible,
#newChatBtn:focus-visible,
.search button:focus-visible,
.btn:focus-visible,
.chip:focus-visible,
input:focus-visible,
textarea:focus-visible,
.edgeDockBtn:focus-visible,
.edgeDrawerOption:focus-visible{
  outline:none;
  box-shadow:var(--zf-shadow-sm), var(--zf-focus);
}
.topbarRight .actionIcon svg,
.chatHeaderRight .actionIcon svg,
#accessBtn.actionIcon--account svg,
.topBtn svg,
.iconBtn svg,
#menuBtn svg,
#newChatBtn svg{width:19px;height:19px;opacity:.96}

.hero{padding-top:68px}
.heroImg{filter:saturate(.94) contrast(1.02) brightness(.92)}
.heroShade{
  background:
    linear-gradient(180deg, rgba(6,7,9,.16) 0%, rgba(6,7,9,.34) 35%, rgba(6,7,9,.72) 100%),
    radial-gradient(circle at 50% 18%, rgba(212,176,120,.10), transparent 36%);
}
.hero::after{
  height:62svh;
  background:linear-gradient(to top, rgba(6,7,9,.9), rgba(6,7,9,.38) 44%, rgba(6,7,9,0) 78%);
}
.center{
  width:min(720px,92vw);
  transform:translateY(-8svh);
  padding:18px 12px calc(20px + env(safe-area-inset-bottom));
}
#heroText,
h1{
  margin:0 0 10px;
  font-size:clamp(34px,6vw,48px);
  line-height:1.02;
  font-weight:760;
  letter-spacing:-.04em;
  text-wrap:balance;
  color:var(--zf-text-1);
  text-shadow:0 18px 44px rgba(0,0,0,.34);
}
.heroHelper{
  margin:0 0 18px;
  max-width:36ch;
  font-size:16px;
  line-height:1.5;
  color:var(--zf-text-2);
  text-shadow:0 12px 28px rgba(0,0,0,.28);
}
.micro--hero{
  color:var(--zf-text-3);
  font-size:12.5px;
  letter-spacing:.01em;
}
.heroTrust,
.heroTrustItem{
  color:rgba(246,241,234,.62);
}
.heroExamplesWrap--modal{margin-top:16px}

.search{
  width:min(100%,560px);
  min-height:64px;
  padding:10px 10px 10px 16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(14,16,19,.84), rgba(10,12,15,.74));
  box-shadow:var(--zf-shadow-lg), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(var(--zf-blur)) saturate(110%);
  -webkit-backdrop-filter:blur(var(--zf-blur)) saturate(110%);
}
.search:focus-within{
  border-color:rgba(212,176,120,.24);
  background:linear-gradient(180deg, rgba(16,18,22,.92), rgba(11,13,17,.82));
  box-shadow:0 28px 85px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.05), var(--zf-focus);
}
.search input,
.searchGhost{font-size:15.5px}
.search input{
  color:var(--zf-text-1);
  padding-right:4px;
}
.searchGhost{color:rgba(246,241,234,.48)}
.search button,
.btn.gold,
.btn-shimmer,
.btnGold,
.btnPrimary,
.edgeDrawerOpenAll{
  background:linear-gradient(180deg, var(--zf-gold-strong), var(--zf-gold));
  color:#14110c !important;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.3);
}
.search button{
  width:46px;
  height:46px;
  border-radius:16px;
  font-size:18px;
}
.search button:hover,
.btn.gold:hover,
.btn-shimmer:hover,
.btnGold:hover,
.btnPrimary:hover,
.edgeDrawerOpenAll:hover{
  filter:brightness(1.02);
  transform:translateY(-1px);
}

.btn,
.btnGhost,
.btn.ghost,
.ghost,
.edgeDrawerOption,
.chip,
.topCta,
.topPill,
.item{
  min-height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.024));
  color:var(--zf-text-1);
  box-shadow:var(--zf-shadow-sm);
}
.btn,
.btnGhost,
.btn.ghost,
.ghost,
.topCta,
.topPill,
.item{
  padding:11px 16px;
  font-weight:620;
  letter-spacing:-.01em;
}
.btn.ghost:hover,
.btnGhost:hover,
.ghost:hover,
.edgeDrawerOption:hover,
.chip:hover,
.topCta:hover,
.topPill:hover,
.item:hover{
  border-color:rgba(212,176,120,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}

.chip{
  min-height:38px;
  padding:9px 14px;
  border-radius:999px;
  font-size:13px;
  color:var(--zf-text-2);
  box-shadow:none;
  background:rgba(255,255,255,.04);
}
.chip.gold{
  background:linear-gradient(180deg, rgba(212,176,120,.22), rgba(212,176,120,.14));
  color:var(--zf-text-1);
  border-color:rgba(212,176,120,.24);
}

.panel,
.modalCard,
.modal.appleModal,
.edgeDrawerCard,
.accountPanel,
.accountInsightCard,
.accountNotesCard,
.accountRecentCard,
.savedChatCard,
.savedChatPreview,
.quickPanel,
.sheetPanel,
.premiumPreviewModal .modalCard,
#reportModal .modalCard,
#savedChatsModal .modalCard,
#savedChatPreviewModal .modalCard,
#saveTitleModal .modalCard,
#accountModal .modalCard.accountModalCard{
  background:linear-gradient(180deg, rgba(16,18,22,.96), rgba(10,12,15,.92)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 24px 80px rgba(0,0,0,.34) !important;
  backdrop-filter:blur(24px) saturate(110%);
  -webkit-backdrop-filter:blur(24px) saturate(110%);
}
.modalCard,
.modal.appleModal,
#accountModal .modalCard.accountModalCard{border-radius:28px}
.panel,
.edgeDrawerCard,
.accountPanel,
.accountInsightCard,
.accountNotesCard,
.accountRecentCard,
.quickPanel{border-radius:24px}
.modalBack,
.sheetBack,
.overlay{background:rgba(5,7,10,.58)}

.chatPanel{
  border-radius:30px;
  overflow:hidden;
}
.chatTop{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.chatTitle{
  color:var(--zf-text-1);
  font-weight:700;
  letter-spacing:-.02em;
}
.composerPill{
  min-height:58px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 14px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
}
.composerPill textarea{
  color:var(--zf-text-1);
}
.composerPill textarea::placeholder,
#quickCustom::placeholder{color:rgba(246,241,234,.42)}
.composerPill .moreBtn,
.composerPill .mic,
.composerPill .send{
  width:40px;
  height:40px;
  border-radius:14px;
}
.composerPill .send{
  background:linear-gradient(180deg, var(--zf-gold-strong), var(--zf-gold));
  color:#14110c;
}
.chatBody{scroll-behavior:smooth}

input,
textarea,
select{
  border-radius:16px;
}
input,
textarea{
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"]{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:var(--zf-text-1);
}
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus{
  border-color:rgba(212,176,120,.2);
  box-shadow:var(--zf-focus);
  outline:none;
}

.edgeDockBtn{
  width:54px;
  height:54px;
  border-radius:20px 0 0 20px;
  border-color:rgba(212,176,120,.26);
  background:linear-gradient(180deg, rgba(18,20,24,.96), rgba(11,13,16,.94));
  color:var(--zf-gold-strong);
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}
.edgeDrawerTitle{letter-spacing:-.03em}
.edgeDrawerOption__meta{color:var(--zf-text-3)}

.aboutTitle,
.modalTitle,
.shareTop,
.quickPanelTitle,
.accountDashTitle,
.accountStepTitle{
  color:var(--zf-text-1);
  letter-spacing:-.03em;
}
.aboutSub,
.quickPanelHint,
.accountDashText,
.accountInsightText,
.accountMiniBody,
.faqA,
.composerLegal,
.inlineHint,
.premiumPayTrust{
  color:var(--zf-text-2);
}
.heroTrustItem,
.aboutText,
.faqItem summary,
.edgeDrawerTitle,
.edgeDrawerOption__title,
.accountMiniTitle,
.accountStatValue,
.accountRecentTitle{
  color:var(--zf-text-1);
}
.heroSampleEyebrow,
.edgeDrawerEyebrow,
.accountSectionTitle--recent,
.accountSectionTitle--tools,
.accountStatLabel,
.accountMiniEyebrow,
.accountInsightTitle{
  color:var(--zf-gold-strong);
}

.inlineLink,
a{transition:opacity .16s ease,color .16s ease}
.inlineLink,
.modalCard a,
.composerLegal a{color:#f0d0a0}
.inlineLink:hover,
.modalCard a:hover,
.composerLegal a:hover{opacity:.9}

@media (max-width:820px){
  .topbar{height:64px}
  .hero{padding-top:64px}
  .center{transform:translateY(-6svh)}
  #heroText,h1{font-size:clamp(32px,10vw,42px)}
  .heroHelper{font-size:15px;max-width:30ch}
  .search{min-height:60px;border-radius:22px;padding-left:14px}
  .search button{width:44px;height:44px}
  .panel,
  .modalCard,
  #accountModal .modalCard.accountModalCard{border-radius:26px}
}

@media (max-width:480px){
  .topbarRight .actionIcon,
  .chatHeaderRight .actionIcon,
  #accessBtn.actionIcon--account,
  .topBtn,
  .iconBtn,
  #menuBtn,
  #newChatBtn{width:40px;min-width:40px;height:40px;border-radius:14px}
  .center{width:min(100%,calc(100vw - 22px));padding-left:0;padding-right:0}
  .micro--hero{max-width:28ch;text-align:center}
  .heroTrustItem{max-width:300px}
  .edgeDrawerCard{padding:15px}
  .btn,
  .btnGhost,
  .btn.ghost,
  .ghost{min-height:42px}
}

@media (prefers-reduced-motion: reduce){
  .topbarRight .actionIcon,
  .chatHeaderRight .actionIcon,
  #accessBtn.actionIcon--account,
  .topBtn,
  .iconBtn,
  #menuBtn,
  #newChatBtn,
  .search,
  .btn,
  .chip,
  .edgeDockBtn{transition:none}
}