:root {
    /* Compatibility values for page-specific styles that still reference the older names. */
    --ui-page-padding: 20px;
    --ui-page-padding-mobile: 20px;
    --ui-gap: 16px;
    --ui-gap-loose: 20px;
    --ui-gap-tight: 12px;
    --ui-card-padding: 18px;
    --ui-card-padding-lg: 20px;
    --ui-box-padding: 14px;
    --ui-control-padding: 10px 14px;
    --ui-field-padding: 10px 12px;
    --ui-radius: 3px;
    --ui-radius-pill: 999px;
    --ui-border-color: #d7dde5;
    --ui-control-border-color: #c8d2df;
    --ui-surface: #ffffff;
    --ui-surface-muted: #f9fbfd;
    --ui-table-head: #f3f6fa;
    --ui-text: #1b2a3a;
    --ui-muted: #5b6777;
    --ui-primary: #0d5bd7;
    --ui-danger: #8a1f1f;
    --ui-backdrop: rgba(9, 20, 37, 0.42);
    --ui-shadow-soft: none;
    --ui-shadow-strong: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    overflow: hidden;
    background: #ffffff;
    color: #1b2a3a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.5;
}

img,
svg,
canvas {
    display: block;
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

span {
    text-wrap: auto;
}

a {
    color: #0d5bd7;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

label {
    display: block;
    margin-bottom: 6px;
    color: #5b6777;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #c8d2df;
    border-radius: 3px;
    background: #ffffff;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(13, 91, 215, 0.12);
    border-color: #0d5bd7;
}

input[readonly],
textarea[readonly] {
    background: #f9fbfd;
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled,
.ui-button:disabled {
    opacity: 0.6;
}

button,
.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #c8d2df;
    border-radius: 3px;
    background: #ffffff;
    color: #1b2a3a;
    cursor: pointer;
    text-decoration: none;
}

button:hover,
.ui-button:hover {
    border-color: #bfd7ff;
    background: #f4f9ff;
    text-decoration: none;
}

button:disabled,
.ui-button:disabled {
    cursor: not-allowed;
}

.ui-button--primary,
.ui-tone-primary {
    background: #0d5bd7;
    border-color: #0d5bd7;
    color: #ffffff;
}

.ui-button--primary:hover,
.ui-tone-primary:hover {
    background: #1a68de;
    border-color: #1a68de;
}

.ui-button--secondary {
    background: #ffffff;
    border-color: #c8d2df;
    color: #1b2a3a;
}

.ui-button--danger,
.ui-tone-danger {
    background: #8a1f1f;
    border-color: #8a1f1f;
    color: #ffffff;
}

.ui-button--danger:hover,
.ui-tone-danger:hover {
    background: #982626;
    border-color: #982626;
}

.ui-button--block {
    width: 100%;
}

.ui-card,
.ui-box,
.ui-notice {
    width: 100%;
    max-width: 1024px;
}

.ui-card {
    background: #ffffff;
    border: 1px solid #d7dde5;
    border-radius: 3px;
    padding: 18px;
}

.ui-card--flush {
    padding: 0;
    overflow: hidden;
}

.ui-card-link {
    display: grid;
    gap: 8px;
    align-content: start;
    color: inherit;
    text-decoration: none;
}

.ui-card-link:hover {
    border-color: #bfd7ff;
    background: #f7fbff;
    text-decoration: none;
}

.ui-box {
    background: #ffffff;
    border: 1px solid #d7dde5;
    border-radius: 3px;
    padding: 14px;
}

.ui-panel {
    width: min(1024px, 100%);
    max-width: 1024px;
    margin: 0 auto;
    padding: 20px;
}

.ui-field,
.form-group {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ui-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.ui-muted {
    color: #5b6777;
}

.ui-inline-gap {
    margin-top: 12px;
}

.ui-note {
    font-size: 12px;
    color: #5b6777;
}

.ui-text-error,
.ui-field-error,
.field-validation-error,
.validation-summary-errors {
    color: #8a1f1f;
}

.ui-field-error,
.field-validation-error {
    font-size: 12px;
}

.ui-notice {
    padding: 14px;
    border: 1px solid transparent;
    border-radius: 3px;
}

.ui-notice--success {
    background: #eef8f1;
    color: #1f5f37;
    border-color: #c9e7d2;
}

.ui-notice--error {
    background: #fff4f4;
    color: #8a1f1f;
    border-color: #f0caca;
}

.ui-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: var(--ui-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1100;
}

.ui-dialog-backdrop[hidden] {
    display: none;
}

.ui-dialog {
    width: min(560px, 100%);
    background: #ffffff;
    border: 1px solid #bfd6ff;
    border-radius: 3px;
    overflow: hidden;
}

.ui-dialog__head,
.ui-dialog__body,
.ui-dialog__foot {
    padding: var(--ui-card-padding-lg);
}

.ui-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-gap-tight);
    border-bottom: 1px solid var(--ui-border-color);
    background: #f6faff;
}

.ui-dialog__body {
    display: grid;
    gap: 14px;
}

.ui-dialog__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--ui-border-color);
}

