/* ==========================================================================
   dk-purple - camada V7
   --------------------------------------------------------------------------
   Componentes introduzidos no MorpheusV7 (checkout, page builder, componentes
   compartilhados e plugins novos), repintados com a paleta do dk-purple.

   Este arquivo e ADITIVO: carrega DEPOIS do app.css e nao substitui nada dele.
   O app.css continua sendo a fonte de verdade do visual existente.
   NAO recompile resources/sass/ - veja resources/README.md.
   ========================================================================== */

:root {
    --v7-bg: #251f29;          /* fundo da pagina        */
    --v7-surface: #392d49;     /* superficie (.page)     */
    --v7-card: #211a2b;        /* card                   */
    --v7-sunken: #2e2539;      /* equivalente ao gray-100 */
    --v7-sidebar: #52406b;
    --v7-primary: #735b96;
    --v7-primary-bright: #9b77cb;
    --v7-primary-hover: #8166a6;
    --v7-accent: #a983dd;
    --v7-accent-hover: #cda8ff;
    --v7-text: #efe3ff;
    --v7-muted: #9d89b7;
    --v7-line: #4c3b62;
    --v7-line-soft: #624c80;
    --v7-shadow: 0 5px 15px rgba(28, 22, 36, .7);

    --v7-success-bg: rgba(25, 135, 84, .18);
    --v7-success-fg: #63d19e;
    --v7-warning-bg: rgba(255, 193, 7, .14);
    --v7-warning-fg: #ffcd39;
    --v7-danger-bg: rgba(220, 53, 69, .18);
    --v7-danger-fg: #ff7b88;
    --v7-info-bg: rgba(13, 202, 240, .14);
    --v7-info-fg: #6edff6;
    --v7-primary-soft: rgba(115, 91, 146, .28);
}

/* Chips de icone do tema: o glifo herda o tamanho do contexto ------------- */
.icon .material-symbols-outlined,
.icon-text .material-symbols-outlined {
    font-size: inherit;
    line-height: 1;
}

/* ==========================================================================
   1. Checkout
   ========================================================================== */

.checkout-layout {
    align-items: flex-start;
}

/* -- Pedidos pendentes ---------------------------------------------------- */
.checkout-pending {
    display: flex;
    gap: .85rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--v7-warning-bg);
    border: 1px solid rgba(255, 193, 7, .35);
    color: var(--v7-text);
}

.checkout-pending-icon {
    font-size: 1.5rem;
    color: var(--v7-warning-fg);
    flex-shrink: 0;
}

.checkout-pending-body {
    flex: 1;
    min-width: 0;
}

.checkout-pending-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .5rem;
}

.checkout-pending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .75rem;
    background: var(--v7-card);
    border: 1px solid var(--v7-line);
    text-decoration: none;
    color: var(--v7-text);
    font-size: .875rem;
}

.checkout-pending-item:hover {
    color: var(--v7-accent-hover);
    border-color: var(--v7-primary-bright);
}

.checkout-pending-resume {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--v7-accent);
    font-weight: 600;
    white-space: nowrap;
}

.checkout-pending-resume .material-symbols-outlined {
    font-size: 1rem;
}

/* -- Card / passos -------------------------------------------------------- */
.checkout-card {
    overflow: hidden;
    background: var(--v7-card);
    border: 1px solid var(--v7-line);
    box-shadow: var(--v7-shadow);
}

.checkout-step {
    padding: 1.25rem 1.25rem 0;
}

/* O passo reusa o chip .icon-text do tema; aqui so desligamos as linhas
   decorativas do h3 global e alinhamos a esquerda. */
.checkout-step-title {
    margin-bottom: 1rem;
}

.checkout-step-title:before,
.checkout-step-title:after {
    display: none;
}

.checkout-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    background: var(--v7-primary);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.checkout-step-optional {
    font-size: .72rem;
    font-weight: 400;
    color: var(--v7-muted);
    margin-left: .35rem;
}

/* -- Valores -------------------------------------------------------------- */
.checkout-amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: .6rem;
    margin-bottom: 1rem;
}

.checkout-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .9rem .5rem;
    border: 2px solid var(--v7-line);
    background: var(--v7-surface);
    color: var(--v7-text);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.checkout-amount-icon {
    font-size: 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--v7-accent);
}

.checkout-amount-value {
    font-weight: 700;
    font-size: .95rem;
}

.checkout-amount:hover {
    border-color: var(--v7-primary-bright);
}

.checkout-amount.is-active {
    border-color: var(--v7-primary-bright);
    background: var(--v7-primary-soft);
    color: #fff;
}

.checkout-amount-custom .form-label {
    color: var(--v7-muted);
}

/* -- "Voce recebe" -------------------------------------------------------- */
.checkout-receive {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: var(--v7-success-bg);
    border: 1px solid rgba(25, 135, 84, .35);
    color: var(--v7-success-fg);
    font-size: .95rem;
}

.checkout-receive strong {
    font-size: 1.1rem;
}

.checkout-receive-wallet {
    font-weight: 600;
}

.checkout-receive .material-symbols-outlined {
    font-size: 1.25rem;
}

/* -- Gateways ------------------------------------------------------------- */
.checkout-gateways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .6rem;
}

.checkout-gateway {
    cursor: pointer;
    margin: 0;
}

.checkout-gateway input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-gateway-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .4rem;
    padding: .9rem .6rem;
    height: 100%;
    border: 2px solid var(--v7-line);
    background: var(--v7-surface);
    transition: border-color .15s ease, background .15s ease;
}

.checkout-gateway input:checked + .checkout-gateway-card {
    border-color: var(--v7-primary-bright);
    background: var(--v7-primary-soft);
}

.checkout-gateway-logo {
    max-height: 28px;
    max-width: 100%;
    width: auto;
}

.checkout-gateway-name {
    font-weight: 600;
    font-size: .82rem;
    color: var(--v7-text);
}

.checkout-gateway-fee {
    font-size: .68rem;
    font-weight: 600;
    padding: .12rem .4rem;
    background: var(--v7-warning-bg);
    color: var(--v7-warning-fg);
    white-space: nowrap;
}

.checkout-gateway-fee.is-free {
    background: var(--v7-success-bg);
    color: var(--v7-success-fg);
}

.checkout-gateway-check {
    position: absolute;
    top: .4rem;
    right: .4rem;
    font-size: 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--v7-accent);
    opacity: 0;
}

.checkout-gateway input:checked + .checkout-gateway-card .checkout-gateway-check {
    opacity: 1;
}

/* -- Campos condicionais -------------------------------------------------- */
.checkout-fields {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-fields .checkout-field[hidden] {
    display: none;
}

/* -- Resumo / total ------------------------------------------------------- */
.checkout-summary {
    padding: 1.25rem;
}

.checkout-total {
    margin-bottom: 1rem;
}

.checkout-total[hidden] {
    display: none;
}

.checkout-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    color: var(--v7-text);
}

.checkout-total-row strong {
    font-size: 1.3rem;
}

.checkout-total-discount {
    margin-bottom: .35rem;
    font-size: .9rem;
    color: var(--v7-success-fg);
}

.checkout-total-discount strong {
    font-size: .95rem;
}

.checkout-total-discount[hidden] {
    display: none;
}

.checkout-total-fee {
    display: block;
    margin-top: .25rem;
    font-size: .8rem;
    color: var(--v7-muted);
}

.checkout-total-fee[hidden] {
    display: none;
}

.checkout-coupon-feedback {
    display: block;
    margin-top: .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--v7-danger-fg);
}

.checkout-coupon-feedback[hidden] {
    display: none;
}

.checkout-continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.checkout-continue-icon {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1;
}

/* -- Transferencia bancaria ---------------------------------------------- */
.checkout-bank {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
    padding: .85rem 1.25rem;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
    text-decoration: none;
    color: var(--v7-text);
    font-weight: 600;
}

.checkout-bank:hover {
    border-color: var(--v7-primary-bright);
    color: var(--v7-accent-hover);
}

.checkout-bank-icon {
    font-size: 1.4rem;
}

.checkout-bank > .material-symbols-outlined:last-child {
    margin-left: auto;
}

/* -- Historico ------------------------------------------------------------ */
.checkout-history-title {
    margin: 0 0 1rem;
}

.checkout-history-title:before,
.checkout-history-title:after {
    display: none;
}

.checkout-history-grid {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.checkout-history-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    background: var(--v7-card);
    border: 1px solid var(--v7-line);
    box-shadow: var(--v7-shadow);
}

.checkout-history-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--v7-sunken);
}

.checkout-history-logo img {
    max-height: 22px;
    max-width: 32px;
    width: auto;
}

.checkout-history-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.checkout-history-body strong {
    color: var(--v7-text);
}

.checkout-history-date {
    font-size: .75rem;
    color: var(--v7-muted);
}

.checkout-history-status {
    flex-shrink: 0;
    align-self: flex-start;
    margin-left: auto;
}

.checkout-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    background: var(--v7-card);
    border: 1px dashed var(--v7-line-soft);
    color: var(--v7-muted);
}

.checkout-history-empty .material-symbols-outlined {
    font-size: 2.5rem;
}

/* -- Rail de gateways (checkout-sidebar) --------------------------------- */
.checkout-sidebar-item {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.checkout-sidebar-logo {
    max-height: 20px;
    max-width: 42px;
    width: auto;
    flex-shrink: 0;
}

.checkout-sidebar-name {
    flex: 1;
    min-width: 0;
}

.checkout-sidebar-chevron {
    font-size: 1.1rem;
    margin-left: auto;
    opacity: .5;
}

/* ==========================================================================
   2. Status de pedido / PIX / mensagens
   ========================================================================== */

.donate-status {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.donate-status-waiting  { background: var(--v7-warning-bg); color: var(--v7-warning-fg); }
.donate-status-analysis,
.donate-status-captured { background: var(--v7-info-bg);    color: var(--v7-info-fg); }
.donate-status-paid     { background: var(--v7-success-bg); color: var(--v7-success-fg); }
.donate-status-refunded,
.donate-status-canceled { background: var(--v7-danger-bg);  color: var(--v7-danger-fg); }

.donate-form-amount {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    padding: .5rem 0 .25rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--v7-text);
    line-height: 1;
}

.donate-gateway-sdk {
    padding: 1.5rem;
}

.donate-pix-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem 1rem;
}

.donate-pix-qr img {
    width: 210px;
    height: 210px;
    display: block;
    background: #fff;
    padding: 6px;
}

.donate-pix-info {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.donate-pix-info-item {
    text-align: center;
}

.donate-pix-info-item-label {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--v7-muted);
    margin-bottom: .2rem;
}

.donate-pix-info-item-value {
    font-weight: 700;
    font-size: 1rem;
    color: var(--v7-text);
}

.donate-pix-steps {
    border-top: 1px solid var(--v7-line);
}

.donate-pix-step {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--v7-line);
}

.donate-pix-step:last-child {
    border-bottom: none;
}

.donate-pix-step-icon {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--v7-accent);
    flex-shrink: 0;
    margin-top: .1rem;
}

.donate-pix-step-text {
    font-size: .85rem;
    color: var(--v7-text);
    line-height: 1.5;
}

.donate-pix-copy {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--v7-sunken);
    border-top: 1px solid var(--v7-line);
}

.donate-pix-copy-code {
    flex: 1;
    font-size: .75rem;
    color: var(--v7-muted);
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: monospace;
}

.donate-pix-after {
    padding: .65rem 1rem;
    font-size: .8rem;
    color: var(--v7-muted);
    text-align: center;
    border-top: 1px solid var(--v7-line);
}

.donate-pix-success,
.donate-pix-error {
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.donate-pix-success-icon,
.donate-pix-error-icon {
    font-size: 3.5rem;
    width: 3.5rem;
    height: 3.5rem;
    display: block;
    margin: 0 auto 1rem;
}

.donate-pix-success-icon { color: var(--v7-success-fg); }
.donate-pix-error-icon   { color: var(--v7-danger-fg); }

.donate-pix-success-title,
.donate-pix-error-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--v7-text);
    margin-bottom: .5rem;
}

.donate-pix-error-title {
    margin-bottom: 1.25rem;
}

.donate-pix-success-text {
    font-size: .9rem;
    color: var(--v7-muted);
    margin-bottom: 1.5rem;
}

/* O tema ja tinha .pixpage; mantemos a borda de destaque quando combinada. */
.card.pixpage {
    border: 1px solid #7b1dc1;
    background: #261235;
}

.donate-messages {
    list-style: none;
    padding: 0;
    margin: 0;
}

.donate-messages li {
    padding: .75rem 0;
    border-bottom: 1px solid var(--v7-line);
}

.donate-messages li:last-child {
    border-bottom: none;
}

.donate-messages-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
    flex-wrap: wrap;
}

.donate-messages-author {
    font-weight: 600;
    font-size: .85rem;
    color: var(--v7-text);
}

.donate-messages-date {
    font-size: .75rem;
    color: var(--v7-muted);
}

.donate-messages-text {
    font-size: .875rem;
    color: var(--v7-text);
    line-height: 1.6;
    width: 100%;
    margin: 0;
}

/* ==========================================================================
   3. Componentes compartilhados do V7
   ========================================================================== */

.feature-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    border: 1px solid var(--v7-line);
    background: var(--v7-card);
    color: var(--v7-text);
    box-shadow: var(--v7-shadow);
    transition: border-color .15s, box-shadow .15s;
    height: 100%;
}

.feature-card:hover {
    border-color: var(--v7-primary-bright);
    color: var(--v7-text);
}

.feature-card:hover .feature-card-arrow {
    opacity: 1;
    color: var(--v7-accent);
    transform: translateX(2px);
}

.feature-card-icon-wrap {
    width: 48px;
    height: 48px;
    background: var(--v7-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-card-icon {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--v7-accent);
}

.feature-card-body {
    flex: 1;
    min-width: 0;
}

.feature-card-title {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .2rem;
}

.feature-card-desc {
    font-size: .8rem;
    color: var(--v7-muted);
    margin: 0;
    line-height: 1.4;
}

.feature-card-arrow {
    font-size: 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--v7-muted);
    opacity: .35;
    flex-shrink: 0;
    transition: opacity .15s, color .15s, transform .15s;
}

/* -- card-stats ----------------------------------------------------------- */
.card-stats {
    display: flex;
    gap: .35rem;
    margin-top: .45rem;
}

