:root {
    --lami-bg: #020b0d;
    --lami-surface: #06171a;
    --lami-surface-2: #092126;
    --lami-border: rgba(0, 217, 192, 0.22);
    --lami-text: #f5fbfa;
    --lami-muted: #9ab0b2;
    --lami-teal: #00d9c0;
    --lami-teal-strong: #10e6d0;
    --lami-coral: #ff5964;
    --lami-purple: #9b6bd6;
    --lami-orange: #f47b20;
    --lami-radius: 24px;
    --lami-nav-height: 76px;
}
html { background: var(--lami-bg); }
body.lami-body { min-height: 100dvh; background: var(--lami-bg); color: var(--lami-text); }
.lami-body .app-shell { min-height: 100dvh; background: radial-gradient(circle at 82% 0%, rgba(0,217,192,.08), transparent 28%), radial-gradient(circle at 12% 18%, rgba(155,107,214,.06), transparent 26%), var(--lami-bg); }
.lami-body header { border-color: rgba(255,255,255,.06) !important; background: rgba(2,11,13,.82) !important; }
/* Native Capacitor app: use Capacitor SystemBars CSS safe-area insets. */
html.lami-native-app .lami-body header {
    padding-top: calc(var(--safe-area-inset-top, 0px) + 14px) !important;
    box-sizing: border-box;
}
.lami-body main { color: var(--lami-text); }
.lami-body .lami-logo-mark { background: rgba(0,217,192,.12); border: 1px solid rgba(0,217,192,.32); color: var(--lami-teal); }
.lami-body .lami-logo-word { color: var(--lami-text); }
.lami-body .lami-logo-word span { color: var(--lami-teal); }
.lami-body .lami-bottom-nav { min-height: var(--lami-nav-height); border-color: rgba(255,255,255,.08) !important; background: rgba(2,11,13,.92) !important; padding-bottom: var(--safe-area-inset-bottom, 0px); }
.lami-body .lami-bottom-nav a { color: #82999b !important; min-height: 44px; }
.lami-body .lami-bottom-nav a:hover, .lami-body .lami-bottom-nav a[aria-current="page"] { color: var(--lami-teal) !important; }
.lami-body .lami-bottom-nav .lami-nav-icon { font-size: 1.25rem; line-height: 1; }
.lami-body button, .lami-body a.tap, .lami-body input, .lami-body select, .lami-body textarea { -webkit-tap-highlight-color: transparent; }
.lami-body button:not([disabled]), .lami-body a.tap { touch-action: manipulation; }
.lami-body button:focus-visible, .lami-body a:focus-visible, .lami-body input:focus-visible, .lami-body select:focus-visible, .lami-body textarea:focus-visible { outline: 2px solid var(--lami-teal); outline-offset: 3px; }
.lami-body main.auth-content:has(#people) { max-width: 1180px; padding-top: 26px; }
.lami-body main.auth-content:has(#people) > .grid { display: block; }
.lami-body main.auth-content:has(#people) section > div:first-child { align-items: flex-start; margin-bottom: 18px; }
.lami-body main.auth-content:has(#people) section > div:first-child p:first-child { color: var(--lami-teal) !important; letter-spacing: .16em; }
.lami-body main.auth-content:has(#people) section > div:first-child h1 { margin-top: 7px; color: var(--lami-text); font-size: clamp(2rem,7vw,3rem); line-height: 1.05; }
.lami-body main.auth-content:has(#people) section > div:first-child p:last-child { color: var(--lami-muted); }
.lami-body #location-status { border: 1px solid var(--lami-border) !important; background: linear-gradient(135deg, rgba(0,217,192,.10), rgba(6,23,26,.88)) !important; color: var(--lami-muted) !important; box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.lami-body #location-status span:first-child { color: var(--lami-teal); }
.lami-body #people { display: flex !important; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 12px; margin: 0 -2px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lami-body #people::-webkit-scrollbar { display: none; }
.lami-body #people > article { flex: 0 0 min(78vw,290px); min-height: 360px; scroll-snap-align: start; position: relative; overflow: hidden; border: 1px solid rgba(0,217,192,.20) !important; border-radius: 26px !important; background: linear-gradient(180deg, rgba(6,23,26,.02) 30%, rgba(2,11,13,.94) 100%), var(--lami-surface) !important; box-shadow: 0 18px 45px rgba(0,0,0,.30) !important; padding: 0 !important; }
.lami-body #people > article > div:first-child { display: flex; flex-direction: column; align-items: stretch; height: 100%; gap: 0; }
.lami-body #people > article > div:first-child > div:first-child { width: 100%; height: 250px; flex: 0 0 250px; border-radius: 0 !important; background: linear-gradient(135deg,#0b3d3d,#092126) !important; }
.lami-body #people > article > div:first-child > div:first-child img { width: 100%; height: 100%; object-fit: cover; }
.lami-body #people > article > div:first-child > div:last-child { min-width: 0; padding: 17px 17px 18px; }
.lami-body #people h2 { color: var(--lami-text); font-size: 1.08rem; }
.lami-body #people p { color: var(--lami-muted); }
.lami-body #people p.text-indigo-600 { color: var(--lami-teal) !important; }
.lami-body #people .bg-emerald-50 { background: rgba(0,217,192,.10) !important; color: var(--lami-teal) !important; }
.lami-body #people button.bg-slate-950 { background: var(--lami-teal) !important; color: #02100f !important; }
.lami-body #people button.bg-slate-950:hover { background: var(--lami-teal-strong) !important; }
.lami-body #people .bg-indigo-50 { background: rgba(0,217,192,.10) !important; border-color: rgba(0,217,192,.22) !important; color: var(--lami-teal) !important; }
.lami-body #people .bg-emerald-50, .lami-body #people .bg-indigo-50, .lami-body #people .bg-amber-50 { border-color: rgba(0,217,192,.20) !important; }
/* Discovery card: one fixed-height surface with the photo behind the relationship UI. */
.lami-body #people > article { height: min(74vh, 640px) !important; min-height: 0 !important; }
.lami-body #people > article > div:first-child { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; }
.lami-body #people > article > div:first-child > div:first-child { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; flex: none !important; border-radius: 0 !important; }
.lami-body #people > article > div:first-child > div:first-child img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.lami-body #people > article > div:first-child > div:last-child { position: absolute !important; inset: auto 0 0 0 !important; z-index: 3 !important; width: 100% !important; min-width: 0 !important; padding: 150px 18px 18px !important; box-sizing: border-box !important; background: linear-gradient(to bottom, rgba(2,11,13,0), rgba(2,11,13,.18) 12%, rgba(2,11,13,.72) 42%, rgba(2,11,13,.97) 78%, rgba(2,11,13,1) 100%) !important; }
.lami-body #people > article > div:first-child > div:last-child::before { content: ""; position: absolute; left: 0; right: 0; top: -150px; bottom: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(2,11,13,0), rgba(2,11,13,.58) 70%, rgba(2,11,13,.96) 100%); }
.lami-body #people > article h2 { position: relative; z-index: 2; color: var(--lami-text) !important; }
.lami-body #people > article p { position: relative; z-index: 2; }
.lami-body #people > article button, .lami-body #people > article span { position: relative; z-index: 2; }
/* Keep Lami's actual relationship controls, but make them legible over the photo. */
.lami-body #people > article button.bg-slate-950 { background: var(--lami-teal) !important; color: #02100f !important; }
.lami-body #people > article .bg-emerald-50 { background: rgba(0,217,192,.14) !important; color: var(--lami-teal) !important; }
.lami-body #people > article .bg-indigo-50 { background: rgba(0,217,192,.14) !important; color: var(--lami-teal) !important; }
.lami-body #people > article .bg-amber-50 { background: rgba(120,80,20,.62) !important; color: #ffe7a3 !important; }
.lami-body #people > article .border-slate-200 { border-color: rgba(255,255,255,.16) !important; }
.lami-body #people > article .bg-white { background: rgba(2,11,13,.72) !important; color: var(--lami-text) !important; }
@media (min-width:640px) { .lami-body #people > article { flex-basis: 300px; } }
@media (min-width:1024px) { .lami-body main.auth-content:has(#people) { padding-bottom: 7rem; } .lami-body #people { gap: 18px; } .lami-body #people > article { flex-basis: 300px; } }
@media (max-width:639px) { .lami-body main.auth-content { padding-left:16px; padding-right:16px; padding-top:22px; padding-bottom:calc(var(--lami-nav-height) + env(safe-area-inset-bottom) + 24px); } .lami-discovery-heading { align-items:flex-start; } .lami-discovery-subtitle { max-width:310px; } .lami-nearby-summary { margin-top:.9rem; } .lami-connection-panel { min-height:176px; padding:1.25rem 1rem; } .lami-connection-copy { max-width:62%; } .lami-connection-title { font-size:1.18rem; } .lami-radar { width:145px; height:145px; margin-right:-42px; } .lami-radar-ring.r3 { width:140px; height:140px; } .lami-radar-ring.r2 { width:94px; height:94px; } .lami-radar-ring.r1 { width:50px; height:50px; } }
@media (prefers-reduced-motion:reduce) { .lami-body * { scroll-behavior:auto !important; } .lami-radar, .lami-radar * { animation:none !important; } }