.ui-dialog__field {
    display: grid;
    gap: 6px;
}

.ui-dialog__field textarea {
    min-height: 140px;
}

.ui-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.ui-table th,
.ui-table td {
    padding: 10px 12px;
    border: 1px solid #d7dde5;
    text-align: left;
    vertical-align: top;
}

.ui-table th {
    background: #f3f6fa;
}

.ui-table tbody tr:hover td {
    background: #f7fbff;
}

nav {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #d7dde5;
    background: #ffffff;
    z-index: 1000;
    overflow: visible;
}

main {
    min-height: 0;
    min-width: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 0 20px 20px;
}

.page-breadcrumb {
    width: min(1024px, 100%);
    margin: 20px auto 0;
    padding: 10px 14px;
    border: 1px solid #d7dde5;
    border-radius: 3px;
    background: #f9fbfd;
}

.page-breadcrumb__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.page-breadcrumb__list li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #5b6777;
}

.page-breadcrumb__list li + li::before {
    content: "/";
    color: #8da0b4;
}

.page-breadcrumb__list a,
.page-breadcrumb__current {
    color: #1b2a3a;
}

.page-breadcrumb__current {
    font-weight: 600;
}

.section-shell,
.list-page {
    width: min(1024px, 100%);
    margin: 20px auto 0;
    display: grid;
    gap: 20px;
}

.section-grid {
    display: grid;
    gap: 16px;
}

.section-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.section-card {
    display: grid;
    gap: 8px;
    align-content: start;
}

.section-card strong {
    font-size: 18px;
}

.auth-shell {
    width: min(1024px, 100%);
    min-height: 100%;
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-shell--stacked {
    align-items: stretch;
    justify-content: start;
    flex-direction: column;
    gap: 20px;
}

.auth-card,
.auth-results {
    width: min(500px, 100%);
    margin: 0 auto;
}

.auth-form {
    display: grid;
    gap: 12px;
}

.list-page {
    padding-bottom: 20px;
}

.list-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.list-page__header h1 {
    font-size: 22px;
    margin-bottom: 4px;
}

.list-page__header p {
    color: #5b6777;
    max-width: 720px;
}

.list-page__summary {
    white-space: nowrap;
    border: 1px solid #d7dde5;
    background: #f6f6f6;
    padding: 10px 12px;
    border-radius: 3px;
}

.list-page__empty {
    border: 1px dashed #c8c8c8;
    background: #fafafa;
    padding: 18px;
    color: #666666;
    border-radius: 3px;
}

.list-table-wrap {
    overflow: auto;
    border: 1px solid #d7dde5;
    background: #ffffff;
    border-radius: 3px;
}

.list-table {
    width: 100%;
    border-collapse: collapse;
}

.list-table th,
.list-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e6e6e6;
    text-align: left;
    vertical-align: top;
}

.list-table thead th {
    position: sticky;
    top: 0;
    background: #f3f6fa;
    z-index: 1;
}

.list-table tbody tr:hover {
    background: #f7fbff;
}

.list-table__number {
    text-align: right !important;
    white-space: nowrap;
}

.list-table__action {
    white-space: nowrap;
}

footer {
    color: #cccccc;
    font-size: 12px;
    background-color: #444444;
    border-top: 1px solid #d7dde5;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow: visible;
}

@media (max-width: 900px) {
    .section-grid--2,
    .section-grid--3,
    .section-grid--4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .auth-shell,
    .auth-shell--stacked,
    .page-breadcrumb,
    .section-shell,
    .list-page {
        margin-top: 20px;
    }

    .ui-dialog__foot {
        align-items: stretch;
    }
}