/* ==========================================================================
   Merj — mobile-first prototype styles
   Breakpoint strategy: base styles target ~360-400px phones.
   min-width steps: 480 (large phones), 600 (small tablets / phone landscape),
   768 (tablets), 1024 (small laptop), 1280 (desktop) — the most common
   device breakpoints in current traffic data.
   ========================================================================== */

:root{
  --bg: #ffffff;
  --bg-alt: #f8f3fb;
  --surface: #ffffff;
  --surface-2: #f3ecf9;
  --border: #e7dcef;
  --text: #241129;
  --muted: #6b5b74;
  --muted-2: #7d6d86;
  --primary: #ff3b6e;
  --primary-2: #ff7a3d;
  --accent: #9b5cff;
  --success: #14976a;
  --danger: #e02f4a;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 12px 32px rgba(80,40,110,0.14);
  --gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 55%, var(--accent) 100%);
  --nav-h: 64px;
  --header-h: 56px;
  --max-app-width: 430px;
  --font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
[hidden]{ display:none !important; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  line-height: 1.4;
}
h1,h2,h3,h4{ margin: 0 0 8px; line-height: 1.2; }
p{ margin: 0 0 12px; }
.muted{ color: var(--muted); }
.muted-sm{ color: var(--muted-2); font-size: 13px; margin: 2px 0 10px; }
button{ font-family: inherit; }
a{ color: var(--primary-2); }
img{ max-width: 100%; display:block; }

::-webkit-scrollbar{ width: 6px; height:6px; }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 4px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius: 999px; padding: 12px 20px; font-size: 15px; font-weight:600;
  cursor:pointer; transition: transform .12s ease, opacity .12s ease; text-align:center;
}
.btn:active{ transform: scale(0.97); }
.btn--primary{ background: var(--gradient); color:#fff; box-shadow: 0 6px 18px rgba(255,59,110,0.35); }
.btn--outline{ background: transparent; border: 1.5px solid var(--border); color: var(--text); }
.google-btn{ gap:10px; background: var(--surface); }
.btn--ghost{ background: var(--surface); color: var(--text); }
.btn--danger{ background: var(--danger); color:#fff; }
.btn--danger-ghost{ background: transparent; border: 1.5px solid var(--danger); color: var(--danger); }
.btn--sm{ padding: 8px 14px; font-size: 13px; }
.btn--lg{ padding: 15px 26px; font-size: 16px; }
.btn--block{ display:flex; width:100%; margin-bottom: 10px; }
.link-btn{ background:none; border:none; color: var(--primary-2); font-weight:600; cursor:pointer; font-size: 14px; }
.icon-btn{
  background: var(--surface); border:1px solid var(--border); color: var(--text); width:38px; height:38px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer;
}

.pill{ display:inline-block; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing:.02em; }
.pill--accent{ background: rgba(255,59,110,0.15); color: var(--primary-2); border: 1px solid rgba(255,59,110,0.4); }

/* ---------- Screens (single-page app pattern) ---------- */
.screen{ display:none; }
.screen.is-active{ display:block; }

/* App-mode screens (everything except landing) live in a frame */
.app-frame > .screen{
  display:none; min-height: 100vh; position: relative; background: var(--bg);
}
.app-frame > .screen.is-active{ display:flex; flex-direction:column; min-height:100vh; }

/* ---------- Landing ---------- */
.screen--landing{ padding-bottom: 40px; }
.landing-nav{
  padding: 16px 20px; position: sticky; top:0; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); z-index: 5;
  border-bottom: 1px solid var(--border);
}
.landing-nav-inner{
  display:flex; align-items:center; justify-content:space-between; max-width: 1200px; margin: 0 auto;
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:20px; }
.brand-mark{
  width:32px;height:32px;border-radius:10px; background: var(--gradient); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800;
}
.brand-mark--sm{ width:26px; height:26px; border-radius:8px; font-size:13px; }

.hero{ padding: 28px 20px 8px; text-align:center; }
.hero h1{ font-size: 34px; margin: 14px 0 12px; letter-spacing:-0.02em; }
.hero-sub{ color: var(--muted); font-size: 15px; max-width: 480px; margin: 0 auto 22px; }
.hero-cta{ display:flex; flex-direction:column; gap:10px; max-width: 340px; margin: 0 auto 28px; }
.trust-strip{ display:flex; justify-content:center; gap: 22px; flex-wrap:wrap; margin-bottom: 8px; }
.trust-item{ display:flex; flex-direction:column; align-items:center; font-size:12px; color: var(--muted-2); }
.trust-item strong{ color: var(--text); font-size: 14px; }

.feature-grid{
  display:grid; grid-template-columns: 1fr; gap: 14px; padding: 28px 20px; max-width: 1100px; margin: 0 auto;
}
.feature-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.feature-icon{ font-size: 26px; margin-bottom: 8px; }
.feature-card h3{ font-size: 16px; }
.feature-card p{ color: var(--muted); font-size: 14px; margin:0; }

.landing-footer{ text-align:center; padding: 20px; color: var(--muted-2); font-size: 13px; }

/* ---------- App frame (phone shell) ---------- */
.app-frame{ display:none; background: var(--bg); }
.app-frame.is-open{ display:block; }

/* ---------- App header ---------- */
.app-header{
  height: var(--header-h); min-height: var(--header-h); display:flex; align-items:center; justify-content:space-between;
  padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--bg-alt); position: sticky; top:0; z-index: 4;
}
.app-header-title{ font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px; }
.header-actions{ display:flex; gap:8px; }

