:root {
    --bg: #0a120d;
    --bg-2: #06100a;
    --panel: #101c15;
    --panel-2: #16281d;
    --line: #22392c;
    --txt: #eaf3ec;
    --muted: #7f9a89;
    --brand: #1f9d57;      /* emerald */
    --brand-2: #38d67f;    /* mint */
    --brand-deep: #0c3a24; /* deep forest */
    --accent: #38d67f;
    --gold: #d9b25f;
    --danger: #ff5d6c;
    --ink: #05170e;        /* text on bright green */
    --radius: 18px;
    --shadow: 0 22px 55px rgba(0,0,0,.55);
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; height: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:
      radial-gradient(1100px 620px at 50% -12%, #16341f 0%, transparent 62%),
      var(--bg-2);
    color: var(--txt);
    display: flex; align-items: center; justify-content: center;
    min-height: 100%; padding: 16px;
  }
  svg.ic { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none;
           stroke-linecap: round; stroke-linejoin: round; display: block; }

  /* ---------- phone frame ---------- */
  .phone {
    width: 100%; max-width: 400px; height: min(860px, 94vh);
    background: var(--bg); border-radius: 44px; border: 11px solid #030806;
    box-shadow: var(--shadow), inset 0 0 0 2px #16241b;
    overflow: hidden; position: relative; display: flex; flex-direction: column;
  }
  .notch {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 116px; height: 30px; background: #030806; border-radius: 999px; z-index: 40;
  }
  .screen {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    display: none; flex-direction: column; padding: 52px 20px 100px;
    animation: fade .3s ease;
  }
  .screen.active { display: flex; }
  .screen::-webkit-scrollbar { display: none; }
  @keyframes fade { from { opacity: 0; transform: translateY(8px);} to { opacity:1; transform:none;} }

  /* ---------- brand / logo ---------- */
  .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
  .logo .num {
    display: inline-grid; place-items: center;
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    color: var(--ink); font-weight: 900; letter-spacing: -1.5px;
    border-radius: 12px; padding: 4px 10px; line-height: 1;
    box-shadow: 0 8px 22px rgba(31,157,87,.4);
  }
  .logo .word { font-weight: 900; letter-spacing: -.3px; }
  .logo .word b { color: var(--brand-2); }

  /* ---------- generic ui ---------- */
  h1 { font-size: 27px; margin: 0 0 6px; letter-spacing: -.6px; font-weight: 900; }
  h2 { font-size: 20px; margin: 0 0 4px; letter-spacing: -.4px; font-weight: 800; }
  p.lead { color: var(--muted); margin: 0 0 18px; line-height: 1.45; font-size: 14px; }
  label.fld { display: block; font-size: 11px; color: var(--muted); margin: 14px 0 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
  input, select {
    width: 100%; padding: 14px; border-radius: 14px; border: 1px solid var(--line);
    background: var(--panel); color: var(--txt); font-size: 15px; outline: none;
  }
  input:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(56,214,127,.12); }
  .btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 15px; border: none; border-radius: 16px; cursor: pointer;
    font-size: 16px; font-weight: 800; letter-spacing: .2px;
    background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: var(--ink);
    box-shadow: 0 12px 26px rgba(31,157,87,.32); transition: transform .12s ease, opacity .2s;
  }
  .btn:active { transform: scale(.97); }
  .btn .ic { width: 19px; height: 19px; }
  .btn.ghost { background: var(--panel); color: var(--txt); border: 1px solid var(--line); box-shadow: none; }
  .btn.ghost:active { background: var(--panel-2); }
  .btn.danger { background: transparent; color: var(--danger); border: 1px solid rgba(255,93,108,.35); box-shadow: none; }
  .btn.sm { padding: 9px 13px; font-size: 13px; border-radius: 12px; width: auto; }
  .row { display: flex; gap: 10px; }
  .spacer { flex: 1; }
  .center { text-align: center; }
  .pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px; background: var(--panel-2); border:1px solid var(--line); color: var(--muted); }
  .badge-dot { width:8px;height:8px;border-radius:50%;background:var(--brand-2); box-shadow:0 0 8px var(--brand-2); }
  .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
  .muted { color: var(--muted); }
  .stepdots { display:flex; gap:6px; margin: 0 0 20px; }
  .stepdots i { height:5px; flex:1; border-radius:999px; background: var(--line); }
  .stepdots i.on { background: linear-gradient(90deg,var(--brand),var(--brand-2)); }

  /* ---------- photo helper (img + graceful fallback) ---------- */
  .photo { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--brand-deep), #0a1f14); }
  .photo > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
  .photo > .mono { position:absolute; inset:0; z-index:0; display:grid; place-items:center;
    font-weight:900; color: rgba(56,214,127,.55); letter-spacing:-1px; }

  /* ---------- splash ---------- */
  #splash { padding:0; justify-content: flex-end; }
  #splash .hero { position:absolute; inset:0; z-index:0; }
  #splash .hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(.7) contrast(1.05); }
  #splash .hero .scrim { position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(6,16,10,.35) 0%, rgba(6,16,10,.55) 45%, rgba(6,16,10,.96) 100%),
                radial-gradient(120% 70% at 50% 120%, rgba(31,157,87,.35), transparent 60%); }
  #splash .content { position:relative; z-index:1; padding: 0 26px 46px; text-align:center; }
  #splash .logo { justify-content:center; }
  #splash .logo .num { font-size: 40px; padding: 8px 16px; border-radius: 16px; }
  #splash .logo .word { font-size: 30px; }
  .tagline { color: #c7d8cd; font-size: 15px; max-width: 280px; margin: 16px auto 26px; line-height:1.5; }
  #splash .ghostlink { color:#c7d8cd; font-size:12px; margin-top:16px; cursor:pointer; font-weight:600; }

  /* ---------- selectable grids ---------- */
  .grid { display: grid; gap: 10px; }
  .grid.two { grid-template-columns: 1fr 1fr; }
  .grid.three { grid-template-columns: 1fr 1fr 1fr; }
  .opt {
    border: 1px solid var(--line); background: var(--panel); border-radius: 16px;
    padding: 14px 10px; text-align: center; cursor: pointer; transition: .15s;
    display:flex; flex-direction:column; align-items:center; gap:6px;
  }
  .opt .emoji { font-size: 24px; }
  .opt .t { font-weight: 700; font-size: 14px; }
  .opt .s { font-size: 11px; color: var(--muted); line-height:1.3; }
  .opt.sel { border-color: var(--brand-2); background: linear-gradient(180deg, rgba(56,214,127,.14), rgba(56,214,127,.03)); box-shadow: inset 0 0 0 1px var(--brand-2); }
  .opt:active { transform: scale(.97); }

  /* ---------- discover / swipe ---------- */
  .deck { position: relative; height: 452px; margin: 6px 0 16px; }
  .swipe {
    position: absolute; inset: 0; border-radius: 24px; overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--shadow);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 20px;
    transition: transform .35s ease, opacity .35s ease;
  }
  .swipe .photo { position:absolute; inset:0; z-index:0; }
  .swipe .photo .mono { font-size:130px; }
  .swipe .scrim { position:absolute; inset:0; z-index:1;
    background: linear-gradient(180deg, rgba(6,16,10,.05) 40%, rgba(6,16,10,.4) 68%, rgba(6,16,10,.94) 100%); }
  .deck .swipe { visibility: hidden; }
  .deck .swipe:nth-last-child(-n+2) { visibility: visible; }
  .deck .swipe:nth-last-child(2) { transform: scale(.94) translateY(14px); filter: brightness(.55); }
  .swipe .meta { position: relative; z-index: 2; }
  .swipe .nm { font-size: 25px; font-weight: 900; letter-spacing:-.5px; }
  .swipe .dist { display:inline-flex; align-items:center; gap:5px; color: #cfe0d6; font-size: 13px; margin: 3px 0 12px; font-weight:600; }
  .swipe .dist .ic { width:15px; height:15px; color: var(--brand-2); }
  .tags { display:flex; flex-wrap:wrap; gap:6px; }
  .tag { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(6,16,10,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(4px); }
  .swipe.gone-left { transform: translateX(-140%) rotate(-16deg); opacity: 0; }
  .swipe.gone-right { transform: translateX(140%) rotate(16deg); opacity: 0; }
  .stamp {
    position:absolute; top:26px; z-index:3; font-weight:900; font-size:24px; letter-spacing:2px;
    padding:6px 14px; border-radius:12px; border:3px solid; opacity:0; transition:.15s; text-transform:uppercase;
  }
  .stamp.like { right:20px; color: var(--brand-2); border-color: var(--brand-2); transform: rotate(12deg); }
  .stamp.nope { left:20px; color: var(--danger); border-color: var(--danger); transform: rotate(-12deg); }
  .swipeActions { display:flex; justify-content:center; align-items:center; gap:18px; }
  .fab {
    width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--panel); cursor: pointer; display:grid; place-items:center;
    box-shadow: 0 10px 20px rgba(0,0,0,.4); transition: transform .12s; color: var(--txt);
  }
  .fab:active { transform: scale(.9); }
  .fab .ic { width: 26px; height: 26px; }
  .fab.nope { color: var(--danger); } .fab.nope .ic { stroke-width: 2.6; }
  .fab.star { color: var(--gold); }
  .fab.like { width: 74px; height: 74px; color: var(--ink);
    background: linear-gradient(135deg, var(--brand-2), var(--brand)); border:none;
    box-shadow: 0 14px 30px rgba(31,157,87,.4); }
  .fab.like .ic { width: 34px; height: 34px; stroke-width: 2; }

  /* ---------- activity ---------- */
  .sesh { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
  .sesh .ic-box { width:44px;height:44px;border-radius:12px;background:var(--panel-2);display:grid;place-items:center;font-size:22px;flex:none; }
  .sesh .g { flex:1; min-width:0; }
  .sesh .g .a { font-weight:700; font-size:14px; }
  .sesh .g .b { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sesh .v { text-align:right; font-weight:800; font-size:13px; color: var(--brand-2); }
  .scanbox {
    border: 2px dashed var(--line); border-radius: 20px; padding: 26px 16px; text-align:center;
    background: radial-gradient(120% 120% at 50% 0%, rgba(31,157,87,.08), transparent 70%), var(--panel);
    position: relative; overflow:hidden;
  }
  .scanbox .scanline { position:absolute; left:8%; right:8%; height:3px; background: var(--brand-2); box-shadow:0 0 14px var(--brand-2); border-radius:2px; top:20%; animation: scan 1.6s ease-in-out infinite; opacity:0; }
  .scanbox.scanning .scanline { opacity:.9; }
  @keyframes scan { 0%,100%{ top:18%;} 50%{ top:78%;} }
  .scanbox .cam { color: var(--brand-2); display:inline-grid; }
  .scanbox .cam .ic { width:42px; height:42px; stroke-width:1.6; }
  .statgrid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
  .stat { background: var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; text-align:center; }
  .stat .n { font-size:22px; font-weight:900; }
  .stat .l { font-size:11px; color:var(--muted); margin-top:2px; }

  /* ---------- rewards ladder ---------- */
  .ladder { position: relative; margin-top: 8px; }
  .rung {
    display:flex; align-items:center; gap:14px; padding:14px; border-radius:16px; margin-bottom:12px;
    border:1px solid var(--line); background: var(--panel); position:relative;
  }
  .rung.done { border-color: rgba(56,214,127,.45); background: linear-gradient(90deg, rgba(56,214,127,.10), transparent); }
  .rung.current { border-color: var(--brand-2); box-shadow: 0 0 0 1px var(--brand-2), 0 12px 28px rgba(31,157,87,.22); }
  .rung.locked { opacity:.5; }
  .rung .lvl {
    width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;
    font-weight:900; font-size:20px; background: var(--panel-2); border:1px solid var(--line);
  }
  .rung .lvl .ic { width:22px; height:22px; }
  .rung.done .lvl { background: linear-gradient(135deg,var(--brand-2),var(--brand)); color:var(--ink); border:none; }
  .rung.current .lvl { background: linear-gradient(135deg,var(--brand-2),var(--brand)); color:var(--ink); border:none; }
  .rung .g { flex:1; }
  .rung .g .t { font-weight:800; font-size:15px; }
  .rung .g .d { color:var(--muted); font-size:12px; }
  .rung .st .ic { width:20px; height:20px; }
  .rung.done .st { color: var(--brand-2); } .rung.current .st { color: var(--gold); }
  .progress { height:10px; border-radius:999px; background: var(--panel-2); border:1px solid var(--line); overflow:hidden; }
  .progress > i { display:block; height:100%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); width:0; transition: width .8s ease; }

  /* ---------- matches ---------- */
  .mrow { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer; }
  .mrow:active { opacity:.7; }
  .avatar { width:54px;height:54px;border-radius:50%;flex:none; }
  .avatar .mono { font-size:20px; }
  .mrow .g { flex:1; min-width:0; }
  .mrow .g .a { font-weight:800; font-size:15px; }
  .mrow .g .b { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .empty { text-align:center; color:var(--muted); padding:44px 10px; }
  .empty .ic { width:46px; height:46px; margin:0 auto; color: var(--brand); }

  /* ---------- chat ---------- */
  #chat { padding:0; }
  .chat-head {
    position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px;
    padding:52px 16px 12px; background: rgba(10,18,13,.9); backdrop-filter: blur(12px);
    border-bottom:1px solid var(--line);
  }
  .chat-head .avatar { width:40px;height:40px; }
  .chat-head .avatar .mono { font-size:16px; }
  .chat-head .a { font-weight:800; font-size:15px; }
  .chat-head .b { color:var(--brand-2); font-size:11px; font-weight:700; }
  .chat-head .back { margin:0; color:var(--txt); }
  .chat-head .back .ic { width:26px; height:26px; }
  .chat-body { flex:1; display:flex; flex-direction:column; gap:8px; padding:16px; }
  .bub { max-width:76%; padding:10px 13px; border-radius:16px; font-size:14px; line-height:1.35; }
  .bub.them { align-self:flex-start; background:var(--panel-2); border:1px solid var(--line); border-bottom-left-radius:5px; }
  .bub.me { align-self:flex-end; background:linear-gradient(135deg,var(--brand-2),var(--brand)); color:var(--ink); font-weight:600; border-bottom-right-radius:5px; }
  .bub.typing { color:var(--muted); font-style:italic; }
  .chat-input {
    position:sticky; bottom:0; display:flex; gap:8px; padding:10px 12px 16px;
    background: rgba(10,18,13,.92); backdrop-filter: blur(12px); border-top:1px solid var(--line);
  }
  .chat-input input { border-radius:999px; }
  .chat-input .send { flex:none; width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;color:var(--ink);
    background:linear-gradient(135deg,var(--brand-2),var(--brand)); display:grid; place-items:center; }
  .chat-input .send:active { transform:scale(.9); }
  .chat-input .send .ic { width:20px; height:20px; }

  /* ---------- profile ---------- */
  .prof-hero { text-align:center; margin:6px 0 18px; }
  .prof-hero .avatar { width:96px;height:96px;margin:0 auto 12px; box-shadow: 0 0 0 3px rgba(56,214,127,.25); }
  .prof-hero .avatar .mono { font-size:42px; color: rgba(56,214,127,.8); }
  .prof-hero .nm { font-size:22px; font-weight:900; letter-spacing:-.4px; }
  .prof-hero .sub { color:var(--muted); font-size:13px; margin-top:2px; }
  .kv { display:flex; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; }
  .kv:last-child { border-bottom:none; }
  .kv .k { color:var(--muted); } .kv .v { font-weight:700; text-align:right; }

  /* ---------- bottom nav ---------- */
  .tabbar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 78px; z-index: 30;
    background: rgba(6,16,10,.9); backdrop-filter: blur(16px); border-top: 1px solid var(--line);
    display: none; align-items: stretch; padding: 8px 4px 16px;
  }
  .tabbar.show { display: flex; }
  .tab { flex:1; background:none;border:none;color:var(--muted);cursor:pointer; position:relative; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; font-size:10px; font-weight:700; }
  .tab .ic { width:22px; height:22px; }
  .tab.active { color: var(--brand-2); }
  .tab .dot { position:absolute; top:2px; right:24%; width:8px;height:8px;border-radius:50%;background:var(--brand-2); box-shadow:0 0 8px var(--brand-2); display:none; }
  .tab .dot.show { display:block; }

  .topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .back { background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:0;margin-bottom:6px; display:inline-flex; align-items:center; gap:4px; }
  .toast {
    position:absolute; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px);
    background: var(--panel-2); border:1px solid var(--line); color:var(--txt);
    padding:12px 16px; border-radius:14px; font-size:13px; font-weight:700; z-index:60;
    opacity:0; pointer-events:none; transition:.3s; box-shadow: var(--shadow); white-space:nowrap;
  }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
  .link { color: var(--brand-2); font-weight:700; cursor:pointer; }