:root{
  --night:#0E1416; --night-2:#0A0F11; --card:#141B1D;
  --field:#1B5E3A; --field-light:#45A06B;
  --chalk:#F3EFE3; --chalk-dim:#9AA39C;
  --gold:#D8B65C; --line:rgba(243,239,227,0.12);
  --danger:#D9756B; --warn:#E0A83A;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--night); color:var(--chalk); font-family:'Karla',sans-serif; min-height:100vh;}
h1,h2,h3{font-family:'Big Shoulders Display',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.01em;}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:0.06em; text-transform:uppercase;}
button{font-family:inherit; cursor:pointer;}
a{color:inherit;}

/* ---------- Layout genérico ---------- */
.centered{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.auth-box{width:100%; max-width:380px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:34px 30px;}
.auth-box h1{font-size:26px; margin-bottom:6px;}
.auth-box .sub{color:var(--chalk-dim); font-size:13.5px; margin-bottom:24px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field label{font-size:12px; color:var(--chalk-dim); font-weight:600;}
.field input, .field select, .field textarea{
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  padding:11px 12px; color:var(--chalk); font-size:14px; font-family:inherit; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--field-light);}
/* O <select> tinha fundo translúcido (rgba sobre o fundo escuro da página) — funciona bem
   fechado, mas o popup de opções é renderizado como camada própria pelo navegador sobre um
   canvas branco, então a mesma cor quase transparente vira quase branco lá, e o texto claro
   fica ilegível. Fundo sólido + cor explícita nas <option> corrige o popup nos navegadores. */
.field select option{background:var(--card); color:var(--chalk);}
.field input[type="color"]{padding:4px; height:42px; cursor:pointer;}
.btn{
  background:var(--field-light); color:#0A0F0B; border:none; border-radius:7px;
  padding:12px 18px; font-weight:700; font-size:14px; text-align:center;
}
.btn.secondary{background:transparent; border:1px solid var(--line); color:var(--chalk);}
.btn.danger{background:transparent; border:1px solid var(--danger); color:var(--danger);}
.btn.block{width:100%;}
.error-msg{background:rgba(217,117,107,0.12); border:1px solid var(--danger); color:var(--danger); padding:10px 12px; border-radius:6px; font-size:13px; margin-bottom:14px;}
.success-msg{background:rgba(69,160,107,0.12); border:1px solid var(--field-light); color:var(--field-light); padding:10px 12px; border-radius:6px; font-size:13px; margin-bottom:14px;}
.switch-link{text-align:center; margin-top:18px; font-size:13px; color:var(--chalk-dim);}
.switch-link button{background:none; border:none; color:var(--field-light); font-weight:700; text-decoration:underline;}

/* ---------- Topbar do dashboard ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; border-bottom:1px solid var(--line); background:var(--night-2);
}
.topbar .brand{font-size:20px;}
.topbar .brand span{color:var(--field-light);}
.instructions-link{font-size:13px; color:var(--field-light); text-decoration:underline; white-space:nowrap;}
.topbar-right{display:flex; align-items:center; gap:16px; font-size:13px; color:var(--chalk-dim);}

.coin-badge{
  position:relative; display:flex; align-items:center; gap:6px; cursor:pointer;
  padding:6px 12px; border:1px solid var(--line); border-radius:20px; background:var(--card);
  color:var(--chalk); font-size:13px; font-weight:600;
}
.coin-menu{
  position:absolute; top:calc(100% + 6px); right:0; min-width:180px;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35); overflow:hidden; z-index:20;
}
.coin-menu button{
  display:block; width:100%; text-align:left; padding:10px 14px; background:none; border:none;
  color:var(--chalk); font-size:13px; font-weight:400; cursor:pointer;
}
.coin-menu button:hover{background:rgba(255,255,255,0.06);}
.coin-menu button + button{border-top:1px solid var(--line);}

.shell{max-width:1000px; margin:0 auto; padding:32px 24px 80px;}

/* ---------- Lista de sites ---------- */
.players-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-top:20px;}
.player-card{
  border:1px solid var(--line); border-radius:10px; padding:22px 20px; background:var(--card);
  display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:border-color .15s;
}
.player-card:hover{border-color:var(--field-light);}
.player-card h3{font-size:19px; text-transform:none; letter-spacing:0;}
.player-card .slug{font-size:12px; color:var(--field-light); font-family:'IBM Plex Mono',monospace;}
.plan-tag{display:inline-block; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; font-family:'IBM Plex Mono',monospace;}
.plan-tag.pro{background:var(--gold); color:#1a1305;}
.plan-tag.basico{background:rgba(243,239,227,0.1); color:var(--chalk-dim);}
.plan-tag.iniciante{background:rgba(243,239,227,0.05); color:var(--chalk-dim); opacity:0.8;}
.status-badge{display:inline-block; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase;}
.status-badge.pendente{background:rgba(216,182,92,0.15); color:var(--gold);}
.status-badge.aprovado{background:rgba(69,160,107,0.15); color:var(--field-light);}
.status-badge.rejeitado{background:rgba(217,117,107,0.15); color:var(--danger);}
.quota-bar{height:5px; border-radius:4px; background:rgba(243,239,227,0.08); overflow:hidden; margin-top:4px;}
.quota-bar i{display:block; height:100%; background:var(--field-light);}
.new-player-card{
  border:1px dashed var(--line); border-radius:10px; padding:22px 20px; background:transparent;
  display:flex; align-items:center; justify-content:center; color:var(--chalk-dim); font-size:14px;
  cursor:pointer; min-height:100px;
}
.new-player-card:hover{border-color:var(--field-light); color:var(--chalk);}

/* ---------- Checkout (planos e pagamento PIX) ---------- */
.plans-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:8px;}
.plan-card{border:1px solid var(--line); border-radius:10px; padding:22px 20px; background:var(--card); display:flex; flex-direction:column;}
.plan-card.pro{border-color:var(--gold);}
.plan-price{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:32px; margin:10px 0 14px;}
.plan-features{list-style:none; display:flex; flex-direction:column; gap:8px; font-size:13.5px; color:var(--chalk-dim);}
.plan-features li{padding-left:16px; position:relative;}
.plan-features li::before{content:"✓"; position:absolute; left:0; color:var(--field-light);}
.pix-box{background:rgba(243,239,227,0.05); border:1px solid var(--line); border-radius:8px; padding:16px; margin-top:14px;}
.pix-key{font-size:15px; padding:8px 10px; background:rgba(243,239,227,0.06); border-radius:6px; margin-top:4px; word-break:break-all;}

