/* Admin minor tweaks */
.tttf-table .description{color:#666}
.tttf-logo-wrap{display:flex;align-items:center;gap:8px}
.tttf-logo-preview img{border-radius:4px}

/* ========= Modern UI ========= */
:root{
  --tf-accent:#60a5fa; /* fallback accent */
}

/* Typography scale */
.trade-friends.size-sm, .tf-ranked-wrap.size-sm{ --tf-size: .95rem; --tf-heading: 1.0rem; --tf-gap: 10px; }
.trade-friends.size-md, .tf-ranked-wrap.size-md{ --tf-size: 1.05rem; --tf-heading: 1.05rem; --tf-gap: 12px; }
.trade-friends.size-lg, .tf-ranked-wrap.size-lg{ --tf-size: 1.15rem; --tf-heading: 1.15rem; --tf-gap: 14px; }

.trade-friends, .tf-ranked-wrap{ font: inherit; color: inherit; }
.trade-friends h3, .tf-ranked-wrap h3{
  margin:0 0 14px; font-weight:800; letter-spacing:.02em; font-size: var(--tf-heading);
  text-transform: uppercase;
  display:flex; align-items:center; gap:10px;
}
.trade-friends h3::before, .tf-ranked-wrap h3::before{
  content:""; width:10px; height:10px; border-radius:2px;
  background: var(--tf-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--tf-accent), transparent 75%);
}

/* ===== Pills (chips) ===== */
.trade-friends{ margin:24px 0; padding:20px; border-radius:14px; background:transparent; }
.friends{ display:flex; flex-wrap:wrap; gap: var(--tf-gap); list-style:none; margin:0; padding:0; }
.friend-pill {
    display: inline-flex
;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--tf-size);
    color: inherit;
    background: 
 color-mix(in srgb, #000000 12%, #00000094);
    padding: 10px 14px;
    border-radius: 9px;
    border: 1px solid
 color-mix(in srgb, var(--tf-accent), transparent 75%);
    backdrop-filter: saturate(1.2) blur(0px);
    transition: transform .08s 
ease, background .2s 
ease, border-color .2s 
ease;
}
.friend-pill:hover{ transform:translateY(-1px); background:color-mix(in srgb, var(--tf-accent) 18%, transparent); }
.friend-pill .ico{ width:18px; height:18px; border-radius:4px; background:#cfd2d6 center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); display:inline-block }

/* ===== Ranked (numbered) ===== */
.tf-ranked-wrap{ margin:24px 0; }
.tf-cols{ display:grid; grid-template-columns:repeat(var(--tf-cols,3), 1fr); gap: 28px; }
.tf-cols-1{ --tf-cols:1 } .tf-cols-2{ --tf-cols:2 } .tf-cols-3{ --tf-cols:3 } .tf-cols-4{ --tf-cols:4 } .tf-cols-5{ --tf-cols:5 }

/* Minimal variant: use list marker with accent */
.tf-ranked-wrap.variant-minimal .tf-ranked{ margin:0; padding:0 0 0 2.2em; list-style:decimal-leading-zero; }
.tf-ranked-wrap.variant-minimal .tf-ranked li{ margin:.5rem 0; font-size: var(--tf-size); }
.tf-ranked-wrap.variant-minimal .tf-ranked li::marker{ font-weight:800; color:var(--tf-accent); font-variant-numeric: tabular-nums; }
.tf-ranked-wrap.variant-minimal .tf-link{ color:inherit; text-decoration:none; border-bottom:1px solid transparent;
  text-underline-offset: 3px; }
.tf-ranked-wrap.variant-minimal .tf-link:hover{ text-decoration:underline; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--tf-accent), transparent 20%); }

/* Badge variant: custom number chips */
.tf-ranked-wrap.variant-badge .tf-ranked{ margin:0; padding:0; list-style:none; }
.tf-ranked-wrap.variant-badge .tf-ranked li{
  display:flex; align-items:center; gap:12px; margin:.45rem 0; font-size: var(--tf-size);
}
.tf-ranked-wrap.variant-badge .rk-num{
  flex:0 0 auto; width:34px; height:34px; display:inline-grid; place-items:center;
  font-weight:800; font-variant-numeric: tabular-nums;
  border-radius:10px;
  background: color-mix(in srgb, var(--tf-accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--tf-accent), transparent 70%);
  color: inherit;
}
.tf-ranked-wrap.variant-badge .tf-link{ color:inherit; text-decoration:none; }
.tf-ranked-wrap.variant-badge .tf-link:hover{ text-decoration:underline; text-decoration-thickness:2px; }

/* Responsive tweaks */
@media (max-width: 1024px){ .tf-cols{ gap:22px } }
@media (max-width: 768px){
  .tf-cols{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .tf-cols{ grid-template-columns: 1fr; }
}