#v-painel, #v-suporte, #v-ferramentas {
  --p4-panel: rgba(15, 15, 15, .74);
  --p4-panel-hi: rgba(23, 23, 23, .85);
  --p4-soft: rgba(255, 255, 255, .025);
  --p4-soft-hi: rgba(255, 255, 255, .055);
  --p4-line: rgba(255, 255, 255, .106);
  --p4-line-hi: rgba(255, 255, 255, .2);
  --p4-ink: rgba(238, 240, 244, .92);
  --p4-muted: rgba(236, 240, 247, .6);
  --p4-faint: rgba(236, 240, 247, .38);
  --p4-blur: blur(6px);
  --p4-lift: inset 0 1px 0 rgba(255, 255, 255, .05), 0 4px 4px 0 rgba(0, 0, 0, .8);
  --p4-r: 2px;
}

#v-painel .pnl-card,
#v-suporte .pnl-card {
  background: var(--p4-panel);
  -webkit-backdrop-filter: var(--p4-blur);
  backdrop-filter: var(--p4-blur);
  border: 1px solid var(--p4-line);
  border-radius: var(--p4-r);
  box-shadow: var(--p4-lift);
  padding: 22px;
}

#v-painel [class],
#v-suporte [class],
#v-ferramentas [class] { border-radius: var(--p4-r); }

#v-painel .ord-st, #v-painel .pnl-tier, #v-painel .parc-chip,
#v-suporte .sup-st, #v-suporte .sup-via, #v-suporte .sup-flag,
#v-ferramentas .fpill, #v-ferramentas .ftag {
  border-radius: 999px;
}
#v-painel .pnl-char img, #v-painel .pchar-av, #v-painel .psum-av { border-radius: 50%; }

#v-painel .pnl-char,
#v-painel .ord-row,
#v-painel .parc-st,
#v-painel .parc-cupom,
#v-painel .acc-doc,
#v-painel .acc-f,
#v-suporte .sup-row2,
#v-suporte .sup-msg2,
#v-suporte .sup-trx {
  background: var(--p4-soft);
  border: 1px solid var(--p4-line);
  box-shadow: none;
}
#v-painel .pnl-char:hover,
#v-painel .ord-row:hover,
#v-suporte .sup-row2:hover {
  background: var(--p4-soft-hi);
  border-color: var(--p4-line-hi);
  transform: translateY(-2px);   
}

#v-painel input, #v-painel select, #v-painel textarea,
#v-suporte input, #v-suporte select, #v-suporte textarea,
#v-ferramentas input, #v-ferramentas select, #v-ferramentas textarea {
  background: rgba(0, 0, 0, .34) !important;
  border: 1px solid var(--p4-line) !important;
  border-radius: var(--p4-r) !important;
  color: var(--p4-ink);
  font-family: inherit;
  outline: none;
}
#v-painel input:focus, #v-painel select:focus, #v-painel textarea:focus,
#v-suporte input:focus, #v-suporte select:focus, #v-suporte textarea:focus,
#v-ferramentas input:focus, #v-ferramentas select:focus, #v-ferramentas textarea:focus {
  border-color: rgba(79, 140, 240, .6) !important;
  box-shadow: 0 0 0 1px rgba(79, 140, 240, .18);
}
#v-suporte .sup-form, #v-suporte .sup-trx, #v-painel .parc-form, #v-painel .acc-form2 {
  border-radius: var(--p4-r) !important;
}
#v-painel input::placeholder, #v-suporte input::placeholder,
#v-painel textarea::placeholder, #v-suporte textarea::placeholder { color: var(--p4-faint); }

#v-painel .btn, #v-suporte .btn, #v-ferramentas .btn {
  border-radius: var(--p4-r);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: background .18s, border-color .18s, box-shadow .18s, transform .16s;
}
#v-painel .btn:hover, #v-suporte .btn:hover, #v-ferramentas .btn:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .26);
  transform: translateY(-1px);
}
#v-painel .btn.pri, #v-suporte .btn.pri, #v-ferramentas .btn.pri {
  border-color: rgba(79, 140, 240, .85);
  box-shadow: 0 0 22px -12px rgb(79, 140, 240);
}

