* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #102a3a;
}

body {
    min-height: 100%;
    margin: 0;
    color: #102033;
    font-family: "Segoe UI", Arial, sans-serif;
    letter-spacing: 0;
}

a {
    color: inherit;
}

button,
input,
select {
    font: inherit;
}

.xp-app-body {
    background:
        linear-gradient(180deg, rgba(12, 33, 45, 0.78), rgba(16, 42, 58, 0.88)),
        url("/xp/assets/cenario-xp.svg") center top / cover fixed no-repeat;
}

.xp-app-body.is-trail-view {
    min-height: 100vh;
    overflow: hidden;
}

.xp-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px min(28px, 4vw);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(10, 28, 40, 0.82);
    backdrop-filter: blur(12px);
}

.xp-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
}

.xp-brand img {
    width: 168px;
    height: auto;
}

.xp-brand strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 34px;
    border: 2px solid #ffe27a;
    border-radius: 8px;
    color: #1f2d22;
    background: linear-gradient(180deg, #fff7b0, #f5b82e);
    box-shadow: inset 0 -3px 0 rgba(94, 57, 2, 0.18), 0 12px 22px rgba(0, 0, 0, 0.18);
    font-size: 1.02rem;
    font-weight: 950;
}

.xp-section-tabs {
    display: inline-flex;
    justify-self: center;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 5px;
    background: rgba(3, 18, 28, 0.48);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.xp-section-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0 16px;
    color: #d8f7ff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 950;
    white-space: nowrap;
    transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}

.xp-section-tabs a:hover,
.xp-section-tabs a:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 226, 122, 0.5);
    outline: 0;
}

.xp-section-tabs a.is-active {
    border-color: #ffe27a;
    color: #2f1e00;
    background: linear-gradient(180deg, #fff7b0, #f5b82e);
    box-shadow: inset 0 -3px 0 rgba(94, 57, 2, 0.2), 0 10px 20px rgba(0, 0, 0, 0.18);
}

.xp-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.xp-nav a,
.xp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 8px;
    padding: 0 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.11);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 850;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.xp-nav a:hover,
.xp-nav a:focus-visible,
.xp-btn:hover,
.xp-btn:focus-visible {
    transform: translateY(-1px);
    border-color: #ffe27a;
    background: rgba(255, 226, 122, 0.2);
    outline: 0;
}

.xp-btn-primary {
    border-color: #f7a923;
    color: #2f1e00;
    background: linear-gradient(180deg, #ffe887, #f6a41d);
    box-shadow: inset 0 -3px 0 rgba(100, 53, 0, 0.22), 0 12px 24px rgba(51, 35, 0, 0.18);
}

.xp-btn-danger,
.xp-mini-danger {
    border-color: rgba(239, 68, 68, 0.34);
    color: #fff1f1;
    background: rgba(185, 28, 28, 0.78);
}

.xp-page {
    width: min(1380px, calc(100% - 28px));
    margin: 0 auto;
    padding: 26px 0 70px;
}

.xp-page.is-settings-view {
    padding-bottom: 150px;
}

.xp-page.is-trail-view {
    width: min(1680px, calc(100% - 28px));
    height: calc(100vh - 73px);
    display: grid;
    padding: 12px 0;
}

.is-trail-view .xp-settings-only,
.is-settings-view .xp-trail-only {
    display: none !important;
}

.xp-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    color: #ffffff;
}

.xp-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: 0.95;
    text-shadow: 0 5px 0 rgba(0, 0, 0, 0.18), 0 18px 36px rgba(0, 0, 0, 0.3);
}

.xp-hero p {
    max-width: 670px;
    margin: 12px 0 0;
    color: #d8f7ff;
    font-size: 1.02rem;
    line-height: 1.48;
    font-weight: 750;
}

.xp-month {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: rgba(4, 19, 30, 0.55);
}

.xp-month label,
.xp-form label {
    display: grid;
    gap: 6px;
}

.xp-month span,
.xp-form span {
    color: #e8fbff;
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.xp-month input,
.xp-form input,
.xp-form select {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 8px;
    padding: 0 12px;
    color: #132238;
    background: rgba(255, 255, 255, 0.96);
    outline: 0;
}

.xp-form input[type="file"] {
    padding: 9px 10px;
}

.xp-form small {
    color: #cdeef5;
    font-size: 0.78rem;
    font-weight: 700;
}

.xp-alert {
    margin: 18px 0;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 8px;
    padding: 13px 15px;
    color: #ffffff;
    background: rgba(11, 85, 66, 0.88);
    font-weight: 850;
}

.xp-alert.error {
    background: rgba(150, 22, 42, 0.9);
}

.xp-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 18px;
}

.xp-summary-grid article {
    min-height: 84px;
    display: grid;
    align-content: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 14px 16px;
    background: rgba(246, 255, 250, 0.88);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.xp-summary-grid span {
    color: #2d5570;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.xp-summary-grid strong {
    color: #102033;
    font-size: clamp(1.1rem, 2vw, 1.55rem);
    line-height: 1;
}

.xp-admin-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.62fr) minmax(270px, 0.72fr) minmax(380px, 1.32fr);
    gap: 14px;
    margin: 0 0 22px;
}

.xp-admin-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    padding: 18px;
    background: rgba(5, 25, 39, 0.78);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
}

.xp-admin-card::before {
    content: "";
    position: absolute;
    right: -20px;
    top: -28px;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 226, 122, 0.3), rgba(255, 226, 122, 0));
    opacity: 0.95;
    pointer-events: none;
}

.xp-admin-profile-card {
    display: grid;
    gap: 14px;
}

.xp-admin-profile-card .xp-form {
    width: 100%;
}

.xp-admin-avatar {
    position: relative;
    width: 150px;
    height: 150px;
    display: grid;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
    background: transparent;
}

.xp-admin-avatar::after {
    content: "";
    position: absolute;
    inset: -34px;
    z-index: 1;
    background: url("/xp/assets/moldura-adm-transparente.png?v=20260523a") center / contain no-repeat;
    opacity: 0.98;
    pointer-events: none;
}

