:root {
  --bg: #1a1228;
  --card: #2e2344;
  --text: #f7f2ff;
  --muted: #b9a8d4;
  --accent: #ff6bcb;
  --accent-2: #7c6cff;
  --ok: #5dffb0;
  --border: rgba(255, 255, 255, 0.1);
  --radius: 18px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  font-family: "PingFang HK", "Noto Sans HK", "Helvetica Neue", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(1200px 600px at 10% -10%, #3a2460 0%, transparent 55%),
              radial-gradient(900px 500px at 100% 0%, #5a1f4a 0%, transparent 50%),
              var(--bg);
  color: var(--text);
}
body {
  display: flex; flex-direction: column; align-items: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(40px, env(safe-area-inset-bottom));
}
.app { width: 100%; max-width: 420px; min-height: calc(100vh - 80px); }
.screen { animation: fadein 0.28s ease; }
.hidden { display: none !important; }
@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.brand-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 107, 203, 0.15);
  color: #ffc2e8;
  font-size: 0.8rem;
  margin-bottom: 16px;
}
.headline {
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  line-height: 1.25;
  margin: 0 0 14px;
  font-weight: 800;
}
.headline.sm { font-size: 1.45rem; }
.sub {
  color: var(--muted);
  line-height: 1.55;
  font-size: 1.02rem;
  margin: 0 0 24px;
}
.sub.tight { margin-bottom: 16px; }
.sub strong { color: #ffe3f4; }
.micro { color: var(--muted); font-size: 0.82rem; margin-top: 14px; line-height: 1.4; }
.legal { color: #8d7eaa; font-size: 0.72rem; line-height: 1.45; margin-top: 22px; }

.btn {
  display: block; width: 100%; border: none; border-radius: 14px;
  padding: 16px 18px; font-size: 1.05rem; font-weight: 700;
  cursor: pointer; transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn:focus-visible {
  outline: 2px solid #ffc2e8; outline-offset: 3px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; box-shadow: var(--shadow);
}
.btn-primary + .btn,
.btn-secondary + .btn,
.mode-card + .btn-ghost,
.mode-card + .btn-link { margin-top: 10px; }
.btn-secondary {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); margin-top: 10px; font-weight: 650;
}
.btn-ghost { background: transparent; color: var(--muted); margin-top: 10px; font-weight: 600; }
.btn-link {
  background: transparent; color: var(--muted); margin-top: 16px;
  font-weight: 600; font-size: 0.95rem; padding: 8px 0;
}
.btn-link.tiny { width: auto; margin: 0; padding: 4px 8px; font-size: 0.85rem; }

.btn-oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 12px; background: #fff; color: #1a1228; font-weight: 750;
}
.btn-oauth.apple { background: #2a2a2a; color: #888; }
.oauth-mark {
  display: inline-flex; width: 22px; height: 22px; border-radius: 6px;
  align-items: center; justify-content: center; font-weight: 900;
  background: #4285f4; color: #fff; font-size: 0.85rem;
}

.btn-choice {
  background: var(--card); color: var(--text); text-align: left;
  border: 1px solid var(--border); margin-bottom: 12px; font-weight: 650; line-height: 1.35;
}
.btn-choice:hover { border-color: rgba(255, 107, 203, 0.55); background: #382a52; }
.btn-choice::before {
  content: attr(data-letter);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-right: 10px; border-radius: 8px;
  background: rgba(124, 108, 255, 0.25); color: #d5ceff;
  font-size: 0.85rem; font-weight: 800; vertical-align: middle;
}

.progress-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.progress-bar {
  flex: 1; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.08); position: relative; overflow: hidden;
}
.progress-bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%);
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: inherit; transition: width 0.25s ease;
}
.progress-label { font-size: 0.85rem; color: var(--muted); min-width: 3.5rem; text-align: right; }
.q-stem { font-size: 1.3rem; font-weight: 750; line-height: 1.4; margin: 0 0 22px; }

