/* Trending Tags Page (v3.0.0)
   Scope prefix: .ttx-
   Design: Dark-first with graceful light fallback
   ------------------------------------------------------------------ */

/* Root + Theming Tokens (fallbacks if global vars absent) */
.ttx-page-root {
  --ttx-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --ttx-radius-xs: 4px;
  --ttx-radius-sm: 6px;
  --ttx-radius: 10px;
  --ttx-radius-lg: 18px;
  --ttx-radius-pill: 999px;

  --ttx-fg: var(--cl-text, #e2e8f0);
  --ttx-fg-sub: var(--cl-text-sub, #94a3b8);
  --ttx-fg-dim: var(--cl-text-dim, #64748b);

  --ttx-bg: var(--z-bg-deep);
  --ttx-bg-alt: #141b24;
  --ttx-bg-soft: #1b2633;
  --ttx-bg-glass: rgba(255,255,255,0.04);
  --ttx-bg-glass-alt: rgba(255,255,255,0.06);

  --ttx-border: rgba(255,255,255,0.08);
  --ttx-border-strong: rgba(255,255,255,0.16);

  --ttx-gradient-hero: radial-gradient(circle at 30% 25%, rgba(255,187,51,.15), transparent 55%), radial-gradient(circle at 80% 60%, rgba(56,189,248,.12), transparent 65%), linear-gradient(145deg,var(--z-bg),var(--z-bg-deep) 60%);
  --ttx-grid-line: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.05) 1px, transparent 1px);

  --ttx-accent: var(--z-accent-light);
  --ttx-accent-rgb: 255,187,51;
  --ttx-accent-soft: rgba(255,187,51,0.12);
  --ttx-accent-grad: linear-gradient(90deg,var(--z-accent-light),#ffcf66);

  --ttx-focus: 0 0 0 2px rgba(255,187,51,.5), 0 0 0 5px rgba(255,187,51,.25);

  --ttx-shadow-sm: 0 2px 4px -2px rgba(0,0,0,.4), 0 4px 14px -4px rgba(0,0,0,.35);
  --ttx-shadow: 0 4px 12px -3px rgba(0,0,0,.55), 0 10px 30px -6px rgba(0,0,0,.45);
  --ttx-shadow-glow: 0 0 0 1px rgba(255,187,51,.35), 0 0 18px -2px rgba(255,187,51,.55);

  --ttx-speed: .6s;
  --ttx-speed-fast: .3s;
  --ttx-ease: cubic-bezier(.65,.05,.36,1);
  --ttx-ease-out: cubic-bezier(.16,.84,.44,1);

  font-family: var(--ttx-font-sans);
  color: var(--ttx-fg);
  -webkit-font-smoothing: antialiased;
}

[data-theme="light"] .ttx-page-root {
  --ttx-bg: var(--z-text);
  --ttx-bg-alt: #ffffff;
  --ttx-bg-soft: var(--z-text);
  --ttx-bg-glass: rgba(0,0,0,0.04);
  --ttx-bg-glass-alt: rgba(0,0,0,0.06);
  --ttx-border: rgba(0,0,0,0.08);
  --ttx-border-strong: rgba(0,0,0,0.18);
  --ttx-fg: var(--z-surface-1);
  --ttx-fg-sub: var(--z-text-muted);
  --ttx-fg-dim: var(--z-text-muted);
  --ttx-gradient-hero: radial-gradient(circle at 25% 25%, rgba(255,187,51,.25), transparent 55%), linear-gradient(145deg,#ffffff,var(--z-text) 60%);
  --ttx-grid-line: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg,rgba(0,0,0,0.05) 1px, transparent 1px);
  --ttx-shadow-sm: 0 2px 4px -1px rgba(0,0,0,.12),0 6px 14px -6px rgba(0,0,0,.14);
  --ttx-shadow: 0 6px 18px -5px rgba(0,0,0,.18),0 14px 36px -10px rgba(0,0,0,.16);
  --ttx-shadow-glow: 0 0 0 1px rgba(255,187,51,.35),0 0 18px -2px rgba(255,187,51,.35);
}

/* Utility */
.ttx-container {
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:0 1.25rem;
  position:relative;
}

/* HERO ------------------------------------------------------------------ */
.ttx-hero {
  position:relative;
  padding:4.5rem 0 3.4rem;
  isolation:isolate;
  overflow:hidden;
  background:var(--ttx-bg);
  background-image:var(--ttx-gradient-hero);
}

.ttx-hero__bg {
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
}

.ttx-hero__layer {
  position:absolute;
  inset:0;
  opacity:.55;
}
.ttx-hero__layer--grid {
  background-image:var(--ttx-grid-line);
  background-size:140px 140px;
  mask:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.35));
}
.ttx-hero__layer--gradient {
  background:radial-gradient(circle at 70% 65%,rgba(56,189,248,.25),transparent 60%);
  mix-blend-mode:overlay;
}
.ttx-hero__particles::before,
.ttx-hero__particles::after{
  content:"";
  position:absolute;
  width:480px;
  height:480px;
  top:-120px;
  left:-120px;
  background:radial-gradient(circle at 30% 30%,rgba(255,187,51,.25),transparent 70%);
  filter:blur(40px);
  animation:ttxFloat 18s linear infinite;
}
.ttx-hero__particles::after{
  top:auto;
  bottom:-160px;
  left:auto;
  right:-160px;
  background:radial-gradient(circle at 30% 30%,rgba(56,189,248,.18),transparent 70%);
  animation-duration:22s;
}

