body {
  background: #0d1117;
  color: #e6edf3;
  font-family: -apple-system, sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

h1 {
  font-size: 44px;
  font-weight: 800;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -1px;
  margin-bottom: 8px;
  color: #58a6ff;
}
.subtitle { color: #8b949e; margin-top: 0; margin-bottom: 24px; }

.search-row { display: flex; gap: 12px; margin-bottom: 24px; }
.search-row input {
  flex: 1; background: #161b22; border: 1px solid #30363d; color: #e6edf3;
  padding: 8px 12px; border-radius: 8px; font-size: 14px;
}
.search-row button {
  background: #161b22; border: 1px solid #30363d; color: #e6edf3;
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
}
.search-row button:hover { background: #21262d; }

.passport-row { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 16px; margin-bottom: 16px; }

.passport-card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 1.25rem; }
.passport-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.did-label { font-weight: 500; font-size: 15px; margin: 0; }
.passport-sub { font-size: 13px; color: #8b949e; margin: 0; }
.passport-total { text-align: right; }
.total-number { font-size: 24px; font-weight: 500; margin: 0; }
.total-label { font-size: 12px; color: #6e7681; margin: 0; }

.stamp-grid {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px);
  gap: 3px; overflow-x: auto; padding-bottom: 4px;
}
.stamp-cell { width: 14px; height: 14px; border-radius: 3px; background: #21262d; }
.stamp-cell.l1 { background: #F5C4B3; }
.stamp-cell.l2 { background: #F0997B; }
.stamp-cell.l3 { background: #D85A30; }
.stamp-cell.l4 { background: #993C1D; }

.legend { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: #6e7681; }
.legend .swatch { width: 12px; height: 12px; border-radius: 3px; }
.legend .l0 { background: #21262d; }
.legend .l1 { background: #F5C4B3; }
.legend .l2 { background: #F0997B; }
.legend .l3 { background: #D85A30; }
.legend .l4 { background: #993C1D; }

.leaderboard-card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 1rem; }
.leaderboard-title { font-size: 13px; color: #8b949e; margin: 0 0 10px; }
.leaderboard-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 10px; }
.leaderboard-row .name { color: #8b949e; }
.leaderboard-row .count { font-weight: 500; }

.rooms-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; margin-bottom: 16px; }
.room-card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 0.75rem 1rem; }
.room-card .name { font-size: 13px; color: #8b949e; margin: 0; }
.room-card .seq { font-size: 16px; font-weight: 500; margin: 2px 0 0; }

.tape-card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 0.75rem 1rem; }
.tape-title { font-size: 12px; color: #6e7681; margin: 0 0 8px; }
.tape-body {
  font-family: "SF Mono", Consolas, monospace; font-size: 12px; color: #8b949e;
  display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow-y: auto;
}
.import-row { margin-top: 16px; border-top: 0.5px solid #30363d; padding-top: 16px; }
.import-row textarea {
  width: 100%; height: 80px; background: #0d1117; border: 1px solid #30363d;
  color: #e6edf3; border-radius: 8px; padding: 8px; font-family: monospace;
  font-size: 12px; resize: vertical; box-sizing: border-box;
}
.import-row button {
  margin-top: 8px; background: #161b22; border: 1px solid #30363d; color: #e6edf3;
  padding: 6px 14px; border-radius: 8px; cursor: pointer;
}
#import-status { font-size: 12px; margin-top: 6px; }

.intro { max-width: 640px; margin-bottom: 24px; }
.intro p { font-size: 13px; color: #8b949e; line-height: 1.6; margin: 0 0 10px; }
.intro code { background: #161b22; padding: 1px 5px; border-radius: 4px; font-size: 12px; }