/* Apple-minimal Catbar — reads CSS variables from inline style */
.trdcb { margin: 0; }
.trdcb-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--trdcb-w,180px), 1fr);
  gap: var(--trdcb-gap,10px);
  padding: 6px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
@media (max-width: 640px){
  .trdcb-row { grid-auto-columns: minmax(var(--trdcb-w-m,150px), 1fr); }
}
.trdcb-row::-webkit-scrollbar { height: 6px; }
.trdcb-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 20px; }

.trdcb-item {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: var(--trdcb-h,110px);
  border-radius: var(--trdcb-r,16px);
  transform: rotate(var(--trdcb-angle,0deg));
  color: var(--trdcb-text,#fff);
  text-decoration: none;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.25) 100%),
    var(--trdcb-surface, rgba(12,14,22,.16));
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.25) 100%),
    var(--bg, none);
  background-size: cover, cover;
  background-position: center, center;
  backdrop-filter: blur(var(--trdcb-blur,8px));
  -webkit-backdrop-filter: blur(var(--trdcb-blur,8px));
  box-shadow: calc(var(--trdcb-shadow,1) * 0px) 10px 30px rgba(0,0,0,.16);
  scroll-snap-align: start;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .28s ease;
}
.trdcb-item:hover, .trdcb-item:focus-visible {
  transform: rotate(var(--trdcb-angle,0deg)) scale(var(--trdcb-scale,1.04));
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  outline: 2px solid var(--trdcb-accent,#ffd400);
  outline-offset: 2px;
}

.trdcb-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--trdcb-lines,1);
  overflow: hidden;
  width: 100%;
  text-align: var(--trdcb-align,center);
  text-transform: var(--trdcb-upper,none);
  font-size: var(--trdcb-fs,14px);
  font-weight: var(--trdcb-fw,600);
  letter-spacing: var(--trdcb-lsp,0em);
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(0,0,0,.14);
}

.trdcb-sub {
  font-size: calc(var(--trdcb-fs,14px) - 2px);
  color: var(--trdcb-muted, rgba(255,255,255,.72));
  margin-top: 2px;
}