@keyframes ttxFloat {
  0%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(60px,40px,0) scale(1.08);}
  100%{transform:translate3d(0,0,0) scale(1);}
}

.ttx-hero__inner {
  display:flex;
  flex-direction:column;
  gap:2.6rem;
}

.ttx-hero__head {
  max-width:760px;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

.ttx-hero__badge {
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  background:linear-gradient(135deg,var(--ttx-bg-glass),var(--ttx-bg-glass-alt));
  padding:.55rem .95rem .55rem .7rem;
  border:1px solid var(--ttx-border);
  border-radius:var(--ttx-radius-pill);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.ttx-hero__badge-icon {
  font-size:.95rem;
  color:var(--ttx-accent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ttx-hero__badge-text { color:var(--ttx-fg-dim); }
.ttx-hero__badge-pulse {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  animation:ttxShimmer 3.6s linear infinite;
  opacity:.65;
}
@keyframes ttxShimmer {
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}

.ttx-hero__title {
  margin:0;
  font-size:clamp(2.35rem,4.5vw,3.6rem);
  line-height:1.05;
  font-weight:800;
  letter-spacing:-1px;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  background:linear-gradient(90deg,#fff,var(--z-text));
  -webkit-background-clip:text;
  color:transparent;
}
[data-theme="light"] .ttx-hero__title {
  background:linear-gradient(90deg,var(--z-surface-1),var(--z-surface-3));
  -webkit-background-clip:text;
}
.ttx-hero__title-accent {
  background:var(--ttx-accent-grad);
  -webkit-background-clip:text;
  color:transparent;
  position:relative;
}

.ttx-hero__subtitle {
  margin:0;
  font-size:1.02rem;
  line-height:1.55;
  color:var(--ttx-fg-sub);
  font-weight:500;
  max-width:680px;
}

/* Hero stats */
.ttx-hero__stats {
  display:flex;
  flex-wrap:wrap;
  gap:1.1rem;
}
.ttx-stat {
  display:flex;
  gap:.85rem;
  align-items:center;
  background:linear-gradient(135deg,var(--ttx-bg-glass),var(--ttx-bg-glass-alt));
  border:1px solid var(--ttx-border);
  padding:.85rem 1.05rem;
  border-radius:var(--ttx-radius-lg);
  min-width:180px;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.ttx-stat::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(255,187,51,.12),transparent 65%);
  opacity:0;
  transition:opacity var(--ttx-speed-fast) var(--ttx-ease-out);
}
.ttx-stat:hover::before { opacity:1; }
.ttx-stat__icon {
  width:42px;height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(255,187,51,.18),rgba(255,187,51,.05));
  color:var(--ttx-accent);
  font-size:1.05rem;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.5);
}
[data-theme="light"] .ttx-stat__icon {
  background:linear-gradient(135deg,rgba(255,187,51,.22),rgba(255,187,51,.08));
}
.ttx-stat__body {
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.ttx-stat__value {
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--ttx-fg);
}
.ttx-stat__label {
  font-size:.58rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--ttx-fg-dim);
}

/* CONTROLS ------------------------------------------------------------------ */
.ttx-controls {
  background:linear-gradient(180deg,var(--ttx-bg) 0%, var(--ttx-bg-alt) 70%);
  padding:1.4rem 0 1.25rem;
  border-top:1px solid var(--ttx-border);
  border-bottom:1px solid var(--ttx-border);
  position:relative;
}

.ttx-controls__grid {
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:1.5rem;
  align-items:start;
}

@media (max-width: 920px) {
  .ttx-controls__grid {
    grid-template-columns:1fr;
  }
}

/* Search */
.ttx-search {
  position:relative;
  display:flex;
  align-items:center;
  background:linear-gradient(135deg,var(--ttx-bg-glass),var(--ttx-bg-glass-alt));
  border:1px solid var(--ttx-border);
  border-radius:var(--ttx-radius-lg);
  padding:.55rem .75rem .55rem 2.65rem;
  flex:1;
  min-height:56px;
  transition:border-color var(--ttx-speed-fast) var(--ttx-ease-out), box-shadow var(--ttx-speed-fast) var(--ttx-ease-out);
  backdrop-filter:blur(10px);
}
.ttx-search:focus-within {
  border-color:rgba(var(--ttx-accent-rgb),.6);
  box-shadow:var(--ttx-shadow-glow);
}
.ttx-search__label {
  position:absolute;
  left:.95rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--ttx-fg-dim);
  display:flex;
  align-items:center;
  font-size:.95rem;
  pointer-events:none;
}
.ttx-search__input {
  background:transparent;
  border:none;
  outline:none;
  font:600 .9rem/1 var(--ttx-font-sans);
  letter-spacing:.4px;
  color:var(--ttx-fg);
  width:100%;
  padding:.45rem 0;
}
.ttx-search__input::placeholder { color:var(--ttx-fg-dim); font-weight:500; opacity:.65; }
.ttx-search__clear {
  background:transparent;
  border:1px solid var(--ttx-border);
  color:var(--ttx-fg-dim);
  width:34px;height:34px;
  border-radius:var(--ttx-radius-sm);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:.8rem;
  transition:.35s var(--ttx-ease-out);
}
.ttx-search__clear:hover {
  color:var(--ttx-fg);
  border-color:var(--ttx-accent);
  box-shadow:0 0 0 1px rgba(var(--ttx-accent-rgb),.35);
}
.ttx-search__assist {
  position:absolute;
  left:0;
  right:0;
  top:100%;
  padding:.45rem 1rem .65rem;
  font-size:.62rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ttx-fg-dim);
  display:none;
}
.ttx-search[data-active="assist"] .ttx-search__assist { display:block; }