.card-stat {
    flex: 1;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
    padding: .4rem .55rem;
}

.card-stat-label {
    display: block;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v7-muted);
    margin-bottom: .2rem;
}

.card-stat-value {
    font-size: .88rem;
    font-weight: 700;
    color: var(--v7-text);
}

.card-stat-value span,
.card-stat-value small {
    font-size: .68rem;
    font-weight: 400;
    color: var(--v7-muted);
}

.card-stat-value--price {
    color: var(--v7-accent);
}

.card-stat--lg .card-stat-value {
    font-size: 1.2rem;
}

.card-stat--lg .card-stat-value span,
.card-stat--lg .card-stat-value small {
    font-size: .8rem;
}

.card-stat-cta {
    display: block;
    margin-top: .3rem;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v7-accent);
    text-decoration: none;
}

.card-stat-cta:hover {
    text-decoration: underline;
    color: var(--v7-accent-hover);
}

/* -- gateway-card --------------------------------------------------------- */
.gateway-card {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--v7-line);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .15s ease;
    height: 100%;
}

.gateway-card:hover {
    border-color: var(--v7-primary-bright);
}

.gateway-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--v7-sunken);
    flex: 1;
}

.gateway-card-logo img {
    max-height: 48px;
    max-width: 100%;
}

.gateway-card-label {
    padding: .6rem;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--v7-text);
    background: var(--v7-card);
    border-top: 1px solid var(--v7-line);
}

/* -- plan-card (VIP / Subscribe) ------------------------------------------ */
.plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
}

@media (max-width: 575px) {
    .plan-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.plan-card {
    border: 2px solid var(--v7-line);
    overflow: hidden;
    background: var(--v7-card);
}

.plan-card-header {
    background: var(--v7-sunken);
    padding: 1.1rem .75rem .9rem;
    border-bottom: 1px solid var(--v7-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.plan-card-icon {
    font-size: 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--v7-muted);
    opacity: .6;
    margin-bottom: .3rem;
    flex-shrink: 0;
}

.plan-card-name {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--v7-text);
    line-height: 1.2;
}

.plan-card-category {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--v7-muted);
    background: var(--v7-sunken);
    padding: .4rem .7rem;
    border-top: 1px solid var(--v7-line);
}

.plan-card-featured .plan-card-category {
    background: var(--v7-primary-soft);
    color: var(--v7-text);
    border-top-color: var(--v7-primary-bright);
}

.plan-card-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan-card-feature {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .7rem;
    font-size: .78rem;
    border-top: 1px solid var(--v7-line);
    line-height: 1.3;
    color: var(--v7-text);
}

.plan-card-feature-icon {
    font-size: .9rem;
    width: .9rem;
    height: .9rem;
    flex-shrink: 0;
}

.plan-card-feature--on .plan-card-feature-icon {
    color: var(--v7-success-fg);
}

.plan-card-feature--off {
    color: var(--v7-muted);
}

.plan-card-feature--off .plan-card-feature-icon {
    color: var(--v7-line-soft);
}

.plan-card-featured {
    border-color: var(--v7-primary-bright);
}

.plan-card-featured .plan-card-header {
    background: var(--v7-primary);
    border-bottom-color: var(--v7-primary-bright);
}

.plan-card-featured .plan-card-icon,
.plan-card-featured .plan-card-name {
    color: #fff;
    opacity: 1;
}

/* -- nav-sidebar-item (rail compartilhado) -------------------------------- */
.nav-sidebar-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .85rem;
    background: var(--v7-surface);
    border: 1px solid var(--v7-line);
    border-bottom: none;
    color: var(--v7-text);
    text-decoration: none;
}

.nav-sidebar-item:last-child {
    border-bottom: 1px solid var(--v7-line);
}

.nav-sidebar-item:hover {
    background: var(--v7-primary-hover);
    color: #fff;
}

.nav-sidebar-item--active {
    background: var(--v7-primary);
    color: #fff;
}

.nav-sidebar-logo {
    max-height: 20px;
    max-width: 42px;
    width: auto;
    flex-shrink: 0;
}

.nav-sidebar-name {
    flex: 1;
    min-width: 0;
}

.nav-sidebar-chevron {
    font-size: 1.1rem;
    margin-left: auto;
    opacity: .5;
}

/* -- page-tabs ------------------------------------------------------------ */
.nav.page-tabs {
    gap: .25rem;
    border-bottom: 1px solid var(--v7-line);
}

.nav.page-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--v7-muted);
    font-weight: 600;
    padding: .55rem .9rem;
}

.nav.page-tabs .nav-link:hover {
    color: var(--v7-accent);
}

.nav.page-tabs .nav-link.active {
    color: var(--v7-text);
    border-bottom-color: var(--v7-primary-bright);
    background: none;
}

/* -- item-rarity-badge ---------------------------------------------------- */
.item-rarity-badge {
    position: absolute;
    top: .35rem;
    left: .35rem;
    padding: .1rem .4rem;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff;
    background: var(--rarity-color, var(--v7-primary));
}
/* ==========================================================================
   4. Rankings — podio e lista
   --------------------------------------------------------------------------
   Mesma licao do HallFame: character_avatar_or_class() devolve imagens de
   tamanhos variados (o fallback e maior que um sprite). As caixas tem tamanho
   FIXO em CSS e a imagem e ajustada por object-fit — nao confiar no width/height
   do HTML.
   ========================================================================== */

.ranking-podium {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: .75rem;
    padding: 1.5rem 1rem 0;
    margin-bottom: 1rem;
    background: linear-gradient(180deg, rgba(115, 91, 146, .18) 0%, var(--v7-card) 62%);
    border: 1px solid var(--v7-line-soft);
    overflow: hidden;
}

/* Brilho difuso atras do 1o lugar, para o centro do podio puxar o olhar. */
.ranking-podium::before {
    content: "";
    position: absolute;
    top: -35%;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(212, 175, 55, .16) 0%, transparent 65%);
    pointer-events: none;
}

.ranking-podium-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 190px;
}

.ranking-podium-slot--first  { order: 2; }
.ranking-podium-slot--second { order: 1; }
.ranking-podium-slot--third  { order: 3; }

.ranking-podium-crown {
    margin-bottom: .35rem;
    font-size: 1.75rem;
    line-height: 1;
    color: #e8c65c;
    filter: drop-shadow(0 2px 6px rgba(212, 175, 55, .55));
}

/* Moldura do personagem.
   O sprite do MU e escuro e o painel tambem — sem um fundo proprio mais claro
   e sem sombra projetada a imagem se dissolve no roxo (era o caso do 3o lugar,
   que ficava praticamente invisivel). A caixa tem tamanho FIXO e a imagem e
   ajustada por object-fit: character_avatar_or_class() devolve tamanhos
   diferentes conforme haja avatar proprio ou so a imagem da classe. */
.ranking-podium-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: .6rem;
    background:
        radial-gradient(circle at 50% 36%, rgba(155, 119, 203, .34) 0%, rgba(33, 26, 43, .96) 74%),
        var(--v7-sunken);
    border: 2px solid var(--v7-line-soft);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .55);
    transition: transform .16s ease, box-shadow .16s ease;
}

/* Cantoneiras: dois filetes no topo dando acabamento de moldura, sem imagem. */
.ranking-podium-avatar::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    border-bottom: 1px solid rgba(0, 0, 0, .35);
    pointer-events: none;
}

.ranking-podium-slot--first .ranking-podium-avatar {
    width: 112px;
    height: 112px;
    border-color: #d4af37;
    box-shadow:
        inset 0 0 22px rgba(0, 0, 0, .5),
        0 0 0 1px rgba(212, 175, 55, .45),
        0 6px 24px rgba(212, 175, 55, .3);
}

.ranking-podium-slot--second .ranking-podium-avatar {
    border-color: #b8c0c8;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .55), 0 4px 16px rgba(184, 192, 200, .16);
}

.ranking-podium-slot--third .ranking-podium-avatar {
    border-color: #c98b52;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .55), 0 4px 16px rgba(201, 139, 82, .18);
}

.ranking-podium-avatar:hover {
    transform: translateY(-3px);
}

/* 86% em vez de 100%: sobra respiro entre a imagem e a borda, senao o sprite
   encosta na moldura e ela deixa de parecer moldura. A sombra projetada
   descola a silhueta do fundo. */
.ranking-podium-avatar img {
    display: block;
    position: relative;
    max-width: 86%;
    max-height: 86%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .65));
}

.ranking-podium-name {
    max-width: 100%;
    margin-bottom: .15rem;
    font-size: .85rem;
    font-weight: 700;
    text-align: center;
    color: var(--v7-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-podium-slot--first .ranking-podium-name {
    font-size: .95rem;
}

.ranking-podium-name a {
    color: inherit;
    text-decoration: none;
}

.ranking-podium-name a:hover {
    color: var(--v7-accent-hover);
}

.ranking-podium-score {
    margin-bottom: .6rem;
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--v7-accent);
}

/* -- Degraus -------------------------------------------------------------- */
.ranking-podium-stand {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* Faixa clara no topo do degrau: da volume sem precisar de imagem. */
.ranking-podium-stand::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, .45);
}

.ranking-podium-stand--first {
    padding: 1.65rem .5rem;
    color: #3a2f14;
    background: linear-gradient(180deg, #e8c65c 0%, #c9a233 100%);
}

.ranking-podium-stand--second {
    padding: 1.15rem .5rem;
    color: #2f3338;
    background: linear-gradient(180deg, #ccd3da 0%, #a8b1ba 100%);
}

.ranking-podium-stand--third {
    padding: .85rem .5rem;
    color: #3b2410;
    background: linear-gradient(180deg, #d79a5f 0%, #b3763f 100%);
}

@media (max-width: 575.98px) {
    .ranking-podium {
        gap: .35rem;
        padding: 1rem .5rem 0;
    }

    .ranking-podium-avatar {
        width: 64px;
        height: 64px;
    }

    .ranking-podium-slot--first .ranking-podium-avatar {
        width: 78px;
        height: 78px;
    }

    .ranking-podium-crown {
        font-size: 1.3rem;
    }

    .ranking-podium-name,
    .ranking-podium-slot--first .ranking-podium-name {
        font-size: .72rem;
    }

    .ranking-podium-stand {
        font-size: 1.25rem;
    }
}

.ranking-empty-icon {
    font-size: 4rem;
    width: 4rem;
    height: 4rem;
    color: var(--v7-accent);
}


/* ==========================================================================
   5. Page Builder (plugin Pages)
   ========================================================================== */

.main-page-builder {
    margin: 0;
}

.page-block {
    padding: 3rem 0;
}

.page-block .container {
    max-width: 1140px;
}

.page-block-hero {
    position: relative;
    padding: 5rem 0;
    background-size: cover;
    background-position: center;
    color: #fff;
}

.page-block-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(37, 31, 41, .55), rgba(37, 31, 41, .9));
}

.page-block-hero-content {
    position: relative;
    text-align: center;
}

.page-block-hero-title {
    font-family: "Poppins", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.page-block-hero-subtitle {
    font-size: 1.05rem;
    color: var(--v7-text);
    margin-bottom: 1.5rem;
}

.page-block-text-title,
.page-block-img-text-title,
.page-block-guides-title,
.page-block-cta-title {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: var(--v7-text);
    margin-bottom: 1rem;
}

.page-block-text-body,
.page-block-img-text-body {
    color: var(--v7-text);
    line-height: 1.7;
}

.page-block-img-text-image img {
    max-width: 100%;
    height: auto;
}

.page-block-guides-card {
    display: block;
    padding: 1.1rem 1.25rem;
    background: var(--v7-card);
    border: 1px solid var(--v7-line);
    box-shadow: var(--v7-shadow);
    text-decoration: none;
    height: 100%;
}

.page-block-guides-card:hover {
    border-color: var(--v7-primary-bright);
}

.page-block-guides-card-title {
    font-weight: 700;
    color: var(--v7-text);
    margin-bottom: .3rem;
}

.page-block-guides-card-desc {
    font-size: .85rem;
    color: var(--v7-muted);
    margin: 0;
}

.page-block-cta {
    background: var(--v7-surface);
    text-align: center;
}

.page-block-cta-subtitle {
    color: var(--v7-muted);
    margin-bottom: 1.25rem;
}

/* ==========================================================================
   6. Plugins que renderizam a view propria (sem override no tema)
   As classes abaixo garantem que essas telas ja saiam com a identidade roxa.
   ========================================================================== */

/* -- Coupon --------------------------------------------------------------- */
.coupon-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--v7-line);
}

.coupon-item:last-of-type {
    border-bottom: none;
}

.coupon-item-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.coupon-item-icon {
    font-size: 1.75rem;
    color: var(--v7-accent);
    flex-shrink: 0;
}

.coupon-item-code {
    font-family: monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--v7-text);
}

.coupon-item-expire {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    color: var(--v7-muted);
}

.coupon-item-expire-icon {
    font-size: .85rem;
}

/* -- Achievements --------------------------------------------------------- */
.achievement-icon-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.achievement-rarity {
    font-size: .7rem;
    color: var(--v7-muted);
}

.achievement-reward-icon {
    font-size: 1.1rem;
    color: var(--v7-accent);
}

.achievement-reward-image {
    max-height: 28px;
    width: auto;
}

/* Vitrine de conquistas do perfil (notify('profile.character')).
   Antes so tinha fundo e borda: sem o grid nem o empilhamento, os tiles saiam
   em bloco, com o icone e a data desalinhados do default. As medidas abaixo
   sao as mesmas do tema default (achievements.scss), so a paleta muda.
   .profile-achievements-item nao existe — o markup emite so as classes abaixo. */
.profile-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .5rem;
}

.profile-achievement {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .25rem;
    padding: .6rem .4rem;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

.profile-achievement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
}

/* Tamanho fixo + object-fit: sem isso um icone fora de proporcao estica o tile
   e quebra o alinhamento da grade inteira. */
.profile-achievement-icon img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
}

.profile-achievement-symbol {
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
    color: var(--v7-warning-fg);
}

.profile-achievement-name {
    font-size: .68rem;
    font-weight: 600;
    color: var(--v7-text);
    line-height: 1.2;
}

.profile-achievement-date {
    font-size: .6rem;
    color: var(--v7-muted);
}