.xp-admin-avatar img,
.xp-admin-avatar span {
    position: relative;
    z-index: 2;
    width: 96px;
    height: 96px;
    border-radius: 50%;
}

.xp-admin-avatar img {
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.25);
}

.xp-admin-avatar span {
    display: grid;
    place-items: center;
    color: #fff6d0;
    background: linear-gradient(135deg, #7c2d12, #f59e0b);
    font-size: 1.35rem;
    font-weight: 950;
}

.xp-admin-card h2,
.xp-recent h2 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1.1;
}

.xp-form {
    display: grid;
    gap: 12px;
}

.xp-form-sale {
    grid-template-columns: 1fr 160px 170px;
    align-items: end;
}

.xp-form-note {
    grid-column: 1 / 3;
}

.xp-admin-hint {
    margin: 10px 0 0;
    color: #bfe6ec;
    font-size: 0.88rem;
    font-weight: 750;
}

.xp-photo-preview {
    width: 74px;
    height: 74px;
    overflow: hidden;
    border: 3px solid #ffe27a;
    border-radius: 50%;
    background: #ffffff;
}

.xp-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xp-world {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    padding: 22px;
    background:
        linear-gradient(180deg, rgba(10, 26, 39, 0.08), rgba(10, 26, 39, 0.35)),
        url("/xp/assets/cenario-xp.svg") center / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 24px 48px rgba(0, 0, 0, 0.25);
}

.xp-page.is-trail-view .xp-world {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: clamp(14px, 2vw, 22px);
    border-color: rgba(255, 226, 122, 0.5);
    border-radius: 10px;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.2),
        inset 0 -18px 0 rgba(74, 143, 27, 0.24),
        0 28px 64px rgba(0, 0, 0, 0.34);
}

.xp-world-hud {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
}

.xp-world-score {
    justify-self: end;
    min-width: min(100%, 300px);
    display: grid;
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    padding: 12px 14px;
    color: #ffffff;
    background: rgba(2, 23, 33, 0.68);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.xp-player-summary {
    position: absolute;
    left: clamp(14px, 2vw, 24px);
    top: clamp(14px, 2vw, 24px);
    z-index: 8;
    width: min(330px, calc(100% - 34px));
    display: grid;
    gap: 7px;
    border: 1px solid rgba(255, 226, 122, 0.52);
    border-radius: 10px;
    padding: 13px 14px;
    color: #ffffff;
    background: rgba(2, 23, 33, 0.84);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.25);
}

.xp-player-summary[hidden] {
    display: none;
}

