:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1c2923;
  background: #f4f5ef;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #1c2923;
  --muted: #728078;
  --line: #e3e8df;
  --green: #18764f;
  --green-dark: #10563a;
  --green-soft: #e7f1e9;
  --blue: #347bb6;
  --panel: #fffefa;
  --radius: 20px;
  --lime: #c6f36a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse at 88% 0%, #e8eee2 0, transparent 31rem), #f4f5ef; }
button, input { font: inherit; }
button:focus-visible, .file-button:focus-within, a:focus-visible { outline: 3px solid #9ed94f; outline-offset: 3px; }
.app-shell { max-width: 1320px; margin: 0 auto; padding: 0 32px calc(36px + env(safe-area-inset-bottom)); }
.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(44, 65, 49, .12); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark, .footer-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--green); color: #fff; box-shadow: 0 6px 14px #175b3b2b; font-size: .8rem; font-weight: 900; letter-spacing: -.05em; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-copy strong { font-size: 1rem; letter-spacing: -.04em; }
.brand-copy small { color: #78857d; font-size: .58rem; font-weight: 850; letter-spacing: .16em; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e1e6de; border-radius: 999px; padding: 8px 12px; background: #fffefa; color: #69776e; font-size: .65rem; font-weight: 850; letter-spacing: .08em; white-space: nowrap; }
.status-pill.good { border-color: #cce4d0; background: #e7f4e9; color: #155c3d; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa79e; }
.status-pill.good .status-dot { background: #21a663; box-shadow: 0 0 0 4px #21a66320; }
.intro { position: relative; isolation: isolate; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; overflow: hidden; margin: 26px 0 22px; padding: 42px 44px; border: 1px solid #214b36; border-radius: 26px; background: radial-gradient(ellipse at 80% 5%, #36774a 0, transparent 40%), linear-gradient(120deg, #183b2b, #102d21 70%); color: #fff; box-shadow: 0 18px 40px #143c2924; }
.intro:after { position: absolute; z-index: -1; right: 7%; bottom: -140px; width: 360px; height: 360px; border: 1px solid #ffffff16; border-radius: 50%; box-shadow: 0 0 0 34px #ffffff08, 0 0 0 68px #ffffff05; content: ""; }
.eyebrow { margin: 0 0 9px; color: var(--green); font-size: .64rem; font-weight: 900; letter-spacing: .16em; }
.intro .eyebrow { color: var(--lime); }
.intro h1 { margin: 0; font-size: clamp(2.5rem, 5.3vw, 4.15rem); font-weight: 760; line-height: .99; letter-spacing: -.075em; }
.mobile-break { display: none; }
.intro-copy { max-width: 490px; margin: 15px 0 0; color: #d2dfd4; font-size: .94rem; line-height: 1.65; }
.workflow { display: flex; align-items: center; gap: 11px; padding-bottom: 5px; flex-shrink: 0; }
.workflow-step { display: grid; grid-template-columns: 29px auto; align-items: center; column-gap: 8px; color: #adbeaf; }
.workflow-step b { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #ffffff45; border-radius: 50%; font-size: .65rem; }
.workflow-step small { font-size: .7rem; font-weight: 750; white-space: nowrap; }
.workflow-step.active { color: var(--lime); }
.workflow-step.active b { border-color: var(--lime); background: var(--lime); color: #183827; }
.workflow > i { width: 22px; height: 1px; background: #ffffff36; }
.panel { border: 1px solid #e7e9e1; border-radius: var(--radius); background: var(--panel); box-shadow: 0 9px 30px #23392a0c, 0 1px 2px #23392a08; }
.capture-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: 18px; }
.capture-card { min-width: 0; padding: 23px; }
.panel-heading, .workspace-title, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-heading { margin-bottom: 17px; }
.panel-heading h2, .workspace-title h2, .section-heading h2 { margin: 0; font-size: 1.27rem; letter-spacing: -.045em; }
.mini-tag { border: 1px solid #e5e9e2; border-radius: 8px; padding: 7px 9px; background: #f8f9f5; color: #758178; font-size: .56rem; font-weight: 900; letter-spacing: .11em; white-space: nowrap; }
.view-wrap { position: relative; isolation: isolate; width: 100%; min-height: 300px; max-height: 680px; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid #273d31; border-radius: 16px; background: radial-gradient(ellipse at 50% 44%, #283a30 0, #192720 75%); }
.view-wrap:before { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 36px 36px; content: ""; pointer-events: none; }
.view-wrap video, .view-wrap img, .view-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.view-wrap video[hidden], .view-wrap img[hidden] { display: none; }
.view-wrap canvas { z-index: 3; touch-action: none; }
.view-chip { position: absolute; z-index: 4; top: 13px; left: 13px; display: flex; align-items: center; gap: 8px; border: 1px solid #ffffff25; border-radius: 8px; padding: 8px 10px; background: #14241dd9; color: #e6eee7; font-size: .56rem; font-weight: 900; letter-spacing: .12em; pointer-events: none; backdrop-filter: blur(10px); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #a5b2a8; }
.empty-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 25px; color: #b0bdb3; text-align: center; pointer-events: none; }
.empty-state[hidden] { display: none; }
.empty-state strong { color: #f2f6f1; font-size: 1rem; letter-spacing: -.02em; }
.empty-state span { max-width: 290px; font-size: .78rem; line-height: 1.55; }
.camera-icon { position: relative; width: 60px; height: 48px; margin-bottom: 7px; border: 2px solid #91a99a; border-radius: 13px; }
.camera-icon:before { position: absolute; top: -8px; left: 10px; width: 18px; height: 8px; border: 2px solid #91a99a; border-bottom: 0; border-radius: 5px 5px 0 0; content: ""; }
.camera-icon span { position: absolute; top: 9px; left: 16px; width: 24px; height: 24px; border: 2px solid #91a99a; border-radius: 50%; }
.capture-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.button, .file-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1px solid #dfe5dc; border-radius: 10px; padding: 10px 14px; background: #fffefa; color: #34443a; cursor: pointer; font-size: .77rem; font-weight: 780; line-height: 1.2; text-decoration: none; transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; }
.button:hover:not(:disabled), .file-button:hover { transform: translateY(-1px); border-color: #b6c9b9; background: #f5f8f2; box-shadow: 0 4px 10px #193d2512; }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button-primary { border-color: var(--green); background: var(--green); color: white; box-shadow: 0 5px 12px #18764f27; }
.button-primary:hover:not(:disabled) { border-color: var(--green-dark); background: var(--green-dark); }
.button-stop { border-color: #efdad3; color: #a04a36; }
.button-subtle { background: transparent; }
.button-icon { font-size: 1rem; }
.import-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #edf0e9; }
.import-label { margin-right: 4px; color: #87938a; font-size: .7rem; }
.file-button { min-height: 36px; padding: 8px 11px; font-size: .71rem; }
.file-button > span { color: var(--green); font-size: .95rem; }
.file-button input { display: none; }
.inline-hint { margin: 12px 2px 0; color: #77847b; font-size: .75rem; line-height: 1.6; }
.capture-side { display: flex; flex-direction: column; gap: 13px; }
.side-card { padding: 20px; }
.side-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border: 1px solid #dcebdd; border-radius: 11px; background: #edf5e7; color: #378345; font-size: 1.1rem; }
.side-card h3 { margin: 0 0 12px; font-size: .95rem; letter-spacing: -.025em; }
.side-card ul { margin: 0; padding-left: 18px; color: #6d7b71; font-size: .77rem; line-height: 1.6; }
.side-card li { padding: 0 0 10px 2px; }
.side-card li:last-child { padding-bottom: 0; }
.privacy-card { display: flex; align-items: flex-start; gap: 12px; border: 1px solid #dcebd9; border-radius: 16px; padding: 15px; background: linear-gradient(135deg, #eaf4e7, #f4f7ed); }
.privacy-icon { color: var(--green); font-size: 1.35rem; }
.privacy-card strong { font-size: .76rem; }
.privacy-card p { margin: 5px 0 0; color: #718076; font-size: .7rem; line-height: 1.5; }
.workspace { margin-top: 48px; }
.workspace[hidden] { display: none; }
.workspace-title { margin-bottom: 17px; }
.workspace-title h2 { font-size: 1.65rem; }
.workspace-title > div > p:last-child { margin: 8px 0 0; color: #77837b; font-size: .82rem; line-height: 1.5; }
.guide-toolbar { display: flex; align-items: center; gap: 18px; padding: 14px 16px; }
.guide-instruction { display: flex; align-items: center; gap: 11px; min-width: 200px; flex: 1; }
.guide-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #e8f3e8; color: var(--green); font-size: .8rem; font-weight: 900; }
.guide-instruction strong, .guide-instruction small { display: block; }
.guide-instruction strong { font-size: .79rem; }
.guide-instruction small { margin-top: 3px; color: #77837b; font-size: .69rem; }
.guide-legend { display: flex; flex-direction: column; gap: 8px; min-width: 130px; color: #68766d; font-size: .7rem; }
.guide-legend span { display: flex; align-items: center; gap: 7px; }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.green-dot { background: #20a477; }
.blue-dot { background: #3275b9; }
.guide-hint { margin: 10px 3px 16px; }
.analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.image-card { min-width: 0; padding: 14px; }
.image-card-heading { display: flex; align-items: center; gap: 10px; margin: 1px 0 13px; }
.image-index { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 9px; color: var(--green); font-size: .69rem; font-weight: 900; }
.image-card-heading strong, .image-card-heading small { display: block; }
.image-card-heading strong { font-size: .82rem; }
.image-card-heading small { margin-top: 3px; color: #89958c; font-size: .68rem; }
.image-card canvas { display: block; width: 100%; height: auto; max-height: 66vh; border-radius: 10px; background: #f0f2eb; object-fit: contain; }
.image-card p { margin: 10px 2px 1px; color: #7b877f; font-size: .71rem; line-height: 1.5; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 15px; }
.metric { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 15px; background: #fffefa; }
.metric span { display: block; margin-bottom: 8px; color: #7b877f; font-size: .7rem; }
.metric strong { display: block; overflow-wrap: anywhere; font-size: .98rem; letter-spacing: -.02em; text-transform: capitalize; }
.notice { margin-top: 14px; border: 1px solid #eee2bc; border-radius: 13px; padding: 14px 16px; background: #fff9e9; color: #786027; font-size: .79rem; line-height: 1.55; }
.review-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }
.report-section { margin-top: 34px; }
.report-section .workspace-title { margin-bottom: 14px; }
.report { overflow-wrap: anywhere; padding: 20px; font-size: .83rem; line-height: 1.65; }
.report p:first-child { margin-top: 0; }
.report p:last-child { margin-bottom: 0; }
.report pre { max-height: 330px; overflow: auto; border: 1px solid #e8ece5; border-radius: 10px; padding: 12px; background: #f5f7f2; font-size: .69rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-empty { display: grid; justify-items: center; padding: 28px 12px; text-align: center; }
.report-empty > span { color: #90aa91; font-size: 1.8rem; }
.report-empty strong { margin-top: 7px; font-size: .88rem; }
.report-empty p { margin: 5px 0 0; color: #7d8981; font-size: .76rem; }
.video-evidence { margin-top: 20px; padding: 18px; }
.video-evidence[hidden] { display: none; }
.video-evidence > p { color: #637268; font-size: .8rem; line-height: 1.55; }
.video-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.video-tiles .metric small { display: block; margin-top: 7px; color: #64746b; font-size: .7rem; line-height: 1.4; }
.upload-list { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fafbf7; }
.upload-list[hidden] { display: none; }
.upload-heading { display: block; margin-bottom: 9px; color: #385547; font-size: .78rem; }
.upload-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.upload-choice { max-width: 100%; overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.section-heading { margin-bottom: 10px; }
footer { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 42px 0 0; color: #87938a; font-size: .69rem; text-align: center; }
.footer-mark { width: 25px; height: 25px; border-radius: 8px; font-size: .56rem; }

@media (min-width: 1000px) { .capture-actions .button { flex: 0 0 auto; } .capture-actions .button-primary { min-width: 150px; } .capture-card { padding: 24px; } }
@media (max-width: 900px) { .app-shell { padding-right: 18px; padding-left: 18px; } .intro { align-items: flex-start; flex-direction: column; padding: 34px; } .workflow { padding-bottom: 0; } .capture-layout { grid-template-columns: minmax(0, 1fr); } .capture-side { display: grid; grid-template-columns: 1fr 1fr; } .side-card { padding: 16px; } .side-icon { margin-bottom: 10px; } .guide-toolbar { flex-wrap: wrap; } .guide-instruction { flex-basis: calc(100% - 20px); } .guide-legend { flex: 1; flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 600px) { .app-shell { padding-right: 12px; padding-left: 12px; } .topbar { height: 66px; } .brand-mark { width: 35px; height: 35px; border-radius: 12px; } .brand-copy strong { font-size: .9rem; } .brand-copy small { font-size: .52rem; } .status-pill { padding: 7px 9px; font-size: .56rem; } .intro { gap: 22px; margin: 18px 0; padding: 28px 22px; border-radius: 21px; } .intro h1 { font-size: 2.65rem; } .mobile-break { display: block; } .intro-copy { margin-top: 11px; font-size: .84rem; } .workflow { width: 100%; justify-content: space-between; gap: 6px; } .workflow-step { grid-template-columns: 25px auto; column-gap: 5px; } .workflow-step b { width: 25px; height: 25px; } .workflow-step small { font-size: .62rem; } .workflow > i { max-width: 25px; flex: 1; } .capture-card { padding: 11px; border-radius: 16px; } .panel-heading { align-items: flex-start; gap: 8px; } .panel-heading h2 { font-size: 1rem; } .eyebrow { font-size: .58rem; } .mini-tag { padding: 5px 6px; font-size: .48rem; } .view-wrap { min-height: 280px; max-height: 60vh; aspect-ratio: 3 / 4; } .capture-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .capture-actions .button { min-height: 43px; padding: 9px 7px; font-size: .7rem; } .capture-actions #startCamera, .capture-actions #usePhoto { grid-column: span 2; } .import-row { gap: 7px; } .import-label { width: 100%; margin-bottom: 1px; } .file-button { flex: 1; font-size: .67rem; } .capture-side { grid-template-columns: 1fr; } .side-card { padding: 14px; } .side-card ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; } .side-card li { font-size: .72rem; } .privacy-card { align-items: center; } .workspace { margin-top: 34px; } .workspace-title { align-items: flex-start; gap: 10px; } .workspace-title h2 { font-size: 1.35rem; } .workspace-title > div > p:last-child { font-size: .75rem; } .workspace-title .button { max-width: 130px; min-height: 36px; flex-shrink: 0; padding: 8px; font-size: .65rem; } .guide-toolbar { gap: 11px; padding: 12px; } .guide-instruction { min-width: 0; flex-basis: 100%; } .guide-toolbar > .button { width: 100%; } .guide-legend { justify-content: flex-start; font-size: .66rem; } .analysis-grid { grid-template-columns: 1fr; gap: 10px; } .image-card { padding: 11px; } .image-card canvas { max-height: 62vh; } .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .metric { padding: 12px; } .metric span { font-size: .66rem; } .metric strong { font-size: .9rem; } .notice { padding: 12px; font-size: .74rem; } .review-actions { display: grid; grid-template-columns: 1fr; } .review-actions .button { width: 100%; } .report-section { margin-top: 28px; } .report { padding: 14px; font-size: .78rem; } .video-evidence { padding: 13px; } .video-tiles { grid-template-columns: 1fr; } footer { align-items: flex-start; margin-top: 28px; font-size: .63rem; line-height: 1.5; } .footer-mark { flex-shrink: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }