/* ChatUnwrappedX skin — warm gold "wrapped gift" identity on the family chrome.
   Gold accent + ribbon pink glow; celebration is the brand. */
:root {
  --sx-accent: #f6b21b;
  --sx-accent-ink: #221703;
  --sx-glow-1: #f6b21b;
  --sx-glow-2: #ff5d8f;
  --sx-bg: #151109;
  --sx-surface: #1e1810;
  --sx-surface-2: #272013;
  --sx-text: #f5efe3;
  --sx-muted: #b4a88d;
  --sx-border: rgba(246, 178, 27, 0.14);

  --accent: var(--sx-accent);
  --surface: var(--sx-surface);
  --border: var(--sx-border);
  --muted: var(--sx-muted);
  --ribbon: #ff5d8f;
}

/* brand dot rides the app identity: gold into ribbon pink */
.sx-brand .dot { background: linear-gradient(135deg, var(--sx-accent), var(--ribbon)); }

/* --- landing hero ----------------------------------------------------------- */
.hero { padding: 72px 0 40px; max-width: 780px; }
.hero h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; }
.hero .grad {
  background: linear-gradient(92deg, var(--sx-accent) 12%, #ffd35c 45%, var(--ribbon) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--sx-muted); font-size: 1.06rem; line-height: 1.65; max-width: 640px; margin: 0 0 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { font-size: 0.9rem; margin-top: 16px; color: color-mix(in srgb, var(--sx-accent) 70%, var(--sx-muted)); }

/* --- the four faces ---------------------------------------------------------- */
.faces-grid {
  display: grid; gap: 14px; margin: 26px 0 40px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.face-card { position: relative; overflow: hidden; padding: 20px; }
.face-card .fc-glyph {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 22px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--fc, var(--sx-accent)) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc, var(--sx-accent)) 30%, transparent);
}
.face-card h3 { margin: 0 0 6px; font-size: 1.02rem; }
.face-card p { margin: 0 0 12px; color: var(--sx-muted); font-size: 0.9rem; line-height: 1.5; }
.face-card .sx-chip.free { border-color: color-mix(in srgb, #58d68d 55%, transparent); color: #7ce0a4; }
.face-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--fc, var(--sx-accent)) 9%, transparent), transparent 55%);
}

