:root { --green: #14532d; --green2: #166534; --bg: #f4f5f2; --card: #fff; --line: #d9ddd5; --text: #1b1f1a; --muted: #5d665b; --warn: #b45309; --warnbg: #fff7e6; --bad: #b91c1c; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 17px; margin: 0 0 6px; }
h3 { font-size: 15px; margin: 14px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
a { color: var(--green2); }
main { max-width: 760px; margin: 0 auto; padding: 12px 12px calc(40px + env(safe-area-inset-bottom)); }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--green); color: #fff; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
.top a.back { color: #fff; text-decoration: none; font-weight: 600; padding: 6px 4px; }
.savestate { font-size: 14px; opacity: .9; text-align: right; }
.savestate.bad { color: #fde68a; font-weight: 600; }
.muted { color: var(--muted); } .small { font-size: 14px; } .err { color: var(--bad); } .pre { white-space: pre-wrap; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .row.end { justify-content: flex-end; margin-top: 18px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn.primary { background: var(--green2); border-color: var(--green2); color: #fff; }
.btn.danger { color: var(--bad); border-color: #f0c2c2; }
.btn.big { width: 100%; min-height: 56px; font-size: 18px; margin-bottom: 14px; }
.icon { min-width: 46px; min-height: 46px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 20px; cursor: pointer; }

.login { max-width: 340px; margin: 18vh auto 0; padding: 20px; display: grid; gap: 12px; }
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=password], textarea, select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); font: inherit; font-size: 17px; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--green2); outline-offset: 0; border-color: var(--green2); }

.card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; color: inherit; text-decoration: none; }
.card-title { font-weight: 700; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.chip { font-size: 13px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: #e8ebe5; color: var(--muted); white-space: nowrap; }
.chip.ok { background: #dcfce7; color: var(--green); }
.banner { background: var(--warnbg); border: 1px solid #f3d9a4; color: var(--warn); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-weight: 600; }

.flags { background: var(--warnbg); border: 1px solid #f3d9a4; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.flags h2 { color: var(--warn); } .flags ul { margin: 0; padding-left: 20px; } .flags li { margin: 3px 0; }
.flags.clear { background: #ecfdf3; border-color: #bbe7c9; } .flags.clear h2 { color: var(--green); margin: 0; }

.section { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.section > summary { list-style: none; cursor: pointer; padding: 14px; font-weight: 700; font-size: 18px; display: flex; justify-content: space-between; align-items: center; }
.section > summary::-webkit-details-marker { display: none; }
.section > summary::after { content: "▾"; color: var(--muted); } .section[open] > summary::after { content: "▴"; }
.fields, .shots, .materials { padding: 0 14px 14px; }
.field { display: block; margin-bottom: 14px; }
.label { display: block; font-weight: 600; margin-bottom: 5px; }
.hint { display: block; color: var(--muted); font-size: 14px; margin: -3px 0 5px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { min-height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--text); font: inherit; cursor: pointer; }
.choice.on { background: var(--green2); border-color: var(--green2); color: #fff; font-weight: 600; }

.shots { border-top: 1px solid var(--line); padding-top: 2px; }
.shot { padding: 8px 0; border-bottom: 1px solid #eef0ec; } .shot:last-child { border-bottom: 0; }
.shot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shot-label { font-weight: 600; } .shot.has .shot-label::before { content: "✓ "; color: var(--green2); }
.shot-btns { display: flex; gap: 6px; flex-shrink: 0; }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; } .thumbs:not(:empty) { margin-top: 8px; }
.tile { position: relative; width: 84px; height: 84px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #e8ebe5; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font: inherit; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .vid { font-size: 28px; color: var(--green); }
.tile .cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.wait { font-size: 12px; color: var(--muted); cursor: default; text-align: center; } .tile.busy { color: var(--green2); font-weight: 600; }

.mat { display: grid; grid-template-columns: 96px 1fr 46px; gap: 6px; padding: 8px 0; border-bottom: 1px solid #eef0ec; }
.mat .mat-name { grid-column: 1 / 3; font-weight: 600; }
.mat .mat-note { grid-column: 2 / -1; color: var(--muted); }
.materials .row { margin-top: 12px; }

.viewer { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 10px; }
.viewer-box { background: #fff; border-radius: 12px; padding: 10px; max-width: 760px; width: 100%; max-height: 96vh; overflow: auto; display: grid; gap: 10px; }
.viewer-box img, .viewer-box video { width: 100%; max-height: 66vh; object-fit: contain; background: #000; border-radius: 8px; }
.viewer-box .row { justify-content: space-between; }

#toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; background: #1b1f1a; color: #fff; padding: 10px 16px; border-radius: 10px; max-width: 90vw; }

.report section { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.report section.flags { background: var(--warnbg); border-color: #f3d9a4; }
.report table { width: 100%; border-collapse: collapse; }
.report th, .report td { text-align: left; vertical-align: top; padding: 6px 4px; border-bottom: 1px solid #eef0ec; }
.report th { width: 42%; font-weight: 600; color: var(--muted); }
.report table.mats th { width: auto; } .report table.mats td:first-child { width: 50%; }
.top .row { flex-wrap: nowrap; } .top .btn { min-height: 40px; padding: 0 12px; white-space: nowrap; }
.rgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rgrid figure { margin: 0; } .rgrid img { width: 100%; border-radius: 8px; display: block; }
.rgrid figcaption { font-size: 14px; color: var(--muted); }
.vidlink { display: flex; align-items: center; justify-content: center; min-height: 90px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; font-weight: 600; }
.sharetext { margin-bottom: 12px; font-size: 14px; }

@media print {
  .noprint, #toast { display: none !important; }
  body { background: #fff; font-size: 12pt; } main { max-width: none; padding: 0; }
  .report section { border: 0; padding: 0; break-inside: avoid-page; } .rgrid { grid-template-columns: repeat(3, 1fr); } .rgrid figure { break-inside: avoid; }
}

.navbtn { width: 100%; margin-bottom: 14px; }

.catalogue { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; background: #fafbf8; }
.catalogue > summary { cursor: pointer; padding: 12px; font-weight: 600; color: var(--green2); }
.catalogue .cat { padding: 0 12px 10px; } .catalogue h3 { margin-top: 4px; }
.catalogue .choice { min-height: 42px; padding: 0 13px; font-size: 16px; }

.search { margin-bottom: 12px; } a.card[hidden] { display: none; }

.fields { display: flex; flex-wrap: wrap; column-gap: 12px; } .field { flex: 1 1 100%; min-width: 0; } .field.half { flex: 1 1 calc(50% - 6px); }

.route { font-size: 13px; font-weight: 700; color: var(--green2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }

.route.web { color: #b45309; }