:root {
  /* o qg.js troca estas cores pela paleta do qg.config.js */
  --fundo: #08090a;
  --superficie: #2c2f34;
  --destaque: #2a5cf0;
  --destaque2: #5aa2ff;
  --sel: #99c8ff;
  --texto: #f5f5f3;
  --texto2: #b4b8be;
  --bg: var(--fundo);
  --azul: var(--destaque);
  --azul-claro: var(--destaque2);
  --sans: "Geist", -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--texto);
}

#cena {
  display: block;
  width: 100%;
  height: 100%;
}

.aviso {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  text-align: center;
}
.aviso[hidden] { display: none; }
.aviso-titulo { font-size: 22px; font-weight: 600; color: var(--texto); }
.aviso-texto { max-width: 560px; font-size: 15px; line-height: 1.5; color: var(--texto2); }
.aviso-itens { list-style: none; display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.aviso-itens li { font: 14px "Geist Mono", ui-monospace, monospace; color: var(--sel); text-align: left;
  padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--superficie) 60%, transparent); }

.carregando {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg);
  transition: opacity .5s ease;
}
.carregando.saindo { opacity: 0; pointer-events: none; }
.carregando-texto { font-size: 14px; color: var(--sel); letter-spacing: .02em; }
.carregando-trilho {
  width: min(240px, 60vw);
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--destaque2) 15%, transparent);
  overflow: hidden;
}
.carregando-barra {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--azul), var(--azul-claro));
  transition: width .2s ease;
}

.botao-som {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 999px;
  background: rgba(16, 20, 30, .7);
  border: 1px solid color-mix(in srgb, var(--destaque2) 35%, transparent);
  cursor: pointer;
  user-select: none;
}
.botao-som:hover { border-color: color-mix(in srgb, var(--destaque2) 80%, transparent); }

@font-face { font-family: "Instrument Serif"; src: url(fontes/InstrumentSerif-Regular.ttf); font-style: normal; }
@font-face { font-family: "Instrument Serif"; src: url(fontes/InstrumentSerif-Italic.woff2); font-style: italic; }
@font-face { font-family: "Geist"; src: url(fontes/Geist-Regular.woff2); font-weight: 400; }
@font-face { font-family: "Geist"; src: url(fontes/Geist-Medium.woff2); font-weight: 500; }
@font-face { font-family: "Geist Mono"; src: url(fontes/GeistMono-Regular.woff2); }

