:root {
  --red: #d0121a;
  --red-dark: #a30e14;
  --charcoal: #1c1c1c;
  --white: #ffffff;
  --page: #f3f3f3;
  --line: #d7d7d7;
  --muted: #5c5c5c;
  --ok: #1f7a3a;
  --ok-bg: #e7f5ec;
  --bad-bg: #fde8e8;
  --shadow: 0 8px 24px rgba(28, 28, 28, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: hidden;
  min-height: 100vh;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--charcoal);
  background: var(--page);
  line-height: 1.45;
}

a { color: var(--red-dark); }

.site-header, .nav {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 20px;
}

.site-header {
  justify-content: space-between;
  background: var(--white);
  color: var(--charcoal);
}

.nav {
  flex-wrap: wrap;
  gap: 6px;
  background: #111;
  padding-top: 8px;
  padding-bottom: 8px;
}

.nav a {
  flex: 0 0 auto;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
}

.nav a.is-current, .nav a:hover {
  background: var(--white);
  color: var(--charcoal);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--charcoal);
  text-decoration: none;
  font-weight: 700;
}

.brand-logo, .login-logo, .card-logo {
  object-fit: contain;
  background: var(--white);
  border-radius: 0;
}

.brand-logo { height: 56px; width: auto; }
.login-logo { height: 104px; width: auto; display: block; margin: 0 auto 8px; }
.card-logo { height: 40px; width: auto; }

.header-user { display: flex; align-items: center; gap: 12px; }
.who { font-size: .92rem; color: var(--charcoal); }
.alert-link {
  color: var(--charcoal);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.count {
  min-width: 1.4rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-size: .8rem;
  text-align: center;
}

.page { width: min(1100px, calc(100% - 32px)); margin: 28px auto 64px; }
.narrow { max-width: 760px; margin-inline: auto; }

.card, .check-card, .table-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.card { padding: 24px; }
.auth-card { max-width: 440px; margin: 0 auto; }

h1 { margin: 0 0 8px; font-size: 1.6rem; }
h2 { margin: 28px 0 10px; font-size: 1.15rem; }
.lede { color: var(--muted); margin-top: 0; }

label { display: block; margin: 14px 0 6px; font-weight: 600; }

.input, select.input, textarea.input, input[type="password"], input[type="text"], input[type="email"], input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: var(--white);
}

textarea { min-height: 80px; }

