:root { color-scheme: light; --bg:#edf2f4; --card:#fff; --ink:#163041; --muted:#455e69;
  --line:#c3d2d8; --primary:#174d34; --primary-ink:#fff; --accent:#215778;
  --danger:#8b2932; --amber-bg:#fff1d6; --amber-text:#513c17;
  --shadow:0 3px 18px rgba(19,51,69,.06); --radius:17px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
 :root:not([data-theme="light"]) { color-scheme:dark; --bg:#0c1921; --card:#172b34;
 --ink:#f1f7f9; --muted:#c4d2d6; --line:#4a626a; --primary:#8be1ad;
 --primary-ink:#072116; --accent:#8ec9f0; --danger:#ffa5aa; --amber-bg:#503b20; --amber-text:#ffebbb;
 --shadow:0 3px 20px rgba(0,0,0,.13); }
}
:root[data-theme="dark"] { color-scheme:dark; --bg:#0c1921; --card:#172b34;
 --ink:#f1f7f9; --muted:#c4d2d6; --line:#4a626a; --primary:#8be1ad;
 --primary-ink:#072116; --accent:#8ec9f0; --danger:#ffa5aa; --amber-bg:#503b20; --amber-text:#ffebbb;
 --shadow:0 3px 20px rgba(0,0,0,.13); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { padding:0; margin:0; background:var(--bg); color:var(--ink); font-size:16px; line-height:1.5; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button:disabled { opacity:.55; cursor:not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.app-shell { width:min(100%, 830px); margin:0 auto; min-height:100svh; display:flex; flex-direction:column; }
.header { padding:15px 18px 12px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.header-main { display:flex; align-items:center; gap:12px; }
.header-logo { width:50px; height:50px; border:0; border-radius:14px; background:#173f51; color:#fff; font-size:16px; font-weight:900; letter-spacing:-.6px; flex:none; }
.header-titles { min-width:0; display:flex; flex-direction:column; flex:1; }
.header-titles strong { font-size:17px; letter-spacing:-.4px; }
.header-titles small { font-size:11px; letter-spacing:1.2px; color:var(--muted); font-weight:800; }
.icon-btn { min-height:44px; min-width:44px; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:13px; font-size:24px; }
.status-strip { margin-top:11px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pill { display:inline-block; background:var(--bg); border:1px solid var(--line); border-radius:100px; padding:4px 11px; font-size:12px; font-weight:700; }
.tiny { font-size:11px; color:var(--muted); text-align:right; }
main { flex:1; padding:22px 16px 38px; }
.view { animation:appear .17s ease-out; }
@keyframes appear { from{opacity:.5;transform:translateY(4px)} to{opacity:1;transform:none} }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(28px,7vw,42px); letter-spacing:-1.2px; line-height:1.15; margin-bottom:12px; }
h2 { font-size:20px; letter-spacing:-.5px; margin-bottom:14px; }
h3 { font-size:16px; margin-bottom:4px; }
p { margin-bottom:12px; }
.intro { margin-bottom:24px; }
.intro h1 span { color:var(--primary); }
.intro p { color:var(--muted); max-width:540px; }
.eyebrow { font-size:11px; letter-spacing:1.3px; font-weight:900; color:var(--muted); margin-bottom:11px; }
.home-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin-bottom:12px; }
.tile { text-align:left; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:18px 15px; display:flex; flex-direction:column; gap:7px; min-height:156px; box-shadow:var(--shadow); }
.tile strong { font-size:17px; line-height:1.2; }
.tile small { font-size:12px; color:var(--muted); }
.tile-icon { font-size:31px; font-weight:700; line-height:1; margin-bottom:9px; }
.tile-green { background:#174d34; border-color:#174d34; color:#fff; }
.tile-blue { background:#205579; border-color:#205579; color:#fff; }
.tile-green small,.tile-blue small { color:#e3ebf0; }
.horizontal-tile { width:100%; text-align:left; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:15px; padding:15px 14px; display:flex; gap:16px; align-items:center; margin:0 0 11px; box-shadow:var(--shadow); }
.horizontal-tile>span:first-child { font-size:27px; width:35px; text-align:center; }
.horizontal-tile>span:nth-child(2) { flex:1; display:flex; flex-direction:column; }
.horizontal-tile strong { font-size:15px; }
.horizontal-tile small { color:var(--muted); font-size:12px; }
.horizontal-tile>span:last-child { font-size:24px; }
.card { background:var(--card); padding:20px 18px; border:1px solid var(--line); border-radius:var(--radius); margin:0 0 16px; box-shadow:var(--shadow); }
.notice { margin:15px 0; padding:14px 17px; background:var(--card); border-left:4px solid var(--accent); border-radius:10px; }
.notice-amber { background:var(--amber-bg); color:var(--amber-text); border-left-color:#b47417; }
.notice strong { display:block; margin-bottom:4px; }
.notice p { font-size:14px; margin:0; }
.page-heading { margin-bottom:17px; }
.page-heading p { color:var(--muted); font-size:14px; }
.page-heading h1 { font-size:30px; margin:10px 0; }
.back { background:none; border:0; padding:9px 0; color:var(--accent); font-weight:800; min-height:44px; }
.form-card { display:flex; flex-direction:column; gap:19px; }
.form-card h2 { margin-bottom:-7px; }
label:not(.choice):not(.check-line):not(.photo-label) { display:flex; flex-direction:column; gap:7px; font-weight:700; font-size:14px; }
input:not([type=radio]):not([type=checkbox]):not([type=file]),select,textarea {
 width:100%; border-radius:11px; border:1.5px solid var(--line); padding:13px 14px; background:var(--card); color:var(--ink); min-height:51px; font-size:16px;
}
input[type=file] { width:100%; max-width:100%; padding:8px 0; color:var(--ink); font-size:14px; }
textarea { resize:vertical; }
fieldset { padding:0; margin:0; border:0; }
legend { font-size:14px; font-weight:800; margin-bottom:10px; }
.choice-row { display:flex; flex-wrap:wrap; gap:10px; }
.choice { padding:12px; border:1.5px solid var(--line); border-radius:11px; display:flex; align-items:center; gap:8px; font-size:14px; flex:1; min-width:125px; }
.choice input,.check-line input { accent-color:var(--primary); width:19px; height:19px; flex:none; }
.required { color:var(--danger); }
.btn { border:0; border-radius:12px; padding:13px 17px; min-height:49px; font-weight:800; font-size:15px; width:100%; display:flex; align-items:center; justify-content:center; text-align:center; }
.btn-primary { color:var(--primary-ink); background:var(--primary); }
.btn-outline { color:var(--ink); border:1.5px solid var(--line); background:var(--card); }
.btn-danger { background:var(--danger); color:#fff; }
.gps-panel { border:1px dashed var(--line); border-radius:12px; padding:13px; }
.gps-panel .btn { width:auto; }
.check-line { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; margin-top:10px; }
.small { font-size:13px; }
.muted { color:var(--muted); }
.gps-panel p { margin:12px 0 4px; }
.photo-zone { border:1.5px solid var(--line); padding:16px; border-radius:14px; }
.photo-buttons { display:flex; gap:10px; margin-bottom:10px; }
.photo-label { display:flex; width:50%; overflow:hidden; position:relative; align-items:center; font-size:14px; }
.photo-label input { position:absolute; opacity:0; width:1px; height:1px; }
.photo-preview { background:var(--bg); border-radius:9px; padding:10px; min-height:60px; font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.photo-preview img { width:100%; max-height:150px; object-fit:contain; display:block; margin-bottom:7px; }
.button-stack { display:grid; gap:10px; margin-top:14px; }
.metadata { display:grid; gap:9px; font-size:14px; overflow-wrap:anywhere; margin-bottom:16px; }
.metadata p { margin:0; }
.archive-card { padding:17px; background:var(--card); border:1px solid var(--line); border-radius:15px; margin-bottom:13px; }
.archive-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.archive-head h2 { margin-bottom:5px; }
.archive-head span { padding:4px 9px; background:var(--bg); border-radius:20px; font-size:12px; font-weight:800; }
.entry { border-top:1px solid var(--line); padding-top:13px; margin-top:13px; }
.entry p { margin:3px 0; font-size:14px; overflow-wrap:anywhere; }
.photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:11px 0; }
.photo-card { padding:9px; border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.photo-card img { display:block; width:100%; height:115px; object-fit:cover; border-radius:8px; background:var(--bg); }
.photo-card span { font-size:11px; word-break:break-word; }
.mini-btn { color:var(--accent); border:1px solid var(--line); background:var(--card); font-size:13px; font-weight:800; padding:10px; border-radius:9px; min-height:42px; }
.archive-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.archive-actions .mini-btn { flex:1; }
.test-item { padding:13px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 130px; gap:12px; align-items:center; }
.test-item small { display:block; color:var(--muted); }
.test-item select { padding:7px; min-height:44px; font-size:13px; }
#test-notes { margin:15px 0; }
.footer { font-size:11px; padding:13px 18px 18px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px; }
#busy-info { font-weight:800; max-width:70%; }
.toast { position:fixed; bottom:15px; left:50%; transform:translateX(-50%); width:min(calc(100% - 26px),680px); background:#183849; color:#fff; border:2px solid #6ba9c5; border-radius:12px; box-shadow:0 8px 24px #0005; padding:15px 17px; z-index:100; font-size:14px; white-space:pre-wrap; }
@media(min-width:650px) { .home-grid { grid-template-columns:repeat(4,1fr); } .tile { min-height:165px; } main { padding:32px 28px; } .form-card { max-width:660px; } }
@media(max-width:360px) { .header-titles strong { font-size:15px; } .tile { padding:14px 11px; } .tile strong { font-size:15px; } }
@media(prefers-reduced-motion: reduce) { .view { animation:none; } html { scroll-behavior:auto; } }