:root {
  --bg: #0d0b1e;
  --bg2: #16122e;
  --card: rgba(255, 255, 255, 0.055);
  --card-b: rgba(255, 255, 255, 0.1);
  --text: #f6f4ff;
  --muted: #a9a3c9;
  --lime: #c6ff3d;
  --orange: #ff7a1a;
  --pink: #ff2d75;
  --purple: #8b5cff;
  --cyan: #2de2ff;
  --red: #ff3b4e;
  --grad: linear-gradient(135deg, #ffb21e 0%, #ff5a36 45%, #ff2d75 100%);
  --radius: 22px;
  --rail-w: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Arial Black', 'Helvetica Neue', Impact, system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 500px at 110% -10%, rgba(255, 45, 117, 0.28), transparent 60%),
    radial-gradient(700px 500px at -20% 10%, rgba(139, 92, 255, 0.3), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(255, 122, 26, 0.18), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

.card {
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.h { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-weight: 800; }

/* ---------- Buttons ---------- */
.btn {
  border: 0; border-radius: 999px; padding: 12px 20px; font-weight: 800; letter-spacing: 0.02em;
  transition: transform 0.12s ease, filter 0.15s, background 0.15s; touch-action: manipulation;
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 30px rgba(255, 60, 90, 0.4); text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--card-b); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); }
.btn-danger-ghost { background: transparent; color: #ff8a96; border: 1px solid rgba(255, 59, 78, 0.35); }
.btn-block { width: 100%; }
.btn-xl { padding: 17px 26px; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.06em; }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* ---------- Auth ---------- */
.auth { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 28px 18px calc(28px + var(--safe-b)); gap: 18px; }
.auth-hero { text-align: center; margin-top: 3vh; }
.logo-mark {
  width: 84px; height: 84px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 44px;
  border-radius: 26px; background: var(--grad); box-shadow: 0 16px 50px rgba(255, 45, 117, 0.5);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
.brand { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 9vw, 3.3rem); line-height: 0.95; margin: 0; letter-spacing: -0.01em; }
.brand span, .brand-sm .txt > span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { color: var(--muted); margin: 12px 0 0; font-size: 1.02rem; line-height: 1.45; }
.tagline b { color: var(--lime); }
.hero-live { display: inline-flex; gap: 8px; align-items: center; margin-top: 14px; padding: 7px 14px; border-radius: 999px; background: rgba(198, 255, 61, 0.1); color: var(--lime); font-weight: 700; font-size: 0.9rem; }
.auth-card { width: 100%; max-width: 420px; padding: 20px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: rgba(0,0,0,.25); border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.tabs button { border: 0; background: transparent; padding: 10px; border-radius: 999px; font-weight: 800; color: var(--muted); }
.tabs button[aria-selected='true'] { background: rgba(255,255,255,.12); color: var(--text); }
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.field em { font-style: normal; opacity: 0.7; font-weight: 500; }
.field input {
  width: 100%; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--card-b);
  background: rgba(0, 0, 0, 0.28); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.18); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--muted); margin: 4px 0 14px; }
.check input { width: 20px; height: 20px; accent-color: var(--orange); margin: 0; flex: none; }
.form-error { background: rgba(255, 59, 78, 0.14); border: 1px solid rgba(255, 59, 78, 0.4); color: #ffc2c8; padding: 10px 12px; border-radius: 12px; font-size: 0.9rem; margin: 0 0 12px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.8rem; margin: 18px 0 12px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--card-b); }
.oauth { display: grid; gap: 10px; }
.btn-oauth {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-radius: 14px;
  border: 1px solid var(--card-b); font-weight: 700; background: rgba(255,255,255,.06); position: relative; transition: transform .12s, filter .15s;
}
.btn-oauth:active { transform: scale(0.98); }
.btn-oauth svg { width: 22px; height: 22px; flex: none; }
.btn-oauth.google { background: #fff; color: #1f1f1f; border-color: #fff; }
.btn-oauth.facebook { background: #1877f2; border-color: #1877f2; }
.btn-oauth.instagram { background: linear-gradient(45deg, #feda75, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5); border-color: transparent; }
.btn-oauth.disabled { filter: grayscale(0.85) brightness(0.75); cursor: not-allowed; }
.soon { margin-left: auto; white-space: nowrap; font-style: normal; font-size: 0.68rem; text-transform: uppercase; letter-spacing: .08em; background: rgba(0,0,0,.45); color: #fff; padding: 3px 8px; border-radius: 999px; }
.fine { color: var(--muted); font-size: 0.75rem; line-height: 1.4; margin: 12px 2px 0; }
.privacy-note { max-width: 420px; text-align: center; color: var(--muted); font-size: 0.85rem; line-height: 1.45; margin: 0; }
.privacy-note b { color: var(--text); }

/* ---------- App shell ---------- */
.app { min-height: 100dvh; padding-right: var(--rail-w); }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; background: rgba(13, 11, 30, 0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand-sm { font-family: var(--display); font-weight: 900; font-size: 1rem; white-space: nowrap; letter-spacing: -0.01em; }
.logo-dot { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--grad); margin-right: 4px; font-size: 16px; vertical-align: middle; }
.online-pill { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: rgba(198, 255, 61, 0.1); color: var(--lime); white-space: nowrap; }
.online-pill.offline { background: rgba(255,255,255,.08); color: var(--muted); }
.online-pill.offline .dot { background: var(--muted); box-shadow: none; animation: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(198,255,61,.7); animation: pulse 1.8s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(198,255,61,.6); } 70% { box-shadow: 0 0 0 9px rgba(198,255,61,0); } 100% { box-shadow: 0 0 0 0 rgba(198,255,61,0); } }
.avatar-btn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); background: var(--purple) center/cover; font-weight: 900; flex: none; padding: 0; }
.menu { position: absolute; right: 12px; top: calc(100% + 6px); width: 250px; padding: 14px; display: grid; gap: 8px; background: #1c1738; }
.layout { display: grid; gap: 14px; padding: 14px 12px calc(24px + var(--safe-b)); max-width: 1180px; margin: 0 auto; }
.brand-sm .wide { display: none; }

/* ---------- Workout ---------- */
.workout { padding: 18px; position: relative; overflow: hidden; }
.goal-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.chip {
  border: 2px solid var(--card-b); background: rgba(0,0,0,.25); border-radius: 18px; padding: 14px 0;
  font-family: var(--display); font-size: 1.7rem; font-weight: 900; transition: transform .12s, border-color .15s, background .15s;
}
.chip[aria-checked='true'] { border-color: transparent; background: var(--grad); box-shadow: 0 10px 26px rgba(255, 60, 90, 0.4); transform: translateY(-2px); }
.diffs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.diff {
  text-align: left; border: 2px solid var(--card-b); background: rgba(0,0,0,.25); border-radius: 18px; padding: 11px 12px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; transition: border-color .15s, background .15s, transform .12s;
}
.diff .e { font-size: 1.6rem; grid-row: span 2; }
.diff b { font-size: 0.98rem; }
.diff small { color: var(--muted); font-size: 0.74rem; line-height: 1.25; }
.diff[aria-checked='true'] { border-color: var(--dc); background: color-mix(in srgb, var(--dc) 18%, transparent); transform: translateY(-2px); }
.reward-field { margin-bottom: 16px; }

.active { text-align: center; }
.set-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-weight: 800; font-size: 0.88rem; background: rgba(255,255,255,.08); border: 1px solid var(--card-b); }
.diff-badge { background: color-mix(in srgb, var(--dc, #fff) 22%, transparent); border-color: var(--dc, var(--card-b)); }
.counter {
  position: relative; display: grid; place-items: center; width: min(78vw, 330px); aspect-ratio: 1; margin: 6px auto 12px;
  border: 0; background: transparent; border-radius: 50%; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.counter .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: rgba(0,0,0,.25); stroke: rgba(255,255,255,.08); stroke-width: 9; }
.ring-fg { fill: none; stroke: url(#ringGrad); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .35s cubic-bezier(.2,.9,.3,1.2); filter: drop-shadow(0 0 8px rgba(255, 120, 60, .6)); }
.count {
  font-family: var(--display); font-weight: 900; font-size: clamp(5.5rem, 30vw, 9rem); line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #ffd9b0); -webkit-background-clip: text; background-clip: text; color: transparent; margin-top: -4%;
}
.count.bump { animation: bump .28s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.count-of { position: absolute; top: 69%; font-weight: 800; color: var(--muted); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.tap-hint { position: absolute; bottom: 9%; font-size: .66rem; letter-spacing: .16em; color: rgba(255,255,255,.4); font-weight: 800; }
.counter:active .ring-bg { fill: rgba(255,255,255,.06); }
.count-actions { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; }
.btn-plus { font-size: 1.15rem; padding: 15px; }
.auto-status { text-align: center; font-size: .85rem; color: var(--cyan); font-weight: 700; }

@keyframes blink { 50% { opacity: .6; } }

/* ---------- Room ---------- */
.room { padding: 16px; }
.room-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.room-head .h { margin: 0; }
.room-sub { color: var(--muted); font-size: .8rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.tile { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 3/4; background: linear-gradient(160deg, #2a2150, #15112b); border: 2px solid transparent; animation: popin .35s ease; }
@keyframes popin { from { transform: scale(.9); opacity: 0; } }
.tile.working { border-color: var(--orange); box-shadow: 0 0 24px rgba(255, 122, 26, .35); }
.tile.me { outline: 2px dashed rgba(255,255,255,.25); outline-offset: -6px; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .avatar { position: absolute; inset: 0; display: grid; place-items: center; }
.tile .avatar span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1.5rem; background: var(--av, var(--purple)) center/cover; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.tile .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 10px; background: linear-gradient(transparent, rgba(0,0,0,.82)); }
.tile .name { font-weight: 800; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .status { font-size: .74rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.working .status { color: #ffd2a8; font-weight: 700; }
.tile .prog { height: 5px; border-radius: 3px; background: rgba(255,255,255,.15); margin-top: 6px; overflow: hidden; }
.tile .prog i { display: block; height: 100%; background: var(--grad); width: 0; transition: width .3s; }
.tile .cam-ind { position: absolute; top: 8px; left: 8px; font-size: .66rem; font-weight: 900; padding: 3px 7px; border-radius: 7px; background: rgba(0,0,0,.55); color: var(--muted); letter-spacing: .06em; }
.tile .cam-ind.on { background: var(--red); color: #fff; }
.tile .cheer { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); font-size: 1rem; }
.tile .cheer:active { transform: scale(.9); }
.tile .float { position: absolute; left: 50%; bottom: 30%; font-size: 2rem; animation: floatup 1.4s ease-out forwards; pointer-events: none; }
@keyframes floatup { from { transform: translate(-50%, 0) scale(.6); opacity: 1; } to { transform: translate(-50%, -120px) scale(1.4); opacity: 0; } }
.tile.party { animation: party .8s ease 3; }
@keyframes party { 50% { box-shadow: 0 0 40px var(--lime); border-color: var(--lime); } }
.room-empty { color: var(--muted); font-size: .88rem; text-align: center; margin: 14px 0 4px; }

/* ---------- Stats rail (vertical side panel) ---------- */
.stats-rail {
  position: fixed; z-index: 30; right: 0; top: 64px; bottom: calc(10px + var(--safe-b)); width: var(--rail-w);
  display: flex; flex-direction: column; gap: 6px; padding: 10px 6px; border-radius: 20px 0 0 20px;
  background: rgba(22, 18, 46, 0.9); border: 1px solid var(--card-b); border-right: 0; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: width .3s cubic-bezier(.2,.9,.3,1); overflow: hidden;
}
.rail-handle { position: absolute; z-index: 2; left: 0; top: 50%; width: 16px; height: 54px; transform: translateY(-50%); border: 0; background: rgba(255,255,255,.08); border-radius: 0 8px 8px 0; font-size: .8rem; padding: 0; color: var(--muted); }
.rail-title { font-size: .58rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); text-align: center; font-weight: 800; }
.stat { flex: 1; min-height: 0; border-radius: 14px; background: rgba(255,255,255,.05); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; position: relative; overflow: hidden; }
.stat-label { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
.stat-num { font-family: var(--display); font-weight: 900; font-size: 1.15rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-bar { display: none; }
.stat.total { background: var(--grad); }
.stat.total .stat-label { color: rgba(255,255,255,.85); }
.stat.flash { animation: flash .9s ease; }
@keyframes flash { 30% { background: rgba(198,255,61,.35); transform: scale(1.06); } }
.rail-foot { font-size: .6rem; color: var(--muted); text-align: center; }
.stats-rail.open { width: 210px; }
.stats-rail.open .stat { align-items: flex-start; padding: 8px 14px; }
.stats-rail.open .stat-num { font-size: 1.8rem; }
.stats-rail.open .stat-label { font-size: .7rem; }
.stats-rail.open .rail-handle span { display: inline-block; transform: rotate(180deg); }

/* ---------- Celebration ---------- */
.celebrate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(8, 6, 20, .78); backdrop-filter: blur(6px); padding: 20px; animation: fadein .25s; }
@keyframes fadein { from { opacity: 0; } }
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.celebrate-card { position: relative; text-align: center; max-width: 380px; width: 100%; padding: 28px 22px; border-radius: 28px; background: linear-gradient(160deg, #2b1f5c, #1a1338); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 80px rgba(255, 45, 117, .35); animation: zoom .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes zoom { from { transform: scale(.6); opacity: 0; } }
.trophy { font-size: 4.5rem; animation: bob 1.6s ease-in-out infinite; }
.celebrate h2 { font-family: var(--display); font-size: 2.3rem; margin: 6px 0; background: linear-gradient(90deg, var(--lime), #ffb21e, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.celebrate-sub { color: var(--muted); margin: 0 0 14px; font-weight: 600; }
.reward-box { background: rgba(198,255,61,.1); border: 2px dashed var(--lime); border-radius: 16px; padding: 12px; margin-bottom: 16px; display: grid; gap: 4px; }
.reward-box small { color: var(--lime); font-weight: 900; letter-spacing: .14em; font-size: .7rem; }
.reward-box b { font-size: 1.2rem; }
.celebrate-actions { display: grid; gap: 8px; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; z-index: 120; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 380px); pointer-events: none; }
.toast { background: #241d4a; border: 1px solid var(--card-b); padding: 11px 14px; border-radius: 14px; font-weight: 600; font-size: .9rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: toastin .3s ease; }
@keyframes toastin { from { transform: translateY(14px); opacity: 0; } }
.noscript { text-align: center; padding: 40px; }

/* ---------- Larger screens ---------- */
@media (min-width: 900px) {
  :root { --rail-w: 232px; }
  .app { padding-right: 0; }
  .layout { grid-template-columns: minmax(380px, 440px) 1fr var(--rail-w); align-items: start; padding: 20px 24px 32px; gap: 18px; max-width: 1440px; }
  .workout { position: sticky; top: 82px; }
  .stats-rail, .stats-rail.open {
    position: sticky; top: 82px; grid-column: 3; grid-row: 1; width: auto; height: calc(100dvh - 104px); max-height: 640px;
    border-radius: var(--radius); border-right: 1px solid var(--card-b); padding: 16px; gap: 10px;
  }
  .rail-handle { display: none; }
  .rail-title { font-size: .78rem; text-align: left; margin-bottom: 2px; }
  .stat, .stats-rail.open .stat { align-items: flex-start; padding: 10px 16px; }
  .stat-num, .stats-rail.open .stat-num { font-size: 2rem; }
  .stat-label, .stats-rail.open .stat-label { font-size: .72rem; }
  .stat-bar { display: block; position: absolute; left: 16px; right: 16px; bottom: 9px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); }
  .stat-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--lime); transition: width .5s; }
  .stat.total .stat-bar { display: none; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .menu { right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- overflow guards + phone tuning ---------- */
html, body { overflow-x: hidden; }
.layout > * { min-width: 0; }
@media (max-width: 899px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.tile video ~ .avatar { display: none; }
.tap-hint { bottom: 18%; }
@media (max-width: 899px) {
  .topbar { gap: 8px; padding-left: 10px; padding-right: 12px; margin-right: calc(-1 * var(--rail-w)); }
  .brand-sm { font-size: .82rem; }
  .brand-sm .txt { display: none; }
  .btn-oauth > span { white-space: nowrap; }
  .online-pill { font-size: .72rem; padding: 5px 9px; }
  .avatar-btn { width: 34px; height: 34px; }
  .layout { padding-left: 10px; padding-right: 8px; }
  .workout { padding: 14px; }
  .counter { width: min(64vw, 280px); }
  .count { font-size: clamp(4.5rem, 24vw, 7rem); }
  .count-actions .btn { padding: 12px 14px; }
  .btn-plus { font-size: 1.05rem; }
  .diff { padding: 10px; column-gap: 8px; }
  .diff .e { font-size: 1.35rem; }
  .chip { font-size: 1.45rem; padding: 12px 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ================= Phase 2 ================= */
select { font: inherit; color: var(--text); background: rgba(0,0,0,.28); border: 1px solid var(--card-b); border-radius: 12px; padding: 10px 12px; max-width: 100%; }
.field select { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: .82rem; }
.btn-ok { background: rgba(198,255,61,.18); color: var(--lime); border: 1px solid rgba(198,255,61,.4); }
.btn-bad { background: rgba(255,59,78,.16); color: #ff8a96; border: 1px solid rgba(255,59,78,.4); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--card-b); background: rgba(255,255,255,.06); font-size: 1.05rem; padding: 0; flex: none; }
.icon-btn[aria-pressed='true'] { background: rgba(198,255,61,.14); border-color: rgba(198,255,61,.5); }
.nav-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); margin-left: 4px; vertical-align: top; box-shadow: 0 0 8px var(--pink); }

/* nav */
.tabs-top { display: none; gap: 4px; margin-left: 18px; }
.tabs-top button { border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font-weight: 800; color: var(--muted); }
.tabs-top button[aria-current] { background: rgba(255,255,255,.1); color: var(--text); }
.tabs-bottom { display: none; }
body.in-app .tabs-bottom {
  display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  padding: 6px 6px calc(6px + var(--safe-b)); background: rgba(13, 11, 30, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,.08);
}
.tabs-bottom button { border: 0; background: transparent; display: grid; justify-items: center; gap: 1px; font-size: .68rem; font-weight: 800; color: var(--muted); padding: 5px 0; border-radius: 14px; position: relative; }
.tabs-bottom button span { font-size: 1.25rem; }
.tabs-bottom button[aria-current] { color: var(--text); background: rgba(255,255,255,.08); }
.tabs-bottom .nav-dot { position: absolute; top: 4px; right: 28%; }

/* views */
.view-pane { display: none; padding: 16px; }
body[data-view='compete'] #view-compete, body[data-view='leaders'] #view-leaders, body[data-view='friends'] #view-friends { display: block; }
body:not([data-view='train']) .workout, body:not([data-view='train']) .room { display: none; }
.pane-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.pane-head .h { margin: 0; }
.view-pane h3.h { margin: 18px 0 8px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: rgba(0,0,0,.25); border-radius: 14px; padding: 4px; margin-bottom: 10px; }
.seg button { border: 0; background: transparent; padding: 9px 6px; border-radius: 10px; font-weight: 800; color: var(--muted); display: grid; gap: 2px; }
.seg button small { font-weight: 600; font-size: .68rem; opacity: .8; }
.seg button[aria-selected='true'] { background: var(--grad); color: #fff; }
.seg-sm button { padding: 6px; font-size: .82rem; }

/* toggles */
.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.tgl { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 16px; border: 2px solid var(--card-b); background: rgba(0,0,0,.25); text-align: left; min-width: 0; transition: border-color .15s, background .15s, opacity .15s; }
.tgl-ico { font-size: 1.3rem; filter: grayscale(1); opacity: .75; }
.tgl-txt { display: grid; min-width: 0; }
.tgl-txt b { font-size: .9rem; }
.tgl-txt .st { font-style: normal; font-size: .62rem; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.12); vertical-align: 2px; margin-left: 2px; }
.tgl-txt small { color: var(--muted); font-size: .7rem; line-height: 1.25; }
.tgl[aria-pressed='true'] .tgl-ico { filter: none; opacity: 1; }
.tgl[aria-pressed='true'] .st { background: currentColor; }
.tgl[aria-pressed='true'] .st { color: #fff; }
.tgl[data-key='camera'][aria-pressed='true'] { border-color: var(--red); background: rgba(255,59,78,.16); }
.tgl[data-key='camera'][aria-pressed='true'] .st { background: var(--red); }
.tgl[data-key='mic'][aria-pressed='true'] { border-color: var(--orange); background: rgba(255,122,26,.16); }
.tgl[data-key='mic'][aria-pressed='true'] .st { background: var(--orange); }
.tgl[data-key='coach'][aria-pressed='true'] { border-color: var(--cyan); background: rgba(45,226,255,.13); }
.tgl[data-key='coach'][aria-pressed='true'] .st { background: var(--cyan); color: #00222a; }
.tgl[data-key='compete'][aria-pressed='true'] { border-color: #ffb21e; background: rgba(255,178,30,.14); }
.tgl[data-key='compete'][aria-pressed='true'] .st { background: #ffb21e; color: #2a1a00; }
.tgl[aria-disabled='true'] { opacity: .45; border-style: dashed; }
.toggle-note { color: var(--muted); font-size: .72rem; line-height: 1.4; margin: 8px 2px 0; }
.auto-status { margin-top: 8px; font-size: .82rem; color: var(--cyan); font-weight: 700; }

/* competition picker + banners */
.comp-pick { background: rgba(255,178,30,.08); border: 1px solid rgba(255,178,30,.3); border-radius: 16px; padding: 12px; margin-bottom: 14px; }
.rule-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.rchip { font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--card-b); }
.reqs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .8rem; font-weight: 700; }
.reqs .no { color: var(--muted); }
.coach-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; color: var(--cyan); background: rgba(45,226,255,.08); border-radius: 12px; padding: 8px 12px; margin: -4px 0 8px; text-align: left; }
.coach-line b { white-space: nowrap; }
.count-banner { font-size: .82rem; font-weight: 800; border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; }
.count-banner.ok { background: rgba(255,178,30,.14); color: #ffd27a; }
.count-banner.warn { background: rgba(255,59,78,.12); color: #ffb3bb; }

/* FaceTime-style self view */
.pip { position: fixed; z-index: 35; left: 12px; bottom: calc(84px + var(--safe-b)); width: 132px; aspect-ratio: 3/4; border-radius: 18px; overflow: hidden; background: #000; border: 3px solid var(--red); box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.pip video, .pip canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pip video { transform: scaleX(-1); }
.pip-chips { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; flex-wrap: wrap; gap: 3px; }
.pip-chips span { font-size: .56rem; font-weight: 900; letter-spacing: .05em; padding: 2px 5px; border-radius: 6px; background: rgba(0,0,0,.6); }
.pip-chips .chip-live { background: var(--red); animation: blink 1.6s infinite; }
.pip-chips .chip-mic { background: var(--orange); }
.pip-chips .chip-ai { background: var(--cyan); color: #00222a; }
.pip-chips .chip-count { background: #ffb21e; color: #2a1a00; }
.pip-cue { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: .66rem; font-weight: 800; line-height: 1.2; padding: 4px 6px; border-radius: 8px; background: rgba(0,0,0,.7); }
.pip-cue.good { background: rgba(80,160,0,.85); }
.pip-cue.bad { background: rgba(200,30,50,.85); }
@keyframes blink { 50% { opacity: .6; } }

/* sheet */
.sheet { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 20px; background: rgba(8,6,20,.75); backdrop-filter: blur(6px); }
.sheet-card { max-width: 400px; width: 100%; padding: 24px; border-radius: 26px; background: linear-gradient(160deg, #1f2a5c, #13183a); border: 1px solid rgba(45,226,255,.3); text-align: center; animation: zoom .4s cubic-bezier(.2,1.4,.4,1); }
.sheet-card h2 { margin: 4px 0 12px; font-family: var(--display); }
.tips { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; text-align: left; }
.tips li { background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 12px; }

/* people + boards */
.av { display: inline-grid; place-items: center; border-radius: 50%; background: center/cover; font-weight: 900; font-size: .8rem; flex: none; }
.people, .board, .comps, .entries, .audit { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.person, .lb-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: rgba(255,255,255,.05); }
.pname { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.pname small { display: block; color: var(--muted); font-weight: 600; font-size: .72rem; }
.pact { display: flex; gap: 6px; flex: none; }
.presence { font-size: .72rem; font-weight: 700; }
.presence.on { color: var(--lime); }
.presence.off { color: var(--muted); }
.lb-row.me { background: rgba(198,255,61,.1); outline: 1px solid rgba(198,255,61,.35); }
.rank { width: 28px; text-align: center; font-weight: 900; flex: none; }
.score { font-family: var(--display); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.live-badge { font-size: .62rem; font-weight: 900; padding: 3px 7px; border-radius: 7px; background: var(--red); color: #fff; animation: blink 1.6s infinite; white-space: nowrap; }
.team-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--tc); flex: none; box-shadow: 0 0 10px var(--tc); }
.lb-row.team { border-left: 4px solid var(--tc); }
.team-tag { font-style: normal; font-size: .64rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--tc) 30%, transparent); }
.tbar { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); margin-top: 4px; overflow: hidden; }
.tbar i { display: block; height: 100%; background: var(--grad); }
.add-friend { display: flex; gap: 8px; margin-bottom: 6px; }
.add-friend input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--card-b); background: rgba(0,0,0,.28); color: var(--text); }
.code-box { display: flex; justify-content: space-between; align-items: center; background: rgba(198,255,61,.08); border-radius: 12px; padding: 8px 12px; }
.code-box small { color: var(--muted); }
.code-box b, #myCode2 { font-family: ui-monospace, monospace; letter-spacing: .14em; color: var(--lime); }

/* competitions */
.comp-card { padding: 12px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--card-b); }
.cc-top { display: flex; justify-content: space-between; gap: 8px; }
.cc-sub { color: var(--muted); font-size: .78rem; margin: 3px 0; }
.cc-act { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; flex-wrap: wrap; }
.st-live { color: var(--red); font-weight: 900; font-size: .78rem; }
.cd-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cd-head h2 { margin: 6px 0 0; font-family: var(--display); font-size: 1.5rem; }
.back { margin-bottom: 4px; }
#compDetail > .btn-block, #compDetail > .cc-act { margin: 10px 0; }
.panel { margin-top: 12px; border-radius: 16px; background: rgba(0,0,0,.2); border: 1px solid var(--card-b); padding: 10px 12px; }
.panel summary { cursor: pointer; font-weight: 800; padding: 2px 0 6px; }
.invite-row, .adjust-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.invite-row select, .adjust-row select, .adjust-row input { flex: 1 1 120px; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--card-b); background: rgba(0,0,0,.3); color: var(--text); }
.role-sel { padding: 6px 8px; font-size: .78rem; }
.entry { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); }
.entry.st-rejected { opacity: .55; text-decoration: line-through; }
.entry.st-approved { border-left: 3px solid var(--lime); }
.entry.st-confirmed { border-left: 3px solid #ffb21e; }
.audit li { font-size: .78rem; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.audit small { color: var(--muted); }
.ref-cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ref-cam { position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: #000; }
.ref-cam video { width: 100%; height: 100%; object-fit: cover; }
.ref-cam .ind { position: absolute; top: 6px; left: 6px; }
.ref-cam b, .ref-cam small { position: absolute; left: 8px; font-size: .78rem; text-shadow: 0 1px 3px #000; }
.ref-cam b { bottom: 20px; }
.ref-cam small { bottom: 5px; font-size: .68rem; }
.pb-box { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; padding: 12px; border-radius: 16px; background: rgba(198,255,61,.08); border: 1px dashed rgba(198,255,61,.5); }
.pb-box small { display: block; color: var(--muted); font-size: .72rem; }
.pb-box b { font-family: var(--display); font-size: 1.8rem; }
.pb-box p { grid-column: span 2; margin: 0; font-weight: 700; }
.comp-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.comp-form fieldset { border: 0; padding: 0; margin: 10px 0; }
.comp-form .check small { opacity: .7; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* tiles: indicator chips + add friend */
.tile .inds { position: absolute; top: 8px; left: 8px; right: 44px; display: flex; flex-wrap: wrap; gap: 3px; }
.ind { font-size: .6rem; font-weight: 900; padding: 3px 6px; border-radius: 7px; background: rgba(0,0,0,.55); color: var(--muted); letter-spacing: .05em; }
.ind.on.cam { background: var(--red); color: #fff; }
.ind.on.mic { background: var(--orange); color: #fff; }
.ind.on.ai { background: var(--cyan); color: #00222a; }
.ind.on.count { background: #ffb21e; color: #2a1a00; }
.tile .add-friend-btn { position: absolute; right: 6px; top: 44px; border: 0; border-radius: 999px; padding: 4px 8px; font-size: .64rem; font-weight: 800; background: rgba(0,0,0,.55); }
.tile video.audio-only { opacity: 0; }

/* mobile spacing for bottom nav */
@media (max-width: 899px) {
  body.in-app .layout { padding-bottom: calc(96px + var(--safe-b)); }
  .stats-rail { bottom: calc(72px + var(--safe-b)); }
  .toggles { grid-template-columns: 1fr 1fr; }
  .tgl { padding: 9px; gap: 7px; }
  .tgl-ico { font-size: 1.1rem; }
  .icon-btn { width: 34px; height: 34px; }
  .online-pill { margin-left: auto; }
  .comp-form .grid2 { grid-template-columns: 1fr; }
}
@media (min-width: 900px) {
  .tabs-top { display: flex; }
  body.in-app .tabs-bottom { display: none; }
  .online-pill { margin-left: auto; }
  .view-pane { grid-column: 1 / 3; grid-row: 1; }
  .pip { bottom: 20px; left: 20px; width: 200px; }
  .pip-chips span { font-size: .66rem; }
  .pip-cue { font-size: .78rem; }
}