:root {
    --bg: #EEF0EC;
    --surface: #FFFFFF;
    --surface-2: #E4E7DF;
    --ink: #14181B;
    --ink-dim: #5B625C;
    --ink-faint: #8A9089;
    --border: #D6D9D1;
    --border-strong: #C3C7BC;
    --accent: #2F5D50;
    --accent-ink: #FFFFFF;
    --clay: #A34A2C;
    --clay-soft: #F3DED4;
    --shadow: 0 1px 2px rgba(20, 24, 27, .06), 0 8px 24px -12px rgba(20, 24, 27, .18);
    --font-body: -apple-system, "Segoe UI", system-ui, sans-serif;
    --font-display: -apple-system, "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14181A;
        --surface: #1C2124;
        --surface-2: #242A2C;
        --ink: #ECEFEA;
        --ink-dim: #9AA39C;
        --ink-faint: #6D766E;
        --border: #323A3C;
        --border-strong: #3D4648;
        --accent: #59A88F;
        --accent-ink: #0D1210;
        --clay: #D9835C;
        --clay-soft: #3A2620;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg);
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(560px circle at 12% 8%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
        radial-gradient(620px circle at 88% 92%, color-mix(in srgb, var(--clay) 26%, transparent), transparent 60%),
        var(--surface-2);
}

.login-card {
    width: 100%;
    max-width: 340px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px;
    box-shadow: var(--shadow);
}

.login-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: block;
    margin-bottom: 10px;
}

.login-card h1 {
    font: 700 19px var(--font-display);
    margin: 0 0 2px;
}

.login-sub {
    font-size: 12.5px;
    color: var(--ink-dim);
    margin: 0 0 20px;
}

.login-card form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-card label {
    font: 600 11.5px var(--font-body);
    color: var(--ink-dim);
    margin-top: 8px;
}

.login-card input {
    font: 14px var(--font-body);
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
}

.login-card input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.login-card button {
    margin-top: 16px;
    font: 600 13.5px var(--font-body);
    border-radius: 9px;
    padding: 10px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
}