/* ---------- Bottom nav ---------- */
.bottom-nav{
  height: var(--nav-h); display:flex; border-top: 1px solid var(--border); background: var(--bg-alt);
  position: sticky; bottom:0; margin-top:auto; z-index:4;
}
.nav-btn{
  flex:1; background:none; border:none; color: var(--muted-2); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; font-size: 11px; cursor:pointer; position:relative;
}
.nav-btn span:first-child{ font-size: 18px; }
.nav-btn.is-active{ color: var(--primary-2); }
.nav-badge{
  position:absolute; top:6px; right: calc(50% - 22px); background: var(--danger); color:#fff; font-size:10px;
  width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}

/* ---------- Scroll panels ---------- */
.scroll-panel{ flex:1; overflow-y:auto; padding: 16px 16px 28px; }
.panel-section{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.panel-section h4{ font-size: 14px; text-transform: uppercase; letter-spacing:.04em; color: var(--muted); margin-bottom: 8px; }

/* ---------- Onboarding ---------- */
.onboard-wrap{ padding: 20px; max-width: 480px; margin: 0 auto; width:100%; }
.progress-bar{ height:4px; background: var(--border); border-radius:2px; margin-bottom: 22px; overflow:hidden; }
.progress-fill{ height:100%; width: 16.6%; background: var(--gradient); transition: width .25s ease; }
.ob-step{ display:none; }
.ob-step.is-active{ display:block; animation: fadeIn .2s ease; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

.field{ display:block; margin-bottom: 14px; font-size: 13px; color: var(--muted); font-weight:600; }
.field input, .field textarea, .field-select{
  display:block; width:100%; margin-top:6px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-size:15px; font-family: inherit;
}
.field-select{ margin-bottom: 12px; }
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--primary); }
.field-hint{ display:block; font-weight:400; font-size: 12px; color: var(--muted-2); margin-top: 5px; }

.choice-row{ display:flex; flex-direction:column; gap:10px; margin-bottom: 6px; }
.choice-card{
  text-align:left; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; cursor:pointer; color: var(--text); display:flex; flex-direction:column; gap:2px;
}
.choice-card strong{ font-size:14px; }
.choice-card span{ font-size:12px; color: var(--muted-2); }
.choice-card.is-selected{ border-color: var(--primary); background: rgba(255,59,110,0.08); }

.photo-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.photo-slot{
  aspect-ratio: 3/4; border-radius: var(--radius-sm); border: 1.5px dashed var(--border); background: var(--surface);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; font-size:11px;
  color: var(--muted-2); cursor:pointer; position:relative; overflow:hidden; text-align:center; padding:6px;
}
.photo-slot input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.photo-slot.has-photo{ border-style: solid; }
.photo-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-slot .scan-badge{
  position:absolute; bottom:4px; left:4px; right:4px; background: rgba(0,0,0,0.6); border-radius:6px;
  font-size:9px; padding:3px 4px; text-align:center; color: var(--success); z-index:1;
}