/* Sort Buttons */
.ttx-sort {
  display:flex;
  gap:.55rem;
  background:linear-gradient(135deg,var(--ttx-bg-glass),var(--ttx-bg-glass-alt));
  border:1px solid var(--ttx-border);
  padding:.55rem;
  border-radius:var(--ttx-radius-lg);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.ttx-sort__btn {
  position:relative;
  background:var(--ttx-bg-soft);
  border:1px solid var(--ttx-border);
  color:var(--ttx-fg-dim);
  font:600 .62rem/1 var(--ttx-font-sans);
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:.85rem .95rem;
  border-radius:var(--ttx-radius-sm);
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  cursor:pointer;
  transition:.45s var(--ttx-ease-out);
  min-width:130px;
}
.ttx-sort__btn i { font-size:.85rem; color:var(--ttx-accent); opacity:.85; transition:.45s; }
.ttx-sort__btn.is-active,
.ttx-sort__btn:hover {
  background:linear-gradient(135deg,var(--ttx-accent-soft),rgba(var(--ttx-accent-rgb),.05));
  color:var(--ttx-fg);
  border-color:rgba(var(--ttx-accent-rgb),.55);
  box-shadow:0 0 0 1px rgba(var(--ttx-accent-rgb),.4), 0 6px 16px -4px rgba(var(--ttx-accent-rgb),.35);
}
.ttx-sort__btn.is-active i,
.ttx-sort__btn:hover i { filter:brightness(1.2); }

/* View selector */
.ttx-view {
  display:inline-flex;
  gap:.5rem;
  background:linear-gradient(135deg,var(--ttx-bg-glass),var(--ttx-bg-glass-alt));
  border:1px solid var(--ttx-border);
  padding:.45rem;
  border-radius:var(--ttx-radius-lg);
  height:56px;
  align-items:center;
}
.ttx-view__btn {
  width:42px;height:42px;
  border-radius:var(--ttx-radius-sm);
  background:var(--ttx-bg-soft);
  border:1px solid var(--ttx-border);
  color:var(--ttx-fg-dim);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:.9rem;
  transition:.4s var(--ttx-ease-out);
  position:relative;
}
.ttx-view__btn.is-active,
.ttx-view__btn:hover {
  color:var(--ttx-fg);
  background:linear-gradient(135deg,var(--ttx-accent-soft),rgba(var(--ttx-accent-rgb),.08));
  border-color:rgba(var(--ttx-accent-rgb),.55);
  box-shadow:0 0 0 1px rgba(var(--ttx-accent-rgb),.45);
}

/* TAG SECTION ------------------------------------------------------------------ */
.ttx-tags {
  background:var(--ttx-bg-alt);
  padding:2.9rem 0 3.4rem;
  position:relative;
}

.ttx-section__title {
  margin:0 0 1.6rem;
  font:700 .72rem/1 var(--ttx-font-sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  color:var(--ttx-fg-dim);
  position:relative;
}
.ttx-section__icon {
  width:36px;height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:.9rem;
  background:linear-gradient(135deg,var(--ttx-bg-glass),var(--ttx-bg-glass-alt));
  border:1px solid var(--ttx-border);
  color:var(--ttx-accent);
  box-shadow:var(--ttx-shadow-sm);
}

.ttx-tag-grid {
  display:grid;
  gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  align-items:stretch;
  position:relative;
  transition:opacity .4s var(--ttx-ease-out);
}
.ttx-tag-grid[data-state="filtering"] { opacity:.4; pointer-events:none; }

.ttx-tag-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:190px;
  background:linear-gradient(145deg,var(--ttx-bg-soft),var(--ttx-bg));
  border:1px solid var(--ttx-border);
  border-radius:var(--ttx-radius-lg);
  overflow:hidden;
  padding:0;
  isolation:isolate;
  transition:.6s var(--ttx-ease);
  cursor:pointer;
  box-shadow:var(--ttx-shadow-sm);
}

.ttx-tag-card__link {
  display:flex;
  flex-direction:column;
  gap:1rem;
  text-decoration:none;
  color:inherit;
  padding:1rem 1rem 1.15rem;
  flex:1;
  position:relative;
  z-index:2;
}

.ttx-tag-card__top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}

