/* =========================================================================
   Phone mockups — faithful HTML rebuild of the HomeVeya Exchange app UI
   Sources (Flutter): lib/swaps/core/swaps_navigation.dart,
   lib/swaps/features/discovery/presentation/swaps_swipe_screen.dart,
   lib/swaps/features/discovery/presentation/swaps_explore_screen.dart,
   lib/swaps/core/swaps_app_header.dart, lib/core/homeveya_brand.dart
   The app UI is laid out at real iPhone points (390 × 844) and scaled by --s.

   REAL SCREENSHOTS: put <img class="phone-shot" src="assets/img/app/swipe.png" alt="…">
   inside .phone-screen. When present it covers the screen and the HTML mock is hidden.
   ========================================================================= */
.phone{--s:.72;position:relative;flex:none;width:calc(422px*var(--s));height:calc(876px*var(--s));padding:calc(16px*var(--s));border-radius:calc(64px*var(--s));
  background:linear-gradient(150deg,#3A464C 0%,#12191C 22%,#070B0D 60%,#20292D 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 calc(5px*var(--s)) #0A0F11,0 1px 0 1px rgba(10,37,48,.35),0 30px 60px -20px rgba(10,37,48,.45),0 60px 120px -40px rgba(8,145,178,.45)}
.phone::before{content:"";position:absolute;right:calc(-3px*var(--s));top:calc(190px*var(--s));width:calc(4px*var(--s));height:calc(96px*var(--s));border-radius:0 3px 3px 0;background:#1B2327}
.phone::after{content:"";position:absolute;left:calc(-3px*var(--s));top:calc(160px*var(--s));width:calc(4px*var(--s));height:calc(60px*var(--s));border-radius:3px 0 0 3px;background:#1B2327;box-shadow:0 calc(76px*var(--s)) 0 #1B2327}
.phone-screen{position:relative;width:calc(390px*var(--s));height:calc(844px*var(--s));border-radius:calc(50px*var(--s));overflow:hidden;background:#111820;isolation:isolate}
.phone-screen::before{content:"";position:absolute;z-index:20;left:50%;top:calc(11px*var(--s));width:calc(124px*var(--s));height:calc(36px*var(--s));transform:translateX(-50%);border-radius:999px;background:#000}
.phone-screen::after{content:"";position:absolute;inset:0;z-index:21;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 32%)}
.phone-shot{position:absolute;inset:0;z-index:15;width:100%;height:100%;object-fit:cover}
.phone-screen:has(.phone-shot) .app{display:none}
.phone-screen:has(.phone-shot)::before{display:none}

.app{position:absolute;left:0;top:0;width:390px;height:844px;transform:scale(var(--s));transform-origin:0 0;font-family:Inter,system-ui,sans-serif;color:#101425;overflow:hidden;-webkit-font-smoothing:antialiased;line-height:1.25}
.app svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app .solid{fill:currentColor;stroke:none}

/* status bar */
.sb{position:absolute;z-index:12;left:0;right:0;top:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0 44px;font:600 17px/1 Inter;letter-spacing:-.02em}
.sb.light{color:#fff}
.sb .sb-r{display:flex;gap:6px;align-items:center}
.sb .sb-r svg{height:12px;width:auto;stroke:none;fill:currentColor}

/* ---------- Swipe ---------- */
.app-swipe{background:#111820}
.sw-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sw-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.19) 0%,rgba(0,0,0,0) 45%,rgba(8,38,48,.40) 80%,rgba(2,6,9,.40) 100%)}
.sw-shade::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(180deg,rgba(2,10,14,0),rgba(2,10,14,.55))}
.sw-bars{position:absolute;z-index:3;top:73px;left:18px;right:18px;display:flex;gap:4px}
.sw-bars i{flex:1;height:2px;border-radius:3px;background:rgba(255,255,255,.4)}
.sw-bars i.on{background:#fff}
.sw-ctrls{position:absolute;z-index:3;top:98px;left:18px;right:18px;display:flex;justify-content:space-between}
.sw-glass{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#22D3EE,#0891B2);border:1.5px solid #67E8F9}
.sw-glass svg{width:19px;height:19px;stroke-width:2.2}
.sw-info{position:absolute;z-index:3;left:18px;right:18px;bottom:196px}
.sw-title{font:800 25px/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:-.5px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7);margin-bottom:9px}
.sw-tags{display:flex;flex-wrap:wrap;gap:7px}
.sw-tag{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:9px;background:rgba(37,51,61,.8);border:1px solid rgba(103,232,249,.35);box-shadow:0 3px 10px rgba(0,0,0,.2);color:#fff;font-size:11px;font-weight:600;white-space:nowrap}
.sw-tag.c{padding:5px 7px;font-size:10px;gap:4px}
.sw-tag svg{width:14px;height:14px}
.sw-tag.c svg{width:12px;height:12px}
.sw-tag.mint{background:rgba(202,250,231,.9);color:#15292B}
.sw-tag.loc{margin-top:7px}
.sw-facts{display:flex;gap:17px;margin-top:10px}
.sw-fact{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:10px;background:rgba(26,38,48,.7);border:1px solid rgba(103,232,249,.5);box-shadow:0 3px 10px rgba(0,0,0,.2);color:#fff;font-size:12px;font-weight:600}
.sw-fact svg{width:17px;height:17px;color:#67E8F9}
.sw-actions{position:absolute;z-index:3;left:18px;right:18px;bottom:112px;display:flex;justify-content:space-evenly}
.sw-btn{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1.5px solid #67E8F9;box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
.sw-btn svg{width:31px;height:31px}
.sw-btn.pass{background:radial-gradient(circle at 37% 32%,#DA3369 0%,#D30B4C 45%,#74062A 100%)}
.sw-btn.save{background:radial-gradient(circle at 37% 32%,#464B53 0%,#252B35 45%,#14171D 100%)}
.sw-btn.like{background:linear-gradient(135deg,#22D3EE,#0891B2,#0E7490)}

/* ---------- Bottom navigation (SwapsNavigation) ---------- */
.app-nav{position:absolute;z-index:8;left:14px;right:14px;bottom:20px;height:58px;border-radius:22px;display:flex;background:rgba(16,27,34,.6);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(103,232,249,.44);box-shadow:0 5px 20px rgba(0,0,0,.24),0 0 18px 1px rgba(8,145,178,.28)}
.app-nav span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#E6F2F4;font-size:10px;font-weight:500;position:relative}
.app-nav span svg{width:24px;height:24px;stroke-width:1.8}
.app-nav span.on{color:#0891B2;font-size:11px;font-weight:700}
.app-nav span.on svg{filter:drop-shadow(0 0 6px rgba(8,145,178,.75))}
.app-nav span.on::after{content:"";position:absolute;bottom:2px;width:24px;height:3px;border-radius:3px;background:#0891B2;box-shadow:0 0 9px 1px rgba(8,145,178,.6)}
.home-ind{position:absolute;z-index:9;left:50%;bottom:7px;width:134px;height:5px;border-radius:3px;transform:translateX(-50%);background:rgba(255,255,255,.9)}
.home-ind.dark{background:#101425}

/* ---------- Explore ---------- */
.app-explore{background:#F7F8FA}
.ex-header{position:absolute;left:0;right:0;top:0;padding:54px 8px 0 16px;height:118px;display:flex;align-items:center;background:rgba(248,252,253,.93);border-bottom:1px solid #DDF3F6}
.ex-brand{display:flex;align-items:center;gap:12px}
.ex-brand img{width:38px;height:38px;border-radius:11px;box-shadow:0 5px 17px rgba(8,145,178,.22)}
.ex-brand b{display:block;font:800 24px/1.05 'Plus Jakarta Sans';letter-spacing:-.7px;color:#0891B2}
.ex-brand small{display:block;font:800 8px/1.2 Inter;letter-spacing:2px;color:rgba(8,145,178,.78)}
.ex-icons{margin-left:auto;display:flex}
.ex-icons i{width:40px;height:40px;display:grid;place-items:center;color:#2E3A45;position:relative}
.ex-icons svg{width:23px;height:23px;stroke-width:1.8}
.ex-icons i.badge::after{content:"";position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:#E11D48;border:1.5px solid #F8FCFD}
.ex-body{position:absolute;left:0;right:0;top:118px;bottom:0;padding:14px 16px 0}
.ex-search{height:52px;border-radius:16px;border:1px solid #E6E9F1;background:#fff;display:flex;align-items:center;gap:10px;padding:0 14px;color:#778099;font-size:15px}
.ex-search svg{width:21px;height:21px;color:#66708A}
.ex-search .map{margin-left:auto;color:#0891B2}
.ex-chips{display:flex;gap:8px;margin-top:12px;white-space:nowrap}
.ex-chip{display:inline-flex;align-items:center;gap:5px;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.88);border:1px solid #D8EBEF;color:#526375;font-size:13px;font-weight:600}
.ex-chip.on{background:#CFFAFE;border-color:#0891B2;color:#0891B2}
.ex-chip.on svg{width:13px;height:13px;stroke-width:3}
.ex-count{display:flex;align-items:center;justify-content:space-between;margin:14px 2px 10px;font-size:13px;font-weight:700;color:#46516C}
.ex-count svg{width:20px;height:20px;color:#56617A}
.ex-card{display:flex;gap:12px;padding:9px;border-radius:17px;background:#FBFCFF;box-shadow:0 1px 2px rgba(16,20,37,.06),0 6px 16px -8px rgba(16,20,37,.12);border:1px solid #EEF1F6;margin-bottom:12px}
.ex-card>img{width:109px;height:158px;border-radius:13px;object-fit:cover;flex:none}
.ex-card .bd{flex:1;min-width:0;padding-top:3px}
.ex-card .ex-t{font:800 17px/1.2 'Plus Jakarta Sans';color:#06AFC8;letter-spacing:-.2px;margin:0}
.ex-card .sub{font-size:10.5px;font-weight:700;color:#65718A;margin-top:2px}
.ex-line{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#46516C;margin-top:6px}
.ex-line svg{width:14px;height:14px;color:#0891B2}
.ex-line.two{gap:12px}
.ex-line.two span{display:inline-flex;align-items:center;gap:5px}
.ex-kv{font-size:11px;color:#728096;margin-top:5px;line-height:1.35}
.ex-kv b{color:#46516C;font-weight:700}
.ex-heart{width:40px;flex:none;display:flex;justify-content:center;padding-top:4px;color:#5D6882}
.ex-heart svg{width:22px;height:22px}
.ex-heart.on{color:#F31352}

/* ---------- Galaxy S26-style frame (generic Android flagship, no Samsung artwork) ----------
   Use: <div class="phone galaxy">…same .phone-screen content…</div>. Same 390×844 screen as the iPhone mock,
   so the app UI and --s scaling are shared. Flat aluminium rail, thin uniform black bezel, centred punch-hole,
   squarer corners, side keys on the right. */
.phone.galaxy{width:calc(414px*var(--s));height:calc(868px*var(--s));padding:calc(8.5px*var(--s));border-radius:calc(46px*var(--s));
  border:calc(3.5px*var(--s)) solid transparent;
  background:linear-gradient(#04070A,#04070A) padding-box,
    linear-gradient(135deg,#EEF2F4 0%,#9BA7AD 18%,#DCE2E5 38%,#808C92 58%,#E4E9EB 78%,#8E9AA0 100%) border-box;
  box-shadow:0 0 0 1px rgba(10,37,48,.28),inset 0 0 0 1px rgba(255,255,255,.06),0 1px 0 1px rgba(10,37,48,.25),0 30px 60px -20px rgba(10,37,48,.45),0 60px 120px -40px rgba(8,145,178,.45)}
.phone.galaxy::before{right:calc(-5.5px*var(--s));left:auto;top:calc(196px*var(--s));width:calc(3px*var(--s));height:calc(112px*var(--s));border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,#7C878D,#C9D0D3);box-shadow:none}
.phone.galaxy::after{right:calc(-5.5px*var(--s));left:auto;top:calc(330px*var(--s));width:calc(3px*var(--s));height:calc(62px*var(--s));border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,#7C878D,#C9D0D3);box-shadow:none}
.phone.galaxy .phone-screen{border-radius:calc(37px*var(--s))}
.phone.galaxy .phone-screen::before,.phone.galaxy .phone-screen:has(.phone-shot)::before{display:block;top:calc(15px*var(--s));width:calc(21px*var(--s));height:calc(21px*var(--s));border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#2A3A44 0 16%,#0B1114 30%,#000 58%);box-shadow:0 0 0 calc(1.5px*var(--s)) rgba(0,0,0,.55)}
.phone.galaxy .sb{padding:4px 34px 0 34px}
.phone.galaxy .home-ind{width:112px;height:4px;bottom:9px}