.chip-group{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  background: var(--surface); border: 1.5px solid var(--border); color: var(--text); border-radius:999px;
  padding: 8px 14px; font-size: 13px; cursor:pointer;
}
.chip.is-selected{ background: var(--gradient); border-color: transparent; color:#fff; font-weight:600; }

.toggle-row{ display:flex; align-items:center; gap:12px; margin-bottom: 14px; font-size: 13px; cursor:pointer; }
.toggle-row span:first-child{ flex:1; color: var(--text); }
.toggle-row em{ color: var(--muted-2); font-style:normal; display:block; font-size:11px; margin-top:2px; }
.toggle-row input[type=checkbox]{ display:none; }
.toggle-switch{ width:40px; height:24px; border-radius:999px; background: var(--border); position:relative; flex-shrink:0; transition: background .15s; }
.toggle-switch::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition: transform .15s; }
.toggle-row input:checked + .toggle-switch{ background: var(--primary); }
.toggle-row input:checked + .toggle-switch::after{ transform: translateX(16px); }
.toggle-switch::after{ box-shadow: 0 1px 3px rgba(60,20,80,0.3); }

.otp-row{ display:flex; gap:6px; margin: 16px 0; }
.otp-box{ flex:1; min-width:0; height:56px; text-align:center; font-size:20px; border-radius: var(--radius-sm); border:1.5px solid var(--border); background: var(--surface); color: var(--text); }

.ob-nav{ display:flex; gap:10px; margin-top: 20px; }
.ob-nav .btn{ flex:1; }