.ttx-tag-card__rank {
  display:flex;
  align-items:center;
  gap:.45rem;
  font:600 .65rem/1 var(--ttx-font-sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  background:linear-gradient(135deg,var(--ttx-bg-glass),var(--ttx-bg-glass-alt));
  padding:.55rem .75rem;
  border-radius:var(--ttx-radius-pill);
  border:1px solid var(--ttx-border);
  position:relative;
  overflow:hidden;
}
.ttx-tag-card--featured .ttx-tag-card__rank {
  border-color:rgba(var(--ttx-accent-rgb),.55);
  background:linear-gradient(135deg,rgba(var(--ttx-accent-rgb),.25),rgba(var(--ttx-accent-rgb),.08));
  color:var(--ttx-accent);
  box-shadow:0 0 0 1px rgba(var(--ttx-accent-rgb),.4);
}
.ttx-tag-card__rank-icon {
  font-size:.75rem;
  color:var(--ttx-accent);
  filter:drop-shadow(0 2px 6px rgba(var(--ttx-accent-rgb),.4));
}

.ttx-tag-card__bookmark {
  background:var(--ttx-bg-glass);
  border:1px solid var(--ttx-border);
  width:38px;height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--ttx-fg-dim);
  cursor:pointer;
  transition:.45s var(--ttx-ease-out);
  position:relative;
  z-index:3;
}
.ttx-tag-card__bookmark:hover {
  color:var(--ttx-fg);
  border-color:var(--ttx-accent);
  background:linear-gradient(135deg,var(--ttx-accent-soft),rgba(var(--ttx-accent-rgb),.06));
  box-shadow:0 0 0 1px rgba(var(--ttx-accent-rgb),.45);
}
.ttx-tag-card__bookmark[aria-pressed="true"] {
  color:var(--ttx-accent);
  background:linear-gradient(135deg,var(--ttx-accent-soft),rgba(var(--ttx-accent-rgb),.12));
  border-color:rgba(var(--ttx-accent-rgb),.6);
}

