html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

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

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

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

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

@media (max-width: 600px) {
  .responsive-table {
    overflow-x: auto;
    display: block;
  }
  .mud-grid .mud-item {
    margin-bottom: 8px;
  }
  .mud-button, .mud-icon-button {
    min-width: 48px;
    min-height: 48px;
    font-size: 1.1rem;
  }
  .mud-text-field, .mud-select {
    width: 100% !important;
  }
}

.thin-appbar {
    min-height: 40px !important;
    height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
}

.appbar-title {
    margin-left: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    color: white;
}

.drawer-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    width: 100%;
}

.mt-toolbar {
    margin-top: 24px !important;
}
/* ---------------------------------------------------------------------------
   Moved out of the components named below. A <style> block in a component that
   MudBlazor renders as dialog content becomes a real element inside .mud-dialog,
   and Blazor was inserting the NEXT dialog's container into it -- a modal opened
   from a modal ended up rendered twice, duplicate DOM ids and all. These rules
   were never scoped to their component anyway; a plain <style> tag is global.
   --------------------------------------------------------------------------- */

/* === from BaseModal.razor === */
    /* MudBlazor 7's .mud-dialog-content has padding:0 24px but also its own margin:8px 0 --
       a child's negative margin can cancel the container's padding but not its margin (mud-dialog-
       content has overflow:auto, which clips negative margins at its own box edge), so the header
       bar was leaving an 8px gap of bare dialog background above it no matter how the header's own
       margin was tuned. BaseModal is the only place in the app that renders a real MudDialog (the
       other MudDialog hit is just <MudDialogProvider/> in MainLayout), so this override is scoped
       to exactly the dialogs that need it. */
    .mud-dialog-content {
        margin-top: 0 !important;
    }

    /* Mirrors the per-modal .modal-v2-header pattern (AddCarModal/CarDetailModal etc.) so the
       icon-badge header sits flush with the top of the dialog paper. With .mud-dialog-content's
       own top margin zeroed above, there's no more vertical gap left to cancel -- only the 24px
       horizontal padding needs offsetting so the bar spans full width. */
    .tg-modal-header {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--r-appbar);
        padding: 14px 18px;
        margin: 0 -24px 16px;
        border-bottom: 3px solid var(--r-primary);
    }
    .tg-modal-header-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: var(--radius);
        background: var(--r-primary);
        color: var(--r-onbar);
        font-size: 18px;
        flex-shrink: 0;
    }
    .tg-modal-header-titles {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .tg-modal-header-title {
        font-family: var(--display);
        font-weight: 900;
        font-size: 20px;
        letter-spacing: 0.4px;
        line-height: 1.05;
        text-transform: uppercase;
        color: var(--r-onbar);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tg-modal-header-subtitle {
        font-size: 12px;
        color: var(--r-onbar-2);
        margin-top: 2px;
    }
    .tg-modal-header-accessory {
        margin-left: auto;
        flex-shrink: 0;
    }

    .tg-modal-footer {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }
    .tg-modal-footer-spacer { flex: 1; }

    /* Guided-flow indicator (tutorial-design.html artefact 6) -- injected above the form, the
       modal shell itself is untouched. */
    .guided-strip {
        display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
        padding: 10px 14px; background: var(--r-surface-2);
        border: 1px solid var(--r-border-soft); border-radius: var(--radius);
        margin-bottom: 16px;
    }
    .guided-title { font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--r-text-2); white-space: nowrap; }
    .guided-steps { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; flex: 1 0 100%; }
    .guided-step { display: flex; align-items: center; gap: 6px; }
    .guided-pip {
        width: 18px; height: 18px; border-radius: var(--radius-pill); flex-shrink: 0;
        display: flex; align-items: center; justify-content: center; font-size: 10px;
        font-family: var(--mono);
    }
    .guided-pip.done { background: var(--status-complete); color: var(--r-onbar); }
    .guided-pip.current { background: var(--r-primary); color: var(--r-onbar); }
    .guided-pip.todo { background: transparent; border: 2px solid var(--r-border); color: var(--r-text-muted); }
    .guided-step .lbl { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--r-text-muted); }
    .guided-step.current .lbl { color: var(--r-text); }
    .guided-connector { width: 14px; height: 1px; background: var(--r-border); }
    .guided-stop { background: transparent; border: none; padding: 0; color: var(--r-link); font-family: var(--sans); font-size: 12px; cursor: pointer; white-space: nowrap; }
    .guided-stop:hover { color: var(--r-primary); text-decoration: underline; }

