/* ============================================================
   HySingle — Badoo-style Violet (2026)
   Clean white surfaces · violet accent #7C3AED · bold playful feel
   Airy spacing · system sans-serif · vibrant dating-app vibe
   ============================================================ */
:root{
  --coral:#7C3AED;
  --coral-dark:#6D28D9;
  --coral-soft:#F1EAFE;
  --ink:#19191B;
  --ink-soft:#55565C;
  --muted:#8A8A8E;
  --faint:#B9B9BE;
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --line:#F0F0F2;
  --line2:#E5E5E9;
  --gray:#F4F4F6;
  --blue:#1D9BF0;
  --green:#1A7F37;
  --shadow-sm:0 1px 3px rgba(20,20,30,.06);
  --shadow-md:0 8px 24px rgba(20,20,30,.09);
  --shadow-pop:0 6px 18px rgba(124,58,237,.35);
  --r-sm:10px; --r-md:16px; --r-lg:20px; --r-pill:999px;
  /* legacy aliases — solid now, no gradients */
  --pink:#7C3AED; --pink2:#A78BFA; --grad:#7C3AED;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:#fff; color:var(--ink); line-height:1.5;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;}
.phone{max-width:430px; margin:0 auto; background:var(--bg); min-height:100vh;
  position:relative; padding-bottom:78px;}
.content{padding:0 0 8px;}

/* ---------- brand bar ---------- */
.brandbar{display:flex; justify-content:center; align-items:center;
  padding:10px 20px; background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;}
.brand-actions{display:flex; gap:10px; align-items:center;
  position:absolute; right:14px; top:50%; transform:translateY(-50%);}
/* header lockup: original logo icon + text side by side, centered */
.logo-center{display:flex; align-items:center; gap:9px; text-decoration:none;}
.logo-center .logo-icon{height:38px; width:auto; display:block; filter:none; box-shadow:none;}
.logo-center .logo-textimg{height:30px; width:auto; display:block; box-shadow:none;}

/* dark mode: black logo text turns white, no patch behind logo (transparent PNGs) */
@media (prefers-color-scheme: dark){
  .brandbar{background:#000; border-bottom-color:#262626;}
  .logo-center .logo-textimg{filter:invert(1);}
}

/* ---------- ads ---------- */
.ad-slot{text-align:center; margin:10px auto; max-width:100%; overflow:hidden;}
.ad-slot iframe{max-width:100%;}
.ad-top{min-height:50px; margin:8px auto 0;}
.ad-foot{min-height:60px;}
.ad-native{min-height:100px; margin:14px auto;}
.ad-rect{min-height:250px; margin:14px auto;}

/* ---------- swipe ad overlay + earn modal ---------- */
.ad-overlay{position:fixed; inset:0; z-index:200; background:rgba(10,6,24,.88);
  display:flex; align-items:center; justify-content:center; padding:18px;}
.ad-box{background:#fff; border-radius:18px; padding:18px 16px; width:100%; max-width:360px;
  max-height:88vh; overflow-y:auto; text-align:center;}
.ad-box .ad-label{font-weight:800; font-size:15px; color:var(--ink); margin-bottom:8px;}
.ad-box .btn{width:100%; margin-top:10px;}
.earn-btn{display:block; margin:10px auto 2px; background:linear-gradient(90deg,#7C3AED,#a855f7);
  color:#fff; border:none; border-radius:999px; padding:10px 18px; font-weight:700; font-size:14px; cursor:pointer;}
.earn-timer{font-size:14px; color:var(--muted); margin-top:8px;}
.story-ad{background:#fff; border-radius:14px; padding:8px;}
.lock-banner{background:#f3eafd; border:1px solid #d9c6fb; color:#4c1d95;
  border-radius:12px; padding:10px 12px; margin:10px 12px 0; font-size:13.5px; line-height:1.45;}
.locktag{font-size:12px; color:#7C3AED; font-weight:700;}
.ad-desk{display:none; text-align:center;}
@media (min-width:900px){
  .ad-desk{display:block; padding:10px 0 2px; min-height:90px;}
}
.logo{font-weight:800; font-size:21px; letter-spacing:-.4px; color:var(--coral);}
.logo-img{height:52px; width:auto; display:block;}
/* header lockup: icon + text side by side, centered */
.logo.lockup{display:flex; align-items:center; gap:10px; text-decoration:none;}
.logo-icon{height:46px; width:46px; display:block;}
.logo-text{font-size:27px; font-weight:800; letter-spacing:-.5px; color:var(--ink);}
.logo.big .logo-img.big, img.logo-img.big{height:92px; width:auto; margin:0 auto; display:block;}
.logo.big{font-size:33px; text-align:center; margin:30px 0 6px;}
.admin-tag{display:block; font-size:15px; font-weight:700; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-top:6px;}

/* ---------- chat typing indicator ---------- */
.msg.typing span{display:inline-block; animation:tblink 1.2s infinite; font-weight:800;}
.msg.typing span:nth-child(2){animation-delay:.2s;}
.msg.typing span:nth-child(3){animation-delay:.4s;}
@keyframes tblink{0%,60%,100%{opacity:.25;}30%{opacity:1;}}

/* ---------- live presence ---------- */
.active.on{color:#22c55e; font-weight:700;}
.active.on::before{content:'● '; font-size:10px;}
.loc{font-size:13px; color:var(--muted);}

/* ---------- bottom nav ---------- */
.bottomnav{position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px; display:flex; background:#fff;
  border-top:1px solid var(--line); z-index:60; padding-bottom:env(safe-area-inset-bottom);}
.bottomnav a{flex:1; text-align:center; padding:8px 0 9px; font-size:11px;
  font-weight:500; letter-spacing:.1px; color:var(--muted); text-decoration:none;}
.bottomnav a .nav-ico{display:flex; justify-content:center; margin-bottom:3px;}
.bottomnav a .nav-ico svg{width:25px; height:25px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.bottomnav a.active{color:var(--coral); font-weight:700;}

/* ---------- generic ---------- */
.btn{display:inline-block; border:0; border-radius:var(--r-pill); padding:13px 22px;
  font-size:15px; font-weight:700; text-decoration:none; cursor:pointer;
  text-align:center; background:var(--gray); color:var(--ink);
  transition:transform .12s ease, background .15s ease;}
.btn:active{transform:scale(.97);}
.btn.primary{background:var(--coral); color:#fff; width:100%; box-shadow:var(--shadow-pop);}
.btn.primary:active{background:var(--coral-dark);}
.btn.ghost{background:var(--gray); color:var(--ink);}
.btn.small{padding:8px 16px; font-size:13px; width:auto; box-shadow:none;}
.btn:disabled{background:var(--line2); color:#fff; cursor:not-allowed; box-shadow:none;}
button.link{background:none; border:0; color:var(--coral); cursor:pointer; font-size:13px; padding:0; font-weight:600;}
button.link.danger{color:#FF3B30;}
.form{padding:16px 20px; display:flex; flex-direction:column; gap:14px;}
.form label{font-size:13px; font-weight:600; color:var(--ink-soft); display:flex; flex-direction:column; gap:7px;}
.form input, .form select, .form textarea{padding:13px 15px; border:1.5px solid var(--line2);
  border-radius:14px; font-size:15px; background:#fff; color:var(--ink); font-family:inherit;}
.form input:focus, .form select:focus, .form textarea:focus{border-color:var(--coral); outline:none;
  box-shadow:0 0 0 3px rgba(124,58,237,.14);}
.form small{font-weight:400; color:var(--muted);}
.hint{font-size:12.5px; color:var(--coral); font-weight:400;}
.flash{margin:12px 20px; padding:12px 16px; border-radius:14px; font-size:14px; font-weight:500;}
.flash.ok{background:#EAF7EE; color:var(--green);}
.flash.error{background:var(--coral-soft); color:#D63B40;}
.muted{color:var(--muted); font-size:13px;}
.empty{text-align:center; color:var(--muted); padding:48px 24px; font-size:15px; line-height:1.7;}
.vbadge{color:var(--blue); font-size:.85em;}
.active{color:var(--green); font-size:12px;}
.toast{position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#19191B; color:#fff; padding:11px 20px; border-radius:var(--r-pill);
  font-size:14px; font-weight:500; opacity:0; transition:.3s; z-index:99;
  pointer-events:none; max-width:90%; box-shadow:var(--shadow-md);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- auth ---------- */
.authwrap{padding:8px 24px 40px; max-width:420px; margin:0 auto;}
.tagline{text-align:center; color:var(--muted); margin:0 0 16px; font-size:15px;}
.welcome-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; font-size:14.5px; line-height:1.6; margin-bottom:8px; box-shadow:var(--shadow-sm);}
.auth-links{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.demo-code{background:var(--coral-soft); border:1px dashed var(--coral); border-radius:var(--r-sm);
  padding:7px 12px; display:inline-block; margin-top:8px; font-size:13px;}
.otp{font-size:24px !important; letter-spacing:10px; text-align:center;}

/* ---------- discover ---------- */
.locrow{padding:16px 20px 4px; font-size:15px; font-weight:700;}
.stories-row{display:flex; gap:14px; overflow-x:auto; padding:12px 20px 14px;
  background:#fff; border-bottom:1px solid var(--line); scrollbar-width:none;}
.stories-row::-webkit-scrollbar{display:none;}
.story-chip{display:flex; flex-direction:column; align-items:center; gap:5px;
  text-decoration:none; color:var(--ink); font-size:11px; font-weight:500; flex:0 0 auto;}
.story-chip img{width:64px; height:64px; border-radius:50%; object-fit:cover;
  border:2.5px solid var(--coral); padding:2px; background:#fff;}
.story-chip.rec img{border-color:var(--line2);}
.counters{display:flex; justify-content:space-between; padding:12px 20px; font-size:13px;
  background:#fff; color:var(--muted);}
.counters b{color:var(--ink);}
.deck{position:relative; height:500px; margin:10px 20px;}
.card{position:absolute; inset:0; background:#fff; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-md); cursor:pointer;}
.card img{width:100%; height:352px; object-fit:cover; display:block;}
.card-info{padding:16px 18px;}
.card-name{font-size:22px; font-weight:800; letter-spacing:-.3px;}
.card-bio{font-size:14.5px; color:var(--ink-soft); margin-top:5px; line-height:1.5;}
.card-meta{font-size:13px; color:var(--muted); margin-top:8px;}
.deck-empty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--muted); font-size:16px; line-height:1.7;}
.swipe-btns{display:flex; justify-content:center; align-items:center; gap:20px; padding:18px;}
.sbtn{width:62px; height:62px; border-radius:50%; border:0; font-size:24px; cursor:pointer;
  box-shadow:var(--shadow-md); background:#fff; transition:transform .12s ease;}
.sbtn:active{transform:scale(.92);}
.sbtn.cancel{color:var(--muted);}
.sbtn.match{color:#fff; background:var(--coral); width:74px; height:74px; font-size:32px; box-shadow:var(--shadow-pop);}
.sbtn.super{color:var(--blue); background:#fff;}
.sbtn:disabled{opacity:.3; cursor:not-allowed;}

/* ---------- fresh feed ---------- */
.post{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  margin:14px 16px; overflow:hidden; box-shadow:var(--shadow-sm);}
.post-head{display:flex; gap:11px; align-items:center; padding:12px 16px; cursor:pointer;}
.post-head img{width:42px; height:42px; border-radius:50%; object-fit:cover;}
.post-head b{font-size:15px;}
.post-loc{font-size:12px; color:var(--muted);}
.post-loc a{color:var(--muted); text-decoration:none;}
.post-img{width:100%; display:block; max-height:480px; object-fit:cover; cursor:pointer;}
.post-actions{display:flex; gap:10px; padding:12px 16px;}
.pbtn{border:1.5px solid var(--line2); background:#fff; border-radius:var(--r-pill);
  padding:9px 18px; font-size:14px; font-weight:600; cursor:pointer; color:var(--ink);}
.pbtn.like.on{background:var(--coral-soft); border-color:var(--coral); color:var(--coral);}
.pbtn.sayhi{border-color:var(--coral); color:var(--coral);}
.post-cap{padding:2px 16px 16px; font-size:14.5px; line-height:1.55;}
.loader{text-align:center; color:var(--muted); padding:20px; font-size:14px;}

/* ---------- chat ---------- */
.chatlist{background:#fff;}
.chatrow{display:flex; gap:13px; padding:14px 20px; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink); align-items:center;}
.chatrow:active{background:var(--gray);}
.avatar{width:54px; height:54px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.avatar.anon{background:var(--coral); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:24px; font-weight:800;}
.chatmeta b{font-size:15.5px;}
.chatmeta .last{font-size:13.5px; color:var(--muted); margin-top:3px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:280px;}
.thread-head{display:flex; gap:11px; align-items:center; padding:12px 20px; background:#fff;
  border-bottom:1px solid var(--line); cursor:pointer; position:sticky; top:57px; z-index:40;}
.thread{padding:18px 20px 104px; display:flex; flex-direction:column; gap:10px; min-height:50vh;}
.msg{max-width:76%; padding:11px 16px; border-radius:22px; font-size:15px; line-height:1.5;}
.msg.me{align-self:flex-end; background:var(--coral); color:#fff; border-bottom-right-radius:8px;}
.msg.them{align-self:flex-start; background:var(--gray); color:var(--ink); border-bottom-left-radius:8px;}
.sendbox{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
  display:flex; gap:10px; padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--line);}
.sendbox input{flex:1; border:0; background:var(--gray); border-radius:var(--r-pill);
  padding:13px 18px; font-size:15px; color:var(--ink); font-family:inherit;}
.sendbox input:focus{outline:none; box-shadow:0 0 0 2px rgba(124,58,237,.25); background:#fff;}
.sendbox button{border:0; background:var(--coral); color:#fff; width:48px; height:48px;
  border-radius:50%; font-size:18px; cursor:pointer; box-shadow:var(--shadow-pop); flex:0 0 auto;}

/* ---------- stories (inline feed, same layout — no fullscreen black) ---------- */
.story-feed{padding:14px 16px 24px; display:flex; flex-direction:column; gap:16px;
  max-width:640px; margin:0 auto;}
.story-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);}
.story-card .post-head{cursor:pointer;}
.story-card-img{width:100%; display:block; max-height:520px; object-fit:cover;}
.story-card-reply{display:flex; gap:10px; padding:12px 16px; align-items:center;}
.story-card-reply input{flex:1; border:1.5px solid var(--line2); border-radius:var(--r-pill);
  padding:11px 16px; font-size:14px; color:var(--ink); font-family:inherit; background:#fff;}
.story-card-reply input:focus{outline:none; border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(124,58,237,.14);}
.story-card-reply button{border:0; background:var(--coral); color:#fff; width:42px; height:42px;
  border-radius:50%; font-size:16px; cursor:pointer; box-shadow:var(--shadow-pop); flex:0 0 auto;}
.story-card-reply button:active{transform:scale(.94);}

/* ---------- profile ---------- */
.prof{padding:20px;}
.prof-top{display:flex; gap:16px; align-items:center; margin-bottom:18px;}
.bigavatar{width:88px; height:88px; border-radius:50%; object-fit:cover;}
.bigavatar.anon{background:var(--coral); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:34px; font-weight:800;}
.avatar-upload{position:relative; cursor:pointer; display:block;}
.avatar-upload .plus{position:absolute; bottom:0; right:0; background:var(--coral); color:#fff;
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:18px; border:3px solid #fff; box-shadow:var(--shadow-sm);}
.prof h2{margin:0 0 5px; font-size:22px; letter-spacing:-.3px;}
.wallet-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; margin:14px 0; box-shadow:var(--shadow-sm);}
.wallet-card b{font-size:15px;}
.meter{height:8px; background:var(--gray); border-radius:var(--r-pill); overflow:hidden; margin:10px 0;}
.meter div{height:100%; background:var(--coral); border-radius:var(--r-pill);}
.verify-rows{margin:16px 0; display:flex; flex-direction:column; gap:10px;}
.vrow{display:flex; justify-content:space-between; align-items:center; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; font-size:14.5px;}
.vrow .ok{color:var(--green); font-weight:600;} .vrow .no{color:var(--muted);}

/* ---------- model profile ---------- */
.mprof{padding-bottom:24px;}
.mphoto{width:100%; height:400px; object-fit:cover;}
.mprof h2{padding:16px 20px 0; margin:0; font-size:26px; letter-spacing:-.4px;}
.mprof .muted{padding:6px 20px;}
.chips{display:flex; flex-wrap:wrap; gap:9px; padding:12px 20px;}
.chip{background:var(--gray); color:var(--ink-soft); border:1px solid var(--line2);
  border-radius:var(--r-pill); padding:8px 15px; font-size:13px; font-weight:600;}
.mbtns{display:flex; gap:10px; padding:14px 20px;}
.mbtns .btn{flex:1;}
.mprof h3{padding:8px 20px; margin:10px 0 6px; font-size:17px;}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:0 5px;}
.grid img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px;}

/* ---------- admin ---------- */
.admin{padding:20px;}
.admin h2{margin:22px 0 10px; font-size:20px; letter-spacing:-.3px;}
.tbl{width:100%; border-collapse:collapse; font-size:13px; background:#fff; margin-bottom:10px;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
.tbl th,.tbl td{border-bottom:1px solid var(--line); padding:9px 10px; text-align:left;}
.tbl th{background:#FAFAFB; font-weight:700; color:var(--ink-soft); font-size:12px;
  text-transform:uppercase; letter-spacing:.4px;}
.tbl tr:last-child td{border-bottom:0;}
.tbl a{color:var(--coral); font-weight:600; text-decoration:none;}
.inline-form{background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  margin-bottom:12px; box-shadow:var(--shadow-sm);}

/* ---------- location picker & misc links ---------- */
a.logo{text-decoration:none; display:block;}
a.loc-link{color:inherit; text-decoration:none; cursor:pointer;}
a.loc-link:hover{text-decoration:underline;}
a.locrow{display:block;}
.story-meta-link{color:#fff; text-decoration:none; display:flex; align-items:center; gap:8px;}
.locpage{padding:30px 24px 40px; max-width:520px; margin:0 auto;}
.locpage h2{margin:6px 0 10px; font-size:24px; letter-spacing:-.4px;}
.locpage .btn{margin-bottom:8px;}
.or{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin:18px 0;}
.or::before,.or::after{content:''; flex:1; height:1px; background:var(--line);}
.or span{white-space:nowrap;}

/* ---------- desktop layout (mobile-first; additive only) ---------- */
@media (min-width:768px){
  body{background:#F2F2F5;}
  .phone{max-width:760px; box-shadow:0 0 44px rgba(20,20,30,.10);}
  .bottomnav,.sendbox{max-width:760px;}
  .story-viewer{max-width:760px;}
  .deck{height:560px; max-width:520px; margin:10px auto;}
  .card img{height:404px;}
  .grid{grid-template-columns:repeat(4,1fr);}
  .mphoto{height:460px;}
  .prof,.chatlist,.authwrap,.admin{max-width:640px; margin:0 auto;}
  .thread{max-width:640px; margin:0 auto;}
  .locpage{max-width:560px;}
}
@media (min-width:1024px){
  .phone{max-width:1100px;}
  .bottomnav,.sendbox{max-width:1100px;}
  .story-viewer{max-width:1100px;}
  .deck{max-width:560px; height:600px;}
  #feed{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:4px 16px 0;}
  .post{margin:0;}
  .grid{grid-template-columns:repeat(5,1fr); gap:8px; padding:0 20px;}
  .mprof h2,.mprof .muted,.mprof h3{padding-left:28px; padding-right:28px;}
  .chips,.mbtns{padding-left:28px; padding-right:28px;}
  .stories-row{padding:14px 28px 16px;}
  .counters{padding:12px 28px;}
}

/* feed tabs */
.feed-tabs{display:flex;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:57px;z-index:40;}
.ftab{flex:1;text-align:center;padding:12px;font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;}
.ftab.active{color:var(--pink);border-bottom-color:var(--pink);}
.locked-wrap{padding:30px 20px;}
.locked-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 24px;text-align:center;}
.locked-icon{font-size:48px;margin-bottom:12px;}
.locked-card h3{margin:0 0 8px;font-size:20px;}

/* desktop */
@media (min-width:768px){
  .phone{max-width:700px;}
  .bottomnav{max-width:700px;}
  .deck{height:560px;}
  .card img{height:420px;}
}
@media (min-width:1024px){
  .phone{max-width:900px;}
  .bottomnav{max-width:900px;}
  .deck{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;height:auto;position:static;}
  .card{position:relative;height:520px;}
}

/* ---------- SEO: footer ---------- */
.site-footer{background:#fff; border-top:1px solid var(--line); padding:22px 20px 14px; margin-top:18px;}
.foot-links{display:flex; gap:18px; justify-content:center; margin-bottom:12px;}
.foot-links a{font-size:14px; font-weight:700; color:var(--coral); text-decoration:none;}
.foot-cities{display:flex; flex-wrap:wrap; gap:8px 12px; justify-content:center; align-items:center; margin-bottom:12px;}
.foot-cities span{font-size:12px; color:var(--muted); font-weight:600;}
.foot-cities a{font-size:12.5px; color:var(--ink-soft); text-decoration:none;}
.foot-cities a:hover{color:var(--coral);}
.foot-copy{text-align:center; font-size:11.5px; color:var(--faint);}

/* ---------- SEO: popular cities on discover ---------- */
.pop-cities{padding:18px 16px 6px;}
.pop-cities h3{margin:0 0 10px; font-size:16px; font-weight:800;}
.city-chips{display:flex; flex-wrap:wrap; gap:8px;}
.city-chips a{font-size:13px; font-weight:600; color:var(--coral-dark); background:var(--coral-soft);
  padding:8px 14px; border-radius:999px; text-decoration:none;}

/* ---------- SEO: blog (magazine layout) ---------- */
.tag-chip{display:inline-block; background:var(--coral-soft); color:var(--coral-dark);
  font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;}
.tag-chip.light{background:rgba(255,255,255,.22); color:#fff;}

/* blog index */
.blog-hero{margin:16px 18px 4px; border-radius:22px; padding:26px 22px;
  background:linear-gradient(135deg,#7C3AED 0%,#6D28D9 55%,#5B21B6 100%); color:#fff;
  box-shadow:0 12px 30px rgba(124,58,237,.30);}
.blog-hero-tag{display:inline-block; background:rgba(255,255,255,.20); color:#fff;
  font-size:11.5px; font-weight:800; letter-spacing:.5px; padding:5px 11px; border-radius:999px;}
.blog-hero h1{font-size:26px; line-height:1.22; margin:12px 0 8px; font-weight:800;}
.blog-hero p{margin:0; font-size:14.5px; color:rgba(255,255,255,.88); line-height:1.55;}
.blog-list{padding:16px 18px 8px;}
.feat-card{display:block; background:#fff; border:1px solid var(--line2); border-radius:20px;
  overflow:hidden; margin-bottom:16px; text-decoration:none; color:var(--ink);
  box-shadow:0 8px 24px rgba(20,20,30,.08);}
.feat-cover{display:flex; align-items:flex-end; justify-content:space-between;
  height:120px; padding:14px 16px;
  background:radial-gradient(120px 80px at 85% 15%, rgba(255,255,255,.28), transparent 60%),
             linear-gradient(135deg,#8B5CF6,#6D28D9);}
.feat-emoji{font-size:56px; line-height:1; filter:drop-shadow(0 6px 12px rgba(0,0,0,.25));}
.feat-body{display:block; padding:16px 18px 18px;}
.feat-title{display:block; font-size:19px; font-weight:800; line-height:1.3; margin-bottom:6px;}
.feat-excerpt{display:block; font-size:14px; color:var(--ink-soft); line-height:1.55; margin-bottom:10px;}
.feat-meta{display:block; font-size:12.5px; color:var(--muted);}
.feat-meta b{color:var(--coral);}
.post-card{display:flex; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:14px; margin-bottom:12px; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-sm);}
.post-thumb{flex:0 0 76px; width:76px; height:76px; border-radius:14px; font-size:34px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#EDE9FE,#DDD6FE);}
.post-tx{flex:1; min-width:0; display:flex; flex-direction:column;}
.post-top{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.post-date{font-size:11.5px; color:var(--faint);}
.post-title{display:block; font-size:15.5px; font-weight:800; line-height:1.35; margin-bottom:4px;}
.post-excerpt{display:block; font-size:13px; color:var(--ink-soft); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.post-read{display:block; margin-top:6px; font-size:12.5px; font-weight:700; color:var(--coral);}

/* article page */
.art{padding:22px 20px 8px;}
.art-head{margin-bottom:18px;}
.art-title{font-size:27px; font-weight:800; line-height:1.25; margin:12px 0 10px;}
.art-lede{font-size:16px; line-height:1.6; color:var(--ink-soft); margin:0 0 16px;}
.art-meta{display:flex; align-items:center; gap:11px; padding:12px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.art-avatar{width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2px solid var(--coral-soft); background:#fff;}
.art-meta-tx{display:flex; flex-direction:column;}
.art-author{font-size:13.5px; font-weight:800;}
.art-date{font-size:12px; color:var(--muted);}
.art-cover{display:flex; align-items:center; justify-content:space-between;
  height:150px; border-radius:20px; padding:18px 20px; margin:18px 0 22px;
  background:radial-gradient(140px 90px at 85% 10%, rgba(255,255,255,.30), transparent 60%),
             linear-gradient(135deg,#8B5CF6,#6D28D9 60%,#5B21B6);
  box-shadow:0 12px 28px rgba(124,58,237,.28);}
.art-cover-emoji{font-size:72px; line-height:1; filter:drop-shadow(0 8px 14px rgba(0,0,0,.28));}
.art-cover-tag{color:#fff; font-size:12px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; opacity:.9; writing-mode:vertical-rl;}
.art-body{font-size:16px; line-height:1.8; color:#26262B;}
.art-body > p:first-of-type{font-size:17px; line-height:1.75; color:var(--ink);}
.art-body > p:first-of-type::first-letter{float:left; font-size:52px; line-height:.92;
  font-weight:800; color:var(--coral); padding:4px 10px 0 0;}
.art-body p{margin:0 0 16px;}
.art-body h2{font-size:19.5px; font-weight:800; line-height:1.35; margin:30px 0 10px;
  padding-left:13px; border-left:4px solid var(--coral);}
.art-body ul{list-style:none; margin:0 0 16px; padding:0;}
.art-body li{position:relative; padding-left:28px; margin-bottom:10px;}
.art-body li::before{content:"✓"; position:absolute; left:0; top:1px; width:19px; height:19px;
  background:var(--coral-soft); color:var(--coral-dark); border-radius:50%;
  font-size:11.5px; font-weight:900; display:flex; align-items:center; justify-content:center;}
.art-body em{color:var(--ink-soft);}
.art-body strong{color:var(--ink);}
.art-divider{display:flex; align-items:center; gap:12px; margin:30px 0 6px;}
.art-divider::before,.art-divider::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--line2),transparent);}
.art-divider span{font-size:16px;}
.art-cta{border-radius:20px; padding:24px 20px; margin:20px 0 6px; text-align:center; color:#fff;
  background:linear-gradient(135deg,#7C3AED,#5B21B6);
  box-shadow:0 12px 28px rgba(124,58,237,.30);}
.art-cta-emoji{font-size:34px; margin-bottom:6px;}
.art-cta h3{margin:0 0 6px; font-size:19px; font-weight:800;}
.art-cta p{margin:0 0 16px; font-size:13.5px; color:rgba(255,255,255,.88);}
.art-cta-btn{display:inline-block; background:#fff; color:var(--coral-dark); font-weight:800;
  font-size:15px; padding:12px 28px; border-radius:999px; text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.22);}
.art-related{margin:26px 0 4px;}
.art-related h3{font-size:17px; font-weight:800; margin:0 0 12px;}
.rel-card{display:flex; align-items:center; gap:13px; background:#fff;
  border:1px solid var(--line); border-radius:16px; padding:12px 14px; margin-bottom:10px;
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);}
.rel-thumb{flex:0 0 52px; width:52px; height:52px; border-radius:12px; font-size:25px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#EDE9FE,#DDD6FE);}
.rel-tx{flex:1; min-width:0; display:flex; flex-direction:column;}
.rel-title{font-size:14.5px; font-weight:800; line-height:1.35;}
.rel-meta{font-size:11.5px; color:var(--muted); margin-top:2px;}
.rel-arrow{color:var(--coral); font-weight:800; font-size:17px;}
.art-back{display:inline-block; margin:18px 0 10px; font-size:14px; color:var(--coral-dark);
  background:var(--coral-soft); padding:9px 16px; border-radius:999px;
  text-decoration:none; font-weight:700;}

/* blog section inside Profile page */
.prof-blog{margin-top:26px; padding-top:20px; border-top:1px solid var(--line);}
.prof-blog-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.prof-blog-head h3{margin:0; font-size:17px; font-weight:800;}
.prof-blog-head a{font-size:13px; font-weight:700; color:var(--coral); text-decoration:none;}
.prof-blog-card{display:flex; align-items:center; gap:13px; background:#fff;
  border:1px solid var(--line); border-radius:16px; padding:12px 14px; margin-bottom:10px;
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);}
.prof-blog-thumb{flex:0 0 52px; width:52px; height:52px; border-radius:12px; font-size:25px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#EDE9FE,#DDD6FE);}
.prof-blog-tx{flex:1; min-width:0; display:flex; flex-direction:column;}
.prof-blog-title{font-size:14.5px; font-weight:800; line-height:1.35;}
.prof-blog-meta{font-size:11.5px; color:var(--muted); margin-top:2px;}
.btn{display:inline-block; background:var(--coral); color:#fff; font-weight:800; font-size:15px;
  padding:12px 28px; border-radius:999px; text-decoration:none;
  box-shadow:0 6px 18px rgba(124,58,237,.35);}
.blog-back{display:inline-block; margin-top:8px; font-size:14px; color:var(--coral); text-decoration:none; font-weight:600;}

/* ---------- SEO: city landing pages ---------- */
.city-wrap{padding:20px 18px;}
.city-wrap h1{font-size:24px; margin:0 0 10px; line-height:1.3;}
.city-intro{font-size:15px; line-height:1.75; color:var(--ink); margin:0 0 16px;}
.city-facts{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; margin:0 0 16px;}
.city-facts h2{font-size:16px; margin:0 0 10px;}
.city-facts ul{margin:0; padding-left:18px; font-size:14px; color:var(--ink-soft);}
.city-facts li{margin-bottom:8px;}
.city-near h2{font-size:16px; margin:18px 0 10px;}