:root {
  color-scheme: light;
  --bg: #f2f5f9;
  --panel: #fff;
  --ink: #17283d;
  --muted: #596b80;
  --line: #dbe3ed;
  --blue: #173f6b;
  --red: #a81f32;
  --redbg: #fff0f2;
  --amber: #84500a;
  --amberbg: #fff5df;
  --green: #216747;
  --greenbg: #edf8f1;
  font:
    16px/1.5 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 1.2rem;
  letter-spacing: -0.025em;
}
h2 {
  font-size: 1.35rem;
}
h3 {
  font-size: 1.05rem;
}
p + p {
  margin-top: 0.6rem;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
.file-button {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  min-height: 46px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  font-weight: 550;
}
button:disabled {
  opacity: 0.55;
  cursor: default;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #4285d4;
  outline-offset: 3px;
}
input,
select,
textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid #b9c7d8;
  border-radius: 10px;
  min-height: 46px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--ink);
  font-size: 16px;
}
input[name="number"]::placeholder {
  color: var(--muted);
  opacity: 1;
}
textarea {
  min-height: 90px;
  resize: vertical;
}
label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 550;
  min-width: 0;
}
.primary,
button[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}
.danger {
  color: var(--red);
  background: var(--redbg);
  border-color: #edbac3;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 0.8rem;
}
.app-header {
  max-width: 1100px;
  margin: auto;
  padding: 20px 20px 14px;
  padding-top: max(20px, env(safe-area-inset-top));
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-icon {
  background: var(--blue);
  color: #fff;
  border-radius: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.brand #install {
  margin-left: auto;
}
.base-switch {
  display: flex;
  background: var(--bg);
  padding: 4px;
  border-radius: 13px;
  gap: 5px;
  margin-top: 16px;
}
.base-switch button {
  flex: 1;
  border: 0;
}
.base-switch button:not([aria-pressed="true"]) {
  background: transparent;
}
main {
  max-width: 1100px;
  margin: auto;
  padding: 20px 20px calc(110px + env(safe-area-inset-bottom));
  min-height: 70vh;
}
.bottom-nav {
  position: fixed;
  z-index: 20;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 8px 6px max(10px, env(safe-area-inset-bottom));
}
.bottom-nav button {
  position: relative;
  border: 0;
  min-width: 0;
  padding: 7px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  min-height: 54px;
  background: transparent;
}
.bottom-nav button span {
  font-size: 1.3rem;
  line-height: 1.2;
}
.bottom-nav .loan-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 19px;
  height: 19px;
  padding: 1px 4px;
  border-radius: 99px;
  background: #c62d37;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}
.bottom-nav button.active {
  background: #e7eff9;
  color: var(--blue);
}
#more-nav { display: none; }
#lamp-nav { background: #fff1c7; color: #6a4300; font-weight: 700; }
#lamp-nav[aria-pressed="true"] { background: #ffca55; color: #1f2530; }
#lamp-screen {
  position: fixed;
  z-index: 10001;
  inset: 0;
  background: #fff;
  color: #1b2633;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
#lamp-screen[hidden] { display: none; }
#lamp-video { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.row > * {
  min-width: 0;
}
.row.space {
  justify-content: space-between;
}
.stack {
  display: grid;
  gap: 12px;
}
.top-gap {
  margin-top: 16px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  margin-top: 16px;
}
.fire-memo summary {
  cursor: pointer;
  font-weight: 700;
}
.fire-memo h3 {
  margin: 20px 0 8px;
}
.fire-memo ul {
  margin: 0;
  padding-left: 22px;
}
.fire-memo li {
  margin: 8px 0;
}
.search-row {
  display: flex;
  gap: 8px;
}
.search-row input {
  flex: 1;
  min-width: 0;
}
.search-row button {
  padding: 10px 12px;
}
.scan-action {
  width: 100%;
}
.filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  padding: 16px;
  border: 1px solid var(--line);
  font-size: 0.9rem;
}
.metric strong {
  font-size: 1.8rem;
  line-height: 1.1;
}
.metric.red {
  background: var(--redbg);
  color: var(--red);
  border-color: #f2ced4;
}
.metric.amber {
  background: var(--amberbg);
  color: var(--amber);
  border-color: #ebdcb7;
}
.metric.selected {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
.record-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.scan-found {
  width: min(100%, 540px);
  margin-inline: auto;
}
.scan-found .record-list {
  grid-template-columns: 1fr;
}
.record {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-weight: 400;
  overflow-wrap: anywhere;
}
#result-count {
  scroll-margin-top: 16px;
}
.record.search-target {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(23, 63, 107, 0.18);
}
.record strong {
  font-size: 1.05rem;
}
.record .location {
  color: var(--muted);
  font-size: 0.9rem;
}
.record-qr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  background: #e7eff9;
  color: var(--blue);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.record-qr svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: currentColor;
}
.record-qr-code {
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}
.record-qr-empty {
  background: var(--bg);
  color: var(--muted);
}
.badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.badge {
  font-size: 0.8rem;
  border-radius: 6px;
  padding: 3px 7px;
  background: #eef2f7;
  color: #40536b;
  font-weight: 500;
}
.badge.red {
  background: var(--redbg);
  color: var(--red);
}
.badge.amber {
  background: var(--amberbg);
  color: var(--amber);
}
.badge.green {
  background: var(--greenbg);
  color: var(--green);
}
.empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--muted);
}
.details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-top: 15px;
  overflow-wrap: anywhere;
}
.details dt {
  font-size: 0.8rem;
  color: var(--muted);
}
.details dd {
  margin: 3px 0 0;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.actions > * {
  flex: 1;
}
.timeline {
  border-left: 2px solid var(--line);
  padding: 0 0 18px 14px;
  margin-top: 14px;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.photo-grid figure {
  margin: 0;
  min-width: 0;
}
.photo-grid img {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 9px;
}
.photo-grid a {
  display: block;
}
.photo-grid figcaption {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 4px;
}
.photo-grid button {
  font-size: 0.75rem;
  padding: 5px;
  min-height: 36px;
  width: 100%;
  margin-top: 5px;
}
.timeline .photo-grid img {
  height: 100px;
}
.notice {
  font-size: 0.9rem;
  color: var(--muted);
  padding: 12px 0;
}
.warning {
  background: var(--amberbg);
  color: var(--amber);
  padding: 12px;
  border-radius: 10px;
}
.table-wrap {
  overflow-x: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}
th,
td {
  text-align: left;
  padding: 11px 9px;
  border-bottom: 1px solid var(--line);
}
th {
  color: var(--muted);
  font-size: 0.8rem;
}
table input {
  min-width: 80px;
  padding: 8px;
}
.summary-line {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.summary-line span {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 12px;
}
.preview-video {
  width: 100%;
  max-height: 460px;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: #17283d;
  border-radius: 16px;
  display: block;
  margin-top: 14px;
}
#camera {
  height: clamp(210px, 33vh, 300px);
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  margin-top: 8px;
}
.qr-capture .scan-frame {
  width: min(100%, 430px);
  margin-inline: auto;
}
#record-qr-camera {
  height: clamp(260px, 41dvh, 390px);
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  margin-top: 8px;
}
#scan-flash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  background: rgba(154, 255, 193, 0.42);
}
#scan-flash.active {
  animation: scan-confirmation 420ms ease-out;
}
#scan-results .notice { overflow-wrap: anywhere; }
.scan-page {
  padding-top: 12px;
}
.scan-page .scan-frame {
  width: min(100%, 430px);
  margin-inline: auto;
}
.scan-page #camera {
  height: clamp(170px, 25dvh, 230px);
  margin-top: 8px;
}
.scan-page #scan-status {
  padding: 6px 0;
}
.scan-page .scan-actions {
  margin-top: 6px;
}
.scan-page #scan-results {
  margin-top: 8px;
  padding: 12px;
}
.scan-page #scan-results .record-list {
  margin-top: 6px;
  gap: 8px;
}
.scan-page #scan-results .record {
  padding: 10px;
  gap: 4px;
}
@keyframes scan-confirmation {
  0%, 100% { opacity: 0; }
  22% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #scan-flash.active { animation-duration: 120ms; }
}
.scan-frame {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.scan-frame::after {
  content: "";
  position: absolute;
  width: min(68vw, 22dvh, 200px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.12);
}
.scan-camera-options {
  display: grid;
  gap: 10px;
  margin: 10px 0;
}
.scan-camera-options label { display: grid; gap: 5px; }
.scan-camera-options input[type="range"] { width: 100%; min-height: 36px; }
.scan-camera-options output { float: right; font-variant-numeric: tabular-nums; }
.hidden,
[hidden] {
  display: none !important;
}
dialog {
  color: var(--ink);
  background: var(--panel);
  border: 0;
  border-radius: 18px;
  padding: 22px;
  width: min(560px, calc(100% - 24px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  box-shadow: 0 20px 80px #0b1c3e55;
}
#modal.record-edit-dialog {
  width: min(620px, calc(100% - 12px));
  max-width: calc(100% - 12px);
  padding: clamp(12px, 3vw, 20px);
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
#modal.record-edit-dialog .qr-capture {
  padding: 10px;
  margin: 0;
}
#modal.record-edit-dialog .qr-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
#modal.record-edit-dialog .qr-input-row input {
  min-width: 0;
  flex: 1;
}
#modal.record-edit-dialog .qr-scan-button {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 10px;
  display: grid;
  place-items: center;
}
#modal.record-edit-dialog .qr-scan-button svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
#modal.record-edit-dialog .form-error {
  margin: 0;
  color: var(--red);
  font-weight: 650;
}
#modal.record-edit-dialog [aria-invalid="true"] {
  border-color: var(--red);
}
#modal.record-edit-dialog .building-assist {
  min-width: 0;
}
#modal.record-edit-dialog .building-suggestions {
  max-height: 190px;
  margin-top: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