/* === from TutorialModal.razor === */
    .tut-block + .tut-block { margin-top: 22px; }
    .tut-block-label {
        font-family: var(--display);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--r-text-muted);
        margin: 0 0 10px;
    }
    .tut-block-note { font-size: 12px; color: var(--r-text-muted); margin: -4px 0 12px; }

    /* Block A -- hierarchy */
    .tut-hierarchy {
        display: flex;
        flex-direction: column;
        background: var(--r-surface);
        border: 1px solid var(--r-border);
        border-radius: var(--radius);
        padding: 12px;
    }
    .tut-hier-tag { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; padding: 0 2px; }
    .tut-hier-tag .k { font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
    .tut-hier-tag .d { font-size: 11px; color: var(--r-text-muted); }
    .tut-hier-tag--catalogue .k { color: var(--r-text-2); }
    .tut-hier-tag--yours { margin-top: 12px; padding-left: 58px; }
    .tut-hier-tag--yours .k { color: var(--r-primary); }

    .tut-garage-box {
        margin-left: 58px;
        padding: 7px;
        background: var(--r-surface-2);
        border: 1px solid var(--r-border);
        border-radius: var(--radius);
        box-shadow: inset 3px 0 0 var(--r-primary);
    }
    .tut-garage-head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 6px 5px; flex-wrap: wrap; }
    .tut-garage-head .tut-garage-name { font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--r-primary); line-height: 1; }
    .tut-garage-head .tut-garage-desc { font-size: 11px; color: var(--r-text-muted); line-height: 1.2; }
    .tut-garage-head i { font-size: 13px; color: var(--r-primary); align-self: center; }
    .tut-garage-box .tut-hierarchy-row { padding: 7px 9px; background: var(--r-surface); border: 1px solid var(--r-border-soft); border-radius: var(--radius); }
    .tut-garage-box .tut-hier-icon { width: 26px; height: 26px; font-size: 14px; }

    .tut-hierarchy-row { display: flex; align-items: center; gap: 11px; padding: 7px 4px; }
    .tut-hierarchy-row + .tut-hierarchy-row { border-top: 1px solid var(--r-border-soft); }
    .tut-hierarchy-row--indent-1 { padding-left: 22px; }
    .tut-hierarchy-row--indent-2 { padding-left: 40px; }

    .tut-hier-icon {
        width: 30px; height: 30px; border-radius: var(--radius); flex-shrink: 0;
        display: flex; align-items: center; justify-content: center; font-size: 16px;
        background: var(--r-bg-2); color: var(--r-text-2); border: 1px solid var(--r-border-soft);
    }
    .tut-hier-icon--yours { background: var(--r-primary); color: var(--r-onbar); border-color: var(--r-primary); }
    .tut-hier-body { flex: 1; min-width: 0; }
    .tut-hier-name { font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--r-text); line-height: 1.1; }
    .tut-hier-desc { font-size: 12px; color: var(--r-text-2); line-height: 1.35; }
    .tut-code {
        font-family: var(--mono); font-size: 11px; color: var(--r-text-2);
        background: var(--r-surface-2); border: 1px solid var(--r-border-soft);
        border-radius: var(--radius-xs); padding: 2px 6px; white-space: nowrap;
    }

    /* Block B -- checklist */
    .tut-checklist { display: flex; flex-direction: column; gap: 6px; }
    .tut-checklist-item {
        display: flex; align-items: center; gap: 12px; padding: 9px 10px;
        border: 1px solid var(--r-border-soft); border-radius: var(--radius);
        background: var(--r-surface); cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease;
    }
    .tut-checklist-item:hover { background: var(--r-surface-2); border-color: var(--r-border); }
    .tut-checklist-item.is-next { box-shadow: inset 3px 0 0 var(--r-primary); border-color: var(--r-border); }
    .tut-checklist-caret { flex-shrink: 0; font-size: 14px; color: var(--r-text-muted); }
    .tut-checklist-item:hover .tut-checklist-caret { color: var(--r-text); }
    .tut-check {
        width: 22px; height: 22px; border-radius: var(--radius-pill); flex-shrink: 0;
        display: flex; align-items: center; justify-content: center; font-size: 13px;
    }
    .tut-check.is-done { background: var(--status-complete); color: var(--r-onbar); }
    .tut-check.is-todo { background: transparent; border: 2px solid var(--r-border); color: transparent; }
    .tut-check.is-next { border-color: var(--r-primary); }
    .tut-checklist-body { flex: 1; min-width: 0; }
    .tut-checklist-label { font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; line-height: 1.1; }
    .tut-checklist-item.is-done .tut-checklist-label { color: var(--r-text-muted); }
    .tut-checklist-item.is-todo .tut-checklist-label { color: var(--r-text); }
    .tut-checklist-help { font-size: 12px; color: var(--r-text-muted); }
    .tut-checklist-count { font-family: var(--mono); font-size: 11px; color: var(--r-text-2); flex-shrink: 0; }
    .tut-checklist-item.is-done .tut-checklist-count { color: var(--status-complete); }

    /* Block C -- ways (reference, not buttons: no hover state, no cursor change) */
    .tut-ways { display: flex; flex-direction: column; gap: 8px; }
    .tut-way {
        display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px;
        border: 1px solid var(--r-border-soft); border-radius: var(--radius);
        background: var(--r-surface);
    }
    .tut-way--primary { border-color: var(--r-primary); box-shadow: inset 3px 0 0 var(--r-primary); }
    /* Only applied while the guided flow is at the step-4 fork -- see the WHY comment above the
       Block C markup for why these two cards deviate from "reference, not buttons" here. */
    .tut-way--clickable { cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
    .tut-way--clickable:hover { background: var(--r-surface-2); border-color: var(--r-border); }
    .tut-way-icon {
        width: 34px; height: 34px; border-radius: var(--radius); flex-shrink: 0;
        display: flex; align-items: center; justify-content: center; font-size: 18px;
        background: var(--r-surface-2); color: var(--r-text-2); border: 1px solid var(--r-border-soft);
    }
    .tut-way--primary .tut-way-icon { background: var(--r-primary); color: var(--r-onbar); border-color: var(--r-primary); }
    .tut-way-body { flex: 1; min-width: 0; }
    .tut-way-title-row { display: flex; align-items: center; gap: 8px; }
    .tut-way-title { font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; line-height: 1.1; }
    .tut-way-tag {
        font-family: var(--display); font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
        text-transform: uppercase; color: var(--r-primary);
        border: 1px solid var(--r-primary); border-radius: var(--radius-pill); padding: 1px 7px;
    }
    .tut-way-desc { font-size: 12px; color: var(--r-text-2); line-height: 1.4; margin-top: 2px; }

/* === from AddCarModal.razor === */
    .modal-section { margin-bottom: 20px; }
    .modal-section-label {
        font-family: var(--display);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.4px;
        color: var(--r-text-muted);
        margin-bottom: 8px;
    }
    .modal-field-label {
        font-family: var(--display);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.4px;
        color: var(--r-text-muted);
        margin-bottom: 6px;
    }

    /* Code check ring */
    .modal-code-row { display: flex; align-items: flex-start; gap: 12px; }
    .modal-code-ring {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 0 12px;
        height: 46px;
        background: var(--r-surface);
        border: 1px solid var(--r-border);
        border-radius: 8px;
        transition: box-shadow 0.2s;
    }
    .modal-code-ring:focus-within { box-shadow: var(--shadow-scanner); }
    .ring-found { box-shadow: inset 0 0 0 2px var(--cond-1) !important; }

    /* Found callout — rgba(46,125,70,...) = --cond-1's RGB, tinted per LogCarModal's found card in modals.jsx */
    .modal-found-callout {
        background: rgba(46,125,70,0.10);
        border: 1px solid rgba(46,125,70,0.25);
        border-radius: 6px;
        padding: 10px 14px;
        min-width: 180px;
    }
    .found-callout-name { font-size: 13px; font-weight: 600; color: var(--r-text); }
    .found-callout-meta { font-family: var(--mono); font-size: 11px; color: var(--r-text-muted); margin-top: 2px; }
    .found-callout-note { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.8px; color: var(--cond-1); margin-top: 4px; }

/* === from AddModelModal.razor === */
    .modal-section { margin-bottom: 20px; }
    .modal-section-label {
        font-family: var(--display);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.4px;
        color: var(--r-text-muted);
        margin-bottom: 8px;
    }
    .modal-helper-line {
        font-size: 12px;
        color: var(--r-text-muted);
        margin-bottom: 16px;
        line-height: 1.5;
    }

/* === from AddModelSetModal.razor === */
    .modal-field-label {
        font-family: var(--display);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.4px;
        color: var(--r-text-muted);
        margin-bottom: 6px;
    }
    .status-seg-row { display: flex; gap: 4px; }
    .status-seg {
        flex: 1;
        padding: 7px 10px;
        border: 1px solid var(--r-border);
        border-radius: 6px;
        background: var(--r-surface);
        font-family: var(--display);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--r-text-muted);
        cursor: pointer;
        transition: border-color 0.12s, background 0.12s;
    }
    .status-seg:hover { border-color: var(--r-text-muted); color: var(--r-text); }
    .status-seg-active { border-color: var(--r-primary); background: color-mix(in srgb, var(--r-primary) 10%, transparent); color: var(--r-primary); }

