/* ---- Design tokens ---- */
:root {
  --bg: #f5f5f7; --surface: #ffffff; --raised: #f0f1f4;
  --ink: #0b0f14; --ink-2: #48505c; --muted: #8a93a1; --line: rgba(11, 15, 20, .08);
  --accent: #0a8f62; --accent-2: #10b3a3; --accent-soft: #e5f5ee; --on-accent: #ffffff;
  --violet: #6b4de6; --violet-soft: #efebfd;
  --glass: rgba(255, 255, 255, .72);
  --shadow-1: 0 1px 2px rgba(11, 15, 20, .04), 0 6px 20px rgba(11, 15, 20, .06);
  --shadow-2: 0 2px 6px rgba(11, 15, 20, .06), 0 18px 48px rgba(11, 15, 20, .14);
  --r-lg: 28px; --r: 20px; --r-sm: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --nav-h: 60px; --tab-h: 66px;
}
:root[data-theme=dark] {
    --bg: #000000; --surface: #1c1c1e; --raised: #2c2c2e;
    --ink: #f5f5f7; --ink-2: #c5c7cc; --muted: #8e8e93; --line: rgba(255, 255, 255, .1);
    --accent: #2fbf8a; --accent-2: #37c8d0; --accent-soft: rgba(47, 191, 138, .16); --on-accent: #04130d;
    --violet: #a08bff; --violet-soft: rgba(160, 139, 255, .16);
    --glass: rgba(28, 28, 30, .72);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 18px 48px rgba(0, 0, 0, .6);
  }

/* ---- Base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: "Anek Bangla", "Hind Siliguri", system-ui, "Segoe UI", sans-serif;
       font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
[data-ic], .ic { display: inline-grid; place-items: center; }
.chip > svg { vertical-align: -2px; color: var(--muted); }
[data-ic] svg, .ic svg, .icon-btn > svg, .btn > svg, .chip > svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 10px; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, 6%) scale(1.12); } }
@keyframes shimmer { to { background-position: -200% 0; } }
.stagger > * { animation: rise .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- Navigation: glass bar on top (desktop), tab bar at the bottom (phones) ---- */
.nav { position: fixed; z-index: 2000; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; gap: 24px;
       padding: 0 28px; background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
       border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.logo { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; }
.logo::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.links { display: flex; gap: 4px; margin-left: auto; }
.links a { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink-2);
           transition: background .25s var(--ease), color .25s var(--ease), transform .15s var(--ease); }
.links a [data-ic] { font-size: 18px; }
.links a:hover { color: var(--ink); background: var(--line); }
.links a:active { transform: scale(.96); }
.links a.on { background: var(--ink); color: var(--surface); }

main { padding-top: var(--nav-h); }
.page { display: none; }
.page.on { display: block; animation: rise .5s var(--ease); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 56px 24px 96px; }
.page-head { margin-bottom: 28px; }
.page-head h2 { margin: 0; font-size: clamp(32px, 5vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.page-head p { margin: 8px 0 0; font-size: 18px; color: var(--ink-2); max-width: 36em; }

/* ---- Shared pieces ---- */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 20px 2px 10px; letter-spacing: .01em; }
.label:first-child { margin-top: 0; }
.empty { font-size: 15px; color: var(--muted); padding: 6px 2px; }
.icon-btn { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--muted); font-size: 20px; flex: none;
            transition: background .2s, color .2s, transform .15s var(--ease); }
.icon-btn:hover { background: var(--raised); color: var(--ink); }
.icon-btn:active { transform: scale(.92); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 16px;
       background: var(--accent); color: var(--on-accent); transition: transform .15s var(--ease), filter .2s; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.97); }
.btn.quiet { background: var(--raised); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 15px; font-weight: 500; background: var(--raised); border-radius: 999px; padding: 7px 14px;
        transition: background .2s, color .2s, transform .15s var(--ease); }
button.chip:hover { background: var(--line); }
button.chip:active { transform: scale(.96); }
.chip.on { background: var(--ink); color: var(--surface); }
.chip small { color: var(--muted); font-size: 12px; margin-left: 5px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 2px 8px; background: var(--raised); color: var(--ink-2); }
.badge.v { background: var(--violet-soft); color: var(--violet); }
.badge.g { background: var(--accent-soft); color: var(--accent); }

