body {
    font-family: 'Outfit', sans-serif;
    background: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #0f172a 50%, #090d16 100%);
    color: #f8fafc;
}

h1, h2, h3, .font-title { font-family: 'Cinzel', serif; }
.card-hover { transition: all 0.25s ease; }
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
}

main { padding-bottom: 70px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; }

#container-nos-sites img { width: 2.5rem; height: 2.5rem; }
#container-fansites img { width: 2rem; height: 2rem; }
#container-discord-serveurs img { width: 4rem; height: 4rem; }
#container-discord-classe img { width: 2rem; height: 2rem; }

.io-statistics-dashboard { display: grid; gap: 1rem; }
.io-stats-quick-nav { position: sticky; top: var(--io-global-header-height, 0px); z-index: 70; display: flex; align-items: center; gap: 0.4rem; min-height: 2.7rem; overflow-x: auto; padding: 0.35rem 0.5rem; border-top: 1px solid var(--io-line); border-bottom: 1px solid var(--io-line); background: var(--io-deep); }
.io-stats-quick-nav button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.4rem; min-height: 2rem; padding: 0 0.75rem; border: 1px solid transparent; border-radius: 0.5rem; color: var(--io-muted); font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.io-stats-quick-nav button:hover, .io-stats-quick-nav button.is-active { border-color: var(--io-line); background: var(--io-accent-soft); color: var(--io-ink); }
.io-stats-section, .io-rankings-grid { scroll-margin-top: calc(var(--io-global-header-height, 0px) + 3rem); }
.io-stats-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; }
.io-stats-heading span { display: flex; align-items: center; gap: 0.5rem; color: #f59e0b; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.io-stats-heading span em { border: 1px solid rgba(56, 189, 248, 0.45); border-radius: 0.3rem; background: rgba(56, 189, 248, 0.12); padding: 0.12rem 0.35rem; color: #7dd3fc; font-size: 0.55rem; font-style: normal; }
.io-stats-heading h2 { color: #f8fafc; font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 900; }
.io-stats-heading p { color: #94a3b8; font-size: 0.8rem; }
.io-stats-heading button { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid #334155; border-radius: 0.5rem; background: #172033; color: #fbbf24; }
.io-stats-section { min-width: 0; border: 1px solid var(--io-line); border-radius: 0.5rem; background: var(--io-surface); padding: 1rem; box-shadow: 0 16px 40px rgba(2, 6, 23, 0.12); }
.io-stats-highlight { border-color: var(--io-line); background: var(--io-surface); }
.io-audience-section { border-color: rgba(56, 189, 248, 0.2); }
.io-stats-section h3 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; color: var(--io-ink); font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 800; }
.io-stats-section h3 i { color: #f59e0b; }
.io-stat-metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.65rem; }
.io-stat-metric { container-type: inline-size; display: flex; min-width: 0; min-height: 4.75rem; align-items: center; gap: 0.65rem; border: 1px solid var(--io-line); border-radius: 0.5rem; background: var(--io-surface-soft); padding: 0.7rem 0.8rem; }
.io-stat-metric-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: 0.45rem; background: color-mix(in srgb, var(--metric-color) 18%, transparent); color: var(--metric-color); }
.io-stat-metric div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.io-stat-metric strong { max-width: 100%; overflow: hidden; color: var(--metric-color); font-size: 1.35rem; line-height: 1.15; text-overflow: clip; white-space: nowrap; }
.io-stat-metric.is-value-long strong { font-size: 1.15rem; }
.io-stat-metric.is-value-xl strong { font-size: 1rem; }
.io-stat-metric b { color: var(--io-ink); font-size: 0.75rem; line-height: 1.2; overflow-wrap: anywhere; }
.io-stat-metric small { color: var(--io-muted); font-size: 0.62rem; }
.io-stat-metric.is-amber { --metric-color: #f59e0b; }
.io-stat-metric.is-blue { --metric-color: #60a5fa; }
.io-stat-metric.is-cyan { --metric-color: #22d3ee; }
.io-stat-metric.is-green { --metric-color: #4ade80; }
.io-stat-metric.is-rose { --metric-color: #fb7185; }
.io-stat-metric.is-violet { --metric-color: #a78bfa; }
.io-online-metric > div { gap: 0.3rem; }
.io-online-badge { display: inline-flex; width: fit-content; align-items: center; gap: 0.3rem; border: 1px solid color-mix(in srgb, #22c55e 42%, transparent); border-radius: 999px; background: color-mix(in srgb, #22c55e 12%, transparent); padding: 0.18rem 0.48rem; color: #15803d; font-size: 0.66rem; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.io-online-badge i { width: 0.42rem; height: 0.42rem; flex: 0 0 auto; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 color-mix(in srgb, #22c55e 38%, transparent); animation: io-online-pulse 1.8s ease-out infinite; }
.io-online-badge strong { color: inherit; font-size: inherit; }
@keyframes io-online-pulse { 70%, 100% { box-shadow: 0 0 0 0.32rem transparent; } }
@media (prefers-reduced-motion: reduce) { .io-online-badge i { animation: none; } }

@container (max-width: 150px) {
    .io-stat-metric { gap: 0.45rem; padding-right: 0.55rem; padding-left: 0.55rem; }
    .io-stat-metric-icon { width: 1.8rem; height: 1.8rem; flex-basis: 1.8rem; }
    .io-stat-metric strong { font-size: 1.15rem; }
    .io-stat-metric.is-value-long strong { font-size: 0.98rem; }
    .io-stat-metric.is-value-xl strong { font-size: 0.86rem; }
    .io-stat-metric b { font-size: 0.68rem; }
}

@container (max-width: 112px) {
    .io-stat-metric-icon { display: none; }
    .io-stat-metric strong { font-size: 1.05rem; }
    .io-stat-metric.is-value-long strong { font-size: 0.92rem; }
    .io-stat-metric.is-value-xl strong { font-size: 0.82rem; }
}
.io-visits-chart-panel { margin-top: 0.75rem; border-top: 1px solid var(--io-line); padding-top: 0.85rem; }
.io-visits-chart-head, .io-section-title { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.io-visits-chart-head > div:first-child { display: flex; min-width: 0; align-items: baseline; gap: 0.55rem; }
.io-visits-chart-head b { color: var(--io-ink); font-size: 0.76rem; }
#io-visit-context { color: var(--io-accent); font-size: 0.67rem; font-weight: 800; }
.io-visit-filters { display: flex; align-items: center; gap: 0.35rem; }
.io-visit-filters > select { min-width: 6rem; }
.io-visit-filters select { height: 2rem; padding: 0 1.65rem 0 0.55rem; border: 1px solid var(--io-line); border-radius: 0.38rem; background: var(--io-surface-soft); color: var(--io-ink); font-size: 0.68rem; font-weight: 800; }
#io-visit-dependent-filters { display: flex; gap: 0.35rem; }
#io-visit-dependent-filters select { min-width: 6.5rem; }
.io-visit-grouping { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.15rem; border: 1px solid var(--io-line); border-radius: 0.4rem; background: var(--io-surface-soft); padding: 0.15rem; }
.io-visit-grouping button { min-height: 1.65rem; padding: 0 0.5rem; border-radius: 0.28rem; color: var(--io-muted); font-size: 0.64rem; font-weight: 800; white-space: nowrap; }
.io-visit-grouping button:hover, .io-visit-grouping button.is-active { background: var(--io-accent-soft); color: var(--io-ink); }
.io-visits-chart-wrap { height: 220px; margin-top: 0.5rem; }
.io-chart-legend { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem 1rem; margin-top: 0.5rem; padding-top: 0.65rem; border-top: 1px solid var(--io-line); background: var(--io-surface); }
.io-series-toggle { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem; border: 1px solid transparent; color: var(--io-muted); font-size: 0.66rem; font-weight: 700; cursor: pointer; }
.io-series-toggle:hover { background: var(--io-accent-soft); }
.io-series-toggle i { width: 0.85rem; height: 0.85rem; border: 2px solid var(--legend-color); border-radius: 0.2rem; background: #ffffff; }
.io-series-toggle.is-active i { background: var(--legend-color); box-shadow: inset 0 0 0 2px var(--io-surface); }
.io-chart-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.7fr); gap: 0.8rem; align-items: stretch; }
.io-doughnut-panel { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--io-line); border-radius: 0.5rem; background: var(--io-surface-soft); padding: 0.75rem; }
.io-doughnut-panel > b { color: var(--io-ink); font-size: 0.76rem; }
.io-doughnut-panel > div { position: relative; min-height: 220px; flex: 1; margin-top: 0.4rem; }
.io-chart-layout > .io-doughnut-panel { margin-top: 0.75rem; }
.io-pie-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-top: 0.8rem; }
.io-single-pie { grid-template-columns: minmax(280px, 34rem); justify-content: center; }
.io-creature-progress-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.7fr); gap: 0.8rem; align-items: stretch; }
.io-creature-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.io-ocre-progress-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.65rem; }
.io-ocre-progress-summary > div { display: grid; grid-template-columns: 0.55rem minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; min-height: 2rem; border: 1px solid var(--io-line); border-radius: 0.4rem; background: var(--io-surface-soft); padding: 0.35rem 0.5rem; }
.io-ocre-progress-summary i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--progress-color); }
.io-ocre-progress-summary span { color: var(--io-muted); font-size: 0.62rem; }
.io-ocre-progress-summary strong { display: flex; align-items: baseline; gap: 0.3rem; color: var(--progress-color); font-size: 0.72rem; }
.io-ocre-progress-summary strong small { color: var(--io-muted); font-size: 0.56rem; }
.io-kralaide-scope-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.45rem; }
.io-kralaide-scope-controls > div { display: flex; gap: 0.3rem; }
.io-kralaide-scope-controls button { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2rem; padding: 0 0.55rem; border: 1px solid var(--io-line); color: var(--io-muted); font-size: 0.65rem; font-weight: 800; }
.io-kralaide-scope-controls button:hover, .io-kralaide-scope-controls button.is-active { border-color: var(--io-accent); background: var(--io-accent-soft); color: var(--io-ink); }
.io-kralaide-scope-controls button img { width: 1.2rem; height: 1.2rem; object-fit: contain; }
.io-stats-server-control { position: relative; min-width: 12rem; }
.io-stats-server-trigger { display: grid; width: 100%; min-height: 2rem; grid-template-columns: 1.35rem minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; border: 1px solid var(--io-line); background: var(--io-surface-soft); padding: 0 0.55rem; color: var(--io-ink); font-size: 0.66rem; font-weight: 800; text-align: left; }
.io-stats-server-trigger img { width: 1.35rem; height: 1.35rem; object-fit: contain; }
.io-stats-server-trigger > i:last-child { color: var(--io-muted); font-size: 0.55rem; }
.io-stats-server-menu { position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 85; width: 100%; max-height: 18rem; overflow-y: auto; border: 1px solid var(--io-line); border-radius: 0.5rem; background: var(--io-surface); padding: 0.3rem; box-shadow: 0 16px 36px rgba(2, 6, 23, 0.28); }
.io-stats-server-menu.hidden { display: none; }
.io-stats-server-menu button { display: grid; width: 100%; min-height: 2.4rem; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border: 1px solid transparent; color: var(--io-muted); text-align: left; }
.io-stats-server-menu button:hover, .io-stats-server-menu button.is-active { border-color: var(--io-line); background: var(--io-accent-soft); color: var(--io-ink); }
.io-stats-server-menu img { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.io-destination-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.7fr); gap: 0.8rem; align-items: stretch; }
.io-destination-layout .io-doughnut-panel > div { min-height: 300px; }
.io-stats-columns { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 1rem; }
.io-destination-list, .io-pifus-list { display: grid; gap: 0.4rem; }
.io-scroll-list { max-height: 21rem; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.35rem; }
.io-scroll-list::-webkit-scrollbar { display: block; width: 5px; }
.io-scroll-list::-webkit-scrollbar-thumb { border-radius: 1rem; background: #475569; }
.io-destination-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto 2rem; align-items: center; gap: 0.6rem; min-height: 2.8rem; border-bottom: 1px solid var(--io-line); }
.io-destination-row > span { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 1px solid var(--destination-color); border-radius: 50%; color: var(--destination-color); font-size: 0.65rem; font-weight: 900; text-align: center; }
.io-destination-row div { display: flex; min-width: 0; flex-direction: column; }
.io-destination-row b { overflow: hidden; color: var(--io-ink); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.io-destination-last-visit { color: var(--io-muted); font-size: 0.59rem; line-height: 1.2; }
.io-destination-row > div > i { display: block; height: 0.2rem; margin-top: 0.35rem; border-radius: 1rem; background: var(--destination-color); }
.io-destination-row strong { display: flex; align-items: baseline; gap: 0.35rem; color: var(--destination-color); font-size: 0.75rem; }
.io-destination-row strong small { color: var(--destination-color); font-size: 0.6rem; font-weight: 800; opacity: 0.82; }
.io-destination-row > a { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 1px solid var(--destination-color); border-radius: 0.4rem; color: var(--destination-color); }
.io-destination-row > a:hover { background: var(--destination-color); color: #0b1220; }
.io-ranking-row { display: grid; grid-template-columns: 1.35rem 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; min-height: 3.5rem; border-bottom: 1px solid var(--io-line); }
.io-ranking-row > span { color: var(--io-muted); font-size: 0.7rem; font-weight: 900; text-align: center; }
.io-ranking-row > img { width: 2.25rem; height: 2.25rem; border: 1px solid var(--io-line); border-radius: 50%; background: var(--io-surface-soft); object-fit: cover; }
.io-ranking-row > div { display: flex; min-width: 0; flex-direction: column; }
.io-ranking-row b { overflow: hidden; color: var(--io-ink); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.io-ranking-row small { color: var(--io-muted); font-size: 0.61rem; }
.io-ranking-score { align-items: flex-end; }
.io-ranking-score strong { color: #fbbf24; font-size: 0.84rem; }
.io-ranking-score i { color: #fb7185; }
.io-section-title { margin-bottom: 0.85rem; }
.io-section-title h3 { margin-bottom: 0; }
.io-section-title p { margin-top: 0.2rem; color: var(--io-muted); font-size: 0.68rem; }
.io-section-title a { color: #fbbf24; font-size: 0.7rem; font-weight: 700; }
.io-refresh-stats { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--io-line); border-radius: 0.4rem; background: var(--io-surface-soft); color: var(--io-accent); }
.io-refresh-stats:hover { border-color: var(--io-accent); background: var(--io-accent-soft); }
.io-audience-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.io-frequency-metrics { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.io-server-filterbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.7rem; }
.io-server-filterbar > div { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.io-server-filterbar button { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem; padding: 0 0.6rem; border: 1px solid transparent; color: var(--io-muted); font-size: 0.65rem; font-weight: 800; }
.io-server-filterbar button:hover, .io-server-filterbar button.is-active { border-color: var(--io-accent); background: var(--io-accent-soft); color: var(--io-ink); }
.io-server-filterbar img { width: 1.2rem; height: 1.2rem; object-fit: contain; }
.io-server-stat-list { display: grid; gap: 0.35rem; }
.io-server-stat-row { display: grid; grid-template-columns: minmax(11rem, 1.6fr) repeat(5, minmax(4rem, 0.7fr)); align-items: center; gap: 0.5rem; min-width: 44rem; min-height: 3.4rem; border-bottom: 1px solid var(--io-line); }
.io-server-stat-row > div, .io-server-stat-row > span { display: flex; min-width: 0; flex-direction: column; }
.io-server-stat-row > span { align-items: flex-end; }
.io-server-stat-row b { overflow: hidden; color: var(--io-ink); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.io-server-stat-row > span b { color: var(--io-accent); }
.io-server-stat-row small { color: var(--io-muted); font-size: 0.58rem; }
.io-server-identity { flex-direction: row !important; align-items: center; gap: 0.55rem; }
.io-server-identity img { width: 2rem; height: 2rem; flex: 0 0 2rem; object-fit: contain; }
.io-server-identity span { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.io-server-game-badge { width: 1.2rem !important; height: 1.2rem !important; flex: 0 0 1.2rem !important; margin-left: auto; object-fit: contain; }
.io-server-stat-list { overflow-x: auto; }
.io-stats-loading { padding: 4rem 1rem; color: var(--io-muted); text-align: center; }
.io-stats-loading i { margin-right: 0.4rem; color: #f59e0b; }
.io-stats-loading.is-error { color: #fda4af; }
.io-stats-empty { color: var(--io-muted); font-size: 0.75rem; }

@media (max-width: 980px) {
    .io-stat-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .io-chart-layout { grid-template-columns: 1fr; }
    .io-chart-layout > .io-doughnut-panel { margin-top: 0; }
    .io-destination-layout { grid-template-columns: 1fr; }
    .io-creature-progress-layout { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
    main.io-stats-main { max-width: none; margin-top: 0; padding-top: 0; padding-right: 0; padding-left: 0; }
}

@media (max-width: 640px) {
    .io-stat-metric-grid, .io-audience-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .io-stats-columns { grid-template-columns: 1fr; }
    .io-pie-grid { grid-template-columns: 1fr; }
    .io-creature-metrics, .io-ocre-progress-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .io-stat-metric { min-height: 5rem; padding: 0.65rem; }
    .io-stat-metric-icon { display: none; }
    .io-visits-chart-head { align-items: flex-start; flex-direction: column; }
    .io-visit-filters { width: 100%; }
    .io-visit-filters { align-items: stretch; flex-direction: column; }
    #io-visit-dependent-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .io-visit-filters select, #io-visit-dependent-filters select { width: 100%; min-width: 0; }
    .io-section-title { align-items: flex-start; flex-direction: column; }
    .io-kralaide-scope-controls { width: 100%; justify-content: flex-start; }
    .io-stats-server-control { flex: 1; min-width: 10rem; }
    .io-ranking-row { grid-template-columns: 1.1rem 2rem minmax(0, 1fr) auto; gap: 0.4rem; }
    .io-ranking-row > img { width: 2rem; height: 2rem; }
    .io-stats-quick-nav button { width: 2.4rem; justify-content: center; padding: 0; }
    .io-stats-quick-nav button span { display: none; }
}

html.io-light .io-stats-quick-nav { background: var(--io-deep); }