:root{
  --bg:#0d0f14;--bg2:#141821;--card:#1a1f2b;--line:#2a3142;--text:#e9edf5;--muted:#93a0b8;
  --ok:#22c55e;--err:#ef4444;--warn:#f59e0b;--brand:#E1061B;--r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit}
.shell{display:flex;min-height:100vh}
.side{width:260px;background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0}
.brand{display:flex;gap:12px;align-items:center;padding:20px}
.brand img{width:42px;height:42px;object-fit:contain;border-radius:10px;background:#0006}
.brand .dot{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#000)}
.brand small{display:block;color:var(--muted);font-size:12px}
.side nav{flex:1;overflow:auto;padding:4px 10px}
.side nav a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--muted);margin-bottom:2px}
.side nav a:hover{background:#ffffff0d;color:var(--text)}
.side nav a.on{background:color-mix(in srgb,var(--brand) 22%,transparent);color:#fff;box-shadow:inset 3px 0 0 var(--brand)}
.ic{width:22px;text-align:center}
.logout{margin:14px;padding:10px;text-align:center;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--muted)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--bg)}
.top h1{font-size:20px;margin:0;flex:1}
.who{color:var(--muted);font-size:14px}
.burger{display:none;background:none;border:0;color:var(--text);font-size:22px;cursor:pointer}
.content{padding:24px 28px;max-width:1280px;width:100%}
.foot{padding:18px 28px;color:var(--muted);font-size:12px;margin-top:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:18px}
.card h2{font-size:16px;margin:0 0 14px}
.card p.hint,.hint{color:var(--muted);font-size:13px;margin:4px 0 0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.stat b{font-size:28px;display:block}
.stat span{color:var(--muted);font-size:13px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}
input[type=text],input[type=password],input[type=number],input[type=url],select,textarea{
  width:100%;background:#0f131b;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px 12px;font:inherit}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 60%,transparent);border-color:transparent}
.field{margin-bottom:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:0;border-radius:10px;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.small{padding:6px 12px;font-size:13px}
.btn.danger{background:var(--err)}
.btn:hover{filter:brightness(1.1)}
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;border:1px solid}
.alert.ok{background:#22c55e1a;border-color:#22c55e55}
.alert.err{background:#ef44441a;border-color:#ef444455}
.alert.warn{background:#f59e0b1a;border-color:#f59e0b55}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.tbl{overflow-x:auto}
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px;background:#ffffff14}
.badge.on{background:#22c55e26;color:#86efac}
.badge.off{background:#ef444426;color:#fca5a5}
.badge.p2p{background:#8b5cf626;color:#c4b5fd}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--text);font-weight:500;font-size:14px;margin:0}
.switch input{width:42px;height:24px;appearance:none;background:#2a3142;border-radius:99px;position:relative;cursor:pointer;transition:.2s;flex-shrink:0}
.switch input::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}
.switch input:checked{background:var(--brand)}
.switch input:checked::after{left:21px}
.color{display:flex;gap:8px;align-items:center}
.color input[type=color]{width:46px;height:40px;border:1px solid var(--line);border-radius:10px;background:none;padding:2px;cursor:pointer}
.color input[type=text]{font-family:ui-monospace,monospace}
.presets{display:flex;gap:10px;flex-wrap:wrap}
.preset{border:1px solid var(--line);background:#0f131b;color:var(--text);border-radius:12px;padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;font:inherit;font-size:13px}
.preset i{width:18px;height:18px;border-radius:50%;display:inline-block}
.thumb{max-height:64px;max-width:160px;border-radius:8px;background:#0006;object-fit:contain}
.mono{font-family:ui-monospace,monospace;font-size:13px;word-break:break-all}
.copy{cursor:pointer}
.empty{color:var(--muted);text-align:center;padding:30px}
.result{white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:12px;background:#0f131b;border-radius:10px;padding:12px;margin-top:10px;max-height:300px;overflow:auto}
.sticky-preview{position:sticky;top:16px}

/* ---- Pré-visualização do app (TV) ---- */
.tv{--p:#E1061B;--a:#fff;--b1:#8E0A16;--b2:#2B0206;--s:rgba(0,0,0,.35);--t:#fff;--t2:#F3C9CD;--ft:#E1061B;--k:#FFB300;--rad:12px;
  aspect-ratio:16/9;border-radius:16px;overflow:hidden;position:relative;color:var(--t);
  background:linear-gradient(135deg,var(--b1),var(--b2));background-size:cover;background-position:center;
  border:6px solid #0b0b0b;box-shadow:0 20px 50px #0008;font-size:clamp(7px,1.05vw,12px);display:flex;flex-direction:column}
.tv .tbar{display:flex;align-items:center;padding:3% 4% 1%;gap:2%}
.tv .tlogo{display:flex;align-items:center;gap:6px;font-weight:700;font-size:1.25em}
.tv .tlogo img{height:2.6em;max-width:9em;object-fit:contain}
.tv .ticons{margin-left:auto;display:flex;gap:6px;align-items:center}
.tv .ticons i{width:1.9em;height:1.9em;border-radius:50%;background:var(--s);display:inline-block;border:1px solid #ffffff22}
.tv .ttabs{display:flex;gap:5%;padding:1% 4%;font-weight:700;align-items:center;white-space:nowrap;overflow:hidden}
.tv .ttabs span.on{border:2px solid var(--t);border-radius:99px;padding:.2em 1.2em}
.tv .ttabs span.kids{background:linear-gradient(90deg,#ff5252,#ffd740,#69f0ae,#40c4ff,#e040fb);-webkit-background-clip:text;background-clip:text;color:transparent}
.tv .tbody{flex:1;display:flex;gap:2%;padding:1% 4% 3%;min-height:0}
.tv .tlist{width:34%;background:var(--s);border-radius:var(--rad);overflow:hidden;display:flex;flex-direction:column}
.tv .tlist h4{margin:0;padding:.6em;text-align:center;background:var(--p);font-size:1em}
.tv .tlist div{padding:.55em .8em;border-bottom:1px solid #ffffff14;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv .tlist div.on{background:var(--a);color:var(--ft);font-weight:700;border-radius:calc(var(--rad)/2);margin:2px}
.tv .tplayer{flex:1;display:flex;flex-direction:column;gap:3%}
.tv .tvideo{flex:1;border-radius:var(--rad);background:linear-gradient(160deg,#5b6b78,#1d252d);position:relative;overflow:hidden}
.tv .tvideo::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:3em;opacity:.5}
.tv .tinfo{display:flex;gap:4%;align-items:center;font-weight:600}
.tv .tinfo small{color:var(--t2)}

@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .side{position:fixed;left:-280px;z-index:20;transition:.25s}
  .side.open{left:0;box-shadow:0 0 0 100vmax #0008}
  .burger{display:block}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .content{padding:16px}
  .top{padding:14px 16px}
}

/* ---- Login ---- */
.auth{min-height:100vh;display:grid;place-items:center;padding:16px;
  background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--brand) 35%,transparent),transparent 50%),var(--bg)}
.auth .card{width:100%;max-width:400px;padding:30px}
.auth h1{margin:0 0 4px;font-size:22px}

/* ===== v1.1 ===== */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.auth-logo{height:56px;margin-bottom:12px;max-width:220px;object-fit:contain}
.role{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;margin-right:6px;letter-spacing:.04em}
.role.admin{background:color-mix(in srgb,var(--brand) 25%,transparent);color:#fff}
.role.rev{background:#8b5cf633;color:#ddd6fe}
.scrim{display:none}
.bottomnav{display:none}
.meter{height:8px;background:#ffffff14;border-radius:99px;overflow:hidden;margin:4px 0;min-width:110px}
.meter.big{height:14px;margin:8px 0 10px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#84cc16);border-radius:99px;transition:width .4s}
.meter i.hot{background:linear-gradient(90deg,#f59e0b,#ef4444)}
.big-code{font-size:22px;letter-spacing:.2em;text-align:center;font-weight:700}
.steps{margin:0;padding-left:20px;color:var(--muted);line-height:1.8}
.steps b{color:var(--text)}
.checks{list-style:none;margin:0;padding:0}
.checks li{padding:6px 0 6px 26px;position:relative;color:var(--muted);font-size:14px}
.checks li.ok::before{content:"✔";position:absolute;left:0;color:var(--ok);font-weight:700}
tr.muted td{opacity:.55}
.badge.live{background:#ef4444;color:#fff;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.6}}
.chip{display:inline-block;background:#ffffff12;border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:12px;margin:2px 4px 2px 0}

/* editor de abas */
.tabs-editor{display:grid;gap:10px}
.tab-row{display:grid;grid-template-columns:170px 1fr 1fr auto;gap:14px;align-items:center;background:#0f131b;border:1px solid var(--line);border-radius:12px;padding:12px}
.tab-row .field{margin:0}
.tab-preview{display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--brand) 18%,#000);border-radius:99px;padding:8px 14px;min-height:42px}
.tab-preview img{height:28px;max-width:120px;object-fit:contain}
.tab-preview .noicon{font-size:11px;color:var(--muted)}
.tab-flags{display:flex;flex-direction:column;gap:8px}

/* prévia dos jogos */
.games-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:12px}
.game{background:linear-gradient(160deg,#1f2636,#121722);border:1px solid var(--line);border-radius:14px;padding:14px}
.g-top{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.g-top small{color:var(--muted);margin-left:auto;text-align:right}
.g-time{font-weight:800;font-size:18px}
.g-teams{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700}
.g-teams span{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.g-teams span:last-child{justify-content:flex-end;text-align:right}
.g-teams img{width:26px;height:26px;object-fit:contain}
.g-teams b{color:var(--muted)}
.g-ch{margin-top:10px}

/* celular: menu lateral deslizante + barra inferior + tabelas em cartões */
@media (max-width:860px){
  .side{left:-290px;width:280px;box-shadow:none}
  .side.open{left:0}
  .side.open + .scrim{display:block;position:fixed;inset:0;background:#0009;z-index:15}
  .main{padding-bottom:70px}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:12;background:#12161fee;backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--muted);font-size:18px;padding:4px 0;border-radius:10px}
  .bottomnav a small{font-size:11px}
  .bottomnav a.on{color:#fff;background:color-mix(in srgb,var(--brand) 22%,transparent)}
  .who{display:none}
  .tab-row{grid-template-columns:1fr}
  .tbl table, .tbl tbody, .tbl tr, .tbl td{display:block;width:100%}
  .tbl tr:first-child{display:none}
  .tbl tr{background:#0f131b;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:8px 4px}
  .tbl tr.sub{margin-top:-8px;border-top:0;border-radius:0 0 12px 12px}
  .tbl td{border:0;padding:6px 10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .tbl td:empty{display:none}
  .tbl td[data-label]::before{content:attr(data-label);min-width:96px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
  .tbl td.row{justify-content:flex-start}
  .btn{padding:10px 14px}
  .card{padding:16px}
  input,select,textarea{font-size:16px}
}
.errrow{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:10px;background:#0f131b}
.errrow summary{cursor:pointer;font-size:14px;line-height:1.6}

/* ===================== estilo 2.0 ===================== */
body{background:radial-gradient(1200px 600px at 10% -10%,color-mix(in srgb,var(--brand) 18%,transparent),transparent 60%),
  radial-gradient(900px 500px at 110% 10%,#3b82f61a,transparent 60%),var(--bg);background-attachment:fixed}
.side{background:linear-gradient(180deg,#151a24,#0f131b);box-shadow:4px 0 24px #0005}
.brand .dot,.brand img{box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 40%,transparent)}
.side nav a{transition:background .15s,color .15s,transform .15s}
.side nav a:hover{transform:translateX(2px)}
.side nav a.on{background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 32%,transparent),transparent);box-shadow:inset 3px 0 0 var(--brand)}
.top{background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}
.top h1{letter-spacing:-.01em}
.card,.stat{background:linear-gradient(180deg,#1c2230,#171c27);box-shadow:0 10px 30px #0004;transition:border-color .2s,transform .2s}
.card:hover{border-color:#36405a}
.stat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.stat b{background:linear-gradient(90deg,#fff,#c7d2fe);-webkit-background-clip:text;background-clip:text;color:transparent}
.card h2{display:flex;align-items:center;gap:8px}
.card h2::before{content:"";width:4px;height:16px;border-radius:4px;background:var(--brand)}
.btn{background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 92%,#fff),var(--brand));box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 30%,transparent);transition:transform .12s,filter .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{box-shadow:none;background:#ffffff08}
.btn.danger{background:linear-gradient(180deg,#f87171,#dc2626);box-shadow:0 6px 16px #dc262633}
input[type=text],input[type=password],input[type=number],input[type=url],select,textarea{transition:border-color .15s,background .15s}
input[type=text]:hover,input[type=password]:hover,input[type=number]:hover,select:hover,textarea:hover{border-color:#3a4560}
input[type=color]{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;background:#0f131b;padding:4px;cursor:pointer}
table tr:hover td{background:#ffffff05}
.badge{font-weight:600}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}