/* Timely — light / dark design system */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/PlusJakartaSans-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/PlusJakartaSans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/PlusJakartaSans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ================================================================ tokens */
:root {
  --bg: #f4f5ef;
  --surface: #ffffff;
  --surface-2: #efeded;
  --fg: #1b1c1c;
  --dim: #5b5f6b;
  --faint: #c2c6d6;
  --line: #e7e5e5;
  --primary: #4a7d00;
  --primary-2: #b8f000;
  --primary-soft: #eefbcf;
  --on-primary: #0b0d02;
  --lime: #c6ff00;
  --danger: #d93025;
  --ok: #12a150;
  --like: #e5484d;
  --glass: rgba(255, 255, 255, .86);
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, .16);
  --map-sea: #dfe9f5;
  --map-land: #f6f4ef;
  --map-border: #c9cdd4;
  --map-grat: #d3dde9;
  --head: 64px;
  --navb: 68px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --r: 24px; --rk: 1;
  --display: "Anton", Impact, "Arial Narrow", "Helvetica Neue", sans-serif;
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
:root[data-theme="dark"] {
  --bg: #04050a;
  --surface: rgba(16, 19, 26, .82);
  --surface-2: #171b24;
  --fg: #f1f4e8;
  --dim: #9ba393;
  --faint: #2c313b;
  --line: #1f2430;
  --primary: #c6ff00;
  --primary-2: #c6ff00;
  --primary-soft: rgba(198, 255, 0, .12);
  --on-primary: #0b0d02;
  --glass: rgba(6, 8, 13, .72);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 14px 44px rgba(0, 0, 0, .65);
  --map-sea: #060a14;
  --map-land: #1a2130;
  --map-border: #313a4c;
  --map-grat: #0f1626;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: 15px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
  transition: background .25s, color .25s;
}
button, select, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
img, video { display: block; }
::selection { background: var(--primary-soft); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s, fill .2s;
}
kbd { font: inherit; font-size: .68rem; font-weight: 700; border: 1px solid currentColor; border-radius: 6px; padding: 0 .35rem; opacity: .75; }

/* ================================================================ header */
header.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: calc(var(--head) + var(--safe-t));
  padding: var(--safe-t) 1.5rem 0;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; white-space: nowrap; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-mark rect { fill: var(--primary-2); }
.brand-mark circle, .brand-mark path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: var(--primary-2); }
:root[data-theme="dark"] .brand-name { color: var(--fg); }
.nav-desktop { display: flex; gap: .2rem; }
.nav-desktop .nav-item {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .9rem; border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--dim);
  transition: background .2s, color .2s;
}
.nav-desktop .nav-item .ic { width: 20px; height: 20px; }
.nav-desktop .nav-item:hover { background: var(--surface-2); color: var(--fg); }
.nav-desktop .nav-item.active { background: var(--primary-soft); color: var(--primary); }
.nav-desktop .badge { position: absolute; top: -2px; right: -2px; }
.top-right { display: flex; align-items: center; gap: .35rem; }
.theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; }
:root[data-theme="dark"] .theme-btn .moon { display: none; }
.phone-only { display: none !important; }

.shutter-sm {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: var(--on-primary);
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(198, 255, 0, .28);
  transition: transform .15s;
}
.shutter-sm:hover { transform: scale(1.06); }
.shutter-sm .ic { width: 20px; height: 20px; }
.avatar-btn { position: relative; border-radius: 50%; margin-inline-start: .25rem; }
.avatar-btn .badge { position: absolute; top: 0; right: 0; }

.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  overflow: hidden; font-weight: 800; font-size: 1rem; text-transform: uppercase;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 36px; height: 36px; font-size: .85rem; }
.avatar.sm .ic { width: 18px; height: 18px; }
.avatar.lg { width: 88px; height: 88px; font-size: 2rem; }
.avatar.ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }

.badge {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--like); color: #fff; font-size: .62rem; font-weight: 800;
  box-shadow: 0 0 0 2px var(--surface);
}
.badge.dot { min-width: 0; width: 10px; height: 10px; padding: 0; }

/* ================================================================ shared bits */
main .view { display: none; }
main .view.active { display: block; }

.eyebrow { font-size: .72rem; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; color: var(--dim); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .6rem 1.15rem; border-radius: 999px;
  background: var(--surface-2); color: var(--fg);
  font-size: .88rem; font-weight: 700; white-space: nowrap; text-decoration: none;
  transition: background .2s, color .2s, transform .1s, filter .2s;
}
.btn .ic { width: 19px; height: 19px; }
.btn:hover { filter: brightness(.96); }
:root[data-theme="dark"] .btn:hover { filter: brightness(1.15); }
.btn:active { transform: scale(.97); }
.btn.sm { min-height: 34px; padding: .35rem .85rem; font-size: .8rem; }
.btn.wide { width: 100%; margin-top: 1.25rem; }
.btn.primary, .silver-btn { background: var(--primary-2); color: var(--on-primary); }
.btn.ghost { background: none; border: 1.5px solid var(--line); }
.btn.danger { color: var(--danger); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none; color: var(--fg);
  transition: background .2s, color .2s;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active .ic { transform: scale(.88); }
.icon-btn.lg .ic { width: 28px; height: 28px; }
.icon-btn.send { background: var(--primary-2); color: var(--on-primary); }
.icon-btn.send .ic { width: 19px; height: 19px; }

.flag { height: .8em; width: auto; margin-inline-end: .4em; vertical-align: -.05em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); display: inline-block; }
.dim { color: var(--dim); }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: live 1.8s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

select {
  background: var(--surface-2); border: 0; border-radius: 999px;
  min-height: 44px; padding: .6rem 2.4rem .6rem 1.1rem; max-width: 100%;
  font-size: .9rem; font-weight: 600;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
  cursor: pointer;
}

/* ================================================================ clock */
.clock-view { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; text-align: center; }
.clock-card { background: var(--surface); border: 1px solid var(--line); border-radius: calc(32px * var(--rk)); padding: 2.5rem 2rem; box-shadow: var(--shadow); }
.state-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin-top: .5rem; }
.big-time {
  font-size: clamp(4rem, 15vw, 12rem); font-weight: 800; line-height: 1; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; color: var(--primary-2);
  margin: 1.6rem 0 .8rem;
  display: flex; justify-content: center; align-items: baseline;
}
:root[data-theme="dark"] .big-time { color: var(--fg); }
.big-time .colon { color: var(--faint); padding: 0 .02em; }
.big-time .ampm { font-size: .16em; letter-spacing: .05em; font-weight: 700; color: var(--dim); margin-inline-start: .5em; }
.date-line { color: var(--dim); font-size: .95rem; font-weight: 500; }
.bars { max-width: 520px; margin: 2.5rem auto 0; display: grid; gap: 1rem; }
.bar-row { display: grid; grid-template-columns: 80px 1fr 64px; align-items: center; gap: 1rem; }
.bar-row span { font-size: .75rem; font-weight: 700; color: var(--dim); text-align: start; }
.bar-row span:last-child { text-align: end; font-variant-numeric: tabular-nums; color: var(--fg); }
.bar { height: 8px; border-radius: 4px; background: var(--surface-2); position: relative; overflow: hidden; }
.fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: linear-gradient(90deg, var(--primary), var(--primary-2)); transition: width .35s ease-out; }
.picker { margin-top: 2.5rem; display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.zones-title { margin: 2.5rem 0 1rem; text-align: start; }
.zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.zone { background: var(--surface); border: 1px solid var(--line); border-radius: calc(18px * var(--rk)); padding: 1rem 1.1rem; text-align: start; transition: background .3s, color .3s; }
.zone .zn { font-size: .72rem; font-weight: 700; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone .zt { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: .35rem; }
.zone .za { font-size: .72rem; color: var(--dim); margin-top: .2rem; }
.zone.active { background: var(--primary-2); color: var(--on-primary); border-color: var(--primary-2); }
.zone.active .zn, .zone.active .za { color: rgba(255, 255, 255, .75); }

/* ================================================================ map */
.map-view { padding: 1rem 1.25rem 1.5rem; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; max-width: 1600px; margin: 0 auto; }
.map-stage {
  position: relative; min-width: 0; overflow: hidden;
  height: calc(100dvh - var(--head) - var(--safe-t) - var(--ann, 0px) - 2.5rem); min-height: 440px;
  border-radius: calc(28px * var(--rk)); background: var(--map-sea); border: 1px solid var(--line); box-shadow: var(--shadow);
}
#view-map[data-mode="world"] [data-for="us"],
#view-map[data-mode="us"] [data-for="world"] { display: none !important; }
.map-wrap { position: absolute; inset: 0; overflow: hidden; touch-action: none; background: var(--map-sea); }
.map-wrap svg { display: block; width: 100%; height: 100%; cursor: grab; -webkit-user-select: none; user-select: none; }
.map-wrap svg:active { cursor: grabbing; }

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: var(--shadow);
}
.map-top { position: absolute; z-index: 5; top: .75rem; left: .75rem; right: .75rem; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.map-top > * { pointer-events: auto; }
.map-toolbar { display: flex; gap: .5rem; align-items: center; }
.search {
  display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; max-width: 440px; min-width: 0;
  height: 46px; padding: 0 1rem; border-radius: 999px; color: var(--dim);
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow);
  border: 1.5px solid transparent;
}
.search:focus-within { border-color: var(--primary); }
.search .ic { width: 19px; height: 19px; }
.search input { background: none; border: 0; outline: none; width: 100%; font-size: .92rem; font-weight: 500; color: var(--fg); }
.search input::placeholder { color: var(--dim); }
.seg { display: inline-flex; flex: none; padding: 4px; gap: 2px; border-radius: 999px; background: var(--surface-2); }
.map-toolbar .seg { background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow); margin-inline-start: auto; }
.seg-btn { padding: .45rem 1rem; min-height: 36px; border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--dim); transition: background .2s, color .2s; }
.seg-btn.active { background: var(--primary-2); color: var(--on-primary); }
.chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: .45rem .9rem; min-height: 36px; border-radius: 999px;
  font-size: .82rem; font-weight: 700; white-space: nowrap; color: var(--fg);
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
  transition: background .2s, color .2s;
}
.chip:hover { color: var(--primary); }
.chip.active { background: var(--primary-2); color: var(--on-primary); }

.zoom-ctrls { display: flex; flex-direction: column; gap: .4rem; position: absolute; z-index: 4; right: .75rem; top: 50%; transform: translateY(-50%); }
.ctrl {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: calc(14px * var(--rk));
  font-size: 1.25rem; font-weight: 600; color: var(--fg);
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow);
  transition: color .2s, background .2s;
}
.ctrl .ic { width: 20px; height: 20px; }
.ctrl:hover { color: var(--primary); }
.ctrl.on { background: var(--primary-2); color: var(--on-primary); }
.tooltip {
  position: absolute; pointer-events: none; z-index: 6;
  background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg);
  padding: .5rem .8rem; border-radius: calc(12px * var(--rk)); font-size: .8rem; line-height: 1.45;
  white-space: nowrap; opacity: 0; transition: opacity .12s;
  transform: translate(-50%, calc(-100% - 14px));
}
.tooltip b { font-weight: 700; }
.tooltip small { color: var(--dim); }
.map-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font-size: .9rem; font-weight: 600; }

