/* ============================================================
   TIPSTRACKER · DESIGN SYSTEM
   Tech / radar-tracking aesthetic. Drop into WordPress (Elementor
   → Site Settings → Custom CSS) or load as a stylesheet.
   ============================================================ */

/* ---------- 1. FONTS ---------- */


/* ---------- 2. TOKENS ---------- */
:root {
  /* Brand neon */
  --tt-green:          #2EE89F;
  --tt-green-bright:   #5CFFC0;
  --tt-green-deep:     #14A36B;
  --tt-green-50:       rgba(46, 232, 159, 0.50);
  --tt-green-30:       rgba(46, 232, 159, 0.30);
  --tt-green-15:       rgba(46, 232, 159, 0.15);
  --tt-green-08:       rgba(46, 232, 159, 0.08);
  --tt-green-04:       rgba(46, 232, 159, 0.04);

  /* Surfaces (true black-leaning) */
  --tt-bg:             #050706;
  --tt-bg-deep:        #000000;
  --tt-surface:        #0B100D;
  --tt-surface-2:      #121915;
  --tt-surface-3:      #1A231E;

  /* Borders */
  --tt-border:         rgba(232, 245, 238, 0.06);
  --tt-border-strong:  rgba(232, 245, 238, 0.14);
  --tt-border-green:   rgba(46, 232, 159, 0.28);
  --tt-border-green-hi:rgba(46, 232, 159, 0.6);

  /* Text */
  --tt-text:           #E8F5EE;
  --tt-text-muted:     #8A9A91;
  --tt-text-dim:       #4F5C57;

  /* Semantic */
  --tt-win:            #2EE89F;
  --tt-loss:           #FF4D6D;
  --tt-push:           #FFD23D;
  --tt-info:           #5CC8FF;

  /* Typography */
  --tt-font-display:   'Space Grotesk', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif;
  --tt-font-body:      'Space Grotesk', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif;
  --tt-font-mono:      'JetBrains Mono', ui-monospace, monospace;

  /* Radii */
  --tt-r-sm: 6px;
  --tt-r-md: 10px;
  --tt-r-lg: 16px;
  --tt-r-xl: 22px;
  --tt-r-full: 999px;

  /* Glow / shadow */
  --tt-glow-sm: 0 0 14px rgba(46,232,159,0.35);
  --tt-glow-md: 0 0 28px rgba(46,232,159,0.40), 0 0 60px rgba(46,232,159,0.18);
  --tt-glow-lg: 0 0 50px rgba(46,232,159,0.45), 0 0 110px rgba(46,232,159,0.22);
  --tt-shadow-card: 0 1px 0 rgba(46,232,159,0.05) inset, 0 24px 60px -20px rgba(0,0,0,0.7);

  /* Spacing */
  --tt-s-1: 4px;  --tt-s-2: 8px;  --tt-s-3: 12px; --tt-s-4: 16px;
  --tt-s-5: 24px; --tt-s-6: 32px; --tt-s-7: 48px; --tt-s-8: 64px; --tt-s-9: 96px;

  /* Container */
  --tt-container: 1200px;
}

/* ---------- 3. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--tt-bg);
  color: var(--tt-text);
  font-family: var(--tt-font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--tt-green); color: #001a10; }

/* ---------- 4. TYPOGRAPHY ---------- */
.tt-display-1, .tt-display-2, .tt-h1, .tt-h2, .tt-h3, .tt-h4, .tt-eyebrow {
  font-family: var(--tt-font-display);
  color: var(--tt-text);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
.tt-display-1 { font-size: clamp(56px, 8vw, 104px); font-weight: 600; letter-spacing: -0.04em; }
.tt-display-2 { font-size: clamp(44px, 6vw, 72px); font-weight: 600; letter-spacing: -0.035em; }
.tt-h1 { font-size: clamp(36px, 4.4vw, 56px); font-weight: 600; letter-spacing: -0.03em; }
.tt-h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; letter-spacing: -0.025em; }
.tt-h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.tt-h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }

.tt-eyebrow {
  font-family: var(--tt-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-green);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.tt-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tt-green);
  box-shadow: 0 0 10px var(--tt-green);
  animation: tt-blip 1.6s ease-in-out infinite;
}

.tt-body { font-size: 16px; color: var(--tt-text-muted); line-height: 1.6; }
.tt-body-lg { font-size: 18px; color: var(--tt-text-muted); line-height: 1.6; }
.tt-small { font-size: 13px; color: var(--tt-text-muted); }
.tt-mono { font-family: var(--tt-font-mono); font-feature-settings: "ss01","cv11"; }

.tt-text-green   { color: var(--tt-green); }
.tt-text-muted   { color: var(--tt-text-muted); }
.tt-text-dim     { color: var(--tt-text-dim); }
.tt-text-win     { color: var(--tt-win); }
.tt-text-loss    { color: var(--tt-loss); }
.tt-text-push    { color: var(--tt-push); }

/* ---------- 5. LAYOUT HELPERS ---------- */
.tt-container { max-width: var(--tt-container); margin: 0 auto; padding: 0 24px; }
.tt-stack > * + * { margin-top: var(--tt-s-4); }
.tt-row { display: flex; align-items: center; gap: var(--tt-s-3); }

/* ---------- 6. BUTTONS ---------- */
.tt-btn {
  --_bg: var(--tt-green);
  --_fg: #03110A;
  --_bd: var(--tt-green);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--tt-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: var(--tt-r-md);
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
  isolation: isolate;
}
.tt-btn:hover {
  box-shadow: var(--tt-glow-md);
  transform: translateY(-1px);
}
.tt-btn:active { transform: translateY(0); }
.tt-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46,232,159,0.25), var(--tt-glow-sm);
}
.tt-btn svg { width: 16px; height: 16px; }

.tt-btn--outline {
  --_bg: transparent;
  --_fg: var(--tt-green);
  --_bd: var(--tt-border-green);
}
.tt-btn--outline:hover {
  --_bg: var(--tt-green-08);
  --_bd: var(--tt-green);
}

.tt-btn--ghost {
  --_bg: transparent;
  --_fg: var(--tt-text);
  --_bd: transparent;
}
.tt-btn--ghost:hover {
  --_bg: var(--tt-green-08);
  --_fg: var(--tt-green);
  box-shadow: none;
}