.price { font-size: 2.2rem; font-weight: 800; margin: 4px 0 14px; }
.price span { font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.session-chip.inline {
  display: inline-block; margin: 0 0 16px; font-size: 0.78rem;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(93, 255, 176, 0.12); color: var(--ok);
}

.type-light {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px;
}
.type-light h2 { margin: 0 0 8px; font-size: 1.75rem; }
.type-light p { margin: 0; color: #e8dff8; line-height: 1.5; }
.result-label { color: var(--muted); font-size: 0.9rem; margin-bottom: 10px; }
.result-reason { color: var(--muted); line-height: 1.65; margin: 0 0 22px; }

.hub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.list-title { font-size: 0.85rem; color: var(--muted); margin: 20px 0 8px; font-weight: 700; }
.friend-list, .q-list { list-style: none; padding: 0; margin: 0; }
.friend-list li, .q-list li {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 8px; font-size: 0.95rem;
}
.q-list li { cursor: pointer; }
.q-list li:hover { border-color: rgba(255,107,203,0.45); }
.q-list .meta { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 4px; }
.empty { margin-top: 4px; }
.empty-card {
  margin: 8px 0 16px; padding: 18px 16px; text-align: center;
  border-radius: 16px; border: 1px dashed var(--border);
  background: rgba(255,255,255,0.03); color: var(--muted); line-height: 1.5; font-size: 0.92rem;
}
.form-error {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 107, 107, 0.12); border: 1px solid rgba(255, 107, 107, 0.35);
  color: #ffb4b4; font-size: 0.88rem; line-height: 1.4;
}
.field:focus-visible { outline: 2px solid rgba(124, 108, 255, 0.7); outline-offset: 2px; }
#reason-modes-actions .btn-primary,
#reason-guest-actions .btn-primary { margin-top: 8px; }

.field-label { display: block; font-size: 0.85rem; color: var(--muted); margin: 12px 0 6px; }
.field {
  width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 1rem; outline: none;
}
.field:focus { border-color: rgba(124, 108, 255, 0.7); }
.link-box {
  background: #120c1c; border: 1px dashed rgba(255,107,203,0.4);
  border-radius: 12px; padding: 14px; word-break: break-all;
  font-size: 0.9rem; color: #ffc2e8; margin-bottom: 16px;
}

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 20px; }
.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px;
}
.stat-card.wide { grid-column: 1 / -1; }
.stat-num { font-size: 1.85rem; font-weight: 850; color: var(--ok); }
.stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 6px; line-height: 1.35; }

.toast {
  text-align: center; color: var(--ok); font-size: 0.9rem; margin: 12px 0 0;
  font-weight: 650; padding: 10px 12px; border-radius: 12px;
  background: rgba(93, 255, 176, 0.1); border: 1px solid rgba(93, 255, 176, 0.28);
}

/* Friends v2 · three modes + feed */
.mode-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 100%; text-align: left; margin-bottom: 10px;
  padding: 16px 18px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  cursor: pointer;
}
.mode-card:hover { border-color: rgba(255,107,203,0.5); }
.mode-num { font-size: 0.75rem; color: var(--ok); font-weight: 700; }
.mode-title { font-size: 1.1rem; font-weight: 800; }
.mode-desc { font-size: 0.85rem; color: var(--muted); font-weight: 500; }

.feed-list { margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.feed-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px 16px;
}
.feed-meta { font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.feed-stem { margin: 0 0 10px; font-size: 1.05rem; font-weight: 650; line-height: 1.4; }
.feed-actions { display: flex; flex-direction: column; gap: 8px; }
.btn-choice.sm, .btn.sm { padding: 10px 14px; font-size: 0.92rem; }
.feed-card .meta { color: var(--muted); font-size: 0.8rem; margin: 0 0 8px; }

.card-ladder { list-style: none; padding: 0; margin: 0 0 12px; }
.card-ladder li {
  padding: 10px 12px; margin-bottom: 6px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--card); font-size: 0.92rem;
}
.card-ladder li.on {
  border-color: rgba(93, 255, 176, 0.45);
  background: rgba(93, 255, 176, 0.08); color: var(--ok); font-weight: 700;
}
.card-ladder li.off { color: var(--muted); }
.toast-card {
  background: rgba(93, 255, 176, 0.15); border: 1px solid rgba(93, 255, 176, 0.4);
  color: var(--ok); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
  font-weight: 700; text-align: center;
}

.site-footer {
  max-width: 420px;
  margin: 0 auto;
  padding: 12px 20px 28px;
  text-align: center;
}
.site-footer a { color: #b9a7d9; text-decoration: underline; text-underline-offset: 2px; }
.legal.tight { margin-top: 12px; }


/* QA · terms + collapsed demo notes */
.demo-note {
  margin: 12px 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: rgba(18, 12, 28, 0.55);
  color: var(--muted);
  font-size: 0.82rem;
}
.demo-note summary {
  cursor: pointer;
  color: #cbb8e8;
  font-weight: 650;
}
.demo-note .micro { margin-top: 8px; }
.terms-page { padding-bottom: 24px; }
.terms-block { margin-bottom: 22px; }
.terms-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.95rem;
}
.terms-list li { margin-bottom: 8px; }
.terms-list strong { color: #ffe3f4; }
.legal-box {
  margin: 0 0 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(93, 255, 176, 0.08);
  border: 1px solid rgba(93, 255, 176, 0.28);
  color: var(--ok);
  font-weight: 650;
  line-height: 1.45;
}

/* PIVOT v6 · instant pick result */
.pick-result h2 {
  margin: 6px 0 10px;
  font-size: 1.65rem;
  line-height: 1.3;
  color: #fff;
}
.pick-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}
.pick-micro {
  margin: 0 0 8px !important;
  color: #e8dff8 !important;
  font-size: 0.98rem;
}
.legacy-link {
  color: #8d7eaa;
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legacy-link:hover { color: #cbb8e8; }
#screen-landing .field { margin-bottom: 0; }
#btn-instant-pick { margin-top: 16px; }