@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#0F2A3D; --sea:#1C6E8C; --sea-light:#4C9CB8; --coral:#FF6F59;
  --sand:#FBF6EE; --gold:#C89B4A; --white:#FFFFFF; --line: rgba(15,42,61,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter', sans-serif;
  background: linear-gradient(180deg, #0F2A3D 0%, #16405A 45%, #1C6E8C 100%);
  min-height:100vh; display:flex; align-items:flex-start; justify-content:center;
  padding:24px 12px; color:var(--ink);
}
h1,h2,h3{font-family:'Fraunces', serif;}
a{color:var(--sea);}

.shell{
  width:100%; max-width:460px; background:var(--sand); border-radius:20px; overflow:hidden;
  box-shadow: 0 24px 50px rgba(0,0,0,0.3); min-height:80vh; display:flex; flex-direction:column;
}

.topbar{ padding:16px 20px 12px; background:var(--sand); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.brand{display:flex; align-items:center; gap:8px;}
.brand-name{font-family:'Fraunces',serif; font-weight:700; font-size:20px; color:var(--ink); display:flex; align-items:center; gap:6px;}
.free-badge{ font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); background: linear-gradient(120deg, #F3DFA6, var(--gold), #F3DFA6); padding:4px 9px; border-radius:20px; border:1px solid rgba(0,0,0,0.08); }
.ad-ribbon{ background:var(--ink); color:var(--sand); font-size:11px; font-weight:600; text-align:center; padding:7px 14px; }
.ad-ribbon b{color:var(--gold);}

.screen{flex:1; display:flex; flex-direction:column; overflow:hidden;}
.scroll{flex:1; overflow-y:auto; padding:20px 20px 90px;}

.navbar{ position:sticky; bottom:0; background:var(--white); border-top:1px solid var(--line); display:flex; padding:8px 10px calc(10px + env(safe-area-inset-bottom)); gap:4px; }
.navbtn{ flex:1; background:none; border:none; cursor:pointer; padding:8px 4px; border-radius:14px; display:flex; flex-direction:column; align-items:center; gap:4px; color:#7C8B93; font-size:11px; font-weight:600; position:relative; }
.navbtn.active{color:var(--sea); background:rgba(28,110,140,0.08);}
.navbtn .dot{position:absolute; top:2px; right:18%; width:8px;height:8px;border-radius:50%; background:var(--coral);}

.hero-wave{ height:110px; background: linear-gradient(160deg, var(--sea) 0%, var(--sea-light) 100%); position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; color:var(--white); }
.hero-wave h1{font-size:24px; color:var(--white);}
.hero-wave p{font-size:11.5px; opacity:0.9; margin-top:4px;}
.hero-wave svg.horizon{position:absolute; bottom:-1px; left:0; width:100%; height:24px;}

.step-dots{display:flex; gap:6px; justify-content:center; margin:16px 0 4px;}
.step-dot{width:7px;height:7px;border-radius:50%; background:var(--line);}
.step-dot.active{background:var(--coral); width:18px; border-radius:5px;}

label{display:block; font-size:12px; font-weight:600; color:#5A6C76; margin:14px 0 6px; text-transform:uppercase; letter-spacing:0.04em;}
.hint{font-size:11.5px; color:#8B98A0; margin-top:5px; line-height:1.4;}
input, textarea{ width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink); background:var(--white); outline:none; }
input:focus, textarea:focus{border-color:var(--sea);}
textarea{resize:none; min-height:90px;}
.char-count{font-size:11px; text-align:right; margin-top:4px; color:#B0454B; font-weight:600;}
.char-count.ok{color:#3E8E6B;}

.btn-primary{ width:100%; background:var(--coral); color:white; border:none; padding:14px; border-radius:14px; font-weight:700; font-size:15px; cursor:pointer; margin-top:20px; }
.btn-primary:disabled{background:#D8B9B1; cursor:not-allowed;}
.btn-secondary{width:100%; background:transparent; color:var(--sea); border:1.5px solid var(--sea); padding:11px; border-radius:14px; font-weight:700; font-size:13.5px; cursor:pointer; margin-top:10px;}
.btn-ghost{width:100%; background:none; border:none; color:#8B98A0; font-size:12.5px; font-weight:600; padding:10px; cursor:pointer;}
.field-error{color:var(--coral); font-size:12px; margin-top:6px; font-weight:600;}
.field-ok{color:#3E8E6B; font-size:12px; margin-top:6px; font-weight:600;}
.consent-row{display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:12.5px; color:#5A6C76; line-height:1.4;}
.consent-row input{width:auto; margin-top:2px;}
.link-row{text-align:center; margin-top:16px; font-size:12.5px; color:#5A6C76;}

.info-card{background:white; border-radius:16px; padding:16px; margin-top:14px; border:1px solid var(--line);}
.info-card h4{font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:#8B98A0; margin-bottom:8px;}
.info-card p{font-size:13.5px; line-height:1.5;}

.deck{position:relative; height:460px; margin-top:6px;}
.card{position:absolute; inset:0; border-radius:22px; overflow:hidden; box-shadow:0 18px 40px rgba(15,42,61,0.25); display:flex; flex-direction:column; justify-content:flex-end; color:white; background-size:cover; background-position:center;}
.card .avatarblock{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; font-size:100px; color:rgba(255,255,255,0.35); background:var(--sea);}
.timer-pill{ position:absolute; top:14px; right:14px; background:rgba(15,42,61,0.75); color:white; font-size:12px; font-weight:700; padding:6px 12px; border-radius:20px; }
.card-info{position:relative; padding:18px 18px 20px; background:linear-gradient(0deg, rgba(15,42,61,0.92) 0%, rgba(15,42,61,0.55) 55%, rgba(15,42,61,0.0) 100%); max-height:78%; overflow-y:auto;}
.card-info h2{font-size:21px; color:white; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.card-info h2 span{font-family:'Inter',sans-serif; font-weight:500; font-size:15px; opacity:0.85;}
.card-info p{font-size:12.8px; margin-top:6px; opacity:0.94; line-height:1.45;}
.card-info .funfact{margin-top:8px; font-size:12px; opacity:0.9; font-style:italic; border-left:2px solid var(--gold); padding-left:8px;}
.card-info .loc{font-size:11px; margin-top:9px; opacity:0.8; font-weight:600;}

.swipe-actions{display:flex; justify-content:center; align-items:center; gap:18px; margin-top:18px;}
.round-btn{width:58px;height:58px;border-radius:50%; border:none; cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 20px rgba(15,42,61,0.18);}
.round-btn.pass{background:white; color:#B94B3E;}
.round-btn.like{background:var(--coral); color:white;}
.round-btn svg{width:26px;height:26px;}
.round-btn:disabled{opacity:0.35; cursor:not-allowed;}
.swipe-hint{text-align:center; font-size:11.5px; color:#8B98A0; margin-top:10px; font-weight:600;}
.empty-state{text-align:center; padding:60px 20px; color:#7C8B93;}
.empty-state h3{color:var(--ink); margin-bottom:8px; font-size:19px;}

.ad-overlay{position:absolute; inset:0; background:rgba(15,42,61,0.75); display:flex; align-items:center; justify-content:center; z-index:50; padding:22px;}
.ad-card{background:white; border-radius:20px; width:100%; max-width:320px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,0.4);}
.ad-label{background:#EFE6D2; color:#8A6D2F; font-size:10px; font-weight:700; text-transform:uppercase; padding:6px 14px; text-align:center;}
.ad-body{background:linear-gradient(135deg, var(--gold), #E8C784); padding:32px 20px; text-align:center; color:#4A3A12;}
.ad-body .ad-icon{font-size:38px; display:block; margin-bottom:8px;}
.ad-why{background:var(--ink); color:var(--sand); font-size:11.5px; padding:12px 18px; line-height:1.5; text-align:center;}
.ad-why b{color:var(--gold);}
.ad-footer{padding:14px 18px 18px; display:flex; flex-direction:column; gap:8px;}
.ad-footer .continue-btn{width:100%; padding:12px; border-radius:12px; border:none; background:var(--ink); color:white; font-weight:700; cursor:pointer;}
.ad-footer .continue-btn:disabled{background:#C7CDD1; cursor:not-allowed;}
.ad-footer .premium-link{width:100%; padding:10px; border-radius:12px; border:1.5px solid var(--gold); background:none; color:#8A6D2F; font-weight:700; font-size:12.5px; cursor:pointer;}

.match-row{display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line); cursor:pointer;}
.match-avatar{width:50px;height:50px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:'Fraunces',serif; font-weight:700; color:white; font-size:18px; flex-shrink:0; background:var(--sea);}
.match-name{font-weight:700; font-size:14.5px;}
.match-preview{font-size:12.5px; color:#7C8B93; margin-top:2px;}
.section-title{font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:#8B98A0; font-weight:700; margin:4px 0 10px;}

.chat-header{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--sand);}
.chat-header .match-avatar{width:38px;height:38px;font-size:14px;}
.back-btn{background:none;border:none;cursor:pointer;color:var(--ink);}
.chat-messages{flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px;}
.bubble{max-width:75%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.4;}
.bubble.them{background:white; border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px;}
.bubble.me{background:var(--sea); color:white; align-self:flex-end; border-bottom-right-radius:4px;}
.chat-input-row{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); background:var(--sand);}
.chat-input-row input{flex:1;}
.send-btn{width:42px;height:42px;border-radius:12px;border:none; background:var(--coral); color:white; cursor:pointer;}
.chat-immutable-note{font-size:10.5px; color:#96A2A9; text-align:center; padding:6px 18px 0;}

.profile-hero{display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 0 8px;}
.profile-avatar{width:80px;height:80px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:'Fraunces',serif; font-weight:700; font-size:28px; color:white; background:var(--sea); background-size:cover; background-position:center;}
.verif-badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; background:rgba(28,110,140,0.1); color:var(--sea);}

.tier-card{background:linear-gradient(135deg, var(--ink), #1C4A63); border-radius:16px; padding:18px; margin-top:14px; color:white;}
.tier-top{display:flex; align-items:center; gap:12px;}
.tier-icon{font-size:32px;}
.tier-name{font-family:'Fraunces',serif; font-size:18px; font-weight:700;}
.progress-track{background:rgba(255,255,255,0.15); border-radius:10px; height:8px; margin-top:14px; overflow:hidden;}
.progress-fill{background:linear-gradient(90deg, var(--gold), #F3DFA6); height:100%; border-radius:10px;}
.score-breakdown{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
.score-item{background:rgba(255,255,255,0.08); border-radius:10px; padding:9px 10px;}
.score-item b{display:block; font-family:'Fraunces',serif; font-size:16px;}
.score-item span{font-size:10px; opacity:0.75; text-transform:uppercase;}

.premium-card{background:linear-gradient(135deg, var(--gold), #E8C784); border-radius:16px; padding:18px; margin-top:14px; color:#4A3A12;}
.premium-price{font-family:'Fraunces',serif; font-size:26px; font-weight:700; margin:6px 0;}
.premium-list{list-style:none; margin-top:10px; font-size:12.5px; line-height:1.9;}
.premium-list li:before{content:"✓ ";}
.premium-btn{width:100%; padding:11px; border-radius:12px; border:none; background:var(--ink); color:white; font-weight:700; cursor:pointer; margin-top:12px;}

.upload-box{border:2px dashed var(--line); border-radius:14px; padding:24px; text-align:center; margin:10px 0; color:#8B98A0; font-size:12.5px; cursor:pointer;}
.photo-thumb{width:72px; height:72px; border-radius:12px; object-fit:cover; margin:4px; display:inline-block; position:relative;}
.photo-status{font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 6px; border-radius:6px; position:absolute; bottom:2px; right:2px;}
.photo-status.pending{background:#F0D9A0; color:#5A4A1F;}
.photo-status.approved{background:#B7E2C9; color:#1F5A34;}

.bottom-ad-banner{
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(90deg, #FBF3E3, #F3E3C4);
  border-top:1px solid var(--line);
  padding:8px 14px;
  font-size:11.5px;
}
.bottom-ad-tag{ background:#8A6D2F; color:white; font-size:9px; font-weight:700; padding:2px 6px; border-radius:5px; letter-spacing:0.04em; flex-shrink:0; }
.bottom-ad-icon{ flex-shrink:0; }
.bottom-ad-text{ flex:1; color:#5A4A1F; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bottom-ad-why{ font-size:10px; color:#8A6D2F; opacity:0.8; flex-shrink:0; font-style:italic; }

.footer-links{font-size:10.5px; color:#96A2A9; text-align:center; margin-top:22px; padding:0 8px; line-height:1.8;}
.footer-links a{color:#8B98A0; text-decoration:underline;}
.disclaimer{font-size:10.5px; color:#96A2A9; line-height:1.5; text-align:center; margin-top:22px; padding:0 8px;}
.reset-link{display:block; text-align:center; margin-top:16px; font-size:12px; color:#B0454B; cursor:pointer; font-weight:600;}
.error-banner{background:#FBE3DF; color:#8A2E20; border-radius:12px; padding:10px 14px; font-size:12.5px; font-weight:600; margin-top:10px;}
.success-banner{background:#DCEFE1; color:#1F5A34; border-radius:12px; padding:10px 14px; font-size:12.5px; font-weight:600; margin-top:10px;}