/* ---------- Discover filter summary + blind date banner ---------- */
.filter-summary{ display:flex; gap:8px; padding: 10px 16px 0; overflow-x:auto; }
.filter-chip{
  flex-shrink:0; background: var(--surface-2); border:1px solid var(--border); color: var(--text);
  border-radius:999px; padding:7px 12px; font-size:12.5px; cursor:pointer; white-space:nowrap;
}
.filter-chip--main{ background: var(--gradient); color:#fff; border-color:transparent; font-weight:600; }
.blind-date-banner{
  display:flex; align-items:center; justify-content:space-between; width: calc(100% - 32px); margin: 10px 16px 0;
  background: linear-gradient(135deg, rgba(155,92,255,0.14), rgba(255,59,110,0.14)); border:1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; font-size:13px; font-weight:600; color: var(--text); cursor:pointer;
}
.blind-date-banner span{ color: var(--primary-2); }

/* ---------- Discover / swipe deck ---------- */
.swipe-meter{ padding: 10px 16px 4px; }
.swipe-meter-bar{ height:5px; background: var(--surface-2); border-radius: 3px; overflow:hidden; }
.swipe-meter-fill{ height:100%; background: var(--gradient); width:100%; transition: width .2s; }
.swipe-meter span{ display:block; font-size: 11px; color: var(--muted-2); margin-top:5px; }
#swipeCount{ font-size:11px; color: var(--muted-2); margin-top:5px; }

.deck-area{ position:relative; flex:1; padding: 10px 16px; display:flex; align-items:center; justify-content:center; min-height: 380px; }
.swipe-card{
  position:absolute; width: calc(100% - 32px); max-width: 360px; height: 100%; max-height: 520px; border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow); cursor:grab; user-select:none; touch-action:none;
  background: var(--surface); border: 1px solid var(--border);
}
.swipe-card:active{ cursor:grabbing; }
.card-photo{
  height: 60%; background: var(--gradient); background-size:cover; background-position:center top; background-repeat:no-repeat;
  display:flex; align-items:center; justify-content:center;
  font-size: 64px; font-weight:800; color: rgba(255,255,255,0.9); position:relative;
}
.card-photo .lock-badge{
  position:absolute; top:12px; right:12px; background: rgba(0,0,0,0.45); color:#fff; font-size:11px;
  padding: 5px 10px; border-radius:999px; display:flex; align-items:center; gap:4px;
}
.card-body{ padding: 14px 16px 20px; }
.card-name-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.card-name-row h3{ font-size:19px; margin:0; }
.card-name-row .distance{ font-size:12px; color: var(--muted-2); margin-left:auto; }
.card-tags{ display:flex; flex-wrap:wrap; gap:6px; margin: 8px 0; }
.card-tags .tag{ font-size:10px; background: var(--surface-2); border-radius:999px; padding:4px 9px; color: var(--muted); }
.card-bio{ font-size:13px; color: var(--muted); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-verified{ font-size:11px; color: var(--success); display:flex; align-items:center; gap:4px; margin-top:10px; }

.stamp{ position:absolute; top:26px; font-size: 26px; font-weight:800; padding: 6px 14px; border-radius:8px; border:4px solid; text-transform:uppercase; opacity:0; pointer-events:none; letter-spacing:.05em; }
.stamp--like{ left:20px; color: var(--success); border-color: var(--success); transform: rotate(-14deg); }
.stamp--pass{ right:20px; color: var(--danger); border-color: var(--danger); transform: rotate(14deg); }

.deck-empty, .deck-outofswipes{ text-align:center; padding: 20px; max-width:300px; }
.deck-empty-icon{ font-size:40px; margin-bottom:10px; }

.swipe-controls{ display:flex; justify-content:center; align-items:center; gap: 22px; padding: 14px 16px 20px; }
.round-btn{
  width:56px; height:56px; border-radius:50%; border:none; font-size:22px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; box-shadow: 0 8px 18px rgba(0,0,0,0.3);
}
.round-btn--pass{ background: var(--surface); color: var(--danger); border:1px solid var(--border); }
.round-btn--like{ background: var(--gradient); color:#fff; width:64px; height:64px; font-size:26px; }
.round-btn--info{ background: var(--surface); color: var(--muted); width:44px; height:44px; font-size:16px; border:1px solid var(--border); }

/* ---------- Matches list ---------- */
.empty-state{ text-align:center; padding: 60px 20px; }
.match-row{
  display:flex; align-items:center; gap:12px; padding: 12px; border-radius: var(--radius); background: var(--surface);
  border:1px solid var(--border); margin-bottom: 10px; cursor:pointer;
}
.match-row .last-msg{ font-size:12px; color: var(--muted-2); margin:2px 0 0; }
.match-row .match-meta{ margin-left:auto; text-align:right; font-size:11px; color: var(--muted-2); }
.match-row.is-new .last-msg{ color: var(--primary-2); font-weight:600; }

.avatar{
  width:48px; height:48px; border-radius:50%; background: var(--gradient); background-size:cover; background-position:center top;
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px;
}
.avatar--lg{ width:84px; height:84px; font-size:30px; }
.avatar--xl{ width:96px; height:96px; font-size:34px; margin: 0 auto 10px; }

/* ---------- Chat ---------- */
.chat-thread{ flex:1; overflow-y:auto; padding: 16px; display:flex; flex-direction:column; gap:10px; }
.msg{ max-width:75%; padding: 10px 14px; border-radius: 16px; font-size: 14px; }
.msg--them{ background: var(--surface-2); align-self:flex-start; border-bottom-left-radius:4px; }
.msg--me{ background: var(--gradient); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.msg--system{ align-self:center; font-size:11px; color: var(--muted-2); background:none; }
.chat-input-row{ display:flex; gap:8px; padding: 10px 12px; border-top:1px solid var(--border); background: var(--bg-alt); }
.chat-input-row input{ flex:1; padding: 11px 14px; border-radius:999px; border:1.5px solid var(--border); background: var(--surface); color: var(--text); font-size:14px; }
.chat-input-row input:focus{ outline:none; border-color: var(--primary); }

/* ---------- Profile ---------- */
.profile-hero{ text-align:center; padding: 20px 0 6px; }
.badge-row{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:6px; }
.badge{ font-size:11px; background: var(--surface-2); border-radius:999px; padding: 4px 10px; color: var(--muted); display:flex; align-items:center; gap:4px; }
.badge--verified{ color: var(--success); }

.verify-item{ display:flex; align-items:center; gap:10px; padding: 10px 0; border-bottom:1px solid var(--border); }
.verify-item:last-child{ border-bottom:none; }
.verify-item div{ flex:1; }
.verify-item strong{ font-size:13px; }
.verify-status{
  width:26px; height:26px; border-radius:50%; background: var(--surface-2); color: var(--muted-2); display:flex;
  align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.verify-status--done{ background: var(--success); color:#08331f; }

.locked-panel{ text-align:center; padding: 18px; background: var(--surface-2); border-radius: var(--radius-sm); color: var(--muted-2); font-size:13px; margin-top:8px; }
.locked-panel .lock-icon{ font-size:22px; margin-bottom:6px; }

.social-list{ display:flex; flex-direction:column; gap:8px; }
.social-row{ display:flex; align-items:center; gap:10px; background: var(--surface-2); border-radius: var(--radius-sm); padding:10px 12px; font-size:13px; }

.safety-list{ margin:0; padding-left:18px; color: var(--muted); font-size:13px; display:flex; flex-direction:column; gap:10px; }
.safety-list li::marker{ color: var(--primary-2); }

/* ---------- Filters ---------- */
.sort-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sort-list li{ background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 14px; font-size:13px; cursor:grab; }
.sort-list li.dragging{ opacity: 0.4; }
.range-value{ text-align:right; font-size:12px; color: var(--muted-2); margin-top:2px; }
.dual-range-labels{ text-align:center; font-size:13px; color: var(--muted); margin-bottom:4px; }
input[type=range]{ width:100%; accent-color: var(--primary); }

/* ---------- Online status ---------- */
.avatar-wrap{ position:relative; flex-shrink:0; }
.online-dot{
  position:absolute; width:12px; height:12px; border-radius:50%; background:#22c55e; border:2px solid var(--surface);
  bottom:0; right:0;
}
.online-dot--offline{ background: var(--muted-2); }
.card-status{
  position:absolute; top:12px; left:12px; background: rgba(0,0,0,0.45); color:#fff; font-size:11px;
  padding: 5px 10px; border-radius:999px; display:flex; align-items:center; gap:5px;
}
.card-status .dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; }
.card-status.is-offline .dot{ background: #b8aebd; }

/* ---------- Photo carousel on cards ---------- */
.photo-dots{ position:absolute; top:8px; left:8px; right:8px; display:flex; gap:4px; z-index:2; }
.photo-dots span{ flex:1; height:3px; border-radius:2px; background: rgba(255,255,255,0.35); }
.photo-dots span.is-active{ background: #fff; }
.photo-tap-zone{ position:absolute; top:0; bottom:0; width:50%; z-index:1; }
.photo-tap-zone--prev{ left:0; }
.photo-tap-zone--next{ right:0; }

/* ---------- Activity ---------- */
.activity-tabs{ display:flex; gap:6px; margin-bottom: 14px; background: var(--surface); border-radius: 999px; padding: 4px; }
.activity-tab{ flex:1; background:none; border:none; color: var(--muted-2); padding: 9px 6px; border-radius:999px; font-size:12.5px; font-weight:600; cursor:pointer; }
.activity-tab.is-active{ background: var(--gradient); color:#fff; }
.activity-pane{ display:none; }
.activity-pane.is-active{ display:block; }
.like-row, .call-log-row, .match-row{ cursor:pointer; }
.like-row, .call-log-row{
  display:flex; align-items:center; gap:12px; padding: 12px; border-radius: var(--radius); background: var(--surface);
  border:1px solid var(--border); margin-bottom: 10px;
}
.like-row .like-meta, .call-log-row .call-meta{ margin-left:auto; text-align:right; font-size:11px; color: var(--muted-2); }
.call-log-row .call-kind{ font-size:18px; }
.sort-bar{ display:flex; align-items:center; gap:8px; margin-bottom: 14px; }
.sort-bar label{ font-size:12px; color: var(--muted-2); white-space:nowrap; }
.sort-bar select{ flex:1; padding:8px 10px; border-radius: var(--radius-sm); border:1.5px solid var(--border); background: var(--surface); color: var(--text); font-size:13px; }
.call-req-row{
  display:flex; align-items:center; gap:10px; padding:12px; border-radius: var(--radius); background: var(--surface-2);
  border:1px solid var(--border); margin-bottom:10px; flex-wrap:wrap;
}
.call-req-row .call-req-actions{ display:flex; gap:6px; width:100%; margin-top:8px; }
.call-req-row .call-req-actions .btn{ flex:1; padding:7px 8px; font-size:11.5px; }

/* ---------- Notifications matrix ---------- */
.notif-grid{ display:grid; grid-template-columns: 1fr repeat(3, 44px); align-items:center; gap: 10px 4px; font-size:12px; }
.notif-grid .notif-head{ font-size:10px; text-transform:uppercase; color: var(--muted-2); text-align:center; }
.notif-grid .notif-label{ color: var(--text); font-size:13px; }
.notif-grid input[type=checkbox]{ justify-self:center; width:18px; height:18px; accent-color: var(--primary); }

/* ---------- Trust & Safety demo ---------- */
.trust-row{ background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; margin-bottom:10px; }
.trust-row-top{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.trust-row-top strong{ font-size:13px; flex:1; }
.trust-score{ font-size:12px; font-weight:800; padding: 3px 10px; border-radius:999px; }
.trust-score--low{ background: rgba(52,211,153,0.18); color: var(--success); }
.trust-score--med{ background: rgba(255,190,60,0.18); color: #ffbe3c; }
.trust-score--high{ background: rgba(255,77,94,0.18); color: var(--danger); }
.trust-factors{ margin:0; padding-left:16px; font-size:11.5px; color: var(--muted-2); }
.trust-action{ font-size:11px; color: var(--muted); margin-top:6px; font-style:italic; }

/* ---------- Video call stage ---------- */
.call-card--rtc{ max-width: 380px; text-align:left; }
.call-card--rtc h3{ text-align:center; }
.video-stage{
  position:relative; background:#000; border-radius: var(--radius); overflow:hidden; aspect-ratio: 3/4; margin: 12px 0;
}
.video-stage video{ width:100%; height:100%; object-fit:cover; }
#remoteVideo{ position:absolute; inset:0; }
#localVideo{ position:absolute; width:92px; height:122px; bottom:10px; right:10px; border-radius:10px; border:2px solid rgba(255,255,255,0.6); z-index:2; object-fit:cover; }
.face-warning{
  position:absolute; top:0; left:0; right:0; background: rgba(255,77,94,0.92); color:#fff; text-align:center;
  padding: 8px; font-size:12px; font-weight:700; z-index:3;
}
.call-room-box{ background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; }
.call-room-box .field{ margin-bottom: 10px; }
.call-controls{ display:flex; justify-content:center; gap:16px; margin: 10px 0; }

/* ---------- Admin panel ---------- */
.admin-pane{ display:none; }
.admin-pane.is-active{ display:block; }
.admin-table-wrap{ overflow-x:auto; border-radius: var(--radius-sm); border:1px solid var(--border); }
.admin-table{ width:100%; border-collapse:collapse; font-size:12.5px; white-space:nowrap; }
.admin-table th{ text-align:left; background: var(--surface-2); color: var(--muted); padding:8px 10px; font-weight:600; position:sticky; top:0; }
.admin-table td{ padding:8px 10px; border-top:1px solid var(--border); }
.admin-table tr:hover td{ background: var(--surface-2); }
.admin-table .btn{ padding:5px 10px; font-size:11px; }
.stat-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin-bottom:14px; }
.stat-tile{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:14px; text-align:center; }
.stat-tile .stat-num{ font-size:24px; font-weight:800; background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-tile .stat-label{ font-size:11px; color: var(--muted-2); margin-top:2px; }
.admin-report-row, .admin-photo-row{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:12px; margin-bottom:10px;
}
.admin-photo-row .admin-photo-strip{ display:flex; gap:6px; margin:8px 0; overflow-x:auto; }
.admin-photo-row .admin-photo-strip img{ width:70px; height:90px; object-fit:cover; border-radius:8px; }
.admin-report-row .admin-row-actions, .admin-photo-row .admin-row-actions{ display:flex; gap:8px; margin-top:8px; }
.admin-row-actions .btn{ flex:1; padding:7px; font-size:11.5px; }

/* ---------- Profile detail ---------- */
.detail-photo-stage{ position:relative; aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow:hidden; margin-bottom:14px; }
.detail-photo-stage img{ width:100%; height:100%; object-fit:cover; }
.detail-name-row{ display:flex; align-items:center; gap:8px; }
.detail-name-row h2{ margin:0; }
.detail-actions{ display:flex; gap:10px; margin: 14px 0; }
.detail-actions .btn{ flex:1; }

/* ---------- Photo management (account) ---------- */
.photo-manage-slot{ position:relative; }
.photo-manage-slot .photo-remove{
  position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; background: rgba(0,0,0,0.55);
  color:#fff; border:none; font-size:12px; line-height:1; cursor:pointer; z-index:2;
}
.photo-manage-slot .photo-order{
  position:absolute; bottom:4px; left:4px; background: rgba(0,0,0,0.55); color:#fff; font-size:10px;
  padding:2px 6px; border-radius:999px; z-index:2;
}

/* ---------- Verify prompt / rewarded ad ---------- */
.verify-prompt-actions{ display:flex; gap:10px; margin-top:14px; }
.verify-prompt-actions .btn{ flex:1; }
.ad-progress{ height:6px; background: var(--surface-2); border-radius:3px; overflow:hidden; margin:14px 0; }
.ad-progress-fill{ height:100%; background: var(--gradient); width:0%; transition: width 1s linear; }

/* ---------- Overlays ---------- */
.overlay{
  position: fixed; inset:0; background: rgba(36,17,41,0.55); z-index: 50; display:flex; align-items:center;
  justify-content:center; padding: 20px; backdrop-filter: blur(4px);
}
.match-card, .call-card, .info-card{
  background: var(--surface); border-radius: var(--radius-lg); padding: 28px 24px; text-align:center; max-width: 360px;
  width:100%; border: 1px solid var(--border); box-shadow: var(--shadow);
}
.match-confetti{ font-size: 40px; }
.match-avatars{ display:flex; justify-content:center; gap: -10px; margin: 16px 0 22px; }
.match-avatars .avatar{ margin: 0 -8px; border: 3px solid var(--surface); }
.call-card .avatar{ margin: 0 auto 12px; }
.call-card .round-btn{ margin-top: 18px; }

.toast{
  position: fixed; left:50%; bottom: 90px; transform: translateX(-50%); background: var(--surface); border:1px solid var(--border);
  color: var(--text); padding: 12px 18px; border-radius: 999px; font-size:13px; z-index: 60; box-shadow: var(--shadow);
  max-width: 90vw; text-align:center;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* Large phones (>=480px): a little breathing room */
@media (min-width: 480px){
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .hero h1{ font-size: 38px; }
}

/* >=600px: no phone-mockup chrome on a desktop site -- just use the available width like the
   landing page does. The app-frame becomes a plain, ungated content column; individual screens
   keep their own sensible internal max-widths (swipe cards, admin tables, forms) so text and
   controls don't stretch absurdly, but nothing is height-capped or bezel-framed anymore. */
@media (min-width: 600px){
  body{ background: var(--bg-alt); }
  .screen--landing{ background: var(--bg); }
  .app-frame.is-open{ max-width: 900px; margin: 24px auto; }
}

/* Tablets (>=768px) */
@media (min-width: 768px){
  .feature-grid{ grid-template-columns: repeat(3, 1fr); padding: 36px 40px; }
  .hero{ padding-top: 40px; }
  .landing-nav{ padding: 20px 40px; }
  .landing-footer{ padding: 30px; }
}

/* Small laptop (>=1024px) */
@media (min-width: 1024px){
  .hero h1{ font-size: 46px; }
  .hero-sub{ font-size: 17px; }
  .hero-cta{ flex-direction:row; max-width:none; justify-content:center; }
  .trust-strip{ gap: 40px; }
  .app-frame.is-open{ margin: 40px auto; }
}

/* Desktop (>=1280px) */
@media (min-width: 1280px){
  .feature-grid{ max-width: 1200px; }
  .hero{ max-width: 900px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}