.ttx-tag-card__body {
  display:flex;
  flex-direction:column;
  gap:.85rem;
  margin-top:auto;
}

.ttx-tag-card__name {
  margin:0;
  font:700 .95rem/1.2 var(--ttx-font-sans);
  letter-spacing:.3px;
  background:linear-gradient(90deg,#ffffff,#dbe7f4);
  -webkit-background-clip:text;
  color:transparent;
  display:flex;
  align-items:center;
  gap:.3rem;
}
[data-theme="light"] .ttx-tag-card__name {
  background:linear-gradient(90deg,var(--z-surface-1),var(--z-surface-3));
  -webkit-background-clip:text;
}
.ttx-tag-card__hash {
  font-weight:600;
  opacity:.65;
  color:var(--ttx-fg-dim);
  background:transparent;
  -webkit-background-clip:initial;
  color:var(--ttx-fg-dim);
}

.ttx-tag-card__metrics {
  display:flex;
  flex-wrap:wrap;
  gap:.65rem .85rem;
}
.ttx-tag-metric {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font:600 .55rem/1 var(--ttx-font-sans);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ttx-fg-dim);
  background:linear-gradient(135deg,var(--ttx-bg-glass),var(--ttx-bg-glass-alt));
  padding:.55rem .7rem .5rem;
  border-radius:var(--ttx-radius-pill);
  border:1px solid var(--ttx-border);
  position:relative;
  overflow:hidden;
}
.ttx-tag-metric i {
  font-size:.75rem;
  color:var(--ttx-accent);
  opacity:.85;
}
.ttx-tag-metric__value {
  font-weight:700;
  color:var(--ttx-fg);
  letter-spacing:.5px;
}
.ttx-tag-metric__label {
  font-weight:600;
  opacity:.7;
}
.ttx-tag-metric--time time { white-space:nowrap; }

/* Card FX layers */
.ttx-tag-card__fx {
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.ttx-tag-card__glow {
  position:absolute;
  width:240%;
  height:240%;
  left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg, rgba(var(--ttx-accent-rgb),.0), rgba(var(--ttx-accent-rgb),.25), rgba(var(--ttx-accent-rgb),.0) 70%);
  mix-blend-mode:overlay;
  opacity:0;
  transition:opacity .65s var(--ttx-ease);
}
.ttx-tag-card__shine {
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 15%, rgba(var(--ttx-accent-rgb),.35), transparent 55%);
  mix-blend-mode:overlay;
  opacity:0;
  transition:opacity .65s var(--ttx-ease);
  filter:blur(20px);
}

/* Color variants (hues tinted) */
.ttx-tag-card--blue { --ttx-hue:210; }
.ttx-tag-card--purple { --ttx-hue:265; }
.ttx-tag-card--emerald { --ttx-hue:155; }
.ttx-tag-card--orange { --ttx-hue:30; }
.ttx-tag-card--rose { --ttx-hue:340; }
.ttx-tag-card--indigo { --ttx-hue:230; }
.ttx-tag-card--teal { --ttx-hue:175; }
.ttx-tag-card--amber { --ttx-hue:44; }