/* --- signed-in: engine status ------------------------------------------------ */
.engine-card { display: flex; align-items: center; gap: 18px; padding: 22px; margin-top: 26px; }
.engine-copy h2 { margin: 0 0 4px; font-size: 1.15rem; }
.engine-copy p { margin: 0; color: var(--sx-muted); font-size: 0.92rem; }
.pulse-dot { position: relative; width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; background: #666; }
.pulse-dot.on { background: #58d68d; }
.pulse-dot.on::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, #58d68d 60%, transparent);
  animation: cuxPulse 1.8s var(--sx-ease-out) infinite;
}
.pulse-dot.off { background: #e0574e; }
@keyframes cuxPulse { 0% { transform: scale(0.55); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }

/* --- section heads + period pills -------------------------------------------- */
.section-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 34px 0 14px; }
.section-head h2 { margin: 0; font-size: 1.15rem; }
.section-head .count { color: var(--sx-muted); font-size: 0.85rem; }
.period-pills { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.pill.active {
  background: color-mix(in srgb, var(--sx-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--sx-accent) 55%, var(--sx-border));
  color: var(--sx-text);
}

/* --- stat tiles --------------------------------------------------------------- */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tile { padding: 16px 18px; }
.tile .t-label { color: var(--sx-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tile .t-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile .t-glyph { float: right; font-size: 1.1rem; opacity: 0.75; }

/* staggered entrance (capped by markup at 8 items) */
.stagger-in { animation: cuxRise var(--sx-dur-base) var(--sx-spring) both; animation-delay: calc(var(--i, 0) * var(--sx-stagger)); }
@keyframes cuxRise { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }

/* --- superlatives -------------------------------------------------------------- */
.sup-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sup-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; min-height: 44px;
  border-radius: 999px; border: 1px solid var(--sx-border); background: var(--sx-surface); font-size: 0.88rem; }
.sup-chip .who { font-weight: 700; color: var(--sx-accent); }

/* --- leaderboard ----------------------------------------------------------------- */
.lb { padding: 6px 0; }
.lb-row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; min-height: 44px; border-bottom: 1px solid var(--sx-faint, rgba(255,255,255,0.05)); }
.lb-row:last-child { border-bottom: none; }
.lb-rank { width: 34px; font-weight: 800; color: var(--sx-muted); font-variant-numeric: tabular-nums; }
.lb-row:nth-child(1) .lb-rank { color: #ffd35c; }
.lb-row:nth-child(2) .lb-rank { color: #cfd6e4; }
.lb-row:nth-child(3) .lb-rank { color: #e29a6b; }
.lb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-delta { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.lb-delta.up { color: #7ce0a4; } .lb-delta.down { color: #ef8b84; } .lb-delta.flat, .lb-delta.new { color: var(--sx-muted); }
.lb-meta { margin-left: auto; color: var(--sx-muted); font-size: 0.82rem; display: flex; gap: 12px; font-variant-numeric: tabular-nums; }
.lb-empty, .loading { padding: 26px 18px; color: var(--sx-muted); }

/* --- vault empty state ------------------------------------------------------------ */
.vault { text-align: center; padding: 44px 24px; }
.vault .v-glyph { font-size: 2.4rem; display: block; margin-bottom: 10px; }
.vault h3 { margin: 0 0 8px; }
.vault p { color: var(--sx-muted); max-width: 480px; margin: 0 auto; line-height: 1.6; }

/* --- credits roll setup card -------------------------------------------------------- */
.credits { padding: 22px; }
.cr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 26px; }
.cr-hint { margin: 0 0 14px; color: var(--sx-muted); font-size: 0.92rem; line-height: 1.55; }
.cr-hint b { color: var(--sx-text); }

.cr-urlrow { display: flex; gap: 8px; }
.cr-urlrow input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--sx-border); background: var(--sx-surface-2);
  color: var(--sx-text); font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem;
}
.cr-sub { margin: 18px 0 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sx-muted); font-weight: 700; }
.cr-sub .cr-opt { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.8; }

.cr-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-toggle {
  padding: 8px 14px; min-height: 40px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--sx-border); background: var(--sx-surface-2);
  color: var(--sx-muted); font-size: 0.86rem; font-family: inherit;
  transition: background var(--sx-dur-fast, 140ms) var(--sx-ease-out, ease-out),
              border-color var(--sx-dur-fast, 140ms) var(--sx-ease-out, ease-out),
              color var(--sx-dur-fast, 140ms) var(--sx-ease-out, ease-out),
              transform var(--sx-dur-fast, 140ms) var(--sx-spring, ease-out);
}
.cr-toggle:active { transform: scale(0.96); }
.cr-toggle.on {
  background: color-mix(in srgb, var(--sx-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--sx-accent) 55%, var(--sx-border));
  color: var(--sx-text);
}
.cr-toggle.on::before { content: "✓ "; color: var(--sx-accent); font-weight: 800; }

.cr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cr-speed { margin-left: 0; }
.cr-input {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--sx-border); background: var(--sx-surface-2);
  color: var(--sx-text); font-family: inherit; font-size: 0.95rem;
}
.cr-input:focus { outline: none; border-color: color-mix(in srgb, var(--sx-accent) 55%, var(--sx-border)); }
.cr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: center; }

.cr-previewcol { display: flex; flex-direction: column; gap: 10px; }
.cr-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--sx-border);
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(246, 178, 27, 0.07), transparent 60%),
    radial-gradient(120% 100% at 90% 100%, rgba(255, 93, 143, 0.06), transparent 55%),
    #0d0a05;
}
.cr-frame iframe {
  position: absolute; top: 0; left: 0; width: 1920px; height: 1080px;
  border: 0; transform-origin: top left; pointer-events: none; background: transparent;
}
.cr-frame-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--sx-muted); font-size: 0.92rem; z-index: 1;
}
.cr-frame-empty[hidden] { display: none; }
.cr-pv-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cr-pv-note { color: var(--sx-muted); font-size: 0.8rem; }

/* signed-in top bar cluster must shrink, not push the bar wide */
#authSlot { min-width: 0; }
#authSlot .tagline { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { #authSlot .tagline { display: none; } }

.foot { padding: 44px 0 28px; color: var(--sx-muted); font-size: 0.82rem; opacity: 0.7; }

/* --- mobile ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .cr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { padding: 44px 0 28px; }
  .cr-row { grid-template-columns: 1fr; }
  .cr-actions .sx-btn { flex: 1; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .sx-btn { width: 100%; }
  .period-pills { margin-left: 0; width: 100%; }
  .engine-card { align-items: flex-start; }
  .lb-meta { display: none; }
}