:root {
  --text:#172033;
  --muted:#69748d;
  --blue:#1f6fdb;
  --green:#0f8a5f;
  --pink:#ff4d85;
  --orange:#ffb347;
  --line:rgba(24,32,51,.08);
  --safe:env(safe-area-inset-bottom,0px);
}

* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body {
  background:#e9eef9;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
button { border:0; font:inherit; cursor:pointer; }
img { display:block; max-width:100%; }
[hidden] { display:none !important; }

.shell {
  width:min(100%,430px);
  min-height:100vh;
  margin:0 auto;
  overflow:hidden;
  background:linear-gradient(180deg,#fff9f2,#f7f1e8);
  box-shadow:0 0 40px rgba(20,32,60,.12);
}
.page { min-height:100vh; padding-bottom:20px; }
.hero {
  position:relative;
  aspect-ratio:4/4.35;
  overflow:hidden;
  border-radius:0 0 26px 26px;
  background:#e7dcc8;
}
.hero>img { width:100%; height:100%; object-fit:cover; object-position:center top; transition:.28s ease; }
.heroShade { position:absolute; inset:42% 0 0; background:linear-gradient(transparent,rgba(8,46,34,.9)); }
.heroCopy { position:absolute; left:16px; right:16px; bottom:16px; color:#fff; }
.heroCopy h1 { max-width:320px; margin:9px 0 0; font-size:26px; line-height:1.08; letter-spacing:-.03em; }
.heroCopy p { margin:8px 0; font-size:12px; line-height:1.5; color:rgba(255,255,255,.86); }
.heroCopy strong { font-size:11px; }
.badge { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.14); backdrop-filter:blur(8px); font-size:10px; font-weight:900; }
.badge em,.live em { font-style:normal; }
.badge span,.live i { width:7px; height:7px; border-radius:50%; background:#24e088; box-shadow:0 0 0 4px rgba(36,224,136,.14); }

.thumbs { display:flex; gap:6px; margin-top:-8px; padding:6px 12px 8px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; position:relative; z-index:3; }
.thumbs::-webkit-scrollbar { display:none; }
.thumb { flex:0 0 calc((100% - 18px)/4); min-width:70px; padding:3px; border-radius:14px; background:#fff; box-shadow:0 8px 18px rgba(18,28,56,.1); opacity:.82; scroll-snap-align:center; transition:.18s ease; }
.thumb.active { opacity:1; transform:translateY(-2px); outline:2px solid var(--blue); }
.thumb img { width:100%; aspect-ratio:3/4; border-radius:11px; object-fit:cover; }

.content { display:grid; gap:8px; padding:8px 12px 0; }
.card { border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 14px 34px rgba(17,24,39,.12); }
.intro,.trust { padding:14px; }
.card small { color:#8b95ab; font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.intro h2 { margin:6px 0 0; font-size:17px; }
.intro p { margin:6px 0 0; color:var(--muted); font-size:12px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); padding:10px 6px; text-align:center; }
.stats b,.stats span { display:block; }
.stats b { color:#1f3563; font-size:18px; }
.stats span { margin-top:3px; color:#8590a9; font-size:10px; font-weight:800; }
.trustGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.trustGrid div { padding:10px 6px; border:1px solid rgba(31,111,219,.08); border-radius:12px; background:#f3f6ff; text-align:center; }
.trustGrid b,.trustGrid span { display:block; }
.trustGrid b { font-size:12px; }
.trustGrid span { margin-top:3px; color:#7a86a1; font-size:10px; }

.ctaArea { position:relative; padding:10px 12px 0; }
.primary,.accent,.secondary { width:100%; min-height:52px; border-radius:16px; font-weight:900; }
.primary { background:linear-gradient(135deg,var(--blue),var(--green)); color:#fff; box-shadow:0 12px 26px rgba(31,111,219,.28); }
.ctaArea p,.privacy { color:#8993a9; text-align:center; font-size:10px; }
.finger { position:absolute; right:18px; top:28px; width:40px; pointer-events:none; animation:float 1s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(6px); } }

.viewer { min-height:100vh; padding:12px 12px calc(18px + var(--safe)); color:#fff; background:radial-gradient(circle at 50% 0,rgba(255,77,133,.25),transparent 32%),radial-gradient(circle at 15% 24%,rgba(31,111,219,.24),transparent 24%),linear-gradient(180deg,#080912,#10131d 52%,#07080d); }
.loader { min-height:calc(100vh - 24px); display:grid; place-items:center; }
.loaderCard { width:100%; padding:24px 18px; border:1px solid rgba(255,255,255,.14); border-radius:28px; background:rgba(255,255,255,.09); box-shadow:0 28px 80px rgba(0,0,0,.36); text-align:center; backdrop-filter:blur(18px); }
.loaderCard h1 { margin:18px 0 8px; font-size:22px; }
.loaderCard p { margin:0; color:rgba(255,255,255,.7); font-size:13px; }
.radar { position:relative; width:148px; height:148px; margin:auto; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:repeating-radial-gradient(circle,rgba(255,255,255,.18) 0 1px,transparent 2px 38px); }
.radar:before { content:""; position:absolute; left:50%; top:50%; width:50%; height:2px; background:linear-gradient(90deg,#2df58f,transparent); transform-origin:left; animation:scan 1.35s linear infinite; }
.radar img { position:absolute; width:34px; height:34px; border:2px solid #fff; border-radius:50%; object-fit:cover; }
.r1 { left:16px; top:28px; }.r2 { right:20px; top:44px; }.r3 { left:57px; bottom:10px; }
@keyframes scan { to { transform:rotate(360deg); } }
.progress { height:8px; margin-top:18px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.12); }
.progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2df58f,var(--pink)); transition:width .28s ease; }
.progressMeta,.profileTop,.profileStatus,.nameRow { display:flex; align-items:center; justify-content:space-between; }
.progressMeta { margin-top:10px; color:rgba(255,255,255,.65); font-size:11px; }

.profiles { min-height:calc(100vh - 24px); }
.profileTop { padding:2px 2px 10px; color:rgba(255,255,255,.7); font-size:11px; font-weight:900; }
.live { display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(255,255,255,.1); color:#fff; }
.storyBars { display:grid; grid-template-columns:repeat(9,1fr); gap:4px; margin-bottom:10px; }
.storyBars span { height:3px; border-radius:99px; background:rgba(255,255,255,.17); overflow:hidden; }
.storyBars i { display:block; width:0; height:100%; background:#fff; transition:.2s ease; }
.profileCard { position:relative; height:min(620px,calc(100vh - 230px)); min-height:440px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:30px; background:#222; box-shadow:0 26px 70px rgba(0,0,0,.42); touch-action:pan-y; }
.profileCard>img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.profileShade { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.14),transparent 36%,rgba(0,0,0,.9)); }
.profileStatus { position:absolute; top:14px; left:14px; right:14px; }
.profileStatus span { padding:7px 10px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(0,0,0,.28); font-size:11px; font-weight:900; backdrop-filter:blur(10px); }
.profileCopy { position:absolute; left:16px; right:16px; bottom:18px; }
.nameRow { align-items:flex-end; }
.nameRow h2 { margin:0; font-size:31px; letter-spacing:-.04em; }
.nameRow span { font-size:11px; font-weight:900; color:rgba(255,255,255,.78); }
.profileCopy p { margin:9px 0 12px; color:rgba(255,255,255,.88); font-size:14px; line-height:1.45; }
.profileCopy small { color:rgba(255,255,255,.62); font-size:11px; font-weight:800; }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.tags span { padding:7px 10px; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:rgba(255,255,255,.14); font-size:11px; font-weight:850; }
.actions { display:grid; grid-template-columns:1fr 1.4fr; gap:10px; margin-top:12px; }
.secondary { color:#fff; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.14); }
.accent { color:#fff; background:linear-gradient(135deg,var(--pink),var(--orange)); }
.deckNote { margin:9px 4px 0; color:rgba(255,255,255,.58); text-align:center; font-size:11px; font-weight:750; }
.contactLockbar { margin-top:12px; padding:12px; border:1px solid rgba(255,255,255,.14); border-radius:24px; background:rgba(12,15,26,.82); box-shadow:0 20px 54px rgba(0,0,0,.36); backdrop-filter:blur(18px); }
.lockbarTop { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; font-size:12px; font-weight:900; }
.lockbarTime { display:grid; min-width:46px; height:28px; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.12); }
.lockbarProgress { height:7px; margin-bottom:10px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.13); }
.lockbarProgress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2df58f,var(--pink),var(--orange)); transition:width .22s linear; }
.contactUnlockButton { width:100%; min-height:52px; border:1px solid rgba(255,255,255,.14); border-radius:17px; background:rgba(255,255,255,.12); color:rgba(255,255,255,.82); font-weight:950; transition:.22s ease; }
.contactUnlockButton.unlocked { color:#fff; background:linear-gradient(135deg,var(--pink),var(--orange)); box-shadow:0 14px 34px rgba(255,77,133,.3); }
.lockbarHint { min-height:15px; margin-top:8px; color:rgba(255,255,255,.6); text-align:center; font-size:11px; font-weight:760; }
.lockbarHint.warn { color:#ffdf91; }.lockbarHint.ready { color:#9fffc8; }

.modal { position:fixed; inset:0; z-index:20; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.64); }
.sheet { width:min(100%,500px); max-height:92vh; padding:16px 16px calc(20px + var(--safe)); overflow:auto; border-radius:26px 26px 0 0; background:rgba(255,255,255,.98); color:var(--text); box-shadow:0 -24px 60px rgba(0,0,0,.28); }
.handle { width:42px; height:4px; margin:0 auto 16px; border-radius:99px; background:#dfe3ec; }
.sheet h2 { margin:0 0 6px; font-size:21px; }
.sheetSub { margin:0 0 14px; color:#66728d; font-size:13px; line-height:1.55; }
.openerProfile { display:flex; align-items:center; gap:11px; padding:10px; margin-bottom:12px; border:1px solid rgba(24,32,51,.06); border-radius:17px; background:#f7f8fc; }
.openerProfile img { width:52px; height:52px; border-radius:16px; object-fit:cover; }
.openerProfile b,.openerProfile span { display:block; }.openerProfile span { margin-top:3px; color:#7a8498; font-size:11px; font-weight:800; }
.openerList { display:grid; gap:10px; }
.openerList button { padding:14px; border:1px solid #e4e9f3; border-radius:17px; background:#fff; color:var(--text); text-align:left; box-shadow:0 8px 18px rgba(17,24,39,.06); }
.openerList b,.openerList span { display:block; }.openerList b { font-size:14px; }.openerList span { margin-top:5px; color:#7a8498; font-size:11px; line-height:1.4; }
.formRow { display:flex; gap:9px; margin-top:12px; }
.formRow select { flex:0 0 128px; }
.formRow input { min-width:0; flex:1; }
.formRow select,.formRow input,.formInput { height:52px; border:1.5px solid #dce3ef; border-radius:13px; background:#fff; color:var(--text); font:inherit; outline:none; }
.formRow select { padding:0 10px; }.formRow input,.formInput { padding:0 14px; }
.formInput { width:100%; margin-top:9px; }
.formRow input:focus,.formInput:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,111,219,.12); }
.formSubmit { width:100%; min-height:52px; margin-top:12px; border-radius:15px; background:linear-gradient(135deg,var(--blue),var(--green)); color:#fff; font-weight:900; }
.formNote { margin:10px 0 0; color:#9ba4b8; text-align:center; font-size:11px; line-height:1.5; }
.submitDone { padding:18px 8px; text-align:center; }.submitDone p { color:#66728d; font-size:13px; line-height:1.55; }
.doneIcon { display:grid; width:56px; height:56px; margin:0 auto 12px; place-items:center; border-radius:50%; background:#eaf6ea; color:#2e7d32; font-size:26px; font-weight:950; }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }