/*! magus/panel · built by bin/build from resources/css/src: edit the sources, not this file. */
:root {
--mp-font-display: 'Outfit', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
--mp-font-text: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
--mp-fill: var(--primary-600);
--mp-fill-deep: var(--primary-700);
--mp-accent-text: var(--primary-700);
--mp-ring: var(--primary-700);
--mp-bright: var(--primary-500);
--mp-accent-soft: var(--primary-400);
--mp-accent-mid: var(--primary-500);
--mp-on-fill: #ffffff;
--mp-ink: var(--gray-950);
--mp-ink-2: var(--gray-700);
--mp-muted: var(--gray-600);
--mp-ground: #e9eff5;
--mp-ground-2: #dfe8f1;
--mp-wash-a: color-mix(in oklab, var(--mp-accent-mid) 14%, transparent);
--mp-wash-b: rgb(99 102 241 / 0.1);
--mp-frame: rgb(255 255 255 / 0.74);
--mp-blur: blur(16px) saturate(165%);
--mp-card: rgb(255 255 255 / 0.9);
--mp-raise: #ffffff;
--mp-sunk: rgb(15 42 58 / 0.045);
--mp-track: rgb(15 42 58 / 0.08);
--mp-solid: #ffffff;
--mp-solid-hover: #f4f7fa;
--mp-stroke: rgb(15 42 58 / 0.09);
--mp-stroke-2: rgb(15 42 58 / 0.14);
--mp-shadow-sm: 0 2px 8px -3px rgb(13 42 64 / 0.16);
--mp-shadow: 0 16px 34px -20px rgb(13 42 64 / 0.42);
--mp-shadow-lg: 0 26px 56px -28px rgb(13 42 64 / 0.5);
--mp-r-xl: 24px;
--mp-r-lg: 18px;
--mp-r-md: 12px;
--mp-r-sm: 8px;
--mp-gap: 14px;
--mp-header-offset: 2rem;
--mp-good: #036b4e;
--mp-good-wash: rgb(3 107 78 / 0.12);
--mp-warn: #8a4f00;
--mp-warn-wash: rgb(194 116 10 / 0.14);
--mp-bad: #c8102e;
--mp-bad-wash: rgb(225 29 72 / 0.11);
--mp-info: #4338ca;
--mp-info-wash: rgb(79 70 229 / 0.11);
--mp-danger-bar: #b91c1c;
color-scheme: light;
}
html.dark {
--mp-ink: var(--gray-50);
--mp-ink-2: var(--gray-300);
--mp-muted: var(--gray-400);
--mp-ground: #080d13;
--mp-ground-2: #0d141d;
--mp-wash-a: color-mix(in oklab, var(--mp-accent-mid) 16%, transparent);
--mp-wash-b: rgb(99 102 241 / 0.13);
--mp-frame: rgb(18 26 36 / 0.62);
--mp-card: rgb(18 26 36 / 0.92);
--mp-raise: #172130;
--mp-sunk: rgb(255 255 255 / 0.04);
--mp-track: rgb(255 255 255 / 0.08);
--mp-solid: #172130;
--mp-solid-hover: #1e2937;
--mp-stroke: rgb(168 205 224 / 0.13);
--mp-stroke-2: rgb(168 205 224 / 0.22);
--mp-shadow-sm: 0 2px 8px -3px rgb(0 0 0 / 0.6);
--mp-shadow: 0 18px 38px -22px rgb(0 0 0 / 0.8);
--mp-shadow-lg: 0 28px 60px -30px rgb(0 0 0 / 0.9);
--mp-good: #34d399;
--mp-good-wash: rgb(52 211 153 / 0.14);
--mp-warn: #fbbf24;
--mp-warn-wash: rgb(251 191 36 / 0.14);
--mp-bad: #fc8a9b;
--mp-bad-wash: rgb(252 138 155 / 0.14);
--mp-info: #a5b4fc;
--mp-info-wash: rgb(129 140 248 / 0.16);
color-scheme: dark;
}
.mp-logo {
display: flex;
align-items: center;
gap: 0.7rem;
}
.mp-logo-mark {
width: 2.35rem;
height: 2.35rem;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 0.8rem;
background: linear-gradient(145deg, var(--mp-fill), var(--mp-fill-deep));
color: var(--mp-on-fill);
font-family: var(--mp-font-display);
font-weight: 800;
font-size: 1.15rem;
box-shadow:
0 10px 22px -10px var(--mp-fill),
inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.mp-logo-text {
font-family: var(--mp-font-display);
font-weight: 700;
font-size: 1.02rem;
letter-spacing: -0.015em;
line-height: 1.15;
color: var(--mp-ink);
text-align: start;
}
.mp-logo-text small {
display: block;
font-family: var(--mp-font-text);
font-weight: 500;
font-size: 0.66rem;
letter-spacing: 0.01em;
color: var(--mp-muted);
margin-top: 0.1rem;
}
.mp-version {
display: grid;
justify-items: center;
gap: 0.1rem;
padding: 0.5rem 1rem 1.25rem;
text-align: center;
color: var(--mp-muted);
font-size: 0.72rem;
line-height: 1.35;
}
.mp-version-name {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.mp-version-semver {
font-family: var(--mono-font-family, ui-monospace), ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.66rem;
}
.mp-impersonation {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
min-height: 2.75rem;
padding: 0.35rem 1rem;
background: var(--mp-danger-bar);
color: #ffffff;
font-size: 0.875rem;
line-height: 1.25rem;
box-shadow: 0 2px 10px rgb(127 29 29 / 0.35);
}
.mp-impersonation-text {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mp-impersonation-text strong {
font-weight: 700;
}
.mp-impersonation-stop {
flex: none;
margin: 0;
}
.mp-impersonation-stop button {
padding: 0.25rem 0.875rem;
border: 0;
border-radius: 999px;
background: #ffffff;
color: var(--mp-danger-bar);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.mp-impersonation-stop button:hover,
.mp-impersonation-stop button:focus-visible {
background: #fee2e2;
outline: 2px solid #ffffff;
outline-offset: 2px;
}
@media (max-width: 1023.98px) {
.mp-impersonation {
font-size: 0.8rem;
}
}
html.fi {
background: var(--mp-ground);
}
.fi-body {
background: transparent;
font-family: var(--font-family), ui-sans-serif, system-ui, sans-serif;
}
.fi-body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(900px 520px at 88% -10%, var(--mp-wash-b), transparent 62%),
radial-gradient(820px 480px at 2% 2%, var(--mp-wash-a), transparent 58%),
linear-gradient(165deg, var(--mp-ground), var(--mp-ground-2));
}
.fi-main-ctn,
.fi-topbar-ctn,
.fi-layout {
background: transparent;
}
.fi-header-heading,
.fi-simple-header-heading,
.fi-section-header-heading,
.fi-ta-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-value {
font-family: var(--mp-font-display);
}
.fi-header-heading {
font-weight: 700;
font-size: 1.9rem;
letter-spacing: -0.03em;
text-wrap: balance;
}
.fi-header-subheading {
color: var(--mp-muted);
}
.fi-section-header-heading,
.fi-ta-header-heading,
.fi-modal-heading {
font-weight: 600;
letter-spacing: -0.012em;
}
.fi-breadcrumbs-item-label {
color: var(--mp-muted);
}
.fi-ta-text-item {
font-variant-numeric: tabular-nums;
}
.fi-sidebar {
isolation: isolate;
border: 1px solid var(--mp-stroke);
box-shadow: var(--mp-shadow);
background: transparent;
}
.fi-sidebar::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--mp-frame);
backdrop-filter: var(--mp-blur);
-webkit-backdrop-filter: var(--mp-blur);
pointer-events: none;
}
@media (min-width: 1024px) {
.fi-sidebar {
position: fixed;
top: var(--mp-gap);
inset-inline-start: var(--mp-gap);
height: auto;
max-height: calc(100dvh - var(--mp-gap) * 2);
border-radius: var(--mp-r-xl);
z-index: 40;
}
.fi-sidebar-nav {
min-height: 0;
overscroll-behavior: contain;
}
.fi-main-ctn {
margin-inline-start: calc(var(--sidebar-width) + var(--mp-gap) * 2);
}
.fi-sidebar-header {
display: flex;
}
.fi-topbar-start .fi-logo,
.fi-topbar-start a:has(> .fi-logo) {
display: none;
}
}
@media (max-width: 1023.98px) {
.fi-sidebar::before {
background: var(--mp-solid);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
.fi-sidebar-header {
background: transparent;
border-block-end: 1px solid var(--mp-stroke);
box-shadow: none;
}
.fi-sidebar-nav {
padding-block: 0.5rem;
}
.fi-sidebar-group-label {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mp-muted);
}
.fi-sidebar-item-btn {
border-radius: 999px;
font-weight: 600;
border: 1px solid transparent;
}
.fi-sidebar-item-btn:hover {
background: var(--mp-sunk);
}
.fi-sidebar-item-btn:focus-visible {
outline: 2px solid var(--mp-ring);
outline-offset: 2px;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
background: linear-gradient(135deg, var(--mp-fill-deep), var(--mp-fill));
color: var(--mp-on-fill);
box-shadow: 0 12px 24px -12px var(--mp-fill);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-sidebar-item-label {
color: var(--mp-on-fill);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-badge {
background: rgb(255 255 255 / 0.2);
color: var(--mp-on-fill);
--tw-ring-color: transparent;
}
.fi-sidebar-item-badge-ctn .fi-badge {
font-family: var(--mp-font-display);
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.fi-sidebar-footer {
padding-block-end: 0.5rem;
}
.fi-topbar {
position: relative;
isolation: isolate;
background: transparent;
border: 1px solid var(--mp-stroke);
box-shadow: var(--mp-shadow-sm);
}
.fi-topbar::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--mp-frame);
backdrop-filter: var(--mp-blur);
-webkit-backdrop-filter: var(--mp-blur);
pointer-events: none;
}
.fi-topbar-ctn {
background: transparent;
}
@media (min-width: 1024px) {
.fi-topbar {
margin-block-start: var(--mp-gap);
margin-inline-start: calc(var(--sidebar-width) + var(--mp-gap) * 2);
margin-inline-end: var(--mp-gap);
border-radius: var(--mp-r-lg);
}
.fi-topbar-end {
flex: 1;
gap: 0.9rem;
}
.fi-topbar-end .fi-global-search-ctn {
margin-inline-end: auto;
flex: 0 1 26rem;
min-width: 0;
}
}
.fi-topbar-item-btn {
border-radius: 999px;
}
.fi-global-search-field .fi-input-wrp {
border-radius: 999px;
background: var(--mp-sunk);
border-color: transparent;
}
.fi-global-search-field .fi-input-wrp:focus-within {
background: var(--mp-raise);
}
.mp-topbar-btn,
.fi-topbar-database-notifications-btn {
margin-inline: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
display: grid;
place-items: center;
background: var(--mp-raise);
border: 1px solid var(--mp-stroke);
color: var(--gray-600);
cursor: pointer;
}
html.dark .mp-topbar-btn,
html.dark .fi-topbar-database-notifications-btn {
color: var(--gray-300);
}
.mp-topbar-btn:hover,
.fi-topbar-database-notifications-btn:hover {
background: var(--mp-solid-hover);
color: var(--mp-accent-text);
}
.mp-topbar-btn:focus-visible,
.fi-topbar-database-notifications-btn:focus-visible {
outline: 2px solid var(--mp-ring);
outline-offset: 2px;
}
.mp-topbar-btn svg {
width: 1.05rem;
height: 1.05rem;
}
.mp-theme-toggle {
display: flex;
}
.fi-section,
.fi-ta-ctn,
.fi-wi-chart,
.fi-fieldset,
.fi-sc-tabs.fi-contained,
.fi-tabs.fi-contained {
background: var(--mp-card);
border: 1px solid var(--mp-stroke);
border-radius: var(--mp-r-xl);
box-shadow: var(--mp-shadow);
}
.fi-section .fi-section,
.fi-section .fi-ta-ctn,
.fi-modal-window .fi-section,
.fi-modal-window .fi-ta-ctn {
box-shadow: none;
background: transparent;
}
.fi-section-header,
.fi-ta-header {
border-block-end: 1px solid var(--mp-stroke);
}
.fi-section-content-ctn,
.fi-ta-content,
.fi-ta-header-toolbar,
.fi-ta-ctn .fi-pagination {
background: transparent;
}
.fi-ta-ctn .fi-pagination {
border-block-start: 1px solid var(--mp-stroke);
}
.fi-dropdown-panel,
.fi-modal-window,
.fi-no-notification,
.fi-global-search-results-ctn,
.fi-select-input-options-ctn,
.fi-fo-date-time-picker-panel {
background: var(--mp-solid);
border: 1px solid var(--mp-stroke-2);
box-shadow: var(--mp-shadow-lg);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.fi-dropdown-panel {
border-radius: var(--mp-r-md);
}
.fi-modal-window {
border-radius: var(--mp-r-xl);
}
.fi-global-search-results-ctn {
border-radius: var(--mp-r-lg);
overflow: hidden;
}
.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:focus-visible {
background: var(--mp-solid-hover);
}
.fi-dropdown-list-item:focus-visible {
outline: 2px solid var(--mp-ring);
outline-offset: -2px;
}
.fi-modal-close-overlay {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.fi-ta-header-cell {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--mp-muted);
}
.fi-ta-header-cell .fi-ta-header-cell-sort-btn,
.fi-ta-header-cell button {
text-transform: inherit;
letter-spacing: inherit;
}
.fi-ta-row:hover {
background: var(--mp-sunk);
}
.fi-ta-row.fi-selected {
background: color-mix(in oklab, var(--mp-accent-mid) 8%, transparent);
}
.fi-btn {
border-radius: 999px;
font-weight: 600;
}
.fi-btn.fi-color-primary:not(.fi-outlined) {
--bg: var(--mp-fill);
--text: var(--mp-on-fill);
--hover-bg: var(--mp-fill-deep);
--hover-text: var(--mp-on-fill);
--dark-bg: var(--mp-fill);
--dark-text: var(--mp-on-fill);
--dark-hover-bg: var(--mp-fill-deep);
--dark-hover-text: var(--mp-on-fill);
}
.fi-badge {
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.005em;
}
.fi-input-wrp {
border-radius: var(--mp-r-md);
background: var(--mp-raise);
}
.fi-input-wrp:focus-within {
box-shadow: 0 0 0 2px var(--mp-ring), var(--mp-shadow-sm);
}
.fi-tabs {
border-radius: 999px;
background: var(--mp-sunk);
}
.fi-tabs-item {
border-radius: 999px;
font-weight: 600;
}
.fi-tabs-item:focus-visible {
outline: 2px solid var(--mp-ring);
outline-offset: 2px;
}
.fi-link.fi-color-primary,
.fi-tabs-item.fi-active .fi-tabs-item-label {
color: var(--mp-accent-text);
}
.fi-link:focus-visible,
.fi-pagination-item-btn:focus-visible,
.fi-ta-header-cell-sort-btn:focus-visible {
outline: 2px solid var(--mp-ring);
outline-offset: 2px;
border-radius: 6px;
}
@media (prefers-reduced-motion: no-preference) {
.fi-sidebar-item-btn,
.fi-btn,
.fi-ta-row,
.fi-topbar-item-btn,
.mp-topbar-btn,
.fi-dropdown-list-item {
transition:
background-color 0.16s ease,
color 0.16s ease,
box-shadow 0.16s ease;
}
}
@media (prefers-reduced-motion: reduce) {
.fi-body *,
.fi-body *::before,
.fi-body *::after {
scroll-behavior: auto;
}
}
.fi-user-menu > .fi-dropdown-trigger,
.fi-user-menu .fi-dropdown-trigger > button,
.fi-user-menu-trigger {
display: flex;
align-items: center;
background: transparent;
border: 0;
padding: 0;
border-radius: 999px;
}
.fi-user-menu-trigger:focus-visible {
outline: 2px solid var(--mp-ring);
outline-offset: 3px;
}
@media (min-width: 1024px) {
.mp-user-card {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.05rem;
padding: 0.28rem 0.95rem 0.28rem 2.7rem;
margin-inline-start: -2.35rem;
border-radius: 999px;
background: var(--mp-raise);
border: 1px solid var(--mp-stroke);
line-height: 1.2;
white-space: nowrap;
}
.mp-user-card b {
font-size: 0.78rem;
font-weight: 700;
color: var(--mp-ink);
}
.mp-user-card span {
font-size: 0.66rem;
font-weight: 500;
color: var(--mp-muted);
}
.fi-user-menu {
position: relative;
z-index: 2;
}
}
@media (max-width: 1023.98px) {
.mp-user-card {
display: none;
}
}
.fi-user-menu .fi-dropdown-panel {
width: 12.5rem;
max-width: 12.5rem;
background: linear-gradient(140deg, var(--mp-fill-deep) 0%, var(--mp-fill) 100%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: transparent;
border-radius: var(--mp-r-md);
box-shadow: var(--mp-shadow-lg), 0 18px 40px -22px var(--mp-fill-deep);
color: var(--mp-on-fill);
}
.fi-user-menu .fi-dropdown-panel > * {
border-color: rgb(255 255 255 / 0.16);
}
.fi-user-menu .fi-dropdown-list {
padding: 0.25rem;
}
.fi-user-menu .fi-dropdown-list-item {
padding: 0.4rem 0.6rem;
border-radius: var(--mp-r-sm);
font-size: 0.8125rem;
font-weight: 500;
}
.fi-user-menu .fi-dropdown-list-item,
.fi-user-menu .fi-dropdown-list-item-label,
.fi-user-menu .fi-dropdown-list-item > .fi-icon,
.fi-user-menu .fi-dropdown-header,
.fi-user-menu .fi-dropdown-header span,
.fi-user-menu .fi-dropdown-header .fi-icon {
color: var(--mp-on-fill);
}
.fi-user-menu .fi-dropdown-list-item:hover,
.fi-user-menu .fi-dropdown-list-item:focus-visible {
background: rgb(255 255 255 / 0.14);
}
.fi-user-menu .fi-dropdown-list-item:focus-visible {
outline: 2px solid var(--mp-on-fill);
outline-offset: -2px;
}
.fi-user-menu .fi-dropdown-list-item.fi-color-danger,
.fi-user-menu .fi-dropdown-list-item.fi-color-danger .fi-dropdown-list-item-label,
.fi-user-menu .fi-dropdown-list-item.fi-color-danger > .fi-icon {
color: var(--mp-on-fill);
font-weight: 700;
}
.fi-user-menu .fi-theme-switcher {
padding: 0.1rem 0.25rem;
}
.fi-user-menu .fi-theme-switcher-btn {
padding: 0.35rem;
border-radius: var(--mp-r-sm);
color: rgb(255 255 255 / 0.78);
}
.fi-user-menu .fi-theme-switcher-btn:hover,
.fi-user-menu .fi-theme-switcher-btn:focus-visible,
.fi-user-menu .fi-theme-switcher-btn.fi-active {
background: rgb(255 255 255 / 0.18);
color: var(--mp-on-fill);
}
.fi-user-menu .fi-theme-switcher-btn:focus-visible {
outline: 2px solid var(--mp-on-fill);
outline-offset: -2px;
}
.fi-wi-stats-overview-stat {
background: var(--mp-card);
border: 1px solid var(--mp-stroke);
border-radius: var(--mp-r-xl);
box-shadow: var(--mp-shadow);
}
.fi-wi-stats-overview-stat-label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--mp-muted);
}
.fi-wi-stats-overview-stat-value {
font-weight: 700;
font-size: 1.75rem;
line-height: 1.15;
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
}
.fi-wi-stats-overview-stat-description {
font-size: 0.72rem;
font-weight: 500;
}
.mp-hero,
.mp-card.is-hero {
background: linear-gradient(140deg, var(--mp-fill-deep) 0%, var(--mp-fill) 100%);
border-color: transparent;
box-shadow: var(--mp-shadow-lg), 0 18px 40px -22px var(--mp-fill-deep);
color: var(--mp-on-fill);
}
.mp-hero .fi-section-content-ctn,
.mp-hero .fi-section-content,
.mp-hero .fi-section-header,
.mp-hero .fi-wi-stats-overview-stat {
background: transparent;
border-color: rgb(255 255 255 / 0.22);
box-shadow: none;
}
.mp-hero .fi-section-header-heading,
.mp-hero .fi-wi-stats-overview-stat-value {
color: var(--mp-on-fill);
}
.mp-hero .fi-section-header-description,
.mp-hero .fi-wi-stats-overview-stat-label,
.mp-hero .fi-wi-stats-overview-stat-description,
.mp-hero .fi-wi-stats-overview-stat-description .fi-icon {
color: rgb(255 255 255 / 0.9);
}
.mp-hero .fi-wi-stats-overview-stat-chart {
opacity: 0.85;
filter: brightness(0) invert(1);
}
.mp-card {
background: var(--mp-card);
border: 1px solid var(--mp-stroke);
border-radius: var(--mp-r-xl);
box-shadow: var(--mp-shadow);
color: var(--mp-ink);
display: flex;
flex-direction: column;
min-width: 0;
}
.mp-num {
font-family: var(--mp-font-display);
font-variant-numeric: tabular-nums;
}
.mp-card-head {
display: flex;
align-items: center;
gap: 0.56rem;
padding: 1.12rem 1.12rem 0.87rem;
}
.mp-card-head h2,
.mp-panel-head h2 {
font-family: var(--mp-font-display);
font-weight: 600;
font-size: 0.875rem;
letter-spacing: -0.01em;
margin: 0;
}
.mp-icon {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
flex: 0 0 auto;
}
.mp-icon svg {
width: 16px;
height: 16px;
}
.mp-icon.is-accent { background: color-mix(in oklab, var(--mp-accent-mid) 14%, transparent); color: var(--mp-accent-text); }
.mp-icon.is-good { background: var(--mp-good-wash); color: var(--mp-good); }
.mp-icon.is-warn { background: var(--mp-warn-wash); color: var(--mp-warn); }
.mp-icon.is-bad { background: var(--mp-bad-wash); color: var(--mp-bad); }
.mp-icon.is-info { background: var(--mp-info-wash); color: var(--mp-info); }
.mp-stats {
padding: 0 1.12rem 0.5rem;
}
.mp-stat {
padding: 0.81rem 0;
border-top: 1px solid var(--mp-stroke);
}
.mp-stat:first-child {
border-top: 0;
padding-top: 0.12rem;
}
.mp-stat-k {
font-size: 0.72rem;
font-weight: 600;
color: var(--mp-muted);
letter-spacing: 0.01em;
}
.mp-stat-v {
font-family: var(--mp-font-display);
font-weight: 700;
font-size: 1.69rem;
letter-spacing: -0.025em;
line-height: 1.15;
margin-top: 0.31rem;
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
gap: 0.44rem;
flex-wrap: wrap;
}
.mp-stat-unit {
font-size: 0.81rem;
font-weight: 600;
color: var(--mp-muted);
}
.mp-stat-note {
font-size: 0.72rem;
color: var(--mp-muted);
margin-top: 0.31rem;
font-weight: 500;
}
.mp-chip {
display: inline-flex;
align-items: center;
gap: 0.19rem;
font-family: var(--mp-font-display);
font-size: 0.72rem;
font-weight: 700;
padding: 0.19rem 0.56rem;
border-radius: 999px;
white-space: nowrap;
}
.mp-chip.is-up { background: var(--mp-good-wash); color: var(--mp-good); }
.mp-chip.is-down { background: var(--mp-bad-wash); color: var(--mp-bad); }
.mp-chip.is-flag { background: var(--mp-warn-wash); color: var(--mp-warn); }
.mp-chip.is-info { background: var(--mp-info-wash); color: var(--mp-info); }
.mp-chip.is-mute { background: var(--mp-track); color: var(--mp-ink-2); }
.mp-card.is-hero .mp-card-head h2,
.mp-card.is-hero .mp-stat-v { color: var(--mp-on-fill); }
.mp-card.is-hero .mp-icon { background: rgb(255 255 255 / 0.2); color: var(--mp-on-fill); }
.mp-card.is-hero .mp-stat { border-top-color: rgb(255 255 255 / 0.2); }
.mp-card.is-hero .mp-stat-k,
.mp-card.is-hero .mp-stat-note,
.mp-card.is-hero .mp-stat-unit { color: rgb(255 255 255 / 0.9); }
.mp-card.is-hero .mp-chip { background: rgb(255 255 255 / 0.2); color: var(--mp-on-fill); }
.mp-spark {
display: block;
width: 100%;
height: 52px;
margin-top: 0.37rem;
color: var(--mp-accent-text);
}
.mp-card.is-hero .mp-spark {
color: var(--mp-on-fill);
}
.mp-spark .mp-spark-area {
fill: currentColor;
fill-opacity: 0.16;
}
.mp-spark .mp-spark-line {
fill: none;
stroke: currentColor;
stroke-opacity: 0.95;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.mp-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: 1.19rem 1.25rem 1.12rem;
}
.mp-panel-head h2 {
font-size: 0.94rem;
letter-spacing: -0.012em;
}
.mp-panel-head p {
margin: 0.25rem 0 0;
font-size: 0.75rem;
color: var(--mp-muted);
font-weight: 500;
}
.mp-tag {
font-family: var(--mp-font-display);
font-size: 0.69rem;
font-weight: 700;
padding: 0.31rem 0.69rem;
border-radius: 999px;
background: var(--mp-sunk);
border: 1px solid var(--mp-stroke);
color: var(--mp-ink-2);
white-space: nowrap;
flex: 0 0 auto;
}
.mp-panel-body {
padding: 0 1.25rem 1.25rem;
}
.mp-donut {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.mp-donut > svg {
flex: 0 0 auto;
width: 140px;
height: 140px;
}
.mp-keys {
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 1 1 0;
min-width: 0;
}
.mp-key {
display: flex;
align-items: center;
gap: 0.62rem;
font-size: 0.81rem;
font-weight: 600;
}
.mp-key i {
width: 11px;
height: 11px;
border-radius: 4px;
flex: 0 0 auto;
}
.mp-key-n {
color: var(--mp-ink-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mp-key-v {
margin-left: auto;
font-family: var(--mp-font-display);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.mp-key-p {
color: var(--mp-muted);
font-size: 0.72rem;
width: 36px;
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.mp-bars {
display: flex;
flex-direction: column;
gap: 0.94rem;
}
.mp-bar {
display: grid;
grid-template-columns: minmax(0, 118px) 1fr 42px;
align-items: center;
gap: 0.81rem;
font-size: 0.78rem;
}
.mp-bar-n {
color: var(--mp-ink-2);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mp-bar-track {
height: 11px;
border-radius: 999px;
background: var(--mp-track);
overflow: hidden;
}
.mp-bar-fill {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--mp-accent-mid), var(--mp-accent-soft));
}
.mp-bar.is-lead .mp-bar-fill {
background: linear-gradient(90deg, var(--mp-info), var(--mp-accent-soft));
}
.mp-bar-v {
font-family: var(--mp-font-display);
font-weight: 700;
font-size: 0.81rem;
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--mp-ink);
}
.mp-scroll { overflow-x: auto; border-radius: var(--mp-r-sm); }
.mp-scroll:focus-visible {
outline: 2px solid var(--mp-ring);
outline-offset: 2px;
}
.mp-table {
width: 100%;
border-collapse: collapse;
font-size: 0.78rem;
min-width: 640px;
}
.mp-table th {
text-align: left;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--mp-muted);
padding: 0 0.75rem 0.75rem;
white-space: nowrap;
}
.mp-table td {
padding: 0.81rem 0.75rem;
border-top: 1px solid var(--mp-stroke);
white-space: nowrap;
color: var(--mp-ink-2);
}
.mp-table tbody tr:hover { background: var(--mp-sunk); }
.mp-table .is-mono {
font-family: var(--mp-font-display);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.mp-table .is-strong {
font-family: var(--mp-font-display);
font-weight: 600;
color: var(--mp-ink);
}
.mp-table .is-end { text-align: right; }
.mp-pill {
display: inline-flex;
align-items: center;
gap: 0.37rem;
font-size: 0.69rem;
font-weight: 700;
padding: 0.25rem 0.62rem;
border-radius: 999px;
white-space: nowrap;
}
.mp-pill::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex: 0 0 auto;
}
.mp-pill.is-good { background: var(--mp-good-wash); color: var(--mp-good); }
.mp-pill.is-warn { background: var(--mp-warn-wash); color: var(--mp-warn); }
.mp-pill.is-bad { background: var(--mp-bad-wash); color: var(--mp-bad); }
.mp-pill.is-info { background: var(--mp-info-wash); color: var(--mp-info); }
.mp-pill.is-mute { background: var(--mp-track); color: var(--mp-ink-2); }
.mp-empty {
color: var(--mp-muted);
font-size: 0.81rem;
padding: 0.75rem 0;
}
.mp-range {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2rem;
padding: 0.25rem;
border-radius: 999px;
background: var(--mp-card);
border: 1px solid var(--mp-stroke);
box-shadow: var(--mp-shadow-sm);
width: auto;
}
.mp-range .fi-fo-toggle-buttons-btn-ctn {
display: block;
width: auto;
flex: 0 0 auto;
}
.mp-range .fi-fo-toggle-buttons-btn-ctn label {
display: block;
border: 0;
border-radius: 999px;
background: transparent;
box-shadow: none;
padding: 0.42rem 0.85rem;
font-size: 0.76rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
color: var(--mp-muted);
}
@media (max-width: 1023.98px) {
.mp-range {
border-radius: 1.4rem;
}
}
@media (prefers-reduced-motion: no-preference) {
.mp-range .fi-fo-toggle-buttons-btn-ctn label {
transition: background-color 0.15s ease, color 0.15s ease;
}
}
.mp-range .fi-fo-toggle-buttons-btn-ctn:hover label {
background: var(--mp-sunk);
color: var(--mp-ink);
}
.mp-range .fi-fo-toggle-buttons-btn-ctn:has(input:focus-visible) label {
outline: 2px solid var(--mp-ring);
outline-offset: 1px;
}
.mp-range .fi-fo-toggle-buttons-btn-ctn:has(input:checked) label {
background: var(--gray-900);
color: var(--gray-50);
box-shadow: var(--mp-shadow-sm);
}
html.dark .mp-range .fi-fo-toggle-buttons-btn-ctn:has(input:checked) label {
background: var(--mp-bright);
color: var(--gray-950);
}
.mp-filter .fi-fo-field-label,
.mp-filter .fi-fo-field-label-content {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mp-muted);
}
.mp-filter .fi-input-wrp {
border-radius: 999px;
}
@media (min-width: 1024px) {
.fi-page-header-main-ctn {
position: relative;
}
.fi-page-content > .fi-sc > .fi-grid-col:has(.mp-range.mp-filter) {
position: absolute;
top: var(--mp-header-offset);
inset-inline-end: 0;
width: auto;
max-width: max-content;
z-index: 5;
}
.fi-page-content > .fi-sc > .fi-grid-col:has(.mp-range.mp-filter) .fi-sc,
.fi-page-content > .fi-sc > .fi-grid-col:has(.mp-range.mp-filter) .fi-grid-col,
.fi-page-content > .fi-sc > .fi-grid-col:has(.mp-range.mp-filter) .fi-sc-component,
.fi-page-content > .fi-sc > .fi-grid-col:has(.mp-range.mp-filter) .fi-fo-field,
.fi-page-content > .fi-sc > .fi-grid-col:has(.mp-range.mp-filter) .fi-fo-field-content-col {
display: block;
width: auto;
max-width: none;
grid-template-columns: none;
}
.mp-range {
flex-wrap: nowrap;
}
}
.fi-simple-main {
background: var(--mp-card);
border: 1px solid var(--mp-stroke);
border-radius: var(--mp-r-xl);
box-shadow: var(--mp-shadow-lg);
}
.fi-simple-header-heading {
font-weight: 700;
letter-spacing: -0.025em;
}
.mp-signin {
display: grid;
gap: 1rem;
}
.mp-signin-button {
width: 100%;
}
.mp-signin-or {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.75rem;
color: var(--mp-muted);
text-align: center;
}
.mp-signin-or::before,
.mp-signin-or::after {
content: '';
flex: 1 1 0;
height: 1px;
background: var(--mp-stroke-2);
}
.mp-signin-other {
font-size: 0.75rem;
text-align: center;
color: var(--mp-muted);
}
.mp-signin-other a {
color: var(--mp-accent-text);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.mp-signin-other a:focus-visible {
outline: 2px solid var(--mp-ring);
outline-offset: 2px;
border-radius: 4px;
}
.mp-env {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.35rem 0.15rem 0.1rem;
padding: 0.6rem 0.8rem;
border-radius: var(--mp-r-md);
background: var(--mp-sunk);
font-size: 0.72rem;
font-weight: 600;
color: var(--mp-ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mp-env-dot {
width: 0.44rem;
height: 0.44rem;
border-radius: 999px;
flex: 0 0 auto;
background: var(--mp-info);
box-shadow: 0 0 0 3px var(--mp-info-wash);
}
.mp-env.is-good .mp-env-dot { background: var(--mp-good); box-shadow: 0 0 0 3px var(--mp-good-wash); }
.mp-env.is-warn .mp-env-dot { background: var(--mp-warn); box-shadow: 0 0 0 3px var(--mp-warn-wash); }
.mp-env.is-bad .mp-env-dot { background: var(--mp-bad); box-shadow: 0 0 0 3px var(--mp-bad-wash); }
.fi-body:has(> .mp-impersonation) {
--mp-impersonation-h: 2.75rem;
padding-top: var(--mp-impersonation-h);
}
.fi-body:has(> .mp-impersonation) .fi-topbar-ctn {
top: var(--mp-impersonation-h);
}
@media (min-width: 1024px) {
.fi-body:has(> .mp-impersonation) .fi-sidebar {
top: calc(var(--mp-gap) + var(--mp-impersonation-h));
max-height: calc(100dvh - var(--mp-gap) * 2 - var(--mp-impersonation-h));
}
}
@media (max-width: 1023.98px) {
.fi-body:has(> .mp-impersonation) .fi-sidebar {
top: calc(var(--topbar-height) + var(--mp-impersonation-h));
height: calc(100dvh - var(--topbar-height) - var(--mp-impersonation-h));
}
}