/* -- Subscribe ------------------------------------------------------------ */
.subscribe-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.subscribe-plan {
    background: var(--v7-card);
    border: 2px solid var(--v7-line);
    box-shadow: var(--v7-shadow);
    padding: 1.25rem;
    text-align: center;
}

.subscribe-plan--featured,
.subscribe-plan.is-featured {
    border-color: var(--v7-primary-bright);
}

.subscribe-plan-name {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: var(--v7-text);
    margin-bottom: .35rem;
}

.subscribe-plan-price {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--v7-accent);
    margin-bottom: .75rem;
}

.subscribe-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    color: var(--v7-text);
    font-size: .85rem;
}

.subscribe-plan-features li {
    padding: .35rem 0;
    border-top: 1px solid var(--v7-line);
}

.subscribe-billing,
.subscribe-billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    color: var(--v7-muted);
}

/* -- BattlePass ----------------------------------------------------------- */
.battlepass-header,
.battlepass-track,
.battlepass-tier,
.battlepass-reward {
    background: var(--v7-card);
    border: 1px solid var(--v7-line);
    color: var(--v7-text);
}

.battlepass-tier--unlocked,
.battlepass-reward--unlocked {
    border-color: var(--v7-primary-bright);
}

.battlepass-progress {
    background: var(--v7-sunken);
}

.battlepass-progress-bar {
    background: var(--v7-primary);
}

/* -- HelpDesk: status / prioridade / avaliacao ---------------------------- */
.ticket-status,
.ticket-priority {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ticket-status-pending   { background: var(--v7-warning-bg); color: var(--v7-warning-fg); }
.ticket-status-waiting   { background: var(--v7-info-bg);    color: var(--v7-info-fg); }
.ticket-status-finished  { background: var(--v7-success-bg); color: var(--v7-success-fg); }
.ticket-status-canceled  { background: var(--v7-danger-bg);  color: var(--v7-danger-fg); }

.ticket-priority-low      { background: var(--v7-sunken);     color: var(--v7-muted); }
.ticket-priority-normal   { background: var(--v7-info-bg);    color: var(--v7-info-fg); }
.ticket-priority-high     { background: var(--v7-warning-bg); color: var(--v7-warning-fg); }
.ticket-priority-critical { background: var(--v7-danger-bg);  color: var(--v7-danger-fg); }

.ticket-rating {
    display: inline-flex;
    gap: .1rem;
}

.ticket-rating-star {
    color: var(--v7-line-soft);
}

.ticket-rating-star--active {
    color: #ffcd39;
}

.ticket-rate {
    display: inline-flex;
    gap: .15rem;
}

.ticket-rate-btn {
    background: none;
    border: none;
    padding: 0 .1rem;
    color: var(--v7-line-soft);
    cursor: pointer;
    line-height: 1;
}

.ticket-rate-btn:hover,
.ticket-rate-btn.is-active {
    color: #ffcd39;
}

/* ==========================================================================
   7. AccountMarket - tooltip de personagem e preco
   ========================================================================== */

.market-char-tooltip {
    min-width: 220px;
    padding: .6rem .75rem;
    background: var(--v7-card);
    border: 1px solid var(--v7-line-soft);
    box-shadow: var(--v7-shadow);
    color: var(--v7-text);
    text-align: left;
}

.market-char-tooltip-header {
    display: flex;
    flex-direction: column;
    padding-bottom: .4rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid var(--v7-line);
}

.market-char-tooltip-name {
    font-weight: 700;
    color: var(--v7-accent);
}

.market-char-tooltip-class {
    font-size: .72rem;
    color: var(--v7-muted);
}

.market-char-tooltip-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .6rem;
    font-size: .72rem;
    color: var(--v7-muted);
    margin-bottom: .45rem;
}

.market-char-tooltip-attrs strong {
    color: var(--v7-text);
}

.market-char-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .75rem;
    padding: .12rem 0;
    color: var(--v7-muted);
}

.market-char-tooltip-row strong {
    color: var(--v7-text);
}

.market-account-view-price {
    margin-bottom: .75rem;
}

.market-account-view-price-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--v7-accent);
    line-height: 1.1;
}

.market-account-view-price-name {
    font-size: .8rem;
    color: var(--v7-muted);
}

/* ==========================================================================
   8. ItemMarket — filtros, ordenação, raridade e histórico de preço
   ========================================================================== */

.market-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

.market-filters-clear {
    font-size: .75rem;
    font-weight: 600;
    color: var(--v7-accent);
    text-decoration: none;
    white-space: nowrap;
}

.market-filters-clear:hover {
    color: var(--v7-accent-hover);
    text-decoration: underline;
}

.market-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    margin-left: .35rem;
    background: var(--v7-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.market-filter-flags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .1rem .5rem;
    margin-bottom: .75rem;
}

.market-filter-category .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: 100%;
}

.market-filter-category-icon {
    font-size: 1rem;
    color: var(--v7-accent);
    flex-shrink: 0;
}

.market-filter-category-count {
    margin-left: auto;
    padding: 0 .35rem;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
    color: var(--v7-muted);
    font-size: .68rem;
    font-weight: 600;
}

/* -- Toolbar / ordenação -------------------------------------------------- */
.market-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.market-orders {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.market-orders-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v7-muted);
}

.market-order {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .25rem .6rem;
    background: var(--v7-surface);
    border: 1px solid var(--v7-line);
    color: var(--v7-text);
    font-size: .78rem;
    text-decoration: none;
}

.market-order:hover {
    border-color: var(--v7-primary-bright);
    color: var(--v7-accent-hover);
}

.market-order--active {
    background: var(--v7-primary);
    border-color: var(--v7-primary-bright);
    color: #fff;
}

.market-order .material-symbols-outlined {
    font-size: .95rem;
}

/* -- Raridade ------------------------------------------------------------- */
.product--rarity {
    border-color: var(--rarity-color, var(--v7-line)) !important;
}

.product-image {
    position: relative;
}

.item-rarity-tag {
    display: inline-block;
    margin-top: .25rem;
    padding: .05rem .4rem;
    background: var(--rarity-color, var(--v7-primary));
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* -- Badges do item ------------------------------------------------------- */
.product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-bottom: .35rem;
}

.product-badge {
    padding: .05rem .35rem;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
    color: var(--v7-muted);
}

.product-badge--excellent {
    background: rgba(25, 135, 84, .2);
    border-color: rgba(25, 135, 84, .45);
    color: var(--v7-success-fg);
}

.product-badge--ancient {
    background: rgba(255, 193, 7, .16);
    border-color: rgba(255, 193, 7, .4);
    color: var(--v7-warning-fg);
}

/* -- Miniatura em tabela -------------------------------------------------- */
.market-row-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
    border-left: 3px solid var(--rarity-color, var(--v7-line));
}

.market-row-thumb img {
    max-width: 100%;
    max-height: 100%;
}

/* -- Histórico / sugestão de preço --------------------------------------- */
.market-price-history {
    margin-top: .75rem;
    padding: .75rem;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

.market-price-history[hidden] {
    display: none;
}

.market-price-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.market-price-history-head strong {
    color: var(--v7-text);
    font-size: .9rem;
}

.market-price-chart {
    display: block;
    width: 100%;
    height: 60px;
}

.market-price-chart polyline {
    fill: none;
    stroke: var(--v7-accent);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.market-price-history-hint {
    display: block;
    font-size: .72rem;
    color: var(--v7-muted);
}

/* ==========================================================================
   9. Auction — estados ao vivo e meta do card
   ========================================================================== */

.auction-item {
    transition: border-color .2s ease, opacity .35s ease, transform .35s ease;
}

.auction-item .card {
    border: 2px solid var(--v7-line);
}

.auction-item--warning .card {
    border-color: #ffcd39;
    animation: auction-pulse-warning 1s ease-in-out infinite;
}

.auction-item--danger .card {
    border-color: var(--v7-danger-fg);
    animation: auction-pulse-danger .7s ease-in-out infinite;
}

.auction-item--expired {
    opacity: 0;
    transform: scale(.95);
}

@keyframes auction-pulse-warning {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 205, 57, .45); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 205, 57, 0); }
}

@keyframes auction-pulse-danger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 123, 136, .5); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 123, 136, 0); }
}

.auction-bid-info {
    display: flex;
    gap: .35rem;
    margin: .5rem 0;
}

.auction-bid-info .card-stat {
    flex: 1;
}

.auction-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--v7-line);
    font-size: .78rem;
    color: var(--v7-muted);
}

.auction-item-meta-bidder,
.auction-item-meta-timer {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

.auction-item-meta-icon {
    font-size: .95rem;
    color: var(--v7-accent);
    flex-shrink: 0;
}

.auction-item-meta-timer [data-print-time] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--v7-text);
}

.auction-card-period {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    font-size: .75rem;
    color: var(--v7-muted);
}

.auction-card-period-icon {
    font-size: .95rem;
    color: var(--v7-accent);
}

/* ==========================================================================
   10. Raffle — números, seleção e progresso
   ========================================================================== */

.raffle-progress {
    margin-bottom: 1rem;
}

.raffle-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .35rem;
    font-size: .8rem;
    color: var(--v7-muted);
}

.raffle-progress-info strong {
    color: var(--v7-text);
}

.raffle-progress .progress {
    height: 8px;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

.raffle-progress .progress-bar {
    background: var(--v7-primary);
    transition: width .4s ease;
}

.raffle-number {
    border: 1px solid var(--v7-line);
    background: var(--v7-surface);
    color: var(--v7-text);
}

.raffle-number--available {
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.raffle-number--available:hover {
    border-color: var(--v7-primary-bright);
    color: var(--v7-accent-hover);
}

.raffle-number--selected {
    background: var(--v7-primary);
    border-color: var(--v7-primary-bright);
    color: #fff;
    font-weight: 700;
}

.raffle-number--mine {
    background: rgba(25, 135, 84, .25);
    border-color: rgba(25, 135, 84, .5);
    color: var(--v7-success-fg);
    cursor: not-allowed;
}

.raffle-number--sold {
    background: var(--v7-sunken);
    border-color: var(--v7-line);
    color: var(--v7-muted);
    opacity: .5;
    cursor: not-allowed;
}

.raffle-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.raffle-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.raffle-summary-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v7-muted);
}

.raffle-summary-item strong {
    font-size: 1.3rem;
    color: var(--v7-text);
}

.raffle-summary .raffle-price {
    color: var(--v7-accent);
}

.raffle-card-total {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    font-size: .78rem;
    color: var(--v7-muted);
}

.raffle-card-total .material-symbols-outlined {
    font-size: 1rem;
    color: var(--v7-accent);
}

/* ==========================================================================
   11. Filtros em grid (categoria por icone, classe por imagem)
   ========================================================================== */

.filter-grid {
    display: grid;
    gap: .3rem;
    margin-bottom: 1rem;
}

.filter-grid--category {
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
}

.filter-grid--class {
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
}

.filter-tile {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.filter-tile input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-tile-box {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 100%;
    background: var(--v7-surface);
    border: 1px solid var(--v7-line);
    color: var(--v7-muted);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.filter-tile-box .material-symbols-outlined {
    font-size: 1.15rem;
}

.filter-tile-box img {
    max-width: 78%;
    max-height: 78%;
    object-fit: contain;
    opacity: .55;
    transition: opacity .15s ease;
}

.filter-tile:hover .filter-tile-box {
    border-color: var(--v7-primary-bright);
    color: var(--v7-accent);
}

.filter-tile:hover .filter-tile-box img {
    opacity: .85;
}

.filter-tile--active .filter-tile-box {
    background: var(--v7-primary-soft);
    border-color: var(--v7-primary-bright);
    color: var(--v7-text);
}

.filter-tile--active .filter-tile-box img {
    opacity: 1;
}

/* Foco por teclado — o input real fica oculto, então espelhamos no box. */
.filter-tile input:focus-visible + .filter-tile-box {
    outline: 2px solid var(--v7-accent);
    outline-offset: 1px;
}

.filter-tile-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 15px;
    padding: 0 3px;
    background: var(--v7-primary);
    border: 1px solid var(--v7-card);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

/* ==========================================================================
   12. Complementos dos plugins (Packages, HelpDesk, Achievements, Slides,
       DirectMarket, Streamer, WebShop)
   ========================================================================== */

/* -- Packages ------------------------------------------------------------- */
.package-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: .5rem 0;
}

.package-benefit {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .1rem .4rem;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
    color: var(--v7-text);
    font-size: .7rem;
}

.package-benefit .material-symbols-outlined {
    font-size: .9rem;
    color: var(--v7-accent);
}

.package-progress {
    height: 6px;
    margin-top: .3rem;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

.package--sold-out .card {
    opacity: .65;
}

/* -- HelpDesk: meta do ticket -------------------------------------------- */
.ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    background: var(--v7-card);
    border: 1px solid var(--v7-line);
}

.ticket-meta-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.ticket-meta-label {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v7-muted);
}

.ticket-meta-item strong {
    color: var(--v7-text);
    font-size: .85rem;
}