.tt-btn--sm { padding: 9px 14px; font-size: 12px; border-radius: var(--tt-r-sm); }
.tt-btn--lg { padding: 18px 28px; font-size: 15px; }

/* Border-sweep animation on hover (sci-fi charge) */
.tt-btn--charge { overflow: hidden; }
.tt-btn--charge::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--_a, 0deg),
    transparent 0deg, var(--tt-green) 40deg, transparent 80deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
  animation: tt-spin 2.4s linear infinite;
}
.tt-btn--charge:hover::before { opacity: 1; }

/* ---------- 7. FORMS ---------- */
.tt-input, .tt-select, .tt-textarea {
  width: 100%;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-md);
  padding: 13px 16px;
  font-family: var(--tt-font-body);
  font-size: 14px;
  color: var(--tt-text);
  transition: border-color .2s, box-shadow .25s, background .2s;
  outline: none;
}
.tt-input::placeholder { color: var(--tt-text-dim); }
.tt-input:hover, .tt-select:hover, .tt-textarea:hover { border-color: var(--tt-border-strong); }
.tt-input:focus, .tt-select:focus, .tt-textarea:focus {
  border-color: var(--tt-green);
  background: var(--tt-surface-2);
  box-shadow: 0 0 0 4px var(--tt-green-08), var(--tt-glow-sm);
}
.tt-textarea { resize: vertical; min-height: 110px; }

.tt-field { display: block; }
.tt-label {
  display: block;
  font-family: var(--tt-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-text-muted);
  margin-bottom: 8px;
}

.tt-input-icon {
  position: relative;
  display: flex; align-items: center;
}
.tt-input-icon svg {
  position: absolute; left: 14px;
  width: 16px; height: 16px;
  color: var(--tt-text-dim);
  pointer-events: none;
}
.tt-input-icon .tt-input { padding-left: 42px; }
.tt-input-icon:focus-within svg { color: var(--tt-green); }

.tt-checkbox, .tt-radio {
  appearance: none;
  width: 18px; height: 18px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border-strong);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all .2s;
}
.tt-radio { border-radius: 50%; }
.tt-checkbox:checked, .tt-radio:checked {
  background: var(--tt-green);
  border-color: var(--tt-green);
  box-shadow: 0 0 10px var(--tt-green-50);
}
.tt-checkbox:checked::after {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' stroke='%23001a10' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.tt-radio:checked::after {
  content: "";
  position: absolute; inset: 4px;
  background: #001a10;
  border-radius: 50%;
}

/* Toggle */
.tt-toggle {
  appearance: none;
  width: 38px; height: 22px;
  background: var(--tt-surface-2);
  border: 1px solid var(--tt-border-strong);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: all .25s;
}
.tt-toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--tt-text-muted);
  transition: all .25s;
}
.tt-toggle:checked {
  background: var(--tt-green-15);
  border-color: var(--tt-green);
}
.tt-toggle:checked::after {
  left: 18px;
  background: var(--tt-green);
  box-shadow: 0 0 10px var(--tt-green-50);
}

/* ---------- 8. CARDS ---------- */
.tt-card {
  position: relative;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  padding: var(--tt-s-5);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.tt-card:hover {
  border-color: var(--tt-border-green);
  box-shadow: 0 0 0 1px var(--tt-border-green), 0 0 40px -10px var(--tt-green-30);
}

/* HUD corner brackets — adds the tracking/targeting feel */
.tt-card--hud { padding: var(--tt-s-6); }
.tt-card--hud::before,
.tt-card--hud::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--tt-green);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity .25s, width .25s, height .25s;
}
.tt-card--hud::before {
  top: 10px; left: 10px;
  border-right: none; border-bottom: none;
}
.tt-card--hud::after {
  bottom: 10px; right: 10px;
  border-left: none; border-top: none;
}
.tt-card--hud:hover::before,
.tt-card--hud:hover::after { width: 26px; height: 26px; opacity: 1; }

/* ---------- 9. BADGES & CHIPS ---------- */
.tt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--tt-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--tt-r-sm);
  background: var(--tt-green-08);
  color: var(--tt-green);
  border: 1px solid var(--tt-border-green);
  line-height: 1.2;
}
.tt-badge--solid { background: var(--tt-green); color: #03110A; border-color: var(--tt-green); }
.tt-badge--neutral { background: var(--tt-surface-2); color: var(--tt-text-muted); border-color: var(--tt-border-strong); }
.tt-badge--loss { background: rgba(255,77,109,0.10); color: var(--tt-loss); border-color: rgba(255,77,109,0.30); }
.tt-badge--push { background: rgba(255,210,61,0.10); color: var(--tt-push); border-color: rgba(255,210,61,0.30); }
.tt-badge--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
  animation: tt-blip 1.2s ease-in-out infinite;
}

/* W/L dot streak */
.tt-streak { display: inline-flex; gap: 4px; }
.tt-streak .d {
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--tt-surface-3);
}
.tt-streak .d.w { background: var(--tt-win); box-shadow: 0 0 6px var(--tt-green-50); }
.tt-streak .d.l { background: var(--tt-loss); }
.tt-streak .d.p { background: var(--tt-push); }

