:root {
  --bg:#12161c; --card:#1c232d; --text:#f3f4f6; --muted:#a8b0bd; --primary:#d62828; --primary-text:#fff;
  --accent:#f4b400; --border:#2f3a48; --header:#8f1717; --header-text:#fff; --titlebar:#2b3645; --titlebar-text:#f3f4f6; --radius:12px; --overlay:.7; --bg-image:none;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--text); background:var(--bg); min-height:100vh; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:var(--bg-image) center/cover no-repeat fixed; }
body.has-bg::after { content:""; position:fixed; inset:0; z-index:-1; background:var(--bg); opacity:var(--overlay); }
.skip { position:absolute; left:-999px; } .skip:focus { left:8px; top:8px; background:#fff; color:#000; padding:8px; z-index:9; }
h1,h2,h3 { line-height:1.2; margin:0 0 .5em; } h2 { font-size:1.35rem; } h3 { font-size:1.05rem; }
a { color:var(--accent); }
button,input,select,textarea { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.muted { color:var(--muted); } .small { font-size:.85rem; } .hidden { display:none !important; }

header.top { background:var(--header); color:var(--header-text); border-bottom:4px solid var(--accent); }
.top-in { max-width:1360px; margin:0 auto; padding:12px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.brand { display:flex; gap:10px; align-items:center; flex:1 1 220px; min-width:0; }
.brand .logo { font-size:2rem; } .brand b { display:block; font-size:1.1rem; } .brand span { font-size:.8rem; opacity:.9; }
nav.tabs { display:flex; gap:4px; flex-wrap:wrap; }
.tab { background:transparent; border:0; color:var(--header-text); padding:8px 14px; border-radius:calc(var(--radius) - 2px); cursor:pointer; opacity:.85; }
.tab[aria-selected="true"] { background:rgba(0,0,0,.28); opacity:1; font-weight:600; }
main { max-width:1360px; margin:0 auto; padding:16px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:16px; }
.grid { display:grid; gap:12px; } .g2 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .g3 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .row.between { justify-content:space-between; }
.btn { background:var(--primary); color:var(--primary-text); border:0; border-radius:var(--radius); padding:9px 16px; cursor:pointer; font-weight:600; }
.btn.ghost { background:transparent; color:var(--text); border:1px solid var(--border); } .btn.danger { background:#7f1d1d; color:#fff; }
.btn:disabled { opacity:.5; cursor:not-allowed; } .btn.sm { padding:5px 10px; font-size:.85rem; }
input,select,textarea { background:var(--bg); border:1px solid var(--border); border-radius:calc(var(--radius) - 4px); padding:8px 10px; max-width:100%; }
textarea { width:100%; min-height:70px; } label { display:block; font-size:.85rem; color:var(--muted); margin:8px 0 3px; }
.field input,.field select { width:100%; }
.seg { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; flex-wrap:wrap; }
.seg button { background:transparent; border:0; padding:8px 14px; cursor:pointer; }
.seg button[aria-pressed="true"] { background:var(--primary); color:var(--primary-text); font-weight:600; }
.podium { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.pod { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; text-align:center; }
.pod.p1 { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.pod .medal { font-size:1.8rem; } .pod .name { font-weight:700; overflow-wrap:anywhere; } .pod .pts { font-size:1.6rem; font-weight:800; color:var(--accent); }
.avatar { flex:none; width:56px; height:56px; border-radius:50%; background:var(--border); display:inline-flex; align-items:center; justify-content:center; font-weight:700; overflow:hidden; object-fit:cover; }
.avatar.s { width:34px; height:34px; font-size:.8rem; }
table { width:100%; border-collapse:collapse; } th,td { text-align:left; padding:8px; border-bottom:1px solid var(--border); vertical-align:middle; }
th { font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } td.num,th.num { text-align:right; }
tr.click { cursor:pointer; } tr.click:hover { background:rgba(255,255,255,.05); }
.who { display:flex; gap:10px; align-items:center; min-width:0; } .who span { overflow-wrap:anywhere; }
.badge { display:inline-block; padding:2px 9px; border-radius:99px; font-size:.75rem; border:1px solid var(--border); }
.badge.ok { border-color:#2e7d32; color:#7ee08a; } .badge.warn { border-color:var(--accent); color:var(--accent); } .badge.bad { border-color:#c62828; color:#ff8a80; }
.state { text-align:center; padding:32px 12px; color:var(--muted); } .state .ico { font-size:2.2rem; display:block; }
.spin { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:sp .8s linear infinite; margin:0 auto 8px; }
@keyframes sp { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { .spin { animation:none; } }
.toast { position:fixed; right:12px; bottom:12px; background:var(--card); border:1px solid var(--accent); padding:10px 14px; border-radius:var(--radius); max-width:90vw; z-index:20; }
.toast.err { border-color:#c62828; }
dialog { background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); max-width:min(720px,94vw); width:100%; padding:16px; }
dialog::backdrop { background:rgba(0,0,0,.6); }
.login { max-width:380px; margin:8vh auto; } .stat b { font-size:1.8rem; display:block; color:var(--accent); }
pre.txt { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px; max-height:360px; overflow:auto; }
.tablewrap { overflow-x:auto; } code { background:var(--bg); padding:1px 5px; border-radius:4px; font-size:.85em; overflow-wrap:anywhere; }
.swatch { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; } .swatch input[type=color] { width:100%; height:38px; padding:2px; }
@media (max-width:640px) { th.hide-s,td.hide-s { display:none; } .tab { padding:8px 10px; } }
.controls { margin-bottom:14px; }
.logo-slot { display:inline-flex; align-items:center; justify-content:center; }
.brand .logo-slot { font-size:2rem; min-width:44px; height:44px; }
.logo-img { max-height:44px; max-width:180px; object-fit:contain; }
.state .logo-slot { font-size:2.2rem; } .state .logo-slot .logo-img { max-height:72px; max-width:220px; }
.code-big { font-size:1.4rem; letter-spacing:.15em; padding:4px 10px; }

/* ---- detalhe do relatório (usa só as variáveis de tema) ---- */
.rp { display:block; }
.rp-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; min-width:0; }
.rp-card-h { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 16px; background:var(--titlebar); color:var(--titlebar-text); border-bottom:1px solid var(--border); }
.rp-card-h h3, .rp-sub-h h4 { margin:0; display:flex; align-items:center; gap:8px; }
.rp-card-h h3 { font-size:1rem; } .rp-sub-h h4 { font-size:.92rem; }
.rp-ico { opacity:.85; font-size:1em; line-height:1; }
.rp-card-b { padding:0; }
.rp-head { padding:20px; } .rp-title { display:flex; gap:12px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
.rp-title h2 { margin:0 0 4px; font-size:1.5rem; } .rp-code { margin:0; color:var(--muted); font-size:.9rem; }
.rp-status { font-size:.9rem; padding:5px 14px; font-weight:700; }
.rp-status.ok { background:rgba(46,125,50,.16); } .rp-status.warn { background:rgba(244,180,0,.12); }
.rp-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 20px; margin:18px 0 0; padding-top:16px; border-top:1px solid var(--border); }
.rp-field { min-width:0; } .rp-field dt { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:3px; }
.rp-field dd { margin:0; overflow-wrap:anywhere; } .rp-version { margin:14px 0 0; text-align:right; }
.rp-who { display:inline-flex; gap:10px; align-items:center; min-width:0; }
.rp-name { overflow-wrap:anywhere; word-break:normal; min-width:0; } .rp-when { margin-left:4px; }
.rp-count { color:var(--text); min-width:28px; text-align:center; padding:1px 9px; border-radius:99px; border:1px solid var(--border); background:var(--bg); font-size:.8rem; font-weight:700; }
.rp-list, .rp-resp { list-style:none; margin:0; padding:0; }
.rp-person { display:flex; gap:12px; align-items:center; padding:9px 16px; border-top:1px solid var(--border); min-width:0; }
.rp-list > .rp-person:first-child { border-top:0; }
.rp-empty { margin:0; padding:12px 16px; color:var(--muted); font-size:.9rem; font-style:italic; }
/* responsáveis: função | avatar + nome numa linha */
.rp-resp-row { display:grid; grid-template-columns:170px minmax(0,1fr); gap:12px; align-items:center; padding:10px 16px; border-top:1px solid var(--border); }
.rp-resp > .rp-resp-row:first-child { border-top:0; }
.rp-role { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.rp-resp-who { display:flex; gap:12px; align-items:center; min-width:0; }
.rp-resp-row > .rp-empty { padding:0; }
.rp-name-btn { background:none; border:0; padding:2px 4px; margin:0 -4px; color:inherit; text-align:left; cursor:pointer; min-width:0; flex:1 1 auto; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-name-btn:hover { background:color-mix(in srgb, var(--text) 6%, transparent); }
.rp-name-btn.open { white-space:normal; overflow-wrap:anywhere; }
/* participantes / lateral */
.rp-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:0 16px; align-items:start; }
.rp-side { min-width:0; }
.rp-sub + .rp-sub { border-top:1px solid var(--border); }
.rp-sub-h { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 16px; border-left:4px solid var(--muted); background:var(--titlebar); color:var(--titlebar-text); border-top:0; }
.rp-sub + .rp-sub .rp-sub-h { border-top:0; }
.rp-sub .rp-list { border-top:1px solid var(--border); }
.tone-command > .rp-sub-h { border-left-color:var(--primary); } .tone-dcc > .rp-sub-h { border-left-color:var(--accent); } .tone-guest > .rp-sub-h, .tone-none > .rp-sub-h { border-left-color:var(--muted); }
.rp-two { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:0 16px; align-items:start; }
.rp-text { margin:0; padding:14px 16px; white-space:pre-wrap; overflow-wrap:anywhere; }
@media (min-width:900px) { .rp-layout { grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); } }
@media (max-width:640px) {
  .rp-head { padding:16px; } .rp-title h2 { font-size:1.25rem; } .rp-version { text-align:left; }
  .rp-resp-row { grid-template-columns:minmax(0,1fr); gap:4px; }
}
.rp-card-b > .rp-sub:first-child > .rp-sub-h { border-top:1px solid var(--border); }

/* ---- rankings: UMA linha por pessoa (posição | avatar | nome | pontos) ---- */
.rk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:16px; margin-bottom:16px; }
.rk-card { margin-bottom:0; padding:12px 8px 8px; } .rk-card > h3 { padding:0 12px 6px; } .rk-card.wide { margin-bottom:16px; }
.rk-list { list-style:none; margin:0; padding:0; }
.rk-row { display:grid; grid-template-columns:2.6rem 34px minmax(0,1fr) auto auto; align-items:center; column-gap:10px; padding:10px 12px; border-top:1px solid var(--border); cursor:pointer; border-radius:8px; }
.rk-row:first-child { border-top:0; } .rk-row:hover { background:color-mix(in srgb, var(--text) 6%, transparent); }
.rk-row.first { background:color-mix(in srgb, var(--accent) 10%, transparent); }
.rk-pos { text-align:center; font-weight:700; font-size:1.15rem; white-space:nowrap; }
.rk-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.rk-pts { text-align:right; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap; min-width:9.25rem; font-size:1.05rem; } .rk-pts b { font-weight:800; } .rk-pts small { font-weight:500; color:var(--muted); font-size:.85rem; white-space:nowrap; } .rk-u-short { display:none; }
.rk-flag { font-size:.72rem; border:1px solid var(--border); border-radius:99px; padding:1px 8px; color:var(--muted); white-space:nowrap; } .rk-flags { display:flex; gap:6px; } .rk-flag.warn { border-color:var(--accent); color:var(--accent); }
.rk-row:not(:has(.rk-flags)) { grid-template-columns:2.6rem 34px minmax(0,1fr) auto; }
@media (max-width:480px) { .rk-row { grid-template-columns:2rem 34px minmax(0,1fr) auto auto; column-gap:8px; padding:10px 4px; } .rk-row:not(:has(.rk-flags)) { grid-template-columns:2rem 34px minmax(0,1fr) auto; } .rk-pts { min-width:3.2rem; } }
/* ---- admin: perfis, armazenamento, ferramentas ---- */
.perms { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:4px 16px; margin:10px 0; } .perm { display:flex; align-items:center; gap:6px; color:var(--text); font-size:.9rem; margin:0; }
.danger-zone { border-color:#7f1d1d; } .big { font-size:1.8rem; color:var(--accent); } .bad-text { color:#ff8a80; }
.avatar-preview { margin-top:12px; } .avatar-preview .avatar { width:96px; height:96px; font-size:1.6rem; }
.rk-head { padding:0 12px 6px; }
@media (max-width:480px) { .rk-card { padding:10px 4px 6px; } .rk-card > h3, .rk-head { padding-left:8px; padding-right:8px; } .rk-pos { font-size:1rem; } }

/* ---- histórico detalhado do relatório ---- */
.hist { display:grid; gap:12px; }
.hist-block { background:var(--bg); border:1px solid var(--border); border-left:4px solid var(--muted); border-radius:calc(var(--radius) - 2px); padding:12px 14px; min-width:0; }
.hist-block.corr { border-left-color:var(--accent); }
.hist-h { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; } .hist-h h4 { margin:0; font-size:1rem; overflow-wrap:anywhere; }
.hist-meta { margin:2px 0 8px; } .hist-info { margin:4px 0; }
.hist-item { border-top:1px solid var(--border); padding:8px 0; } .hist-item:first-of-type { border-top:0; }
.hist-label { font-weight:700; margin-bottom:4px; } .hist-row { display:flex; gap:8px; align-items:baseline; min-width:0; } .hist-val { white-space:pre-wrap; overflow-wrap:anywhere; min-width:0; }
.hist-tag { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; min-width:5.2rem; } .hist-tag.new { color:var(--accent); }
.hist-list { margin:2px 0 6px 1.1rem; padding:0; } .hist-list li { overflow-wrap:anywhere; }
@media (max-width:560px) { .rk-pts { min-width:4.6rem; font-size:1rem; } .rk-u-long { display:none; } .rk-u-short { display:inline; } }

/* ---- Portal: áreas, menu móvel, Comandos e identificação RP ---- */
nav.areas-desk { flex:1 1 auto; } button.menu-btn, nav.area-menu { display:none; }
.top-sub { max-width:1360px; margin:0 auto; padding:0 16px 8px; }
nav.subnav .tab { font-size:.92rem; padding:6px 12px; }
@media (max-width:1300px) {
  nav.areas-desk { display:none; } button.menu-btn { display:inline-flex; }
  nav.area-menu:not([hidden]) { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:4px; max-width:1360px; margin:0 auto; padding:4px 16px 12px; }
  .area-item { background:rgba(0,0,0,.18); border:0; color:var(--header-text); padding:10px 12px; border-radius:calc(var(--radius) - 2px); text-align:left; cursor:pointer; }
  .area-item[aria-selected="true"] { background:rgba(0,0,0,.42); font-weight:700; }
}
.construction { text-align:center; padding:32px 16px; } .construction h2 { margin-bottom:8px; }
.cmd-photo { width:36px; height:36px; border-radius:50%; object-fit:cover; object-position:center 22%; background:linear-gradient(135deg,#34090e,#7a1620); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
.cmd-photo.big { width:120px; height:120px; font-size:2rem; border-radius:calc(var(--radius) + 4px); border:2px solid var(--primary); }
.cmd-ficha { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; } .cmd-ficha h3 { margin:0; }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; } fieldset.perm-area { border:1px solid var(--border); border-radius:var(--radius); margin:8px 0; padding:8px 12px; }
.rp-note { margin-top:12px; text-align:center; } footer.site-foot { max-width:1360px; margin:24px auto 16px; padding:0 16px; text-align:center; font-size:.8rem; opacity:.75; }

/* moldura de aniversário (ao redor da foto; não cobre o rosto nem altera a imagem) */
.ph-wrap { position:relative; display:inline-flex; flex:none; border-radius:calc(var(--radius) + 4px); } .bday-pill { display:none; }
.ph-wrap.bday { box-shadow:0 0 0 3px #f5c542, 0 0 0 5px rgba(193,18,31,.85), 0 0 16px rgba(245,197,66,.55); animation:bdayGlow 2.4s ease-in-out infinite; }
.ph-wrap.bday .bday-pill { display:block; position:absolute; left:50%; bottom:-13px; transform:translateX(-50%); white-space:nowrap; font-size:.7rem; font-weight:700; padding:2px 9px; border-radius:999px; background:#f5c542; color:#2a0a0d; border:1px solid #c1121f; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.ph-wrap.big.bday .bday-pill { font-size:.82rem; padding:3px 12px; bottom:-15px; }
@keyframes bdayGlow { 50% { box-shadow:0 0 0 3px #f5c542, 0 0 0 5px rgba(193,18,31,.85), 0 0 26px rgba(245,197,66,.8); } }
.cmd-ficha { align-items:center; } .cmd-ficha .ph-wrap { margin-bottom:12px; }