/* -- Achievements --------------------------------------------------------- */
.achievement-header {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.achievement-title {
    flex: 1;
    min-width: 0;
}

.achievement-stats {
    display: flex;
    gap: 1rem;
    margin-top: .5rem;
    font-size: .72rem;
    color: var(--v7-muted);
}

.achievement-rarity,
.achievement-unlocked {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

.achievement-stats .material-symbols-outlined {
    font-size: .95rem;
    color: var(--v7-accent);
}

.achievement-reward {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.achievement--rescued {
    border-color: rgba(25, 135, 84, .5);
}

.achievement--available {
    border-color: var(--v7-primary-bright);
}

/* -- Slides: links sobre o banner ---------------------------------------- */
.slide-links {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    z-index: 2;
}

/* -- DirectMarket: status ------------------------------------------------- */
.direct-status--pending   { background: var(--v7-sunken);     color: var(--v7-muted); }
.direct-status--waiting   { background: var(--v7-warning-bg); color: var(--v7-warning-fg); }
.direct-status--payed     { background: var(--v7-info-bg);    color: var(--v7-info-fg); }
.direct-status--delivered { background: var(--v7-success-bg); color: var(--v7-success-fg); }
.direct-status--canceled  { background: var(--v7-danger-bg);  color: var(--v7-danger-fg); }

/* -- Streamer: link de convite ------------------------------------------- */
.streamer-invite {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.streamer-invite code {
    padding: .1rem .35rem;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
    color: var(--v7-accent);
    font-size: .72rem;
    word-break: break-all;
}

/* -- WebShop: estoque no detalhe ----------------------------------------- */
.webshop-single-product-sold {
    font-size: .72rem;
    color: var(--v7-muted);
    text-align: center;
    margin-bottom: .25rem;
}


/* ==========================================================================
   14. Harmonizacao da paleta
   --------------------------------------------------------------------------
   O app.css mantem as cores semanticas padrao do Bootstrap (alertas com fundo
   claro, .table-dark cinza, badges saturados). Sobre o fundo roxo escuro do
   tema isso destoa. Aqui as MESMAS custom properties sao redefinidas — como o
   v7.css carrega depois, prevalece sem precisar de !important nem editar o
   app.css.

   Obs.: este tema usa $prefix: '' — as variaveis sao --table-bg, --alert-bg
   etc., SEM o prefixo --bs-.
   ========================================================================== */

/* -- Tokens de raiz que ficaram no padrao Bootstrap ----------------------- */
:root {
    /* --border-color: #dee2e6 (cinza claro) e usado 16x no app.css -> bordas
       claras em tabelas, cards, paginacao e modais sobre o fundo escuro. */
    --border-color: #4c3b62;
    --border-color-translucent: rgba(115, 91, 146, .35);

    /* Alimenta --pagination-color; o <a> global nao usa (o app.css tem
       --link-color-rgb malformado, entao links herdam a cor do contexto). */
    --link-color: #a983dd;
    --link-hover-color: #cda8ff;

    --secondary-color: #9d89b7;
}

/* -- Tabelas -------------------------------------------------------------- */
.table-dark {
    --table-color: #efe3ff;
    --table-bg: #2e2539;
    --table-border-color: #4c3b62;
    --table-striped-bg: #33293f;
    --table-striped-color: #efe3ff;
    --table-active-bg: #3a2f49;
    --table-active-color: #efe3ff;
    --table-hover-bg: #3a2f49;
    --table-hover-color: #efe3ff;
}

.table {
    --table-color: #efe3ff;
    --table-border-color: #4c3b62;
    --table-striped-color: #efe3ff;
    --table-striped-bg: rgba(115, 91, 146, .12);
    --table-hover-color: #efe3ff;
    --table-hover-bg: rgba(115, 91, 146, .22);
    --table-active-color: #efe3ff;
    --table-active-bg: rgba(115, 91, 146, .28);
}

.table > :not(caption) > * > * {
    border-bottom-color: #4c3b62;
}

/* -- Alertas -------------------------------------------------------------- */
.alert-success {
    --alert-color: #63d19e;
    --alert-bg: rgba(25, 135, 84, .18);
    --alert-border-color: rgba(25, 135, 84, .4);
    --alert-link-color: #63d19e;
}

.alert-info {
    --alert-color: #6edff6;
    --alert-bg: rgba(13, 202, 240, .14);
    --alert-border-color: rgba(13, 202, 240, .35);
    --alert-link-color: #6edff6;
}

.alert-warning {
    --alert-color: #ffcd39;
    --alert-bg: rgba(255, 193, 7, .14);
    --alert-border-color: rgba(255, 193, 7, .35);
    --alert-link-color: #ffcd39;
}

.alert-danger {
    --alert-color: #ff7b88;
    --alert-bg: rgba(220, 53, 69, .18);
    --alert-border-color: rgba(220, 53, 69, .4);
    --alert-link-color: #ff7b88;
}

.alert-primary {
    --alert-color: #cda8ff;
    --alert-bg: rgba(115, 91, 146, .28);
    --alert-border-color: #9b77cb;
    --alert-link-color: #cda8ff;
}

.alert-secondary {
    --alert-color: #9d89b7;
    --alert-bg: #2e2539;
    --alert-border-color: #4c3b62;
    --alert-link-color: #9d89b7;
}

/* -- Badges: versao dessaturada p/ fundo escuro -------------------------- */
.badge.bg-success   { background-color: rgba(25, 135, 84, .22) !important;  color: #63d19e; }
.badge.bg-info      { background-color: rgba(13, 202, 240, .18) !important; color: #6edff6; }
.badge.bg-warning   { background-color: rgba(255, 193, 7, .18) !important;  color: #ffcd39; }
.badge.bg-danger    { background-color: rgba(220, 53, 69, .22) !important;  color: #ff7b88; }
.badge.bg-secondary { background-color: #2e2539 !important;                 color: #9d89b7; }
.badge.bg-primary   { background-color: rgba(115, 91, 146, .35) !important; color: #efe3ff; }

/* -- Barras de progresso -------------------------------------------------- */
.progress,
.progress-stacked {
    --progress-bg: #2e2539;
    --progress-bar-color: #fff;
    --progress-bar-bg: #735b96;
    border: 1px solid #4c3b62;
}

.progress-bar.bg-success { background-color: #2f9e6b !important; }
.progress-bar.bg-warning { background-color: #d1a10a !important; }
.progress-bar.bg-danger  { background-color: #b8434f !important; }

/* -- Botao secundario ----------------------------------------------------- */
.btn-secondary {
    --btn-color: #efe3ff;
    --btn-bg: #52406b;
    --btn-border-color: #624c80;
    --btn-hover-color: #fff;
    --btn-hover-bg: #5e4a7b;
    --btn-hover-border-color: #735b96;
    --btn-disabled-color: #9d89b7;
    --btn-disabled-bg: #3a2f49;
    --btn-disabled-border-color: #4c3b62;
}

/* O app.css customizou `.btn-primary` para o roxo do tema (#735b96/#9b77cb) mas
   deixou `.btn-outline-primary` no azul de fabrica do Bootstrap (#0d6efd) — o
   "Consultar precos" ao lado do "Vender item" saia azul. Mesmo tratamento ja
   dado a `.btn-outline-secondary` logo abaixo. */
.btn-outline-primary {
    --btn-color: #a983dd;
    --btn-border-color: #735b96;
    --btn-hover-color: #fff;
    --btn-hover-bg: #735b96;
    --btn-hover-border-color: #9b77cb;
    --btn-active-color: #fff;
    --btn-active-bg: #735b96;
    --btn-active-border-color: #9b77cb;
    --btn-disabled-color: #9d89b7;
    --btn-disabled-border-color: #4c3b62;
    --btn-focus-shadow-rgb: 115, 91, 146;
}

.btn-outline-secondary {
    --btn-color: #9d89b7;
    --btn-border-color: #624c80;
    --btn-hover-color: #fff;
    --btn-hover-bg: #735b96;
    --btn-hover-border-color: #9b77cb;
}

/* -- Formulario: o tema ja pinta fundo/borda dos inputs (#2f263c / #5f4a7c);
      aqui so o anel de foco, que no app.css ainda e o azul do Bootstrap. --- */
.form-control:focus,
.form-select:focus,
select:focus {
    border-color: #9b77cb;
    box-shadow: 0 0 0 .25rem rgba(115, 91, 146, .35);
}

.form-check-input:focus {
    border-color: #9b77cb;
    box-shadow: 0 0 0 .25rem rgba(115, 91, 146, .35);
}

.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 .25rem rgba(115, 91, 146, .35); }
.form-range:focus::-moz-range-thumb     { box-shadow: 0 0 0 .25rem rgba(115, 91, 146, .35); }
.form-range::-webkit-slider-thumb { background-color: #735b96; }
.form-range::-moz-range-thumb     { background-color: #735b96; }

.btn:focus-visible,
.btn-check:focus-visible + .btn {
    box-shadow: 0 0 0 .25rem rgba(115, 91, 146, .35);
}


/* -- Paginacao: herda o novo --border-color; so o estado ativo/hover ------- */
.pagination {
    --pagination-color: #efe3ff;
    --pagination-bg: #392d49;
    --pagination-hover-color: #fff;
    --pagination-hover-bg: #8166a6;
    --pagination-hover-border-color: #9b77cb;
    --pagination-focus-bg: #8166a6;
    --pagination-active-bg: #735b96;
    --pagination-active-border-color: #9b77cb;
    --pagination-disabled-color: #9d89b7;
    --pagination-disabled-bg: #2e2539;
}

/* -- Texto utilitario ----------------------------------------------------- */
.text-muted {
    color: #9d89b7 !important;
}

/* ==========================================================================
   15. Painel da conta — cover, identidade e conexão
   ========================================================================== */

.profile-cover {
    height: 110px;
    background: linear-gradient(135deg, var(--v7-primary) 0%, var(--v7-card) 100%);
    position: relative;
    overflow: hidden;
}

.profile-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(255, 255, 255, .15) 0%, transparent 65%);
}

.profile-cover--guild {
    background: linear-gradient(135deg, #8a3b45 0%, #3a1c22 100%);
}

.account-identity {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}

.account-identity-initial {
    flex-shrink: 0;
    margin-top: -28px;
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    background: var(--v7-primary);
    color: #fff;
    border: 3px solid var(--v7-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    font-size: 2rem;
    font-weight: 800;
}

.account-identity-body {
    flex: 1;
    min-width: 0;
    padding-top: .9rem;
}

.account-identity-name {
    font-family: "Poppins", sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--v7-text);
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: .15rem;
}

.account-identity-sub {
    font-size: .82rem;
    color: var(--v7-muted);
    margin-bottom: .75rem;
}

.account-identity-actions {
    margin-top: .75rem;
}

.account-identity-actions-icon {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    margin-right: .15rem;
}

.account-identity-connection {
    display: flex;
    flex-direction: column;
}

.account-identity-connection-title {
    padding: .55rem 1rem .35rem;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--v7-muted);
}

.account-identity-connection-stats {
    display: flex;
    border-top: 1px solid var(--v7-line);
}

.account-identity-connection-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .45rem 1rem;
    border-right: 1px solid var(--v7-line);
}

.account-identity-connection-stat:last-child {
    border-right: 0;
}

.account-identity-connection-label {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--v7-muted);
    font-weight: 600;
}

.account-identity-connection-value {
    font-size: .82rem;
    font-weight: 500;
    color: var(--v7-text);
}

/* -- Lista label/valor com zebra ------------------------------------------ */
.info-list {
    border: 1px solid var(--v7-line);
    overflow: hidden;
}

.info-list-row {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--v7-line);
}

.info-list-row:last-child {
    border-bottom: 0;
}

.info-list-row:nth-child(even) {
    background: var(--v7-sunken);
}

.info-list-label {
    flex: 0 0 160px;
    font-size: .85rem;
    color: var(--v7-muted);
}

.info-list-value {
    flex: 1;
    font-size: .9rem;
    font-weight: 500;
    color: var(--v7-text);
}

/* ==========================================================================
   16. Card de personagem
   ========================================================================== */

.character-card {
    height: 100%;
    border: 1px solid var(--v7-line);
    overflow: hidden;
    background: var(--v7-card);
    display: flex;
    flex-direction: column;
    box-shadow: var(--v7-shadow);
}

.character-card--active {
    border-color: var(--v7-primary-bright);
}

.character-card--active .character-card-cover {
    background: linear-gradient(135deg, var(--v7-card) 0%, var(--v7-primary) 100%);
}

.character-card-cover {
    height: 52px;
    background: linear-gradient(135deg, var(--v7-primary) 0%, var(--v7-primary-hover) 100%);
    position: relative;
    flex-shrink: 0;
}

.character-card-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .15rem .45rem;
}

.character-card-badge--online {
    background: #2f9e6b;
    color: #fff;
}

.character-card-avatar {
    display: flex;
    justify-content: center;
    margin-top: -28px;
    padding: 0 .5rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.character-card-avatar img {
    max-height: 90px;
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

.character-card-body {
    flex: 1;
    padding: .5rem .75rem .6rem;
    text-align: center;
}

.character-card-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--v7-text);
    margin-bottom: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.character-card-class {
    font-size: .72rem;
    color: var(--v7-muted);
    margin-bottom: .55rem;
}

.character-card-stats {
    display: flex;
    justify-content: center;
    gap: .4rem;
}

.character-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
    padding: .2rem .45rem;
}

.character-card-stat-label {
    font-size: .55rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v7-muted);
    line-height: 1;
    margin-bottom: .1rem;
}

.character-card-stat-value {
    font-size: .8rem;
    font-weight: 700;
    color: var(--v7-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.character-card-footer {
    padding: .6rem .75rem;
    border-top: 1px solid var(--v7-line);
    flex-shrink: 0;
}
/* ==========================================================================
   17. Hall of Fame — complementos do markup original
   --------------------------------------------------------------------------
   As views do HallFame voltaram ao markup do tema V6 (dk-purple_v6), que usa
   classes ja estilizadas pelo app.css: .list-characters, .character-avatar,
   .text-new, .nav-sm, .table-dark. A secao anterior (hallfame-card,
   hallfame-table, hallfame-top/entry/hero) foi removida por inteiro — com o
   markup original ela seria CSS orfao.

   Sobram duas classes do original que nao tem regra em lugar nenhum:
   .data-name (avatar + nome na celula da tabela) e .score.
   ========================================================================== */

/* Alinha avatar e nome na mesma linha da celula. A caixa tem tamanho FIXO:
   character_avatar() e guild_logo() devolvem imagens de tamanhos diferentes e,
   sem limite, a linha da tabela cresce sozinha. */
.data-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.data-name img,
.data-name svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.data-name a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Usada nas variantes "top-player" (um colocado por periodo). */
.score {
    font-size: .82rem;
    color: var(--v7-muted);
}

/* -- Acabamento da tabela (classe hallfame-table, so em top-players) ------
   Complemento ao .table .table-hover .table-striped do tema: nao redefine
   fundo, borda nem zebra — so o que falta.

   Escopado pela classe para nao atingir as outras tabelas do site. As demais
   views do HallFame (top-player, *-group) nao usam tabela. */

/* Pontuacao: tabular-nums faz os digitos ocuparem a mesma largura, entao
   1001 / 850 / 2 alinham de verdade na coluna da direita. */
.hallfame-table td:last-child,
.hallfame-table th:last-child {
    font-variant-numeric: tabular-nums;
}

.hallfame-table td:last-child {
    font-weight: 600;
}

/* Hierarquia do podio: o numero das 3 primeiras linhas ganha a cor da medalha.
   Feito por :nth-child para nao precisar de classe no markup. */
.hallfame-table tbody tr:nth-child(1) td:first-child {
    color: #e8c65c;
    font-weight: 800;
}

.hallfame-table tbody tr:nth-child(2) td:first-child {
    color: #cbd5e1;
    font-weight: 800;
}

.hallfame-table tbody tr:nth-child(3) td:first-child {
    color: #d08b4f;
    font-weight: 800;
}

/* 18 nomes sublinhados na mesma tela viram ruido; o sublinhado volta no hover. */
.hallfame-table .data-name a {
    color: var(--v7-text);
    text-decoration: none;
}

.hallfame-table .data-name a:hover {
    color: var(--v7-accent-hover);
    text-decoration: underline;
}

/* Moldura discreta no avatar: sem ela o sprite escuro some no fundo. */
.hallfame-table .data-name img,
.hallfame-table .data-name svg {
    width: 22px;
    height: 22px;
    padding: 1px;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

/* ==========================================================================
   18. VIP — sobre, dados bancarios e moedas
   ========================================================================== */

.vip-about {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2.5rem;
    margin-top: 2.75rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--v7-line);
}

@media (max-width: 575px) {
    .vip-about { grid-template-columns: 1fr; }
}

@media (min-width: 576px) and (max-width: 767px) {
    .vip-about { grid-template-columns: repeat(2, 1fr); }
}

.vip-about-item {
    text-align: center;
    padding: 0 .5rem;
}

.vip-about-icon {
    font-size: 1.85rem;
    width: 1.85rem;
    height: 1.85rem;
    display: block;
    margin: 0 auto .6rem;
    color: var(--v7-accent);
    opacity: .8;
}

.vip-about-title {
    font-family: "Poppins", sans-serif;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .65rem;
    color: var(--v7-text);
}

.vip-about-text {
    font-size: .85rem;
    color: var(--v7-muted);
    margin: 0;
    line-height: 1.65;
}

.vip-about-text a {
    color: var(--v7-accent);
    text-decoration: none;
}

.vip-about-text a:hover {
    text-decoration: underline;
    color: var(--v7-accent-hover);
}

/* -- Logo do gateway ------------------------------------------------------ */
.vip-gateway-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
}

.vip-gateway-logo img {
    max-height: 40px;
    width: auto;
}

/* -- Dados bancarios ------------------------------------------------------ */
.vip-bank-header {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    background: var(--v7-sunken);
    border-bottom: 1px solid var(--v7-line);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--v7-text);
}

.vip-bank-icon {
    font-size: .95rem;
    width: .95rem;
    height: .95rem;
    color: var(--v7-accent);
    flex-shrink: 0;
}

.vip-bank-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    padding: .4rem .85rem;
    font-size: .82rem;
    border-bottom: 1px solid var(--v7-line);
}

.vip-bank-row:last-child {
    border-bottom: none;
}

.vip-bank-label {
    color: var(--v7-muted);
    flex-shrink: 0;
}

.vip-bank-value {
    font-weight: 500;
    text-align: right;
    color: var(--v7-text);
}

.vip-bank-notes {
    font-size: .8rem;
    color: var(--v7-muted);
}

/* -- Card de moeda -------------------------------------------------------- */
.vip-coin {
    border: 1px solid var(--v7-line);
    background: var(--v7-card);
    box-shadow: var(--v7-shadow);
    padding: 1.5rem 1rem;
    text-align: center;
    height: 100%;
}

.vip-coin-icon {
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
    display: block;
    margin: 0 auto .5rem;
    color: var(--v7-accent);
    opacity: .85;
}

.vip-coin-name {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v7-text);
    margin-bottom: .5rem;
}

.vip-coin-balance {
    font-family: "Poppins", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--v7-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.vip-coin-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v7-muted);
    margin-top: .2rem;
}


/* ==========================================================================
   19. Events — linhas de agenda e countdown
   --------------------------------------------------------------------------
   ATENCAO: o markup da linha NAO vem do tema. O events.js do plugin monta o
   HTML e joga em container.innerHTML. O tema so entrega o container
   ([data-events-area] + .events / .events-{categoria}); todo o resto abaixo
   estiliza classes emitidas pelo JS:

       .events-row  >  .events-row-label  >  .events-row-name
                                          >  .events-row-next
                    >  .events-row-timer  >  .events-row-countdown
                                          >  .events-row-notify

   O JS tambem alterna as classes de estado na .events-row:
       is-soon     (faltam menos de 15 min)
       is-upcoming (faltam menos de 60 min)
       is-live     (evento em andamento; -next vira o rotulo "Live")

   O app.css do dk-purple so tinha .events-event, o nome da era V6 — por isso
   nada aplicava e a linha saia como "Blood Castle18:00" com o contador
   quebrando embaixo.
   ========================================================================== */

.events {
    display: flex;
    flex-direction: column;
}

.events-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .15rem;
    border-bottom: 1px solid var(--v7-line);
}

.events-row:last-child {
    border-bottom: none;
}

.events-row-label {
    flex: 1;
    min-width: 0;
}

.events-row-name {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--v7-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Horario do proximo disparo — fica numa linha propria embaixo do nome. */
.events-row-next {
    display: block;
    font-size: .7rem;
    line-height: 1.3;
    margin-top: .1rem;
    color: var(--v7-muted);
    font-variant-numeric: tabular-nums;
}

.events-row-next:empty {
    display: none;
}

.events-row-timer {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    padding-left: .35rem;
}

/* min-width + tabular-nums: o contador muda a cada segundo e sem isso a
   largura oscila junto com os digitos. */
.events-row-countdown {
    min-width: 5.1rem;
    padding: .22rem .45rem;
    text-align: center;
    font-size: .74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    color: var(--v7-text);
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
    transition: background .3s, color .3s, border-color .3s;
}

.events-row.is-upcoming .events-row-countdown {
    color: #f0c05a;
    background: rgba(240, 192, 90, .12);
    border-color: rgba(240, 192, 90, .34);
}

.events-row.is-soon .events-row-countdown {
    color: #5cd6a0;
    background: rgba(92, 214, 160, .13);
    border-color: rgba(92, 214, 160, .38);
}

.events-row.is-live .events-row-countdown {
    color: #ff8095;
    background: rgba(255, 107, 129, .15);
    border-color: rgba(255, 107, 129, .42);
}

.events-row.is-live .events-row-next {
    color: #ff8095;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.events-row-notify {
    margin: 0;
    min-height: auto;
    padding-left: 2.1em;
}

.events-row-notify .form-check-input {
    width: 1.8em;
    height: .95em;
    margin-top: .15em;
    margin-left: -2.1em;
    cursor: pointer;
}

.event-category-dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    margin-right: .4rem;
    vertical-align: middle;
    border-radius: 50%;
}

/* Respiro quando o painel de eventos esta dentro de um .card (pagina dedicada). */
.card > .events,
.card > .tab-content > .events {
    padding: .3rem .9rem;
}

/* -- Variante compacta da home (spotlight na sidebar) --------------------- */
[data-spotlight] .events-row {
    padding: .38rem .1rem;
}

[data-spotlight] .events-row-name {
    font-size: .78rem;
}

[data-spotlight] .events-row-next {
    display: none;
}

[data-spotlight] .events-row-countdown {
    min-width: 4.85rem;
    padding: .18rem .35rem;
    font-size: .7rem;
}

[data-spotlight] .events-row-notify {
    display: none;
}

/* Abas do spotlight: na largura da sidebar tres categorias nao cabem em uma
   linha; sem isto a terceira quebra e fica centralizada sozinha. */
[data-spotlight] .nav-pills {
    gap: .2rem;
    margin-bottom: .1rem;
}

[data-spotlight] .nav-pills .nav-item {
    flex: 1 1 auto;
}

[data-spotlight] .nav-pills .nav-link {
    padding: .22rem .4rem;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    color: var(--v7-muted);
    background: transparent;
    border: 1px solid transparent;
}

[data-spotlight] .nav-pills .nav-link:hover {
    color: var(--v7-text);
    border-color: var(--v7-line);
}

[data-spotlight] .nav-pills .nav-link.active {
    color: var(--v7-text);
    background: var(--v7-primary);
    border-color: var(--v7-line-soft);
}


/* ==========================================================================
   20. Rankings — tabela alinhada (4o em diante)
   --------------------------------------------------------------------------
   O pedido foi manter country e guild e voltar para tabela, so com o
   alinhamento melhor. A lista em flex do tema default deixa cada linha com
   larguras proprias e nada bate na vertical; aqui as colunas sao reais e
   ficam alinhadas entre si, com cabecalho fixo por coluna.

   Mesma armadilha de avatar das secoes 16/17: character_avatar_or_class()
   devolve imagens de tamanhos diferentes, entao a celula do avatar tem
   tamanho FIXO e a imagem e ajustada por object-fit.
   ========================================================================== */

.ranking-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--v7-text);
}

.ranking-table > thead > tr > th {
    padding: .55rem .7rem;
    font-family: "Poppins", sans-serif;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
    color: var(--v7-muted);
    background: var(--v7-sunken);
    border-bottom: 1px solid var(--v7-line-soft);
}

.ranking-table > tbody > tr > td {
    padding: .45rem .7rem;
    vertical-align: middle;
    font-size: .84rem;
    border-bottom: 1px solid var(--v7-line);
}

.ranking-table > tbody > tr:last-child > td {
    border-bottom: none;
}

.ranking-table > tbody > tr:hover > td {
    background: rgba(115, 91, 146, .16);
}

/* -- Colunas --------------------------------------------------------------- */
.ranking-table-pos {
    width: 3.25rem;
    text-align: center;
    font-weight: 700;
    color: var(--v7-muted);
    font-variant-numeric: tabular-nums;
}

/* Coluna do avatar: largura minima, sem respiro a direita — o nome vem logo
   ao lado e as duas celulas leem como uma so. */
.ranking-table-avatar {
    width: 1%;
    padding-right: 0 !important;
}

.ranking-table-avatar span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

.ranking-table-avatar img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ranking-table-name {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    font-weight: 600;
}

.ranking-table-name a {
    color: inherit;
    text-decoration: none;
}

.ranking-table-name a:hover {
    color: var(--v7-accent-hover);
}

.ranking-table-name img {
    flex-shrink: 0;
}

.ranking-table-muted {
    color: var(--v7-muted);
    font-size: .8rem;
}

.ranking-table-score {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ranking-table-var {
    width: 3rem;
    text-align: center;
    white-space: nowrap;
}

.ranking-table-patent {
    text-align: center;
    white-space: nowrap;
}

/* Badge "ON" compacta, para nao empurrar a linha. */
.ranking-table-online {
    padding: .15rem .35rem;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: #5cd6a0;
    background: rgba(92, 214, 160, .14);
    border: 1px solid rgba(92, 214, 160, .38);
}

.ranking-table-badge {
    display: inline-block;
    padding: .18rem .45rem;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--v7-text);
    background: rgba(115, 91, 146, .35);
    border: 1px solid var(--v7-line-soft);
}

/* O spotlight usa .tab-content2 (classe propria do dk-purple), e nao .tab-content.
   O Bootstrap so esconde painel com o seletor `.tab-content > .tab-pane`, entao
   dentro de .tab-content2 os paineis inativos ficavam apenas com opacity: 0 do
   .fade — invisiveis, porem ainda ocupando altura. Resultado: um vazio enorme no
   card e o conteudo da aba ativa empurrado para o fim dele. */
.tab-content2 > .tab-pane {
    display: none;
}

.tab-content2 > .active {
    display: block;
}


/* ==========================================================================
   21. Countdown — cards lado a lado sobre o banner
   --------------------------------------------------------------------------
   O app.css posiciona o conjunto sobre o banner (.countdowns { position:
   absolute; top: 260px }) — isso e identidade do tema e fica como esta.

   O problema era a regra seguinte: `.countdowns .countdown { position:
   absolute }` SEM left/top. Com um unico countdown ninguem percebia; com dois
   ou mais, todos se ancoram no mesmo ponto e ficam empilhados um por cima do
   outro (foi o "Nova temporada" e o "Castle Siege" sobrepostos). Aqui o card
   volta a participar do fluxo e o container vira uma linha flex.

   A altura tambem era travada em 120px; com titulo + 4 unidades isso corta o
   conteudo dependendo do tamanho da fonte, entao passa a ser minimo.
   ========================================================================== */

.countdowns {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.countdowns .countdown {
    position: relative;
    height: auto;
    min-height: 120px;
}

/* O app.css estiliza `.countdown-timer div`, que continua valendo para o
   .countdown-unit. Falta so separar os dois spans: sem isto o rotulo herda o
   `font-size: 1.3rem` de `.countdown-timer div span` e fica do tamanho do
   numero. */
.countdowns .countdown-timer .countdown-unit-value {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--v7-text);
}

.countdowns .countdown-timer .countdown-unit-label {
    font-size: .52rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .7;
}

.countdowns .countdown-message {
    justify-content: center;
    text-align: center;
    font-size: .85rem;
}

@media (max-width: 767.98px) {
    .countdowns .countdown {
        flex: 1 1 240px;
        width: auto;
        min-width: 0;
    }
}


/* ==========================================================================
   22. Contratos de JS de plugin: Avatar, HelpDesk e LootBox
   --------------------------------------------------------------------------
   As tres views abaixo emitiam markup que o JS do plugin nao reconhecia. Alem
   de corrigir o markup, o tema precisa entregar o CSS destas classes — nenhuma
   delas tinha uma unica regra no dk-purple.
   ========================================================================== */

/* -- Avatar: zona de upload ---------------------------------------------- */
.avatar-upload-input {
    display: none;
}

.avatar-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 1.5rem;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    background: var(--v7-sunken);
    border: 2px dashed var(--v7-line-soft);
    transition: border-color .15s, background .15s;
}