/* ---------- 10. STATS ---------- */
.tt-stat { display: flex; flex-direction: column; gap: 4px; }
.tt-stat__label {
  font-family: var(--tt-font-mono);
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--tt-text-dim);
}
.tt-stat__value {
  font-family: var(--tt-font-mono);
  font-size: 28px; font-weight: 500;
  color: var(--tt-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.tt-stat__value.positive { color: var(--tt-win); }
.tt-stat__value.negative { color: var(--tt-loss); }

/* ---------- 11. TIPSTER CARD ---------- */
.tt-tipster {
  position: relative;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  padding: 22px;
  overflow: hidden;
  transition: all .3s;
}
.tt-tipster::before {
  /* faint radar grid in background */
  content: "";
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(circle at center, transparent 28%, var(--tt-green-04) 28.5%, transparent 29%),
    radial-gradient(circle at center, transparent 48%, var(--tt-green-04) 48.5%, transparent 49%),
    radial-gradient(circle at center, transparent 68%, var(--tt-green-04) 68.5%, transparent 69%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
}
.tt-tipster:hover {
  border-color: var(--tt-border-green);
  transform: translateY(-2px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7), 0 0 40px -10px var(--tt-green-30);
}
.tt-tipster:hover::before { opacity: 1; }

.tt-tipster__head {
  display: flex; align-items: center; gap: 14px;
  position: relative;
}
.tt-tipster__avatar {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--tt-surface-2);
  border: 1px solid var(--tt-border-green);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--tt-font-display);
  font-weight: 600;
  color: var(--tt-green);
  flex-shrink: 0;
}
.tt-tipster__avatar::before,
.tt-tipster__avatar::after {
  content: "";
  position: absolute;
  border: 1px solid var(--tt-border-green);
  border-radius: 50%;
  inset: -8px;
  opacity: 0.5;
}
.tt-tipster__avatar::after { inset: -16px; opacity: 0.25; }

.tt-tipster__name {
  font-family: var(--tt-font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--tt-text);
  display: flex; align-items: center; gap: 6px;
}
.tt-tipster__verify {
  width: 14px; height: 14px; color: var(--tt-green);
}
.tt-tipster__meta {
  font-family: var(--tt-font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--tt-text-muted); text-transform: uppercase;
  margin-top: 2px;
}

.tt-tipster__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px 0;
  margin: 18px 0;
  border-top: 1px dashed var(--tt-border);
  border-bottom: 1px dashed var(--tt-border);
  position: relative;
}
.tt-tipster__stat-label {
  font-family: var(--tt-font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tt-text-dim);
  margin-bottom: 4px;
}
.tt-tipster__stat-val {
  font-family: var(--tt-font-mono);
  font-size: 22px; font-weight: 500;
  color: var(--tt-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tt-tipster__stat-val.positive { color: var(--tt-win); }

.tt-tipster__foot {
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
}

/* ---------- 12. NAV / HEADER ---------- */
.tt-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5,7,6,0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--tt-border);
}
.tt-header__inner {
  max-width: var(--tt-container);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex; align-items: center; gap: 32px;
}
.tt-header__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--tt-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--tt-text);
  text-decoration: none;
}
.tt-header__nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: 24px;
}
.tt-header__nav a {
  position: relative;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--tt-text-muted);
  text-decoration: none;
  border-radius: var(--tt-r-sm);
  transition: color .2s, background .2s;
}
.tt-header__nav a:hover { color: var(--tt-text); background: var(--tt-green-04); }
.tt-header__nav a.is-active {
  color: var(--tt-green);
  background: var(--tt-green-08);
}
.tt-header__nav a.is-active::after {
  content: ""; position: absolute;
  left: 14px; right: 14px; bottom: 2px; height: 1px;
  background: var(--tt-green);
  box-shadow: 0 0 8px var(--tt-green);
}
.tt-header__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ── Header search (desktop) ────────────────────────────────── */
.tt-header__search {
  position: relative;
  flex: 1;
  max-width: 600px;
}
/* Ajuste de altura del input del directorio cuando está en el header */
.tt-header__search-wrap .tt-dir-search-input {
  height: 42px !important;
  font-size: 14px !important;
}
.tt-header__search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--tt-surface-2);
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-r-md);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  z-index: 200;
  display: none;
}
.tt-header__search-results.is-open { display: block; }
.tt-header__search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  text-decoration: none;
  color: var(--tt-text-muted);
  font-size: 13px;
  border-bottom: 1px solid var(--tt-border);
  transition: background .15s, color .15s;
}
.tt-header__search-item:last-child { border-bottom: none; }
.tt-header__search-item:hover { background: var(--tt-green-08); color: var(--tt-text); }
.tt-header__search-item svg { width: 13px; height: 13px; color: var(--tt-text-dim); flex-shrink: 0; }
.tt-header__search-empty {
  padding: 14px 16px;
  font-size: 12px;
  color: var(--tt-text-dim);
  text-align: center;
}

/* ── Hamburger ──────────────────────────────────────────────── */
.tt-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px; height: 38px;
  padding: 0;
  background: var(--tt-surface-2);
  border: 1.5px solid var(--tt-border-strong);
  border-radius: var(--tt-r-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .2s, background .2s;
}
.tt-header__burger:hover {
  border-color: var(--tt-green);
  background: var(--tt-green-08);
}
.tt-header__burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--tt-text-muted);
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
  transform-origin: center;
}
.tt-header__burger:hover span,
.tt-header__burger.is-open span { background: var(--tt-green); }
.tt-header__burger.is-open { border-color: var(--tt-green); background: var(--tt-green-08); }
.tt-header__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.tt-header__burger.is-open span:nth-child(2) { opacity: 0; }
.tt-header__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile drawer ──────────────────────────────────────────── */
.tt-header__drawer {
  display: none;
  border-top: 1px solid var(--tt-border);
  background: var(--tt-surface-1);
  padding: 8px 0 12px;
}
.tt-header__drawer.is-open { display: block; }
.tt-header__drawer a {
  display: block;
  padding: 12px 24px;
  font-size: 15px;
  color: var(--tt-text-muted);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.tt-header__drawer a:hover { color: var(--tt-green); background: var(--tt-green-04); }

/* ── Mobile search button ───────────────────────────────────── */
.tt-header__search-btn {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--tt-surface-2);
  border: 1.5px solid var(--tt-border-strong);
  border-radius: var(--tt-r-sm);
  color: var(--tt-text-muted);
  font-size: 13px;
  font-family: var(--tt-font-display);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.tt-header__search-btn:hover { border-color: var(--tt-green); color: var(--tt-green); }
.tt-header__search-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tt-header__nav    { display: none !important; }
  .tt-header__search { display: none !important; }
  .tt-header__search-btn { display: flex; }
  .tt-header__burger { display: flex; }
  .tt-header__right  { gap: 8px; }
  .tt-header__inner  { gap: 12px; padding: 12px 16px; }
}