.ttx-tag-card[class*="ttx-tag-card--"] {
  background:
    linear-gradient(145deg,
      hsl(var(--ttx-hue) 55% 18% / .55),
      hsl(var(--ttx-hue) 55% 10% / .4) 50%,
      var(--ttx-bg) 90%);
  border-color:hsl(var(--ttx-hue) 60% 65% / .25);
}
[data-theme="light"] .ttx-tag-card[class*="ttx-tag-card--"] {
  background:
    linear-gradient(145deg,
      hsl(var(--ttx-hue) 75% 94% / .9),
      hsl(var(--ttx-hue) 75% 88% / .85) 55%,
      #fff 100%);
  border-color:hsl(var(--ttx-hue) 65% 55% / .35);
}

.ttx-tag-card:hover,
.ttx-tag-card:focus-within {
  transform:translateY(-6px);
  border-color:rgba(var(--ttx-accent-rgb),.55);
  box-shadow:var(--ttx-shadow),0 0 0 1px rgba(var(--ttx-accent-rgb),.35),0 10px 40px -8px rgba(var(--ttx-accent-rgb),.4);
}
.ttx-tag-card:hover .ttx-tag-card__glow,
.ttx-tag-card:focus-within .ttx-tag-card__glow,
.ttx-tag-card:hover .ttx-tag-card__shine,
.ttx-tag-card:focus-within .ttx-tag-card__shine {
  opacity:1;
}

.ttx-tag-card:focus-within {
  outline:none;
  box-shadow:var(--ttx-shadow-glow),0 8px 24px -6px rgba(var(--ttx-accent-rgb),.4);
}

/* EMPTY STATES ------------------------------------------------------------------ */
.ttx-empty {
  margin:3.2rem auto 0;
  max-width:520px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.15rem;
  background:linear-gradient(145deg,var(--ttx-bg-soft),var(--ttx-bg));
  padding:2.4rem 2rem 2.6rem;
  border:1px dashed var(--ttx-border);
  border-radius:28px;
  position:relative;
  overflow:hidden;
}
.ttx-empty::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 65% 15%,rgba(var(--ttx-accent-rgb),.25),transparent 60%);
  opacity:.35;
  pointer-events:none;
}
.ttx-empty__icon {
  width:68px;height:68px;
  border-radius:22px;
  background:linear-gradient(135deg,var(--ttx-accent-soft),rgba(var(--ttx-accent-rgb),.08));
  border:1px solid rgba(var(--ttx-accent-rgb),.35);
  display:grid;
  place-items:center;
  color:var(--ttx-accent);
  font-size:1.65rem;
  box-shadow:0 4px 18px -6px rgba(var(--ttx-accent-rgb),.45);
}
.ttx-empty__title {
  margin:0;
  font:700 1.35rem/1.2 var(--ttx-font-sans);
  letter-spacing:-.5px;
  background:var(--ttx-accent-grad);
  -webkit-background-clip:text;
  color:transparent;
}
.ttx-empty__text {
  margin:0;
  font-size:.9rem;
  line-height:1.55;
  color:var(--ttx-fg-sub);
}
.ttx-empty__action {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  background:linear-gradient(135deg,var(--ttx-accent-grad),#ffa726);
  border:none;
  color:#1b2130;
  font:600 .75rem/1 var(--ttx-font-sans);
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:.95rem 1.25rem;
  border-radius:var(--ttx-radius-pill);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:.55s var(--ttx-ease-out);
  box-shadow:0 6px 20px -6px rgba(var(--ttx-accent-rgb),.55);
}
.ttx-empty__action:hover {
  transform:translateY(-4px);
  box-shadow:0 10px 26px -6px rgba(var(--ttx-accent-rgb),.65),0 0 0 1px rgba(var(--ttx-accent-rgb),.6);
}
.ttx-empty__action:active { transform:translateY(-1px); }

/* RELATED COLLECTIONS ------------------------------------------------------------------ */
.ttx-related {
  background:var(--ttx-bg);
  padding:2.9rem 0 3.7rem;
  border-top:1px solid var(--ttx-border);
  position:relative;
}

.ttx-related__head {
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin:0 0 1.4rem;
}
.ttx-related__subtitle {
  margin:0;
  font-size:.9rem;
  color:var(--ttx-fg-sub);
  max-width:700px;
  line-height:1.5;
  font-weight:500;
}

.ttx-related-grid {
  display:grid;
  gap:1.15rem;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  min-height:180px;
  position:relative;
}
.ttx-related__skeleton {
  height:180px;
  border-radius:20px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.07),rgba(255,255,255,.04));
  animation:ttxSkeleton 2.4s linear infinite;
  position:relative;
  overflow:hidden;
  border:1px solid var(--ttx-border);
}
@keyframes ttxSkeleton {
  0% { background-position:-260px 0; }
  100% { background-position:260px 0; }
}

