/* =========================================================================
   GLORY TALE — Painel do jogador
   O painel usa a MESMA pele do site publico: carrega assets/Site/css/style.css
   e este arquivo so acrescenta o que o site nao tem (formularios, tabelas,
   cartoes de personagem, vitrine da loja) usando os mesmos tokens.

   Tokens medidos em assets/Site/css/style.css:
     fundo .......... #191418          painel ......... #141113
     item macio ..... rgba(255,255,255,.05)   hover ... rgba(83,63,54,.8)
     ouro ........... #ffb83c          creme .......... #ffefd8
     titulo ......... #ffedbe          texto .......... #d8d2cf
     raio ........... 15px cartao / 10px item
     fontes ......... beaufort-for-lol-bold (UI) + Gilroy (texto)
   ========================================================================= */

:root{
  --pn-bg:#191418;
  --pn-panel:#141113;
  --pn-panel-2:#1b1519;
  --pn-soft:rgba(255,255,255,.05);
  --pn-soft-2:rgba(255,255,255,.08);
  --pn-hover:rgba(83,63,54,.8);
  --pn-line:rgba(255,222,174,.22);
  --pn-line-soft:rgba(255,255,255,.07);
  --pn-gold:#ffb83c;
  --pn-cream:#ffefd8;
  --pn-title:#ffedbe;
  --pn-text:#d8d2cf;
  --pn-muted:#ac9d87;
  --pn-arcane:#996fd9;
  --pn-ok:#c0f162;
  --pn-danger:#ff7278;
  --pn-ui:"beaufort-for-lol-bold","Cinzel",Georgia,serif;
  --pn-body:"Gilroy-Semibold","Montserrat","Segoe UI",Arial,sans-serif;
  --pn-body-r:"Gilroy-Regular","Montserrat","Segoe UI",Arial,sans-serif;
}

/* ---- o DashLite ainda entra pelo grid do Bootstrap; o resto e neutralizado --- */
body.nk-body,body.npc-default,body.bg-white{
  background:var(--pn-bg);color:#fff;font-family:var(--pn-ui);font-size:14px;
}
.nk-app-root,.nk-main,.nk-wrap,.nk-content,.nk-content-inner,.nk-content-body,.nk-content-wrap{
  background:transparent!important;padding:0;margin:0;display:block;width:auto;max-width:none;
  box-shadow:none;border:0;min-height:0;
}
.bg-white,.bg-light,.bg-lighter{background:transparent!important}

/* =========================================================================
   Estrutura do painel dentro do layout do site
   ========================================================================= */

.pn{display:flex;align-items:flex-start;gap:22px;width:100%;padding-top:6px}
.pn-side{width:246px;flex:none;position:sticky;top:16px}
.pn-main{flex:1;min-width:0}
.pn-page{width:100%}

