.svc-page {
    --svc-ink: #223c43;
    --svc-muted: #63797d;
    --svc-accent: #167d8d;
    --svc-border: #e0e9e8;
    --svc-body-text: #223c43;
    --svc-page-background: #f5f8f7;
    --svc-soft: #e8f2f1;
    --svc-hover: #edf6f4;
    --svc-control-background: #fbfdfc;
    --svc-control-border: #ccdcd9;
    --svc-active-border: #d3e7e2;
    --svc-accent-soft: #e2f0ee;
    --svc-shadow-rgb: 34 60 67;
    --svc-page-gutter: 24px;
    background: var(--svc-page-background);
}
/* Navigation inherits the original application palette independently of content. */
.svc-page :is(header, .header, .navbar, .navmenu) {
    --svc-ink: var(--heading-color, var(--bs-dark, #012970));
    --svc-body-text: var(--default-color, var(--bs-body-color, #444444));
    --svc-muted: #6c757d;
    --svc-accent: var(--accent-color, var(--bs-primary, #0d6efd));
    --svc-border: #dee2e6;
    --svc-soft: color-mix(in srgb, var(--svc-accent) 6%, white);
    --svc-hover: color-mix(in srgb, var(--svc-accent) 4%, white);
    --svc-control-background: #ffffff;
    --svc-control-border: #ced4da;
    --svc-active-border: color-mix(in srgb, var(--svc-accent) 20%, white);
    --svc-accent-soft: color-mix(in srgb, var(--svc-accent) 10%, white);
    --svc-shadow-rgb: 1 41 112;
    color: var(--svc-body-text);
}
.svc-page.svc-sidebar-page :is(.header, .sidebar) {
    --svc-ink: #012970;
    --svc-muted: #899bbd;
    --svc-accent: #4154f1;
    --svc-border: #ebeef4;
    --svc-body-text: #444444;
    --svc-soft: #f6f9ff;
    --svc-hover: #f6f9ff;
    --svc-control-background: #ffffff;
    --svc-control-border: #ced4da;
    --svc-active-border: #d9dfff;
    --svc-accent-soft: #eef1ff;
    --svc-shadow-rgb: 1 41 112;
    color: var(--svc-body-text);
}
.svc-page .main > .section,
.svc-page .vcaMap { width: calc(100% - 2 * var(--svc-page-gutter)); max-width: none; margin-inline: auto; }
.svc-page .main > .section:not(.hero) { padding: 26px 0; background: transparent; }
.svc-page .card {
    border: 1px solid var(--svc-border);
    border-radius: 18px;
    box-shadow: 0 4px 18px rgb(var(--svc-shadow-rgb) / 4%);
}
.svc-page .dashboard .card { height: 100%; }
.svc-page .card-body { padding: 24px; min-width: 0; }
.svc-page .card-title {
    min-height: auto;
    color: var(--svc-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    padding: 0;
    margin-bottom: 20px;
}
.svc-page .card-title span { font-size: 12px; font-weight: 500; color: var(--svc-muted); }
.svc-page .card-header { padding: 20px 24px; background: transparent; border-bottom: 1px solid var(--svc-border); }
.svc-page .card-header :is(h5, h6) { margin: 0; color: var(--svc-ink); font-size: 16px; font-weight: 700; }
.svc-page .card-header .svc-metric-svg { display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; color: var(--svc-accent); }
.svc-page .svc-metric-card { margin-bottom: 0; }
.svc-page .svc-metric-grid { row-gap: 16px; }
.svc-page .svc-metric-card .card-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 18px; height: 100%; }
.svc-page .svc-metric-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; background: var(--svc-soft); color: var(--svc-accent); }
.svc-page .svc-metric-warning { background: #faf3e5; color: #a57829; }
.svc-page .svc-metric-danger { background: #faece9; color: #b05a54; }
.svc-metric-svg { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.svc-page .svc-metric-copy { min-width: 0; width: 100%; }
.svc-page .svc-metric-label { color: var(--svc-muted); font-size: 12px; font-weight: 600; line-height: 1.5; min-height: 3em; margin: 0 0 8px; }
.svc-page .svc-metric-value { color: var(--svc-ink); font-size: clamp(23px, 2.3vw, 30px); font-weight: 750; line-height: 1.2; letter-spacing: -.6px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin: 0; }
.svc-page .svc-metric-note { margin: 8px 0 0; color: var(--svc-muted); font-size: 12px; line-height: 1.5; }
.svc-page .svc-metric-card .svc-metric-value { padding: 0; }
.svc-page .card-title > .svc-metric-svg { display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; color: var(--svc-accent); }
.svc-page .info-card .filter { position: static; padding: 18px 24px 0; align-self: flex-end; }
.svc-page .info-card:has(> .filter) { display: flex; flex-direction: column; }
.svc-page .info-card > .filter + .card-body { padding-top: 14px; }
.svc-page .info-card .card-icon { width: 44px; height: 44px; background: var(--svc-soft); color: var(--svc-accent); border-radius: 13px !important; }
.svc-page .dashboard > .row:not(.g-4) > [class*="col-"] { margin-bottom: 24px; }
.svc-page .dashboard .svc-chart-state { min-height: 300px; }
.svc-page .apexcharts-tooltip { border-color: var(--svc-border); border-radius: 10px; box-shadow: 0 4px 18px rgb(var(--svc-shadow-rgb) / 8%); }
.svc-page .apexcharts-toolbar { z-index: 3; }
.svc-page .svc-forecast-heading { flex: 1 1 260px; min-width: 0; }
.svc-page .svc-forecast-heading small { display: block; max-width: 34rem; }
.svc-page .svc-forecast-filters { margin-left: auto; max-width: 100%; }
.svc-page .svc-forecast-card { min-width: 0; }
.svc-page .svc-forecast-card .svc-forecast-header { row-gap: 20px !important; }
.svc-page .svc-forecast-card .svc-forecast-filters { gap: 12px !important; }
.svc-page .svc-forecast-card .svc-forecast-filters > div { min-width: 130px; max-width: 100%; }
.svc-page .svc-forecast-card .svc-forecast-filters :is(.form-select, .dropdown-toggle) { width: 100%; text-align: left; }
.svc-page .svc-forecast-card .svc-forecast-filters .dropdown-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; white-space: normal; }
.svc-page .svc-forecast-scope { color: var(--svc-muted); margin-top: 6px; font-size: 12px; overflow-wrap: anywhere; }
.svc-page .svc-forecast-canvas { width: 100%; min-height: 350px; }
.svc-page .svc-forecast-canvas .apexcharts-xaxis-annotations { pointer-events: none; }
.svc-page .svc-forecast-status { margin: 0 0 16px; color: var(--svc-muted); }
.svc-page .svc-forecast-note { padding: 14px 16px; border-color: var(--svc-border) !important; border-radius: 10px; color: var(--svc-muted); background: var(--svc-control-background); line-height: 1.65; }
.svc-page .svc-forecast-card .apexcharts-tooltip { border-color: var(--svc-border); border-radius: 10px; box-shadow: 0 4px 18px rgb(var(--svc-shadow-rgb) / 8%); }
.svc-page .svc-market-forecast .svc-forecast-filters > div { min-width: 170px; }
.svc-page .svc-market-context { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--svc-border); font-size: 12px; color: var(--svc-ink); }
.svc-page .svc-market-context-item { overflow-wrap: anywhere; }
.svc-page .svc-market-summary { color: var(--svc-muted); line-height: 1.6; margin-bottom: 16px; overflow-wrap: anywhere; }
.svc-page .svc-market-chart { min-height: 350px; min-width: 0; }
.svc-page .svc-market-status { margin: 0; padding: 130px 16px; text-align: center; background: var(--svc-control-background); border-radius: 10px; }
.svc-page .svc-market-status .spinner-border { vertical-align: middle; color: var(--svc-accent); }
.svc-page .svc-market-forecast .apexcharts-tooltip { max-width: min(320px, calc(100vw - 48px)); white-space: normal; overflow-wrap: anywhere; }
.svc-page .svc-section-header { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 24px; }
.svc-page .svc-eyebrow { display: block; color: var(--svc-accent); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 8px; }
.svc-page .svc-section-header h2 { color: var(--svc-ink); font-size: clamp(23px, 3vw, 30px); font-weight: 750; margin-bottom: 8px; }
.svc-page .svc-section-header p { color: var(--svc-muted); font-size: 14px; margin-bottom: 0; max-width: 640px; }
.svc-page .svc-scope { display: flex; align-items: center; gap: 9px; padding: 10px 14px; color: var(--svc-accent); background: var(--svc-soft); border-radius: 30px; font-size: 13px; white-space: nowrap; }
.svc-page .svc-scope::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.svc-page .svc-chart-note { color: var(--svc-muted); font-size: 12px; margin: -10px 0 14px; }
.svc-page .svc-filter-toggle,
.svc-page .form-select,
.svc-page .dropdown-toggle {
    min-height: 44px;
    border: 1px solid var(--svc-control-border);
    border-radius: 10px;
    background-color: var(--svc-control-background);
    color: var(--svc-ink);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}
.svc-page .svc-filter-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; max-width: 100%; text-decoration: none; }
.svc-page .svc-filter-toggle svg { flex: 0 0 18px; color: var(--svc-accent); }
.svc-page .svc-filter-value { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.svc-page .svc-filter-toggle:hover,
.svc-page .dropdown-toggle:hover { border-color: var(--svc-accent); background: var(--svc-hover); }
.svc-page .form-label { color: var(--svc-muted) !important; font-size: 11px; letter-spacing: .02em; }
.svc-page :is(.svc-filter-toggle, .form-select, .svc-legend-row, .dropdown-item):focus-visible {
    outline: 3px solid var(--svc-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--svc-accent-soft);
}
.svc-page :is(.main, .swiper) .dropdown-menu { max-height: 300px; overflow-y: auto; max-width: min(360px, 88vw); padding: 7px; border-radius: 12px; border: 1px solid var(--svc-border); box-shadow: 0 10px 32px rgb(var(--svc-shadow-rgb) / 12%); }
.svc-page :is(.main, .swiper) .dropdown-item { border-radius: 7px; padding: 10px 14px; font-size: 13px; white-space: normal; color: var(--svc-ink); }
.svc-page :is(.main, .swiper) .dropdown-item:hover { background: var(--svc-hover); }
.svc-page :is(.main, .swiper) .dropdown-item.active { color: var(--svc-accent); background: var(--svc-soft); font-weight: 650; }
.svc-page :is(.main, .swiper) .dropdown-item.active::after { content: '✓'; float: right; margin-left: 16px; }
.svc-page :is(.main, .swiper) .dropdown-header { color: var(--svc-muted); font-size: 11px; padding: 6px 12px; }
.svc-page .market .info-card { display: flex; flex-direction: column; }
.svc-page .market .info-card .filter { position: static !important; order: 0; padding: 18px 24px 0 !important; align-self: flex-end; }
.svc-page .market .info-card .card-body { display: block; height: auto; padding-top: 14px; }
.svc-page .market .info-card .card-title { margin-bottom: 14px; }
.svc-page .market .info-card .card-title .selected-filter { display: none; }
.svc-page .svc-donut { width: 100%; height: auto !important; min-height: 300px; max-width: none !important; }
.svc-page .svc-donut-visual { position: relative; width: min(220px, 100%); margin: 0 auto 10px; aspect-ratio: 1; }
.svc-page .svc-donut-visual > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.svc-page .svc-donut-center { position: absolute; inset: 28%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; pointer-events: none; text-align: center; }
.svc-page .svc-donut-center span { color: var(--svc-muted); font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.svc-page .svc-donut-center strong { color: var(--svc-ink); font-size: 27px; font-weight: 750; letter-spacing: -.7px; }
.svc-page .svc-donut-arc { transition: opacity .16s ease; }
.svc-page .svc-donut-legend { list-style: none; margin: 0; padding: 0; max-height: 230px; overflow-y: auto; }
.svc-page .svc-legend-row { display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 5px; background: transparent; border: 0; border-bottom: 1px solid var(--svc-border); color: var(--svc-ink); text-align: left; font-size: 12px; border-radius: 4px; }
.svc-page .svc-legend-row:hover, .svc-page .svc-legend-row:focus { background: var(--svc-soft); }
.svc-page .svc-legend-swatch { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.svc-page .svc-legend-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.svc-page .svc-legend-value { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 650; }
.svc-page .svc-legend-share { min-width: 42px; color: var(--svc-muted); text-align: right; }
.svc-page .svc-chart-state { padding: 24px 10px; text-align: center; color: var(--svc-muted); font-size: 13px; }
.svc-page .svc-chart-state svg { display: block; width: 175px; margin: 0 auto 20px; }
.svc-page .dashboard .apexcharts-text { fill: var(--svc-muted); }
.svc-sidebar-page #main { padding: 24px; }
.svc-sidebar-page .main > .section,
.svc-sidebar-page .vcaMap { width: 100%; }
.svc-sidebar-page .main > .section:not(.hero) { padding: 20px 0; }
.svc-sidebar-page .svc-farm-overview .card { margin-bottom: 0; }
.svc-sidebar-page .svc-farm-overview .form-select { width: auto; max-width: 100%; }
.svc-page .svc-directory .svc-section-header h2 { font-size: 23px; }
.svc-page #tabMenu { gap: 8px; border-bottom: 1px solid var(--svc-border); padding-bottom: 12px; }
.svc-page #tabMenu .nav-link { display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; padding: 11px 14px; color: var(--svc-muted); font-size: 13px; font-weight: 600; }
.svc-page #tabMenu .nav-link.active { color: var(--svc-accent); background: var(--svc-soft); border-color: var(--svc-active-border); }
.svc-page #tabMenu .nav-link:hover { background: var(--svc-hover); }
.svc-page #tabMenu .nav-link:focus-visible { outline: 3px solid var(--svc-accent); outline-offset: 2px; }
.svc-page .svc-tab-count { background: white; color: var(--svc-ink); padding: 1px 7px; border-radius: 20px; font-size: 11px; }
.svc-page .svc-directory-status { margin: 16px 0; color: var(--svc-muted); font-size: 12px; }
.svc-page .svc-directory-table { max-height: 360px; border: 1px solid var(--svc-border); border-radius: 10px; }
.svc-page .svc-directory-table th { background: var(--svc-soft); color: var(--svc-muted); white-space: nowrap; font-size: 12px; position: sticky; top: 0; }
.svc-page .svc-directory-table td { color: var(--svc-ink); font-size: 13px; }
.svc-page .svc-directory-table :is(th, td) { padding: 13px 16px; border-color: var(--svc-border); }
.svc-page .svc-directory-table tbody tr:hover { background: var(--svc-hover); }
@media (max-width: 767px) {
    .svc-page { --svc-page-gutter: 12px; }
    .svc-sidebar-page #main { padding: 16px 12px; }
    .svc-page #tabMenu { flex-wrap: nowrap; overflow-x: auto; padding: 4px 3px 12px; }
    .svc-page #tabMenu .nav-link { white-space: nowrap; }
    .svc-page .card-body { padding: 18px; }
    .svc-page .svc-section-header { align-items: flex-start; flex-direction: column; gap: 14px; }
    .svc-page .card-body > .d-flex.flex-wrap { gap: 16px; }
    .svc-page .svc-forecast-header > .svc-forecast-heading,
    .svc-page .svc-forecast-header > .svc-forecast-filters { flex-basis: 100%; width: 100%; }
    .svc-page .card-body .d-flex.flex-wrap > div:has(> .form-select),
    .svc-page .card-body .d-flex.flex-wrap > div:has(> .dropdown) { flex: 1 1 140px; min-width: 0; }
    .svc-page .form-select, .svc-page .svc-filter-toggle { width: 100%; min-width: 0 !important; }
    .svc-page .svc-legend-row { flex-wrap: wrap; }
    .svc-page .svc-legend-share { min-width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .svc-page .svc-donut-arc { transition: none; }
}
