/* App do participante */
body { min-height: 100dvh; }

.topbar { position: sticky; top: 0; z-index: 5; padding-top: calc(12px + env(safe-area-inset-top)); }
.points-pill { color: var(--orange); font-weight: 500; }

.net-banner {
  margin: 0;
  padding: 10px var(--pad-x);
  background: rgba(245, 199, 3, 0.14);
  border-bottom: 1px solid rgba(245, 199, 3, 0.4);
  font-size: 14px;
  color: #fff;
}

.app {
  max-width: 560px;
  margin: 0 auto;
  padding: 22px var(--pad-x) calc(96px + env(safe-area-inset-bottom));
  outline: none;
}
.view { display: grid; gap: 20px; }
.view[hidden] { display: none; }
.view h1 { font-size: clamp(26px, 7.5vw, 34px); }
.loading { color: var(--muted); font: 500 13px var(--mono); letter-spacing: .15em; text-transform: uppercase; }

.stack { display: grid; gap: 18px; }
fieldset.field { border: 0; margin: 0; padding: 0; }
fieldset.field legend { font-weight: 500; font-size: 14px; margin-bottom: 8px; padding: 0; }
.counter { display: flex; justify-content: space-between; }
.form-error { color: var(--danger); font-size: 14px; font-weight: 400; }
.closed-note { padding: 12px 16px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.06); color: #fff; }
.check a { color: var(--blue-light); }