/* Barra de tour */
.tour-barra {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  max-width: calc(100% - 80px);
  padding: 6px;
  border-radius: 999px;
  background: rgba(17, 18, 20, .78);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tour-trilho {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tour-trilho::-webkit-scrollbar { display: none; }
.tour-botao {
  flex: none;
  padding: 7px 13px;
  font: 500 12.5px var(--sans);
  color: var(--texto2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
}
.tour-botao:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }
.tour-botao.ativo {
  color: var(--texto);
  background: color-mix(in srgb, var(--destaque) 22%, var(--fundo));
  border-color: var(--destaque2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--destaque2) 35%, transparent), 0 0 18px color-mix(in srgb, var(--destaque) 35%, transparent);
}
.tour-botao:focus-visible { outline: 2px solid var(--destaque2); outline-offset: 2px; }
.tour-auto { color: var(--sel); }

.tour-titulo {
  position: fixed;
  bottom: 74px;
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(720px, calc(100% - 32px));
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease, transform .45s ease;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .6);
}
.tour-titulo.visivel { opacity: 1; transform: translate(-50%, 0); }
.tour-etapa { font: 12px "Geist Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--destaque2); }
.tour-nome { margin-top: 4px; font: 400 clamp(30px, 4.4vw, 52px)/1.05 "Instrument Serif", Georgia, serif; color: var(--texto); }
.tour-nome, .tour-texto { overflow-wrap: anywhere; }
.tour-texto { margin-top: 8px; font: 400 15px "Geist", system-ui, sans-serif; color: var(--texto2); }

@media (prefers-reduced-motion: reduce) {
  .tour-titulo, .tour-botao { transition: none; }
}

/* ---------- interface ao vivo (painel.js), no jeito do macOS: vidro fosco, cantos redondos, SF/Geist ---------- */
.mac-relogio, .mac-notif, .mac-folha, .mac-botao {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", system-ui, sans-serif;
  color: #f5f5f7;
  background: rgba(30, 24, 24, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.mac-relogio { position: fixed; top: 16px; right: 16px; z-index: 20; padding: 10px 16px; border-radius: 16px; text-align: right; }
.mac-hora { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mac-dia { font-size: 13px; opacity: 0.75; }
.mac-folha[hidden] { display: none; }
.mac-notifs { position: fixed; top: 96px; right: 16px; z-index: 20; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 32px)); }
.mac-notif { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px;
  font-size: 13px; animation: mac-entra 0.35s cubic-bezier(.2,.9,.3,1.2); transition: opacity .5s, transform .5s; }
.mac-notif i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.mac-notif b { display: block; font-size: 13px; }
.mac-notif span { opacity: 0.85; }
.mac-notif time { font-size: 11px; opacity: 0.6; align-self: start; }
.mac-notif.sai { opacity: 0; transform: translateX(30px); }
@keyframes mac-entra { from { opacity: 0; transform: translateY(-12px) scale(0.96); } }
.mac-botao { position: fixed; top: 16px; left: 16px; z-index: 20; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; }
.mac-folha { position: fixed; top: 64px; left: 16px; z-index: 21; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 160px);
  overflow: auto; padding: 16px; border-radius: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.mac-folha header { display: flex; align-items: center; gap: 12px; }
.mac-folha header b { flex: 1; font-size: 16px; }
.mac-folha header a { color: #8ab4ff; text-decoration: none; }
.mac-folha .fechar { background: none; border: 0; color: inherit; font-size: 16px; cursor: pointer; }
.mac-folha label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; opacity: 0.85; }
.mac-folha input { font: inherit; color: inherit; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px; padding: 8px 10px; color-scheme: dark; }
.mac-folha .rotulo { margin: 4px 0 0; font-size: 12px; opacity: 0.7; }
.mac-folha .seg, .mac-folha .grade, .mac-folha .fases { display: flex; flex-wrap: wrap; gap: 6px; }
.mac-folha .seg button, .mac-folha .grade button, .mac-folha .fases button, .mac-folha .chegou {
  font: inherit; font-size: 13px; color: inherit; cursor: pointer; padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); display: inline-flex; align-items: center; gap: 6px; }
.mac-folha button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.92); color: #1d1d1f; }
.mac-folha .fases i { width: 9px; height: 9px; border-radius: 50%; }
.mac-folha .chegou { background: #0a84ff; border-color: #0a84ff; justify-content: center; font-weight: 600; }
@media (max-width: 600px) { .mac-hora { font-size: 20px; } .mac-notifs { top: 80px; } }

.tour-logo { display: block; height: clamp(40px, 7vw, 72px); width: auto; margin: 4px auto 6px; }
.mac-clima { font-size: 13px; opacity: 0.85; margin-top: 2px; }
.mac-clima:empty { display: none; }
/* celular: a barra do tour encosta na esquerda e deixa espaço para o botão de som */
@media (max-width: 700px) { .tour-barra { left: 12px; transform: none; max-width: calc(100% - 78px); } }
/* entrada (login), no mesmo vidro do macOS */
.mac-entrar { position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; gap: 12px; padding: 24px 16px; text-align: center;
  background: radial-gradient(900px 500px at 50% 20%, #3a1a1a, #120707); color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", system-ui, sans-serif; }
.mac-entrar-logo { height: 56px; margin: 0 auto 8px; }
.mac-entrar h1 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.mac-entrar p { margin: 0; opacity: 0.75; max-width: 340px; }
.mac-entrar form { display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 32px)); margin-top: 8px; text-align: left; }
.mac-entrar label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; opacity: 0.9; }
.mac-entrar input { font: inherit; color: inherit; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color-scheme: dark; }
.mac-entrar button { font: inherit; font-weight: 600; color: #fff; background: #0a84ff; border: 0; border-radius: 12px; padding: 12px; cursor: pointer; }
.mac-entrar button:disabled { opacity: .6; }
.mac-entrar .msg { font-size: 13px; min-height: 1.2em; text-align: center; }
.mac-folha header a + a { margin-left: 10px; }

.mac-voz { position: fixed; top: 16px; left: 140px; z-index: 20; padding: 9px 16px; border-radius: 999px; font: 600 14px -apple-system, system-ui, sans-serif;
  color: #f5f5f7; background: rgba(30,24,24,.55); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.14); cursor: pointer; }
.mac-voz.ligada { background: #2fbf71; border-color: #2fbf71; color: #08140d; }
@media (max-width: 600px) { .mac-voz { top: 60px; left: 16px; } }