:root {
  --navy: #0d1b2a;
  --navy-mid: #152235;
  --navy-light: #1e3a5f;
  --teal: #00b4a6;
  --teal-dim: #007e74;
  --teal-pale: #e0f7f5;
  --white: #f5f8fa;
  --muted: #8aa4bc;
  --border: rgba(0,180,166,0.18);
  --card-bg: #111f30;
  --danger: #e85d4a;
  --warn: #f5a623;
  --good: #2ec27e;
  --font-head: 'Syne', sans-serif;
  --font-mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  min-height: 100vh;
}

/* ---- LAYOUT ---- */
.page { max-width: 920px; margin: 0 auto; padding: 48px 24px 80px; }

/* ---- HEADER ---- */
.site-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.logo-mark {
  height: 40px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.header-text { flex: 1; }
.header-text h1 {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.header-text p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.doc-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ---- SECTION TITLES ---- */
.section { margin-bottom: 48px; }
.section-label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.section-title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.2;
}
.section-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
  max-width: 640px;
  line-height: 1.8;
}

/* ---- CALLOUT BOXES ---- */
.callout {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: #c8dde8;
}
.callout.warn  { border-left-color: var(--warn); }
.callout.danger { border-left-color: var(--danger); }
.callout strong { color: var(--white); font-weight: 500; }
.callout code {
  background: rgba(0,180,166,0.12);
  color: var(--teal);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}

/* ---- COMPETITOR CARDS ---- */
.competitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.comp-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.comp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.comp-card.tier-high::before { background: var(--danger); }
.comp-card.tier-mid::before  { background: var(--warn); }
.comp-card.tier-low::before  { background: var(--teal); }
.comp-name {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 2px;
}
.comp-location {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.comp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}
.tag-teal   { color: var(--teal);  border-color: rgba(0,180,166,0.35);   background: rgba(0,180,166,0.07); }
.tag-warn   { color: var(--warn);  border-color: rgba(245,166,35,0.35);  background: rgba(245,166,35,0.07); }
.tag-danger { color: var(--danger);border-color: rgba(232,93,74,0.35);   background: rgba(232,93,74,0.07); }
.tag-muted  { color: var(--muted); border-color: rgba(138,164,188,0.25); background: rgba(138,164,188,0.05); }
.comp-note  { font-size: 11px; color: var(--muted); line-height: 1.6; }
.comp-note strong { color: #c8dde8; font-weight: 500; }

/* ---- WHAT TO LOOK FOR ---- */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.check-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.check-num {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.check-title {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
.check-body { font-size: 12px; color: var(--muted); line-height: 1.7; }
.check-body li { margin-left: 14px; margin-bottom: 4px; }
.check-body strong { color: #c8dde8; font-weight: 500; }

/* ---- CHAMBER LIST ---- */
.chamber-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.chamber-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.chamber-name {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}
.chamber-note { font-size: 11px; color: var(--muted); line-height: 1.6; }

/* ---- DIVIDER ---- */
.divider { border: none; border-top: 1px solid var(--border); margin: 40px 0; }

/* ---- FORM ---- */
.form-header {
  background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy-mid) 100%);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 24px 28px 20px;
}
.form-header h2 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 4px;
}
.form-header p { font-size: 12px; color: var(--muted); }
.form-body {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 28px;
}
.form-row { margin-bottom: 22px; }
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}
.form-section-title {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  margin-top: 8px;
}
label.field-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 6px;
  font-family: var(--font-mono);
}
label.field-label span.req  { color: var(--danger); margin-left: 2px; }
label.field-label span.hint {
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-size: 10px;
  margin-left: 6px;
  font-weight: 400;
}
input[type=text], input[type=url], textarea, select {
  width: 100%;
  background: var(--navy-mid);
  border: 1px solid rgba(0,180,166,0.22);
  border-radius: 6px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
input[type=text]:focus, input[type=url]:focus, textarea:focus, select:focus {
  border-color: var(--teal);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { resize: vertical; min-height: 76px; }
select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2300b4a6' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
select option { background: var(--navy-mid); }

.radio-group, .check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.radio-group label, .check-group label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #c8dde8;
  cursor: pointer;
  background: var(--navy-mid);
  border: 1px solid rgba(0,180,166,0.2);
  border-radius: 5px;
  padding: 6px 12px;
  transition: border-color 0.15s, background 0.15s;
  text-transform: none;
  letter-spacing: 0;
}
.radio-group label:hover, .check-group label:hover {
  border-color: var(--teal);
  background: rgba(0,180,166,0.08);
}
.radio-group input, .check-group input { width: auto; accent-color: var(--teal); }

.score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.score-select {
  width: 100%;
  background: var(--navy-mid);
  border: 1px solid rgba(0,180,166,0.2);
  border-radius: 6px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 7px 10px;
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.btn-primary {
  background: var(--teal);
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  padding: 11px 24px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover { background: #00cfc0; }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary {
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-secondary:hover { border-color: var(--teal); color: var(--teal); }
.print-hint { font-size: 11px; color: var(--muted); }

/* ---- RESPONSIVE ---- */
@media (max-width: 580px) {
  .form-row-2        { grid-template-columns: 1fr; }
  .check-grid        { grid-template-columns: 1fr; }
  .competitor-grid   { grid-template-columns: 1fr; }
  .chamber-list      { grid-template-columns: 1fr; }
}