input:focus, select:focus, textarea:focus, button:focus, a:focus {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.button, button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 12px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--red);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:hover { background: var(--red-dark); }
button.button.button-quiet {
  margin: 0;
  min-height: 36px;
  padding: 0 12px;
  background: var(--white);
  color: var(--charcoal);
  border: 1px solid var(--line);
}
button.button.button-quiet:hover { background: #f6f6f6; }
.button-secondary { background: var(--charcoal); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.actions h1 { margin: 0; }
.actions form { margin: 0; }
.actions .button { margin-top: 0; }

.error-summary, .errorlist, .field-error {
  background: var(--bad-bg);
  color: #8d1016;
  border-radius: 8px;
  padding: 8px 12px;
}
.errorlist { list-style: none; margin: 8px 0 0; padding-left: 12px; }

.help, .muted { color: var(--muted); }
.messages { list-style: none; padding: 0; }
.messages li { background: var(--ok-bg); color: var(--ok); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; }

.steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.steps span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; font-size: .9rem; }

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px 18px 8px;
  margin: 16px 0;
}
.panel h2, .card h2 { margin-top: 14px; }
.check-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.panel .check-row:first-of-type { border-top: 0; }
.check-row.is-issue { background: #fff8f8; margin-inline: -18px; padding-inline: 18px; }
.check-title { flex: 1 1 200px; margin: 0; font-weight: 700; }
.note-box, .check-row > .help, .check-row > .errorlist { flex: 1 1 100%; }
.who-line { margin-top: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 12px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fafafa;
  font-weight: 600;
  cursor: pointer;
}
.choice input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--ok);
  cursor: pointer;
}
.choice-bad input { accent-color: var(--red); }
.choice-muted input { accent-color: var(--charcoal); }
.choice:has(input:checked) { border-color: var(--ok); background: var(--ok-bg); }
.choice-bad:has(input:checked) { border-color: var(--red); background: var(--bad-bg); }
.choice-muted:has(input:checked) { border-color: var(--charcoal); background: #eee; }
.note-box { margin-top: 10px; }
.zone-row { align-items: center; }
.zone-controls { flex: 1 1 220px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.sketch {
  width: 220px;
  max-width: 100%;
  height: auto;
  flex: 0 0 220px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  text-decoration: none;
  font-weight: 700;
  color: var(--charcoal);
}

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.kpi strong { display: block; font-size: 1.6rem; }
.kpi span { color: var(--muted); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .8rem; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); background: #fafafa; }
tbody tr:hover { background: #fff8f8; }

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .8rem;
  font-weight: 700;
  background: #eee;
}
.badge-pass { background: var(--ok-bg); color: var(--ok); }
.badge-bad, .badge-critical { background: var(--bad-bg); color: #8d1016; }
.badge-review { background: #fff4d6; color: #6a4b00; }
.badge-muted { background: #eee; color: var(--muted); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 16px; }
.filters label { margin: 0; font-size: .85rem; }
.filters .input, .filters select { min-height: 40px; width: auto; }

.bar-row { display: grid; grid-template-columns: 70px 1fr 30px; gap: 8px; align-items: center; margin: 6px 0; }
.bar { height: 14px; background: var(--red); border-radius: 7px; display: block; }
.w0 { width: 4%; } .w1 { width: 10%; } .w2 { width: 20%; } .w3 { width: 30%; }
.w4 { width: 40%; } .w5 { width: 50%; } .w6 { width: 60%; } .w7 { width: 70%; }
.w8 { width: 80%; } .w9 { width: 90%; } .w10 { width: 100%; }
.text-button { background: none; border: 0; color: inherit; font: inherit; text-align: left; padding: 8px 0; min-height: 44px; cursor: pointer; }

.photo-tools { margin-top: 10px; }
.photo-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
button.button.button-camera,
button.button.button-file { margin-top: 0; min-height: 44px; }
button.button.button-file {
  background: var(--white);
  color: var(--charcoal);
  border: 1px solid var(--charcoal);
}
button.button.button-file:hover { background: #f6f6f6; }
.sr-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.thumbs, .photo-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.thumb-row { display: flex; align-items: center; gap: 10px; max-width: 100%; }
.thumb {
  width: 96px;
  height: 72px;
  object-fit: cover;
  flex: 0 0 96px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}
.thumb-row p, .photo-grid figcaption { margin: 4px 0 0; color: var(--muted); font-size: .85rem; }
.photo-grid figure { margin: 0; width: 96px; }
.photo-limit { color: #8d1016; font-weight: 700; }
.viewer {
  width: min(960px, calc(100vw - 32px));
  border: 0;
  border-radius: 12px;
  padding: 12px;
}
.viewer img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; background: #111; }
.viewer::backdrop { background: rgba(0, 0, 0, .72); }
.period { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
button.button.period-on { background: var(--charcoal); }

.sign-block { margin-top: 12px; max-width: 100%; }
.sign-pad {
  width: 100%;
  height: 180px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.sign-pad canvas {
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}
.sign-missing { outline: 2px solid var(--red); }
.sign-hint { color: var(--muted); margin: 8px 0; }
.signature-view {
  display: block;
  width: min(100%, 420px);
  height: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.log { padding-left: 18px; }
.log li { margin: 8px 0; }

.submit-bar { padding: 8px 0 4px; }
.submit-bar .button { width: 100%; margin-top: 0; }

.driver-card {
  width: 86mm;
  min-height: 54mm;
  border: 2px solid var(--charcoal);
  border-radius: 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 28mm;
  gap: 8px;
  background: #fff;
}
.driver-card img.qr { width: 28mm; height: 28mm; }

.temp-password { font-family: Consolas, monospace; font-size: 1.2rem; background: #fff4d6; padding: 8px 12px; border-radius: 8px; }

@media (max-width: 720px) {
  .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .site-header { align-items: flex-start; }
  .header-user { flex-wrap: wrap; justify-content: flex-end; }
  .page { margin-top: 16px; }
  .choice { flex: 1 1 140px; }
  .sketch { flex-basis: auto; width: min(100%, 260px); }
}

@media print {
  .site-header, .nav, .no-print, .submit-bar { display: none !important; }
  body, .page { background: #fff; margin: 0; width: auto; }
  .card, .check-card, .table-wrap { box-shadow: none; }
}