.avatar-upload-zone:hover {
    background: rgba(115, 91, 146, .22);
    border-color: var(--v7-accent);
}

.avatar-upload-zone--has-file {
    padding: 0;
    background: transparent;
    border-style: solid;
    border-color: var(--v7-accent);
}

.avatar-upload-zone--error,
.avatar-upload-zone--error:hover {
    background: rgba(255, 107, 129, .1);
    border-style: solid;
    border-color: #ff6b81;
}

.avatar-upload-preview {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
}

.avatar-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}

.avatar-upload-icon {
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
    color: var(--v7-muted);
    opacity: .55;
}

.avatar-upload-label {
    font-size: .9rem;
    font-weight: 600;
    color: var(--v7-text);
}

.avatar-upload-hint {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--v7-muted);
}

.avatar-upload-error {
    margin-top: .5rem;
    font-size: .8rem;
    color: #ff8095;
}

.avatar-upload-rules {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .65rem;
}

.avatar-upload-rule {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    font-size: .72rem;
    line-height: 1.4;
    color: var(--v7-muted);
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

.avatar-upload-rule-icon {
    flex-shrink: 0;
    font-size: .85rem;
    width: .85rem;
    height: .85rem;
}

.avatar-upload-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
}

/* -- HelpDesk: avaliacao do ticket ---------------------------------------- */
.ticket-rate-stars {
    display: flex;
    gap: .25rem;
}