/* ---------- Editor do site ---------- */
.editor-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; flex-wrap:wrap; gap:12px;}
.editor-head .back{font-size:13px; color:var(--chalk-dim); margin-bottom:10px; display:inline-block;}
.editor-head h2{font-size:30px;}
.editor-head .public-link{font-size:13px; color:var(--field-light); font-family:'IBM Plex Mono',monospace;}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:24px; flex-wrap:wrap;}
.tab-btn{
  background:none; border:none; color:var(--chalk-dim); font-size:13.5px; font-weight:600;
  padding:10px 16px; border-bottom:2px solid transparent;
}
.tab-btn.active{color:var(--chalk); border-bottom-color:var(--field-light);}

.card-box{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:22px; margin-bottom:16px;}
.alert-box{background:rgba(224,168,58,0.08); border:1px solid var(--warn); border-radius:10px; padding:18px 20px; margin-bottom:16px;}
.alert-box h3{font-size:14px; text-transform:none; color:var(--chalk); margin-bottom:6px;}
.alert-box p{color:var(--chalk-dim); font-size:13px; margin-bottom:10px;}
.alert-box .actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.list-item{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.list-item:last-child{border-bottom:none;}
.list-item h4{font-size:15px; font-weight:700; margin-bottom:3px;}
.list-item p{font-size:12.5px; color:var(--chalk-dim);}
.list-item .actions{display:flex; gap:8px; flex-shrink:0;}
.icon-btn{background:none; border:1px solid var(--line); border-radius:6px; padding:5px 9px; font-size:12px; color:var(--chalk-dim);}
.icon-btn:hover{color:var(--chalk); border-color:var(--chalk-dim);}

.inline-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:14px;}
.inline-form .full{grid-column:1/-1;}

.quota-summary{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--chalk-dim); margin-bottom:8px;}
.quota-summary b{color:var(--chalk);}

.media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-top:16px;}
.media-tile{position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; background:#111; border:1px solid var(--line);}
.media-tile img, .media-tile video{width:100%; height:100%; object-fit:cover;}
.media-actions{position:absolute; top:6px; right:6px; display:flex; gap:6px;}
.media-actions .del, .media-actions .rotate{
  background:rgba(0,0,0,0.6); border:none; color:#fff;
  width:24px; height:24px; border-radius:50%; font-size:13px;
}
.media-actions .rotate{font-size:15px;}
.media-actions .rotate:hover, .media-actions .del:hover{background:rgba(0,0,0,0.85);}
.media-actions .role-btn{
  background:rgba(0,0,0,0.6); border:none; color:#fff;
  width:24px; height:24px; border-radius:50%; font-size:12px;
}
.media-actions .role-btn.active{background:var(--gold); color:#1a1305;}
.media-actions .role-btn:hover{background:rgba(0,0,0,0.85);}
.media-actions .role-btn.active:hover{background:var(--gold);}
.media-tile .role-tag{
  position:absolute; top:6px; left:6px; padding:3px 8px; font-size:9px; font-weight:700;
  letter-spacing:0.04em; background:var(--gold); color:#1a1305; border-radius:10px;
  font-family:'IBM Plex Mono',monospace;
}
.media-tile .cap{position:absolute; bottom:0; left:0; right:0; padding:6px 8px; font-size:10px; background:linear-gradient(180deg,transparent,rgba(0,0,0,0.7));}
.dropzone{
  border:1px dashed var(--line); border-radius:8px; padding:24px; text-align:center; color:var(--chalk-dim);
  font-size:13px; margin-top:14px; cursor:pointer;
}
.dropzone:hover{border-color:var(--field-light); color:var(--chalk);}
.dropzone input{display:none;}

.phase-card{border:1px solid var(--line); border-radius:10px; margin-bottom:12px; overflow:hidden; background:var(--card);}
.phase-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; cursor:pointer;}
.phase-head h4{font-size:15px; font-weight:700;}
.phase-head p{font-size:12px; color:var(--chalk-dim); margin-top:2px;}
.phase-count{font-size:11px; color:var(--chalk-dim); font-family:'IBM Plex Mono',monospace; white-space:nowrap;}
.phase-icon-btn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--night-2);
  color:var(--chalk); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.phase-icon-btn:hover{border-color:var(--field-light);}
.phase-body{padding:16px; border-top:1px solid var(--line);}
.phase-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}
.phase-col h5{font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--chalk-dim); margin-bottom:10px;}
@media (max-width:720px){ .phase-cols{grid-template-columns:1fr;} }

.empty{color:var(--chalk-dim); font-size:13.5px; font-style:italic; padding:12px 0;}