#v-suporte .sup-msg2.mine { background: rgba(255, 255, 255, .05); border-color: var(--p4-line-hi); }
#v-suporte .sup-confirm { background: var(--p4-soft); border-color: rgba(79, 140, 240, .3); }
#v-painel .parc-go, #v-painel .acc-doc-go { background: var(--p4-soft); border-color: rgba(79, 140, 240, .42); }
#v-suporte .sup-item-new .sup-row2 { background: var(--p4-soft); border-color: rgba(79, 140, 240, .42); }

#v-painel .parc-cupom { border-color: rgba(242, 183, 5, .3); background: rgba(242, 183, 5, .05); }

#v-painel .psum-i { border-radius: var(--p4-r); }
#v-painel .psum-i b { font-variant-numeric: tabular-nums; }
#v-painel .psum-prem:not(.on) b { color: var(--p4-ink); }

#v-painel .acc-f.pend { border-color: rgba(232, 164, 75, .34); background: rgba(232, 164, 75, .05); }
#v-painel .acc-f .no { color: var(--p4-faint); font-style: italic; }
#v-painel .acc-note.pend {
  border: 1px solid rgba(232, 164, 75, .3); background: rgba(232, 164, 75, .05);
  border-radius: var(--p4-r); padding: 10px 13px; color: var(--p4-muted);
}
#v-painel .acc-form2 { margin: 14px 0 4px; padding: 14px 16px; border: 1px solid var(--p4-line); background: var(--p4-soft); border-radius: var(--p4-r); }

#v-painel .ord-id, #v-painel .parc-nums b, #v-painel .pnl-ctx,
#v-suporte .sup-code2, #v-suporte .sup-when, #v-suporte .sup-meta {
  font-variant-numeric: tabular-nums;
}

.pix-box, #accOv .pix-box, #premCancelOv .pix-box {
  background: var(--p4-panel, rgba(15, 15, 15, .74));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .106);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 4px 4px 0 rgba(0, 0, 0, .8);
}

#v-painel .prem-ben { margin-top: 16px; }
#v-painel .prem-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#v-painel .prem-tool {
  appearance: none; cursor: pointer; border-radius: 2px;
  background: transparent; color: #e8ebf2;
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; padding: 8px 13px;
  transition: border-color .16s cubic-bezier(.22, .68, .2, 1), color .16s, transform .16s;
}
#v-painel .prem-tool:hover { color: #fff; border-color: rgba(79, 140, 240, .85); transform: translateY(-1px); }
#v-painel .prem-tool:focus-visible { outline: none; border-color: rgba(79, 140, 240, .85); }

#v-painel .pnl-porta {
  position: relative; overflow: hidden; cursor: pointer;
  transition: border-color .28s cubic-bezier(.22, .68, .2, 1), box-shadow .28s cubic-bezier(.22, .68, .2, 1);
}
#v-painel .pnl-porta::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40%;
  z-index: -1; pointer-events: none;
  background: var(--porta-art) var(--porta-pos, right center)/var(--porta-fit, cover) no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0, #000 45%);
  opacity: var(--porta-op, .85);
  transition: opacity .28s cubic-bezier(.22, .68, .2, 1);
}
#v-painel .pnl-porta .pnl-ctx { text-shadow: 1px 1px 0 rgba(0, 0, 0, .9); }
#v-painel .pnl-porta:hover, #v-painel .pnl-porta:focus-visible {
  border-color: rgba(79, 140, 240, .85);
  box-shadow: var(--p4-lift), 0 0 22px -12px rgb(79, 140, 240);
  outline: none;
}
#v-painel .pnl-porta:hover::after, #v-painel .pnl-porta:focus-visible::after { opacity: 1; }
@media (max-width: 720px) { #v-painel .pnl-porta::after { display: none; } }

#v-painel .parc-line { display: flex; align-items: center; gap: 16px 38px; flex-wrap: wrap; }
#v-painel .parc-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: #4bbf7b; white-space: nowrap;
}
#v-painel .parc-live i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #4bbf7b; box-shadow: 0 0 8px rgba(75, 191, 123, .8);
}
#v-painel .parc-cup { display: inline-flex; align-items: center; gap: 12px; }
#v-painel .parc-cup b {
  font-family: var(--mono); font-size: 18px; font-weight: 800;
  letter-spacing: .08em; color: #f2b705; font-variant-numeric: tabular-nums;
}
#v-painel .parc-uso { display: inline-flex; align-items: baseline; gap: 10px; }
#v-painel .parc-uso b {
  font-family: var(--display); font-size: 18px; font-weight: 800;
  color: #eef2f8; font-variant-numeric: tabular-nums;
}