.ttx-related__footer {
  margin:2.2rem 0 0;
  display:flex;
  justify-content:center;
}
.ttx-related__more {
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  padding:1rem 1.4rem;
  font:600 .7rem/1 var(--ttx-font-sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  background:linear-gradient(135deg,var(--ttx-accent-soft),rgba(var(--ttx-accent-rgb),.08));
  color:var(--ttx-accent);
  border:1px solid rgba(var(--ttx-accent-rgb),.5);
  border-radius:var(--ttx-radius-pill);
  position:relative;
  overflow:hidden;
  transition:.55s var(--ttx-ease-out);
  box-shadow:0 4px 18px -6px rgba(var(--ttx-accent-rgb),.45);
}
.ttx-related__more i { font-size:.85rem; transition:transform .55s var(--ttx-ease-out); }
.ttx-related__more:hover {
  transform:translateY(-4px);
  box-shadow:0 10px 28px -8px rgba(var(--ttx-accent-rgb),.6),0 0 0 1px rgba(var(--ttx-accent-rgb),.55);
}
.ttx-related__more:hover i { transform:translateX(4px); }

/* INTERACTIONS ------------------------------------------------------------------ */
.ttx-tag-card,
.ttx-sort__btn,
.ttx-view__btn,
.ttx-empty__action,
.ttx-related__more,
.ttx-tag-card__bookmark {
  -webkit-tap-highlight-color:transparent;
}

.ttx-tag-card:active { transform:translateY(-2px); }
.ttx-tag-card__bookmark:active,
.ttx-view__btn:active,
.ttx-sort__btn:active {
  transform:translateY(1px);
}

/* ACCESSIBILITY / FOCUS */
.ttx-tag-card__bookmark:focus-visible,
.ttx-view__btn:focus-visible,
.ttx-sort__btn:focus-visible,
.ttx-empty__action:focus-visible,
.ttx-related__more:focus-visible,
.ttx-search__clear:focus-visible {
  outline:2px solid rgba(var(--ttx-accent-rgb),.7);
  outline-offset:2px;
  box-shadow:var(--ttx-shadow-glow);
}

/* RESPONSIVE ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .ttx-hero { padding:4rem 0 3rem; }
  .ttx-hero__stats { gap:.85rem; }
  .ttx-tag-card { min-height:180px; }
}

@media (max-width: 820px) {
  .ttx-hero__title { font-size:clamp(2.1rem,6vw,3.1rem); }
  .ttx-hero__subtitle { font-size:.98rem; }
  .ttx-stat { min-width:160px; }
  .ttx-tag-grid { gap:.9rem; }
}

@media (max-width: 640px) {
  .ttx-hero { padding:3.4rem 0 2.6rem; }
  .ttx-controls { padding:1rem 0 1rem; }
  .ttx-controls__grid { gap:1rem; }
  .ttx-tag-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
  .ttx-tag-card { min-height:170px; }
  .ttx-tag-card__name { font-size:.86rem; }
  .ttx-stat { flex:1 1 calc(50% - .85rem); }
  .ttx-view { height:auto; }
}

@media (max-width: 460px) {
  .ttx-tag-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .ttx-sort { flex-wrap:wrap; }
  .ttx-sort__btn { flex:1 1 calc(50% - .6rem); min-width:unset; }
  .ttx-view { width:100%; justify-content:space-between; }
  .ttx-empty { padding:2.2rem 1.4rem 2.4rem; }
  .ttx-related-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
}

/* REDUCED MOTION -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ttx-tag-card,
  .ttx-sort__btn,
  .ttx-view__btn,
  .ttx-empty__action,
  .ttx-related__more,
  .ttx-hero__badge-pulse,
  .ttx-tag-card__glow,
  .ttx-tag-card__shine {
    animation:none !important;
    transition:none !important;
  }
}

/* HIGH CONTRAST SUPPORT ------------------------------------------------------- */
@media (prefers-contrast: more) {
  .ttx-tag-card,
  .ttx-stat,
  .ttx-sort,
  .ttx-view,
  .ttx-search {
    border-color:var(--ttx-border-strong);
  }
  .ttx-tag-card__bookmark,
  .ttx-tag-metric {
    border-color:var(--ttx-border-strong);
  }
}

/* PRINT ----------------------------------------------------------------------- */
@media print {
  .ttx-hero__particles,
  .ttx-tag-card__fx,
  .ttx-sort,
  .ttx-view,
  .ttx-related__skeleton { display:none !important; }
  .ttx-tag-card,
  .ttx-stat { box-shadow:none !important; }
}