.ticket-rate-btn {
    padding: 0;
    font-size: 2rem;
    line-height: 1;
    color: var(--v7-line-soft);
    background: none;
    border: none;
    cursor: pointer;
    transition: color .15s ease, transform .1s ease;
}

.ticket-rate-btn--active {
    color: #f0c05a;
    transform: scale(1.1);
}

.ticket-rate-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* -- LootBox: roleta do case ---------------------------------------------- */
/* As duas setas do indicador ficam FORA da janela da esteira. Sem folga
   vertical aqui, a de baixo invadia o bloco de preco logo abaixo — era o que
   sobrepunha "Preco / 100 WCoinC". */
.lootbox-case {
    position: relative;
    padding: 18px 0;
}

.lootbox-case-window {
    position: relative;
    display: flex;
    align-items: center;
    height: 240px;
    overflow: hidden;
}

/* A sombra acompanha a JANELA, nao a caixa toda (que agora tem folga para as
   setas) — senao o degrade lateral vazaria para fora da esteira. */
.lootbox-case-shadow {
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    right: 0;
    z-index: 100;
    overflow: hidden;
    pointer-events: none;
    box-shadow: inset 60px 0 120px -20px var(--v7-bg), inset -60px 0 120px -20px var(--v7-bg);
}

/* A linha cobre exatamente a janela; as setas encostam nas bordas dela por
   fora, dentro do padding da .lootbox-case. */
.lootbox-case-line {
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    z-index: 101;
    background-color: var(--v7-accent);
}

/* Seta de cima: aponta para BAIXO (border-top forma o triangulo). */
.lootbox-case-line::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid var(--v7-accent);
}

/* Seta de baixo: aponta para CIMA (border-bottom forma o triangulo). Antes
   usava bottom: -33px, que a jogava para fora da caixa. */
.lootbox-case-line::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 14px solid var(--v7-accent);
}

.lootbox-case-rotatable {
    display: flex;
    gap: 8px;
    will-change: transform;
}

.lootbox-case-item {
    --lootbox-item-rarity: var(--v7-line-soft);
    position: relative;
    z-index: 100;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    padding: 10px;
    color: #fff;
    /* Card TINGIDO pela raridade, como no tema default: a cor entra como ultima
       camada do background e o degradê escuro fica por cima, leve o bastante
       para a cor continuar legivel.

       O ::before que existia aqui (copia do default) tinha z-index: -1 e, como
       o card cria contexto de empilhamento com z-index: 100, o degradê ficava
       ATRAS do proprio fundo — invisivel. Resolver por camadas de background
       nao depende de empilhamento. */
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 100%),
        var(--lootbox-item-rarity);
    border: 2px solid var(--lootbox-item-rarity);
}

/* ARMADILHA dos sprites do MU: cada item tem dimensao propria — a Great Scythe
   e alta e estreita, as botas sao pequenas e quadradas. Com altura em % o
   calculo depende do pai ter altura definida, e bastava o flex mudar para a
   foice estourar o card.

   Caixa de altura FIXA em px + object-fit: contain resolve sem depender do pai:
   todo sprite ocupa o mesmo espaco visual, seja qual for a proporcao. */
.lootbox-case-item-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px;
    flex: 0 0 auto;
    overflow: hidden;
}

.lootbox-case-item-image img {
    max-width: 88%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.lootbox-case-item-name {
    width: 100%;
    padding: .2rem 0;
    text-align: center;
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================================
   23. Profile — capa, identidade, tiles, barras e guild
   --------------------------------------------------------------------------
   Porte do profile.scss do tema default para a paleta roxa. A view do
   dk-purple era uma tabela do V6; estas classes substituem aquilo pelo mesmo
   vocabulario de componentes do default.

   A paper-doll (.equipments / .mapping / .itemN) NAO entra aqui: aquele markup
   vem do renderer do proprio plugin, com o CSS junto.
   ========================================================================== */

.profile-layout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.profile-layout-main {
    flex: 1;
    min-width: 0;
}

.profile-layout-aside {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .profile-layout {
        flex-direction: column;
    }

    .profile-layout-aside {
        width: 100%;
        overflow-x: auto;
    }
}

/* -- Capa ----------------------------------------------------------------- */
.profile-cover {
    position: relative;
    height: 110px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--v7-primary) 0%, var(--v7-card) 100%);
}

.profile-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(169, 131, 221, .28) 0%, transparent 65%);
}

.profile-cover--guild,
.profile-guild-cover {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--v7-sidebar) 0%, var(--v7-card) 100%);
}

.profile-guild-cover {
    height: 60px;
}

.profile-guild-cover::after,
.profile-cover--guild::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(169, 131, 221, .3) 0%, transparent 60%);
}

/* -- Identidade ----------------------------------------------------------- */
.profile-identity,
.profile-guild-identity {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}

/* Sobe sobre a capa. Caixa de tamanho FIXO: character_avatar_or_class()
   devolve imagens de tamanhos diferentes conforme haja avatar proprio. */
.profile-identity-avatar {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-top: -28px;
    background: var(--v7-sunken);
    border: 3px solid var(--v7-card);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

.profile-identity-avatar img,
.profile-identity-avatar svg {
    display: block;
    max-width: 88%;
    max-height: 88%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.profile-guild-identity-logo {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-top: -22px;
    padding: 3px;
    line-height: 0;
    background: var(--v7-card);
    border: 3px solid var(--v7-card);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}

.profile-guild-identity-logo svg,
.profile-guild-identity-logo img {
    display: block;
}

.profile-identity-body,
.profile-guild-identity-body {
    flex: 1;
    min-width: 0;
    padding-top: .9rem;
}

.profile-identity-name {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: .15rem;
    font-family: "Poppins", sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--v7-text);
}

.profile-guild-identity-name {
    margin-bottom: .15rem;
    font-family: "Poppins", sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--v7-text);
}

.profile-guild-identity-name a {
    color: inherit;
    text-decoration: none;
}

.profile-guild-identity-name a:hover {
    color: var(--v7-accent-hover);
}

.profile-identity-sub,
.profile-guild-identity-sub {
    margin-bottom: .75rem;
    font-size: .82rem;
    color: var(--v7-muted);
}

.profile-identity-sub a,
.profile-guild-identity-sub a {
    color: var(--v7-accent);
    text-decoration: none;
}

.profile-identity-sub a:hover,
.profile-guild-identity-sub a:hover {
    color: var(--v7-accent-hover);
}

/* -- Titulo de secao (fora de card) --------------------------------------- */
.profile-section-title {
    margin-bottom: .4rem;
    padding: 0 .1rem;
    font-family: "Poppins", sans-serif;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--v7-muted);
}

/* -- Grade de tiles ------------------------------------------------------- */
.profile-tile {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: .45rem;
}

.profile-tile--2 {
    grid-template-columns: repeat(2, 1fr);
}

.profile-tile-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .55rem .65rem;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

.profile-tile-item--full {
    grid-column: 1 / -1;
}

.profile-tile-abbr {
    font-family: "Poppins", sans-serif;
    font-size: .58rem;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v7-accent);
}

.profile-tile-value {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--v7-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-tile-value small {
    font-size: .7rem;
    font-weight: 600;
    color: var(--v7-muted);
}

/* -- Barras de HP / MP ---------------------------------------------------- */
.profile-bars {
    background: var(--v7-card);
    border: 1px solid var(--v7-line);
}

.profile-bar {
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--v7-line);
}

.profile-bar:last-child {
    border-bottom: none;
}

.profile-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.profile-bar-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--v7-muted);
}

.profile-bar-values {
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    color: var(--v7-muted);
}

.profile-bars .progress {
    height: 7px;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

.profile-bar-hp {
    background: linear-gradient(90deg, #b7415a 0%, #ff6b81 100%);
}

.profile-bar-mp {
    background: linear-gradient(90deg, #4a5fb0 0%, #7d92e8 100%);
}

/* -- Lista de membros ----------------------------------------------------- */
.profile-member {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--v7-line);
    transition: background .1s ease;
}

.profile-member:last-child {
    border-bottom: none;
}

.profile-member:hover {
    background: rgba(115, 91, 146, .16);
}

.profile-member-initial,
.profile-member-avatar {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

.profile-member-initial {
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--v7-accent);
}

.profile-member-avatar img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Ponto de online no canto da miniatura. */
.profile-member-initial.is-online::after,
.profile-member-avatar.is-online::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 10px;
    height: 10px;
    background: #5cd6a0;
    border: 2px solid var(--v7-card);
    border-radius: 50%;
}

.profile-member-body {
    flex: 1;
    min-width: 0;
}

.profile-member-name {
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--v7-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-member-name a {
    color: inherit;
    text-decoration: none;
}

.profile-member-name a:hover {
    color: var(--v7-accent-hover);
}

.profile-member-class {
    font-size: .75rem;
    line-height: 1.3;
    color: var(--v7-muted);
}

.profile-member-stats {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}

.profile-member-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    padding: .2rem .5rem;
    text-align: center;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

.profile-member-chip-label {
    font-size: .55rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--v7-muted);
}

.profile-member-chip-value {
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--v7-text);
}


/* ==========================================================================
   22. ItemMarket — card do item com destaque de raridade
   --------------------------------------------------------------------------
   O app.css ja estiliza `.market.items .product-*` (era V6). As regras abaixo
   usam o MESMO escopo para poder sobrepor, ja que o v7.css carrega depois:

     .product-name   -> era nowrap + ellipsis (uma linha); vira clamp de 2
     .product-expire -> era position:absolute ancorado no .card-body; como o
                        chip mudou para o rodape, volta a ser estatico
     .product-price span -> pintava TODO span de vermelho, inclusive o nome da
                        moeda; agora so o valor recebe destaque

   Armadilha de imagem (a mesma do podio e do HallFame): o sprite do MU e
   escuro e o card tambem. A caixa tem tamanho fixo, fundo proprio mais claro e
   sombra projetada na imagem — sem isso itens como o Bone Blade somem no fundo.
   ========================================================================== */

.market.items .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.market.items .product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--v7-shadow);
}

/* Faixa de raridade no topo, usando a var que a view emite no elemento pai. */
.market.items .product--rarity::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    background: var(--rarity-color, var(--v7-primary));
}

.market.items .product--rarity:hover {
    border-color: var(--rarity-color, var(--v7-line-soft)) !important;
    box-shadow: 0 6px 20px -6px var(--rarity-color, var(--v7-shadow));
}

/* -- Nome ----------------------------------------------------------------- */
.market.items .product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    min-height: 2.6em;
    line-height: 1.3;
    font-size: .82rem;
    font-weight: 600;
}

/* -- Imagem --------------------------------------------------------------- */
.market.items .product-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 118px;
    margin-bottom: .75rem;
    flex-grow: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(155, 119, 203, .26) 0%, rgba(33, 26, 43, .96) 72%),
        var(--v7-sunken);
    border: 1px solid var(--v7-line);
    box-shadow: inset 0 0 16px rgba(0, 0, 0, .55);
}

.market.items .product-image img {
    display: block;
    max-width: 82%;
    max-height: 88px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .65));
}

/* -- Badges sobre a imagem ------------------------------------------------ */
.market.items .product-badges {
    position: absolute;
    top: .3rem;
    left: .3rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .18rem;
    margin-bottom: 0;
}

.market.items .item-rarity-badge {
    position: absolute;
    right: .3rem;
    bottom: .3rem;
    z-index: 1;
    padding: .05rem .35rem;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--rarity-color, var(--v7-primary));
    border: none;
}

.product-badge--normal {
    background: rgba(115, 91, 146, .28);
    border-color: var(--v7-line-soft);
    color: var(--v7-text);
}

/* -- Preco ---------------------------------------------------------------- */
/*
   O bloco do preco passou a usar card-stat / card-stat-label /
   card-stat-value--price (mesmo padrao do tema default), que ja tem regra na
   secao 3. As regras de .product-price / .product-price-value que existiam aqui
   foram removidas junto — sem aquele markup, virariam CSS orfao.

   Sobra a moeda: o seletor perdeu o ancestral .product-price, entao passa a ser
   escopado so por .market.items. Continua necessario para neutralizar o
   `.market.items .product-price span { color: #dc3545 }` do app.css.
*/
.market.items .product-price-coin {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--v7-muted);
}

/* O preco fica sozinho no card: ocupa a largura toda em vez de meia. */
.market.items .card-stats {
    margin-bottom: 0;
}

/* -- Rodape --------------------------------------------------------------- */
.market.items .product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* Estatico: o chip saiu do .card-body, onde o app.css o posicionava absoluto. */
.market.items .product-expire {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .66rem;
    line-height: 1.2;
    color: var(--v7-muted);
    white-space: nowrap;
}

.market.items .product-expire:empty {
    display: none;
}

.market.items .product-expire-icon {
    font-size: .85rem;
}

.market.items .product-buy {
    flex-shrink: 0;
}

.market.items .product-buy.disabled {
    opacity: .45;
    pointer-events: none;
}


/* ==========================================================================
   23. Filtros do market — resposta ao clique e contencao do TomSelect
   --------------------------------------------------------------------------
   1) CLASSE e CATEGORIA "nao selecionavam": o destaque vinha SO de
      `.filter-tile--active`, classe aplicada pelo PHP no carregamento da
      pagina. O input real e visualmente oculto (opacity: 0), entao clicar
      marcava o checkbox e nada mudava na tela — parecia que o clique nao
      pegava. As regras :checked abaixo dao o retorno imediato, espelhando
      exatamente o visual de --active.

   2) O select EXCELLENT ficava ilegivel: com rotulos longos, tanto as chips
      quanto as opcoes do dropdown estouravam a largura da barra lateral e o
      texto quebrava em colunas estreitas. Aqui as duas coisas sao contidas em
      uma linha com reticencias.
   ========================================================================== */