/* Search: two stacked inputs joined by a dotted rail */
.od { display: flex; align-items: center; gap: 12px; background: var(--raised); border-radius: var(--r); padding: 4px 6px 4px 16px; }
.dots { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.dots i { display: block; }
.dots .a { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.dots .l { width: 2px; height: 26px; background: var(--line); border-radius: 2px; }
.dots .b { width: 10px; height: 10px; border-radius: 3px; background: var(--ink); }
.inputs { flex: 1; min-width: 0; }
.field { position: relative; display: flex; align-items: center; }
.field + .field { border-top: 1px solid var(--line); }
.field input { width: 100%; border: 0; background: transparent; padding: 14px 0; font-size: 17px; font-weight: 500; outline: none; text-overflow: ellipsis; }
.field input::placeholder { color: var(--muted); font-weight: 400; }
.suggest { position: absolute; left: -38px; right: -6px; top: calc(100% + 8px); background: var(--surface); border-radius: var(--r);
           box-shadow: var(--shadow-2); max-height: 320px; overflow-y: auto; z-index: 20; padding: 6px; animation: pop .25s var(--ease); }
.sug { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 13px; cursor: pointer; }
.sug:hover { background: var(--raised); }
.sug .ic { width: 36px; height: 36px; border-radius: 11px; background: var(--raised); font-size: 18px; color: var(--ink-2); flex: none; }
.sug:hover .ic { background: var(--surface); }
.sug .t { min-width: 0; text-align: left; }
.sug .t b { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug .t span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { font-size: 14px; color: #c2620a; padding: 10px 4px 0; text-align: left; }
.status:empty { display: none; }

/* List rows */
.item { display: flex; align-items: center; gap: 14px; padding: 13px; border-radius: var(--r); border: 1.5px solid var(--line); margin-bottom: 8px; width: 100%;
        text-align: left; background: var(--surface); transition: border-color .2s, background .2s, transform .15s var(--ease); }
button.item:hover { border-color: var(--muted); }
button.item:active { transform: scale(.985); }
.item.on { border-color: var(--accent); background: var(--accent-soft); }
.item > .ic { width: 44px; height: 44px; border-radius: 14px; background: var(--raised); font-size: 22px; color: var(--ink-2); flex: none; }
.item.on > .ic { background: var(--accent); color: var(--on-accent); }
.item .t { flex: 1; min-width: 0; }
.item .t b { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
.item .t span { display: block; font-size: 14px; color: var(--muted); line-height: 1.45; }
.item .t .badge { margin-top: 4px; }
.item .p { font-size: 20px; font-weight: 700; white-space: nowrap; letter-spacing: -.01em; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { border-radius: var(--r); background: var(--raised); padding: 16px; }
.tile.main { background: var(--accent-soft); }
.tile span { display: block; font-size: 14px; color: var(--ink-2); font-weight: 500; }
.tile b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 2px 0; }
.tile.main b { color: var(--accent); }
.skeleton { border-radius: var(--r); height: 92px; background: linear-gradient(90deg, var(--raised) 25%, var(--line) 37%, var(--raised) 63%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }

/* ---- Home ---- */
.hero { position: relative; overflow: hidden; text-align: center; padding: 84px 24px 64px; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: 0; animation: drift 16s ease-in-out infinite; pointer-events: none; }
.blob.one { width: 460px; height: 460px; background: var(--accent); top: -180px; left: -100px; opacity: .28; }
.blob.two { width: 380px; height: 380px; background: var(--accent-2); top: -120px; right: -80px; opacity: .26; animation-delay: -6s; }
.blob.three { width: 300px; height: 300px; background: var(--violet); bottom: -200px; left: 40%; opacity: .14; animation-delay: -11s; }
.hero > :not(.blob) { position: relative; z-index: 1; }
/* The search card must sit above the chips that follow it, or its suggestion list opens underneath them. */
.hero > .hero-search { z-index: 30; }
.eyebrow { display: inline-block; font-size: 14px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 14px; margin: 0 0 18px; }
.hero h1 { margin: 0; font-size: clamp(44px, 8vw, 84px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin: 16px auto 34px; font-size: clamp(18px, 2.4vw, 22px); color: var(--ink-2); max-width: 26em; }
.hero-search { max-width: 520px; margin: 0 auto; padding: 12px; box-shadow: var(--shadow-2); }
.popular { max-width: 640px; margin: 22px auto 0; justify-content: center; }
.popular .chip { background: var(--surface); box-shadow: var(--shadow-1); }

.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.feature { padding: 22px; display: flex; flex-direction: column; gap: 6px; min-height: 190px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.feature .ic { width: 48px; height: 48px; border-radius: 15px; font-size: 24px; background: var(--accent-soft); color: var(--accent); margin-bottom: 10px; }
.feature:nth-child(2) .ic { background: var(--violet-soft); color: var(--violet); }
.feature b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.feature span { color: var(--ink-2); font-size: 15px; }
.feature .go { margin-top: auto; color: var(--accent); font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.feature .go [data-ic] { transition: transform .3s var(--ease); }
.feature:hover .go [data-ic] { transform: translateX(4px); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; text-align: center; }
.stat { padding: 26px 12px; }
.stat b { display: block; font-size: clamp(34px, 6vw, 56px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.stat span { color: var(--ink-2); font-size: 15px; }

/* ---- Trip (map) ---- */
#page-trip { position: fixed; inset: var(--nav-h) 0 0 0; }
#page-trip.on { animation: fade .4s var(--ease); }
#map { position: absolute; inset: 0; background: var(--bg); }
.maplibregl-map { font-family: inherit; }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; font-weight: 600; color: var(--muted); pointer-events: none; }
.maplibregl-ctrl-attrib { font-size: 11px; }
.stop-popup .maplibregl-popup-content { font: 600 14px/1.3 inherit; padding: 7px 12px; border-radius: 12px; box-shadow: var(--shadow-2); color: #0b0f14; }
.map-tools { position: absolute; z-index: 1000; right: 14px; top: 16px; display: flex; flex-direction: column; gap: 8px; }
.map-tools button { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 21px; font-weight: 700; color: var(--ink);
                    background: var(--glass); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
                    box-shadow: var(--shadow-1); border: 1px solid var(--line); transition: transform .15s var(--ease), background .2s, color .2s; }
.map-tools button:active { transform: scale(.92); }
.map-tools button.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
#tool-3d { font-size: 15px; letter-spacing: -.02em; }
.driver { width: 20px; height: 20px; border-radius: 50%; background: #ffc83d; border: 3px solid #0b0f14; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); position: relative; }
.driver span { position: absolute; left: 26px; top: -5px; white-space: nowrap; background: #fff; color: #0b0f14; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 10px; box-shadow: var(--shadow-1); }
.pin { width: 18px; height: 18px; border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.pin.a { background: #0a8f62; border-radius: 50%; }
.pin.b { background: #0b0f14; border-radius: 4px; }
:root[data-theme=dark] .pin { border-color: #1c1c1e; }
:root[data-theme=dark] .pin.b { background: #f5f5f7; }
:root[data-theme=dark] .dots .l { background: rgba(255, 255, 255, .22); }
.side { position: absolute; z-index: 1000; left: 16px; top: 16px; bottom: 16px; width: 392px; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.side .card { pointer-events: auto; box-shadow: var(--shadow-2); }
#trip-search { padding: 12px; flex: none; position: relative; z-index: 2; }
.sheet { padding: 18px; overflow-y: auto; min-height: 0; animation: pop .45s var(--ease); }
.head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.head h3 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.head p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.grow { flex: 1; min-width: 0; }
.seg { display: flex; background: var(--raised); border-radius: 15px; padding: 4px; margin-bottom: 16px; }
.seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border-radius: 12px; font-size: 16px; font-weight: 600; color: var(--muted);
              transition: background .25s var(--ease), color .25s, box-shadow .25s; }
.seg button [data-ic] { font-size: 18px; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.toast { margin-top: 4px; padding: 13px 16px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 600; animation: rise .35s var(--ease); }
.foot { font-size: 13px; color: var(--muted); margin-top: 14px; text-align: center; }
.foot a { color: var(--accent); font-weight: 600; }

/* ---- Buses ---- */
.filter { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--r); padding: 0 16px; box-shadow: var(--shadow-1); margin-bottom: 14px; }
.filter [data-ic] { font-size: 20px; color: var(--muted); }
.filter input { flex: 1; border: 0; background: transparent; outline: none; padding: 15px 0; font-size: 17px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 20px; }
.bus-card { padding: 18px; text-align: left; display: block; width: 100%; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.bus-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.bus-card:active { transform: scale(.98); }
.bus-card b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.bus-card span { display: block; color: var(--ink-2); font-size: 14px; margin: 2px 0 10px; }

.modal { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .38); display: grid; place-items: center; padding: 20px; animation: fade .25s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal .card { width: min(440px, 100%); max-height: min(640px, 88vh); display: flex; flex-direction: column; padding: 22px; box-shadow: var(--shadow-2); animation: pop .4s var(--ease); }
/* Wide content (photo strips, button rows) must scroll or wrap inside the dialog, never widen it:
   the single grid column is pinned to the screen width instead of growing to fit its content. */
.modal { grid-template-columns: minmax(0, 1fr); }
.modal .card { max-width: 100%; }
.modal .card > * { min-width: 0; max-width: 100%; }
.modal h3 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.modal .head { margin-bottom: 14px; }
#m-body { overflow-y: auto; min-height: 0; flex: 1; padding-right: 2px; }
#m-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
#m-actions:empty { display: none; }
#m-actions .btn { flex: 1; justify-content: center; white-space: nowrap; }
.timeline { list-style: none; margin: 0; padding: 4px 0 4px 6px; }
.timeline li { position: relative; padding: 0 0 18px 28px; font-size: 16px; font-weight: 500; line-height: 1.2; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--accent); background: var(--surface); z-index: 1; }
.timeline li::after { content: ""; position: absolute; left: 7.5px; top: 12px; bottom: -6px; width: 3px; background: var(--accent-soft); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline li:first-child::before, .timeline li:last-child::before { background: var(--accent); }

/* ---- Districts, nearby, helplines ---- */
.label.note { margin: 20px 2px -6px; font-size: 15px; color: var(--ink-2); }
.label.note:empty { display: none; }
.division { margin-top: 28px; }
.division .grid { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.district-card { padding: 16px 18px; text-align: left; width: 100%; display: block; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.district-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.district-card:active { transform: scale(.98); }
.district-card b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.district-card span { display: block; color: var(--ink-2); font-size: 14px; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 4px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px 12px; border-radius: var(--r); background: var(--surface);
       box-shadow: var(--shadow-1); font-size: 14px; font-weight: 600; color: var(--ink-2); transition: transform .2s var(--ease), background .2s, color .2s; }
.cat .ic { font-size: 26px; color: var(--accent); }
.cat:hover { transform: translateY(-2px); }
.cat:active { transform: scale(.96); }
.cat.on { background: var(--ink); color: var(--surface); }
.cat.on .ic { color: var(--surface); }
#near-list { margin-top: 20px; max-width: 720px; }
.help { padding: 18px; display: flex; align-items: center; gap: 14px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.help:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.help .n { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--accent); min-width: 78px; }
.help b { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.help span { display: block; font-size: 13px; color: var(--muted); }

.rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.rate-info { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.stars { display: flex; gap: 2px; }
.stars button { font-size: 26px; color: var(--line); display: grid; place-items: center; padding: 2px; transition: transform .15s var(--ease), color .2s; }
.stars button svg { width: 1em; height: 1em; fill: currentColor; stroke: none; }
.stars button:hover { transform: scale(1.15); }
.stars button.on { color: #f5a524; }
.op-card { cursor: pointer; }
.op-card .stars button { font-size: 22px; }

.photo-box:empty { display: none; }
.photo-box { margin-bottom: 14px; animation: fade .5s var(--ease); }
.photos { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--r-sm); scrollbar-width: none; }
.photos::-webkit-scrollbar { display: none; }
.photos { cursor: grab; user-select: none; }
.photos.dragging { cursor: grabbing; scroll-snap-type: none; }
.photos button { flex: none; scroll-snap-align: start; border-radius: var(--r-sm); overflow: hidden; transition: transform .2s var(--ease); }
.photos button:active { transform: scale(.98); }
.photos img { display: block; height: 150px; min-width: 120px; max-width: 260px; object-fit: cover; background: var(--raised); pointer-events: none; }

.lightbox { position: fixed; inset: 0; z-index: 4000; background: rgba(0, 0, 0, .9); display: flex; flex-direction: column; animation: fade .25s; }
.lb-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 64px 16px 8px; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; animation: pop .35s var(--ease); }
.lb-cap { padding: 12px 20px calc(18px + env(safe-area-inset-bottom)); text-align: center; color: #fff; }
.lb-cap b { display: block; font-size: 16px; font-weight: 600; }
.lb-cap span { font-size: 13px; color: rgba(255, 255, 255, .7); }
.lb-cap a { color: #fff; text-decoration: underline; }
.lb-btn { position: absolute; z-index: 1; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 22px; }
.lb-btn:hover { background: rgba(255, 255, 255, .26); color: #fff; }
#lb-close { top: 14px; right: 14px; }
#lb-prev { left: 14px; top: 50%; margin-top: -23px; }
#lb-next { right: 14px; top: 50%; margin-top: -23px; }
.cap { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---- Intercity ---- */
.picker { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 14px; }
.picker select { width: 100%; appearance: none; -webkit-appearance: none; border: 0; outline: none; background: var(--raised); border-radius: var(--r-sm); padding: 14px 16px; font-size: 18px; font-weight: 600; cursor: pointer; }
.result { padding: 22px; margin-top: 14px; }
.result .head h3 { font-size: clamp(26px, 4vw, 36px); }
.result .actions { margin-top: 18px; }
.op-card { padding: 18px; text-align: left; width: 100%; display: block; }
.op-card b { display: block; font-size: 18px; font-weight: 700; }
.op-card > span { display: block; color: var(--ink-2); font-size: 14px; margin: 2px 0 10px; }
.op-card .where { margin-top: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.7; animation: rise .35s var(--ease); }

/* ---- Fares ---- */
.calc { padding: 24px; }
.calc-km { display: flex; align-items: baseline; gap: 8px; }
.calc-km b { font-size: clamp(44px, 8vw, 68px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.calc-km span { font-size: 20px; color: var(--ink-2); font-weight: 500; }
input[type=range] { width: 100%; margin: 18px 0 22px; appearance: none; -webkit-appearance: none; height: 8px; border-radius: 8px; background: var(--raised); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); cursor: grab; }
input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); cursor: grab; }
.calc .tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.calc .tile .ic { font-size: 22px; color: var(--ink-2); margin-bottom: 8px; justify-content: start; }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.rule-card { padding: 22px; }
.rule-card h4 { margin: 0 0 8px; font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.rule-card h4 .ic { font-size: 22px; color: var(--accent); }
.rule { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink-2); }
.rule:last-child { border-bottom: 0; }
.rule b { font-weight: 600; white-space: nowrap; color: var(--ink); }

/* ---- Small shared pieces added with trains and fare reports ---- */
.phone-only { display: none !important; }
.text-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 8px 4px; font-size: 14px; font-weight: 600; color: var(--accent); }
.text-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.text-btn:hover { text-decoration: underline; }
.timeline.times li { display: flex; gap: 12px; align-items: baseline; }
.timeline.times li b { font-weight: 600; min-width: 3.4em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.timeline.times li.dim { opacity: .45; }
.lang-btn.in-page { position: static; }

.sug-head { padding: 10px 14px 4px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.op-card.launch { cursor: default; }
.op-card.launch span.fare { display: block; margin-top: 4px; font-weight: 600; color: var(--ink); }
.op-card.launch .chips { margin-top: 12px; }

/* ---- Account ---- */
.acct-btn { position: fixed; z-index: 2100; top: 12px; right: 158px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink); background: var(--raised); transition: background .15s, transform .15s; }
.acct-btn:hover { background: var(--line); }
.acct-btn:active { transform: scale(.95); }
.acct-btn span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; margin-bottom: 14px; text-align: left; }
.acct-card .ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--accent); color: #fff; }
.acct-card .t { min-width: 0; }
.acct-card b { display: block; font-size: 17px; font-weight: 700; }
.acct-card .t span { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.form-note { font-size: 13px; color: var(--muted); margin: 14px 2px 0; line-height: 1.5; }
.form-note.bad { color: #d92d20; font-weight: 600; }

/* ---- Tour plan ---- */
.tour-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 26px; margin-bottom: 14px; color: #fff;
               background: linear-gradient(120deg, var(--accent), #0b6f6a 60%, #0b2b3f); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tour-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.tour-banner b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.tour-banner span { display: block; font-size: 15px; opacity: .9; }
.tour-banner .btn { background: #fff; color: #0a8f62; flex: none; opacity: 1; }
.tour-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: start; }
.tour-form, .tour-sum { padding: 22px; }
.tour-side { display: grid; gap: 14px; position: sticky; top: calc(var(--nav-h) + 14px); }
.tour-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.tour-form .seg { margin-bottom: 0; }
.tour-form .chips { margin-top: 8px; }
.stepper { display: flex; align-items: center; justify-content: space-between; background: var(--raised); border-radius: var(--r-sm); padding: 4px; }
.stepper b { font-size: 22px; font-weight: 700; min-width: 2ch; text-align: center; }
.stepper .icon-btn { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.money { display: block; margin-top: 14px; }
.money span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 2px 8px; }
.money input { width: 100%; border: 0; outline: none; background: var(--raised); border-radius: var(--r-sm); padding: 13px 14px; font-size: 17px; font-weight: 600; }
.money input:focus { box-shadow: 0 0 0 2.5px var(--accent); }
.tour-sum .rule small { display: block; font-size: 13px; color: var(--muted); }
.tour-sum .rule.total { border-top: 1px solid var(--line); border-bottom: 0; font-weight: 600; color: var(--ink); }
.per-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; background: var(--accent-soft); border-radius: var(--r); padding: 16px 18px; margin-top: 6px; }
.per-head span { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.per-head b { font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--accent); }
.tour-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.tour-thumb { width: 60px; height: 60px; border-radius: 50%; background: var(--raised) center / cover; display: grid; place-items: center; color: transparent;
              border: 2.5px solid var(--surface); box-shadow: var(--shadow-1); transition: transform .2s var(--ease), color .2s; }
.tour-thumb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.tour-thumb:hover { color: #fff; transform: scale(1.06); }
.tour-thumb:not(.add):hover { box-shadow: inset 0 0 0 40px rgba(0, 0, 0, .45), var(--shadow-1); }
.tour-thumb.add { color: var(--muted); border-style: dashed; border-color: var(--muted); box-shadow: none; }
.tour-thumb.add:hover { color: var(--accent); border-color: var(--accent); }
.tour-card { margin-top: 28px; display: grid; justify-items: center; gap: 16px; animation: rise .5s var(--ease); }
.tour-card canvas { width: min(420px, 100%); height: auto; border-radius: 28px; box-shadow: var(--shadow-2); }
.tour-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* ---- Language switch ---- */
/* Lives outside the nav bar: the bar's blur would otherwise trap a fixed child inside it on phones. */
.nav { padding-right: 344px; }
.lang-btn { position: fixed; z-index: 2100; top: 12px; right: 20px; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink);
            background: var(--raised); border: 1px solid var(--line); transition: transform .15s var(--ease), background .2s; }
.lang-btn:hover { background: var(--line); }
.lang-btn:active { transform: scale(.95); }

/* ---- Bangla labels drawn over the map ---- */
.bn-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; --halo: #ffffff; --ink-map: #1f2937; }
.bn-labels span { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 12.5px; font-weight: 500; line-height: 1.2; color: var(--ink-map);
                  text-shadow: 0 0 2px var(--halo), 0 0 2px var(--halo), 1px 1px 0 var(--halo), -1px -1px 0 var(--halo), 1px -1px 0 var(--halo), -1px 1px 0 var(--halo);
                  will-change: transform; }
.bn-labels span.fresh { animation: fade .35s var(--ease); }   /* only a name that has just appeared fades in */
.bn-labels .k-country { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.bn-labels .k-city { font-size: 14px; font-weight: 600; }
.bn-labels .k-town { font-size: 13px; font-weight: 600; }
.bn-labels .k-state { font-size: 12px; font-weight: 600; letter-spacing: .06em; opacity: .65; }
.bn-labels .k-village { font-size: 12.5px; font-weight: 500; }
.bn-labels .k-road { font-size: 12px; font-weight: 600; color: #3a4a66; }
.bn-labels .k-water { font-size: 12px; font-style: italic; color: #3f7fc4; }
.bn-labels .k-poi { font-size: 12px; font-weight: 600; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme=dark] .bn-labels { --halo: #12151b; --ink-map: #dfe3ea; }
:root[data-theme=dark] .bn-labels .k-road { color: #a9b4c6; }
:root[data-theme=dark] .bn-labels .k-water { color: #74aee8; }

/* ---- Narrow desktops and tablets: the bar keeps one line; below 1000px only the open page shows its name ---- */
.brand, .links a span { white-space: nowrap; }
@media (max-width: 1180px) {
  .nav { gap: 12px; padding: 0 304px 0 16px; }
  .acct-btn span { max-width: 5em; }   /* room for the account and language buttons */
  .links { gap: 2px; }
  .links a { padding: 8px 10px; font-size: 14px; gap: 6px; }
}
@media (min-width: 761px) and (max-width: 1420px) {
  .links a:not(.on) span { display: none; }
  .links a { padding: 9px 11px; }
  .links a [data-ic] { font-size: 20px; }
  .nav { padding-right: 216px; }
  .acct-btn { padding: 8px 10px; font-size: 16px; }
  .acct-btn span:not(.avatar) { display: none; }
}

/* ---- Tablets ---- */
@media (max-width: 960px) {
  .features { grid-template-columns: 1fr 1fr; }
  .nav { gap: 12px; padding: 0 304px 0 16px; }
  .acct-btn span { max-width: 5em; }   /* room for the account and language buttons */
  .links a { padding: 8px 11px; }
}

/* ---- Phones ---- */
@media (max-width: 760px) {
  .nav { top: auto; bottom: 0; height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom); border-bottom: 0; border-top: 1px solid var(--line); }
  .brand, .desk-only { display: none !important; }
  .phone-only { display: flex !important; }
  .lang-btn:not(.in-page), .acct-btn { display: none; }   /* on phones the language switch lives on the More page */
  /* The tab bar is full, so the language switch floats at the top (below the map tools on the map page). */
  /* Not fixed on phones: it scrolls away with the page instead of floating over whatever is being read. */
  .lang-btn { position: absolute; z-index: 900; top: 10px; right: 10px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-1); }
  body[data-page=trip] .lang-btn { top: 336px; padding: 7px 10px; font-size: 12px; }
  .links { margin: 0; flex: 1; justify-content: space-around; }
  .links a { flex-direction: column; gap: 2px; padding: 7px 2px; font-size: 12px; border-radius: 14px; flex: 1; max-width: 84px; white-space: nowrap; }
  .links a [data-ic] { font-size: 23px; }
  .links a.on { background: none; color: var(--accent); }
  main { padding-top: 0; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
  .wrap { padding: 36px 16px 48px; }
  .hero { padding: 56px 16px 44px; }
  .features { grid-template-columns: 1fr 1fr; }
  .feature { min-height: 168px; padding: 18px; }
  #page-trip { inset: 0 0 calc(var(--tab-h) + env(safe-area-inset-bottom)) 0; }
  .side { left: 0; right: 0; top: 0; bottom: 0; width: auto; padding: 10px 10px 0; justify-content: space-between; }
  .sheet { max-height: 48%; border-radius: 26px 26px 0 0; margin: 0 -10px; }
  .tile b { font-size: 21px; white-space: nowrap; }
  .map-tools { top: 168px; right: 10px; }
  /* Categories become one swipeable row so the results stay on screen. */
  .cats { display: flex; overflow-x: auto; margin: 4px -16px 0; padding: 4px 16px 10px; scrollbar-width: none; }
  .cats::-webkit-scrollbar { display: none; }
  .cat { flex: none; width: 92px; padding: 14px 4px 10px; }
  .picker { grid-template-columns: 1fr; }
  .tour-grid { grid-template-columns: 1fr; }
  .tour-side { position: static; }
  .tour-banner { flex-direction: column; align-items: flex-start; padding: 20px; }
  .tour-form, .tour-sum { padding: 18px; }
  .picker .icon-btn { justify-self: center; transform: rotate(90deg); }
  .modal { place-items: end center; padding: 0; }
  .modal .card { width: 100%; border-radius: 26px 26px 0 0; }
}

/* ================= Messenger ================= */
.chat-btn { position: fixed; z-index: 2100; top: 12px; right: 108px; width: 38px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  font-size: 18px; color: var(--ink); background: var(--raised); transition: background .15s, transform .15s; }
.chat-btn:hover { background: var(--line); }
.chat-btn:active { transform: scale(.92); }
body[data-page=chat] .chat-btn { background: var(--ink); color: var(--bg); }
.nbadge { position: absolute; top: -4px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ff3b30; color: #fff;
  font: 700 11px/18px inherit; font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg); animation: pop .35s var(--ease); }
.links a { position: relative; }
.links a .nbadge { top: 2px; right: calc(50% - 22px); }
@keyframes pop { from { transform: scale(0); } 60% { transform: scale(1.18); } to { transform: scale(1); } }

#page-chat { position: fixed; inset: var(--nav-h) 0 0 0; background: var(--bg); }
#page-chat.on { animation: fade .35s var(--ease); }
.chat { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: 100%; max-width: 1280px; margin: 0 auto; padding: 16px; gap: 16px; }
.chat[hidden] { display: none; }
.chat-side, .chat-main { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
.chat-top { display: flex; align-items: center; gap: 4px; padding: 18px 14px 10px 22px; }
.chat-top h2 { margin: 0 auto 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.icon-btn.accent { background: var(--accent-soft); color: var(--accent); }
.chat-scroll { flex: 1; overflow-y: auto; padding: 4px 10px 14px; overscroll-behavior: contain; }
.chat-scroll .label { margin: 12px 12px 6px; }

.avatar { flex: none; position: relative; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 21px; font-weight: 700; text-transform: uppercase; }
.avatar.sm { width: 40px; height: 40px; font-size: 17px; }
.avatar.lg { width: 84px; height: 84px; font-size: 36px; }
.avatar.xl { width: 128px; height: 128px; font-size: 54px; }
.avatar.online::after { content: ''; position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 3px var(--surface); }

.person { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 18px; text-align: left; transition: background .15s, transform .15s; }
button.person:hover { background: var(--raised); }
button.person:active { transform: scale(.985); }
.person.on { background: var(--accent-soft); }
.person .t { flex: 1; min-width: 0; }
.person .t b { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person .t span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person .t span.typing, .who .typing { color: var(--accent); font-weight: 600; }
.person .pside { flex: none; display: grid; justify-items: end; gap: 5px; }
.person time { font-size: 12px; color: var(--muted); }
.person .count { min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 21px; text-align: center; animation: pop .35s var(--ease); }
.person.wait { opacity: .75; }
.person.found { background: var(--raised); margin-top: 14px; }
.pill-btn { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; transition: transform .15s, filter .15s; }
.pill-btn:active { transform: scale(.94); }
.pill-btn.quiet { background: var(--raised); color: var(--ink); }
.pill-btn:disabled { opacity: .55; }
.menu-row { display: block; width: 100%; padding: 15px 16px; margin-bottom: 8px; border-radius: var(--r-sm); background: var(--raised); text-align: left; font-size: 16px; font-weight: 600; transition: transform .15s; }
.menu-row:active { transform: scale(.98); }
.menu-row.bad { color: #d92d20; }

.chat-none, .chat-empty, .chat-hello, .chat-gate { display: grid; justify-items: center; text-align: center; gap: 8px; color: var(--muted); }
.chat-none { padding: 48px 20px; }
.chat-none > svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.chat-none b, .chat-empty b, .chat-hello b { color: var(--ink); font-size: 19px; font-weight: 700; }
.chat-none .btn { margin-top: 12px; }
.chat-empty { flex: 1; align-content: center; padding: 24px; }
.chat-empty[hidden], .chat-thread[hidden] { display: none; }
.chat-empty span { max-width: 22em; }
.chat-hello { margin: auto 0; padding: 30px 20px; animation: rise .5s var(--ease); }
.chat-gate { height: 100%; align-content: center; padding: 24px; }
.chat-gate[hidden] { display: none; }
.chat-gate h2 { margin: 6px 0 0; color: var(--ink); font-size: clamp(24px, 4vw, 34px); font-weight: 700; letter-spacing: -.02em; }
.chat-gate p { margin: 0 0 14px; font-size: 17px; max-width: 26em; }
.gate-art { position: relative; width: 112px; height: 112px; display: grid; place-items: center; margin-bottom: 10px; }
.gate-art span { position: relative; width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center; font-size: 36px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 14px 34px rgba(10, 143, 98, .35); animation: float 4s ease-in-out infinite; }
.gate-art i { position: absolute; inset: 18px; border-radius: 34px; border: 2px solid var(--accent); opacity: 0; animation: ring 3s ease-out infinite; }
.gate-art i:nth-child(2) { animation-delay: 1s; } .gate-art i:nth-child(3) { animation-delay: 2s; }
@keyframes ring { from { transform: scale(.8); opacity: .5; } to { transform: scale(1.7); opacity: 0; } }
@keyframes float { 50% { transform: translateY(-6px); } }

.chat-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: fade .3s var(--ease); }
.chat-head { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
#chat-back { display: none; }
.who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding-left: 6px; }
.who .t { min-width: 0; }
.who b { display: block; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who span:not(.avatar) { display: block; font-size: 13px; color: var(--muted); }
#chat-voice, #chat-video { color: var(--accent); }

.chat-msgs { flex: 1; overflow-y: auto; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; scroll-behavior: smooth; }
.day { align-self: center; margin: 14px 0 10px; padding: 4px 12px; border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 12px; font-weight: 600; }
.msg { display: flex; align-items: flex-end; gap: 7px; max-width: 78%; margin-top: 8px; }
.msg.follows { margin-top: 0; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.new { animation: msg-in .34s var(--ease); }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
.bubble { padding: 10px 15px; border-radius: 22px; font-size: 16px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.them .bubble { background: var(--raised); color: var(--ink); border-bottom-left-radius: 7px; }
.me .bubble { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-bottom-right-radius: 7px; box-shadow: 0 4px 14px rgba(10, 143, 98, .22); }
.them.joined .bubble { border-bottom-left-radius: 22px; } .them.follows .bubble { border-top-left-radius: 7px; }
.me.joined .bubble { border-bottom-right-radius: 22px; } .me.follows .bubble { border-top-right-radius: 7px; }
.bubble.emoji { background: none !important; box-shadow: none !important; padding: 0 2px; font-size: 44px; line-height: 1.15; }
.bubble.place, .bubble.call-log { display: flex; align-items: center; gap: 11px; }
.bubble.place > svg, .bubble.call-log > svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bubble.place { cursor: pointer; transition: transform .15s; }
.bubble.place:active { transform: scale(.97); }
.bubble.place b { display: block; font-weight: 600; }
.bubble.place .t span { display: block; font-size: 13px; opacity: .8; text-decoration: underline; }
.msg .meta { flex: none; margin-bottom: 3px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.msg.joined .meta { visibility: hidden; }
.tick { font-style: normal; margin-left: 3px; letter-spacing: -3px; }
.tick.seen { color: var(--accent); }
.bubble.dots { display: flex; gap: 5px; padding: 15px 16px; }
.bubble.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: dot 1.1s ease-in-out infinite; }
.bubble.dots i:nth-child(2) { animation-delay: .15s; } .bubble.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

.chat-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; }
.chat-compose textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: var(--raised); color: var(--ink); border-radius: 22px; padding: 11px 16px;
  font: inherit; font-size: 16px; line-height: 1.4; max-height: 132px; transition: box-shadow .15s; }
.chat-compose textarea:focus { box-shadow: 0 0 0 2px var(--accent); }
.send { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 16px rgba(10, 143, 98, .3); transition: transform .2s var(--ease); }
.send:active { transform: scale(.88); }
.send.sent { animation: sent .35s var(--ease); }
@keyframes sent { 40% { transform: scale(.82) rotate(-14deg); } }
.send > * { grid-area: 1 / 1; transition: transform .25s var(--ease), opacity .2s; }
.send span { font-size: 21px; transform: scale(0); opacity: 0; }
.send.like { background: var(--raised); box-shadow: none; }
.send.like span { transform: none; opacity: 1; } .send.like i { transform: scale(0); opacity: 0; }

.chat-toast { position: fixed; z-index: 3200; top: 14px; left: 50%; display: flex; align-items: center; gap: 11px; width: min(380px, calc(100vw - 24px)); padding: 10px 14px 10px 10px;
  border-radius: 22px; background: var(--glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--shadow-2); cursor: pointer;
  transform: translate(-50%, -140%); opacity: 0; transition: transform .45s var(--ease), opacity .3s; }
.chat-toast.on { transform: translate(-50%, 0); opacity: 1; }
.chat-toast .t { min-width: 0; }
.chat-toast b { display: block; font-size: 15px; font-weight: 700; }
.chat-toast .t span { display: block; font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Calls ---- */
.call { position: fixed; inset: 0; z-index: 3100; display: grid; grid-template-rows: 1fr auto; justify-items: center; color: #fff; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #14506b 0%, #0b2a33 45%, #05090c 100%); animation: fade .3s var(--ease); }
.call[hidden] { display: none; }
#call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.call.video[data-state=live] #call-remote { opacity: 1; }
#call-local { position: absolute; right: 18px; top: 18px; width: min(28vw, 150px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; transform: scaleX(-1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .4s; z-index: 2; }
.call.video:not([data-state=ringing]):not([data-state=over]) #call-local { opacity: 1; }
.call-info { position: relative; z-index: 1; align-self: center; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 24px; transition: transform .5s var(--ease), opacity .4s; }
.call-info b { font-size: 30px; font-weight: 700; letter-spacing: -.01em; margin-top: 22px; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
.call-info > span { font-size: 17px; opacity: .85; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.call.video[data-state=live] .call-info { align-self: start; transform: scale(.72); transform-origin: top center; }
.call.video[data-state=live] .call-avatar { display: none; }
.call-avatar { position: relative; display: grid; place-items: center; }
.call-avatar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); opacity: 0; }
.call[data-state=calling] .call-avatar i, .call[data-state=ringing] .call-avatar i { animation: ring 2.4s ease-out infinite; }
.call-avatar i:nth-child(2) { animation-delay: .8s !important; } .call-avatar i:nth-child(3) { animation-delay: 1.6s !important; }
.call[data-state=ringing] .avatar { animation: float 1.6s ease-in-out infinite; }
.call-actions { position: relative; z-index: 1; display: flex; gap: 22px; padding: 26px 24px calc(34px + env(safe-area-inset-bottom)); }
.call-btn { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-size: 27px; color: #fff; background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .2s var(--ease), background .2s; }
.call-btn[hidden] { display: none; }
.call-btn:active { transform: scale(.9); }
.call-btn.off { background: #fff; color: #0b0f14; }
.call-btn.hang { background: #ff3b30; box-shadow: 0 10px 26px rgba(255, 59, 48, .4); }
.call-btn.hang svg { transform: rotate(135deg); }
.call-btn.accept { background: #30d158; box-shadow: 0 10px 26px rgba(48, 209, 88, .4); animation: float 1.2s ease-in-out infinite; }

@media (min-width: 761px) and (max-width: 1000px) { .chat { grid-template-columns: 300px minmax(0, 1fr); padding: 12px; gap: 12px; } }
@media (max-width: 760px) {
  .chat-btn { display: none; }
  #page-chat { inset: 0 0 calc(var(--tab-h) + env(safe-area-inset-bottom)) 0; }
  .chat { display: block; position: relative; padding: 0; overflow: hidden; }
  .chat-side, .chat-main { position: absolute; inset: 0; border-radius: 0; box-shadow: none; transition: transform .42s var(--ease); }
  .chat-main { transform: translateX(100%); }
  .chat.open .chat-main { transform: none; }
  .chat.open .chat-side { transform: translateX(-28%); }
  #chat-back { display: grid; }
  .chat-top { padding-top: 22px; }
  .chat-top h2 { font-size: 30px; }
  .msg { max-width: 86%; }
  .chat-msgs { padding: 14px 12px 6px; }
  /* A conversation takes the whole screen: the tab bar steps aside. */
  body[data-page=chat]:has(.chat.open) .nav { transform: translateY(110%); }
  body[data-page=chat]:has(.chat.open) #page-chat { inset: 0; }
  .nav { transition: transform .35s var(--ease); }
  .chat-compose { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ================= Profile, sign-in code, support ================= */
.avatar { overflow: hidden; }
.avatar.online { overflow: visible; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar.xs { width: 24px; height: 24px; font-size: 12px; }
.acct-btn { padding-left: 6px; }
.acct-btn > i { width: 24px; height: 24px; display: grid; place-items: center; }
.acct-btn > i svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acct-card .ic { overflow: hidden; }
.acct-card .ic .avatar { width: 100%; height: 100%; }
.acct-card .ic > i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.money select, .money textarea { width: 100%; border: 0; outline: none; background: var(--raised); color: var(--ink); border-radius: var(--r-sm); padding: 13px 14px; font: inherit; font-size: 16px; resize: vertical; }
.money select:focus, .money textarea:focus { box-shadow: 0 0 0 2.5px var(--accent); }
.money input.code-input { text-align: center; font-size: 30px; letter-spacing: .42em; padding-left: calc(14px + .42em); font-variant-numeric: tabular-nums; }
.profile-top { display: grid; justify-items: center; gap: 6px; padding: 6px 0 4px; text-align: center; }
.profile-top b { font-size: 22px; font-weight: 700; margin-top: 8px; }
.profile-top > span { color: var(--ink-2); max-width: 26em; white-space: pre-wrap; }
.pic-edit { position: relative; border-radius: 50%; transition: transform .2s var(--ease), opacity .2s; }
.pic-edit:active { transform: scale(.96); }
.pic-edit.busy { opacity: .5; pointer-events: none; }
.pic-edit .cam { position: absolute; right: 2px; bottom: 2px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--surface); }
.pic-edit .cam svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.profile-links { margin-top: 22px; }
.chip.on { background: var(--ink); color: var(--bg); }
.who { cursor: pointer; }
.nbadge.inline { position: static; display: inline-block; margin-left: 8px; box-shadow: none; vertical-align: 1px; }
.nbadge[hidden] { display: none; }

.ticket { display: block; width: 100%; text-align: left; padding: 15px 16px; margin-bottom: 8px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); transition: transform .15s; }
.ticket:active { transform: scale(.985); }
.ticket .h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ticket b { font-size: 16px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket > span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.ticket.unread { box-shadow: 0 0 0 2px var(--accent), var(--shadow-1); }
.ticket .badge { flex: none; }
.ticket-thread { display: grid; gap: 10px; }
.tmsg { padding: 12px 14px; border-radius: 18px; background: var(--raised); max-width: 92%; }
.tmsg.me { justify-self: end; background: var(--accent-soft); }
.tmsg small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tmsg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.tmsg.staff small { color: var(--accent); font-weight: 600; }

.notice { display: flex; align-items: center; gap: 10px; max-width: 1040px; margin: 14px auto 0; padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--violet-soft); color: var(--ink); animation: rise .5s var(--ease); }
.notice > i svg { width: 20px; height: 20px; fill: none; stroke: var(--violet); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }
.notice span { flex: 1; font-size: 15px; font-weight: 500; }
@media (max-width: 1100px) { .notice { margin: 12px 12px 0; } }

/* ================= Design pass: the same care on a phone, a tablet and a wide screen ================= */
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
@media (min-width: 1500px) { .wrap { max-width: 1160px; } }
/* Cards lift under a mouse, never under a finger (where the "hover" would stick after a tap). */
@media (hover: hover) {
  .card.feature:hover, .ticket:hover, .help-topic:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
}
@media (hover: none) { .bus-card:hover, .district-card:hover { transform: none; box-shadow: var(--shadow-1); } }

/* Bus cards: the stop count is a small tag, not a bar */
.bus-card span.badge { display: inline-block; margin: 0; }
.bus-card span:not(.badge) { margin: 3px 0 12px; line-height: 1.35; }
/* Nearby: results fill the page in columns instead of one narrow strip */
#near-list { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0 12px; align-items: start; }
#near-list > :not(.item) { grid-column: 1 / -1; }

/* ---- "More": a menu hub in grouped rows ---- */
.hub { max-width: 720px; }
.hub .label { margin: 26px 6px 10px; text-transform: none; }
.acct-card .chev, .menu .chev { flex: none; margin-left: auto; color: var(--muted); font-size: 18px; display: grid; }
.acct-card { padding: 18px; border-radius: var(--r-lg); transition: transform .2s var(--ease), box-shadow .3s var(--ease); }
.acct-card:active { transform: scale(.985); }
.acct-card .ic { width: 56px; height: 56px; }
.acct-card b { font-size: 19px; }
.menu { padding: 6px; border-radius: var(--r-lg); }
.menu > a, .menu > .row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; color: inherit; text-decoration: none; transition: background .15s, transform .15s; }
.menu > a:hover { background: var(--raised); }
.menu > a:active { transform: scale(.985); background: var(--raised); }
.menu > a[hidden] { display: none; }
.menu span { min-width: 0; flex: 1; }
.menu b { display: block; font-size: 17px; font-weight: 600; }
.menu span em { display: block; font-style: normal; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .nbadge.inline { flex: none; margin: 0; }
.mi { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; color: #fff; }
.mi svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.c-green { background: linear-gradient(135deg, #12b981, #0a8f62); } .c-blue { background: linear-gradient(135deg, #4aa8ff, #2f6fed); }
.c-amber { background: linear-gradient(135deg, #ffbe3d, #f08a00); } .c-violet { background: linear-gradient(135deg, #a18bff, #6b4de6); }
.c-pink { background: linear-gradient(135deg, #ff8bb5, #e8457f); } .c-teal { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.c-ink { background: linear-gradient(135deg, #4b5563, #111827); } .c-gray { background: linear-gradient(135deg, #a3acb9, #6b7280); }
.menu .lang-btn.in-page { flex: none; }
.hub-foot { text-align: center; margin-top: 30px; }

/* ---- Help centre ---- */
.help-hero { position: relative; overflow: hidden; padding: 64px 24px 86px; text-align: center; color: #fff;
  background: radial-gradient(90% 120% at 12% 0%, #12c79a 0%, transparent 55%), radial-gradient(80% 120% at 92% 10%, #6b4de6 0%, transparent 55%), linear-gradient(135deg, #0a8f62, #0b5f6a); }
.help-hero .in { position: relative; max-width: 640px; margin: 0 auto; animation: rise .6s var(--ease); }
.eyebrow { display: inline-block; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 13px; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(8px); }
.help-hero h2 { margin: 16px 0 26px; font-size: clamp(30px, 5.4vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.help-search { display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 60px; border-radius: 20px; background: var(--surface); color: var(--muted); box-shadow: 0 18px 50px rgba(0, 0, 0, .22); transition: transform .25s var(--ease), box-shadow .25s; }
.help-search:focus-within { transform: translateY(-2px); box-shadow: 0 22px 60px rgba(0, 0, 0, .28), 0 0 0 3px rgba(255, 255, 255, .5); }
.help-search > i { font-size: 22px; display: grid; }
.help-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--ink); font: inherit; font-size: 17px; }
.help-wrap { max-width: 860px; padding-top: 0; }
.help-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: -44px; position: relative; }
.help-topic { display: grid; justify-items: start; gap: 2px; padding: 18px; text-align: left; border-radius: var(--r); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .2s; }
.help-topic:active { transform: scale(.97); }
.help-topic > .ic { width: 44px; height: 44px; margin-bottom: 10px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--accent-soft); color: var(--accent); transition: background .2s, color .2s; }
.help-topic b { font-size: 17px; font-weight: 700; line-height: 1.25; }
.help-topic span { font-size: 13px; color: var(--muted); }
.help-topic.on { background: var(--ink); color: var(--bg); }
.help-topic.on span { color: inherit; opacity: .7; }
.help-topic.on > .ic { background: rgba(255, 255, 255, .16); color: inherit; }
.help-wrap > .label { margin: 30px 6px 10px; font-size: 15px; color: var(--ink-2); }
.faqs { padding: 6px; border-radius: var(--r-lg); }
.faqs[hidden] { display: none; }
.faq + .faq { border-top: 1px solid var(--line); }
.faq-q { display: flex; align-items: center; gap: 14px; width: 100%; padding: 17px 14px; text-align: left; font-size: 17px; font-weight: 600; border-radius: 16px; transition: background .15s; }
.faq-q:hover { background: var(--raised); }
.faq-q span { flex: 1; }
.faq-q svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.faq.open .faq-q svg { transform: rotate(90deg); stroke: var(--accent); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq.open .faq-a { grid-template-rows: 1fr; }
.faq-a p { overflow: hidden; margin: 0; padding: 0 14px; color: var(--ink-2); font-size: 16px; line-height: 1.65; transition: padding .35s var(--ease); }
.faq.open .faq-a p { padding: 0 14px 18px; }
.help-contact { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 20px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--accent-soft), var(--violet-soft)); box-shadow: none; }
.help-contact span { flex: 1; min-width: 0; }
.help-contact b { display: block; font-size: 19px; font-weight: 700; }
.help-contact span em { display: block; font-style: normal; color: var(--ink-2); font-size: 15px; }
.help-contact .btn { flex: none; }
#support-body .label { margin: 30px 6px 10px; }

@media (max-width: 760px) {
  /* Phones: denser lists, two cards across */
  .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bus-card { padding: 14px; }
  .bus-card b { font-size: 16px; line-height: 1.25; }
  .bus-card span:not(.badge) { font-size: 13px; margin-bottom: 10px; }
  .division .grid { grid-template-columns: 1fr 1fr; }
  .district-card { padding: 14px; }
  .district-card b { font-size: 17px; }
  .calc .tiles { grid-template-columns: 1fr 1fr; }
  #near-list { grid-template-columns: 1fr; }
  .page-head h2 { font-size: 34px; }
  .page-head p { font-size: 16px; }
  .hub .page-head { margin-bottom: 18px; }
  .help-hero { padding: 44px 16px 74px; }
  .help-search { height: 54px; border-radius: 18px; }
  .help-topics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .help-topic { padding: 14px; }
  .help-topic b { font-size: 15px; }
  .help-topic > .ic { width: 38px; height: 38px; font-size: 19px; border-radius: 12px; }
  .faq-q { font-size: 16px; padding: 15px 12px; }
  .help-contact { flex-wrap: wrap; }
  .help-contact .btn { flex: 1 1 100%; justify-content: center; }
}

/* ================= Community: fares people know, points, leaderboard ================= */
.give-banner { background: linear-gradient(120deg, #f59e0b, #e8457f 60%, #6b4de6); }
.give-banner .btn { color: #c2410c; }
.give-hero { padding: 60px 24px 92px; text-align: center; color: #fff;
  background: radial-gradient(80% 120% at 10% 0%, #fbbf24 0%, transparent 55%), radial-gradient(80% 120% at 95% 10%, #6b4de6 0%, transparent 55%), linear-gradient(135deg, #f97316, #db2777); }
.give-hero .in { max-width: 660px; margin: 0 auto; animation: rise .6s var(--ease); }
.give-hero h2 { margin: 16px 0 10px; font-size: clamp(30px, 5.4vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.give-hero p { margin: 0; font-size: 18px; opacity: .95; }
.give-wrap { padding-top: 0; }
.give-wrap > .label { margin: 34px 6px 12px; font-size: 15px; color: var(--ink-2); }
.give-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; margin-top: -52px; align-items: start; }
.give-card, .lead-card { padding: 22px; border-radius: var(--r-lg); }
.give-card h3, .lead-card h3 { margin: 0 0 16px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.give-card h3 em { font-style: normal; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #fff3d6; color: #b45309; }
.give-card .od { background: var(--raised); border-radius: var(--r); padding: 6px 10px; }
.give-card .btn { width: 100%; justify-content: center; margin-top: 16px; }
.give-card.won { animation: won 1.1s var(--ease); }
@keyframes won { 30% { transform: scale(1.02); box-shadow: 0 0 0 4px #fbbf24, var(--shadow-2); } }
.form-note.good { color: var(--accent); font-weight: 600; }

.podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 8px; margin: 8px 0 18px; }
.step { display: grid; justify-items: center; text-align: center; gap: 2px; min-width: 0; animation: rise .6s var(--ease) both; }
.step.s1 { animation-delay: .12s; } .step.s3 { animation-delay: .06s; }
.step .medal { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.step.s1 .medal { font-size: 34px; }
.step .avatar.lg { width: 64px; height: 64px; font-size: 27px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #cbd5e1; }
.step.s1 .avatar.lg { width: 78px; height: 78px; font-size: 32px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px #fbbf24, 0 10px 26px rgba(251, 191, 36, .45); }
.step.s3 .avatar.lg { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #d6a37a; }
.avatar.ghost { background: var(--raised); color: var(--muted); box-shadow: none !important; }
.step b { margin-top: 10px; max-width: 100%; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step > span:not(.medal):not(.avatar) { font-size: 13px; color: var(--muted); }
.step.none b { color: var(--muted); font-weight: 600; }
.step .block { display: grid; place-items: center; width: 100%; margin-top: 10px; border-radius: 14px 14px 6px 6px; font-style: normal; font-size: 22px; font-weight: 700; color: #fff; }
.step.s1 .block { height: 74px; background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.step.s2 .block { height: 54px; background: linear-gradient(180deg, #cbd5e1, #94a3b8); }
.step.s3 .block { height: 40px; background: linear-gradient(180deg, #e0b48f, #c98a5a); }
.person.mine { background: var(--accent-soft); margin-bottom: 12px; }
.lead-more { width: 100%; justify-content: center; }
.lead-card .foot { text-align: center; margin-top: 12px; }
.person.leader { padding: 8px 6px; }
.person.leader.me { background: var(--accent-soft); }
.rank { flex: none; width: 30px; text-align: center; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

.points-info { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--r-lg); }
.points-info span { min-width: 0; }
.points-info b { display: block; font-size: 18px; font-weight: 700; }
.points-info em { display: block; font-style: normal; color: var(--ink-2); font-size: 15px; line-height: 1.5; margin-top: 2px; }
.tips { display: flex; gap: 12px; overflow-x: auto; margin: 0 -24px; padding: 4px 24px 14px; scrollbar-width: none; scroll-snap-type: x proximity; cursor: grab; }
.tips::-webkit-scrollbar { display: none; }
.tip { flex: none; width: 264px; padding: 18px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); display: grid; gap: 4px; align-content: start; scroll-snap-align: start; }
.tip .ic { width: 42px; height: 42px; margin-bottom: 8px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; color: #fff; background: linear-gradient(135deg, #f59e0b, #e8457f); }
.tip:nth-child(3n+2) .ic { background: linear-gradient(135deg, #12b981, #0a8f62); } .tip:nth-child(3n) .ic { background: linear-gradient(135deg, #a18bff, #6b4de6); }
.tip b { font-size: 17px; font-weight: 700; line-height: 1.3; }
.tip span:not(.ic) { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.recent-fares { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 12px; }
.given { margin-bottom: 14px; }
.given .label { margin-top: 0; }
@media (max-width: 860px) { .give-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .give-hero { padding: 44px 16px 80px; } .give-hero p { font-size: 16px; }
  .give-card, .lead-card { padding: 18px; }
  .tips { margin: 0 -16px; padding: 4px 16px 12px; } .tip { width: 236px; }
  .points-info { align-items: flex-start; }
}

/* ================= Minimal pass: one accent, quiet surfaces, type does the work =================
   The community and help pages no longer sit under coloured gradients; they use the same calm page as the
   rest of the app: a large headline, plenty of air, white cards, the single green accent. */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.eyebrow { background: var(--accent-soft); color: var(--accent); backdrop-filter: none; }

.lead-head { max-width: 640px; padding: 8px 0 34px; animation: rise .6s var(--ease); }
.lead-head h2 { margin: 18px 0 14px; font-size: clamp(36px, 6.2vw, 62px); font-weight: 700; letter-spacing: -.03em; line-height: 1.04; }
.lead-head p { margin: 0; font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.give-wrap { padding-top: 56px; }
.give-grid { margin-top: 0; gap: 18px; }
.give-card, .lead-card { padding: 26px; box-shadow: var(--shadow-1); border: 1px solid var(--line); }
.give-card h3, .lead-card h3 { font-size: 21px; margin-bottom: 20px; }
.give-card h3 em { background: var(--accent-soft); color: var(--accent); }
.give-card .od { background: var(--raised); }
.give-card.won { animation: won 1.1s var(--ease); }
@keyframes won { 30% { transform: scale(1.015); box-shadow: 0 0 0 3px var(--accent), var(--shadow-2); } }
.give-banner { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.give-banner span { opacity: 1; color: var(--ink-2); }
.give-banner .btn { background: var(--ink); color: var(--bg); }

/* The podium: three people, three quiet steps. No medals, no colour blocks. */
.podium { gap: 10px; margin: 4px 0 20px; }
.step .medal { display: none; }
.step .avatar.lg, .step.s3 .avatar.lg { width: 60px; height: 60px; font-size: 25px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--line); }
.step.s1 .avatar.lg { width: 76px; height: 76px; font-size: 31px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
.avatar.ghost { border: 1.5px dashed color-mix(in srgb, var(--muted) 60%, transparent); background: none; }
.step b { font-size: 15px; font-weight: 600; }
.step .block, .step.s1 .block, .step.s2 .block, .step.s3 .block { background: var(--raised); color: var(--muted); font-size: 18px; font-weight: 700; border-radius: 14px 14px 4px 4px; }
.step.s1 .block { height: 64px; background: var(--ink); color: var(--bg); }
.step.s2 .block { height: 46px; } .step.s3 .block { height: 34px; }
.step.tap, .person.tap { cursor: pointer; }
.person.tap { transition: background .15s; }
.person.tap:hover { background: var(--raised); }
.person.mine { background: var(--raised); }
.points-info { border: 1px solid var(--line); }
.mi.soft { background: var(--raised); color: var(--ink); }
.mi.soft.bad, .menu .bad b { color: #d92d20; }
.tip { border: 1px solid var(--line); box-shadow: none; }
.tip .ic, .tip:nth-child(3n+2) .ic, .tip:nth-child(3n) .ic { background: var(--raised); color: var(--ink); }

/* Help centre in the same voice */
.help-hero { background: none; color: var(--ink); padding: 64px 24px 30px; }
.help-hero h2 { margin: 18px 0 28px; font-size: clamp(34px, 5.8vw, 56px); letter-spacing: -.03em; }
.help-search { box-shadow: var(--shadow-1); border: 1px solid var(--line); }
.help-search:focus-within { transform: none; box-shadow: 0 0 0 2.5px var(--accent), var(--shadow-1); }
.help-topics { margin-top: 0; }
.help-topic { border: 1px solid var(--line); box-shadow: none; }
.help-topic > .ic { background: var(--raised); color: var(--ink); }
.help-contact { background: var(--surface); border: 1px solid var(--line); }
.faqs, .menu, .acct-card { border: 1px solid var(--line); }

/* ---- Menu rows can be buttons too ---- */
.menu > button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px; border-radius: 18px; text-align: left; transition: background .15s, transform .15s; }
.menu > button:hover { background: var(--raised); }
.menu > button:active { transform: scale(.985); background: var(--raised); }
.menu[hidden], .label[hidden] { display: none; }

/* ---- Profile ---- */
.prof { max-width: 720px; }
.prof-top { display: flex; align-items: center; gap: 28px; }
.prof-pic { flex: none; border-radius: 50%; padding: 4px; background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--violet), var(--accent)); transition: transform .3s var(--ease); }
button.prof-pic:hover { transform: scale(1.03); }
.prof-pic .avatar.xl { width: 132px; height: 132px; font-size: 56px; box-shadow: 0 0 0 4px var(--surface); }
.prof-info { min-width: 0; }
.prof-info h2 { margin: 0; font-size: clamp(26px, 4.4vw, 36px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.prof-info p { margin: 8px 0 10px; font-size: 17px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.prof-info p.dim { color: var(--muted); }
.prof-info p:empty { display: none; }
.prof-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; padding: 6px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.stat { padding: 14px 6px; border-radius: 18px; text-align: center; transition: background .15s, transform .15s; }
.stat:hover { background: var(--raised); } .stat:active { transform: scale(.97); }
.stat b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 14px; color: var(--muted); }
.prof-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.prof-actions .btn { flex: 1; justify-content: center; }
.prof-hint { flex: 1; font-size: 14px; color: var(--muted); }
.prof-hint:empty { display: none; }
.prof > .label { margin: 34px 6px 12px; font-size: 15px; color: var(--ink-2); }
.prof-none { display: grid; justify-items: center; gap: 12px; padding: 44px 20px; text-align: center; color: var(--muted); border: 1.5px dashed var(--line); border-radius: var(--r-lg); }
.prof-none .ic { font-size: 30px; opacity: .6; }
.prof-none b { font-weight: 600; }
.people-search { margin: 0 0 10px; }
.people-search .ic { display: grid; font-size: 20px; color: var(--muted); }
.people-results { min-height: 180px; }
.people-results .person { padding: 10px 8px; }
@media (max-width: 760px) {
  .give-wrap { padding-top: 34px; } .lead-head { padding-bottom: 24px; } .lead-head p { font-size: 17px; }
  .give-card, .lead-card { padding: 20px; }
  .help-hero { padding: 40px 16px 22px; }
  .prof-top { gap: 18px; }
  .prof-pic .avatar.xl { width: 92px; height: 92px; font-size: 40px; }
  .prof-info p { font-size: 15px; }
  .stat b { font-size: 22px; }
}

/* ================= Explore, and the profile as a proper page ================= */
.tips { scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.tips.dragging { cursor: grabbing; }
.row-label { display: flex; align-items: center; justify-content: space-between; }
.row-label .arrows { display: flex; gap: 4px; }
.row-label .icon-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); font-size: 16px; color: var(--ink); }
@media (hover: none) { .row-label .arrows { display: none; } }

.explore-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.explore-head h2 { margin: 16px 0 8px; font-size: clamp(32px, 5.4vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1.06; }
.explore-head p { margin: 0; font-size: 18px; color: var(--ink-2); }
.explore-head .btn { flex: none; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 900px) { .explore .post-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
.tile-post { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--raised); animation: rise .5s var(--ease) both; }
.tile-post img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease), filter .3s; }
.tile-post:hover img { transform: scale(1.05); filter: brightness(.82); }
.tile-post:active { transform: scale(.98); }
.tile-post .play { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: #fff; }
.tile-post .play svg { width: 12px; height: 12px; fill: currentColor; stroke: none; margin-left: 1px; }
.tile-post .meta { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .25s; }
.tile-post:hover .meta { opacity: 1; }
.tile-post .meta svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.more-posts { display: flex; margin: 18px auto 0; }
.more-posts[hidden] { display: none; }

.modal.post-modal .card { width: min(560px, 100%); max-height: 92vh; padding: 0; overflow: hidden; }
.modal.post-modal .card > header, .modal.post-modal #m-title, .modal.post-modal #m-sub { display: none; }
.modal.post-modal #m-close { position: absolute; z-index: 3; top: 10px; right: 10px; background: rgba(0, 0, 0, .45); color: #fff; border-radius: 50%; }
.modal.post-modal #m-body { padding: 0 0 6px; }
.modal.post-modal #m-actions { padding: 10px 14px 14px; margin: 0; border-top: 1px solid var(--line); }
.post-media { background: #000; display: grid; place-items: center; }
.post-media img, .post-media video { display: block; width: 100%; max-height: 62vh; object-fit: contain; }
.post-who { padding: 12px 16px 4px; }
.post-bar { display: flex; align-items: center; gap: 8px; padding: 4px 16px; }
.heart-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--raised); font-weight: 600; font-size: 15px; transition: transform .2s var(--ease), background .2s, color .2s; }
.heart-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transition: fill .2s; }
.heart-btn.on { background: #ffe9ec; color: #e11d48; } .heart-btn.on svg { fill: currentColor; }
.heart-btn.pop { animation: like .4s var(--ease); }
@keyframes like { 40% { transform: scale(1.22); } }
.post-bar .chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.post-act { margin: 0 0 0 auto; color: var(--muted); font-size: 13px; }
.post-caption { margin: 8px 16px 4px; font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-comments { padding: 6px 16px 4px; display: grid; gap: 10px; }
.cmt { display: flex; gap: 9px; font-size: 15px; line-height: 1.45; }
.cmt b { font-weight: 600; cursor: pointer; } .cmt div { min-width: 0; overflow-wrap: anywhere; }
.cmt-form { display: flex; gap: 8px; width: 100%; }
.cmt-form input { flex: 1; min-width: 0; border: 0; outline: none; background: var(--raised); color: var(--ink); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 15px; }
.cmt-form input:focus { box-shadow: 0 0 0 2px var(--accent); }
.send-cmt { flex: none; padding: 0 16px; border-radius: 999px; font-weight: 700; color: var(--accent); }
.post-pick { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 34px 18px; border-radius: var(--r); border: 1.5px dashed color-mix(in srgb, var(--muted) 55%, transparent); color: var(--muted); text-align: center; transition: background .2s, border-color .2s; }
.post-pick:hover { background: var(--raised); border-color: var(--accent); }
.post-pick .ic { font-size: 30px; } .post-pick b { color: var(--ink); font-size: 17px; } .post-pick span { font-size: 14px; }
.post-pick.has { padding: 0; border: 0; overflow: hidden; background: #000; }
.post-pick.has img, .post-pick.has video { display: block; width: 100%; max-height: 300px; object-fit: contain; }
.place-field { position: relative; }
.place-field .suggest { left: 0; right: 0; }
.upload-bar { height: 6px; margin-top: 14px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.upload-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .2s; }

/* ---- profile, second pass ---- */
.prof-bar { display: flex; align-items: center; gap: 4px; min-height: 40px; margin-bottom: 12px; }
.prof-bar span { flex: 1; font-size: 14px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-bar .icon-btn { background: var(--surface); border: 1px solid var(--line); border-radius: 50%; color: var(--ink); }
.prof-card { padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); animation: rise .5s var(--ease); }
.prof-top { gap: 22px; }
.prof-card .prof-stats { flex: 1; margin: 0; padding: 0; border: 0; background: none; }
.prof-card .prof-info { margin-top: 18px; }
.prof-info h2 { font-size: clamp(24px, 4vw, 30px); }
.prof-info .chips { margin-top: 2px; }
.chip.points { background: var(--ink); color: var(--bg); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.chip.points svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.chip.rank-chip { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.prof-actions { margin-top: 20px; }
.prof-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0 14px; border-bottom: 1px solid var(--line); }
.prof-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.prof-tabs button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.prof-tabs button.on { color: var(--ink); border-color: var(--ink); }
.prof-pane { min-height: 200px; }
@media (max-width: 760px) {
  .explore-head { flex-direction: column; align-items: stretch; margin-bottom: 18px; }
  .explore-head .btn { justify-content: center; }
  .post-grid { gap: 3px; margin: 0 -12px; } .tile-post { border-radius: 4px; }
  .prof-card { padding: 18px; } .prof-top { gap: 12px; }
  .prof-card .stat { padding: 8px 2px; } .prof-card .stat span { font-size: 13px; }
  .modal.post-modal { padding: 0; place-items: end center; }
  .modal.post-modal .card { border-radius: 22px 22px 0 0; max-height: 96vh; }
}

/* ================= Explore as a feed, and reels ================= */
.explore { max-width: 620px; padding-top: 26px; }
.ex-top { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 20; display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.ex-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 999px; background: var(--glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: var(--shadow-1); color: var(--muted); transition: box-shadow .2s; }
.ex-search:focus-within { box-shadow: 0 0 0 2.5px var(--accent), var(--shadow-1); }
.ex-search > i { font-size: 19px; display: grid; }
.ex-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--ink); font: inherit; font-size: 16px; }
.ex-new { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #fff; background: var(--ink); box-shadow: var(--shadow-1); transition: transform .2s var(--ease); }
.ex-new:hover { transform: rotate(90deg) scale(1.05); } .ex-new:active { transform: scale(.9); }
:root[data-theme=dark] .ex-new { color: #000; }

/* Faces: the people who share the most */
.faces { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 16px; margin-bottom: 4px; scrollbar-width: none; }
.faces::-webkit-scrollbar { display: none; }
.faces[hidden] { display: none; }
.face { flex: none; width: 74px; display: grid; justify-items: center; gap: 6px; transition: transform .2s var(--ease); }
.face:active { transform: scale(.94); }
.face span:not(.avatar) { max-width: 100%; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar.ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px transparent; background-clip: padding-box; position: relative; overflow: visible; }
.avatar.ring::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.avatar.ring img { border-radius: 50%; }
.face .avatar.lg { width: 62px; height: 62px; font-size: 25px; }

/* One post */
.fc { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin-bottom: 18px; animation: rise .55s var(--ease) both; }
.fc-head { display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 14px; }
.fc-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
.fc-who .t { min-width: 0; display: grid; }
.fc-who b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-who small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-media { position: relative; background: #000; display: grid; place-items: center; user-select: none; -webkit-user-select: none; }
.fc-media img, .fc-media video { display: block; width: 100%; max-height: min(78vh, 760px); object-fit: contain; background: #000; }
.fc-media.video { cursor: pointer; }
.reel-mark { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: #fff; }
.reel-mark svg { width: 13px; height: 13px; fill: currentColor; stroke: none; margin-left: 2px; }
.burst { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.burst svg { width: 110px; height: 110px; fill: #fff; stroke: none; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .35)); }
.burst.go { animation: burst .9s var(--ease); }
@keyframes burst { 0% { opacity: 0; transform: scale(.3); } 18% { opacity: 1; transform: scale(1.18); } 32% { transform: scale(.95); } 46%, 72% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
.fc-bar { display: flex; align-items: center; gap: 2px; padding: 8px 8px 0; }
.fc-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: transform .2s var(--ease), background .15s; }
.fc-btn:hover { background: var(--raised); } .fc-btn:active { transform: scale(.86); }
.fc-btn svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: fill .2s, stroke .2s; }
.like-btn.on svg, .reel-btn.on svg { fill: #ff3040; stroke: #ff3040; }
.like-btn.pop svg, .reel-btn.pop svg { animation: heart .45s var(--ease); }
@keyframes heart { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.fc-body { padding: 2px 16px 14px; display: grid; gap: 4px; }
.fc-likes { font-size: 15px; font-weight: 700; }
.fc-likes[hidden] { display: none; }
.fc-cap { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.fc-cap b { font-weight: 700; }
.fc-all { justify-self: start; font-size: 14px; color: var(--muted); padding: 2px 0; }
.fc-all:hover { color: var(--ink-2); }
#explore-results .label { margin: 16px 4px 10px; }
#explore-results[hidden], #explore-feed[hidden] { display: none; }
.found-people .person { padding: 10px 8px; }
#explore-end { height: 1px; }

/* Reels */
body.reels-open { overflow: hidden; }
.reels { position: fixed; inset: 0; z-index: 2900; background: #000; animation: fade .25s var(--ease); }
.reels-col { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; outline: none; overscroll-behavior: contain; }
.reels-col::-webkit-scrollbar { display: none; }
.reel { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; overflow: hidden; }
.reel video { height: 100%; width: 100%; max-width: 520px; object-fit: contain; background: #000; cursor: pointer; }
.reel-paused { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; pointer-events: none; opacity: 0; transform: scale(.7); transition: opacity .2s, transform .25s var(--ease); }
.reel-paused svg { width: 34px; height: 34px; fill: currentColor; stroke: none; margin-left: 5px; }
.reel.paused .reel-paused { opacity: 1; transform: none; }
.reel-info { position: absolute; left: max(16px, calc(50% - 244px)); right: 84px; bottom: calc(22px + env(safe-area-inset-bottom)); max-width: 400px; color: #fff; display: grid; gap: 8px; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.reel-info .fc-who b { font-size: 16px; }
.reel-info p { margin: 0; font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.reel-place { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; font-weight: 600; color: #fff; }
.reel-place svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.reel-side { position: absolute; right: max(10px, calc(50% - 330px)); bottom: calc(26px + env(safe-area-inset-bottom)); display: grid; gap: 18px; justify-items: center; color: #fff; }
.reel-btn { display: grid; justify-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); transition: transform .2s var(--ease); }
.reel-btn:active { transform: scale(.86); }
.reel-btn svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .5)); }
.reel-btn span:empty { display: none; }
.reel-btn.mute.off { opacity: .5; }
.reel-line { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #fff; opacity: .85; }
.reels-x { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 14px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.reels-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.modal { z-index: 3000; }
@media (max-width: 760px) {
  .explore { padding: 10px 0 30px; }
  .ex-top { top: 8px; margin: 0 12px 12px; }
  .faces { padding: 4px 12px 14px; }
  .fc { border-radius: 0; border-left: 0; border-right: 0; margin-bottom: 10px; }
  .reel video { max-width: none; object-fit: cover; }
  .reel-info { left: 14px; right: 74px; }
  .reel-side { right: 10px; }
  #explore-results { padding: 0 12px; }
}

/* Feed video: the speaker. Off (crossed) until pressed, because a browser will not start sound on its own. */
.fc-sound { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; transition: transform .2s var(--ease), background .2s; }
.fc-sound:active { transform: scale(.88); }
.fc-sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fc-sound::after { content: ''; position: absolute; width: 22px; height: 2px; border-radius: 2px; background: #fff; transform: rotate(-45deg); transition: opacity .2s, transform .2s; }
.fc-sound.on::after { opacity: 0; transform: rotate(-45deg) scaleX(0); }
.fc-sound.on { background: rgba(0, 0, 0, .7); }

/* ================= Stories, attachments, text posts, theme switch, a finer top bar ================= */
:root[data-theme=dark] { color-scheme: dark; }
.theme-pick { flex: none; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--raised); }
.theme-pick button { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s; white-space: nowrap; }
.theme-pick button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
:root[data-theme=dark] .ex-new { color: #000; }

/* ---- the top bar ---- */
.nav { backdrop-filter: saturate(1.8) blur(22px); -webkit-backdrop-filter: saturate(1.8) blur(22px); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; letter-spacing: -.01em; }
.links a { transition: background .2s var(--ease), color .2s, transform .2s var(--ease); }
.links a:not(.on):hover { background: var(--raised); color: var(--ink); }
.links a:active { transform: scale(.95); }
.links a.on { box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 16%, transparent); }
.acct-btn, .chat-btn, .lang-btn:not(.in-page) { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
.acct-btn:hover, .chat-btn:hover, .lang-btn:not(.in-page):hover { background: var(--raised); }
.chat-btn { height: 36px; } .acct-btn { height: 36px; padding-top: 0; padding-bottom: 0; }
.lang-btn:not(.in-page) { height: 36px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
@media (max-width: 760px) { .nav { border-bottom: 0; border-top: 1px solid var(--line); } .links a.on { box-shadow: none; } .lang-btn:not(.in-page) { display: none; } }

/* ---- post actions, text posts ---- */
.fc-btn.keep { margin-left: auto; }
.fc-btn.keep.on svg { fill: currentColor; }
.fc-text { display: grid; place-items: center; min-height: 300px; padding: 34px 28px; color: #fff; text-align: center; }
.fc-text p { margin: 0; font-size: clamp(22px, 4.4vw, 30px); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; white-space: pre-wrap; overflow-wrap: anywhere; }
.fc-text.long { min-height: 0; text-align: left; place-items: start; } .fc-text.long p { font-size: 18px; font-weight: 500; line-height: 1.6; }
.g0 { background: linear-gradient(135deg, #0a8f62, #0b5f6a); } .g1 { background: linear-gradient(135deg, #6b4de6, #c13584); }
.g2 { background: linear-gradient(135deg, #f97316, #db2777); } .g3 { background: linear-gradient(135deg, #2563eb, #06b6d4); } .g4 { background: linear-gradient(135deg, #111827, #4b5563); }
.tile-post.texty { display: grid; place-items: center; padding: 10px; color: #fff; }
.tile-post .tt { font-size: 13px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.prof-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }

/* ---- stories ---- */
.face.add { position: relative; }
.face.add .avatar { opacity: .9; }
.face .badge { position: absolute; top: 40px; right: 4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--bg); }
.face .badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.face.seen .avatar.ring::before { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.stories { position: fixed; inset: 0; z-index: 2950; background: #000; display: grid; place-items: center; animation: fade .2s var(--ease); }
.st-frame { position: relative; width: min(100vw, 56.25dvh, 480px); height: 100dvh; max-height: 880px; overflow: hidden; background: #111; border-radius: 0; }
@media (min-width: 600px) { .st-frame { border-radius: 22px; height: min(100dvh - 24px, 880px); } }
.st-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.st-stage img, .st-stage video { width: 100%; height: 100%; object-fit: contain; animation: fade .25s; }
.st-bars { position: absolute; z-index: 3; top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; display: flex; gap: 4px; }
.st-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.st-bars b { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.st-head { position: absolute; z-index: 3; top: calc(20px + env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; align-items: center; gap: 6px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.st-head .fc-who { gap: 10px; } .st-head .fc-who small { color: rgba(255, 255, 255, .8); margin-left: 4px; }
.st-x { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .35); }
.st-x svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-zone { position: absolute; z-index: 2; top: 70px; bottom: 0; width: 34%; }
.st-zone.left { left: 0; } .st-zone.right { right: 0; width: 66%; }

/* ---- messenger: attachments, emoji, requests ---- */
.compose-box { flex: 1; min-width: 0; display: flex; align-items: flex-end; background: var(--raised); border-radius: 22px; transition: box-shadow .15s; }
.compose-box:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.chat-compose .compose-box textarea { background: none; box-shadow: none !important; padding-right: 4px; }
.emoji-btn { flex: none; width: 40px; height: 44px; font-size: 20px; line-height: 1; transition: transform .2s var(--ease); }
.emoji-btn:hover { transform: scale(1.15); }
.emoji-tray { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 12px 0; animation: rise .25s var(--ease); }
.emoji-tray button { width: 40px; height: 40px; border-radius: 10px; font-size: 23px; transition: transform .15s, background .15s; }
.emoji-tray button:hover { background: var(--raised); transform: scale(1.18); }
.chat-thread > .upload-bar { margin: 0 14px; }
.bubble.media { padding: 0 !important; overflow: hidden; background: #000 !important; display: block; max-width: 280px; }
.bubble.media img, .bubble.media video { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.bubble.file { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.bubble.file .ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; background: rgba(127, 127, 127, .22); }
.bubble.file b { display: block; font-weight: 600; overflow-wrap: anywhere; } .bubble.file .t span { display: block; font-size: 12px; opacity: .75; }
.me .bubble.file { color: #fff; } .them .bubble.file { color: var(--ink); }
.chat-wait { align-self: center; max-width: 30em; margin: 14px 8px; padding: 10px 16px; border-radius: 16px; background: var(--raised); color: var(--ink-2); font-size: 14px; text-align: center; }
#chat-voice[hidden], #chat-video[hidden], #chat-attach[hidden] { display: none; }

/* ================= Inbox in the manner of a messaging app; reveal on scroll; map polish ================= */
.reveal { opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: transform, opacity; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---- inbox ---- */
#page-chat { background: var(--surface); }
.chat { max-width: none; padding: 0; gap: 0; grid-template-columns: 392px minmax(0, 1fr); }
.chat-side, .chat-main { border-radius: 0; box-shadow: none; background: var(--surface); }
.chat-side { border-right: 1px solid var(--line); }
.chat-top { padding: 22px 12px 8px 24px; }
.chat-top h2 { font-size: 22px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-top .icon-btn { color: var(--ink); font-size: 22px; }
.chat-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0 8px; border-bottom: 1px solid var(--line); }
.chat-tabs button { padding: 12px 6px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.chat-tabs button.on { color: var(--ink); border-color: var(--ink); }
.chat-tabs em { font-style: normal; color: var(--accent); font-weight: 700; }
.chat-find { display: flex; align-items: center; gap: 10px; height: 42px; margin: 14px 16px 6px; padding: 0 14px; border-radius: 12px; background: var(--raised); color: var(--muted); }
.chat-find[hidden] { display: none; }
.chat-find i { display: grid; font-size: 17px; }
.chat-find input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--ink); font: inherit; font-size: 15px; }
.chat-scroll { padding: 6px 8px 14px; }
#chat-requests[hidden], #chat-list[hidden] { display: none; }
.chat-list .person, #chat-list .person { padding: 9px 14px; border-radius: 14px; gap: 14px; }
#chat-list .avatar.lg { width: 58px; height: 58px; font-size: 24px; }
#chat-list .person .t b { font-size: 15.5px; font-weight: 500; }
#chat-list .person .t span { font-size: 14px; margin-top: 3px; }
#chat-list .person .t time { color: var(--muted); }
#chat-list .person.unread .t b { font-weight: 700; }
#chat-list .person.unread .t > span { color: var(--ink); font-weight: 600; }
#chat-list .person.on { background: var(--raised); }
.person .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.chat-none.small { padding: 34px 20px; font-size: 15px; }

.chat-head { padding: 12px 16px; background: var(--surface); backdrop-filter: none; }
.chat-head .icon-btn { color: var(--ink); font-size: 24px; width: 44px; height: 44px; }
#chat-voice, #chat-video { color: var(--ink); }
.chat-msgs { padding: 18px 20px 10px; gap: 2px; }
.chat-intro { display: grid; justify-items: center; gap: 4px; padding: 30px 16px 26px; text-align: center; animation: rise .5s var(--ease); }
.chat-intro .avatar.xl { width: 96px; height: 96px; font-size: 40px; margin-bottom: 10px; }
.chat-intro b { font-size: 21px; font-weight: 700; }
.chat-intro > span:not(.avatar) { font-size: 14px; color: var(--muted); max-width: 26em; }
.chat-intro .pill-btn { margin-top: 12px; }
.day { background: none; color: var(--muted); font-size: 12px; font-weight: 500; margin: 18px 0 10px; }
.sys { align-self: center; display: flex; align-items: center; gap: 7px; margin: 12px 0; font-size: 13px; color: var(--muted); }
.sys .ic { display: grid; font-size: 14px; }
.msg { max-width: 68%; gap: 8px; }
.msg .avatar.mini { flex: none; align-self: flex-end; margin-bottom: 2px; }
.msg.them.joined .avatar.mini { visibility: hidden; }
#chat-list .person .t span span, #chat-list .person .t span time { display: inline; margin: 0; }
.bubble { padding: 9px 14px; border-radius: 20px; font-size: 15.5px; }
.them .bubble { background: var(--raised); border-bottom-left-radius: 20px; }
.me .bubble { background: var(--accent); box-shadow: none; border-bottom-right-radius: 20px; }
.them.joined .bubble { border-bottom-left-radius: 6px; } .them.follows .bubble { border-top-left-radius: 6px; }
.me.joined .bubble { border-bottom-right-radius: 6px; } .me.follows .bubble { border-top-right-radius: 6px; }
.msg .meta { font-size: 11px; opacity: 0; transition: opacity .2s; }
.msg:hover .meta, .msg:last-of-type .meta { opacity: 1; }
.chat-compose { margin: 6px 16px 16px; padding: 4px 6px 4px 4px; gap: 2px; border: 1px solid var(--line); border-radius: 26px; align-items: center; transition: border-color .2s, box-shadow .2s; }
.chat-compose:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.chat-compose .compose-box { background: none; order: 1; box-shadow: none !important; flex-direction: row-reverse; align-items: center; }
.chat-compose .emoji-btn { order: 0; font-size: 22px; width: 42px; height: 42px; }
.chat-compose #chat-attach { order: 2; } .chat-compose #chat-share { order: 3; } .chat-compose .send { order: 4; }
.chat-compose .icon-btn { color: var(--ink); font-size: 23px; width: 42px; height: 42px; }
.chat-compose .send { width: 40px; height: 40px; box-shadow: none; }
.chat-compose .send.like { background: none; }
.chat-compose textarea { padding: 10px 4px; }
.emoji-tray { margin: 0 16px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-1); }
.chat-empty { background: var(--surface); }
@media (min-width: 761px) and (max-width: 1000px) { .chat { grid-template-columns: 320px minmax(0, 1fr); padding: 0; gap: 0; } }
@media (max-width: 760px) {
  .chat-top { padding: 18px 8px 6px 18px; } .chat-top h2 { font-size: 22px; }
  .msg { max-width: 82%; }
  .chat-compose { margin: 4px 10px calc(10px + env(safe-area-inset-bottom)); padding-bottom: 4px; }
  .chat-msgs { padding: 12px 12px 6px; }
}

/* ---- map: the search card and the result sheet as glass ---- */
#trip-search, .sheet { backdrop-filter: saturate(1.7) blur(24px); -webkit-backdrop-filter: saturate(1.7) blur(24px); border: 1px solid var(--line); }
.map-tools button { backdrop-filter: saturate(1.7) blur(18px); -webkit-backdrop-filter: saturate(1.7) blur(18px); border: 1px solid var(--line); transition: transform .2s var(--ease), background .2s, color .2s; }
.map-tools button:hover { transform: scale(1.06); } .map-tools button:active { transform: scale(.92); }
.map-tools button.on { background: var(--accent); color: #fff; }
.maplibregl-user-location-dot, .maplibregl-user-location-dot::before { background-color: #2f7cf6; }

/* ================= Home, redrawn ================= */
.hero { padding: 96px 24px 56px; }
.hero h1 { font-size: clamp(48px, 9vw, 96px); letter-spacing: -.04em; line-height: 1.02; animation: rise .8s var(--ease) both; }
.hero .eyebrow { animation: rise .6s var(--ease) both; }
.hero .lead { animation: rise .8s .08s var(--ease) both; }
.hero-search { animation: rise .8s .16s var(--ease) both; border: 1px solid var(--line); }
.popular { animation: rise .8s .24s var(--ease) both; }
.blob { filter: blur(90px); }
:root[data-theme=dark] .blob.one { opacity: .34; } :root[data-theme=dark] .blob.two { opacity: .28; } :root[data-theme=dark] .blob.three { opacity: .22; }
.home { padding-top: 4px; }

.apps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding: 10px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.apps a { display: grid; justify-items: center; gap: 9px; padding: 14px 4px 12px; border-radius: 20px; color: var(--ink); text-decoration: none; transition: background .2s, transform .25s var(--ease); }
.apps a:hover { background: var(--raised); transform: translateY(-3px); }
.apps a:active { transform: scale(.94); }
.apps .mi { width: 54px; height: 54px; border-radius: 18px; font-size: 25px; box-shadow: 0 8px 18px rgba(0, 0, 0, .16); transition: transform .3s var(--ease); }
.apps a:hover .mi { transform: scale(1.08) rotate(-4deg); }
.apps span { font-size: 13.5px; font-weight: 600; text-align: center; line-height: 1.2; }

.home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 46px 4px 14px; }
.home-head[hidden] { display: none; }
.home-head h3 { margin: 0; font-size: clamp(22px, 3.4vw, 30px); font-weight: 700; letter-spacing: -.02em; }
.home-head a, .home-head > span { flex: none; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.home-head > span { color: var(--muted); font-weight: 500; }
.home-head a [data-ic] { transition: transform .3s var(--ease); display: grid; } .home-head a:hover [data-ic] { transform: translateX(4px); }
.home-posts { display: flex; gap: 12px; overflow-x: auto; margin: 0 -24px; padding: 2px 24px 14px; scrollbar-width: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.home-posts::-webkit-scrollbar { display: none; }
.home-posts[hidden] { display: none; }
.home-posts.dragging { cursor: grabbing; }
.hp { position: relative; flex: none; width: 210px; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--raised); text-align: left; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.hp:hover { transform: translateY(-5px) scale(1.01); box-shadow: var(--shadow-2); }
.hp img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); pointer-events: none; }
.hp:hover img { transform: scale(1.07); }
.hp.texty { display: grid; place-items: center; padding: 18px; color: #fff; }
.hp.texty p { margin: 0 0 34px; font-size: 16px; font-weight: 700; line-height: 1.35; text-align: center; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.hp .hp-who { position: absolute; left: 0; right: 0; bottom: 0; flex: none; display: flex; align-items: center; gap: 8px; padding: 34px 12px 12px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); cursor: inherit; }
.hp .hp-who b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp .play { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: #fff; }
.hp .play svg { width: 12px; height: 12px; fill: currentColor; stroke: none; margin-left: 2px; }

.bento { display: grid; grid-template-columns: 1.25fr 1fr; grid-auto-rows: minmax(0, auto); gap: 14px; margin-top: 46px; }
.bento .card { display: grid; align-content: start; gap: 8px; padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .35s var(--ease), box-shadow .35s var(--ease); overflow: hidden; position: relative; }
.bento .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.bento .tag { justify-self: start; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, .18); }
.bento b { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.bento .card > span:not(.tag):not(.btn) { font-size: 16px; opacity: .85; max-width: 26em; }
.b-tour { grid-row: span 2; min-height: 300px; color: #fff !important; border: 0 !important; background: radial-gradient(120% 90% at 100% 0%, #10b3a3 0%, transparent 60%), linear-gradient(140deg, #0a8f62, #064e3b); }
.b-tour::after { content: ''; position: absolute; right: -60px; bottom: -80px; width: 280px; height: 280px; border-radius: 50%; border: 44px solid rgba(255, 255, 255, .09); transition: transform .8s var(--ease); }
.b-tour:hover::after { transform: scale(1.12) rotate(18deg); }
.b-tour .btn { justify-self: start; margin-top: auto; background: #fff; color: #064e3b; position: relative; z-index: 1; align-self: end; }
.b-give .tag { background: var(--accent-soft); color: var(--accent); }
.b-faces { display: flex; align-items: center; margin-top: 8px; min-height: 40px; }
.b-faces .avatar { width: 40px; height: 40px; font-size: 17px; margin-left: -10px; box-shadow: 0 0 0 3px var(--surface); }
.b-faces .avatar:first-child { margin-left: 0; }
.b-faces span.more { margin-left: 12px; font-size: 14px; color: var(--muted); }
.bento .b-small { grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; padding: 18px 20px; }
.bento .b-small .mi { grid-row: span 2; width: 46px; height: 46px; }
.bento .b-small b { font-size: 18px; letter-spacing: -.01em; }
.bento .b-small span { font-size: 14px !important; color: var(--muted); opacity: 1 !important; }
.bento { grid-template-areas: "tour give" "tour smalls"; }
.b-tour { grid-area: tour; } .b-give { grid-area: give; }
.bento .b-small:nth-of-type(3) { grid-area: auto; }

.stats-band { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; padding: 8px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.stats-band .stat { padding: 22px 8px; text-align: center; }
.stats-band .stat + .stat { border-left: 1px solid var(--line); border-radius: 0; }
.stats-band b { display: block; font-size: clamp(34px, 6vw, 56px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats-band span { font-size: 15px; color: var(--muted); }

.site-foot { margin-top: 64px; padding: 30px 4px 8px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.brand-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo-dot { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); position: relative; }
.logo-dot::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.brand-line b { font-size: 18px; font-weight: 700; } .brand-line span:last-child { color: var(--muted); font-size: 15px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-foot nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px; transition: color .2s; }
.site-foot nav a:hover { color: var(--accent); }
.site-foot p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 60em; }

@media (max-width: 900px) { .apps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bento { grid-template-columns: 1fr; grid-template-areas: none; } .b-tour, .b-give { grid-area: auto; grid-row: auto; } .b-tour { min-height: 240px; } }
@media (max-width: 760px) {
  .hero { padding: 64px 16px 36px; }
  .apps { padding: 6px; gap: 2px; } .apps .mi { width: 48px; height: 48px; border-radius: 16px; font-size: 22px; } .apps span { font-size: 12.5px; }
  .home-head { margin: 34px 2px 12px; }
  .home-posts { margin: 0 -16px; padding: 2px 16px 12px; } .hp { width: 164px; border-radius: 18px; }
  .bento { margin-top: 34px; } .bento .card { padding: 20px; }
  .stats-band .stat { padding: 16px 4px; } .stats-band span { font-size: 13px; }
  .site-foot { margin-top: 44px; }
}

/* bento layout, settled */
.bento { grid-template-columns: 1.25fr .5fr .5fr; grid-template-areas: none; }
.b-tour { grid-area: auto; grid-column: 1; grid-row: 1 / span 2; }
.b-give { grid-area: auto; grid-column: 2 / span 2; }
.bento .b-small { grid-template-columns: 1fr; padding: 20px; align-content: start; }
.bento .b-small .mi { grid-row: auto; margin-bottom: 6px; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .b-tour, .b-give { grid-column: 1 / -1; grid-row: auto; }
}

/* The scene behind Home's headline (drawn by js/scene.js), fading out towards the content below */
.hero > .hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 35%, transparent 85%); mask-image: radial-gradient(120% 90% at 50% 30%, #000 35%, transparent 85%); animation: fade 1.6s var(--ease); }
.hero { min-height: min(86vh, 760px); display: grid; align-content: center; justify-items: center; }
.hero > :not(.blob):not(.hero-scene) { width: 100%; }
.hero .eyebrow { width: auto !important; }
@media (max-width: 760px) { .hero { min-height: 0; } }

/* ================= Messenger, second pass: groups, notes, reactions, replies, details panel; badge; dashboard ================= */
/* ---- the verified badge ---- */
.vbadge { display: inline-grid; place-items: center; width: .95em; height: .95em; margin-left: .28em; vertical-align: -.1em; flex: none; }
.vbadge svg { width: 100%; height: 100%; display: block; }
.vbadge svg path:first-child { fill: #1d9bf0; stroke: none; }
.vbadge svg path.t { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.person .t b.no-tr, .who b.no-tr { display: flex; align-items: center; min-width: 0; }
.person .t b .nm, .who b .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- inbox: tabs as pills, notes, group faces ---- */
.chat-tabs { display: flex; gap: 8px; padding: 2px 16px 10px; border-bottom: 0; overflow-x: auto; scrollbar-width: none; }
.chat-tabs::-webkit-scrollbar { display: none; }
.chat-tabs button { flex: none; padding: 7px 15px; margin: 0; border: 0; border-radius: 999px; background: var(--raised); color: var(--ink-2); font-size: 14px; font-weight: 600; transition: background .2s, color .2s, transform .15s; }
.chat-tabs button:active { transform: scale(.95); }
.chat-tabs button.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.chat-tabs em { color: inherit; }
.chat-find { margin: 6px 16px 12px; }

.notes { display: flex; gap: 6px; padding: 30px 10px 8px; overflow-x: auto; scrollbar-width: none; }
.notes[hidden] { display: none; }
.notes::-webkit-scrollbar { display: none; }
.note { position: relative; flex: none; width: 86px; display: grid; justify-items: center; gap: 6px; padding: 0 2px; transition: transform .2s var(--ease); }
.note:active { transform: scale(.95); }
.note .avatar.note-av { width: 66px; height: 66px; font-size: 27px; }
.note-bubble { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); z-index: 1; max-width: 92px; padding: 6px 10px; border-radius: 16px;
  background: var(--surface); color: var(--ink); font-size: 12px; line-height: 1.25; box-shadow: 0 4px 16px rgba(0, 0, 0, .14), 0 0 0 1px var(--line);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; }
.note.empty .note-bubble { color: var(--muted); }
.note-name { font-size: 12px; color: var(--muted); max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gavatar { position: relative; flex: none; display: block; width: 50px; height: 50px; }
.gavatar .avatar { position: absolute; width: 68%; height: 68%; font-size: 15px; }
.gavatar .avatar.back { top: 0; right: 0; }
.gavatar .avatar.front { left: 0; bottom: 0; box-shadow: 0 0 0 2.5px var(--surface); }
.gavatar.lg { width: 58px; height: 58px; } .gavatar.sm { width: 40px; height: 40px; } .gavatar.sm .avatar { font-size: 12px; }
.gavatar.xl { width: 96px; height: 96px; margin-bottom: 10px; } .gavatar.xl .avatar { font-size: 28px; box-shadow: 0 0 0 3px var(--surface); }
#chat-list .person > .ic { flex: none; color: var(--muted); font-size: 16px; display: grid; }
#chat-list .person.muted .t > span { opacity: .8; }
#chat-list .person .t span .pv { display: inline; }
.req-note { margin: 8px 14px 4px; }

/* ---- one conversation ---- */
.msg { position: relative; align-items: flex-end; }
.mcol { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.me .mcol { align-items: flex-end; }
.mcol .from { margin: 0 0 3px 12px; font-size: 12px; color: var(--muted); }
.quote { max-width: 100%; margin-bottom: -10px; padding: 8px 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--raised) 70%, transparent);
  border: 1px solid var(--line); text-align: left; font-size: 13.5px; color: var(--ink-2); opacity: .9; transition: opacity .2s; }
.quote:hover { opacity: 1; }
.quote small { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bubble.gone { background: none !important; border: 1px solid var(--line); color: var(--muted) !important; font-style: italic; font-size: 14px; box-shadow: none !important; }
.reacts { position: relative; z-index: 1; margin: -9px 10px 0; padding: 2px 7px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 2px var(--surface), 0 2px 8px rgba(0, 0, 0, .14);
  font-size: 13px; line-height: 20px; color: var(--ink-2); animation: pop .35s var(--ease); }
.msg.has-reacts { margin-bottom: 6px; }
.msg-acts { position: absolute; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.msg.them .msg-acts { left: 100%; padding-left: 6px; } .msg.me .msg-acts { right: 100%; padding-right: 6px; flex-direction: row-reverse; }
.msg-acts button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); font-size: 17px; transition: background .15s, color .15s; }
.msg-acts button:hover { background: var(--raised); color: var(--ink); }
.msg-acts svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .msg:hover .msg-acts { opacity: 1; pointer-events: auto; } }
@media (hover: none) { .msg-acts { display: none; } }
.msg.flash .bubble { animation: flash 1.4s var(--ease); }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: none; } }
.seen-by { align-self: flex-end; display: flex; align-items: center; gap: 3px; margin: 4px 2px 0; font-size: 11.5px; color: var(--muted); }
.seen-by .avatar.xs { width: 16px; height: 16px; font-size: 8px; }
.seen-by span:last-child { margin-left: 4px; }
.sys { max-width: 86%; text-align: center; line-height: 1.4; }

/* reaction picker and message menu (desktop) */
.react-pop, .msg-menu { position: fixed; z-index: 3300; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(0, 0, 0, .22); animation: pop .22s var(--ease); }
.react-pop { display: flex; gap: 2px; padding: 5px; border-radius: 999px; }
.react-pop button { width: 40px; height: 40px; border-radius: 50%; font-size: 24px; transition: transform .15s var(--ease), background .15s; }
.react-pop button:hover { transform: scale(1.25) translateY(-3px); }
.react-pop button.on { background: var(--raised); }
.msg-menu { min-width: 210px; padding: 6px; border-radius: 16px; display: grid; }
.msg-menu button { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; font-size: 15px; text-align: left; }
.msg-menu button:hover { background: var(--raised); }
.msg-menu button.bad { color: #ff453a; }
.msg-menu svg, .menu-row svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.react-row { display: flex; justify-content: space-between; padding: 6px 4px 14px; }
.react-row button { width: 46px; height: 46px; border-radius: 50%; font-size: 27px; transition: transform .15s var(--ease); }
.react-row button.on { background: var(--raised); }
.react-row button:active { transform: scale(1.25); }
.menu-row { display: flex; align-items: center; gap: 12px; }
.react-big { font-size: 24px; }

/* replying */
.reply-bar { display: flex; align-items: center; gap: 10px; margin: 0 16px; padding: 10px 6px 4px 16px; border-top: 1px solid var(--line); animation: rise .25s var(--ease); }
.reply-bar[hidden] { display: none; }
.reply-bar .t { flex: 1; min-width: 0; }
.reply-bar b { display: block; font-size: 13px; }
.reply-bar span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* conversation themes: the colour of my bubbles and of the send button */
.chat-thread { --mb: var(--accent); --mt: var(--accent); }
.chat-thread[data-theme=ocean]  { --mb: linear-gradient(160deg, #0a84ff, #33b6ff); --mt: #0a84ff; }
.chat-thread[data-theme=sunset] { --mb: linear-gradient(160deg, #ff9500, #ff3b6b); --mt: #ff5e3a; }
.chat-thread[data-theme=berry]  { --mb: linear-gradient(160deg, #d6249f, #7a3cff); --mt: #c13584; }
.chat-thread[data-theme=forest] { --mb: linear-gradient(160deg, #0f9d58, #34c759); --mt: #19a85a; }
.chat-thread[data-theme=grape]  { --mb: linear-gradient(160deg, #5856d6, #af52de); --mt: #7a5af8; }
.chat-thread[data-theme=mono]   { --mb: #48484a; --mt: #636366; }
.chat-thread .me .bubble:not(.emoji):not(.media):not(.gone) { background: var(--mb); color: #fff; }
.chat-thread .send:not(.like) { background: var(--mt); }
.chat-thread .tick.seen { color: var(--mt); }
.chat-thread .chat-compose:focus-within { border-color: color-mix(in srgb, var(--mt) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mt) 16%, transparent); }

/* ---- details panel ---- */
.chat-main { position: relative; }
.chat-info { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(380px, 100%); display: flex; flex-direction: column; background: var(--surface);
  border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0, 0, 0, .14); animation: slide-in .32s var(--ease); }
.chat-info[hidden] { display: none; }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.info-head { display: flex; align-items: center; gap: 6px; padding: 12px 12px 8px; }
.info-head b { font-size: 18px; font-weight: 700; }
.info-head .icon-btn { color: var(--ink); }
.info-body { flex: 1; overflow-y: auto; padding: 0 12px 24px; overscroll-behavior: contain; }
.info-top { display: grid; justify-items: center; gap: 2px; padding: 10px 0 18px; text-align: center; }
.info-top .avatar.xl { width: 88px; height: 88px; font-size: 36px; margin-bottom: 10px; }
.info-top .gavatar.xl { width: 88px; height: 88px; }
.info-top > b { font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.info-top > span { font-size: 13.5px; color: var(--muted); max-width: 26em; }
.info-quick { display: flex; justify-content: center; gap: 22px; margin-top: 16px; }
.info-quick button { display: grid; justify-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.info-quick .qi { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); color: var(--ink); font-size: 19px; transition: transform .15s, background .2s; }
.info-quick .qi svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.info-quick button:active .qi { transform: scale(.9); }
.info-quick button.on .qi { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.info-sec { border-top: 1px solid var(--line); }
.info-sec summary { display: flex; align-items: center; justify-content: space-between; padding: 15px 6px; font-weight: 600; font-size: 15.5px; cursor: pointer; list-style: none; }
.info-sec summary::-webkit-details-marker { display: none; }
.info-sec summary .ic { color: var(--muted); transition: transform .25s var(--ease); display: grid; }
.info-sec[open] summary .ic { transform: rotate(90deg); }
.info-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 6px; border-radius: 12px; text-align: left; font-size: 15px; }
.info-row:hover { background: var(--raised); }
.info-row > .ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); font-size: 17px; }
.info-row .t b { display: block; font-weight: 500; } .info-row .t em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); }
.info-row.bad { color: #ff453a; } .info-row.bad > .ic { background: rgba(255, 69, 58, .12); }
.info-label { font-size: 13px; color: var(--muted); margin: 0 6px 8px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 6px 14px; }
.swatch { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); transition: transform .15s var(--ease), box-shadow .2s; }
.swatch:hover { transform: scale(1.08); }
.swatch.on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.swatch[data-theme=ocean] { background: linear-gradient(160deg, #0a84ff, #33b6ff); } .swatch[data-theme=sunset] { background: linear-gradient(160deg, #ff9500, #ff3b6b); }
.swatch[data-theme=berry] { background: linear-gradient(160deg, #d6249f, #7a3cff); } .swatch[data-theme=forest] { background: linear-gradient(160deg, #0f9d58, #34c759); }
.swatch[data-theme=grape] { background: linear-gradient(160deg, #5856d6, #af52de); } .swatch[data-theme=mono] { background: #48484a; }
.person.member { padding: 8px 6px; }
.person.member .t { cursor: pointer; }
.person.hit { align-items: flex-start; } .person.hit time { flex: none; font-size: 12px; color: var(--muted); }
.person.hit .t span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search-out { display: grid; gap: 2px; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 14px; overflow: hidden; }
.tile-m { position: relative; aspect-ratio: 1; background: var(--raised); display: block; overflow: hidden; }
.tile-m img, .tile-m video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.tile-m:hover img, .tile-m:hover video { transform: scale(1.06); }
.tile-m .ic { position: absolute; top: 6px; right: 6px; color: #fff; font-size: 16px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.chat-info .seg { margin: 4px 0 12px; }
.chat-info .item { text-decoration: none; color: inherit; }
@media (max-width: 760px) { .chat-info { width: 100%; border-left: 0; box-shadow: none; } }

/* ---- new message / group ---- */
.to-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.to-row .to { font-weight: 600; margin-right: 4px; }
.to-row input { flex: 1; min-width: 120px; border: 0; outline: none; background: none; color: var(--ink); font: inherit; font-size: 16px; padding: 6px 2px; }
.to-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 14px; font-weight: 600; animation: pop .25s var(--ease); }
.to-chip .ic { font-size: 13px; display: grid; }
.pick-list { display: grid; gap: 2px; max-height: 46vh; overflow-y: auto; margin: 0 -6px; }
.person.pick { padding: 8px 10px; }
.tickbox { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); transition: background .2s, border-color .2s; position: relative; }
.person.pick.on .tickbox { background: var(--accent); border-color: var(--accent); }
.person.pick.on .tickbox::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }

/* ---- settings: a proper switch; rows hidden until logged in ---- */
.switch { flex: none; position: relative; width: 50px; height: 30px; border-radius: 999px; background: var(--line); transition: background .25s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.switch.on { background: #30d158; }
.switch.on i { transform: translateX(20px); }
.menu > button[hidden], .menu > a[hidden], .label[hidden], .card[hidden] { display: none; }
#dm-pick { flex-wrap: wrap; justify-content: flex-end; }

/* ---- profile: the line into the dashboard ---- */
.prof-dash { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--raised); text-align: left; transition: transform .15s, background .2s; }
.prof-dash:active { transform: scale(.985); }
.prof-dash > .ic:first-child { font-size: 20px; display: grid; color: var(--accent); }
.prof-dash .t { flex: 1; min-width: 0; } .prof-dash b { display: block; font-size: 15px; } .prof-dash em { display: block; font-style: normal; font-size: 13px; color: var(--muted); }
.prof-dash > .ic:last-child { color: var(--muted); display: grid; }
.prof-info h2.no-tr { display: flex; align-items: center; }

/* ---- the professional dashboard ---- */
.dash { max-width: 760px; }
.dash-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; }
.dash-head .icon-btn { color: var(--ink); }
.dash-head h2 { margin: 0; font-size: clamp(22px, 3.4vw, 28px); font-weight: 700; letter-spacing: -.02em; }
.dash-head span { font-size: 13.5px; color: var(--muted); }
.dash-who { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 14px; }
.dash-who .avatar.lg { width: 58px; height: 58px; font-size: 24px; }
.dash-who .t { flex: 1; min-width: 0; } .dash-who b { display: flex; align-items: center; font-size: 17px; } .dash-who .t > span { display: block; font-size: 13.5px; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kpi { display: grid; gap: 1px; padding: 16px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-1); border: 1px solid var(--line); animation: rise .5s var(--ease) both; }
.kpi:nth-child(2) { animation-delay: .04s; } .kpi:nth-child(3) { animation-delay: .08s; } .kpi:nth-child(4) { animation-delay: .12s; } .kpi:nth-child(5) { animation-delay: .16s; } .kpi:nth-child(6) { animation-delay: .2s; }
.kpi .ic { font-size: 18px; color: var(--muted); display: grid; justify-self: start; margin-bottom: 8px; }
.kpi b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kpi span { font-size: 14px; font-weight: 600; }
.kpi em { font-style: normal; font-size: 12px; color: var(--muted); }
.dash-chart { padding: 16px; }
.dash-chart .seg { margin-bottom: 14px; }
.dash-total { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 14px; }
.dash-total b { font-size: 30px; font-weight: 700; letter-spacing: -.02em; } .dash-total span { color: var(--muted); font-size: 14px; }
.bars { display: grid; grid-template-columns: repeat(14, 1fr); align-items: end; gap: 6px; height: 150px; padding-top: 18px; }
.bar { position: relative; height: 100%; display: flex; align-items: flex-end; }
.bar::before { content: ''; width: 100%; height: max(4px, var(--h)); border-radius: 7px 7px 3px 3px; background: color-mix(in srgb, var(--accent) 38%, transparent); transform-origin: bottom; animation: grow .7s var(--ease) both; }
.bar.today::before { background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.bar span { position: absolute; left: 50%; bottom: calc(var(--h) + 4px); transform: translateX(-50%); font-size: 11px; color: var(--muted); }
@keyframes grow { from { transform: scaleY(0); } }
.axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
.dash-top { grid-template-columns: repeat(3, 1fr); }
.dash-stat { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 600; }
.dash-stat .ic { font-size: 13px; display: grid; }
.dash-note { margin: 18px 4px 8px; }
.verify-list { margin: 6px 0 4px; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, 1fr); } .kpi b { font-size: 23px; } .bars { gap: 4px; height: 120px; } }
@media (prefers-reduced-motion: reduce) { .bar::before, .kpi, .chat-info { animation: none; } }
@media (max-width: 760px) { .chat-side { border-right: 0; } }

/* ================= Voice messages, editing, group calls, the creator program ================= */
.chat-compose #chat-mic { order: 3; } .chat-compose #chat-share { order: 3; }
#chat-mic[hidden], .chat-compose[hidden] { display: none; }

/* a voice message */
.bubble.voice { --p: 0; display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 8px 14px 8px 8px; }
.vplay { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); color: inherit; transition: transform .15s; }
.them .vplay { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.vplay:active { transform: scale(.9); }
.vplay svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.vwave { flex: 1; height: 28px; display: flex; align-items: center; gap: 2px; cursor: pointer;
  -webkit-mask: linear-gradient(90deg, #000 calc(var(--p) * 100%), rgba(0, 0, 0, .42) 0); mask: linear-gradient(90deg, #000 calc(var(--p) * 100%), rgba(0, 0, 0, .42) 0); }
.vwave i { flex: 1; min-width: 2px; border-radius: 2px; background: currentColor; }
.vtime { flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums; opacity: .85; min-width: 34px; text-align: right; }
.bubble.voice.playing .vplay { animation: pulse-soft 1.6s ease-in-out infinite; }
@keyframes pulse-soft { 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); } }

/* recording */
.rec-bar { display: flex; align-items: center; gap: 10px; margin: 6px 16px 16px; padding: 6px 6px 6px 8px; border-radius: 26px; border: 1px solid var(--line); background: var(--surface); animation: rise .25s var(--ease); }
.rec-bar[hidden] { display: none; }
.rec-x { color: #ff453a !important; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 40px; }
.rec-wave { flex: 1; height: 30px; display: flex; align-items: center; gap: 3px; color: var(--accent); }
.rec-wave i { flex: 1; height: calc(var(--v, .12) * 100%); min-height: 3px; border-radius: 3px; background: currentColor; transition: height .08s; }
.rec-send { width: 40px; height: 40px; flex: none; }
@media (max-width: 760px) { .rec-bar { margin: 4px 10px calc(10px + env(safe-area-inset-bottom)); } }

/* editing uses the reply bar */
.reply-bar.editing { color: var(--accent); }
.reply-bar.editing > .ic { font-size: 18px; display: grid; }
.reply-bar.editing .t b { color: var(--accent); }
.reply-bar.editing .t span { white-space: normal; }

/* "a group call is on" */
.callbar { display: flex; align-items: center; gap: 10px; margin: 8px 14px 0; padding: 8px 8px 8px 14px; border-radius: 16px;
  background: color-mix(in srgb, #30d158 14%, var(--surface)); border: 1px solid color-mix(in srgb, #30d158 40%, transparent); animation: rise .3s var(--ease); }
.callbar[hidden] { display: none; }
.callbar > .ic { color: #30d158; font-size: 18px; display: grid; }
.cb-faces { display: flex; } .cb-faces .avatar { box-shadow: 0 0 0 2px var(--surface); } .cb-faces .avatar + .avatar { margin-left: -7px; }
.callbar .t { flex: 1; min-width: 0; } .callbar b { display: block; font-size: 14px; } .callbar .t span { display: block; font-size: 12.5px; color: var(--muted); }
.callbar .pill-btn { background: #30d158; color: #04130d; }

/* the group call screen */
.gcall { position: fixed; inset: 0; z-index: 3150; display: grid; grid-template-rows: auto 1fr auto; color: #fff;
  background: radial-gradient(120% 80% at 50% 0%, #163d52 0%, #0a1d26 45%, #04080b 100%); animation: fade .3s var(--ease); }
.gcall[hidden] { display: none; }
.gc-head { display: flex; justify-content: center; padding: calc(18px + env(safe-area-inset-top)) 20px 6px; text-align: center; }
.gc-head b { display: block; font-size: 20px; font-weight: 700; } .gc-head .t > span { font-size: 14px; opacity: .8; font-variant-numeric: tabular-nums; }
.gc-grid { display: grid; gap: 10px; padding: 12px; min-height: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: center; }
.gc-grid[data-n="1"] { grid-template-columns: minmax(0, 560px); justify-content: center; }
.gc-grid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .gc-grid[data-n="2"] { grid-template-columns: 1fr; } .gc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gc-tile { position: relative; min-height: 140px; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); animation: pop .35s var(--ease); }
.gc-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.gc-tile.me video { transform: scaleX(-1); }
.gcall.video .gc-tile.live video, .gcall.video .gc-tile.me:not(.cam-off) video { opacity: 1; }
.gc-face { position: absolute; inset: 0; display: grid; place-items: center; }
.gc-face .avatar.xl { width: 92px; height: 92px; font-size: 38px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.gcall.video .gc-tile.live .gc-face, .gcall.video .gc-tile.me:not(.cam-off) .gc-face { opacity: 0; }
.gc-tile[data-state=connecting] .gc-face .avatar, .gc-tile:not(.live):not(.me) .gc-face .avatar { animation: float 1.8s ease-in-out infinite; opacity: .75; }
.gc-name { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .45); font-size: 13px; font-weight: 600; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gcall .call-actions { justify-content: center; }

/* someone started a group call */
.gc-ring { position: fixed; z-index: 3250; top: 14px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 20px)); display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 24px; background: #101418; color: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .08); animation: rise .35s var(--ease); }
.gc-ring .t { flex: 1; min-width: 0; } .gc-ring b { display: block; font-size: 16px; } .gc-ring .t span { display: block; font-size: 13px; opacity: .8; }
.gc-ring .gavatar .avatar.front { box-shadow: 0 0 0 2.5px #101418; }
.call-btn.small { width: 46px; height: 46px; font-size: 20px; flex: none; }

/* the creator program */
.money-card { padding: 18px; }
.mc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mc-head > .ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 21px; color: #fff; background: linear-gradient(135deg, #f5a524, #f06a29); flex: none; }
.mc-head .t { flex: 1; min-width: 0; } .mc-head b { display: block; font-size: 17px; } .mc-head .t span { display: block; font-size: 13.5px; color: var(--muted); }
.mc-tag { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--raised); }
.mc-tag.approved { background: rgba(48, 209, 88, .16); color: #30d158; } .mc-tag.applied { background: rgba(245, 165, 36, .16); color: #f5a524; } .mc-tag.rejected { background: rgba(255, 69, 58, .14); color: #ff453a; }
.mc-step { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.mc-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); position: relative; }
.mc-step.done .mc-tick { background: #30d158; border-color: #30d158; }
.mc-step.done .mc-tick::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.mc-step .t { flex: 1; min-width: 0; } .mc-step b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.mc-bar { --p: 0; display: block; height: 6px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.mc-bar::after { content: ''; display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .8s var(--ease); }
.money-card > .btn { width: 100%; margin-top: 12px; justify-content: center; }
.mc-balance { display: grid; gap: 2px; padding: 4px 0 12px; }
.mc-balance span { font-size: 13.5px; color: var(--muted); } .mc-balance b { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.mc-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mc-split > div { padding: 12px; border-radius: 16px; background: var(--raised); } .mc-split b { display: block; font-size: 17px; } .mc-split span { font-size: 12.5px; color: var(--muted); }
.mc-hist { margin-top: 6px; }
.mc-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.mc-row > .ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); font-size: 16px; }
.mc-row .t { flex: 1; min-width: 0; } .mc-row .t b { display: block; font-size: 14.5px; font-weight: 600; } .mc-row .t span { display: block; font-size: 12.5px; color: var(--muted); }
.mc-row .amt { flex: none; font-variant-numeric: tabular-nums; }
.mc-row.in .amt { color: #30d158; } .mc-row.rejected { opacity: .55; } .mc-row.rejected .amt { text-decoration: line-through; }
.chips.wallets { margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .rec-dot, .gc-tile .avatar, .bubble.voice.playing .vplay { animation: none !important; } }
.call-btn > svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.send > svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rec-send { color: #fff; background: var(--mt, var(--accent)); }

/* ================= Premium pass: sign-in, security, story rings, badge, messenger, explore, reels ================= */
:root { --ig-grad: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%); --ig-blue: #0095f6; --bubble-them: #efefef; }
:root[data-theme=dark] { --bubble-them: #262626; }

/* ---- the verified badge ---- */
.vbadge { width: 1em; height: 1em; margin-left: .3em; vertical-align: -.12em; filter: drop-shadow(0 1px 2px rgba(29, 140, 248, .35)); }
.vbadge svg path.b { fill: url(#vb-g); stroke: none; }
.vbadge svg path.t { fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

/* ---- story rings: on any picture of someone with a story from the last day ---- */
.avatar.st-ring { overflow: visible; cursor: pointer; }
.avatar.st-ring::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; padding: 2.2px; background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.avatar.st-ring.st-seen::before { background: var(--line); padding: 1.6px; }
.avatar.st-ring.xs::before, .avatar.st-ring.mini::before, .gavatar .avatar.st-ring::before { display: none; }
.avatar.st-ring.xl::before { inset: -6px; padding: 3px; }
.avatar.st-ring img { border-radius: 50%; }

/* ---- sign-in: a screen of its own ---- */
body.auth-open { overflow: hidden; }
.auth { position: fixed; inset: 0; z-index: 3400; display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg); overflow-y: auto; animation: fade .3s var(--ease); }
.auth-art { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.auth-art span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .32; }
.auth-art .a1 { width: 380px; height: 380px; left: -120px; top: -100px; background: #d62976; }
.auth-art .a2 { width: 420px; height: 420px; right: -140px; bottom: -120px; background: #4f5bd5; }
.auth-art .a3 { width: 260px; height: 260px; right: 18%; top: 12%; background: var(--accent); opacity: .22; }
.auth-x { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 2; color: var(--ink); }
.auth-card, .auth-foot { position: relative; width: min(380px, 100%); }
.auth-card { padding: 34px 32px 28px; border-radius: 28px; background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--line);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); box-shadow: 0 30px 80px rgba(0, 0, 0, .18); animation: rise .45s var(--ease); }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 16px; border-radius: 20px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 82%, transparent); font-size: 14px; color: var(--ink-2); text-align: center; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; }
.auth-brand b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.auth-logo { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 40%, transparent); }
.auth-logo i { width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .28); }
.auth-form { display: grid; gap: 12px; }
.auth-form h2 { margin: 0; font-size: 22px; font-weight: 700; text-align: center; letter-spacing: -.01em; }
.auth-sub { margin: -4px 0 6px; text-align: center; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.auth-field { position: relative; display: block; }
.auth-field input { width: 100%; height: 54px; padding: 22px 44px 6px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: inherit; font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s; }
.auth-field input:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.auth-check { position: absolute; right: 14px; top: 17px; width: 20px; height: 20px; border-radius: 50%; }
.auth-check.ok { background: #30d158; } .auth-check.ok::after { content: ''; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.auth-check.bad { background: #ff453a; } .auth-check.bad::after { content: '!'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
.auth-btn { height: 48px; border-radius: 14px; background: var(--ig-blue); color: #fff; font-size: 16px; font-weight: 700; transition: filter .2s, transform .15s, opacity .2s; }
.auth-btn:hover { filter: brightness(1.08); } .auth-btn:active { transform: scale(.98); } .auth-btn:disabled { opacity: .55; }
.auth-btn.ghost { background: transparent; color: var(--ig-blue); border: 1px solid color-mix(in srgb, var(--ig-blue) 45%, transparent); }
.auth-btn[hidden] { display: none; }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-card > .auth-btn.ghost { width: 100%; }
.auth-link { color: var(--ig-blue); font-weight: 700; font-size: 14px; padding: 4px 2px; }
.auth-note { min-height: 0; font-size: 14px; color: var(--muted); text-align: center; line-height: 1.5; }
.auth-note.bad { color: #ff453a; } .auth-note.good { color: #30d158; }
.auth-note .auth-link { display: block; margin: 4px auto 0; }
.auth-mail { justify-self: center; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink); margin-bottom: 4px; font-size: 32px; }
.auth-mail svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 6px 0; }
.otp[hidden] { display: none; }
.otp input { width: 100%; aspect-ratio: 1 / 1.15; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); text-align: center; font: inherit; font-size: 22px; font-weight: 700; outline: none; transition: border-color .2s, transform .15s; }
.otp input:focus { border-color: var(--ig-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ig-blue) 18%, transparent); }
.otp.full input { border-color: #30d158; }
.auth-field[hidden] { display: none; }
@media (max-width: 480px) { .auth-card { padding: 28px 20px 22px; border-radius: 24px; } .auth { place-items: stretch; } }

/* ---- security settings ---- */
.sec-intro { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 6px 0 4px; }
.sec-hero { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; font-size: 36px; color: #fff; background: linear-gradient(135deg, #30d158, #0a8f62); box-shadow: 0 14px 30px rgba(48, 209, 88, .3); margin-bottom: 6px; }
.sec-hero svg, .sec-state > .ic svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sec-intro b { font-size: 18px; } .sec-intro p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.sec-steps { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; color: var(--ink-2); font-size: 14.5px; }
.sec-qr { width: 200px; height: 200px; margin: 0 auto 6px; padding: 10px; border-radius: 18px; background: #fff; display: grid; place-items: center; }
.sec-qr svg { width: 100%; height: 100%; }
.sec-key { display: block; width: 100%; padding: 12px; border-radius: 12px; background: var(--raised); font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: .06em; text-align: center; word-break: break-all; transition: background .2s; }
.sec-key.copied { background: color-mix(in srgb, #30d158 22%, var(--raised)); }
.sec-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.sec-codes span { padding: 10px; border-radius: 10px; background: var(--raised); font-family: ui-monospace, Consolas, monospace; font-size: 15px; text-align: center; letter-spacing: .05em; }
.sec-state { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--raised); margin-bottom: 12px; }
.sec-state > .ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgba(48, 209, 88, .16); color: #30d158; }
.sec-state b { font-size: 15.5px; } .sec-state span { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
#set-2fa-sub.on { color: #30d158; font-weight: 600; }
.sess { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.sess > .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--raised); font-size: 19px; }
.sess .t { flex: 1; min-width: 0; } .sess b { display: block; font-size: 15px; } .sess .t span { display: block; font-size: 13px; color: var(--muted); }
.sess.here .t span { color: #30d158; font-weight: 600; }
.sess-here { font-size: 12px; font-weight: 700; color: #30d158; }

/* ---- messenger, Instagram-like ---- */
#page-chat, .chat-side, .chat-main, .chat-empty { background: var(--bg); }
:root[data-theme=light] #page-chat, :root[data-theme=light] .chat-side, :root[data-theme=light] .chat-main, :root[data-theme=light] .chat-empty { background: #fff; }
@media (min-width: 761px) { .chat-side { border-right: 1px solid var(--line); } }
.chat-top { padding: 26px 14px 12px 24px; }
.chat-top h2 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.chat-top .icon-btn { width: 40px; height: 40px; }
.chat-find { height: 40px; border-radius: 10px; margin: 2px 20px 12px; }
.chat-tabs { padding: 0 20px 8px; gap: 8px; }
.chat-tabs button { padding: 7px 16px; font-size: 14px; font-weight: 600; border-radius: 10px; }
.chat-tabs button.on { background: var(--ink); color: var(--bg); }
#chat-list .person { padding: 8px 20px; border-radius: 0; gap: 14px; }
#chat-list .person:hover { background: color-mix(in srgb, var(--raised) 60%, transparent); }
#chat-list .person.on { background: var(--raised); }
#chat-list .avatar.lg, #chat-list .gavatar.lg { width: 56px; height: 56px; }
#chat-list .person .t b { font-size: 14.5px; font-weight: 500; }
#chat-list .person.unread .t b { font-weight: 700; }
#chat-list .person .t > span { font-size: 13.5px; color: var(--muted); }
#chat-list .person.unread .t > span { color: var(--ink); font-weight: 600; }
.person .dot { width: 8px; height: 8px; background: var(--ig-blue); }
.chat-scroll { padding: 0 0 14px; }
.notes { padding: 34px 16px 10px; }
.avatar.online::after { width: 26%; height: 26%; right: 2%; bottom: 2%; background: #30d158; box-shadow: 0 0 0 3px var(--bg); }

.chat-head { padding: 10px 16px; border-bottom: 1px solid var(--line); background: inherit; min-height: 74px; }
.who { gap: 12px; }
.who b { font-size: 16px; font-weight: 700; }
.who span:not(.avatar):not(.nm):not(.vbadge) { font-size: 12.5px; }
.chat-head .icon-btn { font-size: 25px; width: 44px; height: 44px; color: var(--ink); }
.chat-head .icon-btn svg { stroke-width: 1.7; }
.chat-msgs { padding: 14px 18px 8px; }
.chat-intro .avatar.xl { width: 96px; height: 96px; }
.chat-intro b { font-size: 20px; display: flex; align-items: center; justify-content: center; }
.day { font-size: 12px; font-weight: 600; margin: 22px 0 12px; }
.msg { max-width: min(70%, 560px); margin-top: 3px; }
.msg.follows { margin-top: 1px; }
.bubble { padding: 9px 13px; border-radius: 22px; font-size: 15px; line-height: 1.38; }
.them .bubble:not(.media):not(.emoji):not(.gone) { background: var(--bubble-them); color: var(--ink); }
.them.joined .bubble { border-bottom-left-radius: 5px; } .them.follows .bubble { border-top-left-radius: 5px; }
.me.joined .bubble { border-bottom-right-radius: 5px; } .me.follows .bubble { border-top-right-radius: 5px; }
/* My bubbles: one gradient fixed to the window, so the colour shifts as messages climb the screen (as on Instagram). */
.chat-thread { --mb: linear-gradient(180deg, #a033ff 0%, #6c4bf6 45%, #3478f6 100%) fixed; --mt: #6c4bf6; }
.chat-thread[data-theme=green]  { --mb: linear-gradient(180deg, #34c759 0%, #10b3a3 55%, #0a8f62 100%) fixed; --mt: #0a8f62; }
.chat-thread[data-theme=ocean]  { --mb: linear-gradient(180deg, #33b6ff 0%, #0a84ff 100%) fixed; }
.chat-thread[data-theme=sunset] { --mb: linear-gradient(180deg, #ff9500 0%, #ff3b6b 100%) fixed; }
.chat-thread[data-theme=berry]  { --mb: linear-gradient(180deg, #d6249f 0%, #7a3cff 100%) fixed; }
.chat-thread[data-theme=forest] { --mb: linear-gradient(180deg, #34c759 0%, #0f9d58 100%) fixed; }
.chat-thread[data-theme=grape]  { --mb: linear-gradient(180deg, #af52de 0%, #5856d6 100%) fixed; }
.swatch[data-theme=default] { background: linear-gradient(160deg, #a033ff, #3478f6); }
.swatch[data-theme=green] { background: linear-gradient(160deg, #34c759, #0a8f62); }
.msg .meta { align-self: center; font-size: 11px; }
/* sent · delivered · seen */
.mstat { align-self: flex-end; display: flex; align-items: center; gap: 4px; margin: 3px 2px 6px; font-size: 11.5px; color: var(--muted); animation: fade .3s var(--ease); }
.mstat i { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; }
.mstat i svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mstat.got i { background: var(--muted); border-color: var(--muted); color: var(--bg); }
.mstat.seen .avatar.xs { width: 15px; height: 15px; font-size: 8px; }
.mstat.seen span { margin-left: 2px; }

/* composer: camera on the left, tools on the right, "Send" as a word while typing */
.chat-compose { margin: 6px 16px 16px; padding: 5px 8px 5px 5px; border-radius: 26px; border: 1px solid var(--line); gap: 4px; background: var(--bg); }
:root[data-theme=light] .chat-compose { background: #fff; }
.cam-btn { order: -1; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 19px; background: var(--mt, var(--ig-blue)); transition: transform .15s; }
.cam-btn:active { transform: scale(.9); }
.cam-btn svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.chat-compose .compose-box { order: 0; flex-direction: row; }
.chat-compose .emoji-btn { order: 1; width: 36px; height: 38px; font-size: 20px; }
.chat-compose textarea { padding: 9px 6px; font-size: 15px; }
.chat-compose .icon-btn { width: 38px; height: 38px; font-size: 22px; }
.chat-compose.typing #chat-attach, .chat-compose.typing #chat-share, .chat-compose.typing #chat-mic { display: none; }
.send em { display: none; font-style: normal; }
.chat-compose .send:not(.like) { width: auto; height: 38px; padding: 0 12px; border-radius: 12px; background: none !important; color: var(--mt, var(--ig-blue)); box-shadow: none; }
.chat-compose .send:not(.like) i { display: none; }
.chat-compose .send:not(.like) em { display: block; font-weight: 700; font-size: 15px; animation: fade .2s var(--ease); }
.chat-compose .send:not(.like) span { display: none; }
.rec-send { width: 40px !important; height: 40px; border-radius: 50% !important; }
.rec-send em { display: none !important; }

/* the empty inbox */
.ig-empty { width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 44px; color: var(--ink); margin-bottom: 8px; }
.ig-empty svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transform: translate(-2px, 2px) rotate(15deg); }
.chat-empty b { font-size: 20px; font-weight: 600; color: var(--ink); }
.chat-empty span { font-size: 14px; color: var(--muted); max-width: 26em; }
.chat-empty .btn { margin-top: 14px; background: var(--ig-blue); color: #fff; border-radius: 10px; padding: 9px 18px; font-size: 14px; }

/* ---- explore: the feed as a single 470 px column ---- */
.explore { max-width: 520px; }
.ex-top { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 6px 0; border-radius: 16px; }
.ex-tabs { display: flex; gap: 8px; margin: 0 0 14px; }
.ex-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--ink-2); background: var(--raised); transition: background .2s, color .2s, transform .15s; }
.ex-tabs button:active { transform: scale(.96); }
.ex-tabs button.on { background: var(--ink); color: var(--bg); }
.ex-tabs [data-ic] { font-size: 16px; display: grid; }
#explore-feed { max-width: 470px; margin: 0 auto; }
.fc { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0 0 18px; padding-bottom: 14px; }
.fc-head { padding: 6px 2px 10px; }
.fc-who b { font-size: 14px; display: flex; align-items: center; }
.fc-media { border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #000; aspect-ratio: 4 / 5; }
.fc-media img, .fc-media video { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.fc-media.fc-text { aspect-ratio: 1; border: 0; }
.fc-bar { padding: 6px 0 0; margin-left: -8px; }
.fc-btn svg { width: 24px; height: 24px; stroke-width: 1.9; }
.fc-body { padding: 2px 2px 0; }
.fc-likes { font-size: 14px; }
.fc-cap { font-size: 14px; }
.fc-all { font-size: 14px; }
@media (max-width: 760px) {
  .fc { margin-bottom: 8px; }
  .fc-head { padding: 6px 12px 10px; }
  .fc-media { border-radius: 0; border-left: 0; border-right: 0; }
  .fc-bar { padding: 4px 4px 0; margin: 0; }
  .fc-body { padding: 2px 14px 0; }
  .ex-tabs { margin: 0 12px 12px; }
}

/* profile grids: 3:4 tiles touching, as on Instagram */
.post-grid { gap: 2px; }
.tile-post { aspect-ratio: 3 / 4; border-radius: 0; }
.prof-pane .post-grid, .dash-top { border-radius: 4px; overflow: hidden; }
.prof-handle { display: flex; align-items: center; gap: 2px; font-size: 18px !important; font-weight: 700 !important; color: var(--ink) !important; }

/* ---- reels: a 9:16 frame, actions beside it, a top bar ---- */
.reel video { aspect-ratio: 9 / 16; height: 100%; width: auto; max-width: 100%; object-fit: cover; border-radius: 0; }
@media (min-width: 761px) { .reel { padding: 14px 0; height: 100dvh; } .reel video { border-radius: 14px; height: calc(100dvh - 28px); } }
.reels-top { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 16px 0 70px; pointer-events: none; color: #fff; }
.reels-top b { font-size: 22px; font-weight: 800; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.reels-cam { pointer-events: auto; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; }
.reels-cam svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .5)); }
.reel-info { bottom: calc(26px + env(safe-area-inset-bottom)); }
.reel-who { display: flex; align-items: center; gap: 10px; }
.reel-who .fc-who { flex: none; }
.reel-follow { padding: 5px 12px; border-radius: 9px; border: 1.5px solid rgba(255, 255, 255, .85); color: #fff; font-size: 13.5px; font-weight: 700; text-shadow: none; backdrop-filter: blur(6px); }
.reel-follow.done { border-color: rgba(255, 255, 255, .35); opacity: .8; }
.reel-audio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; opacity: .9; }
.reel-audio i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.reel-btn.on svg { fill: currentColor; }
@media (min-width: 761px) { .reel-side { right: calc(50% - (100dvh - 28px) * 9 / 32 - 64px); } .reel-info { left: calc(50% - (100dvh - 28px) * 9 / 32 + 16px); right: auto; width: calc((100dvh - 28px) * 9 / 16 - 90px); } }

.prof-handle .vbadge, .prof-bar .vbadge { flex: none !important; }
.prof-handle { flex: 1; }
@media (max-width: 760px) {
  .chat-compose .emoji-btn, .chat-compose #chat-share { display: none; }
  .chat-compose { margin: 4px 10px calc(10px + env(safe-area-inset-bottom)); }
}

/* ================= Phones first: the chat box on the keyboard, nothing wider than the screen, Explore's top bar, notifications ================= */
html, body { overflow-x: clip; }
img, video, svg, canvas { max-width: 100%; }

/* An open conversation on a phone fills exactly the part of the screen the keyboard leaves (see fitChat in chat.js). */
@media (max-width: 760px) {
  body.chat-open[data-page=chat] { overflow: hidden; overscroll-behavior: none; }
  body.chat-open[data-page=chat] .nav { transform: translateY(110%); }
  body.chat-open[data-page=chat] #page-chat { inset: auto; position: fixed; top: var(--vvt, 0px); left: 0; right: 0; height: var(--vvh, 100dvh); z-index: 2100; }
  body.chat-open[data-page=chat] .chat-main { transform: none; }
  .chat, .chat-main, .chat-thread { height: 100%; }
  .chat-thread { display: flex; flex-direction: column; min-height: 0; }
  .chat-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .chat-head { flex: none; padding-top: calc(8px + env(safe-area-inset-top)); }
  .chat-compose { flex: none; }
  .chat-compose textarea, .chat-find input, .ex-search input, .auth-field input, .otp input { font-size: 16px; }   /* iPhones zoom into anything smaller */
  body.chat-open .chat-compose { margin-bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* Settings rows: on a narrow screen the choice goes under its title instead of out of the card. */
.menu span em { white-space: normal; overflow: visible; line-height: 1.4; }
@media (max-width: 640px) {
  .menu > .row { flex-wrap: wrap; row-gap: 10px; }
  .menu > .row > span:not(.theme-pick):not(.switch) { flex: 1 1 calc(100% - 120px); min-width: 0; }
  .menu > .row > .theme-pick { flex: 1 1 100%; margin-left: 56px; max-width: calc(100% - 56px); justify-content: flex-start; flex-wrap: wrap; }
  .theme-pick button { padding: 6px 11px; }
  .menu b { font-size: 16px; }
}

/* ---- Explore's top bar: new post on the left, search in the middle, notifications on the right ---- */
.ex-top { display: flex; align-items: center; gap: 8px; }
.ex-icon { position: relative; flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 27px; color: var(--ink); transition: transform .18s var(--ease), background .2s; }
.ex-icon:hover { background: var(--raised); }
.ex-icon:active { transform: scale(.88); }
.ex-icon svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ex-search { height: 42px; border-radius: 12px; background: var(--raised); box-shadow: none; border: 0; padding: 0 14px; }
.ex-search > i { font-size: 17px; color: var(--muted); }
.ex-search input { font-size: 15.5px; }
.ndot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #ff3040; box-shadow: 0 0 0 2px var(--bg); animation: pop .35s var(--ease); }
.ndot[hidden] { display: none; }
.links a { position: relative; }
.links a .ndot { top: 6px; right: auto; left: 28px; }
@media (max-width: 760px) { .links a .ndot { left: calc(50% + 6px); top: 7px; } }

/* ---- notifications ---- */
.notif { position: fixed; inset: 0; z-index: 3050; background: rgba(0, 0, 0, .38); animation: fade .25s var(--ease); }
.notif-sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(0, 0, 0, .25); animation: sheet-in .38s var(--ease); transition: transform .26s var(--ease); }
:root[data-theme=light] .notif-sheet { background: #fff; }
@keyframes sheet-in { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.notif.out { animation: fade .26s reverse forwards; } .notif.out .notif-sheet { transform: translateX(100%); }
.notif-head { display: flex; align-items: center; gap: 6px; padding: calc(12px + env(safe-area-inset-top)) 12px 10px; border-bottom: 1px solid var(--line); }
.notif-head .icon-btn { color: var(--ink); font-size: 24px; }
.notif-head b { font-size: 20px; font-weight: 700; }
.notif-list { flex: 1; overflow-y: auto; padding: 4px 0 30px; overscroll-behavior: contain; }
.notif-label { padding: 18px 16px 8px; font-size: 15.5px; font-weight: 700; }
.notif-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; cursor: pointer; transition: background .15s; animation: rise .35s var(--ease) both; }
.notif-row:hover { background: color-mix(in srgb, var(--raised) 60%, transparent); }
.notif-row.new { background: color-mix(in srgb, var(--ig-blue) 7%, transparent); }
.notif-row > .avatar { width: 46px; height: 46px; font-size: 19px; }
.notif-row .t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.42; overflow-wrap: anywhere; }
.notif-row .t b { font-weight: 700; display: inline-flex; align-items: center; }
.notif-row time { color: var(--muted); font-size: 13px; white-space: nowrap; }
.notif-thumb { flex: none; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: var(--raised); display: grid; place-items: center; }
.notif-thumb img { width: 100%; height: 100%; object-fit: cover; }
.notif-thumb .tt { font-size: 9px; padding: 3px; text-align: center; line-height: 1.2; color: var(--ink-2); overflow: hidden; }
.notif-row .pill-btn { background: var(--ig-blue); color: #fff; padding: 7px 16px; border-radius: 10px; }
.notif-row .pill-btn.quiet { background: var(--raised); color: var(--ink); }
.notif-tag { flex: none; padding: 7px 12px; border-radius: 10px; background: var(--raised); font-size: 13px; font-weight: 600; }
.notif-none { display: grid; justify-items: center; gap: 8px; padding: 70px 30px; text-align: center; color: var(--muted); }
.notif-none .ring { width: 86px; height: 86px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 40px; color: var(--ink); margin-bottom: 8px; }
.notif-none .ring svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; }
.notif-none b { color: var(--ink); font-size: 19px; }
#helplines { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.help { min-width: 0; } .help > div { min-width: 0; } .help b, .help span { overflow-wrap: anywhere; }
@media (max-width: 480px) { .help .n { min-width: 64px; font-size: 23px; } }
@media (max-width: 760px) { .msg { max-width: 80%; } }

/* ---- motion: pages slide in softly, things pressed give way a little ---- */
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#page-explore.on .explore, #page-profile.on .prof, #page-settings.on .hub, #page-insights.on .dash, #page-support.on .help-wrap { animation: page-in .42s var(--ease) both; }
.btn, .pill-btn, .icon-btn, .chip, .ex-tabs button, .chat-tabs button { transition: transform .16s var(--ease), background .2s, color .2s, opacity .2s; }
.btn:active, .pill-btn:active, .icon-btn:active, .chip:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { #page-explore.on .explore, #page-profile.on .prof, #page-settings.on .hub, #page-insights.on .dash, #page-support.on .help-wrap { animation: none; } }

/* ================= The studio (new post / story / reel), filters, music ================= */
html { background: var(--bg); }
@media (max-width: 760px) { body.chat-open[data-page=chat] { position: fixed; inset: 0; width: 100%; } }

/* filters, as a post or reel is played */
.fx-bright img, .fx-bright video, video.fx-bright { filter: brightness(1.12) contrast(1.05) saturate(1.18); }
.fx-warm img, .fx-warm video { filter: sepia(.22) saturate(1.3) hue-rotate(-8deg) brightness(1.05); }
.fx-cool img, .fx-cool video { filter: saturate(1.05) hue-rotate(14deg) brightness(1.03) contrast(1.06); }
.fx-sunset img, .fx-sunset video { filter: sepia(.3) saturate(1.6) hue-rotate(-18deg) contrast(1.05); }
.fx-green img, .fx-green video { filter: saturate(1.25) hue-rotate(22deg) brightness(1.03); }
.fx-drama img, .fx-drama video { filter: contrast(1.35) saturate(1.2) brightness(.92); }
.fx-vintage img, .fx-vintage video { filter: sepia(.45) contrast(.92) brightness(1.05) saturate(.85); }
.fx-soft img, .fx-soft video { filter: contrast(.9) brightness(1.08) saturate(.9); }
.fx-fade img, .fx-fade video { filter: contrast(.85) brightness(1.1) saturate(.75); }
.fx-mono img, .fx-mono video { filter: grayscale(1) contrast(1.12); }

/* "♪ track" under the name in the feed; the sound line in reels */
.fc-tune { display: flex; align-items: center; gap: 4px; font-size: 12px !important; color: var(--ink-2) !important; }
.fc-tune i { display: grid; } .fc-tune svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.reel-audio { color: #fff; text-align: left; padding: 5px 12px 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); justify-self: start; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reel-audio i svg { width: 13px; height: 13px; animation: spin-slow 4s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ---- the studio ---- */
body.studio-open { overflow: hidden; }
.studio { position: fixed; inset: 0; z-index: 3300; display: flex; flex-direction: column; background: #000; color: #fff; animation: fade .25s var(--ease); }
.studio svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
.st-bar > b { flex: 1; text-align: center; font-size: 17px; font-weight: 700; }
.sbtn { width: 42px; height: 42px; display: grid; place-items: center; font-size: 24px; color: #fff; border-radius: 50%; transition: transform .15s, background .2s; }
.sbtn:active { transform: scale(.88); }
.sbtn.round { background: rgba(255, 255, 255, .14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 21px; }
.sbtn.round.off { opacity: .45; }
.st-modes { display: flex; justify-content: center; gap: 6px; padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
.st-modes button { padding: 8px 18px; border-radius: 999px; color: rgba(255, 255, 255, .6); font-weight: 700; font-size: 14px; transition: background .2s, color .2s; }
.st-modes button.on { background: #fff; color: #000; }
.st-source { flex: 1; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 20px; text-align: center; }
.st-art { position: relative; width: 120px; height: 100px; margin-bottom: 10px; }
.st-art span { position: absolute; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 20px; border: 2px solid #fff; font-size: 34px; }
.st-art .a { left: 0; top: 14px; transform: rotate(-10deg); } .st-art .b { right: 0; top: 0; transform: rotate(9deg); background: #000; }
.st-source > b { font-size: 21px; } .st-source > span { color: rgba(255, 255, 255, .65); font-size: 14.5px; max-width: 24em; line-height: 1.5; }
.st-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 240px; height: 46px; padding: 0 22px; border-radius: 12px; background: var(--ig-blue); color: #fff; font-weight: 700; font-size: 15px; margin-top: 6px; }
.st-cta.ghost { background: rgba(255, 255, 255, .12); }
.st-cta svg { font-size: 19px; }
.st-link { margin-top: 8px; color: rgba(255, 255, 255, .75); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* the camera */
.st-camera { position: absolute; inset: 0; overflow: hidden; background: #000; }
.st-camera video { width: 100%; height: 100%; object-fit: cover; transition: filter .25s; }
.st-camera video.mirror { transform: scaleX(-1); }
.st-camera.flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: shot-flash .35s ease-out forwards; }
@keyframes shot-flash { from { opacity: .9; } to { opacity: 0; } }
.st-tools { position: absolute; right: 12px; top: calc(70px + env(safe-area-inset-top)); display: grid; gap: 12px; }
.st-rec-time { position: absolute; top: calc(64px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 8px; background: #ff3040; font-weight: 700; font-variant-numeric: tabular-nums; z-index: 2; }
.st-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 60vw; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-chip.on { background: #fff; color: #000; }
.st-chip i { display: grid; font-size: 14px; }
.st-cam-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 0 calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.st-filters { display: flex; gap: 12px; overflow-x: auto; padding: 4px 16px 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
.st-filters::-webkit-scrollbar { display: none; }
.st-filter { flex: none; display: grid; justify-items: center; gap: 6px; scroll-snap-align: center; }
.st-filter .face { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #f58529, #dd2a7b 45%, #515bd4) center / cover; border: 2px solid transparent; transition: transform .2s var(--ease), border-color .2s; }
.st-filter.on .face { border-color: #fff; transform: scale(1.08); }
.st-filter .nm { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.st-kinds { display: flex; justify-content: center; gap: 4px; margin: 2px 0 10px; }
.st-kinds button { padding: 5px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; color: rgba(255, 255, 255, .7); }
.st-kinds button.on { background: rgba(255, 255, 255, .2); color: #fff; }
.st-shoot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 26px; }
.st-shoot .sbtn { justify-self: start; }
.st-shutter { --p: 0; position: relative; width: 80px; height: 80px; display: grid; place-items: center; }
.st-shutter svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.st-shutter .track { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 5; }
.st-shutter .prog { fill: none; stroke: #ff3040; stroke-width: 5; stroke-dasharray: 226; stroke-dashoffset: calc(226 - 226 * var(--p)); transition: stroke-dashoffset .2s linear; }
.st-shutter i { width: 62px; height: 62px; border-radius: 50%; background: #fff; transition: all .25s var(--ease); }
.st-shutter.video i { background: #ff3040; width: 58px; height: 58px; }
.st-shutter.rec i { width: 28px; height: 28px; border-radius: 8px; }
.st-shutter:active i { transform: scale(.9); }

/* editing */
.st-edit { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; }
.studio .st-frame { position: relative; width: min(100%, 520px); border-radius: 14px; overflow: hidden; background: #111; flex: none; }
.studio .st-frame.r45 { aspect-ratio: 4 / 5; max-height: 62vh; width: auto; height: min(62vh, calc(100vw * 1.25)); }
.studio .st-frame.r916 { aspect-ratio: 9 / 16; height: min(64vh, 720px); width: auto; }
.studio .st-frame img, .studio .st-frame video { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .25s; }
.st-edit-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 0 12px; }
.st-label { align-self: flex-start; padding: 0 18px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .6); }
.st-edit .st-filters { width: 100%; }
.st-next { padding: 8px 14px; border-radius: 10px; color: var(--ig-blue); font-weight: 700; font-size: 15px; }

/* details */
.studio .st-details, .studio .st-foot { background: var(--bg); color: var(--ink); }
:root[data-theme=light] .studio .st-details, :root[data-theme=light] .studio .st-foot { background: #fff; }
.st-details { flex: 1; overflow-y: auto; padding: 8px 16px; }
.st-compose { display: flex; gap: 12px; padding: 8px 0 14px; border-bottom: 1px solid var(--line); }
.st-thumb { flex: none; width: 76px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #111; }
.st-thumb img, .st-thumb video { width: 100%; height: 100%; object-fit: cover; }
.st-caption { flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: none; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; }
.st-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.st-row > .ic { font-size: 20px; display: grid; color: var(--ink-2); }
.st-row input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--ink); font: inherit; font-size: 16px; }
.st-row .suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 4; }
.st-progress { height: 4px; border-radius: 4px; background: var(--raised); overflow: hidden; margin: 16px 0 0; }
.st-progress[hidden] { display: none; }
.st-progress i { display: block; height: 100%; width: 0; background: var(--ig-blue); transition: width .2s; }
.st-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.st-share { width: 100%; height: 48px; border-radius: 12px; background: var(--ig-blue); color: #fff; font-weight: 700; font-size: 16px; transition: opacity .2s, transform .15s; }
.st-share:disabled { opacity: .55; } .st-share:active { transform: scale(.98); }
@media (min-width: 761px) {
  .studio { inset: 4vh max(16px, calc(50% - 300px)); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 90px rgba(0, 0, 0, .55); }
  body.studio-open::after { content: ''; position: fixed; inset: 0; z-index: 3290; background: rgba(0, 0, 0, .6); }
}

/* the music picker */
#modal.music-modal .card { max-width: 520px; }
.mp-start { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 2px 14px; font-size: 14px; color: var(--ink-2); }
.mp-start input { accent-color: var(--ig-blue); width: 100%; }
.mp-start-v { font-variant-numeric: tabular-nums; min-width: 70px; text-align: right; }
.mp-list { display: grid; gap: 2px; }
.mp-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: 14px; transition: background .15s; }
.mp-row.picked { background: color-mix(in srgb, var(--ig-blue) 12%, transparent); }
.mp-art { flex: none; width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 20px; background: #333 center / cover; overflow: hidden; }
.mp-art svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; }
.mp-art.g0 { background: linear-gradient(135deg, #2b1055, #7597de); } .mp-art.g1 { background: linear-gradient(135deg, #f7971e, #ffd200); } .mp-art.g2 { background: linear-gradient(135deg, #0f2027, #2c5364); }
.mp-art.g3 { background: linear-gradient(135deg, #b24592, #f15f79); } .mp-art.g4 { background: linear-gradient(135deg, #3a6186, #89253e); } .mp-art.g5 { background: linear-gradient(135deg, #f12711, #f5af19); }
.mp-art.g6 { background: linear-gradient(135deg, #134e5e, #71b280); } .mp-art.g7 { background: linear-gradient(135deg, #8e2de2, #4a00e0); }
.mp-row .t { flex: 1; min-width: 0; } .mp-row b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-row .t span { display: block; font-size: 12.5px; color: var(--muted); }
.mp-play { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); color: var(--ink); }
.mp-play svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.mp-play.on { background: var(--ig-blue); color: #fff; animation: pulse-soft 1.4s ease-in-out infinite; }
.mp-row .pill-btn { padding: 7px 14px; border-radius: 10px; background: var(--ig-blue); }

/* ================= Camera effects, the effect sheet, the music sheet ================= */
/* anything opened from the studio sits above it */
body.studio-open #modal { z-index: 3500; }
body.studio-open .chat-toast { z-index: 3600; }

.st-camera canvas.st-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }   /* what you see is what is saved */
.st-camera video.st-src { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; left: 0; top: 0; }
.st-fxname { position: absolute; left: 0; right: 0; top: 42%; text-align: center; font-size: 22px; font-weight: 800; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; }
.st-fxname.show { animation: fxname 1.4s var(--ease); }
@keyframes fxname { 0% { opacity: 0; transform: scale(.9); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.st-status { position: absolute; left: 50%; top: calc(110px + env(safe-area-inset-top)); transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .6); font-size: 13px; font-weight: 600; z-index: 2; }
.st-status[hidden] { display: none; }

/* the effects beside the shutter */
.st-ring-strip { display: flex; gap: 12px; overflow-x: auto; padding: 6px 18px 14px; scrollbar-width: none; scroll-snap-type: x mandatory; transition: opacity .2s; }
.st-ring-strip::-webkit-scrollbar { display: none; }
.st-ring-strip.hide { opacity: 0; pointer-events: none; }
.st-fx { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; scroll-snap-align: center; border: 2.5px solid rgba(255, 255, 255, .25); transition: transform .2s var(--ease), border-color .2s; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.st-fx.on { border-color: #fff; transform: scale(1.12); }

/* sheets inside the studio (effects, music) */
.st-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; max-height: 72%; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; background: #1c1c1e; color: #fff;
  padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); animation: sheet-up .32s var(--ease); transition: transform .25s var(--ease); }
.st-sheet.out { transform: translateY(105%); }
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.st-sheet .grab { flex: none; width: 100%; height: 22px; display: grid; place-items: center; cursor: pointer; }
.st-sheet .grab::before { content: ''; width: 40px; height: 4.5px; border-radius: 999px; background: rgba(255, 255, 255, .3); }
.fx-tabs, .mp-tabs { flex: none; display: flex; gap: 20px; padding: 2px 18px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.fx-tabs button, .mp-tabs button { flex: none; padding: 6px 0; font-weight: 700; font-size: 15px; color: rgba(255, 255, 255, .5); border-bottom: 2px solid transparent; }
.fx-tabs button.on, .mp-tabs button.on { color: #fff; border-color: #fff; }
.fx-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 14px; }
.fx-cell { display: grid; justify-items: center; gap: 7px; padding: 12px 6px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 2px solid transparent; transition: border-color .2s, background .2s; }
.fx-cell.on { border-color: var(--ig-blue); background: rgba(0, 149, 246, .12); }
.fx-face { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; border: 3px solid rgba(255, 255, 255, .85); }
.fx-cell .nm { font-size: 12.5px; font-weight: 600; text-align: center; }
.fx-done { flex: none; margin: 4px 14px 12px; height: 46px; border-radius: 12px; background: #fff; color: #000; font-weight: 700; }

/* music: a light sheet, as on TikTok */
.st-sheet.light { background: var(--bg); color: var(--ink); max-height: 84%; }
:root[data-theme=light] .st-sheet.light { background: #fff; }
.st-sheet.light .grab::before { background: var(--line); }
.mp-sheet .mp-tabs { border-color: var(--line); }
.mp-sheet .mp-tabs button { color: var(--muted); } .mp-sheet .mp-tabs button.on { color: var(--ink); border-color: var(--ink); }
.mp-search { flex: none; display: flex; align-items: center; gap: 8px; margin: 2px 16px 10px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--raised); color: var(--muted); }
.mp-search .ic { display: grid; font-size: 16px; }
.mp-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--ink); font: inherit; font-size: 16px; }
.mp-upload { flex: none; display: flex; align-items: center; gap: 10px; margin: 10px 16px 2px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed var(--line); color: var(--ink-2); font-weight: 600; font-size: 14px; }
.mp-upload .ic { display: grid; font-size: 18px; color: var(--ig-blue); }
.mp-sheet .mp-list { flex: 1; overflow-y: auto; padding: 4px 6px 10px; gap: 0; }
.mp-sheet .mp-row { padding: 9px 10px; border-radius: 12px; cursor: pointer; }
.mp-sheet .mp-row:hover { background: color-mix(in srgb, var(--raised) 60%, transparent); }
.mp-sheet .mp-row.playing { background: color-mix(in srgb, #ff2d55 9%, transparent); }
.mp-sheet .mp-row.playing .t b { color: #ff2d55; }
.mp-sheet .mp-row.picked .mp-use { background: var(--ig-blue); color: #fff; }
.mp-sheet .mp-art { position: relative; width: 52px; height: 52px; border-radius: 10px; }
.mp-sheet .mp-art .avatar { width: 100%; height: 100%; border-radius: 10px; }
.mp-eq { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 14px; background: rgba(0, 0, 0, .35); border-radius: inherit; }
.mp-row.playing .mp-eq { display: flex; }
.mp-eq b { width: 3.5px; height: 10px; border-radius: 2px; background: #fff; animation: eq .7s ease-in-out infinite alternate; }
.mp-eq b:nth-child(2) { animation-delay: .2s; } .mp-eq b:nth-child(3) { animation-delay: .4s; }
@keyframes eq { from { height: 5px; } to { height: 20px; } }
.mp-sheet .mp-row .t span { font-size: 12.5px; }
.mp-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); font-size: 19px; }
.mp-icon svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mp-icon.on { color: #f5a524; } .mp-icon.on svg { fill: currentColor; }
.mp-use { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); color: var(--ink); font-size: 16px; }
.mp-use svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mp-trim { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 0 12px 6px 74px; padding: 8px 12px; border-radius: 10px; background: var(--raised); font-size: 13px; animation: rise .2s var(--ease); }
.mp-trim input { accent-color: #ff2d55; width: 100%; }
.mp-none { padding: 40px 20px; text-align: center; color: var(--muted); }
.mp-note { margin: 12px 10px 4px; padding: 12px; border-radius: 12px; background: var(--raised); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.mp-remove { flex: none; margin: 4px 16px 12px; height: 42px; border-radius: 12px; color: #ff453a; font-weight: 700; background: color-mix(in srgb, #ff453a 10%, transparent); }
.mp-remove[hidden] { display: none; }
.mp-rights { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 10px 0; }
.mp-rights input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ig-blue); }

/* ================= Sign-in, second pass: a showcase, a living background, icons, steps ================= */
.auth { display: grid; grid-template-columns: 1fr; place-items: center; align-content: center; background: #05070b; color: #f5f5f7; padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); }
:root[data-theme=light] .auth { background: #f6f7fb; color: #0b0f14; }
.auth-art span { filter: blur(80px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.auth-art .a1 { width: 460px; height: 460px; left: -140px; top: -120px; background: #833ab4; }
.auth-art .a2 { width: 520px; height: 520px; right: -180px; bottom: -160px; background: #0a8f62; animation-delay: -6s; }
.auth-art .a3 { width: 340px; height: 340px; right: 10%; top: -60px; background: #fd1d1d; opacity: .35; animation-delay: -10s; }
.auth-art .a4 { position: absolute; width: 300px; height: 300px; left: 20%; bottom: -80px; border-radius: 50%; background: #fcb045; opacity: .3; animation-delay: -3s; }
:root[data-theme=light] .auth-art span { opacity: .28; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.15); } }
.auth-main { position: relative; z-index: 1; display: grid; gap: 12px; width: min(400px, 100%); }
.auth-card { width: 100%; padding: 30px 28px 26px; border-radius: 30px; background: rgba(22, 24, 30, .72); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); animation: card-in .45s cubic-bezier(.2, .8, .2, 1); }
:root[data-theme=light] .auth-card { background: rgba(255, 255, 255, .78); border-color: rgba(11, 15, 20, .06); box-shadow: 0 30px 80px rgba(20, 30, 60, .14); }
@keyframes card-in { from { opacity: 0; transform: translateX(26px) scale(.985); } to { opacity: 1; transform: none; } }
.auth-foot { width: 100%; background: rgba(22, 24, 30, .6); border-color: rgba(255, 255, 255, .08); color: rgba(245, 245, 247, .75); }
:root[data-theme=light] .auth-foot { background: rgba(255, 255, 255, .7); color: #48505c; }
.auth-brand { margin-bottom: 18px; }
.auth-brand b { font-size: 28px; color: inherit; }
.auth-logo { width: 46px; height: 46px; border-radius: 15px; background: conic-gradient(from 210deg, #10b3a3, #0a8f62, #36d399, #10b3a3); box-shadow: 0 12px 30px rgba(16, 179, 163, .45); }
.auth-steps { display: flex; justify-content: center; gap: 6px; margin: -6px 0 16px; }
.auth-steps i { width: 26px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .15); transition: background .3s, width .3s; }
:root[data-theme=light] .auth-steps i { background: rgba(11, 15, 20, .1); }
.auth-steps i.done { background: #30d158; } .auth-steps i.on { width: 40px; background: linear-gradient(90deg, #833ab4, #fd1d1d, #fcb045); }
.auth-form h2 { font-size: 24px; letter-spacing: -.02em; color: inherit; }
.auth-sub { color: rgba(245, 245, 247, .62); }
:root[data-theme=light] .auth-sub { color: #6b7280; }
/* fields with an icon and a floating label */
.auth-field input { height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: inherit; transition: border-color .2s, box-shadow .2s, background .2s; }
:root[data-theme=light] .auth-field input { background: #fff; border-color: rgba(11, 15, 20, .1); }
.auth-field.has-ic input { padding-left: 46px; }
.auth-field input:focus { border-color: #0095f6; box-shadow: 0 0 0 4px rgba(0, 149, 246, .18); background: rgba(255, 255, 255, .09); }
.auth-field > .lbl { position: absolute; left: 15px; top: 18px; font-size: 15px; color: rgba(245, 245, 247, .5); pointer-events: none; transition: transform .18s var(--ease), font-size .18s, color .18s; transform-origin: left top; }
:root[data-theme=light] .auth-field > .lbl { color: #8a93a1; }
.auth-field.has-ic > .lbl { left: 46px; }
.auth-field input:focus + .lbl, .auth-field input:not(:placeholder-shown) + .lbl { transform: translateY(-11px); font-size: 11.5px; color: #4cb4ff; }
.auth-field .fic { position: absolute; left: 15px; top: 18px; width: 20px; height: 20px; display: grid; place-items: center; color: rgba(245, 245, 247, .45); pointer-events: none; transition: color .2s; }
.auth-field .fic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-field input:focus ~ .fic { color: #4cb4ff; }
.auth-field.good input { border-color: rgba(48, 209, 88, .6); } .auth-field.bad input { border-color: rgba(255, 69, 58, .6); }
.auth-check { position: absolute; right: 14px; top: 18px; width: 20px; height: 20px; border-radius: 50%; transform: scale(0); transition: transform .25s cubic-bezier(.2, .8, .2, 1.4); }
.auth-check.ok, .auth-check.bad { transform: scale(1); }
.auth-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 0; margin: -4px 4px 2px; font-size: 13px; }
.auth-hint:empty { display: none; }
.auth-hint.ok { color: #30d158; } .auth-hint.bad { color: #ff6b5e; }
.auth-sugg { padding: 4px 10px; border-radius: 999px; background: rgba(0, 149, 246, .14); color: #4cb4ff; font-weight: 600; font-size: 12.5px; }
.auth-btn { position: relative; overflow: hidden; height: 52px; border-radius: 16px; font-size: 16.5px; background: linear-gradient(135deg, #0095f6, #6c4bf6); box-shadow: 0 14px 32px rgba(0, 120, 246, .35); }
.auth-btn::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.auth-btn.ghost { background: transparent; box-shadow: none; color: #4cb4ff; border: 1px solid rgba(76, 180, 255, .4); }
.auth-btn.ghost::after { display: none; }
.auth-or { color: rgba(245, 245, 247, .4); } .auth-or::before, .auth-or::after { background: rgba(255, 255, 255, .1); }
:root[data-theme=light] .auth-or { color: #8a93a1; } :root[data-theme=light] .auth-or::before, :root[data-theme=light] .auth-or::after { background: rgba(11, 15, 20, .1); }
.auth-mail { border-color: currentColor; background: rgba(255, 255, 255, .04); animation: float 3s ease-in-out infinite; }
.otp input { height: 60px; aspect-ratio: auto; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: inherit; font-size: 24px; transition: border-color .2s, transform .15s, box-shadow .2s; }
:root[data-theme=light] .otp input { background: #fff; border-color: rgba(11, 15, 20, .1); }
.otp input:focus { transform: translateY(-2px); }
.auth-x { color: inherit; }

/* the showcase (wide screens) */
.auth-show { display: none; }
@media (min-width: 980px) {
  .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 60px; padding: 40px max(40px, calc(50% - 560px)); }
  .auth-show { position: relative; z-index: 1; display: grid; gap: 36px; align-content: center; }
  .as-copy b { display: block; font-size: clamp(36px, 3.6vw, 54px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; background: linear-gradient(120deg, #fff 30%, #a6c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
  :root[data-theme=light] .as-copy b { background: linear-gradient(120deg, #0b0f14 30%, #4f5bd5); -webkit-background-clip: text; background-clip: text; }
  .as-copy span { display: block; margin-top: 14px; max-width: 30em; font-size: 17px; line-height: 1.55; opacity: .7; }
  .as-stage { position: relative; height: 340px; }
  .as-card { position: absolute; border-radius: 22px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35); animation: float 6s ease-in-out infinite; }
  :root[data-theme=light] .as-card { background: rgba(255, 255, 255, .75); border-color: rgba(11, 15, 20, .06); box-shadow: 0 20px 50px rgba(20, 30, 60, .12); }
  .as-card em { font-style: normal; font-weight: 700; font-size: 14px; }
  .as-map { left: 0; top: 20px; width: 300px; height: 190px; padding: 16px; display: flex; align-items: flex-end;
    background: linear-gradient(160deg, rgba(10, 143, 98, .35), rgba(16, 179, 163, .1)), repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 12px, transparent 12px 24px); }
  .as-map .route { position: absolute; left: 40px; top: 50px; width: 200px; height: 80px; border: 3px dashed rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .7) transparent transparent transparent; border-radius: 50%; transform: rotate(-12deg); }
  .as-map .pin { position: absolute; right: 50px; top: 34px; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: #ff3b30; transform: rotate(-45deg); box-shadow: 0 6px 16px rgba(255, 59, 48, .5); }
  .as-reel { right: 0; top: 0; width: 160px; height: 270px; padding: 14px; display: flex; align-items: flex-end; background: linear-gradient(180deg, #fd1d1d55, #833ab4aa); animation-delay: -2s; }
  .as-reel .play { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
  .as-reel .play::after { content: ''; position: absolute; left: 21px; top: 16px; border: 10px solid transparent; border-left: 15px solid #fff; }
  .as-chat { left: 70px; bottom: 0; width: 240px; padding: 14px; display: grid; gap: 8px; animation-delay: -4s; }
  .as-chat p { margin: 0; justify-self: start; padding: 8px 13px; border-radius: 16px; background: rgba(255, 255, 255, .14); font-size: 14px; }
  .as-chat p.me { justify-self: end; background: linear-gradient(135deg, #a033ff, #3478f6); color: #fff; }
  .as-badge { right: 120px; bottom: 30px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; animation-delay: -1s; }
  .as-badge i { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #4cc3ff, #1565e8); box-shadow: 0 0 0 3px rgba(76, 195, 255, .25); }
}
@media (prefers-reduced-motion: reduce) { .auth-art span, .as-card, .auth-btn::after, .auth-mail { animation: none !important; } }

/* ---- sheets that can be dragged ---- */
.sheet-grip { display: none; }
@media (max-width: 760px) {
  .sheet { padding-top: 6px; }
  .sheet-grip { display: block; position: sticky; top: -6px; z-index: 2; height: 26px; margin: -6px -18px 4px; cursor: grab; background: inherit; }
  .sheet-grip::before { content: ''; position: absolute; left: 50%; top: 10px; width: 42px; height: 5px; margin-left: -21px; border-radius: 999px; background: var(--line); }
}
.st-sheet .grab { height: 30px; cursor: grab; touch-action: none; }
.st-sheet.dragging, .sheet.dragging { user-select: none; -webkit-user-select: none; }
@media (min-width: 980px) {
  .as-stage { max-width: 540px; height: 360px; }
  .as-map { width: 270px; } .as-reel { top: -14px; width: 165px; } .as-chat { left: 24px; bottom: 0; width: 250px; } .as-badge { right: 8px; bottom: 40px; }
}

/* Phones: the last thing on a page must scroll clear of the tab bar. */
@media (max-width: 760px) {
  main > .page:not(#page-chat):not(#page-trip) { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 18px); }
}

/* ================= Shapes as on Instagram, and the words-and-stickers editor ================= */
/* reels: a tall video fills the screen; any other shape is whole in the middle, black above and below */
.reels .reel video { object-fit: contain; background: #000; }
.reels .reel.tall video { object-fit: cover; }
@media (max-width: 760px) { .reels .reel video { width: 100%; height: 100%; aspect-ratio: auto; max-width: none; } }
.stories .st-stage { overflow: hidden; }

/* the studio's frame takes the picture's shape */
.studio .st-frame { width: auto; height: auto; max-width: none; container-type: inline-size; background: #000; user-select: none; -webkit-user-select: none; }
.studio .st-frame .st-media { position: absolute; inset: 0; width: 100%; height: 100%; }
.studio .st-frame .st-blur { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(28px) brightness(.72) saturate(1.25); }
.st-shape { align-self: center; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: rgba(255, 255, 255, .85); }
.st-words i { font-style: normal; font-weight: 800; margin-right: 8px; font-family: Georgia, serif; }

/* layers: a hundredth of the picture's width is the unit (cqw) */
.lyr { position: absolute; z-index: 2; pointer-events: none; container-type: inline-size; overflow: visible; }
.lyr.full { inset: 0; }
.lyr.editing { pointer-events: auto; touch-action: none; }
.ly { position: absolute; display: flex; flex-direction: column; align-items: center; white-space: pre; line-height: 1.28; text-align: center; color: var(--c, #fff); will-change: transform; transform-origin: 50% 50%; }
.lyr.editing .ly { cursor: grab; }
.ly .ln { display: block; }
.ly.a-l { align-items: flex-start; text-align: left; } .ly.a-r { align-items: flex-end; text-align: right; }
.f-classic { font-family: "Anek Bangla", system-ui, sans-serif; font-weight: 700; }
.f-modern { font-family: Georgia, "Times New Roman", "Anek Bangla", serif; font-style: italic; font-weight: 600; }
.f-neon { font-family: "Anek Bangla", system-ui, sans-serif; font-weight: 700; }
.f-type { font-family: "Courier New", ui-monospace, "Anek Bangla", monospace; font-weight: 600; }
.f-strong { font-family: Impact, "Arial Black", "Anek Bangla", sans-serif; font-weight: 900; }
.ly-text:not(.bg1):not(.bg2) { text-shadow: 0 0 .09em rgba(0, 0, 0, .35); }
.ly-text.f-neon:not(.bg1):not(.bg2), .tx-input.f-neon { color: #fff; text-shadow: 0 0 .14em var(--glow), 0 0 .3em var(--glow); }
.ly.bg1 .ln, .ly.bg2 .ln { background: var(--box); padding: .05em .32em; margin: -.05em 0; border-radius: .28em; }
.ly-tag { font-family: "Anek Bangla", system-ui, sans-serif; font-weight: 800; }
.ly-tag .ln { background: var(--box); padding: .16em .55em; margin: -.16em 0; border-radius: 999px; box-shadow: 0 .1em .45em rgba(0, 0, 0, .18); }
.ly-emoji { line-height: 1.15; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ly.dying { opacity: .45; }

/* the tools on the frame, and the bin that shows while a layer is moved */
.st-side { position: absolute; right: 10px; top: 10px; z-index: 4; display: flex; flex-direction: column; gap: 10px; transition: opacity .2s; }
.st-tool { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; color: #fff; background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .15s; }
.st-tool:active { transform: scale(.9); }
.st-tool b { font: 800 17px/1 Georgia, serif; }
.st-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: conic-gradient(#f58529, #dd2a7b, #8134af, #00c6ff, #38ef7d, #f58529); }
.st-bin { position: absolute; left: 50%; bottom: 16px; z-index: 3; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #fff; border: 2px solid rgba(255, 255, 255, .9);
  background: rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.7); transition: opacity .2s, transform .2s var(--ease), background .2s; }
.st-frame.moving .st-bin { opacity: 1; transform: translateX(-50%) scale(1); }
.st-frame.moving .st-side { opacity: 0; pointer-events: none; }
.st-bin.hot { background: #ff3040; border-color: #ff3040; transform: translateX(-50%) scale(1.22) !important; }

/* the words tool */
.tx-tool { position: fixed; left: 0; right: 0; top: 0; height: 100%; z-index: 3450; display: flex; flex-direction: column; color: #fff; background: rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding-top: env(safe-area-inset-top); animation: fade .2s var(--ease); }
.tx-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.tx-top .grow { flex: 1; }
.tx-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); }
.tx-a { font: 800 17px/1 system-ui, sans-serif; }
.tx-a.bg1 { background: #fff; color: #000; border-color: #fff; } .tx-a.bg2 { background: rgba(0, 0, 0, .65); }
.al { display: block; width: 18px; height: 14px; background: linear-gradient(#fff, #fff) 0 0 / 100% 2px no-repeat, linear-gradient(#fff, #fff) var(--x) 6px / 58% 2px no-repeat, linear-gradient(#fff, #fff) 0 12px / 100% 2px no-repeat; }
.al.l { --x: 0; } .al.c { --x: 50%; } .al.r { --x: 100%; }
.tx-done { font-weight: 700; font-size: 16px; padding: 8px 6px; color: #fff; }
.tx-tool .tx-size { position: absolute; left: 22px; top: 46%; width: 170px; height: 6px; margin: 0; background: rgba(255, 255, 255, .35); transform: translate(-50%, -50%) rotate(-90deg); accent-color: #fff; z-index: 2; opacity: .85; }
.tx-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 40px; overflow: auto; }
.tx-input { width: 100%; max-width: 560px; border: 0; outline: none; resize: none; overflow: hidden; background: transparent; color: var(--c); text-align: center; line-height: 1.28; caret-color: #fff; white-space: pre-wrap; }
.tx-input.a-l { text-align: left; } .tx-input.a-r { text-align: right; }
.tx-input.bg1, .tx-input.bg2 { background: var(--box); border-radius: .3em; padding: .08em .35em; }
.tx-bottom { flex: none; display: grid; gap: 12px; padding: 8px 0 calc(12px + env(safe-area-inset-bottom)); }
.tx-fonts, .tx-colors { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px; scrollbar-width: none; }
.tx-fonts::-webkit-scrollbar, .tx-colors::-webkit-scrollbar { display: none; }
.tx-fonts > :first-child, .tx-colors > :first-child { margin-left: auto; } .tx-fonts > :last-child, .tx-colors > :last-child { margin-right: auto; }
.tx-tool .tx-size::-webkit-slider-thumb { width: 22px; height: 22px; }
.tx-fonts button { flex: none; padding: 7px 15px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 14.5px; transition: background .2s, color .2s; }
.tx-fonts button.on { background: #fff; color: #000; text-shadow: none; }
.tx-fonts button.f-neon { text-shadow: 0 0 6px #ff4fd8; }
.tx-colors button { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid #fff; transition: transform .15s; }
.tx-colors button.on { transform: scale(1.2); box-shadow: 0 0 0 2px rgba(255, 255, 255, .45); }

/* stickers and emoji */
.sk-sheet { max-height: 86%; }
.sk-tags { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px 14px 12px; }
.sk-tag { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; background: #fff; color: #a307ba; font-weight: 800; font-size: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .15s; }
.sk-tag:active { transform: scale(.94); }
.sk-tag.mention { color: #d10869; } .sk-tag.hash { color: #3897f0; } .sk-tag.time { color: #262626; } .sk-tag.bd { color: #006a4e; }
.sk-tag.text { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.sk-ask { position: relative; flex: none; display: flex; gap: 8px; padding: 0 14px 12px; }
.sk-ask[hidden] { display: none; }
.sk-ask input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 16px; outline: none; }
.sk-go { flex: none; padding: 0 16px; border-radius: 10px; background: var(--ig-blue); color: #fff; font-weight: 700; }
.sk-ask .suggest { position: absolute; left: 14px; right: 14px; top: 46px; z-index: 3; }
.sk-cats button { font-size: 21px; padding: 4px 2px; }
.sk-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); padding: 10px 10px 18px; }
.sk-emoji { height: 54px; font-size: 32px; border-radius: 12px; transition: transform .12s; }
.sk-emoji:hover { background: rgba(255, 255, 255, .06); } .sk-emoji:active { transform: scale(.82); }

/* sending: how much has gone */
.st-up { position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; color: #fff;
  background: rgba(0, 0, 0, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .2s var(--ease); }
.st-up .ring { --p: 0; width: 86px; height: 86px; border-radius: 50%; background: conic-gradient(#fff calc(var(--p) * 360deg), rgba(255, 255, 255, .18) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); margin-bottom: 6px; }
.st-up b { font-size: 24px; font-weight: 800; }
.st-up span { font-size: 13.5px; opacity: .8; }
.st-up small { font-size: 12.5px; opacity: .6; max-width: 250px; }

/* the music sheet's headings */
.mp-sec { padding: 14px 12px 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--muted); }
.mp-wait { padding: 18px; }

/* ================= Instagram 2026: a floating tab bar, the name at the top, videos as in the feed ================= */
@media (max-width: 760px) {
  :root { --tab-h: 74px; }
  .nav { left: 14px; right: 14px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 62px; padding: 6px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 999px;
    background: color-mix(in srgb, #1c1c1e 76%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(26px); backdrop-filter: saturate(1.8) blur(26px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06); color: #fff; }
  :root[data-theme=light] .nav { background: color-mix(in srgb, #ffffff 80%, transparent); border-color: rgba(0, 0, 0, .07); box-shadow: 0 12px 34px rgba(0, 0, 0, .14); color: #111; }
  .nav .links { gap: 4px; justify-content: space-between; }
  .nav .links a { flex: 1; max-width: none; height: 48px; padding: 0; gap: 0; border-radius: 999px; justify-content: center; color: inherit; transition: background .25s var(--ease), transform .2s var(--ease); }
  .nav .links a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav .links a [data-ic] { font-size: 25px; }
  .nav .links a [data-ic] svg { stroke-width: 1.9; }
  .nav .links a.on { background: rgba(255, 255, 255, .16); color: inherit; }
  :root[data-theme=light] .nav .links a.on { background: rgba(0, 0, 0, .08); }
  .nav .links a.on [data-ic] svg { stroke-width: 2.3; }
  .nav .links a:active { transform: scale(.9); }
  .nav .links a .nbadge { top: 5px; right: calc(50% - 22px); }
  .nav .links a .ndot { top: 10px; right: calc(50% - 16px); }
  body[data-page=chat]:has(.chat.open) .nav, body.chat-open[data-page=chat] .nav { transform: translateY(calc(100% + 40px)); }
}

/* Explore's top: + on the left, the name in the middle (a menu), search and the heart on the right */
.ex-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ex-top > #explore-new { justify-self: start; }
.ex-right { justify-self: end; display: flex; gap: 2px; }
.ex-brand { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 12px; color: var(--ink); }
.ex-brand b { font-size: 25px; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(90deg, #f58529, #dd2a7b 45%, #8134af 75%, #515bd4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ex-brand [data-ic] { display: grid; font-size: 15px; transform: rotate(90deg); color: var(--ink-2); transition: transform .2s; }
.ex-brand:active { transform: scale(.96); }
.ex-menu { position: absolute; top: calc(100% + 6px); left: 50%; z-index: 40; min-width: 210px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3); transform: translateX(-50%); animation: rise .2s var(--ease); }
.ex-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 11px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.ex-menu button:hover { background: var(--raised); }
.ex-menu .ic { display: grid; font-size: 20px; }
.ex-search { display: none; }
.ex-search.open { display: flex; margin: 0 0 12px; animation: rise .2s var(--ease); }
@media (max-width: 760px) { .ex-search.open { margin: 0 12px 12px; } }

/* a video in the feed: as tall as a reel, the name and the sound over it, a line at the bottom to drag */
.fc-video .fc-media { width: 100%; max-height: calc(100dvh - 200px); }
.fc-video .fc-head { position: absolute; z-index: 3; top: 0; left: 0; right: 0; padding: 10px 6px 30px 12px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); color: #fff; cursor: default; }
.fc-video .fc-head b, .fc-video .fc-head small, .fc-video .fc-head .fc-tune, .fc-video .fc-head .icon-btn { color: #fff !important; }
.fc-video .fc-head small { opacity: .9; }
.fc-video .fc-head .t { text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.fc-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 74px; height: 74px; color: #fff; fill: rgba(255, 255, 255, .92); stroke: none; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .2s, transform .25s var(--ease); filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .45)); }
.fc-media.paused .fc-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fc-seek { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 20px; cursor: pointer; touch-action: none; }
.fc-seek::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .28); transition: height .15s; }
.fc-seek i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #fff; transition: width .25s linear, height .15s; }
.fc-seek.drag i { transition: height .15s; }
.fc-seek:hover::before, .fc-seek:hover i, .fc-seek.drag::before, .fc-seek.drag i { height: 6px; }
.fc-video .fc-sound { bottom: 22px; }
.fc-video .reel-mark { display: none; }

/* ================= The studio, as Instagram's: tools along the bottom, Next, and the last step ================= */
.studio [hidden] { display: none !important; }
.studio .st-edit { justify-content: flex-start; gap: 10px; padding: 0 0 6px; }
.studio .st-frame { border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.st-bar .sbtn.off { opacity: .55; position: relative; }
.st-bar .sbtn.off::after { content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; }
.st-swatch-btn { position: absolute; z-index: 4; right: 10px; top: 10px; }
.st-fxrow { width: 100%; animation: rise .2s var(--ease); }
.st-toolrow { flex: none; width: 100%; max-width: 560px; display: flex; gap: 8px; justify-content: center; overflow-x: auto; padding: 4px 12px; scrollbar-width: none; margin-top: auto; }
.st-toolrow::-webkit-scrollbar { display: none; }
.st-t { flex: none; width: 66px; display: grid; justify-items: center; gap: 6px; color: #fff; transition: transform .15s; }
.st-t .ic2 { width: 56px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .06); transition: background .2s; }
.st-t .ic2 svg { width: 1em; height: 1em; }
.st-t .aa { font: 600 23px/1 system-ui, -apple-system, sans-serif; letter-spacing: -.02em; }
.st-t .cc { font: 800 12px/1 system-ui, sans-serif; padding: 4px 5px; border: 2px solid currentColor; border-radius: 5px; letter-spacing: .02em; }
.st-t small { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .88); }
.st-t:active { transform: scale(.92); }
.st-t.on .ic2 { background: rgba(0, 149, 246, .28); border-color: rgba(0, 149, 246, .6); }
.st-editfoot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
.st-nextbtn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px 0 22px; border-radius: 999px; background: #3a5cff; color: #fff; font-weight: 700; font-size: 16px;
  box-shadow: 0 10px 26px rgba(58, 92, 255, .4); transition: transform .15s, filter .2s; }
.st-nextbtn:hover { filter: brightness(1.08); } .st-nextbtn:active { transform: scale(.96); }
.st-nextbtn i { display: grid; font-size: 18px; }

/* voiceover */
.vo-sheet { align-items: center; text-align: center; padding: 0 20px calc(18px + env(safe-area-inset-bottom)); }
.vo-title { font-size: 17px; margin-top: 2px; }
.vo-status { font-size: 14px; color: rgba(255, 255, 255, .7); margin: 8px 0 4px; max-width: 320px; }
.vo-time { font-size: 30px; font-variant-numeric: tabular-nums; margin: 6px 0 10px; }
.vo-rec { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: radial-gradient(circle, #ff3040 58%, transparent 60%); transition: transform .2s; margin-bottom: 12px; }
.vo-rec.on { background: radial-gradient(circle, #ff3040 0 30%, transparent 31%); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.vo-sheet .fx-done { width: 100%; max-width: 360px; }

/* the last step */
.studio .sd { padding: 14px 16px 10px; }
.sd-card { position: relative; width: min(46vw, 210px); max-height: 44dvh; margin: 4px auto 18px; border-radius: 16px; overflow: hidden; background: #000; container-type: inline-size;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.sd-card > video, .sd-card > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sd-card .sd-cover { object-fit: cover; z-index: 1; }
.sd-chip { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); padding: 7px 14px; border-radius: 10px; background: rgba(28, 28, 30, .78); color: #fff; font-size: 13.5px; font-weight: 700;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; }
.sd-chip.top { top: 10px; } .sd-chip.bottom { bottom: 10px; }
.sd-caption { width: 100%; border: 0; outline: none; resize: none; background: none; color: var(--ink); font: inherit; font-size: 16.5px; line-height: 1.5; padding: 4px 2px 10px; }
.sd-caption::placeholder { color: var(--muted); }
.sd-chips { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sd-chips button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 10px; background: var(--raised); color: var(--ink); font-weight: 700; font-size: 14px; }
.sd-chips .k { font-weight: 800; }
.sd-rows { display: grid; }
.sd-row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 8px 2px; text-align: left; color: var(--ink); font-size: 16px; }
.sd-row > .ic { display: grid; font-size: 23px; color: var(--ink); flex: none; }
.sd-row .l { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sd-row .l small { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.sd-row .v { color: var(--muted); font-size: 14.5px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-row > .ic:last-child { font-size: 17px; color: var(--muted); }
.sd-place input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--ink); font: inherit; font-size: 16px; }
.sd-place .suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 4; }
.sd-gap { height: 8px; margin: 6px -16px; background: var(--raised); opacity: .7; }
.sd-switch input { position: absolute; opacity: 0; pointer-events: none; }
.sd-switch .sw { flex: none; width: 50px; height: 30px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; }
.sd-switch .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .22s var(--ease); }
.sd-switch input:checked + .sw { background: #3a5cff; }
.sd-switch input:checked + .sw::after { transform: translateX(20px); }
.sd-foot { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.sd-draft { height: 48px; border-radius: 12px; background: var(--raised); color: var(--ink); font-weight: 700; font-size: 16px; }
.sd-foot .st-share { background: #3a5cff; }

/* the settings sheets */
.sd-sheet { color: var(--ink); }
.sd-sheet-title { display: block; text-align: center; font-size: 16px; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.sd-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 16px 16px; }
.sd-radio, .sd-opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.sd-radio > .ic, .sd-opt > .ic { display: grid; font-size: 24px; flex: none; }
.sd-radio .t, .sd-opt .t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sd-radio .t small, .sd-opt .t small { color: var(--muted); font-size: 13px; }
.sd-radio input { position: absolute; opacity: 0; }
.sd-radio .dot { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--muted); transition: border .2s; }
.sd-radio input:checked + .dot { border: 7px solid #3a5cff; }
.sd-opt { flex-wrap: wrap; }
.sd-opt input[type=datetime-local] { flex: 1 1 100%; margin-left: 38px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: inherit; font-size: 16px; padding: 0 10px; color-scheme: dark light; }
.sd-clear { margin-left: 38px; padding: 6px 12px; border-radius: 8px; background: var(--raised); color: var(--ink); font-weight: 700; font-size: 13px; }
.sd-people { display: grid; padding-top: 4px; }
.sd-person { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-radius: 12px; text-align: left; color: var(--ink); }
.sd-person .t { flex: 1; min-width: 0; display: grid; }
.sd-person .t small { color: var(--muted); }
.sd-person .tick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--muted); transition: all .2s; }
.sd-person.on .tick { border-color: #3a5cff; background: #3a5cff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 15px no-repeat; }
.sd-covervid { display: block; width: auto; max-width: 100%; height: 34dvh; margin: 6px auto 10px; border-radius: 14px; background: #000; }
.sd-sheet input[type=range] { margin: 6px 0 14px; }
.sd-gallery { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border-radius: 12px; background: var(--raised); color: var(--ink); font-weight: 700; margin-bottom: 8px; }
.sd-sheet .fx-done { width: 100%; margin: 4px 0 0; background: #3a5cff; color: #fff; }
.sd-drafts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 6px; }
.sd-draft-cell { position: relative; }
.sd-draft-cell .pic { width: 100%; aspect-ratio: 9 / 16; border-radius: 10px; background: #222 center / cover; display: flex; align-items: flex-end; padding: 6px; }
.sd-draft-cell .pic small { padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11.5px; font-weight: 700; }
.sd-draft-cell .del { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .6); color: #fff; font-size: 15px; }
.st-drafts { margin-top: 2px; }

/* preview */
.sd-preview { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: #000; animation: fade .2s var(--ease); }
.sd-pstage { position: relative; width: min(100%, (100dvh - 40px) * .5625); max-height: 100%; overflow: hidden; background: #000; container-type: inline-size; }
.sd-preview:not(.reel) .sd-pstage { width: min(100% - 16px, 560px); }
.sd-pstage > video, .sd-pstage > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sd-pinfo { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 40px 14px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); color: #fff; display: grid; gap: 6px; }
.sd-pinfo .who { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sd-pinfo .who b { color: #fff; }
.sd-pinfo p { margin: 0; font-size: 14px; line-height: 1.45; }
.sd-pinfo small { font-size: 12.5px; opacity: .85; }
.sd-px { position: absolute; z-index: 4; top: calc(12px + env(safe-area-inset-top)); left: 12px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: #fff; font-size: 20px; }

.post-tags { margin: 4px 0 8px; font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.cmt-off { width: 100%; padding: 12px; text-align: center; color: var(--muted); font-size: 14px; }
.st-toolrow { justify-content: flex-start; gap: 6px; }
.st-toolrow > :first-child { margin-left: auto; } .st-toolrow > :last-child { margin-right: auto; }
@media (max-width: 420px) { .st-t { width: 57px; } .st-t .ic2 { width: 52px; height: 48px; } .st-t small { font-size: 11.5px; } }
.sd-pinfo .who b, .sd-pinfo .who span { color: #fff !important; }

/* ================= Live ================= */
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ff3040; box-shadow: 0 0 0 0 rgba(255, 48, 64, .6); animation: livepulse 1.6s infinite; flex: none; }
.live-dot.big { width: 18px; height: 18px; }
@keyframes livepulse { 70% { box-shadow: 0 0 0 9px rgba(255, 48, 64, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 48, 64, 0); } }
.ex-live-tab { display: inline-flex; align-items: center; gap: 7px; }
.lv-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; background: linear-gradient(135deg, #ff3040, #e1306c); color: #fff; font: 800 12px/1.2 system-ui, sans-serif; letter-spacing: .06em; }
.lv-count { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 12.5px; font-weight: 700; }
.lv-count svg, .lv-count .ic { width: 14px; height: 14px; display: grid; fill: none; stroke: currentColor; stroke-width: 2; }

/* the room */
.live-room { position: fixed; inset: 0; z-index: 3200; background: #000; color: #fff; overflow: hidden; animation: fade .25s var(--ease); }
.lv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.lv-video.mirror { transform: scaleX(-1); }
@media (min-width: 761px) { .lv-video { object-fit: contain; } }
.lv-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .45), transparent 22%, transparent 58%, rgba(0, 0, 0, .6)); }
.lv-top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(12px + env(safe-area-inset-top)) 12px 0; }
.lv-left, .lv-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lv-who { display: flex; align-items: center; gap: 8px; min-width: 0; color: #fff; font-weight: 700; }
.lv-who b, .lv-who span { color: #fff !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; }
.lv-timer { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .45); }
.lv-icon { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff; background: rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .15s; }
.lv-icon svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lv-icon:active { transform: scale(.9); }
.lv-icon.off { background: #ff3040; }
.lv-caption { position: absolute; z-index: 3; left: 12px; right: 12px; top: calc(64px + env(safe-area-inset-top)); font-size: 14px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.lv-comments { position: absolute; z-index: 3; left: 12px; right: 78px; bottom: calc(76px + env(safe-area-inset-bottom)); max-height: 38%; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
.lv-comments::-webkit-scrollbar { display: none; }
.lv-c { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); animation: rise .25s var(--ease); }
.lv-c b { margin-right: 4px; }
.lv-bottom { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
.lv-form { flex: 1; min-width: 0; }
.lv-form input { width: 100%; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .25); color: #fff; font: inherit; font-size: 16px; outline: none; }
.lv-form input::placeholder { color: rgba(255, 255, 255, .75); }
.lv-like { background: none; font-size: 27px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lv-heart { position: absolute; z-index: 5; right: 22px; bottom: calc(70px + env(safe-area-inset-bottom)); font-style: normal; font-size: 30px; pointer-events: none; animation: lvfloat 2.6s ease-out forwards; }
@keyframes lvfloat { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translate(0, -20px) scale(1.1); } 100% { transform: translate(var(--dx), -320px) scale(.9); opacity: 0; } }
.lv-status { position: absolute; z-index: 4; left: 50%; top: 46%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 14px; background: rgba(0, 0, 0, .6); font-weight: 700; text-align: center; }
.lv-status.end { display: grid; gap: 12px; justify-items: center; padding: 22px 26px; font-size: 18px; }
.lv-unmute { position: absolute; z-index: 4; left: 50%; top: 55%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; color: #000; font-weight: 700; }
.live-room [hidden] { display: none !important; }

/* before going live */
.lv-setup { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: grid; gap: 12px; justify-items: center; padding: 20px 18px calc(26px + env(safe-area-inset-bottom)); }
.lv-title { width: min(100%, 460px); height: 48px; padding: 0 16px; border-radius: 14px; border: 0; background: rgba(0, 0, 0, .45); color: #fff; font: inherit; font-size: 16px; text-align: center; outline: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lv-title::placeholder { color: rgba(255, 255, 255, .75); }
.lv-start { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: 999px; background: linear-gradient(135deg, #ff3040, #e1306c 60%, #833ab4);
  color: #fff; font-weight: 800; font-size: 16.5px; box-shadow: 0 12px 30px rgba(225, 48, 108, .45); transition: transform .15s; }
.lv-start .live-dot { background: #fff; }
.lv-start:active { transform: scale(.96); }
.lv-start:disabled { opacity: .5; }
.lv-start.small { height: 40px; padding: 0 16px; font-size: 14.5px; }
.lv-note { color: rgba(255, 255, 255, .8); font-size: 12.5px; text-align: center; max-width: 340px; }

/* the Live tab */
.live-hub { position: fixed; inset: 0; z-index: 3100; display: flex; flex-direction: column; background: #0b0b0d; color: #fff; animation: fade .25s var(--ease); }
.lh-top { flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 12px 12px; }
.lh-top b { font-size: 20px; text-align: center; }
.lh-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; padding: 4px 8px calc(20px + env(safe-area-inset-bottom)); align-content: start; }
.lh-card { position: relative; aspect-ratio: 9 / 14; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #3a1c71, #d76d77 60%, #ffaf7b); color: #fff; text-align: left; transition: transform .2s var(--ease); }
.lh-card:active { transform: scale(.97); }
.lh-card .bg { position: absolute; inset: -10%; background: center / cover; filter: blur(18px) brightness(.7); }
.lh-card .face { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 4px; border-radius: 50%; background: linear-gradient(135deg, #ff3040, #e1306c); animation: livepulse 1.8s infinite; }
.lh-card .face .avatar { width: 74px; height: 74px; font-size: 28px; border: 3px solid #0b0b0d; }
.lh-card .tags { position: absolute; left: 8px; top: 8px; display: flex; gap: 6px; }
.lh-card .meta { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 26px 10px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.lh-card .meta b, .lh-card .meta span { color: #fff !important; font-size: 14px; }
.lh-card .meta small { color: rgba(255, 255, 255, .85); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-none { grid-column: 1 / -1; display: grid; justify-items: center; gap: 12px; padding: 70px 20px; text-align: center; }
.lh-none b { font-size: 19px; } .lh-none span { color: rgba(255, 255, 255, .7); max-width: 320px; }

/* in the feed */
.fc-live { padding-bottom: 10px; }
.fc-live .fc-head { gap: 10px; }
.fl-row { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px; scrollbar-width: none; }
.fl-row::-webkit-scrollbar { display: none; }
.fl-row .lh-card { flex: none; width: 150px; }
.aud-head { display: flex; align-items: center; gap: 14px; padding: 6px 0 4px; }
.aud-art { flex: none; width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; color: #fff; background: linear-gradient(135deg, #833ab4, #e1306c 55%, #f58529) center / cover; }
.aud-art svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.aud-head .t { display: grid; gap: 3px; min-width: 0; }
.aud-head .t b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-head .t small { color: var(--muted); }
.fc-tune { cursor: pointer; }

/* my bubbles: one gradient down the screen, without background-attachment: fixed (iPhones paint that wrong) */
.chat-thread { --mb: linear-gradient(180deg, #a033ff 0%, #6c4bf6 45%, #3478f6 100%); }
.chat-thread[data-theme=green]  { --mb: linear-gradient(180deg, #34c759 0%, #10b3a3 55%, #0a8f62 100%); }
.chat-thread[data-theme=ocean]  { --mb: linear-gradient(180deg, #33b6ff 0%, #0a84ff 100%); }
.chat-thread[data-theme=sunset] { --mb: linear-gradient(180deg, #ff9500 0%, #ff3b6b 100%); }
.chat-thread[data-theme=berry]  { --mb: linear-gradient(180deg, #d6249f 0%, #7a3cff 100%); }
.chat-thread[data-theme=forest] { --mb: linear-gradient(180deg, #34c759 0%, #0f9d58 100%); }
.chat-thread[data-theme=grape]  { --mb: linear-gradient(180deg, #af52de 0%, #5856d6 100%); }
.chat-thread .me .bubble:not(.emoji):not(.media):not(.gone) { background: var(--mb); background-size: 100% var(--ch, 640px); background-repeat: no-repeat; background-color: var(--mt); }
.chat-msgs { -webkit-overflow-scrolling: auto; }
.quote { margin-bottom: -6px; padding-bottom: 12px; }
.mcol > .bubble { position: relative; z-index: 1; }

/* ================= Stream: lives one per screen, swiped like reels ================= */
.live-hub { background: #000; }
.live-hub .lh-top { position: absolute; z-index: 6; left: 0; right: 0; top: 0; padding: calc(12px + env(safe-area-inset-top)) 12px 18px; background: linear-gradient(rgba(0, 0, 0, .6), transparent); }
.lh-title { display: flex; align-items: center; justify-content: center; gap: 9px; }
.lh-title b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.lv-start svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lh-pager { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.lh-pager::-webkit-scrollbar { display: none; }
.sp-page { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.sp-stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0b0b0d; }
@media (min-width: 761px) {
  .sp-page { display: grid; place-items: center; padding: 14px 0; }
  .sp-stage { width: calc((100dvh - 28px) * .5625); height: calc(100dvh - 28px); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
}
.sp-cover { position: absolute; inset: -12%; background: linear-gradient(160deg, #3a1c71, #d76d77 60%, #ffaf7b) center / cover; filter: blur(34px) brightness(.55) saturate(1.3); }
.sp-face { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); padding: 5px; border-radius: 50%; background: conic-gradient(#ff3040, #e1306c, #833ab4, #ff3040); animation: livepulse 1.8s infinite; }
.sp-face .avatar { width: 108px; height: 108px; font-size: 40px; border: 4px solid #0b0b0d; }
.live-room.embedded { position: absolute; inset: 0; z-index: 2; background: transparent; animation: none; }
.live-room.embedded .lv-video { background: transparent; }
.live-room.embedded .lv-top { padding-top: calc(66px + env(safe-area-inset-top)); }
.live-room.embedded .lv-caption { top: calc(118px + env(safe-area-inset-top)); }
@media (min-width: 761px) { .live-room.embedded .lv-video { object-fit: cover; } }
/* nobody streaming */
.sp-empty { display: grid; place-items: center; background: radial-gradient(120% 80% at 50% 0%, #1a1030, #000 70%); }
.sp-empty .orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: orb 14s ease-in-out infinite alternate; }
.sp-empty .o1 { width: 320px; height: 320px; background: #e1306c; left: -80px; top: 12%; }
.sp-empty .o2 { width: 280px; height: 280px; background: #833ab4; right: -90px; top: 40%; animation-delay: -5s; }
.sp-empty .o3 { width: 240px; height: 240px; background: #f58529; left: 20%; bottom: -60px; animation-delay: -9s; }
@keyframes orb { to { transform: translate(40px, -50px) scale(1.15); } }
.sp-empty-in { position: relative; display: grid; justify-items: center; gap: 14px; padding: 24px; text-align: center; max-width: 380px; }
.sp-mark { width: 92px; height: 92px; border-radius: 28px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.sp-empty-in b { font-size: 22px; letter-spacing: -.01em; }
.sp-empty-in > span { color: rgba(255, 255, 255, .72); line-height: 1.5; }
@media (max-width: 760px) {
  .nav { transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
  body.nav-away .nav { transform: translateY(calc(100% + 34px)); opacity: .0; pointer-events: none; }
}
/* phones: a tapped message keeps :hover, which showed stray times beside bubbles */
@media (hover: none) { .msg:hover .meta { opacity: 0; } .msg:last-of-type .meta { opacity: 1; } }
html { overscroll-behavior-x: none; }
.live-room.embedded .lv-status { top: 64%; }

/* Stream, in the app's own black and white (as the Reels tab), the red kept for the LIVE badge only */
.lh-title { color: #fff; }
.lh-ic { display: grid; font-size: 24px; }
.lh-ic svg, .sp-mark svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.live-hub .lv-start, .sp-empty .lv-start, .lv-setup .lv-start { background: #fff; color: #000; box-shadow: 0 10px 30px rgba(255, 255, 255, .14); }
.live-hub .lh-top .lv-start.small { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lv-setup .lv-start .live-dot { background: #ff3040; }
.sp-empty { background: radial-gradient(120% 80% at 50% 0%, #1c1c22, #000 70%); }
.sp-empty .orb { opacity: .22; }
.sp-empty .o1 { background: #8e8e93; } .sp-empty .o2 { background: #5e5ce6; } .sp-empty .o3 { background: #636366; }
.sp-mark { font-size: 40px; color: #fff; }
/* the + at the top has no box behind it, like the icons beside it */
#explore-new, .ex-right .ex-icon { background: none !important; box-shadow: none !important; }

/* ================= a post of several photos ================= */
.fc-media.multi { overflow: hidden; }
.fc-car { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.fc-car::-webkit-scrollbar { display: none; }
.fc-car img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; scroll-snap-stop: always; user-select: none; -webkit-user-drag: none; }
.post-media.multi { position: relative; width: 100%; aspect-ratio: 4 / 5; background: #000; overflow: hidden; }
.post-media.multi .fc-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); }
.fc-count { position: absolute; z-index: 3; top: 12px; right: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(18, 18, 18, .72); color: #fff; font-size: 12.5px; font-weight: 700;
  opacity: 0; transition: opacity .3s; pointer-events: none; }
.fc-count.show { opacity: 1; }
.fc-bar { position: relative; }
.fc-dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 4px; pointer-events: none; }
.fc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .45; transition: background .2s, opacity .2s, transform .2s; }
.fc-dots i.on { background: #0095f6; opacity: 1; transform: scale(1.1); }
.fc-arrow { position: absolute; z-index: 3; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .85); color: #111; font-size: 15px;
  opacity: 0; transition: opacity .2s; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.fc-arrow svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fc-arrow.l { left: 10px; } .fc-arrow.l svg { transform: rotate(180deg); } .fc-arrow.r { right: 10px; }
@media (hover: hover) { .fc-media.multi:hover .fc-arrow, .post-media.multi:hover .fc-arrow { opacity: 1; } }
.tile-post .multi { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
/* the studio's row of photos */
.st-items { flex: none; display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 2px 12px; scrollbar-width: none; }
.st-items::-webkit-scrollbar { display: none; }
.st-items > :first-child { margin-left: auto; } .st-items > :last-child { margin-right: auto; }
.st-item { position: relative; flex: none; width: 50px; height: 62px; border-radius: 10px; background: #222 center / cover; border: 2px solid transparent; transition: border-color .2s, transform .15s; }
.st-item.on { border-color: #fff; }
.st-item small { position: absolute; left: 4px; bottom: 3px; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.st-item .del { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #ff3040; color: #fff; font-size: 11px; }
.st-item .del svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 3; }
.st-item.add { display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1.5px dashed rgba(255, 255, 255, .4); color: #fff; font-size: 20px; }
.st-item.add svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; }
.sd-count { position: absolute; z-index: 3; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(18, 18, 18, .75); color: #fff; font-size: 12px; font-weight: 700; }
.sd-card .sd-chip.top { left: 10px; transform: none; }
.studio .st-edit > .st-fxrow, .studio .st-edit > .st-items { flex: none; }
.fc-car .slide { position: relative; flex: none; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; }
.fc-car .slide > img, .fc-car .slide > video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.st-item.vid::after { content: ''; position: absolute; right: 5px; top: 5px; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }

/* phones: Explore's top bar stays at the top while the feed scrolls under it (sticky is unreliable on iPhones) */
@media (max-width: 760px) {
  #page-explore .ex-top { position: fixed; z-index: 900; top: 0; left: 0; right: 0; margin: 0; border-radius: 0; padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
    background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); }
  #page-explore .explore { padding-top: calc(70px + env(safe-area-inset-top)); }
  body.reels-open #page-explore .ex-top, body.studio-open #page-explore .ex-top { visibility: hidden; }
}

/* ================= Transport: bus · train · launch ================= */
.tx { max-width: 980px; }
.tx-head h2 { letter-spacing: -.035em; }
.tseg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: min(100%, 460px); padding: 4px; margin: 6px 0 30px; border-radius: 16px;
  background: color-mix(in srgb, var(--raised) 85%, transparent); border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); isolation: isolate; }
.tseg-pill { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; border-radius: 12px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 6px 18px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .5s cubic-bezier(.32, .72, 0, 1), width .5s cubic-bezier(.32, .72, 0, 1); }
:root[data-theme=light] .tseg-pill { background: #fff; }
.tseg.still .tseg-pill { transition: none; }
.tseg button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 12px; font-size: 15.5px; font-weight: 700; color: var(--muted); letter-spacing: -.01em;
  transition: color .3s, transform .15s; }
.tseg button [data-ic] { display: grid; font-size: 21px; transition: transform .45s cubic-bezier(.32, .72, 0, 1); }
.tseg button [data-ic] svg { stroke-width: 1.8; }
.tseg button[aria-selected=true] { color: var(--ink); }
.tseg button[aria-selected=true] [data-ic] { transform: scale(1.08); }
.tseg button:active { transform: scale(.96); }
.tx-pane.in { animation: txin .5s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes txin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tx-pane.in { animation: none; } .tseg-pill { transition: none; } }
.tx-sub { margin: 0 0 16px; }
.tx-sub h3 { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.tx-sub p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.tx #train-list, .tx #train-updated { max-width: none !important; }
.tx-find { max-width: 520px; margin-bottom: 16px; }

/* a launch */
.lx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.lx-card { padding: 16px 16px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transition: transform .35s cubic-bezier(.32, .72, 0, 1), box-shadow .35s, border-color .3s; animation: txin .5s cubic-bezier(.32, .72, 0, 1) both; }
.lx-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .18); }
.lx-card[hidden] { display: none; }
.lx-top { display: flex; align-items: center; gap: 14px; }
.lx-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; color: #fff;
  background: linear-gradient(145deg, #2f80ed, #0a5bd3); box-shadow: 0 8px 18px rgba(10, 91, 211, .32), inset 0 1px 0 rgba(255, 255, 255, .25); }
.lx-ic svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lx-route { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lx-route small { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.lx-route b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.lx-fare { flex: none; text-align: right; display: grid; gap: 1px; }
.lx-fare small { font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.lx-fare b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lx-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 2px; font-size: 14px; color: var(--ink-2); }
.lx-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.lx-meta .ic { display: grid; font-size: 16px; color: var(--muted); }
.lx-note { margin-top: 8px; font-size: 13px; color: var(--muted); }
.lx-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 10px 6px 0; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.lx-more .ic { display: grid; font-size: 14px; transform: rotate(90deg); transition: transform .35s cubic-bezier(.32, .72, 0, 1); }
.lx-card.open .lx-more .ic { transform: rotate(-90deg); }
.lx-vessels { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; animation: txin .35s cubic-bezier(.32, .72, 0, 1) both; }
.lx-vessels[hidden] { display: none; }
@media (max-width: 760px) {
  .tseg { width: 100%; margin-bottom: 24px; }
  .tseg button { height: 44px; font-size: 15px; }
  .lx-route b, .lx-fare b { font-size: 16.5px; }
}
.tseg-pill { background: color-mix(in srgb, var(--ink) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
:root[data-theme=light] .tseg-pill { background: #fff; border-color: rgba(0, 0, 0, .06); }
.tx #train-note { display: block; width: auto; max-width: none; white-space: normal; margin: 14px 2px 0; }
.dx-link { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 560px; margin: 0 0 22px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-align: left; color: var(--ink); transition: transform .3s cubic-bezier(.32, .72, 0, 1), box-shadow .3s; }
.dx-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.dx-link .mi { flex: none; }
.dx-link span { flex: 1; display: grid; gap: 2px; } .dx-link em { font-style: normal; color: var(--muted); font-size: 13.5px; }
.dx-link [data-ic=chev] { color: var(--muted); }

/* ================= Transport, designed: one type scale, one curve, a colour per way of travel ================= */
.tx { --spring: cubic-bezier(.32, .72, 0, 1); --c-bus: #30d158; --c-bus2: #0a9f6e; --c-train: #0a84ff; --c-train2: #0060df; --c-launch: #5e5ce6; --c-launch2: #3634a3;
  --tx-card: color-mix(in srgb, var(--surface) 92%, transparent); --tx-line: color-mix(in srgb, var(--ink) 9%, transparent); max-width: 1000px; }
:root[data-theme=light] .tx { --tx-card: #fff; }

/* the opening */
.tx-hero { margin: 8px 0 26px; animation: txin .7s var(--spring) both; }
.tx-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 7%, transparent); border: 1px solid var(--tx-line); }
.tx-eyebrow [data-ic] { display: grid; font-size: 15px; color: var(--accent); }
.tx-hero h2 { margin: 16px 0 8px; font-size: clamp(36px, 6vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -.045em; }
.tx-hero p { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.5; color: var(--muted); }

/* the three ways, as tiles */
.tmode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 34px; }
.tmode button { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border-radius: 22px; text-align: left; color: var(--ink);
  background: var(--tx-card); border: 1px solid var(--tx-line); transition: transform .45s var(--spring), border-color .3s, box-shadow .45s var(--spring), background .3s; animation: txin .7s var(--spring) both; }
.tmode button:nth-child(2) { animation-delay: .05s; } .tmode button:nth-child(3) { animation-delay: .1s; }
.tmode button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .16); }
.tmode button:active { transform: scale(.97); }
.tmode .mi2 { flex: none; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 25px; color: #fff;
  box-shadow: 0 8px 18px var(--sh), inset 0 1px 0 rgba(255, 255, 255, .28); transition: transform .45s var(--spring); }
.tmode .mi2 svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tmode .m-bus .mi2 { background: linear-gradient(145deg, var(--c-bus), var(--c-bus2)); --sh: rgba(10, 159, 110, .32); }
.tmode .m-train .mi2 { background: linear-gradient(145deg, var(--c-train), var(--c-train2)); --sh: rgba(0, 96, 223, .32); }
.tmode .m-launch .mi2 { background: linear-gradient(145deg, var(--c-launch), var(--c-launch2)); --sh: rgba(54, 52, 163, .34); }
.tmode .mt { display: grid; gap: 2px; min-width: 0; }
.tmode .mt b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.tmode .mt small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmode button[aria-selected=true] { border-color: transparent; box-shadow: 0 0 0 2px var(--tint), 0 14px 34px color-mix(in srgb, var(--tint) 22%, transparent);
  background: color-mix(in srgb, var(--tint) 9%, var(--tx-card)); }
.tmode button[aria-selected=true] .mi2 { transform: scale(1.06); }
.tmode .m-bus { --tint: var(--c-bus); } .tmode .m-train { --tint: var(--c-train); } .tmode .m-launch { --tint: var(--c-launch); }
@media (max-width: 760px) {
  .tmode { gap: 8px; margin-bottom: 26px; }
  .tmode button { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 18px; }
  .tmode .mi2 { width: 40px; height: 40px; border-radius: 12px; font-size: 21px; }
  .tmode .mt b { font-size: 16px; }
  .tmode .mt small { font-size: 11.5px; white-space: normal; line-height: 1.3; }
  .tx-hero p { font-size: 15.5px; }
}

/* a section inside a mode */
.tx-sub { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; }
.tx-sub h3 { font-size: 21px; letter-spacing: -.03em; }
.tx-source { margin: 26px 2px 0; padding-top: 14px; border-top: 1px solid var(--tx-line); font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.tx .foot { font-size: 12.5px; color: var(--muted); }

/* the planner: from, to, swap */
.tx-plan { position: relative; display: grid; gap: 0; max-width: 620px; padding: 6px; border-radius: 24px; background: var(--tx-card); border: 1px solid var(--tx-line); box-shadow: var(--shadow-1); margin-bottom: 18px; }
.tp-field { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 64px 12px 16px; border-radius: 18px; cursor: pointer; transition: background .25s; }
.tp-field:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.tp-field + .tp-field::before { content: ''; position: absolute; left: 46px; right: 64px; top: 0; height: 1px; background: var(--tx-line); }
.tp-dot { position: relative; z-index: 1; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--c-bus); background: var(--tx-card); }
.tp-dot.b { border-radius: 4px; background: var(--ink); border-color: var(--ink); }
.tp-line { position: absolute; left: 27.5px; top: 40px; bottom: 40px; width: 2px; border-radius: 2px; background: repeating-linear-gradient(var(--muted) 0 3px, transparent 3px 7px); opacity: .5; }
.tp-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tp-t small { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.tp-t select { width: 100%; border: 0; padding: 0; margin: 0; background: none; color: var(--ink); font: inherit; font-size: 18px; font-weight: 800; letter-spacing: -.02em; appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; }
.tp-t select option, .tp-t select optgroup { background: var(--surface); color: var(--ink); }
.tp-chev { display: none; }
.tp-swap { position: absolute; right: 16px; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: var(--ink);
  background: var(--raised); border: 1px solid var(--tx-line); box-shadow: 0 4px 14px rgba(0, 0, 0, .14); transition: transform .5s var(--spring), background .2s; }
.tp-swap:hover { background: color-mix(in srgb, var(--ink) 10%, var(--raised)); }
.tp-swap.spin { transform: rotate(180deg); }
.tp-swap svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the bus result */
.tx #ic-result { border-radius: 26px; padding: 22px; background: var(--tx-card); border: 1px solid var(--tx-line); box-shadow: var(--shadow-1); }
.tx #ic-result .head { margin-bottom: 18px; }
.rx-route { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: clamp(26px, 4.4vw, 36px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.rx-arrow { display: grid; font-size: .7em; color: var(--muted); }
.rx-arrow svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rx-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rx-facts > span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.rx-facts .ic { display: grid; font-size: 15px; color: var(--muted); }
.tx #ic-result .tiles { gap: 10px; }
.tx #ic-result .tile { border-radius: 20px; padding: 16px 18px; border: 1px solid var(--tx-line); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.tx #ic-result .tile > span:first-child { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.tx #ic-result .tile b { display: block; margin: 6px 0 4px; font-size: 30px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.tx #ic-result .tile > span:last-child { font-size: 12.5px; color: var(--muted); }
.tx #ic-result .tile.main { background: linear-gradient(150deg, color-mix(in srgb, var(--c-bus) 22%, transparent), color-mix(in srgb, var(--c-bus2) 10%, transparent)); border-color: color-mix(in srgb, var(--c-bus) 35%, transparent); }
.tx #ic-result .tile.main b { color: var(--c-bus); }
:root[data-theme=light] .tx #ic-result .tile.main b { color: var(--c-bus2); }
.tx #ic-result > .item { margin-top: 10px; border-radius: 18px; border: 1px solid var(--tx-line); background: none; }
.tx #ic-result > .label { margin: 22px 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.tx #ic-result .chips { gap: 8px; }
.tx #ic-result .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 999px; font-weight: 700; font-size: 14px; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--tx-line); }
.tx #ic-result .chip[data-i]::before { content: attr(data-i); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(145deg, var(--c-bus), var(--c-bus2)); }
.tx #ic-result .chip small { color: var(--muted); font-weight: 600; }
.tx #ic-result .actions { margin-top: 20px; }

/* bus companies */
.tx #op-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.tx #op-grid .op-card { border-radius: 20px; background: var(--tx-card); border: 1px solid var(--tx-line); transition: transform .45s var(--spring), box-shadow .45s var(--spring); }
.tx #op-grid .op-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .15); }

/* trains: the times either side of a line with the journey time on it */
.tx-od { max-width: 620px; padding: 6px !important; border-radius: 24px !important; background: var(--tx-card) !important; border: 1px solid var(--tx-line); box-shadow: var(--shadow-1); }
.tx-od .od .dots .a { background: var(--c-train) !important; }
.tx #train-note { font-size: 13px; font-weight: 700; color: var(--muted); margin: 20px 2px 10px; }
.tx #train-list { display: grid; gap: 8px; margin-top: 0 !important; }
.trow { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(0, 1.4fr) auto; align-items: center; gap: 18px; width: 100%; padding: 16px 18px; border-radius: 20px; text-align: left; color: var(--ink);
  background: var(--tx-card); border: 1px solid var(--tx-line); transition: transform .45s var(--spring), box-shadow .45s var(--spring), border-color .3s; }
.trow:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .15); border-color: color-mix(in srgb, var(--c-train) 35%, transparent); }
.trow:active { transform: scale(.99); }
.tr-times { display: flex; align-items: center; gap: 10px; }
.tr-times b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tr-line { position: relative; flex: 1; min-width: 60px; display: flex; align-items: center; height: 30px; }
.tr-line::before { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--tx-line); }
.tr-line i { position: relative; z-index: 1; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--c-train); background: var(--tx-card); }
.tr-line i:last-child { margin-left: auto; background: var(--c-train); }
.tr-line em { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tr-info { display: grid; gap: 2px; min-width: 0; }
.tr-info b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-info span { font-size: 13px; color: var(--muted); }
.tr-fare { display: grid; gap: 1px; text-align: right; }
.tr-fare small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.tr-fare b { font-size: 19px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .trow { grid-template-columns: 1fr auto; grid-template-areas: 'times fare' 'info info'; gap: 10px 14px; padding: 14px; }
  .tr-times { grid-area: times; } .tr-fare { grid-area: fare; } .tr-info { grid-area: info; }
  .tr-times b { font-size: 18px; }
}

/* launches: a boarding pass */
.lx-card { padding: 18px; border-radius: 24px; background: var(--tx-card); border: 1px solid var(--tx-line); transition: transform .45s var(--spring), box-shadow .45s var(--spring); }
.lx-card:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .18); }
.lx-ic { width: 44px; height: 44px; border-radius: 14px; font-size: 23px; background: linear-gradient(145deg, var(--c-launch), var(--c-launch2)); box-shadow: 0 8px 18px rgba(54, 52, 163, .34), inset 0 1px 0 rgba(255, 255, 255, .25); }
.lx-route small { display: none; }
.lx-pass { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 12px; margin: 16px 0 4px; padding: 14px 14px 12px; border-radius: 18px;
  background: color-mix(in srgb, var(--c-launch) 7%, transparent); border: 1px dashed color-mix(in srgb, var(--c-launch) 30%, transparent); }
.lx-end { display: grid; gap: 1px; }
.lx-end:last-child { text-align: right; }
.lx-end small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.lx-end b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.lx-track { position: relative; display: flex; align-items: center; gap: 0; height: 30px; margin-bottom: 2px; }
.lx-track .d { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-launch); }
.lx-track .ln { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-launch) 55%, transparent) 0 5px, transparent 5px 9px); }
.lx-boat { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 4px; border-radius: 50%; font-size: 17px; color: #fff; background: linear-gradient(145deg, var(--c-launch), var(--c-launch2)); }
.lx-boat svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lx-track em { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.lx-more { color: var(--c-launch); }
:root:not([data-theme=light]) .lx-more { color: #8e8cff; }

/* everything comes in one after another */
.tx-pane.in > * { animation: txin .6s var(--spring) both; }
.tx-pane.in > *:nth-child(2) { animation-delay: .04s; } .tx-pane.in > *:nth-child(3) { animation-delay: .08s; } .tx-pane.in > *:nth-child(4) { animation-delay: .12s; } .tx-pane.in > *:nth-child(n+5) { animation-delay: .16s; }
.tx-pane.in { animation: none; }
@media (prefers-reduced-motion: reduce) { .tx *, .tx-pane.in > * { animation: none !important; transition: none !important; } }
.tx-hero h2 { letter-spacing: -.022em; }
.rx-route { letter-spacing: -.025em; }
.tx-od .od { background: none !important; box-shadow: none !important; border: 0 !important; }
.tx-od .od input { font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
@media (max-width: 760px) { .rx-facts > span { font-size: 12.5px; padding: 5px 10px; } .tx #ic-result { padding: 16px; border-radius: 22px; } .tx #ic-result .tile b { font-size: 25px; } }
@media (max-width: 760px) {
  .tx #ic-result > .item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; }
  .tx #ic-result > .item .p { grid-column: 2; justify-self: start; font-size: 20px; }
}

/* ================= More: grouped like iOS Settings ================= */
.c-indigo { background: linear-gradient(135deg, #7d7aff, #4b48d6); }
#page-more .hub { --spring: cubic-bezier(.32, .72, 0, 1); --row-line: color-mix(in srgb, var(--ink) 8%, transparent); max-width: 680px; }
#page-more .hub-head h2 { font-size: clamp(34px, 6vw, 44px); font-weight: 800; letter-spacing: -.022em; line-height: 1.08; }
#page-more .hub-head p { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; }
/* the account */
#page-more .acct-card { position: relative; overflow: hidden; gap: 16px; padding: 18px 18px; margin: 4px 0 8px; border-radius: 24px; border: 1px solid var(--row-line);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, var(--shadow-1); transition: transform .45s var(--spring), box-shadow .45s var(--spring); }
#page-more .acct-card:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0, 0, 0, .16); }
#page-more .acct-card:active { transform: scale(.985); }
#page-more .acct-card .ic { width: 58px; height: 58px; padding: 2.5px; background: conic-gradient(from 210deg, #f58529, #dd2a7b, #8134af, #515bd4, #f58529); }
#page-more .acct-card .ic > *, #page-more .acct-card .ic .avatar { border-radius: 50%; border: 2.5px solid var(--surface); }
#page-more .acct-card .ic > i { width: 100%; height: 100%; display: grid; place-items: center; background: var(--accent); }
#page-more .acct-card b { font-size: 19px; letter-spacing: -.015em; }
/* the groups */
#page-more .hub .label { margin: 30px 18px 8px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
#page-more .menu { padding: 0; overflow: hidden; border-radius: 22px; border: 1px solid var(--row-line); background: var(--surface); box-shadow: var(--shadow-1); }
#page-more .menu > a, #page-more .menu > .row, #page-more .menu > button { position: relative; gap: 14px; min-height: 62px; padding: 11px 16px; border-radius: 0; transition: background .2s, transform .2s var(--spring); }
#page-more .menu > a + a::before, #page-more .menu > * + a::before, #page-more .menu > * + .row::before { content: ''; position: absolute; top: 0; left: 68px; right: 0; height: 1px; background: var(--row-line); }
#page-more .menu > a:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
#page-more .menu > a:active { transform: none; background: color-mix(in srgb, var(--ink) 8%, transparent); }
#page-more .mi { width: 38px; height: 38px; border-radius: 11px; font-size: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .28); }
#page-more .mi svg { stroke-width: 1.85; }
#page-more .menu b { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
#page-more .menu span em { font-size: 13.5px; margin-top: 1px; }
#page-more .menu .chev { font-size: 16px; opacity: .7; transition: transform .3s var(--spring); }
#page-more .menu > a:hover .chev { transform: translateX(2px); }
#page-more .hub-foot { margin-top: 34px; font-size: 12.5px; color: var(--muted); }
/* arriving: the account, then each group, one after another */
#page-more.on .hub > * { animation: txin .6s var(--spring) both; }
#page-more.on .hub > :nth-child(2) { animation-delay: .03s; } #page-more.on .hub > :nth-child(3) { animation-delay: .06s; } #page-more.on .hub > :nth-child(4) { animation-delay: .09s; }
#page-more.on .hub > :nth-child(5) { animation-delay: .12s; } #page-more.on .hub > :nth-child(6) { animation-delay: .15s; } #page-more.on .hub > :nth-child(7) { animation-delay: .18s; }
#page-more.on .hub > :nth-child(n+8) { animation-delay: .21s; }
@media (prefers-reduced-motion: reduce) { #page-more.on .hub > * { animation: none; } }
/* the fare-report kinds carry their icon */
#give-modes .chip { display: inline-flex; align-items: center; gap: 7px; }
#give-modes .chip .ic { display: grid; font-size: 16px; }

/* ================= নগরপথ: local buses and reporting a fare ================= */
.tmode.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; }
.tmode .m-city { --tint: #14b8a6; } .tmode .m-city .mi2 { background: linear-gradient(145deg, #2dd4bf, #0d9488); --sh: rgba(13, 148, 136, .34); }
.tmode .m-fare { --tint: #f5a524; } .tmode .m-fare .mi2 { background: linear-gradient(145deg, #ffbe3d, #f08a00); --sh: rgba(240, 138, 0, .34); }
.cx .lead-head { margin: 0 0 18px; padding: 0; text-align: left; }
.cx .lead-head .eyebrow { display: none; }
.cx .lead-head h2 { font-size: clamp(24px, 3.6vw, 30px); letter-spacing: -.02em; line-height: 1.2; margin: 0 0 6px; }
.cx .lead-head p { font-size: 15px; color: var(--muted); max-width: 560px; margin: 0; }
.cx .give-card, .cx .lead-card, .cx .points-info { border-radius: 24px; border: 1px solid var(--tx-line); background: var(--tx-card); box-shadow: var(--shadow-1); }
.cx #bus-grid .card { border-radius: 20px; border: 1px solid var(--tx-line); background: var(--tx-card); transition: transform .45s var(--spring), box-shadow .45s var(--spring); }
.cx #bus-grid .card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .15); }
.cx #hubs { margin: 2px 0 6px; }
/* a note line is a line, not a chat note (they shared the class name) */
.label.note { position: static; display: block; width: auto; flex: initial; justify-items: initial; padding: 0; }
.label.note:empty, .label.note[hidden] { display: none; }
.cx .give-wrap { padding-top: 0; } .cx .lead-head h2 { margin-top: 0; }

/* ================= ৬৪ জেলা: a travel guide ================= */
.dg { max-width: 1100px; }
.dg-find { max-width: 620px; margin: 0 0 8px; }
.dg-sec { margin-top: 44px; }
.dg-head { margin: 0 2px 14px; }
.dg-head h3 { margin: 0 0 4px; font-size: clamp(21px, 3vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.dg-head p { margin: 0; font-size: 14px; color: var(--muted); }
.dg-note { margin: 10px 2px 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.dg-sec[hidden] { display: none; }

/* the most-read places: a rail with a big rank number, as the App Store's charts */
.dg-rail { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dg-rail::-webkit-scrollbar { display: none; }
.dg-place { flex: none; width: 210px; scroll-snap-align: start; text-align: left; color: var(--ink); display: grid; gap: 10px; animation: txin .6s var(--spring) both; }
.dg-place .ph { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
  transition: transform .5s var(--spring), box-shadow .5s var(--spring); }
.dg-place .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .55)); }
.dg-place .ph em { position: absolute; z-index: 1; left: 12px; bottom: 6px; font-style: normal; font-size: 56px; font-weight: 900; line-height: 1; color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .92); text-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.dg-place:hover .ph { transform: translateY(-3px) scale(1.01); box-shadow: 0 20px 40px rgba(0, 0, 0, .34); }
.dg-place .t { display: grid; gap: 2px; padding: 0 4px; }
.dg-place .t b { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.dg-place .t small { font-size: 12.5px; color: var(--muted); }

/* chips: divisions, food / goods */
.dg-tabs, .dg-divs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: none; }
.dg-tabs::-webkit-scrollbar, .dg-divs::-webkit-scrollbar { display: none; }
.dg-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; font-weight: 700; color: var(--ink-2);
  background: var(--tx-card); border: 1px solid var(--tx-line); transition: background .25s, color .25s, transform .2s var(--spring); }
.dg-chip small { font-size: 12px; color: var(--muted); font-weight: 700; }
.dg-chip.on { background: var(--ink); color: var(--bg); border-color: transparent; }
.dg-chip.on small { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.dg-chip:active { transform: scale(.95); }

/* GI */
.dg-gi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.dg-gi-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; text-align: left; color: var(--ink); background: var(--tx-card); border: 1px solid var(--tx-line);
  transition: transform .4s var(--spring), box-shadow .4s var(--spring); animation: txin .5s var(--spring) both; }
.dg-gi-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .15); }
.gi-mark { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 900 12.5px/1 system-ui, sans-serif; letter-spacing: .04em; color: #4a2d00;
  background: radial-gradient(circle at 30% 25%, #fff3c4, #f4c542 45%, #c8901a); box-shadow: 0 4px 12px rgba(200, 144, 26, .35), inset 0 0 0 2px rgba(255, 255, 255, .35); }
.dg-gi-card .t { display: grid; gap: 1px; min-width: 0; }
.dg-gi-card b { font-size: 14.5px; font-weight: 800; line-height: 1.3; }
.dg-gi-card small { font-size: 12.5px; color: var(--muted); }

/* the districts */
.dg-division { margin-top: 18px; }
.dg-dhead { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
.dg-dhead i { width: 10px; height: 10px; border-radius: 50%; }
.dg-dhead b { font-size: 16px; font-weight: 800; }
.dg-dhead small { font-size: 12.5px; color: var(--muted); }
.dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 168px), 1fr)); gap: 10px; }
.dg-card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; text-align: left; color: #fff; isolation: isolate;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22); transition: transform .5s var(--spring), box-shadow .5s var(--spring); animation: txin .6s var(--spring) both; }
.dg-cover { position: absolute; inset: 0; z-index: -1; transition: transform .8s var(--spring); }
.dg-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 40%, rgba(0, 0, 0, .7)); }
.dg-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0, 0, 0, .3); }
.dg-card:hover .dg-cover { transform: scale(1.06); }
.dg-card:active { transform: scale(.97); }
.dg-meta { position: absolute; left: 14px; right: 12px; bottom: 12px; display: grid; gap: 2px; }
.dg-meta b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.dg-meta small { font-size: 12.5px; opacity: .9; line-height: 1.35; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }

/* one district, full screen */
.dg-sheet { position: fixed; inset: 0; z-index: 3150; background: var(--bg); animation: dgin .55s var(--spring) both; --spring: cubic-bezier(.32, .72, 0, 1); }
.dg-sheet.out { animation: dgout .3s ease-in both; }
@keyframes dgin { from { transform: translateY(6%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dgout { to { transform: translateY(4%); opacity: 0; } }
.dg-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.dg-hero { --k: 0; position: relative; height: min(62vh, 560px); min-height: 330px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.dg-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .35), transparent 30%, transparent 45%, rgba(0, 0, 0, .75)); }
.dg-title { position: relative; z-index: 1; width: min(100%, 900px); margin: 0 auto; padding: 0 20px 26px; transform: translateY(calc(var(--k) * 30px)); opacity: calc(1 - var(--k) * .6); }
.dg-title small { font-size: 13.5px; font-weight: 700; opacity: .9; letter-spacing: .02em; }
.dg-title h2 { margin: 4px 0 10px; font-size: clamp(42px, 9vw, 72px); font-weight: 800; letter-spacing: -.03em; line-height: 1; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.dg-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-facts span { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .22); }
.dg-x { position: absolute; z-index: 2; top: calc(14px + env(safe-area-inset-top)); left: 14px; }
.dg-credit { position: absolute; z-index: 2; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .45); text-decoration: none; }
.dg-hero .dg-credit { top: calc(18px + env(safe-area-inset-top)); bottom: auto; right: 14px; }
.dg-body { width: min(100%, 900px); margin: 0 auto; padding: 22px 20px calc(60px + env(safe-area-inset-bottom)); }
.dg-intro { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.dg-wiki { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--accent); }
.dg-h { margin: 34px 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.dg-h + .dg-note { margin: -6px 0 14px; }
.dg-famous { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.dg-fam { display: grid; gap: 4px; padding: 14px; border-radius: 20px; background: var(--tx-card); border: 1px solid var(--tx-line); }
.dg-fam .fi { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: #fff; margin-bottom: 6px; }
.dg-fam .fi svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dg-fam.f .fi { background: linear-gradient(145deg, #ffb340, #f08a00); } .dg-fam.p .fi { background: linear-gradient(145deg, #7d7aff, #4b48d6); }
.dg-fam b { font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.dg-fam small { font-size: 12px; color: var(--muted); }
.dg-sights { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.dg-sight { overflow: hidden; border-radius: 22px; background: var(--tx-card); border: 1px solid var(--tx-line); box-shadow: var(--shadow-1); animation: txin .6s var(--spring) both; }
.dg-sight.focus { box-shadow: 0 0 0 2px var(--accent), var(--shadow-1); }
.dg-sight .ph { position: relative; aspect-ratio: 16 / 10; }
.dg-sight .t { padding: 14px 16px 16px; }
.dg-sight .t b { font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.dg-sight .t p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dg-sight .acts { display: flex; gap: 8px; margin-top: 12px; }
.dg-sight .acts .btn { height: 36px; padding: 0 14px; font-size: 13.5px; }
.dg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 760px) {
  .dg-place { width: 170px; }
  .dg-place .ph em { font-size: 46px; }
  .dg-meta b { font-size: 18px; }
  .dg-body { padding: 18px 16px calc(40px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .dg-sheet, .dg-card, .dg-place, .dg-sight, .dg-gi-card { animation: none !important; } }
.dg-more { grid-column: 1 / -1; justify-self: center; height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ink); background: var(--tx-card); border: 1px solid var(--tx-line); margin-top: 4px; }
@media (max-width: 760px) {
  .dg-gi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-gi-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .gi-mark { width: 32px; height: 32px; font-size: 11px; }
}
.dg-few { margin-top: 26px; padding: 16px; border-radius: 20px; background: color-mix(in srgb, var(--accent) 7%, var(--tx-card)); border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent); }
.dg-few p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
/* pictures fade in once they have fully arrived; until then the division's colour, with a slow shimmer */
.dg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease, transform .8s var(--spring); z-index: 0; }
.dg-img.in { opacity: 1; }
.dg-cover, .dg-place .ph, .dg-sight .ph, .dg-hero { position: relative; overflow: hidden; }
.dg-cover::before, .dg-place .ph::before, .dg-sight .ph::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .12) 50%, transparent 70%) -100% 0 / 200% 100%; animation: shimmer 1.6s infinite; }
@keyframes shimmer { to { background-position: 100% 0; } }
.dg-card:hover .dg-img { transform: scale(1.06); }
.dg-card:hover .dg-cover { transform: none; }
.dg-hero > .dg-img { z-index: 0; }
.dg-hero::after { z-index: 1; }
.dg-place .ph em, .dg-place .ph::after { z-index: 1; }
.dg-sight .ph .dg-credit { z-index: 2; }

/* ================= রূপসী বাংলা: the hero ring, the two tabs, GI pictures and stories, "been there" ================= */
.rb-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rb-copy { min-width: 0; }
.rb-ring { --n: 0; position: relative; flex: none; width: 132px; display: grid; justify-items: center; gap: 6px; color: var(--ink); }
.rb-ring svg { width: 116px; height: 116px; transform: rotate(-90deg); }
.rb-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.rb-ring .trk { stroke: color-mix(in srgb, var(--ink) 9%, transparent); }
.rb-ring .val { stroke: url(#rb-grad) var(--accent); stroke: var(--accent); stroke-dasharray: var(--n) 64; transition: stroke-dasharray 1s cubic-bezier(.32, .72, 0, 1); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 45%, transparent)); }
.rb-ring .n { position: absolute; top: 34px; left: 0; right: 0; display: grid; justify-items: center; line-height: 1; }
.rb-ring .n b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.rb-ring .n small { margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.rb-ring em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.rb-ring:active { transform: scale(.97); }
@media (max-width: 760px) {
  .rb-hero { flex-direction: column; align-items: stretch; gap: 16px; }
  .rb-ring { width: auto; grid-template-columns: auto 1fr; justify-items: start; align-items: center; padding: 10px 14px; border-radius: 20px; background: var(--tx-card); border: 1px solid var(--tx-line); text-align: left; }
  .rb-ring svg { width: 58px; height: 58px; grid-row: span 2; }
  .rb-ring circle { stroke-width: 11; }
  .rb-ring .n { position: static; display: flex; align-items: baseline; gap: 4px; }
  .rb-ring .n b { font-size: 24px; } .rb-ring .n small { margin: 0; }
}
.tmode .m-guide { --tint: #30d158; } .tmode .m-guide .mi2 { background: linear-gradient(145deg, #30d158, #0a9f6e); --sh: rgba(10, 159, 110, .34); }
.tmode .m-tour { --tint: #ff375f; } .tmode .m-tour .mi2 { background: linear-gradient(145deg, #ff6482, #d6204d); --sh: rgba(214, 32, 77, .34); }
.rb-tour-pane .tour-grid, #rb-tour .tour-grid { margin-top: 0; }

/* "been there" */
.dg-been { position: absolute; top: 10px; right: 10px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #fff; background: var(--accent); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.dg-been svg, .dg-been-btn svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dg-facts .dg-been-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background .25s, transform .2s; }
.dg-facts .dg-been-btn.on { background: var(--accent); border-color: transparent; }
.dg-facts .dg-been-btn:active { transform: scale(.94); }

/* GI cards with the product's picture */
.dg-gi-card { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.gi-ph { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(150deg, #3a2a10, #1c1610); }
.dg-gi-card .gi-ph .gi-mark { position: relative; z-index: 1; }
.dg-gi-card.has-ph .gi-ph .gi-mark { position: absolute; top: 10px; left: 10px; width: 32px; height: 32px; font-size: 11px; }
.dg-gi-card .t { padding: 12px 14px 14px; }
.dg-gi-card .gi-ph .dg-img { transition: opacity .6s ease, transform .8s cubic-bezier(.32, .72, 0, 1); }
.dg-gi-card:hover .gi-ph .dg-img { transform: scale(1.06); }
@media (max-width: 760px) { .dg-gi-card { flex-direction: column; align-items: stretch; gap: 0; padding: 0; } .dg-gi-card .t { padding: 10px 12px 12px; } }

/* a story */
.gi-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gi-badge .gi-mark { width: 26px; height: 26px; font-size: 10px; }
.gi-hero .dg-title h2 { font-size: clamp(34px, 7.5vw, 60px); margin: 12px 0 12px; }
.gi-district { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gi-district .ic { display: grid; font-size: 15px; }
.gi-district .ic svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; }
.gi-body { max-width: 720px; }
.gi-text { margin: 0 0 16px; font-size: 18px; line-height: 1.85; color: var(--ink-2); }
/* (no drop cap: a Bangla first letter cannot be lifted out of its word) */
.gi-general { margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; background: var(--tx-card); border: 1px solid var(--tx-line); }
button.dg-fam { text-align: left; color: var(--ink); cursor: pointer; transition: transform .35s cubic-bezier(.32, .72, 0, 1), box-shadow .35s; }
button.dg-fam:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .15); }
.dg-hero .dg-title { z-index: 2; } .dg-hero .dg-x { z-index: 3; } .dg-hero .dg-credit { z-index: 3; }
.gi-hero .dg-title h2 { text-shadow: 0 4px 30px rgba(0, 0, 0, .55); }

/* ================= রূপসী বাংলা: a top bar like Explore's, the two tabs in its middle ================= */
.rb-top { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 30; display: flex; justify-content: center; margin: 0 0 14px; padding: 6px 0;
  background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); border-radius: 18px; }
.rb-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; min-width: 264px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 5%, transparent); }
.rb-seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: 999px; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; color: var(--muted); white-space: nowrap; transition: color .25s; }
.rb-seg button svg { width: 15px; height: 15px; stroke-width: 2.1; flex: none; }
.rb-seg button[aria-selected="true"] { color: var(--ink); }
.rb-seg button[data-m="guide"][aria-selected="true"] svg { color: #16a34a; }
.rb-seg button[data-m="tour"][aria-selected="true"] svg { color: #db2777; }
.rb-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--surface, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .08); transition: transform .45s cubic-bezier(.32, .72, 0, 1); }
.rb-seg[data-on="tour"] .rb-thumb { transform: translateX(100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rb-thumb { background: color-mix(in srgb, var(--ink) 16%, var(--bg)); } }
:root[data-theme="dark"] .rb-thumb { background: color-mix(in srgb, var(--ink) 16%, var(--bg)); }
@media (max-width: 760px) {
  #page-districts .rb-top { position: fixed; top: 0; left: 0; right: 0; margin: 0; border-radius: 0; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; z-index: 900;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
  #page-districts .dg { padding-top: calc(62px + env(safe-area-inset-top)); }
  body.reels-open #page-districts .rb-top { visibility: hidden; }
}

/* ---- the reader: a Wikipedia article in the app's own type ---- */
.ar-sheet { z-index: 3160; }
.ar-body { width: min(100%, 720px); }
.ar-body .ar-p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.85; color: color-mix(in srgb, var(--ink) 88%, transparent); overflow-wrap: anywhere; }
.ar-body .ar-p.lead { font-size: 18px; color: var(--ink); }
.ar-body .ar-h { margin: 30px 0 10px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; }
.ar-body h4.ar-h { margin: 22px 0 8px; font-size: 17px; }
.ar-wait { display: grid; gap: 12px; padding: 6px 0 20px; }
.ar-wait i { height: 14px; border-radius: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 30%, color-mix(in srgb, var(--ink) 13%, transparent) 50%, color-mix(in srgb, var(--ink) 7%, transparent) 70%); background-size: 300% 100%; animation: arw 1.3s linear infinite; }
.ar-wait i:nth-child(3n) { width: 72%; } .ar-wait i:nth-child(4) { width: 88%; }
@keyframes arw { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ar-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: min(70%, 260px); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: none; }
.ar-gallery::-webkit-scrollbar { display: none; }
.ar-shot { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; scroll-snap-align: start; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ar-shot .dg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-body > .btn { margin: 6px 0 18px; }
button.dg-wiki { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: var(--accent); }

/* the visited button's label is not a chip of its own; Bangla titles get room under their label */
.dg-facts .dg-been-btn span { padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dg-facts .dg-been-btn i { display: inline-flex; }
.dg-title h2 { margin-top: 10px; line-height: 1.12; }

/* no picture: the kind of thing, drawn large and faint over the division's colours */
.ph-art { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: rgba(255, 255, 255, .5);
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .22), transparent 55%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 14px); }
.ph-art svg { width: 34%; max-width: 120px; height: auto; aspect-ratio: 1; fill: none; stroke: currentColor; stroke-width: 1.2; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .18)); }
.dg-hero > .ph-art { z-index: 0; } .dg-hero > .ph-art svg { width: 22%; max-width: 160px; transform: translateY(-14%); }
.dg-gi-card .gi-ph .gi-mark { position: absolute; top: 10px; left: 10px; width: 32px; height: 32px; font-size: 11px; }
/* a district card's picture fills the card (a later shared rule had made it position: relative, 0 px tall — black cards) */
.dg-card > .dg-cover { position: absolute; inset: 0; z-index: 0; }
.dg-card > .dg-meta { z-index: 2; }
.dg-card > .dg-been { z-index: 3; }
.dg-card::after { z-index: 1; }

/* ================= ট্যুর প্ল্যান: a trip ticket over the destination, step cards, a live cost summary ================= */
.tp { --tp-r: 26px; }
.tp-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 30px; min-height: 260px; display: flex; align-items: flex-end; color: #fff; margin-bottom: 16px;
  background: linear-gradient(150deg, #0a84ff, #5e5ce6); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .55); }
.tp-hero > .dg-img { z-index: -2; animation: tpzoom 18s ease-in-out infinite alternate; }
.tp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .72)); }
@keyframes tpzoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.tp-hero-in { width: 100%; padding: 22px; }
.tp-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.tp-kicker svg { width: 14px; height: 14px; }
.tp-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 54px; }
.tp-place { display: grid; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: 20px; cursor: pointer; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); transition: background .25s, transform .25s cubic-bezier(.32, .72, 0, 1); }
.tp-place:hover { background: rgba(255, 255, 255, .22); } .tp-place:active { transform: scale(.98); }
.tp-place.to { text-align: right; }
.tp-place small { font-size: 11.5px; font-weight: 700; opacity: .85; letter-spacing: .03em; }
.tp-place select { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; border: 0; outline: 0; background: none; color: #fff; cursor: pointer;
  font: inherit; font-size: clamp(20px, 5.4vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; text-overflow: ellipsis; padding: 0; }
.tp-place.to select { text-align: right; text-align-last: right; }
.tp-place select option, .tp-place select optgroup { color: #111; background: #fff; }
.tp-way { position: relative; width: 46px; height: 46px; display: grid; place-items: center; }
.tp-way > i { position: absolute; left: -6px; right: -6px; top: 50%; border-top: 2px dashed rgba(255, 255, 255, .55); }
.tp-way em { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); animation: tpgo 2.4s ease-in-out infinite; }
.tp-way em svg { width: 18px; height: 18px; }
@keyframes tpgo { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
.tp-note { margin: 12px 2px 0; font-size: 13.5px; font-weight: 600; opacity: .92; }
.tp-note:empty { display: none; }

.tp-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.tp-form { display: grid; gap: 14px; padding: 0; background: none; box-shadow: none; border: 0; }
.tp-card, .tp .tour-sum { padding: 20px; border-radius: var(--tp-r); background: var(--tx-card, var(--surface)); border: 1px solid var(--tx-line, var(--line));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -20px rgba(0, 0, 0, .25); animation: txin .5s cubic-bezier(.32, .72, 0, 1) both; }
.tp-card:nth-child(2) { animation-delay: .05s; } .tp-card:nth-child(3) { animation-delay: .1s; } .tp-card:nth-child(4) { animation-delay: .15s; }
.tp-card > header, .tp-make > header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tp-card h4, .tp-make h4 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.tp-card header p, .tp-make header p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.tp-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.tp-ic svg { width: 19px; height: 19px; }
.tp-ic.c1 { background: linear-gradient(150deg, #64d2ff, #0a84ff); } .tp-ic.c2 { background: linear-gradient(150deg, #30d158, #0a9f6e); }
.tp-ic.c3 { background: linear-gradient(150deg, #bf5af2, #5e5ce6); } .tp-ic.c4 { background: linear-gradient(150deg, #ffd60a, #ff9f0a); }
.tp-ic.c5 { background: linear-gradient(150deg, #ff6482, #db2777); }
.tp .label { margin: 0 2px 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.tp .tour-two { gap: 12px; }
.tp .seg + .tour-two { margin-top: 14px; }
.tp .seg { margin-bottom: 0; border-radius: 14px; padding: 3px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.tp .seg button { padding: 9px 8px; font-size: 14.5px; border-radius: 11px; transition: background .3s, color .3s, box-shadow .3s; }
.tp .stepper { border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.tp .stepper b { font-size: 21px; font-variant-numeric: tabular-nums; }
.tp .stepper .icon-btn { width: 38px; height: 38px; border-radius: 11px; }
.tp .money { margin-top: 0; }
.tp .money span { font-size: 12.5px; }
.tp .money input { border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-variant-numeric: tabular-nums; }
.tp-gap { margin-top: 10px; }
.tp-fare { margin: 12px 2px 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.tp-fare:empty { display: none; }
.tp .chips { margin-top: 10px; }
.tp .chips .chip { font-size: 13px; padding: 7px 12px; border-radius: 999px; }
.tp #tour-hotels-label { margin-top: 16px; }

.tp .tour-side { gap: 16px; top: calc(var(--nav-h) + 76px); }
.tp-sum { position: relative; overflow: hidden; }
.tp-sum::before { content: ""; position: absolute; top: -40%; right: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(48, 209, 88, .22), transparent 70%); pointer-events: none; }
.tp-sum-top { position: relative; display: grid; gap: 2px; }
.tp-sum-top > span { font-size: 13px; font-weight: 700; color: var(--muted); }
.tp-sum-top > b { font-size: clamp(38px, 9vw, 48px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #30d158, #0a9f6e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tp-sum-top small { font-size: 14px; color: var(--muted); font-weight: 600; }
.tp-sum-top small b { color: var(--ink); font-weight: 800; margin-left: 4px; }
.tp-bar { display: flex; gap: 3px; height: 10px; margin: 18px 0 8px; }
.tp-bar i { flex: 1 1 0; min-width: 4px; border-radius: 6px; transition: flex-grow .7s cubic-bezier(.32, .72, 0, 1); }
.tp-bar i:nth-child(1), .tp-rows .rule:nth-child(1)::before { background: #30d158; }
.tp-bar i:nth-child(2), .tp-rows .rule:nth-child(2)::before { background: #bf5af2; }
.tp-bar i:nth-child(3), .tp-rows .rule:nth-child(3)::before { background: #ff9f0a; }
.tp-bar i:nth-child(4), .tp-rows .rule:nth-child(4)::before { background: #0a84ff; }
.tp-rows .rule { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 12px 20px; border-bottom: 1px solid var(--tx-line, var(--line)); font-size: 15px; }
.tp-rows .rule:last-child { border-bottom: 0; }
.tp-rows .rule::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 4px; }
.tp-rows .rule b { font-variant-numeric: tabular-nums; font-weight: 800; }
.tp-rows .rule small { font-size: 12.5px; }
.tp-sum .foot { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--muted); text-align: left; }
.tp-small { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.tp-make .money { margin-top: 12px; }
.tp-go { width: 100%; justify-content: center; margin-top: 16px; height: 50px; border-radius: 16px; font-size: 16px; font-weight: 800;
  background: linear-gradient(135deg, #ff6482, #db2777); color: #fff; box-shadow: 0 12px 26px -12px #db2777; }
.tp-go:disabled { opacity: .45; box-shadow: none; }

.tp-float { position: fixed; z-index: 950; left: 50%; bottom: calc(var(--tab-h) + 22px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 8px;
  padding: 10px 14px 10px 18px; border-radius: 999px; color: #fff; background: rgba(20, 20, 22, .82); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .12); transform: translate(-50%, 20px) scale(.96); opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .45s cubic-bezier(.32, .72, 0, 1); }
.tp-float span { font-size: 12.5px; font-weight: 700; opacity: .8; }
.tp-float b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: #4ade80; }
.tp-float svg { width: 16px; height: 16px; transform: rotate(90deg); opacity: .8; }
.tp-float.show { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }

@media (max-width: 860px) {
  .tp-grid { grid-template-columns: 1fr; }
  .tp .tour-side { position: static; }
  .tp-float { display: inline-flex; }
}
@media (max-width: 760px) {
  .tp-hero { border-radius: 26px; min-height: 300px; }
  .tp-hero-in { padding: 18px; }
  .tp-route { grid-template-columns: 1fr; gap: 8px; margin-top: 70px; }
  .tp-place.to { text-align: left; } .tp-place.to select { text-align: left; text-align-last: left; }
  .tp-way { width: auto; height: 24px; justify-self: start; margin-left: 18px; }
  .tp-way > i { display: none; }
  .tp-way em { width: 30px; height: 30px; transform: rotate(90deg); animation: none; }
  .tp-card, .tp .tour-sum { padding: 18px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .tp-hero > .dg-img, .tp-way em { animation: none; } }
#page-districts[data-tab="tour"] .rb-hero { display: none; }
@media (max-width: 760px) { .tp-card .tour-two:has(> .seg) { grid-template-columns: 1fr; gap: 8px; } }
.tp-hero > .dg-img { filter: saturate(1.15) contrast(1.06); }
.ph-art svg { stroke-linecap: round; stroke-linejoin: round; }
.tp-sum-top { gap: 4px; } .tp-sum-top > b { line-height: 1.35; padding: 2px 0; }
#page-districts .dx-link { margin: 28px 0 22px; }
.tour-card canvas { width: min(560px, 100%); border-radius: 32px; }
.tp-float.away { opacity: 0; pointer-events: none; transform: translate(-50%, 20px) scale(.96); }

/* when a place's photo shows a landmark beside it (its temple, its dighi), the photo says which */
.ph-cap { position: absolute; z-index: 2; left: 12px; bottom: 12px; max-width: calc(100% - 64px); padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #fff; background: rgba(10, 16, 28, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================= a place, full screen ================= */
.pl-sheet { --pl-card: var(--tx-card, var(--surface)); --pl-line: var(--tx-line, var(--line)); z-index: 3155; }
.pl-hero { --k: 0; position: relative; height: min(64vh, 620px); min-height: 340px; overflow: hidden; background: #0b1220; }
.pl-hero.bare { height: min(44vh, 400px); min-height: 280px; }
.pl-gal { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pl-gal::-webkit-scrollbar { display: none; }
.pl-slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: center; overflow: hidden; }
.pl-slide .dg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1 + var(--k) * .06)) translateY(calc(var(--k) * 40px)); transition: opacity .6s ease; }
.pl-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 26%, transparent 70%, rgba(0, 0, 0, .35)); }
.pl-empty { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(150deg, #134e4a, #0b1220); }
.pl-empty[hidden] { display: none; }
.pl-empty .ph-art svg { width: 30%; max-width: 150px; }
.pl-credit { position: absolute; z-index: 2; right: 14px; bottom: 16px; max-width: 60%; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #fff; text-decoration: none;
  background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-hero .dg-x { position: absolute; z-index: 3; left: 16px; top: calc(16px + env(safe-area-inset-top)); }
.pl-give { position: absolute; z-index: 3; right: 16px; top: calc(16px + env(safe-area-inset-top)); display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  transition: background .2s, transform .25s cubic-bezier(.32, .72, 0, 1); }
.pl-give:hover { background: rgba(255, 255, 255, .26); } .pl-give:active { transform: scale(.96); }
.pl-give svg { width: 17px; height: 17px; }
.pl-count { position: absolute; z-index: 3; left: 16px; bottom: 16px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pl-count:empty { display: none; }
.pl-dots { position: absolute; z-index: 3; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 6px; }
.pl-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .55); transition: width .35s cubic-bezier(.32, .72, 0, 1), background .3s; }
.pl-dots i.on { width: 18px; background: #fff; }
.pl-arrow { position: absolute; z-index: 3; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(0, 0, 0, .32); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity .25s; }
.pl-arrow svg { width: 20px; height: 20px; } .pl-arrow.prev { left: 14px; } .pl-arrow.next { right: 14px; }
.pl-hero:hover .pl-arrow:not([hidden]) { opacity: 1; }
@media (hover: none) { .pl-arrow { display: none; } }

.pl-body { position: relative; z-index: 2; width: min(100%, 860px); margin: -28px auto 0; padding: 26px 20px calc(70px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--bg); }
.pl-head small { display: block; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.pl-head h2 { margin: 6px 0 12px; font-size: clamp(30px, 7vw, 46px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.pl-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.pl-badge.hot { color: #9a3412; background: #ffedd5; } .pl-badge.calm { color: #5b21b6; background: #ede9fe; }
.pl-badge.rate { color: #854d0e; background: #fef3c7; } .pl-badge .st { color: #f59e0b; }
.pl-acts { display: flex; gap: 8px; margin: 18px 0 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pl-acts::-webkit-scrollbar { display: none; }
.pl-act { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink);
  background: var(--pl-card); border: 1px solid var(--pl-line); transition: transform .25s cubic-bezier(.32, .72, 0, 1), background .2s, color .2s, border-color .2s; }
.pl-act svg { width: 17px; height: 17px; }
.pl-act:active { transform: scale(.96); }
.pl-act.want { color: #fff; background: linear-gradient(135deg, #10b981, #0a8f62); border-color: transparent; box-shadow: 0 10px 22px -12px #0a8f62; }
.pl-act.want.on { color: #0a8f62; background: color-mix(in srgb, #10b981 14%, transparent); box-shadow: none; }
.pl-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 8px; }
.pl-fact { position: relative; padding: 14px 14px 13px; border-radius: 20px; background: var(--pl-card); border: 1px solid var(--pl-line); }
.pl-fact i { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #0a8f62; background: color-mix(in srgb, #10b981 13%, transparent); }
.pl-fact i svg { width: 16px; height: 16px; }
.pl-fact small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.pl-fact b { display: block; margin-top: 4px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.pl-fact span { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.pl-card { margin-top: 14px; padding: 18px 18px 16px; border-radius: 24px; background: var(--pl-card); border: 1px solid var(--pl-line); }
.pl-card h3, .pl-h { margin: 0 0 10px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.pl-h { margin: 26px 2px 12px; }
.pl-card p { margin: 0 0 8px; font-size: 15px; line-height: 1.75; color: color-mix(in srgb, var(--ink) 86%, transparent); }
.pl-link { margin-top: 4px; font-size: 14px; font-weight: 800; color: #0a8f62; background: none; border: 0; padding: 0; cursor: pointer; }
.pl-muted { color: var(--muted) !important; }
.pl-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; scrollbar-width: none; }
.pl-rail::-webkit-scrollbar { display: none; }
.pl-mini { scroll-snap-align: start; text-align: left; border-radius: 20px; overflow: hidden; background: var(--pl-card); border: 1px solid var(--pl-line); transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
.pl-mini:active { transform: scale(.97); }
.pl-mini .ph { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.pl-mini .ph .dg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-mini b { display: block; padding: 10px 12px 0; font-size: 14px; font-weight: 800; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-mini small { display: block; padding: 2px 12px 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pl-sos { background: color-mix(in srgb, #ef4444 6%, var(--pl-card)); border-color: color-mix(in srgb, #ef4444 22%, var(--pl-line)); }
.pl-call { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid color-mix(in srgb, #ef4444 14%, transparent); text-decoration: none; color: var(--ink); }
.pl-call:first-of-type { border-top: 0; }
.pl-call b { grid-row: span 2; display: grid; place-items: center; height: 40px; border-radius: 12px; font-size: 17px; font-weight: 800; color: #b91c1c; background: color-mix(in srgb, #ef4444 13%, transparent); font-variant-numeric: tabular-nums; }
.pl-call span { font-size: 15px; font-weight: 800; } .pl-call small { font-size: 12.5px; color: var(--muted); }
.pl-givebox { background: linear-gradient(150deg, color-mix(in srgb, #10b981 10%, var(--pl-card)), var(--pl-card)); }
.pl-pick { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.pl-pick svg { width: 17px; height: 17px; }
.pl-givenote { margin: 10px 0 0 !important; font-size: 13.5px !important; font-weight: 600; }
.pl-givenote:empty { display: none; }
.pl-givenote.ok { color: #0a8f62 !important; } .pl-givenote.bad { color: #dc2626 !important; }
.pl-revhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pl-revhead > b { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pl-revhead > span:last-child { font-size: 13px; font-weight: 600; color: var(--muted); }
.pl-stars { --v: 0; position: relative; display: inline-block; line-height: 1; letter-spacing: 2px; color: color-mix(in srgb, var(--ink) 16%, transparent); }
.pl-stars::before { content: "★★★★★"; }
.pl-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--v) * 100%); overflow: hidden; color: #f59e0b; white-space: nowrap; }
.pl-write { display: inline-flex; align-items: center; gap: 7px; }
.pl-write svg { width: 16px; height: 16px; }
.pl-form { margin-top: 14px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--ink) 4%, transparent); animation: txin .4s cubic-bezier(.32, .72, 0, 1) both; }
.pl-pickstars { display: flex; gap: 6px; margin-bottom: 10px; }
.pl-pickstars button { font-size: 34px; line-height: 1; color: color-mix(in srgb, var(--ink) 18%, transparent); transition: transform .2s cubic-bezier(.32, .72, 0, 1), color .2s; }
.pl-pickstars button.on { color: #f59e0b; } .pl-pickstars button:active { transform: scale(1.2); }
.pl-form textarea { width: 100%; border: 0; outline: 0; resize: vertical; padding: 12px 14px; border-radius: 14px; font: inherit; font-size: 15px; color: var(--ink); background: var(--pl-card); border: 1px solid var(--pl-line); }
.pl-form textarea:focus { box-shadow: 0 0 0 2.5px #10b981; }
.pl-formacts { display: flex; gap: 8px; margin-top: 10px; }
.pl-revlist { display: grid; gap: 10px; margin-top: 14px; }
.pl-rev { padding: 12px 14px; border-radius: 18px; background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.pl-rev .pl-who { display: grid; grid-template-columns: 36px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.pl-rev .pl-av { grid-row: span 2; font-size: 15px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: #0a8f62 center / cover; }
.pl-rev .pl-who b { font-size: 14.5px; } .pl-rev .pl-who .pl-stars { grid-column: 2; } .pl-rev .pl-who small { grid-column: 3; grid-row: 1; font-size: 12px; color: var(--muted); }
.pl-rev p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; }
.pl-cardrate { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 800; color: #b45309; }
.dg-sight { cursor: pointer; }
.pl-toast { position: fixed; z-index: 4000; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; padding: 12px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #fff; background: rgba(15, 23, 42, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  transition: opacity .3s, transform .45s cubic-bezier(.32, .72, 0, 1); white-space: nowrap; }
.pl-toast.in { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pl-badge.hot { color: #fdba74; background: rgba(251, 146, 60, .16); } :root:not([data-theme="light"]) .pl-badge.calm { color: #c4b5fd; background: rgba(139, 92, 246, .18); } :root:not([data-theme="light"]) .pl-badge.rate { color: #fcd34d; background: rgba(245, 158, 11, .16); } :root:not([data-theme="light"]) .pl-call b { color: #fca5a5; } }
:root[data-theme="dark"] .pl-badge.hot { color: #fdba74; background: rgba(251, 146, 60, .16); } :root[data-theme="dark"] .pl-badge.calm { color: #c4b5fd; background: rgba(139, 92, 246, .18); } :root[data-theme="dark"] .pl-badge.rate { color: #fcd34d; background: rgba(245, 158, 11, .16); } :root[data-theme="dark"] .pl-call b { color: #fca5a5; }
@media (min-width: 900px) { .pl-hero { height: min(70vh, 680px); } .pl-body { padding: 30px 28px 80px; } }
.pl-credit { bottom: 42px; } .pl-count { bottom: 42px; } .pl-dots { bottom: 48px; }

/* ================= লুকানো রত্ন, saved places, tourist police ================= */
.gm-card .ph { position: relative; }
.gm-badge { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; font-style: normal; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 6px 16px -6px rgba(109, 40, 217, .7); }
.gm-add .ph { display: grid !important; place-items: center; background: linear-gradient(150deg, color-mix(in srgb, #8b5cf6 22%, var(--surface)), color-mix(in srgb, #10b981 16%, var(--surface))) !important;
  border: 2px dashed color-mix(in srgb, #8b5cf6 45%, transparent); }
.gm-plus { font-size: 46px; font-weight: 300; line-height: 1; color: #7c3aed; }
.gm-add .t small { color: #7c3aed; font-weight: 700; }
.pl-badge.gem { color: #fff; background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.pl-badge.by { color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dg-gemsec .dg-rail { margin-bottom: 6px; }
.pl-call.tp b { color: #1d4ed8; background: color-mix(in srgb, #3b82f6 14%, transparent); font-size: 14px; letter-spacing: -.01em; }
.pl-call { grid-template-columns: 128px 1fr !important; }
.pl-src { margin: 10px 0 2px !important; font-size: 12px !important; line-height: 1.6 !important; }
.dg-tp { margin: 18px 0 6px; }
.gm-sheet { position: fixed; inset: 0; z-index: 3300; display: grid; align-items: end; justify-items: center; background: rgba(0, 0, 0, 0); transition: background .3s; }
.gm-sheet.in { background: rgba(0, 0, 0, .45); }
.gm-form { position: relative; width: min(100%, 560px); max-height: 92vh; overflow-y: auto; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0;
  background: var(--bg); box-shadow: 0 -20px 60px rgba(0, 0, 0, .3); transform: translateY(100%); transition: transform .45s cubic-bezier(.32, .72, 0, 1); }
.gm-sheet.in .gm-form { transform: none; } .gm-sheet.out .gm-form { transform: translateY(100%); } .gm-sheet.out { background: rgba(0, 0, 0, 0); }
@media (min-width: 700px) { .gm-sheet { align-items: center; } .gm-form { border-radius: 28px; } }
.gm-x { position: absolute; right: 14px; top: 14px; }
.gm-form h3 { margin: 0 44px 6px 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.gm-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.gm-field { display: block; margin-top: 12px; }
.gm-field > span, .gm-label { display: block; margin: 0 2px 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.gm-label { margin-top: 14px; }
.gm-field > small { display: block; margin: 4px 2px 0; font-size: 12px; color: var(--muted); }
.gm-field input, .gm-field select, .gm-field textarea { width: 100%; border: 1px solid var(--tx-line, var(--line)); outline: 0; padding: 12px 14px; border-radius: 14px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--tx-card, var(--surface)); resize: vertical; }
.gm-field :focus { box-shadow: 0 0 0 2.5px #8b5cf6; }
.gm-shots { display: flex; gap: 10px; flex-wrap: wrap; }
.gm-shot { width: 84px; height: 84px; border-radius: 18px; display: grid; place-items: center; background: center / cover; color: transparent; box-shadow: inset 0 0 0 40px rgba(0, 0, 0, 0); transition: box-shadow .2s, color .2s; }
.gm-shot:hover { box-shadow: inset 0 0 0 40px rgba(0, 0, 0, .4); color: #fff; }
.gm-shot svg { width: 22px; height: 22px; }
.gm-shot.add { color: #7c3aed; border: 2px dashed color-mix(in srgb, #8b5cf6 45%, transparent); background: color-mix(in srgb, #8b5cf6 8%, transparent); }
.gm-locate { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; }
.gm-locate svg { width: 16px; height: 16px; } .gm-locate.on { color: #0a8f62; }
.gm-send { width: 100%; justify-content: center; height: 50px; margin-top: 14px; border-radius: 16px; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.gm-done { font-size: 54px; text-align: center; margin: 14px 0 6px; }
.gm-form:has(.gm-done) h3, .gm-form:has(.gm-done) p { text-align: center; margin-right: 0; }

/* ================= several districts in one trip ================= */
#rb-tour[data-mode="many"] > :not(.trip-modes):not(.trip) { display: none !important; }
.trip-modes { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 420px); margin: 0 auto 16px; padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); }
.trip-modes button { position: relative; z-index: 1; height: 40px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--muted); transition: color .25s; }
.trip-modes button[aria-pressed="true"] { color: var(--ink); }
.trip-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--surface, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .1);
  transition: transform .45s cubic-bezier(.32, .72, 0, 1); }
.trip-modes[data-on="many"] .trip-thumb { transform: translateX(100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .trip-thumb { background: color-mix(in srgb, var(--ink) 16%, var(--bg)); } }
:root[data-theme="dark"] .trip-thumb { background: color-mix(in srgb, var(--ink) 16%, var(--bg)); }
.trip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; animation: txin .45s cubic-bezier(.32, .72, 0, 1) both; }
.trip[hidden] { display: none; }
@media (max-width: 860px) { .trip { grid-template-columns: minmax(0, 1fr); } }
.trip-form { display: grid; gap: 14px; }
.trip .tp-card { padding: 18px; border-radius: 24px; background: var(--tx-card, var(--surface)); border: 1px solid var(--tx-line, var(--line)); }
.trip-step { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.trip-step .n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #10b981, #0a8f62); }
.trip-step h4 { margin: 0; font-size: 16.5px; font-weight: 800; } .trip-step p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.trip-select { display: block; }
.trip-select select { width: 100%; border: 0; outline: 0; padding: 13px 14px; border-radius: 14px; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.trip-select.add select { font-weight: 600; color: #0a8f62; }
.trip-chips, .trip-sug { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.trip-chips:empty { display: none; }
.trip-sug { margin: 12px 0 0; align-items: center; } .trip-sug > small { width: 100%; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.trip-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent); transition: transform .2s cubic-bezier(.32, .72, 0, 1), background .2s; }
.trip-chip:active { transform: scale(.95); }
.trip-chip small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.trip-chip.on { color: #fff; background: linear-gradient(135deg, #10b981, #0a8f62); }
.trip-chip i { display: inline-flex; } .trip-chip i svg { width: 13px; height: 13px; }
.trip-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.trip-style { padding: 10px 10px 11px; border-radius: 16px; text-align: left; background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1.5px solid transparent; transition: border-color .2s, background .2s; }
.trip-style b { display: block; font-size: 14.5px; font-weight: 800; } .trip-style small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.trip-style.on { border-color: #10b981; background: color-mix(in srgb, #10b981 10%, transparent); }
.trip-back { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.trip-back input { width: 20px; height: 20px; accent-color: #10b981; }
.trip-empty, .trip-wait { padding: 34px 24px; border-radius: 24px; text-align: center; background: var(--tx-card, var(--surface)); border: 1px dashed var(--tx-line, var(--line)); }
.trip-empty b { display: block; font-size: 19px; font-weight: 800; } .trip-empty p { margin: 8px auto 16px; max-width: 420px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.trip-wait { color: var(--muted); font-weight: 700; }
.trip-head { position: relative; overflow: hidden; padding: 20px; border-radius: 26px; color: #fff; background: radial-gradient(circle at 85% 0%, rgba(94, 234, 212, .35), transparent 50%), linear-gradient(150deg, #0f766e, #0b1220); }
.trip-kicker { font-size: 12px; font-weight: 800; letter-spacing: .04em; opacity: .75; }
.trip-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 16px; }
.trip-chain span { font-size: 19px; font-weight: 800; letter-spacing: -.01em; } .trip-chain span.home { color: #99f6e4; }
.trip-chain i { display: inline-flex; opacity: .6; } .trip-chain i svg { width: 16px; height: 16px; }
.trip-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.trip-stats > div { padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.trip-stats small { display: block; font-size: 11.5px; opacity: .75; } .trip-stats b { display: block; margin-top: 2px; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .trip-stats { grid-template-columns: repeat(2, 1fr); } }
.trip-days { list-style: none; margin: 14px 0 0; padding: 0 0 0 14px; border-left: 2px dashed color-mix(in srgb, #10b981 45%, transparent); }
.trip-day { position: relative; padding: 0 0 14px 16px; }
.trip-day::before { content: ""; position: absolute; left: -22px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px color-mix(in srgb, #10b981 22%, transparent); }
.trip-day.last::before { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .22); }
.trip-dn { display: inline-block; margin-bottom: 6px; font-size: 12.5px; font-weight: 800; color: #0a8f62; letter-spacing: .02em; }
.trip-card { padding: 14px; border-radius: 20px; background: var(--tx-card, var(--surface)); border: 1px solid var(--tx-line, var(--line)); }
.trip-go { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; }
.trip-go i { grid-row: span 2; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #30d158, #0a9f6e); }
.trip-go i svg { width: 18px; height: 18px; } .trip-go b { font-size: 16px; font-weight: 800; } .trip-go small { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.trip-here { display: block; font-size: 16px; font-weight: 800; }
.trip-lbl { display: block; margin: 12px 0 8px; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .02em; }
.trip-see { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.trip-sight { text-align: left; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--ink) 4%, transparent); transition: transform .25s cubic-bezier(.32, .72, 0, 1); }
.trip-sight:active { transform: scale(.97); }
.trip-sight .ph { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.trip-sight .ph .dg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trip-sight > span:last-child { display: block; padding: 7px 9px 9px; font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.trip-stay { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.trip-cost { margin-top: 6px; }
.trip-cost h4 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.trip-cost .rule { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--tx-line, var(--line)); font-size: 15px; }
.trip-cost .rule small { display: block; font-size: 12px; color: var(--muted); } .trip-cost .rule b { font-weight: 800; font-variant-numeric: tabular-nums; }
.trip-cost .rule.total { border-bottom: 0; font-weight: 800; }
.trip-cost .per-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; margin-top: 4px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #10b981, #0a8f62); }
.trip-cost .per-head b { font-size: 24px; font-weight: 800; }
.trip-cost .foot { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.trip-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.trip-acts .btn { display: inline-flex; align-items: center; gap: 7px; } .trip-acts svg { width: 16px; height: 16px; }
@media print {
  body.trip-print * { visibility: hidden !important; }
  body.trip-print .trip-out, body.trip-print .trip-out * { visibility: visible !important; }
  body.trip-print .trip-out { position: absolute; left: 0; top: 0; width: 100%; }
  body.trip-print .trip-acts { display: none; }
}
.trip-cost .per-head span, .trip-cost .per-head b { color: #fff !important; -webkit-text-fill-color: #fff; background: none !important; }
.pl-facts dl { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--tx-line, var(--line)); }
.pl-facts dt, .pl-facts dd { margin: 0; padding: 11px 14px; font-size: 14px; line-height: 1.55; border-top: 1px solid var(--tx-line, var(--line)); }
.pl-facts dt { font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.pl-facts dd { font-weight: 600; color: var(--ink); }
.pl-facts dt:first-of-type, .pl-facts dt:first-of-type + dd { border-top: 0; }

/* the story player for a trip across several districts */
.ts-player { position: fixed; inset: 0; z-index: 3400; display: grid; place-items: center; padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); background: rgba(2, 4, 8, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background .35s, backdrop-filter .35s; overflow-y: auto; }
.ts-player.in { background: rgba(2, 4, 8, .86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.ts-stage { display: grid; justify-items: center; opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .4s, transform .5s cubic-bezier(.32, .72, 0, 1); }
.ts-player.in .ts-stage { opacity: 1; transform: none; }
.ts-player .tour-card { margin: 0; }
.ts-player .tour-card canvas { width: auto; height: min(74vh, calc((100vw - 32px) * 1.25)); max-width: 100%; border-radius: 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.ts-player .tour-actions .btn.quiet { color: #fff; background: rgba(255, 255, 255, .12); }
.ts-x { position: fixed; z-index: 2; right: 16px; top: calc(14px + env(safe-area-inset-top)); color: #fff; background: rgba(255, 255, 255, .14); }
.trip-acts .trip-story { color: #fff; background: linear-gradient(135deg, #ff6482, #db2777); box-shadow: 0 12px 26px -12px #db2777; }

/* ================= মেঠোপথ hub ================= */
.mtp-entry { position: relative; }
.mtp-all { position: absolute; right: 0; top: 2px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #15803d; background: color-mix(in srgb, #22c55e 13%, transparent); }
.mtp-sheet { z-index: 3158; }
.mtp-hero { position: relative; overflow: hidden; padding: calc(70px + env(safe-area-inset-top)) 20px 26px; color: #fff;
  background: radial-gradient(circle at 85% 10%, rgba(250, 204, 21, .22), transparent 40%), radial-gradient(circle at 10% 90%, rgba(34, 197, 94, .35), transparent 50%), linear-gradient(160deg, #14532d, #0b1f17 60%, #0b1220); }
.mtp-hero .dg-x { position: absolute; left: 16px; top: calc(16px + env(safe-area-inset-top)); z-index: 2; }
.mtp-path { position: absolute; inset: auto 0 0 0; width: 100%; height: 60%; opacity: .5; pointer-events: none; }
.mtp-path path { fill: none; stroke: rgba(253, 230, 138, .55); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; animation: mtpwalk 14s linear infinite; }
.mtp-path path + path { stroke: rgba(134, 239, 172, .35); animation-duration: 20s; }
@keyframes mtpwalk { to { stroke-dashoffset: -220; } }
.mtp-head { position: relative; z-index: 1; width: min(100%, 860px); margin: 0 auto; }
.mtp-kicker { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); }
.mtp-head h2 { margin: 12px 0 8px; font-size: clamp(30px, 7vw, 46px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.mtp-head > p { margin: 0; max-width: 560px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .82); }
.mtp-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.mtp-stats span { padding: 7px 12px; border-radius: 14px; font-size: 13px; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.mtp-stats b { font-size: 17px; font-weight: 800; color: #fff; }
.mtp-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.mtp-cta { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 14px; border-radius: 20px; text-align: left; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .25s cubic-bezier(.32, .72, 0, 1), background .2s; }
.mtp-cta:active { transform: scale(.97); } .mtp-cta:hover { background: rgba(255, 255, 255, .16); }
.mtp-cta.main { background: linear-gradient(135deg, #22c55e, #15803d); border-color: transparent; box-shadow: 0 14px 30px -14px #16a34a; }
.mtp-cta i { grid-row: span 2; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); }
.mtp-cta i svg { width: 20px; height: 20px; } .mtp-cta b { font-size: 15.5px; font-weight: 800; } .mtp-cta small { font-size: 12px; opacity: .8; }
@media (max-width: 420px) { .mtp-ctas { grid-template-columns: 1fr; } }
.mtp-body { width: min(100%, 860px); margin: 0 auto; padding: 18px 16px calc(60px + env(safe-area-inset-bottom)); }
.mtp-tabs { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--tx-line, var(--line)); }
.mtp-tabs button { height: 40px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--muted); transition: background .25s, color .25s; }
.mtp-tabs button.on { color: #fff; background: linear-gradient(135deg, #22c55e, #15803d); }
.mtp-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; }
.mtp-chips::-webkit-scrollbar { display: none; }
.mtp-chips .trip-chip { flex: none; }
.mtp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.mtp-grid .dg-place { width: auto; }
.mtp-wall { columns: 2 170px; column-gap: 10px; }
.mtp-shot { position: relative; display: block; width: 100%; margin: 0 0 10px; padding: 0; border-radius: 18px; overflow: hidden; break-inside: avoid; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mtp-shot img { display: block; width: 100%; height: auto; min-height: 120px; object-fit: cover; opacity: 0; transition: opacity .5s, transform .6s cubic-bezier(.32, .72, 0, 1); }
.mtp-shot img.in { opacity: 1; } .mtp-shot:hover img { transform: scale(1.04); }
.mtp-shot .cap { position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px; text-align: left; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.mtp-shot .cap b { display: block; font-size: 14px; font-weight: 800; line-height: 1.3; } .mtp-shot .cap small { font-size: 11.5px; opacity: .85; }
.mtp-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mtp-people li { display: grid; grid-template-columns: 36px 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--tx-card, var(--surface)); border: 1px solid var(--tx-line, var(--line)); }
.mtp-people .rank { grid-row: span 2; font-size: 20px; font-weight: 800; text-align: center; color: var(--muted); }
.mtp-people .pl-av { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: #15803d center / cover; }
.mtp-people b { font-size: 15px; } .mtp-people small { font-size: 12.5px; color: var(--muted); }
.mtp-empty { display: grid; justify-items: center; gap: 6px; padding: 36px 20px; text-align: center; border-radius: 24px; border: 1px dashed var(--tx-line, var(--line)); }
.mtp-empty .ic { font-size: 40px; } .mtp-empty b { font-size: 18px; font-weight: 800; } .mtp-empty p { margin: 0 0 10px; max-width: 360px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.mtp-cta i svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: #fff; }

/* মেঠোপথ banner on the guide's front page: what it is, three steps, two ways in */
.mtp-banner { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 26px; border-radius: 30px; color: #fff; margin-bottom: 18px;
  background: radial-gradient(circle at 90% 0%, rgba(250, 204, 21, .28), transparent 42%), radial-gradient(circle at 0% 100%, rgba(34, 197, 94, .4), transparent 55%), linear-gradient(150deg, #166534, #0b2a1c 55%, #0b1220);
  box-shadow: 0 24px 60px -30px rgba(22, 101, 52, .9), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mtp-banner:empty { display: none; }
.mtp-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 255, 255, .03) 22px 23px); }
.mtp-new { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); }
.mtp-bcopy h3 { margin: 14px 0 8px; font-size: clamp(24px, 5.6vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.mtp-bcopy > p { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .82); }
.mtp-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.mtp-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .1); }
.mtp-steps b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; color: #14532d; background: #bbf7d0; }
.mtp-bacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mtp-bbtn { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 12px 0 16px; border-radius: 16px; font-size: 15px; font-weight: 800; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .25s cubic-bezier(.32, .72, 0, 1), background .2s, box-shadow .25s; }
.mtp-bbtn:hover { background: rgba(255, 255, 255, .2); } .mtp-bbtn:active { transform: scale(.96); }
.mtp-bbtn.main { color: #052e16; background: linear-gradient(135deg, #bbf7d0, #4ade80); border-color: transparent; box-shadow: 0 14px 30px -14px #22c55e; }
.mtp-bbtn i { display: inline-flex; } .mtp-bbtn i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mtp-bbtn em { font-style: normal; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #713f12; background: #fde047; }
.mtp-blink { margin-top: 14px; padding: 0; font-size: 14px; font-weight: 800; color: #bbf7d0; background: none; border: 0; cursor: pointer; }
.mtp-blink:hover { text-decoration: underline; }
/* three tilted photos, softly floating */
.mtp-polaroids { position: relative; height: 250px; }
.mtp-pol { position: absolute; width: 58%; aspect-ratio: 4 / 5; padding: 8px 8px 26px; border-radius: 14px; background: #fff !important; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); overflow: hidden; animation: mtpfloat 7s ease-in-out infinite; }
.mtp-pol .dg-img { position: absolute; left: 8px; right: 8px; top: 8px; bottom: 26px; width: calc(100% - 16px); height: calc(100% - 34px); object-fit: cover; border-radius: 8px; }
.mtp-pol .ph-art { inset: 8px 8px 26px; border-radius: 8px; background: linear-gradient(150deg, #22c55e, #14532d); }
.mtp-pol.p0 { left: 2%; top: 18%; transform: rotate(-9deg); z-index: 1; }
.mtp-pol.p1 { left: 24%; top: 0; transform: rotate(4deg); z-index: 3; animation-delay: -2.3s; }
.mtp-pol.p2 { right: 0; top: 22%; transform: rotate(11deg); z-index: 2; animation-delay: -4.6s; }
@keyframes mtpfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 640px) {
  .mtp-banner { grid-template-columns: 1fr; padding: 22px 18px; }
  .mtp-polaroids { order: -1; height: 170px; margin: -4px 0 4px; }
  .mtp-pol { width: 38%; }
  .mtp-pol.p0 { left: 8%; } .mtp-pol.p1 { left: 31%; } .mtp-pol.p2 { right: 8%; }
  .mtp-bacts { display: grid; grid-template-columns: 1fr; }
  .mtp-bbtn { justify-content: flex-start; } .mtp-bbtn em { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .mtp-pol { animation: none; } }
/* phones: the photos get their own room above the words */
@media (max-width: 640px) {
  .mtp-polaroids { height: 196px; margin: -6px 0 14px; }
  .mtp-pol { width: 34%; }
  .mtp-pol.p0 { left: 9%; top: 14%; } .mtp-pol.p1 { left: 33%; top: 0; } .mtp-pol.p2 { right: 9%; top: 16%; }
}
.mtp-bbtn { padding: 0 20px 0 16px; }
/* the three steps, each with its line of help */
.mtp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mtp-steps li { display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 10px; padding: 12px; border-radius: 16px; }
.mtp-steps b { width: 28px; height: 28px; font-size: 13px; }
.mtp-steps strong { display: block; font-size: 14px; font-weight: 800; line-height: 1.35; }
.mtp-steps small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .72); }
@media (max-width: 900px) { .mtp-steps { grid-template-columns: 1fr; } .mtp-steps li { align-items: center; } }
.mtp-banner { cursor: pointer; }
.mtp-go { margin-top: 20px; padding: 0 18px 0 22px; gap: 10px; }
.mtp-go i svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .mtp-go { width: 100%; justify-content: center; } }

/* মেঠোপথ hub: one warm start when nothing is shared yet, and the guide's quieter places below */
.mtp-tabs[hidden], .mtp-stats[hidden] { display: none; }
.mtp-h { margin: 6px 2px 4px; font-size: 21px; font-weight: 800; letter-spacing: -.015em; }
.mtp-sub { margin: 0 2px 14px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.mtp-pane > .mtp-h { margin-bottom: 12px; }
.mtp-start { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 8px; padding: 30px 20px 24px; text-align: center; border-radius: 28px;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, #22c55e 16%, transparent), transparent 70%), var(--tx-card, var(--surface)); border: 1px solid var(--tx-line, var(--line)); }
.mtp-start .ic { width: 64px; height: 64px; display: grid; place-items: center; font-size: 32px; border-radius: 22px; background: color-mix(in srgb, #22c55e 14%, transparent); animation: mtpfloat 6s ease-in-out infinite; }
.mtp-start b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.mtp-start p { margin: 0 0 8px; max-width: 420px; font-size: 14px; line-height: 1.75; color: var(--muted); }
.mtp-more { margin-top: 30px; }
.mtp-more:empty { display: none; }

/* ================= Brand v2: one palette for the whole app ================= */
/* Emerald for the brand (the flag's green, brighter for screens), a cool teal beside it,
   warm amber for points and highlights; Apple's neutrals. The older rules all read these tokens. */
:root {
  --bg: #f5f5f7; --surface: #ffffff; --raised: #efeff4;
  --ink: #0a0d12; --ink-2: #3c434f; --muted: #7c8594; --line: rgba(10, 13, 18, .08);
  --accent: #00875a; --accent-2: #0ea5a4; --accent-soft: #e3f6ee; --on-accent: #ffffff;
  --brand-grad: linear-gradient(135deg, #10b981 0%, #059669 55%, #0f766e 100%);
  --gold: #f5a524;
  --shadow-1: 0 1px 2px rgba(10, 13, 18, .04), 0 8px 24px rgba(10, 13, 18, .06);
  --shadow-2: 0 2px 8px rgba(10, 13, 18, .06), 0 24px 60px rgba(10, 13, 18, .14);
}
:root[data-theme=dark] {
  --bg: #000000; --surface: #121214; --raised: #1f1f23;
  --ink: #f5f5f7; --ink-2: #c2c5cc; --muted: #8b8f98; --line: rgba(255, 255, 255, .09);
  --accent: #2ed39a; --accent-2: #2cc5d0; --accent-soft: rgba(46, 211, 154, .14); --on-accent: #03140d;
  --brand-grad: linear-gradient(135deg, #34d399 0%, #10b981 50%, #0d9488 100%);
  --glass: rgba(18, 18, 20, .72);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-2: 0 24px 60px rgba(0, 0, 0, .7);
}
.logo { background: var(--brand-grad); box-shadow: 0 6px 16px -6px #10b981; }
/* app icons: one family, soft vertical gradients with a glassy light on top */
.mi { position: relative; overflow: hidden; }
.mi::before { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(rgba(255, 255, 255, .26), rgba(255, 255, 255, 0)); pointer-events: none; }
.mi.soft::before { display: none; }
.c-green { background: linear-gradient(160deg, #34d399, #059669); } .c-teal { background: linear-gradient(160deg, #2dd4bf, #0f766e); }
.c-blue { background: linear-gradient(160deg, #60a5fa, #2563eb); } .c-violet { background: linear-gradient(160deg, #a78bfa, #6d28d9); }
.c-pink { background: linear-gradient(160deg, #fb7185, #e11d48); } .c-amber { background: linear-gradient(160deg, #fbbf24, #ea580c); }
.c-ink { background: linear-gradient(160deg, #475569, #0f172a); } .c-gray { background: linear-gradient(160deg, #9ca3af, #4b5563); }
.c-indigo { background: linear-gradient(160deg, #818cf8, #4338ca); }

/* ================= Home v2 ================= */
.hero { padding: 92px 24px 48px; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 120px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; z-index: 0; }
.hero .eyebrow { font-size: 13.5px; padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.hero h1 em { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; }
.hero-search { border-radius: 26px; }
/* recent and popular trips: one row that slides sideways on a phone, centred on a big screen */
.hm-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; margin: 20px auto 0; }
.hm-chips .chips, .hm-chips .chips[hidden] { display: contents; }
.hm-chips .chips[hidden] > * { display: none; }
.hm-chips .chip { flex: none; height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 14px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); box-shadow: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .2s var(--ease), background .2s, border-color .2s; }
.hm-chips .chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.hm-chips .chip:active { transform: scale(.95); }
.hm-chips .chip svg { color: var(--accent); }

.home { padding-top: 8px; }
.apps { border-radius: 30px; padding: 12px; gap: 4px; }
.apps .mi { box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .45); }
.apps span { color: var(--ink-2); }

/* the day's place, full bleed: the photo slowly drifts, the words sit at its foot */
.hm-feature { position: relative; display: block; width: 100%; margin-top: 22px; aspect-ratio: 16 / 9; max-height: 460px; border-radius: 32px; overflow: hidden; isolation: isolate; text-align: left; color: #fff;
  background: radial-gradient(circle at 80% 10%, rgba(52, 211, 153, .35), transparent 50%), linear-gradient(150deg, #064e3b, #0b1220); box-shadow: var(--shadow-2); transition: transform .35s var(--ease); }
.hm-feature:active { transform: scale(.985); }
.hm-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .8s var(--ease); }
.hm-feature.in img { opacity: 1; animation: hmdrift 22s ease-in-out infinite alternate; }
@keyframes hmdrift { from { transform: scale(1.08) translate(0, 0); } to { transform: scale(1.16) translate(-2%, -1.5%); } }
.hm-fshade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 28%, transparent 42%, rgba(0, 0, 0, .8) 100%); }
.hm-ftag { position: absolute; left: 22px; top: 20px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hm-fcopy { position: absolute; left: 26px; right: 26px; bottom: 26px; display: grid; gap: 4px; }
.hm-fcopy b { font-size: clamp(28px, 5vw, 46px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.hm-fcopy > span { font-size: 15px; opacity: .85; }
.hm-fgo { position: absolute; right: 22px; top: 18px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  color: #052e16; background: rgba(255, 255, 255, .92); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.hm-fgo i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #059669; font-size: 14px; transition: transform .3s var(--ease); }
.hm-feature:hover .hm-fgo i { transform: translateX(3px); }

/* the community card: one clean row with the faces */
.hm-give { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 40px; padding: 24px; border-radius: 30px; color: var(--ink); overflow: hidden;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 45%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.hm-give:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.hm-gcopy { flex: 1; min-width: 0; display: grid; gap: 6px; }
.hm-gtag { justify-self: start; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #b45309; background: color-mix(in srgb, var(--gold) 18%, transparent); }
:root[data-theme=dark] .hm-gtag { color: #fcd34d; }
.hm-gcopy b { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.hm-gcopy > span:not(.hm-gtag):not(.b-faces) { font-size: 15px; color: var(--ink-2); }
.hm-gcopy .b-faces:empty { display: none; }
.hm-garrow { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff; background: var(--brand-grad); box-shadow: 0 12px 24px -12px #059669; transition: transform .3s var(--ease); }
.hm-give:hover .hm-garrow { transform: translateX(4px); }

.stats-band { margin-top: 14px; background: var(--surface); box-shadow: var(--shadow-1); }
.stats-band b { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; }

/* emergency numbers: compact tiles, two to a row on a phone */
#helplines.hm-help { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.hm-help .help { gap: 12px; padding: 14px 16px; border-radius: 22px; border: 1px solid var(--line); }
.hm-help .help .n { min-width: 0; padding: 8px 10px; border-radius: 14px; font-size: 18px; font-weight: 800; color: var(--accent); background: var(--accent-soft); }
.hm-help .help:first-child .n { color: #fff; background: linear-gradient(160deg, #fb7185, #e11d48); }
.hm-help .help b { font-size: 15px; }
.hm-help .help span { font-size: 12.5px; }

@media (max-width: 760px) {
  .hero { padding: 54px 16px 30px; }
  .lead { margin: 12px auto 24px; font-size: 17px; }
  .hm-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 16px -16px 0; padding: 0 16px 4px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); }
  .hm-chips::-webkit-scrollbar { display: none; }
  .apps { border-radius: 26px; padding: 8px 4px; }
  .hm-feature { aspect-ratio: 4 / 5; max-height: 520px; border-radius: 28px; margin-top: 18px; }
  .hm-ftag { left: 16px; top: 16px; }
  .hm-fcopy { left: 20px; right: 20px; bottom: 76px; }
  .hm-fgo { left: 20px; right: auto; top: auto; bottom: 20px; }
  .hm-give { margin-top: 30px; padding: 20px; border-radius: 26px; }
  .hm-garrow { width: 42px; height: 42px; }
  #helplines.hm-help { grid-template-columns: 1fr 1fr; }
  .hm-help .help { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .hm-feature.in img { animation: none; } }

/* ================= রূপসী বাংলা v2: rows that slide, not walls that scroll ================= */
/* the 64 districts: a row per division (App Store style); one division, a search or "been" turns it back into a grid */
.dg-grid.rail { display: flex; gap: 10px; overflow-x: auto; margin: 0 -24px; padding: 2px 24px 10px; scroll-snap-type: x mandatory; scroll-padding: 0 24px; scrollbar-width: none; }
.dg-grid.rail::-webkit-scrollbar { display: none; }
.dg-grid.rail .dg-card { flex: none; width: 172px; scroll-snap-align: start; }
.dg-division { margin-top: 22px; }
.dg-dhead { margin-bottom: 10px; }
.dg-dhead i { width: 12px; height: 12px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 6%, transparent); }
.dg-dhead b { font-size: 18px; letter-spacing: -.01em; }
.dg-dall { margin-left: auto; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--accent); background: var(--accent-soft); transition: transform .2s var(--ease); }
.dg-dall:active { transform: scale(.94); }
.dg-card { border-radius: 24px; box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6); }
.dg-meta b { font-size: 20px; }

/* famous food and goods: one sliding row of picture cards */
.dg-gi.rail { display: flex; gap: 10px; overflow-x: auto; margin: 0 -24px; padding: 2px 24px 12px; scroll-snap-type: x mandatory; scroll-padding: 0 24px; scrollbar-width: none; }
.dg-gi.rail::-webkit-scrollbar { display: none; }
.dg-gi.rail .dg-gi-card { flex: none; width: 190px; scroll-snap-align: start; border-radius: 22px; }

/* the "been there" card: a small passport */
.rb-ring { border-radius: 24px; }
.rb-ring .val { stroke: #10b981; }

@media (max-width: 760px) {
  .dg-grid.rail, .dg-gi.rail { margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding: 0 16px; }
  .dg-grid.rail .dg-card { width: 148px; }
  .dg-gi.rail .dg-gi-card { width: 168px; }
  .rb-ring { background: radial-gradient(circle at 0% 50%, color-mix(in srgb, #10b981 18%, transparent), transparent 55%), var(--tx-card); }
}

/* ================= ট্যুর প্ল্যান v2 (several districts) ================= */
/* chips wear the district's own photo */
.tc-ph { position: relative; flex: none; width: 24px; height: 24px; margin-left: -4px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.tc-ph .dg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-ph .ph-art { transform: scale(.55); }
.trip-chip { padding-left: 8px; transition: transform .2s var(--ease), background .2s, box-shadow .2s; }
.trip-chip.on { padding-right: 10px; box-shadow: 0 8px 18px -10px #059669; }
.trip-sug .trip-chip { background: var(--tx-card, var(--surface)); border: 1px solid var(--tx-line, var(--line)); }
/* the summary: the route's photos behind glass numbers */
.trip-head { isolation: isolate; padding: 22px; border-radius: 30px; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .8); }
.trip-bg { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: 1fr; gap: 2px; }
.trip-bg[data-n="2"] { grid-template-columns: 1fr 1fr; } .trip-bg[data-n="3"] { grid-template-columns: 1fr 1fr 1fr; }
.trip-bg > span { position: relative; overflow: hidden; background: linear-gradient(150deg, #0f766e, #0b1220); }
.trip-bg .dg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: hmdrift 24s ease-in-out infinite alternate; }
.trip-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 12, 10, .2) 0%, rgba(4, 12, 10, .55) 40%, rgba(4, 12, 10, .92) 100%); }
.trip-kicker { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 1; }
.trip-chain span { font-size: 21px; text-shadow: 0 2px 14px rgba(0, 0, 0, .4); }
.trip-stats > div { background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* the day's ride: the bus icon was drawn with no stroke */
.trip-go i svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trip-go i { background: var(--brand-grad, linear-gradient(150deg, #30d158, #0a9f6e)); box-shadow: 0 8px 18px -10px #059669; }
.trip-float { display: inline-flex; }
@media (max-width: 760px) {
  .trip-stats { grid-template-columns: repeat(2, 1fr); }
  .trip-head { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .trip-bg .dg-img { animation: none; } }
.trip-sug { flex-wrap: nowrap; overflow-x: auto; align-items: center; margin: 0 -16px 10px; padding: 2px 16px 6px; scrollbar-width: none; }
.trip-sug::-webkit-scrollbar { display: none; }
.trip-sug > small { flex: none; font-weight: 700; }
.trip-sug .trip-chip { flex: none; }

/* ================= Map: divisions and districts, and the map-type chooser ================= */
.bn-labels .k-division { font-size: 15px; font-weight: 700; letter-spacing: .08em; color: #6b5b95; opacity: .9; }
.bn-labels .k-district { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; color: #7a6f8f; }
:root[data-theme=dark] .bn-labels .k-division { color: #c4b5fd; }
:root[data-theme=dark] .bn-labels .k-district { color: #b3a9c9; }
/* on imagery the names turn white on a dark edge, as in Google's hybrid view */
.bn-labels.on-sat { --halo: rgba(0, 0, 0, .75); --ink-map: #ffffff; }
.bn-labels.on-sat span { color: #fff !important; text-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .9); }
.bn-labels.on-sat .k-road { color: #fde68a !important; }

.mm-sheet { position: absolute; inset: 0; z-index: 1300; display: flex; align-items: flex-start; justify-content: flex-end; padding: 16px 70px 16px 16px; background: transparent; }
.mm-panel { width: min(100%, 360px); padding: 16px; border-radius: 26px; color: var(--ink); background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: var(--shadow-2);
  transform: translateY(-8px) scale(.97); opacity: 0; transform-origin: top right; transition: transform .28s cubic-bezier(.32, .72, 0, 1), opacity .2s; }
.mm-sheet.in .mm-panel { transform: none; opacity: 1; }
.mm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mm-head b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.mm-x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); color: var(--ink-2); }
.mm-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.mm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mm-card { display: grid; gap: 6px; padding: 4px; border-radius: 16px; text-align: center; color: var(--ink-2); border: 2px solid transparent; transition: border-color .2s, transform .2s var(--ease); }
.mm-card:active { transform: scale(.96); }
.mm-card.on { border-color: var(--accent); color: var(--ink); }
.mm-pic { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #e9e6df center / cover; }
/* the standard card: a little drawn map */
.mm-card.standard .mm-pic { background:
  linear-gradient(115deg, transparent 46%, #f9cf6a 46%, #f9cf6a 54%, transparent 54%),
  linear-gradient(20deg, transparent 60%, #ffffff 60%, #ffffff 64%, transparent 64%),
  radial-gradient(circle at 78% 22%, #9fd4f7 0 18%, transparent 19%),
  radial-gradient(circle at 22% 78%, #cfe9bf 0 22%, transparent 23%), #f1eee7; }
:root[data-theme=dark] .mm-card.standard .mm-pic { background:
  linear-gradient(115deg, transparent 46%, #9c8550 46%, #9c8550 54%, transparent 54%),
  linear-gradient(20deg, transparent 60%, #4d5158 60%, #4d5158 64%, transparent 64%),
  radial-gradient(circle at 78% 22%, #12324c 0 18%, transparent 19%),
  radial-gradient(circle at 22% 78%, #1e3a29 0 22%, transparent 23%), #1d1f23; }
/* the hybrid card: the photo with a road and a name on it */
.mm-card.hybrid .mm-pic::after { content: "ঢাকা"; position: absolute; left: 0; right: 0; top: 40%; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000;
  border-top: 3px solid rgba(253, 230, 138, .8); padding-top: 3px; transform: rotate(-12deg); }
.mm-name { font-size: 13px; font-weight: 700; }
.mm-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 12px 4px 2px; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 600; }
.mm-row input { width: 44px; height: 26px; appearance: none; -webkit-appearance: none; border-radius: 999px; background: var(--raised); position: relative; cursor: pointer; transition: background .2s; }
.mm-row input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s var(--ease); }
.mm-row input:checked { background: var(--accent); }
.mm-row input:checked::after { transform: translateX(18px); }
#tool-layers svg { display: block; }
@media (max-width: 760px) {
  .mm-sheet { align-items: flex-end; padding: 0 10px calc(var(--tab-h) + 18px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .18); }
  .mm-panel { width: 100%; transform: translateY(24px); transform-origin: bottom center; }
}

/* Map names, quieter: Google sets country and region names small, grey and spaced, so the map, not its
   lettering, is what the eye meets. Sizes step down from country to shop. */
.bn-labels { --name-quiet: #5d6472; }
:root[data-theme=dark] .bn-labels { --name-quiet: #aeb4bf; }
.bn-labels .k-country { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--name-quiet); }
.bn-labels .k-division { font-size: 12px; font-weight: 600; letter-spacing: .1em; opacity: .85; }
.bn-labels .k-state { font-size: 11px; font-weight: 600; letter-spacing: .08em; opacity: .6; }
.bn-labels .k-city { font-size: 13px; font-weight: 600; }
.bn-labels .k-district { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; }
.bn-labels .k-town { font-size: 12px; font-weight: 600; }
.bn-labels .k-village { font-size: 11.5px; font-weight: 500; }
.bn-labels .k-road { font-size: 11px; font-weight: 600; }
.bn-labels .k-water { font-size: 11.5px; }
.bn-labels .k-poi { font-size: 11.5px; }
.bn-labels.on-sat .k-country, .bn-labels.on-sat .k-division, .bn-labels.on-sat .k-district { color: rgba(255, 255, 255, .92) !important; }

/* ================= Map search, Google style: one box, chips, a place card; directions on a button ================= */
#page-trip:not(.dir-on) #trip-search, #page-trip:not(.dir-on) #sheet { display: none !important; }
#page-trip.dir-on #map-search { display: none; }
.ms { position: relative; z-index: 3; display: grid; gap: 10px; pointer-events: none; }
.ms > * { pointer-events: auto; }
.ms-bar { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 6px 0 18px; border-radius: 999px; border: 1px solid var(--line);
  backdrop-filter: saturate(1.7) blur(24px); -webkit-backdrop-filter: saturate(1.7) blur(24px); }
.ms-bar > [data-ic] { font-size: 20px; color: var(--muted); }
.ms-bar input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font-size: 16.5px; color: var(--ink); }
.ms-bar input::placeholder { color: var(--muted); }
.ms-clear, .ms-dir { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; color: var(--muted); transition: background .2s, transform .15s var(--ease); }
.ms-clear:active, .ms-dir:active { transform: scale(.92); }
.ms-dir { color: #fff; background: var(--brand-grad, var(--accent)); box-shadow: 0 8px 18px -10px #059669; }
.ms-sug { position: static; max-height: 52vh; overflow-y: auto; padding: 6px; border-radius: 22px; }
.ms-sug .sug { border-radius: 14px; }
.ms-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 2px 2px; margin: 0 -2px; }
.ms-chips::-webkit-scrollbar { display: none; }
.ms-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: transform .15s var(--ease); }
.ms-chip:active { transform: scale(.95); }
.ms-chip i { width: 10px; height: 10px; border-radius: 50%; }
.dir-back { margin: -4px 0 6px -4px; }

/* the place card */
.pc { margin-top: auto; padding: 16px 18px 18px; border-radius: 26px; pointer-events: auto; animation: pop .4s var(--ease); }
.pc-head { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.pc-badge { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4); }
.pc-badge svg { width: 22px; height: 22px; }
.pc-t { min-width: 0; display: grid; gap: 2px; }
.pc-t b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.pc-t span { font-size: 13px; color: var(--muted); }
.pc-dist { margin: 12px 0 14px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.pc-link { padding: 0; font-size: 14px; font-weight: 700; color: var(--accent); background: none; border: 0; text-align: left; }
.pc-acts { display: flex; gap: 8px; }
.pc-acts .btn { flex: 1; justify-content: center; height: 46px; }
@media (max-width: 760px) {
  .ms-bar { height: 50px; }
  .pc { margin: auto -10px 0; border-radius: 26px 26px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}
/* the chosen place: a red drop pin, as in Google Maps */
.sel-pin { width: 30px; height: 40px; }
.sel-pin i { display: block; width: 100%; height: 100%; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Cpath d='M15 39C15 39 28 24.5 28 14A13 13 0 0 0 2 14C2 24.5 15 39 15 39Z' fill='%23ea4335' stroke='%23a50e0e' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='14' r='5' fill='%23a50e0e'/%3E%3C/svg%3E");
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); animation: pinDrop .45s cubic-bezier(.32, 1.4, .5, 1) both; }
@keyframes pinDrop { from { transform: translateY(-18px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Home, on a phone: the brand at the top left, the account at the top right — a glass "login" pill, or your photo */
.hm-top { display: none; }
@media (max-width: 760px) {
  .hero > .hm-top { position: absolute; z-index: 5; top: calc(12px + env(safe-area-inset-top)); left: 16px; right: 16px; width: auto !important; margin: 0; display: flex; align-items: center; justify-content: space-between; }
  .hm-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
  .hm-brand .logo { width: 30px; height: 30px; border-radius: 10px; }
  .hm-acct { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 11px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink);
    background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); transition: transform .15s var(--ease); }
  .hm-acct:active { transform: scale(.95); }
  .hm-acct [data-ic], .hm-acct > i { font-size: 18px; display: inline-grid; }
  .hm-acct > i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .hm-acct.me { width: 40px; height: 40px; padding: 2px; justify-content: center; background: var(--brand-grad); border: 0; box-shadow: 0 6px 16px -8px #059669; }
  .hm-acct.me .avatar { width: 36px; height: 36px; box-shadow: 0 0 0 2px var(--surface); }
  .hero { padding-top: calc(70px + env(safe-area-inset-top)); }
}

/* Posts going up in the background (studio.js): a pill at the top of the screen, as Instagram shows it */
.up-stack { position: fixed; z-index: 6000; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(92vw, 380px); display: grid; gap: 8px; pointer-events: none; }
.up-pill { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 8px 14px 12px 8px; border-radius: 18px; pointer-events: auto; overflow: hidden;
  color: var(--ink); background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-2); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  transform: translateY(-16px) scale(.97); opacity: 0; transition: transform .35s cubic-bezier(.32, .72, 0, 1), opacity .25s; }
.up-pill.in { transform: none; opacity: 1; }
.up-pic { width: 40px; height: 40px; border-radius: 10px; background: var(--raised) center / cover; }
.up-t { display: grid; min-width: 0; }
.up-t b { font-size: 14px; font-weight: 800; }
.up-t small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.up-bar > i { display: block; width: 0; height: 100%; background: var(--brand-grad, var(--accent)); transition: width .3s; }
.up-pill.ok b { color: var(--accent); }
.up-pill.bad { cursor: pointer; } .up-pill.bad b { color: #e5484d; } .up-pill.bad .up-bar > i { background: #e5484d; }
/* a feed video waiting for the network: a small turning ring over the picture, not a frozen frame */
.fc-media.buffering::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; z-index: 3; pointer-events: none;
  border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The from/to panel on the map: compact glass, the back arrow beside the two fields, not a tall white card */
#page-trip #trip-search { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px; padding: 6px 8px 6px 4px; border-radius: 22px;
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-2); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
#page-trip #trip-search .dir-back { margin: 0; width: 36px; height: 36px; }
#page-trip #trip-search .od { background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 16px; padding: 0 4px 0 12px; gap: 10px; }
#page-trip #trip-search .dots .l { height: 16px; }
#page-trip #trip-search .field input { padding: 9px 0; font-size: 15px; }
#page-trip #trip-search .field .icon-btn { width: 32px; height: 32px; font-size: 17px; }
#page-trip #trip-search .status { grid-column: 1 / -1; padding: 6px 8px 0; font-size: 13px; }
#page-trip #trip-search .suggest { left: -30px; }

/* How long by each way of going, as Google shows above the route */
.ways { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 10px -2px 2px; padding: 0 2px 2px; }
.ways::-webkit-scrollbar { display: none; }
.way { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  background: var(--raised); border: 1px solid transparent; transition: background .2s, color .2s, transform .15s var(--ease); }
.way:active { transform: scale(.95); }
.way svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.way.on { color: #fff; background: var(--brand-grad, var(--accent)); box-shadow: 0 8px 18px -10px #059669; }
.ways-note { margin: 4px 2px 0; font-size: 12px; color: var(--muted); }

/* ================= Explore v3: comment sheet, cleaner cards, smaller tabs ================= */
/* comments: a sheet from the bottom, as on Instagram (over the feed and over reels) */
.cs { position: fixed; inset: 0; z-index: 3100; background: rgba(0, 0, 0, .42); animation: fade .22s var(--ease); display: flex; align-items: flex-end; justify-content: center; }
.cs-sheet { width: min(560px, 100%); height: min(72dvh, 680px); display: flex; flex-direction: column; background: var(--surface); border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .28); animation: cs-up .34s var(--ease); transition: transform .26s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
:root[data-theme=light] .cs-sheet { background: #fff; }
@keyframes cs-up { from { transform: translateY(100%); } to { transform: none; } }
.cs.out { animation: fade .26s reverse forwards; } .cs.out .cs-sheet { transform: translateY(100%); }
.cs-grip { height: 22px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.cs-grip::before { content: ''; width: 40px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.cs-head { text-align: center; font-weight: 700; font-size: 15.5px; padding: 0 0 12px; border-bottom: 1px solid var(--line); touch-action: none; cursor: grab; }
.cs-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px; }
.cs-list .skeleton { height: 46px; border-radius: 12px; margin: 10px 0; }
.cs-row { display: flex; gap: 12px; padding: 10px 0; animation: rise .3s var(--ease); }
.cs-row .avatar { flex: none; cursor: pointer; }
.cs-t { min-width: 0; flex: 1; }
.cs-top { display: flex; align-items: baseline; gap: 8px; }
.cs-top b { font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--ink); }
.cs-top small { font-size: 12px; color: var(--muted); }
.cs-t p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.cs-none { display: grid; justify-items: center; gap: 6px; padding: 56px 20px; text-align: center; }
.cs-none b { font-size: 19px; font-weight: 700; } .cs-none span { color: var(--muted); font-size: 14px; }
.cs-foot { border-top: 1px solid var(--line); padding: 8px 12px 10px; }
.cs-quick { display: flex; justify-content: space-between; padding: 2px 4px 8px; }
.cs-quick button { font-size: 25px; line-height: 1; padding: 4px; border-radius: 10px; transition: transform .15s var(--ease); }
.cs-quick button:active { transform: scale(1.25); }
.cs-form { display: flex; align-items: center; gap: 10px; }
.cs-form input { flex: 1; min-width: 0; height: 42px; padding: 0 16px; border-radius: 21px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: inherit; font-size: 15px; outline: none; }
.cs-form input:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.cs-send { font-weight: 700; font-size: 15px; color: var(--accent); padding: 8px 4px; transition: opacity .2s; }
.cs-send:disabled { opacity: .35; }
.cs-off { text-align: center; color: var(--muted); padding: 10px; font-size: 14px; }

/* the feed: no hard line around pictures on phones; captions and counts like Instagram */
@media (max-width: 760px) { .fc-media { border: 0; } }
.fc { border-bottom: 0; padding-bottom: 6px; margin-bottom: 14px; }
.fc-all { color: var(--muted); padding: 4px 0 0; }
.fc-likes { font-weight: 700; }
/* Feed · Reels · Live: smaller pills */
.ex-tabs { gap: 6px; }
.ex-tabs button { padding: 6px 13px; border-radius: 999px; font-size: 13.5px; }
.ex-tabs [data-ic] { font-size: 15px; }
/* the post window: the name in full ink, the heart without a 0 */
.post-who .t b { color: var(--ink); }

/* ================= Messages v3 ================= */
/* a name inside a row's text is the name, not the grey line under it (those rules match any span in .t) */
.person .t b .nm, .who b .nm, .t b.no-tr > .nm { color: inherit; font-size: inherit; margin-top: 0; display: inline; }
/* unread, as on Instagram: the name and the last line bold and dark, a blue dot */
#chat-list .person.unread .t b, #chat-list .person.unread .t span { color: var(--ink); font-weight: 700; }
/* the loudspeaker (and any toggle) lit when on, as on an iPhone call */
.call-btn.on { background: #fff; color: #0b0f14; }
/* the hover buttons beside a bubble never make the conversation scroll sideways */
.chat-msgs { overflow-x: hidden; }
/* All · Unread · Groups · Requests: smaller pills, as in Explore */
.chat-tabs { gap: 6px; }
.chat-tabs button { padding: 6px 13px; border-radius: 999px; font-size: 13.5px; }

/* ================= Profile v3: open like Instagram's, no box around it ================= */
.prof-card { padding: 4px 0 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.prof-top { gap: 22px; }
.prof-pic { padding: 3px; }
.prof-pic .avatar.xl { width: 120px; height: 120px; font-size: 50px; box-shadow: 0 0 0 3px var(--bg); }
.prof-card .stat b { font-size: 19px; font-weight: 700; }
.prof-card .stat span { font-size: 13.5px; color: var(--ink-2); }
.prof-card .prof-info { margin-top: 14px; }
.prof-info h2, .prof-info h2.no-tr { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.prof-info p { margin: 4px 0 8px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.prof-info p.dim { color: var(--muted); }
/* points: a quiet chip, not a black pill */
.prof-info .chip.points { background: var(--raised); color: var(--ink); border: 0; font-size: 13px; font-weight: 600; padding: 5px 11px; }
.prof-info .chip.points svg { color: #f5a623; fill: #f5a623; stroke: #f5a623; }
/* the buttons: equal, one line, Instagram's grey */
.prof-actions { gap: 8px; margin-top: 14px; }
.prof-actions .btn { height: 38px; min-height: 0; padding: 0 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; white-space: nowrap; box-shadow: none; }
.prof-actions .btn svg { width: 16px; height: 16px; }
.prof-dash { margin-top: 10px; padding: 10px 14px; border-radius: 12px; }
.prof-dash b { font-size: 14px; } .prof-dash em { font-size: 12.5px; }
.prof-tabs { margin: 18px 0 2px; }
@media (max-width: 760px) {
  .prof-pic .avatar.xl { width: 86px; height: 86px; font-size: 36px; }
  .prof-top { gap: 14px; }
  .prof-card .stat b { font-size: 17px; }
  .prof-card .stat span { font-size: 13px; }
}
/* a video's own picture when it has no cover */
.tile-post video.frame, .hp video.frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: #111; }
/* the home row's text posts keep their colour (the card's own background came later and covered it) */
.hp.g0 { background: linear-gradient(135deg, #0a8f62, #0b5f6a); } .hp.g1 { background: linear-gradient(135deg, #6b4de6, #c13584); }
.hp.g2 { background: linear-gradient(135deg, #f97316, #db2777); } .hp.g3 { background: linear-gradient(135deg, #2563eb, #06b6d4); } .hp.g4 { background: linear-gradient(135deg, #111827, #4b5563); }
/* an empty profile, as on Instagram: a ring with the icon, no dashed box */
.prof-none { border: 0; padding: 48px 20px; color: var(--ink); }
.prof-none .ic { width: 64px; height: 64px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font-size: 28px; opacity: 1; }
.prof-none b { font-size: 18px; font-weight: 700; }