:root{
  --max-width:900px;
  --muted:#666;
  --border:#e3e3e3;
  --bg-head:#fafafa;
  --radius:8px;
  --gap:12px;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:#111;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

main{
  max-width:var(--max-width);
  margin:16px auto;
  padding:0 12px;
}

h1{
  margin:0 0 10px 0;
  font-size:1.15rem;
  line-height:1.2;
  font-weight:600;
}

.summary{
  display:flex;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
  align-items:center;
}

.summary-item{
  background:#f7f9fc;
  border:1px solid #e6eef6;
  padding:8px 12px;
  border-radius:8px;
  min-width:120px;
}

.summary-label{
  font-size:0.85rem;
  color:var(--muted);
  margin-bottom:4px;
}

.summary-value{
  font-size:1rem;
  font-weight:600;
  color:#111;
}

/* Table container allows horizontal scroll on small screens */
.table-wrap{
  width:100%;
  overflow:auto;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#fff;
  -webkit-overflow-scrolling:touch;
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:560px;
}

thead th{
  text-align:left;
  padding:8px 10px;
  background:var(--bg-head);
  font-weight:600;
  font-size:0.92rem;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:1;
}

tbody td{
  padding:8px 10px;
  border-top:1px solid var(--border);
  font-size:0.92rem;
  vertical-align:middle;
}

tbody tr:nth-child(odd){ background:#fff; }
tbody tr:nth-child(even){ background:#fbfbfb; }

.small{
  font-size:0.9rem;
  color:var(--muted);
  margin-top:12px;
}

/* Mobile adjustments: reduce padding further while keeping table layout */
@media (max-width:520px){
  table{ min-width:480px; }
  thead th{
    padding:6px 8px;
    font-size:0.82rem;
  }
  tbody td{
    padding:6px 8px;
    font-size:0.82rem;
  }
}

/* Very small screens: tiny padding */
@media (max-width:360px){
  table{ min-width:420px; }
  thead th{
    padding:4px 6px;
    font-size:0.78rem;
  }
  tbody td{
    padding:4px 6px;
    font-size:0.78rem;
  }
}