/* -- 1) Retorno imediato ao clicar ---------------------------------------- */
.filter-tile input:checked + .filter-tile-box {
    background: var(--v7-primary-soft);
    border-color: var(--v7-primary-bright);
    color: var(--v7-text);
}

.filter-tile input:checked + .filter-tile-box img {
    opacity: 1;
}

/* Marca de confirmacao no canto, para o estado ficar obvio mesmo em icone
   monocromatico. */
.filter-tile input:checked + .filter-tile-box::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v7-accent);
}

.filter-tile-box {
    position: relative;
}

/* -- 2) EXCELLENT e SOCKETS: grupo de checkboxes -------------------------- */
/*
   Os dois deixaram de ser <select multiple> com TomSelect (o controle nunca
   coube na largura da barra: as chips eram espremidas pelo flex a poucos
   pixels). Passaram ao mesmo grupo de ATRIBUTOS. As regras de .ts-* que
   existiam aqui foram removidas junto — sem TomSelect no painel, virariam CSS
   orfao.
*/

/* Os rotulos de EXCELLENT sao longos ("Add Monster Amount Drop Rate"), entao
   a variante empilha em coluna unica e limita a altura. */
.market-filter-flags--stack {
    grid-template-columns: 1fr;
    max-height: 190px;
    overflow-y: auto;
    padding-right: .2rem;
}

.market-filter-flags .form-check {
    min-width: 0;
    margin-bottom: 0;
}

.market-filter-flags .form-check-label {
    display: block;
    font-size: .78rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.market-filter-flags--stack::-webkit-scrollbar {
    width: 6px;
}

.market-filter-flags--stack::-webkit-scrollbar-thumb {
    background: var(--v7-line-soft);
}

.market-filter-flags--stack::-webkit-scrollbar-track {
    background: var(--v7-sunken);
}


/* ==========================================================================
   24. WebShop — card do produto
   --------------------------------------------------------------------------
   Mesmos defeitos do card do ItemMarket, herdados do app.css (era V6):

     .webshop-product-image  -> 80px de altura, sem fundo: o sprite escuro do MU
                                se dissolvia no card escuro (o Bronze Helm quase
                                nao aparecia)
     .webshop-product-price span -> pintava TODO span de vermelho (#dc3545)
     .webshop-product-sold   -> position: absolute ancorado no .card-body
     .webshop-product-name / .quantity -> classes SEM nenhuma regra nos dois CSS

   Nao ha tooltip de item aqui: o ShopItem expoe section/index, nao o hex que o
   tooltip_url() precisa. Por isso o card nao emite data-tooltip.
   ========================================================================== */

.webshop-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.webshop-product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--v7-shadow);
}

/* Faixa de raridade no topo — o ShopItem chega com rarity injetada. */
.webshop-product--rarity::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    background: var(--rarity-color, var(--v7-primary));
}

.webshop-product--rarity:hover {
    border-color: var(--rarity-color, var(--v7-line-soft));
    box-shadow: 0 6px 20px -6px var(--rarity-color, var(--v7-shadow));
}

.webshop-product--sold {
    opacity: .62;
}

.webshop-product--sold .webshop-product-image img {
    filter: grayscale(1) drop-shadow(0 3px 6px rgba(0, 0, 0, .65));
}

/* -- Nome ----------------------------------------------------------------- */
.webshop-product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    line-height: 1.3;
    font-size: .82rem;
    font-weight: 600;
}

/* Multiplicador de quantidade (ex.: "10x") — a classe existia sem nenhuma regra. */
.webshop-product-name .quantity {
    display: inline-block;
    margin-right: .25rem;
    padding: 0 .3rem;
    font-size: .68rem;
    font-weight: 800;
    color: #fff;
    background: var(--v7-primary);
    border: 1px solid var(--v7-line-soft);
}

/* -- Imagem --------------------------------------------------------------- */
.webshop-product-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 118px;
    margin-bottom: .75rem;
    background:
        radial-gradient(circle at 50% 42%, rgba(155, 119, 203, .26) 0%, rgba(33, 26, 43, .96) 72%),
        var(--v7-sunken);
    border: 1px solid var(--v7-line);
    box-shadow: inset 0 0 16px rgba(0, 0, 0, .55);
}

.webshop-product-image img {
    display: block;
    max-width: 82%;
    max-height: 88px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .65));
}

.webshop-product-image .item-rarity-badge {
    position: absolute;
    right: .3rem;
    bottom: .3rem;
    padding: .05rem .35rem;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--rarity-color, var(--v7-primary));
    border: none;
}

/* -- Preco ---------------------------------------------------------------- */
/*
   O preco passou a usar card-stat / card-stat-label / card-stat-value--price
   (secao 26), o mesmo bloco rotulado do tema default: antes o card mostrava o
   numero solto, sem dizer que aquilo era o preco. As regras de
   .webshop-product-price* que existiam aqui foram removidas junto — sem aquele
   markup, virariam CSS orfao.
*/
.webshop-products .card-stats {
    margin-bottom: 0;
}

/* -- Rodape: vendidos + estoque ------------------------------------------- */
.webshop-product-footer {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.webshop-product-stock {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

/* Estatico: saiu do .card-body, onde o app.css o posicionava absoluto. */
.webshop-product-sold {
    position: static;
    font-size: .66rem;
    line-height: 1.2;
    text-align: center;
    color: var(--v7-muted);
}

.webshop-product-stock-bar {
    display: block;
    height: 4px;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
    overflow: hidden;
}

.webshop-product-stock-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--v7-primary) 0%, var(--v7-accent) 100%);
}

/* -- Categoria sem icone: abreviacao no lugar do glifo generico ----------- */
/*
   $categoryIcons nao chega nesta instalacao, e o fallback fixo deixava as 17
   categorias com o mesmo glifo. A abreviacao de 3 letras do rotulo diferencia
   as pilulas; o nome completo fica no title do <label>.
*/
.filter-tile-abbr {
    font-family: "Poppins", sans-serif;
    font-size: .6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--v7-muted);
    transition: color .15s ease;
}

.filter-tile:hover .filter-tile-abbr,
.filter-tile--active .filter-tile-abbr,
.filter-tile input:checked + .filter-tile-box .filter-tile-abbr {
    color: var(--v7-text);
}

/* Categoria sem nenhum item: atenua, como o .market-category-pill--empty
   do tema default. */
.filter-tile--empty .filter-tile-box {
    opacity: .4;
}

.filter-tile--empty:hover .filter-tile-box {
    opacity: .75;
}

/* -- Icone de categoria: SVG do core em fundo escuro ---------------------- */
/*
   Os SVGs de resources/images/item-category/ nao tem atributo fill — herdam
   preto, porque o tema default os usa sobre fundo claro. No tile escuro do
   dk-purple ficariam invisiveis, entao sao pintados de branco por filtro.

   Escopado em .filter-grid--category para nao atingir o filtro de CLASSE, que
   usa PNGs coloridos dos personagens e seria arruinado pelo mesmo filtro.
*/
.filter-grid--category .filter-tile-box img {
    filter: brightness(0) invert(1);
    opacity: .5;
}

.filter-grid--category .filter-tile:hover .filter-tile-box img,
.filter-grid--category .filter-tile--active .filter-tile-box img,
.filter-grid--category .filter-tile input:checked + .filter-tile-box img {
    opacity: 1;
}


/* ==========================================================================
   25. Market — consulta de precos e detalhe do item
   --------------------------------------------------------------------------
   As views `ItemMarket/prices.phtml` e `show.phtml` NAO existem no dk-purple: o
   renderer cai na view do proprio plugin, entao as paginas funcionam com os
   dados certos — mas saiam sem estilo nenhum, porque 102 das 115 classes de
   market.scss nao tinham regra aqui.

   Sobrescrever essas views nao e viavel: sao ionCube, o encoder nao deixa
   string legivel (testado) e nao ha secao no update-theme.md, entao cada
   variavel seria chute. Este porte resolve o visual sem tocar no contrato.

   Traducao da paleta: $primary -> --v7-primary, $body-color -> --v7-text,
   $text-muted -> --v7-muted, $border-color -> --v7-line, $gray-100 ->
   --v7-sunken, border-radius -> 0 (convencao do tema).
   ========================================================================== */

/* -- Card de produto na listagem de precos -------------------------------- */
.market-product {
    height: 100%;
}

.market-product .card {
    height: 100%;
}

.market-product-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.market-product-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: .75rem;
    overflow: hidden;
    border-bottom: 1px solid var(--v7-line);
    background:
        radial-gradient(circle at 50% 40%, rgba(155, 119, 203, .26) 0%, rgba(33, 26, 43, .96) 72%),
        var(--v7-sunken);
}

/* Quando o item tem raridade, ela tinge a moldura em vez de virar fundo chapado. */
.market-product-image[style*="--rarity-color"],
.market-product[style*="--rarity-color"] .market-product-image {
    border-bottom-color: var(--rarity-color, var(--v7-line));
    box-shadow: inset 0 -2px 0 -1px var(--rarity-color, transparent);
}

.market-product-image img {
    max-height: 80px;
    width: auto;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .65));
}

.market-product-expire {
    position: absolute;
    top: .3rem;
    right: .3rem;
    padding: .1rem .32rem;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    background: rgba(0, 0, 0, .55);
}

.market-product-name {
    margin-bottom: .25rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--v7-text);
}

.market-product-name a {
    color: inherit;
    text-decoration: none;
}

.market-product-name a:hover {
    color: var(--v7-accent-hover);
}

.market-product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-bottom: .25rem;
}

/* -- Badges de atributo ---------------------------------------------------
   As cores sao convencao do MU (excellent verde, ancient azul, socket roxo,
   harmony amarelo, luck/skill azul claro, refine malva). O default usa tints
   claros porque o fundo dele e claro; aqui viram fundos translucidos com texto
   vivo, para manter a leitura sobre o roxo escuro. */
.market-badge {
    display: inline-block;
    padding: .1rem .35rem;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .03em;
    border: 1px solid transparent;
}

.market-badge-normal {
    color: var(--v7-muted);
    background: rgba(157, 137, 183, .16);
    border-color: rgba(157, 137, 183, .34);
}

.market-badge-excellent {
    color: #5ef2a0;
    background: rgba(25, 255, 128, .14);
    border-color: rgba(25, 255, 128, .38);
}

.market-badge-ancient {
    color: #7dd3fc;
    background: rgba(0, 102, 255, .2);
    border-color: rgba(0, 102, 255, .45);
}

.market-badge-socket {
    color: #d8b4fe;
    background: rgba(178, 102, 255, .18);
    border-color: rgba(178, 102, 255, .42);
}

.market-badge-harmony {
    color: #fadf5a;
    background: rgba(250, 222, 9, .14);
    border-color: rgba(250, 222, 9, .38);
}

.market-badge-luck,
.market-badge-skill {
    color: #a8c8ff;
    background: rgba(128, 178, 255, .16);
    border-color: rgba(128, 178, 255, .4);
}

.market-badge-refine {
    color: #e0b4e1;
    background: rgba(174, 128, 175, .18);
    border-color: rgba(174, 128, 175, .42);
}

/* -- Filtros --------------------------------------------------------------- */
.market-filter-icon {
    font-size: 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
}

.market-filter-heading {
    display: block;
    margin-bottom: .5rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--v7-muted);
}

.market-filter-range-value {
    width: 28px;
    flex-shrink: 0;
}

.market-order-select,
.market-account-tabs {
    overflow-x: auto;
}

/* -- Estado vazio ---------------------------------------------------------- */
.market-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--v7-muted);
}

.market-empty p {
    margin: 0;
}

.market-empty-icon {
    display: block;
    margin: 0 auto 1rem;
    font-size: 4rem;
    width: 4rem;
    height: 4rem;
    color: var(--v7-primary-bright);
}

/* -- Historico de preco (aparece no formulario de venda) ------------------- */
.market-price-history {
    padding: .75rem .9rem;
    margin-bottom: 1rem;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

.market-price-history-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}

.market-price-history-suggestion-label {
    font-size: .9rem;
    font-weight: 700;
    color: var(--v7-text);
}

.market-price-history-use {
    padding: .2rem .6rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--v7-accent);
    background: transparent;
    border: 1px solid var(--v7-primary-bright);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.market-price-history-use:hover {
    color: #fff;
    background: var(--v7-primary);
}

.market-price-history-hint {
    margin-top: .15rem;
    font-size: .72rem;
    color: var(--v7-muted);
}

.market-price-history-toggle {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .5rem 0;
    font-size: .78rem;
    color: var(--v7-muted);
    cursor: pointer;
}

.market-price-history-chart {
    display: block;
    width: 100%;
    height: 60px;
}

.market-price-history-chart polyline {
    fill: none;
    stroke: var(--v7-accent);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* -- Detalhe do item ------------------------------------------------------- */
.market-item-rows {
    margin: 0;
}

.market-item-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .4rem 0;
    font-size: .84rem;
    border-bottom: 1px solid var(--v7-line);
}

.market-item-row:last-child {
    border-bottom: none;
}

.market-item-price-diff {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .5rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--v7-muted);
}

.market-item-price-diff-below {
    color: #5cd6a0;
}

.market-item-price-diff-above {
    color: #ff8095;
}

.market-item-price-diff-icon {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

.market-item-section {
    margin-bottom: 2.25rem;
}

.market-item-section:last-child {
    margin-bottom: 0;
}

.market-item-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    margin-bottom: .85rem;
}

.market-item-hint {
    font-size: .78rem;
    font-weight: 400;
    color: var(--v7-muted);
}

.market-item-hint a {
    color: inherit;
    text-decoration: underline;
}

.market-item-hint a:hover {
    color: var(--v7-accent-hover);
}

.market-item-details {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.market-item-details-rows {
    flex: 1;
    min-width: 220px;
    margin: 0;
}

.market-item-info {
    flex: 0 0 auto;
    min-width: 240px;
    max-width: 100%;
    padding: 1rem 1.25rem;
    background: var(--v7-card);
    border: 1px solid var(--v7-line);
}

.market-item-info .item-info {
    font-size: .8rem;
}

.market-item-classes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .3rem;
}

