html,
body {
    margin: 0;
}

h1:focus {
    outline: none;
}

.page-title {
    margin: 0 0 .15rem;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
}

.page-lead {
    margin: 0 0 .75rem;
    color: var(--lumen-text-muted);
}

.section-title {
    margin: 1rem 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
}

.page-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .5rem 0 .75rem;
}

.detail-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .75rem 1rem;
    align-items: start;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .75rem;
}

.form-switches {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: .75rem;
}

.card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.card-subtitle {
    margin: .15rem 0 0;
    color: var(--lumen-text-muted);
    font-weight: 400;
}

.key-values {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .25rem 1rem;
    margin: .75rem 0;
}

.key-values dt {
    color: var(--lumen-text-muted);
}

.key-values dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.text-muted {
    color: var(--lumen-text-muted);
}

.row-actions {
    display: flex;
    justify-content: flex-end;
    gap: .25rem;
}

.inline-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
}

.secret-value,
.code-input {
    font-family: var(--lumen-font-mono);
}

#blazor-error-ui {
    display: none;
}

.brand-logo {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
}

.brand-logo-dark {
    display: none;
}

:root[data-lumen-theme="dark"] .brand-logo-dark {
    display: block;
}

:root[data-lumen-theme="dark"] .brand-logo-light {
    display: none;
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.login-brand .brand-logo {
    width: 2.5rem;
    height: 2.5rem;
}

.login-box {
    width: 26rem;
    max-width: 100%;
}

.form-wide {
    grid-column: 1 / -1;
}

.field-caption {
    margin: 0 0 .35rem;
    font-weight: 600;
}

.secret-row {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin-top: .75rem;
}

.secret-row > :first-child {
    flex: 1 1 auto;
}