/* ---------- 13. FOOTER ---------- */
.tt-footer {
  background: var(--tt-bg-deep);
  border-top: 1px solid var(--tt-border);
  padding: 64px 24px 32px;
  position: relative;
  overflow: hidden;
}
.tt-footer__inner {
  max-width: var(--tt-container);
  margin: 0 auto;
  position: relative; z-index: 1;
}
.tt-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.tt-footer h5 {
  font-family: var(--tt-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-text-muted);
  margin: 0 0 16px;
}
.tt-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tt-footer a { color: var(--tt-text-muted); text-decoration: none; font-size: 14px; transition: color .2s; }
.tt-footer a:hover { color: var(--tt-green); }
.tt-footer__bottom {
  border-top: 1px solid var(--tt-border);
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--tt-font-mono);
  font-size: 11px;
  color: var(--tt-text-dim);
  letter-spacing: 0.1em;
}

/* ---------- 14. SIGNATURE BACKGROUNDS / EFFECTS ---------- */
/* Faint pixel grid */
.tt-bg-grid {
  background-color: var(--tt-bg);
  background-image:
    linear-gradient(var(--tt-green-04) 1px, transparent 1px),
    linear-gradient(90deg, var(--tt-green-04) 1px, transparent 1px);
  background-size: 48px 48px;
}
/* Radial spotlight from top */
.tt-bg-spotlight {
  background:
    radial-gradient(1100px 600px at 50% -200px, var(--tt-green-15), transparent 60%),
    var(--tt-bg);
}
/* Radar rings centered */
.tt-bg-rings {
  position: relative;
  overflow: hidden;
}
.tt-bg-rings::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1400px; height: 1400px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0, transparent 198px, var(--tt-green-15) 199px, transparent 200px),
    radial-gradient(circle, transparent 0, transparent 298px, var(--tt-green-15) 299px, transparent 300px),
    radial-gradient(circle, transparent 0, transparent 448px, var(--tt-green-15) 449px, transparent 450px),
    radial-gradient(circle, transparent 0, transparent 598px, var(--tt-green-15) 599px, transparent 600px);
  pointer-events: none;
}
/* Scanline overlay (very subtle CRT) */
.tt-bg-scanlines::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom,
    transparent 0, transparent 2px,
    rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 3px);
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Animated radar sweep — use inside a square container */
.tt-radar {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,232,159,0.04) 0%, transparent 70%);
  overflow: hidden;
}
.tt-radar::before {
  /* concentric rings */
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0, transparent calc(20% - 1px), var(--tt-green-30) calc(20%), transparent calc(20% + 1px)),
    radial-gradient(circle, transparent 0, transparent calc(40% - 1px), var(--tt-green-30) calc(40%), transparent calc(40% + 1px)),
    radial-gradient(circle, transparent 0, transparent calc(60% - 1px), var(--tt-green-30) calc(60%), transparent calc(60% + 1px)),
    radial-gradient(circle, transparent 0, transparent calc(80% - 1px), var(--tt-green-30) calc(80%), transparent calc(80% + 1px));
}
.tt-radar::after {
  /* rotating sweep */
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    var(--tt-green-30) 30deg,
    var(--tt-green) 55deg,
    transparent 60deg,
    transparent 360deg);
  animation: tt-spin 4s linear infinite;
  mix-blend-mode: screen;
}
.tt-radar__crosshair {
  position: absolute; inset: 0;
  pointer-events: none;
}
.tt-radar__crosshair::before,
.tt-radar__crosshair::after {
  content: "";
  position: absolute;
  background: var(--tt-green-15);
}
.tt-radar__crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }
.tt-radar__crosshair::after  { top: 0; bottom: 0; left: 50%; width: 1px; }
.tt-radar__blip {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tt-green);
  box-shadow: 0 0 12px var(--tt-green);
  animation: tt-blip 2s ease-in-out infinite;
  transform: translate(-50%, -50%);
}

/* ---------- 15. KEYFRAMES ---------- */
@keyframes tt-spin { to { transform: rotate(360deg); } }
@keyframes tt-blip {
  0%, 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 0.35; transform: translate(-50%,-50%) scale(0.85); }
}
@keyframes tt-pulse-ring {
  0%   { transform: translate(-50%,-50%) scale(0.6); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
}
@keyframes tt-flicker {
  0%, 19%, 21%, 100% { opacity: 1; }
  20% { opacity: 0.6; }
}
@keyframes tt-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Pulse-ring (use on any positioned element to emit pulses) */
.tt-pulse-ring {
  position: relative;
}
.tt-pulse-ring::before,
.tt-pulse-ring::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  border: 1px solid var(--tt-green);
  border-radius: 50%;
  opacity: 0;
  animation: tt-pulse-ring 2.4s ease-out infinite;
}
.tt-pulse-ring::after { animation-delay: 1.2s; }

/* Mono-numeric data shimmer (for loading or "live" feeds) */
.tt-shimmer-num {
  background: linear-gradient(90deg,
    var(--tt-text) 0%, var(--tt-green-bright) 50%, var(--tt-text) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tt-shimmer 3s linear infinite;
}

/* ---------- 16. UTILS ---------- */
.tt-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tt-border-strong), transparent);
  margin: var(--tt-s-6) 0;
}
.tt-divider--green {
  background: linear-gradient(90deg, transparent, var(--tt-green), transparent);
  box-shadow: 0 0 14px var(--tt-green-50);
}
.tt-glow-text { text-shadow: 0 0 18px var(--tt-green-50); }
.tt-hide { display: none !important; }

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width: 900px) {
  .tt-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .tt-header__nav { display: none; }
}
@media (max-width: 600px) {
  .tt-footer__grid { grid-template-columns: 1fr; }
  .tt-tipster__stats { gap: 10px; }
  .tt-tipster__stat-val { font-size: 18px; }
}

