:root{
  --hat-num-bg:#f1f1f3;
  --hat-num-fg:#7a7a86;
  --hat-title:#111;
  --hat-title-hover:#0a58ca;
  --hat-divider:#ececf0;
}
.hat-list{list-style:none;margin:0;padding:0}
.hat-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--hat-divider)
}
.hat-item:last-child{border-bottom:none}
.hat-num{
  font-weight:800;font-size:22px;line-height:1;
  color:var(--hat-num-fg);
  background:var(--hat-num-bg);
  border-radius:8px;min-width:34px;text-align:center;padding:6px 0
}
.hat-title{
  flex:1;text-decoration:none;color:var(--hat-title);
  line-height:1.35;font-weight:600
}
.hat-title:hover{text-decoration:underline;color:var(--hat-title-hover)}
@media (max-width:480px){
  .hat-item{gap:10px;padding:8px 0}
  .hat-num{min-width:30px;font-size:20px}
}