:root{
  --bg:#0a0e0d;
  --fg:#f4f6f5;
  --muted:#a7b0ac;
  --line:rgba(255,255,255,.14);
  --panel:rgba(255,255,255,.035);
  --accent:#e3b45a;
  --accent-soft:rgba(227,180,90,.16);
  --mono:'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

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

html{ background:var(--bg); }
body{
  min-height:100dvh;
  color:var(--fg);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
}

/* ---------------- FUNDO ---------------- */
.glow{
  position:fixed; z-index:0; pointer-events:none;
  width:70vmax; height:70vmax; right:-34vmax; top:-38vmax;
  background:radial-gradient(circle, var(--accent-soft), transparent 60%);
  filter:blur(10px);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- ESTRUTURA ---------------- */
.shell{
  position:relative; z-index:2;
  max-width:980px;
  margin:0 auto;
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding:clamp(20px, 3.5vw, 40px);
}

.top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{
  display:flex; align-items:center; gap:12px;
  color:var(--fg); text-decoration:none;
  font-weight:600; letter-spacing:.24em; font-size:13px;
}
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.brand .faint{ opacity:.5; }
.brand small{ color:var(--muted); font-weight:400; letter-spacing:.16em; text-transform:uppercase; }
.status{
  font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.pulse{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

main{ flex:1 1 auto; }

.intro{ margin:clamp(40px, 8vw, 72px) 0 clamp(28px, 5vw, 44px); }
.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:12px; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--accent); opacity:.8; }
h1{ font-weight:600; font-size:clamp(32px, 5.4vw, 52px); line-height:1.05; letter-spacing:-.03em; }
h1 em{ font-style:normal; color:var(--accent); }
.lead{ margin-top:16px; max-width:60ch; color:#dfe4e1; font-size:clamp(15px, 1.8vw, 17px); line-height:1.6; text-wrap:pretty; }
.lead code, .foot code{ font-family:var(--mono); color:var(--accent); font-size:.92em; }

/* ---------------- LISTA ---------------- */
.lista{ display:flex; flex-direction:column; gap:36px; }

.grupo{ display:flex; flex-direction:column; gap:12px; }
.grupo-titulo{
  font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:10px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.grupo-conta{
  font-size:11px; letter-spacing:0; color:var(--accent);
  border:1px solid var(--accent-soft); border-radius:999px; padding:1px 8px;
}

.item{
  display:grid; grid-template-columns:72px minmax(0, 1fr); gap:16px;
  padding:16px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--panel);
}
.thumb{
  width:72px; height:72px; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); background:rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
}
.thumb img, .thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb-ext{ font-family:var(--mono); font-size:13px; color:var(--accent); }

.info{ min-width:0; display:flex; flex-direction:column; gap:10px; }
.cabeca{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
.nome{ font-weight:600; font-size:15px; overflow-wrap:anywhere; }
.tipo, .peso{ font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.04em; }
.tipo{ color:var(--accent); text-transform:uppercase; letter-spacing:.12em; }

.campo{
  display:grid; grid-template-columns:44px minmax(0, 1fr) auto; align-items:center; gap:10px;
}
.rotulo{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.valor{
  display:block; min-width:0;
  font-family:var(--mono); font-size:13px; color:#e8ece9;
  background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:8px;
  padding:9px 12px;
  white-space:nowrap; overflow-x:auto;
}
.copiar, .btn{
  font:inherit; font-size:13px; font-weight:500;
  color:var(--fg); background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:8px;
  padding:8px 14px; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.copiar{ min-width:84px; }
.copiar:hover, .btn:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08); }
.copiar.ok{ color:#1a1305; background:var(--accent); border-color:var(--accent); }
.copiar:focus-visible, .btn:focus-visible, .brand:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.exemplo{
  margin-left:auto;
  font:inherit; font-size:12.5px; font-weight:500;
  color:var(--accent); background:transparent;
  border:1px solid var(--accent-soft); border-radius:999px;
  padding:5px 12px; cursor:pointer; text-decoration:none;
  transition:background .2s ease, border-color .2s ease;
}
.exemplo:hover{ background:var(--accent-soft); border-color:var(--accent); }
.exemplo:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.thumb.clicavel{ cursor:pointer; transition:border-color .2s ease; }
.thumb.clicavel:hover{ border-color:var(--accent); }

.aviso{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:18px; border:1px dashed var(--line); border-radius:12px;
  color:var(--muted); font-size:14px;
}

/* ---------------- POPUP DE EXEMPLO ---------------- */
.modal{
  border:0; padding:0; margin:auto;
  background:transparent; color:var(--fg);
  width:min(1000px, calc(100vw - 32px));
  max-width:none; max-height:calc(100dvh - 32px);
}
.modal::backdrop{ background:rgba(4,6,5,.74); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.modal[open]{ animation:surgir .18s ease; }
@keyframes surgir{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.modal-caixa{
  display:flex; flex-direction:column; gap:12px;
  padding:16px;
  background:#0f1413; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
}
.modal-topo{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; }
.modal-titulo{ display:flex; align-items:baseline; gap:10px; flex:1 1 auto; min-width:0; }
.modal-fundos{ display:flex; gap:6px; }
.modal-fundos[hidden]{ display:none; }
.modal-fundos button, .modal-fechar{
  font:inherit; font-size:13px;
  color:var(--fg); background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; cursor:pointer;
}
.modal-fundos button[aria-pressed="true"]{ color:#1a1305; background:var(--accent); border-color:var(--accent); }
.modal-fechar{ width:36px; height:36px; padding:0; font-size:22px; line-height:1; border-radius:50%; }
.modal-fundos button:hover, .modal-fechar:hover{ border-color:rgba(255,255,255,.4); }
.modal-fundos button:focus-visible, .modal-fechar:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.modal-palco{
  height:min(64vh, 580px);
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:#050706;
  display:flex; align-items:center; justify-content:center;
}
.modal-palco iframe{ width:100%; height:100%; border:0; display:block; background:#fff; }
.modal-palco img, .modal-palco video{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.modal-dica{ font-size:13px; color:var(--muted); }

/* ---------------- RODAPÉ ---------------- */
.foot{
  margin-top:48px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px;
  font-size:12.5px; color:var(--muted);
}

/* ---------------- Responsivo ---------------- */
@media (max-width:640px){
  .brand{ font-size:12px; letter-spacing:.18em; gap:9px; }
  .brand small{ display:none; }
  .item{ grid-template-columns:minmax(0, 1fr); }
  .thumb{ width:48px; height:48px; }
  .thumb.midia{ width:100%; height:140px; }
  .campo{ grid-template-columns:minmax(0, 1fr) auto; }
  .rotulo{ grid-column:1 / -1; }
  .modal-caixa{ padding:12px; }
  .modal-palco{ height:60vh; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}