:root{
  --bg:#0f0f0f;
  --panel:#1a1a1a;
  --surface:#222;
  --surface-2:#262626;
  --text:#ececec;
  --muted:#b2b2b2;
  --border:#2f2f2f;
  --max-width:980px;
  --radius:12px;
  --card-shadow:0 8px 30px rgba(0,0,0,0.45);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  line-height:1.45;
}

.container{
  width:min(100% - 1.5rem,var(--max-width));
  margin:0 auto;
  padding-bottom:2.25rem;
}

.checklist header{
  margin-top:1rem;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel);
}

.checklist .hero{
  width:100%;
  height:clamp(140px,28vw,280px);
  object-fit:cover;
  display:block;
}

.checklist .hero-copy{
  padding:1rem;
  border-top:1px solid var(--border);
}

.checklist h1{
  margin:0;
  font-size:clamp(1.2rem,3.2vw,1.8rem);
  color:var(--text);
  letter-spacing:0.02em;
}

.checklist .sub{
  margin:0.45rem 0 0;
  color:var(--muted);
  font-size:0.98rem;
}

.checklist .meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-top:0.75rem;
}

.checklist .pill{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:999px;
  padding:0.3rem 0.6rem;
  color:var(--muted);
  font-size:0.86rem;
}

.checklist .card{
  margin-top:1rem;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:0.9rem;
}

.checklist h2{
  margin:0 0 0.7rem;
  font-size:1.15rem;
  color:var(--text);
}

.checklist h3{
  margin:1rem 0 0.6rem;
  font-size:1.02rem;
  color:var(--text);
}

.checklist p{margin:0.5rem 0}

.checklist ul,
.checklist ol{
  margin:0.4rem 0 0.9rem;
  padding-left:1.1rem;
}

.checklist li{margin:0.4rem 0}

.checklist .checklist-list{
  list-style:none;
  padding-left:0;
  margin-top:0.45rem;
}

.checklist .checklist-list li{
  margin:0;
  border-top:1px solid var(--border);
  padding:0.55rem 0;
  transition:background-color 140ms ease;
}

.checklist .checklist-list li:first-child{border-top:0}

.checklist .checklist-list li:hover{
  background:rgba(255,255,255,0.03);
}

.checklist .check-item{
  display:flex;
  align-items:flex-start;
  gap:0.65rem;
}

.checklist .check-item input[type="checkbox"]{
  margin-top:0.2rem;
  width:1rem;
  height:1rem;
  accent-color:#9b9b9b;
  cursor:pointer;
  flex:0 0 auto;
}

.checklist .check-item label{cursor:pointer}

.checklist .check-item input[type="checkbox"]:checked + label{
  color:#cfcfcf;
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:#9b9b9b;
}

.checklist .two-col{
  display:grid;
  gap:1rem;
}

.checklist .autobuild-grid{
  margin-top:0.4rem;
}

.checklist .autobuild-note{
  margin-top:0.85rem;
  padding:0.75rem 0.85rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:#171717;
  color:var(--muted);
}

.checklist .autobuild-gallery{
  display:grid;
  gap:0.75rem;
  margin-top:1rem;
}

.checklist .autobuild-figure{
  margin:0;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:#171717;
}

.checklist .autobuild-figure img{
  display:block;
  width:100%;
  height:auto;
}

.checklist .autobuild-figure figcaption{
  padding:0.55rem 0.7rem 0.65rem;
  color:var(--muted);
  font-size:0.9rem;
}

.checklist .stats{
  display:flex;
  justify-content:space-between;
  gap:0.5rem;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:0.35rem;
}

.checklist .progress-wrap{
  width:100%;
  height:10px;
  border-radius:999px;
  background:#131313;
  border:1px solid var(--border);
  overflow:hidden;
  margin-top:0.35rem;
}

.checklist .progress{
  width:0;
  height:100%;
  background:#8f8f8f;
  transition:width 180ms ease;
}

.checklist .actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  margin-top:0.85rem;
}

.checklist button,
.checklist .map-link{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:10px;
  padding:0.52rem 0.72rem;
  text-decoration:none;
  font-size:0.92rem;
  cursor:pointer;
}

.checklist button:hover,
.checklist .map-link:hover{
  border-color:#4a4a4a;
  background:var(--surface-2);
  color:#fff;
}

.checklist .map-link{display:inline-block}

.checklist details{
  border:1px solid var(--border);
  border-radius:10px;
  padding:0.5rem 0.65rem;
  background:#171717;
  margin-top:0.6rem;
}

.checklist summary{
  cursor:pointer;
  color:var(--muted);
  font-weight:600;
}

.checklist .small{
  font-size:0.9rem;
  color:var(--muted);
}

.checklist .export-status{
  min-height:1.25rem;
  margin:0.5rem 0 0;
}

.checklist .site-footer,
.map-page .site-footer{
  margin:1rem 0 0;
  padding:0.75rem 0 0.2rem;
  border-top:1px solid var(--border);
}

.checklist .site-footer p,
.map-page .site-footer p{
  margin:0;
  font-size:0.9rem;
  color:var(--muted);
}

.checklist .js-last-updated,
.map-page .js-last-updated{
  color:inherit;
}

/* Map page compatibility */
.map-page{
  padding-top:1rem;
}

.map-page .section-banner{
  margin:0;
  font-size:1.4rem;
  color:var(--text);
}

.map-page .map-intro{
  margin:0.5rem 0 1rem;
  color:var(--muted);
}

.map-page .map-frame{
  width:100%;
  border:0;
  border-radius:10px;
  box-shadow:var(--card-shadow);
  background:var(--surface);
  height:min(80vh,720px);
}

.map-page .map-shell{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:0.9rem;
}

.map-page .actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  margin:0.8rem 0 0;
}

.map-page .button-link{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:10px;
  padding:0.52rem 0.72rem;
  text-decoration:none;
  font-size:0.92rem;
}

.map-page .button-link:hover{
  border-color:#4a4a4a;
  background:var(--surface-2);
}

@media(max-width:768px){
  .map-page .map-frame{height:50vh}
}

@media(min-width:780px){
  .checklist .hero-copy{padding:1.2rem 1.2rem 1.1rem}
  .checklist .two-col{grid-template-columns:1fr 1fr}
  .checklist .autobuild-gallery{grid-template-columns:repeat(3,1fr)}
}