#modal.record-edit-dialog .building-suggestions[hidden] {
  display: none;
}
#modal.record-edit-dialog .building-suggestions button {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  text-align: left;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}
#modal.record-edit-dialog .building-suggestions button:last-child {
  border-bottom: 0;
}
#modal.record-edit-dialog .building-suggestions button.active,
#modal.record-edit-dialog .building-suggestions button:focus-visible {
  background: #e7eff9;
}
#modal.record-edit-dialog .building-suggestions p {
  margin: 0;
  padding: 10px 12px;
}
#modal.record-edit-dialog .qr-capture .scan-frame {
  width: 100%;
  max-width: none;
}
#modal.record-edit-dialog .qr-capture .scan-frame::after {
  width: min(75vw, 32dvh, 280px);
}
#modal.record-edit-dialog #record-form > button[type="submit"] {
  position: sticky;
  bottom: 0;
  z-index: 2;
  min-height: 52px;
  touch-action: manipulation;
  box-shadow: 0 0 0 8px var(--panel), 0 4px 14px #0b1c3e33;
}
dialog::backdrop {
  background: #10213b77;
}
dialog .dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
dialog form {
  display: grid;
  gap: 13px;
}
dialog .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.month-year-field > span { display: block; font-weight: 600; margin-bottom: 6px; }
.month-year-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.month-year-inputs label { min-width: 0; }
#toast {
  position: fixed;
  z-index: 100;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 28px);
  width: max-content;
  background: #173f6b;
  color: white;
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 4px 24px #0003;
}
a {
  color: var(--blue);
}
details > summary {
  cursor: pointer;
  min-height: 44px;
  padding: 10px 0;
}
code {
  overflow-wrap: anywhere;
}
.pagination {
  margin-top: 18px;
  justify-content: center;
}
.inline-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.inline-checkbox input {
  width: 22px;
  min-height: 22px;
}
.numeric {
  font-variant-numeric: tabular-nums;
}
.manager-cards {
  display: none;
}
@media (min-width: 800px) {
  .app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0 0 18px 18px;
  }
  .base-switch {
    margin: 0;
    width: 280px;
  }
  .bottom-nav button {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    font-size: 0.9rem;
  }
  .preview-video {
    max-width: 430px;
  }
  .scan-frame {
    max-width: 430px;
  }
}
@media (max-width: 620px) {
  #modal.record-edit-dialog {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
  }
  #modal.record-edit-dialog #dialog-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
  }
  #modal.record-edit-dialog .dialog-head {
    flex: 0 0 auto;
  }
  #modal.record-edit-dialog #record-form {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
    touch-action: pan-y pinch-zoom;
    padding: 0 3px 8px;
  }
  .app-header {
    padding-left: 16px;
    padding-right: 16px;
  }
  main {
    padding: 16px 16px calc(106px + env(safe-area-inset-bottom));
  }
  .metrics {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .metric {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px;
  }
  .metric strong {
    font-size: 1.5rem;
    flex-shrink: 0;
  }
  .record-list,
  .details,
  .filters {
    grid-template-columns: 1fr;
  }
  .panel {
    padding: 15px;
  }
  .filters {
    gap: 9px;
  }
  .actions > * {
    flex-basis: calc(50% - 8px);
  }
  dialog .form-grid {
    grid-template-columns: 1fr;
  }
  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .manager-table {
    display: none;
  }
  .manager-cards {
    display: grid;
    gap: 12px;
  }
  .manager-cards .panel {
    margin-top: 0;
  }
  .plan-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .plan-fields label {
    font-size: 0.8rem;
  }
  .row > .wide {
    flex-basis: 100%;
  }
  .search-row {
    flex-wrap: wrap;
  }
  .search-row input {
    flex-basis: 100%;
  }
  .search-row button {
    flex: 1;
  }
}