/* saudacao acima do conteudo */
.pn-hello{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.pn-hello h1{
  font-family:var(--pn-ui);font-size:30px;line-height:1.1;color:var(--pn-cream);margin:0 0 4px;
}
.pn-hello .sub{font-family:var(--pn-body-r);font-size:14px;color:var(--pn-muted)}
.pn-hello .sub b{color:var(--pn-gold)}

/* menu lateral — mesmo desenho do .nav-list do site */
.pn-nav{display:block;width:100%}
.pn-nav a{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;
  min-height:44px;padding:6px 12px;margin-bottom:8px;
  color:var(--pn-cream);font-family:var(--pn-ui);font-size:15px;
  background:var(--pn-soft);border-radius:10px;transition:all .2s ease;
}
.pn-nav a .ic{width:26px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--pn-muted)}
.pn-nav a:hover{background:var(--pn-hover);color:#fff}
.pn-nav a:hover .ic{color:var(--pn-gold)}
.pn-nav a.on{background:rgba(255,184,60,.14);color:var(--pn-gold)}
.pn-nav a.on .ic{color:var(--pn-gold)}
.pn-nav a .tag{
  margin-left:auto;font-family:var(--pn-body);font-size:12px;color:var(--pn-gold);
  background:rgba(0,0,0,.35);border-radius:20px;padding:2px 9px;
}
.pn-nav a .tag.alerta{color:#fff;background:#8d3a3a}
.pn-nav-sep{
  font-family:var(--pn-body-r);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#6b6058;margin:16px 0 8px 4px;
}

.pn-side-box{background:var(--pn-panel);border-radius:15px;padding:14px;margin-top:14px}
.pn-side-box .t{font-family:var(--pn-ui);font-size:14px;color:var(--pn-gold);margin-bottom:8px}
.pn-side-box .v{font-family:var(--pn-ui);font-size:24px;color:var(--pn-cream)}

/* =========================================================================
   Cartoes (mapeados sobre as classes do DashLite que as paginas ja usam)
   ========================================================================= */

.card,.card-bordered,.pn-card{
  background:var(--pn-panel);border:0;border-radius:15px;color:var(--pn-text);
  box-shadow:none;margin-bottom:15px;
}
.card-inner{padding:20px}
.card-inner-lg{padding:24px}
.card-inner.p-0{padding:0}

.card-title-group{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:14px;padding-bottom:0;border:0;
}
.card-title .title,.card-title h5,.card-title h6,.pn-card-t{
  font-family:var(--pn-ui);font-size:20px;line-height:1.2;color:var(--pn-title);
  margin:0;letter-spacing:0;text-transform:none;
}
.card-tools a,.card-tools .pn-mini{
  font-family:var(--pn-body-r);font-size:13px;color:var(--pn-gold);
}
.card-tools a:hover{text-decoration:underline}

/* titulo de secao, igual ao .content-title do site */
.pn-title{
  display:flex;align-items:center;gap:14px;width:100%;
  color:var(--pn-cream);font-family:var(--pn-ui);font-size:26px;margin:0 0 16px;
}
.pn-title .mini{margin-left:auto;font-family:var(--pn-body-r);font-size:13px;color:var(--pn-muted)}

.pn-sub{font-family:var(--pn-body-r);font-size:13px;color:var(--pn-muted)}
.pn-gold{color:var(--pn-gold)}
.pn-num{font-family:var(--pn-ui);color:var(--pn-cream)}

/* o ornamento de canto da versao anterior deixa de existir */
.gt-orn::after,.gt-orn-sm::after,.gt-orn-lg::after{display:none!important}

/* =========================================================================
   Botoes — o site usa painel escuro com texto dourado, e uma variante cheia
   ========================================================================= */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:10px;border:0;
  font-family:var(--pn-ui);font-size:15px;letter-spacing:0;text-transform:none;
  transition:all .2s ease;cursor:pointer;
}
.btn-lg{height:48px;padding:0 28px;font-size:16px}
.btn-sm{height:36px;padding:0 16px;font-size:13px}
.btn-block{display:flex;width:100%}

.btn-primary,.btn-primary:not(:disabled):not(.disabled){
  background:linear-gradient(180deg,#7a5a2a,#54331d);color:#ffe9c2;
  box-shadow:inset 0 1px 0 rgba(255,222,174,.25);
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{
  background:linear-gradient(180deg,#946c31,#653d21);color:#fff5e6;
}
.btn-secondary,.btn-light,.btn-dim,.btn-outline-light{
  background:var(--pn-panel);color:var(--pn-gold);
}
.btn-secondary:hover,.btn-light:hover,.btn-dim:hover{background:#533f36;color:#ffdbcb}
.btn-outline-primary{background:transparent;border:1px solid var(--pn-line);color:var(--pn-cream)}
.btn-outline-primary:hover{background:var(--pn-soft);color:#fff}
.btn-success{background:rgba(192,241,98,.14)!important;color:var(--pn-ok)!important}
.btn-success:hover{background:rgba(192,241,98,.24)!important}
.btn-danger{background:rgba(255,114,120,.16)!important;color:var(--pn-danger)!important}
.btn-danger:hover{background:rgba(255,114,120,.28)!important}
.btn-warning{background:rgba(255,184,60,.16)!important;color:var(--pn-gold)!important}
.btn-info{background:rgba(153,111,217,.18)!important;color:#d9c8ff!important}
.btn:disabled,.btn.disabled{background:var(--pn-soft);color:#6b6058;opacity:1;box-shadow:none}
.btn-icon{width:38px;height:38px;padding:0}

/* =========================================================================
   Formularios
   ========================================================================= */

.form-group{margin-bottom:16px}
.form-label,.form-label-group label{
  display:block;font-family:var(--pn-body-r);font-size:13px;color:var(--pn-muted);
  margin-bottom:7px;letter-spacing:0;text-transform:none;
}
.form-control,select.form-control,textarea.form-control,.form-control-lg{
  width:100%;height:46px;padding:0 14px;border-radius:10px;
  background:var(--pn-soft);border:1px solid transparent;
  color:#fff;font-family:var(--pn-body);font-size:14px;box-shadow:none;
}
textarea.form-control{height:auto;padding:12px 14px;line-height:1.6;min-height:110px}
.form-control::placeholder{color:#6b6058}
.form-control:focus{
  background:rgba(255,255,255,.08);border-color:var(--pn-line);color:#fff;
  outline:0;box-shadow:none;
}
.form-control:disabled,.form-control[readonly]{background:rgba(255,255,255,.03);color:#6b6058}
.form-control.is-invalid{border-color:#8d3a3a;background:rgba(255,114,120,.08)}
select.form-control option{background:#1b1519;color:#fff}
.form-note,.form-text{font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted)}

/* campo com icone */
.pn-field{
  position:relative;display:flex;align-items:center;gap:10px;
  background:var(--pn-soft);border:1px solid transparent;border-radius:10px;padding:0 14px;
  transition:all .2s ease;
}
.pn-field:focus-within{background:rgba(255,255,255,.08);border-color:var(--pn-line)}
.pn-field > svg{flex:none;color:#6b6058}
.pn-field:focus-within > svg{color:var(--pn-gold)}
.pn-field .form-control{background:transparent;border:0;padding:0;height:46px}
.pn-field .form-control:focus{background:transparent}
.pn-eye{background:none;border:0;padding:0 2px;color:var(--pn-muted);cursor:pointer;line-height:0}
.pn-eye:hover,.pn-eye.on{color:var(--pn-gold)}

.pn-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pn-label-row a{font-family:var(--pn-body-r);font-size:13px;color:var(--pn-gold)}

.pn-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:0;
  font-family:var(--pn-body-r);font-size:14px;color:var(--pn-text)}
.pn-check input{position:absolute;opacity:0;width:0;height:0}
.pn-check .bx{
  width:18px;height:18px;flex:none;margin-top:1px;border-radius:5px;
  background:var(--pn-soft);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
}
.pn-check input:checked + .bx{background:rgba(255,184,60,.22);border-color:var(--pn-gold)}
.pn-check input:checked + .bx::after{
  content:"";width:9px;height:5px;border-left:2px solid var(--pn-gold);
  border-bottom:2px solid var(--pn-gold);transform:rotate(-45deg) translate(1px,-1px);
}
.pn-check a{color:var(--pn-gold)}
.pn-form-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

/* checkbox nativo do DashLite nas telas herdadas */
.custom-control-label::before{background:var(--pn-soft);border:1px solid rgba(255,255,255,.12);border-radius:5px}
.custom-control-input:checked ~ .custom-control-label::before{background:rgba(255,184,60,.22)!important;border-color:var(--pn-gold)!important}
.custom-control-label{font-family:var(--pn-body-r);color:var(--pn-text);font-size:14px}

/* =========================================================================
   Tabelas — linhas separadas, como o ranking do site
   ========================================================================= */

.table-responsive{background:transparent;border:0;overflow-x:auto}
.table{width:100%;border-collapse:separate;border-spacing:0 6px;color:var(--pn-text);margin:0}
.table thead th,.table .thead-dark th{
  background:transparent;border:0;padding:2px 14px 8px;
  font-family:var(--pn-body-r);font-size:12px;color:#6b6058;
  letter-spacing:0;text-transform:none;font-weight:400;
}
.table tbody tr{background:var(--pn-soft)}
.table tbody tr:hover{background:var(--pn-hover)}
.table td{
  border:0;padding:0 14px;height:52px;vertical-align:middle;
  font-family:var(--pn-body);font-size:14px;color:var(--pn-text);
}
.table td:first-child,.table th:first-child{border-radius:10px 0 0 10px}
.table td:last-child,.table th:last-child{border-radius:0 10px 10px 0}
.table tbody tr b,.table tbody tr strong{color:var(--pn-cream);font-family:var(--pn-ui);font-weight:400}
.table-striped tbody tr:nth-of-type(odd){background:var(--pn-soft)}
.pn-row-you{background:rgba(255,184,60,.13)!important}
.pn-row-you b,.pn-row-you td{color:var(--pn-gold)!important}

.pagination{display:flex;gap:6px;list-style:none;padding:0;margin:14px 0 0}
.page-item .page-link,.pn-page-btn{
  display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;
  padding:0 10px;border:0;border-radius:10px;background:var(--pn-soft);
  color:var(--pn-cream);font-family:var(--pn-ui);font-size:14px;
}
.page-item.active .page-link,.pn-page-btn.on{background:rgba(255,184,60,.16);color:var(--pn-gold)}
.page-link:hover{background:var(--pn-hover);color:#fff}

/* =========================================================================
   Alertas, badges, abas
   ========================================================================= */

.alert{
  display:flex;align-items:center;gap:12px;border:0;border-radius:10px;
  padding:14px 16px;margin-bottom:15px;
  font-family:var(--pn-body);font-size:14px;background:var(--pn-soft);color:var(--pn-text);
}
.alert-success,.alert-fill.alert-success{background:rgba(192,241,98,.12)!important;color:var(--pn-ok)!important}
.alert-warning,.alert-fill.alert-warning{background:rgba(255,184,60,.12)!important;color:var(--pn-gold)!important}
.alert-danger,.alert-fill.alert-danger{background:rgba(255,114,120,.14)!important;color:var(--pn-danger)!important}
.alert-info,.alert-primary,.alert-fill.alert-info,.alert-fill.alert-primary{
  background:rgba(153,111,217,.14)!important;color:#d9c8ff!important;
}
.alert .close{margin-left:auto;background:none;border:0;color:inherit;opacity:.6;font-size:20px;line-height:1}
.alert .close:hover{opacity:1}
.alert .icon{flex:none;font-size:17px}

.badge{
  display:inline-flex;align-items:center;border:0;border-radius:20px;padding:5px 12px;
  font-family:var(--pn-body-r);font-size:12px;letter-spacing:0;text-transform:none;
  background:var(--pn-soft);color:var(--pn-text);
}
.badge-success,.badge-outline-success{background:rgba(192,241,98,.14);color:var(--pn-ok)}
.badge-warning,.badge-outline-warning{background:rgba(255,184,60,.14);color:var(--pn-gold)}
.badge-danger,.badge-outline-danger{background:rgba(255,114,120,.16);color:var(--pn-danger)}
.badge-info,.badge-outline-info{background:rgba(153,111,217,.18);color:#d9c8ff}
.badge-primary{background:rgba(255,184,60,.14);color:var(--pn-gold)}
.badge-secondary,.badge-light,.badge-gray{background:var(--pn-soft);color:var(--pn-muted)}

.nav-tabs,.nav-tabs-s2{display:flex;gap:8px;border:0;list-style:none;padding:0;margin:0 0 16px}
.nav-tabs .nav-item,.nav-tabs-s2 .nav-item{margin:0}
.nav-tabs .nav-link,.nav-tabs-s2 .nav-link,.nav-tabs-s2 .nav-item .nav-link{
  display:flex;align-items:center;gap:8px;height:40px;padding:0 18px;border:0!important;
  border-radius:10px;background:var(--pn-soft)!important;color:var(--pn-cream)!important;
  font-family:var(--pn-ui);font-size:14px;letter-spacing:0;text-transform:none;
}
.nav-tabs .nav-link:hover,.nav-tabs-s2 .nav-link:hover{background:var(--pn-hover)!important;color:#fff!important}
.nav-tabs .nav-link.active,.nav-tabs-s2 .nav-link.active,.nav-tabs-s2 .nav-item .nav-link.active{
  background:rgba(255,184,60,.16)!important;color:var(--pn-gold)!important;
}
.nav-tabs .nav-link .icon{background:transparent!important;color:inherit!important}

/* =========================================================================
   Modais e dropdowns
   ========================================================================= */

.modal-content{
  background:var(--pn-panel);border:0;border-radius:15px;color:var(--pn-text);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.modal-header{border:0;padding:20px 22px 0}
.modal-title{font-family:var(--pn-ui);font-size:20px;color:var(--pn-title);text-transform:none}
.modal-body{padding:18px 22px 22px}
.modal-footer{border:0;padding:0 22px 22px}
.modal .close{color:var(--pn-muted);opacity:1;background:none;border:0;font-size:22px}
.modal .close:hover{color:var(--pn-gold)}
.modal-backdrop.show{opacity:.85;background:#0d0a0c}

.dropdown-menu{
  background:var(--pn-panel);border:0;border-radius:12px;padding:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
.dropdown-menu .link-list a,.dropdown-menu .link-list-plain a,.dropdown-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  font-family:var(--pn-body-r);font-size:14px;color:var(--pn-text);
}
.dropdown-menu .link-list a:hover,.dropdown-item:hover{background:var(--pn-soft);color:var(--pn-gold)}

/* =========================================================================
   Blocos proprios do painel
   ========================================================================= */

/* linha chave/valor */
.pn-kv{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--pn-line-soft)}
.pn-kv:last-child{border-bottom:0}
.pn-kv .k{font-family:var(--pn-body-r);font-size:13px;color:var(--pn-muted)}
.pn-kv .v{font-family:var(--pn-body);font-size:14px;color:var(--pn-cream);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}

/* lista de itens (anuncios, eventos, personagens) */
.pn-list{display:block;width:100%}
.pn-list-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;margin-bottom:8px;
  background:var(--pn-soft);border-radius:10px;transition:background .2s ease;color:var(--pn-text);
}
.pn-list-item:last-child{margin-bottom:0}
a.pn-list-item:hover{background:var(--pn-hover)}
.pn-list-item .ic{
  width:38px;height:38px;flex:none;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:rgba(0,0,0,.3);color:var(--pn-gold);overflow:hidden;
}
.pn-list-item .ic img{width:100%;height:100%;object-fit:cover}
.pn-list-item .tx{flex:1;min-width:0}
.pn-list-item .tx b{
  display:block;font-family:var(--pn-ui);font-size:15px;color:var(--pn-cream);font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pn-list-item .tx span{
  display:block;font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pn-list-item .rt{flex:none;text-align:right}
.pn-list-item .rt span{display:block;font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted)}
.pn-list-item .rt b{display:block;font-family:var(--pn-ui);font-size:14px;color:var(--pn-gold);font-weight:400}

/* estado vazio */
.pn-empty{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:34px 20px;background:var(--pn-soft);border-radius:12px;
}
.pn-empty .ic{width:46px;height:46px;border-radius:12px;background:rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;color:var(--pn-muted)}
.pn-empty b{font-family:var(--pn-ui);font-size:17px;color:var(--pn-cream);font-weight:400}
.pn-empty span{font-family:var(--pn-body-r);font-size:13px;color:var(--pn-muted);max-width:460px;line-height:1.7}

/* barra de EXP */
.pn-exp{display:block;width:100%}
.pn-exp .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.pn-exp .hd .l{font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted)}
.pn-exp .hd .v{font-family:var(--pn-ui);font-size:14px;color:var(--pn-ok)}
.pn-exp .br{height:8px;border-radius:8px;background:rgba(0,0,0,.4);overflow:hidden}
.pn-exp .br i{display:block;height:100%;border-radius:8px;
  background:linear-gradient(90deg,#7fae3a,#c0f162);box-shadow:0 0 10px rgba(192,241,98,.35)}

/* =========================================================================
   Dashboard
   ========================================================================= */

.pn-grid{display:grid;gap:15px;margin-bottom:15px}
.pn-grid-2{grid-template-columns:1fr 1fr}
.pn-grid-3{grid-template-columns:repeat(3,1fr)}
.pn-grid-hero{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr)}
.pn-stack{display:flex;flex-direction:column;gap:15px}

/* cartao do personagem principal */
.pn-hero{
  position:relative;overflow:hidden;border-radius:15px;background:var(--pn-panel);
  display:flex;align-items:stretch;min-height:230px;
}
.pn-hero-art{
  position:relative;width:190px;flex:none;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  background:radial-gradient(70% 60% at 50% 40%, rgba(255,184,60,.14), transparent 70%),#191418;
}
.pn-hero-art .face{
  width:104px;height:104px;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
}
.pn-hero-art .face img{width:76px;height:76px;image-rendering:auto}
.pn-hero-art .cls{font-family:var(--pn-ui);font-size:14px;color:var(--pn-gold)}
.pn-hero-body{flex:1;min-width:0;padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.pn-hero-body .kick{font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted)}
.pn-hero-body h2{font-family:var(--pn-ui);font-size:30px;line-height:1;color:var(--pn-cream);margin:0}
.pn-hero-meta{display:flex;flex-wrap:wrap;gap:8px}
.pn-hero-meta span{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:20px;
  background:var(--pn-soft);font-family:var(--pn-body-r);font-size:13px;color:var(--pn-text);
  white-space:nowrap;
}
.pn-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:auto}
.pn-stats div{background:var(--pn-soft);border-radius:10px;padding:9px 6px;text-align:center}
.pn-stats span{display:block;font-family:var(--pn-body-r);font-size:11px;color:var(--pn-muted);margin-bottom:2px}
.pn-stats b{display:block;font-family:var(--pn-ui);font-size:17px;color:var(--pn-cream);font-weight:400}
.pn-hero-side{
  width:180px;flex:none;padding:20px 18px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.22);
}
.pn-hero-side .pos{font-family:var(--pn-ui);font-size:38px;line-height:1;color:var(--pn-gold)}
.pn-hero-side .lb{font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted);text-align:center}

/* mosaico do resumo */
.pn-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pn-tile{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;
  background:var(--pn-soft);color:var(--pn-text);transition:background .2s ease;
}
a.pn-tile:hover{background:var(--pn-hover)}
.pn-tile .ic{width:36px;height:36px;flex:none;border-radius:10px;background:rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center}
.pn-tile .tx{min-width:0}
.pn-tile .tx span{display:block;font-family:var(--pn-body-r);font-size:11px;color:var(--pn-muted)}
.pn-tile .tx b{display:block;font-family:var(--pn-ui);font-size:17px;color:var(--pn-cream);font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* faixa da loja */
.pn-banner{
  position:relative;overflow:hidden;border-radius:15px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 26px;
  background:linear-gradient(90deg,#241a2e 0%,#2d2036 45%,#171317 100%);
}
.pn-banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 130% at 78% 50%, rgba(153,111,217,.35), transparent 70%)}
.pn-banner > *{position:relative;z-index:1}
.pn-banner h3{font-family:var(--pn-ui);font-size:24px;color:var(--pn-gold);margin:0 0 6px}
.pn-banner p{font-family:var(--pn-body-r);font-size:14px;color:var(--pn-text);margin:0}
.pn-banner .rt{display:flex;align-items:center;gap:22px}
.pn-banner .sal{text-align:right}
.pn-banner .sal span{display:block;font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted)}
.pn-banner .sal b{display:block;font-family:var(--pn-ui);font-size:24px;color:var(--pn-cream);font-weight:400}

/* posto no ranking */
.pn-rank-row{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:8px;
  background:var(--pn-soft);border-radius:10px}
.pn-rank-row:last-child{margin-bottom:0}
.pn-rank-row .pos{width:22px;font-family:var(--pn-ui);font-size:16px;color:var(--pn-muted)}
.pn-rank-row .av{width:32px;height:32px;border-radius:9px;overflow:hidden;background:rgba(0,0,0,.3);flex:none}
.pn-rank-row .av img{width:100%;height:100%;object-fit:cover}
.pn-rank-row .nm{flex:1;min-width:0;font-family:var(--pn-ui);font-size:15px;color:var(--pn-cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-rank-row .sc{font-family:var(--pn-ui);font-size:15px;color:var(--pn-text)}
.pn-rank-row.top{background:rgba(255,184,60,.13)}
.pn-rank-row.top .pos,.pn-rank-row.top .sc{color:var(--pn-gold)}

/* =========================================================================
   Personagens
   ========================================================================= */

.pn-chars{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.pn-char{
  display:block;background:var(--pn-soft);border-radius:12px;padding:14px;
  transition:background .2s ease;color:var(--pn-text);
}
.pn-char:hover{background:var(--pn-hover)}
.pn-char.on{background:rgba(255,184,60,.13)}
.pn-char-top{display:flex;gap:12px;margin-bottom:12px}
.pn-char-port{width:56px;height:56px;flex:none;border-radius:12px;overflow:hidden;
  background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center}
.pn-char-port img{width:44px;height:44px}
.pn-char-id{min-width:0;flex:1}
.pn-char-id b{display:block;font-family:var(--pn-ui);font-size:17px;color:var(--pn-cream);font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-char-id span{display:block;font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted)}
.pn-char-id .lv{color:var(--pn-gold);font-family:var(--pn-ui);font-size:13px}
.pn-char-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;
  font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted)}
.pn-char-foot span{display:flex;align-items:center;gap:6px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =========================================================================
   Rankings
   ========================================================================= */

.pn-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:15px;align-items:end;margin-bottom:15px}
.pn-pod{background:var(--pn-panel);border-radius:15px;padding:20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.pn-pod .pos{font-family:var(--pn-ui);font-size:26px;color:var(--pn-muted)}
.pn-pod .av{width:66px;height:66px;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.3)}
.pn-pod .av img{width:100%;height:100%;object-fit:cover}
.pn-pod b{font-family:var(--pn-ui);font-size:18px;color:var(--pn-cream);font-weight:400}
.pn-pod span{font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted)}
.pn-pod .sc{font-family:var(--pn-ui);font-size:22px;color:var(--pn-cream)}
.pn-pod.p1{padding:26px 20px;background:linear-gradient(180deg,#2a2018,#151113)}
.pn-pod.p1 .pos,.pn-pod.p1 .sc{color:var(--pn-gold)}
.pn-av-sm{width:32px;height:32px;border-radius:9px;overflow:hidden;background:rgba(0,0,0,.3);display:block}
.pn-av-sm img{width:100%;height:100%;object-fit:cover}

/* =========================================================================
   Guild
   ========================================================================= */

.pn-guild{display:grid;grid-template-columns:1fr 1.1fr;gap:15px;align-items:start}
.pn-guild-head{display:flex;align-items:center;gap:18px}
.pn-guild-crest{width:72px;height:72px;flex:none;border-radius:16px;background:rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pn-guild-crest img{max-width:56px;max-height:56px;image-rendering:pixelated}
.pn-guild-head h2{font-family:var(--pn-ui);font-size:26px;color:var(--pn-cream);margin:4px 0}

/* =========================================================================
   Loja de Cash
   ========================================================================= */

.pn-shop-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:15px}
.pn-saldo{display:flex;align-items:center;gap:18px;background:var(--pn-panel);border-radius:15px;padding:14px 20px}
.pn-saldo .v{font-family:var(--pn-ui);font-size:24px;color:var(--pn-gold)}
.pn-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}
.pn-cat{display:flex;align-items:center;gap:9px;height:42px;padding:0 18px;border-radius:10px;
  background:var(--pn-soft);color:var(--pn-cream);font-family:var(--pn-ui);font-size:14px}
.pn-cat:hover{background:var(--pn-hover);color:#fff}
.pn-cat.on{background:rgba(255,184,60,.16);color:var(--pn-gold)}
.pn-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px}
.pn-prod{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;
  background:var(--pn-soft);transition:background .2s ease}
.pn-prod:hover{background:var(--pn-hover)}
.pn-prod.sem{opacity:.55}
.pn-prod .art{height:86px;border-radius:10px;background:rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center}
.pn-prod .art img{width:46px;height:46px;image-rendering:pixelated;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.7))}
.pn-prod .nm{font-family:var(--pn-ui);font-size:15px;color:var(--pn-cream);line-height:1.25;min-height:38px}
.pn-prod .ds{font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted);line-height:1.5;
  min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pn-prod .pe{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-top:10px;border-top:1px solid var(--pn-line-soft)}
.pn-prod .pr{display:flex;align-items:center;gap:6px;font-family:var(--pn-ui);font-size:15px;color:var(--pn-gold)}
.pn-prod .cd{font-family:var(--pn-body-r);font-size:11px;color:#6b6058}

/* =========================================================================
   Eventos / inventario / estados
   ========================================================================= */

.pn-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.pn-week-day{background:var(--pn-soft);border-radius:10px;padding:12px 8px;min-height:104px;
  display:flex;flex-direction:column;gap:8px;text-align:center}
.pn-week-day.hoje{background:rgba(255,184,60,.13)}
.pn-week-day .d{font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted)}
.pn-week-day.hoje .d{color:var(--pn-gold)}
.pn-week-ev b{display:block;font-family:var(--pn-ui);font-size:14px;color:var(--pn-gold);font-weight:400}
.pn-week-ev span{display:block;font-family:var(--pn-body-r);font-size:11px;color:var(--pn-text);line-height:1.4}
.pn-week-ev.vazio{color:#3d3639}

.pn-slots{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.pn-slot{aspect-ratio:1;border-radius:10px;background:var(--pn-soft)}
.pn-inv{display:grid;grid-template-columns:1fr 230px;gap:15px;align-items:start}
.pn-inv-side{background:var(--pn-soft);border-radius:12px;padding:14px 16px}

.pn-state{max-width:560px;margin:30px auto;background:var(--pn-panel);border-radius:15px;
  padding:34px;text-align:center}
.pn-state .ic{width:66px;height:66px;margin:0 auto 16px;border-radius:18px;background:rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;color:var(--pn-gold)}
.pn-state.danger .ic{color:var(--pn-danger)}
.pn-state h2{font-family:var(--pn-ui);font-size:24px;color:var(--pn-cream);margin:0 0 10px}
.pn-state p{font-family:var(--pn-body-r);font-size:14px;color:var(--pn-text);line-height:1.7;margin:0}

.pn-crumb{display:flex;align-items:center;gap:9px;margin-bottom:14px;
  font-family:var(--pn-body-r);font-size:13px;color:var(--pn-muted)}
.pn-crumb a{color:var(--pn-gold)}
.pn-crumb .sep{color:#3d3639}
.pn-crumb .cur{color:var(--pn-cream)}

/* =========================================================================
   Autenticacao — cartao central sobre o video do site
   ========================================================================= */

.pn-auth{max-width:470px;margin:0 auto;padding:10px 0 40px}
.pn-auth-card{background:var(--pn-panel);border-radius:15px;padding:30px 30px 26px;
  box-shadow:0 30px 70px rgba(0,0,0,.55)}
.pn-auth-head{text-align:center;margin-bottom:22px}
.pn-auth-head h1{font-family:var(--pn-ui);font-size:26px;color:var(--pn-cream);margin:0 0 8px}
.pn-auth-head p{font-family:var(--pn-body-r);font-size:13px;color:var(--pn-muted);margin:0}
.pn-auth-alt{text-align:center;margin-top:18px;font-family:var(--pn-body-r);font-size:14px;color:var(--pn-muted)}
.pn-auth-alt a{color:var(--pn-gold)}
.pn-auth-foot{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;
  font-family:var(--pn-body-r);font-size:13px;color:var(--pn-muted)}
.pn-dot{width:8px;height:8px;border-radius:50%;background:var(--pn-ok);box-shadow:0 0 8px var(--pn-ok);display:inline-block}

/* =========================================================================
   Restos do DashLite que aparecem nas telas herdadas
   ========================================================================= */

.nk-block + .nk-block{margin-top:15px}
.nk-block-head{margin-bottom:14px}
.nk-block-title,.nk-block-head .title{font-family:var(--pn-ui);font-size:22px;color:var(--pn-title);text-transform:none}
.nk-block-des,.sub-text,.text-soft{font-family:var(--pn-body-r);color:var(--pn-muted)!important}
.text-primary,.text-primary-alt,.text-info,.text-purple{color:var(--pn-gold)!important}
.text-success{color:var(--pn-ok)!important}
.text-danger{color:var(--pn-danger)!important}
.link-primary,a.link,a.link-sm{color:var(--pn-gold)!important}
.bg-primary,.bg-purple,.bg-azure,.bg-info{background:rgba(255,184,60,.16)!important;color:var(--pn-gold)!important}
.icon-circle,.user-avatar,.nk-help-img{border-radius:12px}
.user-avatar{background:rgba(0,0,0,.3)!important;color:var(--pn-gold)!important;font-family:var(--pn-ui)}
.progress{background:rgba(0,0,0,.4);border-radius:8px;height:8px;border:0}
.progress-bar{background:linear-gradient(90deg,#7fae3a,#c0f162);border-radius:8px}
.nk-reply-item{background:var(--pn-soft);border-radius:12px;padding:16px;margin-bottom:10px;border:0}
.nk-reply-header .lead-text,.nk-reply-header .title{font-family:var(--pn-ui);font-size:15px;color:var(--pn-cream)}
.nk-reply-body,.nk-reply-entry,.nk-reply-entry p{font-family:var(--pn-body);font-size:14px;color:var(--pn-text);line-height:1.7}
.nk-ibx-item{background:var(--pn-soft);border-radius:10px;margin-bottom:8px;border:0;padding:12px 14px}
.nk-ibx-item-elem{color:var(--pn-text)}
.nk-ibx-item.pn-unread{background:rgba(255,184,60,.12)}
.nk-tb-item{border-bottom:1px solid var(--pn-line-soft)}
.nk-tb-head .nk-tb-col{font-family:var(--pn-body-r);font-size:12px;color:#6b6058;text-transform:none;letter-spacing:0}
.border-top,.border-bottom{border-color:var(--pn-line-soft)!important}
.card-inner.p-0.border-top{border-top:1px solid var(--pn-line-soft)!important}
code{color:var(--pn-gold);background:rgba(0,0,0,.3);padding:2px 6px;border-radius:5px}

/* =========================================================================
   Responsivo
   ========================================================================= */

@media (max-width:1100px){
  .pn-grid-hero{grid-template-columns:1fr}
  .pn-grid-3{grid-template-columns:1fr 1fr}
  .pn-guild{grid-template-columns:1fr}
  .pn-chars{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .pn{flex-direction:column;gap:16px}
  .pn-side{width:100%;position:static}
  .pn-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .pn-nav a{margin-bottom:0}
  .pn-nav-sep{display:none}
  .pn-side-box{margin-top:0}
}
@media (max-width:700px){
  .pn-grid-2,.pn-grid-3{grid-template-columns:1fr}
  .pn-chars{grid-template-columns:1fr}
  .pn-hero{flex-direction:column}
  .pn-hero-art{width:100%;padding:20px 0}
  .pn-hero-side{width:100%}
  .pn-stats{grid-template-columns:repeat(3,1fr)}
  .pn-week{grid-template-columns:repeat(2,1fr)}
  .pn-podium{grid-template-columns:1fr}
  .pn-inv{grid-template-columns:1fr}
  .pn-slots{grid-template-columns:repeat(5,1fr)}
  .pn-form-2col{grid-template-columns:1fr}
  .pn-nav{grid-template-columns:1fr}
  .pn-tiles{grid-template-columns:1fr}
}

/* =========================================================================
   Cabecalho do site dentro do painel: mesmo menu e mesmo video, so mais baixo
   (o painel nao precisa do logo de 250px nem da contagem regressiva)
   ========================================================================= */
.pn-body .header{padding-top:96px}
.pn-body .header .flex-top{padding:10px 0 0}
.pn-body .header .flex-top .timerhello{display:none}
.pn-body .header .flex-bottom{flex-direction:row;align-items:flex-end;padding-top:10px}
.pn-body .header .flex-bottom .logo{display:none}
.pn-body .header .flex-bottom .status{margin-left:auto}
.pn-body .wrapper.content{padding-top:18px}
@media (max-width:1100px){
  .pn-body .header{padding-top:70px}
  .pn-body .header .flex-bottom .status{margin:0 auto}
}

/* =========================================================================
   Fundo: o site so pinta o topo (o video) e conta com paginas curtas.
   O painel e alto, entao a partir do heroi ele escurece ate o solido.
   ========================================================================= */
html{background:#191418}
body.pn-body{background:#191418}
.pn-body #main-content{
  background:linear-gradient(180deg,
    rgba(25,20,24,0) 0px,
    rgba(25,20,24,.35) 240px,
    rgba(25,20,24,.86) 420px,
    #191418 620px);
}
.pn-body #main-content:before{display:none}
.pn-body .header{padding-top:132px}
.pn-body .wrapper.content{padding-top:10px;padding-bottom:30px}
.pn-body .footer{background:#191418}

/* grades do dashboard: cartoes comecam no topo, sem esticar */
.pn-grid{align-items:start}
.pn-stack{align-self:stretch}

/* heroi em duas colunas — a terceira apertava o corpo a 190px */
.pn-hero-art{width:158px}
.pn-hero-side{display:none}
.pn-stats{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
.pn-stats .rk b{color:var(--pn-gold)}
.form-control::placeholder,.pn-field .form-control::placeholder{color:#6b6058;font-family:var(--pn-body-r);font-weight:400;opacity:1}
.form-control::-webkit-input-placeholder,.pn-field .form-control::-webkit-input-placeholder{color:#6b6058;font-family:var(--pn-body-r);font-weight:400}

/* =========================================================================
   O painel.css do DashLite traz um tema escuro proprio no fim do arquivo,
   todo com !important (inclusive `.card{background:rgba(25,25,25,.85)}` e um
   roxo #b753ef nos hovers). Este bloco existe so para vencer aquilo.
   ========================================================================= */
.card,.card-bordered,.pn-card{background-color:var(--pn-panel)!important;border-color:transparent!important}
.pn-hero,.pn-pod,.pn-saldo,.pn-side-box,.pn-state,.pn-auth-card,.modal-content,.dropdown-menu{
  background-color:var(--pn-panel)!important;border-color:transparent!important}
.pn-list-item,.pn-tile,.pn-char,.pn-prod,.pn-cat,.pn-nav a,.pn-slot,.pn-inv-side,.pn-empty,
.pn-rank-row,.pn-week-day,.pn-field,.form-control,.nav-tabs .nav-link,.nav-tabs-s2 .nav-link,
.page-item .page-link,.pn-page-btn,.table tbody tr,.nk-reply-item,.nk-ibx-item{
  background-color:rgba(255,255,255,.05)!important;border-color:transparent!important}
.pn-nav a.on,.pn-cat.on,.pn-char.on,.pn-rank-row.top,.pn-week-day.hoje,.pn-row-you,
.nav-tabs .nav-link.active,.nav-tabs-s2 .nav-link.active,.page-item.active .page-link{
  background-color:rgba(255,184,60,.16)!important}
.pn-list-item .ic,.pn-tile .ic,.pn-char-port,.pn-prod .art,.pn-av-sm,.pn-pod .av,
.pn-guild-crest,.pn-empty .ic,.pn-state .ic,.pn-hero-art .face,.pn-exp .br{
  background-color:rgba(0,0,0,.32)!important}
.pn-hero-art{background-color:#191418!important}
.pn-nav a:hover,.pn-cat:hover,.pn-char:hover,.pn-prod:hover,a.pn-list-item:hover,
a.pn-tile:hover,.table tbody tr:hover,.page-link:hover,.nav-tabs .nav-link:hover{
  background-color:rgba(83,63,54,.8)!important}
.btn-primary{background-color:#6b4d26!important;background-image:linear-gradient(180deg,#7a5a2a,#54331d)!important;border-color:transparent!important;color:#ffe9c2!important}
.btn-primary:hover{background-color:#7f5c2b!important;background-image:linear-gradient(180deg,#946c31,#653d21)!important;color:#fff5e6!important}
.btn-secondary,.btn-light,.btn-dim{background-color:var(--pn-panel)!important;border-color:transparent!important;color:var(--pn-gold)!important}
.btn-secondary:hover,.btn-light:hover,.btn-dim:hover{background-color:#533f36!important;color:#ffdbcb!important}
.btn-warning:hover{background-color:rgba(255,184,60,.28)!important;border-color:transparent!important;color:var(--pn-gold)!important}
.btn-success:hover{background-color:rgba(192,241,98,.24)!important;border-color:transparent!important}
.btn-danger:hover{background-color:rgba(255,114,120,.28)!important;border-color:transparent!important}
.pn-banner{background-image:linear-gradient(90deg,#241a2e 0%,#2d2036 45%,#171317 100%)!important;background-color:#241a2e!important}
.nav-tabs,.nav-tabs-s2{border:0!important}
.table,.table td,.table th,.table-responsive{border:0!important}
.form-control:focus,.pn-field:focus-within{background-color:rgba(255,255,255,.08)!important}
.card-title .title,.card-title h5,.card-title h6,.nk-block-title,.modal-title,.pn-card-t{
  color:var(--pn-title)!important;font-family:var(--pn-ui)!important;text-transform:none!important}
.nav-tabs .nav-link,.nav-tabs-s2 .nav-link,.nav-tabs-s2 .nav-item .nav-link,
.nav-tabs .nav-link.active,.nav-tabs-s2 .nav-link.active{border:0!important;box-shadow:none!important}
.nav-tabs .nav-link.active,.nav-tabs-s2 .nav-link.active{color:var(--pn-gold)!important}
.nav-tabs .nav-link .icon,.nav-tabs-s2 .nav-link .icon{background-color:transparent!important;color:inherit!important}
.card-inner h5,.card-inner h6,.card-head .card-title{color:var(--pn-title)!important}

/* =========================================================================
   Layout em float, nao em flex: varias paginas herdadas fecham menos <div>
   do que abrem, e num flex-row qualquer sobra vira uma terceira coluna e
   esmaga o conteudo. Com float, sobra so empilha.
   ========================================================================= */
.pn{display:block;width:100%}
.pn::after{content:"";display:block;clear:both}
.pn-side{float:left;width:246px;position:sticky;top:16px}
.pn-main{margin-left:268px;min-width:0}
@media (max-width:900px){
  .pn-side{float:none;width:100%;position:static}
  .pn-main{margin-left:0}
}
/* qualquer titulo dentro do painel usa a cor de titulo do site */
.pn-main h1,.pn-main h2,.pn-main h3,.pn-main h4,.pn-main h5,.pn-main h6,
.pn-auth h1,.pn-auth h2,.pn-auth h5{color:var(--pn-title)!important;font-family:var(--pn-ui)!important}
.pn-main h5,.pn-main h6{font-size:19px;margin-bottom:10px}
.pn-main p,.pn-main li,.pn-main span,.pn-main td,.pn-main label{font-family:var(--pn-body-r)}
.pn-main b,.pn-main strong{font-family:var(--pn-body)}

/* =========================================================================
   Autofill do navegador (29/08/2026)

   Chrome/Edge pintam o campo preenchido automaticamente com um fundo claro
   proprio (#e8f0fe) e uma cor de texto propria, ignorando qualquer
   `background` do CSS. Dentro do .pn-field escuro isso virava uma barra
   clara colada no icone, comendo as letras.

   background-clip:text faz esse fundo ser recortado nas letras (some da
   vista) e -webkit-text-fill-color devolve a cor do tema. A transicao de
   100000s e a rede de seguranca: mesmo que o fundo escape, ele nunca chega
   a ser desenhado.
   ========================================================================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--pn-text);
  caret-color:var(--pn-text);
  -webkit-background-clip:text;
          background-clip:text;
  background-color:transparent!important;
  -webkit-transition:background-color 100000s ease-in-out 0s;
          transition:background-color 100000s ease-in-out 0s;
  font-family:var(--pn-body-r);
}

/* Firefox usa :autofill com um background-image proprio */
input:autofill,
select:autofill,
textarea:autofill{
  -webkit-text-fill-color:var(--pn-text);
  background-image:none!important;
  background-color:transparent!important;
  filter:none;
}

/* =========================================================================
   Campo com icone: a "sombra dentro da sombra" (29/08/2026)

   Ha um bloco de tema mais abaixo que pinta `.pn-field` E `.form-control`
   com o MESMO rgba(255,255,255,.05) !important. Como o input mora dentro
   do campo, as duas camadas se somavam: a caixa arredondada externa e um
   retangulo de cantos vivos por dentro dela, entre o icone e o olho.
   O `!important` daquele bloco anulava o `background:transparent` que a
   regra original do .pn-field ja tentava aplicar.

   Aqui o input volta a ser so o texto: quem desenha a caixa e o .pn-field.
   ========================================================================= */
.pn-field > .form-control,
.pn-field > .form-control:hover,
.pn-field > .form-control:focus,
.pn-field > .form-control:active,
.pn-field > input,
.pn-field > select,
.pn-field > textarea{
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  -webkit-box-shadow:none!important;
          box-shadow:none!important;
  outline:0!important;
}

/* o campo inteiro passa a ser a superficie clicavel e o unico degrau de cor */
.pn-field{
  border:1px solid rgba(255,255,255,.06);
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
          box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.pn-field:hover{border-color:rgba(255,222,174,.14)}
.pn-field:focus-within{
  border-color:var(--pn-line);
  -webkit-box-shadow:0 0 0 3px rgba(255,184,60,.10);
          box-shadow:0 0 0 3px rgba(255,184,60,.10);
}

/* o botao do olho nao pode herdar fundo de botao do tema */
.pn-eye,.pn-eye:hover,.pn-eye:focus,.pn-eye:active{
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  -webkit-box-shadow:none!important;
          box-shadow:none!important;
}


.gt-picks{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;margin:0 0 16px}
.gt-pick .rot,.gt-pag .rot,.gt-pocoes .rot{display:block;font-family:var(--pn-body-r);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--pn-muted);margin:0 0 7px}
.gt-pick .chips{display:flex;flex-wrap:wrap;gap:7px}
.gt-pick .chip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:9px;
  background:var(--pn-soft);color:var(--pn-text);font-family:var(--pn-body);font-size:13px;
  text-decoration:none;transition:background .15s,color .15s}
.gt-pick .chip:hover{background:var(--pn-hover);color:#fff}
.gt-pick .chip.on{background:var(--pn-hover);color:var(--pn-gold)}
.gt-live{margin-left:auto;display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;
  border-radius:9px;background:var(--pn-soft);font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted)}
.gt-live .dot{width:7px;height:7px;border-radius:50%;background:var(--pn-ok);
  box-shadow:0 0 0 0 rgba(192,241,98,.5);animation:gtpulse 2.4s infinite}
.gt-live.off .dot{background:#5d5459;animation:none;box-shadow:none}
.gt-live.off .txt{color:#5d5459}
@keyframes gtpulse{0%{box-shadow:0 0 0 0 rgba(192,241,98,.45)}70%{box-shadow:0 0 0 7px rgba(192,241,98,0)}100%{box-shadow:0 0 0 0 rgba(192,241,98,0)}}

.gt-inv{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:15px;align-items:start}
.gt-inv-a{display:flex;flex-direction:column;gap:15px;min-width:0}
.gt-inv-b{display:flex;flex-direction:column;gap:15px}

.gt-doll{display:grid;gap:9px;justify-content:center;
  grid-template-columns:repeat(3,86px);
  grid-template-areas:
    "traje amuleto sheltom"
    "bre   armadura brd"
    "anle  armadura anld"
    "arma  luvas   escudo"
    "brace botas   ."}
.gt-slot{position:relative;background:var(--pn-soft);border-radius:11px;min-height:86px;
  display:flex;align-items:center;justify-content:center;padding:6px 6px 18px}
.gt-slot[style*="armadura"]{min-height:181px}
.gt-slot img{max-width:100%;max-height:100%;object-fit:contain;image-rendering:auto}
.gt-slot u{position:absolute;left:0;right:0;bottom:5px;text-align:center;text-decoration:none;
  font-family:var(--pn-body-r);font-size:10px;color:#6f6459;letter-spacing:.02em}
.gt-slot.tem{background:rgba(255,184,60,.07);box-shadow:inset 0 0 0 1px rgba(255,222,174,.16)}
.gt-slot.tem u{color:var(--pn-muted)}
.gt-slot .sem{font-family:var(--pn-body-r);font-size:11px;color:var(--pn-muted)}
.gt-slot.pequeno{min-height:52px;width:52px;padding:5px;border-radius:9px}

.gt-pocoes{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--pn-line-soft)}
.gt-pocoes .rot{margin:0 4px 0 0}

.gt-pags{display:flex;flex-wrap:wrap;gap:18px}
.gt-pag{min-width:0}
.gt-pag .rot em{font-style:normal;color:var(--pn-gold);margin-left:5px}

.gt-grid{position:relative;--cel:34px;
  width:calc(var(--c) * var(--cel));height:calc(var(--r) * var(--cel));
  max-width:100%}
.gt-cells{position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(var(--c),1fr);grid-template-rows:repeat(var(--r),1fr)}
.gt-cells i{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(0,0,0,.32);border-radius:4px}
.gt-item{position:absolute;box-sizing:border-box;padding:2px;
  left:calc(var(--x) * var(--cel));top:calc(var(--y) * var(--cel));
  width:calc(var(--w) * var(--cel));height:calc(var(--h) * var(--cel));
  display:flex;align-items:center;justify-content:center;border-radius:5px;
  background:rgba(255,184,60,.08);box-shadow:inset 0 0 0 1px rgba(255,222,174,.2);
  cursor:default;transition:background .12s,box-shadow .12s}
.gt-item:hover{background:rgba(255,184,60,.18);box-shadow:inset 0 0 0 1px var(--pn-gold);z-index:3}
.gt-item.up{box-shadow:inset 0 0 0 1px rgba(192,241,98,.45)}
.gt-item.uq{box-shadow:inset 0 0 0 1px rgba(153,111,217,.6)}
.gt-item img{max-width:100%;max-height:100%;object-fit:contain}
.gt-item .sem{font-family:var(--pn-body-r);font-size:9px;color:var(--pn-muted);text-align:center;line-height:1.1}
.gt-item b{position:absolute;font-family:var(--pn-body);font-weight:400;line-height:1;pointer-events:none}
.gt-item b.q{right:2px;bottom:1px;font-size:10px;color:#fff;text-shadow:0 1px 2px #000}
.gt-item b.a{left:2px;top:1px;font-size:10px;color:var(--pn-ok);text-shadow:0 1px 2px #000}
.gt-item b.l{right:2px;top:2px;width:6px;height:6px;border-radius:50%;background:var(--pn-danger)}
.gt-slot b.a{position:absolute;left:7px;top:5px;font-family:var(--pn-body);font-size:11px;
  color:var(--pn-ok);text-shadow:0 1px 2px #000}
.gt-slot b.q{position:absolute;right:5px;bottom:16px;font-family:var(--pn-body);font-size:11px;
  color:#fff;text-shadow:0 1px 2px #000}
.gt-slot b.l{position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--pn-danger)}
.gt-grid-vazio{margin:8px 0 0;font-family:var(--pn-body-r);font-size:12px;color:#5d5459}

.gt-resumo{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.gt-resumo .cx{flex:1 1 150px;background:var(--pn-soft);border-radius:11px;padding:12px 14px}
.gt-resumo u{display:block;text-decoration:none;font-family:var(--pn-body-r);font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--pn-muted);margin:0 0 5px}
.gt-resumo b{font-family:var(--pn-ui);font-size:18px;font-weight:400;color:var(--pn-cream)}

.gt-ficha{margin:0 0 14px}
.gt-ficha .nome{display:block;font-family:var(--pn-ui);font-size:20px;font-weight:400;color:var(--pn-title)}
.gt-ficha .cls{display:block;font-family:var(--pn-body-r);font-size:13px;color:var(--pn-muted);margin-top:3px}
.gt-exp{margin:0 0 6px}
.gt-exp .br{height:7px;border-radius:4px;background:rgba(0,0,0,.35);overflow:hidden}
.gt-exp .br i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#8a5b17,var(--pn-gold))}
.gt-exp span{display:block;margin-top:6px;font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted)}

.gt-tip{position:fixed;z-index:999;left:-9999px;top:-9999px;max-width:290px;
  background:#0f0d0e;border-radius:11px;padding:13px 15px;pointer-events:none;
  box-shadow:0 12px 34px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,222,174,.18);
  opacity:0;transition:opacity .1s}
.gt-tip.on{opacity:1}
.gt-tip b{display:block;font-family:var(--pn-ui);font-size:15px;font-weight:400;color:var(--pn-title)}
.gt-tip b em{font-style:normal;color:var(--pn-ok)}
.gt-tip i{display:block;font-style:normal;font-family:var(--pn-body-r);font-size:11px;
  color:#6f6459;letter-spacing:.06em;margin:1px 0 9px}
.gt-tip span{display:flex;justify-content:space-between;gap:14px;padding:3px 0}
.gt-tip u{text-decoration:none;font-family:var(--pn-body-r);font-size:12px;color:var(--pn-muted)}
.gt-tip s{text-decoration:none;font-family:var(--pn-body);font-size:12px;color:var(--pn-cream)}
.gt-tip em{display:block;font-style:normal;font-family:var(--pn-body-r);font-size:11px;margin-top:8px}
.gt-tip em.lk{color:var(--pn-danger)}
.gt-tip em.uq{color:var(--pn-arcane)}

@media (max-width:1200px){
  .gt-inv{grid-template-columns:1fr}
  .gt-inv-b{flex-direction:row;flex-wrap:wrap}
  .gt-inv-b>.card{flex:1 1 240px}
}
@media (max-width:640px){
  .gt-grid{--cel:26px}
  .gt-doll{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gt-slot{min-height:70px}
  .gt-slot[style*="armadura"]{min-height:149px}
  .gt-picks{gap:12px}
  .gt-live{margin-left:0}
}

/* =========================================================================
   Alinhamento dos cartoes em grade
   O painel.css do DashLite tem `.card + .card{margin-top:28px}`: dentro de uma
   grade isso empurra so o 2o cartao para baixo e desalinha a linha inteira.
   Dentro do painel quem espaca e o `gap` da grade, nao a margem do cartao.
   ========================================================================= */
.pn-main .card + .card,
.pn-auth .card + .card,
.pn-grid .card + .card,
.pn-stack .card + .card,
.pn-guild .card + .card{margin-top:0!important}

.pn-grid > .card,
.pn-grid > .pn-stack > .card,
.pn-stack > .card,
.pn-guild > .card{margin-bottom:0!important}
/* a grade do cla nao tinha margem propria: quem separava era a margem dos
   cartoes, que acabou de sair */
.pn-guild{margin-bottom:15px}

html{background:#191418}
.pn-body{min-height:100%;height:auto}