/* /Components/Analytics/AbTestMetricTrend.razor.rz.scp.css */
/* ===== AB TEST METRIC TREND ===== */
.amt-card[b-z7ggqw6kuw] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

/* ── Header ── */
.amt-header[b-z7ggqw6kuw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.amt-header-left[b-z7ggqw6kuw] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.amt-header-icon[b-z7ggqw6kuw] {
    width: 36px;
    height: 36px;
    background: rgba(99,102,241,0.10);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.amt-header-icon .material-icons[b-z7ggqw6kuw] {
    font-size: 19px;
    color: #6366f1;
}

.amt-title[b-z7ggqw6kuw] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.amt-sub[b-z7ggqw6kuw] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.amt-badge[b-z7ggqw6kuw] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.amt-badge .material-icons[b-z7ggqw6kuw] {
    font-size: 14px;
    color: #6366f1;
}

/* ── Metric tabs ── */
.amt-tabs[b-z7ggqw6kuw] {
    display: flex;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    padding: 0 18px;
}

.amt-tab[b-z7ggqw6kuw] {
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    background: transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
    white-space: nowrap;
    margin-bottom: -1px;
}

.amt-tab:hover[b-z7ggqw6kuw] { color: var(--text-primary); }

.amt-tab.active[b-z7ggqw6kuw] {
    color: #6366f1;
    border-bottom-color: #6366f1;
    font-weight: 600;
}

/* ── Legend strip ── */
.amt-legend-strip[b-z7ggqw6kuw] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.amt-legend-item[b-z7ggqw6kuw] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.amt-legend-dot[b-z7ggqw6kuw] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.amt-legend-name[b-z7ggqw6kuw] {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── Charts row ── */
.amt-charts-row[b-z7ggqw6kuw] {
    display: flex;
    flex: 1;
}

.amt-chart-panel[b-z7ggqw6kuw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.amt-chart-panel--right[b-z7ggqw6kuw] {
    border-left: 1px solid var(--border-light);
}

.amt-chart-panel-hdr[b-z7ggqw6kuw] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px 6px;
    flex-shrink: 0;
}

.amt-panel-title[b-z7ggqw6kuw] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.amt-panel-sub[b-z7ggqw6kuw] {
    font-size: 11px;
    color: var(--text-muted);
}

.amt-chart-body[b-z7ggqw6kuw] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.amt-chart-body canvas[b-z7ggqw6kuw] {
    width: 100% !important;
    height: 100% !important;
}

/* ── Footer ── */
.amt-footer[b-z7ggqw6kuw] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/AbTestTrafficTrend.razor.rz.scp.css */
/* ===== AB TEST TRAFFIC TREND ===== */
.att-card[b-msiky7vah9] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

/* ── Header ── */
.att-header[b-msiky7vah9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.att-header-left[b-msiky7vah9] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.att-header-icon[b-msiky7vah9] {
    width: 36px;
    height: 36px;
    background: #f0f9ff;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.att-header-icon .material-icons[b-msiky7vah9] {
    font-size: 19px;
    color: #0ea5e9;
}

.att-title[b-msiky7vah9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.att-sub[b-msiky7vah9] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.att-badge[b-msiky7vah9] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.att-badge .material-icons[b-msiky7vah9] {
    font-size: 14px;
    color: #0ea5e9;
}

/* ── Legend strip ── */
.att-legend-strip[b-msiky7vah9] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.att-legend-item[b-msiky7vah9] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.att-legend-dot[b-msiky7vah9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.att-legend-name[b-msiky7vah9] {
    color: var(--text-primary);
    font-weight: 600;
}

.att-legend-ctrl[b-msiky7vah9] {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 1px 6px;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* ── Chart body ── */
.att-chart-body[b-msiky7vah9] {
    position: relative;
    height: 280px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.att-chart-body canvas[b-msiky7vah9] {
    width: 100% !important;
    height: 100% !important;
}

/* ── Footer ── */
.att-footer[b-msiky7vah9] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/ActiveUsersByHourAnalysis.razor.rz.scp.css */
/* ── Card wrapper ── */
.abh-card[b-asl93wck9p] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Header ── */
.abh-header[b-asl93wck9p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.abh-header-left[b-asl93wck9p] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.abh-header-icon[b-asl93wck9p] {
    width: 38px;
    height: 38px;
    background: #ede9fe;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.abh-header-icon .material-icons[b-asl93wck9p] {
    font-size: 20px;
    color: #7c3aed;
}

.abh-title[b-asl93wck9p] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.abh-sub[b-asl93wck9p] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* ── Legend row ── */
.abh-legend-row[b-asl93wck9p] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.abh-legend-item[b-asl93wck9p] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.abh-legend-dot[b-asl93wck9p] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.abh-legend--night     .abh-legend-dot[b-asl93wck9p] { background: #64748b; }
.abh-legend--morning   .abh-legend-dot[b-asl93wck9p] { background: #f59e0b; }
.abh-legend--afternoon .abh-legend-dot[b-asl93wck9p] { background: #f97316; }
.abh-legend--evening   .abh-legend-dot[b-asl93wck9p] { background: #8b5cf6; }

/* ── KPI strip ── */
.abh-kpi-strip[b-asl93wck9p] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 0;
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.abh-kpi-item[b-asl93wck9p] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.abh-kpi-sep[b-asl93wck9p] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.abh-kpi-dot[b-asl93wck9p] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.abh-kpi-info[b-asl93wck9p] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.abh-kpi-label[b-asl93wck9p] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.abh-kpi-value[b-asl93wck9p] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ── Chart panel ── */
.abh-chart-panel[b-asl93wck9p] {
    padding: 16px 20px 18px;
    flex: 1;
}

/* ── Time-of-day band labels ── */
.abh-band-labels[b-asl93wck9p] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.abh-band[b-asl93wck9p] {
    font-size: 10.5px;
    font-weight: 600;
    text-align: center;
    padding: 4px 0;
    border-radius: 6px;
    letter-spacing: 0.02em;
}

.abh-band--night[b-asl93wck9p]     { background: #e2e8f0; color: #334155; }
.abh-band--morning[b-asl93wck9p]   { background: #fde68a; color: #92400e; }
.abh-band--afternoon[b-asl93wck9p] { background: #fed7aa; color: #9a3412; }
.abh-band--evening[b-asl93wck9p]   { background: #ddd6fe; color: #5b21b6; }

/* ── Chart canvas ── */
.abh-chart-body[b-asl93wck9p] {
    position: relative;
    height: 248px;
    padding: 8px 8px 0;
    box-sizing: border-box;
}

.abh-chart-body canvas[b-asl93wck9p] {
    width: 100% !important;
    height: 100% !important;
}
/* /Components/Analytics/AdRevenueSplitByAdType.razor.rz.scp.css */
/* ===== AdRevenueSplitByAdType (ars-*) ===== */
.ars-card[b-ql8jdbl36c] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.ars-header[b-ql8jdbl36c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.ars-header-left[b-ql8jdbl36c] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.ars-header-icon[b-ql8jdbl36c] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(16,185,129,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ars-header-icon .material-icons[b-ql8jdbl36c] { font-size: 20px; color: #10b981; }

.ars-title[b-ql8jdbl36c] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.ars-sub[b-ql8jdbl36c]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.ars-badge[b-ql8jdbl36c] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 700;
    color: #059669;
    flex-shrink: 0;
}

.ars-badge .material-icons[b-ql8jdbl36c] { font-size: 15px; color: #10b981; }

/* Tabs */
.ars-tabs[b-ql8jdbl36c] {
    padding: 10px 20px 10px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.ars-tabs-group[b-ql8jdbl36c] {
    display: flex;
    background: var(--bg-subtle);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.ars-tab[b-ql8jdbl36c] {
    flex: 1;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    background: transparent;
    transition: all 0.15s ease;
    text-align: center;
    white-space: nowrap;
}

.ars-tab.active[b-ql8jdbl36c] {
    background: #fff;
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Summary strip */
.ars-strip[b-ql8jdbl36c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.ars-strip-label[b-ql8jdbl36c] { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.ars-strip-value[b-ql8jdbl36c] { font-size: 13px; font-weight: 700; color: #10b981; font-variant-numeric: tabular-nums; }
.ars-strip-sep[b-ql8jdbl36c]   { width: 1px; height: 12px; background: var(--border); margin: 0 4px; }

/* Empty / Loading */
.ars-empty[b-ql8jdbl36c] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
}

/* Ranked list */
.ars-list[b-ql8jdbl36c] {
    display: flex;
    flex-direction: column;
    padding: 8px 0 4px;
}

.ars-row[b-ql8jdbl36c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px;
    transition: background 0.1s ease;
}

.ars-row:hover[b-ql8jdbl36c] { background: var(--bg-subtle); }

.ars-rank[b-ql8jdbl36c] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ars-rank--1[b-ql8jdbl36c] { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #d97706; }
.ars-rank--2[b-ql8jdbl36c] { background: rgba(107,114,128,0.12); border-color: rgba(107,114,128,0.3); color: #6b7280; }
.ars-rank--3[b-ql8jdbl36c] { background: rgba(180,83,9,0.10);   border-color: rgba(180,83,9,0.25);  color: #b45309; }

.ars-row-name[b-ql8jdbl36c] {
    width: 120px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.ars-bar-track[b-ql8jdbl36c] {
    flex: 1;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.ars-bar-fill[b-ql8jdbl36c] {
    height: 100%;
    background: #10b981;
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.ars-row-value[b-ql8jdbl36c] {
    width: 68px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.ars-row-pct[b-ql8jdbl36c] {
    width: 44px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Show more toggle */
.ars-footer-toggle[b-ql8jdbl36c] {
    display: flex;
    justify-content: center;
    padding: 8px 20px 12px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.ars-toggle-btn[b-ql8jdbl36c] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-subtle);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ars-toggle-btn:hover[b-ql8jdbl36c] {
    background: var(--bg-card);
    border-color: #10b981;
    color: #10b981;
}

.ars-toggle-btn .material-icons[b-ql8jdbl36c] { font-size: 16px; }
/* /Components/Analytics/AvgLevelReachedChart.razor.rz.scp.css */
.rcc-card[b-b7qscvi0pn] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rcc-header[b-b7qscvi0pn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.rcc-header-left[b-b7qscvi0pn] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.rcc-header-icon[b-b7qscvi0pn] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rcc-header-icon .material-icons[b-b7qscvi0pn] { font-size: 19px; }
.rcc-title[b-b7qscvi0pn] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.rcc-sub[b-b7qscvi0pn] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.rcc-badge[b-b7qscvi0pn] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.rcc-badge .material-icons[b-b7qscvi0pn] { font-size: 14px; }
.rcc-chart-body[b-b7qscvi0pn] {
    position: relative;
    height: 210px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
    flex: 1;
}
.rcc-chart-body canvas[b-b7qscvi0pn] {
    width: 100% !important;
    height: 100% !important;
}
/* /Components/Analytics/AvgOwnedResources.razor.rz.scp.css */
/* ===== AvgOwnedResources (eao-*) ===== */
.eao-card[b-r4wkcmg6p3] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.eao-header[b-r4wkcmg6p3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.eao-header-left[b-r4wkcmg6p3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.eao-header-icon[b-r4wkcmg6p3] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(59,130,246,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eao-header-icon .material-icons[b-r4wkcmg6p3] { font-size: 20px; color: #3b82f6; }

.eao-title[b-r4wkcmg6p3] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.eao-sub[b-r4wkcmg6p3]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.eao-badge[b-r4wkcmg6p3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.eao-badge .material-icons[b-r4wkcmg6p3] { font-size: 15px; color: #3b82f6; }

/* Empty / Loading */
.eao-empty[b-r4wkcmg6p3] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
}

/* Resource Grid */
.eao-grid[b-r4wkcmg6p3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 16px 20px 20px;
}

/* Tile */
.eao-tile[b-r4wkcmg6p3] {
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: default;
}

.eao-tile:hover[b-r4wkcmg6p3] {
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border-color: var(--border);
}

.eao-tile--first[b-r4wkcmg6p3] {
    background: #fff;
    border-color: var(--border);
}

/* Tile top row: icon + optional crown */
.eao-tile-top[b-r4wkcmg6p3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.eao-tile-icon[b-r4wkcmg6p3] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eao-tile-icon .material-icons[b-r4wkcmg6p3] { font-size: 18px; }

.eao-tile-crown[b-r4wkcmg6p3] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Tile content */
.eao-tile-name[b-r4wkcmg6p3] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eao-tile-value[b-r4wkcmg6p3] {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.eao-tile-label[b-r4wkcmg6p3] {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.01em;
}
/* /Components/Analytics/AvgRetentionChart.razor.rz.scp.css */
.rcc-card[b-9qqg4th9c7] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rcc-header[b-9qqg4th9c7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.rcc-header-left[b-9qqg4th9c7] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.rcc-header-icon[b-9qqg4th9c7] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rcc-header-icon .material-icons[b-9qqg4th9c7] { font-size: 19px; }
.rcc-title[b-9qqg4th9c7] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.rcc-sub[b-9qqg4th9c7] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.rcc-badge[b-9qqg4th9c7] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.rcc-badge .material-icons[b-9qqg4th9c7] { font-size: 14px; }
.rcc-kpi-strip[b-9qqg4th9c7] {
    display: flex;
    align-items: center;
    padding: 9px 18px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}
.rcc-kpi-item[b-9qqg4th9c7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.rcc-kpi-sep[b-9qqg4th9c7] {
    width: 1px;
    height: 26px;
    background: var(--border);
    margin: 0 14px;
    flex-shrink: 0;
}
.rcc-kpi-dot[b-9qqg4th9c7] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rcc-kpi-info[b-9qqg4th9c7] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.rcc-kpi-label[b-9qqg4th9c7] {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}
.rcc-kpi-value[b-9qqg4th9c7] {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.rcc-chart-body[b-9qqg4th9c7] {
    position: relative;
    height: 280px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}
.rcc-chart-body canvas[b-9qqg4th9c7] {
    width: 100% !important;
    height: 100% !important;
}
/* /Components/Analytics/AvgRRPlaytimeChart.razor.rz.scp.css */
.rcc-card[b-rjxjgf5xfq] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rcc-header[b-rjxjgf5xfq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.rcc-header-left[b-rjxjgf5xfq] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.rcc-header-icon[b-rjxjgf5xfq] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rcc-header-icon .material-icons[b-rjxjgf5xfq] { font-size: 19px; }
.rcc-title[b-rjxjgf5xfq] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.rcc-sub[b-rjxjgf5xfq] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.rcc-badge[b-rjxjgf5xfq] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.rcc-badge .material-icons[b-rjxjgf5xfq] { font-size: 14px; }
.rcc-chart-body[b-rjxjgf5xfq] {
    position: relative;
    height: 210px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
    flex: 1;
}
.rcc-chart-body canvas[b-rjxjgf5xfq] {
    width: 100% !important;
    height: 100% !important;
}
/* /Components/Analytics/AvgRRRevenueChart.razor.rz.scp.css */
.rcc-card[b-9qfdh74bpt] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rcc-header[b-9qfdh74bpt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.rcc-header-left[b-9qfdh74bpt] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.rcc-header-icon[b-9qfdh74bpt] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rcc-header-icon .material-icons[b-9qfdh74bpt] { font-size: 19px; }
.rcc-title[b-9qfdh74bpt] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.rcc-sub[b-9qfdh74bpt] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.rcc-badge[b-9qfdh74bpt] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.rcc-badge .material-icons[b-9qfdh74bpt] { font-size: 14px; }
.rcc-chart-body[b-9qfdh74bpt] {
    position: relative;
    height: 210px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
    flex: 1;
}
.rcc-chart-body canvas[b-9qfdh74bpt] {
    width: 100% !important;
    height: 100% !important;
}
/* /Components/Analytics/AvgRRRvuChart.razor.rz.scp.css */
.rcc-card[b-gzq1ab2334] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rcc-header[b-gzq1ab2334] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.rcc-header-left[b-gzq1ab2334] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.rcc-header-icon[b-gzq1ab2334] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rcc-header-icon .material-icons[b-gzq1ab2334] { font-size: 19px; }
.rcc-title[b-gzq1ab2334] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.rcc-sub[b-gzq1ab2334] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.rcc-badge[b-gzq1ab2334] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.rcc-badge .material-icons[b-gzq1ab2334] { font-size: 14px; }
.rcc-chart-body[b-gzq1ab2334] {
    position: relative;
    height: 210px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
    flex: 1;
}
.rcc-chart-body canvas[b-gzq1ab2334] {
    width: 100% !important;
    height: 100% !important;
}
/* /Components/Analytics/AvgRVUAnalysis.razor.rz.scp.css */
/* ===== AvgRVUAnalysis (eru-*) ===== */
.eru-card[b-y2u3nrozjs] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.eru-header[b-y2u3nrozjs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.eru-header-left[b-y2u3nrozjs] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.eru-header-icon[b-y2u3nrozjs] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(59,130,246,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eru-header-icon .material-icons[b-y2u3nrozjs] { font-size: 20px; color: #3b82f6; }

.eru-title[b-y2u3nrozjs] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.eru-sub[b-y2u3nrozjs]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.eru-badge[b-y2u3nrozjs] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.eru-badge .material-icons[b-y2u3nrozjs] { font-size: 15px; color: #3b82f6; }

/* KPI Strip */
.eru-kpi-strip[b-y2u3nrozjs] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.eru-kpi-item[b-y2u3nrozjs] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.eru-kpi-sep[b-y2u3nrozjs] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.eru-kpi-dot[b-y2u3nrozjs] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.eru-kpi-dot-2[b-y2u3nrozjs] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: -1.5px;
}

.eru-kpi-dot-3[b-y2u3nrozjs] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 1.5px;
}

.eru-kpi-info[b-y2u3nrozjs] { display: flex; flex-direction: column; gap: 1px; }

.eru-kpi-label[b-y2u3nrozjs] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.eru-kpi-value[b-y2u3nrozjs] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Charts row */
.eru-charts-row[b-y2u3nrozjs] {
    display: flex;
}

.eru-chart-panel[b-y2u3nrozjs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eru-chart-panel--right[b-y2u3nrozjs] {
    border-left: 1px solid var(--border-light);
}

/* Panel header */
.eru-chart-panel-header[b-y2u3nrozjs] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px;
    flex-shrink: 0;
}

.eru-chart-dot[b-y2u3nrozjs] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.eru-chart-label[b-y2u3nrozjs] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Chart body */
.eru-chart-body[b-y2u3nrozjs] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.eru-chart-body canvas[b-y2u3nrozjs] {
    width: 100% !important;
    height: 100% !important;
}

/* ── Level Comparison Panel ── */
.eru-chart-body--level[b-y2u3nrozjs] {
    height: auto;
    min-height: 248px;
    display: flex;
    align-items: stretch;
    padding: 16px 20px;
}

.eru-level-comp[b-y2u3nrozjs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.eru-lv-row[b-y2u3nrozjs] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.eru-lv-meta[b-y2u3nrozjs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.eru-lv-names[b-y2u3nrozjs] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.eru-lv-tier[b-y2u3nrozjs] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}

.eru-lv-sub[b-y2u3nrozjs] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 400;
}

.eru-lv-right[b-y2u3nrozjs] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.eru-lv-val[b-y2u3nrozjs] {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.eru-lv-crown[b-y2u3nrozjs] {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 20px;
}

.eru-lv-track[b-y2u3nrozjs] {
    width: 100%;
    height: 8px;
    background: var(--bg-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.eru-lv-fill[b-y2u3nrozjs] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 4px;
}

.eru-lv-insight[b-y2u3nrozjs] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: var(--bg-subtle);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 4px;
}

.eru-lv-insight .material-icons[b-y2u3nrozjs] {
    font-size: 14px;
    color: #6366f1;
    flex-shrink: 0;
}

.eru-lv-insight strong[b-y2u3nrozjs] {
    color: var(--text-primary);
    font-weight: 700;
}

/* Pagination footer */
.eru-footer[b-y2u3nrozjs] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/DailyActiveAnalysis.razor.rz.scp.css */
/* ===== DAU CARD ===== */
.dau-card[b-674o5gcdew] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.dau-header[b-674o5gcdew] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.dau-header-left[b-674o5gcdew] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dau-header-icon[b-674o5gcdew] {
    width: 38px;
    height: 38px;
    background: var(--color-primary-subtle);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dau-header-icon .material-icons[b-674o5gcdew] {
    font-size: 20px;
    color: var(--color-primary);
}

.dau-title[b-674o5gcdew] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.dau-sub[b-674o5gcdew] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.dau-badge[b-674o5gcdew] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.dau-badge .material-icons[b-674o5gcdew] {
    font-size: 15px;
    color: var(--color-primary);
}

/* ===== KPI STRIP ===== */
.dau-kpi-strip[b-674o5gcdew] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 0;
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.dau-kpi-item[b-674o5gcdew] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.dau-kpi-sep[b-674o5gcdew] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.dau-kpi-dot[b-674o5gcdew] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dau-kpi-info[b-674o5gcdew] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dau-kpi-label[b-674o5gcdew] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.dau-kpi-value[b-674o5gcdew] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ===== CHARTS ROW ===== */
.dau-charts-row[b-674o5gcdew] {
    display: flex;
}

.dau-chart-panel[b-674o5gcdew] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dau-chart-panel--right[b-674o5gcdew] {
    border-left: 1px solid var(--border-light);
}

.dau-chart-panel-header[b-674o5gcdew] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px 10px;
    flex-shrink: 0;
}

.dau-chart-dot[b-674o5gcdew] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dau-chart-label[b-674o5gcdew] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.dau-chart-sep[b-674o5gcdew] {
    width: 1px;
    height: 12px;
    background: var(--border);
    margin: 0 6px;
}

.dau-chart-body[b-674o5gcdew] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.dau-chart-body canvas[b-674o5gcdew] {
    width: 100% !important;
    height: 100% !important;
}

/* ===== PAGINATION FOOTER ===== */
.dau-footer[b-674o5gcdew] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/DailyAdImpressions.razor.rz.scp.css */
/* ===== DailyAdImpressions (adi-*) ===== */
.adi-card[b-ra4ey5dowm] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.adi-header[b-ra4ey5dowm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.adi-header-left[b-ra4ey5dowm] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.adi-header-icon[b-ra4ey5dowm] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(59,130,246,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.adi-header-icon .material-icons[b-ra4ey5dowm] { font-size: 20px; color: #3b82f6; }

.adi-title[b-ra4ey5dowm] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.adi-sub[b-ra4ey5dowm]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.adi-badge[b-ra4ey5dowm] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    flex-shrink: 0;
}

.adi-badge .material-icons[b-ra4ey5dowm] { font-size: 15px; color: #3b82f6; }

/* KPI Strip */
.adi-kpi-strip[b-ra4ey5dowm] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.adi-kpi-item[b-ra4ey5dowm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.adi-kpi-sep[b-ra4ey5dowm] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.adi-kpi-dot[b-ra4ey5dowm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adi-kpi-info[b-ra4ey5dowm] { display: flex; flex-direction: column; gap: 1px; }

.adi-kpi-label[b-ra4ey5dowm] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.adi-kpi-value[b-ra4ey5dowm] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Charts row */
.adi-charts-row[b-ra4ey5dowm] {
    display: flex;
}

.adi-chart-panel[b-ra4ey5dowm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.adi-chart-panel--right[b-ra4ey5dowm] {
    border-left: 1px solid var(--border-light);
}

/* Panel header */
.adi-chart-panel-header[b-ra4ey5dowm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px 10px;
    flex-shrink: 0;
}

.adi-chart-dot[b-ra4ey5dowm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adi-chart-label[b-ra4ey5dowm] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Chart body */
.adi-chart-body[b-ra4ey5dowm] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.adi-chart-body canvas[b-ra4ey5dowm] {
    width: 100% !important;
    height: 100% !important;
}

/* Pagination footer */
.adi-footer[b-ra4ey5dowm] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/DailyAdImpressionsBreakdown.razor.rz.scp.css */
/* ===== DailyAdImpressionsBreakdown (adib-*) ===== */
.adib-card[b-6x10m2a6b0] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.adib-header[b-6x10m2a6b0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.adib-header-left[b-6x10m2a6b0] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.adib-header-icon[b-6x10m2a6b0] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99,102,241,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.adib-header-icon .material-icons[b-6x10m2a6b0] { font-size: 20px; color: #6366f1; }

.adib-title[b-6x10m2a6b0] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.adib-sub[b-6x10m2a6b0]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

/* Tabs */
.adib-tabs[b-6x10m2a6b0] {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.adib-tabs-group[b-6x10m2a6b0] {
    display: flex;
    background: var(--bg-subtle);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.adib-tab[b-6x10m2a6b0] {
    flex: 1;
    padding: 5px 14px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    background: transparent;
    transition: all 0.15s ease;
    text-align: center;
    white-space: nowrap;
}

.adib-tab.active[b-6x10m2a6b0] {
    background: #ffffff;
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Charts row */
.adib-charts-row[b-6x10m2a6b0] {
    display: flex;
}

.adib-chart-panel[b-6x10m2a6b0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.adib-chart-panel--right[b-6x10m2a6b0] {
    border-left: 1px solid var(--border-light);
}

/* Panel header — fixed height so both panels always align */
.adib-chart-panel-header[b-6x10m2a6b0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px 0 10px;
    height: 34px;
    flex-shrink: 0;
    flex-wrap: wrap;
    overflow: hidden;
}

.adib-chart-dot[b-6x10m2a6b0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 10px;
}

.adib-chart-label[b-6x10m2a6b0] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}


/* Chart body */
.adib-chart-body[b-6x10m2a6b0] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.adib-chart-body canvas[b-6x10m2a6b0] {
    width: 100% !important;
    height: 100% !important;
}

/* Pagination footer */
.adib-footer[b-6x10m2a6b0] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}


/* KPI Strip */
.adr-kpi-strip[b-6x10m2a6b0] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.adr-kpi-item[b-6x10m2a6b0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.adr-kpi-sep[b-6x10m2a6b0] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.adr-kpi-dot[b-6x10m2a6b0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adr-kpi-info[b-6x10m2a6b0] { display: flex; flex-direction: column; gap: 1px; }

.adr-kpi-label[b-6x10m2a6b0] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.adr-kpi-value[b-6x10m2a6b0] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
/* /Components/Analytics/DailyAdRevenueAnalysis.razor.rz.scp.css */
/* ===== DailyAdRevenueAnalysis (adr-*) ===== */
.adr-card[b-6n2ilw2gh0] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.adr-header[b-6n2ilw2gh0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.adr-header-left[b-6n2ilw2gh0] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.adr-header-icon[b-6n2ilw2gh0] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(249,115,22,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.adr-header-icon .material-icons[b-6n2ilw2gh0] { font-size: 20px; color: #f97316; }

.adr-title[b-6n2ilw2gh0] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.adr-sub[b-6n2ilw2gh0]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.adr-badge[b-6n2ilw2gh0] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #ea580c;
    flex-shrink: 0;
}

.adr-badge .material-icons[b-6n2ilw2gh0] { font-size: 15px; color: #f97316; }

/* KPI Strip */
.adr-kpi-strip[b-6n2ilw2gh0] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.adr-kpi-item[b-6n2ilw2gh0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.adr-kpi-sep[b-6n2ilw2gh0] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.adr-kpi-dot[b-6n2ilw2gh0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adr-kpi-info[b-6n2ilw2gh0] { display: flex; flex-direction: column; gap: 1px; }

.adr-kpi-label[b-6n2ilw2gh0] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.adr-kpi-value[b-6n2ilw2gh0] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Charts row */
.adr-charts-row[b-6n2ilw2gh0] {
    display: flex;
}

.adr-chart-panel[b-6n2ilw2gh0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.adr-chart-panel--right[b-6n2ilw2gh0] {
    border-left: 1px solid var(--border-light);
}

/* Panel header */
.adr-chart-panel-header[b-6n2ilw2gh0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px 10px;
    flex-shrink: 0;
}

.adr-chart-dot[b-6n2ilw2gh0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adr-chart-label[b-6n2ilw2gh0] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Chart body */
.adr-chart-body[b-6n2ilw2gh0] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.adr-chart-body canvas[b-6n2ilw2gh0] {
    width: 100% !important;
    height: 100% !important;
}

/* Pagination footer */
.adr-footer[b-6n2ilw2gh0] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/DailyAdRevenueBreakdown.razor.rz.scp.css */
/* ===== DailyAdRevenueBreakdown (adb-*) ===== */
.adb-card[b-um2r8p6qk9] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.adb-header[b-um2r8p6qk9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.adb-header-left[b-um2r8p6qk9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.adb-header-icon[b-um2r8p6qk9] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99,102,241,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.adb-header-icon .material-icons[b-um2r8p6qk9] { font-size: 20px; color: #6366f1; }

.adb-title[b-um2r8p6qk9] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.adb-sub[b-um2r8p6qk9]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

/* Tabs */
.adb-tabs[b-um2r8p6qk9] {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.adb-tabs-group[b-um2r8p6qk9] {
    display: flex;
    background: var(--bg-subtle);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.adb-tab[b-um2r8p6qk9] {
    flex: 1;
    padding: 5px 14px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    background: transparent;
    transition: all 0.15s ease;
    text-align: center;
    white-space: nowrap;
}

.adb-tab.active[b-um2r8p6qk9] {
    background: #ffffff;
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Charts row */
.adb-charts-row[b-um2r8p6qk9] {
    display: flex;
}

.adb-chart-panel[b-um2r8p6qk9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.adb-chart-panel--right[b-um2r8p6qk9] {
    border-left: 1px solid var(--border-light);
}

/* Panel header */
.adb-chart-panel-header[b-um2r8p6qk9] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px;
    flex-shrink: 0;
}

.adb-chart-dot[b-um2r8p6qk9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adb-chart-label[b-um2r8p6qk9] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Chart body */
.adb-chart-body[b-um2r8p6qk9] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.adb-chart-body canvas[b-um2r8p6qk9] {
    width: 100% !important;
    height: 100% !important;
}

/* Pagination footer */
.adb-footer[b-um2r8p6qk9] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/DailyEarnedAnalysis.razor.rz.scp.css */
/* ===== DailyEarnedAnalysis (efs-*) ===== */
.efs-card[b-lh5mkb2n4m] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.efs-header[b-lh5mkb2n4m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.efs-header-left[b-lh5mkb2n4m] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.efs-header-right[b-lh5mkb2n4m] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.efs-header-icon[b-lh5mkb2n4m] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(249,115,22,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.efs-header-icon .material-icons[b-lh5mkb2n4m] { font-size: 20px; color: #f97316; }

.efs-title[b-lh5mkb2n4m] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.efs-sub[b-lh5mkb2n4m]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.efs-badge[b-lh5mkb2n4m] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #ea580c;
    flex-shrink: 0;
}

.efs-badge .material-icons[b-lh5mkb2n4m] { font-size: 15px; color: #f97316; }

/* KPI Strip */
.efs-kpi-strip[b-lh5mkb2n4m] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.efs-kpi-item[b-lh5mkb2n4m] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.efs-kpi-sep[b-lh5mkb2n4m] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.efs-kpi-dot[b-lh5mkb2n4m]  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.efs-kpi-dot-2[b-lh5mkb2n4m]  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-left: -1px }
.efs-kpi-info[b-lh5mkb2n4m] { display: flex; flex-direction: column; gap: 1px; }

.efs-kpi-label[b-lh5mkb2n4m] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.efs-kpi-value[b-lh5mkb2n4m] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Tabs — full-width segmented control */
.efs-tabs[b-lh5mkb2n4m] {
    padding: 10px 20px 0;
    flex-shrink: 0;
}

.efs-tabs-group[b-lh5mkb2n4m] {
    display: flex;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.efs-tab[b-lh5mkb2n4m] {
    flex: 1;
    padding: 5px 14px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    background: transparent;
    transition: all 0.15s ease;
    text-align: center;
    white-space: nowrap;
}

.efs-tab.active[b-lh5mkb2n4m] {
    background: #ffffff;
    color: var(--text-primary);
    font-weight: 600;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Charts row */
.efs-charts-row[b-lh5mkb2n4m] {
    display: flex;
}

.efs-chart-panel[b-lh5mkb2n4m] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.efs-chart-panel--right[b-lh5mkb2n4m] {
    border-left: 1px solid var(--border-light);
}

/* Panel header — transparent, inline legend */
.efs-chart-panel-header[b-lh5mkb2n4m] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px;
    flex-shrink: 0;
}

.efs-chart-dot[b-lh5mkb2n4m] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.efs-chart-label[b-lh5mkb2n4m] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Chart body */
.efs-chart-body[b-lh5mkb2n4m] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.efs-chart-body canvas[b-lh5mkb2n4m] {
    width: 100% !important;
    height: 100% !important;
}

/* Pagination footer */
.efs-footer[b-lh5mkb2n4m] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/DailyEconomicInOutAnalysis.razor.rz.scp.css */
/* ===== DailyEconomicInOutAnalysis (eio-*) ===== */
.eio-card[b-jk727mu2l9] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.eio-header[b-jk727mu2l9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.eio-header-left[b-jk727mu2l9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.eio-header-icon[b-jk727mu2l9] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99,102,241,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eio-header-icon .material-icons[b-jk727mu2l9] { font-size: 20px; color: #6366f1; }

.eio-title[b-jk727mu2l9] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.eio-sub[b-jk727mu2l9]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.eio-badge[b-jk727mu2l9] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.eio-badge .material-icons[b-jk727mu2l9] { font-size: 15px; color: #6366f1; }

/* KPI Strip */
.eio-kpi-strip[b-jk727mu2l9] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.eio-kpi-item[b-jk727mu2l9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.eio-kpi-sep[b-jk727mu2l9] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.eio-kpi-dot[b-jk727mu2l9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.eio-kpi-info[b-jk727mu2l9] { display: flex; flex-direction: column; gap: 1px; }

.eio-kpi-label[b-jk727mu2l9] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.eio-kpi-value[b-jk727mu2l9] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Charts row */
.eio-charts-row[b-jk727mu2l9] {
    display: flex;
}

.eio-chart-panel[b-jk727mu2l9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eio-chart-panel--right[b-jk727mu2l9] {
    border-left: 1px solid var(--border-light);
}

/* Panel header — transparent, inline legend */
.eio-chart-panel-header[b-jk727mu2l9] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px 10px;
    flex-shrink: 0;
}

.eio-chart-dot[b-jk727mu2l9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.eio-chart-label[b-jk727mu2l9] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.eio-chart-sep[b-jk727mu2l9] {
    width: 1px;
    height: 12px;
    background: var(--border);
    margin: 0 6px;
}

/* Chart body */
.eio-chart-body[b-jk727mu2l9] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.eio-chart-body canvas[b-jk727mu2l9] {
    width: 100% !important;
    height: 100% !important;
}

/* Pagination footer */
.eio-footer[b-jk727mu2l9] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/DailyEconomicInoutAvg.razor.rz.scp.css */
/* ===== DailyEconomicInoutAvg (eia-*) ===== */
.eia-card[b-w4vlmd9tmr] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.eia-header[b-w4vlmd9tmr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.eia-header-left[b-w4vlmd9tmr] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.eia-header-icon[b-w4vlmd9tmr] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(245,158,11,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eia-header-icon .material-icons[b-w4vlmd9tmr] { font-size: 20px; color: #f59e0b; }

.eia-title[b-w4vlmd9tmr] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.eia-sub[b-w4vlmd9tmr]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.eia-badge[b-w4vlmd9tmr] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.eia-badge .material-icons[b-w4vlmd9tmr] { font-size: 15px; color: #f59e0b; }

/* KPI Strip */
.eia-kpi-strip[b-w4vlmd9tmr] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.eia-kpi-item[b-w4vlmd9tmr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.eia-kpi-sep[b-w4vlmd9tmr] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.eia-kpi-dot[b-w4vlmd9tmr]  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.eia-kpi-info[b-w4vlmd9tmr] { display: flex; flex-direction: column; gap: 1px; }

.eia-kpi-dot-2[b-w4vlmd9tmr] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-left: 4px }

.eia-kpi-label[b-w4vlmd9tmr] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.eia-kpi-value[b-w4vlmd9tmr] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Charts row */
.eia-charts-row[b-w4vlmd9tmr] {
    display: flex;
}

.eia-chart-panel[b-w4vlmd9tmr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eia-chart-panel--right[b-w4vlmd9tmr] {
    border-left: 1px solid var(--border-light);
}

/* Panel header — transparent, inline legend */
.eia-chart-panel-header[b-w4vlmd9tmr] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px 10px;
    flex-shrink: 0;
}

.eia-chart-dot[b-w4vlmd9tmr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.eia-chart-label[b-w4vlmd9tmr] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Chart body */
.eia-chart-body[b-w4vlmd9tmr] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.eia-chart-body canvas[b-w4vlmd9tmr] {
    width: 100% !important;
    height: 100% !important;
}

/* Pagination footer */
.eia-footer[b-w4vlmd9tmr] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/DailyIAPRevenueAnalysis.razor.rz.scp.css */
/* ===== DailyIAPRevenueAnalysis (mir-*) ===== */
.mir-card[b-2jhgrt9ynk] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.mir-header[b-2jhgrt9ynk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.mir-header-left[b-2jhgrt9ynk] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.mir-header-icon[b-2jhgrt9ynk] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(16,185,129,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mir-header-icon .material-icons[b-2jhgrt9ynk] { font-size: 20px; color: #10b981; }

.mir-title[b-2jhgrt9ynk] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.mir-sub[b-2jhgrt9ynk]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.mir-header-right[b-2jhgrt9ynk] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Badge */
.mir-badge[b-2jhgrt9ynk] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #059669;
}

.mir-badge .material-icons[b-2jhgrt9ynk] { font-size: 15px; color: #10b981; }

/* Toggle */
.mir-toggle[b-2jhgrt9ynk] {
    display: flex;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.mir-toggle-btn[b-2jhgrt9ynk] {
    padding: 4px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mir-toggle-btn.active[b-2jhgrt9ynk] {
    background: white;
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

/* KPI Strip */
.mir-kpi-strip[b-2jhgrt9ynk] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.mir-kpi-item[b-2jhgrt9ynk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.mir-kpi-sep[b-2jhgrt9ynk] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.mir-kpi-dot[b-2jhgrt9ynk] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mir-kpi-info[b-2jhgrt9ynk] { display: flex; flex-direction: column; gap: 1px; }

.mir-kpi-label[b-2jhgrt9ynk] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.mir-kpi-value[b-2jhgrt9ynk] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Charts row */
.mir-charts-row[b-2jhgrt9ynk] {
    display: flex;
}

.mir-chart-panel[b-2jhgrt9ynk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mir-chart-panel--right[b-2jhgrt9ynk] {
    border-left: 1px solid var(--border-light);
}

/* Panel header — inline legend, no background */
.mir-chart-panel-header[b-2jhgrt9ynk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.mir-chart-dot[b-2jhgrt9ynk] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mir-chart-label[b-2jhgrt9ynk] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.mir-chart-sep[b-2jhgrt9ynk] {
    width: 1px;
    height: 12px;
    background: var(--border);
    margin: 0 6px;
}

/* Chart body */
.mir-chart-body[b-2jhgrt9ynk] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.mir-chart-body canvas[b-2jhgrt9ynk] {
    width: 100% !important;
    height: 100% !important;
}

/* Pagination footer */
.mir-footer[b-2jhgrt9ynk] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/DailyPayingUserAnalysis.razor.rz.scp.css */
/* ===== DailyPayingUserAnalysis ===== */
.mpu-card[b-pm6usfd8hx] { background:#fff; border-radius:14px; border:1px solid #e5e7eb; overflow:hidden; }
.mpu-header[b-pm6usfd8hx] { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 12px; border-bottom:1px solid #f1f5f9; }
.mpu-header-left[b-pm6usfd8hx] { display:flex; align-items:center; gap:12px; }
.mpu-header-icon[b-pm6usfd8hx] { width:38px; height:38px; border-radius:10px; background:rgba(59,130,246,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mpu-header-icon .material-icons[b-pm6usfd8hx] { font-size:20px; color:#3b82f6; }
.mpu-title[b-pm6usfd8hx] { font-size:15px; font-weight:600; color:#0f172a; }
.mpu-sub[b-pm6usfd8hx] { font-size:12px; color:#64748b; margin-top:2px; }
.mpu-toggle[b-pm6usfd8hx] { display:flex; background:#f3f4f6; border-radius:8px; padding:3px; gap:2px; }
.mpu-toggle-btn[b-pm6usfd8hx] { padding:4px 12px; border-radius:6px; border:none; background:transparent; font-size:12px; font-weight:500; color:#64748b; cursor:pointer; transition:all 0.15s; }
.mpu-toggle-btn.active[b-pm6usfd8hx] { background:#fff; color:#111827; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.mpu-charts-row[b-pm6usfd8hx] { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.mpu-chart-panel[b-pm6usfd8hx] { border-right:1px solid #f1f5f9; }
.mpu-chart-panel:last-child[b-pm6usfd8hx] { border-right:none; }
.mpu-chart-panel-header[b-pm6usfd8hx] { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #f1f5f9; background:#fafafa; }
.mpu-chart-dot[b-pm6usfd8hx] { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.mpu-chart-label[b-pm6usfd8hx] { font-size:12px; font-weight:500; color:#374151; }
.mpu-chart-body[b-pm6usfd8hx] { height:248px; position:relative; box-sizing:border-box; }
.mpu-footer[b-pm6usfd8hx] { padding:0 8px 4px; border-top:1px solid #f1f5f9; margin-top:14px; }
/* /Components/Analytics/DailyPayingUserTrendAnalysis.razor.rz.scp.css */
/* ===== DailyPayingUserTrendAnalysis (mpu-*) ===== */
.mpu-card[b-rlwmfkxapo] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.mpu-header[b-rlwmfkxapo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.mpu-header-left[b-rlwmfkxapo] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.mpu-header-icon[b-rlwmfkxapo] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99,102,241,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mpu-header-icon .material-icons[b-rlwmfkxapo] { font-size: 20px; color: #6366f1; }

.mpu-title[b-rlwmfkxapo] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.mpu-sub[b-rlwmfkxapo]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.mpu-badge[b-rlwmfkxapo] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.mpu-badge .material-icons[b-rlwmfkxapo] { font-size: 15px; color: #10b981; }

/* KPI Strip */
.mpu-kpi-strip[b-rlwmfkxapo] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.mpu-kpi-item[b-rlwmfkxapo] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.mpu-kpi-sep[b-rlwmfkxapo] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.mpu-kpi-dot[b-rlwmfkxapo] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mpu-kpi-info[b-rlwmfkxapo] { display: flex; flex-direction: column; gap: 1px; }

.mpu-kpi-label[b-rlwmfkxapo] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.mpu-kpi-value[b-rlwmfkxapo] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Charts row */
.mpu-charts-row[b-rlwmfkxapo] {
    display: flex;
}

.mpu-chart-panel[b-rlwmfkxapo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mpu-chart-panel--right[b-rlwmfkxapo] {
    border-left: 1px solid var(--border-light);
}

/* Panel header */
.mpu-chart-panel-header[b-rlwmfkxapo] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px 10px;
    flex-shrink: 0;
}

/* Chart body */
.mpu-chart-body[b-rlwmfkxapo] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.mpu-chart-body canvas[b-rlwmfkxapo] {
    width: 100% !important;
    height: 100% !important;
}

/* Pagination footer */
.mpu-footer[b-rlwmfkxapo] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/DailyPurchaseTrendAnalysis.razor.rz.scp.css */
/* ===== DailyPurchaseTrendAnalysis (dpt-*) ===== */
.dpt-card[b-3pwjl4mfk0] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.dpt-header[b-3pwjl4mfk0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.dpt-header-left[b-3pwjl4mfk0] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.dpt-header-icon[b-3pwjl4mfk0] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99,102,241,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dpt-header-icon .material-icons[b-3pwjl4mfk0] { font-size: 20px; color: #6366f1; }

.dpt-title[b-3pwjl4mfk0] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.dpt-sub[b-3pwjl4mfk0]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.dpt-badge[b-3pwjl4mfk0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.dpt-badge .material-icons[b-3pwjl4mfk0] { font-size: 15px; color: #6366f1; }

/* KPI Strip */
.dpt-kpi-strip[b-3pwjl4mfk0] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.dpt-kpi-item[b-3pwjl4mfk0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.dpt-kpi-sep[b-3pwjl4mfk0] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.dpt-kpi-dot[b-3pwjl4mfk0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dpt-kpi-info[b-3pwjl4mfk0] { display: flex; flex-direction: column; gap: 1px; }

.dpt-kpi-label[b-3pwjl4mfk0] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.dpt-kpi-value[b-3pwjl4mfk0] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Charts row */
.dpt-charts-row[b-3pwjl4mfk0] {
    display: flex;
}

.dpt-chart-panel[b-3pwjl4mfk0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dpt-chart-panel--right[b-3pwjl4mfk0] {
    border-left: 1px solid var(--border-light);
}

/* Panel header */
.dpt-chart-panel-header[b-3pwjl4mfk0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px 10px;
    flex-shrink: 0;
}

/* Chart body */
.dpt-chart-body[b-3pwjl4mfk0] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.dpt-chart-body canvas[b-3pwjl4mfk0] {
    width: 100% !important;
    height: 100% !important;
}

/* Pagination footer */
.dpt-footer[b-3pwjl4mfk0] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/DailySessionAnalysis.razor.rz.scp.css */
/* ===== SESSION ANALYTICS CARD ===== */
.dsa-card[b-nci5qioq65] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dsa-header[b-nci5qioq65] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.dsa-header-left[b-nci5qioq65] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dsa-header-icon[b-nci5qioq65] {
    width: 38px;
    height: 38px;
    background: #ede9fe;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dsa-header-icon .material-icons[b-nci5qioq65] {
    font-size: 20px;
    color: #7c3aed;
}

.dsa-title[b-nci5qioq65] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.dsa-sub[b-nci5qioq65] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* ===== KPI STRIP ===== */
.dsa-kpi-strip[b-nci5qioq65] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 0;
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.dsa-kpi-item[b-nci5qioq65] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.dsa-kpi-sep[b-nci5qioq65] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.dsa-kpi-dot[b-nci5qioq65] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dsa-kpi-dot-2[b-nci5qioq65] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 4px;
}

.dsa-kpi-info[b-nci5qioq65] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dsa-kpi-label[b-nci5qioq65] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.dsa-kpi-value[b-nci5qioq65] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ===== CHARTS ROW ===== */
.dsa-charts-row[b-nci5qioq65] {
    display: flex;
}

.dsa-chart-panel[b-nci5qioq65] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dsa-chart-panel--right[b-nci5qioq65] {
    border-left: 1px solid var(--border-light);
}

.dsa-chart-panel-header[b-nci5qioq65] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px 10px;
    flex-shrink: 0;
}

.dsa-chart-dot[b-nci5qioq65] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dsa-chart-label[b-nci5qioq65] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.dsa-chart-body[b-nci5qioq65] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.dsa-chart-body canvas[b-nci5qioq65] {
    width: 100% !important;
    height: 100% !important;
}

/* ===== PAGINATION FOOTER ===== */
.dsa-footer[b-nci5qioq65] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/DaysSinceLevelReachAnalysis.razor.rz.scp.css */
/* Component-specific styles */
/* /Components/Analytics/EventEngagementAnalysis.razor.rz.scp.css */
/* Event Engagement Analysis - using .dau-* pattern from DailyActiveAnalysis */
.dau-card[b-39edqo6hev] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dau-header[b-39edqo6hev] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.dau-header-left[b-39edqo6hev] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dau-header-icon[b-39edqo6hev] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dau-header-icon .material-icons[b-39edqo6hev] {
    font-size: 20px;
}

.dau-title[b-39edqo6hev] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.dau-sub[b-39edqo6hev] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.dau-kpi-strip[b-39edqo6hev] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 0;
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.dau-kpi-item[b-39edqo6hev] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.dau-kpi-sep[b-39edqo6hev] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.dau-kpi-dot[b-39edqo6hev] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dau-kpi-info[b-39edqo6hev] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dau-kpi-label[b-39edqo6hev] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.dau-kpi-value[b-39edqo6hev] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.dau-charts-row[b-39edqo6hev] {
    display: flex;
}

.dau-chart-panel[b-39edqo6hev] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dau-chart-panel--right[b-39edqo6hev] {
    border-left: 1px solid var(--border-light);
}

.dau-chart-panel-header[b-39edqo6hev] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px 10px;
    flex-shrink: 0;
}

.dau-chart-body[b-39edqo6hev] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.dau-chart-body canvas[b-39edqo6hev] {
    width: 100% !important;
    height: 100% !important;
}

.dau-footer[b-39edqo6hev] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}

/* Legend pill toggle */
.lgd-pill[b-39edqo6hev] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.lgd-pill:hover[b-39edqo6hev] {
    background: var(--bg-subtle);
}

.lgd-pill--off[b-39edqo6hev] {
    opacity: 0.4;
}

.lgd-pill--off .lgd-dot[b-39edqo6hev] {
    background: #d1d5db !important;
}

.lgd-dot[b-39edqo6hev] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lgd-label[b-39edqo6hev] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
}
/* /Components/Analytics/EventVolumeAnalysis.razor.rz.scp.css */
/* Event Volume Analysis - using .dau-* pattern from DailyActiveAnalysis */
.dau-card[b-sitsowa1zf] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dau-header[b-sitsowa1zf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.dau-header-left[b-sitsowa1zf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dau-header-icon[b-sitsowa1zf] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dau-header-icon .material-icons[b-sitsowa1zf] {
    font-size: 20px;
}

.dau-title[b-sitsowa1zf] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.dau-sub[b-sitsowa1zf] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.dau-kpi-strip[b-sitsowa1zf] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 0;
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.dau-kpi-item[b-sitsowa1zf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.dau-kpi-sep[b-sitsowa1zf] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.dau-kpi-dot[b-sitsowa1zf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dau-kpi-info[b-sitsowa1zf] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dau-kpi-label[b-sitsowa1zf] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.dau-kpi-value[b-sitsowa1zf] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.dau-charts-row[b-sitsowa1zf] {
    display: flex;
}

.dau-chart-panel[b-sitsowa1zf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dau-chart-panel--right[b-sitsowa1zf] {
    border-left: 1px solid var(--border-light);
}

.dau-chart-panel-header[b-sitsowa1zf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 6px 10px;
    flex-shrink: 0;
}

.dau-chart-body[b-sitsowa1zf] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.dau-chart-body canvas[b-sitsowa1zf] {
    width: 100% !important;
    height: 100% !important;
}

.dau-footer[b-sitsowa1zf] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}

/* Legend pill toggle */
.lgd-pill[b-sitsowa1zf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.lgd-pill:hover[b-sitsowa1zf] {
    background: var(--bg-subtle);
}

.lgd-pill--off[b-sitsowa1zf] {
    opacity: 0.4;
}

.lgd-pill--off .lgd-dot[b-sitsowa1zf] {
    background: #d1d5db !important;
}

.lgd-dot[b-sitsowa1zf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lgd-label[b-sitsowa1zf] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
}
/* /Components/Analytics/FilterBar.razor.rz.scp.css */
/* ── Trigger row ── */
.fm-trigger[b-cjj3t7wxg0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
    position: relative;
    box-sizing: border-box;
}

.fm-trigger .material-icons[b-cjj3t7wxg0] {
    font-size: 15px;
    color: #6b7280;
}

.fm-trigger:hover[b-cjj3t7wxg0] {
    border-color: #c7d2fe;
    background: #fafafa;
}

.fm-trigger-active[b-cjj3t7wxg0] {
    border-color: #7B61FF;
    background: #f5f3ff;
    color: #5b3fd4;
}

.fm-trigger-active .material-icons[b-cjj3t7wxg0] {
    color: #7B61FF;
}

.fm-trigger-badge[b-cjj3t7wxg0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #7B61FF;
    color: #fff;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* ── Backdrop ── */
.fm-backdrop[b-cjj3t7wxg0] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.35);
    backdrop-filter: blur(3px);
    z-index: 1000;
    animation: fmFadeIn-b-cjj3t7wxg0 0.18s ease both;
}

.fm-backdrop--out[b-cjj3t7wxg0] { animation: fmFadeOut-b-cjj3t7wxg0 0.2s ease forwards; }

/* ── Panel ── */
.fm-panel[b-cjj3t7wxg0] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    max-width: calc(100vw - 32px);
    max-height: 90vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0,0,0,0.06);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fmSlideIn-b-cjj3t7wxg0 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.fm-panel--out[b-cjj3t7wxg0] { animation: fmSlideOut-b-cjj3t7wxg0 0.2s ease forwards; }

@keyframes fmFadeIn-b-cjj3t7wxg0  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fmFadeOut-b-cjj3t7wxg0 { from { opacity: 1; } to { opacity: 0; } }
@keyframes fmSlideIn-b-cjj3t7wxg0  { from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes fmSlideOut-b-cjj3t7wxg0 { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -48%) scale(0.95); } }

/* ── Header ── */
.fm-header[b-cjj3t7wxg0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 16px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.fm-title[b-cjj3t7wxg0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 650;
    color: #111827;
}

.fm-title .material-icons[b-cjj3t7wxg0] {
    font-size: 20px;
    color: #7B61FF;
}

.fm-header-right[b-cjj3t7wxg0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fm-reset-btn[b-cjj3t7wxg0] {
    padding: 5px 12px;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.fm-reset-btn:hover[b-cjj3t7wxg0] {
    border-color: #ef4444;
    color: #ef4444;
}

.fm-close-btn[b-cjj3t7wxg0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #9ca3af;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.fm-close-btn:hover[b-cjj3t7wxg0] {
    background: #f3f4f6;
    color: #374151;
}

.fm-close-btn .material-icons[b-cjj3t7wxg0] {
    font-size: 20px;
}

/* ── Body ── */
.fm-body[b-cjj3t7wxg0] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Section ── */
.fm-section[b-cjj3t7wxg0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fm-section-label[b-cjj3t7wxg0] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 650;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fm-section-label .material-icons[b-cjj3t7wxg0] {
    font-size: 15px;
    color: #9ca3af;
}

.fm-count-tag[b-cjj3t7wxg0] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: #7B61FF;
    background: #f5f3ff;
    padding: 1px 7px;
    border-radius: 99px;
    text-transform: none;
    letter-spacing: 0;
}

.fm-divider[b-cjj3t7wxg0] {
    height: 1px;
    background: #f3f4f6;
    margin: 16px 0;
}

/* ── Platform chips ── */
.fm-platform-row[b-cjj3t7wxg0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fm-plat-chip[b-cjj3t7wxg0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 99px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.fm-plat-chip .material-icons[b-cjj3t7wxg0] {
    font-size: 16px;
    color: #9ca3af;
    transition: color 0.15s;
}

.fm-plat-chip:hover[b-cjj3t7wxg0] {
    border-color: #7B61FF;
    color: #5b3fd4;
}

.fm-plat-chip:hover .material-icons[b-cjj3t7wxg0] {
    color: #7B61FF;
}

.fm-plat-chip.active[b-cjj3t7wxg0] {
    border-color: #7B61FF;
    background: #f5f3ff;
    color: #5b3fd4;
    font-weight: 600;
}

.fm-plat-chip.active .material-icons[b-cjj3t7wxg0] {
    color: #7B61FF;
}

.fm-plat-check[b-cjj3t7wxg0] {
    font-size: 14px !important;
    color: #7B61FF !important;
}

/* ── Empty hint ── */
.fm-empty-hint[b-cjj3t7wxg0] {
    font-size: 11.5px;
    color: #b0b7c3;
    margin-top: 4px;
}

/* ── Two-column layout ── */
.fm-two-cols[b-cjj3t7wxg0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.fm-col[b-cjj3t7wxg0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── List box (Version / Country) ── */
.fm-list-box[b-cjj3t7wxg0] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fm-list-search[b-cjj3t7wxg0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
}

.fm-list-search .material-icons[b-cjj3t7wxg0] {
    font-size: 16px;
    color: #9ca3af;
    flex-shrink: 0;
}

.fm-list-search input[b-cjj3t7wxg0] {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 12.5px;
    color: #374151;
}

.fm-list-search input[b-cjj3t7wxg0]::placeholder {
    color: #c4c9d4;
}

.fm-list-body[b-cjj3t7wxg0] {
    max-height: 190px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.fm-list-row[b-cjj3t7wxg0] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
}

.fm-list-row:hover[b-cjj3t7wxg0] {
    background: #f9fafb;
}

.fm-list-row.sel[b-cjj3t7wxg0] {
    background: #f5f3ff;
    color: #5b3fd4;
    font-weight: 500;
}

.fm-chk[b-cjj3t7wxg0] {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1.5px solid #d1d5db;
    border-radius: 4px;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}

.fm-chk.on[b-cjj3t7wxg0] {
    border-color: #7B61FF;
    background: #7B61FF;
}

.fm-chk.on[b-cjj3t7wxg0]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 4px;
    width: 4px;
    height: 7px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.fm-list-sep[b-cjj3t7wxg0] {
    height: 1px;
    background: #f3f4f6;
    margin: 0;
}

/* ── Footer ── */
.fm-footer[b-cjj3t7wxg0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-top: 1px solid #f3f4f6;
    flex-shrink: 0;
    gap: 12px;
}

.fm-footer-info[b-cjj3t7wxg0] {
    font-size: 12.5px;
    color: #9ca3af;
}

.fm-footer-actions[b-cjj3t7wxg0] {
    display: flex;
    gap: 8px;
}

.fm-btn-cancel[b-cjj3t7wxg0] {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s;
}

.fm-btn-cancel:hover[b-cjj3t7wxg0] {
    border-color: #9ca3af;
}

.fm-btn-apply[b-cjj3t7wxg0] {
    padding: 8px 20px;
    background: #7B61FF;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.fm-btn-apply:hover[b-cjj3t7wxg0] {
    background: #6346eb;
}
/* /Components/Analytics/FirstPurchaseLevelDistribution.razor.rz.scp.css */
/* ===== FirstPurchaseLevelDistribution (fpld-*) ===== */
.fpld-card[b-7p23pzvlfk] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.fpld-header[b-7p23pzvlfk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.fpld-header-left[b-7p23pzvlfk] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.fpld-header-icon[b-7p23pzvlfk] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(139,92,246,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fpld-header-icon .material-icons[b-7p23pzvlfk] { font-size: 20px; color: #8b5cf6; }

.fpld-title[b-7p23pzvlfk] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.fpld-sub[b-7p23pzvlfk]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.fpld-badge[b-7p23pzvlfk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.fpld-badge .material-icons[b-7p23pzvlfk] { font-size: 15px; color: #8b5cf6; }

/* KPI Strip */
.fpld-kpi-strip[b-7p23pzvlfk] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.fpld-kpi-item[b-7p23pzvlfk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.fpld-kpi-sep[b-7p23pzvlfk] {
    width: 1px;
    height: 32px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.fpld-kpi-dot[b-7p23pzvlfk] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fpld-kpi-info[b-7p23pzvlfk] { display: flex; flex-direction: column; gap: 2px; }

.fpld-kpi-label[b-7p23pzvlfk] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.fpld-kpi-value-row[b-7p23pzvlfk] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.fpld-kpi-value[b-7p23pzvlfk] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.fpld-kpi-sub[b-7p23pzvlfk] {
    font-size: 11px;
    color: var(--text-muted);
}

/* Phase breakdown strip */
.fpld-phase-strip[b-7p23pzvlfk] {
    padding: 12px 20px 10px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.fpld-phase-bar[b-7p23pzvlfk] {
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    background: var(--bg-subtle);
}

.fpld-phase-seg[b-7p23pzvlfk] {
    height: 100%;
    transition: width 0.4s ease;
    min-width: 0;
}

.fpld-phase-labels[b-7p23pzvlfk] {
    display: flex;
    align-items: center;
    gap: 0;
}

.fpld-phase-label-item[b-7p23pzvlfk] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
}

.fpld-phase-dot[b-7p23pzvlfk] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fpld-phase-name[b-7p23pzvlfk] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.fpld-phase-pct[b-7p23pzvlfk] {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.fpld-phase-count[b-7p23pzvlfk] {
    font-size: 11px;
    color: var(--text-placeholder);
    font-variant-numeric: tabular-nums;
}

/* Chart body */
.fpld-chart-body[b-7p23pzvlfk] {
    position: relative;
    height: 280px;
    padding: 12px 16px 16px;
    box-sizing: border-box;
}

.fpld-chart-body canvas[b-7p23pzvlfk] {
    width: 100% !important;
    height: 100% !important;
}
/* /Components/Analytics/IAPRevenueSplit.razor.rz.scp.css */
/* ===== IAPRevenueSplit (irs-*) ===== */
.irs-card[b-l39hww5q4e] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.irs-header[b-l39hww5q4e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.irs-header-left[b-l39hww5q4e] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.irs-header-icon[b-l39hww5q4e] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99,102,241,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.irs-header-icon .material-icons[b-l39hww5q4e] { font-size: 20px; color: #6366f1; }

.irs-title[b-l39hww5q4e] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.irs-sub[b-l39hww5q4e]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.irs-badge[b-l39hww5q4e] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 700;
    color: #4f46e5;
    flex-shrink: 0;
}

.irs-badge .material-icons[b-l39hww5q4e] { font-size: 15px; color: #6366f1; }

/* Tabs */
.irs-tabs[b-l39hww5q4e] {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.irs-tabs-group[b-l39hww5q4e] {
    display: flex;
    background: var(--bg-subtle);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.irs-tab[b-l39hww5q4e] {
    flex: 1;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    background: transparent;
    transition: all 0.15s ease;
    text-align: center;
    white-space: nowrap;
}

.irs-tab.active[b-l39hww5q4e] {
    background: #fff;
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Summary strip */
.irs-strip[b-l39hww5q4e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.irs-strip-label[b-l39hww5q4e] { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.irs-strip-value[b-l39hww5q4e] { font-size: 13px; font-weight: 700; color: #6366f1; font-variant-numeric: tabular-nums; }
.irs-strip-sep[b-l39hww5q4e]   { width: 1px; height: 12px; background: var(--border); margin: 0 4px; }

/* Empty / Loading */
.irs-empty[b-l39hww5q4e] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
}

/* Ranked list */
.irs-list[b-l39hww5q4e] {
    display: flex;
    flex-direction: column;
    padding: 8px 0 4px;
}

.irs-row[b-l39hww5q4e] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px;
    transition: background 0.1s ease;
}

.irs-row:hover[b-l39hww5q4e] { background: var(--bg-subtle); }

.irs-rank[b-l39hww5q4e] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.irs-rank--1[b-l39hww5q4e] { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #d97706; }
.irs-rank--2[b-l39hww5q4e] { background: rgba(107,114,128,0.12); border-color: rgba(107,114,128,0.3); color: #6b7280; }
.irs-rank--3[b-l39hww5q4e] { background: rgba(180,83,9,0.10);   border-color: rgba(180,83,9,0.25);  color: #b45309; }

.irs-row-name[b-l39hww5q4e] {
    width: 140px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.irs-bar-track[b-l39hww5q4e] {
    flex: 1;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.irs-bar-fill[b-l39hww5q4e] {
    height: 100%;
    background: #6366f1;
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.irs-row-value[b-l39hww5q4e] {
    width: 68px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.irs-row-pct[b-l39hww5q4e] {
    width: 44px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Show more toggle */
.irs-footer-toggle[b-l39hww5q4e] {
    display: flex;
    justify-content: center;
    padding: 8px 20px 12px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.irs-toggle-btn[b-l39hww5q4e] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-subtle);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.irs-toggle-btn:hover[b-l39hww5q4e] {
    background: var(--bg-card);
    border-color: #6366f1;
    color: #6366f1;
}

.irs-toggle-btn .material-icons[b-l39hww5q4e] { font-size: 16px; }
/* /Components/Analytics/IAPRevenueSplitByCountries.razor.rz.scp.css */
/* ===== IAPRevenueSplitByCountries (irc-*) ===== */
.irc-card[b-241sgr28tf] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.irc-header[b-241sgr28tf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 16px;
    flex-shrink: 0;
}

.irc-header-left[b-241sgr28tf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.irc-header-icon[b-241sgr28tf] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(20,184,166,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.irc-header-icon .material-icons[b-241sgr28tf] { font-size: 20px; color: #14b8a6; }

.irc-title[b-241sgr28tf] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.irc-sub[b-241sgr28tf]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.irc-badge[b-241sgr28tf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(20,184,166,0.08);
    border: 1px solid rgba(20,184,166,0.25);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 700;
    color: #0f766e;
    flex-shrink: 0;
}

.irc-badge .material-icons[b-241sgr28tf] { font-size: 15px; color: #14b8a6; }

.irc-strip[b-241sgr28tf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.irc-strip-label[b-241sgr28tf] { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.irc-strip-value[b-241sgr28tf] { font-size: 13px; font-weight: 700; color: #14b8a6; font-variant-numeric: tabular-nums; }
.irc-strip-sep[b-241sgr28tf]   { width: 1px; height: 12px; background: var(--border); margin: 0 4px; }

.irc-empty[b-241sgr28tf] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
}

.irc-list[b-241sgr28tf] {
    display: flex;
    flex-direction: column;
    padding: 8px 0 4px;
}

.irc-row[b-241sgr28tf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px;
    transition: background 0.1s ease;
}

.irc-row:hover[b-241sgr28tf] { background: var(--bg-subtle); }

.irc-rank[b-241sgr28tf] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.irc-rank--1[b-241sgr28tf] { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #d97706; }
.irc-rank--2[b-241sgr28tf] { background: rgba(107,114,128,0.12); border-color: rgba(107,114,128,0.3); color: #6b7280; }
.irc-rank--3[b-241sgr28tf] { background: rgba(180,83,9,0.10);   border-color: rgba(180,83,9,0.25);  color: #b45309; }

.irc-row-name[b-241sgr28tf] {
    width: 120px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.irc-bar-track[b-241sgr28tf] {
    flex: 1;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.irc-bar-fill[b-241sgr28tf] {
    height: 100%;
    background: #14b8a6;
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.irc-row-value[b-241sgr28tf] {
    width: 68px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.irc-row-pct[b-241sgr28tf] {
    width: 44px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.irc-footer-toggle[b-241sgr28tf] {
    display: flex;
    justify-content: center;
    padding: 8px 20px 12px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.irc-toggle-btn[b-241sgr28tf] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-subtle);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.irc-toggle-btn:hover[b-241sgr28tf] {
    background: var(--bg-card);
    border-color: #14b8a6;
    color: #14b8a6;
}

.irc-toggle-btn .material-icons[b-241sgr28tf] { font-size: 16px; }
/* /Components/Analytics/IAPRevenueSplitByLevel.razor.rz.scp.css */
/* ===== IAPRevenueSplitByLevel (irl-*) ===== */
.irl-card[b-098w4g4a1r] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.irl-header[b-098w4g4a1r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 16px;
    flex-shrink: 0;
}

.irl-header-left[b-098w4g4a1r] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.irl-header-icon[b-098w4g4a1r] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99,102,241,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.irl-header-icon .material-icons[b-098w4g4a1r] { font-size: 20px; color: #6366f1; }

.irl-title[b-098w4g4a1r] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.irl-sub[b-098w4g4a1r]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.irl-badge[b-098w4g4a1r] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 700;
    color: #4338ca;
    flex-shrink: 0;
}

.irl-badge .material-icons[b-098w4g4a1r] { font-size: 15px; color: #6366f1; }

/* Summary strip */
.irl-strip[b-098w4g4a1r] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.irl-strip-label[b-098w4g4a1r] { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.irl-strip-value[b-098w4g4a1r] { font-size: 13px; font-weight: 700; color: #6366f1; font-variant-numeric: tabular-nums; }
.irl-strip-sep[b-098w4g4a1r]   { width: 1px; height: 12px; background: var(--border); margin: 0 4px; }

/* Empty / Loading */
.irl-empty[b-098w4g4a1r] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
}

/* Ranked list */
.irl-list[b-098w4g4a1r] {
    display: flex;
    flex-direction: column;
    padding: 8px 0 4px;
}

.irl-row[b-098w4g4a1r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px;
    transition: background 0.1s ease;
}

.irl-row:hover[b-098w4g4a1r] { background: var(--bg-subtle); }

/* Rank badge */
.irl-rank[b-098w4g4a1r] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.irl-rank--1[b-098w4g4a1r] { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #d97706; }
.irl-rank--2[b-098w4g4a1r] { background: rgba(107,114,128,0.12); border-color: rgba(107,114,128,0.3); color: #6b7280; }
.irl-rank--3[b-098w4g4a1r] { background: rgba(180,83,9,0.10);   border-color: rgba(180,83,9,0.25);  color: #b45309; }

/* Name */
.irl-row-name[b-098w4g4a1r] {
    width: 120px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Bar */
.irl-bar-track[b-098w4g4a1r] {
    flex: 1;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.irl-bar-fill[b-098w4g4a1r] {
    height: 100%;
    background: #6366f1;
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

/* Value & Pct */
.irl-row-value[b-098w4g4a1r] {
    width: 68px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.irl-row-pct[b-098w4g4a1r] {
    width: 44px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Show more toggle */
.irl-footer-toggle[b-098w4g4a1r] {
    display: flex;
    justify-content: center;
    padding: 8px 20px 12px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.irl-toggle-btn[b-098w4g4a1r] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-subtle);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.irl-toggle-btn:hover[b-098w4g4a1r] {
    background: var(--bg-card);
    border-color: #6366f1;
    color: #6366f1;
}

.irl-toggle-btn .material-icons[b-098w4g4a1r] { font-size: 16px; }
/* /Components/Analytics/IAPRevenueSplitByProductName.razor.rz.scp.css */
/* ===== IAPRevenueSplitByProductName (irp-*) ===== */
.irp-card[b-nbjz1kima0] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.irp-header[b-nbjz1kima0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 16px;
    flex-shrink: 0;
}

.irp-header-left[b-nbjz1kima0] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.irp-header-icon[b-nbjz1kima0] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(139,92,246,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.irp-header-icon .material-icons[b-nbjz1kima0] { font-size: 20px; color: #8b5cf6; }

.irp-title[b-nbjz1kima0] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.irp-sub[b-nbjz1kima0]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.irp-badge[b-nbjz1kima0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(139,92,246,0.08);
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 700;
    color: #6d28d9;
    flex-shrink: 0;
}

.irp-badge .material-icons[b-nbjz1kima0] { font-size: 15px; color: #8b5cf6; }

.irp-strip[b-nbjz1kima0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.irp-strip-label[b-nbjz1kima0] { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.irp-strip-value[b-nbjz1kima0] { font-size: 13px; font-weight: 700; color: #8b5cf6; font-variant-numeric: tabular-nums; }
.irp-strip-sep[b-nbjz1kima0]   { width: 1px; height: 12px; background: var(--border); margin: 0 4px; }

.irp-empty[b-nbjz1kima0] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
}

.irp-list[b-nbjz1kima0] {
    display: flex;
    flex-direction: column;
    padding: 8px 0 4px;
}

.irp-row[b-nbjz1kima0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px;
    transition: background 0.1s ease;
}

.irp-row:hover[b-nbjz1kima0] { background: var(--bg-subtle); }

.irp-rank[b-nbjz1kima0] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.irp-rank--1[b-nbjz1kima0] { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #d97706; }
.irp-rank--2[b-nbjz1kima0] { background: rgba(107,114,128,0.12); border-color: rgba(107,114,128,0.3); color: #6b7280; }
.irp-rank--3[b-nbjz1kima0] { background: rgba(180,83,9,0.10);   border-color: rgba(180,83,9,0.25);  color: #b45309; }

.irp-row-name[b-nbjz1kima0] {
    width: 120px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.irp-bar-track[b-nbjz1kima0] {
    flex: 1;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.irp-bar-fill[b-nbjz1kima0] {
    height: 100%;
    background: #8b5cf6;
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.irp-row-value[b-nbjz1kima0] {
    width: 68px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.irp-row-pct[b-nbjz1kima0] {
    width: 44px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.irp-footer-toggle[b-nbjz1kima0] {
    display: flex;
    justify-content: center;
    padding: 8px 20px 12px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.irp-toggle-btn[b-nbjz1kima0] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-subtle);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.irp-toggle-btn:hover[b-nbjz1kima0] {
    background: var(--bg-card);
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.irp-toggle-btn .material-icons[b-nbjz1kima0] { font-size: 16px; }
/* /Components/Analytics/ImpressionSplitBy.razor.rz.scp.css */
/* ===== ImpressionSplitBy (ims-*) ===== */
.ims-card[b-8pi4au5o4q] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.ims-header[b-8pi4au5o4q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.ims-header-left[b-8pi4au5o4q] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.ims-header-icon[b-8pi4au5o4q] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(139,92,246,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ims-header-icon .material-icons[b-8pi4au5o4q] { font-size: 20px; color: #8b5cf6; }

.ims-title[b-8pi4au5o4q] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.ims-sub[b-8pi4au5o4q]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.ims-badge[b-8pi4au5o4q] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(139,92,246,0.08);
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 700;
    color: #6d28d9;
    flex-shrink: 0;
}

.ims-badge .material-icons[b-8pi4au5o4q] { font-size: 15px; color: #8b5cf6; }

/* Tabs */
.ims-tabs[b-8pi4au5o4q] {
    padding: 10px 20px 10px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.ims-tabs-group[b-8pi4au5o4q] {
    display: flex;
    background: var(--bg-subtle);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.ims-tab[b-8pi4au5o4q] {
    flex: 1;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    background: transparent;
    transition: all 0.15s ease;
    text-align: center;
    white-space: nowrap;
}

.ims-tab.active[b-8pi4au5o4q] {
    background: #fff;
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Summary strip */
.ims-strip[b-8pi4au5o4q] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.ims-strip-label[b-8pi4au5o4q] { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.ims-strip-value[b-8pi4au5o4q] { font-size: 13px; font-weight: 700; color: #8b5cf6; font-variant-numeric: tabular-nums; }
.ims-strip-sep[b-8pi4au5o4q]   { width: 1px; height: 12px; background: var(--border); margin: 0 4px; }

/* Empty / Loading */
.ims-empty[b-8pi4au5o4q] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
}

/* Ranked list */
.ims-list[b-8pi4au5o4q] {
    display: flex;
    flex-direction: column;
    padding: 8px 0 4px;
}

.ims-row[b-8pi4au5o4q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px;
    transition: background 0.1s ease;
}

.ims-row:hover[b-8pi4au5o4q] { background: var(--bg-subtle); }

.ims-rank[b-8pi4au5o4q] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ims-rank--1[b-8pi4au5o4q] { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #d97706; }
.ims-rank--2[b-8pi4au5o4q] { background: rgba(107,114,128,0.12); border-color: rgba(107,114,128,0.3); color: #6b7280; }
.ims-rank--3[b-8pi4au5o4q] { background: rgba(180,83,9,0.10);   border-color: rgba(180,83,9,0.25);  color: #b45309; }

.ims-row-name[b-8pi4au5o4q] {
    width: 120px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.ims-bar-track[b-8pi4au5o4q] {
    flex: 1;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.ims-bar-fill[b-8pi4au5o4q] {
    height: 100%;
    background: #8b5cf6;
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.ims-row-value[b-8pi4au5o4q] {
    width: 68px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.ims-row-pct[b-8pi4au5o4q] {
    width: 44px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Show more toggle */
.ims-footer-toggle[b-8pi4au5o4q] {
    display: flex;
    justify-content: center;
    padding: 8px 20px 12px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.ims-toggle-btn[b-8pi4au5o4q] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-subtle);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ims-toggle-btn:hover[b-8pi4au5o4q] {
    background: var(--bg-card);
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.ims-toggle-btn .material-icons[b-8pi4au5o4q] { font-size: 16px; }
/* /Components/Analytics/KpiAcquisitionCard.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   KPI ACQUISITION & ENGAGEMENT CARD  (kae-*)
   ════════════════════════════════════════════════════════════════════════════ */

.kae-card[b-le1r5bmq4g] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;
    margin-bottom: 16px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.kae-header[b-le1r5bmq4g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.kae-header-left[b-le1r5bmq4g] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.kae-header-icon[b-le1r5bmq4g] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #dcfce7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kae-header-icon .material-icons[b-le1r5bmq4g] {
    font-size: 20px;
    color: #16a34a;
}

.kae-header-title[b-le1r5bmq4g] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.kae-header-sub[b-le1r5bmq4g] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.kae-header-badge[b-le1r5bmq4g] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}

.kae-header-badge .material-icons[b-le1r5bmq4g] {
    font-size: 15px;
    color: #16a34a;
}

.kae-badge-sep[b-le1r5bmq4g] { color: var(--border); }

/* ── Primary KPIs — 4-column grid ─────────────────────────────────────────── */
.kae-primary[b-le1r5bmq4g] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.kae-kpi[b-le1r5bmq4g] {
    padding: 20px 22px 18px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.kae-kpi--last[b-le1r5bmq4g] { border-right: none; }

.kae-kpi-hdr[b-le1r5bmq4g] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Small icon chips */
.kae-kpi-chip[b-le1r5bmq4g] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kae-kpi-chip .material-icons[b-le1r5bmq4g] { font-size: 14px; }

.kae-chip--green[b-le1r5bmq4g]  { background: #dcfce7; color: #16a34a; }
.kae-chip--blue[b-le1r5bmq4g]   { background: #dbeafe; color: #2563eb; }
.kae-chip--purple[b-le1r5bmq4g] { background: #ede9fe; color: #7c3aed; }
.kae-chip--amber[b-le1r5bmq4g]  { background: #fef3c7; color: #d97706; }

.kae-kpi-label[b-le1r5bmq4g] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Large number */
.kae-kpi-value[b-le1r5bmq4g] {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kae-kpi-unit[b-le1r5bmq4g] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0;
    margin-left: 2px;
}

/* Mini bar */
.kae-kpi-bar-wrap[b-le1r5bmq4g] { padding: 1px 0; }

.kae-kpi-bar-track[b-le1r5bmq4g] {
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
}

.kae-kpi-bar-fill[b-le1r5bmq4g] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 2px;
}

.kae-bar--green[b-le1r5bmq4g]  { background: #16a34a; }
.kae-bar--blue[b-le1r5bmq4g]   { background: #3b82f6; }
.kae-bar--purple[b-le1r5bmq4g] { background: #8b5cf6; }
.kae-bar--amber[b-le1r5bmq4g]  { background: #d97706; }

/* Sub-info */
.kae-kpi-sub[b-le1r5bmq4g] {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.kae-kpi-sub--gap[b-le1r5bmq4g] { gap: 5px; }

.kae-sub-strong[b-le1r5bmq4g] {
    font-weight: 700;
    color: var(--text-secondary);
}

/* User mix dot */
.kae-mix-dot[b-le1r5bmq4g] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kae-dot--green[b-le1r5bmq4g] { background: #16a34a; }

/* ── Benchmark badge row ───────────────────────────────────────────────────── */
.kae-bm-row[b-le1r5bmq4g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.kae-bm-badge[b-le1r5bmq4g] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 7px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.kae-bm-badge .material-icons[b-le1r5bmq4g] {
    font-size: 15px;
}

.kae-bm-badge--good[b-le1r5bmq4g] {
    background: #dcfce7;
    color: #15803d;
}

.kae-bm-badge--bad[b-le1r5bmq4g] {
    background: #fee2e2;
    color: #b91c1c;
}

.kae-bm-label[b-le1r5bmq4g] {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Secondary strip — grid aligned to primary 4 columns ─────────────────── */
.kae-secondary[b-le1r5bmq4g] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--bg-subtle);
    border-top: 1px solid var(--border-light);
}

.kae-stat[b-le1r5bmq4g] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-right: 1px solid var(--border-light);
}

.kae-stat--last[b-le1r5bmq4g] {
    border-right: none;
}

.kae-stat-icon[b-le1r5bmq4g] {
    font-size: 17px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.kae-stat-info[b-le1r5bmq4g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kae-stat-label[b-le1r5bmq4g] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kae-stat-val-row[b-le1r5bmq4g] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kae-stat-value[b-le1r5bmq4g] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.kae-stat-sub[b-le1r5bmq4g] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.kae-stat-tag[b-le1r5bmq4g] {
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 4px;
    background: #f1f5f9;
    color: var(--text-secondary);
}
/* /Components/Analytics/KpiAdvertisingCard.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   KPI ADVERTISING CARD  (kav-*)
   ════════════════════════════════════════════════════════════════════════════ */

.kav-card[b-2lts84lz9b] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;
    margin-bottom: 16px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.kav-header[b-2lts84lz9b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.kav-header-left[b-2lts84lz9b] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.kav-header-icon[b-2lts84lz9b] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #ede9fe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kav-header-icon .material-icons[b-2lts84lz9b] {
    font-size: 20px;
    color: #7c3aed;
}

.kav-header-title[b-2lts84lz9b] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.kav-header-sub[b-2lts84lz9b] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.kav-header-badge[b-2lts84lz9b] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}

.kav-header-badge .material-icons[b-2lts84lz9b] {
    font-size: 15px;
    color: #7c3aed;
}

.kav-badge-sep[b-2lts84lz9b] { color: var(--border); }

/* ── Primary KPIs — 4-column grid ─────────────────────────────────────────── */
.kav-primary[b-2lts84lz9b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.kav-kpi[b-2lts84lz9b] {
    padding: 20px 22px 18px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.kav-kpi--last[b-2lts84lz9b] { border-right: none; }

.kav-kpi-hdr[b-2lts84lz9b] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kav-kpi-chip[b-2lts84lz9b] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kav-kpi-chip .material-icons[b-2lts84lz9b] { font-size: 14px; }

.kav-chip--indigo[b-2lts84lz9b] { background: var(--color-primary-subtle); color: var(--color-primary); }
.kav-chip--blue[b-2lts84lz9b]   { background: #dbeafe; color: #2563eb; }
.kav-chip--amber[b-2lts84lz9b]  { background: #fef3c7; color: #d97706; }
.kav-chip--teal[b-2lts84lz9b]   { background: #ccfbf1; color: #0d9488; }

.kav-kpi-label[b-2lts84lz9b] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kav-kpi-value[b-2lts84lz9b] {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kav-kpi-unit[b-2lts84lz9b] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 2px;
}

/* Mini bar */
.kav-kpi-bar-wrap[b-2lts84lz9b] { padding: 1px 0; }

.kav-kpi-bar-track[b-2lts84lz9b] {
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
}

.kav-kpi-bar-fill[b-2lts84lz9b] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 2px;
}

.kav-bar--blue[b-2lts84lz9b]  { background: #3b82f6; }
.kav-bar--amber[b-2lts84lz9b] { background: #d97706; }
.kav-bar--red[b-2lts84lz9b]   { background: #ef4444; }
.kav-bar--teal[b-2lts84lz9b]  { background: #0d9488; }

/* Sub-info */
.kav-kpi-sub[b-2lts84lz9b] {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.kav-kpi-sub--gap[b-2lts84lz9b] { gap: 5px; }

.kav-sub-strong[b-2lts84lz9b] {
    font-weight: 700;
    color: var(--text-secondary);
}

/* Frequency status dot */
.kav-mix-dot[b-2lts84lz9b] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kav-dot--green[b-2lts84lz9b] { background: #16a34a; }
.kav-dot--red[b-2lts84lz9b]   { background: #ef4444; }

/* Benchmark badge row */
.kav-bm-row[b-2lts84lz9b] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.kav-bm-badge[b-2lts84lz9b] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 7px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.kav-bm-badge .material-icons[b-2lts84lz9b] { font-size: 15px; }

.kav-bm-badge--good[b-2lts84lz9b] { background: #dcfce7; color: #15803d; }
.kav-bm-badge--bad[b-2lts84lz9b]  { background: #fee2e2; color: #b91c1c; }
.kav-bm-badge--warn[b-2lts84lz9b] { background: #fef3c7; color: #b45309; }

.kav-bm-label[b-2lts84lz9b] {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Secondary strip ──────────────────────────────────────────────────────── */
.kav-secondary[b-2lts84lz9b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--bg-subtle);
    border-top: 1px solid var(--border-light);
}

.kav-stat[b-2lts84lz9b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-right: 1px solid var(--border-light);
}

.kav-stat--last[b-2lts84lz9b] { border-right: none; }

.kav-stat-icon[b-2lts84lz9b] {
    font-size: 17px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.kav-stat-info[b-2lts84lz9b] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kav-stat-label[b-2lts84lz9b] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kav-stat-val-row[b-2lts84lz9b] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kav-stat-value[b-2lts84lz9b] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.kav-stat-value--na[b-2lts84lz9b] {
    color: var(--text-muted);
    font-style: italic;
}

.kav-stat-sub[b-2lts84lz9b] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.kav-stat-tag[b-2lts84lz9b] {
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 4px;
    background: #f1f5f9;
    color: var(--text-secondary);
}

.kav-tag--good[b-2lts84lz9b] { background: #dcfce7; color: #15803d; }
.kav-tag--ok[b-2lts84lz9b]   { background: #fef3c7; color: #92400e; }
.kav-tag--bad[b-2lts84lz9b]  { background: #fee2e2; color: #b91c1c; }
/* /Components/Analytics/KpiRevenueCard.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   KPI REVENUE & MONETIZATION CARD  (krm-*)
   ════════════════════════════════════════════════════════════════════════════ */

.krm-card[b-1rmi3xqdt9] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;
    margin-bottom: 16px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.krm-header[b-1rmi3xqdt9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.krm-header-left[b-1rmi3xqdt9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.krm-header-icon[b-1rmi3xqdt9] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.krm-header-icon .material-icons[b-1rmi3xqdt9] {
    font-size: 20px;
    color: #059669;
}

.krm-header-title[b-1rmi3xqdt9] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.krm-header-sub[b-1rmi3xqdt9] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.krm-header-badge[b-1rmi3xqdt9] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}

.krm-header-badge .material-icons[b-1rmi3xqdt9] {
    font-size: 15px;
    color: #059669;
}

.krm-badge-sep[b-1rmi3xqdt9] { color: var(--border); }

/* ── Primary KPIs — 4-column grid ─────────────────────────────────────────── */
.krm-primary[b-1rmi3xqdt9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.krm-kpi[b-1rmi3xqdt9] {
    padding: 20px 22px 18px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.krm-kpi--last[b-1rmi3xqdt9] { border-right: none; }

.krm-kpi-hdr[b-1rmi3xqdt9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.krm-kpi-chip[b-1rmi3xqdt9] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.krm-kpi-chip .material-icons[b-1rmi3xqdt9] { font-size: 14px; }

.krm-chip--emerald[b-1rmi3xqdt9] { background: #d1fae5; color: #059669; }
.krm-chip--blue[b-1rmi3xqdt9]    { background: #dbeafe; color: #2563eb; }
.krm-chip--violet[b-1rmi3xqdt9]  { background: #ede9fe; color: #7c3aed; }
.krm-chip--amber[b-1rmi3xqdt9]   { background: #fef3c7; color: #d97706; }

.krm-kpi-label[b-1rmi3xqdt9] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.krm-kpi-value[b-1rmi3xqdt9] {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.krm-kpi-unit[b-1rmi3xqdt9] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 2px;
}

.krm-kpi-na[b-1rmi3xqdt9] {
    font-size: 28px;
    color: var(--text-muted);
}

.krm-kpi-sub[b-1rmi3xqdt9] {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

/* Revenue split bar */
.krm-rev-mix[b-1rmi3xqdt9] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 2px;
}

.krm-rev-bar-wrap[b-1rmi3xqdt9] { padding: 1px 0; }

.krm-rev-bar-track[b-1rmi3xqdt9] {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
}

.krm-rev-bar-fill[b-1rmi3xqdt9] {
    height: 100%;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.krm-rev-legend[b-1rmi3xqdt9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.krm-rev-dot[b-1rmi3xqdt9] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.krm-dot--amber[b-1rmi3xqdt9]  { background: #d97706; }
.krm-dot--violet[b-1rmi3xqdt9] { background: #7c3aed; }

/* Mini bar */
.krm-kpi-bar-wrap[b-1rmi3xqdt9] { padding: 1px 0; }

.krm-kpi-bar-track[b-1rmi3xqdt9] {
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
}

.krm-kpi-bar-fill[b-1rmi3xqdt9] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 2px;
}

.krm-bar--blue[b-1rmi3xqdt9]   { background: #3b82f6; }
.krm-bar--violet[b-1rmi3xqdt9] { background: #8b5cf6; }
.krm-bar--amber[b-1rmi3xqdt9]  { background: #d97706; }

/* Benchmark badge row */
.krm-bm-row[b-1rmi3xqdt9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.krm-bm-badge[b-1rmi3xqdt9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 7px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.krm-bm-badge .material-icons[b-1rmi3xqdt9] { font-size: 15px; }

.krm-bm-badge--good[b-1rmi3xqdt9] { background: #dcfce7; color: #15803d; }
.krm-bm-badge--bad[b-1rmi3xqdt9]  { background: #fee2e2; color: #b91c1c; }

.krm-bm-label[b-1rmi3xqdt9] {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Secondary strip ──────────────────────────────────────────────────────── */
.krm-secondary[b-1rmi3xqdt9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--bg-subtle);
    border-top: 1px solid var(--border-light);
}

.krm-stat[b-1rmi3xqdt9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-right: 1px solid var(--border-light);
}

.krm-stat--last[b-1rmi3xqdt9] { border-right: none; }

.krm-stat-icon[b-1rmi3xqdt9] {
    font-size: 17px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.krm-stat-info[b-1rmi3xqdt9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.krm-stat-label[b-1rmi3xqdt9] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.krm-stat-val-row[b-1rmi3xqdt9] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.krm-stat-value[b-1rmi3xqdt9] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.krm-stat-sub[b-1rmi3xqdt9] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.krm-stat-tag[b-1rmi3xqdt9] {
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 4px;
    background: #f1f5f9;
    color: var(--text-secondary);
}
/* /Components/Analytics/LevelAdvertisementChart.razor.rz.scp.css */
/* ===== LAD CARD ===== */
.lad-card[b-nkbmitri7g] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.lad-header[b-nkbmitri7g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.lad-header-left[b-nkbmitri7g] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.lad-header-icon[b-nkbmitri7g] {
    width: 38px;
    height: 38px;
    background: rgba(249, 115, 22, 0.10);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lad-header-icon .material-icons[b-nkbmitri7g] {
    font-size: 20px;
    color: #f97316;
}

.lad-title[b-nkbmitri7g] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.lad-sub[b-nkbmitri7g] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.lad-badge[b-nkbmitri7g] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.lad-badge .material-icons[b-nkbmitri7g] {
    font-size: 15px;
    color: #f97316;
}

/* ===== KPI STRIP ===== */
.lad-kpi-strip[b-nkbmitri7g] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.lad-kpi-item[b-nkbmitri7g] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.lad-kpi-sep[b-nkbmitri7g] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.lad-kpi-dot[b-nkbmitri7g] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lad-kpi-info[b-nkbmitri7g] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lad-kpi-label[b-nkbmitri7g] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.lad-kpi-value[b-nkbmitri7g] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ===== CHARTS ROW ===== */
.lad-charts-row[b-nkbmitri7g] {
    display: flex;
}

.lad-chart-panel[b-nkbmitri7g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lad-chart-panel--right[b-nkbmitri7g] {
    border-left: 1px solid var(--border-light);
}

.lad-chart-panel-header[b-nkbmitri7g] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px 8px 10px;
    min-height: 38px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.lad-chart-dot[b-nkbmitri7g] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lad-chart-line-mark[b-nkbmitri7g] {
    display: inline-block;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    flex-shrink: 0;
}

.lad-chart-label[b-nkbmitri7g] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.lad-chart-sep[b-nkbmitri7g] {
    width: 1px;
    height: 12px;
    background: var(--border);
    margin: 0 6px;
    flex-shrink: 0;
}

.lad-chart-body[b-nkbmitri7g] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.lad-chart-body canvas[b-nkbmitri7g] {
    width: 100% !important;
    height: 100% !important;
}


/* ===== PAGINATION FOOTER ===== */
.lad-footer[b-nkbmitri7g] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/LevelChurnAnalysis.razor.rz.scp.css */
/* ===== CARD SHELL ===== */
.lca-card[b-84lqaqp2vr] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.lca-header[b-84lqaqp2vr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.lca-header-left[b-84lqaqp2vr] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.lca-header-icon[b-84lqaqp2vr] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lca-header-icon .material-icons[b-84lqaqp2vr] { font-size: 20px; color: #ef4444; }

.lca-title[b-84lqaqp2vr] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.lca-sub[b-84lqaqp2vr]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.lca-badge[b-84lqaqp2vr] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.lca-badge .material-icons[b-84lqaqp2vr] { font-size: 15px; color: #ef4444; }

/* ===== EMPTY / LOADING ===== */
.lca-empty[b-84lqaqp2vr] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
}

/* ===== SUMMARY STRIP ===== */
.lca-strip[b-84lqaqp2vr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.lca-strip-label[b-84lqaqp2vr] {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.lca-strip-value[b-84lqaqp2vr] {
    font-size: 13px;
    font-weight: 700;
    color: #ef4444;
    font-variant-numeric: tabular-nums;
}

.lca-strip-sep[b-84lqaqp2vr] {
    width: 1px;
    height: 12px;
    background: var(--border);
    margin: 0 4px;
}

/* ===== RANKED LIST ===== */
.lca-list[b-84lqaqp2vr] {
    display: flex;
    flex-direction: column;
    padding: 4px 0 8px;
}

.lca-row[b-84lqaqp2vr] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.1s ease;
}

.lca-row--last[b-84lqaqp2vr] { border-bottom: none; }
.lca-row:hover[b-84lqaqp2vr] { background: var(--bg-subtle); }

/* Line 1 */
.lca-row-top[b-84lqaqp2vr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lca-rank[b-84lqaqp2vr] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lca-rank--1[b-84lqaqp2vr] { background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.30);  color: #dc2626; }
.lca-rank--2[b-84lqaqp2vr] { background: rgba(249,115,22,0.10); border-color: rgba(249,115,22,0.30); color: #ea580c; }
.lca-rank--3[b-84lqaqp2vr] { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.30); color: #d97706; }

.lca-row-level[b-84lqaqp2vr] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    flex-shrink: 0;
    white-space: nowrap;
}

.lca-row-diag[b-84lqaqp2vr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 5px;
    border-radius: 20px;
    border: 1px solid;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.lca-row-diag .material-icons[b-84lqaqp2vr] { font-size: 11px; }

.lca-row-space[b-84lqaqp2vr] { flex: 1; }

.lca-row-users[b-84lqaqp2vr] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.lca-row-rate[b-84lqaqp2vr] {
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    width: 42px;
    text-align: right;
}

/* Line 2: bar */
.lca-bar-track[b-84lqaqp2vr] {
    width: 100%;
    height: 5px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.lca-bar-fill[b-84lqaqp2vr] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 2px;
    opacity: 0.80;
}

/* Line 3: metric text */
.lca-row-mets[b-84lqaqp2vr] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}

.lca-row-mets strong[b-84lqaqp2vr] {
    font-weight: 700;
}

.lca-met-dot[b-84lqaqp2vr] {
    font-size: 10px;
    color: var(--border);
    flex-shrink: 0;
}

.lca-met--fail[b-84lqaqp2vr] { font-size: 10.5px; color: var(--text-muted); }
.lca-met--fail strong[b-84lqaqp2vr] { color: #ef4444; }

.lca-met--comp[b-84lqaqp2vr] { font-size: 10.5px; color: var(--text-muted); }
.lca-met--comp strong[b-84lqaqp2vr] { color: #10b981; }

.lca-met--home[b-84lqaqp2vr] { font-size: 10.5px; color: var(--text-muted); }
.lca-met--home strong[b-84lqaqp2vr] { color: #d97706; }

.lca-met--rec[b-84lqaqp2vr]  { font-size: 10.5px; color: var(--text-muted); }
.lca-met--rec  strong[b-84lqaqp2vr] { color: #6366f1; }
/* /Components/Analytics/LevelDetailCard.razor.rz.scp.css */
/* =========================
   CARD STRUCTURE (Overview Sync)
   ========================= */
.games-card[b-y1nbrrh16r] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.games-card-header[b-y1nbrrh16r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.games-card-title[b-y1nbrrh16r] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

/* Style cho nút Highlight mới */
.highlight-toggle-btn[b-y1nbrrh16r] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.highlight-toggle-btn.active[b-y1nbrrh16r] {
    background-color: #eff6ff; /* Màu xanh nhạt cực nhẹ (Light Blue) */
    border-color: #3b82f6;     /* Viền màu xanh đậm */
    color: #1d4ed8;            /* Chữ màu xanh đậm */
    box-shadow: 0 0 0 1px #3b82f6; /* Tạo cảm giác viền đậm hơn */
}

.highlight-toggle-btn.active .material-icons[b-y1nbrrh16r] {
    color: #3b82f6;
}

.highlight-toggle-btn:hover[b-y1nbrrh16r] {
    background-color: #f9fafb;
    border-color: #9ca3af;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.highlight-toggle-btn.active:hover[b-y1nbrrh16r] {
    background-color: #dbeafe; /* Xanh đậm hơn một chút khi hover lúc active */
    border-color: #2563eb;
}

.highlight-toggle-btn .material-icons[b-y1nbrrh16r] {
    font-size: 18px;
    color: #4b5563; /* Màu icon hơi xám đậm */
}

.highlight-toggle-btn .btn-text[b-y1nbrrh16r] {
    font-size: 14px;
    font-weight: 500;
}

/* =========================
   GRID & COLUMNS
   ========================= */
.level-grid[b-y1nbrrh16r] {
    display: grid;
    grid-template-columns: 150px repeat(5, 1fr) 3.5fr;
    align-items: center;
}

.col-cell[b-y1nbrrh16r] {
    padding: 12px 16px;
    border-right: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 48px;
    box-sizing: border-box;
    overflow: hidden;
}

.col-cell:last-child[b-y1nbrrh16r] {
    border-right: none;
}

.font-medium[b-y1nbrrh16r] {
    font-weight: 500;
}

/* =========================
   HEADER & ROWS (Overview Sync)
   ========================= */
.games-table-header[b-y1nbrrh16r] {
    background: #f9fafb;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    border-top: 1px solid #f0f2f5;
}

/* =========================
   START USERS PROGRESS BAR
   ========================= */
.col-start-users[b-y1nbrrh16r] {
    padding: 0 !important;
    position: relative;
    background: transparent;
    height: 100%;
}

.progress-bar-bg[b-y1nbrrh16r] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #93c5fd; /* Màu xanh GA đặc trưng */
    z-index: 1;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-text[b-y1nbrrh16r] {
    position: relative;
    z-index: 2;
    padding-left: 16px;
    font-weight: 500;
    color: #111827;
}

.level-badge[b-y1nbrrh16r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;           /* Độ rộng ô vuông */
    height: 28px;          /* Chiều cao ô vuông */

    border: 1px solid #d1d5db; /* Màu viền xám nhạt */
    border-radius: 6px;    /* Độ bo góc nhẹ */

    background-color: #ffffff;
    color: #374151;        /* Màu chữ số */
    font-size: 13px;
    font-weight: 500;
}

/* Căn chỉnh lại ô chứa để badge nằm gọn gàng */
.col-cell.font-medium[b-y1nbrrh16r] {
    justify-content: flex-start; /* Đảm bảo ô vuông nằm sát lề trái */
    padding-left: 16px;
}


/* Copy trực tiếp từ Overview.razor.css */
.sortable[b-y1nbrrh16r] {
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
}

.sort-icon[b-y1nbrrh16r] {
    width: 10px;
    height: 12px;
    position: relative;
    opacity: 0.5; /* Mặc định mờ khi chưa chọn */
}

.sort-icon[b-y1nbrrh16r]::before, .sort-icon[b-y1nbrrh16r]::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.sort-icon[b-y1nbrrh16r]::before { top: 0; border-bottom: 5px solid #9ca3af; }
.sort-icon[b-y1nbrrh16r]::after { bottom: 0; border-top: 5px solid #9ca3af; }

/* Trạng thái Active và hướng mũi tên */
.sortable.active .sort-icon[b-y1nbrrh16r] { opacity: 1; }

.sortable.sort-asc .sort-icon[b-y1nbrrh16r]::before { border-bottom-color: #111827; }
.sortable.sort-asc .sort-icon[b-y1nbrrh16r]::after { border-top-color: #d1d5db; }

.sortable.sort-desc .sort-icon[b-y1nbrrh16r]::before { border-bottom-color: #d1d5db; }
.sortable.sort-desc .sort-icon[b-y1nbrrh16r]::after { border-top-color: #111827; }

.bg-success[b-y1nbrrh16r] {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
}
.bg-warning[b-y1nbrrh16r] {
    background-color: #fffbeb !important;
    color: #92400e !important;
}
.bg-danger[b-y1nbrrh16r] {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
}

.col-highlight[b-y1nbrrh16r] {
    padding: 0 !important;
    position: relative;
    display: flex;
    align-items: center;      
    background: transparent;
    height: 100%;
}

/* Lớp nền highlight */
.highlight-bg[b-y1nbrrh16r] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%; /* Mặc định phủ kín */
    z-index: 1;
    /*opacity: 0.35;*/
}

.highlight-bg-avg-fail[b-y1nbrrh16r] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%; /* Mặc định phủ kín */
    z-index: 1;
}

.bg-ga-churn-success[b-y1nbrrh16r] { background-color: #d1fae5; }
.bg-ga-churn-danger[b-y1nbrrh16r] { background-color: #ff000008; }
.bg-ga-churn-warning[b-y1nbrrh16r] { background-color: #fffb000a; }

.bg-ga-compelete-success[b-y1nbrrh16r] { background-color: #69c689; }
.bg-ga-compelete-danger[b-y1nbrrh16r] { background-color: #69c68985; }
.bg-ga-compelete-warning[b-y1nbrrh16r] { background-color: #69c689c2; }

.bg-ga-avgFailComplete-very-danger[b-y1nbrrh16r] { background-color: #ff0000ad; }
.bg-ga-avgFailComplete-danger[b-y1nbrrh16r] { background-color: #ff000085; }
.bg-ga-avgFailComplete-warning[b-y1nbrrh16r] { background-color: #ff00005e; }

.bg-ga-fail_users-warning[b-y1nbrrh16r] { background-color: #ff0000ad; }
.bg-ga-fail_users-danger[b-y1nbrrh16r] { background-color: #ff000085; }
.bg-ga-fail_users-warning[b-y1nbrrh16r] { background-color: #ff00005e; }

/* Văn bản hiển thị đè lên nền */
.cell-text[b-y1nbrrh16r] {
    position: relative;
    z-index: 2;
    padding-left: 16px;
    font-weight: 500;
    color: #111827;
    width: 100%;             /* Chiếm hết chiều ngang để dễ kiểm soát */
    display: flex;
    align-items: center;     /* Căn giữa nội dung văn bản */
}

/* Đồng bộ vách ngăn cho các cột đặc biệt */
.col-highlight[b-y1nbrrh16r] {
    border-right: 1px solid #f0f2f5;
}


.highlight-eye[b-y1nbrrh16r] {
    margin-left: auto;
    margin-right: -12px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px;
    display: flex;
    align-items: center;
}

.eye-off[b-y1nbrrh16r] {
    color: #9ca3af; /* Xám mờ khi tắt */
    opacity: 0.5;
}

.eye-on[b-y1nbrrh16r] {
    color: #3b82f6; /* Xanh dương GA khi bật - Bạn có thể giữ vàng nếu thích */
}

.highlight-eye:hover[b-y1nbrrh16r] {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}
/* /Components/Analytics/LevelDistributionChart.razor.rz.scp.css */
/* Component-specific styles */
/* /Components/Analytics/LevelEconomicAnalysis.razor.rz.scp.css */
/* ===== LEA CARD ===== */
.lea-card[b-rqxj54zr7v] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.lea-header[b-rqxj54zr7v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.lea-header-left[b-rqxj54zr7v] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.lea-header-icon[b-rqxj54zr7v] {
    width: 38px;
    height: 38px;
    background: rgba(79, 70, 229, 0.10);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lea-header-icon .material-icons[b-rqxj54zr7v] {
    font-size: 20px;
    color: #4F46E5;
}

.lea-title[b-rqxj54zr7v] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.lea-sub[b-rqxj54zr7v] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.lea-badge[b-rqxj54zr7v] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.lea-badge .material-icons[b-rqxj54zr7v] {
    font-size: 15px;
    color: #10B981;
}

/* ===== KPI STRIP ===== */
.lea-kpi-strip[b-rqxj54zr7v] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.lea-kpi-item[b-rqxj54zr7v] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.lea-kpi-sep[b-rqxj54zr7v] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.lea-kpi-dot[b-rqxj54zr7v] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lea-kpi-info[b-rqxj54zr7v] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lea-kpi-label[b-rqxj54zr7v] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.lea-kpi-value[b-rqxj54zr7v] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ===== CHARTS ROW ===== */
.lea-charts-row[b-rqxj54zr7v] {
    display: flex;
}

.lea-chart-panel[b-rqxj54zr7v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lea-chart-panel--right[b-rqxj54zr7v] {
    border-left: 1px solid var(--border-light);
}

.lea-chart-panel-header[b-rqxj54zr7v] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px 8px 10px;
    min-height: 38px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.lea-chart-sep[b-rqxj54zr7v] {
    width: 1px;
    height: 12px;
    background: var(--border);
    margin: 0 6px;
}

.lea-chart-body[b-rqxj54zr7v] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.lea-chart-body canvas[b-rqxj54zr7v] {
    width: 100% !important;
    height: 100% !important;
}


/* ===== PAGINATION FOOTER ===== */
.lea-footer[b-rqxj54zr7v] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/LevelFailureAnalysis.razor.rz.scp.css */
/* ===== LFA CARD ===== */
.lfa-card[b-ir4pgsbfta] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.lfa-header[b-ir4pgsbfta] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.lfa-header-left[b-ir4pgsbfta] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.lfa-header-icon[b-ir4pgsbfta] {
    width: 38px;
    height: 38px;
    background: rgba(239, 68, 68, 0.10);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lfa-header-icon .material-icons[b-ir4pgsbfta] {
    font-size: 20px;
    color: #ef4444;
}

.lfa-title[b-ir4pgsbfta] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.lfa-sub[b-ir4pgsbfta] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.lfa-badge[b-ir4pgsbfta] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.lfa-badge .material-icons[b-ir4pgsbfta] {
    font-size: 15px;
    color: #6366F1;
}

/* ===== KPI STRIP ===== */
.lfa-kpi-strip[b-ir4pgsbfta] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.lfa-kpi-item[b-ir4pgsbfta] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.lfa-kpi-sep[b-ir4pgsbfta] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.lfa-kpi-dot[b-ir4pgsbfta] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lfa-kpi-info[b-ir4pgsbfta] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lfa-kpi-label[b-ir4pgsbfta] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.lfa-kpi-value[b-ir4pgsbfta] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ===== CHARTS ROW ===== */
.lfa-charts-row[b-ir4pgsbfta] {
    display: flex;
}

.lfa-chart-panel[b-ir4pgsbfta] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lfa-chart-panel--right[b-ir4pgsbfta] {
    border-left: 1px solid var(--border-light);
}

.lfa-chart-panel-header[b-ir4pgsbfta] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    min-height: 38px;
    flex-shrink: 0;
}

.lfa-chart-line-mark[b-ir4pgsbfta] {
    display: inline-block;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    flex-shrink: 0;
}

.lfa-chart-label[b-ir4pgsbfta] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.lfa-chart-body[b-ir4pgsbfta] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.lfa-chart-body canvas[b-ir4pgsbfta] {
    width: 100% !important;
    height: 100% !important;
}

/* ===== PAGINATION FOOTER ===== */
.lfa-footer[b-ir4pgsbfta] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/LevelKPICard.razor.rz.scp.css */
/* ===== LKPI CARD ===== */
.lkpi-card[b-adsi9p58rz] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.lkpi-header[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.lkpi-header-left[b-adsi9p58rz] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.lkpi-header-icon[b-adsi9p58rz] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(79, 70, 229, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lkpi-header-icon .material-icons[b-adsi9p58rz] { font-size: 20px; color: #4f46e5; }

.lkpi-title[b-adsi9p58rz] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.lkpi-sub[b-adsi9p58rz]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.lkpi-badge[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.lkpi-badge .material-icons[b-adsi9p58rz] { font-size: 15px; color: #4f46e5; }

/* ===== KPI STRIP ===== */
.lkpi-kpi-strip[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.lkpi-kpi-item[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.lkpi-kpi-sep[b-adsi9p58rz] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.lkpi-kpi-dot[b-adsi9p58rz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lkpi-kpi-dot-2[b-adsi9p58rz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 1.5px;
}


.lkpi-kpi-info[b-adsi9p58rz] { display: flex; flex-direction: column; gap: 1px; }

.lkpi-kpi-label[b-adsi9p58rz] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.lkpi-kpi-value[b-adsi9p58rz] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ===== CHARTS ROW ===== */
.lkpi-charts-row[b-adsi9p58rz] {
    display: flex;
}

.lkpi-chart-panel[b-adsi9p58rz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lkpi-chart-panel--right[b-adsi9p58rz] {
    border-left: 1px solid var(--border-light);
}

.lkpi-chart-panel-header[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    min-height: 38px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.lkpi-chart-dot[b-adsi9p58rz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lkpi-chart-label[b-adsi9p58rz] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.lkpi-chart-body[b-adsi9p58rz] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.lkpi-chart-body canvas[b-adsi9p58rz] {
    width: 100% !important;
    height: 100% !important;
}

/* ===== MILESTONE FUNNEL (Chart 1) ===== */
.lkpi-ms-body[b-adsi9p58rz] {
    display: flex;
    flex-direction: column;
    padding: 16px 20px 20px;
    gap: 0;
    min-height: 248px;
    justify-content: center;
}

.lkpi-ms-row[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lkpi-ms-badge[b-adsi9p58rz] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 9px;
    border-radius: 20px;
    flex-shrink: 0;
    width: 46px;
    text-align: center;
    box-sizing: border-box;
}

.lkpi-ms-track[b-adsi9p58rz] {
    flex: 1;
    height: 10px;
    background: var(--bg-subtle);
    border-radius: 5px;
    overflow: hidden;
    min-width: 0;
}

.lkpi-ms-fill[b-adsi9p58rz] {
    height: 100%;
    border-radius: 5px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 4px;
}

.lkpi-ms-stats[b-adsi9p58rz] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-shrink: 0;
    width: 112px;
    justify-content: flex-end;
}

.lkpi-ms-count[b-adsi9p58rz] {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.lkpi-ms-pct[b-adsi9p58rz] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 400;
}

/* Drop-off connector between rows */
.lkpi-ms-connector[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 0 5px 58px; /* align with bar track start */
    padding-right: 108px;    /* align with stats end */
}

.lkpi-ms-conn-line[b-adsi9p58rz] {
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.lkpi-ms-conn-tags[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.lkpi-ms-conn-drop[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 600;
    color: #dc2626;
    background: rgba(220,38,38,0.08);
    padding: 2px 7px;
    border-radius: 20px;
}

.lkpi-ms-conn-drop .material-icons[b-adsi9p58rz] {
    font-size: 11px;
}

.lkpi-ms-conn-ret[b-adsi9p58rz] {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Bottom insight */
.lkpi-ms-insight[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 9px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

.lkpi-ms-insight .material-icons[b-adsi9p58rz] {
    font-size: 14px;
    color: #f97316;
    flex-shrink: 0;
}

.lkpi-ms-insight strong[b-adsi9p58rz] {
    color: var(--text-primary);
    font-weight: 700;
}

/* ===== DISTRIBUTION PANEL (right chart) ===== */
.lkpi-chart-body--dist[b-adsi9p58rz] {
    height: auto;
    min-height: 248px;
    display: flex;
    align-items: stretch;
    padding: 16px 20px;
}

.lkpi-dist-comp[b-adsi9p58rz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.lkpi-dist-row[b-adsi9p58rz] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.lkpi-dist-meta[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lkpi-dist-names[b-adsi9p58rz] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.lkpi-dist-tier[b-adsi9p58rz] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}

.lkpi-dist-sub[b-adsi9p58rz] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 400;
}

.lkpi-dist-right[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lkpi-dist-val[b-adsi9p58rz] {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.lkpi-dist-pct[b-adsi9p58rz] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 400;
}

.lkpi-dist-crown[b-adsi9p58rz] {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 20px;
}

.lkpi-dist-trend[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 600;
}

.lkpi-dist-trend .material-icons[b-adsi9p58rz] { font-size: 16px; }
.lkpi-dist-trend span:last-child[b-adsi9p58rz] { font-size: 10.5px; }
.lkpi-dist-trend.trend-up[b-adsi9p58rz]   { color: #16a34a; }
.lkpi-dist-trend.trend-down[b-adsi9p58rz] { color: #dc2626; }

.lkpi-dist-track[b-adsi9p58rz] {
    width: 100%;
    height: 8px;
    background: var(--bg-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.lkpi-dist-fill[b-adsi9p58rz] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 4px;
}

.lkpi-dist-insight[b-adsi9p58rz] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: var(--bg-subtle);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 4px;
}

.lkpi-dist-insight .material-icons[b-adsi9p58rz] {
    font-size: 14px;
    color: #f97316;
    flex-shrink: 0;
}

.lkpi-dist-insight strong[b-adsi9p58rz] {
    color: var(--text-primary);
    font-weight: 700;
}
/* /Components/Analytics/LevelLifecycleAnalysis.razor.rz.scp.css */
.filter-btn[b-59e0zmuokp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
}

.dropdown[b-59e0zmuokp] {
    position: relative;
    display: inline-block;
}

.dropdown-content[b-59e0zmuokp] {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 5px); /* Khoảng hở 5px cho đẹp */
    background-color: white;
    min-width: 180px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    z-index: 10;
    border-radius: 5px;
    padding: 8px 0;
    border: 1px solid #e5e7eb;
}

.dropdown:hover .dropdown-content[b-59e0zmuokp] {
    display: block;
}

.dropdown-content[b-59e0zmuokp]::before {
    content: "";
    position: absolute;
    top: -15px; /* Độ cao này phải bằng hoặc lớn hơn khoảng hở giữa nút và menu */
    left: 0;
    right: 0;
    height: 15px;
    background: transparent; /* Tàng hình */
}

.filter-item[b-59e0zmuokp] {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}

.filter-item:hover[b-59e0zmuokp] {
    background-color: #f9fafb;
}

.dot[b-59e0zmuokp] {
    width: 10px;        /* Tăng nhẹ kích thước lên 10px để hình vuông trông rõ hơn */
    height: 10px;
    border-radius: 2px; /* 2px để bo góc nhẹ, hoặc 0 để vuông sắc cạnh */
    display: inline-block;
}

.chart-filters[b-59e0zmuokp] {
    display: inline-flex;
    align-items: center;
}
/* /Components/Analytics/LevelLifecycleAnalysisV2.razor.rz.scp.css */
/* ===== LLV CARD ===== */
.llv-card[b-mje5z69tfr] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.llv-header[b-mje5z69tfr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.llv-header-left[b-mje5z69tfr] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.llv-header-icon[b-mje5z69tfr] {
    width: 38px;
    height: 38px;
    background: #ede9fe;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.llv-header-icon .material-icons[b-mje5z69tfr] {
    font-size: 20px;
    color: #8B5CF6;
}

.llv-title[b-mje5z69tfr] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.llv-sub[b-mje5z69tfr] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.llv-badge[b-mje5z69tfr] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 600;
    color: #166534;
    flex-shrink: 0;
}

.llv-badge .material-icons[b-mje5z69tfr] {
    font-size: 15px;
    color: #10b981;
}

/* ===== KPI STRIP ===== */
.llv-kpi-strip[b-mje5z69tfr] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.llv-kpi-item[b-mje5z69tfr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.llv-kpi-sep[b-mje5z69tfr] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.llv-kpi-dot[b-mje5z69tfr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.llv-kpi-info[b-mje5z69tfr] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.llv-kpi-label[b-mje5z69tfr] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.llv-kpi-value[b-mje5z69tfr] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ===== CHARTS ROW ===== */
.llv-charts-row[b-mje5z69tfr] {
    display: flex;
}

.llv-chart-panel[b-mje5z69tfr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.llv-chart-panel--right[b-mje5z69tfr] {
    border-left: 1px solid var(--border-light);
}

.llv-chart-panel-header[b-mje5z69tfr] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px 8px 10px;
    min-height: 38px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.llv-chart-body[b-mje5z69tfr] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.llv-chart-body canvas[b-mje5z69tfr] {
    width: 100% !important;
    height: 100% !important;
}

/* ===== PAGINATION FOOTER ===== */
.llv-footer[b-mje5z69tfr] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/LevelTimeSpendAnalysis.razor.rz.scp.css */
/* ===== LTS CARD ===== */
.lts-card[b-o8ivqh94ay] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.lts-header[b-o8ivqh94ay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.lts-header-left[b-o8ivqh94ay] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.lts-header-icon[b-o8ivqh94ay] {
    width: 38px;
    height: 38px;
    background: rgba(249, 115, 22, 0.10);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lts-header-icon .material-icons[b-o8ivqh94ay] {
    font-size: 20px;
    color: #f97316;
}

.lts-title[b-o8ivqh94ay] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.lts-sub[b-o8ivqh94ay] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.lts-badge[b-o8ivqh94ay] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.lts-badge .material-icons[b-o8ivqh94ay] {
    font-size: 15px;
    color: #f97316;
}

/* ===== KPI STRIP ===== */
.lts-kpi-strip[b-o8ivqh94ay] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.lts-kpi-item[b-o8ivqh94ay] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.lts-kpi-sep[b-o8ivqh94ay] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.lts-kpi-dot[b-o8ivqh94ay] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lts-kpi-info[b-o8ivqh94ay] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lts-kpi-label[b-o8ivqh94ay] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.lts-kpi-value[b-o8ivqh94ay] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ===== CHARTS ROW ===== */
.lts-charts-row[b-o8ivqh94ay] {
    display: flex;
}

.lts-chart-panel[b-o8ivqh94ay] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lts-chart-panel--right[b-o8ivqh94ay] {
    border-left: 1px solid var(--border-light);
}

.lts-chart-panel-header[b-o8ivqh94ay] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px 8px 10px;
    min-height: 38px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.lts-chart-body[b-o8ivqh94ay] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.lts-chart-body canvas[b-o8ivqh94ay] {
    width: 100% !important;
    height: 100% !important;
}

/* ===== PAGINATION FOOTER ===== */
.lts-footer[b-o8ivqh94ay] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/LTVCohortChart.razor.rz.scp.css */
.rcc-card[b-pk939btnej] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rcc-header[b-pk939btnej] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.rcc-header-left[b-pk939btnej] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.rcc-header-icon[b-pk939btnej] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rcc-header-icon .material-icons[b-pk939btnej] { font-size: 19px; }
.rcc-title[b-pk939btnej] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.rcc-sub[b-pk939btnej] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.rcc-badge[b-pk939btnej] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.rcc-badge .material-icons[b-pk939btnej] { font-size: 14px; }
.rcc-kpi-strip[b-pk939btnej] {
    display: flex;
    align-items: center;
    padding: 9px 18px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}
.rcc-kpi-item[b-pk939btnej] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.rcc-kpi-sep[b-pk939btnej] {
    width: 1px;
    height: 26px;
    background: var(--border);
    margin: 0 14px;
    flex-shrink: 0;
}
.rcc-kpi-dot[b-pk939btnej] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rcc-kpi-info[b-pk939btnej] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.rcc-kpi-label[b-pk939btnej] {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}
.rcc-kpi-value[b-pk939btnej] {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.rcc-chart-body[b-pk939btnej] {
    position: relative;
    height: 280px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}
.rcc-chart-body canvas[b-pk939btnej] {
    width: 100% !important;
    height: 100% !important;
}
/* /Components/Analytics/MonetizationFirstPayingChart.razor.rz.scp.css */
.rcc-card[b-nbebkrxast] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rcc-header[b-nbebkrxast] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.rcc-header-left[b-nbebkrxast] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.rcc-header-icon[b-nbebkrxast] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rcc-header-icon .material-icons[b-nbebkrxast] { font-size: 19px; }
.rcc-title[b-nbebkrxast] { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.rcc-sub[b-nbebkrxast]   { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.rcc-badge[b-nbebkrxast] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.rcc-badge .material-icons[b-nbebkrxast] { font-size: 14px; }
.rcc-chart-body[b-nbebkrxast] {
    position: relative;
    height: 210px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
    flex: 1;
}
.rcc-chart-body canvas[b-nbebkrxast] { width: 100% !important; height: 100% !important; }
/* /Components/Analytics/MonetizationPayingChart.razor.rz.scp.css */
.rcc-card[b-bbk8rpf4as] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rcc-header[b-bbk8rpf4as] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.rcc-header-left[b-bbk8rpf4as] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.rcc-header-icon[b-bbk8rpf4as] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rcc-header-icon .material-icons[b-bbk8rpf4as] { font-size: 19px; }
.rcc-title[b-bbk8rpf4as] { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.rcc-sub[b-bbk8rpf4as]   { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.rcc-badge[b-bbk8rpf4as] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.rcc-badge .material-icons[b-bbk8rpf4as] { font-size: 14px; }
.rcc-chart-body[b-bbk8rpf4as] {
    position: relative;
    height: 210px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
    flex: 1;
}
.rcc-chart-body canvas[b-bbk8rpf4as] { width: 100% !important; height: 100% !important; }
/* /Components/Analytics/MonetizationRevenueByProductChart.razor.rz.scp.css */
.rcc-card[b-sbm0bah2hj] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rcc-header[b-sbm0bah2hj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.rcc-header-left[b-sbm0bah2hj] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.rcc-header-icon[b-sbm0bah2hj] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rcc-header-icon .material-icons[b-sbm0bah2hj] { font-size: 19px; }
.rcc-title[b-sbm0bah2hj] { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.rcc-sub[b-sbm0bah2hj]   { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.rcc-badge[b-sbm0bah2hj] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.rcc-badge .material-icons[b-sbm0bah2hj] { font-size: 14px; }
.rcc-chart-body[b-sbm0bah2hj] {
    position: relative;
    height: 210px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
    flex: 1;
}
.rcc-chart-body canvas[b-sbm0bah2hj] { width: 100% !important; height: 100% !important; }
/* /Components/Analytics/OverviewAdvertisement.razor.rz.scp.css */
/* ===== CONTAINER ===== */
.ov-kpi-container[b-337eelfn5s] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;
}

/* ===== HEADER ===== */
.ov-kpi-header[b-337eelfn5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.ov-kpi-header-left[b-337eelfn5s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ov-kpi-section-title[b-337eelfn5s] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.ov-kpi-section-sub[b-337eelfn5s] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.ov-kpi-badge[b-337eelfn5s] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.ov-kpi-badge .material-icons[b-337eelfn5s] {
    font-size: 15px;
    color: var(--color-primary);
}

/* ===== GRID ===== */
.ov-kpi-grid[b-337eelfn5s] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.ov-kpi-grid--5[b-337eelfn5s] {
    grid-template-columns: repeat(5, 1fr);
}

/* ===== METRIC CARD ===== */
.ov-kpi-metric[b-337eelfn5s] {
    padding: 20px 24px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ov-kpi-metric--last[b-337eelfn5s] {
    border-right: none;
}

/* ===== METRIC TOP ROW ===== */
.ov-kpi-metric-top[b-337eelfn5s] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

/* ===== ICON CIRCLE ===== */
.ov-kpi-icon[b-337eelfn5s] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ov-kpi-icon .material-icons[b-337eelfn5s] { font-size: 17px; }

.ov-kpi-icon--primary[b-337eelfn5s] { background: var(--color-primary-subtle); color: var(--color-primary); }
.ov-kpi-icon--purple[b-337eelfn5s]  { background: #ede9fe; color: #7c3aed; }
.ov-kpi-icon--green[b-337eelfn5s]   { background: #dcfce7; color: #16a34a; }
.ov-kpi-icon--orange[b-337eelfn5s]  { background: #fef3c7; color: #d97706; }
.ov-kpi-icon--red[b-337eelfn5s]     { background: #fee2e2; color: #dc2626; }

/* ===== LABEL ===== */
.ov-kpi-label-wrap[b-337eelfn5s] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ov-kpi-label[b-337eelfn5s] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ===== VALUE ===== */
.ov-kpi-value[b-337eelfn5s] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ===== CONTEXT ===== */
.ov-kpi-context[b-337eelfn5s] {
    font-size: 11.5px;
    color: var(--text-placeholder);
}

/* ===== TOOLTIP ===== */
.info-wrapper[b-337eelfn5s] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tooltip-box[b-337eelfn5s] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 248px;
    background: var(--bg-card);
    color: var(--text-secondary);
    text-align: left;
    border-radius: var(--radius-md);
    padding: 13px 14px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 12px 24px -4px rgba(0,0,0,.12);
    border: 1px solid var(--border);
    z-index: 200;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.tooltip-box[b-337eelfn5s]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -9px;
    border-width: 9px;
    border-style: solid;
    border-color: var(--border) transparent transparent transparent;
}

.tooltip-box[b-337eelfn5s]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: var(--bg-card) transparent transparent transparent;
}

.info-wrapper:hover .tooltip-box[b-337eelfn5s] {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ov-kpi-metric:first-child .tooltip-box[b-337eelfn5s] {
    left: 0;
    transform: translateX(0) translateY(4px);
}
.ov-kpi-metric:first-child .tooltip-box[b-337eelfn5s]::before,
.ov-kpi-metric:first-child .tooltip-box[b-337eelfn5s]::after {
    left: 22px;
    margin-left: 0;
}
.ov-kpi-metric:first-child .info-wrapper:hover .tooltip-box[b-337eelfn5s] {
    transform: translateX(0) translateY(0);
}

.ov-kpi-metric--last .tooltip-box[b-337eelfn5s] {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}
.ov-kpi-metric--last .tooltip-box[b-337eelfn5s]::before,
.ov-kpi-metric--last .tooltip-box[b-337eelfn5s]::after {
    left: auto;
    right: 14px;
    margin-left: 0;
}
.ov-kpi-metric--last .info-wrapper:hover .tooltip-box[b-337eelfn5s] {
    transform: translateX(0) translateY(0);
}

.tooltip-header[b-337eelfn5s] {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.tooltip-content[b-337eelfn5s] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.info-icon[b-337eelfn5s] {
    font-size: 14px;
    color: var(--text-placeholder);
    cursor: pointer;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .ov-kpi-grid[b-337eelfn5s],
    .ov-kpi-grid--5[b-337eelfn5s] {
        grid-template-columns: repeat(2, 1fr);
    }
    .ov-kpi-metric:nth-child(2n)[b-337eelfn5s] {
        border-right: none;
    }
    .ov-kpi-metric:nth-child(n+3)[b-337eelfn5s] {
        border-top: 1px solid var(--border-light);
    }
}
/* /Components/Analytics/OverviewEconomic.razor.rz.scp.css */
/* ===== CONTAINER ===== */
.ov-kpi-container[b-6dvx26ouf7] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;
}

/* ===== HEADER ===== */
.ov-kpi-header[b-6dvx26ouf7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.ov-kpi-header-left[b-6dvx26ouf7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ov-kpi-section-title[b-6dvx26ouf7] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.ov-kpi-section-sub[b-6dvx26ouf7] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.ov-kpi-badge[b-6dvx26ouf7] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.ov-kpi-badge .material-icons[b-6dvx26ouf7] {
    font-size: 15px;
    color: var(--color-primary);
}

/* ===== GRID ===== */
.ov-kpi-grid[b-6dvx26ouf7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.ov-kpi-grid--5[b-6dvx26ouf7] {
    grid-template-columns: repeat(5, 1fr);
}

/* ===== METRIC CARD ===== */
.ov-kpi-metric[b-6dvx26ouf7] {
    padding: 20px 24px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ov-kpi-metric--last[b-6dvx26ouf7] {
    border-right: none;
}

/* ===== METRIC TOP ROW ===== */
.ov-kpi-metric-top[b-6dvx26ouf7] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

/* ===== ICON CIRCLE ===== */
.ov-kpi-icon[b-6dvx26ouf7] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ov-kpi-icon .material-icons[b-6dvx26ouf7] { font-size: 17px; }

.ov-kpi-icon--primary[b-6dvx26ouf7] { background: var(--color-primary-subtle); color: var(--color-primary); }
.ov-kpi-icon--purple[b-6dvx26ouf7]  { background: #ede9fe; color: #7c3aed; }
.ov-kpi-icon--green[b-6dvx26ouf7]   { background: #dcfce7; color: #16a34a; }
.ov-kpi-icon--orange[b-6dvx26ouf7]  { background: #fef3c7; color: #d97706; }
.ov-kpi-icon--red[b-6dvx26ouf7]     { background: #fee2e2; color: #dc2626; }

/* ===== LABEL ===== */
.ov-kpi-label-wrap[b-6dvx26ouf7] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ov-kpi-label[b-6dvx26ouf7] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ===== VALUE ===== */
.ov-kpi-value[b-6dvx26ouf7] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ===== CONTEXT ===== */
.ov-kpi-context[b-6dvx26ouf7] {
    font-size: 11.5px;
    color: var(--text-placeholder);
}

/* ===== TOOLTIP ===== */
.info-wrapper[b-6dvx26ouf7] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tooltip-box[b-6dvx26ouf7] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 248px;
    background: var(--bg-card);
    color: var(--text-secondary);
    text-align: left;
    border-radius: var(--radius-md);
    padding: 13px 14px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 12px 24px -4px rgba(0,0,0,.12);
    border: 1px solid var(--border);
    z-index: 200;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.tooltip-box[b-6dvx26ouf7]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -9px;
    border-width: 9px;
    border-style: solid;
    border-color: var(--border) transparent transparent transparent;
}

.tooltip-box[b-6dvx26ouf7]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: var(--bg-card) transparent transparent transparent;
}

.info-wrapper:hover .tooltip-box[b-6dvx26ouf7] {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ov-kpi-metric:first-child .tooltip-box[b-6dvx26ouf7] {
    left: 0;
    transform: translateX(0) translateY(4px);
}
.ov-kpi-metric:first-child .tooltip-box[b-6dvx26ouf7]::before,
.ov-kpi-metric:first-child .tooltip-box[b-6dvx26ouf7]::after {
    left: 22px;
    margin-left: 0;
}
.ov-kpi-metric:first-child .info-wrapper:hover .tooltip-box[b-6dvx26ouf7] {
    transform: translateX(0) translateY(0);
}

.ov-kpi-metric--last .tooltip-box[b-6dvx26ouf7] {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}
.ov-kpi-metric--last .tooltip-box[b-6dvx26ouf7]::before,
.ov-kpi-metric--last .tooltip-box[b-6dvx26ouf7]::after {
    left: auto;
    right: 14px;
    margin-left: 0;
}
.ov-kpi-metric--last .info-wrapper:hover .tooltip-box[b-6dvx26ouf7] {
    transform: translateX(0) translateY(0);
}

.tooltip-header[b-6dvx26ouf7] {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.tooltip-content[b-6dvx26ouf7] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.info-icon[b-6dvx26ouf7] {
    font-size: 14px;
    color: var(--text-placeholder);
    cursor: pointer;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .ov-kpi-grid[b-6dvx26ouf7],
    .ov-kpi-grid--5[b-6dvx26ouf7] {
        grid-template-columns: repeat(2, 1fr);
    }
    .ov-kpi-metric:nth-child(2n)[b-6dvx26ouf7] {
        border-right: none;
    }
    .ov-kpi-metric:nth-child(n+3)[b-6dvx26ouf7] {
        border-top: 1px solid var(--border-light);
    }
}
/* /Components/Analytics/OverviewEngagement.razor.rz.scp.css */
/* ===== CONTAINER ===== */
.ov-eng-container[b-od2rgywiet] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;
}

/* ===== HEADER ===== */
.ov-eng-header[b-od2rgywiet] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.ov-eng-header-left[b-od2rgywiet] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ov-eng-section-title[b-od2rgywiet] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.ov-eng-section-sub[b-od2rgywiet] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.ov-eng-total-badge[b-od2rgywiet] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.ov-eng-total-badge .material-icons[b-od2rgywiet] {
    font-size: 15px;
    color: var(--color-primary);
}

/* ===== GRID ===== */
.ov-eng-grid[b-od2rgywiet] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* ===== METRIC CARD ===== */
.ov-eng-metric[b-od2rgywiet] {
    padding: 20px 24px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ov-eng-metric--last[b-od2rgywiet] {
    border-right: none;
}

/* ===== METRIC TOP ROW ===== */
.ov-eng-metric-top[b-od2rgywiet] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

/* ===== ICON CIRCLE ===== */
.ov-eng-icon[b-od2rgywiet] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ov-eng-icon .material-icons[b-od2rgywiet] { font-size: 17px; }

.ov-eng-icon--primary[b-od2rgywiet] { background: var(--color-primary-subtle); color: var(--color-primary); }
.ov-eng-icon--purple[b-od2rgywiet]  { background: #ede9fe; color: #7c3aed; }
.ov-eng-icon--green[b-od2rgywiet]   { background: #dcfce7; color: #16a34a; }
.ov-eng-icon--orange[b-od2rgywiet]  { background: #fef3c7; color: #d97706; }

/* ===== LABEL ===== */
.ov-eng-label-wrap[b-od2rgywiet] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ov-eng-label[b-od2rgywiet] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ===== VALUE ===== */
.ov-eng-value[b-od2rgywiet] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ===== CONTEXT ===== */
.ov-eng-context[b-od2rgywiet] {
    font-size: 11.5px;
    color: var(--text-placeholder);
}

/* ===== TOOLTIP ===== */
.info-wrapper[b-od2rgywiet] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tooltip-box[b-od2rgywiet] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 248px;
    background: var(--bg-card);
    color: var(--text-secondary);
    text-align: left;
    border-radius: var(--radius-md);
    padding: 13px 14px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 12px 24px -4px rgba(0,0,0,.12);
    border: 1px solid var(--border);
    z-index: 200;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

/* Arrow border layer */
.tooltip-box[b-od2rgywiet]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -9px;
    border-width: 9px;
    border-style: solid;
    border-color: var(--border) transparent transparent transparent;
}

/* Arrow fill layer */
.tooltip-box[b-od2rgywiet]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: var(--bg-card) transparent transparent transparent;
}

.info-wrapper:hover .tooltip-box[b-od2rgywiet] {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* First card: anchor tooltip to left edge, shift arrow right */
.ov-eng-metric:first-child .tooltip-box[b-od2rgywiet] {
    left: 0;
    transform: translateX(0) translateY(4px);
}
.ov-eng-metric:first-child .tooltip-box[b-od2rgywiet]::before,
.ov-eng-metric:first-child .tooltip-box[b-od2rgywiet]::after {
    left: 22px;
    margin-left: 0;
}
.ov-eng-metric:first-child .info-wrapper:hover .tooltip-box[b-od2rgywiet] {
    transform: translateX(0) translateY(0);
}

/* Last card: anchor tooltip to right edge, shift arrow left */
.ov-eng-metric--last .tooltip-box[b-od2rgywiet] {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}
.ov-eng-metric--last .tooltip-box[b-od2rgywiet]::before,
.ov-eng-metric--last .tooltip-box[b-od2rgywiet]::after {
    left: auto;
    right: 14px;
    margin-left: 0;
}
.ov-eng-metric--last .info-wrapper:hover .tooltip-box[b-od2rgywiet] {
    transform: translateX(0) translateY(0);
}

.tooltip-header[b-od2rgywiet] {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.tooltip-content[b-od2rgywiet] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.info-icon[b-od2rgywiet] {
    font-size: 14px;
    color: var(--text-placeholder);
    cursor: pointer;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .ov-eng-grid[b-od2rgywiet] {
        grid-template-columns: repeat(2, 1fr);
    }
    .ov-eng-metric:nth-child(2)[b-od2rgywiet] {
        border-right: none;
    }
    .ov-eng-metric:nth-child(n+3)[b-od2rgywiet] {
        border-top: 1px solid var(--border-light);
    }
}
/* /Components/Analytics/OverviewMonetization.razor.rz.scp.css */
/* ===== CONTAINER ===== */
.ov-kpi-container[b-nzy23ik0jp] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;
}

/* ===== HEADER ===== */
.ov-kpi-header[b-nzy23ik0jp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.ov-kpi-header-left[b-nzy23ik0jp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ov-kpi-section-title[b-nzy23ik0jp] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.ov-kpi-section-sub[b-nzy23ik0jp] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.ov-kpi-badge[b-nzy23ik0jp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.ov-kpi-badge .material-icons[b-nzy23ik0jp] {
    font-size: 15px;
    color: var(--color-primary);
}

/* ===== GRID ===== */
.ov-kpi-grid[b-nzy23ik0jp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.ov-kpi-grid--5[b-nzy23ik0jp] {
    grid-template-columns: repeat(5, 1fr);
}

/* ===== METRIC CARD ===== */
.ov-kpi-metric[b-nzy23ik0jp] {
    padding: 20px 24px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ov-kpi-metric--last[b-nzy23ik0jp] {
    border-right: none;
}

/* ===== METRIC TOP ROW ===== */
.ov-kpi-metric-top[b-nzy23ik0jp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

/* ===== ICON CIRCLE ===== */
.ov-kpi-icon[b-nzy23ik0jp] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ov-kpi-icon .material-icons[b-nzy23ik0jp] { font-size: 17px; }

.ov-kpi-icon--primary[b-nzy23ik0jp] { background: var(--color-primary-subtle); color: var(--color-primary); }
.ov-kpi-icon--purple[b-nzy23ik0jp]  { background: #ede9fe; color: #7c3aed; }
.ov-kpi-icon--green[b-nzy23ik0jp]   { background: #dcfce7; color: #16a34a; }
.ov-kpi-icon--orange[b-nzy23ik0jp]  { background: #fef3c7; color: #d97706; }
.ov-kpi-icon--red[b-nzy23ik0jp]     { background: #fee2e2; color: #dc2626; }

/* ===== LABEL ===== */
.ov-kpi-label-wrap[b-nzy23ik0jp] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ov-kpi-label[b-nzy23ik0jp] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ===== VALUE ===== */
.ov-kpi-value[b-nzy23ik0jp] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ===== CONTEXT ===== */
.ov-kpi-context[b-nzy23ik0jp] {
    font-size: 11.5px;
    color: var(--text-placeholder);
}

/* ===== TOOLTIP ===== */
.info-wrapper[b-nzy23ik0jp] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tooltip-box[b-nzy23ik0jp] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 248px;
    background: var(--bg-card);
    color: var(--text-secondary);
    text-align: left;
    border-radius: var(--radius-md);
    padding: 13px 14px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 12px 24px -4px rgba(0,0,0,.12);
    border: 1px solid var(--border);
    z-index: 200;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.tooltip-box[b-nzy23ik0jp]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -9px;
    border-width: 9px;
    border-style: solid;
    border-color: var(--border) transparent transparent transparent;
}

.tooltip-box[b-nzy23ik0jp]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: var(--bg-card) transparent transparent transparent;
}

.info-wrapper:hover .tooltip-box[b-nzy23ik0jp] {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ov-kpi-metric:first-child .tooltip-box[b-nzy23ik0jp] {
    left: 0;
    transform: translateX(0) translateY(4px);
}
.ov-kpi-metric:first-child .tooltip-box[b-nzy23ik0jp]::before,
.ov-kpi-metric:first-child .tooltip-box[b-nzy23ik0jp]::after {
    left: 22px;
    margin-left: 0;
}
.ov-kpi-metric:first-child .info-wrapper:hover .tooltip-box[b-nzy23ik0jp] {
    transform: translateX(0) translateY(0);
}

.ov-kpi-metric--last .tooltip-box[b-nzy23ik0jp] {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}
.ov-kpi-metric--last .tooltip-box[b-nzy23ik0jp]::before,
.ov-kpi-metric--last .tooltip-box[b-nzy23ik0jp]::after {
    left: auto;
    right: 14px;
    margin-left: 0;
}
.ov-kpi-metric--last .info-wrapper:hover .tooltip-box[b-nzy23ik0jp] {
    transform: translateX(0) translateY(0);
}

.tooltip-header[b-nzy23ik0jp] {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.tooltip-content[b-nzy23ik0jp] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.info-icon[b-nzy23ik0jp] {
    font-size: 14px;
    color: var(--text-placeholder);
    cursor: pointer;
}

/* ===== TOOLTIP RIGHT-ANCHOR ===== */
.ov-kpi-tt--right[b-nzy23ik0jp] {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}
.ov-kpi-tt--right[b-nzy23ik0jp]::before,
.ov-kpi-tt--right[b-nzy23ik0jp]::after { left: auto; right: 14px; margin-left: 0; }
.info-wrapper:hover .ov-kpi-tt--right[b-nzy23ik0jp] { transform: translateX(0) translateY(0); }

/* ===== SECONDARY STRIP ===== */
.ov-kpi-secondary[b-nzy23ik0jp] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
    gap: 4px 0;
}

.ov-kpi-stat[b-nzy23ik0jp] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 160px;
    padding: 4px 0;
}

.ov-kpi-stat-icon[b-nzy23ik0jp] {
    font-size: 17px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.ov-kpi-stat-info[b-nzy23ik0jp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ov-kpi-stat-label[b-nzy23ik0jp] {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

.ov-kpi-stat-val-row[b-nzy23ik0jp] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.ov-kpi-stat-value[b-nzy23ik0jp] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.ov-kpi-stat-sub[b-nzy23ik0jp] {
    font-size: 11px;
    color: var(--text-muted);
}

.ov-kpi-stat-divider[b-nzy23ik0jp] {
    width: 1px;
    height: 32px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 20px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .ov-kpi-grid[b-nzy23ik0jp],
    .ov-kpi-grid--5[b-nzy23ik0jp] {
        grid-template-columns: repeat(2, 1fr);
    }
    .ov-kpi-metric:nth-child(2n)[b-nzy23ik0jp] {
        border-right: none;
    }
    .ov-kpi-metric:nth-child(n+3)[b-nzy23ik0jp] {
        border-top: 1px solid var(--border-light);
    }
}

@media (max-width: 640px) {
    .ov-kpi-stat-divider[b-nzy23ik0jp] { display: none; }
    .ov-kpi-stat[b-nzy23ik0jp] { min-width: 140px; }
}
/* /Components/Analytics/OverviewRetention.razor.rz.scp.css */
/* ===== CONTAINER ===== */
.ov-kpi-container[b-j3607xy9zy] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;
}

/* ===== HEADER ===== */
.ov-kpi-header[b-j3607xy9zy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.ov-kpi-header-left[b-j3607xy9zy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ov-kpi-section-title[b-j3607xy9zy] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.ov-kpi-section-sub[b-j3607xy9zy] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.ov-kpi-badge[b-j3607xy9zy] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.ov-kpi-badge .material-icons[b-j3607xy9zy] {
    font-size: 15px;
    color: var(--color-primary);
}

/* ===== GRID ===== */
.ov-kpi-grid[b-j3607xy9zy] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.ov-kpi-grid--5[b-j3607xy9zy] {
    grid-template-columns: repeat(5, 1fr);
}

/* ===== METRIC CARD ===== */
.ov-kpi-metric[b-j3607xy9zy] {
    padding: 20px 24px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ov-kpi-metric--last[b-j3607xy9zy] {
    border-right: none;
}

/* ===== METRIC TOP ROW ===== */
.ov-kpi-metric-top[b-j3607xy9zy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

/* ===== ICON CIRCLE ===== */
.ov-kpi-icon[b-j3607xy9zy] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ov-kpi-icon .material-icons[b-j3607xy9zy] { font-size: 17px; }

.ov-kpi-icon--primary[b-j3607xy9zy] { background: var(--color-primary-subtle); color: var(--color-primary); }
.ov-kpi-icon--purple[b-j3607xy9zy]  { background: #ede9fe; color: #7c3aed; }
.ov-kpi-icon--green[b-j3607xy9zy]   { background: #dcfce7; color: #16a34a; }
.ov-kpi-icon--orange[b-j3607xy9zy]  { background: #fef3c7; color: #d97706; }
.ov-kpi-icon--red[b-j3607xy9zy]     { background: #fee2e2; color: #dc2626; }

/* ===== LABEL ===== */
.ov-kpi-label-wrap[b-j3607xy9zy] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ov-kpi-label[b-j3607xy9zy] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ===== VALUE ===== */
.ov-kpi-value[b-j3607xy9zy] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ===== CONTEXT ===== */
.ov-kpi-context[b-j3607xy9zy] {
    font-size: 11.5px;
    color: var(--text-placeholder);
}

/* ===== TOOLTIP ===== */
.info-wrapper[b-j3607xy9zy] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tooltip-box[b-j3607xy9zy] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 248px;
    background: var(--bg-card);
    color: var(--text-secondary);
    text-align: left;
    border-radius: var(--radius-md);
    padding: 13px 14px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 12px 24px -4px rgba(0,0,0,.12);
    border: 1px solid var(--border);
    z-index: 200;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

/* Arrow border layer */
.tooltip-box[b-j3607xy9zy]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -9px;
    border-width: 9px;
    border-style: solid;
    border-color: var(--border) transparent transparent transparent;
}

/* Arrow fill layer */
.tooltip-box[b-j3607xy9zy]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: var(--bg-card) transparent transparent transparent;
}

.info-wrapper:hover .tooltip-box[b-j3607xy9zy] {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* First card: anchor tooltip to left edge */
.ov-kpi-metric:first-child .tooltip-box[b-j3607xy9zy] {
    left: 0;
    transform: translateX(0) translateY(4px);
}
.ov-kpi-metric:first-child .tooltip-box[b-j3607xy9zy]::before,
.ov-kpi-metric:first-child .tooltip-box[b-j3607xy9zy]::after {
    left: 22px;
    margin-left: 0;
}
.ov-kpi-metric:first-child .info-wrapper:hover .tooltip-box[b-j3607xy9zy] {
    transform: translateX(0) translateY(0);
}

/* Last card: anchor tooltip to right edge */
.ov-kpi-metric--last .tooltip-box[b-j3607xy9zy] {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}
.ov-kpi-metric--last .tooltip-box[b-j3607xy9zy]::before,
.ov-kpi-metric--last .tooltip-box[b-j3607xy9zy]::after {
    left: auto;
    right: 14px;
    margin-left: 0;
}
.ov-kpi-metric--last .info-wrapper:hover .tooltip-box[b-j3607xy9zy] {
    transform: translateX(0) translateY(0);
}

.tooltip-header[b-j3607xy9zy] {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.tooltip-content[b-j3607xy9zy] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.info-icon[b-j3607xy9zy] {
    font-size: 14px;
    color: var(--text-placeholder);
    cursor: pointer;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .ov-kpi-grid[b-j3607xy9zy],
    .ov-kpi-grid--5[b-j3607xy9zy] {
        grid-template-columns: repeat(2, 1fr);
    }
    .ov-kpi-metric:nth-child(2n)[b-j3607xy9zy] {
        border-right: none;
    }
    .ov-kpi-metric:nth-child(n+3)[b-j3607xy9zy] {
        border-top: 1px solid var(--border-light);
    }
}
/* /Components/Analytics/PlaytimeMap.razor.rz.scp.css */
.map-card[b-qubuyihmlt] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
    margin-top: 24px;
}

.map-container[b-qubuyihmlt] {
    width: 100%;
    height: 500px; /* Độ cao phù hợp để quan sát toàn cầu */
    position: relative;
}
/* /Components/Analytics/PostFailActionsAnalysis.razor.rz.scp.css */
/* ===== PFA CARD ===== */
.pfa-card[b-z02r4ib48w] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.pfa-header[b-z02r4ib48w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.pfa-header-left[b-z02r4ib48w] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pfa-header-icon[b-z02r4ib48w] {
    width: 38px;
    height: 38px;
    background: rgba(79, 70, 229, 0.10);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pfa-header-icon .material-icons[b-z02r4ib48w] {
    font-size: 20px;
    color: #4F46E5;
}

.pfa-title[b-z02r4ib48w] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.pfa-sub[b-z02r4ib48w] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.pfa-badge[b-z02r4ib48w] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.pfa-badge .material-icons[b-z02r4ib48w] {
    font-size: 15px;
    color: #8B5CF6;
}

/* ===== KPI STRIP ===== */
.pfa-kpi-strip[b-z02r4ib48w] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.pfa-kpi-item[b-z02r4ib48w] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.pfa-kpi-sep[b-z02r4ib48w] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.pfa-kpi-dot[b-z02r4ib48w] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pfa-kpi-info[b-z02r4ib48w] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pfa-kpi-label[b-z02r4ib48w] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.pfa-kpi-value[b-z02r4ib48w] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ===== CHARTS ROW ===== */
.pfa-charts-row[b-z02r4ib48w] {
    display: flex;
}

.pfa-chart-panel[b-z02r4ib48w] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pfa-chart-panel--right[b-z02r4ib48w] {
    border-left: 1px solid var(--border-light);
}

.pfa-chart-panel-header[b-z02r4ib48w] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px 8px 10px;
    min-height: 38px;
    flex-shrink: 0;
}

.pfa-chart-dot[b-z02r4ib48w] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pfa-chart-line-mark[b-z02r4ib48w] {
    display: inline-block;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    flex-shrink: 0;
}

.pfa-chart-label[b-z02r4ib48w] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.pfa-chart-sep[b-z02r4ib48w] {
    width: 1px;
    height: 12px;
    background: var(--border);
    margin: 0 6px;
}

.pfa-chart-body[b-z02r4ib48w] {
    position: relative;
    height: 248px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}

.pfa-chart-body canvas[b-z02r4ib48w] {
    width: 100% !important;
    height: 100% !important;
}


/* ===== PAGINATION FOOTER ===== */
.pfa-footer[b-z02r4ib48w] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/RetentionCohort.razor.rz.scp.css */
.rcc-card[b-e39h7wdms2] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rcc-header[b-e39h7wdms2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.rcc-header-left[b-e39h7wdms2] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.rcc-header-icon[b-e39h7wdms2] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rcc-header-icon .material-icons[b-e39h7wdms2] { font-size: 19px; }
.rcc-title[b-e39h7wdms2] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.rcc-sub[b-e39h7wdms2] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.rcc-badge[b-e39h7wdms2] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.rcc-badge .material-icons[b-e39h7wdms2] { font-size: 14px; color: var(--color-primary); }
.rcc-legend-strip[b-e39h7wdms2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.rcc-legend-item[b-e39h7wdms2] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}
.rcc-legend-dot[b-e39h7wdms2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rcc-chart-body[b-e39h7wdms2] {
    position: relative;
    height: 300px;
    padding: 8px 16px 16px;
    box-sizing: border-box;
}
.rcc-chart-body canvas[b-e39h7wdms2] {
    width: 100% !important;
    height: 100% !important;
}
.rcc-footer[b-e39h7wdms2] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Components/Analytics/RetentionTable.razor.rz.scp.css */
/* =========================
   CARD STRUCTURE (Overview Sync)
   ========================= */
.games-card[b-9tbwv1a196] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.games-card-header[b-9tbwv1a196] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.games-card-title[b-9tbwv1a196] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

/* Style cho nút Highlight mới */
.highlight-toggle-btn[b-9tbwv1a196] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.highlight-toggle-btn.active[b-9tbwv1a196] {
    background-color: #eff6ff; /* Màu xanh nhạt cực nhẹ (Light Blue) */
    border-color: #3b82f6;     /* Viền màu xanh đậm */
    color: #1d4ed8;            /* Chữ màu xanh đậm */
    box-shadow: 0 0 0 1px #3b82f6; /* Tạo cảm giác viền đậm hơn */
}

.highlight-toggle-btn.active .material-icons[b-9tbwv1a196] {
    color: #3b82f6;
}

.highlight-toggle-btn:hover[b-9tbwv1a196] {
    background-color: #f9fafb;
    border-color: #9ca3af;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.highlight-toggle-btn.active:hover[b-9tbwv1a196] {
    background-color: #dbeafe; /* Xanh đậm hơn một chút khi hover lúc active */
    border-color: #2563eb;
}

.highlight-toggle-btn .material-icons[b-9tbwv1a196] {
    font-size: 18px;
    color: #4b5563; /* Màu icon hơi xám đậm */
}

.highlight-toggle-btn .btn-text[b-9tbwv1a196] {
    font-size: 14px;
    font-weight: 500;
}

/* =========================
   GRID & COLUMNS
   ========================= */
.level-grid[b-9tbwv1a196] {
    display: grid;
    grid-template-columns: 200px 150px repeat(9, 1fr);
    align-items: center;
}

.col-cell[b-9tbwv1a196] {
    padding: 12px 16px;
    border-right: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 48px;
    box-sizing: border-box;
    overflow: hidden;
}

.col-cell:last-child[b-9tbwv1a196] {
    border-right: none;
}

.font-medium[b-9tbwv1a196] {
    font-weight: 500;
}

/* =========================
   HEADER & ROWS (Overview Sync)
   ========================= */
.games-table-header[b-9tbwv1a196] {
    background: #f9fafb;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

/* =========================
   START USERS PROGRESS BAR
   ========================= */
.col-start-users[b-9tbwv1a196] {
    padding: 0 !important;
    position: relative;
    background: transparent;
    height: 100%;
}

.progress-bar-bg[b-9tbwv1a196] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #93c5fd; /* Màu xanh GA đặc trưng */
    z-index: 1;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-text[b-9tbwv1a196] {
    position: relative;
    z-index: 2;
    padding-left: 16px;
    font-weight: 500;
    color: #111827;
}

.level-badge[b-9tbwv1a196] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;           /* Độ rộng ô vuông */
    height: 28px;          /* Chiều cao ô vuông */

    border: 1px solid #d1d5db; /* Màu viền xám nhạt */
    border-radius: 6px;    /* Độ bo góc nhẹ */

    background-color: #ffffff;
    color: #374151;        /* Màu chữ số */
    font-size: 13px;
    font-weight: 500;
}

/* Căn chỉnh lại ô chứa để badge nằm gọn gàng */
.col-cell.font-medium[b-9tbwv1a196] {
    justify-content: flex-start; /* Đảm bảo ô vuông nằm sát lề trái */
    padding-left: 16px;
}


/* Copy trực tiếp từ Overview.razor.css */
.sortable[b-9tbwv1a196] {
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
}

.sort-icon[b-9tbwv1a196] {
    width: 10px;
    height: 12px;
    position: relative;
    opacity: 0.5; /* Mặc định mờ khi chưa chọn */
}

.sort-icon[b-9tbwv1a196]::before, .sort-icon[b-9tbwv1a196]::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.sort-icon[b-9tbwv1a196]::before { top: 0; border-bottom: 5px solid #9ca3af; }
.sort-icon[b-9tbwv1a196]::after { bottom: 0; border-top: 5px solid #9ca3af; }

/* Trạng thái Active và hướng mũi tên */
.sortable.active .sort-icon[b-9tbwv1a196] { opacity: 1; }

.sortable.sort-asc .sort-icon[b-9tbwv1a196]::before { border-bottom-color: #111827; }
.sortable.sort-asc .sort-icon[b-9tbwv1a196]::after { border-top-color: #d1d5db; }

.sortable.sort-desc .sort-icon[b-9tbwv1a196]::before { border-bottom-color: #d1d5db; }
.sortable.sort-desc .sort-icon[b-9tbwv1a196]::after { border-top-color: #111827; }

.bg-success[b-9tbwv1a196] {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
}
.bg-warning[b-9tbwv1a196] {
    background-color: #fffbeb !important;
    color: #92400e !important;
}
.bg-danger[b-9tbwv1a196] {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
}

.col-highlight[b-9tbwv1a196] {
    padding: 16px 0px !important;
    position: relative;
    display: flex;
    align-items: center;
    background: transparent;
    height: 100%;
}

/* Lớp nền highlight */
.highlight-bg[b-9tbwv1a196] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%; /* Mặc định phủ kín */
    z-index: 1;
    /*opacity: 0.35;*/
}

.highlight-bg-avg-fail[b-9tbwv1a196] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%; /* Mặc định phủ kín */
    z-index: 1;
}

.bg-ga-churn-success[b-9tbwv1a196] { background-color: #d1fae5; }
.bg-ga-churn-danger[b-9tbwv1a196] { background-color: #ff000008; }
.bg-ga-churn-warning[b-9tbwv1a196] { background-color: #fffb000a; }

.bg-ga-compelete-success[b-9tbwv1a196] { background-color: #69c689; }
.bg-ga-compelete-danger[b-9tbwv1a196] { background-color: #69c68985; }
.bg-ga-compelete-warning[b-9tbwv1a196] { background-color: #69c689c2; }

.bg-ga-avgFailComplete-very-danger[b-9tbwv1a196] { background-color: #ff0000ad; }
.bg-ga-avgFailComplete-danger[b-9tbwv1a196] { background-color: #ff000085; }
.bg-ga-avgFailComplete-warning[b-9tbwv1a196] { background-color: #ff00005e; }

.bg-ga-fail_users-warning[b-9tbwv1a196] { background-color: #ff0000ad; }
.bg-ga-fail_users-danger[b-9tbwv1a196] { background-color: #ff000085; }
.bg-ga-fail_users-warning[b-9tbwv1a196] { background-color: #ff00005e; }

/* Văn bản hiển thị đè lên nền */
.cell-text[b-9tbwv1a196] {
    position: relative;
    z-index: 2;
    padding-left: 16px;
    font-weight: 500;
    color: #111827;
    width: 100%;             /* Chiếm hết chiều ngang để dễ kiểm soát */
    display: flex;
    align-items: center;  
}

/* Đồng bộ vách ngăn cho các cột đặc biệt */
.col-highlight[b-9tbwv1a196] {
    border-right: 1px solid #f0f2f5;
}

.retention-cell[b-9tbwv1a196] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;    /* Căn nội dung sang trái */
    justify-content: center;
    padding-left: 16px;         /* Đảm bảo padding-left bằng với Header (col-cell có padding 16px) */
    width: 100%;
}

/* Dòng trên: Tỷ lệ % */
.main-val[b-9tbwv1a196] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
}

/* Dòng dưới: Số lượng user */
.sub-val[b-9tbwv1a196] {
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    margin-top: 2px;
}

/* Container cho cột Cohort */
.cohort-cell[b-9tbwv1a196] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;    /* Căn trái */
    justify-content: center;
    padding-left: 16px;         /* Khoảng cách lề trái bằng với Header */
    width: 100%;
}

/* Định dạng dòng thứ (Sunday, Monday...) */
.cohort-cell .sub-val[b-9tbwv1a196] {
    font-size: 13px;
    color: #9ca3af;             /* Màu xám nhạt hơn một chút như ảnh mẫu */
    font-weight: 400;
    margin-top: 1px;
}

/* Định dạng dòng ngày (8 Feb 2026) */
.cohort-cell .main-val[b-9tbwv1a196] {
    font-size: 14px;
    font-weight: 500;           /* Độ đậm vừa phải */
    color: #4b5563;             /* Màu xám đậm */
}

.highlight-eye[b-9tbwv1a196] {
    margin-left: auto;
    margin-right: -12px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px;
    display: flex;
    align-items: center;
}

.eye-off[b-9tbwv1a196] {
    color: #9ca3af; /* Xám mờ khi tắt */
    opacity: 0.5;
}

.eye-on[b-9tbwv1a196] {
    color: #3b82f6; /* Xanh dương GA khi bật - Bạn có thể giữ vàng nếu thích */
}

.highlight-eye:hover[b-9tbwv1a196] {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}


.user-details[b-9tbwv1a196] {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;    
    align-items: center;
}

.user-name[b-9tbwv1a196] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.user-email[b-9tbwv1a196] {
    font-size: 13px;
    color: #6b7280;
}
/* /Components/Analytics/TopActiveUsersLast30m.razor.rz.scp.css */
/* ===== COUNTRY CARD ===== */
.cc-card[b-9cksrd9w2l] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cc-header[b-9cksrd9w2l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.cc-header-left[b-9cksrd9w2l] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cc-header-icon[b-9cksrd9w2l] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cc-header-icon .material-icons[b-9cksrd9w2l] { font-size: 20px; }

.cc-title[b-9cksrd9w2l] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.cc-sub[b-9cksrd9w2l] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.cc-badge[b-9cksrd9w2l] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cc-badge .material-icons[b-9cksrd9w2l] { font-size: 15px; color: #16a34a; }

/* Live badge */
.cc-live-badge[b-9cksrd9w2l] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-lg);
    font-size: 11.5px;
    font-weight: 600;
    color: #16a34a;
    flex-shrink: 0;
}

.cc-live-dot[b-9cksrd9w2l] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    animation: pulse-live-b-9cksrd9w2l 2s ease-in-out infinite;
}

@keyframes pulse-live-b-9cksrd9w2l {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.75); }
}

/* ===== RANKED LIST ===== */
.cc-list[b-9cksrd9w2l] {
    display: flex;
    flex-direction: column;
    padding: 8px 18px 16px;
}

.cc-row[b-9cksrd9w2l] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}

.cc-row:last-child[b-9cksrd9w2l] { border-bottom: none; }
.cc-row:hover .cc-bar-fill[b-9cksrd9w2l] { filter: brightness(0.9); }

.cc-rank[b-9cksrd9w2l] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-placeholder);
    min-width: 18px;
    text-align: right;
    flex-shrink: 0;
}

.cc-name[b-9cksrd9w2l] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    width: 128px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

.cc-bar-wrap[b-9cksrd9w2l] {
    flex: 1;
    height: 7px;
    background: var(--bg-hover);
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
}

.cc-bar-fill[b-9cksrd9w2l] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
}

.cc-val[b-9cksrd9w2l] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    min-width: 48px;
    text-align: right;
    flex-shrink: 0;
}

.cc-pct[b-9cksrd9w2l] {
    font-size: 10.5px;
    color: var(--text-muted);
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}

/* Show more toggle */
.cc-footer-toggle[b-9cksrd9w2l] {
    display: flex;
    justify-content: center;
    padding: 8px 18px 12px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.cc-toggle-btn[b-9cksrd9w2l] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-subtle);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cc-toggle-btn:hover[b-9cksrd9w2l] {
    background: var(--bg-card);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.cc-toggle-btn .material-icons[b-9cksrd9w2l] { font-size: 16px; }
/* /Components/Analytics/TopActiveUsersSplitByContry.razor.rz.scp.css */
/* ===== COUNTRY CARD ===== */
.cc-card[b-7nfxqcmgtu] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cc-header[b-7nfxqcmgtu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.cc-header-left[b-7nfxqcmgtu] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cc-header-icon[b-7nfxqcmgtu] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cc-header-icon .material-icons[b-7nfxqcmgtu] { font-size: 20px; }

.cc-title[b-7nfxqcmgtu] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.cc-sub[b-7nfxqcmgtu] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.cc-badge[b-7nfxqcmgtu] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cc-badge .material-icons[b-7nfxqcmgtu] {
    font-size: 15px;
    color: var(--color-primary);
}

/* ===== RANKED LIST ===== */
.cc-list[b-7nfxqcmgtu] {
    display: flex;
    flex-direction: column;
    padding: 8px 18px 16px;
}

.cc-row[b-7nfxqcmgtu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}

.cc-row:last-child[b-7nfxqcmgtu] { border-bottom: none; }

.cc-row:hover .cc-bar-fill[b-7nfxqcmgtu] { filter: brightness(0.9); }

.cc-rank[b-7nfxqcmgtu] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-placeholder);
    min-width: 18px;
    text-align: right;
    flex-shrink: 0;
}

.cc-name[b-7nfxqcmgtu] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    width: 128px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

.cc-bar-wrap[b-7nfxqcmgtu] {
    flex: 1;
    height: 7px;
    background: var(--bg-hover);
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
}

.cc-bar-fill[b-7nfxqcmgtu] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
}

.cc-val[b-7nfxqcmgtu] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    min-width: 48px;
    text-align: right;
    flex-shrink: 0;
}

.cc-val--time[b-7nfxqcmgtu] {
    min-width: 58px;
}

.cc-pct[b-7nfxqcmgtu] {
    font-size: 10.5px;
    color: var(--text-muted);
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}

/* Show more toggle */
.cc-footer-toggle[b-7nfxqcmgtu] {
    display: flex;
    justify-content: center;
    padding: 8px 18px 12px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.cc-toggle-btn[b-7nfxqcmgtu] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-subtle);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cc-toggle-btn:hover[b-7nfxqcmgtu] {
    background: var(--bg-card);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.cc-toggle-btn .material-icons[b-7nfxqcmgtu] { font-size: 16px; }
/* /Components/Analytics/TopEarnedAnalysis.razor.rz.scp.css */
/* ===== TopEarnedAnalysis (ete-*) ===== */
.ete-card[b-yp9b6due8b] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.ete-header[b-yp9b6due8b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 16px;
    flex-shrink: 0;
}

.ete-header-left[b-yp9b6due8b] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.ete-header-icon[b-yp9b6due8b] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(16,185,129,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ete-header-icon .material-icons[b-yp9b6due8b] { font-size: 20px; color: #10b981; }

.ete-title[b-yp9b6due8b] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.ete-sub[b-yp9b6due8b]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

/* Tabs (in header) */
.ete-tabs[b-yp9b6due8b] {
    display: flex;
    gap: 2px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 3px;
    flex-shrink: 0;
}

.ete-tab[b-yp9b6due8b] {
    padding: 5px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ete-tab.active[b-yp9b6due8b] {
    background: #fff;
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Summary strip */
.ete-strip[b-yp9b6due8b] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.ete-strip-label[b-yp9b6due8b] {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.ete-strip-value[b-yp9b6due8b] {
    font-size: 13px;
    font-weight: 700;
    color: #10b981;
    font-variant-numeric: tabular-nums;
}

.ete-strip-sep[b-yp9b6due8b] {
    width: 1px;
    height: 12px;
    background: var(--border);
    margin: 0 4px;
}

/* Empty / Loading */
.ete-empty[b-yp9b6due8b] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
}

/* Ranked list */
.ete-list[b-yp9b6due8b] {
    display: flex;
    flex-direction: column;
    padding: 8px 0 12px;
}

.ete-row[b-yp9b6due8b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 20px;
    transition: background 0.1s ease;
}

.ete-row:hover[b-yp9b6due8b] {
    background: var(--bg-subtle);
}

/* Rank badge */
.ete-rank[b-yp9b6due8b] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ete-rank--1[b-yp9b6due8b] { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #d97706; }
.ete-rank--2[b-yp9b6due8b] { background: rgba(107,114,128,0.12); border-color: rgba(107,114,128,0.3); color: #6b7280; }
.ete-rank--3[b-yp9b6due8b] { background: rgba(180,83,9,0.10); border-color: rgba(180,83,9,0.25); color: #b45309; }

/* Name */
.ete-row-name[b-yp9b6due8b] {
    width: 110px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Bar */
.ete-bar-track[b-yp9b6due8b] {
    flex: 1;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.ete-bar-fill[b-yp9b6due8b] {
    height: 100%;
    background: #10b981;
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

/* Value & Pct */
.ete-row-value[b-yp9b6due8b] {
    width: 58px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.ete-row-pct[b-yp9b6due8b] {
    width: 44px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
/* /Components/Analytics/TopPlaytimeSplitByContry.razor.rz.scp.css */
/* ===== COUNTRY CARD ===== */
.cc-card[b-106c1pl27x] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cc-header[b-106c1pl27x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.cc-header-left[b-106c1pl27x] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cc-header-icon[b-106c1pl27x] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cc-header-icon .material-icons[b-106c1pl27x] { font-size: 20px; }

.cc-title[b-106c1pl27x] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.cc-sub[b-106c1pl27x] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.cc-badge[b-106c1pl27x] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cc-badge .material-icons[b-106c1pl27x] { font-size: 15px; color: #7c3aed; }

.cc-list[b-106c1pl27x] {
    display: flex;
    flex-direction: column;
    padding: 8px 18px 16px;
}

.cc-row[b-106c1pl27x] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}

.cc-row:last-child[b-106c1pl27x] { border-bottom: none; }
.cc-row:hover .cc-bar-fill[b-106c1pl27x] { filter: brightness(0.9); }

.cc-rank[b-106c1pl27x] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-placeholder);
    min-width: 18px;
    text-align: right;
    flex-shrink: 0;
}

.cc-name[b-106c1pl27x] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    width: 128px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

.cc-bar-wrap[b-106c1pl27x] {
    flex: 1;
    height: 7px;
    background: var(--bg-hover);
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
}

.cc-bar-fill[b-106c1pl27x] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
}

.cc-val[b-106c1pl27x] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    min-width: 58px;
    text-align: right;
    flex-shrink: 0;
}

.cc-pct[b-106c1pl27x] {
    font-size: 10.5px;
    color: var(--text-muted);
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}

/* Show more toggle */
.cc-footer-toggle[b-106c1pl27x] {
    display: flex;
    justify-content: center;
    padding: 8px 18px 12px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.cc-toggle-btn[b-106c1pl27x] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-subtle);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cc-toggle-btn:hover[b-106c1pl27x] {
    background: var(--bg-card);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.cc-toggle-btn .material-icons[b-106c1pl27x] { font-size: 16px; }
/* /Components/Analytics/TopProductByPurchaseCount.razor.rz.scp.css */
/* ===== TopProductByPurchaseCount (tpp-*) ===== */
.tpp-card[b-pq63o09t2p] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.tpp-header[b-pq63o09t2p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.tpp-header-left[b-pq63o09t2p] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.tpp-header-icon[b-pq63o09t2p] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(245,158,11,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tpp-header-icon .material-icons[b-pq63o09t2p] { font-size: 20px; color: #f59e0b; }

.tpp-title[b-pq63o09t2p] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.tpp-sub[b-pq63o09t2p]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.tpp-badge[b-pq63o09t2p] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 700;
    color: #d97706;
    flex-shrink: 0;
}

.tpp-badge .material-icons[b-pq63o09t2p] { font-size: 15px; color: #f59e0b; }

/* Summary strip */
.tpp-strip[b-pq63o09t2p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.tpp-strip-label[b-pq63o09t2p] { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.tpp-strip-value[b-pq63o09t2p] { font-size: 13px; font-weight: 700; color: #f59e0b; font-variant-numeric: tabular-nums; }
.tpp-strip-sep[b-pq63o09t2p]   { width: 1px; height: 12px; background: var(--border); margin: 0 4px; }

/* Empty / Loading */
.tpp-empty[b-pq63o09t2p] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
}

/* Ranked list */
.tpp-list[b-pq63o09t2p] {
    display: flex;
    flex-direction: column;
    padding: 8px 0 4px;
}

.tpp-row[b-pq63o09t2p] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px;
    transition: background 0.1s ease;
}

.tpp-row:hover[b-pq63o09t2p] { background: var(--bg-subtle); }

.tpp-rank[b-pq63o09t2p] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tpp-rank--1[b-pq63o09t2p] { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.4); color: #d97706; }
.tpp-rank--2[b-pq63o09t2p] { background: rgba(107,114,128,0.12); border-color: rgba(107,114,128,0.3); color: #6b7280; }
.tpp-rank--3[b-pq63o09t2p] { background: rgba(180,83,9,0.10);   border-color: rgba(180,83,9,0.25);  color: #b45309; }

.tpp-row-name[b-pq63o09t2p] {
    width: 140px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.tpp-bar-track[b-pq63o09t2p] {
    flex: 1;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.tpp-bar-fill[b-pq63o09t2p] {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.tpp-row-count[b-pq63o09t2p] {
    width: 56px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.tpp-row-pct[b-pq63o09t2p] {
    width: 44px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Show more toggle */
.tpp-footer-toggle[b-pq63o09t2p] {
    display: flex;
    justify-content: center;
    padding: 8px 20px 12px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.tpp-toggle-btn[b-pq63o09t2p] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-subtle);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.tpp-toggle-btn:hover[b-pq63o09t2p] {
    background: var(--bg-card);
    border-color: #f59e0b;
    color: #d97706;
}

.tpp-toggle-btn .material-icons[b-pq63o09t2p] { font-size: 16px; }
/* /Components/Analytics/TopSpentAnalysis.razor.rz.scp.css */
/* ===== TopSpentAnalysis (ets-*) ===== */
.ets-card[b-bfrrm59hwi] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.ets-header[b-bfrrm59hwi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 16px;
    flex-shrink: 0;
}

.ets-header-left[b-bfrrm59hwi] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.ets-header-icon[b-bfrrm59hwi] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(239,68,68,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ets-header-icon .material-icons[b-bfrrm59hwi] { font-size: 20px; color: #ef4444; }

.ets-title[b-bfrrm59hwi] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.ets-sub[b-bfrrm59hwi]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

/* Tabs (in header) */
.ets-tabs[b-bfrrm59hwi] {
    display: flex;
    gap: 2px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 3px;
    flex-shrink: 0;
}

.ets-tab[b-bfrrm59hwi] {
    padding: 5px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ets-tab.active[b-bfrrm59hwi] {
    background: #fff;
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Summary strip */
.ets-strip[b-bfrrm59hwi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.ets-strip-label[b-bfrrm59hwi] {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.ets-strip-value[b-bfrrm59hwi] {
    font-size: 13px;
    font-weight: 700;
    color: #ef4444;
    font-variant-numeric: tabular-nums;
}

.ets-strip-sep[b-bfrrm59hwi] {
    width: 1px;
    height: 12px;
    background: var(--border);
    margin: 0 4px;
}

/* Empty / Loading */
.ets-empty[b-bfrrm59hwi] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
}

/* Ranked list */
.ets-list[b-bfrrm59hwi] {
    display: flex;
    flex-direction: column;
    padding: 8px 0 12px;
}

.ets-row[b-bfrrm59hwi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 20px;
    transition: background 0.1s ease;
}

.ets-row:hover[b-bfrrm59hwi] {
    background: var(--bg-subtle);
}

/* Rank badge */
.ets-rank[b-bfrrm59hwi] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ets-rank--1[b-bfrrm59hwi] { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #d97706; }
.ets-rank--2[b-bfrrm59hwi] { background: rgba(107,114,128,0.12); border-color: rgba(107,114,128,0.3); color: #6b7280; }
.ets-rank--3[b-bfrrm59hwi] { background: rgba(180,83,9,0.10); border-color: rgba(180,83,9,0.25); color: #b45309; }

/* Name */
.ets-row-name[b-bfrrm59hwi] {
    width: 110px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Bar */
.ets-bar-track[b-bfrrm59hwi] {
    flex: 1;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.ets-bar-fill[b-bfrrm59hwi] {
    height: 100%;
    background: #ef4444;
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

/* Value & Pct */
.ets-row-value[b-bfrrm59hwi] {
    width: 58px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.ets-row-pct[b-bfrrm59hwi] {
    width: 44px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
/* /Components/Analytics/UsersResourceDistributionAnalysis.razor.rz.scp.css */
/* ===== UsersResourceDistributionAnalysis (erd-*) ===== */
.erd-card[b-x9u8s3wf86] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.erd-header[b-x9u8s3wf86] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.erd-header-left[b-x9u8s3wf86] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.erd-header-icon[b-x9u8s3wf86] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99,102,241,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.erd-header-icon .material-icons[b-x9u8s3wf86] { font-size: 20px; color: #6366f1; }

.erd-title[b-x9u8s3wf86] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.erd-sub[b-x9u8s3wf86]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.erd-badge[b-x9u8s3wf86] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}

.erd-badge .material-icons[b-x9u8s3wf86] { font-size: 14px; color: #6366f1; }

/* KPI Strip */
.erd-kpi-strip[b-x9u8s3wf86] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.erd-kpi-item[b-x9u8s3wf86] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.erd-kpi-sep[b-x9u8s3wf86] {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 16px;
    flex-shrink: 0;
}

.erd-kpi-dot[b-x9u8s3wf86] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.erd-kpi-info[b-x9u8s3wf86] { display: flex; flex-direction: column; gap: 1px; }

.erd-kpi-label[b-x9u8s3wf86] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.erd-kpi-value[b-x9u8s3wf86] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.erd-kpi-pct[b-x9u8s3wf86] {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.75;
}

/* Empty / Loading */
.erd-empty[b-x9u8s3wf86] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

/* ── Histogram ── */
.erd-hist-wrap[b-x9u8s3wf86] {
    padding: 20px 20px 0;
    border-bottom: 1px solid var(--border-light);
}

.erd-hist[b-x9u8s3wf86] {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    /* bottom axis line via border on wrap */
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
}

.erd-col[b-x9u8s3wf86] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    cursor: default;
}

.erd-col--peak .erd-bar[b-x9u8s3wf86] {
    filter: brightness(1.05);
    position: relative;
}

.erd-col--peak .erd-bar[b-x9u8s3wf86]::after {
    content: '▲';
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    color: var(--text-muted);
}

/* Bar area: fixed height, bars grow from bottom */
.erd-bar-area[b-x9u8s3wf86] {
    width: 100%;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.erd-col-count[b-x9u8s3wf86] {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 3px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.erd-col-count--hidden[b-x9u8s3wf86] {
    visibility: hidden;
}

.erd-bar[b-x9u8s3wf86] {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: filter 0.15s ease;
}

.erd-col:hover .erd-bar[b-x9u8s3wf86] {
    filter: brightness(1.12);
}

.erd-col:hover .erd-col-count[b-x9u8s3wf86] {
    color: var(--text-primary);
}

/* X-axis labels */
.erd-col-label[b-x9u8s3wf86] {
    font-size: 8px;
    color: var(--text-muted);
    text-align: center;
    padding: 5px 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-variant-numeric: tabular-nums;
}

.erd-col--peak .erd-col-label[b-x9u8s3wf86] {
    color: var(--text-secondary);
    font-weight: 600;
}

/* Legend */
.erd-legend[b-x9u8s3wf86] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px 12px;
    flex-wrap: wrap;
}

.erd-legend-item[b-x9u8s3wf86] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.erd-legend-dot[b-x9u8s3wf86] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
/* /Components/CountrySelectPicker/CountrySelectPicker.razor.rz.scp.css */
.country-select-container[b-y530renb51] {
    position: relative;
    width: fit-content;
}

.country-select-input[b-y530renb51] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.country-chips[b-y530renb51] {
    display: flex;
    gap: 6px;
}

.country-chip[b-y530renb51] {
    padding: 2px 8px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 13px;
}

.country-chip.all[b-y530renb51] {
    background: #eef2ff;
    color: #3730a3;
}

.country-chip.more[b-y530renb51] {
    background: #e5e7eb;
    color: #374151;
}

.country-select-overlay[b-y530renb51] {
    position: fixed;
    inset: 0;
    z-index: 1999;
}

.country-select-popover[b-y530renb51] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 2000;
}

.country-select-dropdown[b-y530renb51] {
    min-width: 300px;
    width: fit-content;
    max-height: 360px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 16px 40px rgba(0,0,0,.15);
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.country-header[b-y530renb51] {
    padding: 2px;
    position: sticky;
    top: 0;
    background: #fff;
}

.country-list[b-y530renb51] {
    overflow-y: auto;
    padding: 6px;
}

.country-item[b-y530renb51] {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.country-item:hover[b-y530renb51] {
    background: #f3f4f6;
}

.country-search[b-y530renb51] {
    min-width: 260px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 6px;
    margin-left: 5px;
    margin-right: 5px;
}

.country-search:hover[b-y530renb51] {
    border-color: #c7d2fe; /* xanh nhạt hơn focus */
    box-shadow:
            0 0 0 1px #c7d2fe;
}

.country-select-input:hover[b-y530renb51] {
    border-color: #c7d2fe;
}

.country-select-input.open[b-y530renb51] {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px rgba(99,102,241,0.15);
}

.divider[b-y530renb51] {
    height: 1px;
    margin: 5px 0;
    background: #e5e7eb;
}

.radio[b-y530renb51] {
    margin-left: auto;
    width: 14px;
    height: 14px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
}

.radio.checked[b-y530renb51] {
    border-color: #6366f1;
    background: radial-gradient(#6366f1 45%, transparent 47%);
}

.radio2[b-y530renb51] {
    margin-left: auto;
    margin-right: 15px;
    width: 14px;
    height: 14px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
}

.radio2.checked[b-y530renb51] {
    border-color: #6366f1;
    background: radial-gradient(#6366f1 45%, transparent 47%);
}

.chevron[b-y530renb51] {
    margin-left: 12px;
    margin-right: -3px;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: 0.6;
    padding-bottom: 10px;
}

.all-text[b-y530renb51] {
    margin-left: 3px;
}

.country-chip.warning[b-y530renb51] {
    background: #fff7ed;          /* amber-50 */
    color: #92400e;               /* amber-800 */
    display: flex;
    align-items: center;
    gap: 6px;
}

.warning-icon[b-y530renb51] {
    font-size: 14px;
}


/* /Components/DateRangePicker/DateRangePicker.razor.rz.scp.css */
.date-range-container[b-7hl6dv35rw] {
    position: relative;
}

/* ═══════════════════════════════════════════════
   TRIGGER BUTTON
   ═══════════════════════════════════════════════ */

.dri[b-7hl6dv35rw] {
    box-sizing: border-box;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    white-space: nowrap;
}

.dri:hover[b-7hl6dv35rw] {
    border-color: #c7d2fe;
    background: #fafafa;
}

.dri.open[b-7hl6dv35rw] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.dri-cal[b-7hl6dv35rw] {
    font-size: 13px !important;
    color: #6b7280;
    flex-shrink: 0;
}

.dri-text[b-7hl6dv35rw] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.dri-chevron[b-7hl6dv35rw] {
    font-size: 16px !important;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.dri.open .dri-chevron[b-7hl6dv35rw] {
    transform: rotate(180deg);
}


/* ═══════════════════════════════════════════════
   OVERLAY
   ═══════════════════════════════════════════════ */

.date-range-overlay[b-7hl6dv35rw] {
    position: fixed;
    inset: 0;
    z-index: 1999;
    background: transparent;
}


/* ═══════════════════════════════════════════════
   DROPDOWN PANEL
   ═══════════════════════════════════════════════ */

@keyframes drp-in-b-7hl6dv35rw {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes drp-out-b-7hl6dv35rw {
    from { opacity: 1; transform: translateY(0)    scale(1);    }
    to   { opacity: 0; transform: translateY(-6px) scale(0.97); }
}

.drp-panel.is-closing[b-7hl6dv35rw] { animation: drp-out-b-7hl6dv35rw 0.15s ease-in forwards; }

.drp-panel[b-7hl6dv35rw] {
    display: flex;
    align-items: stretch;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 2000;
    overflow: hidden;
    transform-origin: top left;
    animation: drp-in-b-7hl6dv35rw 0.18s ease-out;
}

/* When calendar is open, anchor to the right so it doesn't overflow viewport */
.drp-panel.with-calendar[b-7hl6dv35rw] {
    left: auto;
    right: 0;
}


/* ═══════════════════════════════════════════════
   LEFT SIDEBAR — PRESETS
   ═══════════════════════════════════════════════ */

.drp-left[b-7hl6dv35rw] {
    width: 156px;
    padding: 10px 0 12px;
    flex-shrink: 0;
}

.drp-section-label[b-7hl6dv35rw] {
    padding: 2px 12px 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
}

.drp-presets[b-7hl6dv35rw] {
    display: flex;
    flex-direction: column;
}

.drp-item[b-7hl6dv35rw] {
    margin: 1px 6px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: background 0.1s;
}

.drp-item:hover[b-7hl6dv35rw] {
    background: #f3f4f6;
}

.drp-item.active[b-7hl6dv35rw] {
    background: #eef2ff;
    color: #4338ca;
    font-weight: 600;
}

/* Custom range item */
.drp-custom[b-7hl6dv35rw] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.drp-custom-icon[b-7hl6dv35rw] {
    font-size: 14px !important;
    color: #9ca3af;
    flex-shrink: 0;
    transition: color 0.1s;
}

.drp-item.drp-custom:hover .drp-custom-icon[b-7hl6dv35rw],
.drp-item.drp-custom.active .drp-custom-icon[b-7hl6dv35rw] {
    color: #4338ca;
}

/* Separator */
.drp-sep[b-7hl6dv35rw] {
    height: 1px;
    background: #f3f4f6;
    margin: 6px 0;
}


/* ═══════════════════════════════════════════════
   TOGGLE — Include today
   ═══════════════════════════════════════════════ */

.drp-toggle-row[b-7hl6dv35rw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    cursor: pointer;
}

.drp-toggle[b-7hl6dv35rw] {
    position: relative;
    display: inline-flex;
    width: 30px;
    height: 17px;
    flex-shrink: 0;
}

.drp-toggle input[b-7hl6dv35rw] {
    display: none;
}

.drp-slider[b-7hl6dv35rw] {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    transition: background 0.18s;
    cursor: pointer;
}

.drp-slider[b-7hl6dv35rw]::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    top: 2.5px;
    left: 2.5px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.18s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.drp-toggle input:checked + .drp-slider[b-7hl6dv35rw] {
    background: #4f46e5;
}

.drp-toggle input:checked + .drp-slider[b-7hl6dv35rw]::before {
    transform: translateX(13px);
}

.drp-toggle-label[b-7hl6dv35rw] {
    font-size: 12px;
    color: #6b7280;
    user-select: none;
}


/* ═══════════════════════════════════════════════
   RIGHT — CALENDAR
   ═══════════════════════════════════════════════ */

@keyframes cal-in-b-7hl6dv35rw {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.drp-calendar-pane[b-7hl6dv35rw] {
    border-left: 1px solid #f3f4f6;
    padding: 10px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: cal-in-b-7hl6dv35rw 0.2s ease-out;
}

/* Scale down MudBlazor static date range picker */
.drp-calendar-pane .mud-picker-static[b-7hl6dv35rw] {
    box-shadow: none !important;
    border: none !important;
    zoom: 0.72;
}

/* Hide the big date toolbar (DisableToolbar prop not supported on range picker) */
.drp-calendar-pane .mud-picker-toolbar[b-7hl6dv35rw] {
    display: none !important;
}

.drp-calendar-pane .mud-picker-calendar[b-7hl6dv35rw] {
    margin: 0;
}


/* ── Action buttons ── */

.drp-cal-actions[b-7hl6dv35rw] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 6px 2px 4px;
}

.drp-btn-cancel[b-7hl6dv35rw] {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.drp-btn-cancel:hover[b-7hl6dv35rw] {
    background: #f9fafb;
    border-color: #d1d5db;
}

.drp-btn-apply[b-7hl6dv35rw] {
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    background: #4f46e5;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}

.drp-btn-apply:hover[b-7hl6dv35rw] {
    background: #4338ca;
}
/* /Components/GameSelectPicker/GameSelectPicker.razor.rz.scp.css */
.game-select-container[b-a8ejztyiay] {
    position: relative;
    min-width: 220px;
}

.game-select-popover[b-a8ejztyiay] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 2000;
}

.game-select-input[b-a8ejztyiay] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    cursor: pointer;
    box-sizing: border-box;
    background: #fff;

    /*transition:*/
    /*        border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),*/
    /*        box-shadow   200ms cubic-bezier(0.4, 0, 0.2, 1),*/
    /*        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);*/
}

.game-icon[b-a8ejztyiay] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.chevron[b-a8ejztyiay] {
    margin-left: auto;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: 0.6;
    padding-bottom: 10px;
}



.game-select-overlay[b-a8ejztyiay] {
    position: fixed;
    inset: 0;
    z-index: 1999;
}

.game-select-dropdown[b-a8ejztyiay] {
    width: max-content;      /* 🔥 auto fit theo nội dung */
    min-width: 280px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.15);
    padding: 8px;
}

.game-search[b-a8ejztyiay] {
    min-width: 260px;
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 6px;
}

.game-select-input:hover[b-a8ejztyiay] {
    border-color: #c7d2fe;  /* xanh nhạt hơn focus */
}

.game-select-input.open[b-a8ejztyiay] {
    border-color: #6366f1;          /* indigo-500 */
    box-shadow: 0 0 0 1px rgba(99,102,241,0.15);
}

.game-search:hover[b-a8ejztyiay] {
    border-color: #c7d2fe; /* xanh nhạt hơn focus */
    box-shadow:
            0 0 0 1px #c7d2fe;
}

.game-item-icon[b-a8ejztyiay] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
}


.game-item[b-a8ejztyiay] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}

.game-item:hover[b-a8ejztyiay] {
    background: #f3f4f6;
}

.game-item.active[b-a8ejztyiay] {
    background: #eef2ff;
    color: #3730a3;
}

.check[b-a8ejztyiay] {
    margin-left: auto;
}

/* game name luôn 1 dòng */
.game-item span[b-a8ejztyiay] {
    white-space: nowrap;
}

/* /Components/LevelRangePicker/LevelRangePicker.razor.rz.scp.css */
.level-range-container[b-d8t2wkkbly] {
    position: relative;
}

/* INPUT */
.level-range-input[b-d8t2wkkbly] {
    height: 36px;
    box-sizing: border-box;
    padding: 5px 18px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;

    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.level-range-input:hover[b-d8t2wkkbly] {
    border-color: #c7d2fe;
}

.level-range-input.open[b-d8t2wkkbly] {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px rgba(99,102,241,0.15);
}

/* PANEL */
.level-panel[b-d8t2wkkbly] {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 16px 40px rgba(0,0,0,.15);
    z-index: 2000;
}

.level-panel.align-right[b-d8t2wkkbly] {
    left: auto;
    right: 0;
}

/* LEFT */
.level-left[b-d8t2wkkbly] {
    width: 240px;
    padding: 8px 0;
}

.level-item[b-d8t2wkkbly] {
    margin: 2px 8px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.level-item:hover[b-d8t2wkkbly] {
    background: #f3f4f6;
}

.level-item.active[b-d8t2wkkbly] {
    background: #eef2ff;
    color: #3730a3;
    font-weight: 500;
}

.level-divider[b-d8t2wkkbly] {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
}

/* CUSTOM */
.level-custom[b-d8t2wkkbly] {
    display: flex;
    gap: 8px;
    margin: 2px 8px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.level-custom.active[b-d8t2wkkbly] {
    background: #eef2ff;
    color: #3730a3;
}

.plus[b-d8t2wkkbly] {
    font-size: 18px;
}

/* RIGHT */
.level-custom-panel[b-d8t2wkkbly] {
    width: 260px;
    padding: 16px;
    border-left: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.level-input[b-d8t2wkkbly] {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.level-actions[b-d8t2wkkbly] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: auto;
}

.level-range-overlay[b-d8t2wkkbly] {
    position: fixed;
    inset: 0;
    z-index: 1999;
}


.btn-cancel[b-d8t2wkkbly] {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    cursor: pointer;
}

.btn-apply[b-d8t2wkkbly] {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    background: #4f46e5;
    color: #ffffff;
    cursor: pointer;
}

.btn-cancel:hover[b-d8t2wkkbly] {
    background-color: #f9fafb;
}

.btn-apply:hover[b-d8t2wkkbly] {
    background-color: #4338ca;
}

.level-panel.clamp[b-d8t2wkkbly] {
    max-width: calc(100vw - 16px);
    overflow-x: auto;
}

.level-panel.measuring[b-d8t2wkkbly] {
    visibility: hidden;
    pointer-events: none;
}

.chevron[b-d8t2wkkbly] {
    margin-left: 5px;
    margin-right: -3px;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: 0.6;
    padding-bottom: 10px;
}

/* /Components/PlatformSelectPicker/PlatformSelectPicker.razor.rz.scp.css */
.platform-select-container[b-b984ps9yw3] {
    position: relative;
    width: fit-content;
}

.platform-select-input[b-b984ps9yw3] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 6px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.platform-select-input:hover[b-b984ps9yw3] {
    border-color: #c7d2fe;
}

.platform-select-input.open[b-b984ps9yw3] {
    border-color: #6366f1;          /* indigo-500 */
    box-shadow: 0 0 0 1px rgba(99,102,241,0.15);
}

.platform-value[b-b984ps9yw3] {
    font-size: 14px;
    color: #111827;
}

.chevron[b-b984ps9yw3] {
    margin-left: 12px;
    margin-right: -3px;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: 0.6;
    padding-bottom: 10px;
}

.platform-select-overlay[b-b984ps9yw3] {
    position: fixed;
    inset: 0;
    z-index: 1999;
}

.platform-select-popover[b-b984ps9yw3] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 2000;
}

.platform-select-dropdown[b-b984ps9yw3] {
    min-width: 258px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 16px 40px rgba(0,0,0,.15);
    padding: 6px;
}

.platform-item[b-b984ps9yw3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.platform-item:hover[b-b984ps9yw3] {
    background: #f3f4f6;
}

.platform-icon[b-b984ps9yw3] {
    font-size: 16px;
    color: #6b7280; /* gray-500 */
    line-height: 1;
}

.platform-item.active[b-b984ps9yw3] {
    background: #eef2ff;
    color: #3730a3;
}

.radio[b-b984ps9yw3] {
    margin-left: auto;
    width: 14px;
    height: 14px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
}

.radio.checked[b-b984ps9yw3] {
    border-color: #6366f1;
    background: radial-gradient(#6366f1 45%, transparent 47%);
}

.check[b-b984ps9yw3] {
    margin-left: auto;
}

.platform-chips[b-b984ps9yw3] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.platform-chip[b-b984ps9yw3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: #f1f4f6;
    border-radius: 6px;
    font-size: 13px;
}

.platform-chip img[b-b984ps9yw3] {
    width: 14px;
    height: 14px;
}

.platform-chip.all[b-b984ps9yw3] {
    background: #eef2ff;
    color: #3730a3;
}

.platform-chip .dot[b-b984ps9yw3] {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
}

.platform-chip .material-icons[b-b984ps9yw3] {
    font-size: 20px;
}

.platform-item .material-icons[b-b984ps9yw3] {
    font-size: 20px;
}
/* /Components/VersionSelectPicker/VersionSelectPicker.razor.rz.scp.css */
.version-select-container[b-yr4yvja0bi] {
    position: relative;
    width: fit-content;
}

.version-select-input[b-yr4yvja0bi] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.version-chips[b-yr4yvja0bi] {
    display: flex;
    gap: 6px;
}

.version-chip[b-yr4yvja0bi] {
    padding: 2px 8px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 13px;
}

.version-chip.all[b-yr4yvja0bi] {
    background: #eef2ff;
    color: #3730a3;
}

.version-chip.more[b-yr4yvja0bi] {
    background: #e5e7eb;
    color: #374151;
}

.chevron[b-yr4yvja0bi] {
    margin-left: 12px;
    margin-right: -3px;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: 0.6;
    padding-bottom: 10px;
}

/* DROPDOWN */
.version-select-overlay[b-yr4yvja0bi] {
    position: fixed;
    inset: 0;
    z-index: 1999;
}

.version-select-popover[b-yr4yvja0bi] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 2000;
}

.version-select-dropdown[b-yr4yvja0bi] {
    min-width: 193px;
    max-height: 394px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 16px 40px rgba(0,0,0,.15);
    padding: 6px;
    display: flex;
    flex-direction: column;
    z-index: 99999999999;
    overflow-y: auto;
}

.version-header[b-yr4yvja0bi] {
    margin-top: -2px;
    padding: 2px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}

.version-list[b-yr4yvja0bi] {
    overflow-y: auto;
    padding: 6px;
    margin-top: -2px;
}

.version-item[b-yr4yvja0bi] {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.version-item:hover[b-yr4yvja0bi] {
    background: #f3f4f6;
}

.radio[b-yr4yvja0bi] {
    margin-left: auto;
    width: 14px;
    height: 14px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
}

.radio.checked[b-yr4yvja0bi] {
    border-color: #6366f1;
    background: radial-gradient(#6366f1 45%, transparent 47%);
}

.radio2[b-yr4yvja0bi] {
    margin-left: auto;
    margin-right: 4px;
    width: 14px;
    height: 14px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
}

.radio2.checked[b-yr4yvja0bi] {
    border-color: #6366f1;
    background: radial-gradient(#6366f1 45%, transparent 47%);
}

.divider[b-yr4yvja0bi] {
    height: 1px;
    margin: 5px 0;
    background: #e5e7eb;
}


.version-search[b-yr4yvja0bi] {
    min-width: 260px;
    width: fit-content;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 6px;
    margin-left: 5px;
    margin-right: 5px;
}

.version-search:hover[b-yr4yvja0bi] {
    border-color: #c7d2fe; /* xanh nhạt hơn focus */
    box-shadow:
            0 0 0 1px #c7d2fe;
}

.version-select-input:hover[b-yr4yvja0bi] {
    border-color: #c7d2fe;  /* xanh nhạt hơn focus */
}

.version-select-input.open[b-yr4yvja0bi] {
    border-color: #6366f1;          /* indigo-500 */
    box-shadow: 0 0 0 1px rgba(99,102,241,0.15);
}

.all-text[b-yr4yvja0bi] {
    margin-left: 3px;
}

.version-chip.warning[b-yr4yvja0bi] {
    background: #fff7ed;          /* amber-50 */
    color: #92400e;               /* amber-800 */
    display: flex;
    align-items: center;
    gap: 6px;
}

.warning-icon[b-yr4yvja0bi] {
    font-size: 14px;
}

/* /Layout/DashboardLayout.razor.rz.scp.css */
.dashboard-root[b-t9wilbwguq] {
    display: flex;
    height: 100vh;
    width: 100vw;
    background: var(--bg-page);
    overflow: hidden;
}

.dashboard-sidebar[b-t9wilbwguq] {
    display: flex;
    width: auto;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 100;
}

.dashboard-main[b-t9wilbwguq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.dashboard-content[b-t9wilbwguq] {
    flex: 1;
    padding: 24px;
    overflow: auto;
}
/* /Layout/DashboardSidebar.razor.rz.scp.css */
/* ── Sidebar wrapper (icon bar + optional pinned panel) ── */
.sidebar-wrapper[b-gqlgfrg0a6] {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: row;
}

/* ── Icon bar ── */
.sidebar-root[b-gqlgfrg0a6] {
    width: 60px;
    height: 100%;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-header[b-gqlgfrg0a6] {
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-logo[b-gqlgfrg0a6] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-logo img[b-gqlgfrg0a6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-nav[b-gqlgfrg0a6] {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    flex: 1;
    width: 100%;
    align-items: center;
}

.sidebar-item[b-gqlgfrg0a6] {
    width: 38px;
    height: 38px;
    margin: 3px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    position: relative;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--t-fast);
}

/* Extend hover zone to bridge icon bar → panel */
.sidebar-item[b-gqlgfrg0a6]::after {
    content: "";
    position: absolute;
    top: 0;
    right: -16px;
    width: 16px;
    height: 100%;
    background: transparent;
    z-index: 10;
}

.sidebar-item:hover[b-gqlgfrg0a6] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar-item.active[b-gqlgfrg0a6] {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

.sidebar-item .material-icons[b-gqlgfrg0a6] { font-size: 20px; }

/* ── Panel animations ── */
@keyframes panel-slide-in-b-gqlgfrg0a6 {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0);    }
}

@keyframes panel-scale-in-b-gqlgfrg0a6 {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1);    }
}

@keyframes panel-scale-out-b-gqlgfrg0a6 {
    from { opacity: 1; transform: scale(1);    }
    to   { opacity: 0; transform: scale(0.95); }
}

/* ── Hover popup panel ── */
.sidebar-panel[b-gqlgfrg0a6] {
    position: absolute;
    left: 66px;
    width: 230px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
    overflow: hidden;
    z-index: 200;
    transform-origin: left center;
    animation: panel-scale-in-b-gqlgfrg0a6 0.16s ease-out;
}

.sidebar-panel.is-closing[b-gqlgfrg0a6] {
    animation: panel-scale-out-b-gqlgfrg0a6 0.14s ease-in forwards;
    pointer-events: none;
}

.panel-header-hover[b-gqlgfrg0a6] {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border-light);
}

.panel-items[b-gqlgfrg0a6] {
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.panel-item[b-gqlgfrg0a6] {
    height: 38px;
    margin: 3px 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: var(--text-md);
    font-weight: 500;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--t-fast);
    gap: 10px;
}

.panel-item:hover[b-gqlgfrg0a6] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.panel-item.active[b-gqlgfrg0a6] {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    font-weight: 600;
}

.panel-icon[b-gqlgfrg0a6] {
    font-size: 18px !important;
    color: inherit;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.panel-text[b-gqlgfrg0a6] { white-space: nowrap; }

.panel-item-point[b-gqlgfrg0a6] {
    height: 38px;
    margin: 3px 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: var(--text-md);
    font-weight: 500;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--t-fast);
    justify-content: space-between;
}

.panel-item-point:hover[b-gqlgfrg0a6] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.panel-content-left[b-gqlgfrg0a6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Pinned sidebar panel ── */
.sidebar-pinned[b-gqlgfrg0a6] {
    width: 251px;
    height: 100%;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    animation: panel-slide-in-b-gqlgfrg0a6 0.2s ease-out;
}

.panel-header-row[b-gqlgfrg0a6] {
    height: 56px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.panel-header[b-gqlgfrg0a6] {
    padding: 0 16px;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
}

.panel-content[b-gqlgfrg0a6] {
    padding: 6px;
    flex: 1;
    overflow-y: auto;
}

/* ── Lock indicator ── */
.panel-item-disabled[b-gqlgfrg0a6] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.lock-icon[b-gqlgfrg0a6] {
    font-size: 14px !important;
    color: var(--text-placeholder);
    margin-left: auto;
    flex-shrink: 0;
}
/* /Layout/DashboardTopbar.razor.rz.scp.css */
/* ── Topbar shell ── */
.dashboard-topbar[b-kwzl49p276] {
    height: 56px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 0 20px;
    background: var(--bg-card);
    flex-shrink: 0;
}

/* ── Left breadcrumb ── */
.topbar-left[b-kwzl49p276] { display: flex; align-items: center; }

.topbar-context[b-kwzl49p276] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-md);
    color: var(--text-muted);
}

.studio-wrapper[b-kwzl49p276] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.studio-icon[b-kwzl49p276] {
    font-size: 17px !important;
    color: var(--text-muted);
}

.studio-name[b-kwzl49p276] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--text-md);
}

.context-sep[b-kwzl49p276] {
    color: var(--text-disabled);
    font-weight: 400;
    line-height: 1;
}

.page-name[b-kwzl49p276] {
    font-weight: 500;
    color: var(--text-secondary);
}

.active-page[b-kwzl49p276] {
    color: var(--text-primary) !important;
    font-weight: 600;
}

/* ── Game selector ── */
.game-select-container[b-kwzl49p276] {
    position: relative;
}

.game-select-input[b-kwzl49p276] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px 0 6px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    user-select: none;
}

.game-select-input:hover[b-kwzl49p276] {
    border-color: #c7d2fe;
    background: #fafafa;
}

.game-select-input.open[b-kwzl49p276] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10);
}

.game-icon[b-kwzl49p276] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.game-name[b-kwzl49p276] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.expand-icon[b-kwzl49p276] {
    font-size: 16px !important;
    color: var(--text-placeholder);
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.game-select-input.open .expand-icon[b-kwzl49p276] {
    transform: rotate(180deg);
}

/* ── Game dropdown popover ── */
.game-select-popover[b-kwzl49p276] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 2000;
    transform-origin: top left;
    animation: dropdown-in-b-kwzl49p276 0.18s ease-out;
}

.game-select-dropdown[b-kwzl49p276] {
    width: 300px;
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gsd-header[b-kwzl49p276] {
    padding: 10px 12px 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-placeholder);
}

.gsd-search-wrap[b-kwzl49p276] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 8px 6px;
    padding: 6px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: border-color 0.15s;
}

.gsd-search-wrap:focus-within[b-kwzl49p276] {
    border-color: var(--color-primary);
    background: var(--bg-card);
}

.gsd-search-icon[b-kwzl49p276] {
    font-size: 15px !important;
    color: var(--text-placeholder);
    flex-shrink: 0;
}

.game-search[b-kwzl49p276] {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    font-family: var(--font);
    color: var(--text-primary);
    min-width: 0;
}

.game-search[b-kwzl49p276]::placeholder { color: var(--text-placeholder); }

.game-list-scroll[b-kwzl49p276] {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 6px 8px;
}

.game-item[b-kwzl49p276] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.1s;
}

.game-item:hover[b-kwzl49p276] { background: var(--bg-hover); }

.game-item.active[b-kwzl49p276] {
    background: var(--color-blue-subtle);
}

.game-item.active .game-item-name[b-kwzl49p276] { color: var(--color-blue); }
.game-item.active .game-item-package[b-kwzl49p276] { color: #93c5fd; }

.game-item-icon[b-kwzl49p276] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.game-info[b-kwzl49p276] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.game-item-name[b-kwzl49p276] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-item-package[b-kwzl49p276] {
    font-size: 11px;
    color: var(--text-placeholder);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.check-icon[b-kwzl49p276] {
    font-size: 16px !important;
    color: var(--color-blue);
    flex-shrink: 0;
    margin-left: auto;
}

.game-select-overlay[b-kwzl49p276] {
    position: fixed;
    inset: 0;
    z-index: 1999;
}

/* ══════════════════════════════════════════════
   RIGHT SECTION
   ══════════════════════════════════════════════ */
.topbar-right[b-kwzl49p276] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar-wrapper[b-kwzl49p276] { position: relative; }

/* ── Avatar trigger button ── */
.av-trigger[b-kwzl49p276] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 8px 0 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--font);
}

.av-trigger:hover[b-kwzl49p276],
.av-trigger.open[b-kwzl49p276] {
    background: var(--bg-hover);
    border-color: var(--border);
}

.av-circle[b-kwzl49p276] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    border: 1.5px solid rgba(99,102,241,0.3);
}

.av-circle.has-image[b-kwzl49p276] { background: var(--bg-subtle); border-color: var(--border); }

.av-circle img[b-kwzl49p276] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.av-info[b-kwzl49p276] { display: flex; flex-direction: column; }

.av-name[b-kwzl49p276] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.av-chevron[b-kwzl49p276] {
    font-size: 16px !important;
    color: var(--text-placeholder);
    transition: transform 0.18s ease;
}

.av-trigger.open .av-chevron[b-kwzl49p276] { transform: rotate(180deg); }


/* ══════════════════════════════════════════════
   USER DROPDOWN MENU
   ══════════════════════════════════════════════ */
@keyframes dropdown-in-b-kwzl49p276 {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes dropdown-out-b-kwzl49p276 {
    from { opacity: 1; transform: translateY(0)    scale(1);    }
    to   { opacity: 0; transform: translateY(-6px) scale(0.97); }
}

.game-select-popover.is-closing[b-kwzl49p276] { animation: dropdown-out-b-kwzl49p276 0.15s ease-in forwards; }
.user-menu.is-closing[b-kwzl49p276]           { animation: dropdown-out-b-kwzl49p276 0.15s ease-in forwards; }

.user-menu[b-kwzl49p276] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 256px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 200;
    overflow: hidden;
    transform-origin: top right;
    animation: dropdown-in-b-kwzl49p276 0.18s ease-out;
}

/* User info header */
.um-header[b-kwzl49p276] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    background: var(--bg-subtle);
}

.um-avatar-wrap[b-kwzl49p276] { flex-shrink: 0; }

.um-avatar[b-kwzl49p276] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border: 2px solid rgba(99,102,241,0.25);
}

.um-avatar.has-image[b-kwzl49p276] { background: var(--bg-card); border-color: var(--border); }

.um-avatar img[b-kwzl49p276] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.um-user-info[b-kwzl49p276] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.um-name[b-kwzl49p276] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.um-email[b-kwzl49p276] {
    font-size: 11.5px;
    color: var(--text-placeholder);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.um-role-badge[b-kwzl49p276] {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 7px;
    border-radius: 99px;
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}

/* Menu items */
.user-menu-item[b-kwzl49p276] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: background 0.1s, color 0.1s;
    margin: 3px 5px;
    border-radius: var(--radius-md);
}

.user-menu-item .material-icons[b-kwzl49p276] {
    font-size: 17px !important;
    color: var(--text-placeholder);
    transition: color 0.1s;
}

.user-menu-item:hover[b-kwzl49p276] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.user-menu-item:hover .material-icons[b-kwzl49p276] { color: var(--text-secondary); }

.user-menu-divider[b-kwzl49p276] {
    height: 1px;
    background: var(--border-light);
    margin: 2px 0;
}

.user-menu-item.danger[b-kwzl49p276] { color: var(--color-danger); }
.user-menu-item.danger .material-icons[b-kwzl49p276] { color: var(--color-danger); opacity: 0.7; }
.user-menu-item.danger:hover[b-kwzl49p276] { background: var(--color-danger-subtle); }
.user-menu-item.danger:hover .material-icons[b-kwzl49p276] { opacity: 1; }

.menu-overlay[b-kwzl49p276] {
    position: fixed;
    inset: 0;
    z-index: 199;
}


/* ══════════════════════════════════════════════
   PERSONAL SETTINGS MODAL
   ══════════════════════════════════════════════ */
.ps-overlay[b-kwzl49p276] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.40);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: psFadeIn-b-kwzl49p276 0.18s ease both;
}

.ps-overlay--out[b-kwzl49p276] { animation: psFadeOut-b-kwzl49p276 0.18s ease forwards; }

.ps-modal[b-kwzl49p276] {
    width: 440px;
    max-width: calc(100vw - 32px);
    max-height: 90vh;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: psSlideIn-b-kwzl49p276 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.ps-modal--out[b-kwzl49p276] { animation: psSlideOut-b-kwzl49p276 0.18s ease forwards; }

@keyframes psFadeIn-b-kwzl49p276   { from { opacity: 0; } to { opacity: 1; } }
@keyframes psFadeOut-b-kwzl49p276  { from { opacity: 1; } to { opacity: 0; } }
@keyframes psSlideIn-b-kwzl49p276  { from { opacity: 0; transform: translateY(-12px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes psSlideOut-b-kwzl49p276 { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-12px) scale(0.95); } }

/* Header */
.ps-header[b-kwzl49p276] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--border-light);
}

.ps-header-title[b-kwzl49p276] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.ps-header-title .material-icons[b-kwzl49p276] {
    font-size: 20px !important;
    color: #6366f1;
}

.ps-close-btn[b-kwzl49p276] {
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-placeholder);
    transition: background 0.15s, color 0.15s;
}

.ps-close-btn:hover[b-kwzl49p276] { background: var(--bg-hover); color: var(--text-primary); }
.ps-close-btn .material-icons[b-kwzl49p276] { font-size: 20px !important; }

/* Hero section */
.ps-hero[b-kwzl49p276] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%);
    border-bottom: 1px solid var(--border-light);
}

.ps-avatar-wrap[b-kwzl49p276] {
    cursor: pointer;
    flex-shrink: 0;
}

.ps-avatar[b-kwzl49p276] {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(99,102,241,0.30);
    transition: box-shadow 0.15s;
}

.ps-avatar.has-image[b-kwzl49p276] { background: var(--bg-subtle); }
.ps-avatar-wrap:hover .ps-avatar[b-kwzl49p276] { box-shadow: 0 4px 16px rgba(99,102,241,0.45); }

.ps-avatar img[b-kwzl49p276] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ps-avatar-overlay[b-kwzl49p276] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.18s;
}

.ps-avatar-wrap:hover .ps-avatar-overlay[b-kwzl49p276] { opacity: 1; }
.ps-avatar-overlay .material-icons[b-kwzl49p276] { font-size: 22px !important; }

.ps-hero-info[b-kwzl49p276] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ps-hero-name[b-kwzl49p276] {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
}

.ps-hero-email[b-kwzl49p276] {
    font-size: 12.5px;
    color: var(--text-muted);
}

.ps-hero-role[b-kwzl49p276] {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 99px;
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}

/* Body */
.ps-body[b-kwzl49p276] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ps-section-label[b-kwzl49p276] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-placeholder);
    margin-bottom: 2px;
}

.ps-field[b-kwzl49p276] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ps-label[b-kwzl49p276] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.ps-input[b-kwzl49p276] {
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    font-size: 13.5px;
    font-family: var(--font);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    width: 100%;
}

.ps-input:focus[b-kwzl49p276] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.10);
}

.ps-readonly-wrap[b-kwzl49p276] {
    position: relative;
    display: flex;
    align-items: center;
}

.ps-readonly-icon[b-kwzl49p276] {
    position: absolute;
    left: 10px;
    font-size: 16px !important;
    color: var(--text-placeholder);
    pointer-events: none;
}

.ps-input-readonly[b-kwzl49p276] {
    padding-left: 34px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    cursor: default;
}

.ps-input-readonly:focus[b-kwzl49p276] { border-color: var(--border); box-shadow: none; }

.ps-hint[b-kwzl49p276] {
    font-size: 11.5px;
    color: var(--text-placeholder);
}

/* Footer */
.ps-footer[b-kwzl49p276] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-subtle);
}

.ps-btn-cancel[b-kwzl49p276] {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: var(--font);
}

.ps-btn-cancel:hover[b-kwzl49p276] { border-color: #9ca3af; background: var(--bg-hover); }

.ps-btn-save[b-kwzl49p276] {
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: #6366f1;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    font-family: var(--font);
}

.ps-btn-save:hover[b-kwzl49p276] {
    background: #4f46e5;
    box-shadow: 0 4px 12px rgba(99,102,241,0.30);
}

/* Legacy — keep for compatibility */
.role-badge-container[b-kwzl49p276] { display: flex; }
.avatar-wrapper[b-kwzl49p276] { position: relative; }
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-z6hnalsgtu] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-z6hnalsgtu] {
    flex: 1;
}

.sidebar[b-z6hnalsgtu] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-z6hnalsgtu] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-z6hnalsgtu]  a, .top-row[b-z6hnalsgtu]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-z6hnalsgtu]  a:hover, .top-row[b-z6hnalsgtu]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-z6hnalsgtu]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-z6hnalsgtu] {
        justify-content: space-between;
    }

    .top-row[b-z6hnalsgtu]  a, .top-row[b-z6hnalsgtu]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-z6hnalsgtu] {
        flex-direction: row;
    }

    .sidebar[b-z6hnalsgtu] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-z6hnalsgtu] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-z6hnalsgtu]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-z6hnalsgtu], article[b-z6hnalsgtu] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-xeq8v89a8i] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-xeq8v89a8i] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-xeq8v89a8i] {
    font-size: 1.1rem;
}

.bi[b-xeq8v89a8i] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-xeq8v89a8i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-xeq8v89a8i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-xeq8v89a8i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-xeq8v89a8i] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-xeq8v89a8i] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-xeq8v89a8i] {
        padding-bottom: 1rem;
    }

    .nav-item[b-xeq8v89a8i]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-xeq8v89a8i]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-xeq8v89a8i]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-xeq8v89a8i] {
        display: none;
    }

    .collapse[b-xeq8v89a8i] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-xeq8v89a8i] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Dashboard/Analytics/Advertisement.razor.rz.scp.css */
/* ===== PAGE HEADER ICON ===== */
.page-header-left[b-djt18e71hm] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.page-header-icon[b-djt18e71hm] {
    width: 44px;
    height: 44px;
    background: var(--color-primary-subtle);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-header-icon .material-icons[b-djt18e71hm] {
    font-size: 24px;
    color: var(--color-primary);
}
/* /Pages/Dashboard/Analytics/Economic.razor.rz.scp.css */
/* ===== PAGE HEADER ICON ===== */
.page-header-left[b-w6437kuydx] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.page-header-icon[b-w6437kuydx] {
    width: 44px;
    height: 44px;
    background: var(--color-primary-subtle);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-header-icon .material-icons[b-w6437kuydx] {
    font-size: 24px;
    color: var(--color-primary);
}
/* /Pages/Dashboard/Analytics/Engagement.razor.rz.scp.css */
/* ===== PAGE HEADER ICON ===== */
.page-header-left[b-bs6yfzgnbk] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.page-header-icon[b-bs6yfzgnbk] {
    width: 44px;
    height: 44px;
    background: var(--color-primary-subtle);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-header-icon .material-icons[b-bs6yfzgnbk] {
    font-size: 24px;
    color: var(--color-primary);
}

/* ===== 2-COLUMN COUNTRY CHARTS ===== */
.eng-country-row[b-bs6yfzgnbk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
/* /Pages/Dashboard/Analytics/Events.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   PAGE HEADER ICON
   ════════════════════════════════════════════════════════════════════════════ */
.page-header-left[b-zk29ts943t] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.page-header-icon[b-zk29ts943t] {
    width: 44px;
    height: 44px;
    background: var(--color-primary-subtle);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-header-icon .material-icons[b-zk29ts943t] {
    font-size: 24px;
    color: var(--color-primary);
}

/* ════════════════════════════════════════════════════════════════════════════
   EVENT SEARCH BAR
   ════════════════════════════════════════════════════════════════════════════ */

/* Backdrop */
.ce-sb-backdrop[b-zk29ts943t] {
    position: fixed;
    inset: 0;
    z-index: 49;
}

/* Container — grows when open */
.ce-sb[b-zk29ts943t] {
    position: relative;
    z-index: 50;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: none;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ce-sb--open[b-zk29ts943t] {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.07);
}

/* Input row */
.ce-sb-row[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
}

.ce-sb-icon[b-zk29ts943t] {
    font-size: 18px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: color 0.2s;
}

.ce-sb--open .ce-sb-icon[b-zk29ts943t] {
    color: var(--color-primary);
}

.ce-sb-input[b-zk29ts943t] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
    background: transparent;
    font-family: 'Inter', -apple-system, sans-serif;
    min-width: 0;
}

.ce-sb-input[b-zk29ts943t]::placeholder {
    color: #b0b7c3;
    font-weight: 400;
}

.ce-sb-clear[b-zk29ts943t] {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: background 0.1s, color 0.1s;
    flex-shrink: 0;
}
.ce-sb-clear:hover[b-zk29ts943t] { background: #f3f4f6; color: var(--text-primary); }
.ce-sb-clear .material-icons[b-zk29ts943t] { font-size: 16px; }

/* Analyze button */
.ce-sb-btn[b-zk29ts943t] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Inter', -apple-system, sans-serif;
}
.ce-sb-btn:hover[b-zk29ts943t] { background: #4338ca; box-shadow: 0 3px 10px rgba(79,70,229,0.22); }
.ce-sb-btn:disabled[b-zk29ts943t] { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.ce-sb-btn .material-icons[b-zk29ts943t] { font-size: 15px; }

/* Results panel — grid-template-rows trick: animates actual content height */
.ce-sb-panel-wrap[b-zk29ts943t] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.15s;
    border-top: 0px solid transparent;
}

.ce-sb--open .ce-sb-panel-wrap[b-zk29ts943t] {
    grid-template-rows: 1fr;
    border-top: 1px solid #f1f3f5;
}

.ce-sb-panel[b-zk29ts943t] {
    overflow: hidden;
    min-height: 0;
    max-height: 280px;
    overflow-y: auto;
}

.ce-sb-panel[b-zk29ts943t]::-webkit-scrollbar { width: 4px; }
.ce-sb-panel[b-zk29ts943t]::-webkit-scrollbar-track { background: transparent; }
.ce-sb-panel[b-zk29ts943t]::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

/* Empty state */
.ce-sb-empty[b-zk29ts943t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    font-size: 13px;
    color: var(--text-muted);
}
.ce-sb-empty .material-icons[b-zk29ts943t] { font-size: 20px; color: #d1d5db; }

/* List items */
.ce-sb-item[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background 0.08s;
    text-align: left;
}

.ce-sb-item:hover[b-zk29ts943t] { background: #f8f9ff; }

.ce-sb-item--sel[b-zk29ts943t] { background: var(--color-primary-subtle); }
.ce-sb-item--sel:hover[b-zk29ts943t] { background: #ebe8ff; }

.ce-sb-item--kb[b-zk29ts943t] { background: #f0eeff; }
.ce-sb-item--kb.ce-sb-item--sel[b-zk29ts943t] { background: #e4e0ff; }

.ce-sb-item-name[b-zk29ts943t] {
    flex: 1;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Highlight matched text */
.ce-sb-hl[b-zk29ts943t] {
    background: none;
    color: var(--color-primary);
    font-weight: 700;
}

/* "analyzed" badge */
.ce-sb-analyzed[b-zk29ts943t] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #059669;
    background: #ecfdf5;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   CUSTOM EVENT OVERVIEW  (ceo-*)
   ════════════════════════════════════════════════════════════════════════════ */
.ceo-card[b-zk29ts943t] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.ceo-header[b-zk29ts943t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.ceo-header-left[b-zk29ts943t] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ceo-header-icon[b-zk29ts943t] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--color-primary-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ceo-header-icon .material-icons[b-zk29ts943t] { font-size: 20px; color: var(--color-primary); }

.ceo-header-title[b-zk29ts943t] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.ceo-header-sub[b-zk29ts943t] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.ceo-header-sub strong[b-zk29ts943t] {
    color: var(--text-secondary);
    font-weight: 600;
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
}

.ceo-header-badge[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}

.ceo-header-badge .material-icons[b-zk29ts943t] { font-size: 15px; color: var(--color-primary); }
.ceo-badge-sep[b-zk29ts943t] { color: var(--border); }

/* ── Primary KPIs — 4-column grid ───────────────────────────────────────── */
.ceo-primary[b-zk29ts943t] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.ceo-kpi[b-zk29ts943t] {
    padding: 20px 22px 18px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ceo-kpi--last[b-zk29ts943t] { border-right: none; }

.ceo-kpi-hdr[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Small icon chip */
.ceo-kpi-chip[b-zk29ts943t] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ceo-kpi-chip .material-icons[b-zk29ts943t] { font-size: 14px; }

.ceo-kpi-chip--purple[b-zk29ts943t] { background: #ede9fe; color: #7c3aed; }
.ceo-kpi-chip--indigo[b-zk29ts943t] { background: var(--color-primary-subtle); color: var(--color-primary); }
.ceo-kpi-chip--blue[b-zk29ts943t]   { background: #dbeafe; color: #2563eb; }
.ceo-kpi-chip--green[b-zk29ts943t]  { background: #dcfce7; color: #16a34a; }
.ceo-kpi-chip--amber[b-zk29ts943t]  { background: #fef3c7; color: #d97706; }

.ceo-kpi-label[b-zk29ts943t] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Primary value — large number */
.ceo-kpi-value[b-zk29ts943t] {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ceo-kpi-unit[b-zk29ts943t] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0;
    margin-left: 1px;
}

/* Mini percentage bar */
.ceo-kpi-bar-wrap[b-zk29ts943t] { padding: 1px 0; }

.ceo-kpi-bar-track[b-zk29ts943t] {
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
}

.ceo-kpi-bar-fill[b-zk29ts943t] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 2px;
}

.ceo-bar--purple[b-zk29ts943t] { background: #8b5cf6; }
.ceo-bar--green[b-zk29ts943t]  { background: #16a34a; }
.ceo-bar--amber[b-zk29ts943t]  { background: #d97706; }
.ceo-bar--blue[b-zk29ts943t]   { background: #3b82f6; }

/* Sub-info */
.ceo-kpi-sub[b-zk29ts943t] {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.ceo-kpi-sub--gap[b-zk29ts943t] { gap: 5px; }

.ceo-kpi-sub-strong[b-zk29ts943t] {
    font-weight: 700;
    color: var(--text-secondary);
}

/* Behavior classification tag */
.ceo-behavior-tag[b-zk29ts943t] {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
}

.ceo-behavior-tag--green[b-zk29ts943t] { background: #dcfce7; color: #15803d; }
.ceo-behavior-tag--amber[b-zk29ts943t] { background: #fef3c7; color: #92400e; }
.ceo-behavior-tag--blue[b-zk29ts943t]  { background: #dbeafe; color: #1d4ed8; }

/* ── Secondary strip ─────────────────────────────────────────────────────── */
.ceo-secondary[b-zk29ts943t] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
    gap: 4px 0;
}

.ceo-stat[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 160px;
    padding: 4px 0;
}

.ceo-stat-icon[b-zk29ts943t] {
    font-size: 17px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.ceo-stat-info[b-zk29ts943t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ceo-stat-label[b-zk29ts943t] {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

.ceo-stat-val-row[b-zk29ts943t] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.ceo-stat-value[b-zk29ts943t] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.ceo-stat-value--na[b-zk29ts943t] {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.ceo-stat-sub[b-zk29ts943t] {
    font-size: 11px;
    color: var(--text-muted);
}

.ceo-stat-tag[b-zk29ts943t] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #d97706;
    background: #fef3c7;
    padding: 1px 6px;
    border-radius: 4px;
}

.ceo-stat-divider[b-zk29ts943t] {
    width: 1px;
    height: 32px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 20px;
}

/* Tooltip anchoring */
.ceo-tt--left[b-zk29ts943t] {
    left: 0;
    transform: translateX(0) translateY(4px);
}
.ceo-tt--left[b-zk29ts943t]::before, .ceo-tt--left[b-zk29ts943t]::after { left: 22px; margin-left: 0; }
.info-wrapper:hover .ceo-tt--left[b-zk29ts943t] { transform: translateX(0) translateY(0); }

.ceo-tt--right[b-zk29ts943t] {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}
.ceo-tt--right[b-zk29ts943t]::before, .ceo-tt--right[b-zk29ts943t]::after { left: auto; right: 14px; margin-left: 0; }
.info-wrapper:hover .ceo-tt--right[b-zk29ts943t] { transform: translateX(0) translateY(0); }

/* Responsive */
@media (max-width: 1100px) {
    .ceo-primary[b-zk29ts943t] { grid-template-columns: repeat(2, 1fr); }
    .ceo-kpi:nth-child(2)[b-zk29ts943t] { border-right: none; }
    .ceo-kpi:nth-child(n+3)[b-zk29ts943t] { border-top: 1px solid var(--border-light); }
    .ceo-kpi:last-child[b-zk29ts943t] { border-right: none; }
}

@media (max-width: 640px) {
    .ceo-stat-divider[b-zk29ts943t] { display: none; }
    .ceo-stat[b-zk29ts943t] { min-width: 140px; }
}

/* ── Tooltip (shared) ────────────────────────────────────────────────────── */
.info-wrapper[b-zk29ts943t] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tooltip-box[b-zk29ts943t] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 248px;
    background: var(--bg-card);
    color: var(--text-secondary);
    text-align: left;
    border-radius: var(--radius-md);
    padding: 13px 14px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 12px 24px -4px rgba(0,0,0,.12);
    border: 1px solid var(--border);
    z-index: 200;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.tooltip-box[b-zk29ts943t]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -9px;
    border-width: 9px;
    border-style: solid;
    border-color: var(--border) transparent transparent transparent;
}

.tooltip-box[b-zk29ts943t]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: var(--bg-card) transparent transparent transparent;
}

.info-wrapper:hover .tooltip-box[b-zk29ts943t] {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.tooltip-header[b-zk29ts943t] {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.tooltip-content[b-zk29ts943t] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.info-icon[b-zk29ts943t] {
    font-size: 14px;
    color: var(--text-placeholder);
    cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════════
   BOTTOM ROW — grid layout (kept; inner cards use cfd-* and cep-*)
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   BEHAVIORAL COMPARISON
   ════════════════════════════════════════════════════════════════════════════ */
.ce-behav[b-zk29ts943t] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ── Header (standard card header pattern) ───────────────────────────── */
.ce-behav-header[b-zk29ts943t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.ce-behav-header-left[b-zk29ts943t] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ce-behav-header-icon[b-zk29ts943t] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ce-behav-header-icon .material-icons[b-zk29ts943t] { font-size: 20px; color: #d97706; }

.ce-behav-title[b-zk29ts943t] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.ce-behav-sub[b-zk29ts943t] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.ce-behav-badge[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.ce-behav-badge .material-icons[b-zk29ts943t] { font-size: 16px; }

.ce-behav-badge--pos[b-zk29ts943t] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.ce-behav-badge--neg[b-zk29ts943t] {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #dc2626;
}

/* ── Segment pills ───────────────────────────────────────────────────── */
.ce-bcmp-pills[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
}

.ce-bcmp-pill[b-zk29ts943t] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 20px;
    border: 1px solid;
}
.ce-bcmp-pill--f[b-zk29ts943t] { background: #f5f3ff; border-color: #ddd6fe; }
.ce-bcmp-pill--n[b-zk29ts943t] { background: #f9fafb; border-color: #e5e7eb; }

.ce-bcmp-pill-dot[b-zk29ts943t] {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ce-bcmp-pill--f .ce-bcmp-pill-dot[b-zk29ts943t] { background: #8b5cf6; }
.ce-bcmp-pill--n .ce-bcmp-pill-dot[b-zk29ts943t] { background: #9ca3af; }

.ce-bcmp-pill-name[b-zk29ts943t] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
}
.ce-bcmp-pill-count[b-zk29ts943t] {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.ce-bcmp-vs[b-zk29ts943t] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── 2×2 metric card grid ────────────────────────────────────────────── */
.ce-bcmp-grid[b-zk29ts943t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 20px;
}

/* Individual metric card */
.ce-bcmp-card[b-zk29ts943t] {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.15s;
}
.ce-bcmp-card:hover[b-zk29ts943t] {
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* Card header: metric name + delta badge */
.ce-bcmp-card-hdr[b-zk29ts943t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ce-bcmp-card-metric[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.ce-bcmp-card-metric .material-icons[b-zk29ts943t] {
    font-size: 15px;
    color: var(--text-muted);
}

.ce-bcmp-delta[b-zk29ts943t] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ce-bcmp-delta--pos[b-zk29ts943t] { background: #dcfce7; color: #15803d; }
.ce-bcmp-delta--neg[b-zk29ts943t] { background: #fee2e2; color: #dc2626; }

/* Group block (firer / non-firer) */
.ce-bcmp-group[b-zk29ts943t] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ce-bcmp-group-row[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ce-bcmp-group-dot[b-zk29ts943t] {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ce-bcmp-group-dot--f[b-zk29ts943t] { background: #8b5cf6; }
.ce-bcmp-group-dot--n[b-zk29ts943t] { background: #9ca3af; }

.ce-bcmp-group-label[b-zk29ts943t] {
    font-size: 11.5px;
    color: var(--text-muted);
    flex: 1;
}

.ce-bcmp-group-val[b-zk29ts943t] {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.ce-bcmp-group-val--f[b-zk29ts943t] { color: #7c3aed; }
.ce-bcmp-group-val--n[b-zk29ts943t] { color: #6b7280; }

.ce-bcmp-bar-track[b-zk29ts943t] {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}
.ce-bcmp-bar[b-zk29ts943t] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
    min-width: 3px;
}
.ce-bcmp-bar--f[b-zk29ts943t] { background: linear-gradient(90deg, #c4b5fd, #8b5cf6); }
.ce-bcmp-bar--n[b-zk29ts943t] { background: #d1d5db; }

/* ── Insight note ────────────────────────────────────────────────────── */
.ce-behav-insight[b-zk29ts943t] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 20px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
    border-top: 1px solid var(--border-light);
}

.ce-behav-insight .material-icons[b-zk29ts943t] { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.ce-behav-insight strong[b-zk29ts943t] { font-weight: 700; }

.ce-behav-insight--pos[b-zk29ts943t] { background: #f0fdf4; }
.ce-behav-insight--pos .material-icons[b-zk29ts943t] { color: #16a34a; }
.ce-behav-insight--pos strong[b-zk29ts943t] { color: #15803d; }

.ce-behav-insight--neg[b-zk29ts943t] { background: #fff7ed; }
.ce-behav-insight--neg .material-icons[b-zk29ts943t] { color: #ea580c; }
.ce-behav-insight--neg strong[b-zk29ts943t] { color: #c2410c; }

.ce-bottom-row[b-zk29ts943t] {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 16px;
}

/* ════════════════════════════════════════════════════════════════════════════
   FREQUENCY DISTRIBUTION  (ete-* pattern, cfd-* prefix)
   ════════════════════════════════════════════════════════════════════════════ */
.cfd-card[b-zk29ts943t] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cfd-header[b-zk29ts943t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 16px;
    flex-shrink: 0;
}

.cfd-header-left[b-zk29ts943t] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.cfd-header-icon[b-zk29ts943t] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(124,58,237,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cfd-header-icon .material-icons[b-zk29ts943t] { font-size: 20px; color: #7c3aed; }

.cfd-title[b-zk29ts943t] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.cfd-sub[b-zk29ts943t]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

/* Summary strip */
.cfd-strip[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.cfd-strip-label[b-zk29ts943t] { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.cfd-strip-value[b-zk29ts943t] { font-size: 13px; font-weight: 700; color: #7c3aed; font-variant-numeric: tabular-nums; }
.cfd-strip-sep[b-zk29ts943t]   { width: 1px; height: 12px; background: var(--border); margin: 0 4px; }

/* Empty */
.cfd-empty[b-zk29ts943t] { display: flex; align-items: center; justify-content: center; height: 160px; }

/* Ranked list */
.cfd-list[b-zk29ts943t] {
    display: flex;
    flex-direction: column;
    padding: 8px 0 12px;
}

.cfd-row[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 20px;
    transition: background 0.1s ease;
}

.cfd-row:hover[b-zk29ts943t] { background: var(--bg-subtle); }

/* Empty bucket (no data) */
.cfd-row--empty[b-zk29ts943t] { opacity: 0.45; }
.cfd-row--empty:hover[b-zk29ts943t] { background: transparent; }

/* Rank badge */
.cfd-rank[b-zk29ts943t] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cfd-rank--1[b-zk29ts943t] { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #d97706; }
.cfd-rank--2[b-zk29ts943t] { background: rgba(107,114,128,0.12); border-color: rgba(107,114,128,0.3); color: #6b7280; }
.cfd-rank--3[b-zk29ts943t] { background: rgba(180,83,9,0.10); border-color: rgba(180,83,9,0.25); color: #b45309; }

/* Label */
.cfd-row-name[b-zk29ts943t] {
    width: 100px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Bar */
.cfd-bar-track[b-zk29ts943t] {
    flex: 1;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.cfd-bar-fill[b-zk29ts943t] {
    height: 100%;
    background: linear-gradient(90deg, #c4b5fd, #8b5cf6);
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

/* Value & Pct */
.cfd-row-value[b-zk29ts943t] {
    width: 58px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.cfd-row-pct[b-zk29ts943t] {
    width: 44px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   EVENT PARAMETERS  (lkpi-dist-* pattern, cep-* prefix)
   ════════════════════════════════════════════════════════════════════════════ */
.cep-card[b-zk29ts943t] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cep-header[b-zk29ts943t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.cep-header-left[b-zk29ts943t] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.cep-header-icon[b-zk29ts943t] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(5,150,105,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cep-header-icon .material-icons[b-zk29ts943t] { font-size: 20px; color: #059669; }

.cep-title[b-zk29ts943t] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.cep-sub[b-zk29ts943t]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.cep-badge[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cep-badge .material-icons[b-zk29ts943t] { font-size: 15px; color: #059669; }

/* Empty state */
.cep-empty[b-zk29ts943t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 200px;
    padding: 24px;
    text-align: center;
}

.cep-empty-icon[b-zk29ts943t] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cep-empty-icon .material-icons[b-zk29ts943t] { font-size: 22px; color: #94a3b8; }

.cep-empty-text[b-zk29ts943t] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cep-empty-title[b-zk29ts943t] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.cep-empty-desc[b-zk29ts943t] {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Body — scrollable */
.cep-body[b-zk29ts943t] {
    overflow-y: auto;
    max-height: 420px;
    padding: 4px 20px 16px;
    display: flex;
    flex-direction: column;
}

.cep-body[b-zk29ts943t]::-webkit-scrollbar { width: 4px; }
.cep-body[b-zk29ts943t]::-webkit-scrollbar-track { background: transparent; }
.cep-body[b-zk29ts943t]::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

/* Inline key badge (now inside .cep-dist-names) */
.cep-group-key[b-zk29ts943t] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #374151;
    font-family: 'Roboto Mono', monospace;
    letter-spacing: -0.02em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 64px;
}

/* Invisible spacer for alignment on non-first-value rows */
.cep-key-gap[b-zk29ts943t] {
    min-width: 64px;
    flex-shrink: 0;
}

/* Distribution row (lkpi-dist-row adapted) */
.cep-dist-row[b-zk29ts943t] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 7px 0;
}

/* Group separator — top border + extra spacing before new key group */
.cep-dist-row--sep[b-zk29ts943t] {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

.cep-dist-meta[b-zk29ts943t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Inline flex so key badge + value name sit side-by-side */
.cep-dist-names[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.cep-dist-val-name[b-zk29ts943t] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: 'Roboto Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.cep-dist-right[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cep-dist-pct-val[b-zk29ts943t] {
    font-size: 14px;
    font-weight: 700;
    color: #059669;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.cep-dist-freq[b-zk29ts943t] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.cep-dist-peak[b-zk29ts943t] {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(5,150,105,0.12);
    color: #059669;
}

.cep-dist-track[b-zk29ts943t] {
    width: 100%;
    height: 7px;
    background: var(--bg-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.cep-dist-fill[b-zk29ts943t] {
    height: 100%;
    background: #059669;
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 2px;
}

/* ════════════════════════════════════════════════════════════════════════════
   EMPTY / LOADING
   ════════════════════════════════════════════════════════════════════════════ */
.ce-loading[b-zk29ts943t] { }

.ce-empty[b-zk29ts943t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 40px 28px;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    color: #6b7280;
    font-size: 14px;
}

.ce-empty .material-icons[b-zk29ts943t] { font-size: 22px; color: #a78bfa; }
.ce-empty strong[b-zk29ts943t] { color: #111827; }

/* /Pages/Dashboard/Analytics/Monetization.razor.rz.scp.css */
/* ===== 2×2 METRIC GRID ===== */
.mon-quad-grid[b-45uae8eu2t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ===== PAGE HEADER ICON ===== */
.page-header-left[b-45uae8eu2t] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.page-header-icon[b-45uae8eu2t] {
    width: 44px;
    height: 44px;
    background: var(--color-primary-subtle);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-header-icon .material-icons[b-45uae8eu2t] {
    font-size: 24px;
    color: var(--color-primary);
}
/* /Pages/Dashboard/Analytics/Progression.razor.rz.scp.css */
/* ===== PAGE HEADER ICON ===== */
.page-header-left[b-8ugzgsppie] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.page-header-icon[b-8ugzgsppie] {
    width: 44px;
    height: 44px;
    background: var(--color-primary-subtle);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-header-icon .material-icons[b-8ugzgsppie] {
    font-size: 24px;
    color: var(--color-primary);
}
/* /Pages/Dashboard/Analytics/Retention.razor.rz.scp.css */
/* ===== PAGE HEADER ICON ===== */
.page-header-left[b-om51q671i2] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.page-header-icon[b-om51q671i2] {
    width: 44px;
    height: 44px;
    background: var(--color-primary-subtle);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-header-icon .material-icons[b-om51q671i2] {
    font-size: 24px;
    color: var(--color-primary);
}

/* ===== 2×2 METRIC GRID ===== */
.ret-quad-grid[b-om51q671i2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
/* /Pages/Dashboard/Overview.razor.rz.scp.css */
/* ===== PAGE ===== */
.overview-page[b-iso0pnmgga] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 32px;
}

/* ===== PAGE HEADER ===== */
.ov-page-header[b-iso0pnmgga] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
}

.ov-page-header-left[b-iso0pnmgga] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ov-page-icon-wrap[b-iso0pnmgga] {
    width: 44px;
    height: 44px;
    background: var(--color-primary-subtle);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ov-page-icon-wrap .material-icons[b-iso0pnmgga] {
    font-size: 24px;
    color: var(--color-primary);
}

.ov-page-title[b-iso0pnmgga] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px;
    line-height: 1.2;
}

.ov-page-sub[b-iso0pnmgga] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.ov-page-header-right[b-iso0pnmgga] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ov-stat-badge[b-iso0pnmgga] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 5px 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.ov-stat-num[b-iso0pnmgga] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ===== CARD ===== */
.ov-card[b-iso0pnmgga] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 0 24px;
}

/* ===== CARD TOOLBAR ===== */
.ov-card-toolbar[b-iso0pnmgga] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
}

/* Tabs (All / Pinned) */
.ov-tabs[b-iso0pnmgga] {
    display: flex;
    gap: 2px;
}

.games-sub-tab[b-iso0pnmgga] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--t-fast);
}

.games-sub-tab .material-icons[b-iso0pnmgga] { font-size: 14px; }
.games-sub-tab:hover[b-iso0pnmgga]  { background: var(--bg-hover); color: var(--text-primary); }
.games-sub-tab.active[b-iso0pnmgga] { background: var(--bg-active); color: var(--text-primary); font-weight: 600; }

/* Right side of toolbar */
.ov-toolbar-right[b-iso0pnmgga] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== TABLE GRID ===== */
.ov-grid[b-iso0pnmgga] {
    display: grid;
    grid-template-columns: 3.75fr repeat(7, 1fr);
    align-items: center;
}

/* ===== TABLE HEADER ===== */
.ov-table-header[b-iso0pnmgga] {
    background: var(--bg-subtle);
    padding: 0 28px 0 16px;
}

.ov-col-game[b-iso0pnmgga],
.ov-col-num[b-iso0pnmgga] {
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    user-select: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: default;
}

.ov-col-game[b-iso0pnmgga] { padding-left: 2px; }
.ov-col-num[b-iso0pnmgga]  { justify-content: flex-start; }

.ov-col-game.sortable[b-iso0pnmgga],
.ov-col-num.sortable[b-iso0pnmgga] { cursor: pointer; }
.ov-col-game.sortable:hover[b-iso0pnmgga],
.ov-col-num.sortable:hover[b-iso0pnmgga] { color: var(--text-secondary); }

/* ===== TABLE ROWS ===== */
.ov-row[b-iso0pnmgga] {
    padding: 0 28px 0 16px;
    border-top: 1px solid var(--border-light);
    cursor: pointer;
    position: relative;
    transition: background 0.12s ease;
    min-height: 64px;
}

.ov-row:hover[b-iso0pnmgga] { background: var(--bg-subtle); }
.ov-row:active[b-iso0pnmgga] { background: var(--bg-hover); }

/* Game cell */
.ov-cell-game[b-iso0pnmgga] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px 12px 2px;
}

.ov-game-icon[b-iso0pnmgga] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    flex-shrink: 0;
}

.ov-game-icon-placeholder[b-iso0pnmgga] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--color-primary-subtle);
    border: 1px solid var(--color-primary-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
}

.ov-game-info[b-iso0pnmgga] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ov-game-name-row[b-iso0pnmgga] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ov-game-name[b-iso0pnmgga] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.ov-game-pkg[b-iso0pnmgga] {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* Platform icons beside name */
.ov-plat-row[b-iso0pnmgga] {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.ov-plat-icon[b-iso0pnmgga] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: var(--bg-hover);
    color: var(--text-muted);
}

.ov-plat-icon .material-icons[b-iso0pnmgga] { font-size: 12px; }

/* KPI number cells */
.ov-cell-num[b-iso0pnmgga] {
    padding: 12px 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: left;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Retention color classes */
.ret-good[b-iso0pnmgga] { color: #16a34a; font-weight: 600; }
.ret-mid[b-iso0pnmgga]  { color: #d97706; font-weight: 600; }
.ret-low[b-iso0pnmgga]  { color: var(--text-muted); }

/* ===== PIN BUTTON ===== */
.ov-pin-wrap[b-iso0pnmgga] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.ov-pin-btn[b-iso0pnmgga] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-placeholder);
    opacity: 0;
    transition: var(--t-fast);
    box-shadow: var(--shadow-xs);
}

.ov-pin-btn .material-icons[b-iso0pnmgga] { font-size: 14px; transform: rotate(45deg); transition: transform 0.15s; }
.ov-row:hover .ov-pin-btn[b-iso0pnmgga] { opacity: 1; }
.ov-pin-btn:hover[b-iso0pnmgga] { background: var(--bg-hover); color: var(--color-primary); }

.ov-pin-btn.active[b-iso0pnmgga] {
    opacity: 1;
    background: var(--color-primary-subtle);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
}

.ov-pin-btn.active .material-icons[b-iso0pnmgga] { transform: rotate(0deg); }

/* ===== EMPTY STATE ===== */
.ov-empty[b-iso0pnmgga] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px;
    color: var(--text-placeholder);
    font-size: 13px;
}

.ov-empty .material-icons[b-iso0pnmgga] { font-size: 36px; opacity: 0.4; }

/* ===== DISABLED BUTTON OVERRIDES ===== */
.btn-create.btn-disabled:hover[b-iso0pnmgga]   { background: var(--color-primary) !important; }
.btn-settings.btn-disabled:hover[b-iso0pnmgga] { background: var(--bg-card) !important; border-color: var(--border) !important; }
/* /Pages/Documents.razor.rz.scp.css */
/* ===== Documents — dark theme ===== */
.doc-root[b-yg663zdli7] {
    --bg:        #0a0b12;
    --bg2:       #10121c;
    --panel:     #141622;
    --panel2:    #191c2b;
    --border:    #242838;
    --accent:    #7c6cff;
    --accent-dim:rgba(124,108,255,.14);
    --text:      #e7e9f2;
    --muted:     #8b90a6;
    --pill-bg:   #1c2030;
    --pill-tx:   #b7b0ff;

    margin: -24px;                       /* bù padding 24px của .dashboard-content */
    min-height: calc(100vh - 60px);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.65;
}

/* ---- HERO ---- */
.doc-hero[b-yg663zdli7] {
    background:
        radial-gradient(1200px 300px at 20% -40%, rgba(124,108,255,.18), transparent 60%),
        linear-gradient(180deg, #131627 0%, #0a0b12 100%);
    border-bottom: 1px solid var(--border);
    padding: 40px 40px 34px;
}
.doc-hero-inner[b-yg663zdli7] { max-width: 1180px; margin: 0 auto; }
.doc-hero-title[b-yg663zdli7] { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: #fff; }
.doc-hero-lead[b-yg663zdli7] { margin: 0 0 22px; color: var(--muted); max-width: 820px; }

.doc-navgrid[b-yg663zdli7] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.doc-navcard[b-yg663zdli7] {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
    transition: border-color .15s, background .15s, transform .15s;
}
.doc-navcard:hover[b-yg663zdli7] { border-color: var(--accent); background: var(--accent-dim); transform: translateY(-2px); }
.doc-navcard .material-icons[b-yg663zdli7] { font-size: 26px; color: var(--accent); }
.doc-navcard .nc-title[b-yg663zdli7] { font-weight: 700; margin-top: 8px; color: #fff; }
.doc-navcard .nc-sub[b-yg663zdli7] { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ---- LAYOUT ---- */
.doc-layout[b-yg663zdli7] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 32px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 40px 80px;
    align-items: start;
}

/* ---- TOC ---- */
.doc-toc[b-yg663zdli7] { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 12px; }
.toc-label[b-yg663zdli7] { font-size: 11px; letter-spacing: .12em; color: var(--muted); font-weight: 700; padding-left: 4px; margin-bottom: 2px; }
.toc-card[b-yg663zdli7] {
    display: block;
    text-decoration: none;
    cursor: pointer;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color .15s, background .15s;
}
.toc-card:hover[b-yg663zdli7] { border-color: #3a3f57; }
.toc-card.active[b-yg663zdli7] { background: var(--accent-dim); border-color: var(--accent); box-shadow: 0 0 0 1px rgba(124,108,255,.25), 0 8px 24px rgba(124,108,255,.12); }
.toc-card-head[b-yg663zdli7] { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.toc-card-head .material-icons[b-yg663zdli7] { font-size: 18px; color: var(--accent); }
.toc-card-sub[b-yg663zdli7] { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* ---- CONTENT ---- */
.doc-content[b-yg663zdli7] { min-width: 0; }
.doc-section[b-yg663zdli7] { scroll-margin-top: 20px; margin-bottom: 44px; }

.sec-head[b-yg663zdli7] { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sec-icon[b-yg663zdli7] {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--accent-dim);
    display: flex; align-items: center; justify-content: center;
}
.sec-icon .material-icons[b-yg663zdli7] { font-size: 24px; color: var(--accent); }
.sec-head h2[b-yg663zdli7] { margin: 0; font-size: 26px; font-weight: 700; color: #fff; }
.sec-desc[b-yg663zdli7] { color: var(--muted); max-width: 760px; margin: 0 0 18px; }

.sub-head[b-yg663zdli7] { display: flex; align-items: center; gap: 10px; margin: 32px 0 10px; }
.sub-head .material-icons[b-yg663zdli7] { color: var(--accent); font-size: 22px; }
.sub-head h3[b-yg663zdli7] { margin: 0; font-size: 17px; font-weight: 700; color: #fff; }

/* ---- cards ---- */
.doc-card[b-yg663zdli7] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    margin: 16px 0;
}
.card-head[b-yg663zdli7] { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.card-head > .material-icons[b-yg663zdli7] {
    font-size: 22px; color: var(--accent);
    background: var(--accent-dim); border-radius: 9px; padding: 8px;
}
.card-title[b-yg663zdli7] { font-weight: 700; color: #fff; font-size: 15px; }
.card-hint[b-yg663zdli7] { font-size: 13px; color: var(--muted); margin-top: 2px; }

.doc-content p[b-yg663zdli7] { color: #c7cbdb; }
.doc-content strong[b-yg663zdli7] { color: #eef0f8; }
.doc-content em[b-yg663zdli7] { color: #d6d9e6; }

/* ---- list ---- */
.doc-list[b-yg663zdli7] { margin: 14px 0 2px; padding: 0; list-style: none; }
.doc-list li[b-yg663zdli7] {
    position: relative; padding: 7px 0 7px 20px;
    color: #c7cbdb; border-bottom: 1px solid rgba(255,255,255,.05);
}
.doc-list li:last-child[b-yg663zdli7] { border-bottom: none; }
.doc-list li[b-yg663zdli7]::before {
    content: ""; position: absolute; left: 3px; top: 15px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* ---- pills & inline code ---- */
.pill[b-yg663zdli7] {
    display: inline-block;
    background: var(--pill-bg);
    color: var(--pill-tx);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 1px 8px;
    font-size: 12.5px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    white-space: nowrap;
}
.doc-content code[b-yg663zdli7] {
    background: var(--pill-bg);
    color: var(--pill-tx);
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 12.5px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
}

/* ---- callouts ---- */
.doc-callout[b-yg663zdli7] {
    display: flex; gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    margin: 16px 0;
    border: 1px solid var(--border);
    color: #c7cbdb;
}
.doc-callout .material-icons[b-yg663zdli7] { font-size: 20px; flex: 0 0 auto; margin-top: 1px; }
.doc-callout.tip[b-yg663zdli7]  { background: rgba(43,122,201,.10); border-color: rgba(43,122,201,.35); }
.doc-callout.tip  .material-icons[b-yg663zdli7] { color: #4aa3ff; }
.doc-callout.idea[b-yg663zdli7] { background: rgba(217,154,19,.09); border-color: rgba(217,154,19,.32); }
.doc-callout.idea .material-icons[b-yg663zdli7] { color: #f0b429; }

/* ---- code block ---- */
.code-block[b-yg663zdli7] {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin: 16px 0;
    background: #0c0e17;
}
.code-head[b-yg663zdli7] {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: #12141f;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
}
.code-head .material-icons[b-yg663zdli7] { font-size: 15px; }
.code-block pre[b-yg663zdli7] { margin: 0; padding: 16px 18px; overflow-x: auto; }
.code-block code[b-yg663zdli7] {
    background: none; color: #d7dbec; padding: 0;
    font-size: 12.5px; line-height: 1.65;
    font-family: "SF Mono", Menlo, Consolas, monospace; white-space: pre;
}

/* ---- metric grid ---- */
.metric-grid[b-yg663zdli7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 14px 0;
}
.metric-card[b-yg663zdli7] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
}
.metric-card .mc-num[b-yg663zdli7] {
    width: 24px; height: 24px; border-radius: 7px;
    background: var(--accent); color: #fff;
    font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
}
.metric-card .mc-title[b-yg663zdli7] { font-weight: 700; color: #fff; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.metric-card .mc-ic[b-yg663zdli7] { font-size: 18px; color: var(--accent); }
.metric-card p[b-yg663zdli7] { font-size: 13px; color: var(--muted); margin: 0; }

/* ---- footer ---- */
.doc-footer[b-yg663zdli7] {
    margin-top: 40px; padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: center; color: var(--muted); font-size: 12.5px;
}

@media (max-width: 900px) {
    .doc-navgrid[b-yg663zdli7] { grid-template-columns: repeat(2, 1fr); }
    .doc-layout[b-yg663zdli7] { grid-template-columns: 1fr; }
    .doc-toc[b-yg663zdli7] { position: static; }
    .metric-grid[b-yg663zdli7] { grid-template-columns: 1fr; }
}
/* /Pages/GameSettings.razor.rz.scp.css */
/* ===== PAGE HEADER ===== */
.gs-page-header[b-ub4cuukdo3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
}

.gs-page-header-left[b-ub4cuukdo3] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gs-page-icon-wrap[b-ub4cuukdo3] {
    width: 44px;
    height: 44px;
    background: var(--color-primary-subtle);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gs-page-icon-wrap .material-icons[b-ub4cuukdo3] {
    font-size: 24px;
    color: var(--color-primary);
}

.gs-page-title[b-ub4cuukdo3] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px;
    line-height: 1.2;
}

.gs-page-sub[b-ub4cuukdo3] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.gs-page-header-right[b-ub4cuukdo3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gs-stat-badge[b-ub4cuukdo3] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 6px 14px;
}

.gs-stat-val[b-ub4cuukdo3] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.gs-stat-lbl[b-ub4cuukdo3] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.gs-add-btn[b-ub4cuukdo3] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--t-fast);
}

.gs-add-btn:hover[b-ub4cuukdo3] { background: #4338ca; }
.gs-add-btn .material-icons[b-ub4cuukdo3] { font-size: 18px; }

/* ===== MAIN CARD ===== */
.game-card[b-ub4cuukdo3] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 16px 24px 24px;
    box-shadow: var(--shadow-sm);
}

/* ===== TOOLBAR (inside card) ===== */
.gs-toolbar[b-ub4cuukdo3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
}

.gs-search-wrap[b-ub4cuukdo3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 400px;
    height: 34px;
    padding: 0 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s;
}

.gs-search-wrap:focus-within[b-ub4cuukdo3] {
    border-color: var(--color-primary);
    background: var(--bg-card);
}

.gs-search-wrap .material-icons[b-ub4cuukdo3] {
    font-size: 17px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.gs-search-wrap input[b-ub4cuukdo3] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-primary);
    width: 100%;
}

.gs-toolbar-right[b-ub4cuukdo3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bulk-delete-btn[b-ub4cuukdo3] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background-color: #fff1f2;
    color: #e11d48;
    border: 1px solid #fda4af;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: fadeInRight-b-ub4cuukdo3 0.2s ease both;
}

@keyframes fadeInRight-b-ub4cuukdo3 {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.bulk-delete-btn:hover[b-ub4cuukdo3] {
    background-color: #ffe4e6;
    border-color: #fb7185;
}

.bulk-delete-btn .material-icons[b-ub4cuukdo3] { font-size: 17px; }

/* ===== TABLE ===== */
.user-table-wrapper[b-ub4cuukdo3] {
    width: 100%;
    overflow-x: auto;
    background: var(--bg-card);
}

.user-table-content[b-ub4cuukdo3] {
    min-width: 900px;
    display: block;
}

.user-table-header[b-ub4cuukdo3] {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-light);
}

.user-table-header .col-cell[b-ub4cuukdo3] {
    min-height: 40px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--bg-subtle);
    text-transform: uppercase;
}

/* Grid layouts — checkbox | game | secret key | created | created by | actions */
.user-grid[b-ub4cuukdo3] {
    display: grid;
    grid-template-columns: 40px 3fr 1.5fr 120px 150px 130px;
    align-items: center;
    width: 100%;
}

.user-grid-2[b-ub4cuukdo3] {
    display: grid;
    grid-template-columns: 3fr 1.5fr 120px 150px 130px;
    align-items: center;
    width: 100%;
}

.user-grid-3[b-ub4cuukdo3] {
    display: grid;
    grid-template-columns: 3fr 1.5fr 120px 160px;
    align-items: center;
    width: 100%;
}

.col-cell[b-ub4cuukdo3] {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    min-height: 68px;
    box-sizing: border-box;
}

.checkbox-cell[b-ub4cuukdo3] { padding: 12px 8px 12px 16px; }

.sortable[b-ub4cuukdo3] { cursor: pointer; gap: 4px; }
.sort-icon[b-ub4cuukdo3] { opacity: 0.3; }

.user-row[b-ub4cuukdo3] {
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
    transition: background 0.12s;
}

.user-row:last-child[b-ub4cuukdo3] { border-bottom: none; }
.user-row:hover[b-ub4cuukdo3] { background: #fafbff; }

/* Game info cell */
.user-info-cell[b-ub4cuukdo3] { gap: 12px; }

.gs-game-icon[b-ub4cuukdo3] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

.gs-game-icon-placeholder[b-ub4cuukdo3] {
    background: var(--color-primary-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

.gs-game-info[b-ub4cuukdo3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gs-game-name[b-ub4cuukdo3] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-game-pkg[b-ub4cuukdo3] {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Roboto Mono', monospace;
}

.gs-plat-list[b-ub4cuukdo3] {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.gs-plat-badge[b-ub4cuukdo3] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: capitalize;
}

.gs-plat-badge .material-icons[b-ub4cuukdo3] { font-size: 12px; }

.gs-plat-badge.android[b-ub4cuukdo3] {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.gs-plat-badge.ios[b-ub4cuukdo3] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

/* Secret key cell */
.secret-key-cell[b-ub4cuukdo3] { }

.gs-secret-wrap[b-ub4cuukdo3] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 5px 8px;
    min-width: 0;
    width: 100%;
}

.gs-secret-text[b-ub4cuukdo3] {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.05em;
}

.gs-secret-text.visible[b-ub4cuukdo3] {
    color: var(--text-primary);
    letter-spacing: 0;
}

.gs-secret-actions[b-ub4cuukdo3] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.gs-icon-btn[b-ub4cuukdo3] {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: #94a3b8;
    transition: var(--t-fast);
}

.gs-icon-btn:hover[b-ub4cuukdo3] {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}

.gs-icon-btn .material-icons[b-ub4cuukdo3] { font-size: 15px; }

/* Date & creator cells */
.gs-date-text[b-ub4cuukdo3] {
    font-size: 13px;
    color: var(--text-secondary);
}

.gs-creator-text[b-ub4cuukdo3] {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Action buttons */
.action-cell[b-ub4cuukdo3] {
    gap: 6px;
    padding-right: 20px;
}

.gs-action-btn[b-ub4cuukdo3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    transition: var(--t-fast);
    white-space: nowrap;
}

.gs-action-btn .material-icons[b-ub4cuukdo3] { font-size: 16px; }
.gs-action-label[b-ub4cuukdo3] { font-size: 12px; font-weight: 500; }

/* Edit: label + icon, blue on hover */
.gs-action-btn.edit[b-ub4cuukdo3] {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}

.gs-action-btn.edit:hover[b-ub4cuukdo3] {
    background: #e0e7ff;
}

/* Delete: icon only, red on hover */
.gs-action-btn.del[b-ub4cuukdo3] {
    width: 30px;
    padding: 0;
    justify-content: center;
    color: #94a3b8;
}

.gs-action-btn.del:hover[b-ub4cuukdo3] {
    color: #e11d48;
    background: #fff1f2;
}

/* Empty state */
.gs-empty-state[b-ub4cuukdo3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 8px;
}

.gs-empty-state .material-icons[b-ub4cuukdo3] {
    font-size: 40px;
    color: #d1d5db;
}

.gs-empty-title[b-ub4cuukdo3] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}

.gs-empty-sub[b-ub4cuukdo3] {
    font-size: 13px;
    color: var(--text-muted);
}

/* ===== PAGINATION OVERRIDES ===== */
.pagination-container[b-ub4cuukdo3] { border-top: 1px solid var(--border-light); }

/* ===== MODAL SIZE VARIANTS ===== */
.modal-sm[b-ub4cuukdo3] { max-width: 450px !important; }

/* ===== SECRET KEY ===== */
.secret-key-cell[b-ub4cuukdo3] { display: flex; align-items: center; }

.secret-wrapper[b-ub4cuukdo3] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-subtle);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.secret-value[b-ub4cuukdo3] {
    font-family: monospace;
    font-size: 13px;
    color: #475569;
    min-width: 110px;
}

.secret-actions[b-ub4cuukdo3] { display: flex; gap: 2px; }

.icon-btn[b-ub4cuukdo3] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    color: #94a3b8;
    transition: color 0.2s;
}

.icon-btn:hover[b-ub4cuukdo3] { color: var(--color-primary); }
.icon-btn .material-icons[b-ub4cuukdo3] { font-size: 16px; }

.copy-toast[b-ub4cuukdo3] {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10000;
    box-shadow: var(--shadow-lg);
}

/* gm-modal styles moved to app.css (global) */

/* /Pages/Login.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   LOGIN — v4  polish pass
   ═══════════════════════════════════════════════ */

/* ── Root canvas ── */
.lgn-root[b-30eovl9gcp] {
    min-height: 100vh;
    background: #07080f;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font);
}

/* ═══════════════════════════════════════════════
   BACKGROUND ORBS
   ═══════════════════════════════════════════════ */
.lgn-orb[b-30eovl9gcp] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

.lgn-orb--1[b-30eovl9gcp] {
    width: 680px; height: 680px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.24) 0%, transparent 68%);
    top: -220px; left: -160px;
    filter: blur(90px);
    animation: lgn-drift-1-b-30eovl9gcp 16s ease-in-out infinite;
}
.lgn-orb--2[b-30eovl9gcp] {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.20) 0%, transparent 68%);
    bottom: -140px; right: -80px;
    filter: blur(80px);
    animation: lgn-drift-2-b-30eovl9gcp 20s ease-in-out infinite;
}
.lgn-orb--3[b-30eovl9gcp] {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(56, 130, 246, 0.14) 0%, transparent 68%);
    top: 35%; right: 22%;
    filter: blur(60px);
    animation: lgn-drift-3-b-30eovl9gcp 25s ease-in-out infinite;
}
.lgn-orb--4[b-30eovl9gcp] {
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 68%);
    bottom: 10%; left: 28%;
    filter: blur(50px);
    animation: lgn-drift-4-b-30eovl9gcp 30s ease-in-out infinite;
}

@keyframes lgn-drift-1-b-30eovl9gcp {
    0%, 100% { transform: translate(  0px,   0px); }
    33%       { transform: translate( 32px, -44px); }
    66%       { transform: translate(-20px,  26px); }
}
@keyframes lgn-drift-2-b-30eovl9gcp {
    0%, 100% { transform: translate(  0px,   0px); }
    40%       { transform: translate(-38px, -30px); }
    75%       { transform: translate( 24px,  32px); }
}
@keyframes lgn-drift-3-b-30eovl9gcp {
    0%, 100% { transform: translate(  0px,   0px); }
    50%       { transform: translate(-26px, -50px); }
}
@keyframes lgn-drift-4-b-30eovl9gcp {
    0%, 100% { transform: translate(  0px,   0px); }
    30%       { transform: translate( 20px, -22px); }
    70%       { transform: translate(-14px,  18px); }
}

/* Dot grid */
.lgn-dots[b-30eovl9gcp] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════ */
.lgn-split[b-30eovl9gcp] {
    flex: 1;
    display: flex;
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────
   LEFT: BRAND PANEL
   ───────────────────────────────────────────── */
.lgn-brand[b-30eovl9gcp] {
    flex: 0 0 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 60px 64px 72px;
}

/* Studio mark — circular logo with glow */
.lgn-brand-mark[b-30eovl9gcp] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 60px;
}

.lgn-brand-logo[b-30eovl9gcp] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow:
        0 0 0 1.5px rgba(255, 255, 255, 0.12),
        0 4px 14px rgba(99, 102, 241, 0.35);
}

.lgn-brand-logo img[b-30eovl9gcp] { width: 100%; height: 100%; object-fit: cover; display: block; }

.lgn-brand-studio[b-30eovl9gcp] {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.50);
    letter-spacing: -0.01em;
}

/* Headline + tagline */
.lgn-brand-body[b-30eovl9gcp] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lgn-brand-headline[b-30eovl9gcp] {
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.045em;
    line-height: 1.14;
}

.lgn-brand-tagline[b-30eovl9gcp] {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.72;
    font-weight: 400;
    max-width: 350px;
    margin: 0;
}

/* Feature list */
.lgn-brand-feats[b-30eovl9gcp] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 14px;
}

.lgn-feat[b-30eovl9gcp] {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.lgn-feat-icon[b-30eovl9gcp] {
    font-size: 17px !important;
    color: #a5b4fc;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.80;
}

.lgn-feat-title[b-30eovl9gcp] {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.lgn-feat-sub[b-30eovl9gcp] {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.27);
    font-weight: 400;
    line-height: 1.5;
    margin-top: 2px;
}

/* ─────────────────────────────────────────────
   SEPARATOR
   ───────────────────────────────────────────── */
.lgn-sep[b-30eovl9gcp] {
    flex: 0 0 1px;
    margin: 56px 0;
    background: linear-gradient(
        180deg,
        transparent      0%,
        rgba(255,255,255,0.065) 18%,
        rgba(255,255,255,0.065) 82%,
        transparent      100%
    );
}

/* ─────────────────────────────────────────────
   RIGHT: AUTH PANEL + GLASS CARD
   ───────────────────────────────────────────── */
.lgn-auth[b-30eovl9gcp] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 44px;
    position: relative;
}

/* Concentric ring texture unique to auth zone */
.lgn-auth[b-30eovl9gcp]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-radial-gradient(
        circle at 50% 50%,
        transparent             0px,
        transparent             44px,
        rgba(255,255,255,0.016) 44px,
        rgba(255,255,255,0.016) 45px
    );
    pointer-events: none;
}

/* Soft purple bloom centered behind card */
.lgn-auth-bloom[b-30eovl9gcp] {
    position: absolute;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle,
        rgba(99, 102, 241, 0.13) 0%,
        rgba(139, 92, 246, 0.07) 40%,
        transparent 68%
    );
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(32px);
    pointer-events: none;
}

/* Glass card */
.lgn-card[b-30eovl9gcp] {
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.042);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.092);
    border-radius: 24px;
    padding: 44px 40px 34px;
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.12),
        0 32px 72px rgba(0, 0, 0, 0.52),
        0 1px 0 rgba(255, 255, 255, 0.060) inset;
    overflow: hidden;
    animation: lgn-rise-b-30eovl9gcp 0.50s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Top-edge shine */
.lgn-card[b-30eovl9gcp]::before {
    content: "";
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.24) 25%,
        rgba(255,255,255,0.24) 75%,
        transparent
    );
}

@keyframes lgn-rise-b-30eovl9gcp {
    from { opacity: 0; transform: translateY(22px) scale(0.975); }
    to   { opacity: 1; transform: translateY(0)     scale(1);     }
}

/* Loading shimmer bar */
.lgn-card-progress[b-30eovl9gcp] {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #818cf8, #c4b5fd, #818cf8, transparent);
    background-size: 300% 100%;
    animation: lgn-shimmer-b-30eovl9gcp 1.4s linear infinite;
    border-radius: 24px 24px 0 0;
}

@keyframes lgn-shimmer-b-30eovl9gcp {
    from { background-position:  100% 0; }
    to   { background-position: -100% 0; }
}

/* Identity row: logo + product/org text */
.lgn-card-identity[b-30eovl9gcp] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
}

.lgn-card-logo[b-30eovl9gcp] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow:
        0 0 0 1.5px rgba(255, 255, 255, 0.14),
        0 0 28px rgba(99, 102, 241, 0.48),
        0 6px 20px rgba(0, 0, 0, 0.38);
}

.lgn-card-logo img[b-30eovl9gcp] { width: 100%; height: 100%; object-fit: cover; display: block; }

.lgn-card-identity-text[b-30eovl9gcp] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lgn-card-product[b-30eovl9gcp] {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.lgn-card-org[b-30eovl9gcp] {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.30);
    letter-spacing: -0.01em;
}

/* Heading */
.lgn-card-head[b-30eovl9gcp] { margin-bottom: 24px; }

.lgn-card-title[b-30eovl9gcp] {
    font-size: 27px;
    font-weight: 800;
    color: #f5f6fa;
    letter-spacing: -0.04em;
    line-height: 1.18;
    margin: 0 0 9px;
}

.lgn-card-sub[b-30eovl9gcp] {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.34);
    line-height: 1.68;
    margin: 0;
    font-weight: 400;
}

/* Divider */
.lgn-divider[b-30eovl9gcp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.lgn-divider-line[b-30eovl9gcp] {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.075);
}

.lgn-divider-label[b-30eovl9gcp] {
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.22);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* ── Buttons ── */
.lgn-card-btns[b-30eovl9gcp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.lgn-btn[b-30eovl9gcp] {
    width: 100%;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    border: 1px solid transparent;
    outline: none;
    letter-spacing: -0.01em;
    transition: box-shadow 0.15s ease, background 0.15s ease, transform 0.10s ease;
}

.lgn-btn:disabled[b-30eovl9gcp]                  { opacity: 0.50; cursor: not-allowed; transform: none !important; }
.lgn-btn:active:not(:disabled)[b-30eovl9gcp]     { transform: translateY(1px); }

.lgn-btn-icon[b-30eovl9gcp] { width: 19px; height: 19px; flex-shrink: 0; }

/* Google */
.lgn-btn--google[b-30eovl9gcp] {
    background: rgba(255, 255, 255, 0.92);
    color: #18181f;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}

.lgn-btn--google:hover:not(:disabled)[b-30eovl9gcp] {
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(0,0,0,0.36);
}

/* GitHub */
.lgn-btn--github[b-30eovl9gcp] {
    background: rgba(13, 17, 23, 0.88);
    color: #eaf0f8;
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 2px 8px rgba(0,0,0,0.40);
}

.lgn-btn--github:hover:not(:disabled)[b-30eovl9gcp] {
    background: rgba(22, 27, 34, 0.96);
    box-shadow: 0 4px 18px rgba(0,0,0,0.55);
}

/* Spinner */
.lgn-spinner[b-30eovl9gcp] {
    width: 17px; height: 17px;
    border-radius: 50%;
    border: 2.5px solid rgba(234, 240, 248, 0.18);
    border-top-color: rgba(234, 240, 248, 0.82);
    flex-shrink: 0;
    animation: lgn-spin-b-30eovl9gcp 0.65s linear infinite;
}

.lgn-spinner--dark[b-30eovl9gcp] {
    border-color: rgba(24, 24, 31, 0.12);
    border-top-color: rgba(24, 24, 31, 0.72);
}

@keyframes lgn-spin-b-30eovl9gcp { to { transform: rotate(360deg); } }

/* Error */
.lgn-error[b-30eovl9gcp] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 13px;
    background: rgba(239, 68, 68, 0.09);
    border: 1px solid rgba(239, 68, 68, 0.20);
    border-radius: 9px;
    color: #fca5a5;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 16px;
}

.lgn-error .material-icons[b-30eovl9gcp] { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* Contact */
.lgn-contact[b-30eovl9gcp] {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.25);
    margin: 0;
    text-align: center;
}

.lgn-contact a[b-30eovl9gcp] {
    color: #a5b4fc;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.12s ease;
}

.lgn-contact a:hover[b-30eovl9gcp] { color: #c7d2fe; text-decoration: underline; }

/* ═══════════════════════════════════════════════
   PAGE FOOTER
   ═══════════════════════════════════════════════ */
.lgn-footer[b-30eovl9gcp] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 14px 24px 22px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.13);
    letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════════════
   NAVIGATION OVERLAY (post-login transition)
   ═══════════════════════════════════════════════ */
.lgn-nav-overlay[b-30eovl9gcp] {
    position: fixed;
    inset: 0;
    background: #07080f;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    animation: lgn-overlay-in-b-30eovl9gcp 0.2s ease-out;
}

@keyframes lgn-overlay-in-b-30eovl9gcp {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lgn-nav-logo[b-30eovl9gcp] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.14), 0 0 40px rgba(99,102,241,0.52);
    animation: lgn-nav-pulse-b-30eovl9gcp 1.8s ease-in-out infinite;
}

.lgn-nav-logo img[b-30eovl9gcp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@keyframes lgn-nav-pulse-b-30eovl9gcp {
    0%, 100% { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.12), 0 0 30px rgba(99,102,241,0.38); }
    50%       { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.22), 0 0 60px rgba(99,102,241,0.65); }
}

.lgn-nav-dots[b-30eovl9gcp] {
    display: flex;
    gap: 8px;
}

.lgn-nav-dots span[b-30eovl9gcp] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(165, 180, 252, 0.55);
    animation: lgn-dot-bounce-b-30eovl9gcp 1.2s ease-in-out infinite;
}

.lgn-nav-dots span:nth-child(2)[b-30eovl9gcp] { animation-delay: 0.2s; }
.lgn-nav-dots span:nth-child(3)[b-30eovl9gcp] { animation-delay: 0.4s; }

@keyframes lgn-dot-bounce-b-30eovl9gcp {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.35; }
    40%            { transform: scale(1);   opacity: 1; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 860px) {
    .lgn-brand[b-30eovl9gcp], .lgn-sep[b-30eovl9gcp] { display: none; }
    .lgn-auth[b-30eovl9gcp] { padding: 32px 20px; }
    .lgn-card[b-30eovl9gcp] { max-width: 100%; padding: 36px 28px 28px; }
    .lgn-auth[b-30eovl9gcp]::before { display: none; }
}
/* /Pages/Operations/Bullseye.razor.rz.scp.css */
/* ===== Page Header ===== */
.bs-page-header[b-up1k7gki86] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
    gap: 16px;
}

.bs-page-header-left[b-up1k7gki86] { display: flex; align-items: center; gap: 14px; }

.bs-page-icon-wrap[b-up1k7gki86] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bs-page-icon-wrap .material-icons[b-up1k7gki86] { color: #fff; font-size: 22px; }
.bs-page-title[b-up1k7gki86] { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0; }
.bs-page-sub[b-up1k7gki86]   { font-size: 13px; color: var(--text-secondary); margin: 2px 0 0; }
.bs-page-header-right[b-up1k7gki86] { display: flex; align-items: center; gap: 12px; }

.bs-stat-badge[b-up1k7gki86] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 6px 16px;
}

.bs-stat-val[b-up1k7gki86] { font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.bs-stat-lbl[b-up1k7gki86] { font-size: 11px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }

/* ===== Period Card ===== */
.bs-period-card[b-up1k7gki86] {
    margin: 18px 24px 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Header row */
.bs-period-header[b-up1k7gki86] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
}

.bs-period-header-left[b-up1k7gki86] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
}

.bs-period-header-left .material-icons[b-up1k7gki86] { font-size: 17px; color: #f97316; }
.bs-period-header-title[b-up1k7gki86] { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

.bs-period-key[b-up1k7gki86] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 3px 10px;
    letter-spacing: 0.03em;
}

/* Divider */
.bs-period-divider[b-up1k7gki86] {
    height: 1px;
    background: var(--border-light);
}

/* Period navigator */
.bs-period-nav[b-up1k7gki86] {
    display: flex;
    align-items: center;
    padding: 16px 12px;
    gap: 8px;
    min-height: 96px;
}

.bs-nav-arrow[b-up1k7gki86] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    padding: 0;
    align-self: center;
}

.bs-nav-arrow .material-icons[b-up1k7gki86] { font-size: 22px; }
.bs-nav-arrow:hover:not(:disabled)[b-up1k7gki86] { background: #fff7ed; border-color: #f97316; color: #f97316; }
.bs-nav-arrow:disabled[b-up1k7gki86] { opacity: 0.25; cursor: not-allowed; }

/* Center content */
.bs-period-content[b-up1k7gki86] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px;
    min-width: 0;
}

.bs-period-name[b-up1k7gki86] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.bs-period-range[b-up1k7gki86] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Progress bar */
.bs-period-progress-row[b-up1k7gki86] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.bs-progress-track[b-up1k7gki86] {
    flex: 1;
    height: 6px;
    background: #ffedd5;
    border-radius: 99px;
    overflow: hidden;
    max-width: 260px;
}

.bs-progress-fill[b-up1k7gki86] {
    height: 100%;
    background: linear-gradient(90deg, #fb923c, #f97316);
    border-radius: 99px;
    transition: width 0.4s ease;
}

.bs-progress-info[b-up1k7gki86] {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 500;
}

/* Reset countdown row */
.bs-reset-row[b-up1k7gki86] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-secondary);
}

.bs-reset-row .material-icons[b-up1k7gki86] {
    font-size: 15px;
    color: #f97316;
    animation: bs-spin-b-up1k7gki86 3s linear infinite;
}

@keyframes bs-spin-b-up1k7gki86 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.bs-reset-row strong[b-up1k7gki86] { color: #ea6c00; font-weight: 700; }
.bs-reset-date[b-up1k7gki86] { color: var(--text-muted); font-size: 12px; }

/* Historical tag */
.bs-historical-tag[b-up1k7gki86] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 20px;
    padding: 3px 10px;
    font-weight: 500;
    width: fit-content;
}

.bs-historical-tag .material-icons[b-up1k7gki86] { font-size: 14px; }

/* ===== Loading / Empty ===== */
.bs-loading[b-up1k7gki86] { padding: 16px 24px; }

.bs-empty-state[b-up1k7gki86] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 60px 24px;
    color: var(--text-muted);
    font-size: 14px;
}

.bs-empty-state .material-icons[b-up1k7gki86] { font-size: 40px; opacity: 0.4; }

/* ===== Table ===== */
.bs-table-card[b-up1k7gki86] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 18px 24px 24px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.bs-table-scroll[b-up1k7gki86] { width: 100%; overflow-x: auto; background: var(--bg-card); flex: 1; }
.bs-table-inner[b-up1k7gki86]  { min-width: 760px; }

.bs-grid[b-up1k7gki86] {
    display: grid;
    grid-template-columns: 80px 2fr 180px 110px 130px 150px;
    align-items: center;
    width: 100%;
}

.bs-grid-head[b-up1k7gki86] { background: var(--bg-subtle); border-bottom: 1px solid var(--border-light); }

.bs-cell[b-up1k7gki86] {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    min-height: 60px;
    box-sizing: border-box;
    font-size: 14px;
    color: var(--text-primary);
}

.bs-grid-head .bs-cell[b-up1k7gki86] {
    min-height: 40px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.bs-row[b-up1k7gki86] { border-bottom: 1px solid var(--border-light); background: var(--bg-card); transition: background 0.12s; }
.bs-row:last-child[b-up1k7gki86] { border-bottom: none; }
.bs-row:hover[b-up1k7gki86] { background: #fffbf5; }

.bs-medal[b-up1k7gki86]    { font-size: 22px; line-height: 1; }
.bs-rank-num[b-up1k7gki86] { font-size: 14px; font-weight: 600; color: var(--text-secondary); }

.bs-player-info[b-up1k7gki86] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bs-player-name[b-up1k7gki86] { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-player-id[b-up1k7gki86]   { font-size: 11px; color: var(--text-muted); font-family: 'SFMono-Regular', Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bs-country-cell[b-up1k7gki86] { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.bs-country-cell img[b-up1k7gki86] { border-radius: 1px; flex-shrink: 0; }

.bs-star-val[b-up1k7gki86]  { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.bs-star-icon[b-up1k7gki86] { font-size: 18px; color: #f59e0b; }

.bs-badge[b-up1k7gki86]       { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.bs-badge--gold[b-up1k7gki86] { background: #fef3c7; color: #b45309; }
.bs-badge--gold .material-icons[b-up1k7gki86] { font-size: 14px; }

.bs-date-cell[b-up1k7gki86] { display: flex; flex-direction: column; gap: 2px; }
.bs-date-text[b-up1k7gki86] { font-size: 13px; color: var(--text-secondary); }
.bs-time-text[b-up1k7gki86] { font-size: 11px; color: var(--text-muted); }

.bs-empty[b-up1k7gki86] { font-size: 13px; color: var(--text-muted); }

/* ===== Search bar ===== */
.bs-search-bar[b-up1k7gki86] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.bs-search-icon[b-up1k7gki86] { font-size: 18px; color: var(--text-muted); flex-shrink: 0; }

.bs-search-input[b-up1k7gki86] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}

.bs-search-input[b-up1k7gki86]::placeholder { color: var(--text-muted); }

.bs-search-clear[b-up1k7gki86] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--bg-subtle);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.bs-search-clear .material-icons[b-up1k7gki86] { font-size: 14px; }
.bs-search-clear:hover[b-up1k7gki86] { background: #fff7ed; color: #f97316; }

.bs-search-count[b-up1k7gki86] {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 500;
    flex-shrink: 0;
}

.bs-search-empty[b-up1k7gki86] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 32px 24px;
    color: var(--text-muted);
    font-size: 13px;
}

.bs-search-empty .material-icons[b-up1k7gki86] { font-size: 20px; opacity: 0.5; }

/* ── Pagination footer ── */
.bs-footer[b-up1k7gki86] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Pages/Operations/JsonTreeNode.razor.rz.scp.css */
/* ── JSON Tree Node ────────────────────────────────────────────────────
   VS Code-style dark theme, recursive Blazor component
   ──────────────────────────────────────────────────────────────────── */

.jtv-line[b-99l3hyo78t] {
    display: flex;
    align-items: center;
    min-height: 22px;
    line-height: 22px;
    font-family: 'Roboto Mono', monospace;
    font-size: 12.5px;
    white-space: nowrap;
    border-radius: 3px;
    transition: background 0.08s;
    user-select: text;
}

    .jtv-line:hover[b-99l3hyo78t] {
        background: rgba(255, 255, 255, 0.04);
    }

/* ── Collapse toggle arrow ─────────────────────────────────────────── */
.jtv-arrow[b-99l3hyo78t] {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    color: #475569;
    padding: 0;
    flex-shrink: 0;
    margin-right: 2px;
    border-radius: 3px;
    transition: color 0.12s, background 0.12s;
}

    .jtv-arrow .material-icons[b-99l3hyo78t] {
        font-size: 16px;
        display: block;
        transition: transform 0.15s cubic-bezier(.4, 0, .2, 1);
    }

    .jtv-arrow--open .material-icons[b-99l3hyo78t] {
        transform: rotate(90deg);
    }

    .jtv-arrow:hover[b-99l3hyo78t] {
        color: #94a3b8;
        background: rgba(255, 255, 255, 0.06);
    }

/* spacer takes same width as arrow so primitives/closing braces align */
.jtv-spc[b-99l3hyo78t] {
    width: 20px;
    flex-shrink: 0;
}

/* ── Token colors ──────────────────────────────────────────────────── */
.jtv-key[b-99l3hyo78t]     { color: #7dd3fc; } /* sky-300   — property names     */
.jtv-brace[b-99l3hyo78t]   { color: #cbd5e1; } /* slate-300 — { }                */
.jtv-bracket[b-99l3hyo78t] { color: #cbd5e1; } /* slate-300 — [ ]                */
.jtv-punct[b-99l3hyo78t]   { color: #475569; } /* slate-600 — : ,                */
.jtv-str[b-99l3hyo78t]     { color: #86efac; } /* green-300 — string values      */
.jtv-num[b-99l3hyo78t]     { color: #fb923c; } /* orange-400 — number values     */
.jtv-bool[b-99l3hyo78t]    { color: #a78bfa; } /* violet-400 — true / false      */
.jtv-null[b-99l3hyo78t]    { color: #64748b; font-style: italic; } /* slate-500 */
.jtv-other[b-99l3hyo78t]   { color: #e2e8f0; }

/* ── Editable leaf ─────────────────────────────────────────────────── */
.jtv-line--leaf[b-99l3hyo78t] {
    cursor: default;
    border-radius: 3px;
}

.jtv-edit-hint[b-99l3hyo78t] {
    font-size: 12px !important;
    margin-left: 6px;
    color: #334155;
    opacity: 0;
    transition: opacity 0.12s;
    flex-shrink: 0;
}

.jtv-line--leaf:hover[b-99l3hyo78t] {
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

    .jtv-line--leaf:hover .jtv-edit-hint[b-99l3hyo78t] {
        opacity: 1;
    }

.jtv-line--editing[b-99l3hyo78t] {
    background: rgba(125, 211, 252, 0.06) !important;
}

/* Inline edit input — blends with tree, styled per value type */
.jtv-edit-input[b-99l3hyo78t] {
    border: none;
    border-bottom: 1.5px solid #334155;
    border-radius: 2px 2px 0 0;
    background: rgba(255, 255, 255, 0.07);
    font-family: 'Roboto Mono', monospace;
    font-size: 12.5px;
    padding: 1px 5px 0;
    outline: none;
    min-width: 40px;
    width: 200px;
    transition: border-color 0.15s, background 0.15s;
    /* color is inherited from .jtv-str / .jtv-num etc. */
}

    .jtv-edit-input:focus[b-99l3hyo78t] {
        border-bottom-color: #7dd3fc;
        background: rgba(255, 255, 255, 0.1);
    }

    /* error state */
    .jtv-edit-input--error[b-99l3hyo78t] {
        border-bottom-color: #f87171 !important;
        background: rgba(248, 113, 113, 0.08) !important;
    }

.jtv-edit-err[b-99l3hyo78t] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    font-family: var(--font, sans-serif);
    font-size: 11px;
    font-weight: 500;
    color: #f87171;
    white-space: nowrap;
    flex-shrink: 0;
}

    .jtv-edit-err .material-icons[b-99l3hyo78t] {
        font-size: 13px;
    }

/* Boolean mini-toggle indicator */
.jtv-bool-toggle[b-99l3hyo78t] {
    display: inline-block;
    width: 28px;
    height: 14px;
    border-radius: 7px;
    background: #374151;
    border: 1px solid #4b5563;
    margin-left: 7px;
    position: relative;
    vertical-align: middle;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
    cursor: pointer;
}

    .jtv-bool-toggle[b-99l3hyo78t]::after {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #6b7280;
        transition: transform 0.2s, background 0.2s;
    }

    .jtv-bool-toggle--on[b-99l3hyo78t] {
        background: rgba(167, 139, 250, 0.2);
        border-color: #a78bfa;
    }

        .jtv-bool-toggle--on[b-99l3hyo78t]::after {
            transform: translateX(14px);
            background: #a78bfa;
        }

/* ── Collapsed hint badge ──────────────────────────────────────────── */
.jtv-badge[b-99l3hyo78t] {
    display: inline-flex;
    align-items: center;
    background: rgba(56, 114, 207, 0.12);
    border: 1px solid rgba(56, 114, 207, 0.25);
    border-radius: 4px;
    color: #60a5fa;
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    padding: 0 6px;
    height: 17px;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}

    .jtv-badge:hover[b-99l3hyo78t] {
        background: rgba(56, 114, 207, 0.22);
        border-color: rgba(56, 114, 207, 0.5);
        color: #93c5fd;
    }
/* /Pages/Operations/Leaderboard.razor.rz.scp.css */
/* ===== Page Header ===== */
.lb-page-header[b-sia77swgyn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
    gap: 16px;
}

.lb-page-header-left[b-sia77swgyn] { display: flex; align-items: center; gap: 14px; }

.lb-page-icon-wrap[b-sia77swgyn] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #7B61FF 0%, #4f46e5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lb-page-icon-wrap .material-icons[b-sia77swgyn] { color: #fff; font-size: 22px; }
.lb-page-title[b-sia77swgyn] { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0; }
.lb-page-sub[b-sia77swgyn]   { font-size: 13px; color: var(--text-secondary); margin: 2px 0 0; }
.lb-page-header-right[b-sia77swgyn] { display: flex; align-items: center; gap: 12px; }

.lb-stat-badge[b-sia77swgyn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 6px 16px;
}

.lb-stat-val[b-sia77swgyn] { font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.lb-stat-lbl[b-sia77swgyn] { font-size: 11px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }

/* ===== Period Card ===== */
.lb-period-card[b-sia77swgyn] {
    margin: 18px 24px 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Tab row */
.lb-period-tabs[b-sia77swgyn] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
}

.lb-period-tab-group[b-sia77swgyn] {
    display: flex;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.lb-period-tab[b-sia77swgyn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.lb-period-tab .material-icons[b-sia77swgyn] { font-size: 15px; }
.lb-period-tab:hover[b-sia77swgyn] { background: rgba(255,255,255,0.7); color: var(--text-primary); }

.lb-period-tab--active[b-sia77swgyn] {
    background: #fff;
    color: #4f46e5;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(79,70,229,.14), 0 0 0 1px rgba(79,70,229,.08);
}

.lb-period-key[b-sia77swgyn] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 3px 10px;
    letter-spacing: 0.03em;
}

/* Divider */
.lb-period-divider[b-sia77swgyn] {
    height: 1px;
    background: var(--border-light);
    margin: 0;
}

/* Period navigator: ← content → */
.lb-period-nav[b-sia77swgyn] {
    display: flex;
    align-items: center;
    padding: 16px 12px;
    gap: 8px;
    min-height: 96px;
}

.lb-nav-arrow[b-sia77swgyn] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    padding: 0;
    align-self: center;
}

.lb-nav-arrow .material-icons[b-sia77swgyn] { font-size: 22px; }
.lb-nav-arrow:hover:not(:disabled)[b-sia77swgyn] { background: #ede9fe; border-color: #4f46e5; color: #4f46e5; }
.lb-nav-arrow:disabled[b-sia77swgyn] { opacity: 0.25; cursor: not-allowed; }

/* Center content */
.lb-period-content[b-sia77swgyn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px;
    min-width: 0;
}

.lb-period-name[b-sia77swgyn] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.lb-period-range[b-sia77swgyn] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Progress bar */
.lb-period-progress-row[b-sia77swgyn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.lb-progress-track[b-sia77swgyn] {
    flex: 1;
    height: 6px;
    background: #e8e5ff;
    border-radius: 99px;
    overflow: hidden;
    max-width: 260px;
}

.lb-progress-fill[b-sia77swgyn] {
    height: 100%;
    background: linear-gradient(90deg, #7B61FF, #4f46e5);
    border-radius: 99px;
    transition: width 0.4s ease;
}

.lb-progress-info[b-sia77swgyn] {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 500;
}

/* Reset countdown row */
.lb-reset-row[b-sia77swgyn] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-secondary);
}

.lb-reset-row .material-icons[b-sia77swgyn] {
    font-size: 15px;
    color: #4f46e5;
    animation: lb-spin-b-sia77swgyn 3s linear infinite;
}

@keyframes lb-spin-b-sia77swgyn {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.lb-reset-row strong[b-sia77swgyn] { color: #4f46e5; font-weight: 700; }
.lb-reset-date[b-sia77swgyn] { color: var(--text-muted); font-size: 12px; }

/* Historical tag */
.lb-historical-tag[b-sia77swgyn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 20px;
    padding: 3px 10px;
    font-weight: 500;
    width: fit-content;
}

.lb-historical-tag .material-icons[b-sia77swgyn] { font-size: 14px; }

/* Global mode body */
.lb-global-body[b-sia77swgyn] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
}

.lb-global-icon[b-sia77swgyn] {
    font-size: 32px;
    color: #6366f1;
    opacity: 0.6;
}

.lb-global-title[b-sia77swgyn] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.lb-global-sub[b-sia77swgyn] {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ===== Loading / Empty ===== */
.lb-loading[b-sia77swgyn] { padding: 16px 24px; }

.lb-empty-state[b-sia77swgyn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 60px 24px;
    color: var(--text-muted);
    font-size: 14px;
}

.lb-empty-state .material-icons[b-sia77swgyn] { font-size: 40px; opacity: 0.4; }

/* ===== Search bar ===== */
.lb-search-bar[b-sia77swgyn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.lb-search-icon[b-sia77swgyn] { font-size: 18px; color: var(--text-muted); flex-shrink: 0; }

.lb-search-input[b-sia77swgyn] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}

.lb-search-input[b-sia77swgyn]::placeholder { color: var(--text-muted); }

.lb-search-clear[b-sia77swgyn] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--bg-subtle);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.lb-search-clear .material-icons[b-sia77swgyn] { font-size: 14px; }
.lb-search-clear:hover[b-sia77swgyn] { background: #e0e7ff; color: #4f46e5; }

.lb-search-count[b-sia77swgyn] {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 500;
    flex-shrink: 0;
}

.lb-search-empty[b-sia77swgyn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 32px 24px;
    color: var(--text-muted);
    font-size: 13px;
}

.lb-search-empty .material-icons[b-sia77swgyn] { font-size: 20px; opacity: 0.5; }

/* ===== Table ===== */
.lb-table-card[b-sia77swgyn] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 18px 24px 24px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.lb-table-scroll[b-sia77swgyn] { width: 100%; overflow-x: auto; background: var(--bg-card); flex: 1; }
.lb-table-inner[b-sia77swgyn]  { min-width: 760px; }

.lb-grid[b-sia77swgyn] {
    display: grid;
    grid-template-columns: 80px 2fr 180px 110px 130px 150px;
    align-items: center;
    width: 100%;
}

.lb-grid-head[b-sia77swgyn] { background: var(--bg-subtle); border-bottom: 1px solid var(--border-light); }

.lb-cell[b-sia77swgyn] {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    min-height: 60px;
    box-sizing: border-box;
    font-size: 14px;
    color: var(--text-primary);
}

.lb-grid-head .lb-cell[b-sia77swgyn] {
    min-height: 40px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.lb-row[b-sia77swgyn] { border-bottom: 1px solid var(--border-light); background: var(--bg-card); transition: background 0.12s; }
.lb-row:last-child[b-sia77swgyn] { border-bottom: none; }
.lb-row:hover[b-sia77swgyn] { background: #fafbff; }

.lb-medal[b-sia77swgyn]    { font-size: 22px; line-height: 1; }
.lb-rank-num[b-sia77swgyn] { font-size: 14px; font-weight: 600; color: var(--text-secondary); }

.lb-player-info[b-sia77swgyn] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-player-name[b-sia77swgyn] { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-player-id[b-sia77swgyn]   { font-size: 11px; color: var(--text-muted); font-family: 'SFMono-Regular', Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lb-country-cell[b-sia77swgyn] { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.lb-country-cell img[b-sia77swgyn] { border-radius: 1px; flex-shrink: 0; }

.lb-star-val[b-sia77swgyn]  { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.lb-star-icon[b-sia77swgyn] { font-size: 18px; color: #f59e0b; }

.lb-badge[b-sia77swgyn]       { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.lb-badge--gold[b-sia77swgyn] { background: #fef3c7; color: #b45309; }
.lb-badge--gold .material-icons[b-sia77swgyn] { font-size: 14px; }

.lb-date-cell[b-sia77swgyn] { display: flex; flex-direction: column; gap: 2px; }
.lb-date-text[b-sia77swgyn] { font-size: 13px; color: var(--text-secondary); }
.lb-time-text[b-sia77swgyn] { font-size: 11px; color: var(--text-muted); }

.lb-empty[b-sia77swgyn] { font-size: 13px; color: var(--text-muted); }

/* ── Pagination footer ── */
.lb-footer[b-sia77swgyn] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Pages/Operations/UserExplorer.razor.rz.scp.css */
/* ── Page Header (UserManagement pattern) ────────────────────────────── */
.ue-page-header[b-9rio42dfli] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
}

.ue-page-header-left[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ue-page-icon-wrap[b-9rio42dfli] {
    width: 44px;
    height: 44px;
    background: #ede9fe;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ue-page-icon-wrap .material-icons[b-9rio42dfli] {
        font-size: 24px;
        color: var(--color-primary);
    }

.ue-page-title[b-9rio42dfli] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px;
    line-height: 1.2;
}

.ue-page-sub[b-9rio42dfli] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.ue-page-header-right[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ue-stat-badge[b-9rio42dfli] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 6px 14px;
}

.ue-stat-val[b-9rio42dfli] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.ue-stat-lbl[b-9rio42dfli] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ── Search Card ──────────────────────────────────────────────────────── */
.ue-search-card[b-9rio42dfli] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    margin: 16px 24px 0;
}

.ue-search-row[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ue-search-icon[b-9rio42dfli] {
    color: #9ca3af;
    font-size: 20px;
    flex-shrink: 0;
}

.ue-search-input[b-9rio42dfli] {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: 14px;
    color: var(--text-primary);
    background: transparent;
    min-width: 0;
}

    .ue-search-input[b-9rio42dfli]::placeholder {
        color: var(--text-placeholder);
    }

.ue-search-clear[b-9rio42dfli] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
}

    .ue-search-clear:hover[b-9rio42dfli] {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .ue-search-clear .material-icons[b-9rio42dfli] {
        font-size: 18px;
    }

.ue-search-btn[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

    .ue-search-btn:hover:not(:disabled)[b-9rio42dfli] {
        opacity: 0.88;
    }

    .ue-search-btn:disabled[b-9rio42dfli] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .ue-search-btn .material-icons[b-9rio42dfli] {
        font-size: 17px;
    }

.ue-search-meta[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    font-size: 13px;
    color: var(--text-muted);
}

.ue-meta-icon[b-9rio42dfli] {
    font-size: 15px;
    color: var(--text-placeholder);
}

.ue-list-cap-note[b-9rio42dfli] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    padding: 2px 8px;
    background: #fef9c3;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* ── Sort Row ─────────────────────────────────────────────────────────── */
.ue-sort-row[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 36px 24px 0;
}

.ue-sort-label[b-9rio42dfli] {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 3px;
}

.ue-sort-btn[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-card);
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

    .ue-sort-btn:hover[b-9rio42dfli] {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .ue-sort-btn--active[b-9rio42dfli] {
        background: #eef2ff;
        border-color: var(--color-primary);
        color: var(--color-primary);
        font-weight: 500;
    }

.ue-sort-dir[b-9rio42dfli] {
    font-size: 14px;
}

/* ── Table Card ──────────────────────────────────────────────────────── */
.ue-table-card[b-9rio42dfli] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 18px 24px 24px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.ue-table-scroll[b-9rio42dfli] {
    width: 100%;
    overflow-x: auto;
    background: var(--bg-card);
    flex: 1;
}

.ue-table-inner[b-9rio42dfli] {
    min-width: 960px;
}

/* Grid: name | country | platform | version | first seen | last active */
.ue-grid[b-9rio42dfli] {
    display: grid;
    grid-template-columns: 2.4fr 170px 130px 110px 150px 150px;
    align-items: center;
    width: 100%;
}

.ue-grid-head[b-9rio42dfli] {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-light);
}

.ue-cell[b-9rio42dfli] {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    min-height: 64px;
    box-sizing: border-box;
    font-size: 14px;
    color: var(--text-primary);
}

.ue-grid-head .ue-cell[b-9rio42dfli] {
    min-height: 40px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.ue-row[b-9rio42dfli] {
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
    transition: background 0.12s;
}

.ue-row:last-child[b-9rio42dfli] { border-bottom: none; }
.ue-row:hover[b-9rio42dfli] { background: #fafbff; }

.ue-row--clickable[b-9rio42dfli] {
    cursor: pointer;
}

.ue-row--clickable:hover[b-9rio42dfli] {
    background: #f5f3ff;
}

.ue-row--clickable:hover .ue-player-name[b-9rio42dfli] {
    color: var(--color-primary);
}

/* ── Date Cell ───────────────────────────────────────────────────────── */
.ue-date-cell[b-9rio42dfli] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.um-date-text[b-9rio42dfli] {
    font-size: 13px;
    color: var(--text-secondary);
}

.um-time-text[b-9rio42dfli] {
    font-size: 11px;
    color: var(--text-muted);
}

/* ── Player Cell ─────────────────────────────────────────────────────── */
.ue-player-info[b-9rio42dfli] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ue-player-name-row[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.ue-player-name[b-9rio42dfli] {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.ue-player-id[b-9rio42dfli] {
    font-size: 11px;
    color: var(--text-placeholder);
    font-family: 'Roboto Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* ── Badges ──────────────────────────────────────────────────────────── */
.ue-badge[b-9rio42dfli] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
}

.ue-badge--country[b-9rio42dfli] {
    background: #eff6ff;
    color: #1d4ed8;
}

.ue-badge--version[b-9rio42dfli] {
    background: #f0fdf4;
    color: #15803d;
}

.ue-badge--operator[b-9rio42dfli] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    font-size: 11px;
    padding: 1px 7px;
}

.ue-badge--reset[b-9rio42dfli] {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    font-size: 11px;
    padding: 1px 7px;
}

.ue-badge--banned[b-9rio42dfli] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    font-size: 11px;
    padding: 1px 7px;
}

/* ── Platform ────────────────────────────────────────────────────────── */
.ue-platform[b-9rio42dfli] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.ue-platform-icon[b-9rio42dfli] {
    font-size: 15px;
}

.ue-platform--ios[b-9rio42dfli] {
    background: #f1f5f9;
    color: #334155;
}

.ue-platform--android[b-9rio42dfli] {
    background: #ecfdf5;
    color: #065f46;
}

.ue-platform--other[b-9rio42dfli] {
    background: #faf5ff;
    color: #6d28d9;
}

/* ── Empty / Loading ─────────────────────────────────────────────────── */
.ue-empty[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin: 16px 24px 24px;
}

    .ue-empty .material-icons[b-9rio42dfli] {
        font-size: 28px;
        color: var(--text-placeholder);
    }

.ue-loading[b-9rio42dfli] {
    margin: 16px 24px 24px;
}

.ue-empty-val[b-9rio42dfli] {
    color: var(--text-placeholder);
}

/* ── Modal Footer danger actions ─────────────────────────────────────── */
.ue-modal-footer-danger[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
}

.ue-modal-footer-right[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ue-modal-action-btn[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    background: transparent;
}

    .ue-modal-action-btn .material-icons[b-9rio42dfli] {
        font-size: 15px;
    }

    .ue-modal-action-btn:disabled[b-9rio42dfli] {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }

.ue-modal-action-btn--reset[b-9rio42dfli] {
    border: 1px solid #fde68a;
    color: #b45309;
}
    .ue-modal-action-btn--reset:hover[b-9rio42dfli] {
        background: #fef3c7;
        border-color: #f59e0b;
    }

.ue-modal-action-btn--ban[b-9rio42dfli] {
    border: 1px solid #d1d5db;
    color: #4b5563;
}
    .ue-modal-action-btn--ban:hover[b-9rio42dfli] {
        background: #f3f4f6;
        border-color: #9ca3af;
        color: #111827;
    }

.ue-modal-action-btn--delete[b-9rio42dfli] {
    border: 1px solid #fca5a5;
    color: #dc2626;
}
    .ue-modal-action-btn--delete:hover[b-9rio42dfli] {
        background: #fef2f2;
        border-color: #f87171;
    }

/* ── Modal animations ────────────────────────────────────────────────── */
@keyframes ue-overlay-in-b-9rio42dfli {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ue-overlay-out-b-9rio42dfli {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes ue-modal-in-b-9rio42dfli {
    from { opacity: 0; transform: scale(0.94) translateY(10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes ue-modal-out-b-9rio42dfli {
    from { opacity: 1; transform: scale(1)    translateY(0); }
    to   { opacity: 0; transform: scale(0.94) translateY(10px); }
}

/* ── Edit Modal ──────────────────────────────────────────────────────── */
.ue-modal-overlay[b-9rio42dfli] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: ue-overlay-in-b-9rio42dfli 0.18s ease both;
}

.ue-modal-overlay--out[b-9rio42dfli] {
    animation: ue-overlay-out-b-9rio42dfli 0.18s ease forwards;
}

.ue-modal[b-9rio42dfli] {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    width: 100%;
    max-width: 680px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ue-modal-in-b-9rio42dfli 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.ue-modal--out[b-9rio42dfli] {
    animation: ue-modal-out-b-9rio42dfli 0.18s ease forwards;
}

/* Header */
.ue-modal-header[b-9rio42dfli] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.ue-modal-header-left[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ue-modal-icon[b-9rio42dfli] {
    width: 38px;
    height: 38px;
    background: #eef2ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ue-modal-icon .material-icons[b-9rio42dfli] {
        font-size: 20px;
        color: var(--color-primary);
    }

.ue-modal-title[b-9rio42dfli] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.ue-modal-subtitle[b-9rio42dfli] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.ue-modal-id[b-9rio42dfli] {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    color: var(--text-placeholder);
}

.ue-modal-close[b-9rio42dfli] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
}

    .ue-modal-close:hover[b-9rio42dfli] {
        background: var(--bg-subtle);
        color: var(--text-primary);
    }

    .ue-modal-close .material-icons[b-9rio42dfli] {
        font-size: 20px;
    }

/* Tabs */
.ue-modal-tabs[b-9rio42dfli] {
    display: flex;
    gap: 2px;
    padding: 10px 20px 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-subtle);
}

.ue-modal-tab[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, background 0.15s;
}

    .ue-modal-tab .material-icons[b-9rio42dfli] {
        font-size: 16px;
    }

    .ue-modal-tab:hover:not(.ue-modal-tab--active)[b-9rio42dfli] {
        background: var(--bg-hover);
        color: var(--text-secondary);
    }

    .ue-modal-tab--active[b-9rio42dfli] {
        color: var(--color-primary);
        background: var(--bg-card);
        border-bottom-color: var(--color-primary);
    }

/* Body */
.ue-modal-body[b-9rio42dfli] {
    flex: 1;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Identity Card ───────────────────────────────────────────────────── */
.ue-identity-card[b-9rio42dfli] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}

.ue-field-row[b-9rio42dfli] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.ue-field[b-9rio42dfli] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ue-field--grow[b-9rio42dfli] {
    flex: 1;
    min-width: 0;
}

.ue-field-label[b-9rio42dfli] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ue-field-input[b-9rio42dfli] {
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-card);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
}

    .ue-field-input:focus[b-9rio42dfli] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
    }

.ue-field-id[b-9rio42dfli] {
    height: 38px;
    display: flex;
    align-items: center;
    font-family: 'Roboto Mono', monospace;
    font-size: 11.5px;
    color: var(--text-muted);
    padding: 0 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 9px;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 2-column row ────────────────────────────────────────────────────── */
.ue-row-2col[b-9rio42dfli] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Generic card ────────────────────────────────────────────────────── */
.ue-card[b-9rio42dfli] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s, background 0.2s;
}

.ue-card--operator[b-9rio42dfli] {
    background: #fefce8;
    border-color: #fde68a;
}

.ue-card-left[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ue-card-icon[b-9rio42dfli] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ue-card-icon .material-icons[b-9rio42dfli] {
        font-size: 18px;
        color: var(--text-muted);
    }

.ue-card-icon--operator[b-9rio42dfli] {
    background: #fef3c7;
}

    .ue-card-icon--operator .material-icons[b-9rio42dfli] {
        color: #d97706;
    }

.ue-card-title[b-9rio42dfli] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.ue-card-desc[b-9rio42dfli] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

/* ── Toggle switch ───────────────────────────────────────────────────── */
.ue-toggle[b-9rio42dfli] {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: #d1d5db;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.22s;
    padding: 0;
}

    .ue-toggle:focus-visible[b-9rio42dfli] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.ue-toggle--on[b-9rio42dfli] {
    background: var(--color-primary);
}

.ue-toggle-knob[b-9rio42dfli] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.22);
    transition: transform 0.22s cubic-bezier(.34,1.4,.64,1);
}

.ue-toggle--on .ue-toggle-knob[b-9rio42dfli] {
    transform: translateX(20px);
}

/* ── Level stepper ───────────────────────────────────────────────────── */
.ue-level-stepper[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ue-stepper-btn[b-9rio42dfli] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

    .ue-stepper-btn .material-icons[b-9rio42dfli] {
        font-size: 16px;
    }

    .ue-stepper-btn:hover[b-9rio42dfli] {
        background: #eef2ff;
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

.ue-stepper-input[b-9rio42dfli] {
    width: 52px;
    height: 32px;
    text-align: center;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-card);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .ue-stepper-input:focus[b-9rio42dfli] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
    }

    .ue-stepper-input[b-9rio42dfli]::-webkit-inner-spin-button,
    .ue-stepper-input[b-9rio42dfli]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

/* ── Resources section ───────────────────────────────────────────────── */
.ue-section[b-9rio42dfli] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ue-section-header[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

    .ue-section-header .material-icons[b-9rio42dfli] {
        font-size: 15px;
        color: var(--color-primary);
    }

.ue-section-count[b-9rio42dfli] {
    margin-left: 2px;
    background: #eef2ff;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 99px;
}

/* Property-inspector table */
.ue-res-table[b-9rio42dfli] {
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    background: var(--bg-card);
}

.ue-res-thead[b-9rio42dfli] {
    display: flex;
    align-items: center;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    padding: 0 14px;
}

.ue-res-th[b-9rio42dfli] {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 0;
}

.ue-res-th--right[b-9rio42dfli] {
    text-align: right;
    flex: 0 0 120px;
}

.ue-res-row[b-9rio42dfli] {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.12s;
    min-height: 44px;
}

    .ue-res-row:last-child[b-9rio42dfli] {
        border-bottom: none;
    }

    .ue-res-row:hover[b-9rio42dfli] {
        background: var(--bg-subtle);
    }

    .ue-res-row:focus-within[b-9rio42dfli] {
        background: #eef2ff;
    }

    .ue-res-row:focus-within .ue-res-key[b-9rio42dfli] {
        color: var(--color-primary);
    }

.ue-res-key[b-9rio42dfli] {
    flex: 1;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid var(--border-light);
    transition: color 0.12s;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.ue-res-val[b-9rio42dfli] {
    flex: 0 0 120px;
    height: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    outline: none;
    box-sizing: border-box;
}

    .ue-res-val[b-9rio42dfli]::-webkit-inner-spin-button,
    .ue-res-val[b-9rio42dfli]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

/* ── JSON Tab ─────────────────────────────────────────────────────────── */
.ue-json-wrap[b-9rio42dfli] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ue-json-desc[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

    .ue-json-desc .material-icons[b-9rio42dfli] {
        font-size: 14px;
        color: var(--text-placeholder);
        flex-shrink: 0;
    }

/* Tree view container */
.ue-json-tree-wrap[b-9rio42dfli] {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 12px 10px;
    overflow: auto;
    min-height: 380px;
    max-height: 480px;
}


/* Footer */
.ue-modal-footer[b-9rio42dfli] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
    flex-shrink: 0;
    gap: 12px;
}

.ue-modal-btn[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    border: none;
}

    .ue-modal-btn .material-icons[b-9rio42dfli] {
        font-size: 16px;
    }

.ue-modal-btn--cancel[b-9rio42dfli] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

    .ue-modal-btn--cancel:hover[b-9rio42dfli] {
        background: var(--bg-hover);
    }

.ue-modal-btn--save[b-9rio42dfli] {
    background: var(--color-primary);
    color: #fff;
}

    .ue-modal-btn--save:hover[b-9rio42dfli] {
        opacity: 0.88;
    }

.ue-modal-btn:disabled[b-9rio42dfli] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.ue-save-msg[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    margin-right: auto;
}

.ue-save-msg .material-icons[b-9rio42dfli] { font-size: 16px; }

.ue-save-msg--error[b-9rio42dfli]   { color: var(--color-danger); }
.ue-save-msg--success[b-9rio42dfli] { color: var(--color-success, #16a34a); }

@keyframes ue-spin-b-9rio42dfli { to { transform: rotate(360deg); } }
.ue-spin[b-9rio42dfli] { animation: ue-spin-b-9rio42dfli 0.8s linear infinite; display: inline-block; }

/* Country cell */
.ue-country-cell[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ue-country-cell img[b-9rio42dfli] {
    border-radius: 1px;
    flex-shrink: 0;
}

.ue-country-name[b-9rio42dfli] {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Confirm modals ─────────────────────────────────────────────────── */
.ue-confirm-modal[b-9rio42dfli] {
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    width: 420px;
    max-width: calc(100vw - 32px);
    padding: 32px 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    animation: ue-modal-in-b-9rio42dfli 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.ue-confirm-icon[b-9rio42dfli] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ue-confirm-icon .material-icons[b-9rio42dfli] { font-size: 28px; }

.ue-confirm-icon--warn[b-9rio42dfli] {
    background: #fef3c7;
    color: #d97706;
}

.ue-confirm-icon--danger[b-9rio42dfli] {
    background: #fee2e2;
    color: var(--color-danger);
}

.ue-confirm-title[b-9rio42dfli] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.ue-confirm-body[b-9rio42dfli] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 340px;
}

.ue-confirm-warn[b-9rio42dfli] {
    color: var(--color-danger);
    font-weight: 500;
}

.ue-confirm-field[b-9rio42dfli] {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ue-confirm-textarea[b-9rio42dfli] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.55;
    resize: vertical;
    outline: none;
    font-family: var(--font);
    color: var(--text-primary);
    box-sizing: border-box;
}

.ue-confirm-textarea:focus[b-9rio42dfli] { border-color: var(--color-primary); }

.ue-confirm-error[b-9rio42dfli] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--color-danger);
}

.ue-confirm-error .material-icons[b-9rio42dfli] { font-size: 16px; }

.ue-confirm-footer[b-9rio42dfli] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    width: 100%;
    margin-top: 4px;
}

.ue-modal-btn--warn[b-9rio42dfli] {
    background: #d97706;
    color: #fff;
}
.ue-modal-btn--warn:hover[b-9rio42dfli] { opacity: 0.88; }

.ue-modal-btn--danger[b-9rio42dfli] {
    background: var(--color-danger);
    color: #fff;
}
.ue-modal-btn--danger:hover[b-9rio42dfli] { opacity: 0.88; }

/* Saving state — block all interaction on the modal */
.ue-modal--saving[b-9rio42dfli] {
    position: relative;
}

.ue-modal--saving[b-9rio42dfli]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,0.55);
    z-index: 10;
    cursor: wait;
}


/* ── Data Reset Pending Banner ──────────────────────────────────────── */
.ue-reset-pending-banner[b-9rio42dfli] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
    padding: 14px 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    margin-top: 16px;
}

.ue-rpb-icon[b-9rio42dfli] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #ffedd5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ea580c;
}

.ue-rpb-icon .material-icons[b-9rio42dfli] {
    font-size: 20px;
}

.ue-rpb-content[b-9rio42dfli] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ue-rpb-title[b-9rio42dfli] {
    font-size: 13px;
    font-weight: 600;
    color: #c2410c;
    line-height: 1.3;
}

.ue-rpb-desc[b-9rio42dfli] {
    font-size: 12px;
    color: #9a3412;
    line-height: 1.5;
}

/* Lock JSON tree from interaction */
.ue-json-tree-wrap--locked[b-9rio42dfli] {
    pointer-events: none;
    opacity: 0.6;
}

/* ── Platform Accounts ─────────────────────────────────────────────────── */
.ue-platform-accounts[b-9rio42dfli] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ue-pa-card[b-9rio42dfli] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
}

.ue-pa-icon[b-9rio42dfli] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ue-pa--apple .ue-pa-icon[b-9rio42dfli] {
    background: #f1f5f9;
    color: #334155;
}

.ue-pa--google .ue-pa-icon[b-9rio42dfli] {
    background: #f0fdf4;
    color: #15803d;
}

.ue-pa--other .ue-pa-icon[b-9rio42dfli] {
    background: #ede9fe;
    color: var(--color-primary);
}

.ue-pa-content[b-9rio42dfli] {
    flex: 1;
    min-width: 0;
}

.ue-pa-platform[b-9rio42dfli] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.ue-pa-row[b-9rio42dfli] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.ue-pa-key[b-9rio42dfli] {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: capitalize;
    min-width: 80px;
    flex-shrink: 0;
}

.ue-pa-val[b-9rio42dfli] {
    font-size: 12px;
    color: var(--text-primary);
    font-family: 'Roboto Mono', monospace;
    word-break: break-all;
}

/* ── Pagination footer ── */
.ue-footer[b-9rio42dfli] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* /Pages/Segments/ABTesting.razor.rz.scp.css */
/* ===== PAGE HEADER ===== */
.ab-page-header[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
}

.ab-page-header-left[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ab-page-icon-wrap[b-14bjgv8mwp] {
    width: 44px;
    height: 44px;
    background: var(--color-primary-subtle);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ab-page-icon-wrap .material-icons[b-14bjgv8mwp] {
    font-size: 24px;
    color: var(--color-primary);
}

.ab-page-title[b-14bjgv8mwp] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px;
    line-height: 1.2;
}

.ab-page-sub[b-14bjgv8mwp] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.ab-page-header-right[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ab-stat-badge[b-14bjgv8mwp] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 6px 14px;
}

.ab-stat-val[b-14bjgv8mwp] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.ab-stat-lbl[b-14bjgv8mwp] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.ab-add-btn[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    font-size: var(--text-md);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.ab-add-btn:hover[b-14bjgv8mwp] { background: #4338ca; }
.ab-add-btn .material-icons[b-14bjgv8mwp] { font-size: 18px; }

/* ===== TOOLBAR (inside card) ===== */
.ab-toolbar[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
}

.ab-tabs[b-14bjgv8mwp] { display: flex; gap: 2px; }

.ab-tabs .games-sub-tab[b-14bjgv8mwp] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

.ab-tabs .games-sub-tab .material-icons[b-14bjgv8mwp] { font-size: 14px; }

.ab-toolbar-right[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.ab-search-wrap[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 240px;
    height: 32px;
    padding: 0 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.ab-search-wrap .material-icons[b-14bjgv8mwp] {
    font-size: 16px;
    color: var(--text-placeholder);
    flex-shrink: 0;
}

.ab-search-wrap input[b-14bjgv8mwp] {
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-sm);
    color: var(--text-primary);
    width: 100%;
}

.ab-search-wrap input[b-14bjgv8mwp]::placeholder { color: var(--text-placeholder); }

/* ===== CARD ===== */
.ab-card[b-14bjgv8mwp] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin: 16px 24px 24px;
    box-shadow: var(--shadow-sm);
    overflow: visible;
    position: relative;
}

.ab-hint[b-14bjgv8mwp] {
    font-size: var(--text-sm);
    color: var(--text-placeholder);
    margin-left: auto;
    white-space: nowrap;
}

/* ===== EMPTY STATE ===== */
.ab-empty[b-14bjgv8mwp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--text-placeholder);
    gap: 8px;
    font-size: var(--text-md);
}

/* ===== CHECKBOX COLUMN ===== */
.exp-chk-col[b-14bjgv8mwp] {
    width: 40px;
    padding: 12px 8px 12px 16px !important;
    display: flex;
    align-items: center;
}

.exp-chk-col input[type="checkbox"][b-14bjgv8mwp] { cursor: pointer; }

/* ===== BULK DELETE BUTTON ===== */
.ab-bulk-delete-btn[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fda4af;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    animation: abBulkIn-b-14bjgv8mwp 0.2s ease both;
    white-space: nowrap;
}

@keyframes abBulkIn-b-14bjgv8mwp {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.ab-bulk-delete-btn:hover[b-14bjgv8mwp] { background: #ffe4e6; border-color: #fb7185; }
.ab-bulk-delete-btn .material-icons[b-14bjgv8mwp] { font-size: 17px; }

/* ===== PIN COLUMN — absolute like LV/Game Management ===== */
.exp-pin-col[b-14bjgv8mwp] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0 !important;
}

.pin-btn[b-14bjgv8mwp] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-placeholder);
    opacity: 0;
    transition: var(--t-fast);
    box-shadow: var(--shadow-xs);
    padding: 0;
}

.pin-btn .material-icons[b-14bjgv8mwp] { font-size: 14px; transform: rotate(45deg); transition: transform 0.15s; }

.exp-row:hover .pin-btn[b-14bjgv8mwp] { opacity: 1; }
.pin-btn:hover[b-14bjgv8mwp] { background: var(--bg-hover); color: var(--color-primary); }
.pin-btn.pinned[b-14bjgv8mwp] {
    opacity: 1;
    background: var(--color-primary-subtle);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
}
.pin-btn.pinned .material-icons[b-14bjgv8mwp] { transform: rotate(0deg); }

/* ===== TABLE ===== */
.exp-table-wrapper[b-14bjgv8mwp] { width: 100%; }

.exp-row[b-14bjgv8mwp] {
    display: grid;
    grid-template-columns: 40px 2.5fr 0.8fr 1.8fr 1.2fr 1fr 130px;
    align-items: center;
    position: relative;
    padding-right: 52px;
    min-height: 56px;
    transition: background 0.12s;
}

.exp-header[b-14bjgv8mwp] {
    background: var(--bg-subtle);
    min-height: 0;
    border-bottom: 1px solid var(--border-light);
}

.exp-header .exp-cell[b-14bjgv8mwp] {
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.exp-row:not(.exp-header)[b-14bjgv8mwp] {
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
}

.exp-row:not(.exp-header):last-child[b-14bjgv8mwp] { border-bottom: none; }
.exp-row:not(.exp-header):hover[b-14bjgv8mwp] { background: #fafbff; }
.exp-row--selected[b-14bjgv8mwp] { background: #eff6ff !important; }

.exp-cell[b-14bjgv8mwp] {
    padding: 12px 16px;
    font-size: var(--text-md);
    color: var(--text-secondary);
}

.exp-name[b-14bjgv8mwp] { font-weight: 600; color: var(--text-primary); font-size: var(--text-md); }
.exp-desc[b-14bjgv8mwp] { font-size: var(--text-sm); color: var(--text-placeholder); margin-top: 2px; }
.exp-date[b-14bjgv8mwp] { font-size: var(--text-sm); color: var(--text-muted); }

/* ===== STATUS BADGE ===== */
.status-badge[b-14bjgv8mwp] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.status-draft[b-14bjgv8mwp]     { background: #f3f4f6; color: #6b7280; }
.status-active[b-14bjgv8mwp]    { background: #dcfce7; color: #166534; }
.status-paused[b-14bjgv8mwp]    { background: #fef9c3; color: #854d0e; }
.status-completed[b-14bjgv8mwp] { background: #eff6ff; color: #1d4ed8; }

/* ===== VARIANTS ===== */
.variant-chips[b-14bjgv8mwp] { display: flex; flex-wrap: wrap; gap: 4px; }

.variant-chip[b-14bjgv8mwp] {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.metric-chips[b-14bjgv8mwp] { display: flex; flex-wrap: wrap; gap: 4px; }

.metric-badge[b-14bjgv8mwp] {
    font-size: 12px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    color: var(--text-secondary);
}

/* ===== METRIC TAG INPUT ===== */
.metric-tags-input[b-14bjgv8mwp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    min-height: 42px;
    cursor: text;
    background: var(--bg-card);
}

.metric-tags-input:focus-within[b-14bjgv8mwp] {
    outline: none;
    box-shadow: none;
    border-color: var(--color-primary);
}

.metric-tags-input.input-error[b-14bjgv8mwp] { border-color: var(--color-danger); }

.metric-tags-input input[b-14bjgv8mwp] {
    border: none;
    outline: none;
    flex: 1;
    min-width: 120px;
    font-size: var(--text-md);
    background: transparent;
}

.metric-tag[b-14bjgv8mwp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    color: #1d4ed8;
    white-space: nowrap;
}

.metric-tag-remove[b-14bjgv8mwp] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
}

.metric-tag-remove:hover[b-14bjgv8mwp] { color: var(--color-danger); }

/* ===== METRIC RESULTS SECTION ===== */
.metric-results-section[b-14bjgv8mwp] { margin-top: 12px; }

.metric-section-label[b-14bjgv8mwp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    color: #15803d;
    margin-bottom: 6px;
}

/* ===== STATUS ICON + TEXT ===== */
.exp-status[b-14bjgv8mwp] { display: flex; align-items: center; gap: 6px; }
.exp-status-icon[b-14bjgv8mwp] { font-size: 18px; }
.exp-status-icon-draft[b-14bjgv8mwp]     { color: #9ca3af; }
.exp-status-icon-active[b-14bjgv8mwp]    { color: #16a34a; }
.exp-status-icon-paused[b-14bjgv8mwp]    { color: #d97706; }
.exp-status-icon-completed[b-14bjgv8mwp] { color: #2563eb; }
.exp-status-text[b-14bjgv8mwp] { font-size: 13px; font-weight: 500; }
.exp-status-text-draft[b-14bjgv8mwp]     { color: #6b7280; }
.exp-status-text-active[b-14bjgv8mwp]    { color: #166534; }
.exp-status-text-paused[b-14bjgv8mwp]    { color: #854d0e; }
.exp-status-text-completed[b-14bjgv8mwp] { color: #1d4ed8; }

/* ===== ACTION COLUMN ===== */
.exp-actions-col[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 12px;
}

.action-primary[b-14bjgv8mwp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.action-primary .material-icons[b-14bjgv8mwp] { font-size: 14px; }
.action-start[b-14bjgv8mwp]       { background: #dcfce7; color: #166534; }
.action-start:hover[b-14bjgv8mwp]  { background: #bbf7d0; }
.action-pause-btn[b-14bjgv8mwp]    { background: #fef9c3; color: #854d0e; }
.action-pause-btn:hover[b-14bjgv8mwp] { background: #fef08a; }

/* Three-dot menu */
.exp-menu-wrap[b-14bjgv8mwp] { position: relative; }

.icon-btn[b-14bjgv8mwp] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    color: var(--text-placeholder);
    border-radius: var(--radius-sm);
    transition: var(--t-fast);
}

.icon-btn:hover[b-14bjgv8mwp] { color: var(--color-primary); background: var(--color-primary-subtle); }
.icon-btn-danger:hover[b-14bjgv8mwp] { color: var(--color-danger) !important; background: var(--color-danger-subtle) !important; }

/* ===== INLINE RESULTS ===== */
.results-row[b-14bjgv8mwp] {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
}

.results-loading[b-14bjgv8mwp] {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    padding: 12px;
}

.results-header[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.results-title[b-14bjgv8mwp] { font-size: var(--text-md); font-weight: 600; color: var(--text-secondary); }

.results-table[b-14bjgv8mwp] {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.results-thead[b-14bjgv8mwp],
.results-trow[b-14bjgv8mwp] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    align-items: center;
}

.results-thead[b-14bjgv8mwp] {
    background: var(--bg-subtle);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.results-thead > div[b-14bjgv8mwp],
.results-trow  > div[b-14bjgv8mwp] { padding: 10px 14px; }

.results-trow[b-14bjgv8mwp] {
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
    font-size: 13px;
}

.best-variant[b-14bjgv8mwp] { background: #f0fdf4 !important; }

.variant-name-cell[b-14bjgv8mwp] { font-weight: 500; color: var(--text-primary); }

.best-tag[b-14bjgv8mwp] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    background: #166534;
    color: white;
    padding: 1px 6px;
    border-radius: 20px;
    margin-left: 6px;
    vertical-align: middle;
}

.rate-cell[b-14bjgv8mwp] { display: flex; align-items: center; gap: 10px; }

.rate-bar-bg[b-14bjgv8mwp] {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    max-width: 80px;
}

.rate-bar-fill[b-14bjgv8mwp] {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width .4s;
}

/* ===== MODAL EXTENSIONS ===== */
.modal-xl[b-14bjgv8mwp] { max-width: 760px; }
.modal-lg[b-14bjgv8mwp] { max-width: 680px; }
.modal-sm[b-14bjgv8mwp] { max-width: 420px; }

.modal-body.view-only *[b-14bjgv8mwp] {
    pointer-events: none;
    user-select: text;
}

.modal-header-actions[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-sm[b-14bjgv8mwp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-sm:hover[b-14bjgv8mwp] { background: var(--bg-subtle); }
.btn-sm .material-icons[b-14bjgv8mwp] { font-size: 16px; }

.rc-json-field[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    cursor: pointer;
    gap: 6px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.rc-json-field:hover[b-14bjgv8mwp] { border-color: var(--color-primary); }

.rc-json-field-preview[b-14bjgv8mwp] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    color: var(--text-secondary);
}

.rc-json-field-icon[b-14bjgv8mwp] {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--color-primary);
}

.rc-json-desc[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.rc-json-desc .material-icons[b-14bjgv8mwp] {
    font-size: 14px;
    color: var(--text-placeholder);
    flex-shrink: 0;
}

.rc-json-tree-wrap[b-14bjgv8mwp] {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 12px 10px;
    overflow: auto;
    min-height: 260px;
    max-height: 480px;
    color: #e2e8f0;
}

.rc-editor-tabs[b-14bjgv8mwp] {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 3px;
}

.rc-editor-tab[b-14bjgv8mwp] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: calc(var(--radius-md) - 2px);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.rc-editor-tab .material-icons[b-14bjgv8mwp] { font-size: 16px; }

.rc-editor-tab:hover[b-14bjgv8mwp] { background: var(--bg-card); color: var(--text-primary); }

.rc-editor-tab--active[b-14bjgv8mwp] {
    background: var(--bg-card);
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.rc-json-editor[b-14bjgv8mwp],
.rc-expand-textarea[b-14bjgv8mwp] {
    width: 100%;
    min-height: 220px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.rc-json-editor:focus[b-14bjgv8mwp],
.rc-expand-textarea:focus[b-14bjgv8mwp] { border-color: var(--color-blue); }

/* ===== FORM EXTENSIONS ===== */
.form-row[b-14bjgv8mwp] { display: flex; gap: 12px; }
.form-group[b-14bjgv8mwp] { flex: 1; }

.required[b-14bjgv8mwp] { color: var(--color-danger); }
.optional[b-14bjgv8mwp]  { font-size: 11px; color: var(--text-placeholder); font-weight: 400; }

.input-error[b-14bjgv8mwp] { border-color: var(--color-danger) !important; }

.form-section[b-14bjgv8mwp] {
    border-top: 1px solid var(--border-light);
    padding-top: 16px;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-section-title[b-14bjgv8mwp] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section-header[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.weight-sum[b-14bjgv8mwp] {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 20px;
}

.sum-ok[b-14bjgv8mwp]  { background: #dcfce7; color: #166534; }
.sum-bad[b-14bjgv8mwp] { background: #fee2e2; color: #dc2626; }

.btn-add-rule[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary);
    background: #eff6ff;
    border: 1px solid #c7d2fe;
    border-radius: var(--radius-md);
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-add-rule:hover[b-14bjgv8mwp] { background: #e0e7ff; }

/* ===== VARIANT CARDS ===== */
.variant-card[b-14bjgv8mwp] {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    overflow: hidden;
}

.variant-card-header[b-14bjgv8mwp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-light);
}

.rule-label[b-14bjgv8mwp] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.variant-card-body[b-14bjgv8mwp] { padding: 12px; }

/* Config Overrides */
.overrides-section[b-14bjgv8mwp] { margin-top: 4px; }

.overrides-header[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.overrides-label[b-14bjgv8mwp] { font-size: 12px; font-weight: 500; color: var(--text-muted); }

.btn-add-override[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1px 4px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
}

.btn-add-override:hover[b-14bjgv8mwp] { color: var(--color-primary); border-color: var(--color-primary); }
.btn-add-override .material-icons[b-14bjgv8mwp] { font-size: 14px; line-height: 1; }

.rc-no-rules[b-14bjgv8mwp] { font-size: 12px; color: var(--text-placeholder); font-style: italic; }

/* ===== RC MULTISELECT ===== */
.rc-multiselect[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 38px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    cursor: pointer;
    font-size: var(--text-md);
    transition: border-color 0.15s;
}

.rc-multiselect:hover[b-14bjgv8mwp] { border-color: #9ca3af; }
.rc-multiselect.open[b-14bjgv8mwp]  { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue); }
.rc-multiselect-placeholder[b-14bjgv8mwp] { color: var(--text-placeholder); flex: 1; }

.rc-chip[b-14bjgv8mwp] {
    display: inline-flex;
    align-items: center;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 500;
}

.rc-chip-more[b-14bjgv8mwp] { background: var(--bg-subtle); color: var(--text-muted); border-color: var(--border); }

/* ===== RC CUSTOM SELECT ===== */
.rc-custom-select[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    cursor: pointer;
    font-size: var(--text-md);
    color: var(--text-primary);
    user-select: none;
    transition: border-color 0.15s;
}

.rc-custom-select:hover[b-14bjgv8mwp] { border-color: #9ca3af; }
.rc-custom-select.open[b-14bjgv8mwp]  { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue); }
.rc-select-arrow[b-14bjgv8mwp] { font-size: 18px; color: var(--text-placeholder); margin-left: auto; }
.rc-select-icon[b-14bjgv8mwp]  { font-size: 18px; color: var(--text-muted); }

/* ===== RC SELECT POPOVER ===== */
.rc-select-overlay[b-14bjgv8mwp] { position: fixed; inset: 0; z-index: 199; }

.rc-select-popover[b-14bjgv8mwp] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    min-width: 200px;
}

.rc-select-search[b-14bjgv8mwp] {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-md);
    outline: none;
    box-sizing: border-box;
}

.rc-select-list[b-14bjgv8mwp] { max-height: 220px; overflow-y: auto; }

.rc-select-option[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: var(--text-md);
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.1s;
}

.rc-select-option:hover[b-14bjgv8mwp]    { background: var(--bg-subtle); }
.rc-select-option.selected[b-14bjgv8mwp] { background: #eff6ff; }
.rc-select-divider[b-14bjgv8mwp] { height: 1px; background: var(--border-light); margin: 2px 0; }
.rc-select-empty[b-14bjgv8mwp]   { padding: 12px 14px; font-size: 13px; color: var(--text-placeholder); text-align: center; }

.rc-option-info[b-14bjgv8mwp]  { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rc-option-label[b-14bjgv8mwp] { font-size: var(--text-md); font-weight: 500; color: var(--text-primary); }
.rc-option-desc[b-14bjgv8mwp]  { font-size: 11px; color: var(--text-placeholder); }
.rc-option-check[b-14bjgv8mwp] { font-size: 16px; color: var(--color-blue); margin-left: auto; flex-shrink: 0; }

/* ===== OVERRIDE ROWS ===== */
.override-row[b-14bjgv8mwp] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}

.override-row > .icon-btn[b-14bjgv8mwp] { align-self: center; }
.override-key-wrap[b-14bjgv8mwp]  { flex: 1; min-width: 0; }
.override-val-wrap[b-14bjgv8mwp]  { flex: 1.4; min-width: 0; }
.override-key-select[b-14bjgv8mwp],
.override-val-select[b-14bjgv8mwp] { width: 100%; box-sizing: border-box; }
.override-eq[b-14bjgv8mwp] { flex-shrink: 0; color: var(--text-placeholder); line-height: 36px; font-size: var(--text-md); }

.ov-key-inline-list[b-14bjgv8mwp] {
    position: relative;
    z-index: 201;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--bg-card);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.ov-type-icon[b-14bjgv8mwp] { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }
.ov-key-name[b-14bjgv8mwp]  { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); font-family: 'SFMono-Regular', Consolas, monospace; }
.ov-type-badge[b-14bjgv8mwp] {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    flex-shrink: 0;
}

.ov-val-with-btn[b-14bjgv8mwp] { position: relative; }
.ov-edit-btn[b-14bjgv8mwp] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--text-placeholder);
    display: flex;
    align-items: center;
    line-height: 1;
}

.ov-edit-btn:hover[b-14bjgv8mwp] { color: var(--color-primary); }
.ov-edit-btn .material-icons[b-14bjgv8mwp] { font-size: 14px; }
.override-val.has-edit-btn[b-14bjgv8mwp] { padding-right: 30px; }

.override-val[b-14bjgv8mwp] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s;
}

.override-val:hover[b-14bjgv8mwp]   { border-color: #9ca3af; }
.override-val:focus[b-14bjgv8mwp]   { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue); }
.override-val:disabled[b-14bjgv8mwp] { background: var(--bg-subtle); color: var(--text-placeholder); cursor: not-allowed; }
.override-val.input-error[b-14bjgv8mwp] { border-color: var(--color-danger) !important; }

/* ===== RESULTS DASHBOARD — NEW rda-* COMPONENTS ===== */

/* Overview card (matches ov-eng-container pattern) */
.rda-overview[b-14bjgv8mwp] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    overflow: visible;
}

.rda-overview-header[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.rda-overview-header-left[b-14bjgv8mwp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rda-overview-title[b-14bjgv8mwp] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.rda-overview-sub[b-14bjgv8mwp] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.rda-overview-badge[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.rda-overview-badge .material-icons[b-14bjgv8mwp] {
    font-size: 15px;
    color: var(--color-primary);
}

.rda-overview-grid[b-14bjgv8mwp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.rda-overview-metric[b-14bjgv8mwp] {
    padding: 20px 24px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rda-overview-metric--last[b-14bjgv8mwp] { border-right: none; }

.rda-overview-metric-top[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.rda-ovm-icon[b-14bjgv8mwp] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rda-ovm-icon .material-icons[b-14bjgv8mwp] { font-size: 17px; }

.rda-ovm-icon--blue[b-14bjgv8mwp]   { background: #eff6ff; color: #3b82f6; }
.rda-ovm-icon--purple[b-14bjgv8mwp] { background: #f5f3ff; color: #7c3aed; }
.rda-ovm-icon--green[b-14bjgv8mwp]  { background: #dcfce7; color: #16a34a; }
.rda-ovm-icon--gold[b-14bjgv8mwp]   { background: #fef9c3; color: #ca8a04; }

.rda-ovm-label[b-14bjgv8mwp] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.rda-ovm-value[b-14bjgv8mwp] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.rda-ovm-value--winner[b-14bjgv8mwp] {
    font-size: 22px;
    color: #16a34a;
}

.rda-ovm-value--na[b-14bjgv8mwp] { color: var(--text-placeholder); }

.rda-ovm-context[b-14bjgv8mwp] {
    font-size: 11.5px;
    color: var(--text-placeholder);
}

/* Cards */
.rda-card[b-14bjgv8mwp] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.rda-card-header[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
}

.rda-card-icon[b-14bjgv8mwp] {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rda-card-icon .material-icons[b-14bjgv8mwp] { font-size: 20px; }

.rda-card-title[b-14bjgv8mwp] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}


.rda-card-sub[b-14bjgv8mwp] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Badges */
.rda-badge[b-14bjgv8mwp] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
}

.rda-badge-ctrl[b-14bjgv8mwp] { background: #f3f4f6; color: #6b7280; }
.rda-badge-best[b-14bjgv8mwp] { background: #166534; color: white; }

/* Traffic distribution (mirrors lkpi-dist pattern) */
.rda-td-badge[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: auto;
    flex-shrink: 0;
}

.rda-td-badge .material-icons[b-14bjgv8mwp] { font-size: 15px; color: #0ea5e9; }

.rda-td-body[b-14bjgv8mwp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 20px;
}

.rda-td-row[b-14bjgv8mwp] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.rda-td-meta[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rda-td-names[b-14bjgv8mwp] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.rda-td-tier[b-14bjgv8mwp] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}

.rda-td-sub[b-14bjgv8mwp] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 400;
}

.rda-td-right[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rda-td-val[b-14bjgv8mwp] {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.rda-td-count[b-14bjgv8mwp] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 400;
}

.rda-td-crown[b-14bjgv8mwp] {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 20px;
}

.rda-td-track[b-14bjgv8mwp] {
    width: 100%;
    height: 8px;
    background: var(--bg-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.rda-td-fill[b-14bjgv8mwp] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 4px;
}

.rda-td-insight[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 4px;
}

.rda-td-insight .material-icons[b-14bjgv8mwp] { font-size: 14px; color: #f97316; flex-shrink: 0; }
.rda-td-insight strong[b-14bjgv8mwp] { color: var(--text-primary); font-weight: 700; }


/* ===== METRIC ANALYSIS CARD (rda-mp-*) ===== */
.rda-mp-card[b-14bjgv8mwp] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.rda-mp-header[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-shrink: 0;
}

.rda-mp-header-left[b-14bjgv8mwp] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.rda-mp-header-icon[b-14bjgv8mwp] {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-lg);
    background: rgba(124,58,237,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rda-mp-header-icon .material-icons[b-14bjgv8mwp] { font-size: 20px; color: #7c3aed; }

.rda-mp-title[b-14bjgv8mwp] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.rda-mp-sub[b-14bjgv8mwp]   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.rda-mp-header-badge[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(124,58,237,0.08);
    border: 1px solid rgba(124,58,237,0.25);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 700;
    color: #6d28d9;
    flex-shrink: 0;
}

.rda-mp-header-badge .material-icons[b-14bjgv8mwp] { font-size: 15px; color: #8b5cf6; }

/* Tabs */
.rda-mp-tabs[b-14bjgv8mwp] {
    display: flex;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    padding: 0 20px;
}

.rda-mp-tabs-group[b-14bjgv8mwp] {
    display: flex;
}

.rda-mp-tab[b-14bjgv8mwp] {
    padding: 11px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    background: transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
    white-space: nowrap;
    margin-bottom: -1px;
    letter-spacing: 0.01em;
}

.rda-mp-tab:hover[b-14bjgv8mwp] {
    color: var(--text-primary);
}

.rda-mp-tab.active[b-14bjgv8mwp] {
    color: #6366f1;
    border-bottom-color: #6366f1;
    font-weight: 600;
}

/* Summary strip */
.rda-mp-strip[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.rda-mp-strip-label[b-14bjgv8mwp]  { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.rda-mp-strip-value[b-14bjgv8mwp]  { font-size: 13px; font-weight: 700; color: #7c3aed; font-variant-numeric: tabular-nums; font-family: 'SFMono-Regular', Consolas, monospace; }
.rda-mp-strip-sep[b-14bjgv8mwp]    { width: 1px; height: 12px; background: var(--border); margin: 0 4px; }
.rda-mp-strip-winner[b-14bjgv8mwp] { font-size: 12px; font-weight: 600; color: #ca8a04; }

/* Winner banner */
.rda-mp-winner-banner[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 0;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-lg);
    font-size: 13px;
    color: #15803d;
    font-weight: 500;
    line-height: 1.4;
}

.rda-mp-winner-banner .material-icons[b-14bjgv8mwp] { font-size: 16px; color: #16a34a; flex-shrink: 0; }
.rda-mp-winner-banner strong[b-14bjgv8mwp] { font-weight: 700; color: #15803d; }

/* Control leads — amber */
.rda-mp-winner-banner--control[b-14bjgv8mwp] {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}
.rda-mp-winner-banner--control .material-icons[b-14bjgv8mwp] { color: #d97706; }
.rda-mp-winner-banner--control strong[b-14bjgv8mwp] { color: #92400e; }

/* No data — neutral */
.rda-mp-winner-banner--neutral[b-14bjgv8mwp] {
    background: var(--bg-subtle);
    border-color: var(--border);
    color: var(--text-muted);
}
.rda-mp-winner-banner--neutral .material-icons[b-14bjgv8mwp] { color: var(--text-placeholder); }
.rda-mp-winner-banner--neutral strong[b-14bjgv8mwp] { color: var(--text-secondary); font-weight: 600; }

/* Body */
.rda-mp-body[b-14bjgv8mwp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
}

/* Variant card */
.rda-mp-vcard[b-14bjgv8mwp] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.rda-mp-vcard--winner[b-14bjgv8mwp] {
    border-color: #a5b4fc;
    border-left: 3px solid #6366f1;
}

/* Card header */
.rda-mp-vcard-header[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px 10px;
}

.rda-mp-vcard--winner .rda-mp-vcard-header[b-14bjgv8mwp] {
    background: #fafaff;
}

.rda-mp-vcard-title-row[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.rda-mp-vcard-name[b-14bjgv8mwp] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.rda-mp-vbadge[b-14bjgv8mwp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
    letter-spacing: 0.01em;
    line-height: 1.5;
    flex-shrink: 0;
}

.rda-mp-vbadge--type[b-14bjgv8mwp] {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.rda-mp-vbadge--winner[b-14bjgv8mwp] {
    background: #6366f1;
    color: #fff;
    border: none;
    box-shadow: 0 1px 4px rgba(99,102,241,0.35);
    font-size: 11.5px;
}

.rda-mp-vbadge--winner .material-icons[b-14bjgv8mwp] {
    font-size: 13px;
    color: #fde68a;
}

/* KPI grid */
.rda-mp-vcard-kpis[b-14bjgv8mwp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #e5e7eb;
    border-top: 1px solid #e5e7eb;
}

.rda-mp-kpi[b-14bjgv8mwp] {
    background: #f8fafc;
    padding: 10px 14px 12px;
}

.rda-mp-kpi-label[b-14bjgv8mwp] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.rda-mp-kpi-value[b-14bjgv8mwp] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.rda-mp-kpi-value--delta[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 3px;
}

.rda-mp-kpi-trend-icon[b-14bjgv8mwp] {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.rda-mp-kpi--delta.rda-mp-delta--pos .rda-mp-kpi-trend-icon[b-14bjgv8mwp] { color: #16a34a; }
.rda-mp-kpi--delta.rda-mp-delta--neg .rda-mp-kpi-trend-icon[b-14bjgv8mwp] { color: #dc2626; }

.rda-mp-kpi-sub[b-14bjgv8mwp] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 400;
}

.rda-mp-kpi-baseline[b-14bjgv8mwp] {
    color: var(--text-placeholder) !important;
    font-weight: 400 !important;
}

/* Delta KPI */
.rda-mp-kpi--delta.rda-mp-delta--pos .rda-mp-kpi-value[b-14bjgv8mwp] { color: #16a34a; }
.rda-mp-kpi--delta.rda-mp-delta--pos .rda-mp-kpi-sub[b-14bjgv8mwp]   { color: #16a34a; }
.rda-mp-kpi--delta.rda-mp-delta--neg .rda-mp-kpi-value[b-14bjgv8mwp] { color: #dc2626; }
.rda-mp-kpi--delta.rda-mp-delta--neg .rda-mp-kpi-sub[b-14bjgv8mwp]   { color: #dc2626; }

/* Progress bar */
.rda-mp-vcard-track-wrap[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px 13px;
    border-top: 1px solid #f1f5f9;
}

.rda-mp-track-label[b-14bjgv8mwp] {
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    font-weight: 500;
    min-width: 28px;
    text-align: right;
}

.rda-mp-vcard-track[b-14bjgv8mwp] {
    flex: 1;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.rda-mp-vcard-fill[b-14bjgv8mwp] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 3px;
}

/* ===== RESULTS DASHBOARD (FULLSCREEN) ===== */
.rd-overlay[b-14bjgv8mwp] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    animation: rdFadeIn-b-14bjgv8mwp .18s ease-out;
}

@keyframes rdFadeIn-b-14bjgv8mwp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rd-header[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 28px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10;
}

.rd-back-btn[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--t-fast);
    flex-shrink: 0;
}

.rd-back-btn:hover[b-14bjgv8mwp] { background: var(--bg-hover); border-color: #d1d5db; color: var(--text-primary); }
.rd-back-btn .material-icons[b-14bjgv8mwp] { font-size: 20px; }

.rd-header-info[b-14bjgv8mwp] { flex: 1; min-width: 0; }

.rd-title[b-14bjgv8mwp] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-subtitle[b-14bjgv8mwp] {
    font-size: 11px;
    color: var(--text-placeholder);
    font-family: 'SFMono-Regular', Consolas, monospace;
    margin-top: 1px;
    display: block;
}

.rd-body[b-14bjgv8mwp] { flex: 1; overflow-y: auto; padding: 24px 28px; }

.rd-empty[b-14bjgv8mwp] { text-align: center; padding: 80px 24px; color: var(--text-placeholder); font-size: var(--text-md); }

/* Skeleton */
@keyframes rdSkelShimmer-b-14bjgv8mwp {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.rd-skel[b-14bjgv8mwp] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 800px 100%;
    animation: rdSkelShimmer-b-14bjgv8mwp 1.4s infinite linear;
    border-radius: var(--radius-sm);
}

.rd-skeleton-card[b-14bjgv8mwp]    { pointer-events: none; }
.rd-skel-icon[b-14bjgv8mwp]        { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.rd-skel-label[b-14bjgv8mwp]       { width: 70px; height: 11px; margin-bottom: 6px; }
.rd-skel-value[b-14bjgv8mwp]       { width: 60px; height: 22px; }
.rd-skeleton-section[b-14bjgv8mwp] { pointer-events: none; }

/* Overview stat cards */
.rd-stats-row[b-14bjgv8mwp] { display: flex; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }

.rd-stat-card[b-14bjgv8mwp] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 160px;
    box-shadow: var(--shadow-sm);
}

.rd-winner-card[b-14bjgv8mwp] { border-color: #bbf7d0; background: #f0fdf4; }

.rd-stat-icon[b-14bjgv8mwp]  { font-size: 30px; flex-shrink: 0; }
.rd-stat-label[b-14bjgv8mwp] { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.rd-stat-value[b-14bjgv8mwp] { font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.2; margin-top: 2px; }

/* Metric section card */
.rd-section[b-14bjgv8mwp] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    overflow: visible;
    position: relative;
}

.rd-section-header[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    border-radius: 10px 10px 0 0;
}

.rd-section-title[b-14bjgv8mwp] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    font-family: 'SFMono-Regular', Consolas, monospace;
}

/* Comparison table */
.rd-table-wrap[b-14bjgv8mwp] { width: 100%; overflow-x: auto; }

.rd-table-head[b-14bjgv8mwp],
.rd-table-row[b-14bjgv8mwp] {
    display: grid;
    grid-template-columns: 2fr 1.3fr 1fr 1fr 1fr 1.8fr 1.5fr;
    align-items: center;
    min-width: 700px;
}

.rd-table-head[b-14bjgv8mwp] {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rd-table-head > div[b-14bjgv8mwp],
.rd-table-row  > div[b-14bjgv8mwp] { padding: 11px 16px; }

.rd-table-row[b-14bjgv8mwp] {
    border-top: 1px solid var(--border-light);
    font-size: 13px;
    color: var(--text-secondary);
    transition: background .1s;
}

.rd-table-row:first-of-type[b-14bjgv8mwp] { border-top: none; }
.rd-table-row:hover[b-14bjgv8mwp]  { background: var(--bg-subtle); }
.rd-row-best[b-14bjgv8mwp]         { background: #f0fdf4 !important; }
.rd-row-best:hover[b-14bjgv8mwp]   { background: #dcfce7 !important; }

.rd-variant-cell[b-14bjgv8mwp] { display: flex; align-items: center; gap: 8px; }
.rd-variant-name[b-14bjgv8mwp] { font-weight: 600; color: var(--text-primary); }

.rd-badge[b-14bjgv8mwp] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
}

.rd-badge-baseline[b-14bjgv8mwp] { background: var(--bg-subtle); color: var(--text-muted); }
.rd-badge-best[b-14bjgv8mwp]     { background: #166534; color: white; }

.rd-share[b-14bjgv8mwp] {
    font-size: 11px;
    color: var(--text-placeholder);
    margin-left: 6px;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
}

.rd-rate-cell[b-14bjgv8mwp] { display: flex; align-items: center; gap: 10px; }

.rd-rate-bar-bg[b-14bjgv8mwp] {
    flex: 1;
    height: 7px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    max-width: 72px;
}

.rd-rate-bar-fill[b-14bjgv8mwp] { height: 100%; background: #818cf8; border-radius: 4px; transition: width .4s; }
.rd-bar-best[b-14bjgv8mwp]      { background: #16a34a; }
.rd-rate-val[b-14bjgv8mwp]      { font-weight: 600; color: var(--text-primary); white-space: nowrap; min-width: 54px; }

/* Uplift */
.rd-uplift-header[b-14bjgv8mwp] { display: flex; align-items: center; gap: 5px; }

.rd-uplift-hint[b-14bjgv8mwp] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    cursor: default;
    flex-shrink: 0;
    transition: background 0.15s;
}

.rd-uplift-hint:hover[b-14bjgv8mwp] { background: #9ca3af; color: white; }

.rd-uplift-hint[b-14bjgv8mwp]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #1f2937;
    color: #f9fafb;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 7px;
    white-space: normal;
    width: 240px;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 9999;
    box-shadow: var(--shadow-lg);
}

.rd-uplift-hint[b-14bjgv8mwp]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    right: 4px;
    border: 5px solid transparent;
    border-top-color: #1f2937;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 9999;
}

.rd-uplift-hint:hover[b-14bjgv8mwp]::after,
.rd-uplift-hint:hover[b-14bjgv8mwp]::before { opacity: 1; }

.rd-uplift-cell[b-14bjgv8mwp] { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.rd-uplift-main[b-14bjgv8mwp] { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.rd-uplift-icon[b-14bjgv8mwp] { font-size: 16px; }
.rd-uplift-val[b-14bjgv8mwp]  { letter-spacing: -0.01em; }
.rd-uplift-rel[b-14bjgv8mwp]  { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.rd-baseline-dash[b-14bjgv8mwp] { font-size: 12px; color: var(--text-placeholder); }
.rd-uplift-pos     .rd-uplift-main[b-14bjgv8mwp] { color: #16a34a; }
.rd-uplift-neg     .rd-uplift-main[b-14bjgv8mwp] { color: #dc2626; }
.rd-uplift-neutral .rd-uplift-main[b-14bjgv8mwp] { color: var(--text-muted); font-weight: 400; }

/* ===== EXPERIMENT ID FIELD ===== */
.exp-id-field[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    overflow: hidden;
}

.exp-id-value[b-14bjgv8mwp] {
    flex: 1;
    padding: 0 12px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exp-id-copy-btn[b-14bjgv8mwp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: 0 12px;
    border: none;
    border-left: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.exp-id-copy-btn .material-icons[b-14bjgv8mwp] { font-size: 14px; }
.exp-id-copy-btn:hover[b-14bjgv8mwp]  { background: var(--bg-subtle); color: var(--text-secondary); }
.exp-id-copy-btn.copied[b-14bjgv8mwp] { background: #f0fdf4; color: #16a34a; border-left-color: #bbf7d0; }

/* ===== MISC ===== */
.form-error-banner[b-14bjgv8mwp] {
    background: var(--color-danger-subtle);
    color: #dc2626;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 13px;
    margin-top: 4px;
}

.text-center[b-14bjgv8mwp] { text-align: center; }

.sub-text[b-14bjgv8mwp] { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

/* ===== THREE-DOT TRIGGER ===== */
.exp-more-btn[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-placeholder);
    transition: background .15s, color .15s;
    padding: 0;
    flex-shrink: 0;
}

.exp-more-btn:hover[b-14bjgv8mwp] {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.exp-more-btn .material-icons[b-14bjgv8mwp] { font-size: 18px; }

/* ===== THREE-DOT POPOVER ===== */
.exp-menu-popover[b-14bjgv8mwp] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 300;
    background: #fff;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
    min-width: 200px;
    overflow: hidden;
    padding: 6px;
    animation: menuPopIn-b-14bjgv8mwp .13s ease-out;
}

@keyframes menuPopIn-b-14bjgv8mwp {
    from { opacity: 0; transform: translateY(-6px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.exp-menu-item[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    transition: background .1s;
    box-sizing: border-box;
}

.exp-menu-item:hover[b-14bjgv8mwp] { background: var(--bg-subtle); }

/* Icon badge */
.exp-menu-icon-badge[b-14bjgv8mwp] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exp-menu-icon-badge .material-icons[b-14bjgv8mwp] { font-size: 16px; }

.exp-menu-icon-view[b-14bjgv8mwp]    { background: #eff6ff; }
.exp-menu-icon-view    .material-icons[b-14bjgv8mwp] { color: #3b82f6; }
.exp-menu-icon-results[b-14bjgv8mwp] { background: #f5f3ff; }
.exp-menu-icon-results .material-icons[b-14bjgv8mwp] { color: #7c3aed; }
.exp-menu-icon-edit[b-14bjgv8mwp]    { background: #f3f4f6; }
.exp-menu-icon-edit    .material-icons[b-14bjgv8mwp] { color: #6b7280; }
.exp-menu-icon-ok[b-14bjgv8mwp]      { background: #f0fdf4; }
.exp-menu-icon-ok      .material-icons[b-14bjgv8mwp] { color: #16a34a; }
.exp-menu-icon-del[b-14bjgv8mwp]     { background: #fef2f2; }
.exp-menu-icon-del     .material-icons[b-14bjgv8mwp] { color: #ef4444; }

.exp-menu-danger[b-14bjgv8mwp] { color: #ef4444; }
.exp-menu-danger:hover[b-14bjgv8mwp] { background: #fef2f2; color: #dc2626; }
.exp-menu-danger:hover .exp-menu-icon-del[b-14bjgv8mwp] { background: #fee2e2; }

.exp-menu-divider[b-14bjgv8mwp] { height: 1px; background: var(--border-light); margin: 4px 0; }

/* ===== AB MODAL ===== */
@keyframes abModIn-b-14bjgv8mwp  { from { opacity: 0; transform: translateY(-12px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes abModOut-b-14bjgv8mwp { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-12px) scale(0.95); } }
@keyframes abFadeIn-b-14bjgv8mwp  { from { opacity: 0; } to { opacity: 1; } }
@keyframes abFadeOut-b-14bjgv8mwp { from { opacity: 1; } to { opacity: 0; } }

.ab-mod-overlay[b-14bjgv8mwp] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: abFadeIn-b-14bjgv8mwp 0.18s ease both;
}

.ab-mod-overlay--out[b-14bjgv8mwp] { animation: abFadeOut-b-14bjgv8mwp 0.18s ease forwards; }

.ab-mod-modal[b-14bjgv8mwp] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 780px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: abModIn-b-14bjgv8mwp 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.ab-form-modal[b-14bjgv8mwp] { position: relative; overflow: hidden; }

@keyframes abSaveSpin-b-14bjgv8mwp { to { transform: rotate(360deg); } }

.ab-saving-overlay[b-14bjgv8mwp] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(4px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    animation: abFadeIn-b-14bjgv8mwp 0.15s ease both;
}

.ab-saving-box[b-14bjgv8mwp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.ab-saving-spinner[b-14bjgv8mwp] {
    width: 44px;
    height: 44px;
    border: 3px solid #e0e7ff;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: abSaveSpin-b-14bjgv8mwp 0.75s linear infinite;
}

.ab-saving-text[b-14bjgv8mwp] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.ab-mod-modal--out[b-14bjgv8mwp] { animation: abModOut-b-14bjgv8mwp 0.18s ease forwards; }

.ab-mod-header[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f0f2f5;
    flex-shrink: 0;
}

.ab-mod-header-icon[b-14bjgv8mwp] {
    width: 40px;
    height: 40px;
    background: var(--color-primary-subtle);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ab-mod-header-icon .material-icons[b-14bjgv8mwp] {
    font-size: 20px;
    color: var(--color-primary);
}

.ab-mod-header-info[b-14bjgv8mwp] { flex: 1; min-width: 0; }

.ab-mod-title[b-14bjgv8mwp] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.ab-mod-subtitle[b-14bjgv8mwp] {
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'SFMono-Regular', Consolas, monospace;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ab-mod-close[b-14bjgv8mwp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background .15s, color .15s;
    flex-shrink: 0;
}

.ab-mod-close:hover[b-14bjgv8mwp] { background: var(--bg-subtle); color: var(--text-primary); }
.ab-mod-close .material-icons[b-14bjgv8mwp] { font-size: 18px; }

.ab-mod-body[b-14bjgv8mwp] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ab-mod-body input:focus[b-14bjgv8mwp],
.ab-mod-body textarea:focus[b-14bjgv8mwp],
.ab-mod-body select:focus[b-14bjgv8mwp] {
    outline: none;
    box-shadow: none;
    border-color: var(--color-primary);
}

.ab-mod-body.view-only *[b-14bjgv8mwp] {
    pointer-events: none;
    user-select: text;
}

/* Re-enable scroll on list-boxes in view mode */
.ab-mod-body.view-only .mod-list-body[b-14bjgv8mwp],
.ab-mod-body.view-only .mod-list-box[b-14bjgv8mwp] {
    pointer-events: auto;
    overflow-y: auto;
}

.ab-mod-footer[b-14bjgv8mwp] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #f0f2f5;
    flex-shrink: 0;
}

.ab-mod-btn-cancel[b-14bjgv8mwp] {
    height: 36px;
    padding: 0 18px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s;
}

.ab-mod-btn-cancel:hover[b-14bjgv8mwp] { background: var(--bg-subtle); }

.ab-mod-btn-save[b-14bjgv8mwp] {
    height: 36px;
    padding: 0 20px;
    border: none;
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: var(--text-md);
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: background .15s;
}

.ab-mod-btn-save:hover[b-14bjgv8mwp] { background: #4338ca; }
.ab-mod-btn-save:disabled[b-14bjgv8mwp] { opacity: .55; cursor: not-allowed; }

/* ── Pagination footer ── */
.ab-footer[b-14bjgv8mwp] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
}
/* /Pages/Segments/LevelVariants.razor.rz.scp.css */
/* ===== PAGE HEADER ===== */
.lv-page-header[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
}

.lv-page-header-left[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lv-page-icon-wrap[b-nby8wg7u9n] {
    width: 44px;
    height: 44px;
    background: #f0fdf4;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lv-page-icon-wrap .material-icons[b-nby8wg7u9n] {
    font-size: 24px;
    color: #16a34a;
}

.lv-page-title[b-nby8wg7u9n] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px;
    line-height: 1.2;
}

.lv-page-sub[b-nby8wg7u9n] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.lv-page-header-right[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lv-stat-badge[b-nby8wg7u9n] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 6px 14px;
}

.lv-stat-val[b-nby8wg7u9n] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.lv-stat-lbl[b-nby8wg7u9n] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.lv-add-btn[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    background: #16a34a;
    border: none;
    border-radius: var(--radius-lg);
    color: #fff;
    font-size: var(--text-md);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t-fast);
}

.lv-add-btn:hover[b-nby8wg7u9n] { background: #15803d; }
.lv-add-btn .material-icons[b-nby8wg7u9n] { font-size: 18px; }

/* ===== CARD ===== */
.lv-card[b-nby8wg7u9n] {
    margin: 16px 24px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* ===== TOOLBAR ===== */
.lv-toolbar[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
}

.lv-tabs[b-nby8wg7u9n] { display: flex; gap: 2px; }

.lv-tabs .games-sub-tab[b-nby8wg7u9n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

.lv-tabs .games-sub-tab .material-icons[b-nby8wg7u9n] { font-size: 14px; }

.lv-toolbar-right[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lv-search-wrap[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0 12px;
    height: 32px;
    width: 240px;
}

.lv-search-wrap .material-icons[b-nby8wg7u9n] {
    font-size: 16px;
    color: var(--text-placeholder);
    flex-shrink: 0;
}

.lv-search-wrap input[b-nby8wg7u9n] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--text-sm);
    color: var(--text-primary);
    outline: none;
    width: 100%;
}

.lv-search-wrap input[b-nby8wg7u9n]::placeholder { color: var(--text-placeholder); }

.lv-hint[b-nby8wg7u9n] {
    font-size: var(--text-sm);
    color: var(--text-placeholder);
    white-space: nowrap;
}

/* ===== EMPTY STATE ===== */
.lv-empty[b-nby8wg7u9n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    color: var(--text-placeholder);
    font-size: var(--text-md);
}

/* ===== TABLE ===== */
.lv-table-wrapper[b-nby8wg7u9n] { width: 100%; overflow-x: auto; }

/* CHK | LEVEL | VARIANT NAME | RC KEY | UPLOADED | LAST UPDATED | STATUS | ACTIONS */
.lv-row[b-nby8wg7u9n] {
    display: grid;
    grid-template-columns: 40px 140px 1.5fr 220px 150px 110px 120px;
    align-items: center;
    position: relative;
    padding-right: 52px;
    min-height: 56px;
    transition: background 0.12s;
}

.lv-header[b-nby8wg7u9n] {
    background: var(--bg-subtle);
    min-height: 0;
    border-bottom: 1px solid var(--border-light);
}

.lv-header .lv-cell[b-nby8wg7u9n] {
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.lv-header .lv-chk-col[b-nby8wg7u9n] { padding-left: 16px !important; }

.lv-row:not(.lv-header)[b-nby8wg7u9n] {
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
}

.lv-row:not(.lv-header):last-child[b-nby8wg7u9n] { border-bottom: none; }
.lv-row:not(.lv-header):hover[b-nby8wg7u9n] { background: #fafbff; }
.lv-row--selected[b-nby8wg7u9n] { background: #eff6ff !important; }

.lv-cell[b-nby8wg7u9n] {
    padding: 12px 8px;
    font-size: var(--text-md);
    color: var(--text-secondary);
    overflow: hidden;
}

.lv-muted[b-nby8wg7u9n] { color: var(--text-muted); font-size: var(--text-sm); }

/* ===== DATE CELL (2-line, same pattern as User Explorer) ===== */
.lv-date-cell[b-nby8wg7u9n] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lv-date-text[b-nby8wg7u9n] {
    font-size: 13px;
    color: var(--text-secondary);
}

.lv-time-text[b-nby8wg7u9n] {
    font-size: 11px;
    color: var(--text-muted);
}

/* ===== CHECKBOX COLUMN ===== */
.lv-chk-col[b-nby8wg7u9n] {
    padding: 12px 8px 12px 16px !important;
    display: flex;
    align-items: center;
}

.lv-chk-col input[type="checkbox"][b-nby8wg7u9n] { cursor: pointer; }

/* ===== BULK DELETE BUTTON ===== */
.lv-bulk-delete-btn[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fda4af;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    animation: lvBulkIn-b-nby8wg7u9n 0.2s ease both;
    white-space: nowrap;
}

@keyframes lvBulkIn-b-nby8wg7u9n {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.lv-bulk-delete-btn:hover[b-nby8wg7u9n] { background: #ffe4e6; border-color: #fb7185; }
.lv-bulk-delete-btn .material-icons[b-nby8wg7u9n] { font-size: 17px; }

/* ===== PIN — absolute like Game Management ===== */
.lv-pin-col[b-nby8wg7u9n] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0 !important;
}

.pin-btn[b-nby8wg7u9n] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-placeholder);
    opacity: 0;
    transition: var(--t-fast);
    box-shadow: var(--shadow-xs);
    padding: 0;
}

.pin-btn .material-icons[b-nby8wg7u9n] { font-size: 14px; transform: rotate(45deg); transition: transform 0.15s; }

.lv-row:hover .pin-btn[b-nby8wg7u9n] { opacity: 1; }
.pin-btn:hover[b-nby8wg7u9n] { background: var(--bg-hover); color: var(--color-primary); }
.pin-btn.pinned[b-nby8wg7u9n] {
    opacity: 1;
    background: var(--color-primary-subtle);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
}
.pin-btn.pinned .material-icons[b-nby8wg7u9n] { transform: rotate(0deg); }

/* ===== LEVEL BADGE ===== */
.lv-level-badge[b-nby8wg7u9n] {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    background: #eff6ff;
    color: var(--color-blue);
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ===== VARIANT NAME ===== */
.lv-row:not(.lv-header) .lv-name-col[b-nby8wg7u9n] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lv-variant-name[b-nby8wg7u9n] {
    font-weight: 600;
    color: var(--text-primary);
}

.lv-pointer-chip[b-nby8wg7u9n] {
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== RC KEY ===== */
.lv-rc-key-wrap[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lv-rc-key[b-nby8wg7u9n] {
    font-size: 12px;
    font-family: monospace;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 7px;
    color: var(--text-primary);
    white-space: nowrap;
}

.lv-copy-btn[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
    transition: all var(--t-fast);
    flex-shrink: 0;
}

.lv-copy-btn:hover[b-nby8wg7u9n] { background: var(--bg-hover); color: var(--text-primary); }
.lv-copy-btn .material-icons[b-nby8wg7u9n] { font-size: 14px; }

/* ===== STATUS ===== */
.lv-status-badge[b-nby8wg7u9n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
}

.lv-status-badge--active[b-nby8wg7u9n] { color: #16a34a; }
.lv-status-badge--idle[b-nby8wg7u9n]   { color: var(--text-muted); }

.lv-status-dot[b-nby8wg7u9n] {
    width: 7px;
    height: 7px;
    background: #16a34a;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== ACTIONS — same pattern as Game Settings gs-action-btn ===== */
.lv-actions-col[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 20px;
}

.lv-action-btn[b-nby8wg7u9n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    transition: var(--t-fast);
    white-space: nowrap;
}

.lv-action-btn .material-icons[b-nby8wg7u9n] { font-size: 16px; }

.lv-edit-btn[b-nby8wg7u9n] { color: var(--color-primary); background: var(--color-primary-subtle); }
.lv-edit-btn:hover[b-nby8wg7u9n] { background: #e0e7ff; }

.lv-del-btn[b-nby8wg7u9n] { width: 30px; padding: 0; justify-content: center; color: #94a3b8; }
.lv-del-btn:hover[b-nby8wg7u9n] { color: #e11d48; background: #fff1f2; }

.lv-btn-disabled[b-nby8wg7u9n] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ===== MODAL ===== */
.lv-mod-overlay[b-nby8wg7u9n] {
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,.45);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: lv-fade-in-b-nby8wg7u9n 0.18s ease both;
}

.lv-mod-overlay--out[b-nby8wg7u9n] {
    animation: lv-fade-out-b-nby8wg7u9n 0.18s ease forwards;
}

.lv-mod-modal[b-nby8wg7u9n] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: lv-slide-in-b-nby8wg7u9n 0.22s cubic-bezier(0.34,1.3,0.64,1) both;
}

.lv-mod-modal--out[b-nby8wg7u9n] {
    animation: lv-slide-out-b-nby8wg7u9n 0.18s ease forwards;
}

.lv-mod-loading-overlay[b-nby8wg7u9n] {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(4px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    animation: lv-fade-in-b-nby8wg7u9n 0.15s ease both;
}

.lv-mod-loading-box[b-nby8wg7u9n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.lv-mod-spinner[b-nby8wg7u9n] {
    width: 44px;
    height: 44px;
    border: 3px solid #bbf7d0;
    border-top-color: #16a34a;
    border-radius: 50%;
    animation: lv-spin-b-nby8wg7u9n 0.75s linear infinite;
}

.lv-mod-loading-text[b-nby8wg7u9n] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.lv-mod-header[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.lv-mod-header-icon[b-nby8wg7u9n] {
    width: 40px;
    height: 40px;
    background: #f0fdf4;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lv-mod-header-icon .material-icons[b-nby8wg7u9n] { font-size: 20px; color: #16a34a; }

.lv-mod-header-info[b-nby8wg7u9n] { flex: 1; min-width: 0; }

.lv-mod-title[b-nby8wg7u9n] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.lv-mod-subtitle[b-nby8wg7u9n] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.lv-mod-close[b-nby8wg7u9n] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    color: var(--text-muted);
    transition: background .15s, color .15s;
    flex-shrink: 0;
}

.lv-mod-close:hover[b-nby8wg7u9n] { background: var(--bg-subtle); color: var(--text-primary); }
.lv-mod-close .material-icons[b-nby8wg7u9n] { font-size: 18px; }

.lv-mod-body[b-nby8wg7u9n] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    flex: 1;
}

.lv-mod-footer[b-nby8wg7u9n] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

/* ===== FORM FIELDS ===== */
.lv-field[b-nby8wg7u9n] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lv-label[b-nby8wg7u9n] {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-secondary);
}

.lv-required[b-nby8wg7u9n] { color: var(--color-danger); }

.lv-field input[type="text"][b-nby8wg7u9n],
.lv-field input[type="number"][b-nby8wg7u9n] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg-card);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.lv-field input:focus[b-nby8wg7u9n] {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(79,70,229,.08);
}

.lv-field input.input-error[b-nby8wg7u9n] { border-color: var(--color-danger); }

.lv-field input[b-nby8wg7u9n]::placeholder { color: var(--text-placeholder); }

.lv-field-hint[b-nby8wg7u9n] {
    font-size: var(--text-xs);
    color: var(--text-placeholder);
    margin-top: 2px;
}

.lv-field-hint--ok[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #16a34a;
}

.lv-file-label[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--t-fast);
}

.lv-file-label:hover[b-nby8wg7u9n] { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }
.lv-file-label--error[b-nby8wg7u9n] { border-color: var(--color-danger); }
.lv-file-label .material-icons[b-nby8wg7u9n] { font-size: 18px; }

.form-error-banner[b-nby8wg7u9n] {
    background: var(--color-danger-subtle);
    color: #dc2626;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 13px;
}

.input-error[b-nby8wg7u9n] { border-color: var(--color-danger) !important; }

.lv-rc-preview[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.lv-rc-preview-label[b-nby8wg7u9n] { color: var(--text-muted); }

/* ===== EDIT MODAL EXTRAS ===== */
.lv-optional[b-nby8wg7u9n] { color: var(--text-placeholder); font-weight: 400; }

.lv-json-textarea[b-nby8wg7u9n] {
    width: 100%;
    min-height: 180px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-family: 'SFMono-Regular', Consolas, monospace, sans-serif;
    color: var(--text-primary);
    background: var(--bg-card);
    outline: none;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    line-height: 1.5;
}

.lv-json-textarea:focus[b-nby8wg7u9n] {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(79,70,229,.08);
}

.lv-json-textarea.input-error[b-nby8wg7u9n] { border-color: var(--color-danger); }

.lv-edit-toggle[b-nby8wg7u9n] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s;
}

.lv-edit-toggle--on[b-nby8wg7u9n] {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.lv-toggle-icon[b-nby8wg7u9n] {
    font-size: 20px;
    color: #9ca3af;
    flex-shrink: 0;
    margin-top: 1px;
    transition: color 0.15s;
}

.lv-edit-toggle--on .lv-toggle-icon[b-nby8wg7u9n] { color: #16a34a; }

.lv-toggle-label[b-nby8wg7u9n] {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.3;
}

.lv-toggle-desc[b-nby8wg7u9n] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.5;
}

/* ===== DELETE WARNING ===== */
.lv-delete-warn[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #b45309;
    font-size: var(--text-sm);
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-md);
    padding: 8px 12px;
    margin-top: 8px;
}

.lv-delete-warn .material-icons[b-nby8wg7u9n] { font-size: 16px; flex-shrink: 0; }

/* ===== ANIMATIONS ===== */
@keyframes lv-fade-in-b-nby8wg7u9n  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lv-fade-out-b-nby8wg7u9n { from { opacity: 1; } to { opacity: 0; } }

@keyframes lv-slide-in-b-nby8wg7u9n {
    from { opacity: 0; transform: translateY(-12px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lv-slide-out-b-nby8wg7u9n {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-12px) scale(0.95); }
}

@keyframes lv-spin-b-nby8wg7u9n { to { transform: rotate(360deg); } }

/* ===== JSON FIELD PREVIEW (click to open editor) ===== */
.lv-json-field[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    height: 38px;
    user-select: none;
    overflow: hidden;
    box-sizing: border-box;
}

.lv-json-field:hover[b-nby8wg7u9n] {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
}

.lv-json-field-preview[b-nby8wg7u9n] {
    flex: 1;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.lv-json-field-icon[b-nby8wg7u9n] {
    font-size: 17px !important;
    color: var(--color-primary);
    flex-shrink: 0;
    transition: opacity 0.12s;
}

.lv-json-field:hover .lv-json-field-icon[b-nby8wg7u9n] { opacity: 0.7; }

.lv-json-loading[b-nby8wg7u9n] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    height: 38px;
    padding: 0 4px;
}

.lv-json-loading .material-icons[b-nby8wg7u9n] { font-size: 16px; animation: lv-spin-b-nby8wg7u9n 1s linear infinite; }

/* ===== JSON EDITOR MODAL ===== */
.lv-editor-tabs[b-nby8wg7u9n] {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 3px;
}

.lv-editor-tab[b-nby8wg7u9n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: calc(var(--radius-md) - 2px);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.lv-editor-tab .material-icons[b-nby8wg7u9n] { font-size: 16px; }
.lv-editor-tab:hover[b-nby8wg7u9n] { background: var(--bg-card); color: var(--text-primary); }

.lv-editor-tab--active[b-nby8wg7u9n] {
    background: var(--bg-card);
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.lv-json-editor[b-nby8wg7u9n] {
    width: 100%;
    min-height: 300px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.lv-json-editor:focus[b-nby8wg7u9n] { border-color: var(--color-primary); }

.lv-json-tree-wrap[b-nby8wg7u9n] {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 12px 10px;
    overflow: auto;
    min-height: 260px;
    max-height: 480px;
    color: #e2e8f0;
}

.lv-json-field--empty .lv-json-field-preview[b-nby8wg7u9n] {
    color: var(--text-placeholder);
    font-family: inherit;
    font-size: 13px;
}

.lv-json-field--loading[b-nby8wg7u9n] { cursor: default; pointer-events: none; opacity: 0.7; }

.lv-json-field-preview--muted[b-nby8wg7u9n] { color: var(--text-placeholder); font-family: inherit; }

.lv-json-field-icon--spin[b-nby8wg7u9n] { animation: lv-spin-b-nby8wg7u9n 1s linear infinite; }

/* ── Pagination footer ── */
.lv-footer[b-nby8wg7u9n] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
}
/* /Pages/Segments/RemoteConfigs.razor.rz.scp.css */
/* ===== PAGE HEADER ===== */
.rc-page-header[b-cffm54k30i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
}

.rc-page-header-left[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rc-page-icon-wrap[b-cffm54k30i] {
    width: 44px;
    height: 44px;
    background: #eff6ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rc-page-icon-wrap .material-icons[b-cffm54k30i] {
    font-size: 24px;
    color: var(--color-blue);
}

.rc-page-title[b-cffm54k30i] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px;
    line-height: 1.2;
}

.rc-page-sub[b-cffm54k30i] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.rc-page-header-right[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rc-stat-badge[b-cffm54k30i] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 6px 14px;
}

.rc-stat-val[b-cffm54k30i] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.rc-stat-lbl[b-cffm54k30i] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.rc-add-btn[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    background: var(--color-blue);
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    font-size: var(--text-md);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.rc-add-btn:hover[b-cffm54k30i] { background: #2563eb; }
.rc-add-btn .material-icons[b-cffm54k30i] { font-size: 18px; }

/* ===== TOOLBAR (inside card) ===== */
.rc-toolbar[b-cffm54k30i] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
}

.rc-tabs[b-cffm54k30i] { display: flex; gap: 2px; }

.rc-tabs .games-sub-tab[b-cffm54k30i] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

.rc-tabs .games-sub-tab .material-icons[b-cffm54k30i] { font-size: 14px; }

.rc-toolbar-right[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.rc-search-wrap[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 240px;
    height: 32px;
    padding: 0 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.rc-search-wrap .material-icons[b-cffm54k30i] {
    font-size: 16px;
    color: var(--text-placeholder);
    flex-shrink: 0;
}

.rc-search-wrap input[b-cffm54k30i] {
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-sm);
    color: var(--text-primary);
    width: 100%;
}

.rc-search-wrap input[b-cffm54k30i]::placeholder { color: var(--text-placeholder); }

/* ===== CARD ===== */
.rc-card[b-cffm54k30i] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin: 16px 24px 24px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.rc-hint[b-cffm54k30i] {
    font-size: var(--text-sm);
    color: var(--text-placeholder);
    margin-left: auto;
    white-space: nowrap;
}

/* ===== CHECKBOX COLUMN ===== */
.rc-chk-col[b-cffm54k30i] {
    width: 40px;
    padding: 12px 8px 12px 16px !important;
    display: flex;
    align-items: center;
}

.rc-chk-col input[type="checkbox"][b-cffm54k30i] { cursor: pointer; }

/* ===== BULK DELETE BUTTON ===== */
.rc-bulk-delete-btn[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fda4af;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    animation: rcBulkIn-b-cffm54k30i 0.2s ease both;
    white-space: nowrap;
}

@keyframes rcBulkIn-b-cffm54k30i {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.rc-bulk-delete-btn:hover[b-cffm54k30i] { background: #ffe4e6; border-color: #fb7185; }
.rc-bulk-delete-btn .material-icons[b-cffm54k30i] { font-size: 17px; }

/* ===== PIN COLUMN — absolute like LV/Game Management ===== */
.rc-pin-col[b-cffm54k30i] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0 !important;
}

.pin-btn[b-cffm54k30i] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-placeholder);
    opacity: 0;
    transition: var(--t-fast);
    box-shadow: var(--shadow-xs);
    padding: 0;
}

.pin-btn .material-icons[b-cffm54k30i] { font-size: 14px; transform: rotate(45deg); transition: transform 0.15s; }

.rc-row:hover .pin-btn[b-cffm54k30i] { opacity: 1; }
.pin-btn:hover[b-cffm54k30i] { background: var(--bg-hover); color: var(--color-primary); }
.pin-btn.pinned[b-cffm54k30i] {
    opacity: 1;
    background: var(--color-primary-subtle);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
}
.pin-btn.pinned .material-icons[b-cffm54k30i] { transform: rotate(0deg); }

/* ===== EMPTY STATE ===== */
.rc-empty[b-cffm54k30i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--text-placeholder);
    gap: 8px;
    font-size: var(--text-md);
}

/* ===== TABLE ===== */
.rc-table-wrapper[b-cffm54k30i] { width: 100%; overflow-x: auto; }

.rc-row[b-cffm54k30i] {
    display: grid;
    grid-template-columns: 40px 2fr 0.7fr 1.2fr 1fr 1.5fr 120px;
    align-items: center;
    position: relative;
    padding-right: 52px;
    min-height: 56px;
    transition: background 0.12s;
}

.rc-header[b-cffm54k30i] {
    background: var(--bg-subtle);
    min-height: 0;
    border-bottom: 1px solid var(--border-light);
}

.rc-header .rc-cell[b-cffm54k30i] {
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.rc-row:not(.rc-header)[b-cffm54k30i] {
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
}

.rc-row:not(.rc-header):last-child[b-cffm54k30i] { border-bottom: none; }
.rc-row:not(.rc-header):hover[b-cffm54k30i] { background: #fafbff; }
.rc-row--selected[b-cffm54k30i] { background: #eff6ff !important; }

.rc-cell[b-cffm54k30i] {
    padding: 12px 16px;
    font-size: var(--text-md);
    color: var(--text-secondary);
}

.rc-key-cell[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rc-key-badge[b-cffm54k30i] {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    color: var(--text-primary);
}

.rc-ab-badge[b-cffm54k30i] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px 2px 5px;
    border-radius: 20px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    cursor: default;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.rc-ab-badge .material-icons[b-cffm54k30i] {
    font-size: 11px;
}

.rc-type-badge[b-cffm54k30i] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}

.rc-type-string[b-cffm54k30i] { background: #eff6ff; color: #1d4ed8; }
.rc-type-int[b-cffm54k30i]    { background: #f0fdf4; color: #166534; }
.rc-type-float[b-cffm54k30i]  { background: #fdf4ff; color: #7e22ce; }
.rc-type-bool[b-cffm54k30i]   { background: #fff7ed; color: #c2410c; }
.rc-type-json[b-cffm54k30i]   { background: #ecfdf5; color: #065f46; }

.rc-type-cell[b-cffm54k30i] { display: flex; align-items: center; gap: 8px; }

.rc-mono[b-cffm54k30i] {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.rc-no-rules[b-cffm54k30i]  { font-size: 13px; color: var(--text-placeholder); font-style: italic; }
.rc-rules-count[b-cffm54k30i] { font-size: 13px; color: var(--color-primary); font-weight: 500; }
.rc-desc[b-cffm54k30i]      { color: var(--text-muted); font-size: 13px; }

.rc-actions-col[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 20px;
}

/* ===== ACTION BUTTONS ===== */
.rc-action-btn[b-cffm54k30i] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.rc-action-btn .material-icons[b-cffm54k30i] { font-size: 16px; }

.rc-edit-btn[b-cffm54k30i] {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

.rc-edit-btn:hover[b-cffm54k30i] { background: #e0e7ff; }

.rc-del-btn[b-cffm54k30i] {
    background: transparent;
    color: #94a3b8;
    width: 30px;
    padding: 0;
    justify-content: center;
}

.rc-del-btn:hover[b-cffm54k30i] { color: #e11d48; background: #fff1f2; }

.rc-action-btn.btn-disabled[b-cffm54k30i] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.icon-btn[b-cffm54k30i] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    color: var(--text-placeholder);
    border-radius: var(--radius-sm);
    transition: var(--t-fast);
}

.icon-btn:hover[b-cffm54k30i] { color: var(--color-primary); background: var(--color-primary-subtle); }
.icon-btn-danger:hover[b-cffm54k30i] { color: var(--color-danger) !important; background: var(--color-danger-subtle) !important; }

/* ===== MODAL SIZE VARIANTS ===== */
.modal-lg[b-cffm54k30i] { max-width: 680px; }
.modal-sm[b-cffm54k30i] { max-width: 420px; }

/* ===== FORM EXTENSIONS ===== */
.form-group[b-cffm54k30i] { flex: 1; }

.form-group input.input-disabled[b-cffm54k30i] {
    background: var(--bg-subtle);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-row[b-cffm54k30i] { display: flex; gap: 12px; }

.required[b-cffm54k30i] { color: var(--color-danger); }
.optional[b-cffm54k30i]  { font-size: 11px; color: var(--text-placeholder); font-weight: 400; }

/* ===== TARGETING RULES ===== */
.form-section[b-cffm54k30i] {
    border-top: none;
    padding-top: 0;
}

.form-section-header[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-muted);
}

.section-hint[b-cffm54k30i] {
    font-size: 11px;
    color: var(--text-placeholder);
    font-weight: 400;
    flex: 1;
}

.btn-add-rule[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary);
    background: #eff6ff;
    border: 1px solid #c7d2fe;
    border-radius: var(--radius-md);
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-add-rule:hover[b-cffm54k30i] { background: #e0e7ff; }

.rule-card[b-cffm54k30i] {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
}

.rule-header[b-cffm54k30i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.rule-label[b-cffm54k30i] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rule-body[b-cffm54k30i] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===== CUSTOM SELECT ===== */
.rc-custom-select[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    cursor: pointer;
    font-size: var(--text-md);
    color: var(--text-primary);
    user-select: none;
    transition: border-color 0.15s;
}

.rc-custom-select:hover[b-cffm54k30i] { border-color: #9ca3af; }
.rc-custom-select.open[b-cffm54k30i]  { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue); }

.rc-select-icon[b-cffm54k30i]  { font-size: 18px; color: var(--text-muted); }
.rc-select-label[b-cffm54k30i] { flex: 1; }
.rc-select-arrow[b-cffm54k30i] { font-size: 18px; color: var(--text-placeholder); margin-left: auto; }

/* ===== SELECT POPOVER ===== */
.rc-select-overlay[b-cffm54k30i] { position: fixed; inset: 0; z-index: 199; }

.rc-select-popover[b-cffm54k30i] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.rc-select-option[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: var(--text-md);
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.1s;
}

.rc-select-option:hover[b-cffm54k30i]    { background: var(--bg-subtle); }
.rc-select-option.selected[b-cffm54k30i] { background: #eff6ff; }

.rc-option-info[b-cffm54k30i]  { display: flex; flex-direction: column; flex: 1; }
.rc-option-label[b-cffm54k30i] { font-size: var(--text-md); font-weight: 500; color: var(--text-primary); }
.rc-option-desc[b-cffm54k30i]  { font-size: 11px; color: var(--text-placeholder); }
.rc-option-check[b-cffm54k30i] { font-size: 16px; color: var(--color-blue); margin-left: auto; }

.rc-select-divider[b-cffm54k30i] { height: 1px; background: var(--border-light); margin: 2px 0; }

.rc-select-search[b-cffm54k30i] {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-md);
    outline: none;
    box-sizing: border-box;
}

.rc-select-empty[b-cffm54k30i] { padding: 12px 14px; font-size: 13px; color: var(--text-placeholder); text-align: center; }

/* ===== MULTI-SELECT ===== */
.rc-multiselect[b-cffm54k30i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 38px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    cursor: pointer;
    font-size: var(--text-md);
    transition: border-color 0.15s;
}

.rc-multiselect:hover[b-cffm54k30i] { border-color: #9ca3af; }
.rc-multiselect.open[b-cffm54k30i]  { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue); }
.rc-multiselect-placeholder[b-cffm54k30i] { color: var(--text-placeholder); flex: 1; }

.rc-chip[b-cffm54k30i] {
    display: inline-flex;
    align-items: center;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 500;
}

.rc-chip-more[b-cffm54k30i] { background: var(--bg-subtle); color: var(--text-muted); border-color: var(--border); }

/* ===== VALUE ROW ===== */
.rc-value-row[b-cffm54k30i] { display: flex; align-items: center; gap: 6px; }

.rc-value-row input[b-cffm54k30i] {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    outline: none;
}

.rc-value-row input:focus[b-cffm54k30i] { border-color: var(--color-blue); }
.rc-value-row input.input-error[b-cffm54k30i] { border-color: var(--color-danger); }

.rc-expand-btn[b-cffm54k30i] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--t-fast);
}

.rc-expand-btn:hover[b-cffm54k30i] { background: #eff6ff; border-color: #bfdbfe; color: var(--color-blue); }
.rc-expand-btn .material-icons[b-cffm54k30i] { font-size: 18px; }

/* ===== JSON FIELD PREVIEW (read-only, click to open editor) ===== */
.rc-json-field[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    height: 38px;
    user-select: none;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.rc-json-field:hover[b-cffm54k30i] {
    border-color: var(--color-blue);
    background: #eff6ff;
}

.rc-json-field-preview[b-cffm54k30i] {
    flex: 1;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.rc-json-field-icon[b-cffm54k30i] {
    font-size: 17px !important;
    color: var(--color-blue);
    flex-shrink: 0;
    transition: opacity 0.12s;
}

.rc-json-field:hover .rc-json-field-icon[b-cffm54k30i] { opacity: 0.8; }

/* ===== JSON TREE EDITOR ===== */
.rc-json-desc[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.rc-json-desc .material-icons[b-cffm54k30i] {
    font-size: 14px;
    color: var(--text-placeholder);
    flex-shrink: 0;
}

.rc-json-tree-wrap[b-cffm54k30i] {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 12px 10px;
    overflow: auto;
    min-height: 260px;
    max-height: 480px;
    color: #e2e8f0;
}

/* ===== EDITOR TABS (Tree / Raw toggle) ===== */
.rc-editor-tabs[b-cffm54k30i] {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 3px;
}

.rc-editor-tab[b-cffm54k30i] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: calc(var(--radius-md) - 2px);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.rc-editor-tab .material-icons[b-cffm54k30i] { font-size: 16px; }

.rc-editor-tab:hover[b-cffm54k30i] { background: var(--bg-card); color: var(--text-primary); }

.rc-editor-tab--active[b-cffm54k30i] {
    background: var(--bg-card);
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ===== JSON EDITOR (textarea fallback) ===== */
.rc-json-editor[b-cffm54k30i],
.rc-expand-textarea[b-cffm54k30i] {
    width: 100%;
    min-height: 220px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.rc-json-editor:focus[b-cffm54k30i],
.rc-expand-textarea:focus[b-cffm54k30i] { border-color: var(--color-blue); }

/* ===== MODAL HEADER ACTIONS ===== */
.modal-header-actions[b-cffm54k30i] { display: flex; align-items: center; gap: 8px; }

.btn-sm[b-cffm54k30i] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-sm:hover[b-cffm54k30i] { background: var(--bg-subtle); }
.btn-sm .material-icons[b-cffm54k30i] { font-size: 16px; }

/* ===== MISC ===== */
.form-error-banner[b-cffm54k30i] {
    background: var(--color-danger-subtle);
    color: #dc2626;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 13px;
    margin-top: 4px;
}

.input-error[b-cffm54k30i] { border-color: var(--color-danger) !important; }
.field-hint[b-cffm54k30i]  { font-size: 11px; color: var(--text-placeholder); margin-top: 3px; display: block; }
.text-center[b-cffm54k30i] { text-align: center; }
.sub-text[b-cffm54k30i]    { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

/* ===== RC MODAL ===== */
@keyframes rcModIn-b-cffm54k30i  { from { opacity: 0; transform: translateY(-12px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rcModOut-b-cffm54k30i { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-12px) scale(0.95); } }
@keyframes rcFadeIn-b-cffm54k30i  { from { opacity: 0; } to { opacity: 1; } }
@keyframes rcFadeOut-b-cffm54k30i { from { opacity: 1; } to { opacity: 0; } }

.rc-mod-overlay[b-cffm54k30i] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: rcFadeIn-b-cffm54k30i 0.18s ease both;
}

.rc-mod-overlay--out[b-cffm54k30i] { animation: rcFadeOut-b-cffm54k30i 0.18s ease forwards; }

.rc-mod-modal[b-cffm54k30i] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: rcModIn-b-cffm54k30i 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.rc-mod-modal--out[b-cffm54k30i] { animation: rcModOut-b-cffm54k30i 0.18s ease forwards; }

.rc-mod-header[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f0f2f5;
    flex-shrink: 0;
}

.rc-mod-header-icon[b-cffm54k30i] {
    width: 40px;
    height: 40px;
    background: #eff6ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rc-mod-header-icon .material-icons[b-cffm54k30i] {
    font-size: 20px;
    color: var(--color-blue);
}

.rc-mod-header-info[b-cffm54k30i] { flex: 1; min-width: 0; }

.rc-mod-title[b-cffm54k30i] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.rc-mod-subtitle[b-cffm54k30i] {
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'SFMono-Regular', Consolas, monospace;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-mod-close[b-cffm54k30i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background .15s, color .15s;
    flex-shrink: 0;
}

.rc-mod-close:hover[b-cffm54k30i] { background: var(--bg-subtle); color: var(--text-primary); }
.rc-mod-close .material-icons[b-cffm54k30i] { font-size: 18px; }

.rc-mod-body[b-cffm54k30i] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rc-mod-body input:focus[b-cffm54k30i],
.rc-mod-body textarea:focus[b-cffm54k30i],
.rc-mod-body select:focus[b-cffm54k30i] {
    outline: none;
    box-shadow: none;
    border-color: var(--color-primary);
}

.rc-mod-section-label[b-cffm54k30i] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}

.rc-mod-footer[b-cffm54k30i] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #f0f2f5;
    flex-shrink: 0;
}

.rc-mod-btn-cancel[b-cffm54k30i] {
    height: 36px;
    padding: 0 18px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s;
}

.rc-mod-btn-cancel:hover[b-cffm54k30i] { background: var(--bg-subtle); }

.rc-mod-btn-save[b-cffm54k30i] {
    height: 36px;
    padding: 0 20px;
    border: none;
    background: var(--color-blue);
    border-radius: var(--radius-lg);
    font-size: var(--text-md);
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: background .15s;
}

.rc-mod-btn-save:hover[b-cffm54k30i] { background: #2563eb; }
.rc-mod-btn-save:disabled[b-cffm54k30i] { opacity: .55; cursor: not-allowed; }

/* ===== IMPORT JSON BUTTON ===== */
.rc-import-btn[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: var(--text-md);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
    user-select: none;
}

.rc-import-btn:hover[b-cffm54k30i] {
    background: #f0fdf4;
    border-color: #86efac;
    color: #16a34a;
}

.rc-import-btn .material-icons[b-cffm54k30i] { font-size: 18px; }

/* ===== FORM / IMPORT MODAL (loading overlay host) ===== */
.rc-form-modal[b-cffm54k30i]   { position: relative; overflow: hidden; }
.rc-import-modal[b-cffm54k30i] { max-width: 760px; position: relative; overflow: hidden; }

/* Loading overlay */
.rc-import-loading-overlay[b-cffm54k30i] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(4px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    animation: rcFadeIn-b-cffm54k30i 0.15s ease both;
}

.rc-import-loading-box[b-cffm54k30i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

@keyframes rcImportSpin-b-cffm54k30i { to { transform: rotate(360deg); } }

.rc-import-spinner[b-cffm54k30i] {
    width: 44px;
    height: 44px;
    border: 3px solid #bbf7d0;
    border-top-color: #16a34a;
    border-radius: 50%;
    animation: rcImportSpin-b-cffm54k30i 0.75s linear infinite;
}

.rc-import-loading-text[b-cffm54k30i] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.rc-import-loading-sub[b-cffm54k30i] {
    font-size: 12px;
    color: var(--text-muted);
}

.rc-import-list[b-cffm54k30i] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 480px;
    padding: 8px 0;
}

.rc-import-item[b-cffm54k30i] {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    align-items: end;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s;
}

.rc-import-item:last-child[b-cffm54k30i] { border-bottom: none; }
.rc-import-item:hover[b-cffm54k30i] { background: var(--bg-subtle); }

.rc-import-item--skipped[b-cffm54k30i] { opacity: 0.45; }

.rc-import-key-col[b-cffm54k30i] {
    min-width: 0;
}

.rc-import-preview-col[b-cffm54k30i] {
    min-width: 0;
}

.rc-import-actions-col[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    align-self: end;
    padding-bottom: 2px;
}

/* keep legacy class harmless */
.rc-import-item-main[b-cffm54k30i] { flex: 1; min-width: 0; }

.rc-import-filename[b-cffm54k30i] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 0;
}

.rc-import-filename .material-icons[b-cffm54k30i] { font-size: 15px; }

.rc-import-key-input[b-cffm54k30i] {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.rc-import-key-input:focus[b-cffm54k30i] { border-color: var(--color-blue); }
.rc-import-key-input:disabled[b-cffm54k30i] { background: var(--bg-subtle); color: var(--text-muted); cursor: not-allowed; }

.rc-import-hint[b-cffm54k30i] {
    display: block;
    font-size: 11px;
    margin-top: 3px;
}

.rc-import-hint--error[b-cffm54k30i] { color: var(--color-danger); }
.rc-import-hint--warn[b-cffm54k30i]  { color: #d97706; }

/* legacy — no longer used in template */
.rc-import-item-right[b-cffm54k30i] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rc-import-preview[b-cffm54k30i]    { display: none; }

/* clickable JSON preview in import list */
.rc-import-json-field[b-cffm54k30i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    overflow: hidden;
}

.rc-import-json-field:hover[b-cffm54k30i] {
    border-color: var(--color-blue);
    background: #f0f9ff;
}

.rc-import-json-field--disabled[b-cffm54k30i] {
    cursor: default;
    background: var(--bg-subtle);
    border-color: var(--border-light);
}

.rc-import-json-field--disabled:hover[b-cffm54k30i] {
    border-color: var(--border-light);
    background: var(--bg-subtle);
}

.rc-import-badge[b-cffm54k30i] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.rc-import-badge--error[b-cffm54k30i] {
    background: var(--color-danger-subtle);
    color: var(--color-danger);
}

.rc-import-badge--error .material-icons[b-cffm54k30i] { font-size: 13px; }

.rc-import-skip-btn[b-cffm54k30i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-placeholder);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.rc-import-skip-btn:hover[b-cffm54k30i] { background: var(--bg-subtle); color: var(--text-secondary); }
.rc-import-skip-btn.active[b-cffm54k30i] { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.rc-import-skip-btn .material-icons[b-cffm54k30i] { font-size: 16px; }

.rc-import-save-btn[b-cffm54k30i] { background: #16a34a; }
.rc-import-save-btn:hover[b-cffm54k30i] { background: #15803d; }

/* ── Pagination footer ── */
.rc-footer[b-cffm54k30i] {
    border-top: 1px solid var(--border-light);
    padding: 10px 16px;
    background: var(--bg-subtle);
}
/* /Pages/UserManagement.razor.rz.scp.css */
/* ===== PAGE HEADER ===== */
.um-page-header[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
}

.um-page-header-left[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.um-page-icon-wrap[b-4id47f3j7a] {
    width: 44px;
    height: 44px;
    background: #ede9fe;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.um-page-icon-wrap .material-icons[b-4id47f3j7a] {
    font-size: 24px;
    color: var(--color-primary);
}

.um-page-title[b-4id47f3j7a] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px;
    line-height: 1.2;
}

.um-page-sub[b-4id47f3j7a] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.um-page-header-right[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.um-stat-badge[b-4id47f3j7a] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 6px 14px;
}

.um-stat-val[b-4id47f3j7a] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.um-stat-lbl[b-4id47f3j7a] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.um-add-btn[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--t-fast);
}

.um-add-btn:hover[b-4id47f3j7a] { background: #4338ca; }
.um-add-btn .material-icons[b-4id47f3j7a] { font-size: 18px; }

/* ===== MAIN CARD ===== */
.user-card[b-4id47f3j7a] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 16px 24px 24px;
    box-shadow: var(--shadow-sm);
}

/* ===== TOOLBAR ===== */
.um-toolbar[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
}

.um-search-wrap[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 400px;
    height: 34px;
    padding: 0 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s;
}

.um-search-wrap:focus-within[b-4id47f3j7a] {
    border-color: var(--color-primary);
    background: var(--bg-card);
}

.um-search-wrap .material-icons[b-4id47f3j7a] {
    font-size: 17px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.um-search-wrap input[b-4id47f3j7a] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-primary);
    width: 100%;
}

.um-toolbar-right[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.um-bulk-delete-btn[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background-color: #fff1f2;
    color: #e11d48;
    border: 1px solid #fda4af;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: umFadeIn-b-4id47f3j7a 0.2s ease both;
}

@keyframes umFadeIn-b-4id47f3j7a {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.um-bulk-delete-btn:hover[b-4id47f3j7a] { background-color: #ffe4e6; border-color: #fb7185; }
.um-bulk-delete-btn .material-icons[b-4id47f3j7a] { font-size: 17px; }

/* ===== TABLE ===== */
.user-table-wrapper[b-4id47f3j7a] {
    width: 100%;
    overflow-x: auto;
    background: var(--bg-card);
}

.user-table-content[b-4id47f3j7a] {
    min-width: 900px;
    display: block;
}

/* Grid: checkbox | user | role | games | created | last signin | actions */
.user-grid[b-4id47f3j7a] {
    display: grid;
    grid-template-columns: 40px 2fr 100px 0.9fr 108px 145px 165px;
    align-items: center;
    width: 100%;
}

.user-table-header[b-4id47f3j7a] {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-light);
}

.user-table-header .col-cell[b-4id47f3j7a] {
    min-height: 40px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--bg-subtle);
    text-transform: uppercase;
}

.user-row[b-4id47f3j7a] {
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
    transition: background 0.12s;
}

.user-row:last-child[b-4id47f3j7a] { border-bottom: none; }
.user-row:hover[b-4id47f3j7a] { background: #fafbff; }

.col-cell[b-4id47f3j7a] {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    min-height: 64px;
    box-sizing: border-box;
}

.checkbox-cell[b-4id47f3j7a] { padding: 10px 8px 10px 16px; }

.sortable[b-4id47f3j7a] { cursor: pointer; gap: 4px; }
.sort-icon[b-4id47f3j7a] { opacity: 0.3; }

/* User info cell */
.user-info-cell[b-4id47f3j7a] { gap: 10px; }

.um-avatar[b-4id47f3j7a] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.um-avatar-placeholder[b-4id47f3j7a] {
    background: var(--color-primary-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
}

.um-user-info[b-4id47f3j7a] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.um-user-name[b-4id47f3j7a] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.um-user-email[b-4id47f3j7a] {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Games cell */
.um-games-row[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.um-game-icon[b-4id47f3j7a] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    flex-shrink: 0;
}

.um-game-more[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--bg-active);
    border: 1px solid var(--border);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Date cells */
.col-cell:has(.um-date-text)[b-4id47f3j7a] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
}

.um-date-text[b-4id47f3j7a] {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    line-height: 1.3;
}

.um-time-text[b-4id47f3j7a] {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    font-family: 'Roboto Mono', monospace;
}

/* Action buttons */
.action-cell[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 16px;
}

.um-action-btn[b-4id47f3j7a] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    transition: var(--t-fast);
    white-space: nowrap;
}

.um-action-btn .material-icons[b-4id47f3j7a] { font-size: 16px; }
.um-action-label[b-4id47f3j7a] { font-size: 12px; font-weight: 500; }

/* Assign: label + icon */
.um-action-btn.assign[b-4id47f3j7a] {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}
.um-action-btn.assign:hover[b-4id47f3j7a] { background: #e0e7ff; }

/* Role: icon only */
.um-action-btn.role[b-4id47f3j7a] {
    width: 30px;
    padding: 0;
    justify-content: center;
}
.um-action-btn.role:hover[b-4id47f3j7a] { color: #0891b2; background: #ecfeff; }

/* Delete: icon only */
.um-action-btn.del[b-4id47f3j7a] {
    width: 30px;
    padding: 0;
    justify-content: center;
}
.um-action-btn.del:hover[b-4id47f3j7a] { color: #e11d48; background: #fff1f2; }

/* Locked state */
.um-action-btn.locked[b-4id47f3j7a] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Empty state */
.um-empty-state[b-4id47f3j7a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 8px;
}

.um-empty-state .material-icons[b-4id47f3j7a] { font-size: 40px; color: #d1d5db; }
.um-empty-title[b-4id47f3j7a] { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.um-empty-sub[b-4id47f3j7a] { font-size: 13px; color: var(--text-muted); }

/* ── Role item in dropdown ── */
.role-item[b-4id47f3j7a] {
    justify-content: space-between;
    padding: 10px 14px;
}

.role-item.selected[b-4id47f3j7a] {
    background: var(--color-blue-subtle);
    color: var(--color-blue);
    font-weight: 600;
}

.checked-icon[b-4id47f3j7a] { font-size: 17px; color: var(--color-blue); }
.role-name[b-4id47f3j7a] { font-size: var(--text-md); }

/* ── Tiny icon in modal selected ── */
.tiny-icon[b-4id47f3j7a] {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--border);
}

/* ── Focus/active cleanup ── */
.modal-footer button:focus[b-4id47f3j7a],
.modal-footer button:active[b-4id47f3j7a] {
    outline: none !important;
    box-shadow: none !important;
}

.btn-primary:active[b-4id47f3j7a]  { background: var(--color-primary-hover); }
.btn-secondary:active[b-4id47f3j7a] { background: var(--bg-hover); }

/* ── Form control error ── */
.form-control.is-invalid[b-4id47f3j7a] { border-color: var(--color-danger) !important; }
.form-control.is-invalid:focus[b-4id47f3j7a] { box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important; }

/* ── Modal size variant ── */
.modal-sm[b-4id47f3j7a] { max-width: 450px !important; }

/* ===== MODALS (um-mod-*) ===== */

@keyframes umModSlide-b-4id47f3j7a    { from { opacity: 0; transform: translateY(-12px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes umModSlideOut-b-4id47f3j7a { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-12px) scale(0.95); } }
@keyframes umModFadeIn-b-4id47f3j7a   { from { opacity: 0; } to { opacity: 1; } }
@keyframes umModFadeOut-b-4id47f3j7a  { from { opacity: 1; } to { opacity: 0; } }

.um-mod-overlay[b-4id47f3j7a] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    padding: 24px;
    animation: umModFadeIn-b-4id47f3j7a 0.18s ease both;
}

.um-mod-overlay--out[b-4id47f3j7a] { animation: umModFadeOut-b-4id47f3j7a 0.18s ease forwards; }

.um-mod-modal[b-4id47f3j7a] {
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 24px 48px -8px rgba(15,23,42,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    animation: umModSlide-b-4id47f3j7a 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) both;
    display: flex;
    flex-direction: column;
}

.um-mod-modal--out[b-4id47f3j7a] { animation: umModSlideOut-b-4id47f3j7a 0.18s ease forwards; }

.um-mod-sm[b-4id47f3j7a] { max-width: 420px; }

/* Header */
.um-mod-header[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.um-mod-title-wrap[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.um-mod-title-wrap .material-icons[b-4id47f3j7a] {
    font-size: 20px;
    color: var(--color-primary);
}

.um-mod-close[b-4id47f3j7a] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--t-fast);
}

.um-mod-close:hover[b-4id47f3j7a] { background: var(--bg-hover); color: var(--text-primary); }
.um-mod-close .material-icons[b-4id47f3j7a] { font-size: 20px; }

/* Hero (user identity strip) */
.um-mod-hero[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.um-mod-hero-avatar[b-4id47f3j7a] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #e0e7ff;
    flex-shrink: 0;
}

.um-mod-hero-initial[b-4id47f3j7a] {
    background: var(--color-primary-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

.um-mod-hero-name[b-4id47f3j7a] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.um-mod-hero-sub[b-4id47f3j7a] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Body */
.um-mod-body[b-4id47f3j7a] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.um-mod-section-label[b-4id47f3j7a] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.um-mod-count-tag[b-4id47f3j7a] {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.um-mod-field[b-4id47f3j7a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.um-mod-label[b-4id47f3j7a] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.um-mod-required[b-4id47f3j7a] { color: #ef4444; margin-left: 2px; }

[b-4id47f3j7a] .um-mod-input {
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid #c4ccd6;
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-card);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

[b-4id47f3j7a] .um-mod-input:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: none;
}

.um-mod-hint[b-4id47f3j7a] {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 3px;
}

.um-mod-error[b-4id47f3j7a] { font-size: 12px; color: #ef4444; }

/* Game list-box */
.um-mod-list-box[b-4id47f3j7a] {
    border: 1.5px solid #c4ccd6;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.um-mod-list-search[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
}

.um-mod-list-search .material-icons[b-4id47f3j7a] { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }

.um-mod-list-search input[b-4id47f3j7a] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-primary);
    height: 34px;
    width: 100%;
}

.um-mod-list-body[b-4id47f3j7a] {
    max-height: 180px;
    overflow-y: auto;
}

.um-mod-list-row[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    transition: background 0.1s;
}

.um-mod-list-row:hover[b-4id47f3j7a] { background: var(--bg-hover); }
.um-mod-list-row.sel[b-4id47f3j7a]   { background: #f0f4ff; color: var(--color-primary); }
.um-mod-list-row.locked[b-4id47f3j7a] { opacity: 0.5; cursor: not-allowed; }

.um-mod-chk[b-4id47f3j7a] {
    width: 15px;
    height: 15px;
    border: 1.5px solid #c4ccd6;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--t-fast);
}

.um-mod-chk.on[b-4id47f3j7a] {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.um-mod-chk.on[b-4id47f3j7a]::after {
    content: '';
    display: block;
    width: 4px;
    height: 7px;
    border: 2px solid white;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
}

.um-mod-chk.locked[b-4id47f3j7a] { background: var(--bg-active); border-color: var(--border); }

.um-mod-list-sep[b-4id47f3j7a] { height: 1px; background: var(--border-light); }

.um-mod-game-icon[b-4id47f3j7a] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.um-mod-user-info[b-4id47f3j7a] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.um-mod-item-name[b-4id47f3j7a] { font-size: 13px; font-weight: 500; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-mod-item-sub[b-4id47f3j7a]  { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-mod-lock-icon[b-4id47f3j7a] { font-size: 14px !important; color: #9ca3af; margin-left: auto; }

/* Role pills */
.um-role-grid[b-4id47f3j7a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 4px;
}

.um-role-pill[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    transition: var(--t-fast);
    position: relative;
}

.um-role-pill:hover:not(.locked)[b-4id47f3j7a] {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
}

.um-role-pill.active[b-4id47f3j7a] {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
}

.um-role-pill.locked[b-4id47f3j7a] {
    opacity: 0.45;
    cursor: not-allowed;
}

.um-role-icon[b-4id47f3j7a] { font-size: 18px; color: var(--color-primary); }
.um-role-name[b-4id47f3j7a] { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: capitalize; flex: 1; }
.um-role-lock[b-4id47f3j7a] { font-size: 14px !important; color: #9ca3af; }

.um-role-pill.active .um-role-name[b-4id47f3j7a] { color: var(--color-primary); }

/* Checkbox row */
.um-mod-checkbox-row[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 0;
}

.um-mod-checkbox-row input[type="checkbox"][b-4id47f3j7a] { flex-shrink: 0; }

/* Warning body */
.um-warn-body[b-4id47f3j7a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 24px 20px;
}

.um-warn-icon-wrap[b-4id47f3j7a] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff1f2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.um-warn-icon-wrap .material-icons[b-4id47f3j7a] { font-size: 28px; color: #e11d48; }

.um-warn-title[b-4id47f3j7a] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.um-warn-sub[b-4id47f3j7a] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Footer */
.um-mod-footer[b-4id47f3j7a] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-subtle);
    border-radius: 0 0 16px 16px;
    flex-shrink: 0;
}

.um-mod-btn-cancel[b-4id47f3j7a] {
    height: 36px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--t-fast);
}

.um-mod-btn-cancel:hover[b-4id47f3j7a] { background: var(--bg-hover); }

.um-mod-btn-save[b-4id47f3j7a] {
    height: 36px;
    padding: 0 18px;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    border: none;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--t-fast);
}

.um-mod-btn-save:hover[b-4id47f3j7a] { background: #4338ca; }
.um-mod-btn-save .material-icons[b-4id47f3j7a] { font-size: 17px; }

.um-mod-btn-danger[b-4id47f3j7a] {
    height: 36px;
    padding: 0 18px;
    border-radius: var(--radius-md);
    background: #e11d48;
    border: none;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--t-fast);
}

.um-mod-btn-danger:hover[b-4id47f3j7a] { background: #be123c; }
.um-mod-btn-danger .material-icons[b-4id47f3j7a] { font-size: 17px; }