/* Toitong web — same colours as the Android app (ui/theme/Theme.kt). */
:root {
  --brand: #E8198B; --brand-dark: #7A12D6; --brand-soft: #FCE8F4; --blue: #2B1BF7; --purple: #8C14E6; --orange: #FF6B3A;
  --ink: #1D1B26; --muted: #807C8F; --online: #20B26B; --busy: #E39B1B; --danger: #D93636;
  --bg: #EFF2FE; --surface: #FFFFFF; --surface-2: #F5F7FE; --line: #E6E3EE;
  --grad: linear-gradient(135deg, #2B1BF7 0%, #8C14E6 35%, #E8198B 70%, #FF6B3A 100%);
  --grad-btn: linear-gradient(90deg, #8C14E6, #E8198B, #FF6B3A);
  --radius: 20px; --shadow: 0 8px 28px rgba(40, 10, 80, .10);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", "Noto Sans Devanagari", "Noto Naskh Arabic", sans-serif; }
a { color: var(--brand); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
img, video { max-width: 100%; display: block; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Buttons & fields */
.btn { border: 0; border-radius: 14px; padding: 12px 18px; font-weight: 700; cursor: pointer; background: var(--grad-btn); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.block { width: 100%; }
.btn.ghost { background: var(--brand-soft); color: var(--brand); }
.btn.plain { background: transparent; color: var(--brand); padding: 8px 10px; }
.btn.white { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.btn.danger { background: var(--danger); }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.field { width: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff; outline: none; }
.field:focus { border-color: var(--brand); }
textarea.field { resize: vertical; min-height: 90px; }
label.lbl { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; }
.error { color: var(--danger); font-size: 14px; margin-top: 10px; }
.notice { color: var(--online); font-size: 14px; margin-top: 10px; }

/* Auth pages */
.auth { min-height: 100%; background: var(--grad); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; }
.auth .brand { text-align: center; color: #fff; margin-bottom: 20px; }
.auth .brand img { width: 84px; height: 84px; border-radius: 24px; border: 3px solid #fff; margin: 0 auto 10px; box-shadow: 0 12px 30px rgba(40,10,80,.35); }
.auth .brand h1 { margin: 0; font-size: 34px; }
.auth .brand p { margin: 2px 0 0; opacity: .9; }
.card { background: var(--surface); border-radius: 28px; padding: 26px 22px; box-shadow: 0 24px 60px rgba(40, 10, 80, .25); width: 100%; max-width: 420px; }
.card h2 { margin: 0 0 6px; font-size: 22px; }
.auth .links { margin-top: 16px; text-align: center; }
.auth .links a, .auth .links button { color: #fff; font-weight: 600; background: none; border: 0; cursor: pointer; }
.auth .foot { margin-top: 18px; color: rgba(255,255,255,.8); font-size: 12px; text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 14px; }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Shell */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100%; }
.side { position: sticky; top: 0; height: 100vh; background: var(--grad); color: #fff; padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; }
.side .logo { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; padding: 0 8px 18px; color: #fff; }
.side .logo img { width: 40px; height: 40px; border-radius: 12px; border: 2px solid #fff; }
.side a.nav { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; color: rgba(255,255,255,.9); font-weight: 600; position: relative; }
.side a.nav:hover { background: rgba(255,255,255,.12); }
.side a.nav.on { background: #fff; color: var(--brand); }
.side .spacer { flex: 1; }
.side .dl { background: rgba(255,255,255,.16); border-radius: 14px; padding: 12px; font-size: 13px; }
.side .dl a { color: #fff; font-weight: 700; }
.ico { width: 22px; height: 22px; flex: none; }
.badge { background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
.side a.nav .badge { margin-inline-start: auto; }
.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 5; background: rgba(239,242,254,.92); backdrop-filter: blur(8px); padding: 12px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.topbar h1 { margin: 0; font-size: 20px; flex: 1; }
.search { flex: 1; max-width: 360px; }
.page { max-width: 640px; margin: 0 auto; padding: 18px 14px 100px; }

/* Wide screens: the feed in the middle and a right-hand column, like Facebook — no empty sides */
.main:has(.content) { background: radial-gradient(900px 500px at 90% -10%, rgba(232,25,139,.10), transparent 60%), radial-gradient(800px 500px at 10% 30%, rgba(43,27,247,.07), transparent 60%), var(--bg); }
.content { display: grid; grid-template-columns: minmax(0, 760px) 360px; justify-content: center; gap: 28px; padding: 0 24px; }
.content > .rail-left { display: none; }
@media (min-width: 1500px) {
  /* Three columns across the whole width: your card and shortcuts, the feed, suggestions and contacts. */
  .content { grid-template-columns: 300px minmax(0, 760px) 360px; justify-content: space-evenly; gap: 24px; }
  .content > .rail-left { display: flex; }
}
.shortcut i { font-style: normal; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #f5ebff, #ffe9f3); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.shortcut b { font-weight: 600; }
.content > .page { max-width: none; width: 100%; margin: 0; padding-inline: 0; }
.content > .page .box, .content > .page article.box { border-radius: 22px; box-shadow: 0 8px 28px rgba(40,10,80,.08); }
.rail { padding: 18px 2px 40px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 64px); overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
/* Cards keep their full height; the column scrolls instead of squashing them. */
.rail > * { flex-shrink: 0; }
.rail-card { background: var(--surface); border-radius: 22px; padding: 16px 18px; box-shadow: 0 8px 28px rgba(40,10,80,.08); border: 1px solid rgba(140,20,230,.06); transition: box-shadow .2s, transform .2s; }
.rail-card:hover { box-shadow: 0 14px 36px rgba(140,20,230,.14); }
.rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rail-head b { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.rail-head b i { font-style: normal; width: 30px; height: 30px; border-radius: 10px; background: var(--grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.rail-head a { font-weight: 700; }
.rail-row { display: flex; align-items: center; gap: 12px; padding: 8px 8px; margin-inline: -8px; border-radius: 14px; min-width: 0; transition: background .15s; }
.rail-row:hover { background: var(--surface-2); }
.rail-row.click { cursor: pointer; }
.rail-row .btn.sm { padding: 7px 14px; font-size: 13px; border-radius: 999px; }
.rail-row .btn.ghost:hover { background: var(--grad-btn); color: #fff; }
.me-card { padding: 0 0 18px; overflow: hidden; text-align: center; }
.me-banner { height: 92px; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.35), transparent 40%), var(--grad); }
.me-av { display: inline-block; margin-top: -44px; border-radius: 50%; padding: 3px; background: var(--grad); box-shadow: 0 10px 24px rgba(140,20,230,.3); }
.me-av .avatar { border: 3px solid var(--surface); }
.me-name { display: block; font-size: 18px; margin-top: 8px; }
.me-stats { display: flex; align-items: center; justify-content: space-between; margin: 14px 16px 0; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, #f5ebff, #ffe9f3); text-align: start; }
.me-stats small { display: block; color: var(--muted); font-size: 12px; }
.me-stats b { font-size: 20px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.me-stats .btn { border-radius: 999px; }
.reel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.reel-grid a { position: relative; aspect-ratio: 9 / 14; border-radius: 14px; overflow: hidden; background: var(--grad); }
.reel-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.reel-grid a:hover img { transform: scale(1.06); }
.reel-grid span { position: absolute; left: 6px; bottom: 6px; color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.app-card { display: flex; align-items: center; gap: 12px; background: radial-gradient(circle at 85% 10%, rgba(255,255,255,.3), transparent 45%), var(--grad); color: #fff; border: 0; }
.app-card img { width: 50px; height: 50px; border-radius: 14px; border: 2px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.app-card .btn.white { margin-inline-start: auto; color: var(--ink); border-radius: 999px; }
.rail-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); padding: 0 8px; }
.rail-foot a { color: var(--muted); }
.rail-foot a:hover { color: var(--brand); }
@media (max-width: 1199px) {
  .content { display: block; padding: 0; }
  .content > .page { max-width: 640px; margin: 0 auto; padding: 18px 14px 100px; }
  .rail { display: none; }
}
.page.wide { max-width: 980px; }
.tabbar { display: none; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .tabbar { display: flex; position: fixed; bottom: 10px; left: 10px; right: 10px; z-index: 10; background: var(--grad); border-radius: 22px; padding: 6px; box-shadow: 0 10px 30px rgba(40,10,80,.3); }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; color: rgba(255,255,255,.88); font-size: 11px; border-radius: 16px; position: relative; }
  .tabbar a.on { background: #fff; color: var(--brand); font-weight: 700; }
  .tabbar .badge { position: absolute; top: 2px; inset-inline-end: 18%; }
  .topbar .search { display: none; }
}

/* Cards, lists */
.box { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; }
.box .pad { padding: 14px 16px; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: var(--surface-2); }
.avatar { border-radius: 50%; object-fit: cover; flex: none; background: var(--grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; position: relative; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.dot { position: absolute; bottom: 1px; inset-inline-end: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--online); border: 2px solid #fff; }
.empty { text-align: center; color: var(--muted); padding: 36px 16px; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--brand-soft); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; margin: 30px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Composer & posts */
.composer .pad { display: flex; gap: 12px; align-items: center; }
.composer .fake { flex: 1; background: var(--surface-2); border-radius: 999px; padding: 11px 16px; color: var(--muted); cursor: pointer; }
.composer .acts { display: flex; gap: 8px; padding: 0 16px 14px; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.post-head .name { font-weight: 700; }
.post-head .verified { color: var(--brand); font-size: 14px; }
.post-caption { padding: 0 16px 12px; white-space: pre-wrap; word-wrap: break-word; }
.post-media img, .post-media video { width: 100%; max-height: 640px; object-fit: contain; background: #0b0a10; }
.text-status { color: #fff; font-weight: 800; text-align: center; padding: 48px 28px; min-height: 240px; display: flex; align-items: center; justify-content: center; white-space: pre-wrap; word-break: break-word; }
.post-stats { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 13px; color: var(--muted); }
.post-acts { display: flex; border-top: 1px solid var(--line); }
.post-acts button { flex: 1; background: none; border: 0; padding: 11px; font-weight: 600; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.post-acts button:hover { background: var(--surface-2); }
.post-acts button.on { color: var(--brand); }
.shared { margin: 0 16px 12px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pending { padding: 40px; text-align: center; background: var(--surface-2); color: var(--muted); }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(20, 10, 40, .55); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #fff; border-radius: 24px; width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 17px; }
.modal-head .x { margin-inline-start: auto; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--muted); }
.modal-body { padding: 16px 18px; overflow: auto; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; }
.styles { display: flex; gap: 10px; margin: 12px 0; }
.styles span { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; }
.styles span.on { border-color: var(--ink); }
.comment { display: flex; gap: 10px; margin-bottom: 12px; }
.comment .bubble { background: var(--surface-2); border-radius: 16px; padding: 8px 12px; }
.comment .bubble b { display: block; font-size: 13px; }
/* Facebook-style comments: replies indented under their comment, like / reply / edit links, a like count. */
.comment .bubble { position: relative; display: inline-block; max-width: 100%; }
.comment.reply { margin: 8px 0 0; }
.comment .c-likes { position: absolute; right: -8px; bottom: -10px; background: var(--surface); border-radius: 999px; padding: 1px 6px; font-size: 11px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.c-acts { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 0 8px; }
.c-acts a { color: var(--muted); font-weight: 700; }
.c-acts a.on { color: var(--brand); }
.modal-foot { flex-wrap: wrap; }
.modal-foot .muted.small { flex-basis: 100%; }
.modal-foot .field { flex: 1; min-width: 0; }
/* The ⋯ menu on a post. */
.menu-wrap { position: relative; }
.post-menu { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 210px; background: var(--surface); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; }
.post-menu.hidden { display: none; }
.post-menu button { background: none; border: 0; text-align: left; padding: 10px 12px; border-radius: 10px; font: inherit; color: inherit; cursor: pointer; }
.post-menu button:hover { background: var(--surface-2); }
.post-menu button.danger { color: var(--danger); }
.picker { max-height: 360px; overflow-y: auto; margin-top: 8px; }
.picker .list-item.on { background: var(--brand-soft); }
.msg .post-link { font-weight: 700; margin-top: 6px; font-size: 13px; }

/* ================================================================================================
   Facebook-style layout.

   Everything below re-dresses the shell the way Facebook does it — a pale grey page, plain white
   cards with small corners and a hairline shadow, a quiet white sidebar, and tighter spacing — so
   the eye goes to the posts rather than to the furniture. The colours stay Toitong's: the brand
   gradient is kept for the logo, the primary buttons, avatars and whatever is currently selected.
   It is written as one block at the end so it can be lifted out again in one piece.
   ================================================================================================ */
:root {
  --bg: #F0F2F5;
  --surface-2: #F0F2F5;
  --line: #CED0D4;
  --radius: 8px;
  /* Facebook's cards sit on a hairline rather than a soft cloud. */
  --shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

/* The page is flat grey; the coloured glow behind the feed goes. */
.main:has(.content) { background: var(--bg); }

/* Sidebar: white and quiet, with the colour saved for the icons and the selected row. */
.side {
  background: var(--surface);
  color: var(--ink);
  border-inline-end: 1px solid var(--line);
  padding: 12px 8px;
}
.side .logo { color: var(--ink); font-size: 20px; padding: 4px 8px 14px; }
.side .logo img { border: 0; }
.side a.nav { color: var(--ink); border-radius: var(--radius); padding: 9px 10px; font-weight: 500; }
.side a.nav .ico { color: var(--brand); }
.side a.nav:hover { background: var(--surface-2); }
.side a.nav.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.side a.nav.on .ico { color: var(--brand); }
.side .dl { background: var(--surface-2); color: var(--muted); border-radius: var(--radius); }
.side .dl a { color: var(--brand); }

/* A white bar across the top, as on Facebook, with the search as a grey pill. */
.topbar {
  background: var(--surface);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.topbar h1 { font-size: 19px; font-weight: 700; flex: none; }
.topbar .search {
  background: var(--surface-2);
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  margin-inline-start: auto;
}
.topbar .search:focus { outline: 2px solid var(--brand-soft); }

/* Cards: white, small corners, hairline shadow — and no hover lift. */
.box, article.box, .rail-card,
.content > .page .box, .content > .page article.box {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 0;
}
.rail-card { padding: 12px 14px; }
.rail-card:hover { box-shadow: var(--shadow); }
.rail-head b { font-size: 15px; }
.rail-head b i { border-radius: 50%; width: 28px; height: 28px; }
.rail-row { border-radius: var(--radius); padding: 7px 8px; }
.rail-row:hover { background: var(--surface-2); }

/* Buttons keep the brand gradient but take Facebook's compact shape. */
.btn { border-radius: 6px; padding: 9px 16px; font-weight: 600; }
.btn.sm { border-radius: 6px; padding: 6px 12px; }
.rail-row .btn.sm { border-radius: 6px; }
.field { border-radius: 999px; border-color: var(--line); background: var(--surface-2); }
textarea.field { border-radius: var(--radius); }

/* A narrower feed, closer to Facebook's 590px column, and less air between cards. */
.content { gap: 16px; padding: 0 16px; }
.content > .page { padding-block: 16px 80px; }
@media (min-width: 1500px) {
  .content { grid-template-columns: 300px minmax(0, 590px) 340px; gap: 16px; }
}

/* The profile card loses its tall gradient banner for Facebook's flatter look. */
.me-banner { height: 60px; }
.shortcut i { border-radius: 50%; width: 34px; height: 34px; background: var(--surface-2); }

/* Chat bubbles: Messenger's shape. */
.msg { border-radius: 18px; box-shadow: none; }
.list-item { border-radius: var(--radius); }

/* Market: a grid of product cards that reflows from two across to four. */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.prod { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.prod:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.prod-img { aspect-ratio: 1 / 1; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 34px; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prod-body s { opacity: .7; }

/* Groups */
.btn.ghost.danger { background: transparent; color: var(--danger); }
.group-av .ico { color: #fff; }
/* Who is speaking, shown once at the top of a run of messages from the same member. */
.msg-from { font-size: 12px; font-weight: 800; color: var(--brand); margin-bottom: 3px; }

/* Reels */
.reels { height: calc(100vh - 60px); overflow-y: auto; scroll-snap-type: y mandatory; }
.reel { height: calc(100vh - 60px); scroll-snap-align: start; display: flex; justify-content: center; align-items: center; background: #000; position: relative; }
.reel video { height: 100%; max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.reel .info { position: absolute; left: 16px; right: 80px; bottom: 24px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.reel .side-acts { position: absolute; right: 12px; bottom: 30px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.reel .side-acts button { background: rgba(255,255,255,.16); border: 0; color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.reel .side-acts button.on { color: #FF4D8D; }
.reel .side-acts small { color: #fff; font-size: 12px; margin-top: -12px; }
@media (max-width: 860px) { .reels, .reel { height: calc(100vh - 140px); } }
/* Channel team roles. */
.role-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.role-pill.owner { color: #fff; background: linear-gradient(90deg, #2B1BF7, #8C14E6 40%, #E8198B 75%, #FF6B3A); }
.role-pill.admin { color: #8C14E6; background: rgba(140,20,230,.14); }
.role-pill.editor { color: #E0561E; background: rgba(255,107,58,.14); }
.role-notes { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
/* Friends · Followers · Following on a profile. */
.p-stats { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.p-stat { display: flex; flex-direction: column; align-items: center; min-width: 88px; padding: 8px 14px; border: 0; border-radius: 16px; background: rgba(255,255,255,.18); color: inherit; font: inherit; cursor: pointer; }
.p-stat:hover { background: rgba(255,255,255,.28); }
.p-stat b { font-size: 18px; }
.p-stat small { opacity: .9; }
/* The company signature: gold name between fine gold rules. */
.co-sig { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 6px; text-align: center; }
.co-sig small { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: #6B6680; font-weight: 700; }
/* In the app's colours: a brand-gradient pill with white letters (light pages), or a white pill with
   brand-gradient letters (dark / gradient backgrounds). */
.co-sig .co-name { padding: 8px 18px; border-radius: 999px; background: linear-gradient(90deg, #2B1BF7 0%, #8C14E6 40%, #E8198B 75%, #FF6B3A 100%); box-shadow: 0 6px 18px rgba(140,20,230,.35); border: 1px solid rgba(255,255,255,.55); }
.co-sig .co-name i { display: none; }
.co-sig .co-name b { font-size: 15px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; color: #fff; }
.co-sig.dark .co-name { background: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.co-sig.dark .co-name b { color: #8C14E6; background: linear-gradient(90deg, #2B1BF7, #8C14E6 40%, #E8198B 75%, #FF6B3A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.co-sig span { font-size: 11px; color: #6B6680; font-weight: 600; }
.co-sig.dark small, .co-sig.dark span { color: rgba(255,255,255,.85); }
/* TikTok-style reels: tabs + search on top, bookmark, share panel, #hashtags, grids. */
.reels { position: relative; }
.reels-top { position: sticky; top: 0; z-index: 5; height: 0; display: flex; gap: 18px; align-items: flex-start; padding: 0 18px; }
.reels-top a { margin-top: 14px; color: rgba(255,255,255,.7); font-weight: 700; font-size: 17px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.reels-top a.on { color: #fff; border-bottom: 3px solid #FF4D8D; padding-bottom: 2px; }
.reels-top .rt-icon { color: #fff; }
.reel .info p a.tag { color: #fff; font-weight: 800; }
.reel .side-acts button.saved { color: #FFC857; background: rgba(255,200,87,.25); }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; }
.share-act { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; font: inherit; }
.share-act span { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #8C14E6, #FF6B3A); display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; }
.reel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
@media (min-width: 900px) { .reel-grid { grid-template-columns: repeat(4, 1fr); } }
.reel-cell { position: relative; aspect-ratio: 9 / 14; background: #1C1C1E; border-radius: 6px; overflow: hidden; }
.reel-cell img { width: 100%; height: 100%; object-fit: cover; }
.reel-cell span { position: absolute; left: 6px; bottom: 4px; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 14px; background: var(--surface); color: inherit; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.tag-chip small { color: var(--muted); }
.tag-row .tag-chip:nth-child(-n+3) { background: linear-gradient(135deg, #8C14E6, #FF6B3A); color: #fff; }
.tag-row .tag-chip:nth-child(-n+3) small { color: rgba(255,255,255,.85); }
.tag-badge { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, #8C14E6, #FF6B3A); color: #fff; font-size: 36px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.reel-viewer { width: min(460px, 100vw); height: 100vh; }
.reel-viewer .reel { height: 100vh; }
.pv-x { position: fixed; top: 12px; right: 16px; z-index: 210; background: rgba(255,255,255,.15); color: #fff; border: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; cursor: pointer; }

/* Chat */
.chat { display: flex; flex-direction: column; height: calc(100vh - 62px); }
.chat .msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.msg { max-width: 76%; padding: 9px 13px; border-radius: 18px; background: #fff; box-shadow: 0 2px 8px rgba(40,10,80,.06); white-space: pre-wrap; word-wrap: break-word; align-self: flex-start; }
.msg.mine { align-self: flex-end; background: var(--grad-btn); color: #fff; }
.msg img { border-radius: 12px; max-height: 320px; cursor: pointer; }
.msg .t { font-size: 11px; opacity: .7; margin-top: 3px; text-align: end; }
.msg.deleted { font-style: italic; opacity: .6; }
.chat .send { display: flex; gap: 8px; padding: 10px 12px; background: #fff; border-top: 1px solid var(--line); align-items: flex-end; }
.chat .send textarea { flex: 1; min-height: 44px; max-height: 140px; border-radius: 22px; padding: 11px 16px; resize: none; }
.iconbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.iconbtn.fill { background: var(--grad-btn); color: #fff; }
@media (max-width: 860px) { .chat { height: calc(100vh - 62px - 86px); } }

/* Profile */
.hero { background: var(--grad); color: #fff; border-radius: 0 0 28px 28px; padding: 28px 20px; text-align: center; margin: -18px -14px 16px; }
.hero .avatar { border: 3px solid #fff; margin: 0 auto 10px; }
.hero h2 { margin: 0; }
.wallet { background: var(--grad); color: #fff; border-radius: 22px; padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow); }
.wallet .amt { font-size: 28px; font-weight: 800; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photos .ph { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-2); position: relative; }
.photos .ph img { width: 100%; height: 100%; object-fit: cover; }
.photos .ph .st { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; border-radius: 8px; padding: 2px 6px; }
.banner { height: 180px; background: var(--grad) center/cover; border-radius: var(--radius) var(--radius) 0 0; }

/* Background post upload */
.upload-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 150; width: min(420px, 92vw); display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 18px; padding: 10px 14px; box-shadow: 0 16px 40px rgba(40,10,80,.25); border: 1px solid #e9d5ff; }
.upload-toast img, .upload-toast .up-ico { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: none; display: flex; align-items: center; justify-content: center; background: #000; font-size: 22px; }
.upload-toast.failed { border-color: var(--danger); color: var(--danger); }
.up-track { height: 6px; border-radius: 999px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.up-fill { height: 100%; width: 0; border-radius: 999px; background: var(--grad-btn); transition: width .2s; }

/* Ads inside a channel's video (before it, and halfway) */
.roll-wrap { position: relative; }
.roll { position: absolute; inset: 0; background: #000; z-index: 2; display: flex; align-items: center; justify-content: center; }
.roll-media { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.roll-top { position: absolute; top: 10px; left: 10px; color: #fff; font-weight: 700; font-size: 13px; }
.roll-badge { background: #FFC857; color: #000; border-radius: 4px; padding: 1px 6px; font-weight: 800; font-size: 11px; }
.roll-cta { position: absolute; left: 12px; bottom: 16px; background: var(--grad-btn); color: #fff; font-weight: 700; border-radius: 999px; padding: 8px 16px; }
.roll-skip { position: absolute; right: 12px; bottom: 14px; background: rgba(0,0,0,.7); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 9px 14px; font-weight: 700; cursor: pointer; }
.roll-skip:disabled { cursor: default; opacity: .85; }
.roll-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #FFC857; }

/* Full-screen photo viewer */
.pv-bg { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pv-img { max-width: 96vw; max-height: 88vh; object-fit: contain; transition: transform .2s; user-select: none; }
.pv-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; padding: 12px; z-index: 1; }
.pv-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.pv-btn:hover { background: rgba(255,255,255,.28); }

/* People You May Know (web Friends page) */
.pymk { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; }
.pymk-card { flex: none; width: 160px; background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); cursor: pointer; scroll-snap-align: start; }
.pymk-card img, .pymk-ph { width: 100%; height: 150px; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; font-size: 40px; font-weight: 800; }
.pymk-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.pymk-body .chip { align-self: flex-start; font-size: 11px; }

/* Front page */
.landing { background: var(--grad); background-attachment: fixed; color: #fff; min-height: 100%; }
.l-top { display: flex; align-items: center; gap: 12px; max-width: 1120px; margin: 0 auto; padding: 18px 20px; }
.l-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 24px; font-weight: 800; }
.l-brand img { width: 42px; height: 42px; border-radius: 12px; border: 2px solid #fff; }
.lang-sel { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 10px; padding: 7px 10px; }
.lang-sel option { color: #1D1B26; }
.l-hero { max-width: 1120px; margin: 0 auto; padding: 40px 20px 70px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.l-hero h1 { font-size: 56px; line-height: 1.08; margin: 0 0 14px; letter-spacing: -.5px; }
.l-lead { font-size: 21px; opacity: .95; margin: 0 0 28px; }
.l-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.l-ctas.center { justify-content: center; margin-top: 22px; }
.btn.big { padding: 14px 22px; border-radius: 18px; font-size: 16px; text-align: start; }
.btn.big span { display: flex; flex-direction: column; line-height: 1.25; }
.btn.big small { font-weight: 500; font-size: 12px; opacity: .75; }
.btn.white { color: var(--ink); }
.btn.white .ico { color: #20B26B; }
.btn.glass { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.45); color: #fff; backdrop-filter: blur(6px); }
.dl-all { display: inline-block; margin-top: 14px; color: rgba(255,255,255,.85); font-size: 13px; text-decoration: underline; }
.l-phone { justify-self: center; width: 260px; height: 520px; border-radius: 42px; background: #0f0b1a; padding: 12px; box-shadow: 0 40px 80px rgba(20,5,50,.55), inset 0 0 0 2px rgba(255,255,255,.12); transform: rotate(-4deg); }
.l-screen { height: 100%; border-radius: 32px; background: var(--grad); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.l-screen img { width: 96px; height: 96px; border-radius: 28px; border: 3px solid #fff; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.l-screen b { font-size: 26px; }
.l-screen span { opacity: .9; font-size: 14px; }
.l-mini { display: flex; gap: 10px; margin-top: 26px; }
.l-mini i { font-style: normal; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.l-section { background: #fff; color: var(--ink); padding: 64px 20px; }
.l-section h2 { text-align: center; font-size: 34px; margin: 0 0 36px; }
.l-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.l-card { background: var(--surface-2); border-radius: 22px; padding: 24px; box-shadow: 0 6px 20px rgba(40,10,80,.06); transition: transform .2s; }
.l-card:hover { transform: translateY(-3px); }
.l-emoji { width: 52px; height: 52px; border-radius: 16px; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 12px; }
.l-card h3 { margin: 0 0 6px; font-size: 18px; }
.l-card p { margin: 0; color: var(--muted); }
.l-steps { background: var(--bg); }
.l-steps ol { max-width: 520px; margin: 0 auto; font-size: 17px; line-height: 2; }
.l-steps .btn.white { background: var(--grad-btn); color: #fff; }
.l-steps .btn.white .ico { color: #fff; }
.l-foot { text-align: center; padding: 36px 20px 44px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; }
.l-foot img { width: 40px; height: 40px; border-radius: 12px; border: 2px solid #fff; }
.l-foot a { color: #fff; }

/* Front page — premium layer: glow blobs, device mockups, screenshot carousel, CTA band */
.landing { position: relative; overflow-x: hidden; background: radial-gradient(1200px 700px at 80% -10%, #ff6b3a55, transparent 60%), radial-gradient(900px 600px at -10% 20%, #2b1bf788, transparent 60%), linear-gradient(160deg, #1a0b3d 0%, #3a0f7a 35%, #8c14e6 70%, #e8198b 100%); }
.l-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.l-blobs i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: l-drift 18s ease-in-out infinite alternate; }
.l-blobs i:nth-child(1) { width: 420px; height: 420px; background: #e8198b; top: -120px; right: 8%; }
.l-blobs i:nth-child(2) { width: 360px; height: 360px; background: #2b1bf7; top: 260px; left: -120px; animation-delay: -6s; }
.l-blobs i:nth-child(3) { width: 300px; height: 300px; background: #ff6b3a; top: 520px; right: -80px; animation-delay: -12s; }
@keyframes l-drift { to { transform: translate(40px, 30px) scale(1.12); } }
.landing > header, .landing > section, .landing > footer { position: relative; z-index: 1; }
.l-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); font-size: 13px; font-weight: 700; margin-bottom: 16px; backdrop-filter: blur(8px); }
.l-pill b { color: #3ef08f; font-size: 10px; }
.l-hero h1 { background: linear-gradient(90deg, #fff 0%, #ffe3f2 60%, #ffd2bf 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l-stats { display: flex; gap: 28px; margin-top: 28px; }
.l-stats div { display: flex; flex-direction: column; }
.l-stats b { font-size: 26px; font-weight: 800; }
.l-stats span { font-size: 13px; opacity: .8; }
.l-devices { position: relative; height: 560px; justify-self: center; width: 380px; }
.l-devices .mk-phone { position: absolute; }
.l-devices .front { left: 30px; top: 10px; z-index: 2; animation: l-float 6s ease-in-out infinite; }
.l-devices .back { right: -10px; top: 70px; transform: rotate(8deg) scale(.86); opacity: .92; z-index: 1; }
@keyframes l-float { 50% { transform: translateY(-12px); } }
.l-float { position: absolute; z-index: 3; background: rgba(255,255,255,.95); color: var(--ink); border-radius: 16px; padding: 10px 14px; font-size: 14px; box-shadow: 0 18px 40px rgba(20,5,50,.35); display: flex; align-items: center; gap: 6px; animation: l-float 5s ease-in-out infinite; }
.l-float small { color: var(--muted); margin-left: 4px; }
.l-float.f1 { left: -40px; top: 120px; animation-delay: -2s; }
.l-float.f2 { right: 10px; bottom: 70px; font-weight: 800; color: #e8198b; }

/* The phone frame and the screens drawn inside it */
.mk-phone { width: 250px; height: 520px; border-radius: 40px; background: #0d0a16; padding: 10px; box-shadow: 0 40px 90px rgba(10,2,30,.6), inset 0 0 0 2px rgba(255,255,255,.14); }
.mk-phone::before { content: ''; position: absolute; }
.mk-screen { position: relative; height: 100%; border-radius: 31px; overflow: hidden; font-size: 11px; line-height: 1.35; display: flex; flex-direction: column; text-align: start; }
.mk-screen.light { background: #eff2fe; color: var(--ink); }
.mk-screen.dark { background: #0f0b1a; color: #fff; }
.mk-status { display: flex; justify-content: space-between; padding: 8px 18px 4px; font-size: 10px; font-weight: 700; position: relative; z-index: 2; }
.mk-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 800; flex: none; box-shadow: 0 0 0 2px #fff; }
.mk-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 12px 8px; }
.mk-logo { font-size: 17px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-stories { display: flex; gap: 8px; padding: 0 12px 10px; }
.mk-story { padding: 2px; border-radius: 50%; background: var(--grad); display: inline-flex; }
.mk-post { background: #fff; margin: 0 8px 8px; border-radius: 16px; padding: 10px; box-shadow: 0 4px 14px rgba(40,10,80,.07); }
.mk-post p { margin: 6px 0; }
.mk-row { display: flex; align-items: center; gap: 8px; }
.mk-row div { display: flex; flex-direction: column; }
.mk-row small { color: var(--muted); font-size: 9px; }
.mk-photo { height: 120px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 44px; }
.mk-photo.sunset { background: linear-gradient(180deg, #ff9a5a 0%, #ff5e8a 45%, #6b2bd6 100%); }
.mk-react { display: flex; justify-content: space-between; margin-top: 7px; color: var(--muted); font-size: 10px; }
.mk-status-post { margin-top: 8px; border-radius: 12px; padding: 22px 10px; text-align: center; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2b1bf7, #e8198b); }
.mk-nav { margin-top: auto; display: flex; justify-content: space-around; margin: auto 8px 8px; padding: 9px 4px; border-radius: 20px; background: var(--grad); font-size: 15px; }
.mk-nav span { opacity: .75; padding: 2px 10px; border-radius: 12px; }
.mk-nav span.on { opacity: 1; background: #fff; }
.mk-reel-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 90px; background: radial-gradient(circle at 30% 30%, #ff6b3a, transparent 55%), radial-gradient(circle at 70% 70%, #2b1bf7, transparent 55%), linear-gradient(160deg, #3a0f7a, #e8198b); }
.mk-screen.live .mk-reel-bg { background: radial-gradient(circle at 50% 35%, #ffb36b, transparent 50%), linear-gradient(170deg, #1a0b3d, #8c14e6 60%, #e8198b); }
.mk-reel-side { position: absolute; right: 10px; bottom: 90px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 18px; font-weight: 800; z-index: 1; }
.mk-reel-side span:nth-child(even) { font-size: 10px; margin-bottom: 8px; }
.mk-reel-info { position: absolute; left: 12px; right: 60px; bottom: 22px; z-index: 1; }
.mk-reel-info p { margin: 6px 0 2px; font-size: 12px; }
.mk-reel-info em { font-style: normal; border: 1px solid #fff; border-radius: 8px; padding: 1px 6px; font-size: 9px; margin-left: 4px; }
.mk-chathead { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; background: var(--grad); color: #fff; }
.mk-chathead div { display: flex; flex-direction: column; flex: 1; }
.mk-chathead small { font-size: 9px; color: #b8ffd6; }
.mk-msgs { display: flex; flex-direction: column; gap: 6px; padding: 10px; flex: 1; }
.mk-msgs span { max-width: 75%; padding: 7px 10px; border-radius: 14px; }
.mk-msgs .in { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; box-shadow: 0 2px 8px rgba(40,10,80,.06); }
.mk-msgs .out { align-self: flex-end; background: var(--grad-btn); color: #fff; border-bottom-right-radius: 4px; }
.mk-msgs .photo { font-size: 40px; padding: 14px 26px; background: linear-gradient(135deg, #ffe0b8, #ffb3c8); }
.mk-msgs .voice { color: #8c14e6; font-weight: 700; letter-spacing: 1px; }
.mk-input { display: flex; align-items: center; gap: 8px; margin: 0 8px 10px; padding: 6px; background: #fff; border-radius: 20px; }
.mk-input span { flex: 1; color: var(--muted); }
.mk-input i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--grad-btn); color: #fff; display: flex; align-items: center; justify-content: center; }
.mk-call-bg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(circle at 50% 35%, #8c14e6aa, transparent 60%), linear-gradient(180deg, #1a0b3d, #0f0b1a); }
.mk-call-bg b { font-size: 16px; margin-top: 6px; }
.mk-call-bg small { opacity: .8; }
.mk-pip { position: absolute; right: 12px; top: 36px; width: 70px; height: 96px; border-radius: 14px; background: linear-gradient(160deg, #2b1bf7, #8c14e6); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.mk-call-btns { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; justify-content: center; gap: 12px; }
.mk-call-btns span { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.mk-call-btns .end { background: #e5323b; transform: rotate(135deg); }
.mk-live-top { position: relative; z-index: 1; display: flex; gap: 6px; padding: 6px 12px; font-weight: 700; }
.mk-live-top span { background: rgba(0,0,0,.35); border-radius: 8px; padding: 2px 7px; }
.mk-live-top .mk-live { background: #e5323b; }
.mk-comments { position: absolute; left: 10px; bottom: 24px; display: flex; flex-direction: column; gap: 5px; z-index: 1; }
.mk-comments span { background: rgba(0,0,0,.35); border-radius: 12px; padding: 5px 9px; width: fit-content; }
.mk-hearts { position: absolute; right: 14px; bottom: 30px; display: flex; flex-direction: column; gap: 6px; font-size: 20px; z-index: 1; animation: l-float 3s ease-in-out infinite; }

/* "See the app" carousel */
.l-shots { background: linear-gradient(180deg, #f6f3ff, #fff); }
.l-sub { text-align: center; color: var(--muted); margin: -24px 0 30px; font-size: 17px; }
.l-carousel { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 20px 26px; max-width: 1400px; margin: 0 auto; justify-content: safe center; scrollbar-width: thin; }
.l-shot { margin: 0; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; transition: transform .25s; }
.l-shot:hover { transform: translateY(-6px); }
.l-shot .mk-phone { width: 220px; height: 460px; box-shadow: 0 26px 60px rgba(40,10,80,.28), inset 0 0 0 2px rgba(255,255,255,.12); }
.l-shot figcaption { font-weight: 800; font-size: 16px; padding: 6px 16px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); }

/* Features, steps, closing band */
.l-features .l-card { background: #fff; border: 1px solid var(--line); }
.l-features .l-card:hover { box-shadow: 0 18px 40px rgba(140,20,230,.14); border-color: #e9d5ff; }
.l-steps .l-stepcards { list-style: none; padding: 0; max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; font-size: 16px; line-height: 1.5; }
.l-stepcards li { background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 8px 24px rgba(40,10,80,.08); }
.l-stepcards i { font-style: normal; display: flex; width: 38px; height: 38px; border-radius: 12px; background: var(--grad); color: #fff; font-weight: 800; align-items: center; justify-content: center; margin-bottom: 10px; }
.l-cta { text-align: center; padding: 70px 20px; }
.l-cta img { width: 72px; height: 72px; border-radius: 20px; border: 3px solid #fff; margin: 0 auto 14px; box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.l-cta h2 { font-size: 38px; margin: 0 0 8px; }
.l-cta p { font-size: 18px; opacity: .9; margin: 0 0 8px; }

@media (max-width: 860px) {
  .l-hero { grid-template-columns: 1fr; padding-top: 20px; text-align: center; }
  .l-hero h1 { font-size: 38px; }
  .l-ctas { justify-content: center; }
  .l-stats { justify-content: center; }
  .l-devices { width: 280px; height: 470px; }
  .l-devices .mk-phone.front { left: 10px; width: 220px; height: 450px; }
  .l-devices .back, .l-float.f1 { display: none; }
  .l-float.f2 { right: -6px; }
  .l-grid, .l-steps .l-stepcards { grid-template-columns: 1fr; }
  .l-carousel { justify-content: flex-start; }
  .l-top .btn { display: none; }
  .l-cta h2 { font-size: 30px; }
}

[dir="rtl"] .reel .info { left: 80px; right: 16px; }
[dir="rtl"] .reel .side-acts { right: auto; left: 12px; }