.bottom-nav {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.bottom-nav.viewer {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.bottom-nav.provider { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bottom-nav [data-page="duplicates"],
.bottom-nav [data-page="manager"] { display: none; }
#more-nav { display: flex; }
.auth-panel {
  max-width: 480px;
  margin: 20px auto;
}
.app-header {
  flex-wrap: wrap;
}
#shared-status {
  flex-basis: 100%;
  margin-top: 8px;
  overflow-wrap: anywhere;
}
#account-button {
  margin-left: auto;
  font-size: 0.8rem;
  max-width: 170px;
}
.exact-search {
  background: #e7eff9;
  padding: 14px;
  border-radius: 12px;
}
.pie-wrap {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  margin: 20px 0;
}
.pie {
  height: 180px;
  width: 180px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend {
  display: grid;
  gap: 9px;
}
.legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 3px;
}
.type-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 16px 0;
}
.type-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.type-swatch.ags, .type-bar-fill.ags { background: #173f6b; }
.type-swatch.roxel, .type-bar-fill.roxel { background: #00867f; }
.type-chart { display: grid; gap: 17px; }
.type-chart-row { border-top: 1px solid var(--line); padding-top: 12px; }
.type-chart-row h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
.type-bar-line {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 58px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  margin: 5px 0;
}
.type-bar-name { font-size: .8rem; font-weight: 700; }
.type-bar-track { height: 20px; background: #e9eef3; border-radius: 5px; overflow: hidden; }
.type-bar-fill { display: block; height: 100%; border-radius: 5px; }
.type-bar-line strong { text-align: right; font-variant-numeric: tabular-nums; }
.sync-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.conflict-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.conflict-columns pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.control-cost {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 12px;
}
@media (max-width: 620px) {
  .type-bar-line { grid-template-columns: 48px minmax(0, 1fr) 42px; gap: 6px; }
  .bottom-nav button {
    font-size: 10px;
  }
  .conflict-columns {
    grid-template-columns: 1fr;
  }
  #account-button {
    max-width: 130px;
  }
  .pie {
    width: 150px;
    height: 150px;
  }
  .pie-wrap {
    justify-content: center;
  }
}

.qr-capture {
  margin: 18px 0;
  padding: 16px;
}
.qr-capture > label {
  font-weight: 700;
}
.qr-value {
  margin: 8px 0 14px;
  padding: 10px 12px;
  background: #f4f7fa;
  border-radius: 8px;
  overflow-wrap: anywhere;
  min-height: 42px;
}
.qr-capture[hidden],
[hidden] {
  display: none !important;
}
.atex-alert {
  width: min(520px, calc(100% - 24px));
  max-height: calc(100dvh - 32px);
  padding: 24px;
}
.atex-alert h2 {
  margin: 0 0 12px;
  color: #8f1526;
}
.atex-alert p {
  margin: 12px 0;
}
.atex-alert button {
  width: 100%;
  margin-top: 10px;
}
.atex-symbol {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff0f2;
  color: #a81f32;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 12px;
}
@media (max-width: 620px) {
  main {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }
  .bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bottom-nav.viewer {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bottom-nav.provider {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bottom-nav [data-page="statistics"],
  .bottom-nav [data-page="settings"] {
    display: none;
  }
  .bottom-nav button {
    min-height: 49px;
    padding: 4px 1px;
    gap: 1px;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
  }
  .bottom-nav button span:first-child {
    font-size: 1.1rem;
  }
}
@media (max-width: 350px) {
  .bottom-nav button { font-size: 9px; }
}

/* Info pratique: consultation, mobile portrait */
.practical-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.practical-wide{grid-column:1/-1}.practical-group-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.practical-group-head b{flex:1;min-width:90px}.practical-group-head span{white-space:nowrap}.practical-sector{margin:24px 0 12px}.practical-device{border-top:1px solid var(--line);margin-top:16px;padding-top:12px;overflow-wrap:anywhere}.practical-device h4{margin:0 0 8px}.practical-comment{white-space:normal;overflow-wrap:anywhere}.practical-filters select{width:100%;min-width:0}.practical-group{overflow-wrap:anywhere}@media(max-width:440px){.practical-filters{grid-template-columns:minmax(0,1fr)}}

.practical-expired{display:inline-block;margin-left:6px;padding:3px 7px;border-radius:6px;background:#fde8e8;color:#a11b1b;font-size:.8rem;font-weight:700;vertical-align:middle}

/* Fiche compacte pour utilisateur et prestataire. */
.compact-record{max-width:700px;margin:auto}.compact-record .panel{padding:10px 12px;margin-bottom:7px;border-radius:13px}.compact-back{background:transparent;border:0;padding:0;min-height:30px;margin-bottom:5px}.compact-identity h2{font-size:1.4rem}.compact-identity>.row{gap:8px}.compact-identity p{font-size:1rem}.compact-place{border-top:1px solid var(--line);padding-top:6px;margin-top:7px;font-size:.95rem;overflow-wrap:anywhere}.compact-place p{font-size:.95rem;margin-top:2px}.compact-record h3{font-size:1rem;margin-bottom:5px}.compact-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;margin:0}.compact-dates dt{font-size:.85rem;color:var(--muted)}.compact-dates dd{margin:0;font-size:1rem;font-weight:600;overflow-wrap:anywhere}.compact-full{grid-column:1/-1}.compact-comment-panel p{font-size:.95rem;overflow-wrap:anywhere;line-height:1.35}.compact-comment-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.compact-comment-panel button{background:transparent;border:0;padding:5px 0;min-height:44px;font-size:.875rem;color:var(--blue)}.compact-main-action,.compact-edit{display:block;width:100%;margin-top:6px;min-height:44px;padding:8px 10px}.compact-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}.compact-secondary button{min-height:44px;padding:8px}.compact-secondary .danger{background:var(--redbg);border-color:var(--red);color:var(--red);font-weight:600}.compact-expired{display:inline-block;padding:3px 8px;border-radius:6px;background:var(--redbg);color:var(--red);font-weight:700;font-size:.8rem}.compact-extra summary{min-height:44px;padding:8px 0;font-size:.9rem}.compact-extra .details{margin-top:5px}

/* Réduire le chrome uniquement pendant la consultation de la fiche compacte. */
body.compact-record-page .app-header{padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top))}body.compact-record-page .base-switch,body.compact-record-page #shared-status{display:none!important}body.compact-record-page .brand{gap:8px}body.compact-record-page .brand-icon{width:32px;height:32px;border-radius:9px}body.compact-record-page h1{font-size:1rem}body.compact-record-page #connection{font-size:.7rem}body.compact-record-page #install{font-size:.75rem;min-height:44px;padding:6px 8px;max-width:105px}body.compact-record-page main{padding:8px 12px calc(82px + env(safe-area-inset-bottom));min-height:0}.compact-record .panel{margin-top:0}.compact-record .compact-identity{margin-top:3px}.compact-dates-panel{line-height:1.3}.compact-record .compact-comment-panel{padding-bottom:4px}.compact-qr{display:inline-flex;align-items:center;gap:5px;font-size:.9rem;min-width:0;overflow-wrap:anywhere}.compact-qr svg{flex-shrink:0}.compact-qr span{overflow-wrap:anywhere;word-break:break-word}

/* Lisibilité renforcée de la fiche compacte. */
.compact-record .panel{padding:7px 12px;margin-bottom:5px}.compact-record .compact-identity h2{font-size:1.625rem}.compact-record .compact-identity p{font-size:1.125rem}.compact-place{font-size:1.0625rem;margin-top:4px;padding-top:4px}.compact-record .compact-place p{font-size:1.0625rem}.compact-record h3{font-size:1.0625rem;margin-bottom:4px}.compact-dates{gap:5px 12px}.compact-dates dt{font-size:.95rem}.compact-dates dd{font-size:1.125rem}.compact-comment-panel p{font-size:1.0625rem}.compact-comment-panel button{font-size:1rem}.compact-qr{font-size:1rem}.compact-main-action,.compact-edit,.compact-secondary button{font-size:1.0625rem}.compact-extra summary{font-size:1rem}.compact-expired{font-size:.95rem}

.compact-record .panel{margin-bottom:3px}body.compact-record-page main{padding-top:6px}

/* Quatre pulsations en quatre secondes après un code reconnu. */
#scan-flash{background:rgba(220,230,240,.35)}
#view.scan-record-green{--scan-record-tint:#d5f4e2;--scan-record-ink:#155c35}#view.scan-record-yellow{--scan-record-tint:#fff0ba;--scan-record-ink:#705000}#view.scan-record-red{--scan-record-tint:#ffd6dc;--scan-record-ink:#9e1229}
#view.scan-record-feedback .panel{animation:record-scan-pulse 1s ease-in-out 4}#view.scan-record-feedback .scan-record-status{color:var(--scan-record-ink);background:var(--scan-record-tint);border-radius:6px;padding:2px 7px;font-size:.8rem;font-weight:700}.compact-identity>.row{flex-wrap:wrap}
@keyframes record-scan-pulse{0%,100%{background-color:var(--panel)}25%,65%{background-color:var(--scan-record-tint)}}
@media(prefers-reduced-motion:reduce){#view.scan-record-feedback .panel{animation:none;background-color:var(--scan-record-tint)}}
/* Rappel de sauvegarde, sans interrompre un formulaire en cours. */
#backup-reminder{width:min(430px,calc(100vw - 28px));box-sizing:border-box;border:2px solid #5380aa;border-radius:18px;padding:26px 22px;text-align:center;background:var(--panel,#fff);color:var(--text,#172a35);box-shadow:0 20px 65px #0005}
#backup-reminder::backdrop{background:#10243c99}
#backup-reminder h2{font-size:1.35rem;margin:12px 0 18px}
#backup-reminder p{margin:14px 0;line-height:1.5}
#backup-reminder .backup-reminder-recipient{overflow-wrap:anywhere}
#backup-reminder button{width:100%;margin-top:12px;min-height:50px;font-size:1rem}
.backup-reminder-icons{display:flex;justify-content:center;align-items:center;gap:24px;color:#2d689a}
.backup-reminder-icons svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.backup-reminder-bell{transform-origin:50% 10%;animation:backup-bell 1.4s ease-in-out infinite}
.backup-reminder-disk{animation:backup-disk 1.8s ease-in-out infinite}
@keyframes backup-bell{0%,45%,100%{transform:rotate(0)}10%{transform:rotate(16deg)}20%{transform:rotate(-16deg)}30%{transform:rotate(10deg)}}
@keyframes backup-disk{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.65}}
@media(prefers-reduced-motion:reduce){.backup-reminder-bell,.backup-reminder-disk{animation:none}}
#backup-reminder-deferred{display:block;width:fit-content;max-width:100%;margin:2px 0 4px auto;padding:2px 4px;min-height:24px;background:transparent;border:0;color:#ce122e;font-size:.9rem;font-weight:800;text-align:right;animation:backup-deferred-alert 1.5s ease-in-out infinite}
#backup-reminder-deferred[hidden]{display:none!important}
#backup-reminder-later{background:transparent;color:inherit;border:1px solid #a7b9c9}
@keyframes backup-deferred-alert{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){#backup-reminder-deferred{animation:none}}
.local-excel-export{background:#fff;color:#193c65;border-color:#b8cadc}

.year-with-today { display: flex; align-items: center; gap: 6px; }
.year-with-today input { min-width: 0; flex: 1; width: 0; }
#five-year-today { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; color: #1764a0; }

.compact-secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.practical-date-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:360px;width:100%;}
.practical-date-fields label {min-width:0;font-size:14px;}
.practical-date-fields input {width:100%;min-width:0;max-width:100%;min-height:44px;padding:8px 5px;font-size:16px;}

@keyframes loan-expired-pulse { 0%,100% {background:#ffd0d0;box-shadow:0 0 0 5px #bd2020;} 50% {background:#fff;box-shadow:0 0 0 5px transparent;} }
#modal.loan-expired-feedback {animation:loan-expired-pulse .5s steps(1,end) 8;}

/* Zoom du scanner : poignée et zone tactile adaptées au doigt. */
#scan-zoom { -webkit-appearance:none; appearance:none; width:100%; min-height:56px; height:56px; padding:0 22px; border:0; border-radius:0; background:transparent; touch-action:pan-y; }
#scan-zoom::-webkit-slider-runnable-track { height:8px; border-radius:4px; background:var(--blue); }
#scan-zoom::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; box-sizing:border-box; width:44px; height:44px; margin-top:-18px; border:3px solid #fff; border-radius:50%; background:var(--blue); box-shadow:0 1px 5px #0005; }
#scan-zoom::-moz-range-track { height:8px; border-radius:4px; background:var(--blue); }
#scan-zoom::-moz-range-thumb { box-sizing:border-box; width:44px; height:44px; border:3px solid #fff; border-radius:50%; background:var(--blue); box-shadow:0 1px 5px #0005; }