/* ============ base ============ */
:root {
  --green: #047857; --green-dark: #065f46; --green-pale: #ecfdf5;
  --stone-50:#fafaf9; --stone-100:#f5f5f4; --stone-200:#e7e5e4; --stone-300:#d6d3d1;
  --stone-500:#78716c; --stone-600:#57534e; --stone-800:#292524; --stone-900:#1c1917;
  --amber:#d97706; --red:#dc2626; --radius: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--stone-100); color: var(--stone-900); }
h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 .4rem; }
.muted { color: var(--stone-500); font-size: .9rem; line-height: 1.5; }
.center { text-align: center; padding: 2rem 1rem; }
.error { color: var(--red); font-size: .9rem; }
.ok { color: var(--green); }
.row-between { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }
.row-gap { display: flex; gap: .5rem; margin-top: .75rem; }

/* ============ shell ============ */
.topbar { display:flex; justify-content:space-between; align-items:center;
  background:#fff; border-bottom:1px solid var(--stone-200); padding:.5rem 1rem; }
.topbar nav { display:flex; gap:.25rem; }
.topbar nav button { border:0; background:none; padding:.45rem .8rem; border-radius:10px;
  font:inherit; font-size:.9rem; color:var(--stone-600); cursor:pointer; }
.topbar nav button.active { background:var(--green); color:#fff; }
#lang { font: inherit; font-size:.9rem; border:1px solid var(--stone-300); border-radius:8px; padding:.3rem .5rem; }
main { max-width: 480px; margin: 0 auto; }

/* ============ buttons ============ */
.btn { border:0; background:var(--green); color:#fff; font:inherit; font-weight:600;
  font-size:.9rem; padding:.65rem 1.4rem; border-radius:12px; cursor:pointer; }
.btn:hover { background:var(--green-dark); }
.btn:disabled { background:var(--stone-300); cursor:not-allowed; }
.btn.ghost { background:none; color:var(--stone-600); }
.btn.ghost:hover { background:var(--stone-100); }
.btn.small { padding:.45rem .9rem; font-size:.85rem; }
.btn.wide { width:100%; margin-top:.75rem; }

/* ============ onboarding ============ */
.funnel { padding: 2rem 1.25rem; }
.progress-label { font-size:.8rem; color:var(--stone-500); margin-bottom:.4rem; }
.progress-track { height:6px; background:var(--stone-200); border-radius:99px; overflow:hidden; margin-bottom:1.75rem; }
.progress-fill { height:100%; background:var(--green); border-radius:99px; transition:width .4s ease; }
.options { display:flex; flex-direction:column; gap:.6rem; margin-top:1.5rem; }
.option { text-align:left; background:#fff; border:1px solid var(--stone-300); border-radius:var(--radius);
  padding:1rem 1.2rem; font:inherit; cursor:pointer; transition:border-color .15s, background .15s; }
.option:hover { border-color: var(--green); background: var(--green-pale); }
.option strong { display:block; font-size:1rem; }
.option span { display:block; margin-top:.15rem; font-size:.85rem; color:var(--stone-500); }
.prompt { display:block; margin-top:1.4rem; }
.prompt > span { font-weight:600; font-size:.95rem; }
.prompt textarea { width:100%; margin-top:.5rem; padding:.7rem .9rem; font:inherit; font-size:.95rem;
  border:1px solid var(--stone-300); border-radius:var(--radius); resize:vertical; }
.prompt textarea:focus { outline:2px solid var(--green); border-color:transparent; }
.hint { display:block; margin-top:.25rem; font-size:.75rem; color:var(--stone-500); }
.hint.ok { color: var(--green); }
.verify-card { margin:1.5rem 0 1rem; padding:2rem 1rem; text-align:center;
  border:2px dashed var(--stone-300); border-radius:18px; background:var(--stone-50); }
.verify-avatar { width:90px; height:90px; margin:0 auto 1rem; display:flex; align-items:center;
  justify-content:center; font-size:2.4rem; background:#fff; border:2px solid var(--stone-300); border-radius:50%; }
.verify-card .btn { margin-top: 1rem; }
.rejection { padding:4rem 1.5rem; text-align:center; }
.rejection-icon { width:64px; height:64px; margin:0 auto 1.2rem; display:flex; align-items:center;
  justify-content:center; font-size:1.8rem; background:var(--stone-100); border-radius:50%; }

/* ============ discovery ============ */
.deck { padding:1.5rem 1rem; overflow-x:hidden; }
.card { background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition: transform .3s ease-in, opacity .3s ease-in; }
.card.exit { transform: translateX(-110%) rotate(-4deg); opacity:0; }
@media (prefers-reduced-motion: reduce) { .card, .progress-fill { transition:none; } }
.card-photo { position:relative; aspect-ratio:4/5; background:var(--stone-200); }
.card-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.card-overlay { position:absolute; inset:auto 0 0 0; padding:3rem 1.2rem 1rem;
  background:linear-gradient(transparent, rgba(0,0,0,.72)); color:#fff; }
.card-overlay h2 { margin:0; font-size:1.4rem; }
.card-overlay h2 span { font-weight:400; opacity:.85; }
.card-overlay p { margin:.15rem 0 0; font-size:.85rem; opacity:.85; }
.card-bio { padding:0 1.2rem; font-size:.9rem; line-height:1.5; color:var(--stone-600); }
.rating-prompt { text-align:center; font-size:.7rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--stone-500); margin:.75rem 0 .4rem; }
.rating-row { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; padding:0 .8rem 1.25rem; }
.rate { position:relative; width:38px; height:38px; border-radius:50%; border:1px solid var(--stone-300);
  background:#fff; font:inherit; font-weight:600; font-size:.85rem; color:var(--stone-600);
  cursor:pointer; transition:transform .12s, border-color .12s, background .12s; }
.rate:hover { transform: scale(1.12); }
.rate:disabled { opacity:.4; }
.rate-notMyType:hover { border-color:var(--stone-500); background:var(--stone-100); }
.rate-interesting:hover { border-color:var(--amber); background:#fffbeb; }
.rate-amazing:hover { border-color:var(--green); background:var(--green-pale); }
.tooltip { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--stone-900); color:#fff; font-size:.7rem; font-weight:500; padding:.25rem .55rem;
  border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; }
.rate:hover .tooltip, .rate:focus-visible .tooltip { opacity:1; }

/* ============ chat ============ */
.chat { display:flex; flex-direction:column; height: calc(100vh - 53px); background:var(--stone-50); }
.banner { padding:.5rem 1rem; text-align:center; font-size:.85rem; font-weight:600; color:#fff; }
.banner.warn { background:var(--amber); } .banner.urgent { background:var(--red); }
.banner.locked { background:var(--green); } .banner.expired { background:var(--stone-800); }
.stream { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; }
.msg { max-width:75%; padding:.55rem 1rem; border-radius:18px; font-size:.92rem; line-height:1.45; }
.msg.mine { align-self:flex-end; background:var(--green); color:#fff; border-bottom-right-radius:6px; }
.msg.theirs { align-self:flex-start; background:#fff; border:1px solid var(--stone-200); border-bottom-left-radius:6px; }
.proposal { align-self:center; width:100%; max-width:290px; display:flex; flex-direction:column; gap:.2rem;
  background:var(--green-pale); border:1px solid #a7f3d0; border-radius:16px; padding:.9rem 1rem; font-size:.9rem; }
.proposal small:first-child { color:var(--green); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:.68rem; }
.composer { display:flex; gap:.5rem; align-items:flex-end; background:#fff;
  border-top:1px solid var(--stone-200); padding:.7rem .8rem; }
.composer textarea { flex:1; font:inherit; font-size:.95rem; border:1px solid var(--stone-300);
  border-radius:18px; padding:.6rem 1rem; resize:none; max-height:8rem; }
.composer textarea:focus { outline:2px solid var(--green); border-color:transparent; }
.coffee { width:44px; height:44px; flex-shrink:0; border-radius:50%; border:1px solid #a7f3d0;
  background:var(--green-pale); font-size:1.2rem; cursor:pointer; }
.coffee:hover { background:#d1fae5; }
.coffee:disabled { opacity:.4; cursor:not-allowed; }

/* modal */
.overlay { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.5);
  display:flex; align-items:flex-end; justify-content:center; }
.sheet { width:100%; max-width:430px; max-height:85vh; display:flex; flex-direction:column;
  background:#fff; border-radius:22px 22px 0 0; padding:1.25rem; overflow:hidden; }
@media (min-width: 640px) { .overlay { align-items:center; } .sheet { border-radius:22px; } }
.sheet h2 { margin:0; font-size:1.15rem; }
.venues { flex:1; overflow-y:auto; margin:.9rem 0 0; display:flex; flex-direction:column; gap:.5rem; }
.venue { text-align:left; display:flex; flex-direction:column; gap:.15rem; background:#fff;
  border:1px solid var(--stone-200); border-radius:var(--radius); padding:.75rem 1rem; font:inherit; cursor:pointer; }
.venue:hover { border-color: var(--stone-500); }
.venue.selected { border-color: var(--green); background: var(--green-pale); }
.when { display:block; margin-top:.9rem; font-size:.9rem; font-weight:600; }
.when input { display:block; width:100%; margin-top:.35rem; font:inherit; font-size:.95rem;
  border:1px solid var(--stone-300); border-radius:var(--radius); padding:.55rem .8rem; }

/* ============ auth forms ============ */
.authbox { max-width: 400px; margin: 0 auto; }
.authform { display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem; }
.authform label { font-size:.9rem; font-weight:600; display:flex; flex-direction:column; gap:.35rem; }
.authform input { font:inherit; font-size:1rem; padding:.6rem .9rem;
  border:1px solid var(--stone-300); border-radius:var(--radius); }
.authform input:focus { outline:2px solid var(--green); border-color:transparent; }
.center-text { text-align:center; margin-top:1.25rem; }
.center-text a { color:var(--green); font-weight:600; }
.locbanner { background:#fffbeb; border-bottom:1px solid #fde68a; color:#92400e;
  font-size:.85rem; text-align:center; padding:.5rem 1rem; }
.locbanner a { color:#92400e; font-weight:700; }

.buildtag { text-align:center; font-size:.7rem; color:var(--stone-300); padding:1rem 0; }