.login-card button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.login-error {
    background: var(--clay-soft);
    color: var(--clay);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 8px;
    margin: 0;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.app-brand {
    font: 700 15px var(--font-display);
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.app-brand-logo {
    height: 36px;
    width: auto;
    border-radius: 8px;
    display: block;
}

.logout-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 6px;
    gap: 10px;
}

.app-user {
    font-size: 12.5px;
    color: var(--ink-dim);
}

@media (max-width: 480px) {
    .app-user {
        display: none;
    }
}

.app-user-link {
    font-size: 12.5px;
    color: var(--accent);
    text-decoration: none;
}

.app-user-link:hover {
    text-decoration: underline;
}

.logout-form button {
    font: 600 12.5px var(--font-body);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.app-main {
    flex: 1;
    padding: 24px 20px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

.app-footer {
    padding: 10px 20px 16px;
    font-size: 11px;
    color: var(--ink-faint);
    text-align: center;
}

.btn {
    font: 600 13.5px var(--font-body);
    border-radius: 9px;
    padding: 9px 15px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.btn-generate {
    width: 100%;
    justify-content: center;
}

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.dash-header h1 {
    font: 700 19px var(--font-display);
    margin: 0;
}

.dash-count {
    color: var(--ink-faint);
    font-weight: 500;
}

.dash-hint {
    color: var(--ink-dim);
    font-size: 13.5px;
}

.filter-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.filter-select-row {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.filter-select {
    flex: 1;
    min-width: 0;
    font: 600 12.5px var(--font-body);
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
}

.filter-select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.chip {
    font: 600 11.5px var(--font-body);
    padding: 5px 11px;
    border-radius: 99px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink-dim);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.chip.chip-active,
.chip-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.chip.status-draft {
    background: var(--surface-2);
    color: var(--ink-dim);
    cursor: default;
}

.chip.status-ready {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    cursor: default;
}

.chip.status-published {
    background: #2F5E86;
    border-color: #2F5E86;
    color: #fff;
    cursor: default;
}

.chip.status-sold {
    background: var(--clay-soft);
    color: var(--clay);
    cursor: default;
}

.chip.status-archived {
    background: var(--surface-2);
    color: var(--ink-faint);
    cursor: default;
}

.empty-state {
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    color: var(--ink-dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.category-tile {
    position: relative;
    aspect-ratio: 4 / 3.4;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    display: block;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.category-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.category-tile-empty img {
    filter: grayscale(1) brightness(.82);
    opacity: .6;
}

.category-tile-empty .category-label {
    background: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent);
}

.category-tile-empty .category-count {
    font-style: italic;
    color: rgba(255, 255, 255, .68);
}

.category-label {
    position: absolute;
    inset: auto 0 0 0;
    padding: 24px 11px 10px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .72), transparent);
    color: #fff;
    font: 700 13px var(--font-display);
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.category-count {
    display: block;
    font: 500 10.5px var(--font-body);
    color: rgba(255, 255, 255, .82);
    margin-top: 2px;
}

.category-all-link {
    margin-top: 18px;
}

.category-all-link a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.item-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: linear-gradient(155deg, var(--surface-2), var(--border));
    text-decoration: none;
    color: var(--ink);
    display: block;
}

.item-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.item-status-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
}

.item-price-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 8px 6px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent);
    color: #fff;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;
    font-weight: 700;
    font-size: 13px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.sold-stamp {
    position: absolute;
    z-index: 1;
    top: 16%;
    left: -10%;
    right: -10%;
    text-align: center;
    background: color-mix(in srgb, var(--clay) 88%, black 12%);
    color: #fff;
    font: 800 12px var(--font-body);
    letter-spacing: .12em;
    padding: 3px 0;
    transform: rotate(-10deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.page-title {
    font: 700 19px var(--font-display);
    margin: 0 0 4px;
}

.options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
    margin-top: 16px;
}

.options-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    text-decoration: none;
    color: var(--ink);
}

.options-item:hover {
    border-color: var(--border-strong);
}

.options-item-title {
    font: 600 14px var(--font-body);
}

.options-item-sub {
    font-size: 12px;
    color: var(--ink-dim);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 16px 0 20px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.stat-value {
    font: 700 20px ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;
    color: var(--ink);
}

.stat-label {
    font-size: 11.5px;
    color: var(--ink-dim);
}

.copy-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.copy-row-top {
    align-items: flex-start;
}

.btn-copy {
    flex-shrink: 0;
    font: 600 12px var(--font-body);
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
}

.page-sub {
    font-size: 13px;
    color: var(--ink-dim);
    margin: 0 0 20px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
    max-width: 620px;
}

.photo-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
    z-index: 1000;
}

.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.lightbox-photo-frame {
    /* Same definite-height flex pattern as .bg-preview-panel below (see its comment) — the info
       line needs guaranteed space under the image regardless of the photo's aspect ratio. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
}

.lightbox-photo-frame .lightbox-img {
    flex: 1 1 0;
    min-height: 0;
    max-width: 100%;
    object-fit: contain;
}

.lightbox-photo-info {
    flex: 0 0 auto;
    margin: 0;
    color: #fff;
    font: 500 12px var(--font-body);
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.bg-preview-panel {
    /* height:100% (not max-height) so this has a genuinely *definite* height, resolved against
       .lightbox-overlay's own box — which is sized via position:fixed + inset:0, not a vh/dvh unit,
       so it isn't subject to mobile Safari's "vh measures the largest possible viewport, not what's
       actually visible with the address bar showing" bug that a vh/dvh-based image cap kept running
       into (confirmed on a real iPhone — both attempts still let the image overflow past the
       Accept/Reject buttons). With a definite height here, the image below can be sized by pure
       flexbox distribution instead of guessing at a viewport-relative number.
       See PROJECT_CONTEXT.md — this is now the standard pattern for anything in .lightbox-overlay
       that needs to guarantee visible controls below/around an unpredictably-sized image. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 100%;
}

.bg-preview-panel .lightbox-img {
    /* The flexible element: shrinks to fill whatever height is left after .bg-preview-actions takes
       its own space below. min-height:0 overrides flexbox's default min-height:auto, which would
       otherwise refuse to shrink the image below its natural size and defeat this entirely. */
    flex: 1 1 0;
    min-height: 0;
    max-width: 100%;
    object-fit: contain;
    background:
        linear-gradient(45deg, #808080 25%, transparent 25%) -10px 0 / 20px 20px,
        linear-gradient(-45deg, #808080 25%, transparent 25%) -10px 0 / 20px 20px,
        linear-gradient(45deg, transparent 75%, #808080 75%) -10px 0 / 20px 20px,
        linear-gradient(-45deg, transparent 75%, #808080 75%) -10px 0 / 20px 20px,
        #fff;
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.bg-preview-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
}

.lightbox-close,
.lightbox-nav,
.lightbox-scissors,
.lightbox-edit {
    position: fixed;
    z-index: 1001;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: #2F5E86;
    color: #fff;
    font-size: 19px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.lightbox-close:disabled,
.lightbox-scissors:disabled,
.lightbox-edit:disabled {
    opacity: .3;
    cursor: default;
}

.lightbox-nav:disabled {
    display: none;
}

.lightbox-close {
    top: 18px;
    right: 18px;
}

.lightbox-prev {
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-next {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-scissors {
    bottom: 22px;
    left: calc(50% - 26px);
    transform: translateX(-50%);
}

.lightbox-edit {
    bottom: 22px;
    left: calc(50% + 26px);
    transform: translateX(-50%);
}

.photo-editor {
    /* Same definite-height flex frame as .bg-preview-panel/.lightbox-photo-frame — see their
       comments — so the toolbar/actions rows always have guaranteed space below the canvas. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
}

.photo-editor-canvas {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    border-radius: 10px;
    box-shadow: var(--shadow);
    cursor: grab;
    /* Without this, the browser's own touch scroll/pinch-zoom fights the canvas's own pointer-based
       pan/zoom handlers (PhotoEditor.razor.js) instead of leaving the gesture to it. */
    touch-action: none;
}

.photo-editor-toolbar,
.photo-editor-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.lightbox-status {
    position: fixed;
    bottom: 74px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    z-index: 1001;
}

.cover-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 1;
    font: 700 9.5px var(--font-body);
    letter-spacing: .02em;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 2px 6px;
    border-radius: 99px;
}

.photo-thumb-actions {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent);
}

.photo-thumb-actions button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .92);
    /* Fixed dark color, not the theme-flipping --ink token: the circle background stays
       near-white in both themes, so the glyph must stay dark to remain visible in dark mode. */
    color: #14181B;
    font: 700 13px var(--font-body);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.photo-thumb-actions button:disabled {
    opacity: .35;
    cursor: default;
}

.photo-thumb-actions button.confirm-delete {
    background: var(--clay);
    color: #fff;
}

.photo-add {
    aspect-ratio: 1;
    border-radius: 10px;
    border: 1px dashed var(--border-strong);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--ink-faint);
    font-size: 20px;
    cursor: pointer;
    position: relative;
}

.photo-add input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.photo-add-label {
    font-size: 10.5px;
}

.field-row {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.field-row .field label {
    font: 600 11.5px var(--font-body);
    color: var(--ink-dim);
    display: block;
    margin-bottom: 6px;
}

.draft-layout {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.draft-photos {
    width: 280px;
    flex-shrink: 0;
    align-content: flex-start;
}

@media (max-width: 620px) {
    .draft-photos {
        width: 100%;
    }
}

.draft-form {
    flex: 1;
    min-width: 280px;
    max-width: 460px;
}

.ai-badge {
    font: 600 11.5px var(--font-body);
    color: var(--accent);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.upload-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.upload-progress .ai-badge {
    margin: 0;
}

.field {
    margin-bottom: 14px;
}

.field label {
    font: 600 11.5px var(--font-body);
    color: var(--ink-dim);
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.char-count {
    font-weight: 500;
    color: var(--ink-faint);
}

.char-count-over {
    color: var(--clay);
    font-weight: 700;
}

.field input,
.field textarea {
    font: 14px var(--font-body);
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    width: 100%;
}

.field textarea {
    resize: vertical;
    line-height: 1.5;
}

.field input:focus,
.field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.price-lg {
    font: 700 26px ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;
    color: #9C6B1F;
    margin: 6px 0 14px;
}

.price-range-hint {
    font: 500 12px var(--font-body);
    color: var(--ink-faint);
    margin-left: 8px;
}

.sold-price-note {
    font: 600 14px var(--font-body);
    color: var(--clay);
    margin: -8px 0 14px;
}

@media (prefers-color-scheme: dark) {
    .price-lg {
        color: #D9A64C;
    }
}

.item-description {
    font-size: 13.5px;
    color: var(--ink-dim);
    line-height: 1.6;
    white-space: pre-wrap;
}

.download-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.draft-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    /* Extra breathing room below the last row of buttons: on mobile, the browser's own bottom
       toolbar/address bar can collapse on the first tap near the very bottom of the page, shifting
       the layout up and making that first tap land on whitespace instead of the button. */
    margin-bottom: 72px;
}

.btn-danger {
    color: var(--clay);
    border-color: var(--clay-soft);
}

h1:focus {
    outline: none;
}

.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;
}