/* ---------- 18. DIRECTORY PAGE ---------- */
.tt-directory__controls {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 32px;
}
.tt-directory__search {
  flex-grow: 1;
  max-width: 400px;
}
.tt-directory__filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.tt-directory__select {
  min-width: 160px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%234F5C57' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.tt-directory__select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%232EE89F' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tt-directory__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.tt-directory__count {
  font-family: var(--tt-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-text-dim);
}
.tt-directory__reset {
  font-family: var(--tt-font-mono);
  font-size: 11px;
  color: var(--tt-text-dim);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--tt-r-sm);
  transition: color .2s, background .2s;
}
.tt-directory__reset:hover {
  color: var(--tt-green);
  background: var(--tt-green-08);
}
.tt-directory__empty {
  display: none;
  text-align: center;
  padding: 64px 24px;
  color: var(--tt-text-dim);
  font-family: var(--tt-font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
}
.tt-directory__empty.is-visible { display: block; }

@media (max-width: 768px) {
  .tt-directory__controls {
    flex-direction: column;
    align-items: stretch;
  }
  .tt-directory__search {
    max-width: 100%;
    width: 100%;
  }
  .tt-directory__filters {
    width: 100%;
  }
  .tt-directory__select {
    min-width: 0;
    flex: 1;
  }
}

/* ---------- 19. RANKING TABLE ---------- */
.tt-ranking-table {
  width: 100%;
  border-radius: var(--tt-r-lg);
  overflow: hidden;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-collapse: separate;
  border-spacing: 0;
}
.tt-ranking-table thead tr {
  background: var(--tt-bg-deep);
}
.tt-ranking-table th {
  font-family: var(--tt-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-text-dim);
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--tt-border);
  font-weight: 500;
  white-space: nowrap;
}
.tt-ranking-table th:first-child { width: 48px; text-align: center; }
.tt-ranking-table tbody tr {
  border-bottom: 1px solid var(--tt-border);
  transition: background 0.2s;
  cursor: pointer;
}
.tt-ranking-table tbody tr:last-child { border-bottom: none; }
.tt-ranking-table tbody tr:hover { background: var(--tt-surface-2); }
.tt-ranking-table td {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--tt-text-muted);
  vertical-align: middle;
  border-bottom: 1px solid var(--tt-border);
}
.tt-ranking-table tbody tr:last-child td { border-bottom: none; }
td.tt-rank-cell {
  font-family: var(--tt-font-mono);
  font-size: 12px;
  color: var(--tt-text-dim);
  font-weight: 500;
  text-align: center;
  width: 48px;
}
td.tt-rank-cell.top1 { color: var(--tt-green); font-weight: 600; }
td.tt-rank-cell.top2 { color: #C0C0C0; font-weight: 600; }
td.tt-rank-cell.top3 { color: #CD7F32; font-weight: 600; }
.tt-tipster-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tt-tipster-name-cell img,
.tt-tipster-name-cell .tt-avatar-initial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--tt-border-green);
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tt-font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--tt-green);
  background: var(--tt-surface-2);
}
.tt-tipster-name-cell .name {
  font-weight: 600;
  color: var(--tt-text);
  font-size: 14px;
  text-decoration: none;
  transition: color .2s;
}
.tt-tipster-name-cell .name:hover { color: var(--tt-green); }
.tt-ranking-table .tt-val-positive { color: var(--tt-win); font-family: var(--tt-font-mono); }
.tt-ranking-table .tt-val-negative { color: var(--tt-loss); font-family: var(--tt-font-mono); }
.tt-ranking-table .tt-val-neutral  { color: var(--tt-text-muted); font-family: var(--tt-font-mono); }

@media (max-width: 768px) {
  .tt-col-hide-mobile { display: none; }
  .tt-ranking-table td,
  .tt-ranking-table th { padding: 12px 12px; }
  .tt-ranking-table th:first-child,
  td.tt-rank-cell { width: 36px; }
}

/* ---------- 20. BLOG PAGE ---------- */

.tt-blog__chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 14px;
  margin-bottom: 4px;
}
.tt-blog__chips::-webkit-scrollbar { display: none; }

.tt-blog__meta {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

/* Grid — featured first row spans full width */
.tt-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .tt-blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tt-blog__grid { grid-template-columns: 1fr; }
}

/* Featured card — image left, text right */
.tt-blog-card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
  min-height: 340px;
}
@media (max-width: 700px) {
  .tt-blog-card--featured {
    flex-direction: column;
    min-height: 0;
  }
}

/* Base card */
.tt-blog-card {
  position: relative;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.tt-blog-card:hover {
  border-color: var(--tt-border-green);
  transform: translateY(-2px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7), 0 0 40px -10px var(--tt-green-30);
}

/* Stretched link — z-index:1 ensures it sits above non-positioned flex children */
.tt-blog-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* Image */
.tt-blog-card__img {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.tt-blog-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.tt-blog-card:hover .tt-blog-card__img img {
  transform: scale(1.04);
}

/* Regular card image height */
.tt-blog-grid .tt-blog-card:not(.tt-blog-card--featured) .tt-blog-card__img,
.tt-blog__grid .tt-blog-card:not(.tt-blog-card--featured) .tt-blog-card__img {
  height: 200px;
}

/* Featured card — image takes fixed left portion */
.tt-blog-card--featured .tt-blog-card__img {
  width: 48%;
  flex-shrink: 0;
  height: auto;
}
.tt-blog-card--featured .tt-blog-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 700px) {
  .tt-blog-card--featured .tt-blog-card__img {
    width: 100%;
    height: 220px;
  }
}

/* No image placeholder */
.tt-blog-card__no-img {
  background: var(--tt-surface-2);
  padding: 24px;
  display: flex;
  align-items: flex-start;
}

/* Category badge on image */
.tt-blog-card__cat {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(5,7,6,0.75) !important;
}

/* Body */
.tt-blog-card__body {
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  position: relative;
  z-index: 1;
}
.tt-blog-card--featured .tt-blog-card__body {
  justify-content: center;
  padding: 40px 44px;
  gap: 14px;
}
@media (max-width: 700px) {
  .tt-blog-card--featured .tt-blog-card__body {
    padding: 24px 22px;
  }
}

.tt-blog-card__title {
  font-family: var(--tt-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--tt-text);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  transition: color .2s;
}
.tt-blog-card--featured .tt-blog-card__title {
  font-size: clamp(20px, 2.8vw, 30px);
  letter-spacing: -0.02em;
}
.tt-blog-card:hover .tt-blog-card__title { color: var(--tt-green); }

.tt-blog-card__excerpt {
  font-size: 14px;
  color: var(--tt-text-muted);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-blog-card--featured .tt-blog-card__excerpt {
  -webkit-line-clamp: 4;
  font-size: 15px;
}

.tt-blog-card__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--tt-border);
}
.tt-blog-card__date,
.tt-blog-card__read {
  font-family: var(--tt-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--tt-text-dim);
  text-transform: uppercase;
}
.tt-blog-card__read::before {
  content: "·";
  margin-right: 12px;
  color: var(--tt-text-dim);
}

