:root {
  --bg: #edf5fb;
  --panel: #ffffff;
  --ink: #14324d;
  --muted: #5d7287;
  --accent: #1d6fb8;
  --accent-dark: #0d4d81;
  --border: #c9d9e8;
  --warn: #c77900;
  --danger: #b32222;
  --ok: #18794e;
  --shadow: 0 12px 30px rgba(8, 33, 59, 0.08);
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
body { padding-bottom: env(safe-area-inset-bottom); }
.app-shell { max-width: 1120px; margin: 0 auto; padding: 14px 14px 32px; }
.topbar { background: linear-gradient(180deg, #d9e9f6 0%, #eef6fc 100%); border: 1px solid var(--border); border-radius: 24px; padding: 16px; box-shadow: var(--shadow); }
.brand-wrap { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; }
.brand-logo { width: 72px; height: 72px; border-radius: 18px; }
.eyebrow { margin: 0 0 3px; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); font-weight: 700; }
.topbar h1 { margin: 0; font-size: 1.38rem; line-height: 1.15; }
.subhead { margin: 6px 0 0; color: var(--muted); font-size: .95rem; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pill { background: #fff; border: 1px solid var(--border); color: var(--accent-dark); border-radius: 999px; padding: 8px 12px; font-size: .83rem; font-weight: 700; }
.stack { display: grid; gap: 14px; margin-top: 14px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.intro-card { display: grid; gap: 12px; }
.intro-card h2, .card h3 { margin: 0 0 8px; }
.muted { color: var(--muted); }
.engine-banner { background: #f4f9ff; border: 1px solid var(--border); border-radius: 14px; padding: 12px; font-size: .92rem; }
.engine-banner.ok { border-color: #bde1cf; background: #eefaf4; color: var(--ok); }
.engine-banner.warn { border-color: #efd7a7; background: #fff8ea; color: #8a5a00; }
.engine-banner.danger { border-color: #f0c6c6; background: #fff3f3; color: var(--danger); }
.section-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.grid-form { display: grid; grid-template-columns: 1fr; gap: 12px; }
.grid-form label, .upload-card { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; font-weight: 700; }
input[type="text"], select, textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 14px; background: #fbfdff; color: var(--ink); }
textarea { resize: vertical; min-height: 110px; }
.full-span { grid-column: 1 / -1; }
.upload-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.upload-card { border: 1px dashed var(--border); border-radius: 16px; padding: 12px; background: #fbfdff; min-height: 235px; }
.upload-card input { margin-bottom: 6px; }
.upload-card img { width: 100%; min-height: 160px; max-height: 220px; object-fit: contain; background: #eef5fa; border-radius: 12px; }
.action-card { display: grid; grid-template-columns: 1fr; gap: 10px; position: sticky; bottom: 10px; z-index: 4; }
button { border: none; border-radius: 14px; padding: 14px 16px; background: var(--accent); color: #fff; font-weight: 700; letter-spacing: .01em; }
button.secondary { background: #5f7d99; }
.grid-split { display: grid; grid-template-columns: 1fr; gap: 14px; }
.status-box, .metrics-box { border: 1px solid var(--border); border-radius: 14px; background: #f8fbff; padding: 12px; min-height: 90px; }
.muted-box { color: var(--muted); }
.metrics-box pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: .82rem; }
.columns { display: grid; grid-template-columns: 1fr; gap: 14px; }
.report-root { display: grid; gap: 14px; }
.report-page { background: #fff; border: 1px solid #d6dce3; box-shadow: var(--shadow); border-radius: 18px; padding: 18px 16px; }
.report-page h2, .report-page h3, .report-page h4 { color: var(--accent-dark); margin-top: 0; }
.report-header { border-bottom: 2px solid var(--accent-dark); padding-bottom: 12px; margin-bottom: 14px; }
.report-brandline { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
.report-brandline img { width: 48px; height: 48px; }
.report-kv { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.kv-card { background: #f8fbff; border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.summary-band { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 16px; }
.summary-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: #f8fbff; }
.summary-card span { display: block; color: var(--muted); font-size: .82rem; }
.summary-card strong { display: block; margin-top: 6px; font-size: 1.2rem; color: var(--accent-dark); }
.metric-table, .findings-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.metric-table th, .metric-table td, .findings-table th, .findings-table td { border: 1px solid #dbe4ec; padding: 8px; text-align: left; font-size: .88rem; vertical-align: top; }
.tag { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.tag.high { background: #fde7e7; color: #9d1b1b; }
.tag.moderate { background: #fff3e0; color: #9c6100; }
.tag.low { background: #e9f7ef; color: #0f6a42; }
ul.tight { margin: .35rem 0; padding-left: 18px; }
.corrective-card, .note-box, .signature-box { border: 1px solid #dbe4ec; border-radius: 14px; padding: 12px; background: #fbfdff; }
.preview-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0 18px; }
.preview-card { margin: 0; border: 1px solid #dbe4ec; border-radius: 12px; overflow: hidden; background: #f7fafc; }
.preview-card figcaption { padding: 8px 10px; font-size: .86rem; font-weight: 700; color: #36536d; }
canvas.overlay { width: 100%; max-height: 280px; background: #f7fafc; border-bottom: 1px solid #dbe4ec; }
.report-footer { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 20px; border-top: 1px solid #dbe4ec; padding-top: 10px; color: var(--muted); font-size: .8rem; }
.report-note { font-size: .92rem; line-height: 1.55; }

@media (min-width: 760px) {
  .app-shell { padding: 18px 18px 38px; }
  .grid-form { grid-template-columns: 1fr 1fr; }
  .upload-grid { grid-template-columns: 1fr 1fr; }
  .grid-split { grid-template-columns: 1fr 1fr; }
  .action-card { grid-template-columns: repeat(3, 1fr); position: static; }
  .columns { grid-template-columns: 1fr 1fr; }
  .report-kv { grid-template-columns: 1fr 1fr; }
  .summary-band { grid-template-columns: repeat(4, 1fr); }
  .preview-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .topbar h1 { font-size: 1.8rem; }
}

@media print {
  body { background: #fff; }
  .topbar, .intro-card, .form-card, .action-card, .status-card { display: none !important; }
  .report-root { display: block; }
  .report-page { page-break-after: always; border: none; box-shadow: none; border-radius: 0; padding: 14mm; }
}


code { background: #f2f7fb; padding: 2px 6px; border-radius: 8px; }
.history-card { display: grid; gap: 12px; }
.history-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ghost-btn { background: #eef5fb; color: var(--accent-dark); border: 1px solid var(--border); padding: 10px 12px; }
.danger-btn { color: var(--danger); }
.history-list { display: grid; gap: 10px; }
.history-item { border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: #fbfdff; display: grid; gap: 8px; cursor: pointer; }
.history-item.selected { border-color: var(--accent-dark); box-shadow: 0 0 0 2px rgba(13,77,129,0.14) inset; }
.history-main, .history-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.history-main strong { font-size: .96rem; }
.history-main span, .history-meta span { font-size: .86rem; color: var(--muted); }
.comparison-root { display: grid; gap: 14px; }
.delta-good { color: var(--ok); font-weight: 700; }
.delta-bad { color: var(--danger); font-weight: 700; }
@media (max-width: 759px) {
  .action-card { position: static; }
  .history-actions { width: 100%; }
  .history-actions button { flex: 1 1 auto; }
}

.small-pill { padding: 6px 10px; font-size: .76rem; }
.utility-card { display: grid; gap: 12px; }
.utility-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.restore-label { display: grid; gap: 6px; font-weight: 700; color: var(--ink); }
.restore-label input { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: #fbfdff; }
.client-profiles { display: grid; gap: 12px; }
.client-card { border: 1px solid var(--border); border-radius: 16px; padding: 14px; background: #fbfdff; display: grid; gap: 12px; }
.client-card.selected { border-color: var(--accent-dark); box-shadow: 0 0 0 2px rgba(13,77,129,0.14) inset; }
.client-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.client-card-top h4 { margin: 0 0 4px; }
.client-card-top p { margin: 0; color: var(--muted); font-size: .88rem; }
.client-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.client-card-grid div { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.client-card-grid span { display: block; color: var(--muted); font-size: .78rem; }
.client-card-grid strong { display: block; margin-top: 4px; font-size: .98rem; }
.client-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.timeline-root { display: grid; gap: 12px; }
.timeline-head { margin-top: 8px; }
.timeline-list { display: grid; gap: 10px; position: relative; }
.timeline-item { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.timeline-item.selected .timeline-content { border-color: var(--accent-dark); box-shadow: 0 0 0 2px rgba(13,77,129,0.14) inset; }
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-dark); margin-top: 14px; position: relative; }
.timeline-dot::after { content: ''; position: absolute; left: 5px; top: 12px; width: 2px; height: calc(100% + 24px); background: #cbdceb; }
.timeline-item:last-child .timeline-dot::after { display: none; }
.timeline-content { border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: #fbfdff; }
.timeline-header, .timeline-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.timeline-header span, .timeline-meta span { color: var(--muted); font-size: .85rem; }
.history-item { grid-template-columns: 92px 1fr; align-items: stretch; }
.history-thumb-wrap { display: flex; }
.history-thumb { width: 100%; height: 88px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: #eef5fa; }
.history-thumb.placeholder, .thumb-placeholder { display: grid; place-items: center; min-height: 88px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); background: #f7fafc; font-size: .84rem; }
.history-body { display: grid; gap: 8px; }
.thumb-compare-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.thumb-compare-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: #fbfdff; }
.thumb-compare-card h4 { margin: 0 0 10px; }
.thumb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.thumb-pair figure { margin: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.thumb-pair img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #eef5fa; }
.thumb-pair figcaption { padding: 8px 10px; font-size: .82rem; color: var(--muted); font-weight: 700; }
.lock-overlay { position: fixed; inset: 0; background: rgba(8, 21, 34, 0.62); z-index: 100; display: grid; place-items: center; padding: 18px; }
.lock-overlay.hidden { display: none; }
.lock-card { width: min(440px, 100%); background: #fff; border-radius: 24px; border: 1px solid var(--border); box-shadow: 0 18px 50px rgba(8, 33, 59, 0.24); padding: 18px; display: grid; gap: 12px; }
.lock-card h2 { margin: 0; }
.lock-card label { display: grid; gap: 6px; font-weight: 700; }
.lock-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.mobile-bottom-nav { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; z-index: 15; }
.mobile-bottom-nav button { padding: 11px 8px; border-radius: 16px; background: rgba(255,255,255,0.92); color: var(--accent-dark); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: .77rem; }
.mobile-bottom-nav button.active { background: var(--accent-dark); color: #fff; }
.nav-section { scroll-margin-top: 18px; }
button:disabled { opacity: .5; cursor: not-allowed; }

@media (min-width: 760px) {
  .utility-actions { grid-template-columns: repeat(3, 1fr); }
  .client-profiles { grid-template-columns: 1fr 1fr; }
  .thumb-compare-grid { grid-template-columns: 1fr 1fr; }
  .lock-actions { grid-template-columns: 1fr 1fr 1fr; }
}

@media (min-width: 900px) {
  .mobile-bottom-nav { display: none; }
}

@media (max-width: 759px) {
  .app-shell { padding-bottom: 110px; }
  .action-card { position: static; }
  .history-actions { width: 100%; }
  .history-actions button { flex: 1 1 auto; }
  .history-item { grid-template-columns: 1fr; }
  .history-thumb { height: 160px; }
}

.camera-grid{display:grid;gap:12px}.camera-actions{display:flex;gap:8px;flex-wrap:wrap}#cameraPreview{width:100%;max-height:320px;border-radius:16px;background:#081524;border:1px solid #c9d8e8;object-fit:cover}.hidden-canvas{display:none}.search-inline{display:flex;align-items:center;gap:8px}.search-inline input{min-width:220px}.full-width{display:block;width:100%}.history-list.audit-trail,.audit-list{display:grid;gap:10px}.audit-item{padding:12px;border:1px solid #d8e3ef;border-radius:14px;background:#fff}.audit-item strong{display:block}.camera-actions button{min-width:120px}.pill.small-pill{display:inline-flex;align-items:center}.role-admin{background:#0d4d81;color:#fff}.role-clinician{background:#1c7c54;color:#fff}.role-assistant{background:#946200;color:#fff}.role-viewer{background:#555;color:#fff}.sync-ok{color:#1c7c54}.sync-bad{color:#9b1c1c}