/* Listas de perguntas */
.q-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.q { display: grid; gap: 8px; padding: 14px 16px; }
.q p { color: #fff; font-weight: 400; font-size: 15px; overflow-wrap: anywhere; }
.q .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.empty { color: var(--muted); font-size: 14px; }
.outbox { display: grid; gap: 10px; }

/* Placar */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stats .card { display: grid; gap: 6px; }
.breakdown { display: grid; gap: 8px; font-size: 14px; }
.breakdown div { display: flex; justify-content: space-between; gap: 12px; color: var(--body-dark); }
.breakdown b { color: #fff; font-weight: 600; }
.account { display: grid; gap: 10px; padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--line); }
.account p { font-size: 14px; overflow-wrap: anywhere; }

/* Votos */
.vote {
  min-height: 40px;
  min-width: 72px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: #fff;
  font: 600 14px var(--mono);
  cursor: pointer;
}
.vote[aria-pressed="true"] { background: var(--gradient-cta); color: #0b0b0b; border-color: transparent; }
.vote:disabled { opacity: 0.45; cursor: default; }

/* Regras */
.rules { margin: 0; padding-left: 22px; display: grid; gap: 12px; color: var(--body-dark); }
.rules b { color: #fff; font-weight: 600; }

/* Abas inferiores */
.tabs {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 5;
  display: flex;
  border-top: 1px solid var(--line);
  background: rgba(3, 6, 14, 0.96);
  backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs[hidden] { display: none; }
.tabs a {
  flex: 1;
  min-height: 56px;
  display: grid;
  place-items: center;
  padding: 8px 4px;
  text-align: center;
  font: 500 11px/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.tabs a[aria-current="page"] { color: #fff; box-shadow: inset 0 2px 0 var(--orange); }
.tabs a[hidden] { display: none; }

/* Confirmação de exclusão */
.dialog {
  max-width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
}
.dialog::backdrop { background: rgba(3, 6, 14, 0.75); }
.dialog h2 { font-size: 20px; margin-bottom: 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.btn-danger { background: #e5484d; color: #fff; }

/* ---------- v2: agenda, palestras e palestrantes ---------- */
.back { font: 500 13px var(--mono); letter-spacing: 0.08em; color: var(--blue-light); text-decoration: none; justify-self: start; padding: 6px 0; }
.view .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge-live { background: rgba(253, 101, 9, 0.18); color: var(--orange); box-shadow: inset 0 0 0 1px rgba(253, 101, 9, 0.55); }
.badge-live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--orange); vertical-align: 1px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .badge-live::before { animation: none; } }

/* Agora / A seguir */
.now-cards { display: grid; gap: 10px; }
.now-cards:empty { display: none; }
.now { display: grid; gap: 10px; padding: 18px; }
.now-title { color: #fff; font-weight: 600; font-size: 19px; line-height: 1.3; text-decoration: none; }
a.now-title:hover, a.next-title:hover, a.tl-title:hover { text-decoration: underline; }
.now-next { padding: 14px 18px; gap: 6px; }
.next-title { color: #fff; font-weight: 500; font-size: 15px; line-height: 1.35; text-decoration: none; }
.who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--body-dark); }
.avatars { display: inline-flex; flex: none; }
.avatars img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--ink); background: var(--navy); }
.avatars img + img { margin-left: -10px; }
.progress { width: 100%; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.1); appearance: none; }
.progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.1); }
.progress::-webkit-progress-value { background: var(--gradient-cta); border-radius: 999px; }
.progress::-moz-progress-bar { background: var(--gradient-cta); border-radius: 999px; }

/* Filtro Tudo / Minha agenda */
.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border: 1px solid var(--line-strong); border-radius: 999px; }
.seg { min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 500 13px var(--sans); cursor: pointer; }
.seg[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Linha do tempo */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.tl-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.tl-time { font: 500 14px/1.6 var(--mono); color: #fff; }
.tl-body { display: grid; gap: 6px; min-width: 0; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tl-title { color: #fff; font-weight: 500; font-size: 16px; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.tl-ask { color: var(--blue-light); }
.tl-item.tl-break { padding: 10px 0; }
.tl-break .tl-body { grid-column: 2 / -1; display: flex; gap: 10px; align-items: center; }
.tl-break .tl-time, .tl-break-title { color: var(--muted); }
.tl-break-title { font: 500 12px/1.6 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.tl-item.is-past { opacity: 0.5; }
.tl-item.is-live { margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: var(--radius-sm); border-top-color: transparent; background: rgba(253, 101, 9, 0.08); box-shadow: inset 3px 0 0 var(--orange); }
.tl-item.is-live + .tl-item { border-top-color: transparent; }

/* Estrela de "Minha agenda" */
.star {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font: 400 24px/1 var(--sans); cursor: pointer;
}
.star[aria-pressed="true"] { color: var(--yellow); }
.star-wide { justify-self: start; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); font-size: 14px; font-weight: 500; color: #fff; }
.star-wide span { font-size: 20px; color: var(--muted); }
.star-wide[aria-pressed="true"] { border-color: rgba(245, 199, 3, 0.5); background: rgba(245, 199, 3, 0.08); }
.star-wide[aria-pressed="true"] span { color: var(--yellow); }

/* Detalhe da palestra */
.talk-detail, .speaker-detail { display: grid; gap: 18px; }
.talk-detail h1 { font-size: clamp(24px, 6.8vw, 32px); }
.talk-desc, .speaker-bio { color: var(--body-dark); }
.talk-detail .btn { text-decoration: none; }
.speaker-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.speaker-rows a { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); color: #fff; text-decoration: none; background: var(--surface); }
.speaker-rows img { width: 56px; height: 70px; border-radius: var(--radius-sm); object-fit: cover; }
.speaker-rows span { display: grid; gap: 2px; }
.speaker-rows b { font-weight: 600; }

/* Palestrantes */
.speaker-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.speaker-card { display: grid; gap: 6px; padding: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); color: #fff; text-decoration: none; height: 100%; align-content: start; }
.speaker-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--navy); }
.speaker-card b { padding: 0 12px; font-weight: 600; font-size: 15px; line-height: 1.3; }
.speaker-card .hint { padding: 0 12px; }
.speaker-hero { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: end; }
.speaker-hero img { width: 120px; height: 150px; border-radius: var(--radius); object-fit: cover; background: var(--navy); }
.speaker-hero h1 { font-size: clamp(24px, 6.5vw, 30px); }
.speaker-role { color: var(--blue-light); font-size: 14px; margin-top: 6px; }

/* Perguntar */
.select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; text-overflow: ellipsis; }
.select option { color: #000; }
.community { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.community[hidden] { display: none; }
.q-talk { color: var(--blue-light); text-decoration: none; }

/* Aviso flutuante (programação atualizada etc.), acima das abas */
.app-toast { position: fixed; left: 16px; right: 16px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 6; max-width: 528px; margin: 0 auto; background: var(--navy); border: 1px solid var(--line-strong); }

/* Aviso do organizador */
.announce { position: sticky; top: calc(54px + env(safe-area-inset-top)); z-index: 4; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px var(--pad-x); background: var(--gradient-cta); color: #0b0b0b; }
.announce[hidden] { display: none; }
.announce .meta { color: rgba(0, 0, 0, 0.7); }
.announce p { color: #0b0b0b; font-weight: 500; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.announce-close { min-width: 40px; min-height: 40px; border: 0; background: transparent; color: #0b0b0b; font-size: 22px; cursor: pointer; }

/* Lembretes */
.remind { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; }
.remind[hidden] { display: none; }
.remind b { color: #fff; font-weight: 600; font-size: 15px; }
.remind > div { display: grid; gap: 2px; }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14px; flex: none; }

/* Avaliação */
.rate { display: grid; gap: 12px; padding: 16px; }
.rate-stars { display: flex; gap: 4px; }
.rate-star { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 30px; line-height: 1; cursor: pointer; padding: 0; }
.rate-star[aria-pressed="true"] { color: var(--yellow); }
.rate .textarea { min-height: 80px; }
.rate-done { color: var(--blue-light); font-size: 14px; }
.tl-rate { color: var(--yellow); text-decoration: none; font: 500 12px var(--mono); }

/* Regras dentro de "Pontos" */
.how { display: grid; gap: 14px; padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--line); }
.how h2 { font-size: 22px; }