/* Empty state */
.tt-blog__empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--tt-text-dim);
  font-family: var(--tt-font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
}

/* ---------- 21. DIRECTORY V2 ---------- */

/* Tipsters grid */
.tipsters-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) {
  .tipsters-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .tipsters-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Controls layout */
.tt-directory__controls-v2 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.tt-dir-top-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
@media (max-width: 640px) {
  .tt-dir-top-row { flex-direction: column; }
  .tt-dir-top-row > * { width: 100%; }
}

/* Big search bar */
.tt-dir-search-wrap {
  position: relative !important;
  flex: 1 1 auto;
}
.tt-dir-search-wrap .tt-dir-search-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--tt-text-dim) !important;
  pointer-events: none !important;
  transition: color .2s;
  z-index: 2;
}
.tt-dir-search-input {
  display: block !important;
  width: 100% !important;
  height: 52px !important;
  background: var(--tt-surface) !important;
  border: 1.5px solid var(--tt-border-strong) !important;
  border-radius: var(--tt-r-lg) !important;
  padding: 0 16px 0 46px !important;
  font-family: var(--tt-font-body) !important;
  font-size: 15px !important;
  color: var(--tt-text) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .25s, background .2s;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.tt-dir-search-input::placeholder { color: var(--tt-text-dim) !important; }
.tt-dir-search-input:hover { border-color: var(--tt-border-green) !important; }
.tt-dir-search-input:focus {
  border-color: var(--tt-green) !important;
  background: var(--tt-surface-2) !important;
  box-shadow: 0 0 0 3px var(--tt-green-08) !important;
}
.tt-dir-search-wrap:focus-within .tt-dir-search-icon { color: var(--tt-green) !important; }

/* Country & Sort selects */
.tt-dir-select-wrap {
  position: relative;
  flex-shrink: 0;
  min-width: 0;
}
.tt-dir-select-wrap::after {
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--tt-text-dim);
  pointer-events: none;
  transition: border-top-color .2s;
}
.tt-dir-select-wrap:focus-within::after { border-top-color: var(--tt-green); }
.tt-dir-select {
  height: 44px;
  padding: 0 38px 0 14px;
  background: var(--tt-surface);
  border: 1.5px solid var(--tt-border-strong);
  border-radius: var(--tt-r-md);
  color: var(--tt-text-muted);
  font-family: var(--tt-font-body);
  font-size: 14px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s, color .2s;
  white-space: nowrap;
}
.tt-dir-select:hover { border-color: var(--tt-border-green); }
.tt-dir-select:focus { border-color: var(--tt-green); color: var(--tt-text); }

/* Sport chips row */
.tt-dir-chips-label {
  font-family: var(--tt-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-text-dim);
  flex-shrink: 0;
  align-self: center;
}
.tt-dir-chips-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0;
}
.tt-dir-chips-scroll::-webkit-scrollbar { display: none; }
.tt-dir-chip {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 12px !important;
  font-family: var(--tt-font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  border: 1px solid rgba(232,245,238,0.12) !important;
  background: #0B100D !important;
  color: #6B8070 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  white-space: nowrap !important;
  user-select: none;
  line-height: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
}
.tt-dir-chip:hover {
  border-color: rgba(46,232,159,0.3) !important;
  color: #E8F5EE !important;
  background: rgba(46,232,159,0.06) !important;
}
.tt-dir-chip.is-active {
  border-color: #2EE89F !important;
  background: rgba(46,232,159,0.14) !important;
  color: #2EE89F !important;
  box-shadow: 0 0 10px rgba(46,232,159,0.25) !important;
}

/* Clear filters — small subtle ghost button */
.tt-dir-clear {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  font-family: var(--tt-font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  border: 1px solid rgba(232,245,238,0.14) !important;
  background: transparent !important;
  color: #6B8070 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.tt-dir-clear:hover {
  border-color: rgba(46,232,159,0.3) !important;
  color: #2EE89F !important;
  background: rgba(46,232,159,0.06) !important;
}
.tt-dir-clear svg { width: 9px; height: 9px; flex-shrink: 0; }

/* Meta bar */
.tt-directory__meta-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* Clickable card — stretched link */
.tt-dir-card { cursor: pointer; }
.tt-dir-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
/* Content sections only need position:relative so inner elements (buttons) can use z-index.
   No explicit z-index here so they stay below the link (z-index:auto < z-index:1). */
.tt-dir-card .tt-tipster__head,
.tt-dir-card .tt-tipster__stats,
.tt-dir-card .tt-tipster__foot {
  position: relative;
}
/* Buttons and name anchors must sit above the stretched link */
.tt-dir-card .tt-btn { position: relative; z-index: 2; }
.tt-dir-card .tt-tipster__name a {
  pointer-events: none;
}

/* ================================================================
   21. BLOG ARTICLE — single post
   ================================================================ */

/* ── Reading progress bar (fixed top) ──────────────────────────── */
.tt-reading-bar {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--tt-green), var(--tt-green-bright));
  box-shadow: 0 0 12px var(--tt-green-50);
  z-index: 9999;
  transition: width .1s linear;
}

/* ── Outer wrap ─────────────────────────────────────────────────── */
.tt-article-wrap {
  padding: 0 0 96px;
}

