:root { --navy:#0b2947; --blue:#25b7e9; --green:#1aa15f; --ink:#172431; --muted:#63707c; --line:#dce4ea; --surface:#fff; --bg:#f2f6f8; --danger:#c93c43; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.shell { width:min(100%, 720px); margin:0 auto; min-height:100vh; background:var(--surface); padding:0 22px 36px; box-shadow:0 0 40px #17304b13; }
.brand-bar { margin:0 -22px 28px; padding:18px 22px; background:var(--navy); color:#fff; display:flex; align-items:center; gap:13px; }.brand-bar img { width:47px; height:47px; border-radius:50%; object-fit:cover; }.brand-bar strong { display:block; font-size:18px; }.brand-bar span { color:#bfeeff; font-size:13px; }
.eyebrow { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.12em; }.view h1 { margin:7px 0 8px; font-size:31px; letter-spacing:-.03em; }.intro { color:var(--muted); line-height:1.5; margin:0 0 22px; }
.connection, .result { border:1px solid var(--line); background:#f7fafb; padding:15px; border-radius:14px; margin:0 0 22px; }.connection-heading { display:grid; gap:3px; color:var(--navy); }.connection-heading small { color:var(--muted); font-size:12px; }.connection summary { color:var(--navy); cursor:pointer; font-weight:700; margin-bottom:12px; }.result-actions { display:flex; gap:10px; margin-top:12px; }.result-actions button { flex:1; }.result-detail { color:var(--muted); font-size:13px; margin:12px 0 0; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.form-grid h2 { grid-column:1/-1; font-size:15px; margin:14px 0 -3px; padding-top:12px; border-top:1px solid var(--line); }.form-grid h2:first-child { padding-top:0; border:0; margin-top:0; }
label { color:var(--muted); display:grid; gap:6px; font-size:12px; font-weight:700; } input, select, textarea { border:1px solid #c9d4dc; border-radius:10px; color:var(--ink); background:#fff; padding:12px; font:inherit; font-size:15px; width:100%; } textarea { min-height:84px; resize:vertical; } input:focus, select:focus, textarea:focus { outline:3px solid #25b7e936; border-color:var(--blue); }
button { border:0; cursor:pointer; border-radius:10px; min-height:44px; padding:0 16px; font:700 14px inherit; }.primary { background:var(--green); color:#fff; }.primary:hover { background:#12854d; }.secondary { color:var(--navy); background:#eaf0f4; }.full { grid-column:1/-1; }.hidden { display:none !important; }.result { color:var(--navy); }.result a { color:#087dba; font-weight:700; overflow-wrap:anywhere; }.result button { margin-top:10px; }
.progress-label { display:flex; justify-content:space-between; font-size:13px; font-weight:700; margin:18px 0 8px; }.progress { height:7px; border-radius:99px; overflow:hidden; background:#dce8ed; }.progress i { display:block; height:100%; width:0; background:var(--green); transition:width .2s; }.step-dots { display:flex; gap:5px; margin:15px 0 22px; }.step-dots i { height:6px; flex:1; background:#d7e0e5; border-radius:4px; }.step-dots i.done { background:var(--green); }.step-dots i.active { background:var(--blue); }
.step-card { border:1px solid var(--line); border-radius:18px; padding:20px; }.step-card h2 { margin:0 0 10px; color:var(--navy); font-size:23px; letter-spacing:-.02em; }.step-card p { color:var(--muted); line-height:1.55; }.reference { border:1px solid #c7dce7; background:#fff; border-radius:12px; overflow:hidden; margin:16px 0; }.reference img { display:block; width:100%; height:auto; background:#fff; }.reference figcaption { color:#46606f; font-size:13px; font-weight:700; line-height:1.35; padding:12px 14px 5px; text-align:center; }.reference-points { color:#314b5a; font-size:13px; line-height:1.45; margin:0; padding:8px 28px 15px; }.reference-points li + li { margin-top:4px; }.reference-points li::marker { color:var(--green); }.quality-guide { border:1px solid #d5e2e8; border-radius:10px; color:var(--navy); margin:16px 0; overflow:hidden; }.quality-guide summary { cursor:pointer; font-size:13px; font-weight:700; padding:12px; }.quality-guide img { display:block; width:100%; height:auto; border-top:1px solid #d5e2e8; }.completion { margin-top:18px; }.upload { display:block; text-align:center; border:2px dashed #9ac0cf; padding:22px 12px; border-radius:12px; color:var(--navy); cursor:pointer; background:#f8fcfd; }.upload input { display:none; }.upload small { display:block; color:var(--muted); margin-top:6px; font-weight:400; }.uploaded { color:var(--green); font-size:13px; font-weight:700; margin:12px 0 0; }.answer-options { display:grid; gap:9px; }.answer-options button { text-align:left; background:#f1f5f7; color:var(--navy); }.answer-options button.selected { background:#d9f4e7; outline:2px solid var(--green); }.actions { display:flex; gap:10px; margin:18px 0; }.actions button { flex:1; }.finish { width:100%; background:var(--navy); color:#fff; }.message { min-height:20px; color:var(--danger); text-align:center; font-size:14px; }.message.ok { color:var(--green); }
.capture-panel { border:1px solid #b9d5e0; border-radius:14px; padding:14px; margin:18px 0; background:#f8fcfd; }.capture-title { color:var(--navy) !important; font-weight:800; font-size:14px; margin:0 0 5px !important; }.location-note { color:#46606f !important; font-size:12px; margin:0 0 12px !important; }.capture-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.camera-action, .gallery-action { min-height:118px; align-content:center; justify-items:center; text-align:center; cursor:pointer; border:1px solid #c6dce5; border-radius:12px; padding:12px 8px; color:var(--navy); background:#fff; transition:transform .15s, border-color .15s; }.camera-action { border-color:var(--green); background:#f0fbf5; }.camera-action:hover, .gallery-action:hover { transform:translateY(-1px); border-color:var(--blue); }.camera-action input, .gallery-action input { display:none; }.camera-action span, .gallery-action span { font-size:27px; line-height:1; }.camera-action small, .gallery-action small, .file-note { color:var(--muted); font-size:11px; font-weight:500; }.file-note { display:block; text-align:center; margin-top:10px; }
.location-permission { border:1px solid #efd59b; background:#fffaf0; border-radius:12px; margin:12px 0; padding:12px; text-align:center; }.location-permission.ready { border-color:#9fd7bc; background:#f1fbf5; }.location-permission p { color:#5d460b !important; font-size:13px; margin:0 0 10px !important; }.location-permission.ready p { color:#285044 !important; }.location-permission button { background:var(--navy); color:#fff; width:100%; }.location-permission.ready button { background:var(--green); }.location-permission button:disabled { cursor:default; opacity:1; }.location-permission small { color:var(--muted); display:block; font-size:11px; margin-top:8px; }.camera-action.locked, .gallery-action.locked { cursor:not-allowed; opacity:.5; }
.damage-more { margin:14px 0 4px; padding:14px; border:1px solid #9fd7bc; border-radius:12px; background:#f1fbf5; text-align:center; }.damage-more p { margin:0 0 12px; color:#285044; font-size:13px; line-height:1.45; }.damage-more button { width:100%; color:#fff; background:var(--green); }.damage-more button span { display:inline-grid; place-items:center; width:22px; height:22px; margin-right:6px; border-radius:50%; background:#fff; color:var(--green); font-size:19px; line-height:1; vertical-align:-2px; }
.advance-required { background:#fff7e6; border:1px solid #efd59b; border-radius:10px; color:#704b00 !important; font-size:13px; font-weight:700; padding:11px 12px; }.exit-inspection { margin-top:12px; width:100%; }
.document-upload { margin:14px 0 4px; padding:14px; border:1px solid #a9cde0; border-radius:12px; background:#f4faff; }.document-upload p { margin:0 0 12px; color:#274b60; font-size:13px; line-height:1.45; }
.inspection-library { border-top:1px solid var(--line); margin-top:30px; padding-top:24px; }.inspection-library h2, .image-gallery h2 { color:var(--navy); font-size:19px; margin:0 0 5px; }.inspection-library > div > p, .gallery-heading p { color:var(--muted); font-size:13px; margin:0; }.inspection-search { display:flex; gap:10px; margin:14px 0; }.inspection-search input { flex:1; }.inspection-search button { white-space:nowrap; }.inspection-list { display:grid; gap:9px; }.inspection-row { align-items:center; background:#f7fafb; border:1px solid var(--line); border-radius:11px; display:flex; gap:12px; justify-content:space-between; padding:12px; }.inspection-row strong, .inspection-row span, .image-card strong, .image-card span { display:block; }.inspection-row span, .image-card span { color:var(--muted); font-size:12px; margin-top:3px; }.inspection-row button { min-height:38px; }.image-gallery { border-top:1px solid var(--line); margin-top:18px; padding-top:18px; }.gallery-heading { align-items:flex-start; display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; }.gallery-heading > span { background:#eaf0f4; border-radius:999px; color:var(--navy); font-size:12px; font-weight:700; padding:6px 9px; white-space:nowrap; }.image-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }.image-card { background:#f7fafb; border:1px solid var(--line); border-radius:12px; overflow:hidden; }.image-card img { aspect-ratio:4/3; background:#eaf0f4; display:block; object-fit:cover; width:100%; }.image-card > div:last-child { padding:10px; }.image-card a { color:#087dba; display:inline-block; font-size:13px; font-weight:700; margin-top:9px; }.document-card { align-content:center; aspect-ratio:4/3; background:#eef6fa; color:var(--navy); font-size:14px; font-weight:700; text-align:center; }
.inspection-list { min-height:22px; }.inspection-table-wrap { border:1px solid var(--line); border-radius:12px; overflow:auto; background:#fff; }.inspection-table { border-collapse:collapse; font-size:12px; min-width:1080px; width:100%; }.inspection-table th { background:var(--navy); color:#fff; font-size:11px; letter-spacing:.01em; padding:12px 10px; text-align:left; white-space:nowrap; }.inspection-table td { border-bottom:1px solid #e5edf1; color:#294552; padding:11px 10px; vertical-align:middle; }.inspection-table tbody tr:nth-child(even) { background:#f7fafb; }.inspection-table tbody tr:hover { background:#eef8fb; }.inspection-table td strong { color:var(--navy); }.process-images-button { min-height:34px; padding:0 11px; white-space:nowrap; }.process-status { border-radius:999px; display:inline-block; font-size:11px; font-weight:800; padding:5px 8px; white-space:nowrap; }.process-status.pending { background:#fff1cf; color:#765000; }.process-status.in-progress { background:#d9f2ff; color:#075f88; }.process-status.completed { background:#dff6e8; color:#17663d; }.gallery-actions { align-items:flex-end; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }.gallery-actions > span { background:#eaf0f4; border-radius:999px; color:var(--navy); font-size:12px; font-weight:700; padding:6px 9px; white-space:nowrap; }.gallery-actions button { min-height:34px; white-space:nowrap; }.zip-download-error { background:#fff0ef; border:1px solid #f1b8b4; border-radius:10px; color:#8e2f28; font-size:13px; font-weight:700; margin:0 0 12px; padding:10px; }
body.client-mode { background:#eaf1f4; }.client-mode .shell { width:min(100%, 480px); min-height:100vh; }.client-mode .brand-bar { position:sticky; top:0; z-index:2; }
@media (min-width:800px) { .operator-mode { padding:28px; }.operator-mode .shell { width:min(100%, 1180px); padding:0 38px 46px; border-radius:18px; overflow:hidden; }.operator-mode .brand-bar { margin:0 -38px 34px; padding:20px 38px; }.operator-mode .view h1 { font-size:38px; }.operator-mode .connection { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:end; }.operator-mode .connection-heading { grid-column:1/-1; }.operator-mode .connection button { width:max-content; }.operator-mode .form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.operator-mode .form-grid h2, .operator-mode .full { grid-column:1/-1; }.operator-mode .result { padding:20px; }.client-mode .shell { margin-top:0; box-shadow:0 0 40px #17304b24; } }
@media (max-width:560px) { .shell { padding:0 16px 28px; }.brand-bar { margin:0 -16px 24px; padding:15px 16px; }.form-grid { grid-template-columns:1fr; }.form-grid h2, .full { grid-column:auto; }.view h1 { font-size:27px; } }