/* =========================================================================
   GLORY TALE — Minhas contas de jogo
   Componentes próprios da área de contas. Usa os mesmos tokens do
   glory.css (--pn-*), então acompanha o tema do site.

   Por que folha própria: a primeira versão reaproveitou .pn-tile e .pn-kv.
   O .pn-tile é `display:flex; align-items:center` — feito para ícone + texto
   numa linha só — e virou uma fila horizontal esmagada quando recebeu um
   card inteiro dentro. O .pn-kv espera filhos `.k` e `.v`; sem eles, rótulo
   e valor colavam ("SegurançaNormal").
   ========================================================================= */

/* ---------- primeiro passo (quem ainda não tem conta de jogo) ---------- */
.ma-start{max-width:560px;margin:0 auto}
.ma-start-head{text-align:center;margin-bottom:22px}
.ma-start-head .ic{
  width:60px;height:60px;margin:0 auto 14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,184,60,.18),rgba(255,184,60,.06));
  border:1px solid rgba(255,184,60,.28);
  display:flex;align-items:center;justify-content:center;color:var(--pn-gold);
}
.ma-start-head h2{
  font-family:var(--pn-ui);font-size:22px;color:var(--pn-title);
  margin:0 0 8px;font-weight:400;
}
.ma-start-head p{
  font-family:var(--pn-body-r);font-size:14px;color:var(--pn-muted);
  margin:0;line-height:1.6;
}

/* ---------- passos numerados ---------- */
.ma-steps{display:flex;gap:10px;justify-content:center;margin:0 0 24px;flex-wrap:wrap}
.ma-step{display:flex;align-items:center;gap:8px;font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted)}
.ma-step i{
  width:22px;height:22px;border-radius:50%;font-style:normal;font-size:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--pn-soft);color:var(--pn-muted);border:1px solid var(--pn-line-soft);
}
.ma-step.on{color:var(--pn-cream)}
.ma-step.on i{background:var(--pn-gold);color:#241a10;border-color:var(--pn-gold)}
.ma-step.done i{background:rgba(192,241,98,.16);color:var(--pn-ok);border-color:rgba(192,241,98,.35)}
.ma-step-sep{color:var(--pn-line-soft);align-self:center}

/* ---------- cartão de conta de jogo ---------- */
.ma-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}

.ma-acc{
  display:block;padding:16px;border-radius:12px;
  background:var(--pn-soft);border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease;
}
.ma-acc:hover{background:var(--pn-soft-2)}
.ma-acc.on{border-color:rgba(255,184,60,.35);background:rgba(255,184,60,.06)}

.ma-acc-top{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.ma-acc-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--pn-muted)}
.ma-acc-dot.online{background:var(--pn-ok);box-shadow:0 0 0 3px rgba(192,241,98,.15)}
.ma-acc-dot.block{background:var(--pn-danger);box-shadow:0 0 0 3px rgba(255,114,120,.15)}
.ma-acc-name{
  font-family:var(--pn-ui);font-size:16px;color:var(--pn-cream);font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.ma-acc-sub{
  font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted);
  margin:0 0 14px;padding-left:17px;line-height:1.5;
}
.ma-acc-sub b{color:var(--pn-text);font-family:var(--pn-body);font-weight:400}
.ma-acc-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* etiqueta de modo de segurança */
.ma-tag{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;
  font-family:var(--pn-body-r);font-size:11px;line-height:19px;white-space:nowrap;
  background:var(--pn-soft);color:var(--pn-muted);
}
.ma-tag.up{background:rgba(153,111,217,.16);color:#c4a9f0}
.ma-tag.lock{background:rgba(255,114,120,.14);color:var(--pn-danger)}
.ma-tag.norm{background:rgba(192,241,98,.12);color:var(--pn-ok)}
.ma-tag.foco{background:rgba(255,184,60,.16);color:var(--pn-gold)}

/* cartão de "criar mais uma" */
.ma-add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:16px;border-radius:12px;min-height:132px;text-align:center;
  border:1px dashed var(--pn-line-soft);color:var(--pn-muted);
  font-family:var(--pn-body-r);font-size:13px;transition:all .2s ease;
}
.ma-add:hover{border-color:rgba(255,184,60,.4);color:var(--pn-gold);background:rgba(255,184,60,.04)}
.ma-add .ic{opacity:.85}

/* ---------- escolha de modo de segurança ---------- */
.ma-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;align-items:stretch}
.ma-modes form{display:flex}
.ma-mode{
  display:flex;flex-direction:column;align-items:flex-start;flex:1;
  width:100%;text-align:left;padding:15px;border-radius:12px;
  background:var(--pn-soft);border:1px solid transparent;color:var(--pn-text);
  cursor:pointer;transition:all .2s ease;font-family:var(--pn-body-r);
}
.ma-mode:hover{background:var(--pn-soft-2)}
.ma-mode.on{border-color:rgba(255,184,60,.45);background:rgba(255,184,60,.07)}
.ma-mode > b{
  display:flex;align-items:center;gap:8px;font-family:var(--pn-ui);font-weight:400;
  font-size:15px;color:var(--pn-cream);margin-bottom:6px;
}
.ma-mode > span{display:block;font-size:12px;color:var(--pn-muted);line-height:1.55}
.ma-mode > span b{display:inline;font-family:inherit;font-weight:400;color:var(--pn-cream)}
.ma-mode .now{
  display:inline-block;margin-top:auto;padding-top:9px;font-size:11px;color:var(--pn-gold);
}

/* ---------- lista de permissões (dentro do "personalizar") ---------- */
.ma-perms{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.ma-perm-grp{min-width:0}
.ma-perm-grp h6{
  font-family:var(--pn-ui);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pn-muted);margin:0 0 8px;font-weight:400;
}
.ma-perm{
  display:flex;align-items:flex-start;gap:11px;padding:9px 11px;margin-bottom:5px;
  border-radius:9px;cursor:pointer;transition:background .15s ease;
}
.ma-perm:hover{background:var(--pn-soft)}
.ma-perm input{margin:3px 0 0;flex:none;accent-color:var(--pn-gold);width:15px;height:15px}
.ma-perm .tx{min-width:0}
.ma-perm .tx b{
  display:block;font-family:var(--pn-body);font-weight:400;font-size:13px;
  color:var(--pn-text);line-height:1.4;
}
.ma-perm .tx small{
  display:block;font-family:var(--pn-body-r);font-size:11px;color:var(--pn-muted);
  line-height:1.5;margin-top:2px;
}
.ma-perm .warn{color:var(--pn-gold);font-size:10px;margin-left:5px}

/* ---------- abas ---------- */
.ma-tabs{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--pn-line-soft);padding-bottom:0}
.ma-tabs a{
  padding:9px 15px;border-radius:9px 9px 0 0;font-family:var(--pn-body-r);font-size:13px;
  color:var(--pn-muted);border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .2s ease,border-color .2s ease;
}
.ma-tabs a:hover{color:var(--pn-text)}
.ma-tabs a.on{color:var(--pn-gold);border-bottom-color:var(--pn-gold)}

/* ---------- cabeçalho da conta (dentro do gerenciar) ---------- */
.ma-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
.ma-head-id{display:flex;align-items:center;gap:11px;min-width:0}
.ma-head-id h5{
  font-family:var(--pn-ui);font-size:19px;color:var(--pn-cream);margin:0;font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ma-head-acts{display:flex;gap:7px;flex-wrap:wrap}

/* ---------- pares rótulo/valor (com respiro entre eles) ---------- */
.ma-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px 26px}
.ma-kv div{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--pn-line-soft);min-width:0;
}
.ma-kv span{font-family:var(--pn-body-r);font-size:13px;color:var(--pn-muted);flex:none}
.ma-kv b{
  font-family:var(--pn-body);font-size:13px;color:var(--pn-cream);font-weight:400;
  text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}

/* ---------- bloco recolhível ---------- */
.ma-more{border-top:1px solid var(--pn-line-soft);margin-top:20px;padding-top:16px}
.ma-more summary{
  cursor:pointer;font-family:var(--pn-body-r);font-size:13px;color:var(--pn-muted);
  list-style:none;display:flex;align-items:center;gap:7px;
}
.ma-more summary::-webkit-details-marker{display:none}
.ma-more summary:hover{color:var(--pn-gold)}
.ma-more summary::before{content:"▸";font-size:11px;transition:transform .2s ease;display:inline-block}
.ma-more[open] summary::before{transform:rotate(90deg)}
.ma-more-body{padding-top:16px}

/* ---------- zona de risco ---------- */
.ma-danger{
  border:1px solid rgba(255,114,120,.22);border-radius:12px;padding:16px;
  background:rgba(255,114,120,.04);
}
.ma-danger h6{font-family:var(--pn-ui);font-size:14px;color:var(--pn-danger);margin:0 0 7px;font-weight:400}
.ma-danger p{font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted);margin:0 0 14px;line-height:1.6}

/* ---------- aviso curto ---------- */
.ma-hint{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;
  background:var(--pn-soft);font-family:var(--pn-body-r);font-size:12.5px;
  color:var(--pn-muted);line-height:1.6;
}
.ma-hint .ic{flex:none;color:var(--pn-gold);margin-top:1px}
.ma-hint b{color:var(--pn-text);font-family:var(--pn-body);font-weight:400}

/* ---------- resumo em números ---------- */
.ma-nums{display:flex;gap:26px;flex-wrap:wrap}
.ma-nums div span{
  display:block;font-family:var(--pn-body-r);font-size:11.5px;color:var(--pn-muted);margin-bottom:2px;
}
.ma-nums div b{font-family:var(--pn-ui);font-size:21px;color:var(--pn-cream);font-weight:400}

/* ---------- tabela enxuta ---------- */
.ma-tb{width:100%;border-collapse:separate;border-spacing:0}
.ma-tb th{
  font-family:var(--pn-body-r);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--pn-muted);font-weight:400;text-align:left;padding:0 12px 9px;
}
.ma-tb td{
  font-family:var(--pn-body-r);font-size:13px;color:var(--pn-text);
  padding:11px 12px;background:var(--pn-soft);
}
.ma-tb tr td:first-child{border-radius:9px 0 0 9px}
.ma-tb tr td:last-child{border-radius:0 9px 9px 0}
.ma-tb tbody tr{margin-bottom:6px}
.ma-tb .num{text-align:right;font-family:var(--pn-body)}
.ma-tb .ok{color:var(--pn-ok)}
.ma-tb .no{color:var(--pn-danger)}

@media (max-width:640px){
  .ma-kv{grid-template-columns:1fr}
  .ma-head{flex-direction:column;align-items:stretch}
  .ma-head-acts{justify-content:flex-start}
}