/* === from CarDetailModal.razor === */
    .modal-section-label {
        font-family: var(--display);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.4px;
        color: var(--r-text-muted);
        margin-bottom: 8px;
    }
    .edit-field-label {
        font-family: var(--display);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.4px;
        color: var(--r-text-muted);
        margin-bottom: 6px;
    }

    /* Catalog section */
    .catalog-section {
        background: var(--r-bg);
        border: 1px solid var(--r-border);
        border-radius: 6px;
        padding: 14px 16px;
        margin-bottom: 16px;
    }
    .catalog-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 20px;
    }
    .catalog-label {
        font-family: var(--display);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        color: var(--r-text-muted);
        margin-bottom: 2px;
    }
    .catalog-value {
        font-family: var(--sans);
        font-size: 13px;
        color: var(--r-text);
    }

    /* Edit section */
    .edit-section { margin-bottom: 16px; }

    /* History section */
    .history-section { margin-bottom: 16px; }
    .hist-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid var(--r-border-soft);
    }
    .hist-action {
        font-family: var(--sans);
        font-size: 13px;
        color: var(--r-text-2);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .hist-time {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--r-text-muted);
    }

    /* Delete zone */
    .delete-zone {
        padding-top: 12px;
        border-top: 1px solid var(--r-border-soft);
    }
    .btn-delete {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        background: transparent;
        color: var(--r-primary);
        border: 1px solid var(--r-primary);
        border-radius: 6px;
        font-family: var(--display);
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.8px;
        cursor: pointer;
        transition: background 0.12s, color 0.12s;
    }
    .btn-delete:hover { background: var(--r-primary); color: #fff; }

/* === from GarageDetailModal.razor === */
    .modal-section { margin-bottom: 20px; }
    .modal-section-label {
        font-family: var(--display);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.4px;
        color: var(--r-text-muted);
        margin-bottom: 8px;
    }

/* === from ManufacturerDetailModal.razor === */
    .modal-section { margin-bottom: 20px; }
    .modal-section-label {
        font-family: var(--display);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.4px;
        color: var(--r-text-muted);
        margin-bottom: 8px;
    }

/* === from ModelSetDetailModal.razor === */
    .modal-section { margin-bottom: 20px; }
    .modal-section-label {
        font-family: var(--display);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.4px;
        color: var(--r-text-muted);
        margin-bottom: 8px;
    }
    .modal-field-label {
        font-family: var(--display);
        font-size: 10px; font-weight: 700;
        letter-spacing: 1.4px; color: var(--r-text-muted);
        margin-bottom: 6px;
    }
    .status-seg-row { display: flex; gap: 4px; }
    .status-seg {
        flex: 1; padding: 7px 10px;
        border: 1px solid var(--r-border); border-radius: 6px;
        background: var(--r-surface);
        font-family: var(--display); font-size: 11px; font-weight: 700;
        letter-spacing: 0.8px; text-transform: uppercase;
        color: var(--r-text-muted); cursor: pointer;
        transition: border-color 0.12s, background 0.12s;
    }
    .status-seg:hover { border-color: var(--r-text-muted); color: var(--r-text); }
    .status-seg-active { border-color: var(--r-primary); background: color-mix(in srgb, var(--r-primary) 10%, transparent); color: var(--r-primary); }

    .set-models-wrap { border: 1px solid var(--r-border); border-radius: 6px; overflow: hidden; }
    .set-models-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .set-models-table thead tr { background: var(--r-bg); }
    .set-models-table th {
        font-family: var(--mono); font-size: 9px; font-weight: 500;
        letter-spacing: 1.2px; text-transform: uppercase;
        color: var(--r-text-muted); padding: 7px 10px; text-align: left;
        border-bottom: 1px solid var(--r-border);
    }
    .set-models-table td { padding: 7px 10px; border-bottom: 1px solid var(--r-border-soft); color: var(--r-text); }
    .set-models-table tr:last-child td { border-bottom: none; }
    .code-chip-sm {
        font-family: var(--mono); font-size: 10px; font-weight: 500;
        padding: 1px 6px; background: var(--r-bg);
        border: 1px solid var(--r-border); border-radius: 4px; white-space: nowrap;
    }
    .muted-sm { color: var(--r-text-muted); }