h1:focus {
    outline: none;
}

:root { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; color: #172431; background: #f4f6f8; }
body { margin: 0; }
.shell { min-height: 100vh; }
.topbar { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; padding: 1rem 2rem; color: #fff; background: #17334d; }
.topbar strong { font-size: 1.2rem; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.topbar a { color: #e7f2fa; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.content { max-width: 1300px; margin: 0 auto; padding: 1.5rem 2rem 4rem; }
.content h1 { margin: 0 0 .8rem; }
.content h2 { margin-top: 0; }
.panel, .card { background: #fff; border: 1px solid #dce3e9; border-radius: .65rem; padding: 1.2rem; box-shadow: 0 2px 8px #18344a0a; }
.panel { margin: 1.2rem 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.card { color: inherit; text-decoration: none; }
.card:hover { border-color: #3d7aa4; }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: .8rem 0; }
.form-row input { min-width: 180px; padding: .55rem .7rem; border: 1px solid #b9c7d2; border-radius: .4rem; }
button { padding: .5rem .8rem; border: 1px solid #2c658b; border-radius: .4rem; color: #fff; background: #2c658b; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
button:hover:not(:disabled) { background: #205273; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { padding: .65rem .7rem; border-bottom: 1px solid #e1e7ec; text-align: left; vertical-align: top; }
th { background: #edf2f6; white-space: nowrap; }
td button { margin-left: .5rem; white-space: nowrap; }
.note { color: #5f6f7c; }
.message { padding: .8rem 1rem; border-radius: .4rem; background: #e8f2f8; color: #174c6c; }
.catalog-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; border-bottom: 1px solid #cbd8e1; }
.catalog-tab { border-radius: .45rem .45rem 0 0; background: #e9eff4; color: #274d68; border-color: #cbd8e1; border-bottom: 0; }
.catalog-tab.selected, .catalog-tab.selected:hover { background: #fff; color: #17334d; box-shadow: inset 0 3px #2c658b; }
.catalog-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; color: #536675; }
.catalog-page-buttons { display: flex; flex-wrap: wrap; gap: .35rem; }
.catalog-page-buttons button { min-width: 2.4rem; padding: .4rem .6rem; background: #fff; color: #245879; }
.catalog-page-buttons button:hover:not(:disabled), .catalog-page-buttons button.current { background: #2c658b; color: #fff; }
.model-picker { margin: 1.25rem 0; padding: 1rem; border: 1px solid #dce3e9; border-radius: .55rem; background: #f9fbfc; }
.model-picker-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
.model-picker-heading h3 { margin: 0; }
.picker-types { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
.picker-chip, .picker-secondary { color: #245879; background: #fff; border-color: #a9bdcb; }
.picker-chip { padding: .35rem .65rem; border-radius: 1.2rem; }
.picker-chip.active, .picker-chip.active:hover { color: #fff; background: #2c658b; border-color: #2c658b; }
.picker-dimensions { margin: .9rem 0; border: 1px solid #dce3e9; border-radius: .45rem; padding: .7rem; background: #fff; }
.picker-dimensions summary { cursor: pointer; color: #245879; font-weight: 600; }
.dimension-filter { border-top: 1px solid #edf1f4; padding: .65rem 0; }
.dimension-toggle { display: flex; align-items: center; gap: .45rem; font-weight: 600; }
.dimension-controls { display: grid; grid-template-columns: minmax(5.5rem, 8rem) minmax(8rem, 1fr) minmax(5.5rem, 8rem) minmax(8rem, 1fr); align-items: end; gap: .8rem; margin: .5rem 0; }
.dimension-controls label { display: grid; gap: .25rem; font-size: .85rem; }
.dimension-controls input[type=number] { min-width: 0; width: 100%; box-sizing: border-box; padding: .4rem; border: 1px solid #b9c7d2; border-radius: .35rem; }
.dimension-controls input[type=range] { width: 100%; accent-color: #2c658b; }
.dimension-filter small, .picker-result-count { color: #5f6f7c; }
.model-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); gap: .6rem; }
.model-choice { display: flex; flex-direction: column; gap: .35rem; text-align: left; color: #172431; background: #fff; border: 1px solid #cbd8e1; overflow-wrap: anywhere; }
.model-choice span { font-size: .87rem; line-height: 1.45; color: #536675; }
.model-choice:hover:not(:disabled), .model-choice.selected { color: #172431; background: #e8f3fa; border-color: #2c658b; }
.model-choice.selected { box-shadow: inset 0 0 0 1px #2c658b; }
.holder-choice-illustration { display: flex; align-items: center; justify-content: center; width: 100%; height: 120px; border-radius: .3rem; background: #f3f6f8; overflow: hidden; }
.holder-choice-illustration img { display: block; max-width: 100%; width: auto; height: 100%; object-fit: contain; }
.holder-illustration-missing { color: #667782; font-size: .85rem; }
.holder-selected-illustration { display: inline-flex; flex-direction: column; align-items: center; gap: .4rem; margin: .4rem 0 1rem; padding: .5rem; border: 1px solid #dce3e9; border-radius: .45rem; background: #f9fbfc; }
.holder-selected-illustration img { width: 180px; height: 180px; object-fit: contain; }
.holder-selected-illustration figcaption { color: #5f6f7c; font-size: .85rem; }
@media (max-width: 650px) { .dimension-controls { grid-template-columns: minmax(5rem, 7rem) 1fr; } .content { padding: 1rem; } }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}