/* Forzar fondo bg en single post (Elementor/Hello puede poner fondo blanco) */
body.single-post,
body.single-post .site,
body.single-post .site-content,
body.single-post #page,
body.single-post .page-content {
  background: var(--tt-bg) !important;
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.tt-article__breadcrumb {
  font-family: var(--tt-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--tt-text-dim);
  padding: 24px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tt-article__breadcrumb a {
  color: var(--tt-text-dim);
  text-decoration: none;
  transition: color .2s;
}
.tt-article__breadcrumb a:hover { color: var(--tt-green); }
.tt-article__breadcrumb .sep { opacity: 0.4; }

/* ── Hero ───────────────────────────────────────────────────────── */
.tt-article__hero {
  padding: 32px 0 40px;
  max-width: 760px;
}

.tt-article__cat {
  margin-bottom: 20px;
  text-decoration: none;
}

.tt-article__title {
  font-family: var(--tt-font-display);
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--tt-text);
  margin: 0 0 24px;
}

.tt-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--tt-text-dim);
  font-family: var(--tt-font-mono);
  margin-bottom: 32px;
}
.tt-article__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tt-article__meta-item svg { opacity: 0.6; flex-shrink: 0; }
.tt-article__meta-sep { opacity: 0.3; }

/* ── Cover image ────────────────────────────────────────────────── */
.tt-article__cover {
  width: 100%;
  max-width: 760px;
  border-radius: var(--tt-r-lg);
  overflow: hidden;
  border: 1px solid var(--tt-border);
  margin-bottom: 8px;
}
.tt-article__cover-img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 420px;
  object-fit: cover;
}

/* ── Two-column layout ──────────────────────────────────────────── */
.tt-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) 280px;
  gap: 40px;
  align-items: start;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.tt-article__sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tt-article__cta-card { padding: 22px; }
.tt-article__cta-text {
  font-size: 13px;
  color: var(--tt-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ToC */
.tt-article__toc { padding: 20px 22px; }
.tt-article__toc-title {
  font-family: var(--tt-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.tt-article__toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tt-article__toc-item { counter-increment: toc; }
.tt-article__toc-link {
  font-size: 12px;
  color: var(--tt-text-muted);
  text-decoration: none;
  display: block;
  padding: 5px 8px;
  border-radius: var(--tt-r-sm);
  border-left: 2px solid transparent;
  transition: color .2s, border-color .2s, background .2s;
  line-height: 1.4;
}
.tt-article__toc-link:hover {
  color: var(--tt-green);
  border-left-color: var(--tt-green);
  background: var(--tt-green-04);
}

/* ── Prose (article body) ───────────────────────────────────────── */
.tt-prose {
  color: var(--tt-text-muted);
  font-size: 16px;
  line-height: 1.8;
}

.tt-prose h1,
.tt-prose h2,
.tt-prose h3,
.tt-prose h4 {
  font-family: var(--tt-font-display);
  color: var(--tt-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.tt-prose h2 {
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 600;
  margin-top: 52px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tt-border);
  position: relative;
}
/* Accent left line on h2 */
.tt-prose h2::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 4px;
  bottom: 12px;
  width: 3px;
  background: linear-gradient(180deg, var(--tt-green), transparent);
  border-radius: 2px;
}

.tt-prose h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 36px;
  margin-bottom: 10px;
  color: var(--tt-text);
}

.tt-prose h4 {
  font-size: 15px;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 8px;
  color: var(--tt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--tt-font-mono);
}

.tt-prose p { margin: 0 0 20px; }
.tt-prose p:last-child { margin-bottom: 0; }

.tt-prose a {
  color: var(--tt-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s;
}
.tt-prose a:hover { color: var(--tt-green-bright); }

.tt-prose strong { color: var(--tt-text); font-weight: 600; }
.tt-prose em { color: var(--tt-text); font-style: italic; }

/* Lists */
.tt-prose ul,
.tt-prose ol {
  padding-left: 0;
  margin: 0 0 24px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tt-prose ul li,
.tt-prose ol li {
  padding-left: 24px;
  position: relative;
  color: var(--tt-text-muted);
  line-height: 1.7;
}
.tt-prose ul li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--tt-green);
  font-size: 12px;
  top: 4px;
}
.tt-prose ol {
  counter-reset: ol-list;
}
.tt-prose ol li {
  counter-increment: ol-list;
}
.tt-prose ol li::before {
  content: counter(ol-list, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--tt-green);
  font-family: var(--tt-font-mono);
  font-size: 11px;
  font-weight: 600;
  top: 3px;
}

/* Blockquote */
.tt-prose blockquote {
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--tt-green-04);
  border-left: 3px solid var(--tt-green);
  border-radius: 0 var(--tt-r-md) var(--tt-r-md) 0;
}
.tt-prose blockquote p {
  font-size: 17px;
  color: var(--tt-text);
  font-style: italic;
  line-height: 1.7;
  margin: 0;
}
.tt-prose blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--tt-font-mono);
  font-size: 11px;
  font-style: normal;
  color: var(--tt-green);
  letter-spacing: 0.1em;
}

/* Inline code */
.tt-prose code {
  font-family: var(--tt-font-mono);
  font-size: 13px;
  background: var(--tt-surface-2);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-sm);
  padding: 2px 6px;
  color: var(--tt-green);
}

/* Code blocks */
.tt-prose pre {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-md);
  padding: 20px 24px;
  overflow-x: auto;
  margin: 28px 0;
}
.tt-prose pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--tt-text-muted);
  border-radius: 0;
}

/* Tables */
.tt-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 14px;
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-r);
  overflow: hidden;
}
.tt-prose th {
  font-family: var(--tt-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--tt-border-strong);
  background: #1e1e1e;
}
.tt-prose td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--tt-border);
  color: rgba(255,255,255,.85);
  vertical-align: middle;
}
.tt-prose tr:last-child td { border-bottom: none; }
.tt-prose tr:nth-child(even) td { background: rgba(255,255,255,.03); }
.tt-prose tr:hover td { background: var(--tt-green-04); color: #fff; }

/* Images */
.tt-prose img {
  max-width: 100%;
  border-radius: var(--tt-r-lg);
  border: 1px solid var(--tt-border);
  display: block;
  margin: 28px auto;
}
.tt-prose figure { margin: 32px 0; }
.tt-prose figcaption {
  text-align: center;
  font-family: var(--tt-font-mono);
  font-size: 11px;
  color: var(--tt-text-dim);
  margin-top: 8px;
  letter-spacing: 0.06em;
}

/* Horizontal rule */
.tt-prose hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, var(--tt-border-green), transparent);
  margin: 40px 0;
}

