/* Estilo compartilhado das páginas da plataforma (conta, painel, admin, termos) */
:root{
  --bg:#0d0d0d; --surface:#171717; --surface-2:#212121; --text:#ececec; --muted:#a3a3a3; --line:#2f2f2f;
  --brand:#ffffff; --brand-2:#d9d9d9; --on-brand:#0d0d0d;
  --accent:#19c37d; --accent-soft:#0f2e24; --warn:#f5b84a; --warn-soft:#2e2312; --danger:#f87171; --danger-soft:#3a1717;
  --info:#93c5fd; --info-soft:#172338; --radius:16px;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased;
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif}
a{color:var(--text); text-underline-offset:3px}
h1,h2,h3{line-height:1.2; letter-spacing:-.02em; margin:0 0 .5em; font-weight:600}
h1{font-size:clamp(1.6rem,4vw,2.2rem)}
h2{font-size:1.3rem}
h3{font-size:1.05rem}
p{margin:0 0 1em}
.muted{color:var(--muted)}
/* e-mails, chaves Pix e links longos quebram a linha em vez de empurrar a tela */
p, li, td, th, label, .meta, .hint, .alert, .who, h1, h2, h3{overflow-wrap:anywhere}
.small{font-size:.85rem}
.wrap{max-width:1080px; margin:0 auto; padding:0 16px}
.narrow{max-width:520px}
main{padding:32px 0 64px}

.topbar{position:sticky; top:0; z-index:20; background:rgba(13,13,13,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:60px; gap:12px}
.logo{font-weight:600; display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); white-space:nowrap}
.logo i{width:30px; height:30px; background:url(logo-icone.svg) center/contain no-repeat; display:inline-block; flex:none}
.logo b{color:var(--accent); font-weight:600}
.top-right{display:flex; align-items:center; gap:12px; min-width:0}
.top-right .who{color:var(--muted); font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:600;
  text-decoration:none; border:0; cursor:pointer; font-size:.95rem; font-family:inherit; transition:background .2s, opacity .2s; white-space:nowrap}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-primary{background:var(--brand); color:var(--on-brand)}
.btn-primary:hover:not(:disabled){background:var(--brand-2)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--line)}
.btn-ghost:hover:not(:disabled){background:var(--surface-2)}
.btn-ok{background:var(--accent); color:#04130d}
.btn-no{background:transparent; color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 45%, transparent)}
.btn-sm{padding:8px 14px; font-size:.85rem}
.btn-block{width:100%}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.grid{display:grid; gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){ .g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .g2{grid-template-columns:1fr} }

.kpi span{display:block; color:var(--muted); font-size:.85rem}
.kpi b{display:block; font-size:1.6rem; font-weight:600; letter-spacing:-.02em; margin-top:2px}
.kpi.green b{color:var(--accent)}

label{display:block; font-weight:500; font-size:.9rem; margin:14px 0 6px}
input,select,textarea{width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--text);
  font-size:1rem; font-family:inherit}
textarea{resize:vertical; min-height:80px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); border-color:transparent}
input[type=checkbox]{width:18px; height:18px; margin:2px 0 0; accent-color:var(--accent); flex:none}
.check-line{display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:.9rem; color:var(--muted)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:480px){ .row2{grid-template-columns:1fr} }
.hint{font-size:.8rem; color:var(--muted); margin-top:6px}

.tabs{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:999px; margin-bottom:22px}
.tabs button{flex:1; padding:10px; border:0; border-radius:999px; background:transparent; color:var(--muted); font:inherit; font-weight:600; cursor:pointer}
.tabs button.on{background:var(--surface); color:var(--text); box-shadow:0 1px 0 var(--line)}

.alert{padding:12px 14px; border-radius:10px; font-size:.9rem; margin-top:14px}
.alert:empty{display:none}
.alert.erro{background:var(--danger-soft); color:var(--danger)}
.alert.ok{background:var(--accent-soft); color:var(--accent)}
.alert.info{background:var(--info-soft); color:var(--info)}

.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:600; white-space:nowrap}
.b-analise{background:var(--info-soft); color:var(--info)}
.b-aprovado{background:var(--accent-soft); color:var(--accent)}
.b-recusado{background:var(--danger-soft); color:var(--danger)}
.b-pago{background:var(--surface-2); color:var(--text)}

.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table{width:100%; border-collapse:collapse}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; font-size:.92rem}
th{background:var(--surface-2); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600}
tr:last-child td{border-bottom:0}

.progress{height:8px; background:var(--surface-2); border-radius:8px; overflow:hidden; margin-top:12px}
.progress span{display:block; height:100%; width:0; background:var(--accent); transition:width .2s}

.drop{border:1.5px dashed var(--line); border-radius:12px; padding:22px; text-align:center; cursor:pointer; color:var(--muted); transition:border-color .2s, background .2s}
.drop:hover,.drop.over{border-color:var(--accent); background:var(--accent-soft)}
.drop strong{display:block; color:var(--text); margin-bottom:4px}
.drop input{display:none}

.list-rules{margin:0; padding-left:18px; color:var(--muted); font-size:.9rem}
.list-rules li{margin-bottom:4px}
.empty{padding:28px; text-align:center; color:var(--muted)}
.section-title{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:32px 0 14px; flex-wrap:wrap}
.section-title h2{margin:0}
.hidden{display:none !important}

.topnav{display:flex; gap:4px}
.topnav a{padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--muted); font-size:.9rem; font-weight:500; white-space:nowrap}
.topnav a.on{background:var(--surface-2); color:var(--text)}
@media (max-width:520px){ .topbar .logo span{display:none} .top-right .who{display:none} }
#enviar{scroll-margin-top:80px}

/* Tabelas viram cartões no celular (cada célula mostra o rótulo da coluna) */
@media (max-width:640px){
  table.cards thead{display:none}
  table.cards, table.cards tbody, table.cards tr, table.cards td{display:block; width:100%}
  table.cards tr{padding:12px 0; border-bottom:1px solid var(--line)}
  table.cards tr:last-child{border-bottom:0}
  table.cards td{border:0; padding:5px 16px; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; text-align:right; overflow-wrap:anywhere}
  table.cards td::before{content:attr(data-label); color:var(--muted); font-size:.8rem; text-align:left; flex:none; max-width:45%}
  table.cards td[data-label=""]::before, table.cards td:not([data-label])::before{display:none}
  table.cards td.empty{justify-content:center; text-align:center}
  .table-wrap:has(table.cards){overflow-x:visible}
}

/* Telas bem estreitas */
@media (max-width:380px){
  .btn-sm{padding:7px 11px}
  .topnav a{padding:7px 9px; font-size:.85rem}
  .kpi b{font-size:1.3rem}
  .card{padding:18px}
  .tabs button{padding:9px 6px; font-size:.9rem}
}
.so-largo{display:inline}
@media (max-width:640px){ .so-largo{display:none} }