* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: #f5f6f8;
  color: #1f2430;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
h1 { font-size: 1.4rem; margin: 0.5rem 0; }
h2 { font-size: 1.15rem; margin: 0.75rem 0 0.4rem; }
h3 { font-size: 1rem; margin: 0.5rem 0 0.35rem; }
.topnav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: #1f2430;
}
.topnav a, .topnav span { color: #fff; text-decoration: none; font-size: 0.85rem; }
.topnav a:hover { text-decoration: underline; }
.topnav .spacer { flex: 1; }
.nav-divider { width: 1px; height: 1.1rem; background: rgba(255,255,255,0.3); margin: 0 0.25rem; }
.site-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem;
  color: #6b7280;
  font-size: 0.75rem;
  border-top: 1px solid #e1e4e9;
  margin-top: auto;
}
.site-footer a { color: #6b7280; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
main.container { flex: 1 0 auto; }
.container { max-width: 1100px; margin: 0 auto; padding: 1rem 1.25rem; width: 100%; }
.container.full-width { max-width: 100%; padding: 0.75rem 1rem; }
.card {
  background: #fff;
  border: 1px solid #e1e4e9;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.centered { max-width: 380px; margin: 3rem auto; text-align: center; }
form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
input, select, textarea, button {
  font-size: 0.85rem;
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid #c7cbd3;
}
button {
  background: #2b59ff;
  color: #fff;
  border: none;
  cursor: pointer;
}
button:hover { background: #1e44d1; }
.link-button {
  background: none;
  border: none;
  color: #c0392b;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: 0.8rem;
}
a.button {
  display: inline-block;
  background: #2b59ff;
  color: #fff;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  text-decoration: none;
  margin: 0 0.35rem;
  font-size: 0.85rem;
}
.error { color: #c0392b; }
.muted { color: #6b7280; font-size: 0.8rem; }
table { width: 100%; border-collapse: collapse; margin: 0.6rem 0; font-size: 0.85rem; }
th, td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid #e1e4e9; }
.badge {
  display: inline-block;
  padding: 0.08rem 0.4rem;
  border-radius: 10px;
  font-size: 0.68rem;
  color: #fff;
  text-transform: uppercase;
}
.badge-low { background: #4caf7d; }
.badge-medium { background: #e0a11c; }
.badge-high { background: #d64545; }
.review-layout { display: grid; grid-template-columns: minmax(240px, 300px) 1fr minmax(260px, 320px); gap: 0.75rem; margin-top: 0.75rem; }
.review-col { background: #fff; border: 1px solid #e1e4e9; border-radius: 8px; padding: 0.75rem; }
.badge-loc { background: #5b6472; }
.badge-note { background: #3a7bd5; }
.pdf-toolbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; flex-wrap: wrap; font-size: 0.85rem; }
.pdf-toolbar button { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.pin-hint { font-size: 0.72rem; }
#pdf-container { position: relative; width: 100%; max-height: 85vh; overflow-y: auto; border: 1px solid #e1e4e9; }
#pdf-canvas { display: block; width: 100%; cursor: crosshair; }
#marker-layer { position: absolute; top: 0; left: 0; cursor: crosshair; }
.pdf-marker {
  position: absolute;
  width: 16px; height: 16px;
  margin-left: -8px; margin-top: -8px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
  cursor: pointer;
}
.pdf-marker.priority-low { background: #4caf7d; }
.pdf-marker.priority-medium { background: #e0a11c; }
.pdf-marker.priority-high { background: #d64545; }
.pdf-marker.pin-new { background: #2b59ff; width: 18px; height: 18px; margin-left: -9px; margin-top: -9px; cursor: default; }
.pin-status { font-size: 0.8rem; margin: 0.2rem 0; }
.comment { border-left: 4px solid #ccc; padding: 0.4rem 0.6rem; margin-bottom: 0.5rem; background: #fafbfc; font-size: 0.85rem; }
.comment.priority-low { border-color: #4caf7d; }
.comment.priority-medium { border-color: #e0a11c; }
.comment.priority-high { border-color: #d64545; }
.comment-meta { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.2rem; flex-wrap: wrap; }
.response { color: #2b59ff; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 900px) {
  .review-layout, .admin-grid { grid-template-columns: 1fr; }
}