:root {
  --ink: #152938;
  --navy: #12324a;
  --blue: #1261a0;
  --blue-dark: #0d4e82;
  --mint: #30b49a;
  --surface: #f3f6f8;
  --line: #dce4e9;
}

html { min-height: 100%; }
body { min-height: 100vh; background: var(--surface); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
body.admin-page {
  background:
    radial-gradient(circle at 88% 0, rgba(171, 55, 62, .23), transparent 38rem),
    linear-gradient(180deg, #f6dfe2 0, #f7e9eb 24rem, #f1f3f5 52rem);
}
.admin-page .app-header .navbar { background: linear-gradient(135deg, #f8d9dc 0, #efbec4 100%) !important; border-bottom-color: #bd6872 !important; box-shadow: inset 0 -4px 0 rgba(145, 39, 50, .32), 0 .35rem 1rem rgba(105,32,40,.13); }
.admin-page .navbar-brand strong { color: #70232c; }
.admin-page .navbar-brand small { color: #81434a !important; }
.admin-page .app-breadcrumb { border-color: #dfb9bd; background: rgba(255,244,245,.92); }
.admin-page .admin-section-nav { border-color: #dfb9bd; background: rgba(255,247,248,.96); box-shadow: 0 .5rem 1.5rem rgba(112,37,45,.12); }
.admin-page .eyebrow { color: #8d2f38; }
.startup-splash { display: none; }
.show-startup-splash .startup-splash {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: max(1.5rem, env(safe-area-inset-top)) 1.5rem max(1.5rem, env(safe-area-inset-bottom));
  color: #fff;
  background:
    radial-gradient(circle at 50% 38%, rgba(48,180,154,.24), transparent 36%),
    linear-gradient(155deg, #173f5b 0%, #12324a 52%, #0b2334 100%);
  opacity: 1;
  transition: opacity .42s ease, visibility .42s ease;
}
.startup-splash-content { display: flex; flex-direction: column; align-items: center; width: min(100%, 19rem); text-align: center; }
.startup-icon-stage { position: relative; width: 9rem; height: 9rem; display: grid; place-items: center; margin-bottom: 1.35rem; overflow: hidden; border-radius: 2.1rem; box-shadow: 0 1.5rem 3.5rem rgba(0,0,0,.28); animation: startup-icon-arrive .72s cubic-bezier(.2,.85,.32,1.18) both; }
.startup-icon-stage img { position: relative; z-index: 2; display: block; width: 9rem; height: 9rem; }
.startup-icon-pulse { position: absolute; z-index: 1; inset: 10%; border: 2px solid rgba(252,244,3,.72); border-radius: 2rem; animation: startup-pulse 1.25s ease-out .25s infinite; }
.startup-scan-line { position: absolute; z-index: 3; left: 8%; right: 8%; top: 10%; height: 3px; border-radius: 999px; background: #fcf403; box-shadow: 0 0 .8rem rgba(252,244,3,.9), 0 0 1.7rem rgba(252,244,3,.5); animation: startup-scan 1.15s ease-in-out .45s both; }
.startup-splash-content > strong { font-size: 1.08rem; font-weight: 850; letter-spacing: .18em; animation: startup-text-arrive .5s ease .32s both; }
.startup-splash-subtitle { margin-top: .42rem; color: rgba(255,255,255,.72); font-size: .8rem; animation: startup-text-arrive .5s ease .45s both; }
.startup-progress { width: 8.5rem; height: .25rem; margin-top: 1.35rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.16); }
.startup-progress > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #30b49a, #fcf403); transform-origin: left; animation: startup-progress 1.65s cubic-bezier(.2,.75,.25,1) .12s both; }
.startup-splash-leaving { opacity: 0 !important; visibility: hidden; }

@keyframes startup-icon-arrive {
  from { opacity: 0; transform: translateY(1.25rem) scale(.78) rotate(-3deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes startup-pulse {
  0% { opacity: .75; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes startup-scan {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(7.1rem); }
}
@keyframes startup-text-arrive {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes startup-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .startup-icon-stage,
  .startup-icon-pulse,
  .startup-scan-line,
  .startup-splash-content > strong,
  .startup-splash-subtitle,
  .startup-progress > span { animation: none; }
  .show-startup-splash .startup-splash { transition-duration: .08s; }
}
.app-header { z-index: 1020; }
.app-toast-region { position: fixed; z-index: 1095; top: max(1rem, env(safe-area-inset-top)); right: 1rem; display: grid; width: min(25rem, calc(100vw - 2rem)); gap: .7rem; pointer-events: none; }
.app-toast { --toast-duration: 5000ms; position: relative; display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) 2.2rem; align-items: center; gap: .75rem; overflow: hidden; min-height: 5.2rem; padding: .85rem .65rem 1rem .9rem; border: 1px solid #8ad0ba; border-radius: 1rem; color: #123c31; background: #f2fff9; box-shadow: 0 1rem 2.8rem rgba(8, 42, 33, .24); pointer-events: auto; animation: app-toast-enter .24s cubic-bezier(.2,.8,.3,1) both; }
.app-toast-icon { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #148064; font-size: 1.35rem; font-weight: 850; box-shadow: 0 .3rem .8rem rgba(20,128,100,.25); }
.app-toast-content { min-width: 0; }
.app-toast-content strong { display: block; margin-bottom: .15rem; color: #0f5947; font-size: .95rem; }
.app-toast-content p { margin: 0; overflow-wrap: anywhere; color: #315f54; font-size: .84rem; line-height: 1.35; }
.app-toast-close { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; align-self: start; padding: 0; border: 0; border-radius: 50%; color: #3d6c60; background: transparent; font-size: 1.5rem; line-height: 1; }
.app-toast-close:hover, .app-toast-close:focus-visible { color: #123c31; background: #dff5ee; outline: none; }
.app-toast-progress { position: absolute; right: 0; bottom: 0; left: 0; height: .3rem; background: #d5eee6; }
.app-toast-progress > span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #30b49a, #148064); transform-origin: left; animation: app-toast-countdown var(--toast-duration) linear forwards; }
.app-toast-leaving { animation: app-toast-leave .2s ease forwards; }
@keyframes app-toast-enter {
  from { opacity: 0; transform: translateY(-.7rem) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes app-toast-leave {
  to { opacity: 0; transform: translateY(-.5rem) scale(.98); }
}
@keyframes app-toast-countdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
@media (max-width: 575.98px) {
  .app-toast-region { top: max(.65rem, env(safe-area-inset-top)); right: .65rem; width: calc(100vw - 1.3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .app-toast, .app-toast-leaving { animation-duration: .01ms; }
  .app-toast-progress > span { animation: none; }
}
.navbar-brand { color: var(--ink); font-size: 1rem; line-height: 1.05; }
.navbar-brand small { font-size: .72rem; font-weight: 500; margin-top: .2rem; }
.header-logo { width: auto; height: 4.05rem; object-fit: contain; flex: 0 0 auto; }
.app-header-actions { flex: 0 0 auto; justify-content: flex-end; }
.app-header-home, .app-header-admin { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.7rem; font-weight: 750; white-space: nowrap; }
.app-breadcrumb { margin: -.55rem 0 1.35rem; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(255,255,255,.72); font-size: .82rem; }
.app-breadcrumb a { color: var(--blue); font-weight: 700; text-decoration: none; }
.app-breadcrumb a:hover, .app-breadcrumb a:focus-visible { color: var(--blue-dark); text-decoration: underline; }
.app-breadcrumb .breadcrumb-item.active { color: #526673; font-weight: 650; }
.brand-mark { width: 4.3rem; height: 4.3rem; display: grid; place-items: center; border-radius: 1.35rem; color: #fff; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(145deg, var(--navy), var(--blue)); box-shadow: 0 .65rem 1.5rem rgba(18,50,74,.2); }
.brand-mark-sm { width: 2.65rem; height: 2.65rem; border-radius: .8rem; font-size: .9rem; box-shadow: none; }
@media (max-width: 420px) {
  .header-logo { height: 2rem; }
  .navbar-brand { gap: .4rem !important; }
}
@media (max-width: 767.98px) {
  .app-header .navbar > .container { flex-wrap: wrap; gap: .35rem .75rem; }
  .app-header-actions { width: 100%; }
  .app-header-actions .app-header-home { flex: 1 1 auto; }
  .app-header-actions .app-header-admin { flex: 0 0 auto; }
  .app-breadcrumb { margin-top: -.35rem; overflow-x: auto; white-space: nowrap; }
  body .admin-section-nav { top: 7.9rem; }
  .admin-page .app-header-actions { padding-top: .4rem; border-top: 1px solid rgba(126, 35, 45, .22); }
}
@media (max-width: 420px) {
  .app-header-actions { gap: .4rem !important; }
  .app-header-home, .app-header-admin { min-height: 2.45rem; padding: .35rem .6rem; font-size: .78rem; }
  body .admin-section-nav { top: 5.75rem; }
}
.eyebrow { color: var(--blue); font-size: .75rem; font-weight: 800; letter-spacing: .14em; }
.hero { max-width: 46rem; }
.btn-primary { --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-hover-bg: var(--blue-dark); --bs-btn-hover-border-color: var(--blue-dark); --bs-btn-active-bg: var(--blue-dark); }
.btn-icon { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: .8rem; font-size: 1.15rem; }
.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu-trigger { position: relative; }
.user-menu-icon { position: absolute; top: 50%; left: 50%; display: block; width: 1.25rem; height: 1.25rem; transform: translate(-50%, -50%); }
.user-menu[open] .user-menu-trigger { color: #fff; border-color: var(--blue); background: var(--blue); }
.user-menu-panel { position: absolute; z-index: 1070; top: calc(100% + .55rem); right: 0; width: min(19rem, calc(100vw - 1.5rem)); padding: .65rem; border: 1px solid #dce5ea; border-radius: .9rem; background: #fff; box-shadow: 0 .9rem 2.2rem rgba(15, 35, 50, .2); }
.user-menu-identity { display: flex; align-items: center; gap: .7rem; padding: .55rem .55rem .7rem; }
.user-menu-identity > div { min-width: 0; }
.user-menu-identity strong, .user-menu-identity small { display: block; overflow-wrap: anywhere; }
.user-menu-identity strong { color: var(--ink); font-size: .92rem; }
.user-menu-identity small { margin-top: .15rem; color: #647481; font-size: .76rem; }
.user-menu-avatar { width: 2.35rem; height: 2.35rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #e9f2f7; font-size: 1.1rem; }
.user-menu-separator { height: 1px; margin: .1rem .35rem .4rem; background: #e1e8ec; }
.user-menu-action { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .7rem .75rem; border: 0; border-radius: .65rem; background: transparent; color: var(--ink); font-size: .88rem; font-weight: 650; text-align: left; text-decoration: none; }
.user-menu-action:hover, .user-menu-action:focus-visible { color: var(--blue-dark); background: #eef5f8; outline: none; }
.user-menu-logout { color: #a12626; }
.user-menu-logout:hover, .user-menu-logout:focus-visible { color: #861b1b; background: #fff0f0; }
.app-alert-dialog.feedback-dialog { width: min(calc(100% - 2rem), 32rem); }
.feedback-dialog-heading { display: flex; align-items: flex-start; gap: 1rem; }
.feedback-dialog-heading > div { min-width: 0; }
.feedback-dialog-icon { width: 3.25rem; height: 3.25rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 1rem; background: #e7f0f8; font-size: 1.45rem; }
.feedback-dialog textarea { min-height: 9rem; resize: vertical; }
.record-card { min-height: 20rem; padding: 2rem; border-radius: 1.25rem; transition: transform .18s ease, box-shadow .18s ease; color: var(--ink); }
.record-card:hover, .record-card:focus-visible { transform: translateY(-3px); box-shadow: 0 1rem 2.6rem rgba(23,50,70,.13) !important; outline: 3px solid rgba(18,97,160,.15); }
.data-menu-card { border-radius: 1.25rem; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease; }
.data-menu-card:hover, .data-menu-card:focus-visible { transform: translateY(-3px); box-shadow: 0 1rem 2.6rem rgba(23,50,70,.13) !important; outline: 3px solid rgba(18,97,160,.15); }
.kompas-sync-status { color: #116b58; font-size: .82rem; font-weight: 750; }
.record-icon { width: 4.25rem; height: 4.25rem; display: grid; place-items: center; border-radius: 1.15rem; margin-bottom: 2rem; font-size: 2rem; font-weight: 700; }
.station-icon { background: #e6f5f2; color: #15826e; }
.container-icon { background: #e7f0f8; color: var(--blue); }
.card-action { margin-top: auto; color: var(--blue); font-weight: 750; }
.data-status { padding: 1rem 1.25rem; border: 1px solid var(--line); background: rgba(255,255,255,.6); border-radius: .9rem; color: #526673; font-size: .9rem; }
.card, .scanner-shell { border-radius: 1.15rem; }
.section-heading { max-width: 48rem; }
.back-button { color: #526673; text-decoration: none; font-weight: 650; }
.back-button:hover { color: var(--blue); }
.scan-content { width: min(100%, 32rem); margin-inline: auto; }
.scan-toolbar { display: flex; align-items: stretch; justify-content: space-between; gap: .75rem; margin-bottom: .7rem; padding: .42rem; border: 1px solid rgba(18,50,74,.08); border-radius: .95rem; background: rgba(255,255,255,.92); box-shadow: 0 .35rem 1rem rgba(23,50,70,.07); }
.quick-mode-toolbar { margin-bottom: 1rem; }
.scan-back { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .4rem; border: 0; border-radius: .7rem; color: var(--blue-dark); background: #edf3f7; font-size: .9rem; font-weight: 750; text-decoration: none; }
.scan-back:hover, .scan-back:focus-visible { color: #fff; background: var(--blue); outline: 3px solid rgba(18,97,160,.16); }
.scan-back-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .55rem; color: #fff; background: var(--blue); font-size: 1.15rem; line-height: 1; }
.scan-back:hover .scan-back-icon, .scan-back:focus-visible .scan-back-icon { color: var(--blue-dark); background: #fff; }
.scan-context-group { min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: .15rem .45rem; text-align: right; }
.scan-context-label { color: #718490; font-size: .58rem; font-weight: 800; letter-spacing: .12em; line-height: 1.2; }
.scan-context { max-width: 16rem; margin-top: .15rem; color: var(--blue-dark); font-size: .78rem; font-weight: 850; letter-spacing: .055em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scanner-shell, .manual-entry { max-width: 32rem; margin-inline: auto; }
.scanner-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .15rem .2rem .55rem; }
.scanner-stage { position: relative; }
.scanner-hint { position: absolute; z-index: 5; top: .55rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: .4rem; max-width: calc(100% - 1rem); padding: .35rem .65rem; border-radius: 999px; color: #fff; background: rgba(10,31,45,.78); box-shadow: 0 .2rem .7rem rgba(0,0,0,.18); font-size: .76rem; font-weight: 700; white-space: nowrap; pointer-events: none; backdrop-filter: blur(4px); }
.scanner-hint > span:first-child { color: #8be0cf; font-size: 1rem; }
.manual-shortcut { display: inline-flex; align-items: center; padding: .38rem .65rem; border-radius: .55rem; color: var(--blue-dark); background: #e7f0f8; font-size: .88rem; font-weight: 750; text-decoration: none; }
.manual-shortcut:hover { color: var(--blue); background: #dcebf6; }
#reader { width: 100%; aspect-ratio: 1; min-height: 0; overflow: hidden; border: 0 !important; border-radius: .75rem; background: #10222e; }
#reader video { width: 100% !important; height: 100% !important; min-height: 0; object-fit: cover; border-radius: .7rem; }
#reader canvas { max-height: 100% !important; }
#reader__dashboard_section_swaplink, #reader a { color: var(--blue) !important; }
.camera-zoom { color: #425866; }
.zoom-value { min-width: 2.8rem; padding: .18rem .45rem; border-radius: 1rem; color: var(--blue-dark); background: #e7f0f8; font-size: .78rem; font-weight: 800; text-align: center; }
.zoom-symbol { color: var(--blue); font-size: 1.2rem; font-weight: 800; }
.camera-zoom .form-range { min-width: 0; }
.manual-entry-icon { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: .75rem; background: #e7f0f8; color: var(--blue); font-size: 1.25rem; }
.manual-entry { scroll-margin-top: 5.5rem; }
.identifier-badge { display: inline-flex; padding: .45rem .75rem; border-radius: .55rem; color: var(--blue-dark); background: #e7f0f8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 750; }
.form-control, .form-select { border-color: #cbd6dc; border-radius: .75rem; }
.form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 .22rem rgba(18,97,160,.12); }
.searchable-select { position: relative; }
.searchable-select-control { position: relative; }
.searchable-select-icon { position: absolute; z-index: 2; top: 50%; left: .85rem; width: 1.2rem; height: 1.2rem; color: #607784; pointer-events: none; transform: translateY(-50%); }
.searchable-select-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.searchable-select-input { padding-left: 2.65rem; padding-right: 2.75rem; }
.searchable-select-input::-webkit-search-cancel-button { display: none; }
.searchable-select-clear { position: absolute; z-index: 2; top: 50%; right: .55rem; width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #526673; background: #edf2f5; font-size: 1.35rem; line-height: 1; transform: translateY(-50%); }
.searchable-select-clear:hover, .searchable-select-clear:focus-visible { color: #fff; background: var(--blue); outline: 3px solid rgba(18,97,160,.16); }
.searchable-select-panel { position: absolute; z-index: 1080; top: calc(100% + .35rem); right: 0; left: 0; overflow: hidden; border: 1px solid #b9cad4; border-radius: .8rem; background: #fff; box-shadow: 0 .75rem 2rem rgba(18, 45, 61, .18); }
.searchable-select-status { padding: .55rem .8rem; border-bottom: 1px solid #e1e8ec; color: #607481; background: #f4f7f9; font-size: .76rem; font-weight: 700; }
.searchable-select-options { max-height: min(20rem, 45vh); overflow-y: auto; overscroll-behavior: contain; padding: .35rem; }
.searchable-select-option { width: 100%; min-height: 2.8rem; display: flex; align-items: center; padding: .65rem .75rem; border: 0; border-radius: .55rem; color: #173748; background: transparent; font: inherit; font-weight: 650; line-height: 1.25; text-align: left; }
.searchable-select-option:hover, .searchable-select-option.is-active { color: var(--blue-dark); background: #e7f0f8; outline: none; }
.searchable-select-empty { margin: 0; padding: 1rem .75rem; color: #647481; font-size: .88rem; text-align: center; }
.photo-counter { padding: .35rem .65rem; border-radius: 2rem; background: #e7f0f8; color: var(--blue-dark); font-weight: 750; font-size: .85rem; white-space: nowrap; }
.gps-icon { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: .8rem; background: #e6f5f2; color: #15826e; font-size: 1.45rem; font-weight: 800; }
.gps-badge { flex: 0 0 auto; padding: .35rem .65rem; border-radius: 2rem; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.gps-badge-loading { color: #765600; background: #fff2ce; }
.gps-badge-success { color: #116b58; background: #dff5ee; }
.gps-badge-error { color: #a32218; background: #fee8e8; }
.gps-status { padding: .85rem 1rem; border-radius: .75rem; color: #526673; background: #f4f7f9; font-size: .9rem; }
.gps-status-error { color: #8f251d; background: #fff0ef; }
.gps-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.gps-details > div { padding: .75rem; border: 1px solid var(--line); border-radius: .7rem; background: #fff; }
.gps-details span, .gps-details strong { display: block; }
.gps-details span { color: #657985; font-size: .72rem; margin-bottom: .25rem; }
.gps-details strong { font-size: .88rem; }
.btn-map { border-color: #b9cad4; color: var(--blue-dark); background: #fff; font-weight: 650; }
.btn-map:hover { border-color: var(--blue); color: var(--blue); background: #f1f7fb; }
.source-position { padding: 1rem; border: 1px solid #b9cad4; border-left: 4px solid #198754; border-radius: .75rem; background: #f5faf7; }
.source-position-title { display: block; margin-bottom: .25rem; color: #185a3b; font-size: .78rem; }
.source-position-jtsk { color: #526673; font-size: .75rem; line-height: 1.45; overflow-wrap: anywhere; }
.source-position-gps { margin-top: .25rem; color: #153f2c; font-size: .82rem; font-weight: 750; }
.source-position-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.source-position-compact { min-width: 18rem; padding: .65rem; }
.email-recipients-card { border-left: 4px solid var(--blue) !important; }
.email-recipients-icon { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: .8rem; color: var(--blue-dark); background: #e7f0f8; font-size: 1.2rem; font-weight: 850; }
.recipient-list { display: flex; flex-wrap: wrap; gap: .55rem; min-height: 2.4rem; align-items: center; }
.recipient-chip { max-width: 100%; display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .38rem .38rem .7rem; border: 1px solid #b9cad4; border-radius: 999px; color: var(--blue-dark); background: #f1f7fb; font-size: .85rem; font-weight: 700; }
.recipient-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipient-remove { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #80504b; background: #fff; font-size: 1.1rem; line-height: 1; }
.recipient-remove:hover, .recipient-remove:focus-visible { color: #fff; background: #b42318; outline: 2px solid rgba(180,35,24,.2); }
.recipient-empty { width: 100%; padding: .7rem .8rem; border-radius: .7rem; color: #8f251d; background: #fff0ef; font-size: .88rem; }
.success-recipients { display: inline-block; max-width: 42rem; padding: .75rem 1rem; border-radius: .75rem; color: var(--blue-dark); background: #e7f0f8; font-weight: 700; overflow-wrap: anywhere; }
.photo-picker { width: 100%; min-height: 6rem; display: flex; align-items: center; justify-content: center; gap: .8rem; border: 2px dashed #b9cad4; border-radius: .9rem; color: var(--blue); cursor: pointer; background: #f9fbfc; font: inherit; }
.photo-picker:hover { border-color: var(--blue); background: #f1f7fb; }
.photo-picker-camera { border-style: solid; border-color: var(--blue); color: #fff; background: var(--blue); }
.photo-picker-camera:hover { border-color: var(--blue-dark); color: #fff; background: var(--blue-dark); }
.photo-picker-icon { font-size: 2rem; line-height: 1; }
.photo-picker small { display: block; color: #657985; font-weight: 400; }
.photo-picker-camera small { color: rgba(255,255,255,.82); }
.photo-gallery-picker { min-height: 3rem; display: flex; align-items: center; justify-content: center; gap: .55rem; border: 1px solid #b9cad4; border-radius: .8rem; color: var(--blue-dark); background: #fff; font-weight: 700; cursor: pointer; }
.photo-gallery-picker:hover { border-color: var(--blue); background: #f1f7fb; }
.photo-control-disabled, .photo-control-disabled:hover { opacity: .48; border-color: #b9cad4; color: #657985; background: #e9eef1; cursor: not-allowed; pointer-events: none; filter: grayscale(1); }
.photo-processing-active { color: var(--blue-dark) !important; font-weight: 700; }
.kompas-reference-card { border-left: 4px solid #e2b328 !important; background: linear-gradient(110deg, #fffdf5, #fff); }
.kompas-reference-icon { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: .8rem; color: #5c4b13; background: #ffd84d; font-weight: 900; }
.kompas-reference-badge { display: inline-flex; padding: .28rem .5rem; border: 1px solid #e2b328; border-radius: 2rem; color: #654d00; background: #fff3b0; font-size: .68rem; font-weight: 850; letter-spacing: .04em; white-space: nowrap; }
.photo-comparison-grid { display: grid; gap: 1rem; }
.photo-comparison-grid > .card { height: 100%; margin-bottom: 0 !important; }
.photo-comparison-grid .photo-grid { grid-template-columns: minmax(0, 1fr); }
.photo-comparison-grid .kompas-reference-grid { display: block; }
.photo-comparison-grid .kompas-reference-grid > .photo-item { width: 100%; }
.kompas-history-toggle { width: 100%; min-height: 2.75rem; margin-top: .75rem; padding: .55rem .8rem; border: 1px solid #d3b33a; border-radius: .7rem; color: #5c4b13; background: #fff8d9; font: inherit; font-weight: 800; cursor: pointer; }
.kompas-history-toggle:hover, .kompas-history-toggle:focus-visible { border-color: #9b7d00; background: #fff1ad; outline: 3px solid rgba(226,179,40,.2); }
.kompas-history-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .75rem; margin-top: .75rem; }
.photo-comparison-grid .photo-item { aspect-ratio: 4 / 3; }
.kompas-reference-grid { display: grid; grid-template-columns: minmax(9rem, 13rem); gap: .75rem; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .75rem; }
.photo-grid:empty { display: none; }
.photo-item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: .8rem; background: #dae2e7; }
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-item-existing { border: 2px solid #d5e2e9; transition: border-color .18s ease, transform .18s ease; }
.photo-item-existing:hover, .photo-item-existing:focus-visible { border-color: var(--blue); transform: translateY(-2px); outline: 3px solid rgba(18,97,160,.12); }
.photo-item-kompas { display: none; border: 3px solid #e2b328; background: #fff7d8; box-shadow: 0 0 0 1px rgba(101,77,0,.12); }
.photo-item-kompas.photo-item-loaded { display: block; }
.photo-item-kompas:not(.photo-item-kompas-missing):hover, .photo-item-kompas:not(.photo-item-kompas-missing):focus-within { border-color: #b48700; transform: translateY(-2px); outline: 3px solid rgba(226,179,40,.22); }
.photo-item-kompas-missing { border-style: dashed; border-color: #c9b76e; background: #fffdf4; box-shadow: none; }
.photo-item-kompas-missing .photo-open { color: #725f20; cursor: default; }
.photo-item-kompas-missing .photo-open:disabled { opacity: 1; }
.photo-kompas-empty { box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.15rem .65rem 2rem; text-align: center; }
.photo-kompas-empty svg { width: 2.5rem; height: 2.5rem; margin-bottom: .35rem; fill: none; stroke: #9b842e; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.photo-kompas-empty strong { color: #5c4b13; font-size: .82rem; line-height: 1.15; }
.photo-kompas-empty > span { margin-top: .1rem; color: #806d2c; font-size: .72rem; font-weight: 700; line-height: 1.1; }
.photo-kompas-badge { position: absolute; z-index: 2; top: .4rem; left: .4rem; max-width: calc(100% - .8rem); padding: .28rem .48rem; border-radius: .4rem; color: #4f3d00; background: #ffd84d; box-shadow: 0 2px 8px rgba(0,0,0,.2); font-size: .68rem; font-weight: 850; letter-spacing: .04em; line-height: 1.15; }
.photo-kompas-readonly { position: absolute; z-index: 2; right: .4rem; bottom: .4rem; left: .4rem; display: grid; gap: .12rem; padding: .38rem .5rem; border-radius: .45rem; color: #fff; background: rgba(15,29,38,.88); font-size: .68rem; font-weight: 700; line-height: 1.2; text-align: left; pointer-events: none; }
.photo-kompas-date { color: #ffe785; font-weight: 850; }
.photo-kompas-note { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.photo-item-kompas-missing .photo-kompas-readonly { text-align: center; }
.photo-remove { position: absolute; top: .35rem; right: .35rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; color: #fff; background: rgba(15,29,38,.82); font-size: 1.3rem; line-height: 1; }
.photo-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.photo-viewer-dialog { box-sizing: border-box; width: min(96vw, 70rem); max-width: none; height: min(92dvh, 55rem); max-height: 92dvh; padding: 0; border: 0; border-radius: 1rem; color: #fff; background: #0b1720; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.45); overflow: hidden; }
.photo-viewer-dialog[open] { display: flex; flex-direction: column; }
.photo-viewer-dialog::backdrop { background: rgba(5,14,20,.88); backdrop-filter: blur(3px); }
.photo-viewer-header { flex: 0 0 auto; min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .75rem .65rem 1rem; background: #102634; }

@media (min-width: 992px) {
  .photo-comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .photo-comparison-header { min-height: 7rem; }
}
.photo-viewer-close { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.14); font-size: 1.75rem; line-height: 1; }
.photo-viewer-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: .75rem; overflow: hidden; }
.photo-viewer-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.camera-capture-dialog { box-sizing: border-box; width: min(calc(100% - 2rem), 58rem); max-width: none; padding: 0; border: 0; border-radius: 1rem; color: #fff; background: #0b1720; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.45); overflow: hidden; }
.camera-capture-dialog::backdrop { background: rgba(5,14,20,.88); backdrop-filter: blur(3px); }
.camera-capture-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .85rem .8rem 1rem; background: #102634; }
.camera-capture-preview { display: block; width: 100%; max-height: min(68vh, 44rem); aspect-ratio: 16 / 9; object-fit: contain; background: #020609; }
.camera-capture-actions { display: grid; grid-template-columns: minmax(8rem, .45fr) minmax(12rem, 1fr); gap: .75rem; padding: .85rem; background: #102634; }
.camera-capture-close { min-height: 3rem; }
.camera-capture-shutter { min-height: 3rem; font-weight: 800; }
.camera-capture-dialog { box-sizing: border-box; width: min(calc(100% - 2rem), 58rem); max-width: none; padding: 0; border: 0; border-radius: 1rem; color: #fff; background: #0b1720; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.45); overflow: hidden; }
.camera-capture-dialog::backdrop { background: rgba(5,14,20,.88); backdrop-filter: blur(3px); }
.camera-capture-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .85rem .8rem 1rem; background: #102634; }
.camera-capture-preview { display: block; width: 100%; max-height: min(68vh, 44rem); aspect-ratio: 16 / 9; object-fit: contain; background: #020609; }
.camera-capture-actions { display: grid; grid-template-columns: minmax(8rem, .45fr) minmax(12rem, 1fr); gap: .75rem; padding: .85rem; background: #102634; }
.camera-capture-close { min-height: 3rem; }
.camera-capture-shutter { min-height: 3rem; font-weight: 800; }
.submit-button { min-height: 3.5rem; border-radius: .85rem; }
.success-icon { width: 5rem; height: 5rem; display: grid; place-items: center; border-radius: 50%; background: #dff5ee; color: #148064; font-size: 2.4rem; font-weight: 800; }
.inventory-create-icon { cursor: pointer; transition: transform .18s ease, background-color .18s ease; }
.inventory-create-icon:hover, .inventory-create-icon:focus-visible { transform: scale(1.06); background: #cceee3; outline: 3px solid rgba(20,128,100,.2); }
.login-page { background: radial-gradient(circle at 20% 10%, #e4f1f4, transparent 35%), linear-gradient(145deg, #f4f7f9, #e8eef2); }
.login-card { width: min(100%, 27rem); border-radius: 1.35rem; }
.pin-input { text-align: center; letter-spacing: .4em; font-size: 1.5rem; }
.warning-panel { padding: 1rem; border-left: 4px solid #d99a15; border-radius: .5rem; background: #fff8e6; color: #704f08; }
.admin-container { max-width: 70rem; }
.admin-section-nav { position: sticky; top: 4.6rem; z-index: 1010; padding: .6rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255,255,255,.94); box-shadow: 0 .5rem 1.5rem rgba(23,50,70,.08); backdrop-filter: blur(8px); }
.admin-section-nav .nav { gap: .35rem; overflow-x: auto; scrollbar-width: thin; }
.admin-section-nav .nav-link { flex: 0 0 auto; color: #526673; font-weight: 700; white-space: nowrap; }
.admin-section-nav .nav-link:hover { color: var(--blue); background: #f1f7fb; }
.admin-section-nav .nav-link.active { color: #fff; background: var(--blue); }
.admin-action-card { transition: transform .18s ease, box-shadow .18s ease; }
.admin-action-card:hover, .admin-action-card:focus-visible { transform: translateY(-3px); box-shadow: 0 1rem 2.6rem rgba(23,50,70,.13) !important; outline: 3px solid rgba(18,97,160,.15); }
.settings-icon { flex: 0 0 auto; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: .8rem; background: #e7f0f8; color: var(--blue); font-size: 1.35rem; }
.status-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.status-list > div:last-child { border: 0; }
.status-list strong { color: var(--blue-dark); }
.status-list .status-date { font-size: .78rem; text-align: right; }
.inventory-browser-table { min-width: 58rem; }
.inventory-browser-table th { color: #425866; font-size: .78rem; white-space: nowrap; }
.inventory-browser-table td { font-size: .88rem; vertical-align: top; }
.inventory-browser-table .inventory-action-column { position: sticky; left: 0; z-index: 2; min-width: 9.1rem; background: #fff; box-shadow: .45rem 0 .7rem -.65rem rgba(15, 43, 60, .45); }
.inventory-browser-table thead .inventory-action-column { z-index: 3; background: #f8f9fa; }
.inventory-browser-table tbody tr:hover .inventory-action-column { background: #f5f9fb; }
.inventory-quick-control { width: 100%; white-space: nowrap; font-weight: 700; }
.inventory-cell-note { min-width: 14rem; max-width: 24rem; white-space: normal; }
.inventory-browser-controls > .row { margin-top: 0; }
.app-alert-dialog { width: min(calc(100% - 2rem), 25rem); padding: 0; border: 0; border-radius: 1.25rem; color: var(--ink); box-shadow: 0 1.5rem 5rem rgba(8,26,39,.3); }
.app-alert-dialog::backdrop { background: rgba(9,28,41,.66); backdrop-filter: blur(3px); }
.alert-dialog-content { padding: 1.75rem; text-align: center; }
.alert-dialog-icon { width: 4rem; height: 4rem; display: grid; place-items: center; margin: 0 auto 1rem; border-radius: 50%; background: #fee8e8; color: #b42318; font-size: 2rem; font-weight: 850; }
.app-alert-dialog[data-type="warning"] .alert-dialog-icon { background: #fff2ce; color: #946200; }
.app-alert-dialog[data-type="success"] .alert-dialog-icon { background: #dff5ee; color: #148064; }
.application-update-dialog .alert-dialog-icon { background: #e7f0f8; color: var(--blue); animation: update-icon-pulse 1.6s ease-in-out infinite; }
.application-update-version { color: #116b58; overflow-wrap: anywhere; }
@keyframes update-icon-pulse {
  0%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(22deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .application-update-dialog .alert-dialog-icon { animation: none; }
}

.inventory-progress-card { border-left: 5px solid var(--blue) !important; }
.inventory-progress { height: .85rem; border-radius: 999px; }
.progress-stat { width: 100%; display: grid; gap: .1rem; padding: .65rem .25rem; border: 1px solid transparent; border-radius: .75rem; background: #f2f6f8; font: inherit; cursor: pointer; }
.progress-stat strong { font-size: 1.45rem; color: var(--blue-dark); }
.progress-stat span { font-size: .72rem; color: #647481; }
.progress-stat small { font-size: .62rem; font-weight: 700; color: var(--blue); }
.progress-stat:hover { border-color: #8cb0c2; background: #eaf3f7; }
.progress-stat:focus-visible { outline: 3px solid rgba(28, 99, 134, .28); outline-offset: 2px; }
.progress-stat[aria-pressed="true"] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: #e6f1f6; }
.progress-stat-warning { background: #fff6dc; }
.progress-stat-warning strong { color: #8a5a00; }
.progress-stat-warning small { color: #8a5a00; }
.progress-stat-warning:hover, .progress-stat-warning[aria-pressed="true"] { border-color: #bd850f; background: #fff0c2; }
.new-records-summary { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem .8rem; border: 1px solid #76a98b; border-radius: .75rem; background: #edf8f1; color: #19683c; font-size: .78rem; text-align: left; }
.new-records-summary strong { font-size: 1rem; }
.new-records-summary:hover, .new-records-summary[aria-pressed="true"] { border-color: #198754; background: #dcf1e4; }
.new-records-summary:focus-visible { outline: 3px solid rgba(25, 135, 84, .25); outline-offset: 2px; }
.inventory-item-list { display: grid; gap: .55rem; max-height: 32rem; overflow-y: auto; }
.inventory-list-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .9rem; border: 1px solid #dce5ea; border-radius: .75rem; background: #fff; text-align: left; }
.inventory-list-row:hover, .inventory-list-row:focus-visible { border-color: #4c829e; background: #f7fbfd; }
.inventory-list-row > span:first-child { min-width: 0; display: grid; }
.inventory-list-row strong, .inventory-list-row small { overflow: hidden; text-overflow: ellipsis; }
.inventory-list-row small { color: #647481; }
.station-run-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: .25rem .1rem; }
.station-walkthrough-card { border-left: 5px solid var(--blue) !important; }
.station-run-progress { min-width: 4rem; padding: .4rem .65rem; border-radius: 999px; color: var(--blue-dark); background: #eaf3f8; font-weight: 800; text-align: center; }
.station-run-stat { height: 100%; display: grid; gap: .1rem; padding: .75rem .4rem; border: 1px solid #dce5ea; border-radius: .75rem; background: #f7f9fa; }
.station-run-stat strong { color: var(--blue-dark); font-size: 1.55rem; line-height: 1; }
.station-run-stat span { color: #647481; font-size: .73rem; font-weight: 700; }
.station-run-stat-success { border-color: #b9dec9; background: #edf8f1; }
.station-run-stat-success strong { color: #19683c; }
.station-run-stat-warning { border-color: #f2d28b; background: #fff8e7; }
.station-run-stat-warning strong { color: #9a6500; }
.station-run-stat-new { border-color: #b8d1e2; background: #eff6fa; }
.station-container-list { display: grid; gap: .65rem; }
.station-container-row { width: 100%; display: flex; align-items: stretch; gap: .55rem; padding: .4rem; border: 1px solid #dce5ea; border-radius: .85rem; background: #fff; transition: border-color .15s ease, background-color .15s ease; }
.station-container-row:hover { border-color: #4c829e; background: #f7fbfd; }
.station-container-row-extra { border-color: #efc96e; background: #fffaf0; }
.station-container-open { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem; border: 0; border-radius: .6rem; background: transparent; color: inherit; text-align: left; }
.station-container-open:hover, .station-container-open:focus-visible { background: rgba(255, 255, 255, .75); outline: 3px solid rgba(76, 130, 158, .25); outline-offset: -2px; }
.station-container-open:disabled { cursor: default; opacity: .72; }
.station-container-open:disabled:hover { background: transparent; outline: none; }
.station-container-removed { flex: 0 0 auto; align-self: center; min-height: 2.75rem; color: #765000; border-color: #c88700; font-weight: 750; white-space: nowrap; }
.station-container-removed:hover, .station-container-removed:focus-visible { color: #fff; border-color: #8a5b00; background: #8a5b00; }
.station-container-main { min-width: 0; display: grid; gap: .16rem; }
.station-container-main strong, .station-container-main small { overflow: hidden; text-overflow: ellipsis; }
.station-container-main small { color: #647481; font-size: .78rem; }
.station-container-result { min-width: 0; flex: 0 1 auto; display: grid; justify-items: end; gap: .28rem; text-align: right; }
.station-container-result .badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.station-container-result small { max-width: 100%; color: var(--blue); font-size: .72rem; font-weight: 750; overflow-wrap: anywhere; }
.empty-station-containers { display: grid; gap: .35rem; padding: 1rem; border: 1px dashed #b9c8d1; border-radius: .85rem; color: #526673; text-align: center; }
.station-complete-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.station-complete-summary > div { display: grid; gap: .1rem; padding: .7rem; border-radius: .7rem; background: #f4f7f9; text-align: left; }
.station-complete-summary span { color: #647481; font-size: .72rem; }
.station-complete-summary strong { color: var(--blue-dark); font-size: 1.2rem; }
.inventory-admin-card { padding: 1rem 0; border-bottom: 1px solid #e1e8ec; }
.inventory-admin-card:last-child { border-bottom: 0; padding-bottom: 0; }
.inventory-admin-card:first-child { padding-top: 0; }
.inventory-admin-open { border-left: 4px solid #198754; padding-left: 1rem; }
.inventory-history-list { display: grid; gap: 1rem; }
.history-card { border: 1px solid #dce5ea; border-radius: 1rem; padding: 1rem; background: #fff; }
.history-photo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.history-photo-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .45rem; border: 1px solid #dce5ea; }
.user-admin-list { display: grid; gap: .75rem; }
.user-admin-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid #e1e8ec; }
.user-admin-row:last-child { border-bottom: 0; }
.user-admin-row > div:first-child { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.user-admin-row strong, .user-admin-row small { width: 100%; overflow-wrap: anywhere; }
.user-admin-row small { color: #647481; }

.label-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.label-mode-option {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 78px;
  padding: 1rem;
  border: 1px solid #d8e0e5;
  border-radius: .75rem;
  background: #fff;
  cursor: pointer;
}

.label-mode-option:has(input:checked) {
  border-color: #1261a0;
  box-shadow: 0 0 0 3px rgba(18, 97, 160, .14);
  background: #f4f9fd;
}

.label-mode-option small {
  display: block;
  margin-top: .2rem;
  color: #61717c;
}

.label-print-field-button {
  min-width: 3rem;
}

.label-print-field-button svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.label-entry-card {
  background: #f8fafb;
}

.label-entry-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; row-gap: .75rem; }
.label-catalog-search { position: relative; min-width: 0; width: 100%; margin-left: .2rem; }
.label-catalog-search-input { padding-left: 2.35rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23607784' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") .75rem center / 1.1rem no-repeat; }
.label-catalog-panel { position: absolute; z-index: 1080; top: calc(100% + .35rem); right: 0; left: 0; min-width: min(34rem, calc(100vw - 3rem)); overflow: hidden; border: 1px solid #b9cad4; border-radius: .8rem; background: #fff; box-shadow: 0 .75rem 2rem rgba(18, 45, 61, .18); }
.label-catalog-option { width: 100%; min-height: 3.35rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem; padding: .6rem .7rem; border: 0; border-radius: .55rem; color: #173748; background: transparent; font: inherit; line-height: 1.25; text-align: left; }
.label-catalog-option:hover, .label-catalog-option.is-active { color: var(--blue-dark); background: #e7f0f8; outline: none; }
.label-catalog-type { display: inline-flex; justify-content: center; min-width: 4.65rem; padding: .25rem .45rem; border-radius: 2rem; color: #075985; background: #e0f2fe; font-size: .72rem; font-weight: 800; }
.label-catalog-type.is-container { color: #166534; background: #dcfce7; }
.label-catalog-option-text { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.label-catalog-option-text strong, .label-catalog-option-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-catalog-option-text small { color: #647481; }

.settings-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.settings-tabs .nav {
  width: max-content;
  min-width: 100%;
  gap: .4rem;
  padding-bottom: .25rem;
}

.settings-tabs .nav-link {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .scan-view { margin-top: -.65rem; }
  .scan-toolbar { margin-bottom: .5rem; padding: .35rem; }
  .quick-mode-toolbar { margin-bottom: .75rem; }
  .scan-back { min-height: 2.55rem; padding-right: .65rem; }
  .scan-back-icon { width: 1.85rem; height: 1.85rem; }
  .scan-context-group { padding-right: .3rem; }
  .scan-context { max-width: 12.5rem; font-size: .7rem; }
  .scanner-shell { padding: .4rem !important; border-radius: .9rem; }
  .scanner-header { padding: .15rem .15rem .4rem; }
  .scanner-header h1 { font-size: 1rem; }
  .scanner-header .manual-shortcut { padding: .32rem .5rem; font-size: .78rem; }
  .scanner-stage #reader, .scanner-stage #reader video { border-radius: .6rem; }
  .manual-entry { margin-top: .65rem !important; }
  .station-run-hero { align-items: stretch; flex-direction: column; }
  .station-run-hero .btn { width: 100%; }
  .station-container-row { align-items: stretch; flex-direction: column; }
  .station-container-open { width: 100%; align-items: flex-start; }
  .station-container-removed { align-self: stretch; }
  .station-container-result { max-width: 44%; }
  .record-card { min-height: 16rem; padding: 1.5rem; }
  .record-icon { margin-bottom: 1.3rem; }
  .display-6 { font-size: 2rem; }
  .gps-details { grid-template-columns: 1fr; }
  .progress-stat { padding: .55rem .1rem; }
  .progress-stat strong { font-size: 1.15rem; }
  .progress-stat span { font-size: .62rem; }
  .history-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .user-admin-row { align-items: stretch; flex-direction: column; }
  .camera-capture-actions { grid-template-columns: 1fr; }
  .label-mode-grid { grid-template-columns: 1fr; }
  .label-entry-heading { grid-template-columns: minmax(0, 1fr) auto; }
  .label-catalog-search { grid-column: 1 / -1; grid-row: 2; width: 100%; margin-left: 0; }
  .label-catalog-panel { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}