/* US */
.state { fill: var(--map-land); stroke: var(--map-border); stroke-width: .8; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .2s; }
.state.selected { fill: var(--primary-soft); stroke: var(--primary); stroke-width: 2; }
.lbl { fill: var(--dim); font-weight: 700; letter-spacing: .03em; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.lbl.selected { fill: var(--primary); }
@media (hover: hover) { .state:hover { fill: var(--primary-soft); } }

/* world overlay */
.sphere { fill: var(--map-sea); stroke: var(--map-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grat { fill: none; stroke: var(--map-grat); stroke-width: .7; vector-effect: non-scaling-stroke; pointer-events: none; }
.utc { fill: var(--dim); opacity: .6; font-weight: 700; text-anchor: middle; pointer-events: none; }
.map-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; pointer-events: none; will-change: transform; }
#world { position: relative; z-index: 1; }
.c-sel { fill: var(--primary); fill-opacity: .1; stroke: var(--primary); stroke-linejoin: round; pointer-events: none; }
.c-hover { fill: var(--primary); fill-opacity: .1; stroke: none; pointer-events: none; }
.dot { fill: var(--primary-2); stroke: var(--surface); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; }
.dot.selected { fill: var(--surface); stroke: var(--primary); stroke-width: 2; }
.clbl { fill: var(--fg); stroke: var(--map-land); paint-order: stroke; stroke-linejoin: round; text-anchor: middle; pointer-events: none; font-weight: 700; }
.clbl .t { font-weight: 600; font-variant-numeric: tabular-nums; fill: var(--dim); }
.zooming .state { transition: none; }
.zooming .person .pulse { animation-play-state: paused; }

/* friends on the map (Snapchat-style bubbles) */
.person { cursor: pointer; }
.person .ring { fill: var(--primary-soft); stroke: #fff; stroke-width: 3; }
.person.me .ring { stroke: var(--primary); }
.person .pi { fill: var(--primary-2); font-size: 11px; font-weight: 800; text-anchor: middle; dominant-baseline: central; text-transform: uppercase; pointer-events: none; }
.person .plb { fill: var(--surface); stroke: var(--line); stroke-width: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.person.me .plb { fill: var(--primary-2); stroke: none; }
.person .plt { fill: var(--fg); font-size: 9.5px; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; font-variant-numeric: tabular-nums; }
.person.me .plt { fill: #fff; }
.person .plt .pt { fill: var(--dim); font-weight: 600; }
.person.me .plt .pt { fill: rgba(255, 255, 255, .8); }
.person .on { fill: #22c55e; stroke: #fff; stroke-width: 2; }
.person .pulse { fill: none; stroke: var(--primary); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(2.2); opacity: 0; } }


/* map bottom: friends strip + friend sheet */
.map-bottom { position: absolute; z-index: 5; left: .75rem; right: 4.25rem; bottom: .75rem; display: flex; flex-direction: column; gap: .6rem; pointer-events: none; }
.map-bottom > * { pointer-events: auto; }
.people { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.people::-webkit-scrollbar { display: none; }
.people:empty { display: none; }
.fchip {
  flex: none; display: flex; align-items: center; gap: .55rem; max-width: 240px;
  padding: .35rem .9rem .35rem .35rem; border-radius: 999px; text-align: start;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow);
  transition: transform .15s;
}
.fchip:active { transform: scale(.97); }
.fchip .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--faint); }
.fchip.online .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #22c55e; }
.fchip.active { outline: 2px solid var(--primary); }
.fc-meta { min-width: 0; }
.fc-name { font-size: .85rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-sub { font-size: .75rem; font-weight: 600; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fchip.share { background: var(--primary-2); color: var(--on-primary); padding: .35rem 1rem .35rem .4rem; }
.fchip.share .fc-sub { color: rgba(255, 255, 255, .8); }
.fchip.share .bub { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; }
.fchip.share .bub .ic { width: 19px; height: 19px; }

.person-card {
  width: min(440px, 100%); padding: 1.1rem; border-radius: calc(24px * var(--rk));
  background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .9rem;
  animation: rise .22s ease-out;
}
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
.pc-top { display: flex; align-items: center; gap: .8rem; }
.pc-who { flex: 1; min-width: 0; }
.pc-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.pc-sub { font-size: .8rem; color: var(--dim); margin-top: .15rem; font-weight: 500; }
.pc-sub .ic { width: 14px; height: 14px; vertical-align: -2px; }
.pc-time { font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--primary-2); }
:root[data-theme="dark"] .pc-time { color: var(--fg); }
.pc-time small { font-size: .8rem; font-weight: 700; letter-spacing: 0; color: var(--dim); margin-inline-start: .35rem; }
.pc-facts { display: flex; flex-wrap: wrap; gap: .4rem; }
.pc-facts span { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; background: var(--surface-2); font-size: .78rem; font-weight: 700; }
.pc-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.pc-btns .btn { flex-direction: column; gap: .2rem; min-height: 60px; padding: .5rem .3rem; border-radius: calc(18px * var(--rk)); font-size: .75rem; }
.pc-btns .btn .ic { width: 22px; height: 22px; }
.pc-btns.two { grid-template-columns: 1fr 1fr; }

/* side panel */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(28px * var(--rk)); box-shadow: var(--shadow);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; align-self: start; min-width: 0;
  max-height: calc(100dvh - var(--head) - var(--safe-t) - var(--ann, 0px) - 2.5rem); overflow-y: auto;
}
.panel > div[data-for] { display: flex; flex-direction: column; gap: 1rem; }
.p-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-top: -.4rem; }
.p-time { font-size: 2.8rem; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--primary-2); }
:root[data-theme="dark"] .p-time { color: var(--fg); }
.p-time small { font-size: .85rem; font-weight: 700; letter-spacing: 0; color: var(--dim); margin-inline-start: .4rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; font-size: .88rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.kv dt { color: var(--dim); font-size: .78rem; font-weight: 700; padding-top: .1rem; }
.kv dd { text-align: end; font-weight: 600; }
.note { font-size: .82rem; line-height: 1.55; color: var(--dim); }
.note:empty { display: none; }
.zlist { border-top: 1px solid var(--line); max-height: 260px; overflow-y: auto; }
.zlist:empty { display: none; }
.zrow { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.zrow .zc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.zrow .zo { color: var(--dim); font-size: .74rem; }
.zrow .zv { text-align: end; font-variant-numeric: tabular-nums; grid-row: span 2; align-self: center; font-size: 1rem; font-weight: 800; }
.zrow.main .zc::after { content: "MAIN"; font-size: .6rem; font-weight: 800; margin-inline-start: .5rem; padding: .1rem .4rem; border-radius: 6px; background: var(--primary-soft); color: var(--primary); }
.panel-btns { display: flex; gap: .4rem; }
.panel-btns .btn { flex: 1; padding-inline: .5rem; }

/* ================================================================ moments */
.col { max-width: 580px; margin: 0 auto; padding: 1.75rem 1rem 3rem; }
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.view-head h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; }
.feed { display: flex; flex-direction: column; gap: 1.25rem; }
.post { background: var(--surface); border: 1px solid var(--line); border-radius: calc(28px * var(--rk)); padding: 1rem; box-shadow: var(--shadow); }
.post-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; }
.post-who { flex: 1; min-width: 0; }
.post-name { font-size: .95rem; font-weight: 800; }
.post-meta { font-size: .76rem; color: var(--dim); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-media { position: relative; aspect-ratio: 1; border-radius: calc(20px * var(--rk)); overflow: hidden; background: var(--surface-2); touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.post-media img, .post-media video { width: 100%; height: 100%; object-fit: cover; }
.pill {
  position: absolute; background: rgba(0, 0, 0, .5); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 999px; padding: .4rem .75rem; font-size: .75rem; font-weight: 700;
}
.post-media .when { left: .8rem; top: .8rem; font-variant-numeric: tabular-nums; }
.post-media .cap { left: 50%; bottom: 1rem; transform: translateX(-50%); font-size: .9rem; font-weight: 600; padding: .5rem 1rem; max-width: 86%; text-align: center; overflow-wrap: anywhere; }
.post-media .mute { right: .7rem; bottom: .7rem; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; }
.post-media .mute .ic { width: 18px; height: 18px; }
.post-media .cap ~ .mute { bottom: auto; top: .7rem; }
.heart-pop { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; animation: pop .8s ease-out forwards; color: #fff; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .3)); }
.heart-pop .ic { width: 100%; height: 100%; fill: currentColor; stroke-width: 1; }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 60% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
.post-actions { display: flex; align-items: center; gap: .1rem; margin: .4rem -.45rem 0; }
.post-actions .spacer { flex: 1; }
.act { display: inline-flex; align-items: center; gap: .35rem; min-width: 44px; height: 44px; padding: 0 .45rem; font-size: .85rem; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.act .ic { width: 24px; height: 24px; }
.act:active .ic { transform: scale(.85); }
.act.liked { color: var(--like); }
.act.liked .ic { fill: currentColor; }
.act.liked .ic.bump { animation: bump .35s; }
@keyframes bump { 40% { transform: scale(1.3); } }
.post-cmts { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; line-height: 1.45; }
.post-cmts b { font-weight: 800; margin-inline-end: .35rem; }
.linkish { color: var(--dim); font-size: .85rem; font-weight: 600; text-align: start; padding: .2rem 0; }
.linkish.danger { display: block; margin: 1.2rem auto 0; color: var(--danger); text-decoration: underline; text-underline-offset: 3px; }
.feed-empty { background: var(--surface); border: 1px solid var(--line); border-radius: calc(28px * var(--rk)); padding: 2.5rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; color: var(--dim); font-size: .92rem; line-height: 1.6; }
.feed-empty .ic { width: 40px; height: 40px; stroke-width: 1.5; }
.feed-empty .shutter-sm .ic { width: 32px; height: 32px; stroke-width: 1.8; }
.shutter-sm.big { width: 72px; height: 72px; }
.shutter-sm.big .ic { width: 32px; height: 32px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.grid3 .g { aspect-ratio: 1; border-radius: calc(12px * var(--rk)); overflow: hidden; background: var(--surface-2); padding: 0; border: 0; cursor: pointer; display: block; }
.grid3 .g:hover { opacity: .85; }
.grid3 img, .grid3 video { width: 100%; height: 100%; object-fit: cover; }

/* ================================================================ chat */
.chat-layout {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); max-width: 1200px; margin: 1rem auto 0;
  height: calc(100dvh - var(--head) - var(--safe-t) - var(--ann, 0px) - 2rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(28px * var(--rk)); overflow: hidden; box-shadow: var(--shadow);
}
.chat-list-col { border-inline-end: 1px solid var(--line); overflow-y: auto; padding: 1.25rem .75rem; }
.chat-list-col .view-head { padding: 0 .5rem; }
.chat-list { display: flex; flex-direction: column; gap: .15rem; }
.chat-row { display: flex; gap: .8rem; align-items: center; width: 100%; padding: .7rem .6rem; text-align: start; border-radius: calc(18px * var(--rk)); transition: background .15s; }
.chat-row:hover { background: var(--surface-2); }
.chat-row.active { background: var(--primary-soft); }
.cr-main { flex: 1; min-width: 0; }
.cr-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.cr-name { font-size: .95rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-time { font-size: .72rem; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-last { font-size: .82rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .15rem; }
.chat-row.unread .cr-last { color: var(--fg); font-weight: 700; }
.chat-row .badge { flex: none; }
.convo { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; background: var(--bg); }
.convo-head, .composer, .xpick { flex: none; }
.convo-empty { margin: auto; color: var(--dim); font-size: .92rem; }
.convo-head { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.ch-who { flex: 1; min-width: 0; }
.ch-name { font-weight: 800; font-size: 1rem; }
.ch-sub { font-size: .76rem; color: var(--dim); margin-top: .1rem; font-variant-numeric: tabular-nums; }
.convo .back { display: none; }
.msgs > * { flex-shrink: 0; }   /* the list scrolls — bubbles must never be squashed to fit */
.msgs { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-anchor: auto; padding: 1rem; display: flex; flex-direction: column; gap: .25rem; overscroll-behavior: contain; }
.msgs .list-empty { margin: auto; text-align: center; }
.msg {
  max-width: 76%; align-self: flex-start;
  background: var(--surface-2); padding: .6rem .95rem; border-radius: calc(20px * var(--rk)) calc(20px * var(--rk)) calc(20px * var(--rk)) 6px;
  font-size: .95rem; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap;
}
.msg.mine { align-self: flex-end; background: var(--primary-2); color: var(--on-primary); border-radius: calc(20px * var(--rk)) calc(20px * var(--rk)) 6px calc(20px * var(--rk)); }
.msg.media { padding: 0; background: none; border-radius: calc(18px * var(--rk)); overflow: hidden; }
.msg.media img, .msg.media video { display: block; max-width: min(280px, 66vw); max-height: 360px; border-radius: calc(18px * var(--rk)); background: var(--surface-2); }
.msg.media .mtext { padding: .45rem .3rem 0; font-size: .88rem; }
.msg.mine.media .mtext { text-align: end; color: var(--fg); }
.msg.pending { opacity: .5; }
.day-sep { align-self: center; font-size: .72rem; font-weight: 700; color: var(--dim); margin: 1rem 0 .5rem; padding: .25rem .75rem; border-radius: 999px; background: var(--surface-2); }
.msg-time { font-size: .68rem; color: var(--dim); margin: .1rem .5rem .55rem; align-self: flex-start; font-variant-numeric: tabular-nums; }
.msg-time.mine { align-self: flex-end; }
.older { align-self: center; margin-bottom: .5rem; }
.composer { display: flex; align-items: center; gap: .4rem; padding: .6rem .75rem; border-top: 1px solid var(--line); background: var(--surface); }
.composer input {
  flex: 1; min-width: 0;
  background: var(--surface-2); border: 1.5px solid transparent; border-radius: 999px;
  padding: .7rem 1.1rem; font-size: .95rem; outline: none;
}
.composer input:focus { border-color: var(--primary); }

/* ================================================================ me / auth */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: calc(24px * var(--rk)); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.card h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.profile-top { display: flex; align-items: center; gap: 1.1rem; }
.profile-top .who { flex: 1; min-width: 0; }
.profile-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.profile-handle { color: var(--dim); font-size: .88rem; margin-top: .2rem; }
.avatar-edit { position: relative; border-radius: 50%; }
.avatar-edit .plus { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-2); color: var(--on-primary); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--surface); }
.avatar-edit .plus .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .8rem; font-weight: 700; color: var(--dim); }
.field input, .field textarea, .inline-input {
  background: var(--surface-2); border: 1.5px solid transparent; border-radius: calc(14px * var(--rk));
  padding: .8rem 1rem; font-size: .95rem; outline: none; width: 100%;
}
.field input:focus, .field textarea:focus, .inline-input:focus { border-color: var(--primary); background: var(--surface); }
.field textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
.field label .rec, .field label .opt { margin-inline-start: .4rem; padding: .1rem .45rem; border-radius: 6px; font-size: .66rem; background: var(--surface-2); }
.field label .rec { color: var(--primary); background: var(--primary-soft); }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row > .inline-input { flex: 1; min-width: 0; }
.err { font-size: .85rem; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-radius: calc(12px * var(--rk)); padding: .6rem .8rem; }
.err:empty { display: none; }
.hint { font-size: .78rem; color: var(--dim); min-height: 1em; }
.hint:empty { display: none; }
.hint.bad { color: var(--danger); }
.hint.bad::before { content: '✕ '; }
.hint.ok { color: var(--ok); }
.hint.ok::before { content: '✓ '; }
.auth-hero { text-align: center; padding: 1rem 0 1.75rem; }
.auth-hero h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; }
.auth-hero p { color: var(--dim); font-size: .92rem; margin-top: .6rem; line-height: 1.6; }
.auth-alt { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.auth-cover { display: block; width: 100%; max-height: 220px; object-fit: cover; margin-bottom: 1.5rem; border-radius: calc(24px * var(--rk)); }
.seg.full { display: flex; }
.seg.full .seg-btn { flex: 1; }
.loc-line { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; }
.user-row { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.user-row:last-child { border-bottom: 0; }
.user-row .meta { flex: 1; min-width: 0; }
.user-row .nm { font-size: .92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-row .sub { font-size: .76rem; color: var(--dim); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-row .row { gap: .4rem; flex-wrap: nowrap; }
.list-empty { color: var(--dim); font-size: .88rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.2rem; }
.brand-logo { display: block; height: 30px; width: auto; max-width: 160px; object-fit: contain; }
.contact-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.done-box { display: flex; flex-direction: column; gap: .8rem; font-size: .92rem; line-height: 1.6; }
.warn-line { font-size: .84rem; border-radius: calc(14px * var(--rk)); background: var(--surface-2); padding: .75rem .9rem; color: var(--dim); line-height: 1.5; }
.ic.inline { width: 1em; height: 1em; vertical-align: -.15em; margin-inline-start: .3em; }

/* ================================================================ sheets: camera + comments */
.sheet {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 12, 16, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: fade .18s ease-out;
}
@keyframes fade { from { opacity: 0; } }
#camera { background: #000; color: #fff; }
#camera .icon-btn { color: #fff; }
#camera .icon-btn:hover { background: rgba(255, 255, 255, .12); }
.cam {
  width: min(500px, 100%); height: 100%; max-height: 940px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  padding: calc(var(--safe-t) + .5rem) 1rem calc(var(--safe-b) + 1.2rem);
}
.cam-top { display: flex; align-items: center; justify-content: space-between; }
.cam-title { font-size: .95rem; font-weight: 800; }
.cam-frame { position: relative; width: 100%; aspect-ratio: 1; border-radius: calc(40px * var(--rk)); overflow: hidden; background: #15171a; flex: none; }
.cam-frame video { width: 100%; height: 100%; object-fit: cover; }
.cam-frame video.mirror { transform: scaleX(-1); }
.cam-frame::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .18s; }
.cam-frame.flash::after { opacity: .85; transition: none; }
.cam-preview { position: absolute; inset: 0; }
.cam-preview:empty { display: none; }
.cam-preview img, .cam-preview video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.cam-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; color: #aaa; font-size: .9rem; text-align: center; padding: 2rem; line-height: 1.6; }
.cam-rec { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .6); padding: .35rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 700; display: flex; align-items: center; gap: .45rem; font-variant-numeric: tabular-nums; }
.cam-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.cam-caption input {
  width: 100%; background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid transparent; border-radius: 999px;
  padding: .85rem 1.1rem; font-size: .95rem; text-align: center; outline: none;
}
.cam-caption input:focus { border-color: var(--primary); }
.cam-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: 1rem; }
#cam-send-row { grid-template-columns: 1fr 1fr; justify-items: stretch; }
#cam-send-row .btn:not(.primary) { background: rgba(255, 255, 255, .14); color: #fff; }
.cam-shutter {
  width: 86px; height: 86px; position: relative; display: grid; place-items: center;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.cam-shutter svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cam-shutter .ring-bg { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 3.5; }
.cam-shutter .ring { fill: none; stroke: #ff4d4f; stroke-width: 4; stroke-dasharray: 232.5; stroke-dashoffset: 232.5; }
.cam-shutter span { width: 66px; height: 66px; border-radius: 50%; background: #fff; transition: transform .2s, border-radius .2s, background .2s; }
.cam-shutter:active span { transform: scale(.92); }
.cam-shutter.recording span { transform: scale(.55); border-radius: calc(16px * var(--rk)); background: #ff4d4f; }
.cam-shutter[disabled] { opacity: .35; }
.cam-hint { font-size: .7rem; font-weight: 700; color: #aaa; line-height: 1.6; text-align: center; }

.sheet-card {
  width: min(540px, 100%); max-height: 82dvh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: calc(28px * var(--rk)); overflow: hidden; box-shadow: var(--shadow-lg);
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: .5rem .5rem .5rem 1.25rem; border-bottom: 1px solid var(--line); font-size: 1rem; font-weight: 800; }
.sheet-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; min-height: 120px; }
.share-foot { display: flex; gap: .6rem; padding: 1rem 1.2rem calc(1rem + var(--safe-b)); border-top: 1px solid var(--line); }
.share-foot .btn { flex: 1; }
.cmt { display: flex; gap: .7rem; }
.cmt-b { font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.cmt-b b { font-weight: 800; margin-inline-end: .35rem; }
.cmt-t { font-size: .72rem; color: var(--dim); margin-top: .2rem; }

/* popover menu */
.pop {
  position: fixed; z-index: 110; min-width: 190px; padding: .35rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(16px * var(--rk)); box-shadow: var(--shadow-lg);
  animation: fade .12s ease-out;
}
.pop button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .65rem .8rem; border-radius: calc(10px * var(--rk)); font-size: .9rem; font-weight: 600; text-align: start; }
.pop button:hover { background: var(--surface-2); }
.pop button .ic { width: 19px; height: 19px; }
.pop .danger { color: var(--danger); }

/* ================================================================ toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 120;
  max-width: min(92vw, 420px);
  background: var(--fg); color: var(--bg);
  padding: .75rem 1.15rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
  box-shadow: var(--shadow-lg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }

/* ================================================================ forums (Threads / X) */
.fx { display: grid; grid-template-columns: minmax(0, 620px) 310px; gap: 1.5rem; justify-content: center; padding: 1rem 1.25rem 3rem; }
.f-main { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: calc(28px * var(--rk)); overflow: clip; box-shadow: var(--shadow); align-self: start; }
.f-tabs {
  position: sticky; top: calc(var(--head) + var(--safe-t)); z-index: 6;
  display: flex; border-bottom: 1px solid var(--line);
  background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.f-tab { position: relative; flex: 1; padding: 1rem .4rem; font-size: .9rem; font-weight: 700; color: var(--dim); white-space: nowrap; }
.f-tab:hover { background: var(--surface-2); }
.f-tab.active { color: var(--fg); }
.f-tab.active::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: var(--primary); }
.f-bar {
  position: sticky; top: calc(var(--head) + var(--safe-t)); z-index: 6;
  display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border-bottom: 1px solid var(--line);
  background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.f-bar h2 { font-size: 1.1rem; font-weight: 800; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-compose { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.f-compose textarea {
  width: 100%; min-height: 2.8rem; max-height: 50vh; resize: none; border: 0; outline: none; background: none;
  font-size: 1.05rem; line-height: 1.45; padding-top: .55rem;
}
.f-compose textarea::placeholder { color: var(--dim); }
.f-tools { display: flex; align-items: center; gap: .15rem; margin-top: .5rem; }
.f-tools .icon-btn { width: 38px; height: 38px; color: var(--primary); }
.f-tools .icon-btn .ic { width: 20px; height: 20px; }
.f-count { margin-inline-start: auto; margin-inline-end: .5rem; font-size: .78rem; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.f-count.over { color: var(--danger); }
.f-prev { position: relative; margin-top: .6rem; border-radius: calc(18px * var(--rk)); overflow: hidden; background: var(--surface-2); }
.f-prev img, .f-prev video { width: 100%; max-height: 320px; object-fit: cover; }
.f-prev .f-x { position: absolute; top: .5rem; right: .5rem; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; }
.f-prev .f-x .ic { width: 16px; height: 16px; }
.f-poll-edit { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; padding: .75rem; border: 1.5px solid var(--line); border-radius: calc(18px * var(--rk)); }
.f-poll-edit .inline-input { padding: .6rem .85rem; border-radius: calc(12px * var(--rk)); font-size: .9rem; }
.f-poll-edit .row { justify-content: space-between; }

.thread { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 .75rem; padding: .9rem 1rem .4rem; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.thread:hover { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.thread.chain { border-bottom: 0; }
.thread.focus { cursor: default; }
.thread.focus:hover { background: none; }
.thread.new { animation: flashIn 1.2s ease-out; }
@keyframes flashIn { from { background: var(--primary-soft); } }
.t-ctx { grid-column: 2; display: flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; color: var(--dim); margin-bottom: .2rem; }
.t-ctx .ic { width: 15px; height: 15px; }
.t-left { display: flex; flex-direction: column; align-items: center; }
.t-line { flex: 1; width: 2px; min-height: 12px; margin: .35rem 0 -.4rem; border-radius: 2px; background: var(--line); }
.t-body { min-width: 0; }
.t-head { display: flex; align-items: center; gap: .35rem; min-width: 0; font-size: .9rem; }
.t-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.t-name:hover { text-decoration: underline; }
.t-handle, .t-ago { color: var(--dim); white-space: nowrap; font-size: .84rem; }
.t-handle { overflow: hidden; text-overflow: ellipsis; flex: 0 2 auto; min-width: 0; }
.t-tz {
  display: inline-flex; align-items: center; gap: .25rem; flex: none;
  padding: .1rem .5rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary);
  font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.t-tz .flag { height: .78em; margin: 0; }
.t-tz .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.t-more { margin-inline-start: auto; width: 32px; height: 32px; color: var(--dim); }
.t-more .ic { width: 18px; height: 18px; }
.t-text { font-size: .98rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .1rem; }
.thread.focus .t-text { font-size: 1.15rem; }
.t-text .t-tag, .t-text a { color: var(--primary); text-decoration: none; font-weight: 600; }
.t-media { margin-top: .6rem; border-radius: calc(18px * var(--rk)); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.t-media img, .t-media video { width: 100%; max-height: 540px; object-fit: cover; }
.t-poll { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.t-opt {
  position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: .75rem;
  padding: .65rem .95rem; border-radius: calc(14px * var(--rk)); border: 1.5px solid var(--line);
  font-size: .9rem; font-weight: 700; text-align: start;
}
button.t-opt:hover { border-color: var(--primary); color: var(--primary); }
.t-opt .bar { position: absolute; inset: 0 auto 0 0; height: auto; border-radius: 0; background: var(--primary-soft); transition: width .4s; }
.t-opt span { position: relative; }
.t-opt.mine { border-color: var(--primary); }
.t-opt.mine span:first-of-type::after { content: ' ✓'; color: var(--primary); }
.t-poll-foot { font-size: .78rem; color: var(--dim); font-weight: 600; }
.t-acts { display: flex; justify-content: space-between; max-width: 440px; margin: .25rem -.5rem 0; }
.t-act { display: inline-flex; align-items: center; gap: .3rem; height: 36px; padding: 0 .55rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
.t-act .ic { width: 19px; height: 19px; }
.t-act:hover { color: var(--primary); background: var(--primary-soft); }
.t-act.like:hover, .t-act.like.on { color: var(--like); }
.t-act.like:hover { background: color-mix(in srgb, var(--like) 12%, transparent); }
.t-act.rp:hover, .t-act.rp.on { color: var(--ok); }
.t-act.rp:hover { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.t-act.on .ic { fill: currentColor; }
.t-act.rp.on .ic { fill: none; stroke-width: 2.6; }
.t-act.sv.on { color: var(--primary); }
.t-act:active .ic { transform: scale(.85); }
.t-stats { display: flex; gap: 1rem; padding: .7rem 0; margin-top: .6rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--dim); }
.t-stats b { color: var(--fg); font-weight: 800; }
.f-more { display: flex; justify-content: center; padding: 1rem; }
.f-empty { padding: 3rem 1.5rem; text-align: center; color: var(--dim); display: flex; flex-direction: column; align-items: center; gap: .9rem; line-height: 1.6; }
.f-empty .ic { width: 40px; height: 40px; stroke-width: 1.5; color: var(--primary); }
.f-empty b { color: var(--fg); font-size: 1.05rem; }
.f-loading { display: grid; place-items: center; padding: 2.5rem; }
.f-bell { position: relative; display: grid; place-items: center; }
.f-bell .ic { width: 21px; height: 21px; }
.f-dot { position: absolute; top: .8rem; right: .9rem; width: 8px; height: 8px; border-radius: 50%; background: var(--like); }
.f-newpill { position: sticky; top: calc(var(--head) + var(--safe-t) + 3.6rem); z-index: 5; padding: .6rem; pointer-events: none; }
.f-newpill .btn { pointer-events: auto; box-shadow: var(--shadow-lg); }

.f-side { position: sticky; top: calc(var(--head) + var(--safe-t) + 1rem); align-self: start; display: flex; flex-direction: column; gap: 1rem; }
.f-card { background: var(--surface); border: 1px solid var(--line); border-radius: calc(24px * var(--rk)); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.f-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .5rem; letter-spacing: -.01em; }
.f-card p { font-size: .86rem; color: var(--dim); line-height: 1.55; }
.f-row { display: flex; align-items: center; gap: .65rem; padding: .5rem 0; width: 100%; text-align: start; }
.f-row .meta { flex: 1; min-width: 0; }
.f-row .nm { font-weight: 800; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-row .sub { font-size: .76rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-row .fz { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .95rem; }
.f-awake { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: .35rem; background: #22c55e; }
.f-awake.night { background: #8b5cf6; }

.f-prof { padding: 1.25rem 1rem 0; border-bottom: 1px solid var(--line); }
.f-prof-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.f-prof h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.f-prof .handle { color: var(--dim); font-size: .9rem; }
.f-prof .bio { margin-top: .75rem; line-height: 1.5; white-space: pre-wrap; }
.f-prof .facts { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .75rem; font-size: .86rem; color: var(--dim); }
.f-prof .facts b { color: var(--fg); font-weight: 800; }
.f-prof .btns { display: flex; gap: .5rem; margin-top: 1rem; }
.f-prof .btns .btn { flex: 1; }
.f-prof .f-tabs { position: static; margin: 1rem -1rem 0; border-bottom: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.f-notif { display: flex; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.f-notif:hover { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.f-notif .kind { width: 32px; display: grid; place-items: start center; padding-top: .3rem; color: var(--primary); }
.f-notif .kind.like { color: var(--like); }
.f-notif .kind.repost { color: var(--ok); }
.f-notif .meta { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.45; }
.f-notif .meta .q { color: var(--dim); margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fab {
  display: none; position: fixed; z-index: 45; right: 1rem; bottom: calc(var(--navb) + var(--safe-b) + 1rem);
  width: 58px; height: 58px; border-radius: calc(20px * var(--rk)); place-items: center;
  background: var(--primary-2); color: var(--on-primary); box-shadow: 0 8px 24px rgba(198, 255, 0, .28);
}
.fab .ic { width: 26px; height: 26px; }

/* ================================================================ World Match (Omegle-style) */
.m-wrap { display: flex; height: calc(100dvh - var(--head) - var(--safe-t) - var(--ann, 0px)); padding: 1rem 1.25rem; }
.m-gate { margin: auto; width: 100%; max-width: 1040px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; align-items: center; }
.m-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
.m-hero h1 em { font-style: normal; color: var(--primary); }
.m-hero > p { color: var(--dim); font-size: 1.02rem; line-height: 1.6; margin-top: 1rem; max-width: 30rem; }
.m-live { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .84rem; font-weight: 700; margin-bottom: 1.2rem; box-shadow: var(--shadow); }
.m-orbit { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: .65rem .55rem; min-height: 190px; padding: 1.2rem .75rem; margin-top: 1.6rem; border-radius: calc(28px * var(--rk)); overflow: hidden; background: radial-gradient(circle at 50% 120%, var(--primary-soft), transparent 70%); }
.m-orbit .fb {
  position: relative; display: flex; align-items: center; gap: .4rem; padding: .35rem .7rem .35rem .4rem; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow); font-size: .78rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
  animation: bob 5s ease-in-out infinite;
}
.m-orbit .fb img { height: 18px; width: 18px; border-radius: 50%; object-fit: cover; }
.m-orbit .fb small { color: var(--dim); font-weight: 600; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.m-card { background: var(--surface); border: 1px solid var(--line); border-radius: calc(32px * var(--rk)); padding: 1.6rem; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 1.1rem; }
.m-card h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.m-card .lbl2 { font-size: .8rem; font-weight: 700; color: var(--dim); margin-bottom: .45rem; }
.m-tags { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .45rem; border-radius: calc(16px * var(--rk)); background: var(--surface-2); border: 1.5px solid transparent; min-height: 50px; }
.m-tags:focus-within { border-color: var(--primary); background: var(--surface); }
.m-tags input { flex: 1; min-width: 120px; border: 0; outline: none; background: none; padding: .35rem .4rem; font-size: .92rem; }
.m-tag { display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .4rem .3rem .75rem; border-radius: 999px; background: var(--primary-2); color: var(--on-primary); font-size: .82rem; font-weight: 700; }
.m-tag button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.m-tag .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.m-sugg { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.m-sugg button { padding: .3rem .7rem; border-radius: 999px; border: 1.5px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--dim); }
.m-sugg button:hover { border-color: var(--primary); color: var(--primary); }
.m-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; color: var(--dim); line-height: 1.5; cursor: pointer; }
.m-check input { width: 18px; height: 18px; margin-top: .1rem; accent-color: var(--primary-2); flex: none; }
.m-start { min-height: 56px; font-size: 1.05rem; width: 100%; }
.m-start .ic { width: 22px; height: 22px; }
.m-note { font-size: .78rem; color: var(--dim); text-align: center; line-height: 1.5; }

.m-room { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; min-height: 0; width: 100%; max-width: 1560px; margin: 0 auto; }
.m-stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; min-height: 0; }
.m-tile { position: relative; border-radius: calc(28px * var(--rk)); overflow: hidden; background: #0d1014; min-height: 0; color: #fff; }
.m-tile video { width: 100%; height: 100%; object-fit: cover; background: #0d1014; }
.m-tile video.mirror { transform: scaleX(-1); }
.m-you { position: absolute; left: .75rem; bottom: .75rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(0, 0, 0, .5); font-size: .75rem; font-weight: 800; }
.m-camoff { position: absolute; inset: 0; display: grid; place-items: center; background: #15191f; }
.m-camoff .avatar { width: 96px; height: 96px; font-size: 2.2rem; }
.m-over {
  position: absolute; z-index: 2; left: .85rem; top: .85rem; right: .85rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.m-who {
  display: flex; align-items: center; gap: .6rem; padding: .4rem .9rem .4rem .45rem; border-radius: 999px;
  background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.m-who .mflag { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .15); display: grid; place-items: center; flex: none; }
.m-who .mflag img { width: 100%; height: 100%; object-fit: cover; }
.m-who .mn { font-weight: 800; font-size: .95rem; line-height: 1.15; }
.m-who .mt { font-size: .78rem; font-weight: 600; opacity: .85; font-variant-numeric: tabular-nums; }
.m-who { max-width: 100%; min-width: 0; }
.m-who > div { min-width: 0; }
.m-who .mn, .m-who .mt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-common { display: flex; gap: .3rem; flex-wrap: wrap; }
.m-common span { padding: .3rem .65rem; border-radius: 999px; background: rgba(0, 100, 224, .75); font-size: .74rem; font-weight: 800; }
.m-wait { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; text-align: center; padding: 1.5rem; background: radial-gradient(circle at 50% 45%, #13233d, #0d1014 70%); }
.m-wait b { font-size: 1.2rem; font-weight: 800; }
.m-wait p { font-size: .88rem; opacity: .75; max-width: 22rem; line-height: 1.5; }
.m-radar { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.m-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #7aa9ff; animation: radar 2.4s ease-out infinite; opacity: 0; }
.m-radar i:nth-child(2) { animation-delay: .8s; }
.m-radar i:nth-child(3) { animation-delay: 1.6s; }
@keyframes radar { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
.m-radar .ic { width: 42px; height: 42px; color: #7aa9ff; }
.m-panel { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: calc(28px * var(--rk)); overflow: hidden; box-shadow: var(--shadow); }
.m-ice { margin: .75rem .75rem 0; padding: .75rem .9rem; border-radius: calc(18px * var(--rk)); background: var(--primary-soft); display: flex; gap: .6rem; align-items: flex-start; }
.m-ice .ic { width: 20px; height: 20px; color: var(--primary); margin-top: .1rem; }
.m-ice div { flex: 1; min-width: 0; }
.m-ice small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.m-ice p { font-size: .9rem; font-weight: 600; line-height: 1.4; margin-top: .1rem; }
.m-ice button { color: var(--primary); width: 32px; height: 32px; }
.m-msgs { flex: 1; overflow-y: auto; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .35rem; overscroll-behavior: contain; }
.m-msg { max-width: 85%; padding: .5rem .85rem; border-radius: calc(18px * var(--rk)); font-size: .92rem; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; align-self: flex-start; background: var(--surface-2); }
.m-msg.me { align-self: flex-end; background: var(--primary-2); color: var(--on-primary); }
.m-msg.sys { align-self: center; background: none; color: var(--dim); font-size: .78rem; font-weight: 600; text-align: center; padding: .2rem; }
.m-ctrls { display: flex; align-items: center; gap: .45rem; padding: .7rem .75rem; border-top: 1px solid var(--line); }
.m-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--fg); transition: background .2s, color .2s; }
.m-btn .ic { width: 21px; height: 21px; }
.m-btn.off { background: var(--danger); color: #fff; }
.m-btn.keep.on { background: var(--like); color: #fff; }
.m-next { flex: 1; min-height: 46px; }
.m-stop { min-height: 46px; }
.m-room.text .m-stage { display: none; }
.m-room.text { grid-template-columns: minmax(0, 720px); justify-content: center; }
.m-room.text .m-panel .m-head { display: flex; }
.m-head { display: none; align-items: center; gap: .7rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.m-head .mn { font-weight: 800; }
.m-head .mt { font-size: .8rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.m-head .flag { height: 1em; }
.m-kbd { padding: 0 .75rem .65rem; font-size: .72rem; color: var(--dim); text-align: center; }
.m-kbd kbd { font: inherit; font-weight: 800; padding: .05rem .4rem; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); }
.m-btn[disabled] { opacity: .4; pointer-events: none; }

/* ================================================================ phone */
.nav-bottom { display: none; }

@media (max-width: 1100px) and (min-width: 900px) {
  .fx { grid-template-columns: minmax(0, 620px); }
  .f-side { display: none; }
  .m-room { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 899px) {
  :root { --head: 56px; }
  header.top { padding: var(--safe-t) .75rem 0 1rem; }
  .nav-desktop, .desktop-only { display: none !important; }
  .phone-only { display: inline-grid !important; }
  .top-right { gap: .1rem; }
  .icon-btn.hd { width: 40px; height: 40px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { font-size: 1.2rem; }
  main { padding-bottom: calc(var(--navb) + var(--safe-b)); }
  input, select, textarea { font-size: 16px !important; }   /* stops iOS zooming into inputs */

  .nav-bottom {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(var(--navb) + var(--safe-b)); padding-bottom: var(--safe-b);
    background: var(--glass);
    -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
    border-top: 1px solid var(--line);
  }
  .nav-bottom .nav-item {
    position: relative; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: .68rem; font-weight: 700; color: var(--dim);
  }
  .nav-bottom .nav-item.active { color: var(--primary); }
  .nav-bottom .nav-item.active .ic { stroke-width: 2.3; }
  .nav-bottom .badge { position: absolute; top: 8px; left: calc(50% + 6px); }
  .shutter {
    justify-self: center; width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: var(--on-primary);
    display: grid; place-items: center;
    box-shadow: 0 0 0 4px var(--bg), 0 6px 18px rgba(198, 255, 0, .28);
    transform: translateY(-10px);
    transition: transform .15s;
  }
  .shutter:active { transform: translateY(-10px) scale(.93); }
  .shutter .ic { width: 26px; height: 26px; }
  .toast { bottom: calc(var(--navb) + var(--safe-b) + 14px); }

  .clock-view { padding: 1rem .75rem 2rem; }
  .clock-card { padding: 1.75rem 1rem; border-radius: calc(28px * var(--rk)); }
  .big-time { margin-top: 1.2rem; }
  .bars { margin-top: 2rem; }
  .bar-row { grid-template-columns: 64px 1fr 52px; gap: .6rem; }
  .picker { margin-top: 2rem; }
  .picker select { flex: 1 1 100%; }
  .zones-title { margin-top: 2rem; }
  .zones { grid-template-columns: repeat(2, 1fr); }
  .zone { padding: .9rem; }
  .zone .zt { font-size: 1.15rem; }

  /* map fills the screen between header and tab bar */
  .map-view { padding: 0 0 1rem; }
  .map-layout { display: block; }
  .map-stage { height: calc(100dvh - var(--head) - var(--safe-t) - var(--ann, 0px) - var(--navb) - var(--safe-b)); min-height: 380px; border-radius: 0; border: 0; box-shadow: none; }
  .map-top { top: .6rem; left: .6rem; right: .6rem; }
  .map-toolbar { flex-wrap: nowrap; }
  .search { height: 44px; padding: 0 .85rem; }
  .map-toolbar .seg-btn { padding: .4rem .7rem; font-size: .8rem; }
  .zoom-ctrls { right: .6rem; top: auto; bottom: 7.2rem; transform: none; }
  .ctrl { width: 40px; height: 40px; }
  .map-bottom { left: .6rem; right: .6rem; bottom: .6rem; }
  .map-bottom:has(.person-card:not([hidden])) .people { display: none; }
  .person-card { width: 100%; }
  .map-bottom:has(.person-card:not([hidden])) ~ .zoom-ctrls,
  .map-stage:has(.person-card:not([hidden])) .zoom-ctrls { display: none; }
  .panel { margin: .75rem .75rem 0; padding: 1.1rem; border-radius: calc(24px * var(--rk)); max-height: none; }

  .col { padding: 1rem .75rem 2rem; }
  .post { border-radius: calc(24px * var(--rk)); padding: .85rem; }

  .chat-layout { display: block; height: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .chat-list-col { border-inline-end: 0; padding: 1rem .5rem; overflow: visible; }
  .convo { display: none; }
  .chat-layout.open .convo { display: flex; position: fixed; inset: 0; z-index: 70; padding-top: var(--safe-t); }
  .convo .back { display: inline-grid; margin-inline-start: -.5rem; }
  .composer { padding-bottom: calc(.6rem + var(--safe-b)); }

  .sheet:has(.sheet-card) { align-items: flex-end; }
  .sheet-card { border-radius: calc(28px * var(--rk)) calc(28px * var(--rk)) 0 0; max-height: 88dvh; }

  /* forums */
  .fx { display: block; padding: 0; }
  .f-main { border: 0; border-radius: 0; box-shadow: none; background: var(--bg); }
  .f-side { display: none; }
  .fab { display: grid; }
  .f-tab { font-size: .84rem; padding: .9rem .25rem; }
  .thread { padding: .85rem .85rem .35rem; }
  .f-compose { padding: .85rem; }
  .t-acts { max-width: none; }

  /* match: partner full screen, you in the corner, chat floats over the video */
  .m-wrap { padding: 0; height: calc(100dvh - var(--head) - var(--safe-t) - var(--ann, 0px) - var(--navb) - var(--safe-b)); }
  .m-gate { grid-template-columns: 1fr; gap: 1.1rem; padding: 1rem .75rem 2rem; margin: 0; align-self: flex-start; }
  .m-wrap:has(.m-gate) { height: auto; min-height: calc(100dvh - var(--head) - var(--safe-t) - var(--ann, 0px) - var(--navb) - var(--safe-b)); }
  .m-hero h1 { font-size: 2.1rem; }
  .m-hero > p { font-size: .95rem; margin-top: .6rem; }
  .m-live { margin-bottom: .8rem; }
  .m-orbit { min-height: 0; padding: .9rem .5rem; gap: .5rem .4rem; margin-top: 1rem; }
  .m-orbit .fb:nth-child(n+7) { display: none; }
  .m-card { padding: 1.2rem; border-radius: calc(28px * var(--rk)); }
  .m-room { position: relative; display: block; height: 100%; }
  .m-stage { display: block; position: absolute; inset: 0; }
  .m-tile.peer { position: absolute; inset: 0; border-radius: 0; }
  .m-tile.self { position: absolute; z-index: 4; right: .75rem; top: 4.4rem; width: 28%; max-width: 128px; height: auto; aspect-ratio: 3 / 4; border-radius: calc(18px * var(--rk)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), var(--shadow-lg); }
  .m-you { display: none; }
  .m-panel {
    position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; max-height: 58%;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .72) 30%); border: 0; border-radius: 0; box-shadow: none; color: #fff;
  }
  .m-ice { background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); margin-top: 1.5rem; }
  .m-ice small, .m-ice .ic, .m-ice button { color: #b9d2ff; }
  .m-msgs { max-height: 26dvh; flex: 0 1 auto; -webkit-mask-image: linear-gradient(transparent, #000 1.5rem); mask-image: linear-gradient(transparent, #000 1.5rem); }
  .m-msg { background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .m-msg.sys { background: none; color: rgba(255, 255, 255, .75); }
  .m-panel .composer { background: none; border: 0; padding-bottom: .3rem; }
  .m-panel .composer input { background: rgba(255, 255, 255, .16); color: #fff; }
  .m-panel .composer input::placeholder { color: rgba(255, 255, 255, .7); }
  .m-ctrls { border: 0; padding: .3rem .75rem .75rem; }
  .m-ctrls .m-btn { background: rgba(255, 255, 255, .16); color: #fff; }
  .m-ctrls .m-btn.off { background: var(--danger); }
  .m-room.text { display: flex; }
  .m-room.text .m-panel { position: static; flex: 1; max-height: none; background: var(--surface); color: var(--fg); }
  .m-room.text .m-msgs { max-height: none; flex: 1; -webkit-mask-image: none; mask-image: none; }
  .m-room.text .m-msg { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .m-room.text .m-msg.me { background: var(--primary-2); }
  .m-room.text .m-msg.sys { background: none; color: var(--dim); }
  .m-room.text .m-ice { background: var(--primary-soft); margin-top: .75rem; }
  .m-room.text .m-ice small, .m-room.text .m-ice .ic, .m-room.text .m-ice button { color: var(--primary); }
  .m-room.text .composer input { background: var(--surface-2); color: var(--fg); }
  .m-room.text .composer input::placeholder { color: var(--dim); }
  .m-room.text .m-ctrls .m-btn { background: var(--surface-2); color: var(--fg); }
  .m-over { top: .75rem; right: 8.5rem; }
  .m-over .mdiff { display: none; }
  .m-kbd { display: none; }
}

@media (max-width: 380px) {
  .brand-name { font-size: 1.05rem; }
  .icon-btn.hd { width: 36px; height: 36px; }
  .big-time .ampm { margin-inline-start: .3em; }
  .f-tab { font-size: .78rem; }
  .pc-btns .btn { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================================================================ admin switches (features off → their tabs vanish) */
[data-off~="forums"] [data-tab="forums"], [data-off~="match"] [data-tab="match"],
[data-off~="moments"] [data-tab="moments"], [data-off~="chat"] [data-tab="chat"] { display: none !important; }
[data-nocalls] [data-call], [data-nocalls] [data-vcall], [data-nortc] [data-call], [data-nortc] [data-vcall],
[data-novoice] [data-voice-to], [data-norec] [data-voice-to] { display: none !important; }
:root:not([data-novoice]):not([data-norec]) .composer.vc:not(.has-text) .send { display: none; }
.composer.vc.has-text .mic { display: none; }
.composer .mic { background: var(--primary-soft); color: var(--primary); }
.pc-btns:has(.hd-call) { grid-template-columns: repeat(3, 1fr); }
[data-nocalls] .pc-btns:has(.hd-call), [data-nortc] .pc-btns:has(.hd-call) { grid-template-columns: repeat(4, 1fr); }
.convo-head .hd-call { color: var(--primary); }

/* ================================================================ announcement banner */
.announce {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem .55rem 1rem;
  font-size: .86rem; font-weight: 600; line-height: 1.35;
  background: var(--primary-soft); color: var(--fg); border-bottom: 1px solid var(--line);
}
.announce .an-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary, #fff); }
.announce .an-ic .ic { width: 16px; height: 16px; }
.announce .an-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.announce a { flex: none; font-weight: 800; color: var(--primary); text-decoration: none; padding: .3rem .6rem; border-radius: 999px; background: var(--surface); }
.announce .an-x { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--dim); }
.announce .an-x:hover { background: var(--surface); }
.announce .an-x .ic { width: 16px; height: 16px; }
.announce.tone-success { background: color-mix(in srgb, var(--ok) 14%, var(--bg)); }
.announce.tone-success .an-ic { background: var(--ok); }
.announce.tone-warning { background: color-mix(in srgb, #f5a524 18%, var(--bg)); }
.announce.tone-warning .an-ic { background: #e08a00; }
.announce.tone-promo { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 22%, var(--bg)), color-mix(in srgb, var(--like) 18%, var(--bg))); }

/* ================================================================ World Match: @username + Add */
.m-at { font-weight: 600; opacity: .7; font-size: .85em; }
.m-overrow { display: flex; align-items: center; gap: .5rem; max-width: 100%; min-width: 0; }
.m-overrow .m-who { flex: 0 1 auto; }
.m-addpill {
  flex: none; display: inline-flex; align-items: center; gap: .35rem; height: 36px; padding: 0 .9rem 0 .7rem; border-radius: 999px;
  background: var(--primary); color: var(--on-primary, #fff); font-weight: 800; font-size: .82rem; transition: background .2s, transform .15s;
}
.m-addpill:active { transform: scale(.95); }
.m-addpill .ic { width: 17px; height: 17px; }
.m-addpill.on { background: var(--surface-2); color: var(--ok); }
.m-addpill.dark.on { background: rgba(0, 0, 0, .5); color: #7ee2a8; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.m-addpill:empty { display: none; }
.m-btn.keep.on { background: var(--ok); color: #fff; }
.m-sysadd {
  display: inline-flex; align-items: center; gap: .3rem; margin: .35rem auto .1rem; padding: .35rem .8rem; border-radius: 999px;
  background: var(--primary); color: var(--on-primary, #fff); font-weight: 800; font-size: .78rem;
}
.m-sysadd[disabled] { background: var(--surface-2); color: var(--ok); }
.m-msg.sys .m-sysadd { display: flex; width: max-content; max-width: 100%; }

/* ================================================================ chat: call bubbles + voice notes */
.msg.callm, .msg.voice { padding: 0; background: none; }
.callb {
  display: flex; align-items: center; gap: .65rem; padding: .6rem 1rem .6rem .6rem; border-radius: calc(20px * var(--rk));
  background: var(--surface-2); color: var(--fg); text-align: start; min-width: 200px;
}
.msg.callm.mine .callb { background: var(--primary-soft); }
.callb .cb-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ok); color: #fff; }
.callb.bad .cb-ic { background: var(--danger); }
.callb .cb-ic .ic { width: 19px; height: 19px; }
.callb .cb-t { display: flex; flex-direction: column; min-width: 0; }
.callb b { font-size: .9rem; white-space: nowrap; }
.callb small { font-size: .72rem; color: var(--dim); font-weight: 600; }
.callb:hover { filter: brightness(.97); }

.vnote {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .9rem .45rem .45rem; border-radius: calc(22px * var(--rk));
  width: min(270px, 68vw); background: var(--surface-2); color: var(--fg);
}
.msg.voice.mine .vnote { background: var(--primary-2); color: var(--on-primary); }
.vn-play { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); }
.msg.voice.mine .vn-play { background: #fff; color: var(--primary-2); }
.vn-play .ic { width: 16px; height: 16px; }
.vn-bars { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.vn-bars i { flex: 1; min-width: 2px; border-radius: 2px; background: currentColor; opacity: .32; transition: opacity .15s; }
.vn-bars i.on { opacity: 1; }
.vn-time { flex: none; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .85; min-width: 2.4em; text-align: end; }

/* ================================================================ voice recorder sheet */
.vrec {
  position: fixed; inset: 0; z-index: 115; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, 0); transition: background .2s; padding: 0 .75rem calc(.75rem + var(--safe-b, 0px));
}
.vrec.in { background: rgba(0, 0, 0, .35); }
.vrec-card {
  width: min(460px, 100%); background: var(--surface); border-radius: calc(28px * var(--rk)); padding: 1.1rem 1.1rem 1rem; box-shadow: var(--shadow-lg);
  transform: translateY(30px); opacity: 0; transition: transform .22s, opacity .22s;
}
.vrec.in .vrec-card { transform: none; opacity: 1; }
@media (min-width: 900px) { .vrec { align-items: center; } }
.vrec-top { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.vrec-top > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: vrecDot 1s ease-in-out infinite; flex: none; }
@keyframes vrecDot { 50% { opacity: .25; } }
.vrec-max { font-size: .75rem; color: var(--dim); font-weight: 700; }
.vrec-wave { height: 64px; display: flex; align-items: center; gap: 3px; margin: .9rem 0 .4rem; }
.vrec-wave i { flex: 1; height: 100%; border-radius: 3px; background: var(--primary); transform: scaleY(.08); transition: transform .09s linear; }
.vrec-time { text-align: center; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: .9rem; }
.vrec-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: .6rem; }
.vrec-btns .btn { justify-content: center; min-height: 50px; }

/* ================================================================ call screen */
body.in-call { overflow: hidden; }
.call {
  position: fixed; inset: 0; z-index: 112; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #1c2a44, #0b0e13 72%);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--safe-t, 0px) + .75rem) 1rem calc(var(--safe-b, 0px) + 1.25rem);
  animation: callIn .22s ease-out;
}
@keyframes callIn { from { opacity: 0; transform: scale(1.02); } }
.call[hidden] { display: none; }
.call-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.call-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.3) brightness(.45); transform: scale(1.2); }
.call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background: #000; opacity: 0; transition: opacity .3s; }
.call.audio .call-remote { width: 1px; height: 1px; }
.call.live .call-remote { opacity: 1; }
.call-peeroff { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; background: #11151b; font-weight: 700; color: rgba(255, 255, 255, .7); }
.call-self {
  position: absolute; z-index: 4; right: 1rem; top: calc(var(--safe-t, 0px) + 4rem);
  width: 30vw; max-width: 200px; aspect-ratio: 3 / 4; border-radius: calc(20px * var(--rk)); overflow: hidden; background: #222;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 12px 32px rgba(0, 0, 0, .4); cursor: pointer; transition: all .25s;
}
@media (min-width: 900px) { .call-self { aspect-ratio: 4 / 3; width: 240px; max-width: 240px; } }
.call-self video { width: 100%; height: 100%; object-fit: cover; }
.call-self video.mirror, .call-remote.mirror { transform: scaleX(-1); }
.call-selfoff { position: absolute; inset: 0; display: grid; place-items: center; background: #1a1f27; }
.call-selfoff .ic { width: 28px; height: 28px; opacity: .7; }
/* before the call connects, your own camera fills the screen behind the ringing UI */
.call.video:not(.live):not(.s-ended) .call-self { inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; z-index: 1; cursor: default; }
.call.video:not(.live):not(.s-ended) .call-self::after { content: ""; position: absolute; inset: 0; background: rgba(5, 8, 14, .55); }
.call.swap.live .call-self { inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; z-index: 1; box-shadow: none; }
.call.swap.live .call-remote { inset: auto; right: 1rem; top: calc(var(--safe-t, 0px) + 4rem); width: 30vw; max-width: 200px; height: auto; aspect-ratio: 3 / 4; border-radius: calc(20px * var(--rk)); z-index: 4; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.call-top { position: relative; z-index: 5; width: 100%; max-width: 900px; display: flex; align-items: center; gap: .6rem; }
.call-min { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.call-min .ic { transform: rotate(-90deg); }
.call.in.s-ringing .call-min, .call.s-ended .call-min { visibility: hidden; }
.call-lock { font-size: .75rem; font-weight: 700; opacity: .7; display: inline-flex; align-items: center; gap: .3rem; }
.call-info { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center; min-height: 0; padding: 1rem 0; }
.call.live .call-info { flex: 1; justify-content: flex-start; padding-top: .4rem; }
.call.live .call-ava, .call.live .call-sub { display: none; }
.call.live .call-name { font-size: 1.1rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.call.live .call-status { text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.call-ava { position: relative; margin-bottom: 1rem; }
.call-ava .avatar { width: 128px; height: 128px; font-size: 3rem; position: relative; z-index: 1; box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); }
.call-ava i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); opacity: 0; }
.call.s-ringing .call-ava i, .call.s-starting .call-ava i, .call.s-connecting .call-ava i { animation: callRing 2s ease-out infinite; }
.call-ava i:nth-of-type(2) { animation-delay: 1s !important; }
@keyframes callRing { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
.call-name { font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 800; letter-spacing: -.01em; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-status { font-size: 1rem; font-weight: 600; opacity: .85; font-variant-numeric: tabular-nums; }
.call.s-ended .call-status { font-size: 1.15rem; font-weight: 800; opacity: 1; }
.call-sub { font-size: .85rem; opacity: .65; max-width: 340px; line-height: 1.4; }
.call-ctrls { position: relative; z-index: 5; display: flex; justify-content: center; align-items: flex-start; gap: clamp(.9rem, 5vw, 1.6rem); flex-wrap: wrap; max-width: 520px; padding: .5rem 1rem .4rem; border-radius: calc(32px * var(--rk)); }
.call.live .call-ctrls { background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cbtn { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: #fff; min-width: 64px; }
.cbtn > span { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .15s, background .2s; }
.cbtn:hover > span { background: rgba(255, 255, 255, .26); }
.cbtn:active > span { transform: scale(.92); }
.cbtn .ic { width: 26px; height: 26px; }
.cbtn small { font-size: .74rem; font-weight: 700; opacity: .85; }
.cbtn.off > span { background: #fff; color: #111; }
.cbtn.red > span { background: #ff3b30; }
.cbtn.green > span { background: #34c759; }
.cbtn.soft > span { background: rgba(255, 255, 255, .16); }
.cbtn.pulse > span { animation: callPulse 1.4s ease-in-out infinite; }
@keyframes callPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); } 50% { box-shadow: 0 0 0 14px rgba(52, 199, 89, 0); } }
.call.in.s-ringing .call-ctrls { gap: clamp(1.5rem, 12vw, 4rem); }
.call.in.s-ringing .cbtn > span { width: 72px; height: 72px; }

.cp-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: vrecDot 1.2s infinite; }

/* ================================================================ floating mini windows
   a minimized call or a World Match you left running shrinks into a draggable window */
.cp-dot, .mm-dot { width: 7px; height: 7px; border-radius: 50%; background: #34c759; flex: none; animation: vrecDot 1.2s infinite; }
.call-mini, .m-mini { display: none; }
.call.mini, main .view.bg {
  position: fixed; inset: auto; right: 16px; bottom: 20px; z-index: 112;
  width: 264px; height: 168px; padding: 0; border-radius: calc(20px * var(--rk)); overflow: hidden;
  background: #0d1014; color: #fff; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .14);
  transition: translate .22s cubic-bezier(.2, .8, .2, 1); animation: miniIn .22s ease-out;
}
main .view.bg { display: block; z-index: 108; }
.call.mini.dragging, main .view.bg.dragging { transition: none; box-shadow: 0 22px 54px rgba(0, 0, 0, .45), 0 0 0 2px var(--primary); }
@keyframes miniIn { from { opacity: 0; transform: scale(.85); } }
@media (max-width: 899px) {
  .call.mini, main .view.bg { right: 12px; bottom: calc(var(--navb) + var(--safe-b) + 12px); width: 118px; height: 168px; }
}

/* call mini */
.call.mini > :not(.call-remote):not(.call-peeroff):not(.call-bg):not(.call-mini) { display: none !important; }
.call.mini .call-peeroff .avatar { width: 52px; height: 52px; font-size: 1.3rem; }
.call.mini .call-peeroff span { display: none; }
.call-mini, #view-match.bg .m-mini {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; align-items: center; gap: .3rem;
  padding: 1.6rem .4rem .4rem .55rem; background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.call.mini .call-mini, #view-match.bg .m-mini { display: flex; }
.call-mini > .ic, .m-mini > .ic { width: 14px; height: 14px; flex: none; }
.call-mini b, .m-mini b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-mini [data-pt] { opacity: .85; flex: none; }
.cm-end, .mm-end { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #ff3b30; color: #fff; flex: none; }
.cm-end .ic, .mm-end .ic { width: 15px; height: 15px; }
.call.video.mini .call-mini [data-pt] { display: none; }
@media (min-width: 900px) { .call.video.mini .call-mini [data-pt] { display: inline; } }
/* voice call mini = a pill */
.call.audio.mini { width: auto; height: 48px; max-width: calc(100vw - 24px); border-radius: 999px; background: #34c759; }
.call.audio.mini .call-bg { display: none; }
.call.audio.mini .call-mini { position: relative; height: 100%; padding: 0 .4rem 0 1rem; gap: .45rem; background: none; font-size: .85rem; }
.call.audio.mini .call-mini b { max-width: 40vw; }
.call.audio.mini .cp-dot { background: #fff; }
.call.audio.mini .cm-end { width: 34px; height: 34px; }

/* World Match mini */
#view-match.bg .m-wrap { height: 100%; min-height: 0; padding: 0; display: block; }
#view-match.bg .m-room { display: block; height: 100%; position: relative; max-width: none; }
#view-match.bg .m-stage { display: block; position: absolute; inset: 0; }
#view-match.bg .m-tile.peer { position: absolute; inset: 0; border-radius: 0; }
#view-match.bg .m-tile.self, #view-match.bg .m-panel, #view-match.bg .m-over { display: none; }
#view-match.bg .m-camoff .avatar { width: 52px; height: 52px; font-size: 1.3rem; }
#view-match.bg .m-wait { padding: .5rem; gap: .5rem; }
#view-match.bg .m-wait b { font-size: .74rem; }
#view-match.bg .m-wait p { display: none; }
#view-match.bg .m-radar { width: 52px; height: 52px; }
#view-match.bg .m-radar .ic { width: 20px; height: 20px; }
.mm-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .68rem; display: grid; place-items: center; flex: none; }
#view-match.bg:has(.m-room.text) { width: auto; height: 48px; max-width: calc(100vw - 24px); border-radius: 999px; background: var(--primary); }
#view-match.bg .m-room.text .m-mini { position: relative; height: 100%; padding: 0 .4rem 0 1rem; gap: .45rem; background: none; font-size: .85rem; }
#view-match.bg .m-room.text .m-mini b { max-width: 46vw; }
#view-match.bg .m-room.text .mm-dot { background: #fff; }

/* ================================================================ phone video: keep the stranger's face clear
   the video gets its own space; chat floats small over the bottom-left and fades; tap the video to hide it */
@media (max-width: 899px) {
  .m-room:not(.text) { display: flex; flex-direction: column; background: #0d1014; }
  .m-room:not(.text) .m-stage { position: relative; inset: auto; flex: 1; min-height: 0; }
  .m-room:not(.text) .m-panel { position: relative; inset: auto; z-index: 5; flex: none; max-height: none; overflow: visible; background: #0d1014; }
  .m-room:not(.text) .m-msgs {
    position: absolute; left: 0; right: 30%; bottom: 100%; max-height: min(30dvh, 220px); padding: .5rem .75rem .6rem;
    -webkit-mask-image: linear-gradient(transparent, #000 1.25rem); mask-image: linear-gradient(transparent, #000 1.25rem);
  }
  .m-room:not(.text) .m-msg { max-width: 100%; font-size: .86rem; padding: .4rem .75rem; background: rgba(0, 0, 0, .45); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
  .m-room:not(.text) .m-msg.me { background: rgba(0, 100, 224, .82); }
  .m-room:not(.text) .m-msg.sys { background: rgba(0, 0, 0, .35); color: rgba(255, 255, 255, .88); align-self: flex-start; text-align: start; border-radius: calc(14px * var(--rk)); padding: .35rem .65rem; }
  /* older messages fade out so the video stays clean — they come back while you type */
  .m-room:not(.text) .m-msg:not(:has(button)) { animation: mFade .6s 10s forwards; }
  .m-room:not(.text):focus-within .m-msg { animation: none; }
  .m-room:not(.text) .m-ice { margin: .5rem .75rem 0; padding: .3rem .3rem .3rem .75rem; align-items: center; gap: .45rem; border-radius: 999px; background: rgba(255, 255, 255, .1); }
  .m-room:not(.text) .m-ice > span .ic { width: 16px; height: 16px; margin: 0; }
  .m-room:not(.text) .m-ice small { display: none; }
  .m-room:not(.text) .m-ice p { margin: 0; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .m-room:not(.text) .m-ice button { width: 28px; height: 28px; }
  .m-room:not(.text) .m-panel .composer { padding: .45rem .75rem .25rem; }
  .m-room:not(.text) .m-ctrls { padding: .25rem .75rem .6rem; }
  .m-room.clean .m-msgs, .m-room.clean .m-ice { display: none; }
  .m-room:not(.text) .m-over { top: .6rem; left: .6rem; }
}
@keyframes mFade { to { opacity: 0; visibility: hidden; } }

/* ================================================================ chat: emoji / GIF / sticker picker */
.composer .emo.active { color: var(--primary); background: var(--primary-soft); }
.gif-badge { display: inline-grid; place-items: center; font-size: .62rem; font-weight: 900; letter-spacing: .04em; padding: .12rem .32rem; border-radius: 5px; background: var(--fg); color: var(--bg); line-height: 1.1; }
.gif-badge.big { font-size: 1rem; padding: .3rem .6rem; border-radius: 8px; }
.xpick { display: flex; flex-direction: column; height: 320px; background: var(--surface); border-top: 1px solid var(--line); }
.xpick[hidden] { display: none; }
.xp-tabs { display: flex; gap: .25rem; padding: .4rem .5rem 0; border-bottom: 1px solid var(--line); }
.xp-tabs button { display: flex; align-items: center; gap: .35rem; padding: .5rem .8rem .55rem; font-size: .84rem; font-weight: 700; color: var(--dim); border-bottom: 2.5px solid transparent; }
.xp-tabs button.active { color: var(--fg); border-bottom-color: var(--primary); }
.xp-tabs .xp-x { margin-inline-start: auto; color: var(--dim); font-size: .9rem; }
.xp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.xp-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .25rem .5rem .75rem; scroll-padding-top: .25rem; }
.xp-cats { display: flex; gap: .1rem; padding: .3rem .4rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.xp-cats button { flex: none; width: 34px; height: 30px; border-radius: 8px; font-size: 1.15rem; filter: grayscale(.4); opacity: .8; }
.xp-cats button:hover { background: var(--surface-2); filter: none; opacity: 1; }
.xp-h { position: sticky; top: -.25rem; z-index: 1; background: var(--surface); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding: .55rem .25rem .3rem; }
.xp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.xp-grid button { height: 42px; font-size: 1.6rem; line-height: 1; border-radius: 10px; transition: transform .1s; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.xp-grid button:hover { background: var(--surface-2); transform: scale(1.15); }
.xp-grid button:active { transform: scale(.9); }
.xp-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: .25rem; padding-top: .4rem; }
.xp-sgrid button { aspect-ratio: 1; border-radius: 14px; font-size: 2.6rem; display: grid; place-items: center; transition: transform .12s, background .12s; }
.xp-sgrid button span { display: block; animation: stkBob 2.4s ease-in-out infinite; }
.xp-sgrid button:nth-child(3n) span { animation-delay: -.8s; }
.xp-sgrid button:nth-child(3n+1) span { animation-delay: -1.6s; }
.xp-sgrid button:hover { background: var(--surface-2); transform: scale(1.1); }
.xp-sgrid button:active { transform: scale(.9); }
@keyframes stkBob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-3px) rotate(-6deg); } 60% { transform: translateY(1px) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .xp-sgrid button span { animation: none; } }
.xp-note { text-align: center; color: var(--dim); font-size: .72rem; margin: .7rem 0 .2rem; }
.xp-search { padding: .5rem .5rem .25rem; }
.xp-search input { width: 100%; background: var(--surface-2); border: 1.5px solid transparent; border-radius: 999px; padding: .55rem 1rem; font-size: .9rem; outline: none; }
.xp-search input:focus { border-color: var(--primary); }
.xp-ggrid { display: flex; gap: 4px; align-items: flex-start; }
.xp-gcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.xp-gif { display: block; width: 100%; border-radius: 10px; overflow: hidden; background: var(--surface-2); padding: 0; transition: opacity .12s; }
.xp-gif:hover { opacity: .85; }
.xp-gif img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-more { text-align: center; color: var(--dim); font-size: .8rem; padding: .6rem; }
.xp-more:empty { display: none; }
.xp-attr { flex: none; text-align: center; font-size: .66rem; color: var(--dim); padding: .25rem 0 .35rem; border-top: 1px solid var(--line); }
.xp-attr b { color: var(--fg); letter-spacing: .04em; }
.xp-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; color: var(--dim); font-size: .86rem; padding: 1.5rem; }
.xp-empty b { color: var(--fg); }
/* messages */
.msg.gif, .msg.sticker { padding: 0; background: none; border-radius: calc(16px * var(--rk)); overflow: hidden; position: relative; }
.msg.gif img { display: block; width: min(280px, 66vw); height: auto; max-height: 380px; object-fit: contain; background: var(--surface-2); border-radius: calc(16px * var(--rk)); }
.msg.gif .gif-badge { position: absolute; left: 8px; bottom: 8px; background: rgba(0, 0, 0, .55); color: #fff; }
.msg.sticker { overflow: visible; }
.msg.sticker img { display: block; width: 112px; height: 112px; object-fit: contain; animation: stkIn .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes stkIn { from { transform: scale(.4); opacity: 0; } }
.msg.jumbo { background: none; padding: 0 .1rem; line-height: 1.15; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.msg.jumbo.j1 { font-size: 3.4rem; } .msg.jumbo.j2 { font-size: 2.8rem; } .msg.jumbo.j3 { font-size: 2.3rem; }
@media (max-width: 899px) {
  .xpick { height: min(300px, 42dvh); padding-bottom: var(--safe-b); }
  .xp-tabs button { padding: .5rem .6rem .55rem; }
  .chat-layout.open .convo.xp-open .composer { padding-bottom: .6rem; }
  .composer { gap: .2rem; padding-inline-start: .4rem; padding-inline-end: .4rem; }
}

/* desktop: the picker floats above the chat bar instead of shrinking the conversation */
@media (min-width: 900px) {
  .convo { position: relative; }
  .xpick { position: absolute; right: 14px; bottom: 74px; z-index: 5; width: 380px; height: min(420px, calc(100% - 140px));
    border: 1px solid var(--line); border-radius: calc(20px * var(--rk)); box-shadow: 0 18px 50px rgba(0, 0, 0, .22); overflow: hidden; animation: xpIn .16s ease-out; }
  @keyframes xpIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
}

/* ---------- language menu ---------- */
.lang-pick { position: relative; }
.lang-btn { width: auto !important; padding: 0 .55rem; gap: .3rem; border-radius: 999px; display: inline-flex; align-items: center; }
.lang-btn .lang-code { font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: var(--dim); }
.lang-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 60;
  min-width: 200px; max-height: min(70vh, 460px); overflow-y: auto; padding: .35rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(16px * var(--rk, 1)); box-shadow: var(--shadow-lg);
  display: grid; gap: 2px;
}
.lang-menu[hidden] { display: none; }
.lang-menu button { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; width: 100%; padding: .55rem .75rem; border-radius: calc(10px * var(--rk, 1)); text-align: start; color: var(--fg); }
.lang-menu button:hover { background: var(--surface-2); }
.lang-menu button[aria-checked="true"] { background: var(--primary-soft); color: var(--primary); }
.lang-menu b { font-weight: 700; font-size: .92rem; }
.lang-menu small { font-size: .72rem; color: var(--dim); font-weight: 600; }
@media (max-width: 899px) { .lang-btn .lang-code { display: none; } .lang-btn { padding: 0; width: 40px !important; justify-content: center; } }
/* translated labels are longer than English: keep the desktop header on one line */
.nav-desktop .nav-item { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1240px) { :root:not([lang="en"]) .nav-desktop .nav-item { padding: .55rem .6rem; font-size: .84rem; } }
/* RTL: mirror the arrow-style icons */
[dir="rtl"] .back .ic, [dir="rtl"] [data-back] .ic { transform: scaleX(-1); }
.lang-row { display: flex; align-items: center; gap: .6rem; margin: 1rem auto 0; padding: .55rem .6rem .55rem .9rem; max-width: 420px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .88rem; font-weight: 700; color: var(--dim); }
.lang-row .ic { width: 18px; height: 18px; flex: none; }
.lang-row span { flex: 1; }
.lang-row select { flex: none; max-width: 60%; padding: .4rem 2rem .4rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); font: inherit; font-weight: 700; }

/* ================================================================ SPACE LOOK — dark starfield, lime accent, huge condensed uppercase headings */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Anton-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Anton-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Anton-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root[data-theme="dark"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 33% 62%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 85%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 80%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 35%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 24% 42%, rgba(198,255,0,.6) 50%, transparent 51%),
    radial-gradient(ellipse 70% 50% at 85% -10%, rgba(198,255,0,.10), transparent 70%),
    radial-gradient(ellipse 60% 45% at -10% 110%, rgba(90,110,255,.14), transparent 70%);
  background-size: 420px 420px, 380px 380px, 520px 520px, 460px 460px, 340px 340px, 600px 600px, 300px 300px, 700px 700px, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

/* big, loud, uppercase type */
.view-head h1, .auth-hero h1, .m-hero h1, .mega, .card > h2, .card h2.mega-sm, .f-bar h2, .zones-title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .95;
}
:lang(zh) .view-head h1, :lang(hi) .view-head h1, :lang(bn) .view-head h1, :lang(ar) .view-head h1, :lang(ru) .view-head h1,
:lang(zh) .auth-hero h1, :lang(hi) .auth-hero h1, :lang(bn) .auth-hero h1, :lang(ar) .auth-hero h1, :lang(ru) .auth-hero h1,
:lang(zh) .mega, :lang(hi) .mega, :lang(bn) .mega, :lang(ar) .mega, :lang(ru) .mega { font-family: var(--font); font-weight: 800; line-height: 1.1; }
.view-head h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); color: var(--primary); }
.auth-hero h1 { font-size: clamp(2.8rem, 11vw, 5rem); color: var(--primary); }
.m-hero h1 { font-size: clamp(2.8rem, 7.5vw, 5.6rem); }
.m-hero h1 em { display: block; }
.card > h2, .card h2.mega-sm { font-size: 1.55rem; }
.f-bar h2 { font-size: 1.4rem; }
.eyebrow { color: var(--primary); letter-spacing: .2em; }
.brand-name { color: var(--fg); text-transform: uppercase; font-family: var(--display); font-weight: 400; letter-spacing: .04em; font-size: 1.5rem; }
.brand-mark rect { fill: var(--lime, #c6ff00); }
.brand-mark circle, .brand-mark path { stroke: #04050a; }

/* nav reads like the reference: small, uppercase, spaced */
.nav-desktop .nav-item { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; }
.nav-desktop .nav-item.active { background: transparent; color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); border-radius: 0; }
.nav-bottom .nav-item.active { color: var(--primary); }

/* buttons: lime slabs with dark text */
.btn.primary, .silver-btn { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
:root[data-theme="dark"] .btn.primary:hover, :root[data-theme="dark"] .silver-btn:hover { filter: none; box-shadow: 0 0 0 4px rgba(198,255,0,.18), 0 0 28px rgba(198,255,0,.35); }
:root[data-theme="dark"] .card { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(198,255,0,.10); }
:root[data-theme="dark"] header.top { border-bottom-color: rgba(198,255,0,.12); }
:root[data-theme="dark"] .big-time, :root[data-theme="dark"] .pc-time, :root[data-theme="dark"] .p-time { color: var(--primary); text-shadow: 0 0 30px rgba(198,255,0,.25); }
.big-time, .pc-time, .p-time { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.msg.voice.mine .vn-play { background: var(--on-primary); color: var(--primary-2); }
:root:not([data-theme="dark"]) .eyebrow, :root:not([data-theme="dark"]) .view-head h1, :root:not([data-theme="dark"]) .auth-hero h1 { color: var(--fg); }

/* app page */
.app-view .col { max-width: 640px; margin: 0 auto; padding: 1.5rem 16px calc(var(--navb) + 2rem); }
.hero-big { padding: 1.5rem 0 1.25rem; display: flex; flex-direction: column; gap: .9rem; }
.mega { font-size: clamp(3.2rem, 15vw, 6.5rem); color: var(--primary); }
:root:not([data-theme="dark"]) .mega { color: var(--fg); }
.app-seg { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; border-radius: 999px; background: var(--surface-2); margin-bottom: 1rem; width: fit-content; max-width: 100%; }
.steps { list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.steps li { display: flex; gap: .85rem; align-items: flex-start; line-height: 1.5; }
.steps li b { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-2); color: var(--on-primary); font-family: var(--display); font-weight: 400; font-size: 1.05rem; }
.steps strong { color: var(--primary); }
:root:not([data-theme="dark"]) .steps strong { color: var(--fg); }
.small { font-size: .82rem; }
.app-link { margin-top: .25rem; }
.muted { color: var(--dim); }
.real-name, .pc-real { font-size: .75rem; font-weight: 600; color: var(--dim); }
.pc-real { margin-top: .1rem; }
.nick-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--dim); vertical-align: middle; }
.nick-btn .ic { width: 16px; height: 16px; }
.nick-btn:hover { color: var(--primary); background: var(--primary-soft); }
/* sign in with Google / Apple / TikTok */
.oauth-row { display: flex; flex-direction: column; gap: .55rem; }
.oauth-btn { justify-content: center; gap: .6rem; background: var(--surface-2); color: var(--fg); border: 1px solid var(--line); text-decoration: none; font-weight: 700; min-height: 48px; }
.oauth-btn:hover { border-color: var(--primary); }
.oa-ic { width: 20px; height: 20px; flex: none; }
.oa-apple { background: #000; color: #fff; border-color: #000; }
:root[data-theme="dark"] .oa-apple { background: #fff; color: #000; border-color: #fff; }
.oa-tiktok { background: #010101; color: #fff; border-color: #010101; }
:root[data-theme="dark"] .oa-tiktok { border-color: #2a2a2a; }
.or-line { display: flex; align-items: center; gap: .8rem; color: var(--dim); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.oauth-row .btn.wide { margin-top: 0; }

/* terms / privacy links */
.legal-links { text-align: center; font-size: .85rem; color: var(--dim); margin: 14px 0 4px; }
.legal-links a, .note.agree a { color: var(--dim); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.note.agree { text-align: center; margin-top: 10px; }