/* LiveTown Live Ranking UI Compact 1.0.0
 * Scope is limited to existing LiveTown ranking/directory roots.
 * Controls keep 44px minimum target size; data acquisition and ranking logic are untouched.
 */

/* /live/ directory */
.ltd{
  margin:12px auto!important;
  padding:14px!important;
  border-radius:14px!important;
}
.ltd__hero{
  gap:8px!important;
  padding:2px 0 12px!important;
  background:none!important;
}
.ltd h2{
  margin:8px 0 4px!important;
  font-size:clamp(24px,3.6vw,34px)!important;
  line-height:1.16!important;
}
.ltd__hero p{
  line-height:1.55!important;
  font-size:12px!important;
}
.ltd__hero-side{display:none!important}
.ltd__tabs{
  gap:6px!important;
  padding:2px 0 8px!important;
}
.ltd__tab{
  min-height:44px!important;
  padding:8px 12px!important;
  border-radius:9px!important;
}
.ltd__tools{
  gap:8px!important;
  margin:9px 0 4px!important;
}
.ltd__search,
.ltd__refresh{
  border-radius:9px!important;
}
.ltd__notice{
  margin:4px 0 9px!important;
  line-height:1.45!important;
}
.ltd__panels{gap:10px!important}
.ltd__panel{border-radius:12px!important}
.ltd__panel-header{
  padding:10px 12px 6px!important;
}
.ltd__source{margin-bottom:2px!important}
.ltd__state{
  min-height:16px!important;
  margin:0 12px 5px!important;
}
.ltd__cards{
  padding:0 8px!important;
}
.ltd__card>a{
  gap:9px!important;
  padding:8px 3px!important;
  min-height:76px!important;
  border-radius:7px!important;
}
.ltd__thumb{
  flex-basis:86px!important;
  border-radius:7px!important;
}
.ltd__title{
  font-size:12px!important;
  line-height:1.35!important;
  -webkit-line-clamp:2!important;
}
.ltd__name{
  margin:2px 0!important;
  font-size:10px!important;
}
.ltd__meta{
  gap:6px!important;
  justify-content:flex-start!important;
  line-height:1.2!important;
}
.ltd__rank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  min-height:20px;
  margin-left:auto;
  padding:1px 6px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--app-color) 55%,transparent);
  color:var(--app-color)!important;
  font-size:10px!important;
  font-weight:900;
}
.ltd__rank[hidden]{display:none!important}
.ltd .ltlr-ui-compact__metric{
  color:var(--app-color)!important;
  font-size:15px!important;
  font-weight:900!important;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.ltd .ltlr-ui-compact__metric-muted{
  color:var(--ltd-muted)!important;
  font-size:10px!important;
}

/* Single-app mode keeps the existing full-width thumbnail contract. */
.ltd[data-mode=single] .ltd__card>a{
  padding:8px 2px!important;
}
.ltd[data-mode=single] .ltd__thumb{
  width:100%!important;
  flex-basis:auto!important;
  aspect-ratio:16/9!important;
}

.ltd__panel-footer{
  padding:6px 10px 8px!important;
}
.ltd__footnote{
  margin:9px 0 0!important;
  line-height:1.45!important;
}

/* Home ranking */
.ltlr{
  border-radius:14px!important;
  box-shadow:none!important;
}
.ltlr__header{
  padding:13px 14px 9px!important;
  background:var(--ltlr-bg)!important;
}
.ltlr__header::after{display:none!important}
.ltlr__heading{font-size:20px!important}
.ltlr__tabs{
  gap:6px!important;
  padding:7px 12px 8px!important;
}
.ltlr__statusbar{padding:5px 12px 0!important}
.ltlr__toolbar{
  gap:6px!important;
  padding:7px 12px 9px!important;
}
.ltlr__list{
  padding:7px 10px 2px!important;
}
.ltlr__item{
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:10px!important;
  min-height:72px!important;
  margin:0 0 6px!important;
  padding:8px!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
.ltlr__item:hover{
  transform:none!important;
  box-shadow:none!important;
}
.ltlr__thumb{
  width:92px!important;
  border-radius:9px!important;
}
.ltlr__rank{
  min-width:30px!important;
  height:20px!important;
  border-radius:999px!important;
}
.ltlr__rank[hidden]{display:none!important}
.ltlr__name{
  margin-top:2px!important;
  font-size:14px!important;
}
.ltlr__title{
  margin:2px 0!important;
  font-size:12px!important;
}
.ltlr__meta{
  gap:4px!important;
  line-height:1.2!important;
}
.ltlr__metric{
  padding:0!important;
  background:transparent!important;
}
.ltlr .ltlr-ui-compact__metric{
  color:var(--ltlr-accent)!important;
  font-size:15px!important;
  font-weight:900!important;
  font-variant-numeric:tabular-nums;
}
.ltlr .ltlr-ui-compact__metric-muted{
  color:var(--ltlr-muted)!important;
  font-size:11px!important;
}

@media(max-width:640px){
  .ltd{
    margin:8px 0!important;
    padding:10px!important;
  }
  .ltd__hero{
    padding:0 0 8px!important;
  }
  .ltd h2{
    margin:5px 0 3px!important;
    font-size:25px!important;
  }
  .ltd__hero p{
    font-size:10px!important;
    line-height:1.45!important;
  }
  .ltd__tabs{
    gap:5px!important;
    padding-bottom:6px!important;
  }
  .ltd__tools{
    margin-top:6px!important;
  }
  .ltd__notice{
    margin-bottom:7px!important;
  }
  .ltd__panel-header{
    padding:8px 10px 5px!important;
  }
  .ltd__state{
    margin:0 10px 4px!important;
  }
  .ltd__cards{
    padding:0 6px!important;
  }
  .ltd__card>a{
    gap:8px!important;
    padding:7px 2px!important;
    min-height:72px!important;
  }
  .ltd__thumb{
    flex-basis:84px!important;
  }
  .ltd__title{font-size:12px!important}
  .ltd__name{font-size:10px!important}
  .ltd .ltlr-ui-compact__metric{font-size:14px!important}
  .ltd__footnote{padding:0!important}
}

@media(min-width:600px){
  .ltlr__item{
    grid-template-columns:126px minmax(0,1fr)!important;
    gap:12px!important;
    padding:9px!important;
  }
  .ltlr__thumb{width:126px!important}
  .ltlr__list{
    padding-left:12px!important;
    padding-right:12px!important;
  }
}