.check-card { flex-wrap: wrap; }
.issue-note { display: none; flex-basis: 100%; }
.issue-note.visible { display: block; }
.issue-note input { margin-top: 5px; }
.na-button.selected { background: var(--blue-pale); color: var(--blue); }
.field-with-action { display: flex; gap: 7px; align-items: stretch; }
.field-with-action input { min-width: 0; }
.add-record { margin-top: 7px; flex: none; border: 1px solid var(--blue); color: var(--blue); background: var(--blue-pale); border-radius: 6px; padding: 0 9px; font: 700 12px 'DM Sans'; cursor: pointer; }
.photo-add { position: relative; display: grid; place-items: center; width: 31px; height: 29px; color: var(--blue); background: #fff; border-left: 1px solid var(--line); font: 700 20px 'DM Sans'; cursor: pointer; }
.photo-add input { display: none; }
.photo-add:hover { background: var(--blue-pale); }
.photo-add.has-photos { color: #fff; background: var(--blue); }
.photo-add.has-photos::after { content: attr(data-count); position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--green); color: #fff; font-size: 9px; }
.camera-add { display: grid; place-items: center; width: 31px; height: 29px; color: var(--blue); background: #fff; border-left: 1px solid var(--line); font: 700 17px 'DM Sans'; cursor: pointer; }
.camera-add input { display: none; }
.camera-add:hover { background: var(--blue-pale); }
.check-controls { overflow: visible; }
.inspection-photo-preview { display: flex; flex-basis: 100%; gap: 7px; flex-wrap: wrap; }
.inspection-photo-preview:empty { display: none; }
.inspection-photo-preview a { display: block; width: 56px; height: 43px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.inspection-photo-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-thumb { position: relative; }
.photo-thumb button { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; line-height: 15px; cursor: pointer; }
.user-area { display: flex; align-items: center; gap: 12px; }
.logout-button, .auth-switch { border: 0; background: none; color: var(--blue); font: 600 13px 'DM Sans'; cursor: pointer; }
.auth-modal { z-index: 40; }
.auth-modal .modal-card { max-width: 410px; }
.auth-modal label { margin-top: 16px; }
.auth-error { min-height: 18px; margin-top: 10px; color: var(--red); font-size: 12px; }
.auth-switch { width: 100%; margin-top: 20px; text-decoration: underline; }
.user-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.user-actions select { width: auto; min-height: 32px; margin: 0; padding: 5px 8px; font-size: 12px; }
.danger-button { color: var(--red); margin-top: 9px; }
.admin-user-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 0 18px; border-bottom: 1px solid var(--line); }
.admin-user-form label { font-size: 11px; }
.admin-user-form input, .admin-user-form select { min-height: 35px; padding: 7px; font-size: 13px; }
.admin-user-form .save-button { grid-column: span 2; }
.admin-user-form .auth-error { grid-column: span 2; margin: 0; }
.check-card:has(.pass-button.selected) { background: #d9f6e8; border-color: #2eab7c; }
.check-card:has(.issue-button.selected) { background: #ffe0e0; border-color: #e35d62; }
.check-card:has(.na-button.selected) { background: #dceeff; border-color: #4c9ddd; }
.issue-note[data-expiration-warning]::after { content: attr(data-expiration-warning); display: block; margin-top: 7px; color: #a9262c; font-size: 12px; font-weight: 700; }
.registration-form label { margin-top: 17px; }
.registration-form .field-grid { margin-top: 7px; }
.registration-form { max-height: calc(100dvh - 40px); overflow-y: auto; }
.registration-form .modal-actions { position: sticky; z-index: 2; bottom: 0; margin-bottom: 0; padding: 14px 0 16px; background: #fff; border-top: 1px solid var(--line); }
.compact-grid { grid-template-columns: repeat(2, 1fr); }
.hero-actions { display: flex; gap: 9px; }
.field-grid > label { position: relative; }
.profile-preview { display: none; position: absolute; z-index: 4; width: min(340px, 100%); margin-top: 4px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 8px 18px #102a4326; }
.profile-preview.show { display: block; }
.mini-profile { display: flex; align-items: center; gap: 9px; }
.mini-profile img, .avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar { display: grid; place-items: center; color: #fff; background: var(--blue); font-weight: 700; }
.mini-profile b, .vehicle-profile b, .registry-item b { display: block; color: var(--ink); }
.mini-profile small, .vehicle-profile small, .registry-item small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); font-weight: 400; }
.thumbs { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.thumbs img { width: 45px; height: 35px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.no-photo { color: var(--muted); font-size: 12px; font-weight: 400; }
.registry-heading { margin: 24px 0 9px; font-size: 11px; font-weight: 700; letter-spacing: 1.1px; color: var(--blue); }
.registry-item { border: 1px solid var(--line); border-radius: 7px; padding: 11px; margin-bottom: 8px; }
@media(max-width:700px) { .compact-grid { grid-template-columns: 1fr; } }
@media(max-width:700px) { .modal:has(.registration-form) { align-items: start; padding: 8px; overflow-y: auto; } .registration-form { width: 100%; max-height: calc(100dvh - 16px); padding: 24px 20px 0; } .registration-form .modal-actions { bottom: 0; flex-direction: row; background: #fff; } .registration-form .modal-actions > * { flex: 1; } }
.modal-card > .modal-close { position: absolute; right: 18px; top: 18px; }
.registration-form .modal-actions .modal-close { position: static; width: auto; height: auto; font-size: 14px; line-height: normal; }
.check-card:has(.pass-button.selected) { background: #a8efd0; border-color: #07895b; box-shadow: inset 0 0 0 1px #07895b; }
.check-card:has(.issue-button.selected) { background: #ffb8b8; border-color: #d12028; box-shadow: inset 0 0 0 1px #d12028; }
.check-card:has(.na-button.selected) { background: #b9e0ff; border-color: #1678bd; box-shadow: inset 0 0 0 1px #1678bd; }
.check-card:has(.pass-button.selected) .pass-button { background: #057a50; color: #fff; }
.check-card:has(.issue-button.selected) .issue-button { background: #c9232b; color: #fff; }
.check-card:has(.na-button.selected) .na-button { background: #126bac; color: #fff; }
.check-card .check-copy { flex-basis: 100%; }
.check-card .check-controls { flex-basis: 100%; justify-content: flex-start; }
.issue-note[data-oil-warning]::after { content: attr(data-oil-warning); display: block; margin-top: 7px; color: #a9262c; font-size: 12px; font-weight: 700; }
body.access-locked .topbar, body.access-locked main { display: none; }
body.access-locked .auth-modal { background: #f7f9fb; }