.market-item-classes img {
    width: 26px;
    height: 26px;
}

.market-item-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.market-item-stat {
    display: flex;
    flex-direction: column;
    flex: 1 1 140px;
    padding: .6rem .9rem;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

.market-item-stat-label {
    margin-bottom: .15rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v7-muted);
}

.market-item-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--v7-text);
}

.market-item-stat-value-price {
    color: var(--v7-accent);
}

.market-item-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--v7-muted);
}

.market-item-chart-wrap {
    position: relative;
}

.market-item-chart {
    display: block;
    width: 100%;
}

.market-item-chart-line {
    fill: none;
    stroke: var(--v7-accent);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.market-item-chart-area {
    fill: rgba(169, 131, 221, .18);
    stroke: none;
}

.market-item-chart-grid {
    stroke: var(--v7-line);
    stroke-width: 1;
}

.market-item-chart-point {
    fill: var(--v7-accent);
}

.market-item-chart-label {
    font-size: .68rem;
    fill: var(--v7-muted);
}

.market-item-chart-tooltip {
    position: absolute;
    padding: .25rem .5rem;
    font-size: .72rem;
    color: var(--v7-text);
    background: var(--v7-card);
    border: 1px solid var(--v7-line-soft);
    pointer-events: none;
}

/* -- Pagina de consulta de precos ------------------------------------------ */
.market-prices-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.75rem;
}

.market-prices-search .form-control {
    flex: 1;
}

.market-prices-suggestion {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.market-prices-suggestion:hover .market-product-name {
    color: var(--v7-accent-hover);
}

.market-prices-suggestion-count {
    font-size: .72rem;
    color: var(--v7-muted);
}

.market-prices-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

.market-prices-change {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--v7-muted);
    text-decoration: none;
}

.market-prices-change:hover {
    color: var(--v7-accent-hover);
}

.market-prices-change-icon {
    font-size: 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
}

.market-prices-tabs {
    margin-bottom: 1rem;
}

.market-prices-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.market-prices-count {
    font-size: .68rem;
    font-weight: 600;
    color: var(--v7-muted);
}

.market-prices-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .market-item-details {
        flex-direction: column;
    }
}

/* Acoes da barra do market: "Vender item" e "Consultar precos" ficam juntos a
   esquerda; o .market-toolbar usa space-between, entao sem este agrupador os
   dois botoes iriam para pontas opostas. */
.market-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}


/* ==========================================================================
   26. Rotulo de preco nos cards
   --------------------------------------------------------------------------
   O tema default rotula todo preco de card ("PRECO" acima do numero, dentro de
   uma caixinha). Varios cards do dk-purple mostravam so o numero solto: no
   WebShop, o "400" do Bronze Helm podia ser preco, estoque ou nivel.

   Todos passaram a chamar views/partials/price-stat.phtml, que emite o mesmo
   card-stat / card-stat-label / card-stat-value--price ja definido na secao 3.
   Aqui ficam so os acertos de espacamento por contexto e uma excecao.
   ========================================================================== */

/* EXCECAO: `.card-stat-value span` encolhe e apaga o texto (e o que deixa o
   nome da moeda discreto). No detalhe do produto o valor em si e um <span>
   (#item-price, exigido pelo shop-product.js), entao ele precisa ficar de fora
   da regra ou o preco sairia menor que a moeda ao lado. */
.card-stat-value #item-price {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* O preco ocupa o card inteiro nestes contextos — nao divide a linha com outro
   card-stat, entao nao precisa da folga lateral do flex. */
.profile-block-packages .card-stats,
.market.accounts .card-stats,
.packages .package .card-stats,
.loot-boxes .card-stats {
    margin-bottom: 0;
}

/* Na Raffle e na LootBox o preco abre o rodape do card; o margin-top padrao do
   card-stats somaria ao padding do .card-footer. */
.card-footer > .card-stats:first-child {
    margin-top: 0;
    margin-bottom: 0;
}

/* Os `.price` do app.css tinham margin-top: 1rem para descolar da imagem; o
   card-stats nasce com .45rem, que aperta demais nestes tres cards. */
.profile-block-packages .card-stats,
.market.accounts .card-stats,
.packages .package .card-stats {
    margin-top: 1rem;
}

/* Quando ha barra de "vendidos" logo abaixo, o preco precisa respirar —
   equivale ao `.packages .package.has-max-sold .price` do app.css. */
.packages .package.has-max-sold .card-stats {
    margin-bottom: 1rem;
}


/* ==========================================================================
   27. Pagina de informacoes do servidor
   --------------------------------------------------------------------------
   A view estava na estrutura da V6 (cinco tabelas). Passou para os componentes
   da V7 — server-rates, server-stat, server-specs, server-event-pill,
   server-commands — e NENHUM deles tinha regra no dk-purple: sem este bloco a
   pagina sairia como texto solto empilhado.

   As medidas vieram de resources/sass/server-info.scss do tema default; so a
   paleta muda (e o border-radius, que no dk-purple e zero).
   ========================================================================== */

/* Titulo de secao: `.title` nao tem regra em nenhum dos dois temas — e so um
   h3. Aqui ganha o tratamento dos demais cabecalhos do dk-purple, mas ESCOPADO
   em .server-info: a classe tambem aparece em h1 e h2 de outras paginas
   (Vote Reward, Castle Siege, Raffle...), e um tamanho fixo os encolheria. */
.server-info .title {
    font-family: "Poppins", sans-serif;
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v7-text);
    padding-bottom: .5rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid var(--v7-line);
}

/* -- Faixa de rates ------------------------------------------------------- */
.server-rates {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--v7-primary);
    border: 1px solid var(--v7-line-soft);
    overflow: hidden;
    margin-bottom: 2rem;
}

@media (max-width: 575px) {
    .server-rates {
        grid-template-columns: repeat(2, 1fr);
    }
}

.server-rate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .15);
}

.server-rate:last-child {
    border-right: none;
}

@media (max-width: 575px) {
    .server-rate {
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .server-rate:nth-child(2) { border-right: none; }
    .server-rate:nth-child(3),
    .server-rate:nth-child(4) { border-bottom: none; }
}

.server-rate-icon {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    color: rgba(255, 255, 255, .6);
    margin-bottom: .3rem;
}

.server-rate-value {
    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.server-rate-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .65);
    margin-top: .2rem;
}

/* -- Grade de estatisticas ------------------------------------------------ */
.server-stat {
    border: 1px solid var(--v7-line);
    background: var(--v7-card);
    padding: 1rem .75rem;
    text-align: center;
    height: 100%;
}

.server-stat-icon {
    font-size: 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--v7-accent);
    opacity: .55;
    display: block;
    margin: 0 auto .3rem;
}

.server-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--v7-text);
}

.server-stat-value a {
    color: inherit;
    text-decoration: none;
}

.server-stat-value a:hover {
    color: var(--v7-accent-hover);
}

/* Nome de guild e data de confronto nao cabem no corpo de 1.35rem. */
.server-stat-value-sm {
    font-size: .9rem;
}

.server-stat-label {
    font-size: .65rem;
    color: var(--v7-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .2rem;
    line-height: 1.3;
}

/* -- Especificacoes (dl) -------------------------------------------------- */
.server-specs {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.server-spec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--v7-line);
    font-size: .875rem;
}

.server-spec:last-child {
    border-bottom: none;
}

.server-spec dt {
    font-weight: 400;
    color: var(--v7-muted);
    flex-shrink: 0;
}

.server-spec dd {
    margin: 0;
    font-weight: 500;
    text-align: right;
    color: var(--v7-text);
}

/* -- Pilulas de evento ---------------------------------------------------- */
.server-event-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.server-event-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .8rem;
    font-size: .8rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.server-event-pill-icon {
    font-size: .95rem;
    width: .95rem;
    height: .95rem;
}

.server-event-pill-on {
    background: var(--v7-success-bg);
    border-color: rgba(99, 209, 158, .35);
    color: var(--v7-success-fg);
}

.server-event-pill-off {
    background: var(--v7-sunken);
    border-color: var(--v7-line);
    color: var(--v7-muted);
}

/* -- Lista de comandos ---------------------------------------------------- */
.server-commands {
    border: 1px solid var(--v7-line);
    overflow: hidden;
}

.server-command {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--v7-line);
    font-size: .8rem;
}

.server-command:last-child {
    border-bottom: none;
}

/* O `kbd` do app.css inverte as cores do corpo (texto escuro sobre claro), o
   que salta demais em uma lista de onze linhas. Aqui vira uma tecla discreta. */
.server-command kbd {
    min-width: 85px;
    text-align: center;
    font-size: .72rem;
    flex-shrink: 0;
    color: var(--v7-accent);
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line-soft);
}

.server-command-desc {
    color: var(--v7-muted);
    line-height: 1.4;
}


/* ==========================================================================
   28. LootBox — grade "itens possiveis" e barra de preco
   --------------------------------------------------------------------------
   A view emite lootbox__items / lootbox__item* / lootbox__price* /
   lootbox__actions e NENHUMA dessas classes tinha regra no tema: a secao saia
   como texto empilhado (percentual, nome e raridade um embaixo do outro, sem
   card e sem grade).

   Medidas do lootbox.scss do default; paleta do dk-purple e canto reto.
   ========================================================================== */

.lootbox__items {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 576px) { .lootbox__items { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .lootbox__items { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .lootbox__items { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { .lootbox__items { grid-template-columns: repeat(6, 1fr); } }

/* A cor da raridade fica na moldura e no degrade; o fundo continua escuro.
   (O default usa background-color + ::before com z-index -1, que no nosso caso
   escondia o degrade atras do fundo do proprio card.) */
.lootbox__item {
    --lootbox-item-rarity: var(--v7-line-soft);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: .75rem .75rem .6rem;
    color: var(--v7-text);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 100%),
        var(--lootbox-item-rarity);
    border: 2px solid var(--lootbox-item-rarity);
}

/* Mesma armadilha da esteira: caixa fixa, sprite contido. width/height fixos no
   <img> distorceriam quem nao e quadrado — o par max-* + object-fit preserva a
   proporcao e ainda assim iguala o espaco ocupado. */
.lootbox__item-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 72px;
    flex: 0 0 auto;
    margin-bottom: .4rem;
    overflow: hidden;
}

.lootbox__item-image img {
    max-width: 88%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Sem imagem (o item nao chega hidratado): placeholder para o card nao encolher
   e a grade nao desalinhar. */
.lootbox__item-image:empty::before {
    content: "";
    display: block;
    width: 52px;
    height: 52px;
    background: var(--v7-sunken);
    border: 1px solid var(--v7-line);
}

.lootbox__item-percent {
    position: absolute;
    top: .25rem;
    right: .3rem;
    font-size: .62rem;
    font-weight: 600;
    opacity: .65;
}

.lootbox__item-name {
    margin-bottom: .2rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lootbox__item-rarity {
    font-size: .6rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lootbox-item-rarity);
}

/* -- Barra de preco / acoes ------------------------------------------------ */
.lootbox__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin-bottom: .75rem;
}

.lootbox__price-text {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v7-muted);
}

.lootbox__price-value {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--v7-accent);
}

.lootbox__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}


/* -- LootBox: involucros e variante roleta -------------------------------- */
/* `.lootbox` (pagina da caixa), `.lootboxes` (listagem) e `.lootbox-wheel`
   tambem estavam sem regra — a roleta saia colada no texto e o canvas de 400px
   estourava a largura no celular. */
.lootbox,
.lootboxes {
    display: block;
}

.lootbox-wheel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 1.5rem 2rem;
}

/* O canvas tem width/height fixos no HTML (400x400) — sem max-width ele nao
   cabe em tela estreita. height:auto preserva a proporcao. */
.lootbox-wheel canvas,
#lootbox-wheel-canvas {
    display: block;
    position: relative;
    z-index: 1;
    max-width: min(480px, 100%);
    height: auto;
}

/* ==========================================================================
   Profile — paper-doll de equipamentos  [CORRECAO]
   --------------------------------------------------------------------------
   CORRIGE a nota anterior deste arquivo: a paper-doll NAO vem com CSS do
   renderer do plugin. Ela vem do TEMA — no default esta em
   resources/sass/profile.scss:2-28.

   O renderizador emite `.equipments > .mapping > .item-mapping.item0..item11`
   com os 12 slots em position:absolute sobre uma caixa de 400x388. Sem estas
   regras os slots caem em fluxo normal e o equipamento vira uma pilha vertical
   de sprites soltos.

   Atencao: sao DOIS renderizadores distintos. O do WorkShop emite
   `.morpheus-inventory-items > .item` (CSS em workshop.scss:74-117) e nao tem
   relacao com este.
   ========================================================================== */

.equipments .mapping {
    position: relative;
    width: 400px;
    height: 388px;
    max-width: 100%;
    margin: 0 auto;
}

.equipments .mapping .item-mapping {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.equipments .mapping .item-mapping img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .7));
}

.equipments .mapping .item0  { bottom: 17px;  left: 7px;     width: 70px;  height: 130px; }
.equipments .mapping .item1  { bottom: 17px;  right: 2px;    width: 70px;  height: 130px; }
.equipments .mapping .item2  { top: 58px;     left: 76px;    width: 56px;  height: 65px; }
.equipments .mapping .item3  { top: 133px;    left: 39px;    width: 82px;  height: 98px; }
.equipments .mapping .item4  { bottom: 17px;  left: 88px;    width: 60px;  height: 74px; }
.equipments .mapping .item5  { bottom: 155px; right: 44px;   width: 83px;  height: 54px; }
.equipments .mapping .item6  { bottom: 17px;  right: 84px;   width: 57px;  height: 74px; }
.equipments .mapping .item7  { top: 59px;     right: 0;      width: 127px; height: 112px; }
.equipments .mapping .item8  { display: none; }
.equipments .mapping .item9  { top: 81px;     right: 137px;  width: 30px;  height: 30px; }
.equipments .mapping .item10 { bottom: 106px; left: 102px;   width: 30px;  height: 30px; }
.equipments .mapping .item11 { bottom: 106px; right: 99px;   width: 30px;  height: 30px; }

@media (max-width: 440px) {
    .equipments .mapping {
        transform: scale(.78);
        transform-origin: top center;
        margin-bottom: -85px;
    }
}