/* Golden edition: shared by every route, including the landing page and dialogs. */
:root {
  color-scheme: light;
  --page: #fffaf0;
  --surface: #ffffff;
  --surface-2: #fff5dc;
  --surface-3: #f7ebce;
  --border: #eadfc5;
  --border-strong: #dcc89d;
  --text: #2a2114;
  --text-2: #73634b;
  --text-3: #89775c;
  --gold: #956408;
  --gold-2: #78520a;
  --gold-fill: #f5c518;
  --gold-light: #ffe58a;
  --gold-deep: #e6ae13;
  --gold-soft: #fff0be;
  --up: #16845b;
  --down: #ce394a;
  --warn: #a36506;
}
html, body { background: var(--page); }
body {
  color: var(--text);
  font-family: 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.phone { background: var(--page); }
#app { min-height: 100vh; }
#app .surface { background: var(--surface); border-color: var(--border); box-shadow: 0 3px 14px rgba(99, 72, 15, .035); }
#app .surface-2 { background: var(--surface-2); }
#app .gold-text {
  background: none;
  color: var(--gold);
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
#app .gold-border { border-color: var(--border-strong); }
#app .glass { background: rgba(255, 250, 240, .96); border-color: var(--border); }
#app .aurora { opacity: .22; }
#app .ucard {
  background: linear-gradient(120deg, #ffeaa1, #f5c518);
  border: 1px solid #e4b625;
  box-shadow: 0 8px 24px rgba(160, 111, 7, .10);
  color: var(--text);
}
#app .ucard::before { display: none; }
#app .ucard .gold-text { color: var(--text); }
#app .vip-upgrade-card { background: var(--surface); border-color: var(--border); box-shadow: 0 3px 14px rgba(99, 72, 15, .035); }
#app .vip-upgrade-glow { display: none; }
#app .path-tile { background: var(--surface-2); border-color: var(--border); }
#app .btn-upgrade-idle { color: var(--text-2); background: var(--surface-3); border-color: var(--border); }
#app .text-white { color: var(--text); }
#app .text-black { color: #2a2114; }
#app :is(.text-zinc-100, .text-zinc-200, .text-zinc-300, .text-gray-200, .text-gray-300) { color: #453821; }
#app :is(.text-zinc-400, .text-zinc-500, .text-gray-400, .text-gray-500, .text-slate-400) { color: var(--text-2); }
#app :is(.text-zinc-600, .text-zinc-700, .text-gray-600) { color: var(--text-3); }
#app [class~="bg-black"] { background-color: var(--page); }
#app :is([class~="bg-white/5"], [class~="bg-white/10"], .bg-zinc-800, .bg-zinc-900) { background-color: var(--surface-3); }
#app :is([class~="border-white/5"], [class~="border-white/10"], .border-zinc-800) { border-color: var(--border); }
#app [class~="bg-[var(--gold)]"] { background-color: var(--gold-fill); color: var(--text); }
#app button.bg-white { background-color: var(--gold-fill); }
#app h1 { font-weight: 600; letter-spacing: -.035em; }
#app h2, #app h3 { letter-spacing: -.02em; }
#app input, #app textarea, #app select { color: var(--text); accent-color: var(--gold-fill); }
#app input::placeholder, #app textarea::placeholder { color: var(--text-3); opacity: 1; }
#app :is(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#app button:not(:disabled), #app a { -webkit-tap-highlight-color: rgba(245, 197, 24, .18); }
#app .tab-btn { color: var(--text-2); transition: color .18s, background .18s; }
#app .tab-active { color: var(--gold-2); background: var(--gold-soft); font-weight: 600; }
#app .tab-active .tab-icon { filter: none; }
#app nav.fixed.bottom-0 { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
#app :is(.ind-pill, .tf-btn, .qa-btn, .period-btn) { color: var(--text-2); border-color: var(--border-strong); box-shadow: none; }
#app :is(.ind-active, .tf-active, .period-btn.active) { background: var(--gold-soft); color: var(--gold-2); border-color: #d2ad49; box-shadow: none; }
#app .start-page {
  --bg: var(--page);
  --card: #ffffff;
  --card-h: #fff5dc;
  --acc: var(--gold);
  --acc-h: var(--gold-2);
  --txt: var(--text);
  --sub: var(--text-2);
  --dim: var(--text-3);
  --bd: var(--border);
  --bd-h: var(--border-strong);
}
#app .start-page::before { opacity: .4; }
#app .start-page > nav { background: rgba(255, 250, 240, .96); padding: 18px 24px; }
#app .start-page .logo-mark { display: grid; place-items: center; background: var(--gold-fill); color: var(--text); font-weight: 700; box-shadow: none; }
#app .start-page .hero { min-height: 76vh; padding-top: 112px; }
#app .start-page .hero h2.slogan { font-size: clamp(32px, 4.8vw, 60px); font-weight: 500; line-height: 1.2; max-width: 650px; color: var(--text); }
#app .start-page .hero h2.slogan b { font-weight: 650; }
#app .start-page .hero p.lead { font-size: 15px; line-height: 1.8; }
#app .start-page :is(.btn-primary, .btn-cta, .final-btn, .btn-launch) { background: var(--gold-fill); color: var(--text); box-shadow: none; border-radius: 12px; }
#app .start-page .btn-ghost { background: var(--surface); border-color: var(--border-strong); }
#app .start-page .stat-cell { background: var(--surface); padding: 28px 20px; }
#app .start-page .stat-cell .v { color: var(--gold-2); }
#app .start-page :is(.fcard, .paw-wrap, .asd-art-wrap) { background: var(--surface); border-color: var(--border); box-shadow: none; }
#app .start-page .paw-wrap { background: var(--gold-soft); }
#app .start-page .feature { padding-top: 64px; padding-bottom: 64px; }
#app .start-page .feature-text h3 { font-size: clamp(24px, 3vw, 36px); }
#app .start-page .pill { background: var(--surface-2); border-color: var(--border); }
#app .start-page .tag { color: var(--gold); background: var(--gold-soft); }
#app .trade-screen {
  --up: #16845b;
  --down: #ce394a;
  --bn-bg: var(--page);
  --bn-panel: var(--surface);
  --bn-line: var(--border);
  --bn-text: var(--text);
  --bn-muted: var(--text-2);
  --bn-yellow: var(--gold);
}
#app .bn-side { color: #fff; }
#app .bn-side--long { background: var(--up); }
#app .bn-side--short { background: var(--down); }
#app .bn-quick__btn.is-on { background: var(--gold-fill); color: var(--text); }
#astra-toast { background: #2a2114 !important; color: #fff !important; border-color: #665335 !important; }
@media (min-width: 768px) {
  body { background: #f5eddc; padding: 32px 0; }
  .phone { height: auto; min-height: calc(100vh - 64px); max-width: 480px; border-radius: 28px; border-color: var(--border); box-shadow: 0 16px 64px rgba(89, 61, 8, .08); overflow: visible; }
  #app > nav.fixed.bottom-0 { max-width: 480px; border-radius: 20px 20px 0 0; }
  body:has(.start-page) { padding: 0; background: var(--page); }
  body:has(.start-page) .phone { max-width: none; border: 0; border-radius: 0; box-shadow: none; }
  #app .start-page .stats { grid-template-columns: repeat(4, 1fr); width: calc(100% - 48px); margin: 0 auto 40px; }
}
@media (max-width: 380px) {
  #app .start-page > nav { padding: 14px 16px; }
  #app .start-page .hero h2.slogan { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #app .start-page .reveal { opacity: 1; transform: none; }
}