:root{
  --bg:#f7f7f8;
  --card:#fff;
  --border:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --accent:#2563eb;
  --ok:#16a34a;
  --warn:#f59e0b;
  --bad:#ef4444;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  background:var(--bg);
  color:var(--text);
}
.container{
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px;
}
h1{
  font-size: 20px;
  margin: 0 0 12px;
}
.small{
  color:var(--muted);
  font-size: 12px;
}
.grid{
  display:grid;
  gap: 14px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.card h2{
  font-size: 14px;
  margin: 0 0 10px;
}
.row{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.col{
  flex: 1 1 320px;
  min-width: 280px;
}

.player-wrap{
  border-radius: 12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#000;
}
.player{
  width:100%;
  aspect-ratio: 16 / 9;
  border:0;
  display:block;
}
.controls{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
button, a.btn{
  appearance:none;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
button.primary, a.btn.primary{
  border-color: #c7d2fe;
  background:#eef2ff;
}

.map{
  height: 360px;
  border-radius: 12px;
  overflow:hidden;
  border:1px solid var(--border);
}
.legend{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
  margin: 8px 0 10px;
}
.badge{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
}
.badge.rec{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#166534;
}
.badge.fallback{
  border-color:#fde68a;
  background:#fffbeb;
  color:#92400e;
}

.list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.item{
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background:#fff;
}
.item-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.item-title strong{
  font-size: 13px;
}
.item-sub{
  margin-top:4px;
  font-size: 12px;
  color:var(--muted);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.item-sub a{ color: var(--accent); text-decoration: none; }

hr.sep{
  border:0;
  border-top:1px solid var(--border);
  margin: 10px 0;
}

.hidden{ display:none !important; }