/* ── Tags ───────────────────────────────────────────────────────── */
.tt-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--tt-border);
}
.tt-article__tags a {
  font-family: var(--tt-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--tt-text-dim);
  background: var(--tt-surface-2);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-full);
  padding: 4px 12px;
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.tt-article__tags a:hover {
  color: var(--tt-green);
  border-color: var(--tt-border-green);
  background: var(--tt-green-04);
}

/* ── Prev / Next nav ────────────────────────────────────────────── */
.tt-article__post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
}
.tt-article__nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
.tt-article__nav-link:hover {
  border-color: var(--tt-border-green);
  background: var(--tt-green-04);
}
.tt-article__nav-link--next {
  text-align: right;
}
.tt-article__nav-dir {
  font-family: var(--tt-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--tt-green);
  text-transform: uppercase;
}
.tt-article__nav-title {
  font-family: var(--tt-font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--tt-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tt-article__layout {
    grid-template-columns: 1fr;
  }
  .tt-article__sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .tt-article__hero { max-width: 100%; }
}

@media (max-width: 680px) {
  .tt-article__title {
    font-size: clamp(26px, 7vw, 36px);
  }
  .tt-prose h2::before { display: none; }
  .tt-article__sidebar {
    grid-template-columns: 1fr;
  }
  .tt-article__post-nav {
    grid-template-columns: 1fr;
  }
}

/* ── TELEGRAM CHANNEL BUTTON ───────────────────────────────── */
.tt-single__tg-wrap {
  margin-top: 12px;
}
.tt-btn-telegram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  background: rgba(34,158,217,0.08);
  border: 1px solid rgba(34,158,217,0.40);
  border-radius: var(--tt-r-md);
  color: #2AABEE;
  font-family: var(--tt-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
}
.tt-btn-telegram:hover {
  background: rgba(34,158,217,0.15);
  border-color: rgba(34,158,217,0.75);
  color: #2AABEE;
  box-shadow: 0 0 20px rgba(34,158,217,0.20);
  transform: translateY(-1px);
}
.tt-btn-telegram:active { transform: translateY(0); }
.tt-btn-telegram__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── BETSTATSPRO VERIFIED BANNER (debajo del streak) ────────── */
.tt-betstatspro-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 28px;
  margin-top: 12px;
  margin-bottom: 32px;
  background: linear-gradient(100deg, rgba(0,200,120,0.10) 0%, rgba(0,200,120,0.04) 50%, var(--tt-surface-1) 100%);
  border: 1px solid rgba(0,200,120,0.35);
  border-radius: var(--tt-radius);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}
.tt-betstatspro-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(0,200,120,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.tt-betstatspro-banner:hover {
  border-color: rgba(0,200,120,0.60);
  background: linear-gradient(100deg, rgba(0,200,120,0.14) 0%, rgba(0,200,120,0.06) 50%, var(--tt-surface-1) 100%);
}
.tt-betstatspro-banner__left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.tt-betstatspro-banner__shield {
  width: 44px;
  height: 44px;
  color: var(--tt-win);
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(0,200,120,0.40));
}
.tt-betstatspro-banner__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tt-betstatspro-banner__label {
  font-family: var(--tt-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tt-win);
}
.tt-betstatspro-banner__logo {
  height: 28px;
  width: auto;
  display: block;
}
.tt-betstatspro-banner__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.tt-betstatspro-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(0,200,120,0.14);
  border: 1px solid rgba(0,200,120,0.45);
  border-radius: 6px;
  color: var(--tt-win);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.tt-betstatspro-banner:hover .tt-betstatspro-banner__cta {
  background: rgba(0,200,120,0.22);
  border-color: rgba(0,200,120,0.70);
}
.tt-betstatspro-banner__sub {
  font-size: 11px;
  color: var(--tt-text-dim);
  white-space: nowrap;
}
.tt-betstatspro-banner__sub strong {
  color: var(--tt-text-muted);
}
@media (max-width: 680px) {
  .tt-betstatspro-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
    gap: 16px;
  }
  .tt-betstatspro-banner__right {
    align-items: flex-start;
    width: 100%;
  }
  .tt-betstatspro-banner__cta {
    width: 100%;
    justify-content: center;
  }
  .tt-betstatspro-banner__sub { white-space: normal; }
}

/* ── BETSTATSPRO VERIFIED CARD (sidebar) ───────────────────── */
.tt-betstatspro-card {
  border: 1px solid rgba(0, 200, 120, 0.30);
  background: linear-gradient(135deg, rgba(0, 200, 120, 0.05) 0%, var(--tt-surface-1) 60%);
  position: relative;
  overflow: hidden;
}
.tt-betstatspro-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--tt-win), rgba(0, 200, 120, 0.3));
  border-radius: var(--tt-radius) var(--tt-radius) 0 0;
}
.tt-betstatspro-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tt-betstatspro-card__shield {
  width: 22px;
  height: 22px;
  color: var(--tt-win);
  flex-shrink: 0;
}
.tt-betstatspro-card__title {
  font-family: var(--tt-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tt-win);
}
.tt-betstatspro-card__desc {
  font-size: 12px;
  color: var(--tt-text-muted);
  line-height: 1.55;
  margin: 0 0 16px;
}
.tt-betstatspro-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(0, 200, 120, 0.10);
  border: 1px solid rgba(0, 200, 120, 0.35);
  border-radius: calc(var(--tt-radius) - 2px);
  color: var(--tt-win);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--tt-transition), border-color var(--tt-transition);
  margin-bottom: 12px;
}
.tt-betstatspro-card__cta:hover {
  background: rgba(0, 200, 120, 0.18);
  border-color: rgba(0, 200, 120, 0.60);
  color: var(--tt-win);
}
.tt-betstatspro-card__logo {
  height: 20px;
  width: auto;
  flex-shrink: 0;
}
.tt-betstatspro-card__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  color: var(--tt-text-dim);
  border-top: 1px solid var(--tt-border);
  padding-top: 10px;
  margin-top: 4px;
}
.tt-betstatspro-card__footer a {
  color: var(--tt-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tt-betstatspro-card__footer a:hover {
  color: var(--tt-win);
}