/* ---------- header ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--tg-header) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--stroke-soft);
}
.brand { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 0 auto; }
.brand-ico {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 13px; flex: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, white 10%), #7c3aed);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}
.brand-ico svg { width: 22px; height: 22px; }
.app-header h1 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 0.2px; }
.who, #who { font-size: 12px; color: var(--hint); margin-top: 2px; }
.live-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 5px rgba(52,199,123,.15); animation: pulse 2.2s infinite; flex: none; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* ---------- tabs ---------- */
#tabs {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  gap: 2px;
  max-width: 640px;
  margin: 10px auto 0;
  padding: 5px;
  background: color-mix(in srgb, var(--bg1) 72%, transparent);
  border: 1px solid var(--stroke-soft);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#tabs button {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 2px;
  border: 0;
  background: transparent;
  color: var(--hint);
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.25s var(--ease), transform 0.12s var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tabs button:active { transform: scale(0.94); }
#tabs button.on { color: var(--text); }
#tabs-ind, #tabs-indicator {
  position: absolute;
  top: 5px; bottom: 5px;
  left: 0; width: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)), color-mix(in srgb, var(--accent) 34%, var(--bg1));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease), width 0.32s var(--ease);
  pointer-events: none;
}