/* ── layout ── */
/* ── header ── */
.header {
  background: var(--ink);
  padding: 14px 20px;
  padding-top: max(14px, env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.header-title { display: flex; align-items: center; gap: 10px; }
.header-title .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
.header-title h1 { font-size: 17px; font-weight: 600; color: #fff; letter-spacing: .3px; }
.header .badge {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  padding: 3px 10px; border-radius: 20px; font-size: 12px;
  font-weight: 500; font-variant-numeric: tabular-nums;
}

/* ── tabs ── */
.tabs {
  display: flex; background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 49px; z-index: 99;
}
.tab {
  flex: 1; text-align: center; padding: 13px 4px 11px;
  font-size: 13px; font-weight: 540; letter-spacing: .2px;
  color: var(--mute); cursor: pointer; user-select: none;
  border-bottom: 2px solid transparent; transition: .18s;
}
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.tab .count { font-size: 11px; opacity: .55; margin-left: 2px; }

/* ── main ── */
.main { padding: 14px 14px 88px; }
.panel { display: none; }
.panel.active { display: block; }
#panel-ai.active { display: flex; flex-direction: column; }

/* ── responsive ── */
@media (min-width: 600px) {
  .main { max-width: 480px; margin: 0 auto; }
  .fab { right: calc(50% - 230px); }
}