/*! 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: 12px;
--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;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.4rem 0.75rem;
min-height: 2.75rem;
padding: 0.4rem 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-wrap: anywhere;
text-wrap: pretty;
}
.mp-impersonation-text strong {
font-weight: 700;
}
.mp-impersonation-end {
display: flex;
flex: none;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.4rem 0.75rem;
}
.mp-impersonation-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.75rem;
}
.mp-impersonation-actions a {
color: #ffffff;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.mp-impersonation-actions a:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
border-radius: 4px;
}
.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 {
justify-content: space-between;
padding: 0.45rem 0.75rem;
font-size: 0.8rem;
line-height: 1.15rem;
}
.mp-impersonation-text {
flex: 1 1 15rem;
}
.mp-impersonation-end {
margin-inline-start: auto;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html.mp {
background: var(--mp-ground);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.mp-page {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: transparent;
color: var(--mp-ink);
font: 400 0.9375rem/1.55 var(--mp-font-text);
-webkit-font-smoothing: antialiased;
}
.mp-page::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));
}
.mp-page h1,
.mp-page h2,
.mp-page h3 {
font-family: var(--mp-font-display);
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0;
}
.mp-page p {
margin: 0;
}
.mp-page :focus-visible {
outline: 2px solid var(--mp-ring);
outline-offset: 2px;
}
.mp-skip {
position: absolute;
inset-inline-start: 1rem;
top: -4rem;
z-index: 10;
padding: 0.5rem 0.9rem;
border-radius: 999px;
background: var(--mp-solid);
color: var(--mp-ink);
font-weight: 600;
text-decoration: none;
box-shadow: var(--mp-shadow);
}
.mp-skip:focus {
top: 1rem;
}
.mp-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.mp-shell-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem clamp(1rem, 4vw, 2rem);
}
.mp-shell-main {
flex: 1;
display: grid;
place-items: center;
padding: 1rem clamp(1rem, 4vw, 2rem) 2.5rem;
}
.mp-shell-column {
width: 100%;
max-width: 28rem;
display: grid;
gap: 1rem;
}
.mp-shell-column.is-wide {
max-width: 44rem;
align-self: start;
}
.mp-shell-foot {
padding: 0 1rem 1.25rem;
text-align: center;
font-size: 0.75rem;
color: var(--mp-muted);
}
.mp-shell-foot a {
color: inherit;
}
.mp-banner .mp-impersonation {
position: static;
}
@media (prefers-reduced-motion: no-preference) {
.mp-button,
.mp-input,
.mp-theme-btn,
.mp-link {
transition:
background-color 0.16s ease,
border-color 0.16s ease,
color 0.16s ease,
box-shadow 0.16s ease;
}
}
.mp-auth-card {
background: var(--mp-card);
border: 1px solid var(--mp-stroke);
border-radius: var(--mp-r-xl);
box-shadow: var(--mp-shadow-lg);
padding: clamp(1.25rem, 5vw, 2.25rem);
display: grid;
gap: 1.25rem;
}
.mp-auth-card > h2,
.mp-auth-card > header > h2 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
font-size: 1.15rem;
font-weight: 700;
}
.mp-auth-head {
display: grid;
justify-items: center;
gap: 0.6rem;
text-align: center;
}
.mp-auth-head h1 {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.025em;
}
.mp-auth-head p {
color: var(--mp-muted);
font-size: 0.875rem;
}
.mp-auth-body {
display: grid;
gap: 1rem;
}
.mp-auth-foot {
border-top: 1px solid var(--mp-stroke);
padding-top: 1rem;
text-align: center;
font-size: 0.8125rem;
color: var(--mp-muted);
}
.mp-stack {
display: grid;
gap: 1rem;
}
.mp-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.mp-row.is-spread {
justify-content: space-between;
}
.mp-divider {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.75rem;
color: var(--mp-muted);
}
.mp-divider::before,
.mp-divider::after {
content: '';
flex: 1 1 0;
height: 1px;
background: var(--mp-stroke-2);
}
.mp-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.75rem;
padding: 0.6rem 1.25rem;
border: 1px solid transparent;
border-radius: 999px;
font: 600 0.9rem/1.2 var(--mp-font-text);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.mp-button svg {
width: 1.15rem;
height: 1.15rem;
flex: 0 0 auto;
}
.mp-button.is-block {
width: 100%;
}
.mp-button.is-primary {
background: var(--mp-fill);
color: var(--mp-on-fill);
box-shadow: 0 10px 22px -12px var(--mp-fill);
}
.mp-button.is-primary:hover {
background: var(--mp-fill-deep);
}
.mp-button.is-secondary {
background: var(--mp-raise);
border-color: var(--mp-stroke-2);
color: var(--mp-ink);
}
.mp-button.is-secondary:hover {
background: var(--mp-solid-hover);
}
.mp-button.is-ghost {
background: transparent;
color: var(--mp-accent-text);
}
.mp-button.is-ghost:hover {
background: var(--mp-sunk);
}
.mp-button.is-danger {
background: var(--mp-danger-bar);
color: #ffffff;
}
.mp-button.is-danger:hover {
background: #991b1b;
}
.mp-button.is-sm {
min-height: 2.25rem;
padding: 0.4rem 0.95rem;
font-size: 0.8125rem;
gap: 0.4rem;
}
.mp-button.is-sm svg {
width: 1rem;
height: 1rem;
}
.mp-button:disabled,
.mp-button[aria-disabled='true'] {
opacity: 0.6;
cursor: not-allowed;
}
.mp-field {
display: grid;
gap: 0.4rem;
}
.mp-field-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
}
.mp-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--mp-ink);
}
.mp-label .mp-required {
color: var(--mp-bad);
margin-inline-start: 0.15rem;
}
.mp-input {
width: 100%;
min-height: 2.75rem;
padding: 0.6rem 0.9rem;
border: 1px solid var(--mp-stroke-2);
border-radius: var(--mp-r-md);
background: var(--mp-raise);
color: var(--mp-ink);
font: 400 0.9375rem/1.4 var(--mp-font-text);
}
.mp-input::placeholder {
color: var(--mp-muted);
opacity: 1;
}
.mp-input:focus {
outline: none;
border-color: var(--mp-ring);
box-shadow: 0 0 0 2px var(--mp-ring);
}
.mp-input[aria-invalid='true'] {
border-color: var(--mp-bad);
}
.mp-input.is-code {
font-family: var(--mp-font-display);
font-size: 1.25rem;
letter-spacing: 0.3em;
text-align: center;
}
.mp-hint {
font-size: 0.8rem;
color: var(--mp-muted);
}
.mp-select {
appearance: none;
padding-inline-end: 2.5rem;
background-image:
linear-gradient(45deg, transparent 50%, var(--mp-muted) 50%),
linear-gradient(135deg, var(--mp-muted) 50%, transparent 50%);
background-position:
calc(100% - 1.25rem) 50%,
calc(100% - 0.9rem) 50%;
background-size: 0.35rem 0.35rem;
background-repeat: no-repeat;
cursor: pointer;
}
.mp-error {
font-size: 0.8rem;
font-weight: 600;
color: var(--mp-bad);
}
.mp-check {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.875rem;
cursor: pointer;
}
.mp-check input {
width: 1.1rem;
height: 1.1rem;
margin: 0;
accent-color: var(--mp-fill);
}
.mp-check-field {
display: grid;
gap: 0.25rem;
}
.mp-check-hint {
padding-inline-start: 1.7rem;
}
.mp-alert {
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0.8rem 0.95rem;
border-radius: var(--mp-r-md);
border: 1px solid transparent;
font-size: 0.875rem;
line-height: 1.45;
color: var(--mp-ink);
}
.mp-alert svg {
width: 1.2rem;
height: 1.2rem;
flex: 0 0 auto;
margin-top: 0.05rem;
}
.mp-alert-title {
display: block;
font-weight: 700;
}
.mp-alert.is-info { background: var(--mp-info-wash); border-color: color-mix(in oklab, var(--mp-info) 30%, transparent); }
.mp-alert.is-info svg { color: var(--mp-info); }
.mp-alert.is-success { background: var(--mp-good-wash); border-color: color-mix(in oklab, var(--mp-good) 30%, transparent); }
.mp-alert.is-success svg { color: var(--mp-good); }
.mp-alert.is-warning { background: var(--mp-warn-wash); border-color: color-mix(in oklab, var(--mp-warn) 30%, transparent); }
.mp-alert.is-warning svg { color: var(--mp-warn); }
.mp-alert.is-danger { background: var(--mp-bad-wash); border-color: color-mix(in oklab, var(--mp-bad) 30%, transparent); }
.mp-alert.is-danger svg { color: var(--mp-bad); }
.mp-link {
color: var(--mp-accent-text);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.mp-link:hover {
text-decoration-thickness: 2px;
}
.mp-link:focus-visible {
border-radius: 4px;
}
.mp-theme-btn {
width: 2.5rem;
height: 2.5rem;
display: grid;
place-items: center;
padding: 0;
border: 1px solid var(--mp-stroke);
border-radius: 999px;
background: var(--mp-raise);
color: var(--mp-ink-2);
cursor: pointer;
}
.mp-theme-btn:hover {
color: var(--mp-accent-text);
background: var(--mp-solid-hover);
}
.mp-theme-btn svg {
width: 1.05rem;
height: 1.05rem;
}
.mp-theme-btn .mp-theme-sun,
html.dark .mp-theme-btn .mp-theme-moon {
display: none;
}
html.dark .mp-theme-btn .mp-theme-sun {
display: block;
}
.mp-error-card {
text-align: start;
}
.mp-error-code {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--mp-font-display);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.14em;
color: var(--mp-accent-text);
}
.mp-error-code::before {
content: '';
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
background: currentColor;
}
.mp-error-card h1 {
font-size: clamp(1.5rem, 4vw, 1.9rem);
font-weight: 700;
letter-spacing: -0.03em;
text-wrap: balance;
}
.mp-error-card .mp-error-text {
color: var(--mp-ink-2);
}
.mp-error-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
@media (max-width: 30rem) {
.mp-error-actions .mp-button {
width: 100%;
}
}
.mp-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
padding: 0.35rem;
border: 1px solid var(--mp-stroke);
border-radius: var(--mp-r-lg);
background: var(--mp-card);
box-shadow: var(--mp-shadow-sm);
}
.mp-tab {
padding: 0.5rem 0.9rem;
border-radius: 999px;
color: var(--mp-ink-2);
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
}
.mp-tab:hover {
color: var(--mp-ink);
background: var(--mp-sunk);
}
.mp-tab[aria-current='page'] {
background: var(--mp-fill);
color: var(--mp-on-fill);
}
.mp-tab.is-aside {
margin-inline-start: auto;
color: var(--mp-accent-text);
}
.mp-list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--mp-stroke);
}
.mp-list.is-flush {
border-top: 0;
}
.mp-list-item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
padding: 0.85rem 0;
border-bottom: 1px solid var(--mp-stroke);
}
.mp-list.is-flush > .mp-list-item:last-child {
border-bottom: 0;
}
.mp-list-main {
flex: 1 1 16rem;
min-width: 0;
}
.mp-list-title,
.mp-list-main > strong {
font-weight: 600;
color: var(--mp-ink);
}
.mp-meta {
display: block;
margin-top: 0.15rem;
color: var(--mp-muted);
font-size: 0.8125rem;
}
.mp-list-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
}
.mp-list-actions form {
margin: 0;
}
.mp-list-below {
flex: 1 1 100%;
min-width: 0;
padding-top: 0.25rem;
}
.mp-list-item.has-lead {
display: grid;
grid-template-columns: 9rem minmax(0, 1fr) auto;
justify-content: stretch;
align-items: start;
gap: 0.25rem 1rem;
}
.mp-list-item.has-lead > .mp-list-below {
grid-column: 1 / -1;
}
.mp-list-lead {
padding-top: 0.1rem;
color: var(--mp-muted);
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
}
.mp-badge {
display: inline-flex;
align-items: center;
padding: 0.1rem 0.55rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle;
background: var(--mp-sunk);
color: var(--mp-ink-2);
}
.mp-badge:not(:first-child) {
margin-inline-start: 0.4rem;
}
.mp-badge.is-good { background: var(--mp-good-wash); color: var(--mp-good); }
.mp-badge.is-warn { background: var(--mp-warn-wash); color: var(--mp-warn); }
.mp-badge.is-bad { background: var(--mp-bad-wash); color: var(--mp-bad); }
.mp-badge.is-info { background: var(--mp-info-wash); color: var(--mp-info); }
@media (max-width: 40rem) {
.mp-tab.is-aside {
margin-inline-start: 0;
}
.mp-list-item.has-lead {
grid-template-columns: minmax(0, 1fr);
gap: 0.15rem;
}
}
@media (prefers-reduced-motion: no-preference) {
.mp-tab {
transition:
background-color 0.16s ease,
color 0.16s ease;
}
}