:root { --violet: #7c3aed; --violet-dark: #4c1d95; --ink: #16111f; --muted: #82778f; --surface: #fff; --line: #ece8f1; }
* { box-sizing: border-box; } body { min-height: 100vh; color: var(--ink); background: #faf9fc; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.panel-nav { background: #9966cc; border-color: rgba(255,255,255,.16) !important; min-height: 64px; } .navbar-brand { color: #fff; font-weight: 800; letter-spacing: -.04em; } .navbar-brand:hover { color: #fff; }
.nav-link { color: #f0e7fa; font-size: .91rem; padding-left: .9rem !important; padding-right: .9rem !important; } .nav-link:hover, .nav-link.active { color: #fff; } .nav-link.active { font-weight: 750; }
.nav-user { color: #d9cfeb; font-size: .85rem; }.btn-primary { background: var(--violet); border-color: var(--violet); font-weight: 650; }.btn-primary:hover, .btn-primary:focus { background: #6d28d9; border-color: #6d28d9; }.btn-outline-light { border-color: #6f5a89; color: #eee8fa; }.btn-outline-light:hover { background: #fff; color: var(--violet-dark); }
.panel-container { padding-top: 48px; padding-bottom: 56px; }.page-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; }.eyebrow { color: var(--violet); letter-spacing: .12em; font-size: .7rem; font-weight: 800; margin: 0 0 7px; }.page-heading h1, .login-card h1 { font-size: clamp(1.8rem, 4vw, 2.55rem); letter-spacing: -.055em; font-weight: 780; margin: 0 0 8px; }.muted { color: var(--muted); margin: 0; }
.panel-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(35, 15, 66, .035); }.metric-card { min-height: 164px; padding: 24px; display: flex; flex-direction: column; }.metric-label { color: var(--muted); font-size: .82rem; }.metric-card strong { font-size: 2.6rem; letter-spacing: -.06em; line-height: 1.1; margin-top: auto; }.metric-card small, .action-card small { color: var(--muted); }.dual-metric-card { min-height: 164px; }.dual-metric-card strong { font-size: 1.58rem; margin-top: 4px; }.dual-metric-card small { font-size: .7rem; }.metric-divider { height: 1px; background: var(--line); margin: 11px 0; }.dashboard-chart-card { height: 100%; min-height: 164px; padding: 18px 22px 13px; }.dashboard-chart-heading, .online-chart-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }.dashboard-chart-heading small, .online-chart-heading small { color: var(--muted); font-size: .72rem; text-align: right; }.online-graph { display: block; width: 100%; height: 110px; margin-top: 8px; overflow: visible; }.online-graph-axis { stroke: #e9e3f0; stroke-width: 1; }.online-graph-line, .online-graph-bedrock { fill: none; stroke-linecap: round; stroke-linejoin: round; }.online-graph-line { stroke: var(--violet); stroke-width: 3; }.online-graph-bedrock { stroke: #c4b5fd; stroke-width: 2; }.online-graph-empty { display: grid; min-height: 110px; place-items: center; color: var(--muted); font-size: .82rem; text-align: center; }.action-card { color: var(--ink); min-height: 118px; padding: 22px 24px; text-decoration: none; transition: transform .15s, border-color .15s; }.action-card:hover { color: var(--violet-dark); border-color: #cbb7fa; transform: translateY(-2px); }.action-card span { display: block; font-weight: 720; margin-bottom: 9px; }
.log-controls { padding: 22px; margin-bottom: 16px; }.form-label { font-size: .82rem; font-weight: 650; color: #493d55; }.form-control { border-color: #ddd5e6; min-height: 42px; }.form-control:focus { border-color: #a78bfa; box-shadow: 0 0 0 .22rem rgba(124,58,237,.12); }.log-card { overflow: hidden; }.log-summary { margin: 16px 22px 0; color: var(--muted); font-size: .82rem; }.log-output { min-height: 320px; max-height: 68vh; overflow: auto; margin: 0; padding: 20px 22px; background: #1b1424; color: #e7def3; font: .79rem/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }.log-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 16px; color: var(--muted); font-size: .84rem; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 50% 0, #f0eaff, #faf9fc 48%); }.login-card { width: min(100%, 410px); padding: 37px; }.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: 30px; border-radius: 12px; color: #fff; background: var(--violet); font-weight: 850; letter-spacing: -.05em; }.login-card h1 { font-size: 2rem; }.login-card .muted { margin-bottom: 27px; font-size: .92rem; }.placeholder-card { max-width: 680px; padding: 42px; text-align: center; }.placeholder-card h2 { font-size: 1.25rem; font-weight: 750; }.placeholder-card p { color: var(--muted); margin: 10px auto 0; max-width: 470px; }.placeholder-symbol { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%; background: #f0eaff; color: var(--violet); font-size: 1.75rem; font-weight: 350; }
.profile-card { padding: 28px; }.profile-identity { display: flex; gap: 17px; align-items: center; margin-bottom: 28px; }.profile-identity h2 { font-size: 1.7rem; letter-spacing: -.04em; margin: 0 0 4px; }.player-avatar, .avatar-fallback { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 14px; object-fit: cover; background: #ede9fe; border: 1px solid #ddd6fe; }.avatar-fallback { display: grid; place-items: center; color: var(--violet-dark); font-size: 1.3rem; font-weight: 800; }.status-dot { display: inline-block; width: 9px; height: 9px; vertical-align: middle; border-radius: 50%; margin-left: 5px; }.status-dot.online { background: #22c55e; }.status-dot.offline { background: #c4bdcb; }.profile-metrics { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; }.profile-metrics span, .profile-details span { display: block; color: var(--muted); font-size: .76rem; margin-bottom: 5px; }.profile-metrics strong { font-size: 1.05rem; letter-spacing: -.025em; }.profile-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 22px; font-size: .87rem; }.profile-details code, .player-uuid { color: #66557a; font-size: .76rem; word-break: break-all; }.profile-subline { display: block; color: var(--muted); font-size: .82rem; margin-top: 4px; }
.profile-security-row, .profile-punishment-row { margin-top: 3px; }.security-card, .punishment-summary-card, .punishment-history-card, .active-punishment-card { height: 100%; padding: 23px; }.security-card h3, .punishment-history-card h3, .active-punishment-card h3 { margin: 0; font-size: 1.08rem; font-weight: 760; letter-spacing: -.025em; overflow-wrap: anywhere; }.punishment-summary-card h3 { margin: 0 0 3px; font-size: 2rem; font-weight: 790; color: var(--violet-dark); letter-spacing: -.05em; }.active-punishment-card { border-color: #ddd6fe; }.active-punishment-card .eyebrow { color: #7c3aed; }.security-note { margin: 7px 0 16px; font-size: .8rem; }.security-accounts { display: flex; flex-wrap: wrap; gap: 7px; }.security-account { display: inline-flex; align-items: center; border: 1px solid #ddd6fe; border-radius: 999px; padding: 5px 9px; color: #5b21b6; background: #f5f3ff; font-size: .78rem; font-weight: 680; text-decoration: none; }.security-account:hover { color: #4c1d95; border-color: #c4b5fd; }.login-history-table { font-size: .81rem; }.login-history-table thead th { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }.login-history-table td, .login-history-table th { padding: 9px 7px; border-color: var(--line); }.login-history-table code { color: #5b21b6; font-size: .79rem; }.punishment-status { display: inline-block; vertical-align: middle; margin: 2px 0 2px 7px; padding: 4px 8px; border-radius: 999px; font-size: .7rem; font-weight: 720; letter-spacing: 0; white-space: nowrap; }.punishment-status.ban { color: #b42318; background: #fef3f2; border: 1px solid #fecdca; }.punishment-status.mute { color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; }.punishment-history-list { list-style: none; margin: 15px 0 0; padding: 0; }.punishment-history-list li { border-top: 1px solid var(--line); padding: 9px 0; overflow-wrap: anywhere; }.punishment-history-list li:first-child { border-top: 0; padding-top: 0; }.punishment-history-list strong, .punishment-history-list span { display: block; }.punishment-history-list strong { font-size: .83rem; font-weight: 680; }.punishment-history-list span { color: var(--muted); font-size: .72rem; margin-top: 3px; }
.clan-summary { margin-bottom: 30px; }.clan-metric { min-height: 132px; }.clan-card { min-height: 142px; padding: 16px 18px; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }.clan-card:hover { color: var(--ink); border-color: #cbb7fa; transform: translateY(-2px); }.clan-card-heading, .clan-profile-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.clan-tag { display: inline-block; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5b21b6; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 999px; padding: 4px 9px; font-size: .76rem; font-weight: 760; }.clan-members { color: var(--muted); font-size: .76rem; white-space: nowrap; }.clan-card h2 { margin: 10px 0; font-size: 1.14rem; }.clan-card h2, .clan-profile-card h1 { font-weight: 770; letter-spacing: -.035em; overflow-wrap: anywhere; }.clan-card-meta, .clan-profile-metrics { display: flex; gap: 16px; border-top: 1px solid var(--line); padding-top: 9px; }.clan-card-meta span, .clan-profile-metrics span { color: var(--muted); font-size: .72rem; min-width: 0; }.clan-card-meta strong, .clan-profile-metrics strong { display: block; color: var(--ink); font-size: .88rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.back-link { display: inline-block; color: #66557a; font-size: .84rem; font-weight: 680; margin-bottom: 16px; text-decoration: none; }.back-link:hover { color: var(--violet-dark); }.clan-profile-card, .clan-motd-card { padding: 26px; }.clan-profile-card h1 { margin: 8px 0 22px; font-size: 2rem; }.clan-profile-heading .clan-tag { margin-top: 2px; }.clan-profile-metrics { gap: 36px; }.clan-profile-metrics small { display: block; color: var(--muted); font-size: .72rem; }.clan-profile-metrics strong { font-size: 1.15rem; }.clan-motd-card { margin-top: 16px; }.clan-motd-card h2, .clan-members h2 { font-size: 1.15rem; font-weight: 760; letter-spacing: -.03em; margin: 0; }.clan-motd-card p:last-child { color: var(--muted); margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }.clan-members { margin-top: 30px; }.clan-member-link { display: block; color: var(--ink); text-decoration: none; }.clan-member-card { display: flex; align-items: center; gap: 12px; padding: 15px 17px; min-height: 76px; transition: border-color .15s, transform .15s; }.clan-member-card .player-avatar, .clan-member-card .avatar-fallback { width: 42px; height: 42px; flex-basis: 42px; border-radius: 11px; font-size: 1rem; }.clan-member-link:hover { color: var(--ink); }.clan-member-link:hover .clan-member-card { border-color: #cbb7fa; transform: translateY(-2px); }.clan-member-card strong, .clan-member-card span { display: block; overflow-wrap: anywhere; }.clan-member-card span { color: var(--muted); font-size: .75rem; margin-top: 4px; }.profile-clan-link { color: #5b21b6; text-decoration: none; }.profile-clan-link:hover { color: var(--violet-dark); text-decoration: underline; }
.online-players { margin-top: 34px; }.online-players-heading, .privilege-group-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 0 13px; }.online-players-heading h2 { font-size: 1.22rem; font-weight: 760; letter-spacing: -.03em; margin: 0; }.online-players-heading > span, .privilege-group-heading > span { color: var(--muted); font-size: .78rem; }.online-player-card { min-height: 86px; padding: 15px; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 12px; transition: border-color .15s, transform .15s; }.online-player-card:hover { color: var(--ink); border-color: #cbb7fa; transform: translateY(-2px); }.online-player-card .player-avatar, .online-player-card .avatar-fallback { width: 42px; height: 42px; flex-basis: 42px; border-radius: 11px; font-size: 1rem; }.online-player-card strong, .online-player-card span { display: block; }.online-player-card span { color: var(--muted); font-size: .76rem; margin-top: 3px; }.config-note { color: var(--muted); font-size: .82rem; margin: -12px 0 18px; }.configured-privileges { display: inline-flex; gap: 5px; flex-wrap: wrap; vertical-align: middle; }.privilege-group { margin: 0 0 29px; }.privilege-group-heading { margin-bottom: 12px; }.privilege-card { min-height: 154px; padding: 20px; text-decoration: none; color: var(--ink); display: grid; grid-template-columns: 48px 1fr; gap: 13px; transition: border-color .15s, transform .15s; }.privilege-card:hover { color: var(--ink); border-color: #cbb7fa; transform: translateY(-2px); }.privilege-card .player-avatar, .privilege-card .avatar-fallback { width: 48px; height: 48px; flex-basis: 48px; border-radius: 12px; }.privilege-card strong { display: block; margin-top: 2px; }.permission-list { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-self: end; }.permission-badge { background: #f0eaff; border: 1px solid #ddd6fe; color: #5b21b6; border-radius: 99px; padding: 4px 8px; font-size: .7rem; font-weight: 650; }.empty-card { padding: 28px; color: var(--muted); }.empty-card p { margin: 0; }
.period-switch { display: flex; flex-wrap: wrap; gap: 7px; margin: -9px 0 20px; }.period-link { color: #66557a; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; font-size: .78rem; font-weight: 680; text-decoration: none; }.period-link:hover { color: var(--violet-dark); border-color: #c4b5fd; }.period-link.active { color: #fff; background: var(--violet); border-color: var(--violet); }.online-chart-card { padding: 24px; margin-top: 16px; }.online-chart-heading h2, .online-table-card h2 { font-size: 1.16rem; font-weight: 760; letter-spacing: -.03em; margin: 0; }.online-chart-card .online-graph { height: 210px; margin-top: 18px; }.online-table-card { height: 100%; padding: 23px; }.online-table-card > .eyebrow { margin-bottom: 5px; }.online-table-card h2 { margin-bottom: 16px; }.online-data-table { font-size: .8rem; }.online-data-table thead th { color: var(--muted); font-size: .67rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }.online-data-table td, .online-data-table th { padding: 9px 6px; border-color: var(--line); vertical-align: middle; }.online-data-table td:first-child, .online-data-table th:first-child { padding-left: 0; }.online-data-table td:last-child, .online-data-table th:last-child { padding-right: 0; }.online-data-table code { color: #5b21b6; font-size: .74rem; overflow-wrap: anywhere; }.platform-badge { display: inline-block; border-radius: 999px; padding: 3px 7px; font-size: .66rem; font-weight: 720; }.platform-badge.java { color: #1d4ed8; background: #eff6ff; }.platform-badge.bedrock { color: #9a3412; background: #fff7ed; }.online-samples-number { color: var(--violet-dark); font-size: 2.4rem; font-weight: 790; letter-spacing: -.06em; line-height: 1; margin: 0 0 8px; }
.map-card { overflow: hidden; padding: 0; }.map-frame { display: block; width: 100%; height: min(74vh, 820px); min-height: 520px; border: 0; background: #17121f; }
.table-card { overflow: hidden; }.punishment-table, .audit-table { font-size: .86rem; }.punishment-table thead th, .audit-table thead th { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #fcfbfe; white-space: nowrap; }.punishment-table td, .punishment-table th, .audit-table td, .audit-table th { padding: 14px 18px; border-color: var(--line); }.audit-table td { vertical-align: top; }.audit-details { min-width: 260px; max-width: 520px; white-space: normal; overflow-wrap: anywhere; }.ban-id { color: var(--violet-dark); font-weight: 750; }.table-player { color: var(--ink); font-weight: 700; text-decoration: none; }.table-player:hover { color: var(--violet); }.punishment-type { display: inline-block; border-radius: 999px; padding: 3px 7px; font-size: .69rem; font-weight: 720; }.punishment-type.ban { color: #b42318; background: #fef3f2; }.punishment-type.mute { color: #9a3412; background: #fff7ed; }.punishment-type.warn { color: #5b21b6; background: #f5f3ff; }.ban-reason { min-width: 180px; max-width: 300px; white-space: normal; }
.confirm-card { max-width: 620px; padding: 30px; }.confirm-card h2 { font-size: 1.45rem; font-weight: 760; letter-spacing: -.035em; }.confirm-card h2 span { color: var(--muted); font-size: .9rem; font-weight: 600; }.confirm-warning { color: #b42318; font-weight: 720; margin-bottom: 20px; }.confirm-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 22px 0; padding: 16px 0; }.confirm-card dt { color: var(--muted); font-size: .75rem; font-weight: 600; }.confirm-card dd { margin: 4px 0 0; overflow-wrap: anywhere; }.btn-danger { font-weight: 650; }
@media (max-width: 767px) { .panel-container { padding-top: 30px; }.nav-user { display: none; }.panel-nav .container { flex-wrap: wrap; gap: 5px; padding-top: 8px; padding-bottom: 8px; }.panel-links { order: 3; width: 100%; overflow-x: auto; }.nav-link { padding-left: .45rem !important; padding-right: .45rem !important; }.profile-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }.login-card { padding: 28px; } }
.clan-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.clan-profile-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; }
.permission-badge.privilege-color-0{background:#fff;border-color:#ef4444;color:#ef4444}.permission-badge.privilege-color-1{background:#fff;border-color:#fcba03;color:#fcba03}.permission-badge.privilege-color-2{background:#fff;border-color:#58b33d;color:#58b33d}.engagement-section{padding:24px;margin-top:20px}.engagement-section h2{font-size:1.18rem;font-weight:750;letter-spacing:-.025em;margin:0 0 8px}.engagement-section>.muted{font-size:.84rem;margin-bottom:16px}.engagement-meta{font-size:.78rem;color:var(--muted)}.engagement-metric{min-height:155px}.engagement-metric strong{font-size:1.9rem}.engagement-plot{position:relative;width:100%;min-height:270px;touch-action:pan-y}.engagement-plot svg{width:100%;height:280px;display:block}.engagement-plot:focus-visible{outline:2px solid var(--violet);outline-offset:4px}.engagement-grid{stroke:var(--line);stroke-width:1}.engagement-axis{fill:var(--muted);font-size:12px}.engagement-series{fill:none;stroke-width:2.4;stroke-linejoin:round}.engagement-series-0{stroke:#7c3aed;fill:#7c3aed}.engagement-series-1{stroke:#10b981;fill:#10b981}.engagement-series-2{stroke:#2563eb;fill:#2563eb}.engagement-series-3{stroke:#f59e0b;fill:#f59e0b}.engagement-series-4{stroke:#db2777;fill:#db2777}path.engagement-series{fill:none}.engagement-crosshair{stroke:#a78bfa;stroke-dasharray:4 4;pointer-events:none}.engagement-legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.engagement-legend button{font-size:.75rem;padding:5px 10px;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--ink)}.engagement-legend button[aria-pressed=false]{opacity:.45;text-decoration:line-through}.engagement-legend .legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.legend-dot.engagement-series-0{background:#7c3aed}.legend-dot.engagement-series-1{background:#10b981}.legend-dot.engagement-series-2{background:#2563eb}.legend-dot.engagement-series-3{background:#f59e0b}.legend-dot.engagement-series-4{background:#db2777}.engagement-tooltip{display:block;min-height:44px;color:var(--violet-dark);font-size:.82rem;line-height:1.7;background:#f5f3ff;border-radius:8px;padding:10px 12px;margin:5px 0 15px;white-space:pre-wrap}.engagement-section summary{cursor:pointer;font-size:.8rem;color:var(--violet-dark);font-weight:650}.engagement-table{font-size:.8rem;margin-top:12px}.engagement-table th{font-weight:650;white-space:nowrap}.engagement-table td,.engagement-table th{border-color:var(--line);padding:10px 8px}.engagement-retention-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}.engagement-retention-metrics small,.engagement-retention-metrics strong,.engagement-retention-metrics span{display:block}.engagement-retention-metrics strong{font-size:1.8rem;color:var(--violet-dark)}.engagement-retention-metrics small,.engagement-retention-metrics span{color:var(--muted);font-size:.78rem}.engagement-funnel strong{font-size:1.8rem;color:var(--violet-dark)}.engagement-heat{width:100%;border-collapse:separate;border-spacing:3px;font-size:.67rem}.engagement-heat th{color:var(--muted);font-weight:600;text-align:center;padding:3px}.engagement-heat td{padding:0}.engagement-heat-cell{width:100%;min-width:31px;height:32px;border:0;border-radius:4px;font-size:.62rem}.engagement-heat-cell:focus-visible{outline:2px solid var(--violet);outline-offset:1px}.shade-0{background:#f3f0f8;color:#9185a1}.shade-1{background:#ede9fe;color:#5b21b6}.shade-2{background:#ddd6fe;color:#5b21b6}.shade-3{background:#c4b5fd;color:#4c1d95}.shade-4{background:#a78bfa;color:#fff}.shade-5{background:#7c3aed;color:#fff}.engagement-heat-output{display:block;min-height:24px;color:var(--muted);font-size:.78rem;margin-top:8px}.engagement-definitions{display:grid;grid-template-columns:140px 1fr;gap:10px 18px;font-size:.83rem;margin:18px 0 0}.engagement-definitions dt{color:var(--ink);font-weight:650}.engagement-definitions dd{color:var(--muted);margin:0}.engagement-players tr[hidden]{display:none}@media(max-width:767px){.engagement-section{padding:18px}.engagement-definitions{grid-template-columns:1fr;gap:5px}.engagement-definitions dd{margin-bottom:10px}.engagement-plot svg{height:240px}.engagement-heat{min-width:850px}.engagement-metric{min-height:138px}.engagement-metric strong{font-size:1.6rem}}
.engagement-player-controls .form-label{font-size:.83rem;font-weight:600}.engagement-player-range{border:0;min-width:0;margin-bottom:0;padding-top:0;padding-bottom:0}.engagement-player-range legend{float:none;width:auto;font-size:.83rem;line-height:1.5}.engagement-player-range input{min-width:0;width:50%}.engagement-player-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:14px}.engagement-player-pagination .pagination{flex-wrap:wrap;gap:3px}.engagement-player-pagination .page-link{color:var(--violet-dark)}.engagement-player-pagination .active>.page-link{color:#fff;background:var(--violet);border-color:var(--violet)}.engagement-player-pagination .disabled>.page-link{color:var(--muted)}#engagement-players{scroll-margin-top:20px}