/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-e2k0hhoe2x],
.components-reconnect-repeated-attempt-visible[b-e2k0hhoe2x],
.components-reconnect-failed-visible[b-e2k0hhoe2x],
.components-pause-visible[b-e2k0hhoe2x],
.components-resume-failed-visible[b-e2k0hhoe2x],
.components-rejoining-animation[b-e2k0hhoe2x] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-e2k0hhoe2x],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-e2k0hhoe2x],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-e2k0hhoe2x],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-e2k0hhoe2x],
#components-reconnect-modal.components-reconnect-retrying[b-e2k0hhoe2x],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-e2k0hhoe2x],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-e2k0hhoe2x],
#components-reconnect-modal.components-reconnect-failed[b-e2k0hhoe2x],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-e2k0hhoe2x] {
    display: block;
}


#components-reconnect-modal[b-e2k0hhoe2x] {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    color: var(--ink-2);
    width: 22rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--plate);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.9);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-e2k0hhoe2x 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-e2k0hhoe2x 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-e2k0hhoe2x 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-e2k0hhoe2x]::backdrop {
    background-color: rgb(0 0 0 / 0.6);
    animation: components-reconnect-modal-fadeInOpacity-b-e2k0hhoe2x 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-e2k0hhoe2x {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-e2k0hhoe2x {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-e2k0hhoe2x {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-e2k0hhoe2x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-e2k0hhoe2x] {
    margin: 0;
    text-align: center;
}


.components-rejoining-animation[b-e2k0hhoe2x] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-e2k0hhoe2x] {
        position: absolute;
        border: 2px solid var(--accent);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-e2k0hhoe2x 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-e2k0hhoe2x] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-e2k0hhoe2x {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Ui/Dial.razor.rz.scp.css */
.dial[b-w5kzduoqhg] { width: 100%; max-width: 330px; aspect-ratio: 1; position: relative; margin: 0 auto; }

.dial-face[b-w5kzduoqhg] {
    position: absolute; inset: 13%; border-radius: 50%;
    background: radial-gradient(circle at 34% 18%, #fff 8%, color-mix(in oklab, var(--accent) 3%, #f5f5f9) 57%, color-mix(in oklab, var(--accent) 6%, #eeeef3) 79%, color-mix(in oklab, var(--accent) 9%, #e6e6ec));
    box-shadow: 0 14px 24px -19px #61558180, inset 0 2px 3px 2px #fff, inset 0 -2px 4px #9c98b31a;
    border: 1px solid #e7e7ef;
}
.dial-face[b-w5kzduoqhg]::after { content: ""; position: absolute; inset: 8px; border: 1px solid #ffffffcc; border-radius: 50%; }

.dial-svg[b-w5kzduoqhg] { width: 100%; height: 100%; position: absolute; inset: 0; overflow: visible; }
.dial-svg text[b-w5kzduoqhg] { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); }

.dial-arc[b-w5kzduoqhg] { stroke-dasharray: 1000; animation: dial-draw-b-w5kzduoqhg 1200ms var(--ease-out) both; }
.dial-end[b-w5kzduoqhg] { animation: dial-end-b-w5kzduoqhg 400ms 900ms var(--ease-out) both; }
@keyframes dial-draw-b-w5kzduoqhg { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes dial-end-b-w5kzduoqhg { from { opacity: 0; } to { opacity: 1; } }

.dial-center[b-w5kzduoqhg] {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding-top: 5px;
}
.dial-number[b-w5kzduoqhg] {
    font: 400 83px/.95 var(--font-display); letter-spacing: -0.065em; color: #2c293a;
    font-variant-numeric: tabular-nums;
}
.dial-number small[b-w5kzduoqhg] { font: 400 15px/1 var(--font-display); letter-spacing: 0; color: #817d91; margin-left: 3px; }
.is-empty .dial-number[b-w5kzduoqhg] { color: #b7b3c6; }
.dial-label[b-w5kzduoqhg] { font: 400 9px/1.5 var(--font-mono); letter-spacing: .1em; color: #6f6981; margin-top: 11px; text-transform: uppercase; }
.dial-change[b-w5kzduoqhg] {
    display: flex; align-items: center; gap: 4px; margin-top: 11px; padding: 4px 8px;
    font-size: 10px; color: var(--accent-text); background: var(--accent-soft);
    border: 1px solid color-mix(in oklab, var(--accent) 14%, white); border-radius: 5px;
}

.dial-footer[b-w5kzduoqhg] { display: flex; justify-content: center; margin-top: -2px; }
.dial-footer .pip[b-w5kzduoqhg] { font-size: 11px; color: #625f71; }

@media (max-width: 860px) {
    .dial-number[b-w5kzduoqhg] { font-size: 67px; }
    .dial-label[b-w5kzduoqhg] { font-size: 8px; }
}
@media (max-width: 540px) {
    .dial[b-w5kzduoqhg] { max-width: 295px; }
    .dial-number[b-w5kzduoqhg] { font-size: 79px; }
    .dial-label[b-w5kzduoqhg] { font-size: 9px; }
}
/* /Components/Ui/DistributionBar.razor.rz.scp.css */
.dist[b-hxpcp5102h] { display: grid; gap: 12px; margin-top: 10px; }
.dist-bar[b-hxpcp5102h] { display: flex; gap: 3px; height: 17px; }
.dist-bar i[b-hxpcp5102h] { border-radius: 1px; min-width: 3px; }
.dist-3[b-hxpcp5102h] { background: var(--accent); }
.dist-10[b-hxpcp5102h] { background: var(--accent-mid); }
.dist-20[b-hxpcp5102h] { background: var(--accent-light); }
.dist-100[b-hxpcp5102h] { background: color-mix(in oklab, var(--accent) 20%, #e5e4ed); }
.dist-none[b-hxpcp5102h] { background: #e5e4ed; }
.dist-legend[b-hxpcp5102h] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px 12px; }
.dist-legend li[b-hxpcp5102h] { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--ink-3); }
.dist-legend li i[b-hxpcp5102h] { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.dist-legend b[b-hxpcp5102h] { margin-left: auto; font: 500 11px var(--font-mono); color: var(--ink); }
/* /Components/Ui/FocusCard.razor.rz.scp.css */
.focus[b-evvtc6jm48] {
    align-self: start;
    padding: 20px 21px;
    background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, #ecebf0), color-mix(in oklab, var(--accent) 6%, #f6f6f9) 48%, #f9f8fd);
    border: 1px solid color-mix(in oklab, var(--accent) 16%, #e4e2ea);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 #ffffffb3;
}
.focus-label[b-evvtc6jm48] {
    display: flex; align-items: center; justify-content: space-between;
    font: 400 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
    color: color-mix(in oklab, var(--accent) 45%, #6b6477);
}
.focus h3[b-evvtc6jm48] { font: 400 var(--text-xl)/1.18 var(--font-display); letter-spacing: -0.03em; margin-top: 15px; }
.focus p[b-evvtc6jm48] { font-size: var(--text-xs); line-height: 1.7; color: #6f6979; margin-top: 9px; }
.focus-button[b-evvtc6jm48] { margin-top: 18px; font-weight: 400; font-size: var(--text-xs); min-height: 38px; }

@media (max-width: 540px) {
    .focus[b-evvtc6jm48] { padding: 21px; }
    .focus h3[b-evvtc6jm48] { font-size: 25px; }
    .focus p[b-evvtc6jm48] { font-size: 12px; }
}
/* /Components/Ui/ProgressRing.razor.rz.scp.css */
.ring[b-1ftn4rkfv1] { width: 54px; height: 54px; flex-shrink: 0; }
.ring text[b-1ftn4rkfv1] { font: 400 10px var(--font-mono); fill: #6f6c80; }
@media (max-width: 680px) { .ring[b-1ftn4rkfv1] { width: 42px; height: 42px; } }
/* /Components/Ui/RankBars.razor.rz.scp.css */
.rank-bars[b-k3hoy3hgxf] { display: flex; gap: 4px; align-items: flex-end; height: 24px; margin-top: -3px; }
.rank-bars i[b-k3hoy3hgxf] { flex: 1; background: var(--accent-mid); border-radius: 2px 2px 0 0; }
.rank-bars i.is-recent[b-k3hoy3hgxf] { background: var(--accent); }
.rank-bars.is-empty[b-k3hoy3hgxf] { border-bottom: 2px solid #e5e4ed; border-radius: 1px; }
.scale[b-k3hoy3hgxf] { display: flex; justify-content: space-between; margin-top: 7px; font: 400 9px var(--font-mono); color: var(--ink-3); }
/* /Components/Ui/RankChart.razor.rz.scp.css */
.chart[b-awa6yfjgsv] { position: relative; margin-top: 13px; min-width: 0; }
.chart-svg[b-awa6yfjgsv] { width: 100%; display: block; overflow: visible; }
.chart-svg text[b-awa6yfjgsv] { font: 400 10px var(--font-mono); fill: var(--ink-3); }
.chart-unit[b-awa6yfjgsv] { font-size: 8px !important; letter-spacing: .06em; }
.chart-end[b-awa6yfjgsv] { fill: var(--accent-text) !important; }

.chart-line[b-awa6yfjgsv] { stroke-dasharray: 1000; animation: chart-draw-b-awa6yfjgsv 1100ms var(--ease-out) both; }
@keyframes chart-draw-b-awa6yfjgsv { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

.chart-reveal[b-awa6yfjgsv] { opacity: 0; transition: opacity 120ms; pointer-events: none; }
.chart-col:hover .chart-reveal[b-awa6yfjgsv] { opacity: 1; }
.chart-tip[b-awa6yfjgsv] { fill: #292733; filter: drop-shadow(0 8px 10px #20193320); }
.chart-svg .chart-tip-text[b-awa6yfjgsv] { fill: #fff; font: 400 11px var(--font-ui); }
.chart-svg .chart-tip-value[b-awa6yfjgsv] { fill: #fff; font: 500 11px var(--font-mono); }
.chart-svg .is-previous[b-awa6yfjgsv] { fill: #c7c0db; }

.chart-legend[b-awa6yfjgsv] { display: flex; align-items: center; gap: 14px; margin-left: 33px; font-size: 10px; color: #7d7a8a; }
.chart-legend span[b-awa6yfjgsv] { display: flex; align-items: center; gap: 6px; }
.legend-dot[b-awa6yfjgsv] { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.legend-dash[b-awa6yfjgsv] { width: 12px; border-top: 1px dashed #b5b3c0; }

.chart-empty[b-awa6yfjgsv] { position: relative; display: grid; align-content: center; justify-items: start; padding-left: 33px; }
.chart-unit-html[b-awa6yfjgsv] { position: absolute; top: 0; left: 0; font: 400 8px var(--font-mono); letter-spacing: .06em; color: var(--ink-3); }
.chart-empty-grid[b-awa6yfjgsv] { position: absolute; inset: 21px 12px 30px 33px; display: grid; grid-template-rows: repeat(3, 1fr); }
.chart-empty-grid i[b-awa6yfjgsv] { border-top: 1px solid #ecebf2; }
.chart-empty-grid i:last-child[b-awa6yfjgsv] { border-bottom: 1px solid #e3e2ea; }
.chart-empty p[b-awa6yfjgsv] { position: relative; max-width: 42ch; padding: 10px 14px; font-size: var(--text-xs); color: var(--ink-3); background: #ffffffd9; border: 1px solid var(--plate-2); border-radius: var(--radius-sm); }
/* /Components/Ui/Segments.razor.rz.scp.css */
.segments[b-hip4v8860g] { display: flex; gap: 3px; height: 17px; margin-top: 4px; }
.segments i[b-hip4v8860g] { flex: 1; min-width: 0; background: #e5e4ed; border-radius: 1px; }
.segments i.is-filled[b-hip4v8860g] { background: var(--accent); opacity: .67; }
.scale[b-hip4v8860g] { display: flex; justify-content: space-between; margin-top: 7px; font: 400 9px var(--font-mono); color: var(--ink-3); }
/* /Components/Ui/TrafficChart.razor.rz.scp.css */
.chart[b-goepbimvrn] { position: relative; margin-top: 13px; min-width: 0; }
.chart-svg[b-goepbimvrn] { width: 100%; display: block; overflow: visible; }
.chart-svg text[b-goepbimvrn] { font: 400 10px var(--font-mono); fill: var(--ink-3); }
.chart-unit[b-goepbimvrn] { font-size: 8px !important; letter-spacing: .06em; }
.chart-end[b-goepbimvrn] { fill: var(--accent-text) !important; }

.chart-line[b-goepbimvrn] { stroke-dasharray: 1000; animation: chart-draw-b-goepbimvrn 1100ms var(--ease-out) both; }
@keyframes chart-draw-b-goepbimvrn { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

.chart-reveal[b-goepbimvrn] { opacity: 0; transition: opacity 120ms; pointer-events: none; }
.chart-col:hover .chart-reveal[b-goepbimvrn] { opacity: 1; }
.chart-tip[b-goepbimvrn] { fill: #292733; filter: drop-shadow(0 8px 10px #20193320); }
.chart-svg .chart-tip-text[b-goepbimvrn] { fill: #fff; font: 400 11px var(--font-ui); }
.chart-svg .chart-tip-value[b-goepbimvrn] { fill: #fff; font: 500 11px var(--font-mono); }
.chart-svg .is-previous[b-goepbimvrn] { fill: #c7c0db; }

.chart-legend[b-goepbimvrn] { display: flex; align-items: center; gap: 14px; margin-left: 33px; font-size: 10px; color: #7d7a8a; }
.chart-legend span[b-goepbimvrn] { display: flex; align-items: center; gap: 6px; }
.legend-dot[b-goepbimvrn] { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.legend-dash[b-goepbimvrn] { width: 12px; border-top: 1px dashed #b5b3c0; }

.chart-empty[b-goepbimvrn] { position: relative; display: grid; align-content: center; justify-items: start; padding-left: 33px; }
.chart-unit-html[b-goepbimvrn] { position: absolute; top: 0; left: 0; font: 400 8px var(--font-mono); letter-spacing: .06em; color: var(--ink-3); }
.chart-empty-grid[b-goepbimvrn] { position: absolute; inset: 21px 12px 30px 33px; display: grid; grid-template-rows: repeat(3, 1fr); }
.chart-empty-grid i[b-goepbimvrn] { border-top: 1px solid #ecebf2; }
.chart-empty-grid i:last-child[b-goepbimvrn] { border-bottom: 1px solid #e3e2ea; }
.chart-empty p[b-goepbimvrn] { position: relative; max-width: 42ch; padding: 10px 14px; font-size: var(--text-xs); color: var(--ink-3); background: #ffffffd9; border: 1px solid var(--plate-2); border-radius: var(--radius-sm); }