.xp-player-summary-close {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

.xp-player-summary > span {
    color: #ffe27a;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.xp-player-summary > strong {
    max-width: calc(100% - 34px);
    overflow: hidden;
    font-size: 1.25rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xp-player-summary > small {
    color: #d5f8ff;
    font-weight: 850;
}

.xp-player-summary-bar {
    position: relative;
    overflow: hidden;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.xp-player-summary-bar i {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--xp-fill-percent, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b, #ffe27a);
}

.xp-player-summary-bar b {
    position: relative;
    z-index: 2;
    display: grid;
    height: 100%;
    place-items: center;
    color: #fff9cf;
    font-size: 0.76rem;
    text-shadow: 0 2px 0 rgba(33, 18, 60, 0.72);
}

.xp-player-summary dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.xp-player-summary dt {
    color: #9fd5df;
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.xp-player-summary dd {
    margin: 2px 0 0;
    color: #ffffff;
    font-weight: 950;
}

.xp-world-score span {
    color: #ffe27a;
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.xp-world-score strong {
    overflow: hidden;
    font-size: 1.2rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xp-world-score small {
    color: #d5f8ff;
    font-weight: 800;
}

.xp-world-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.xp-world-controls button {
    width: 44px;
    height: 44px;
    border: 2px solid #7a4b08;
    border-radius: 50%;
    color: #3c2503;
    background: linear-gradient(180deg, #fff3a4, #ffbe35);
    box-shadow: inset 0 -4px 0 rgba(105, 62, 0, 0.22), 0 10px 20px rgba(0, 0, 0, 0.2);
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 950;
    cursor: pointer;
}

.xp-track-scroll {
    position: relative;
    z-index: 2;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 12px;
    padding: 16px 4px 26px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    cursor: grab;
    overscroll-behavior-x: contain;
    touch-action: pan-y;
    user-select: none;
}

.xp-track-scroll::-webkit-scrollbar {
    display: none;
}

.xp-track-scroll.is-drag-ready,
.xp-track-scroll.is-dragging {
    cursor: grabbing;
}

.xp-track-scroll.is-dragging {
    scroll-behavior: auto;
}

.xp-track-scroll.is-dragging * {
    cursor: grabbing !important;
}

.xp-page.is-trail-view .xp-track-scroll {
    height: 100%;
    margin-top: 0;
    padding: 0 8px 8px;
}

.xp-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 136px;
    align-items: center;
    min-width: max-content;
    min-height: 390px;
    gap: 24px;
}

.xp-page.is-trail-view .xp-track {
    grid-auto-columns: clamp(82px, 5.55vw, 106px);
    min-height: 100%;
    gap: clamp(8px, 0.95vw, 16px);
}

.xp-level {
    position: relative;
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xp-page.is-trail-view .xp-level {
    min-height: clamp(300px, 49vh, 430px);
}

.xp-level:nth-child(odd) {
    align-items: flex-start;
    padding-top: 16px;
}

.xp-level:nth-child(even) {
    align-items: flex-end;
    padding-bottom: 8px;
}

.xp-path {
    position: absolute;
    left: var(--xp-path-left, -68px);
    top: var(--xp-path-top, 50%);
    z-index: 0;
    width: var(--xp-path-width, 104px);
    height: 44px;
    background-image: url("/xp/assets/caminho-xp.svg?v=20260523d");
    background-repeat: repeat-x;
    background-position: left center;
    background-size: auto 100%;
    transform: translateY(-50%) rotate(var(--xp-path-angle, -6deg));
    transform-origin: left center;
    opacity: 0.9;
    pointer-events: none;
}

.xp-level:nth-child(even) .xp-path:not(.is-positioned) {
    transform: translateY(-50%) rotate(8deg);
}

.xp-page.is-trail-view .xp-path {
    left: var(--xp-path-left, calc(-1 * clamp(116px, 6.9vw, 142px)));
    top: var(--xp-path-top, 50%);
    width: var(--xp-path-width, clamp(188px, 10.8vw, 222px));
    height: clamp(38px, 4.2vw, 48px);
    background-size: auto 100%;
    opacity: 0.9;
}

.xp-page.is-trail-view .xp-level:nth-child(odd) .xp-path:not(.is-positioned) {
    transform: translateY(-50%) rotate(-2deg);
}

.xp-page.is-trail-view .xp-level:nth-child(even) .xp-path:not(.is-positioned) {
    transform: translateY(-50%) rotate(2deg);
}

.xp-path.is-positioned {
    transform: translateY(-50%) rotate(var(--xp-path-angle, 0deg));
}

.xp-level-node {
    position: relative;
    z-index: 1;
    width: 122px;
    min-height: 150px;
    display: grid;
    justify-items: center;
    align-content: center;
    transition: transform 180ms ease, filter 180ms ease;
}

.xp-page.is-trail-view .xp-level-node {
    width: 104px;
    min-height: 132px;
}

.xp-level.has-players .xp-level-node,
.xp-level.is-highlighted .xp-level-node {
    transform: translateY(-4px) scale(1.04);
    filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.3));
}

.xp-level-art {
    width: 108px;
    height: 108px;
    object-fit: contain;
    pointer-events: none;
}

.xp-level-star .xp-level-art,
.xp-level-castle .xp-level-art {
    width: 128px;
    height: 128px;
}

.xp-page.is-trail-view .xp-level-art {
    width: 92px;
    height: 92px;
}

.xp-page.is-trail-view .xp-level-star .xp-level-art,
.xp-page.is-trail-view .xp-level-castle .xp-level-art {
    width: 112px;
    height: 112px;
}

.xp-level-node strong {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    min-width: 92px;
    border: 2px solid #7a4b08;
    border-radius: 999px;
    padding: 4px 8px;
    color: #3c2503;
    background: linear-gradient(180deg, #fff3a4, #ffbe35);
    box-shadow: 0 7px 0 rgba(105, 62, 0, 0.22);
    font-size: 0.74rem;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.xp-page.is-trail-view .xp-level-node strong {
    bottom: 9px;
    min-width: 78px;
    padding: 3px 7px;
    font-size: 0.66rem;
}

.xp-node-players {
    position: absolute;
    left: 50%;
    top: 52%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    width: 96px;
    transform: translate(-50%, -50%);
}

.xp-page.is-trail-view .xp-node-players {
    width: 78px;
    gap: 2px;
}

.xp-node-player {
    position: relative;
    width: 30px;
    height: 30px;
    overflow: visible;
    border: 0;
    border-radius: 50%;
    padding: 0;
    color: #ffffff;
    background: transparent;
    box-shadow: 0 7px 12px rgba(0, 0, 0, 0.26);
    cursor: pointer;
    isolation: isolate;
}

.xp-page.is-trail-view .xp-node-player,
.xp-page.is-trail-view .xp-node-more {
    width: 26px;
    height: 26px;
    border-width: 2px;
}

.xp-node-player.is-adm {
    background: transparent;
    box-shadow: 0 0 0 3px rgba(255, 226, 122, 0.22), 0 8px 14px rgba(0, 0, 0, 0.3);
}

.xp-node-player::after {
    content: "";
    position: absolute;
    inset: -9px;
    z-index: 3;
    background: url("/xp/assets/moldura-funcionarios-transparente.png?v=20260523a") center / contain no-repeat;
    pointer-events: none;
}

.xp-node-player.is-adm::after {
    inset: -11px;
    background-image: url("/xp/assets/moldura-adm-transparente.png?v=20260523a");
}

.xp-node-player img,
.xp-node-player span {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.xp-node-player img {
    object-fit: cover;
}

.xp-node-player span {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0ea5e9, #0f766e);
    font-size: 0.72rem;
    font-weight: 950;
}

.xp-node-player.is-adm span {
    background: linear-gradient(135deg, #3b1a69, #7c2d12);
}

.xp-node-more {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 2px solid rgba(255, 243, 164, 0.88);
    border-radius: 50%;
    color: #3c2503;
    background: linear-gradient(180deg, #fff3a4, #ffbe35);
    box-shadow: 0 7px 12px rgba(0, 0, 0, 0.24);
    font-size: 0.66rem;
    font-weight: 950;
}

.xp-game-roster {
    position: relative;
    z-index: 4;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.xp-game-player {
    flex: 0 0 clamp(190px, 20vw, 260px);
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 7px 9px;
    color: #ffffff;
    background: rgba(2, 23, 33, 0.7);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.xp-game-player.is-adm {
    border-color: rgba(255, 226, 122, 0.48);
    background: linear-gradient(135deg, rgba(68, 28, 111, 0.88), rgba(2, 23, 33, 0.78));
}

.xp-game-player.is-adm .xp-game-avatar {
    background: transparent;
}

.xp-game-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 50%;
    background: transparent;
    isolation: isolate;
}

.xp-game-avatar::after {
    content: "";
    position: absolute;
    inset: -11px;
    z-index: 3;
    background: url("/xp/assets/moldura-funcionarios-transparente.png?v=20260523a") center / contain no-repeat;
    pointer-events: none;
}

.xp-game-player.is-adm .xp-game-avatar::after {
    inset: -12px;
    background-image: url("/xp/assets/moldura-adm-transparente.png?v=20260523a");
}

.xp-game-avatar img,
.xp-game-avatar i {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.xp-game-avatar img {
    object-fit: cover;
}

.xp-game-avatar i {
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 950;
    background: linear-gradient(135deg, #0ea5e9, #0f766e);
}

.xp-game-player.is-adm .xp-game-avatar i {
    background: linear-gradient(135deg, #3b1a69, #7c2d12);
}

.xp-game-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.xp-game-info strong,
.xp-game-info small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xp-game-info strong {
    font-size: 0.84rem;
    line-height: 1;
}

.xp-game-info small {
    color: #d5f8ff;
    font-size: 0.7rem;
    font-weight: 800;
}

.xp-game-info em {
    position: relative;
    overflow: hidden;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}

.xp-game-info b {
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: var(--xp-fill-percent, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b 0%, #ffd23f 62%, #fff176 100%);
    box-shadow: 0 0 9px rgba(255, 211, 63, 0.42);
}

.xp-employee-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.xp-employee-card,
.xp-empty,
.xp-recent {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(243, 255, 249, 0.94);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
}

.xp-employee-card {
    padding: 14px 16px;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.xp-employee-card.is-focused {
    transform: translateY(-3px);
    box-shadow: 0 24px 46px rgba(255, 193, 47, 0.24), 0 18px 36px rgba(0, 0, 0, 0.2);
}

.xp-employee-card.is-adm {
    border-color: rgba(255, 226, 122, 0.48);
    background: linear-gradient(135deg, rgba(243, 255, 249, 0.96), rgba(252, 239, 255, 0.94));
}

.xp-employee-main {
    display: grid;
    grid-template-columns: 112px minmax(150px, 1fr) minmax(230px, 0.86fr);
    align-items: center;
    gap: 12px;
}

.xp-avatar-frame {
    position: relative;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: transparent;
    border-radius: 50%;
    isolation: isolate;
}

.xp-avatar-frame::after {
    content: "";
    position: absolute;
    inset: -16px;
    z-index: 4;
    background: url("/xp/assets/moldura-funcionarios-transparente.png?v=20260523a") center / contain no-repeat;
    pointer-events: none;
}

.xp-avatar-frame.is-adm::after {
    inset: -18px;
    background-image: url("/xp/assets/moldura-adm-transparente.png?v=20260523a");
}

.xp-avatar-frame img {
    position: relative;
    z-index: 2;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
}

.xp-avatar-frame span {
    position: relative;
    z-index: 2;
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9, #0f766e);
    font-size: 1.45rem;
    font-weight: 950;
}

.xp-avatar-frame.is-adm span {
    background: linear-gradient(135deg, #3b1a69, #7c2d12);
    font-size: 1.1rem;
}

.xp-employee-info {
    min-width: 0;
}

.xp-rank {
    display: inline-flex;
    align-items: center;
    height: 24px;
    border-radius: 999px;
    padding: 0 10px;
    color: #593700;
    background: #ffe27a;
    font-size: 0.72rem;
    font-weight: 950;
}

.xp-employee-card.is-adm .xp-rank {
    color: #fff9cf;
    background: linear-gradient(180deg, #6d4bd8, #2b155f);
}

.xp-employee-info h2 {
    margin: 6px 0 2px;
    color: #122033;
    font-size: 1.12rem;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.xp-admin-player-note {
    display: block;
    margin: -3px 0 8px;
    color: #6d3f86;
    font-size: 0.72rem;
    font-weight: 850;
}

.xp-employee-info p {
    margin: 0 0 8px;
    color: #275066;
    font-size: 0.86rem;
    font-weight: 850;
}

.xp-employee-info dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.xp-employee-info dt {
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.xp-employee-info dd {
    margin: 2px 0 0;
    color: #102033;
    font-weight: 950;
}

.xp-liquid-bar {
    position: relative;
    width: min(270px, 100%);
    height: 54px;
    display: grid;
    align-items: center;
    justify-items: center;
    overflow: hidden;
    justify-self: end;
    border: 3px solid rgba(255, 240, 155, 0.64);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(68, 41, 111, 0.96), rgba(23, 16, 69, 0.98));
    box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.16), 0 14px 26px rgba(10, 20, 36, 0.18);
    isolation: isolate;
}

.xp-liquid-bar > i {
    position: absolute;
    left: 52px;
    top: 6px;
    bottom: 6px;
    z-index: 1;
    display: block;
    width: calc((100% - 62px) * var(--xp-fill-ratio, 0));
    max-width: calc(100% - 62px);
    border-radius: 999px;
    background: linear-gradient(90deg, #fff579 0%, #ffd13f 48%, #f59e0b 100%);
    box-shadow: 0 0 22px rgba(255, 218, 67, 0.72);
    transition: width 260ms ease;
}

.xp-liquid-bar::after {
    content: "XP";
    position: absolute;
    left: 5px;
    top: 50%;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border: 3px solid rgba(255, 240, 155, 0.86);
    border-radius: 50%;
    color: #fff9cf;
    background: radial-gradient(circle at 38% 30%, #5d3ad1, #24105c 72%);
    box-shadow: 0 6px 14px rgba(11, 10, 40, 0.34);
    font-size: 0.8rem;
    font-weight: 950;
    pointer-events: none;
}

.xp-liquid-bar span {
    position: relative;
    z-index: 3;
    width: 100%;
    min-width: 0;
    padding: 0 10px 0 54px;
    color: #fff8c7;
    font-size: 0.86rem;
    line-height: 1;
    font-weight: 950;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 2px 0 rgba(33, 18, 60, 0.85);
}

.xp-fill-p0 > i { width: 0px; } .xp-progress-line.xp-fill-p0 i, .xp-game-info em.xp-fill-p0 b { width: 0%; }
.xp-fill-p1 > i { width: 2.32px; } .xp-progress-line.xp-fill-p1 i, .xp-game-info em.xp-fill-p1 b { width: 1%; }
.xp-fill-p2 > i { width: 4.64px; } .xp-progress-line.xp-fill-p2 i, .xp-game-info em.xp-fill-p2 b { width: 2%; }
.xp-fill-p3 > i { width: 6.96px; } .xp-progress-line.xp-fill-p3 i, .xp-game-info em.xp-fill-p3 b { width: 3%; }
.xp-fill-p4 > i { width: 9.28px; } .xp-progress-line.xp-fill-p4 i, .xp-game-info em.xp-fill-p4 b { width: 4%; }
.xp-fill-p5 > i { width: 11.6px; } .xp-progress-line.xp-fill-p5 i, .xp-game-info em.xp-fill-p5 b { width: 5%; }
.xp-fill-p6 > i { width: 13.92px; } .xp-progress-line.xp-fill-p6 i, .xp-game-info em.xp-fill-p6 b { width: 6%; }
.xp-fill-p7 > i { width: 16.24px; } .xp-progress-line.xp-fill-p7 i, .xp-game-info em.xp-fill-p7 b { width: 7%; }
.xp-fill-p8 > i { width: 18.56px; } .xp-progress-line.xp-fill-p8 i, .xp-game-info em.xp-fill-p8 b { width: 8%; }
.xp-fill-p9 > i { width: 20.88px; } .xp-progress-line.xp-fill-p9 i, .xp-game-info em.xp-fill-p9 b { width: 9%; }
.xp-fill-p10 > i { width: 23.2px; } .xp-progress-line.xp-fill-p10 i, .xp-game-info em.xp-fill-p10 b { width: 10%; }
.xp-fill-p11 > i { width: 25.52px; } .xp-progress-line.xp-fill-p11 i, .xp-game-info em.xp-fill-p11 b { width: 11%; }
.xp-fill-p12 > i { width: 27.84px; } .xp-progress-line.xp-fill-p12 i, .xp-game-info em.xp-fill-p12 b { width: 12%; }
.xp-fill-p13 > i { width: 30.16px; } .xp-progress-line.xp-fill-p13 i, .xp-game-info em.xp-fill-p13 b { width: 13%; }
.xp-fill-p14 > i { width: 32.48px; } .xp-progress-line.xp-fill-p14 i, .xp-game-info em.xp-fill-p14 b { width: 14%; }
.xp-fill-p15 > i { width: 34.8px; } .xp-progress-line.xp-fill-p15 i, .xp-game-info em.xp-fill-p15 b { width: 15%; }
.xp-fill-p16 > i { width: 37.12px; } .xp-progress-line.xp-fill-p16 i, .xp-game-info em.xp-fill-p16 b { width: 16%; }
.xp-fill-p17 > i { width: 39.44px; } .xp-progress-line.xp-fill-p17 i, .xp-game-info em.xp-fill-p17 b { width: 17%; }
.xp-fill-p18 > i { width: 41.76px; } .xp-progress-line.xp-fill-p18 i, .xp-game-info em.xp-fill-p18 b { width: 18%; }
.xp-fill-p19 > i { width: 44.08px; } .xp-progress-line.xp-fill-p19 i, .xp-game-info em.xp-fill-p19 b { width: 19%; }
.xp-fill-p20 > i { width: 46.4px; } .xp-progress-line.xp-fill-p20 i, .xp-game-info em.xp-fill-p20 b { width: 20%; }
.xp-fill-p21 > i { width: 48.72px; } .xp-progress-line.xp-fill-p21 i, .xp-game-info em.xp-fill-p21 b { width: 21%; }
.xp-fill-p22 > i { width: 51.04px; } .xp-progress-line.xp-fill-p22 i, .xp-game-info em.xp-fill-p22 b { width: 22%; }
.xp-fill-p23 > i { width: 53.36px; } .xp-progress-line.xp-fill-p23 i, .xp-game-info em.xp-fill-p23 b { width: 23%; }
.xp-fill-p24 > i { width: 55.68px; } .xp-progress-line.xp-fill-p24 i, .xp-game-info em.xp-fill-p24 b { width: 24%; }
.xp-fill-p25 > i { width: 58px; } .xp-progress-line.xp-fill-p25 i, .xp-game-info em.xp-fill-p25 b { width: 25%; }
.xp-fill-p26 > i { width: 60.32px; } .xp-progress-line.xp-fill-p26 i, .xp-game-info em.xp-fill-p26 b { width: 26%; }
.xp-fill-p27 > i { width: 62.64px; } .xp-progress-line.xp-fill-p27 i, .xp-game-info em.xp-fill-p27 b { width: 27%; }
.xp-fill-p28 > i { width: 64.96px; } .xp-progress-line.xp-fill-p28 i, .xp-game-info em.xp-fill-p28 b { width: 28%; }
.xp-fill-p29 > i { width: 67.28px; } .xp-progress-line.xp-fill-p29 i, .xp-game-info em.xp-fill-p29 b { width: 29%; }
.xp-fill-p30 > i { width: 69.6px; } .xp-progress-line.xp-fill-p30 i, .xp-game-info em.xp-fill-p30 b { width: 30%; }
.xp-fill-p31 > i { width: 71.92px; } .xp-progress-line.xp-fill-p31 i, .xp-game-info em.xp-fill-p31 b { width: 31%; }
.xp-fill-p32 > i { width: 74.24px; } .xp-progress-line.xp-fill-p32 i, .xp-game-info em.xp-fill-p32 b { width: 32%; }
.xp-fill-p33 > i { width: 76.56px; } .xp-progress-line.xp-fill-p33 i, .xp-game-info em.xp-fill-p33 b { width: 33%; }
.xp-fill-p34 > i { width: 78.88px; } .xp-progress-line.xp-fill-p34 i, .xp-game-info em.xp-fill-p34 b { width: 34%; }
.xp-fill-p35 > i { width: 81.2px; } .xp-progress-line.xp-fill-p35 i, .xp-game-info em.xp-fill-p35 b { width: 35%; }
.xp-fill-p36 > i { width: 83.52px; } .xp-progress-line.xp-fill-p36 i, .xp-game-info em.xp-fill-p36 b { width: 36%; }
.xp-fill-p37 > i { width: 85.84px; } .xp-progress-line.xp-fill-p37 i, .xp-game-info em.xp-fill-p37 b { width: 37%; }
.xp-fill-p38 > i { width: 88.16px; } .xp-progress-line.xp-fill-p38 i, .xp-game-info em.xp-fill-p38 b { width: 38%; }
.xp-fill-p39 > i { width: 90.48px; } .xp-progress-line.xp-fill-p39 i, .xp-game-info em.xp-fill-p39 b { width: 39%; }
.xp-fill-p40 > i { width: 92.8px; } .xp-progress-line.xp-fill-p40 i, .xp-game-info em.xp-fill-p40 b { width: 40%; }
.xp-fill-p41 > i { width: 95.12px; } .xp-progress-line.xp-fill-p41 i, .xp-game-info em.xp-fill-p41 b { width: 41%; }
.xp-fill-p42 > i { width: 97.44px; } .xp-progress-line.xp-fill-p42 i, .xp-game-info em.xp-fill-p42 b { width: 42%; }
.xp-fill-p43 > i { width: 99.76px; } .xp-progress-line.xp-fill-p43 i, .xp-game-info em.xp-fill-p43 b { width: 43%; }
.xp-fill-p44 > i { width: 102.08px; } .xp-progress-line.xp-fill-p44 i, .xp-game-info em.xp-fill-p44 b { width: 44%; }
.xp-fill-p45 > i { width: 104.4px; } .xp-progress-line.xp-fill-p45 i, .xp-game-info em.xp-fill-p45 b { width: 45%; }
.xp-fill-p46 > i { width: 106.72px; } .xp-progress-line.xp-fill-p46 i, .xp-game-info em.xp-fill-p46 b { width: 46%; }
.xp-fill-p47 > i { width: 109.04px; } .xp-progress-line.xp-fill-p47 i, .xp-game-info em.xp-fill-p47 b { width: 47%; }
.xp-fill-p48 > i { width: 111.36px; } .xp-progress-line.xp-fill-p48 i, .xp-game-info em.xp-fill-p48 b { width: 48%; }
.xp-fill-p49 > i { width: 113.68px; } .xp-progress-line.xp-fill-p49 i, .xp-game-info em.xp-fill-p49 b { width: 49%; }
.xp-fill-p50 > i { width: 116px; } .xp-progress-line.xp-fill-p50 i, .xp-game-info em.xp-fill-p50 b { width: 50%; }
.xp-fill-p51 > i { width: 118.32px; } .xp-progress-line.xp-fill-p51 i, .xp-game-info em.xp-fill-p51 b { width: 51%; }
.xp-fill-p52 > i { width: 120.64px; } .xp-progress-line.xp-fill-p52 i, .xp-game-info em.xp-fill-p52 b { width: 52%; }
.xp-fill-p53 > i { width: 122.96px; } .xp-progress-line.xp-fill-p53 i, .xp-game-info em.xp-fill-p53 b { width: 53%; }
.xp-fill-p54 > i { width: 125.28px; } .xp-progress-line.xp-fill-p54 i, .xp-game-info em.xp-fill-p54 b { width: 54%; }
.xp-fill-p55 > i { width: 127.6px; } .xp-progress-line.xp-fill-p55 i, .xp-game-info em.xp-fill-p55 b { width: 55%; }
.xp-fill-p56 > i { width: 129.92px; } .xp-progress-line.xp-fill-p56 i, .xp-game-info em.xp-fill-p56 b { width: 56%; }
.xp-fill-p57 > i { width: 132.24px; } .xp-progress-line.xp-fill-p57 i, .xp-game-info em.xp-fill-p57 b { width: 57%; }
.xp-fill-p58 > i { width: 134.56px; } .xp-progress-line.xp-fill-p58 i, .xp-game-info em.xp-fill-p58 b { width: 58%; }
.xp-fill-p59 > i { width: 136.88px; } .xp-progress-line.xp-fill-p59 i, .xp-game-info em.xp-fill-p59 b { width: 59%; }
.xp-fill-p60 > i { width: 139.2px; } .xp-progress-line.xp-fill-p60 i, .xp-game-info em.xp-fill-p60 b { width: 60%; }
.xp-fill-p61 > i { width: 141.52px; } .xp-progress-line.xp-fill-p61 i, .xp-game-info em.xp-fill-p61 b { width: 61%; }
.xp-fill-p62 > i { width: 143.84px; } .xp-progress-line.xp-fill-p62 i, .xp-game-info em.xp-fill-p62 b { width: 62%; }
.xp-fill-p63 > i { width: 146.16px; } .xp-progress-line.xp-fill-p63 i, .xp-game-info em.xp-fill-p63 b { width: 63%; }
.xp-fill-p64 > i { width: 148.48px; } .xp-progress-line.xp-fill-p64 i, .xp-game-info em.xp-fill-p64 b { width: 64%; }
.xp-fill-p65 > i { width: 150.8px; } .xp-progress-line.xp-fill-p65 i, .xp-game-info em.xp-fill-p65 b { width: 65%; }
.xp-fill-p66 > i { width: 153.12px; } .xp-progress-line.xp-fill-p66 i, .xp-game-info em.xp-fill-p66 b { width: 66%; }
.xp-fill-p67 > i { width: 155.44px; } .xp-progress-line.xp-fill-p67 i, .xp-game-info em.xp-fill-p67 b { width: 67%; }
.xp-fill-p68 > i { width: 157.76px; } .xp-progress-line.xp-fill-p68 i, .xp-game-info em.xp-fill-p68 b { width: 68%; }
.xp-fill-p69 > i { width: 160.08px; } .xp-progress-line.xp-fill-p69 i, .xp-game-info em.xp-fill-p69 b { width: 69%; }
.xp-fill-p70 > i { width: 162.4px; } .xp-progress-line.xp-fill-p70 i, .xp-game-info em.xp-fill-p70 b { width: 70%; }
.xp-fill-p71 > i { width: 164.72px; } .xp-progress-line.xp-fill-p71 i, .xp-game-info em.xp-fill-p71 b { width: 71%; }
.xp-fill-p72 > i { width: 167.04px; } .xp-progress-line.xp-fill-p72 i, .xp-game-info em.xp-fill-p72 b { width: 72%; }
.xp-fill-p73 > i { width: 169.36px; } .xp-progress-line.xp-fill-p73 i, .xp-game-info em.xp-fill-p73 b { width: 73%; }
.xp-fill-p74 > i { width: 171.68px; } .xp-progress-line.xp-fill-p74 i, .xp-game-info em.xp-fill-p74 b { width: 74%; }
.xp-fill-p75 > i { width: 174px; } .xp-progress-line.xp-fill-p75 i, .xp-game-info em.xp-fill-p75 b { width: 75%; }
.xp-fill-p76 > i { width: 176.32px; } .xp-progress-line.xp-fill-p76 i, .xp-game-info em.xp-fill-p76 b { width: 76%; }
.xp-fill-p77 > i { width: 178.64px; } .xp-progress-line.xp-fill-p77 i, .xp-game-info em.xp-fill-p77 b { width: 77%; }
.xp-fill-p78 > i { width: 180.96px; } .xp-progress-line.xp-fill-p78 i, .xp-game-info em.xp-fill-p78 b { width: 78%; }
.xp-fill-p79 > i { width: 183.28px; } .xp-progress-line.xp-fill-p79 i, .xp-game-info em.xp-fill-p79 b { width: 79%; }
.xp-fill-p80 > i { width: 185.6px; } .xp-progress-line.xp-fill-p80 i, .xp-game-info em.xp-fill-p80 b { width: 80%; }
.xp-fill-p81 > i { width: 187.92px; } .xp-progress-line.xp-fill-p81 i, .xp-game-info em.xp-fill-p81 b { width: 81%; }
.xp-fill-p82 > i { width: 190.24px; } .xp-progress-line.xp-fill-p82 i, .xp-game-info em.xp-fill-p82 b { width: 82%; }
.xp-fill-p83 > i { width: 192.56px; } .xp-progress-line.xp-fill-p83 i, .xp-game-info em.xp-fill-p83 b { width: 83%; }
.xp-fill-p84 > i { width: 194.88px; } .xp-progress-line.xp-fill-p84 i, .xp-game-info em.xp-fill-p84 b { width: 84%; }
.xp-fill-p85 > i { width: 197.2px; } .xp-progress-line.xp-fill-p85 i, .xp-game-info em.xp-fill-p85 b { width: 85%; }
.xp-fill-p86 > i { width: 199.52px; } .xp-progress-line.xp-fill-p86 i, .xp-game-info em.xp-fill-p86 b { width: 86%; }
.xp-fill-p87 > i { width: 201.84px; } .xp-progress-line.xp-fill-p87 i, .xp-game-info em.xp-fill-p87 b { width: 87%; }
.xp-fill-p88 > i { width: 204.16px; } .xp-progress-line.xp-fill-p88 i, .xp-game-info em.xp-fill-p88 b { width: 88%; }
.xp-fill-p89 > i { width: 206.48px; } .xp-progress-line.xp-fill-p89 i, .xp-game-info em.xp-fill-p89 b { width: 89%; }
.xp-fill-p90 > i { width: 208.8px; } .xp-progress-line.xp-fill-p90 i, .xp-game-info em.xp-fill-p90 b { width: 90%; }
.xp-fill-p91 > i { width: 211.12px; } .xp-progress-line.xp-fill-p91 i, .xp-game-info em.xp-fill-p91 b { width: 91%; }
.xp-fill-p92 > i { width: 213.44px; } .xp-progress-line.xp-fill-p92 i, .xp-game-info em.xp-fill-p92 b { width: 92%; }
.xp-fill-p93 > i { width: 215.76px; } .xp-progress-line.xp-fill-p93 i, .xp-game-info em.xp-fill-p93 b { width: 93%; }
.xp-fill-p94 > i { width: 218.08px; } .xp-progress-line.xp-fill-p94 i, .xp-game-info em.xp-fill-p94 b { width: 94%; }
.xp-fill-p95 > i { width: 220.4px; } .xp-progress-line.xp-fill-p95 i, .xp-game-info em.xp-fill-p95 b { width: 95%; }
.xp-fill-p96 > i { width: 222.72px; } .xp-progress-line.xp-fill-p96 i, .xp-game-info em.xp-fill-p96 b { width: 96%; }
.xp-fill-p97 > i { width: 225.04px; } .xp-progress-line.xp-fill-p97 i, .xp-game-info em.xp-fill-p97 b { width: 97%; }
.xp-fill-p98 > i { width: 227.36px; } .xp-progress-line.xp-fill-p98 i, .xp-game-info em.xp-fill-p98 b { width: 98%; }
.xp-fill-p99 > i { width: 229.68px; } .xp-progress-line.xp-fill-p99 i, .xp-game-info em.xp-fill-p99 b { width: 99%; }
.xp-fill-p100 > i { width: 232px; } .xp-progress-line.xp-fill-p100 i, .xp-game-info em.xp-fill-p100 b { width: 100%; }

.xp-progress-line {
    position: relative;
    overflow: hidden;
    height: 28px;
    margin-top: 14px;
    border: 1px solid rgba(127, 82, 0, 0.28);
    border-radius: 999px;
    background: linear-gradient(180deg, #d9eff2 0%, #bddde3 100%);
    box-shadow:
        inset 0 2px 4px rgba(15, 23, 42, 0.12),
        0 6px 14px rgba(10, 20, 36, 0.08);
    isolation: isolate;
}

.xp-progress-line i {
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 1;
    width: var(--xp-fill-percent, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b 0%, #ffd23f 58%, #fff176 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 0 rgba(132, 73, 0, 0.2),
        0 0 18px rgba(255, 211, 63, 0.46);
    transition: width 260ms ease;
}

.xp-progress-line span {
    position: relative;
    z-index: 2;
    display: grid;
    height: 100%;
    place-items: center;
    color: #1f2d22;
    font-size: 0.78rem;
    font-weight: 950;
}

.xp-employee-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.xp-delete-user-form {
    margin: 0;
}

.xp-employee-actions .xp-btn {
    min-height: 38px;
    padding: 9px 14px;
}

.xp-edit-details {
    margin-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
    padding-top: 10px;
}

.xp-edit-details summary {
    color: #275066;
    cursor: pointer;
    font-weight: 900;
}

.xp-form-edit {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    margin-top: 10px;
}

.xp-form-edit span {
    color: #275066;
}

.xp-form-edit .xp-btn {
    border-color: #0369a1;
    color: #ffffff;
    background: linear-gradient(180deg, #38bdf8, #0369a1);
    box-shadow: inset 0 -3px 0 rgba(7, 89, 133, 0.35), 0 10px 18px rgba(3, 105, 161, 0.22);
}

.xp-form-edit .xp-btn:hover,
.xp-form-edit .xp-btn:focus-visible {
    border-color: #075985;
    background: linear-gradient(180deg, #7dd3fc, #0284c7);
}

.xp-empty {
    grid-column: 1 / -1;
    padding: 24px;
}

.xp-empty h2 {
    margin: 0 0 8px;
    color: #102033;
}

.xp-empty p {
    margin: 0;
    color: #486174;
    font-weight: 750;
}

.xp-recent {
    margin-top: 18px;
    padding: 18px;
    background: rgba(6, 25, 39, 0.82);
}

.xp-recent h2 {
    margin-bottom: 12px;
}

.xp-recent p {
    color: #d5f8ff;
}

.xp-recent-list {
    display: grid;
    gap: 8px;
}

.xp-recent-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 10px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.xp-recent-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.xp-recent-list strong {
    display: block;
    font-weight: 950;
}

.xp-recent-list span {
    color: #bfe6ec;
    font-size: 0.86rem;
    font-weight: 750;
}

.xp-recent-note {
    margin: 2px 0 0;
    color: #f3ffff;
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.xp-recent-note span {
    display: block;
    margin-bottom: 2px;
    color: #ffe27a;
    font-size: 0.66rem;
    font-weight: 950;
    text-transform: uppercase;
}

.xp-recent-xp {
    position: relative;
    min-height: 32px;
    border: 2px solid rgba(255, 239, 138, 0.78);
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(90deg, #fff06f 0%, #ffd23f 62%, #f7a91b 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 0 rgba(132, 73, 0, 0.22),
        0 10px 18px rgba(247, 169, 27, 0.18);
}

.xp-recent-xp::after {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    top: 4px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    pointer-events: none;
}

.xp-recent-xp span {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 32px;
    place-items: center;
    color: #2a154f;
    font-size: 0.84rem;
    font-weight: 950;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
    white-space: nowrap;
}

.xp-mini-danger {
    min-height: 32px;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.xp-login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 28px;
    background:
        linear-gradient(180deg, rgba(14, 54, 72, 0.38), rgba(8, 20, 32, 0.88)),
        url("/xp/assets/cenario-xp.svg") center / cover no-repeat;
}

.xp-login-card {
    position: relative;
    z-index: 2;
    width: min(430px, 100%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    padding: 28px;
    color: #ffffff;
    background: rgba(5, 25, 39, 0.86);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34);
}

.xp-login-logo {
    width: 220px;
    height: auto;
}

.xp-login-card h1 {
    margin: 18px 0 8px;
    font-size: 2rem;
    line-height: 1;
}

.xp-login-card p {
    margin: 0 0 18px;
    color: #d5f8ff;
    font-weight: 750;
}

.xp-login-form {
    display: grid;
    gap: 12px;
}

.xp-login-form label {
    display: grid;
    gap: 6px;
}

.xp-login-form label span {
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.xp-login-form input {
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    padding: 0 12px;
}

.xp-login-runner {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    width: clamp(126px, 16vw, 210px);
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.25));
    transform: translate3d(var(--runner-x, 12vw), var(--runner-y, 64vh), 0) scaleX(var(--runner-dir, 1));
    pointer-events: none;
}

@media (max-width: 980px) {
    .xp-app-body.is-trail-view {
        overflow: auto;
    }

    .xp-topbar {
        grid-template-columns: 1fr;
    }

    .xp-section-tabs {
        justify-self: stretch;
        justify-content: center;
        overflow-x: auto;
    }

    .xp-nav {
        justify-self: stretch;
        justify-content: center;
    }

    .xp-page.is-trail-view {
        height: auto;
        min-height: calc(100vh - 134px);
    }

    .xp-world-hud {
        grid-template-columns: 1fr auto;
    }

    .xp-world-score {
        grid-column: 1 / -1;
        justify-self: stretch;
        min-width: 0;
    }

    .xp-game-roster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xp-hero,
    .xp-admin-grid {
        grid-template-columns: 1fr;
        display: grid;
    }

    .xp-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xp-employee-grid {
        grid-template-columns: 1fr;
    }

    .xp-form-sale,
    .xp-form-edit {
        grid-template-columns: 1fr;
    }

    .xp-form-note {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .xp-topbar {
        padding: 12px;
    }

    .xp-brand img {
        width: 140px;
    }

    .xp-page {
        width: min(100% - 18px, 1380px);
        padding-top: 18px;
    }

    .xp-page.is-trail-view {
        width: min(100% - 14px, 1380px);
        min-height: calc(100vh - 132px);
        padding: 8px 0;
    }

    .xp-world-hud,
    .xp-game-roster {
        grid-template-columns: 1fr;
    }

    .xp-world-controls {
        justify-self: start;
    }

    .xp-summary-grid,
    .xp-employee-grid {
        grid-template-columns: 1fr;
    }

    .xp-employee-main {
        grid-template-columns: 94px 1fr;
    }

    .xp-liquid-bar {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(270px, 100%);
        height: 54px;
    }

    .xp-avatar-frame {
        width: 90px;
        height: 90px;
    }

    .xp-avatar-frame img,
    .xp-avatar-frame span {
        width: 66px;
        height: 66px;
    }

    .xp-employee-info dl {
        grid-template-columns: 1fr;
    }

    .xp-world {
        min-height: 430px;
        padding: 14px;
    }

    .xp-track {
        grid-auto-columns: 110px;
        gap: 18px;
        min-height: 310px;
    }

    .xp-level {
        min-height: 270px;
    }

    .xp-level-node {
        width: 110px;
    }

    .xp-level-art,
    .xp-level-star .xp-level-art,
    .xp-level-castle .xp-level-art {
        width: 104px;
        height: 104px;
    }

    .xp-path {
        left: -60px;
        width: 92px;
    }

    .xp-page.is-trail-view .xp-path {
        left: var(--xp-path-left, -84px);
        top: var(--xp-path-top, 50%);
        width: var(--xp-path-width, 148px);
        height: 38px;
        background-size: auto 100%;
    }

    .xp-recent-list article {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}